/* ==========================================================================
   2nd look — seitenspezifische Layouts
   ========================================================================== */

@layer layout {

  /* --- Zweitton dieser Einheit: tiefes Petrol -----------------------------
     2nd look ist die aerztliche Beurteilung — der Ton ist tief und ruhig, im
     Gegensatz zum warmen Sand der Dachseite und dem kuehlen Blau von
     consulting. Die Limette bleibt als Klammer der Dachmarke.
     Nachgerechnet: Text 7,81:1 auf Weiss, Limette 6,08:1 auf der tiefen
     Flaeche, heller Text darauf 9,35:1. */
  body {
    --ton-flaeche: #eaf1f0;
    --ton-linie: #a9c8c4;
    --ton-text: #1f5b56;
    --ton-tief: #123f3b;
    --auf-ton-tief: #e2eeec;
    --auf-ton-tief-leise: #9dbab6;
  }

  /* --- Kopfzeile --------------------------------------------------------- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--border);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    min-block-size: var(--header-h);
  }

  .site-header__logo img {
    inline-size: clamp(9rem, 7rem + 4vw, 11.25rem);
    block-size: auto;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
  }

  .site-nav__list a {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    padding-block-end: 3px;
    border-block-end: 2px solid transparent;
    transition: border-color var(--dur) var(--ease);
  }

  .site-nav__list a:hover,
  .site-nav__list a:focus-visible {
    color: var(--ink);
    border-block-end-color: var(--lime);
  }

  .site-header__cta {
    padding: var(--sp-2xs) var(--sp-sm);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  /* Ausklappmenue: <details> statt Skript — funktioniert ohne JavaScript */
  .site-nav__toggle {
    display: none;
    align-items: center;
    gap: var(--sp-2xs);
    padding: var(--sp-2xs) var(--sp-xs);
    border: 2px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    cursor: pointer;
    list-style: none;
  }

  .site-nav__toggle::-webkit-details-marker { display: none; }

  .site-nav__burger {
    position: relative;
    inline-size: 1rem;
    block-size: 2px;
    background: var(--ink);
  }

  .site-nav__burger::before,
  .site-nav__burger::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    background: var(--ink);
  }

  .site-nav__burger::before { inset-block-start: -5px; }
  .site-nav__burger::after { inset-block-start: 5px; }

  @media (max-width: 61.25rem) {          /* 980px — ab hier wird der Kopf eng */
    /* backdrop-filter macht den Kopf zum Bezugsrahmen fuer position:fixed —
       das Vollbildmenue kaeme sonst nicht ueber die Kopfzeile hinaus. */
    .site-header { backdrop-filter: none; background: var(--paper); }

    .site-nav__toggle {
      display: flex;
      position: relative;
      z-index: 70;
    }

    /* Vollflaechiges Menue — nur wenn JavaScript laeuft. Ohne Skript bleibt
       die Navigation als normale Liste im Fluss stehen und ist erreichbar,
       statt als dauerhaft offenes Overlay die Seite zu verdecken. */
    .js .site-nav__list {
      position: fixed;
      inset: 0;
      z-index: 65;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2xs);
      padding: var(--sp-2xl) var(--sp-md);
      /* Milchglas: die Seite scheint durch, der Weichzeichner haelt den
         Untergrund ruhig genug fuer lesbaren Text. */
      background: rgb(255 255 255 / 0.55);
      backdrop-filter: blur(28px) saturate(130%);
      border: 0;
      border-radius: 0;
      box-shadow: none;
      min-inline-size: 0;
      overflow-y: auto;
    }

    @supports not (backdrop-filter: blur(1px)) {
      .js .site-nav__list { background: rgb(255 255 255 / 0.96); }
    }

    .js .site-nav__list li { inline-size: 100%; }

    .js .site-nav__list li + li { border-block-start: 0; }

    .js .site-nav__list a {
      display: block;
      padding: var(--sp-3xs) var(--sp-sm);
      font-family: var(--font-display);
      font-size: var(--fs-md);
      font-weight: var(--fw-semi);
      color: var(--ink);
      text-align: center;
      /* Lange Punkte wie "Radiologische Zusatzgutachten" passen bei 375 px
         nicht mehr in eine Zeile — sie duerfen umbrechen statt ueberzulaufen. */
      max-inline-size: 100%;
      text-wrap: balance;
      /* Bei 55 Prozent Deckkraft schlaegt der Untergrund durch — der weiche
         helle Schatten haelt die Schrift auch ueber Bildern lesbar. */
      text-shadow: 0 1px 10px rgb(255 255 255 / 0.9), 0 0 22px rgb(255 255 255 / 0.7);
      border: 0;
      border-block-end: 3px solid transparent;
      inline-size: fit-content;
      margin-inline: auto;
      transition:
        color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
    }

    .js .site-nav__list a:hover,
    .js .site-nav__list a:focus-visible {
      color: var(--ink);
      border-block-end-color: var(--lime);
      opacity: 1;
      border-inline-start-color: transparent;
    }

    /* Ohne JavaScript: schlichte Liste unter dem Logo */
    .site-nav__list {
      position: static;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-2xs);
      padding: var(--sp-sm) 0 0;
      background: none;
      border: 0;
      box-shadow: none;
      min-inline-size: 0;
    }

    .site-header__inner { flex-wrap: wrap; }

    /* Der Burger wird im offenen Zustand zum Kreuz */
    .site-nav__disclosure[open] .site-nav__burger { background: transparent; }

    .site-nav__disclosure[open] .site-nav__burger::before {
      inset-block-start: 0;
      transform: rotate(45deg);
    }

    .site-nav__disclosure[open] .site-nav__burger::after {
      inset-block-start: 0;
      transform: rotate(-45deg);
    }

    .site-nav__burger,
    .site-nav__burger::before,
    .site-nav__burger::after {
      transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .site-nav__disclosure[open] .site-nav__toggle-label { display: none; }

    .site-nav__disclosure[open] .site-nav__toggle {
      padding: var(--sp-2xs);
      border-radius: 50%;
      aspect-ratio: 1;
      justify-content: center;
    }
  }

  @media (max-width: 30rem) {             /* 480px */
    .site-header__cta { display: none; }
  }

  /* --- Hero: Text links, Portraet mit umlaufendem Bogen rechts ----------- */
  .hero {
    position: relative;
    overflow-x: clip;
    /* Fuellt den Bildschirm, abzueglich der Kopfzeile. Alles muss hineinpassen:
       oben Text und Portraet, unten die Zielgruppen — ohne Scrollen. */
    min-block-size: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    /* center statt space-between: sonst wird der Abstand zwischen oberem
       Block und Zielgruppen bei hohen Fenstern zum Loch. */
    justify-content: center;
    gap: var(--sp-2xl);
    padding-block: var(--sp-2xl) var(--sp-xl);
  }

  .hero__raster {
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    min-block-size: 0;
    display: grid;
    /* weiter auseinander als die uebrigen Zweispalter */
    gap: var(--sp-2xl);
    align-items: center;
    align-content: center;
  }

  /* Die Zielgruppen sitzen an der Unterkante des Bildschirms */
  .hero__unten {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-block-start: var(--sp-lg);
  }

  .hero__unten .section-title--centered {
    font-size: var(--fs-lg);
    margin-block-end: var(--sp-sm);
  }

  .hero__unten .card { padding: var(--sp-sm) var(--sp-md); }

  .hero__unten .card__text { font-size: var(--fs-xs); }

  @media (min-width: 56.25rem) {
    .hero__raster { grid-template-columns: 1fr 1fr; }
  }

  .hero__text { max-width: 34rem; }

  .hero h1 { margin-block-end: var(--sp-sm); }

  /* Dunkleres Gruen derselben Familie: 3,8:1 — bei dieser Schriftgroesse
     zulaessig, die Logo-Limette selbst kaeme nur auf 2,46:1. */
  .hero__hervor { color: #818910; }

  .hero__sub {
    font-size: var(--fs-md);
    color: var(--grey);
    margin-block-end: var(--sp-md);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
  }

  /* --- Zielgruppen im Hero ------------------------------------------------ */
  .hero__zielgruppen { margin-block-start: var(--sp-lg); }

  .hero__zielgruppen .section-title--centered { margin-block-end: var(--sp-md); }


  /* --- Sektionsueberschrift mit Limette-Unterstreichung -------------------- */
  .section-title {
    display: inline-block;
    border-block-end: 4px solid var(--lime);
    padding-block-end: var(--sp-2xs);
    margin-block-end: var(--sp-md);
  }

  .section-title--centered {
    display: block;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    margin-block-end: var(--sp-lg);
  }

  .text-media__body p + p { margin-block-start: var(--sp-sm); }

  .text-media__body p {
    max-width: var(--measure);
    line-height: 1.8;
  }

  /* --- Ablauf ------------------------------------------------------------- */
  /* Der Ablauf sitzt in der Zweitmeinung-Sektion, nicht auf eigener Flaeche */
  .ablauf { margin-block-start: var(--sp-2xl); }   /* 64px im Entwurf */

  .ablauf__head {
    text-align: center;
    margin-block-end: var(--sp-lg);
  }

  /* Kleiner als die Leistungs-Ueberschriften und ohne Limette-Linie */
  .ablauf__head .section-title {
    display: block;
    font-size: var(--fs-lg);
    border-block-end: 0;
    padding-block-end: 0;
    margin-block-end: var(--sp-2xs);
  }

  .ablauf__head .lead {
    font-size: var(--fs-base);
    color: var(--grey);
    max-width: none;
    margin-inline: auto;
  }

  /* --- Fuer wen ----------------------------------------------------------- */
  .fuer-wen .card { text-align: center; align-items: center; }

  .fuer-wen .card__text { max-width: 22rem; }

  /* --- Bildmenge ---------------------------------------------------------- */
  .bildmenge {
    display: grid;
    gap: var(--sp-xl);
    align-items: center;
  }

  @media (min-width: 56.25rem) {
    .bildmenge { grid-template-columns: 1fr 1fr; }
  }

  .bildmenge__zahl {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: 1;
    margin-block-end: var(--sp-md);
  }

  .bildmenge__zahl span {
    border-block-end: 5px solid var(--lime);
    padding-block-end: var(--sp-3xs);
  }

  .bildmenge__body h2 { margin-block-end: var(--sp-sm); }

  .bildmenge__body p { max-width: var(--measure); }

  .bildmenge__figure {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  .bildmenge__figure video {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--ink);
  }

  .bildmenge__figure figcaption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--sp-xs) var(--sp-sm);
    font-size: var(--fs-xs);
    color: #fff;
    background: linear-gradient(transparent, rgb(0 0 0 / 0.72));
  }

  /* --- Person ------------------------------------------------------------- */
  .person__head {
    text-align: center;
    margin-block-end: var(--sp-lg);
  }

  .person__head h2 { margin-block-end: var(--sp-3xs); }

  .person__head::after {
    content: "";
    display: block;
    inline-size: 3rem;
    block-size: 4px;
    background: var(--lime);
    margin: var(--sp-sm) auto 0;
  }

  .person__role { color: var(--grey); }

  .person__body {
    display: grid;
    gap: var(--sp-xl);
    align-items: start;
  }

  @media (min-width: 56.25rem) {
    .person__body { grid-template-columns: minmax(16rem, 22rem) 1fr; }
  }

  .person__portrait img {
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 12%;    /* Gesicht sitzt im oberen Drittel */
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
  }

  /* --- Abschluss ---------------------------------------------------------- */
  .abschluss { max-width: 38.75rem; }

  .abschluss h2 { margin-block-end: var(--sp-sm); }

  .abschluss__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    margin-block: var(--sp-md);
  }

  .abschluss__tel {
    font-size: var(--fs-sm);
    color: var(--grey);
  }

  /* --- Kontaktkarte, Muster aus der Codebasis ---------------------------- */
  .kontakt-karte {
    max-width: 52rem;
    margin-inline: auto;
    padding: var(--sp-xl) var(--sp-lg);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: 0 5px 20px rgb(0 0 0 / 0.08);
    text-align: center;
  }

  .kontakt-karte__person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2xs);
    margin: 0 0 var(--sp-md);
  }

  .kontakt-karte__person img {
    inline-size: 6.5rem;
    block-size: 6.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--lime);
  }

  .kontakt-karte__person figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .kontakt-karte__name {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi-bold);
    color: var(--ink);
  }

  .kontakt-karte__rolle {
    font-size: var(--fs-xs);
    color: var(--grey);
  }

  .kontakt-karte__titel {
    font-size: var(--fs-xl);
    margin-block-end: var(--sp-sm);
  }

  .kontakt-karte__text {
    max-width: 38rem;
    margin-inline: auto;
  }

  .kontakt-karte__text p + p { margin-block-start: var(--sp-sm); }

  .kontakt-karte__text p:last-child {
    font-size: var(--fs-sm);
    color: var(--grey);
  }

  .kontakt-karte__zeiten { color: var(--ink); }

  .kontakt-karte__aktionen {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    margin-block-start: var(--sp-lg);
  }

  .button--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2xs);
  }

  @media (max-width: 48rem) {
    .kontakt-karte { padding: var(--sp-md); }
    .kontakt-karte__aktionen .button { inline-size: 100%; }
  }

  /* --- Fusszeile --------------------------------------------------------- */
  .site-footer {
    background: var(--ton-tief);
    color: var(--auf-ton-tief);
    padding-block: var(--sp-2xl) var(--sp-lg);
  }

  .site-footer__oben {
    text-align: center;
    margin-block-end: var(--sp-lg);
  }

  /* Fusszeile der Rechtstext-Seiten (Impressum, Datenschutz): eigene, schlanke
     Struktur — Links und Telefon muessen auf der dunklen Flaeche hell bleiben. */
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-md) var(--sp-2xl);
  }

  .site-footer__legal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
  }

  .site-footer__legal a,
  .site-footer__address .tel-link {
    color: var(--auf-ton-tief);
    text-decoration-color: var(--auf-ton-tief-leise);
  }

  .site-footer__legal a:hover,
  .site-footer__address .tel-link:hover {
    color: var(--paper);
  }

  .site-footer__address {
    font-style: normal;
    line-height: 1.7;
    text-align: end;
  }

  @media (max-width: 40rem) {
    .site-footer__address { text-align: start; }
  }

  .site-footer__claim {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    color: var(--paper);
  }

  .site-footer__unten {
    display: grid;
    gap: var(--sp-lg);
    align-items: start;
  }

  @media (min-width: 56.25rem) {
    .site-footer__unten { grid-template-columns: 1fr 1fr; }
  }

  .site-footer__karte {
    position: relative;
    inline-size: 100%;
    block-size: 17.5rem;          /* 280px wie in der Codebasis */
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .site-footer__karte iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  .karten-freigabe { position: absolute; inset: 0; z-index: 10; }

  .karten-freigabe[hidden] { display: none; }

  .karten-freigabe__flaeche {
    inline-size: 100%;
    block-size: 100%;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
  }

  .karten-freigabe__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(255 255 255 / 0.85);
    backdrop-filter: blur(4px);
  }

  .karten-freigabe__inhalt {
    text-align: center;
    padding: var(--sp-md);
    max-inline-size: 20rem;
  }

  .karten-freigabe__text {
    font-size: var(--fs-sm);
    color: var(--ink);
    line-height: 1.4;
    margin-block-end: var(--sp-sm);
  }

  .karten-freigabe__link {
    display: block;
    margin-block-start: var(--sp-2xs);
    font-size: var(--fs-xs);
    color: var(--grey);
  }

  .site-footer__daten {
    display: grid;
    gap: var(--sp-lg);
    font-size: var(--fs-sm);
  }

  @media (min-width: 30rem) {
    .site-footer__daten { grid-template-columns: repeat(2, 1fr); }
  }

  .site-footer__label {
    display: block;
    color: var(--lime);
    font-weight: var(--fw-semi-bold);
    margin-block-end: var(--sp-2xs);
  }

  .site-footer__adresse {
    font-style: normal;
    line-height: 1.7;
    margin-block-end: var(--sp-sm);
    text-wrap: nowrap;
  }

  @media (max-width: 30rem) {
    .site-footer__adresse { text-wrap: wrap; }
  }

  .site-footer__kontaktzeile {
    display: flex;
    align-items: center;
    gap: var(--sp-2xs);
    inline-size: fit-content;
    margin-block-start: var(--sp-2xs);
    color: var(--auf-ton-tief);
    text-decoration: none;
  }

  .site-footer__kontaktzeile:hover,
  .site-footer__kontaktzeile:focus-visible {
    color: var(--lime);
    text-decoration: underline;
  }

  .site-footer__logo {
    display: block;
    inline-size: 11.25rem;
    max-inline-size: 100%;
    block-size: auto;
    margin-block-start: var(--sp-md);
  }

  .site-footer__liste {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .site-footer__liste a {
    color: var(--auf-ton-tief);
    text-decoration: none;
  }

  .site-footer__liste a:hover,
  .site-footer__liste a:focus-visible {
    color: var(--lime);
    text-decoration: underline;
  }

  .site-footer__meta {
    margin-block-start: var(--sp-xl);
    padding-block-start: var(--sp-md);
    border-block-start: 1px solid rgb(255 255 255 / 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2xs) var(--sp-md);
    font-size: var(--fs-xs);
    color: var(--auf-ton-tief-leise);
  }

  @media (max-width: 34rem) {
    .site-footer__meta {
      flex-direction: column;
      text-align: center;
    }
  }

  .site-footer__meta-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2xs) var(--sp-md);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .site-footer__meta a {
    color: var(--auf-ton-tief-leise);
    text-decoration: none;
  }

  .site-footer__meta a:hover,
  .site-footer__meta a:focus-visible {
    color: var(--lime);
    text-decoration: underline;
  }

  /* --- Portraet mit umlaufendem Bogen ------------------------------------ */
  .umlauf {
    --gr: min(36rem, 54svh);
    --bahn: calc(var(--gr) * 0.45);   /* Radius der Linie, 45 % wie im SVG */
    position: relative;
    inline-size: min(100%, var(--gr));
    aspect-ratio: 1;
    margin-inline: auto;
  }

  /* Helle Scheibe als Grund — das Foto sitzt darin, nicht als Kreis davor.
     Das nimmt dem Ausschnitt die Haerte und laesst ihn ruhiger wirken. */
  .umlauf__scheibe {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-soft);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.03);
  }

  .umlauf__scheibe picture {
    display: block;
    inline-size: 86%;
    block-size: 100%;
    margin-inline: auto;
  }

  .umlauf__scheibe img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 15%;
  }

  /* Spur und Bogen als Ringe. Der Kegelverlauf laeuft entlang der Bahn,
     sein deckendes Ende ist die Spitze — sie trifft die Icons. */
  .umlauf__spur,
  .umlauf__bogen {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    /* Ringmaske. closest-side ist entscheidend: ohne die Angabe bezieht sich
       das Prozentmass auf die Ecke, nicht auf den Kreisrand. */
    -webkit-mask: radial-gradient(circle closest-side,
      transparent calc(100% - 5px), #000 calc(100% - 4px) 100%, transparent 100%);
    mask: radial-gradient(circle closest-side,
      transparent calc(100% - 5px), #000 calc(100% - 4px) 100%, transparent 100%);
  }

  .umlauf__spur { background: var(--lime); opacity: 0.55; }

  .umlauf__bogen {
    /* Langer Nachlauf: an der Spitze am dunkelsten, dahinter ueber den
       gesamten Kreis hinweg immer heller — nach einem Umlauf ist die Bahn
       wieder hell und es beginnt von vorn. */
    background: conic-gradient(
      from 0deg,
      transparent 0deg 6deg,
      rgb(111 122 13 / 0.04) 70deg,
      rgb(111 122 13 / 0.12) 150deg,
      rgb(111 122 13 / 0.28) 235deg,
      rgb(111 122 13 / 0.52) 300deg,
      rgb(111 122 13 / 0.78) 340deg,
      #6f7a0d 357deg,
      transparent 360deg
    );
    /* deutlich langsamer — der Umlauf soll begleiten, nicht treiben */
    animation: umlaufen 18s linear infinite;
  }

  /* Startwinkel 11:30 — 15 Grad vor der Senkrechten */
  @keyframes umlaufen {
    from { transform: rotate(-15deg); }
    to   { transform: rotate(345deg); }
  }

  .umlauf__punkt {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    margin: -1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--border);
    box-shadow: 0 6px 18px rgb(23 52 4 / 0.10);
    color: var(--grey);
    cursor: default;
    transform: rotate(var(--pos)) translate(var(--bahn)) rotate(calc(-1 * var(--pos)));
    animation: einfaerben 18s var(--takt) infinite;
  }

  @keyframes einfaerben {
    0%, 7%    { background: var(--lime); border-color: var(--lime); color: var(--ink);
                transform: rotate(var(--pos)) translate(var(--bahn)) rotate(calc(-1 * var(--pos))) scale(1.14); }
    13%, 100% { background: var(--paper); border-color: var(--border); color: var(--grey);
                transform: rotate(var(--pos)) translate(var(--bahn)) rotate(calc(-1 * var(--pos))) scale(1); }
  }

  /* Beschriftung im Kreis, unterhalb des Kinns */
  .umlauf__text {
    position: absolute;
    inset-block-end: 14%;
    inset-inline: 16%;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi-bold);
    color: var(--paper);
    /* kein Hintergrund — der weiche Schatten haelt die Schrift ueber dem Bild lesbar */
    text-shadow: 0 2px 12px rgb(0 0 0 / 0.75), 0 0 26px rgb(0 0 0 / 0.55);
    opacity: 0;
    pointer-events: none;
    animation: text-zeigen 18s var(--takt) infinite;
  }

  @keyframes text-zeigen {
    0%, 7%    { opacity: 1; transform: translateY(0); }
    13%, 100% { opacity: 0; transform: translateY(4px); }
  }

  /* Zeigen oder tippen blendet den Text sofort ein und haelt ihn */
  .umlauf__punkt--1:hover ~ .umlauf__text--1,
  .umlauf__punkt--1:focus-visible ~ .umlauf__text--1,
  .umlauf__punkt--2:hover ~ .umlauf__text--2,
  .umlauf__punkt--2:focus-visible ~ .umlauf__text--2,
  .umlauf__punkt--3:hover ~ .umlauf__text--3,
  .umlauf__punkt--3:focus-visible ~ .umlauf__text--3 {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* animation: none statt paused — sonst ueberschreiben die Keyframes
     die Hover-Farbe weiterhin und das Icon faerbt sich nicht. */
  .umlauf__punkt:hover,
  .umlauf__punkt:focus-visible {
    animation: none;
    background: var(--lime);
    border-color: var(--lime);
    color: var(--ink);
    transform: rotate(var(--pos)) translate(var(--bahn)) rotate(calc(-1 * var(--pos))) scale(1.14);
  }

  /* Solange jemand auf einem Icon steht, haelt der umlaufende Bogen an */
  .umlauf:has(.umlauf__punkt:hover) .umlauf__bogen,
  .umlauf:has(.umlauf__punkt:focus-visible) .umlauf__bogen {
    animation-play-state: paused;
  }

  /* ... und die uebrigen Icons bleiben ruhig */
  .umlauf:has(.umlauf__punkt:hover) .umlauf__punkt,
  .umlauf:has(.umlauf__punkt:focus-visible) .umlauf__punkt,
  .umlauf:has(.umlauf__punkt:hover) .umlauf__text,
  .umlauf:has(.umlauf__punkt:focus-visible) .umlauf__text {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .umlauf__lauf { animation: none; }
    .umlauf__bogen { animation: none; background: var(--lime-line); }
    .umlauf__punkt, .umlauf__text { animation: none; }
    .umlauf__text { opacity: 0; }
  }

  @media (max-width: 56.25rem) {
    .umlauf { --gr: 22rem; }
    .umlauf__punkt {
      inline-size: 2.75rem;
      block-size: 2.75rem;
      margin: -1.375rem;
    }
    .umlauf__text { font-size: var(--fs-sm); inset-inline: 10%; }
  }

}

@layer components {

  /* --- Rechtstexte ---------------------------------------------------------
     Impressum und Datenschutz. Die Texte stammen wörtlich vom Auftraggeber. */
  .rechtstext h2 {
    display: inline-block;
    margin-block: var(--sp-xl) var(--sp-sm);
    font-size: var(--fs-xl);
    line-height: var(--lh-heading);
    border-block-end: 4px solid var(--lime);
    padding-block-end: var(--sp-2xs);
  }

  .rechtstext h3 {
    margin-block: var(--sp-md) var(--sp-2xs);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
  }

  .rechtstext p,
  .rechtstext address {
    margin-block-start: var(--sp-2xs);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
  }

  .rechtstext address { font-style: normal; }

  .rechtstext .dot-list { margin-block-start: var(--sp-2xs); }

  .rechtstext__copy {
    margin-block-start: var(--sp-xl);
    color: var(--grey);
  }

  .rechtstext__zurueck { margin-block-start: var(--sp-lg); }
}

@layer layout {

  /* --- Aktiver Menuepunkt (Scrollspy) --------------------------------------
     Markiert den Abschnitt, der gerade gelesen wird. Nur Farbe und Linie
     wechseln — ein Wechsel der Schriftstaerke wuerde die Menuebreite
     veraendern und die Punkte springen lassen.

     Bewusst in @layer layout, nicht in components: die Reihenfolgezeile im
     <head> steht hinter den Stylesheets und legt deshalb nichts fest. Die
     tatsaechliche Reihenfolge endet auf layout — eine Regel in components
     wuerde von der Basisregel ueberschrieben. */
  .site-nav__list a[aria-current] {
    color: var(--green);
    border-block-end-color: var(--lime);
  }

  @media (max-width: 61.25rem) {
    .js .site-nav__list a[aria-current] {
      color: var(--green);
      border-block-end-color: var(--lime);
    }
  }
}

/* Siegel-Leiste: einheitliche Boxen je Auszeichnung — gleiche Zellhoehe,
   contain gleicht die sehr unterschiedlichen Formate optisch an. Bewusst
   OHNE @layer: ungelayerte Regeln schlagen jede Layer-Regel, sonst gewinnt
   components.css (das durch die Ladereihenfolge zuletzt registriert wird). */
  .seals__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--sp-lg);
    inline-size: 100%;
    max-inline-size: 68rem;
    margin-inline: auto;
  }

  @media (min-width: 56.25rem) {
    .seals__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* Flaechenangleich wie auf der Portalseite, Begruendung dort im Kommentar zur
     Siegel-Leiste. ACHTUNG: Die Faktoren sind NICHT dieselben — die Motive
     liegen hier in anderen Zuschnitten vor als im Portal (Innovator 2,11 statt
     1,78, EKG 3,27 statt 3,16). Wer die Bilddateien tauscht, muss die Faktoren
     neu rechnen: Wurzel aus (Seitenverhaeltnis / 2). */
  .seals__list li {
    display: grid;
    place-items: center;
  }

  .seals__list { --siegel-w: 74%; }

  /* Siehe Portalseite: <picture> aus dem Layout nehmen, sonst bezieht sich die
     Prozentbreite auf den Wrapper statt auf die Zelle. */
  .seals__list picture { display: contents; }

  .seals__list img {
    display: block;
    inline-size: calc(var(--siegel-w) * var(--siegel-f, 1));
    block-size: auto;
    object-fit: contain;
  }

  .seals__list img[src*="innovator"]      { --siegel-f: 1.027; }  /* 2,11 : 1 */
  .seals__list img[src*="ncsh"]           { --siegel-f: 0.840; }  /* 1,41 : 1 */
  .seals__list img[src*="ag-msk-q2"]      { --siegel-f: 1.035; }  /* 2,14 : 1 */
  .seals__list img[src*="experten-kreis"] { --siegel-f: 1.278; }  /* 3,27 : 1 */

  .seals__list a {
    display: grid;
    place-items: center;
    inline-size: 100%;
  }

/* Werdegang: acht kurze Eintraege ohne Beschreibungstext. Mit dem
   Standardabstand der Zeitleiste (--sp-lg, auf vier Eintraege mit Fliesstext
   ausgelegt) geriete die Spalte doppelt so hoch wie das Portraet daneben.
   Deshalb enger gesetzt und die Jahreszahl eine Stufe kleiner. Bewusst OHNE
   @layer — siehe Hinweis bei der Siegel-Leiste. */
  .timeline--werdegang {
    gap: var(--sp-sm);
  }

  .timeline--werdegang .timeline__year {
    font-size: var(--fs-base);
  }

  .timeline--werdegang .timeline__title {
    margin-block: 0;
  }