/* Seitenbereiche im Flyer-Stil: Kopf- und Fußzeile, Startseite, Unterseiten, Rechtliches, 404. */

@layer components {

  /* ---------- Kopfzeile ---------- */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(6 22 49 / .95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgb(255 255 255 / .1);
  }

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
  }

  .site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    & img { height: 2.75rem; width: auto; }
    & span {
      display: none;
      color: var(--gray-300);
      font-size: 0.75rem;
      line-height: 1.25;
      letter-spacing: .1em;
      text-transform: uppercase;

      @media (width >= 40rem) { display: block; }
    }
  }

  .nav-links {
    display: none;
    align-items: center;
    gap: 2rem;
    color: var(--gray-300);
    font-size: 0.875rem;
    line-height: calc(1.25 / .875);

    @media (width >= 48rem) { display: flex; }

    & a { transition: color .15s var(--ease); }
    & a:hover, & a[aria-current="page"] { color: var(--sky-light); }
    & a[aria-current="page"] { font-weight: 500; }

    & .nav-cta {
      display: inline-block;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      background: var(--sky);
      color: var(--white);
      font-weight: 500;
      transition: background-color .15s var(--ease);

      &:hover { background: var(--sky-light); color: var(--white); }
    }
  }

  .menu-btn {
    color: var(--gray-300);
    transition: color .15s var(--ease);

    &:hover { color: var(--white); }
    & svg { width: 1.5rem; height: 1.5rem; }
    @media (width >= 48rem) { display: none; }
  }

  .mobile-menu {
    padding: 0.5rem 1rem;
    background: var(--navy-950);
    border-top: 1px solid rgb(255 255 255 / .1);
    color: var(--gray-300);
    font-size: 0.875rem;
    line-height: calc(1.25 / .875);

    @media (width >= 48rem) { display: none; }

    & a {
      display: block;
      padding: 0.75rem 0.5rem;
      border-bottom: 1px solid rgb(255 255 255 / .1);
      transition: color .15s var(--ease);

      &:hover, &[aria-current="page"] { color: var(--sky-light); }
      &[aria-current="page"] { font-weight: 500; }
    }
    & li:last-child a { border-bottom: 0; color: var(--sky-light); font-weight: 500; }
  }

  /* ---------- Fußzeile ---------- */

  .site-footer {
    padding-block: 2rem;
    background: var(--navy-950);
    border-top: 1px solid rgb(255 255 255 / .1);
  }

  .footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    @media (width >= 48rem) { flex-direction: row; }
    & img { width: 200px; }
  }

  .footer-links {
    display: flex;
    gap: 1.5rem;
    color: var(--gray-300);
    font-size: 0.875rem;
    line-height: calc(1.25 / .875);

    & a { transition: color .15s var(--ease); }
    & a:hover { color: var(--white); }
  }

  .footer-copy {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / .1);
    color: var(--gray-300);
    font-size: 0.875rem;
    line-height: calc(1.25 / .875);
    text-align: center;
  }

  /* Schwebender Anruf-Button (nur mobil, erscheint nach dem Scrollen) */
  .floating-call {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--brand);
    color: var(--white);
    box-shadow: 0 0 0 4px rgb(255 255 255 / .4), 0 10px 15px -3px oklch(0.53 0.09 249.79 / .4), 0 4px 6px -4px oklch(0.53 0.09 249.79 / .4);
    opacity: 0;
    translate: 0 0.75rem;
    pointer-events: none;
    transition: all 300ms var(--ease);

    &:hover { background: var(--brand-light); }
    &.is-visible { opacity: 1; translate: none; pointer-events: auto; }
    & svg { width: 1.5rem; height: 1.5rem; }
    @media (width >= 48rem) { display: none; }
  }

  /* ---------- Kopfbereich (Startseite und Unterseiten) ---------- */

  .hero, .page-hero {
    position: relative;
    overflow: hidden;
    background: var(--navy-950);
  }

  .hero {
    display: flex;
    align-items: center;
    min-height: 78vh;
  }

  .page-hero {
    padding-block: 4rem;

    @media (width >= 48rem) { padding-block: 6rem; }
    &.is-compact { padding-block: 3rem; }
  }

  .hero-bg {
    position: absolute;
    top: -4rem;
    bottom: -4rem;
    right: 0;
    width: 100%;
    pointer-events: none;
    will-change: transform;

    @media (width >= 48rem) { width: 68%; }
    & img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
    @media (width >= 48rem) { & img { opacity: .9; } }

    .page-hero & {
      top: 0;
      bottom: 0;
      will-change: auto;

      @media (width >= 48rem) { width: 60%; }
      & img { opacity: .35; }
      @media (width >= 48rem) { & img { opacity: .8; } }
    }
  }

  .hero-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right in oklab, var(--navy-950), rgb(6 22 49 / .85), rgb(6 22 49 / .1));

    @media (width >= 48rem) { background: linear-gradient(to right in oklab, var(--navy-950), rgb(6 22 49 / .6), rgb(6 22 49 / .1)); }
  }

  .hero-fade {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 10rem;
    pointer-events: none;
    background: linear-gradient(to top in oklab, var(--navy-900), transparent);

    .page-hero & { height: 6rem; }
  }

  /* Lichtschein oben rechts */
  .hero-glow {
    position: absolute;
    top: -6rem;
    right: 12%;
    width: 20rem;
    height: 20rem;
    border-radius: 9999px;
    background: rgb(255 255 255 / .25);
    filter: blur(64px);
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    padding-top: 3.5rem;
    padding-bottom: 6rem;

    @media (width >= 48rem) { padding-block: 6rem; }
    .page-hero & { padding-block: 0; }
  }

  .hero-inner { max-width: 42rem; }

  .hero .badge { margin-bottom: 1.5rem; }

  .hero-logo {
    margin-bottom: 1.25rem;

    & img {
      width: 78vw;
      max-width: 440px;
      filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.45));
    }
  }

  .hero .rule { width: 10rem; margin-bottom: 1.5rem; }
  .page-hero .rule { width: 8rem; margin-bottom: 1.25rem; }

  .hero-script {
    margin-bottom: 1.5rem;
    color: var(--white);
    font-size: 1.875rem;
    line-height: calc(2.25 / 1.875);
    rotate: -2deg;
    transform-origin: left;

    @media (width >= 48rem) { font-size: 3rem; line-height: 1; }

    .page-hero & {
      margin-bottom: 1.25rem;
      font-size: 1.5rem;
      line-height: calc(2 / 1.5);

      @media (width >= 48rem) { font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
    }
  }

  .hero-lead {
    max-width: 36rem;
    margin-bottom: 2rem;
    color: rgb(255 255 255 / .8);
    font-size: 1rem;
    line-height: var(--line-relaxed);

    @media (width >= 48rem) { font-size: 1.125rem; }
    .page-hero & { max-width: none; margin-bottom: 0; }
  }

  .hero .btn {
    width: 100%;
    font-size: 1rem;
    line-height: 1.5;

    @media (width >= 40rem) { width: auto; }
    @media (width >= 48rem) { font-size: 1.125rem; line-height: calc(1.75 / 1.125); }
    & svg { width: 1.25rem; height: 1.25rem; }
  }

  .hero .btn-sky { box-shadow: 0 10px 15px -3px rgb(47 155 240 / .3), 0 4px 6px -4px rgb(47 155 240 / .3); }
  .hero .btn-outline { border-color: rgb(255 255 255 / .7); }

  .hero-phone {
    display: none;
    opacity: .9;

    @media (width >= 48rem) { display: inline; }
  }

  .scroll-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    translate: -50% 0;
    color: rgb(255 255 255 / .5);
    transition: color .15s var(--ease);
    animation: bounce 1s infinite;

    &:hover { color: var(--white); }
    & svg { width: 1.5rem; height: 1.5rem; }
  }

  .page-title {
    margin-bottom: 1rem;
    color: var(--white);
    font-size: 1.875rem;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.025em;
    text-transform: uppercase;

    @media (width >= 48rem) { font-size: 3rem; }
    .is-compact & { @media (width >= 48rem) { font-size: 2.25rem; } }
  }

  .accent { color: var(--sky-light); }

  /* ---------- Startseite: Leistungen ---------- */

  .services {
    position: relative;
    padding-block: var(--section);
    background: var(--navy-900);

    @media (width >= 48rem) { padding-bottom: 4rem; }
  }

  .section-head {
    margin-bottom: 2.5rem;
    text-align: center;

    & .rule { margin-top: 1rem; }
    & p:not(.eyebrow) {
      max-width: 36rem;
      margin: 1rem auto 0;
      color: rgb(255 255 255 / .7);
      line-height: var(--line-relaxed);
    }
  }

  .service-grid {
    display: grid;
    gap: 1.5rem;

    @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (width >= 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .service-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .service-photo {
    position: relative;

    & > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  }

  /* Bogen-Übergang Foto → Karte, wie auf dem Flyer */
  .service-arc {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2rem;
    color: var(--navy-700);
  }

  /* Runde Icon-Plakette, die über Foto und Karte sitzt */
  .icon-medal {
    position: absolute;
    left: 50%;
    bottom: -2.25rem;
    translate: -50% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    color: var(--white);
    background: radial-gradient(circle at 40% 30%, #1e5aa8, var(--navy-800) 70%);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 4px rgba(47, 155, 240, 0.45), 0 10px 25px rgba(0, 0, 0, 0.45);

    & svg { width: 2.25rem; height: 2.25rem; }
  }

  .service-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 3rem 1.25rem 1.5rem;

    & h3 {
      color: var(--white);
      font-size: 1.25rem;
      line-height: calc(1.75 / 1.25);
      font-weight: 900;
      letter-spacing: .025em;
      text-align: center;
      text-transform: uppercase;
    }
    & .rule { margin-top: 0.5rem; margin-bottom: 1rem; }
    & p {
      margin-bottom: 1.25rem;
      color: rgb(255 255 255 / .7);
      font-size: 0.875rem;
      line-height: var(--line-relaxed);
      text-align: center;
    }
    & .check-list li { color: var(--white); font-size: 0.95rem; }
  }

  .services-closing {
    margin-top: 3rem;
    color: var(--sky-light);
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
    text-align: center;
    rotate: -2deg;

    @media (width >= 48rem) { font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
  }

  /* ---------- Startseite: Vorteile ---------- */

  .benefits {
    padding-block: var(--section);
    background: var(--navy-950);
    border-block: 1px solid rgb(255 255 255 / .1);
  }

  .benefit-grid {
    display: grid;
    row-gap: 2rem;

    @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (width >= 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .benefit {
    display: flex;
    align-items: flex-start;
    gap: 1rem;

    @media (width >= 64rem) {
      padding-inline: 1.5rem;
      &:first-child { padding-left: 0; }
      &:last-child { padding-right: 0; }
      &:not(:last-child) { border-right: 1px solid rgb(255 255 255 / .15); }
    }

    & > svg { width: 3rem; height: 3rem; flex-shrink: 0; color: var(--sky); }
    & h3 {
      color: var(--white);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: .025em;
      text-transform: uppercase;
    }
    & p {
      margin-top: 0.5rem;
      color: rgb(255 255 255 / .6);
      font-size: 0.875rem;
      line-height: var(--line-relaxed);
    }
  }

  /* ---------- Startseite: Zahlen ---------- */

  .stats {
    padding-block: 2.5rem;
    background: var(--navy-900);
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    text-align: center;

    @media (width >= 48rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  }

  .stat-value {
    color: var(--sky-light);
    font-size: 1.875rem;
    line-height: calc(2.25 / 1.875);
    font-weight: 900;

    @media (width >= 48rem) { font-size: 3rem; line-height: 1; }
  }

  .stat-label {
    margin-top: 0.25rem;
    color: rgb(255 255 255 / .8);
    font-size: 0.875rem;
    line-height: calc(1.25 / .875);
    font-weight: 500;
    letter-spacing: .025em;
    text-transform: uppercase;
  }

  /* ---------- Startseite: Über uns ---------- */

  .about, .offer {
    padding-block: var(--section);
    background: var(--navy-900);

    @media (width >= 48rem) { padding-block: 4rem; }
  }

  .two-col {
    display: grid;
    gap: 2.5rem;
    align-items: center;

    @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    &.is-top { align-items: start; }
  }

  .about .section-title { margin-bottom: 1.5rem; }

  .prose-dark {
    display: grid;
    gap: 1rem;
    color: rgb(255 255 255 / .75);
    line-height: var(--line-relaxed);
  }

  .closing-script {
    margin-top: 2rem;
    color: var(--sky-light);
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
    rotate: -1deg;

    @media (width >= 48rem) { font-size: 1.875rem; line-height: calc(2.25 / 1.875); }
  }

  .about-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .about-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: var(--card);
    border-radius: var(--radius-2xl);
    text-align: center;

    &.is-sky {
      background: linear-gradient(to bottom right in oklab, var(--sky), var(--navy-700));
      border: 1px solid rgb(108 192 255 / .4);
    }
    & svg { width: 3rem; height: 3rem; margin-bottom: 0.75rem; color: var(--white); }
  }

  .about-year {
    color: var(--white);
    font-size: 3rem;
    line-height: 1;
    font-weight: 900;
  }

  .about-tile-label {
    margin-top: 0.5rem;
    color: var(--sky-light);
    font-size: 0.875rem;
    line-height: calc(1.25 / .875);
    font-weight: 600;
    letter-spacing: .025em;
    text-transform: uppercase;

    .is-sky & { margin-top: 0; color: var(--white); font-weight: 700; }
  }

  /* Bildslider: pro Aufruf zufällige Auswahl, nur gewählte Bilder werden geladen */
  .slider {
    position: relative;
    grid-column: span 2;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--navy-800);
    border: 1px solid rgb(108 192 255 / .3);
  }

  .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1000ms var(--ease);

    &.is-active { opacity: 1; }
  }

  .slide-dots {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    z-index: 10;
    translate: -50% 0;
    display: flex;
    gap: 0.5rem;
  }

  /* Tippfläche 24×24px, sichtbarer Punkt klein */
  .slide-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;

    &::before {
      content: "";
      width: 0.625rem;
      height: 0.625rem;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.55);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      transition: all 0.3s ease;
    }
    &:hover::before { background: rgba(255, 255, 255, 0.85); }
    &[aria-current="true"]::before { width: 1.5rem; background: var(--white); }
  }

  /* ---------- Startseite: Kontakt ---------- */

  .contact {
    position: relative;
    padding-top: 4rem;
    padding-bottom: var(--section);
    background: var(--white);

    @media (width >= 48rem) { padding-bottom: 4rem; }

    & .eyebrow { color: var(--sky); }
    & .section-title { color: var(--navy-900); }
    & .section-head p:not(.eyebrow) { color: var(--gray-600); }
  }

  /* Pinselkante wie auf dem Flyer */
  .brush-edge {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2.5rem;
    color: var(--navy-900);

    @media (width >= 48rem) { height: 3.5rem; }
  }

  .contact-bar {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 3rem;
    padding: 1.5rem;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    background: var(--gray-50);

    @media (width >= 40rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }

    & > a {
      display: flex;
      align-items: center;
      gap: 1rem;
      min-width: 0;

      @media (width >= 40rem) {
        padding-inline: 1.5rem;
        &:first-child { padding-left: 0; }
        &:last-child { padding-right: 0; }
        &:not(:last-child) { border-right: 1px solid var(--gray-200); }
      }
    }
    & .icon-circle { width: 3.5rem; height: 3.5rem; }
    & .icon-circle svg { width: 1.75rem; height: 1.75rem; }
    & .icon-circle.is-phone svg { width: 1.5rem; height: 1.5rem; }
  }

  .contact-big {
    display: block;
    color: var(--navy-900);
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 900;
  }

  .contact-small {
    display: block;
    color: var(--gray-600);
    font-size: 0.875rem;
    line-height: calc(1.25 / .875);
  }

  .contact-label {
    display: block;
    color: var(--gray-500);
    font-size: 0.75rem;
    line-height: calc(1 / .75);
    font-weight: 500;

    &.is-caps { letter-spacing: .025em; text-transform: uppercase; }
  }

  .contact-value {
    display: block;
    color: var(--navy-900);
    font-weight: 700;

    &.is-break { word-break: break-all; }
  }

  .contact-grid {
    display: grid;
    gap: 2.5rem;

    @media (width >= 48rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  .contact-aside {
    display: grid;
    gap: 1.25rem;
    align-content: start;

    @media (width >= 48rem) { grid-column: span 2; }
  }

  .advice-card {
    padding: var(--card);
    border-radius: var(--radius-2xl);
    background: var(--navy-900);
    color: var(--white);

    & h3 {
      margin-bottom: 0.5rem;
      font-size: 1.125rem;
      line-height: calc(1.75 / 1.125);
      font-weight: 700;
      letter-spacing: .025em;
      text-transform: uppercase;
    }
    & p { color: rgb(255 255 255 / .8); font-size: 0.875rem; line-height: var(--line-relaxed); }
    & .check-list { margin-top: 1.25rem; font-size: 0.875rem; line-height: calc(1.25 / .875); }
  }

  .address-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: var(--card);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    background: var(--gray-50);

    & .icon-circle { width: 2.5rem; height: 2.5rem; }
    & .contact-label { letter-spacing: .025em; text-transform: uppercase; }
    & .address { margin-top: 0.125rem; color: var(--gray-800); font-weight: 500; }
  }

  .contact-form {
    display: grid;
    gap: 1.25rem;
    align-content: start;

    @media (width >= 48rem) { grid-column: span 3; }

    & label {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--gray-700);
      font-size: 0.875rem;
      line-height: calc(1.25 / .875);
      font-weight: 500;
    }
    & input, & select, & textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-btn);
      color: var(--gray-900);
      transition: border-color .15s var(--ease), box-shadow .15s var(--ease);

      &:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 2px rgb(47 155 240 / .2); }
    }
    & select { background: var(--white); }
    & textarea { resize: none; }
  }

  .form-row {
    display: grid;
    gap: 1.25rem;

    @media (width >= 40rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .form-status {
    padding: 0.75rem 1rem;
    border: 1px solid;
    border-radius: var(--radius-btn);
    font-size: 0.875rem;
    line-height: calc(1.25 / .875);
    font-weight: 500;

    &.is-success { background: oklch(98.2% .018 155.826); color: oklch(52.7% .154 150.069); border-color: oklch(92.5% .084 155.995); }
    &.is-error { background: oklch(97.1% .013 17.38); color: oklch(50.5% .213 27.518); border-color: oklch(88.5% .062 18.334); }
  }

  .form-submit {
    width: 100%;
    padding-block: 1rem;
    border-radius: 9999px;
    background: var(--navy-800);
    color: var(--white);
    font-size: 1.125rem;
    line-height: calc(1.75 / 1.125);
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
    transition: background-color .15s var(--ease);

    &:hover { background: var(--sky); }
    &:disabled { opacity: .6; cursor: not-allowed; }
  }

  .form-note {
    color: var(--gray-500);
    font-size: 0.75rem;
    line-height: var(--line-relaxed);
    text-align: center;

    & a { text-decoration: underline; transition: color .15s var(--ease); }
    & a:hover { color: var(--sky); }
  }

  /* ---------- Unterseiten: Angebotsblock ---------- */

  .offer-subtitle {
    margin-top: 0.75rem;
    color: var(--sky-light);
    font-weight: 600;
  }

  .offer .rule { margin-top: 1rem; margin-bottom: 1.5rem; }

  .offer-cards {
    display: grid;
    gap: 1.25rem;
  }

  .offer-card {
    padding: var(--card);

    & h3 {
      color: var(--white);
      font-size: 1.25rem;
      line-height: calc(1.75 / 1.25);
      font-weight: 900;
      letter-spacing: .025em;
      text-transform: uppercase;
    }
    & .rule { margin-top: 0.5rem; margin-bottom: 1.25rem; }
    & .check-list li { color: var(--white); }
  }

  .reach-card {
    padding: var(--card);
    border-radius: var(--radius-2xl);
    background: var(--white);

    & h3 {
      margin-bottom: 1rem;
      color: var(--navy-900);
      font-size: 1.125rem;
      line-height: calc(1.75 / 1.125);
      font-weight: 900;
      letter-spacing: .025em;
      text-transform: uppercase;
    }
    & > div { display: grid; gap: 1rem; }
    & a, & .reach-address { display: flex; align-items: center; gap: 1rem; min-width: 0; }
    & .reach-phone { color: var(--navy-900); font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 900; }
    & .reach-mail { color: var(--navy-900); font-weight: 700; word-break: break-all; }
    & .reach-address { color: var(--gray-600); font-size: 0.875rem; line-height: calc(1.25 / .875); }
  }

  /* ---------- Unterseiten: Abschlussleiste ---------- */

  .cta-band {
    padding-block: 3rem;
    background: var(--navy-950);
    border-top: 1px solid rgb(255 255 255 / .1);

    & .container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.25rem;

      @media (width >= 40rem) { flex-direction: row; align-items: center; }
    }
    & h2 {
      color: var(--white);
      font-size: 1.25rem;
      line-height: calc(1.75 / 1.25);
      font-weight: 900;
      letter-spacing: .025em;
      text-transform: uppercase;
    }
    & p { margin-top: 0.25rem; color: rgb(255 255 255 / .7); font-size: 0.875rem; line-height: calc(1.25 / .875); }
    & .btn-group { width: 100%; @media (width >= 40rem) { width: auto; } }
  }

  /* ---------- Impressum und Datenschutz ---------- */

  .legal-page { background: var(--white); }

  .legal {
    display: grid;
    gap: 1.5rem;
    max-width: 48rem;
    margin-inline: auto;
    padding: 3rem var(--gutter);
    color: var(--gray-700);
    line-height: var(--line-relaxed);

    @media (width >= 48rem) { padding-block: 4rem; }
    &.is-spacious { gap: 2rem; }

    & h2 { margin-bottom: 0.25rem; color: var(--navy-900); font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 700; }
    &.is-spacious h2 { margin-bottom: 0.5rem; }
    & h3 { margin-bottom: 0.25rem; color: var(--navy-900); font-weight: 600; }
    & p + p { margin-top: 0.75rem; }
    & p + p.is-tight { margin-top: 0.5rem; }
    & a { color: var(--navy-700); text-decoration: underline; transition: color .15s var(--ease); }
    & a:hover { color: var(--sky); }
    & .is-break { word-break: break-all; }
    & .legal-small { color: var(--gray-500); font-size: 0.875rem; line-height: calc(1.25 / .875); }
  }

  /* ---------- 404 ---------- */

  .not-found {
    display: flex;
    align-items: center;
    min-height: 60vh;
    background: var(--navy-950);
    text-align: center;

    & .container { padding-block: var(--section); @media (width >= 48rem) { padding-block: 6rem; } }
    & .badge { margin-bottom: 1.5rem; font-size: 0.875rem; line-height: calc(1.25 / .875); }
    & h1 {
      margin-bottom: 1rem;
      color: var(--sky-light);
      font-size: 4.5rem;
      line-height: 1;
      font-weight: 900;

      @media (width >= 48rem) { font-size: 8rem; }
    }
    & h2 {
      margin-bottom: 0.75rem;
      color: var(--white);
      font-size: 1.5rem;
      line-height: calc(2 / 1.5);
      font-weight: 900;
      text-transform: uppercase;

      @media (width >= 48rem) { font-size: 1.875rem; line-height: calc(2.25 / 1.875); }
    }
    & .closing-script { margin-top: 0; margin-bottom: 1.5rem; }
    & p:not([class]) { max-width: 36rem; margin: 0 auto 2rem; color: rgb(255 255 255 / .75); line-height: var(--line-relaxed); }
    & .btn-group { justify-content: center; }
  }
}

@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}

/* Zahlen fliegen nacheinander ein */
@layer utilities {
  @media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .stats-grid > * {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    }
    .stats-grid.revealed > * { opacity: 1; transform: none; }
    .stats-grid.revealed > :nth-child(2) { transition-delay: 120ms; }
    .stats-grid.revealed > :nth-child(3) { transition-delay: 240ms; }
    .stats-grid.revealed > :nth-child(4) { transition-delay: 360ms; }
  }
}