/* Versicherungsmakler Geisbauer GmbH – Stylesheet (Apple-orientiert, v2)
   Keine externen Ressourcen (Fonts, CDNs) → keine Drittanbieter-Requests, DSGVO-schlank. */

:root {
  --wein: #8c2350;        /* Hausfarbe: dunkles Beerenrot = Logo-Farbton, abgedunkelt (LOGO.jpg #a44074 war Mike „fast pink“) – nur Akzent */
  --wein-tief: #63183a;
  --sand: #f1d3a8;
  --papier: #fbfaf8;      /* Seitenhintergrund */
  --stein: #f3f0ee;       /* abgesetzte Abschnitte */
  --karte: #ffffff;       /* gruppierte Listen, Kacheln */
  --text: #1d1b1c;
  --titel: #1d1b1c;
  --grau: #625a5b;
  --linie: #e3dcda;
  --dunkel: #232021;      /* Kontakt + Fuß */
  --link: var(--wein);
  --knopf: var(--wein);
  --knopf-text: #fff;
  --knopf-hover: var(--wein-tief);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --mass: 70rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --r-gross: 22px;
  --weich: cubic-bezier(.22, .8, .24, 1);   /* Ease-out wie bei Apple-Übergängen */
  --kopf-h: 3.25rem;
  color-scheme: light;
  --leiste: rgba(124, 31, 71, .93);   /* Kopfzeile: Glas in Hausfarbe */
  --leiste-text: #f4efee;
  --leiste-grau: #f3d3e1;
}

/* Bewusst kein Dark Mode: Seite ist immer hell (wie apple.com), auf Mikes Wunsch 2026-10-29. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 1rem); interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font: 1.0625rem/1.55 var(--sans);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}
body.mobil-offen { overflow: hidden; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0; color: var(--titel); }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -0.03em; }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.017em; line-height: 1.25; }
p { margin: 0 0 1em; max-width: 68ch; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.kontakt :focus-visible, .fuss :focus-visible { outline-color: var(--sand); }

.huelle { max-width: var(--mass); margin: 0 auto; padding: 0 var(--rand); }

.skip { position: absolute; left: -999px; top: 0; background: var(--knopf); color: var(--knopf-text); padding: .5rem 1rem; z-index: 50; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* ============ Kopfzeile: Glas ============ */
.kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--leiste); color: var(--leiste-text);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: box-shadow .3s;
}
.kopf.gescrollt { box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 6px 24px rgba(76,18,44,.18); }
.kopf :focus-visible { outline-color: var(--sand); }
@media (prefers-reduced-transparency: reduce) { .kopf, .flyout { background: var(--wein); backdrop-filter: none; -webkit-backdrop-filter: none; } }

.kopf-leiste { display: flex; align-items: center; gap: 1.5rem; height: var(--kopf-h); }
.marke { display: flex; align-items: center; flex-shrink: 0; transition: opacity .2s; }
.marke:hover { text-decoration: none; opacity: .88; }
.marke svg { display: block; height: 40px; width: 227px; }   /* Logo inline (tools/logo_bauen.py → bilder/logo-kopf.svg), als <img> in Safari beim Zoomen unscharf */
/* schmale Desktops (1061–1180 px): Logo + Menü dürfen nicht umbrechen */
@media (min-width: 1061px) and (max-width: 1180px) {
  .kopf-leiste { gap: .9rem; }
  .marke svg { height: 34px; width: 193px; }
  .hauptnav ul { gap: 0; }
  .hauptnav a { padding: .45rem .55rem; }
}

.hauptnav { margin-left: auto; }
.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.hauptnav a {
  display: block; padding: .45rem .75rem; border-radius: 999px;
  color: var(--leiste-text); font-size: .875rem; opacity: .82; white-space: nowrap;
  transition: opacity .2s, background-color .2s, color .2s;
}
.hauptnav a:hover, .hauptnav a[aria-expanded="true"] { opacity: 1; text-decoration: none; background: rgba(255,255,255,.1); }
.hauptnav a.aktiv { opacity: 1; color: #fff; font-weight: 600; background: rgba(255,255,255,.14); }

.kopf .tel {
  background: #fff; color: var(--wein); font-size: .8125rem; font-weight: 600;
  padding: .4rem .9rem; border-radius: 999px; white-space: nowrap; transition: background-color .2s, transform .15s;
}
.kopf .tel:hover { background: var(--sand); color: var(--wein-tief); text-decoration: none; }
.kopf .tel:active { transform: scale(.96); }

/* Flyout */
.flyout {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--leiste);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .4s var(--weich);
}
.kopf.flyout-offen .flyout { clip-path: inset(0 0 0 0); }
.flyout-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; padding-top: 2.25rem; padding-bottom: 3rem; }
.spalte-titel { font-size: .8125rem; color: var(--leiste-grau); margin-bottom: .75rem; }
.spalte ul { list-style: none; margin: 0; padding: 0; }
.spalte li {
  opacity: 0; transform: translateY(-6px);
  transition: opacity .35s var(--weich), transform .35s var(--weich);
  transition-delay: calc(var(--i) * 25ms + 80ms);
}
.kopf.flyout-offen .spalte li { opacity: 1; transform: none; }
.spalte a { display: inline-block; padding: .3rem 0; color: var(--leiste-text); font-family: var(--display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.spalte a:hover { color: var(--sand); text-decoration: none; }
.flyout-raster .spalte:last-child a { font-size: 1rem; font-weight: 500; }

.abdunkler {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(20, 16, 17, .18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .35s;
}
.kopf.flyout-offen + .abdunkler { opacity: 1; }

/* Mobil-Menü */
.menue-knopf {
  display: none; margin-left: .25rem; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  position: relative; color: var(--leiste-text); border-radius: 999px;
}
.menue-knopf span {
  position: absolute; left: 13px; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .35s var(--weich), top .35s var(--weich);
}
.menue-knopf span:nth-child(1) { top: 15px; }
.menue-knopf span:nth-child(2) { top: 21.25px; transition: opacity .2s; }
.menue-knopf span:nth-child(3) { top: 27.5px; }
.menue-knopf[aria-expanded="true"] span:nth-child(1) { top: 21.25px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { top: 21.25px; transform: rotate(-45deg); }

.mobilmenue {
  position: fixed; inset: var(--kopf-h) 0 0 0; z-index: 29; overflow-y: auto;
  background: #7c1f47; color: var(--leiste-text); padding: 1rem 0 3rem;
  opacity: 0; transition: opacity .3s;
}
.kopf.mobil-aktiv ~ .mobilmenue { opacity: 1; }
.mobil-gruppe, .mobil-direkt, .mobil-anruf {
  opacity: 0; transform: translateY(-10px);
  transition: opacity .4s var(--weich), transform .4s var(--weich);
  transition-delay: calc(var(--i) * 45ms + 60ms);
}
.kopf.mobil-aktiv ~ .mobilmenue :is(.mobil-gruppe, .mobil-direkt, .mobil-anruf) { opacity: 1; transform: none; }
.mobil-gruppe { border-bottom: 1px solid rgba(255,255,255,.12); }
.mobil-gruppe summary, .mobil-direkt {
  display: flex; justify-content: space-between; align-items: center; min-height: 3.5rem;
  font-family: var(--display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; color: #fff;
  cursor: pointer; list-style: none;
}
.mobil-gruppe summary::-webkit-details-marker { display: none; }
.mobil-gruppe summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--leiste-grau); border-bottom: 2px solid var(--leiste-grau); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--weich); }
.mobil-gruppe[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.mobil-gruppe ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.mobil-gruppe a { display: block; padding: .55rem 0; color: var(--leiste-text); font-size: 1.05rem; }
.mobil-direkt { border-bottom: 1px solid rgba(255,255,255,.12); }
.mobil-direkt:hover { text-decoration: none; }
.mobil-anruf { margin-top: 2rem; width: 100%; }
.mobilmenue .knopf.voll { background: #fff; color: var(--wein); border-color: #fff; }
.mobilmenue .knopf.voll:hover { background: var(--sand); border-color: var(--sand); color: var(--wein-tief); }
.mobilmenue :focus-visible { outline-color: var(--sand); }

@media (max-width: 1060px) {   /* Kopfleiste: ab hier Burger-Menü (seit Menüpunkt „Ratgeber“ passt es darunter nicht; Puffer für breitere Mac-Schrift) */
  .hauptnav, .kopf .tel { display: none; }
  .menue-knopf { display: block; margin-left: auto; }
  .flyout, .abdunkler { display: none; }
}
@media (min-width: 1061px) { .mobilmenue { display: none; } }

/* ============ Knöpfe ============ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: 0 1.15rem;
  border-radius: 999px; font-size: .9375rem; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--knopf);
  transition: background-color .2s, color .2s, transform .15s var(--weich);
}
.knopf:hover { text-decoration: none; }
.knopf:active { transform: scale(.96); }
.knopf.voll { background: var(--knopf); color: var(--knopf-text); }
.knopf.voll:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.knopf.rahmen { color: var(--link); background: transparent; border-color: var(--link); }
.knopf.rahmen:hover { background: color-mix(in srgb, var(--link) 8%, transparent); }
.knopf.gross { min-height: 50px; padding: 0 1.6rem; font-size: 1.0625rem; }
.knopf .pdf { font-size: .75rem; opacity: .8; }

/* ============ Einstieg ============ */
.einstieg { padding: clamp(3.5rem, 10vw, 7.5rem) 0 clamp(3rem, 7vw, 5rem); text-align: center; }
.einstieg h1 { max-width: 16ch; margin: 0 auto; }
.einstieg .unterzeile { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; color: var(--grau); margin: 1.5rem auto 0; max-width: 40ch; letter-spacing: -0.015em; }
.einstieg-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; }

/* Wort-für-Wort-Aufbau der Überschrift */
.wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wort > span { display: inline-block; animation: wortAuf .9s var(--weich) both; animation-delay: calc(var(--i) * 70ms + 100ms); }
@keyframes wortAuf { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }
.js .aufbau-folge { animation: weichAuf 1s var(--weich) both; animation-delay: calc(var(--woerter, 6) * 70ms + 250ms); }
.js .aufbau-folge + .aufbau-folge { animation-delay: calc(var(--woerter, 6) * 70ms + 380ms); }
@keyframes weichAuf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Die drei Wegweiser als Kacheln */
.wege { list-style: none; margin: clamp(3rem, 7vw, 5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: left; }
.wege a {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 15rem;
  padding: 1.75rem 1.75rem 4.5rem; border-radius: var(--r-gross); background: var(--stein); color: var(--text);
  transition: transform .45s var(--weich), background-color .3s;
}
.wege a:hover { text-decoration: none; transform: scale(1.015); }
.wege a:active { transform: scale(.99); }
.wege .wer { font-size: .9rem; font-weight: 600; color: var(--link); margin-bottom: .6rem; }
.wege .was { font-family: var(--display); font-size: clamp(1.45rem, 2.3vw, 1.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--titel); }
.wege .wie { margin-top: .75rem; color: var(--grau); font-size: .95rem; }
.plus {
  position: absolute; right: 1.25rem; bottom: 1.25rem; width: 36px; height: 36px; border-radius: 50%;
  background: var(--titel); transition: background-color .25s, transform .45s var(--weich);
}
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--papier); border-radius: 2px; }
.plus::after { transform: rotate(90deg); }
.wege a:hover .plus { background: var(--link); transform: rotate(90deg); }
@media (max-width: 760px) { .wege { grid-template-columns: 1fr; } .wege a { min-height: 0; } }

/* ============ Abschnitte ============ */
.abschnitt { padding: clamp(4rem, 9vw, 7rem) 0; }
.abschnitt.grau { background: var(--stein); }
.abschnitt-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: 2.5rem; }
.abschnitt-kopf p { color: var(--grau); margin: 0; font-size: 1.125rem; }
@media (max-width: 760px) { .abschnitt-kopf { grid-template-columns: 1fr; } }

/* Gruppierte Liste (wie iOS-Einstellungen) */
.produkte { list-style: none; margin: 0; padding: 0 1.5rem; border-radius: var(--r-gross); background: var(--stein); }
.abschnitt.grau .produkte { background: var(--karte); }
.produkt {
  display: grid; grid-template-columns: 14rem minmax(0, 1fr) 21rem; gap: .5rem 2rem;
  padding: 1.5rem 0; align-items: start; position: relative;
}
.produkt + .produkt { border-top: 1px solid var(--linie); }
.produkt p { margin: 0; color: var(--grau); }
.produkt .hinweis { margin-top: .5rem; font-size: .875rem; }
.produkt .datei { display: flex; width: fit-content; align-items: center; min-height: 40px; font-size: .9375rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.produkt:target { animation: hervorheben 2s var(--weich); }
@keyframes hervorheben { 0%, 40% { background: color-mix(in srgb, var(--link) 9%, transparent); } }
@media (max-width: 1000px) {
  .produkt { grid-template-columns: 1fr; }
  .aktionen { justify-content: flex-start; margin-top: .5rem; }
}

/* Aufklappbare Zeilen mit weicher Höhenanimation */
details.produkt { display: block; padding: 0; }
details.produkt summary {
  list-style: none; cursor: pointer; min-height: 44px; padding: 1.25rem 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center;
}
details.produkt summary::-webkit-details-marker { display: none; }
details.produkt summary::after {
  content: ""; width: 28px; height: 28px; border-radius: 50%;
  background-color: color-mix(in srgb, var(--text) 8%, transparent);
  background-image: linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text));
  background-size: 12px 1.5px, 1.5px 12px;
  background-position: center; background-repeat: no-repeat;
  transition: transform .4s var(--weich), background-color .2s;
}
details.produkt summary:hover::after { background-color: color-mix(in srgb, var(--text) 14%, transparent); }
details.produkt[open] summary::after { transform: rotate(45deg); }
details.produkt::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .45s var(--weich), content-visibility .45s allow-discrete;
}
details.produkt[open]::details-content { block-size: auto; }
details.produkt .inhalt { padding-bottom: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem 2rem; }
@media (max-width: 1000px) { details.produkt .inhalt { grid-template-columns: 1fr; } }

/* ============ Arbeitsweise ============ */
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.fakten > div { background: var(--stein); border-radius: var(--r-gross); padding: 1.75rem; }
.fakten dt { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; color: var(--titel); margin-bottom: .5rem; }
.fakten dd { margin: 0; color: var(--grau); }
@media (max-width: 760px) { .fakten { grid-template-columns: 1fr; } }

/* ============ Kontakt ============ */
.kontakt { background: var(--dunkel); color: #ece4e4; }
.kontakt h2 { color: #fff; }
.kontakt p { color: #cfc4c5; margin-top: 1rem; }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.kontakt .gross { display: block; width: fit-content; font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1.2; margin-top: .5rem; overflow-wrap: anywhere; transition: color .2s; }
.kontakt .gross:hover { color: var(--sand); text-decoration: none; }
.kontakt address { font-style: normal; line-height: 1.7; }
.kontakt .klein { color: #bdb1b2; font-size: .95rem; }
@media (max-width: 760px) { .kontakt-raster { grid-template-columns: 1fr; } }

/* ============ Fuß ============ */
.fuss { background: var(--dunkel); border-top: 1px solid rgba(255,255,255,.1); color: #bdb1b2; font-size: .875rem; padding: 1.5rem 0; }
.fuss .huelle { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fuss a { color: #ece4e4; }

/* ============ Einblenden beim Scrollen ============ */
.js .zeigen > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--weich), transform .9s var(--weich);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .zeigen.sichtbar > * { opacity: 1; transform: none; }
/* Liste als Ganzes (Hintergrund) mit einblenden */
.js .produkte.zeigen { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--weich), transform .9s var(--weich); }
.js .produkte.zeigen.sichtbar { opacity: 1; transform: none; }
.js .zeigen.sofort, .js .zeigen.sofort > * { transition: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .zeigen > *, .js .produkte.zeigen, .spalte li, .mobil-gruppe, .mobil-direkt, .mobil-anruf { opacity: 1 !important; transform: none !important; }
}

/* ============ Rechtstexte ============ */
.rechtstext { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.rechtstext .huelle { max-width: 46rem; }
.rechtstext h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 2rem; }
.rechtstext h2 { font-size: 1.35rem; letter-spacing: -0.02em; margin: 2.5rem 0 .75rem; }
.rechtstext address { font-style: normal; margin-bottom: 1em; }
.rechtstext ul { padding-left: 1.2rem; max-width: 68ch; }

/* ============ PDF-Fenster ============ */
.pdf-fenster {
  width: min(64rem, calc(100vw - 4rem)); height: calc(100vh - 4rem); max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: var(--r-gross); overflow: hidden;
  background: var(--karte); color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  display: none; flex-direction: column;
}
.pdf-fenster[open] { display: flex; animation: blattAuf .45s var(--weich); }
.pdf-fenster.schliesst { animation: blattZu .25s ease-in forwards; }
.pdf-fenster::backdrop { background: rgba(20, 16, 17, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: einblenden .35s; }
.pdf-fenster.schliesst::backdrop { animation: ausblenden .25s forwards; }
@keyframes blattAuf { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@keyframes blattZu { to { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes einblenden { from { opacity: 0; } }
@keyframes ausblenden { to { opacity: 0; } }
body.pdf-offen { overflow: hidden; }

.pdf-leiste { display: flex; align-items: center; gap: .5rem; padding: .75rem .75rem .75rem 1.5rem; border-bottom: 1px solid var(--linie); }
.pdf-titel { margin: 0 auto 0 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-leiste .knopf { min-height: 36px; font-size: .875rem; padding: 0 .95rem; }
.pdf-zu { position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.pdf-zu::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: color-mix(in srgb, var(--text) 8%, transparent); transition: background-color .2s; }
.pdf-zu:hover::before { background: color-mix(in srgb, var(--text) 15%, transparent); }
.pdf-zu span { position: absolute; left: 15px; top: 21px; width: 14px; height: 2px; background: var(--text); border-radius: 2px; transform: rotate(45deg); }
.pdf-zu span + span { transform: rotate(-45deg); }
.pdf-rahmen { flex: 1; width: 100%; border: 0; background: #525659; }   /* Grau wie im Chrome-PDF-Viewer, kein weißer Blitz beim Laden */

/* ============ v4: moderne Animationen ============ */

/* Wendeschild in der Überschrift: Zielgruppen wechseln, alle im selben Rasterfeld → keine Layoutsprünge */
.wechsel { display: inline-grid; vertical-align: top; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.wechsel > span {
  grid-area: 1 / 1; justify-self: center;
  transform: translateY(105%); opacity: 0;
  transition: transform .7s var(--weich), opacity .5s var(--weich);
}
.wechsel > span.jetzt { transform: none; opacity: 1; }
.wechsel > span.weg { transform: translateY(-105%); opacity: 0; transition-duration: .45s, .2s; }   /* altes Wort schnell weg: kein halbtransparenter Text (Kontrastprüfung) */
.wechsel > span:not(.jetzt):not(.weg) { visibility: hidden; }
.wechsel { animation: weichAuf .9s var(--weich) both; animation-delay: 240ms; }

/* Lichtkegel */
.wege a, .fakten > div {
  background-image: radial-gradient(380px circle at var(--mx, -500px) var(--my, -500px), color-mix(in srgb, var(--wein) 9%, transparent), transparent 70%);
}

/* Kontakt: Unterstreichung zeichnet sich */
.kontakt .gross {
  background: linear-gradient(var(--sand), var(--sand)) left bottom / 0 2px no-repeat;
  transition: color .2s, background-size .5s var(--weich);
}
.kontakt .gross:hover { background-size: 100% 2px; }

/* Seitenwechsel (Start ↔ Impressum/Datenschutz): weich überblenden, Menüleiste bleibt stehen */
@view-transition { navigation: auto; }
.kopf { view-transition-name: kopf; }
::view-transition-old(root) { animation: .25s ease-in both seiteRaus; }
::view-transition-new(root) { animation: .45s var(--weich) both seiteRein; }
@keyframes seiteRaus { to { opacity: 0; transform: translateY(-12px); } }
@keyframes seiteRein { from { opacity: 0; transform: translateY(18px); } }

/* Scroll-gebundene Animationen (Chrome, Edge, Safari 26+). Andere Browser behalten die Einblendungen von oben. */
@supports (animation-timeline: scroll()) {
  /* Lesefortschritt als feine Linie unten an der Menüleiste */
  .kopf::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--sand); transform-origin: left; transform: scaleX(0);
    animation: fortschritt linear both; animation-timeline: scroll(root);
  }
  @keyframes fortschritt { to { transform: scaleX(1); } }

  /* Kopfbereich zieht sich beim Wegscrollen zurück */
  .einstieg > .huelle:first-child {
    animation: einstiegWeg linear both; animation-timeline: scroll(root); animation-range: 0 70vh;
  }
  @keyframes einstiegWeg { to { opacity: 0; transform: translateY(-6vh) scale(.94); filter: blur(6px); } }

  /* Kacheln fliegen gestaffelt mit dem Scrollen herein */
  .js .wege.zeigen > * { opacity: 1; transform: none; transition: none; }
  .wege > li { animation: kachelRein linear both; animation-timeline: view(); }
  .wege > li:nth-child(1) { animation-range: entry 0% entry 70%; }
  .wege > li:nth-child(2) { animation-range: entry 10% entry 85%; }
  .wege > li:nth-child(3) { animation-range: entry 20% entry 100%; }
  @keyframes kachelRein { from { opacity: 0; transform: translateY(80px) scale(.92); } }

  /* Gruppierte Listen und Karten wachsen beim Hereinscrollen auf volle Breite */
  .js .produkte.zeigen { opacity: 1; transform: none; transition: none; }
  .produkte, .fakten > div { animation: aufziehen linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes aufziehen { from { opacity: .3; transform: scale(.94); } }
}
/* Ratgeber-Flyout: vier Spalten (drei Zielgruppen-Spalten + Überblick) */
.flyout-raster.rg-flyout { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.rg-doppelt ul + .spalte-titel { margin-top: 1.5rem; }