/* ============================================================================
   STYLEGUIDE-TOKENS — kanonische Kopie der Seiten-Basisstyles (Quelle: standorte.html,
   Mehrheitsvariante). Nur vom Styleguide verwendet. TODO: Tokens final nach
   globale-komponenten.css heben und Seiten-Drift auflösen (siehe Konsolidierungs-Report).
   ============================================================================ */

  /* === SILBENTRENNUNG (global, de-DE) === */
  .hyphenate{ hyphens:auto; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphenate-limit-chars:6 3 3; -webkit-hyphenate-limit-chars:6 3 3; -moz-hyphenate-limit-chars:6 3 3; -ms-hyphenate-limit-chars:6 3 3; overflow-wrap:break-word; }
  /* Anwenden: Fließtext, Headlines (Komposita!), Listen-/Zellen-Texte */
  h1,h2,h3,h4, p, blockquote, li, td, th, [data-introtext], [data-news-body], [data-visit-cards] h3, [data-topics] [data-underline]{ hyphens:auto; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphenate-limit-chars:6 3 3; -webkit-hyphenate-limit-chars:6 3 3; -moz-hyphenate-limit-chars:6 3 3; -ms-hyphenate-limit-chars:6 3 3; overflow-wrap:break-word; }
  /* Nicht trennen: UI-Labels (Buttons, Tags, Chips, Menü, Breadcrumbs, Footer-Links), Eyebrows (Versalien + Letter-Spacing) */
  button, [data-btn], [data-textbtn], [data-quicklink], [data-navlink], [data-footlink], [data-breadcrumb], [data-tag], [data-chip], nav, nav *, [data-mainnav] *, [data-eyebrow], [style*="letter-spacing: 2px"], [style*="letter-spacing:2px"]{ hyphens:manual; -webkit-hyphens:manual; -moz-hyphens:manual; -ms-hyphens:manual; }
  /* Nie trennen: Zeitangaben, Telefon, E-Mail, Kennzahlen — Umbruch nur als Ganzes bzw. per overflow-wrap */
  [data-visit-time], [data-contactline], a[href^="tel:"], a[href^="mailto:"], [data-kpi], time{ hyphens:none; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; overflow-wrap:break-word; }
  /* ===== STYLESHEET / DESIGN SYSTEM — globale Variables (Single Source of Truth) ===== */
  :root{
    --color-blue-dark:#00597A; --color-blue-med:#0084AC; --color-blue-light:#51BAE8;
    --color-black:#00384D; --color-white:#FFFFFF;
    /* Sekundärtext (DAME-Nr., Hinweise, geschlossene Tage, Placeholder) — 0.75 = 4,9:1 auf Weiß */
    --color-muted:rgba(0,56,77,0.75);
    --color-blue-light-60:#97D6F1; --color-blue-light-30:#CBEAF8; --color-blue-light-10:#EEF8FD;
    --color-border:#CCDEE4; --color-border-light:#E5EEF2; --color-signal-red:#D7263D;
    --fs-h1:56px; --fs-h2:44px; --fs-h3:38px; --fs-h5:24px; --fs-cardtitle:20px;
    --fs-p:20px; --fs-ps:18px; --fs-pxs:16px; --fs-pxxs:14px; --fs-eyebrow:12px;
    --fs-btn:16px; --fs-btnsm:14px; --fs-menu:19px;
    /* Zeilenhöhen-Tokens: tight = Card-/Zeilentitel (120%), body = Fließtext (160%) */
    --lh-tight:1.2; --lh-body:1.6;
    --text-measure:586px; /* Fließtext-Lesebreite */
    --sp-xxs:8px; --sp-xs:16px; --sp-sm:24px; --sp-md:32px; --sp-lg:40px; --sp-xl:56px; --sp-section:80px; --block-space:64px;
    --dur-1:200ms; --dur-2:250ms; --dur-3:300ms; --dur-4:400ms; --dur-5:500ms;
    --ease-in:cubic-bezier(0.75,0.10,0.60,1); --ease-out:cubic-bezier(0.15,0.30,0.20,0.90); --ease-in-out:cubic-bezier(0.50,0,0.25,1); --ease-in-out-cubic:cubic-bezier(0.65,0,0.35,1); --ease:var(--ease-in-out); --radius:0;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{ font-family:"Kievit Pro","Source Sans 3",system-ui,sans-serif; color:var(--color-black); background:var(--color-white); font-feature-settings:"lnum","pnum"; -webkit-font-smoothing:antialiased; }
  h1,h2,h3,h4,h5,p{ margin:0; }
  a{ color:inherit; }
  input{ font-family:inherit; }
  input::placeholder, textarea::placeholder{ color:var(--color-muted); opacity:1; }
  /* Icon-Standardfarbe: #00597A (blue-dark). #0084AC (blue-med) nur für großflächige Icons ≥24px in Icon-Kacheln, nie für Zeilen-Icons. */
  .ms{ font-family:"Material Symbols Outlined"; font-weight:normal; font-style:normal; line-height:1; display:inline-block; color:var(--color-blue-dark); }
  ::selection{ background:var(--color-blue-light-60); color:var(--color-black); }

  /* Underline-Atom: wortbreit am Text-Span — Linie nah am Text (bottom:0, wie Inline-Link) */
  [data-underline]{ position:relative; }
  [data-underline]::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform var(--dur-2) var(--ease); }
  [data-arrow],[data-arrow-back]{ transition:transform var(--dur-1) var(--ease); }
  /* Motion-Standards je Element (ease-out) */
  button{ transition:background 350ms var(--ease-out), filter 350ms var(--ease-out), border-color 350ms var(--ease-out), box-shadow 350ms var(--ease-out), gap 350ms var(--ease-out), margin-right 350ms var(--ease-out); }
  button [data-arrow], button [data-arrow-back]{ transition:transform 350ms var(--ease-out); }
  [data-card] [data-cardimg]{ transition:transform 450ms var(--ease-out); }
  [data-card]:active [data-cardimg]{ transition:transform 250ms var(--ease-out); }

  /* Atom Text-Link gross / klein */
  /* Text-Buttons: Linie mit Abstand zum Text (wie ursprünglich) */
  /* Underline-Stärke folgt dem Schriftschnitt: Regular 1px (default), Bold 2px */
  /* Menü- & Footer-Links: Linie näher am Text (wie Inline-Link) */
  [data-navlink] [data-underline]::after,[data-footlink] [data-underline]::after{ bottom:0; }
  /* Atom Default Text-Link (im Fließtext): default unterstrichen (background-Technik, mehrzeilig sicher), Hover animiert die Linie weg */
  [data-inlinelink]{ display:inline; color:var(--color-blue-dark); text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size 250ms var(--ease-out); }
  [data-inlinelink]:hover,[data-inlinelink]:focus-visible{ background-size:0% 1px; }

  /* Menu- & Footer-Links */
  [data-navlink],[data-footlink]{ text-decoration:none; color:inherit; cursor:pointer; }
  [data-navlink]:hover [data-underline]::after,[data-navlink]:focus-visible [data-underline]::after,[data-footlink]:hover [data-underline]::after,[data-footlink]:focus-visible [data-underline]::after{ transform:scaleX(1); }

  /* Buttons */
  /* Icon-Button-Hover: Gap wächst — linkes Icon bleibt links, rechtes Icon wandert nach rechts; Button wächst mit */
  /* Quicklinks: als Box, Hover soft bg, ohne Underline */
  [data-quicklink]{ transition:background 350ms var(--ease-out); }
  [data-quicklink]:hover,[data-quicklink]:focus-visible{ background:var(--color-blue-light-10); }
  [data-quicklink] [data-underline]::after{ display:none; }
  /* SYSTEMREGEL: #D7263D ist EXKLUSIV für das NOTFALL-SYSTEM — Sticky „1450" und Notfall-Einstiege (.tag--emergency). Jede andere Verwendung ist verboten. */
  /* Globales Sticky „1450" — fixiert unten rechts, am rechten Rand */
  /* Einmaliger Attention-Puls 2s nach Slide-in (2×300ms), danach Ruhe — keine Dauer-Animation */

  /* Eyebrow-Labels (— SEKTION) global in Großbuchstaben — unabhängig von der Schreibweise im Text */
  [style*="font-size: var(--fs-eyebrow)"]{ text-transform:uppercase; }
  /* Cards als Stretched-Link */
  [data-card]{ position:relative; }
  [data-card] [data-stretch]::after{ content:""; position:absolute; inset:0; z-index:1; }
  /* Fokus-Ring der Zelle: zentral in globale-komponenten.css → „ZELLEN-FOKUS" (innenliegend, -2px). Hier NICHT kopieren. */
  [data-card] [data-ontop]{ position:relative; z-index:2; }
  [data-cardimg-wrap]{ overflow:hidden; }
  [data-cardimg]{ transition:transform var(--dur-5) var(--ease); transform-origin:center; }
  [data-card]:hover [data-cardimg],[data-card]:focus-within [data-cardimg]{ transform:scale(1.04); }
  /* Text-Bild-Kombis: Medien 4:3; width:100% verhindert Breiten-Transfer aus min-height (Overflow in die Textspalte) */
  [data-media-43]{ width:100%; min-width:0; }
  @media (min-width:1600px){ [data-media-43]{ min-height:560px; } [data-media-tall]{ min-height:clamp(560px, 40vw, 690px); } }
  /* Video-Poster (Facade) — Card-Hover-System; Trigger ist der Poster-Button (Hover + :focus-visible): Bild-Scale 1.04 (500ms) + Play-Kachel #EEF8FD→#97D6F1 (200ms), immer gemeinsam */
  [data-video] [data-video-poster]{ transition:transform 500ms cubic-bezier(0.22,1,0.36,1); transform-origin:center; }
  [data-video]:has(button:hover) [data-video-poster],[data-video]:has(button:focus-visible) [data-video-poster]{ transform:scale(1.04); }
  [data-video] [data-play-tile]{ transition:background-color 200ms var(--ease-in-out); }
  [data-video] button:hover [data-play-tile],[data-video] button:focus-visible [data-play-tile]{ background:#97D6F1 !important; }
  [data-video] button:focus-visible{ outline:2px solid var(--color-blue-dark); outline-offset:-2px; }
  @media (prefers-reduced-motion:reduce){
    [data-video] [data-video-poster]{ transition:none; }
    [data-video]:has(button:hover) [data-video-poster],[data-video]:has(button:focus-visible) [data-video-poster]{ transform:none; }
  }
  [data-card]:hover [data-underline]::after,[data-card]:focus-within [data-underline]::after{ transform:scaleX(1); }
  [data-card]:hover [data-arrow],[data-card]:focus-within [data-arrow]{ transform:translateX(4px); }
  /* Full-bleed Rasterlinien: horizontale Trennlinie nach JEDER Zeile über die volle Viewport-Breite */
  [data-fullbleed-lines]{ overflow:hidden; }
  [data-fullbleed-lines] [data-card]::after,[data-fullbleed-lines] [data-contactbar] > div::after{ content:""; position:absolute; bottom:-1px; left:-100vw; right:-100vw; height:1px; background:var(--color-border-light); pointer-events:none; }
  /* NEWS (1:1 Startseite): Grid/Linien-Design — Cards als Zellen im Linienraster */
  [data-news-style="grid"] [data-news-linewrap]{ border-top:1px solid var(--color-border-light); border-bottom:1px solid var(--color-border-light); }
  [data-news-style="grid"] [data-news-grid]{ gap:1px !important; background:var(--color-border-light) !important; border-left:1px solid var(--color-border-light); border-right:1px solid var(--color-border-light); }
  [data-news-style="grid"] [data-news-cell]{ border:none !important; padding:var(--sp-md); }
  [data-news-style="grid"] [data-news-img]{ height:200px !important; margin-bottom:var(--sp-md); }
  [data-news-style="grid"] [data-news-body]{ padding:0 !important; }
  /* NEWS Mobile: Raster eingerückt (--sp-lg), damit linke/rechte Rasterlinie sichtbar ist; ab Tablet zentriert */
  /* Quicklink-Card — allseitig gleiches Padding (Card-Klasse, nicht pro Instanz): 32px Desktop/Tablet, 24px Mobile */
  @media (max-width:767px){ [data-news-style="grid"] [data-news-grid]{ margin-left:var(--sp-lg) !important; margin-right:var(--sp-lg) !important; }
  /* Einheitliches Text-Padding 24px (--sp-sm) für Card-Text-Bereiche auf Mobile */
  [data-news-style="grid"] [data-news-cell]{ padding:var(--sp-sm); }
  [data-news-style="grid"] [data-news-img]{ margin-bottom:var(--sp-sm) !important; }
  section:not([data-news-style="grid"]) [data-news-body]{ padding:var(--sp-sm) !important; }
  }
  @media (min-width:768px){ [data-news-style="grid"] [data-news-grid]{ margin-left:auto !important; margin-right:auto !important; } }
  /* Besuchszeiten: Box ringsum — horizontale Linien full-bleed (Border auf der Section), vertikale Linien an den 1560px-Grid-Kanten + Mittellinie (border-left auf der Listen-Spalte). Zeilentrenner nur innerhalb der Listen-Spalte. */
  [data-visit-cards]{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
  [data-visit-cards] > li + li{ border-top:1px solid var(--color-border-light); }
  [data-visit-cards] [data-visit-time]{ font-variant-numeric:tabular-nums; }
  /* Besuchszeiten "alternative": 4:8 — links Headline-Block (509px), rechts Bänder #EEF8FD (8px Abstand, 40/60-Innenteilung in jedem Band, keine Linien, nicht klickbar).
     Tablet: 4:8 bleibt, Band-Inhalt stapelt; Mobile: Headline über der Liste, Bänder gestapelt, padding 16px */
  @media (min-width:768px) and (max-width:1199px){
    [data-visit-alt-split]{ grid-template-columns:1fr 2fr !important; padding:0 var(--sp-lg) !important; }
    [data-visit-band]{ grid-template-columns:1fr !important; gap:var(--sp-xxs) !important; }
  }
  @media (max-width:767px){
    [data-visit-alt-split]{ grid-template-columns:1fr !important; padding:0 var(--sp-lg) !important; }
    [data-visit-band]{ grid-template-columns:1fr !important; gap:var(--sp-xxs) !important; padding:var(--sp-xs) !important; }
  }
  /* Besuchszeiten-Sektion: Tablet — Headline-Spalte schmaler; Mobile — Headline über den Zeilen, Zeilen einspaltig */
  @media (min-width:768px) and (max-width:1199px){
    [data-visit-grid]{ grid-template-columns:minmax(260px, 1fr) 2fr !important; }
    [data-visit-cards] > li{ grid-template-columns:minmax(150px, 0.9fr) 1.4fr !important; }
  }
  @media (max-width:767px){
    [data-visit-grid]{ grid-template-columns:1fr !important; }
    [data-visit-grid] > div + div{ border-left:0 !important; border-top:1px solid var(--color-border-light); }
    [data-visit-grid] > div:first-child{ padding:var(--sp-sm) 16px !important; }
    [data-visit-cards] > li{ grid-template-columns:1fr !important; gap:4px !important; padding:var(--sp-xs) 16px !important; }
  }
  /* Card-CTA (Text-Button) global bündig unten — auf einer Linie über alle Cards */
  article[data-card]{ display:flex; flex-direction:column; }
  article[data-card] > div:last-of-type{ display:flex; flex-direction:column; flex:1 1 auto; }
  [data-card] [data-textbtn]{ margin-top:auto; }
  /* Cards: mehrzeilige Underline — Linie läuft unter JEDER Zeile mit (background-Technik statt ::after, box-decoration-break:clone) */
  [data-card] [data-underline]{ background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-size:0 1px; background-position:0 calc(100% + 2px); -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size 250ms var(--ease-out); }
  [data-card] [data-underline]::after{ display:none; }
  [data-card]:hover [data-underline],[data-card]:focus-within [data-underline]{ background-size:100% 1px; }
  [data-card] [data-textbtn] [data-underline]{ padding-bottom:4px; }
  /* Ausgleich: padding-bottom des Labels verschiebt dessen Box-Mitte — Icon um die halbe Padding-Höhe anheben, sonst sitzt der Pfeil optisch zu tief */
  [data-card] [data-textbtn] .ms{ margin-top:-4px; }
  [data-card] [data-textbtn]:not([data-textbtn="sm"]) [data-underline]{ background-size:0 2px; }
  [data-card]:hover [data-textbtn]:not([data-textbtn="sm"]) [data-underline],[data-card]:focus-within [data-textbtn]:not([data-textbtn="sm"]) [data-underline]{ background-size:100% 2px; }
  @media (prefers-reduced-motion:reduce){ [data-card] [data-underline]{ transition:none; } }
  /* Standort-Cards: Hover auf Quicklink-Button darf Bild-Scale & „Zum Standort"-Hover NICHT auslösen */
  [data-card]:has([data-quickbtn]:hover) [data-cardimg]{ transform:none; }
  [data-card]:has([data-quickbtn]:hover) [data-underline]::after{ transform:scaleX(0); }
  [data-card]:has([data-quickbtn]:hover) [data-underline]{ background-size:0 1px; }
  [data-card]:has([data-quickbtn]:hover) [data-arrow]{ transform:none; }
  /* === ATOME (kanonisch — eine Definition pro Atom) === */
  /* Eyebrow-Tagline */
  [data-eyebrow]{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:2px; color:var(--color-blue-dark); }
  [data-eyebrow~="caps"]{ text-transform:uppercase; }
  [data-eyebrow~="inverse"]{ color:var(--color-blue-light-60); }
  [data-eyebrow~="white"]{ color:var(--color-white); }
  /* Icon-Kachel (40 / 48) */
  /* Zeilen-Listen-Zeile (Linienraster) */

  /* Tags */
  [data-tag-sec]{ transition:border-color var(--dur-1) var(--ease); text-decoration:none; }
  /* Tag · BLOCK-VARIANTE — fragmentierende Inline-Fläche.
     Reines Inline-Element: box-decoration-break:clone gibt JEDEM Zeilenfragment
     eigenes Padding, jede Zeile hugt ihren Text. Keine Messung, kein JS.
     Padding identisch zum einzeiligen Tag (3px 8px).
     ZEILENABSTAND: line-height = Content-Area der Schrift (Kievit ≈ 1.215em)
     + 2 × padding-block (2 × 3px) -> Fragmente stoßen fugenlos aneinander.
     Bei geändertem Padding hier nachziehen; em-Anteil skaliert mit der Schriftgröße. */
  [data-tag-sec="block"],[data-tag-pri="block"]{
    display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone;
    padding:3px 8px; line-height:var(--tag-block-lh, calc(1.215em + 6px));
    text-wrap:balance; white-space:normal; text-decoration:none;
  }

  [data-tag-sec]:hover,[data-tag-sec]:focus-visible{ border-color:var(--color-blue-dark); }
  [data-tag-sec]:hover [data-arrow],[data-tag-sec]:focus-visible [data-arrow]{ transform:translateX(4px); }
  [data-tag-pri]{ transition:background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); border:none; cursor:pointer; }
  [data-tag-pri]:hover{ background:color-mix(in srgb, var(--color-blue-light-10), var(--color-blue-med) 15%); box-shadow:inset 0 0 0 1px var(--color-border); }

  /* Tab-Nav */
  [data-tab]{ background:none; border:none; font-family:inherit; font-size:var(--fs-ps); font-weight:700; color:var(--color-blue-dark); padding:16px 0; cursor:pointer; }
  [data-tab][aria-selected="true"]{ color:var(--color-black); box-shadow:inset 0 -2px 0 var(--color-blue-med); }

  /* Sidebar (Doku-Nav) */
  [data-libnav]{ display:block; width:100%; text-align:left; background:none; border:none; font-family:inherit; font-size:var(--fs-pxs); color:var(--color-black); padding:8px 0 8px 16px; cursor:pointer; }
  [data-libnav][aria-current="true"]{ font-weight:700; box-shadow:inset 2px 0 0 var(--color-blue-med); }
  [data-libnav] [data-underline]::after{ bottom:2px; }
  [data-libnav]:hover [data-underline]::after,[data-libnav]:focus-visible [data-underline]::after{ transform:scaleX(1); }

  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--color-blue-dark); outline-offset:2px; }
  /* Skip-Link als Primary-Button: im Ruhezustand aus dem Viewport geschoben, bei Tastatur-Fokus sichtbar */
  /* A11y: Fokus auf dunklen Flächen weiß (Topbar, Footer, CTA-Band, Sticky) — nie Petrol auf Petrol */
  [data-topbar] a:focus-visible, [data-topbar] button:focus-visible,
  /* A11y: fokussiertes Element nicht von Header/Sticky verdeckt (WCAG 2.4.11) */
  html{ scroll-padding-top:180px; scroll-padding-bottom:72px; }
  /* Tooltip per Escape ausblendbar (WCAG 1.4.13) — Klasse am <html>, gilt für alle [data-tip] */
  html.tips-off [data-tip]::after{ opacity:0 !important; visibility:hidden !important; }
  .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  @keyframes tk-rewipe{ 0%{ transform:scaleX(1); transform-origin:right center; } 49.9%{ transform:scaleX(0); transform-origin:right center; } 50%{ transform:scaleX(0); transform-origin:left center; } 100%{ transform:scaleX(1); transform-origin:left center; } }
  @keyframes tk-iconpop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
  /* Icon-Pop (Scale) vorerst entfernt — Icon-Set nutzt Line-Drawing */
  @media (prefers-reduced-motion:reduce){ [data-underline]::after,[data-arrow],[data-arrow-back],[data-cardimg],[data-inlinelink],[data-blink],.ms{ transition:none; animation:none; } }
  /* === BUTTON-HOVER (Styleguide — verbindlich): direkter Farbwechsel + Icon-Shift 2px === */
  /* Button-Variante „Portal“ (NUR Portale & Services) — Panel-Öffner: kein Icon-Shift, kein Pfeil */
  @keyframes tk-blink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }
  [data-blink]{ animation:tk-blink 1s step-end infinite; }
  [data-viewbtn]{ background:none; border:none; font-family:inherit; font-size:var(--fs-pxxs); font-weight:700; cursor:pointer; color:var(--color-blue-dark); display:inline-flex; align-items:center; padding:0; }
  [data-viewbtn][aria-selected="true"]{ color:var(--color-black); box-shadow:inset 0 -2px 0 var(--color-blue-med); }

  /* Mega-Menü: Chevron-Rotation an aria-expanded gekoppelt */
  /* Dropdown-Panel: opacity+translateY (kein display/height), auf 180ms ease-out / zu 120ms ease-in */
  /* Mobile-Burger: Akkordeon-Chevron + Slide-in von rechts */
  /* Overlay: beginnt unter dem Header, Fade + 8px Slide nach unten (300ms ein / 200ms aus) */
  /* Persistenter Header: bleibt beim offenen Menü fixiert, Burger morpht an Ort und Stelle zum X */
  /* Tablet: Topbar (40px) klebt mit — Offsets entsprechend 160px */
  @keyframes tk-mask-fwd{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
  @keyframes tk-mask-bwd{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0 0 0 0); } }
  @keyframes tk-par-fwd{ from{ transform:translateX(48px); } to{ transform:translateX(0); } }
  @keyframes tk-par-bwd{ from{ transform:translateX(-48px); } to{ transform:translateX(0); } }
  @keyframes tk-testi-fade{ from{ opacity:0.3; } to{ opacity:1; } }
  /* Slide-Wechsel (Stimmen): ruhiger Cross-Fade — Text hebt sich 12px, Foto blendet mit leichtem Zoom ein.
     Ersetzt den harten Wipe (tk-mask-*) und den 48px-Parallax (tk-par-*). */
  @keyframes tk-testi-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  @keyframes tk-testi-zoom{ from{ opacity:0; transform:scale(1.03); } to{ opacity:1; transform:scale(1); } }
  @media (prefers-reduced-motion:reduce){ [data-testi-slide]{ animation:none !important; } [data-testi-mask],[data-testi-inner]{ animation:none !important; } }
  @media (prefers-reduced-motion: reduce){
  }

  /* Quicklink-Buttons (Standort-Cards u.a.) — zentral */
  /* Quicklink-Chip auf dunkler Fläche (#00384D-Teaser, CTA-Band) — erbt Maße/Verhalten, ändert nur Farben. Rahmen 0.5-Weiß auf #00384D ≈ 4,5:1 (UI ≥3:1 ✓). on-dark: bewusst ohne Icon-Shift — Hover nur über Fläche. */
  /* Hover = leichte Aufhellung der dunklen Fläche (~#1A4A5E), Weiß darauf ≈10:1 ✓ — überschreibt explizit den hellen Basis-Chip-Hover */

  /* Kontakt-Zeile (Atom): Icon 18px blue-med + Text 16px black, min. 44px, Underline nur am Text bei Hover/Focus */
  [data-contactline]{ display:inline-grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--sp-xxs); min-height:44px; font-size:var(--fs-pxs); line-height:1.5; color:var(--color-black); text-decoration:none; }
  [data-contactline] .ms:not([data-arrow]){ font-size:18px; height:1.5em; display:inline-flex; align-items:center; flex:0 0 auto; }
  /* Kombi Text-Button + Kontakt-Zeile: Text-Button-Ausrichtung gilt (Pfeil mittig, line-height 1) */
  [data-contactline]:hover [data-underline]::after,[data-contactline]:focus-visible [data-underline]::after{ transform:scaleX(1); }
  /* Nav-Pfeile (Slider u.a.) — globaler Hover */
  [data-navarrow]{ transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out); }
  [data-navarrow]:hover,[data-navarrow]:focus-visible{ border-color:var(--color-blue-med); background:var(--color-blue-light-30); }
  [data-navarrow]:hover .ms,[data-navarrow]:focus-visible .ms{ color:var(--color-blue-dark); }
  /* Secondary-Buttons: Hover-BG zuverlässig (schlägt inline background) */
  [style*="border: 1px solid var(--color-border)"]{ transition:background 350ms var(--ease-out),border-color 350ms var(--ease-out),gap 350ms var(--ease-out),filter 350ms var(--ease-out); }
  [style*="border: 1px solid var(--color-border)"]:hover{ background:var(--color-blue-light-10) !important; border-color:var(--color-blue-med) !important; }
  /* Icon-Button (Such-Absenden): Hover zuverlässig (schlägt inline background) */
  [aria-label="Frage absenden"]:hover,[aria-label="Frage absenden"]:focus-visible{ background:var(--color-blue-light-60) !important; }
  /* Ghost-Secondary auf dunklen Flächen (z. B. Initiativbewerbung): Hover zuverlässig, gleiches Timing */
  [style*="border: 1px solid rgba(255, 255, 255, 0.4)"]{ transition:background 350ms var(--ease-out),border-color 350ms var(--ease-out); }
  [style*="border: 1px solid rgba(255, 255, 255, 0.4)"]:hover{ background:rgba(255,255,255,0.12) !important; border-color:var(--color-white) !important; }

  /* Sanftes Scrollen zu Ankern + Offset unter Sticky */
  html{ scroll-behavior:smooth; }
  #loc-1,#loc-2,#loc-3,#loc-4,#loc-5,#besuchszeiten,#kontakt{ scroll-margin-top:120px; }
  [aria-label="Standorte"] a{ position:relative; transition:color var(--dur-3) var(--ease-in-out,ease); }
  [aria-label="Standorte"] a[aria-current="true"]{ box-shadow:inset 2px 0 0 var(--color-blue-med); }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
  /* ================= RESPONSIVE (mobile-first / min-width) ================= */
  /* --- BASE = Mobile (< 768px) --- */
  :root{
    /* Blockabstand: EINZIGE Quelle --block-space — 32px Mobile / 48px Tablet / 64px Desktop. Jeder Block traegt margin-block:var(--block-space) (sichtbar 2x); Blöcke mit Fläche zusätzlich padding-block:calc(var(--block-space) * 2). In den Breakpoints wird NUR dieser Wert umgeschaltet. --sp-section (80px) bleibt reiner Grid-Gap-Scale-Token. */
    --sp-lg:24px; --sp-xl:32px; --block-space:32px;
    --fs-h1:34px; --fs-h2:28px; --fs-h3:24px; --fs-h5:20px;
  }
  [style*="grid-template-columns: 1fr auto 1fr"]{ display:flex !important; justify-content:space-between !important; align-items:center; }

  /* Grids -> einspaltig */
  [style*="grid-template-columns: 760px 1fr"],[style*="grid-template-columns:760px 1fr"]{ grid-template-columns:1fr !important; gap:24px !important; }
  [style*="grid-template-columns: 240px 1fr"]{ grid-template-columns:1fr !important; gap:24px !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"],[style*="grid-template-columns:repeat(4, 1fr)"]{ grid-template-columns:1fr !important; margin-left:var(--sp-lg) !important; margin-right:var(--sp-lg) !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"]{ grid-template-columns:1fr !important; }
  [data-card][style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; }
  [data-card][style*="min-height: 600px"]{ min-height:auto !important; }
  [data-card] > [data-cardimg-wrap]{ min-height:220px !important; }
  /* Standort-Cards: margin-top:auto (Desktop-Füllung) kollabiert ohne fixe Höhe zu 0 — unter Desktop echten Abstand geben */
  article[data-card] [style*="margin-top: auto"]{ margin-top:var(--sp-md) !important; }
  [data-testi-grid]{ grid-template-columns:1fr !important; grid-template-areas:'head' 'quote' 'photo' 'arrows' !important; }
  [data-testi-head]{ border-bottom:1px solid var(--color-border-light); }
  [data-testi-quote]{ border-bottom:1px solid var(--color-border-light); }
  [data-testi-photo]{ border-bottom:1px solid var(--color-border-light); }
  [style*="grid-template-columns: 1fr 1fr; gap: var(--sp-section)"]{ grid-template-columns:1fr !important; gap:40px !important; }
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr"]{ grid-template-columns:1fr 1fr !important; }
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr"] > :first-child{ grid-column:1 / -1 !important; }

  /* Header-Quicklinks (5-Spalten) -> horizontal scrollbar */
  [style*="grid-template-columns: repeat(5, 1fr)"]{ display:flex !important; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  [style*="grid-template-columns: repeat(5, 1fr)"] > *{ flex:0 0 auto !important; min-width:170px; }

  /* Hero: Bild als reduzierte Bild-Bande (full-bleed, damit es immer breiter als der Chatbot ist), Chatbot überlagert oben & schaut unten raus */
  [data-hero-img]{ left:0 !important; right:0 !important; height:440px !important; }
  [data-hero-content]{ padding:calc(var(--block-space) * 2) var(--sp-lg) 0 !important; min-height:0 !important; }
  /* Chatbot: Tags/Vorschläge umbrechen, Input-Schrift auf Mobile-Größe */
  [data-hero-tags]{ flex-wrap:wrap !important; }
  #chat-input{ font-size:16px !important; height:auto !important; min-height:44px; line-height:1.35 !important; white-space:normal !important; overflow:visible !important; padding:6px 0 !important; }
  /* Intro-Text ab Tablet & kleiner linksbündig (Desktop rechtsbündig) */
  [data-introtext]{ margin-left:0 !important; }

  /* Standorte-Anker als horizontal scrollbare Chips */
  nav[aria-label="Standorte"]{ flex-direction:row !important; position:static !important; top:auto !important; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:var(--sp-xxs); padding-bottom:8px; }
  nav[aria-label="Standorte"] a{ flex:0 0 auto; white-space:nowrap; border:1px solid var(--color-border); padding:10px 16px !important; }
  nav[aria-label="Standorte"] a[aria-current="true"]{ border-color:var(--color-blue-med) !important; box-shadow:none !important; }

  /* Touch-Ziele mobil >= 44px (WCAG 2.5.8) */
  [data-tag-pri],[data-tag-sec]{ position:relative; }
  [data-tag-pri]::after,[data-tag-sec]::after{ content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:44px; }
  [data-quicklink]{ min-height:44px; }
  /* Quicklink-Buttons: kompakte Version auf Mobile — Innen-Spacing reduziert */

  /* --- Tablet (>= 768px) --- */
  @media (min-width:768px){
    :root{
      --sp-lg:40px; --sp-xl:56px; --block-space:48px;
      --fs-h1:44px; --fs-h2:36px; --fs-h3:30px; --fs-h5:22px;
    }
    /* Quicklink-Buttons ab Tablet wieder volles Innen-Spacing */
    [data-menu-portale]{ display:none !important; }
    [style*="grid-template-columns: repeat(4, 1fr)"],[style*="grid-template-columns:repeat(4, 1fr)"]{ grid-template-columns:repeat(2,1fr) !important; margin-left:auto !important; margin-right:auto !important; }
    [style*="grid-template-columns: repeat(3, 1fr)"]{ grid-template-columns:repeat(3,1fr) !important; }
    /* Header-Quicklinks: ab Tablet 5-Spalten-Fill (solange es geht), darunter Scroll */
    [style*="grid-template-columns: repeat(5, 1fr)"]{ display:grid !important; overflow:visible !important; }
    [style*="grid-template-columns: repeat(5, 1fr)"] > *{ min-width:0 !important; }
    [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr"] > :first-child{ grid-column:auto !important; }
    [data-card][style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr 1fr !important; }
    #chat-input{ font-size:var(--fs-p) !important; height:48px !important; line-height:48px !important; white-space:nowrap !important; overflow:hidden !important; padding:0 !important; }
    [data-testi-grid]{ grid-template-columns:1fr 1fr !important; grid-template-areas:'head head' 'quote photo' 'arrows arrows' !important; }
    [data-testi-head]{ border-bottom:1px solid var(--color-border-light); }
    [data-testi-quote]{ border-right:1px solid var(--color-border-light); border-bottom:none; }
    [data-testi-photo]{ border-bottom:none; }
    [data-testi-nav]{ border-top:1px solid var(--color-border-light); }
  }

  /* --- Desktop (>= 1200px) --- */
  @media (min-width:1200px){
    :root{ --block-space:64px; --fs-h1:56px; --fs-h2:44px; --fs-h3:38px; --fs-h5:24px; }
    /* Container-Regel ab 1200px: Content = min(1560px, 100% − 160px), zentriert — IMMER ≥80px Seitenrand links/rechts. Horizontale Full-Bleed-Linien laufen weiter durch den Randbereich. */
    [style*="max-width: 1560px"],[style*="max-width: 1480px"],[style*="max-width:1560px"],[style*="max-width:1480px"],[data-breadcrumb] > ol{ max-width:none !important; width:min(1560px, 100% - 160px) !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; }
    [style*="grid-template-columns: 1fr auto 1fr"]{ display:grid !important; justify-content:normal !important; }
    [style*="grid-template-columns: 760px 1fr"],[style*="grid-template-columns:760px 1fr"]{ grid-template-columns:760px 1fr !important; gap:var(--sp-lg) var(--sp-section) !important; }
    /* Intro-Text auf Desktop wieder rechtsbündig */
    [data-introtext]{ margin-left:auto !important; }
    [style*="grid-template-columns: 240px 1fr"]{ grid-template-columns:240px 1fr !important; gap:var(--sp-lg) !important; }
    [style*="grid-template-columns: repeat(4, 1fr)"],[style*="grid-template-columns:repeat(4, 1fr)"]{ grid-template-columns:repeat(4,1fr) !important; }
    [style*="grid-template-columns: repeat(3, 1fr)"]{ grid-template-columns:repeat(3,1fr) !important; }
    [data-testi-grid]{ grid-template-columns:1fr 1fr 1fr !important; grid-template-rows:1fr auto !important; grid-template-areas:'head quote photo' 'arrows quote photo' !important; }
    [data-testi-head]{ border-right:1px solid var(--color-border-light); border-bottom:none; }
    [data-testi-nav]{ border-right:1px solid var(--color-border-light); border-top:none; }
    [data-testi-quote]{ border-right:1px solid var(--color-border-light); border-bottom:none; }
    [data-testi-photo]{ border-bottom:none; }
    [style*="grid-template-columns: 1fr 1fr; gap: var(--sp-section)"]{ grid-template-columns:1fr 1fr !important; gap:var(--sp-section) !important; }
    [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr"]{ grid-template-columns:1.6fr 1fr 1fr 1fr 1fr !important; }
    /* Header-Quicklinks zurück zum 5-Spalten-Grid */
    [style*="grid-template-columns: repeat(5, 1fr)"] > *{ min-width:0 !important; }
    /* Hero-Bild bündig zu den Container-/Rasterkanten (Flucht mit den Linien) */
    [data-hero-img]{ left:0 !important; right:0 !important; height:440px !important; }
    [data-hero-content]{ padding:calc(var(--block-space) * 2) var(--sp-lg) 0 calc(var(--sp-lg) + 60px) !important; min-height:0 !important; }
    /* Standorte-Nav: Sidebar, sticky auf Desktop */
    article[data-card] [style*="margin-top: auto"]{ margin-top:auto !important; }
    nav[aria-label="Standorte"]{ flex-direction:column !important; position:sticky !important; top:64px !important; overflow:visible !important; gap:0 !important; padding-bottom:0 !important; }
    nav[aria-label="Standorte"] a{ border:none !important; white-space:normal !important; padding:12px 0 12px 16px !important; flex:none; }
    nav[aria-label="Standorte"] a[aria-current="true"]{ box-shadow:inset 2px 0 0 var(--color-blue-med) !important; border:none !important; }
    /* Touch-Ziel-Overlays entfernen */
    [data-tag-pri]::after,[data-tag-sec]::after{ content:none; }
  }
  /* Location-Cards Mobile: Zwischen-Labels visuell entfernen, Semantik erhalten */
  @media (max-width:767px){
    /* Gleichmäßiger Abstand Headline → Kontaktdaten (Label ausgeblendet) */
  }
/* === STYLEGUIDE-ERGÄNZUNG: Responsive-Overrides aus index.html (Quicklink-Sektion) ===
   Mobile-first wie im Original: Basis = 1-spaltig, ≥768px = 2 Spalten, ≥1200px = 4 Spalten. */
[style*="grid-template-columns: 760px 1fr"],[style*="grid-template-columns:760px 1fr"]{ grid-template-columns:1fr !important; gap:24px !important; }
[style*="grid-template-columns: repeat(4, 1fr)"],[style*="grid-template-columns:repeat(4, 1fr)"]{ grid-template-columns:1fr !important; margin-left:var(--sp-lg) !important; margin-right:var(--sp-lg) !important; }
@media (min-width:768px){
  [style*="grid-template-columns: repeat(4, 1fr)"],[style*="grid-template-columns:repeat(4, 1fr)"]{ grid-template-columns:repeat(2,1fr) !important; margin-left:auto !important; margin-right:auto !important; }
}
@media (min-width:1200px){
  [style*="grid-template-columns: 760px 1fr"],[style*="grid-template-columns:760px 1fr"]{ grid-template-columns:760px 1fr !important; gap:var(--sp-lg) var(--sp-section) !important; }
  [data-introtext]{ margin-left:auto !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"],[style*="grid-template-columns:repeat(4, 1fr)"]{ grid-template-columns:repeat(4,1fr) !important; }
}
