/* ===========================================
   Nuklearmedizin Microsite — RNZ
   Statisches CSS, mobile-first, RNZ-Markenfarben
   =========================================== */

/* Schriften direkt hier, nicht per @import: ein @import haengt eine weitere
   render-blockierende Anfrage hinter diese Datei, statt sie parallel zu laden.
   Die WOFF sind auf die tatsaechlich vorkommenden Zeichen reduziert
   (scripts/optimize_fonts.py). */
@font-face {
  font-family: 'Titillium Web'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('../fonts/titillium-300.woff') format('woff');
}
@font-face {
  font-family: 'Titillium Web'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/titillium-400.woff') format('woff');
}
@font-face {
  font-family: 'Titillium Web'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../fonts/titillium-600.woff') format('woff');
}
@font-face {
  font-family: 'Titillium Web'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('../fonts/titillium-700.woff') format('woff');
}

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --c-orange:        #ff9700;
  --c-orange-hover:  #ea8000;
  --c-petrol:        #436d86;
  --c-petrol-dark:   #385d72;
  --c-petrol-light:  #c6d2d8;

  /* Neutrals */
  --c-bg:            #ffffff;
  --c-bg-soft:       #f7f7f5;
  --c-bg-card:       #ffffff;
  --c-bg-section:    #f3f3f3;
  --c-bg-dark:       #1e1e1e;
  --c-border:        #dfe3e4;
  --c-border-strong: #a1b4bf;
  --c-text:          #2a2a2a;
  --c-text-soft:     #707070;
  --c-text-on-dark:  #ffffff;
  --c-text-heading:  #1e1e1e;

  /* Akzent-Beige */
  --c-beige:         #e5e3df;

  /* Typography */
  --ff-base: 'Titillium Web', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Sizes (fluid) */
  --fs-xs:   0.875rem;
  --fs-sm:   1rem;
  --fs-md:   clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.35rem + 0.7vw, 2rem);
  --fs-2xl:  clamp(2rem, 1.6rem + 1.5vw, 3rem);
  --fs-3xl:  clamp(2.5rem, 2rem + 2.5vw, 4.5rem);

  /* Spacing */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 6px 24px rgba(56, 93, 114, 0.08);
  --shadow-strong: 0 12px 40px rgba(56, 93, 114, 0.18);

  /* Transitions */
  --t-fast: 0.15s ease;
  --t-base: 0.25s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }
a { color: var(--c-petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--c-orange-hover); }

h1, h2, h3, h4 {
  font-family: var(--ff-base);
  color: var(--c-text-heading);
  line-height: 1.2;
  margin: 0 0 var(--sp-2);
  font-weight: 700;
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
/* Lange Komposita wie "Nierenfunktionsszintigraphie" passen auf dem Handy nicht
   in eine Zeile und machten die Seite breiter als das Fenster (Niere 426 px bei
   390 px). Unter 720 px duerfen Ueberschriften lange Woerter trennen, notfalls
   umbrechen; "anywhere" zaehlt auch fuer die Mindestbreite in Grid und Flex. */
@media (max-width: 719px) {
  h1, h2, h3, h4 { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere; }
}
p { margin: 0 0 var(--sp-2); }

/* Skip link (Accessibility) */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-petrol-dark); color: #fff; padding: 0.75rem 1rem;
  z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}
.section { padding: var(--sp-6) 0; }
.section--soft { background: var(--c-bg-soft); }
.section--section { background: var(--c-bg-section); }
.section--dark { background: var(--c-petrol-dark); color: var(--c-text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
  color: var(--c-text-on-dark);
}
.section-head { max-width: 760px; margin-bottom: var(--sp-5); }
.section-head .eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.15em;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-orange);
  margin-bottom: var(--sp-1);
}
.section-head p { color: var(--c-text-soft); font-size: var(--fs-md); max-width: 60ch; }

/* ---------- Grid utilities ---------- */
.grid { display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid--cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) and (max-width: 1023px) { .grid--cards { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.95rem 1.6rem; border-radius: 999px;
  font-weight: 600; text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease,
              transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.btn:hover::after { transform: translateX(100%); }
.btn--primary {
  background: var(--c-orange); color: #fff;
  box-shadow: 0 6px 18px rgba(255, 151, 0, 0.35);
}
.btn--primary:hover {
  background: var(--c-orange-hover); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 151, 0, 0.5);
}
.btn--ghost {
  background: rgba(255,255,255,0.05); color: var(--c-text-on-dark);
  border-color: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.15); color: #fff; transform: translateY(-2px); }
.btn--secondary { background: var(--c-petrol); color: #fff; }
.btn--secondary:hover { background: var(--c-petrol-dark); color: #fff; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--c-petrol); border-color: var(--c-petrol); }
.btn--outline:hover { background: var(--c-petrol); color: #fff; transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(223, 227, 228, 0.5);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 32px rgba(56, 93, 114, 0.08);
}
/* Scroll-progress bar */
.site-header__progress {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--c-orange), var(--c-orange-hover));
  transition: width 0.05s linear;
  pointer-events: none;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  max-width: var(--container-max);
  margin: 0 auto;
  gap: var(--sp-3);
}
.site-logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--c-petrol-dark);
}
/* Logo fuellt ab 920 px die Hoehe der Kopfleiste (vorher 60x29 px in 79 px
   Hoehe). Auf dem Handy bleibt es bei 60 px: groesser schiebt den Untertitel
   in eine dritte Zeile und macht die feste Kopfleiste 15 px hoeher. */
.site-logo img { width: 60px; height: auto; }
@media (min-width: 920px) { .site-logo img { width: 84px; } }
@media (min-width: 1200px) { .site-logo img { width: 104px; } }
.site-logo__text { font-weight: 700; font-size: var(--fs-md); line-height: 1.1; }
.site-logo__text span { display: block; font-weight: 400; color: var(--c-text-soft); font-size: var(--fs-xs); }

.site-nav { display: none; }
@media (min-width: 920px) { .site-nav { display: flex; gap: var(--sp-3); align-items: center; } }
/* Link zur RNZ-Hauptseite: erst ab 1200 px, darunter fehlt der Platz; im
   Mobilmenue und im Fussbereich steht er immer */
.site-nav .site-nav__extern { display: none; }
/* Navigationspunkte brechen nie um; fehlt Platz, umbricht der Untertitel am Logo */
.site-nav a { white-space: nowrap; }
@media (min-width: 1200px) { .site-nav .site-nav__extern { display: block; } }
.site-nav a {
  color: var(--c-text); text-decoration: none; font-weight: 600;
  padding: 0.4rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--c-petrol-dark); border-bottom-color: var(--c-orange);
}

.site-nav__cta { margin-left: var(--sp-2); }

.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--c-petrol-dark); transition: transform var(--t-base), opacity var(--t-base); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 920px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none; flex-direction: column;
  border-top: 1px solid var(--c-border);
  padding: var(--sp-3);
  background: #fff;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  padding: 0.8rem 0; border-bottom: 1px solid var(--c-border);
  color: var(--c-text); text-decoration: none; font-weight: 600;
}
.mobile-nav a:last-child { border-bottom: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: var(--sp-7) 0 var(--sp-7);
  background: linear-gradient(160deg, var(--c-petrol-dark) 0%, var(--c-petrol) 100%);
  color: #fff;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: -10% 0;
  /* Das Bild kommt aus den .hero[data-hero=...]-Regeln am Dateiende.
     Frueher stand hier var(--hero-bg) mit einer im HTML deklarierten URL -
     die loeste Chrome gegen dieses Stylesheet auf und lief in einen 404. */
  background-size: cover; background-position: center;
  opacity: 1; mix-blend-mode: normal;
  pointer-events: none;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.05);
  will-change: transform;
  transition: transform 0.1s linear;
}
/* Abdunklung von links nach rechts: die Textspalte liegt links, das Motiv
   rechts. Die Werte sind gemessen, nicht geschaetzt - mit ihnen bleibt der
   weisse Fliesstext bei allen fuenf Motiven ueber 4.5:1 (WCAG AA), beim
   hellsten Motiv (Schilddruese) bei 5.7:1. Mit der frueheren Abdunklung waeren
   es nach der Bildkorrektur nur noch 2.9:1 gewesen.
   Mehr Bildwirkung auf Kosten des Kontrasts: die letzten beiden Stopps auf
   .55 und .12 senken - dann sind es 4.1:1 beim hellsten Motiv. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(22,36,45,0.98) 0%,
    rgba(22,36,45,0.96) 33%,
    rgba(22,36,45,0.72) 56%,
    rgba(22,36,45,0.20) 86%);
  pointer-events: none;
}
/* Cursor-following light spot — desktop only */
.hero__spotlight {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 151, 0, 0.18), transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 1;
  mix-blend-mode: screen;
}
@media (min-width: 920px) and (hover: hover) {
  .hero:hover .hero__spotlight { opacity: 1; }
}
.hero__inner { position: relative; z-index: 2; max-width: 760px; }
.hero__eyebrow { color: var(--c-orange); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
.hero h1 { color: #fff; font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.hero__sub { font-size: var(--fs-lg); margin-bottom: var(--sp-4); color: rgba(255,255,255,0.92); }
.hero__trust { font-size: var(--fs-xs); color: rgba(255,255,255,0.7); margin-top: var(--sp-3); }

/* Compact hero for sub pages */
.hero--compact { padding: var(--sp-5) 0 var(--sp-5); }
.hero--compact h1 { font-size: var(--fs-2xl); }

/* ---------- Cards ---------- */
.card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease;
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative;
  text-decoration: none;
  will-change: transform;
}
.card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 151, 0, 0.08), transparent 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(56, 93, 114, 0.18),
              0 8px 24px rgba(255, 151, 0, 0.12);
  border-color: var(--c-orange);
}
.card:hover::before { opacity: 1; }
.card h3 { margin: 0; font-size: var(--fs-lg); color: var(--c-petrol-dark); transition: color 0.3s ease; }
.card:hover h3 { color: var(--c-orange-hover); }
.card p { color: var(--c-text-soft); margin: 0; }
.card__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--c-orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.4rem;
}
.card__cta { margin-top: auto; padding-top: var(--sp-2); }
.card a { color: var(--c-petrol); font-weight: 600; }

/* Verfahren-Card with header image — flying-in image effect */
.card--proc { padding: 0; overflow: hidden; }
.card--proc .card__media {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  background: var(--c-petrol-light);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.card--proc:hover .card__media { transform: scale(1.06); }
.card--proc .card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; position: relative; z-index: 1; }
.card--proc .card__cta {
  display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--c-orange);
  transition: gap 0.3s ease;
}
.card--proc:hover .card__cta { gap: 0.8em; }

/* USP Cards (icon + title + body) — glassmorphism on dark sections */
.usp-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.5s ease,
              border-color 0.3s ease,
              background 0.3s ease;
  position: relative;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.usp-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 50px rgba(255, 151, 0, 0.2);
  border-color: rgba(255, 151, 0, 0.5);
}
.section--dark .usp-card:hover {
  background: rgba(255, 255, 255, 0.12);
}
.usp-card__num {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-orange), var(--c-orange-hover));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
  box-shadow: 0 6px 18px rgba(255, 151, 0, 0.4);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.usp-card:hover .usp-card__num { transform: scale(1.15) rotate(-6deg); }

/* ---------- Standorte ---------- */
.standort-card {
  border-left: 4px solid var(--c-orange);
  padding: var(--sp-3);
  background: var(--c-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.5s ease,
              border-left-width 0.3s ease;
}
.standort-card:hover {
  transform: translateY(-4px) translateX(2px);
  box-shadow: 0 18px 40px rgba(56, 93, 114, 0.18);
  border-left-width: 8px;
}
.standort-card h3 { color: var(--c-petrol-dark); font-size: var(--fs-md); margin-bottom: 0.4rem; }
.standort-card p { font-size: var(--fs-sm); margin: 0.2rem 0; }
.standort-card a { color: var(--c-petrol); }
/* Ganze Karte klickbar: der Link sitzt in der Ueberschrift und spannt per
   ::after ueber die Karte. Die Telefonnummer liegt darueber und bleibt
   eigenstaendig klickbar. */
.standort-card--link { position: relative; cursor: pointer; }
.standort-card .standort-card__link { color: inherit; text-decoration: none; }
.standort-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.standort-card__link:focus-visible { outline: none; }
.standort-card__link:focus-visible::after { outline: 3px solid var(--c-orange); outline-offset: 2px; }
.standort-card--link a[href^="tel:"] { position: relative; z-index: 1; }
.standort-card p.standort-card__mehr { margin-top: var(--sp-2); color: var(--c-petrol); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-bg-card);
  overflow: hidden;
}
.faq-item summary {
  padding: var(--sp-3);
  font-weight: 600; cursor: pointer;
  list-style: none; position: relative;
  color: var(--c-petrol-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: var(--sp-3); top: 50%;
  transform: translateY(-50%);
  font-weight: 700; color: var(--c-orange); font-size: 1.4rem;
  transition: transform var(--t-base);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item__body { padding: 0 var(--sp-3) var(--sp-3); color: var(--c-text-soft); }

/* ---------- Aerzte ---------- */
.doctor-card {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3); background: var(--c-bg-card);
  border: 1px solid var(--c-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.5s ease, border-color 0.3s ease;
}
.doctor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(56, 93, 114, 0.18);
  border-color: var(--c-orange);
}
.doctor-card .avatar {
  width: 80px; height: 80px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-petrol-dark), var(--c-petrol));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.4rem; letter-spacing: 0.05em;
  border: 3px solid var(--c-orange);
  box-shadow: 0 6px 18px rgba(56, 93, 114, 0.25);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.doctor-card:hover .avatar { transform: scale(1.08) rotate(-4deg); }
.doctor-card .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.doctor-card h3 { font-size: var(--fs-md); margin: 0 0 0.25rem; color: var(--c-petrol-dark); }
.doctor-card p { font-size: var(--fs-sm); margin: 0.2rem 0; color: var(--c-text-soft); }

/* ---------- Verfahren-Detail ---------- */
.proc-toc {
  background: var(--c-bg-soft);
  border-left: 4px solid var(--c-orange);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
}
.proc-toc ul { margin: 0; padding-left: var(--sp-3); }
.proc-section { margin-bottom: var(--sp-5); }
.proc-section h2 { color: var(--c-petrol-dark); font-size: var(--fs-xl); }
.proc-list-checked { list-style: none; padding-left: 0; }
.proc-list-checked li {
  padding-left: 1.6em; position: relative; margin-bottom: 0.4rem;
}
.proc-list-checked li::before {
  content: "→"; position: absolute; left: 0; color: var(--c-orange); font-weight: 700;
}
.callout {
  background: var(--c-bg-soft); border-radius: var(--radius-md);
  padding: var(--sp-3); border: 1px solid var(--c-border);
  margin: var(--sp-3) 0;
}
.callout--warn { border-left: 4px solid var(--c-orange); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-petrol-dark); color: var(--c-text-on-dark);
  padding: var(--sp-5) 0 var(--sp-3);
}
.site-footer h4 { color: #fff; font-size: var(--fs-md); margin-bottom: var(--sp-2); }
/* Die Spaltenueberschriften sind h3 und erbten bisher die fast schwarze
   Ueberschriftenfarbe: 2,4:1 auf Petrol. Orange kommt auf 3,3:1, genug fuer
   grosse fette Schrift (WCAG AA ab 3:1). Bei kleinerer Schrift reicht es nicht. */
.site-footer h3 { color: var(--c-orange); }
.site-footer a { color: #fff; text-decoration: none; opacity: 0.85; }
.site-footer a:hover { opacity: 1; color: var(--c-orange); }
.site-footer__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__bottom {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: var(--fs-xs); opacity: 0.8;
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
}

/* ---------- Cookie Banner ---------- */
.cookie-banner {
  position: fixed; bottom: 1rem; left: 1rem; right: 1rem;
  max-width: 480px; margin: 0 auto;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-strong);
  z-index: 100;
  display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner p { font-size: var(--fs-xs); margin: 0 0 var(--sp-2); }
.cookie-banner__row { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.cookie-banner__row .btn {
  padding: 0.55rem 1rem; font-size: var(--fs-xs);
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.muted { color: var(--c-text-soft); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mt-3 { margin-top: var(--sp-3); }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.15em;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-orange);
}
.lead { font-size: var(--fs-lg); color: var(--c-text); max-width: 65ch; }

/* Print */
@media print {
  .site-header, .site-footer, .cookie-banner, .nav-toggle, .mobile-nav { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================
   Scroll-Reveal Animations
   IntersectionObserver-driven, respects prefers-reduced-motion
   ============================================ */

/* Reveal items: default = visible.
   JS adds .before-reveal to hide them, then IntersectionObserver removes it.
   Wenn JS aus oder Screenshot ohne JS-Trigger: alle sofort sichtbar. */
[data-reveal-item] {
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-reveal-item].before-reveal {
  opacity: 0;
  transform: translateY(40px);
}
[data-reveal-item].before-reveal.is-visible,
[data-reveal-item].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children: each card waits a bit longer */
[data-stagger] > [data-reveal-item]:nth-child(1) { transition-delay: 0.05s; }
[data-stagger] > [data-reveal-item]:nth-child(2) { transition-delay: 0.12s; }
[data-stagger] > [data-reveal-item]:nth-child(3) { transition-delay: 0.19s; }
[data-stagger] > [data-reveal-item]:nth-child(4) { transition-delay: 0.26s; }
[data-stagger] > [data-reveal-item]:nth-child(5) { transition-delay: 0.33s; }
[data-stagger] > [data-reveal-item]:nth-child(6) { transition-delay: 0.40s; }
[data-stagger] > [data-reveal-item]:nth-child(7) { transition-delay: 0.47s; }
[data-stagger] > [data-reveal-item]:nth-child(8) { transition-delay: 0.54s; }
[data-stagger] > [data-reveal-item]:nth-child(9) { transition-delay: 0.61s; }
[data-stagger] > [data-reveal-item]:nth-child(10) { transition-delay: 0.68s; }

/* Slide-in variants for Verfahren-Cards: alternating left/right */
.card--proc[data-reveal-item].before-reveal { transform: translateY(40px) scale(0.96); }
.card--proc[data-reveal-item].is-visible { transform: translateY(0) scale(1); }

/* Section-head reveals slightly differently */
.section-head[data-reveal-item].before-reveal { transform: translateY(20px); }

/* Heros animate in on load */
.hero__inner > * {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero__inner > *:nth-child(1) { animation-delay: 0.1s; }
.hero__inner > *:nth-child(2) { animation-delay: 0.2s; }
.hero__inner > *:nth-child(3) { animation-delay: 0.3s; }
.hero__inner > *:nth-child(4) { animation-delay: 0.4s; }
.hero__inner > *:nth-child(5) { animation-delay: 0.5s; }
.hero__inner > *:nth-child(6) { animation-delay: 0.6s; }
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Section-Eyebrow animated underline */
.section-head .eyebrow {
  position: relative;
  padding-bottom: 0.4rem;
}
.section-head .eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--c-orange);
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}
[data-reveal-item].is-visible .eyebrow::after,
.section-head[data-reveal-item].is-visible .eyebrow::after { width: 60px; }

/* H1/H2 letter-by-letter unnötig — wir machen subtle scale-in */
.hero h1 {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* USP-Card numbers scale-in on reveal */
.usp-card .usp-card__num {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
.usp-card.before-reveal .usp-card__num { transform: scale(0); }
.usp-card.is-visible .usp-card__num { transform: scale(1); }

/* Glassmorphism Cookie-Banner */
.cookie-banner {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(223, 227, 228, 0.5);
}

/* ============================================
   v3 Premium Effects — added 2026-04-30
   ============================================ */

/* ---------- Hero v2: Statement-Typo + 90vh + Scroll-Cue ---------- */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: var(--sp-7) 0 var(--sp-8);
}
.hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
/* Compact hero (Unterseiten): moderatere H1-Groesse als die Statement-Hero der Startseite.
   Lange deutsche Einzelwoerter (z.B. "Schilddruesendiagnostik") sauber umbrechen statt abschneiden.
   Muss NACH ".hero h1" stehen, um dessen clamp(...5.5rem) bei gleicher Spezifitaet zu ueberschreiben. */
.hero--compact h1 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  overflow-wrap: break-word;
  hyphens: auto;
}
.hero__sub {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 400;
  max-width: 38ch;
}
.hero__inner > p:not(.hero__sub):not(.hero__trust):not(.hero__eyebrow) {
  max-width: 56ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  color: rgba(255,255,255,0.85);
}
/* Scroll-Cue */
.hero__scroll-cue {
  position: absolute; left: 50%; bottom: 2.5rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  animation: cueFadeIn 1.2s 0.8s cubic-bezier(0.2,0.8,0.2,1) backwards;
}
.hero__scroll-cue::after {
  content: ""; width: 1px; height: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
  animation: cueDescend 2s ease-in-out infinite;
}
@keyframes cueFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes cueDescend {
  0%   { transform: scaleY(0.4) translateY(-12px); opacity: 0.2; }
  50%  { transform: scaleY(1) translateY(0); opacity: 1; }
  100% { transform: scaleY(0.4) translateY(12px); opacity: 0.2; }
}

/* ---------- KPI-Strip ---------- */
.kpi-strip {
  background: #fff;
  margin-top: -3rem;
  position: relative;
  z-index: 5;
}
.kpi-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(56, 93, 114, 0.18);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
@media (min-width: 720px) { .kpi-strip__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kpi-strip__grid { grid-template-columns: repeat(4, 1fr); } }

.kpi-cell {
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  position: relative;
  transition: background 0.4s ease;
}
.kpi-cell:hover { background: var(--c-bg-soft); }
@media (min-width: 1024px) {
  .kpi-cell:nth-child(4n) { border-right: 0; }
  .kpi-cell:nth-child(n+1) { border-bottom: 0; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .kpi-cell:nth-child(2n) { border-right: 0; }
  .kpi-cell:nth-child(n+3) { border-bottom: 0; }
}
.kpi-cell__num {
  display: block;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--c-petrol-dark), var(--c-orange));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.kpi-cell__label {
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ---------- Trust-Belt ---------- */
.trust-belt {
  padding: var(--sp-4) 0 var(--sp-5);
  background: #fff;
}
.trust-belt__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.7;
  transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.trust-pill:hover {
  opacity: 1;
  color: var(--c-petrol-dark);
  transform: translateY(-1px);
}
.trust-pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-orange);
  box-shadow: 0 0 0 4px rgba(255, 151, 0, 0.15);
}

/* ---------- Floating Accent Shapes ---------- */
.floating-shapes {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.floating-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
  will-change: transform;
}
.floating-shape--orange {
  background: radial-gradient(circle, var(--c-orange), transparent 60%);
}
.floating-shape--petrol {
  background: radial-gradient(circle, var(--c-petrol), transparent 60%);
}
.floating-shape--1 { width: 380px; height: 380px; top: -10%; right: -8%; animation: floatA 22s ease-in-out infinite; }
.floating-shape--2 { width: 280px; height: 280px; bottom: -5%; left: -6%; animation: floatB 28s ease-in-out infinite; }
.floating-shape--3 { width: 220px; height: 220px; top: 40%; left: 60%; animation: floatC 26s ease-in-out infinite; }
@keyframes floatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 60px) scale(1.1); }
}
@keyframes floatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -40px) scale(0.9); }
}
@keyframes floatC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, 30px) scale(1.1); }
  66%      { transform: translate(-30px, 50px) scale(0.95); }
}

/* ---------- Wave Section Dividers ---------- */
.wave-divider {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
}
.wave-divider svg { display: block; width: 100%; height: 100%; }

/* ---------- Magazine-Style Verfahren-Section ---------- */
.proc-magazine {
  position: relative;
  padding: var(--sp-6) 0;
}
.proc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) 0;
  position: relative;
}
@media (min-width: 920px) {
  .proc-row { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .proc-row--reverse .proc-row__media { order: 2; }
}
.proc-row__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 30px 80px rgba(56, 93, 114, 0.2);
  transform-style: preserve-3d;
}
.proc-row__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Organ liegt bei rund 70 % der Bildbreite; mittig zugeschnitten (4:3 aus
     21:9) fiel sein rechter Rand aus dem Bild */
  object-position: 90% center;
  transition: transform 1s cubic-bezier(0.2,0.8,0.2,1);
}
.proc-row:hover .proc-row__media img { transform: scale(1.04); }
.proc-row__num {
  position: absolute; top: -2.5rem; left: -1rem;
  font-size: clamp(5rem, 4rem + 5vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-orange);
  opacity: 0.15;
  letter-spacing: -0.04em;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 920px) {
  .proc-row--reverse .proc-row__num { left: auto; right: -1rem; }
}
.proc-row__body {
  position: relative;
  z-index: 1;
}
.proc-row__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-orange);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.proc-row__title {
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
  color: var(--c-petrol-dark);
}
.proc-row__lead {
  font-size: var(--fs-md);
  color: var(--c-text-soft);
  margin-bottom: var(--sp-3);
}
.proc-row__cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--c-orange);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: gap 0.3s ease, border-color 0.3s ease;
}
.proc-row__cta:hover { gap: 1rem; border-color: var(--c-orange); }
.proc-row__cta::after { content: "→"; font-size: 1.1em; transition: transform 0.3s ease; }
.proc-row__cta:hover::after { transform: translateX(4px); }

/* ---------- 3D-Tilt Cards ---------- */
.tilt {
  perspective: 1000px;
}
.tilt > * {
  transform-style: preserve-3d;
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.tilt:hover > * {
  transition: transform 0.05s linear;
}

/* ---------- Editorial Quote-Block ---------- */
.editorial-quote {
  padding: var(--sp-7) 0;
  background: var(--c-bg-soft);
  position: relative;
  overflow: hidden;
}
.editorial-quote::before {
  content: """;
  position: absolute; top: -2rem; left: 50%;
  transform: translateX(-50%);
  font-size: 22rem; line-height: 1;
  color: var(--c-orange);
  opacity: 0.07;
  font-family: Georgia, serif;
  pointer-events: none;
}
.editorial-quote__inner {
  max-width: 880px; margin: 0 auto;
  text-align: center;
  position: relative; z-index: 1;
}
.editorial-quote__text {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-petrol-dark);
  font-weight: 400;
  margin-bottom: var(--sp-3);
}
.editorial-quote__cite {
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
}

/* ---------- Process-Timeline (für Verfahrens-Seiten) ---------- */
.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
  position: relative;
}
/* Nebeneinander erst ab 1100 px: darunter wurden fuenf gleich breite Spalten
   so schmal, dass die Reihe rechts aus dem Inhaltsbereich lief (gemessen bei
   800 px). Die Breite jedes Kaestchens folgt seiner Textmenge (flex-basis
   auto), dadurch werden die Kaestchen annaehernd gleich hoch. */
@media (min-width: 1100px) {
  .timeline { display: flex; gap: 0; }
  .timeline-step { flex: 1 1 auto; min-width: 140px; }  /* 7 x 140 passt in 1052 px */
}
.timeline-step__title, .timeline-step__body { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
.timeline-step {
  position: relative;
  padding: var(--sp-3);
  background: var(--c-bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
}
@media (min-width: 1100px) {
  .timeline-step { border-radius: 0; border-right: 0; }
  .timeline-step:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
  .timeline-step:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); border-right: 1px solid var(--c-border); }
}
.timeline-step__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-orange), var(--c-orange-hover));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 12px rgba(255, 151, 0, 0.3);
}
.timeline-step__title {
  font-weight: 700; color: var(--c-petrol-dark);
  font-size: var(--fs-sm);
  margin-bottom: 0.3rem;
}
.timeline-step__body {
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  line-height: 1.5;
}
.timeline-step__connector {
  display: none;
}
@media (min-width: 1100px) {
  .timeline-step__connector {
    display: block;
    position: absolute;
    top: 50%; right: -8px;
    width: 16px; height: 16px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--c-bg-card);
    border-top: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    z-index: 1;
  }
  .timeline-step:last-child .timeline-step__connector { display: none; }
}

/* ---------- Magnetic CTAs + Pulse-Glow ---------- */
.btn--primary.btn--pulse {
  animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 6px 18px rgba(255, 151, 0, 0.35), 0 0 0 0 rgba(255, 151, 0, 0); }
  50%      { box-shadow: 0 6px 18px rgba(255, 151, 0, 0.45), 0 0 0 12px rgba(255, 151, 0, 0); }
}

/* Magnetic-CTA: smooth follow */
.btn--magnetic {
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1),
              background 0.3s ease, color 0.3s ease,
              box-shadow 0.4s ease;
}
.btn--magnetic.is-tracking {
  transition: transform 0.1s linear,
              background 0.3s ease, color 0.3s ease,
              box-shadow 0.4s ease;
}

/* ---------- Section-Tracker (vertical Dots, rechts) ---------- */
.section-tracker {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex; flex-direction: column; gap: 0.8rem;
  pointer-events: auto;
}
@media (max-width: 1023px) { .section-tracker { display: none; } }
.section-tracker__dot {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-border-strong);
  border: 0; padding: 0; cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
  position: relative;
}
.section-tracker__dot::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 0.8rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-petrol-dark);
  color: #fff;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.section-tracker__dot:hover {
  background: var(--c-orange);
  transform: scale(1.3);
}
.section-tracker__dot:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}
.section-tracker__dot.is-active {
  background: var(--c-orange);
  transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(255, 151, 0, 0.2);
}

/* ---------- Reveal-Variants for new components ---------- */
.kpi-cell[data-reveal-item].before-reveal { transform: translateY(20px) scale(0.95); }
.kpi-cell[data-reveal-item].is-visible { transform: translateY(0) scale(1); }
.proc-row[data-reveal-item].before-reveal { transform: translateY(60px); }
.proc-row[data-reveal-item].is-visible { transform: translateY(0); }
.trust-pill[data-reveal-item].before-reveal { transform: translateY(8px); opacity: 0; }
.trust-pill[data-reveal-item].is-visible { transform: translateY(0); opacity: 0.7; }

/* Reduced motion: disable all animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal-item], [data-reveal-item].before-reveal { opacity: 1 !important; transform: none !important; }
  .hero__inner > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .usp-card .usp-card__num { transform: scale(1) !important; }
}

/* ---------- Brotkrume (SEO-Ueberarbeitung 07/2026) ---------- */
.breadcrumb {
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  padding: 0.55rem 0;
}
.breadcrumb .container {
  display: flex; align-items: center; gap: 0.45rem;
  color: var(--c-text-soft);
}
.breadcrumb a { color: var(--c-petrol); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: 600; }

/* Bildnachweis in der Ecke der Hero-Sektion. Die Hero-Bilder liegen als
   CSS-Hintergrund, koennen also kein alt-Attribut tragen - deshalb ein
   sichtbarer, zurueckhaltender Hinweis. Auf den fuenf Verfahrensseiten ist es
   die Pflicht-Kennzeichnung des KI-generierten Motivs, auf der Startseite seit
   dem 28.08.2026 nur noch der Nachweis, wo das Foto aufgenommen wurde. */
.ki-hinweis, .bild-hinweis {
  position: absolute; right: 0.6rem; bottom: 0.5rem; z-index: 2;
  font-size: 0.66rem; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  background: rgba(20,20,20,0.58);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  pointer-events: none;
}
@media (max-width: 620px) { .ki-hinweis, .bild-hinweis { font-size: 0.6rem; } }
/* ---------- Helle Hero-Variante, nur Startseite (28.08.2026) ----------
   Das Praxisfoto soll freundlich wirken, also hell bleiben. Statt es
   abzudunkeln und weiss darauf zu schreiben, liegt jetzt ein heller Schleier
   darueber und die Schrift kommt aus dem Markenspektrum: Petrol fuer Text,
   Orange bleibt dem Handlungsknopf vorbehalten.

   Warum Orange KEINE Schriftfarbe wird: gemessen ueber der Textspalte kommt
   `#ff9700` auf 1,3:1 und `#ea8000` auf 2,4:1. Erst ein Braunton wie `#8f4e00`
   erreicht die 4,5:1, und der ist keine Markenfarbe mehr. Orange traegt hier
   den Knopf, nicht den Satz.

   Alle Werte unten sind im Browser gemessen, nicht geschaetzt: Textkaesten per
   getBoundingClientRect, darunter derselbe Hero ohne Text gerendert, dann der
   schlechteste Bildpunkt je Kasten. Skript: docs/hero-kontrast-messung.md.

   Schlechtester Wert je Fensterbreite (Eyebrow / Ueberschrift / Unterzeile /
   Fliesstext), WCAG AA verlangt 4,5:1 und fuer die grosse Ueberschrift 3:1:

     1920  4,78  5,29  5,31  10,45
     1440  4,59  5,03  5,32  10,15
     1100  4,64  4,70  5,29  10,47
      960  4,67  4,65  5,29  10,15
      600  5,01  5,69  5,67  12,33
      320  4,98  6,16  5,69  11,94

   Zwei Werte sind dabei kritisch und nicht frei waehlbar:
   - Das Plateau muss bis 74 % reichen. Bei 66 % faellt die Ueberschrift bei
     960 px auf 3,3:1, weil die Textspalte dort relativ breiter ist als bei
     1440 px. Das ist der Grund, warum 74 % dasteht und nicht weniger.
   - Die Deckkraft von 0.90/0.86 ist die schwaechste, die traegt. Bei 0.87/0.82
     faellt die Unterzeile unter AA. Wer mehr Foto sehen will, muss die Schrift
     dunkler machen, nicht den Schleier duenner. */
.hero[data-hero="index"] {
  /* Ersatzflaeche, falls das Bild nicht laedt: hell, damit die dunkle Schrift
     auch dann lesbar bleibt. */
  background: linear-gradient(160deg, #f6f7f7 0%, var(--c-bg-section) 100%);
  color: var(--c-petrol-dark);
}
.hero[data-hero="index"]::after {
  background: linear-gradient(100deg,
    rgba(255,255,255,0.90) 0%,
    rgba(255,255,255,0.86) 74%,
    rgba(255,255,255,0.40) 84%,
    rgba(255,255,255,0.05) 97%);
}
.hero[data-hero="index"] .hero__eyebrow { color: var(--c-petrol); }
.hero[data-hero="index"] h1 { color: var(--c-petrol-dark); }
.hero[data-hero="index"] .hero__sub { color: var(--c-petrol-dark); }
/* Die bestehende Regel fuer den Fliesstext im Hero ist
   `.hero__inner > p:not(.hero__sub):not(.hero__trust):not(.hero__eyebrow)` und
   damit spezifischer als eine schlichte Nachfolger-Regel. Deshalb hier
   ebenfalls mit :not() geschrieben, sonst bleibt der Absatz weiss. */
.hero[data-hero="index"] .hero__inner > p:not(.hero__sub):not(.hero__trust) {
  color: var(--c-text);
}
.hero[data-hero="index"] .hero__trust { color: var(--c-text-soft); }
.hero[data-hero="index"] .btn--ghost {
  background: rgba(255,255,255,0.55); color: var(--c-petrol-dark);
  border-color: var(--c-petrol);
}
.hero[data-hero="index"] .btn--ghost:hover {
  background: var(--c-petrol); color: #fff;
}
.hero[data-hero="index"] .hero__scroll-cue { color: var(--c-petrol); }
.hero[data-hero="index"] .hero__scroll-cue::after {
  background: linear-gradient(180deg, rgba(67,109,134,0.7), transparent);
}
/* Der orangefarbene Lichtfleck arbeitet mit `screen` und macht auf heller
   Flaeche nichts als Grauschleier. */
.hero[data-hero="index"] .hero__spotlight { display: none; }

/* Schmale Fenster: Der Verlauf laeuft mit 100deg quer, dort steht der Text aber
   ueber die ganze Breite. Gemessen bei 390 px stand die Unterzeile mit 1,5:1
   ueber den Blaettern des Strausses. Deshalb hier ein senkrechter Verlauf: oben
   dicht, wo der Text sitzt, nach unten hin durchlaessig, wo das Bild wirkt.
   Nachgemessen bei 390 px: Eyebrow 5,0:1, Ueberschrift 6,3:1, Unterzeile
   5,5:1, Fliesstext 11,7:1. Bei 320 px und 600 px liegen die Werte gleichauf. */
@media (max-width: 919px) {
  .hero[data-hero="index"]::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.93) 72%,
      rgba(255,255,255,0.55) 100%);
  }
}

/* Auf der Startseite schiebt sich der KPI-Streifen mit `margin-top: -48px` und
   `z-index: 5` ueber die unteren 48 px der Hero-Sektion. Der Hinweis sass genau
   darunter und war dort unsichtbar - gemessen am 28.08.2026, betraf auch schon
   den KI-Hinweis davor. Auf den Verfahrensseiten gibt es den Streifen nicht,
   deshalb wird nur die Startseite angehoben. */
.hero[data-hero="index"] .ki-hinweis,
.hero[data-hero="index"] .bild-hinweis { bottom: 4rem; }

/* ---------- Hero-Motive (Korrektur 30.07.2026) ----------
   Vorher stand das Bild als `--hero-bg` im Inline-Style der Section und wurde
   hier per var() eingesetzt. Chrome loest die relative URL dabei gegen DIESE
   Datei auf und fragt /css/images/... an - 404. Das Motiv war deshalb auf
   keiner Seite je sichtbar, unabhaengig vom gewaehlten Bildstil.
   Zuweisung darum hier, wo `../images/` eindeutig aufloest. */
/* Startseite: Foto der Anmeldung Martin-Richter-Strasse nach dem Umbau, aus dem
   unbearbeiteten Original von Frau Schmid retuschiert (Aufbau:
   scripts/retusche_hero.py, dann scripts/build_hero_praxis.py): Deckenauslaesse
   und Ablage-Kleinkram entfernt, Blumen erneuert, Licht und Farbe auf
   Innenaufnahme-Niveau. Kameraposition, Bildausschnitt und Raum sind unveraendert.
   Weil das eine generative Bearbeitung ist, traegt die Startseite wieder eine
   KI-Kennzeichnung.
   Bildposition gemessen, nicht geschaetzt: bei `center 50%` kommt der schlechteste
   Pixel unter dem weissen Fliesstext auf 6.0:1 - WCAG AA verlangt 4.5:1, die
   fruehere ChatGPT-Fassung lag bei 5.0:1. Weil Bild- und Kastenhoehe hier fast
   gleich sind, aendert der Prozentwert wenig; 35% bis 65% liegen zwischen 5.9
   und 6.2:1. */
.hero[data-hero="index"]::before        { background-image: url('../images/praxis/anmeldung-mrs-foto.webp'); background-position: center 50%; }
.hero[data-hero="schilddruese"]::before { background-image: url('../images/ki-generated/hero-schilddruese.webp'); }
.hero[data-hero="skelett"]::before      { background-image: url('../images/ki-generated/hero-skelett.webp'); }
.hero[data-hero="myokard"]::before      { background-image: url('../images/ki-generated/hero-myokard.webp'); }
.hero[data-hero="niere"]::before        { background-image: url('../images/ki-generated/hero-niere.webp'); }
.hero[data-hero="datscan"]::before      { background-image: url('../images/ki-generated/hero-datscan.webp'); }
/* Das Organ liegt in allen fuenf Motiven bei rund 70 % der Bildbreite und
   reicht bis 88-93 %. Mittig zugeschnitten fiel sein rechter Rand aus dem Bild. */
.hero:not([data-hero="index"])::before { background-position: 75% center; }