:root {
        --header-height: 90px;
        --footer-height: 48px;
        --background: #f4f5f7;
        --surface: #ffffff;
        --border: #dfe1e6;
        --text: #172b4d;
        --muted: #6b778c;
        --card-width: 490px;
        --card-height: 260px;
        --card-overlap: 55px;
        --card-horizontal-offset: 10px;
        --card-vertical-offset: 100px;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        color: var(--text);
        background: var(--background);
        overflow: hidden;
      }
      /* ============================================================
     HEADER
  ============================================================ */
      .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3000;
        min-height: var(--header-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
      }
      .site-title {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
        padding-left: 220px;
      }
      .profile-image {
        position: absolute;
        z-index: 3000;
        width: 200px;
        height: 200px;
        left: -30px;
        top: 0;
        object-fit: contain;
        border-radius: 50%;
      }
      .identity {
        display: flex;
        align-items: center;
        gap: 30px;
        min-width: 0;
      }
      .identity-name {
        font-size: 3rem;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
      }
      .identity-subtitle {
        min-width: 0;
      }
      .site-subtitle {
        color: var(--muted);
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 1.35;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(-20px);
        transition:
          opacity 1s ease,
          transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      .site-subtitle.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .site-subtitle div:first-child {
        font-weight: 700;
      }
      .site-subtitle div:nth-child(2) {
        font-size: 0.82rem;
      }
      .site-subtitle div:nth-child(3) {
        font-weight: 700;
      }
      /* ============================================================
     INTRO SCREEN
  ============================================================ */
      .intro-screen {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: var(--footer-height);
        left: 0;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--background);
        opacity: 1;
        visibility: visible;
        transition:
          opacity 0.8s ease,
          visibility 0.8s ease;
      }
      .intro-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: max-content;
        max-width: calc(100vw - 40px);
        text-align: center;
        transform: translateY(0) scale(1);
        transform-origin: center center;
        transition:
          transform 1.35s cubic-bezier(0.22, 0.61, 0.36, 1),
          opacity 1.35s ease;
      }
      .intro-screen.moving-to-header .intro-content {
        transform: translateY(calc(-50vh + 45px)) scale(0.35);
        opacity: 0;
      }
      .intro-line {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.8s ease,
          transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      .intro-line.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .intro-line.primary {
        font-size: 3rem;
        font-weight: 700;
        line-height: 1.15;
      }
      .intro-line.secondary {
        margin-top: 8px;
        color: var(--muted);
        font-size: 1.35rem;
        font-weight: 400;
        line-height: 1.4;
      }
      .intro-line.primary + .intro-line.secondary {
        margin-bottom: 42px;
      }
      /* ============================================================
     FOOTER
  ============================================================ */
      .site-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        height: var(--footer-height);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        color: var(--muted);
        font-size: 0.8rem;
        text-align: center;
        background: var(--surface);
        border-top: 1px solid var(--border);
      }
      /* ============================================================
     PAGE
  ============================================================ */
      .page {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: var(--footer-height);
        left: 0;
        display: flex;
        overflow: hidden;
      }
      /* ============================================================
     TIMELINE
  ============================================================ */
      .timeline-area {
        position: relative;
        flex: 1;
        min-width: 0;
        overflow: auto;
        margin-left: 50px;
        padding: 32px;
        overscroll-behavior: contain;
      }
      .timeline {
        position: relative;
        min-height: 900px;
        min-width: 1400px;
        width: 100%;
        height: 100%;
      }
      .column-label {
        position: absolute;
        top: -10px;
        z-index: 5;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--muted);
        visibility: hidden;
        opacity: 0;
        transition:
          opacity 0.8s ease,
          visibility 0.8s ease;
      }
      .column-label.visible {
        visibility: visible;
        opacity: 1;
      }
      .education-label {
        left: 12%;
      }
      .employment-label {
        right: 12%;
      }
      /* ============================================================
     FINAL CONTACT VIEW
  ============================================================ */
      .contact-view {
        position: fixed;
        top: 50%;
        left: calc(50% - 140px);
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.8s ease,
          visibility 0.8s ease;
        z-index: 50;
      }
      .contact-view.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .contact-vision {
        margin-bottom: 30px;
        font-size: 2.6rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        white-space: nowrap;
      }
      .contact-title {
        margin-bottom: 18px;
        font-size: 1.5rem;
        font-weight: 700;
      }
      .contact-details {
        color: var(--muted);
        font-size: 1.05rem;
        line-height: 1.9;
      }
      .contact-details a {
        color: var(--text);
        font-weight: 600;
        text-decoration: none;
      }
      .contact-details a:hover {
        text-decoration: underline;
      }
      /* ============================================================
     RIGHT SIDE
  ============================================================ */
      .right-panel {
        position: relative;
        width: 280px;
        min-width: 280px;
        display: flex;
        flex-direction: column;
        background: #e9ebee;
        border-left: 1px solid var(--border);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.8s ease,
          visibility 0.8s ease;
      }
      .right-panel.visible {
        opacity: 1;
        visibility: visible;
      }
      /* ============================================================
     CARD DECK
  ============================================================ */
      .deck-area {
        position: relative;
        width: 100%;
        height: 330px;
        min-height: 330px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e9ebee;
        overflow: hidden;
      }
      .deck {
        position: relative;
        width: 180px;
        height: 260px;
        perspective: 1200px;
      }
      .deck-card {
        position: absolute;
        width: 180px;
        height: 260px;
        cursor: pointer;
        transition: transform 0.25s ease;
      }
      #topDeckCard:hover {
        transform: translateY(-8px);
      }
      /* ============================================================
   PLAYGROUND
============================================================ */

.playground {
  position: relative;
  flex: 1;
  min-height: 0;

  display: flex;
  flex-direction: column;

  padding: 24px 16px 30px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fafc 100%
    );

  overflow: visible;
}

/*
 * Subtiler visueller Übergang zwischen
 * Kartenstapel und Playground
 */
.playground::before {
  content: "";

  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #dfe1e6 20%,
      #dfe1e6 80%,
      transparent
    );
}

/* ============================================================
   PLAYGROUND HEADER
============================================================ */

.playground-title {
  position: relative;

  flex: 0 0 auto;

  margin-bottom: 4px;

  color: #091e42;

  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.3px;

  line-height: 1.25;
  text-align: center;
}

.playground-subtitle {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 5px;

  color: #7a869a;

  font-size: 0.72rem;
  font-weight: 400;

  letter-spacing: 0.5px;

  line-height: 1.35;
  text-align: center;
}

/* ============================================================
   PLAYGROUND ITEMS CONTAINER
============================================================ */

.playground-items {
  position: relative;

  flex: 1;
  min-height: 0;

  display: flex;
  flex-direction: column;

  gap: 12px;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 10px 5px 20px;

  scrollbar-width: thin;
  scrollbar-color: #b7c3d0 transparent;
}

/* ============================================================
   PLAYGROUND ITEM
============================================================ */

.playground-item {
  position: relative;

  flex: 0 0 auto;

  min-height: 78px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 15px 18px 14px 22px;

  color: #172b4d;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fafc 100%
    );

  border: 1px solid #dfe1e6;
  border-radius: 14px;

  box-shadow:
    0 3px 8px rgba(9, 30, 66, 0.06),
    0 1px 2px rgba(9, 30, 66, 0.04);

  cursor: pointer;

  user-select: none;

  transition:
    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

/*
 * Linker dekorativer Akzent
 */
.playground-item::before {
  content: "";

  position: absolute;

  top: 12px;
  bottom: 12px;
  left: 0;

  width: 3px;

  border-radius: 0 4px 4px 0;

  background: #dfe1e6;

  transition:
    background 220ms ease,
    width 220ms ease;
}

/*
 * Kleine "Play"- bzw. Story-Markierung
 */
.playground-item::after {
  content: "↗";

  position: absolute;

  top: 12px;
  right: 14px;

  color: #a5adba;

  font-size: 15px;
  font-weight: 700;

  opacity: 0;

  transform: translate(-4px, 4px);

  transition:
    opacity 220ms ease,
    transform 220ms ease,
    color 220ms ease;
}

/* ============================================================
   PLAYGROUND TEXT
============================================================ */

.playground-item {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.playground-item small {
  display: block;

  margin-top: 5px;

  color: #7a869a;

  font-size: 0.7rem;
  font-weight: 400;

  letter-spacing: 0.1px;
  line-height: 1.35;

  transition:
    color 220ms ease;
}

.story-image-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 24px 0;
}

.story-image-item {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  text-align: center;
}

.story-image-item .story-image {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: contain;
  margin: 0 auto 8px;
}

.story-image-item figcaption {
  font-size: 0.75rem;
  line-height: 1.25;
  color: #6b778c;
}

@media (max-width: 700px) {
  .story-image-row {
    gap: 8px;
  }

  .story-image-row .story-image {
    height: 100px;
  }
}

/* ============================================================
   HOVER / FOCUS
============================================================ */

.playground-item:hover,
.playground-item:focus-visible {
  z-index: 2;

  color: #000000;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f4f8ff 100%
    );

  border-color: #1677ff;

  transform: translateY(-4px) translateX(-3px);

  box-shadow:
    0 12px 24px rgba(9, 30, 66, 0.14),
    0 0 0 3px rgba(22, 119, 255, 0.10);

  outline: none;
}

.playground-item:hover::before,
.playground-item:focus-visible::before {
  width: 5px;

  background: #1677ff;
}

.playground-item:hover::after,
.playground-item:focus-visible::after {
  opacity: 1;

  color: #1677ff;

  transform: translate(0, 0);
}

.playground-item:hover small,
.playground-item:focus-visible small {
  color: #334e68;
}

/* ============================================================
   ACTIVE / CLICK FEEDBACK
============================================================ */

.playground-item:active {
  transform:
    translateY(-1px)
    translateX(-1px)
    scale(0.985);

  box-shadow:
    0 5px 12px rgba(9, 30, 66, 0.12);
}

/* ============================================================
   PLAYGROUND SCROLLBAR
============================================================ */

.playground-items::-webkit-scrollbar {
  width: 5px;
}

.playground-items::-webkit-scrollbar-track {
  background: transparent;
}

.playground-items::-webkit-scrollbar-thumb {
  background: #c1c9d2;
  border-radius: 10px;
}

.playground-items::-webkit-scrollbar-thumb:hover {
  background: #1677ff;
}
      /* ============================================================
     FLYING CARD
  ============================================================ */
      .flying-card {
        position: fixed;
        z-index: 5000;
        width: 180px;
        height: 260px;
        pointer-events: none;
        perspective: 1200px;
        transform-style: preserve-3d;
        transition:
          left 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
          top 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
          width 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
          height 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      .flying-card-face {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        border-radius: 18px;
      }
      .flying-card-back {
        transform: rotateY(0deg);
      }
      .flying-card-front {
        transform: rotateY(180deg);
      }
      .flying-card svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        border-radius: 18px;
      }
      /* ============================================================
     TIMELINE CARDS
  ============================================================ */
      .timeline-card {
        position: absolute;
        width: var(--card-width);
        height: var(--card-height);
        overflow: visible;
        transition:
          top 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
          left 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      .timeline-card:hover {
        z-index: 1000 !important;
        transform: translateY(-8px) scale(1.03);
        filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.25));
      }

      /*
      * Der SVG-Rahmen und alle Texte werden bei Hover
      * über CSS verändert.
      */
      .timeline-card:hover svg > rect:first-child {
        stroke: #1677ff !important;
        stroke-width: 4 !important;
      }

      .timeline-card:hover svg text {
        fill: #000000 !important;
      }

      .timeline-card:hover svg foreignObject,
      .timeline-card:hover svg foreignObject * {
        color: #000000 !important;
      }

      /*
      * Auch die zusätzlichen Kartenbereiche
      * werden beim Hover lesbarer.
      */
      .timeline-card:hover svg g rect {
        stroke: #1677ff !important;
      }

      .timeline-card:hover svg g text {
        fill: #000000 !important;
      }

      /* ============================================================
     COLLECTING CARD
  ============================================================ */
      .collecting-card {
        position: fixed !important;
        z-index: 6000;
        width: var(--card-width);
        height: var(--card-height);
        overflow: visible;
        pointer-events: none;
        transform-style: preserve-3d;
        perspective: 1200px;
        transition:
          left 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
          top 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
          width 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
          height 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
          opacity 0.85s ease;
      }
      .timeline-card svg,
      .flying-card svg,
      .collecting-card svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        border-radius: 18px;
      }

      /* ============================================================
   STORY OVERLAY
============================================================ */

.story-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: rgba(9, 30, 66, 0.72);
  backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}

.story-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================================================
   STORY MODAL
============================================================ */

.story-modal {
  position: relative;

  width: min(1100px, 94vw);
  max-height: min(850px, 90vh);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(247, 249, 252, 0.98)
    );

  border: 3px solid #1677ff;
  border-radius: 24px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 0 8px rgba(22, 119, 255, 0.12);

  transform: translateY(30px) scale(0.96);
  transition: transform 300ms ease;
}

.story-overlay.visible .story-modal {
  transform: translateY(0) scale(1);
}

/* ============================================================
   CLOSE BUTTON
============================================================ */

.story-close {
  position: absolute;
  top: 14px;
  right: 18px;

  z-index: 2;

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 50%;

  background: rgba(9, 30, 66, 0.08);

  color: #172b4d;

  font-size: 32px;
  line-height: 36px;

  cursor: pointer;

  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.story-close:hover,
.story-close:focus-visible {
  background: #1677ff;
  color: #ffffff;
  transform: rotate(90deg);
  outline: none;
}

/* ============================================================
   STORY CONTENT
============================================================ */

.story-content {
  overflow-y: auto;

  padding: 56px clamp(28px, 6vw, 86px) 70px;

  color: #172b4d;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 18px;
  line-height: 1.7;

  scrollbar-width: thin;
  scrollbar-color: #1677ff transparent;
}

.story-content h1 {
  margin: 0 0 12px;

  color: #091e42;

  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.05;
}

.story-content h2 {
  margin: 54px 0 16px;

  color: #075985;

  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.15;
}

.story-content h3 {
  margin: 32px 0 12px;

  color: #172b4d;

  font-size: 24px;
}

.story-content p {
  max-width: 820px;
  margin: 0 0 22px;
}

.story-content .story-lead {
  max-width: 820px;

  margin-bottom: 38px;

  color: #5e6c84;

  font-size: 22px;
  line-height: 1.55;
}

.story-content strong {
  color: #091e42;
}

.story-content blockquote {
  max-width: 800px;

  margin: 36px 0;
  padding: 20px 28px;

  border-left: 5px solid #1677ff;

  background: #f1f6ff;

  color: #172b4d;

  font-size: 22px;
  font-style: italic;
}

/* ============================================================
   STORY IMAGES
============================================================ */

.story-image {
  width: 100%;
  max-width: 850px;

  display: block;

  margin: 32px auto 42px;

  border-radius: 16px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.story-image.small {
  max-width: 600px;
}

.story-image-caption {
  margin-top: -28px;
  margin-bottom: 34px;

  color: #6b778c;

  font-size: 14px;
  text-align: center;
}

/* ============================================================
   STORY HIGHLIGHT CARDS
============================================================ */

.story-highlight-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

  margin: 34px 0 44px;
}

.story-highlight {
  padding: 22px;

  border: 1px solid #dfe1e6;
  border-radius: 14px;

  background: #ffffff;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.story-highlight strong {
  display: block;

  margin-bottom: 8px;

  color: #075985;

  font-size: 24px;
}

.story-highlight span {
  display: block;

  color: #5e6c84;

  font-size: 15px;
  line-height: 1.45;
}

body.story-open {
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE
============================================================ */

      @media (max-width: 800px) {
        .story-overlay {
          padding: 10px;
        }

        .story-modal {
          width: 100%;
          max-height: 94vh;

          border-radius: 18px;
        }

        .story-content {
          padding: 52px 24px 50px;

          font-size: 16px;
          line-height: 1.65;
        }

        .story-content .story-lead {
          font-size: 19px;
        }

        .story-highlight-grid {
          grid-template-columns: 1fr;
        }

        .story-content blockquote {
          padding: 16px 20px;

          font-size: 19px;
        }
      }

      @media (max-width: 1400px) {
        .site-header {
          padding-left: 20px;
          padding-right: 20px;
        }
        .profile-image {
          width: 160px;
          height: 160px;
        }
        .identity-name {
          font-size: 2.0rem;
          position: relative;
          left: -40px;
        }
        .site-subtitle {
          font-size: 0.75rem;
        }
        .timeline-area {
          margin-left: 0;
        }
        .contact-view {
          left: 50%;
        }
      }
      /*
   * ============================================================
   * SCHMALES LAYOUT
   *
   * Unterhalb von 1150px werden beide Kartenstapel
   * vertikal untereinander angeordnet.
   * ============================================================
   */
      @media (max-width: 1150px) {
        :root {
          --header-height: 110px;
        }
        .site-header {
          align-items: flex-start;
          padding-top: 12px;
          padding-bottom: 12px;
        }
        .site-title {
          align-items: flex-start;
        }
        .identity {
          align-items: flex-start;
          flex-direction: column;
          gap: 4px;              
          position: relative;
          left: -50px;
        }
        /*
     * 1. Profilbild im schmalen Layout
     */
        .profile-image {
          left: 0;
          top: 0;
          width: 130px;
          height: 130px;
        }
        .identity-name {
          font-size: 1.6rem;
        }
        .site-subtitle {
          font-size: 0.68rem;
        }
        .timeline-area {
          padding: 24px;
        }
        .right-panel {
          width: 220px;
          min-width: 220px;
        }
        .contact-vision {
          font-size: 2rem;
        }
        .intro-line.primary {
          font-size: 2.4rem;
        }
        .intro-line.secondary {
          font-size: 1.1rem;
        }
      }
      @media (max-width: 700px) {
        :root {
          --header-height: 105px;
          --footer-height: 42px;
        }
        .site-header {
          padding: 8px 12px;
        }
        .site-title {
          gap: 8px;
        }
        .profile-image {
          top: 28px;
          left: -20px;
          width: 95px;
          height: 95px;
        }
        .identity-name {
          font-size: 3.0rem;
          left: -95px;
          position: relative;
          top: 30px;
        }
        .site-subtitle {
          display: none;
        }
        .right-panel {
          display: none;
        }
        .timeline-area {
          width: 100%;
          margin-left: 0;
          padding: 16px;
        }
        .timeline {
          width: 100%;
          min-width: 0;
          padding-right: 0;
        }
        .education-label,
        .employment-label {
          font-size: 0.65rem;
        }
        .contact-view {
          position: absolute;
          left: 50%;
          width: calc(100vw - 32px);
        }
        .contact-vision {
          font-size: 1.6rem;
          white-space: normal;
        }
        .contact-title {
          font-size: 1.3rem;
        }
        .contact-details {
          font-size: 0.95rem;
        }
        .intro-line.primary {
          font-size: 1.8rem;
        }
        .intro-line.secondary {
          font-size: 0.95rem;
        }
      }
      @media (max-width: 450px) {
        .identity-name {
          font-size: 2.0rem;
        }
        .profile-image {
          width: 80px;
          height: 80px;
        }
        .contact-vision {
          font-size: 1.35rem;
        }
        .intro-line.primary {
          font-size: 1.4rem;
        }
        .intro-line.secondary {
          font-size: 0.8rem;
        }
      }