/* =============================================================================
GLOBALE KOMPONENTEN — EINZIGE CSS-QUELLE
Aufbau: 1 Atome · 2 Header (inkl. Dropdowns/Mobile-Menü) · 3 Globale Blöcke
(Skip-Links, Sticky 1450, Footer, CTA-Band, Location Cards, Back-to-top)
· 4 Komponenten (Quicklink-Card, Hero „Text", PDF-Badge)
Regel: Kein CSS in den JS-Dateien, jedes Atom genau EINE Definitionsstelle,
kein !important außer den unten dokumentierten Ausnahmen.
Einbinden im VOR globale-daten.js; Seiten-Helmets dürfen gezielt ergänzen.
============================================================================= */
/* === 1 ATOME =============================================================== */
/* Unterstreichungen laufen IMMER durch — auch durch Unterlängen (g, j, p, q, y).
Gilt global für alle Links und Underline-Atome; keine Unterbrechung (skip-ink). */
a, [data-underline], [data-inlinelink], [data-textbtn]{ text-decoration-skip-ink:none; -webkit-text-decoration-skip-ink:none; text-decoration-skip:none; }
[data-icontile] .ms{ color:var(--color-blue-med); }
[data-textbtn] [data-underline]::after, [data-inlinelink]::after{ transition:transform 250ms var(--ease-out); }
[data-textbtn] [data-arrow], [data-textbtn] [data-arrow-back]{ transition:transform 250ms var(--ease-out); }
[data-textbtn]{ display:inline-flex; align-items:center; gap:var(--sp-xxs); font-size:var(--fs-ps); font-weight:700; color:var(--color-blue-dark); line-height:1; text-decoration:none; }
[data-textbtn="sm"]{ font-size:var(--fs-btnsm); }
[data-textbtn]:hover [data-underline]::after,[data-textbtn]:focus-visible [data-underline]::after{ transform:scaleX(1); }
[data-textbtn]:hover [data-arrow],[data-textbtn]:focus-visible [data-arrow]{ transform:translateX(4px); }
[data-textbtn]:hover [data-arrow-back],[data-textbtn]:focus-visible [data-arrow-back]{ transform:translateX(-4px); }
[data-textbtn] [data-underline]::after{ bottom:-4px; }
[data-textbtn="sm"] [data-underline]::after{ height:1px; }
[data-textbtn]:not([data-textbtn="sm"]) [data-underline]::after{ height:2px; }
button:not([data-btn]):has([data-icontile]:last-child):not([data-tag-pri]):hover,button:not([data-btn]):has([data-icontile]:last-child):not([data-tag-pri]):focus-visible,a:not([data-btn]):has([data-icontile]:last-child):hover,a:not([data-btn]):has([data-icontile]:last-child):focus-visible{ gap:32px !important; margin-right:-8px; }
button:not([data-btn]):has([data-icontile]:first-child):hover [data-arrow-back],button:not([data-btn]):has([data-icontile]:first-child):focus-visible [data-arrow-back],a:not([data-btn]):has([data-icontile]:first-child):hover [data-arrow-back],a:not([data-btn]):has([data-icontile]:first-child):focus-visible [data-arrow-back]{ transform:translateX(-4px); }
[data-icontile]{ width:40px; height:40px; background:var(--color-blue-light-10); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
[data-icontile="48"]{ width:48px; height:48px; }
[data-btn]{ display:inline-flex; align-items:center; justify-content:flex-start; gap:24px; min-height:56px; padding:7px var(--sp-sm); font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; text-decoration:none; border:1px solid transparent; transition:background 350ms var(--ease-out), color 350ms var(--ease-out), border-color 350ms var(--ease-out), gap 350ms var(--ease-out); }
[data-btn]:has([data-icontile]:first-child){ padding-left:8px; }
[data-btn]:has([data-icontile]:last-child){ padding-right:8px; }
[data-btn]:hover,[data-btn]:focus-visible{ gap:28px; }
[data-btn="primary"]{ background:var(--color-blue-light-60); color:var(--color-blue-dark); }
[data-btn="primary"]:hover,[data-btn="primary"]:focus-visible{ background:var(--color-blue-light-30); }
[data-btn="secondary"]{ background:var(--color-white); color:var(--color-black); border-color:var(--color-border); }
[data-btn="secondary"]:hover,[data-btn="secondary"]:focus-visible{ background:var(--color-blue-light-10); border-color:var(--color-blue-med); }
[data-btn="ghost"]{ background:transparent; color:var(--color-white); border-color:rgba(255,255,255,0.4); }
[data-btn="ghost"]:hover,[data-btn="ghost"]:focus-visible{ background:rgba(255,255,255,0.12); border-color:var(--color-white); }
@media (prefers-reduced-motion:reduce){ [data-btn]{ transition:none; } [data-btn]:hover,[data-btn]:focus-visible{ gap:24px; } }
[data-quickbtn]{ display:inline-flex; align-items:center; gap:var(--sp-xxs); background:var(--color-blue-light-10); color:var(--color-black); font-size:var(--fs-pxxs); font-weight:700; padding:12px 16px; font-family:inherit; text-decoration:none; cursor:pointer; transition:background-color var(--dur-2) var(--ease-in-out,ease); }
[data-quickbtn] .ms{ transition:color var(--dur-2) var(--ease-in-out,ease); }
[data-textbtn][data-contactline]{ align-items:center; line-height:1; }
[data-textbtn="sm"][data-contactline]{ font-size:var(--fs-btnsm); }
[data-quickbtn]:hover,[data-quickbtn]:focus-visible{ background:var(--color-blue-light-30); }
@media (max-width:767px){
[data-quickbtn]{ padding:8px 12px; }
}
@media (min-width:768px){
[data-quickbtn]{ padding:12px 16px; }
}
/* === 2 HEADER ============================================================== */
[data-hcontainer]{ max-width:1560px; margin:0 auto; padding:0 var(--sp-lg); }
[data-hcontainer="1480"]{ max-width:1480px; padding:0; }
@media (min-width:1200px){ [data-hcontainer]{ max-width:none; width:min(1560px, 100% - 160px); padding:0; } }
[data-headrow]{ height:120px; display:flex; align-items:center; gap:var(--sp-xl); overflow:visible; }
[data-headrow] [data-logo]{ margin-right:auto; }
[data-headrow] [data-logo] img{ width:176px; height:auto; display:block; transition:transform var(--dur-2,250ms) var(--ease-out,ease); }
[data-headrow] [data-logo]:hover img{ transform:scale(0.97); }
[data-mainnav]{ display:flex; align-items:center; gap:var(--sp-xl); font-size:var(--fs-menu); color:var(--color-black); }
[data-headright]{ display:flex; align-items:center; gap:var(--sp-xl); }
[data-portalbtn]{ font-size:var(--fs-menu); font-weight:400; color:var(--color-black); gap:16px; padding-right:16px; }
[data-portalbtn]:hover,[data-portalbtn]:focus-visible{ gap:20px; }
[data-portalbtn] > span:last-child{ font-size:var(--fs-menu); font-weight:400; }
[data-portalbtn][aria-expanded="true"]{ background:var(--color-blue-light-30); }
[data-headright] [data-portalbtn]{ transition:background 350ms var(--ease-out), color 350ms var(--ease-out), border-color 350ms var(--ease-out), gap 350ms var(--ease-out), margin-left 350ms var(--ease-out); }
[data-headright] [data-portalbtn]:hover,[data-headright] [data-portalbtn]:focus-visible{ margin-left:-4px; }
@media (prefers-reduced-motion:reduce){ [data-headright] [data-portalbtn]{ transition:none; } [data-headright] [data-portalbtn]:hover,[data-headright] [data-portalbtn]:focus-visible{ margin-left:0; } }
.chevron{ transition:transform 250ms cubic-bezier(0.22,1,0.36,1); transform-origin:center; }
[data-nav-drop][aria-expanded="true"] .chevron{ transform:rotate(180deg); }
[data-nav-drop]:hover [data-underline]::after,[data-nav-drop]:focus-visible [data-underline]::after,[data-nav-drop][aria-expanded="true"] [data-underline]::after{ transform:scaleX(1); }
[data-dropoverlay]{ opacity:0; visibility:hidden; transition:opacity 120ms var(--ease-in), visibility 0s linear 120ms; }
[data-dropwrap][data-open="true"] [data-dropoverlay]{ opacity:1; visibility:visible; transition:opacity 180ms var(--ease-out), visibility 0s; }
#mainnav-dropdown{ opacity:0; transform:translateY(-8px); visibility:hidden; transition:opacity 120ms var(--ease-in), transform 120ms var(--ease-in), visibility 0s linear 120ms; }
[data-dropwrap][data-open="true"] #mainnav-dropdown{ opacity:1; transform:translateY(0); visibility:visible; transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
[data-megaq]:hover{ background:var(--color-blue-light-10); }
@media (prefers-reduced-motion:reduce){ [data-dropoverlay],#mainnav-dropdown{ transform:none !important; transition:opacity 100ms linear, visibility 0s !important; } }
[data-burger] .ms{ transition:opacity 200ms var(--ease-in-out), transform 200ms var(--ease-in-out); }
[data-burger] [data-ic-close]{ position:absolute; opacity:0; transform:rotate(-90deg); }
[data-burger][aria-expanded="true"] [data-ic-menu]{ opacity:0; transform:rotate(90deg); }
[data-burger][aria-expanded="true"] [data-ic-close]{ opacity:1; transform:rotate(0deg); }
[data-acc-btn] .acc-chevron{ transition:transform 250ms var(--ease-in-out); transform-origin:center; }
[data-acc-btn][aria-expanded="true"] .acc-chevron{ transform:rotate(180deg); }
[data-acc-panel]{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 250ms var(--ease-in-out); }
[data-acc-panel][data-open="true"]{ grid-template-rows:1fr; }
[data-acc-panel] > div{ overflow:hidden; visibility:hidden; transition:visibility 0s linear 250ms; }
[data-acc-panel][data-open="true"] > div{ visibility:visible; transition:visibility 0s; }
[data-ql-cell]{ min-width:0; }
a[data-navlink][data-ql-cell]{ hyphens:auto; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphenate-limit-chars:6 3 3; overflow-wrap:break-word; }
@media (prefers-reduced-motion:reduce){ .chevron{ transition:none; } #mainnav-dropdown{ animation:none !important; } }
@keyframes tkMenuFadeIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes tkMenuFadeOut{ from{ opacity:1; transform:translateY(0); } to{ opacity:0; transform:translateY(-8px); } }
[data-menu-overlay][data-open="true"]{ animation:tkMenuFadeIn 300ms var(--ease-out); }
[data-menu-overlay][data-closing="true"]{ animation:tkMenuFadeOut 200ms var(--ease-in) forwards; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ [data-acc-btn] .acc-chevron{ transition:none; } [data-acc-panel]{ transition:none; } [data-menu-overlay][data-open="true"],[data-menu-overlay][data-closing="true"]{ animation:none; } }
@media (max-width:1199px){ header{ position:sticky; top:0; z-index:110; background:var(--color-white); } [data-mainnav]{ display:none !important; } [data-dropwrap]{ display:none !important; } [data-burger]{ display:inline-flex !important; align-items:center; justify-content:center; } }
@media (min-width:768px) and (max-width:1199px){ [data-menu-overlay]{ top:160px !important; } }
@media (max-width:767px){ [data-topbar]{ display:none !important; } [data-headright] [data-portalbtn]{ display:none !important; } [data-quickbar]{ display:none !important; } [data-headrow] [data-logo] img{ width:132px !important; } }
@media (min-width:1200px){ [data-mainnav]{ display:flex !important; } [data-dropwrap]{ display:block !important; } [data-burger]{ display:none !important; } }
[data-qbgrid]{ display:grid !important; overflow:visible !important; }
[data-qbgrid] > *{ min-width:0 !important; }
[data-menu-overlay]{ display:none; }
[data-menu-overlay][data-open="true"]{ display:flex; }
/* === 3 GLOBALE BLÖCKE ====================================================== */
[data-skip-links]{ position:relative; z-index:200; }
[data-skip-link]{ position:fixed; left:24px; top:16px; z-index:200; height:56px; padding:0 24px; display:inline-flex; align-items:center; background:var(--color-blue-light-60); color:var(--color-blue-dark); font-family:inherit; font-size:16px; font-weight:700; text-decoration:none; transform:translateY(-200%); transition:transform 200ms var(--ease-out); }
[data-skip-link]:focus,[data-skip-link]:focus-visible{ transform:translateY(0); outline:2px solid var(--color-blue-dark); outline-offset:2px; }
@media (min-width:1200px){ [data-skip-link]{ left:80px; } }
[data-sticky-live]{ position:fixed; right:0; bottom:16px; z-index:90; height:48px; display:inline-flex; align-items:center; gap:10px; padding:0 24px; background:var(--color-signal-red); color:var(--color-white); text-decoration:none; white-space:nowrap; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08); transition:filter 350ms var(--ease-out), opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
@keyframes tk-sticky-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
[data-sticky-live][data-pulse]{ animation:tk-sticky-pulse 600ms var(--ease-in-out); }
@media (prefers-reduced-motion:reduce){ [data-sticky-live][data-pulse]{ animation:none; } }
[data-sticky-live]:hover,[data-sticky-live]:focus-visible{ filter:brightness(1.07); }
[data-sticky-live]:focus-visible{ outline:2px solid var(--color-white); outline-offset:2px; }
[data-sticky-live] [data-sticky-full]{ display:inline-block; overflow:hidden; max-width:300px; opacity:1; transition:max-width 600ms var(--ease-in-out,ease), opacity 450ms var(--ease-in-out,ease); }
[data-sticky-live][data-compact]:not(:hover):not(:focus-within) [data-sticky-full]{ max-width:0; opacity:0; }
@media (min-width:768px){ [data-sticky-live]{ bottom:24px; } }
main > footer,[data-global-footer] > footer{ margin-block-start:var(--block-space); margin-block-end:0; }
[data-darksurface]{ margin-block-end:0 !important; }
[data-darksurface] + [data-global-footer] > footer,[data-global-cta] + [data-global-footer] > footer{ margin-block-start:0 !important; }
footer a:focus-visible, footer button:focus-visible, footer [tabindex]:focus-visible,
[data-topbar] a:focus-visible, [data-topbar] button:focus-visible, [data-topbar] [tabindex]:focus-visible,
[data-darksurface] a:focus-visible, [data-darksurface] button:focus-visible, [data-darksurface] [tabindex]:focus-visible{ outline:2px solid var(--color-white) !important; outline-offset:2px; }
[data-footgrid]{ grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; }
@media (max-width:767px){ [data-footgrid]{ grid-template-columns:1fr 1fr !important; } [data-footgrid] > :first-child{ grid-column:1 / -1 !important; } }
[data-ctagrid]{ grid-template-columns:1fr 1fr; }
@media (max-width:767px){ [data-ctagrid]{ grid-template-columns:1fr !important; gap:40px !important; } }
[data-loccard]{ grid-template-columns:1fr 1fr; }
@media (max-width:767px){ [data-loccard]{ grid-template-columns:1fr !important; } [data-loccard] > [data-loccard-body]{ padding:var(--sp-sm) !important; } }
[data-foot-logo] img,[data-foot-fm] img{ transition:transform var(--dur-2) var(--ease-out); }
[data-foot-logo]:hover img,[data-foot-fm]:hover img{ transform:scale(0.97); }
[data-foot-social] a{ transition:background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
[data-foot-social] a:hover{ background:var(--color-blue-med); transform:translateY(-2px); }
[data-loc-split] [data-card] [data-contactline]{ display:inline-flex; flex-wrap:wrap; align-items:flex-start; align-content:center; line-height:1.6; color:var(--color-blue-dark); }
[data-loc-split] [data-card] [data-contactline] .ms:not([data-arrow]){ height:1.6em; }
[data-loc-split] [data-card] [data-contactline] [data-underline]::after{ transform:scaleX(0); }
[data-loc-split] [data-card]:hover [data-contactline] [data-underline],[data-loc-split] [data-card]:focus-within [data-contactline] [data-underline]{ background-size:0 1px; }
[data-loc-split] [data-card] [data-contactline]:hover [data-underline],[data-loc-split] [data-card] [data-contactline]:focus-visible [data-underline]{ background-size:100% 1px; }
[data-loc-split] [data-card]:has([data-contactline]:hover) [data-cardimg]{ transform:none; }
[data-loc-split] [data-card]:has([data-contactline]:hover) [data-loc-cta] [data-underline]{ background-size:0 1px; }
[data-loc-split] [data-card]:has([data-contactline]:hover) [data-loc-cta] [data-underline]::after{ transform:scaleX(0); }
[data-loc-more]{ display:none; }
[data-loc-morewrap]{ display:contents; }
@keyframes locChipIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ [data-loc-morewrap] [data-quickbtn]{ animation:none !important; } }
#loc-1,#loc-2,#loc-3,#loc-4,#loc-5{ scroll-margin-top:120px; }
[data-loc-nav] a{ position:relative; transition:color var(--dur-3) var(--ease-in-out,ease); }
[data-loc-nav] a[aria-current="true"]{ box-shadow:inset 2px 0 0 var(--color-blue-med); }
@media (max-width:1199px){ nav[data-loc-nav]{ flex-direction:row !important; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:var(--sp-xxs); padding-bottom:var(--sp-xxs); } nav[data-loc-nav] a{ flex:0 0 auto; white-space:nowrap; border:1px solid var(--color-border); padding:10px 16px !important; } [data-loc-split]{ display:block !important; } [data-loc-split] > div{ margin-top:var(--sp-sm); } nav[data-loc-nav]{ position:sticky !important; top:0 !important; z-index:30; background:transparent; border-bottom:1px solid transparent; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:max(var(--sp-lg), calc(50vw - 780px)); padding-right:max(var(--sp-lg), calc(50vw - 780px)); } nav[data-loc-nav].is-stuck{ background:rgba(255,255,255,0.75); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom-color:var(--color-border-light); } nav[data-loc-nav] a[aria-current="true"]{ background:transparent !important; color:#00597A !important; font-weight:700 !important; border-color:#00597A !important; box-shadow:none !important; } #loc-1,#loc-2,#loc-3,#loc-4,#loc-5{ scroll-margin-top:72px; } }
@supports not (backdrop-filter:blur(12px)){ nav[data-loc-nav].is-stuck{ background:rgba(255,255,255,0.95); } }
@media (prefers-reduced-transparency:reduce){ nav[data-loc-nav].is-stuck{ background:var(--color-white); -webkit-backdrop-filter:none; backdrop-filter:none; } }
@media (min-width:1200px){ #loc-1,#loc-2,#loc-3,#loc-4,#loc-5{ min-height:600px !important; } nav[data-loc-nav]{ flex-direction:column !important; position:sticky !important; top:64px !important; overflow:visible !important; gap:0 !important; padding-bottom:0 !important; } nav[data-loc-nav] a{ border:none !important; white-space:normal !important; padding:12px 0 12px 16px !important; flex:none; } nav[data-loc-nav] a[aria-current="true"]{ box-shadow:inset 2px 0 0 var(--color-blue-med) !important; border:none !important; } }
@media (min-width:768px){ [data-loc-contact]{ gap:4px !important; } }
@media (max-width:767px){ [data-loc-sr]{ position:absolute !important; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } [data-loc-hide]{ display:none !important; } [data-loc-contact]{ margin-top:var(--sp-md) !important; gap:var(--sp-xxs) !important; } [data-loc-contact] [data-contactline]{ min-height:0; position:relative; } [data-loc-contact] [data-contactline]::after{ content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:44px; } [data-loc-divider]{ display:none !important; } [data-loc-quick]{ margin-top:var(--sp-xs); } [data-loc-cta]{ margin-top:var(--sp-sm) !important; } [data-loc-more]{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; background:var(--color-white); border:1px solid var(--color-border); color:#00384D; font-family:inherit; font-size:var(--fs-pxxs); cursor:pointer; } [data-loc-more]:hover,[data-loc-more]:focus-visible{ border-color:var(--color-blue-dark); } [data-loc-quick]:not([data-open]) [data-loc-morewrap]{ display:none; } [data-loc-quick][data-open] [data-loc-more]{ display:none; } [data-loc-quick][data-open] [data-loc-morewrap] [data-quickbtn]{ animation:locChipIn var(--dur-2) var(--ease-out) both; } }
[data-locb-grid]{ display:grid; grid-template-columns:1fr; gap:var(--sp-xs); min-width:0; }
@media (min-width:768px){ [data-locb-grid]{ grid-template-columns:1fr 1fr; } }
@media (min-width:1200px){ [data-locb-grid]{ grid-template-columns:1fr 1fr 1fr; gap:var(--sp-sm); } }
[data-locb-grid] [data-loc-cta]{ margin-top:auto !important; padding-top:var(--sp-md); }
[data-locb-grid] [data-locb-sr]{ position:absolute !important; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[data-locb-grid] [data-loc-more]{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; background:var(--color-white); border:1px solid var(--color-border); color:#00384D; font-family:inherit; font-size:var(--fs-pxxs); cursor:pointer; }
[data-locb-grid] [data-loc-more]:hover,[data-locb-grid] [data-loc-more]:focus-visible{ border-color:var(--color-blue-dark); }
[data-locb-grid] [data-loc-quick]:not([data-open]) [data-loc-morewrap]{ display:none; }
[data-locb-grid] [data-loc-quick][data-open] [data-loc-more]{ display:none; }
[data-locb-grid] [data-loc-quick][data-open] [data-loc-morewrap] [data-quickbtn]{ animation:locChipIn var(--dur-2) var(--ease-out) both; }
/* --- Chat-Button (Floating) + Panel — Floating-Ecke rechts unten: 1450 (z:90) > Chat-Button (z:89) > Panel (z:88) --- */
[data-chat-fab]{ position:fixed; right:0; bottom:80px; z-index:89; height:48px; display:inline-flex; align-items:center; padding:0 24px; background:var(--color-black,#00384D); color:var(--color-white,#FFFFFF); border:none; border-radius:0; cursor:pointer; font-family:inherit; transition:background 350ms var(--ease-out,ease), padding 600ms var(--ease-in-out,ease), opacity 200ms var(--ease-out,ease), transform 200ms var(--ease-out,ease); }
[data-chat-fab]:hover{ background:var(--color-blue-dark,#00597A); }
[data-chat-fab]:focus-visible{ outline:2px solid var(--color-white,#FFFFFF); outline-offset:2px; }
[data-chat-fab] .ms{ font-size:20px; color:var(--color-white,#FFFFFF); }
[data-chat-fab] [data-chat-full]{ display:inline-block; overflow:hidden; white-space:nowrap; max-width:300px; opacity:1; margin-left:10px; font-size:16px; font-weight:700; line-height:1; transition:max-width 600ms var(--ease-in-out,ease), opacity 450ms var(--ease-in-out,ease), margin-left 600ms var(--ease-in-out,ease); }
[data-chat-fab][data-compact]:not(:hover):not(:focus-within) [data-chat-full]{ max-width:0; opacity:0; margin-left:0; }
[data-chat-fab][data-compact]:not(:hover):not(:focus-within){ padding:0 14px; }
@media (max-width:767px){ [data-chat-fab]{ bottom:72px; } }
/* Chat-Panel: EINE Geometrie auf allen Seiten — rechtes Vollhöhen-Panel wie das Chat-Suchmodul
der Startseite (480px, slidet von rechts ein, Radius 0, z:150 über Header). */
[data-chat-fab-panel]{ position:fixed; top:0; right:0; bottom:0; z-index:150; width:min(480px, 100%); max-height:none; display:flex; flex-direction:column; background:var(--color-white,#FFFFFF); border:none; border-left:1px solid var(--color-border-light,#E5EEF2); border-radius:0; box-shadow:-12px 0 32px rgba(0,56,77,0.12); visibility:hidden; transform:translateX(100%); transition:transform 450ms var(--ease-in-out,ease), visibility 0s linear 450ms; }
[data-chat-fab-panel][data-open="true"]{ visibility:visible; transform:translateX(0); transition:transform 450ms var(--ease-in-out,ease), visibility 0s; }
@media (prefers-reduced-motion:reduce){ [data-chat-fab-panel]{ transition:none; } }
/* Chat offen (≥1200px): Seite schiebt sich zusammen — Inhalt reflowt neben dem Panel;
Sticky 1450 und Chat-Button wandern mit (identisch zur Startseite). Darunter Overlay. */
@media (min-width:1200px){
[data-chat-shift]{ transition:padding-right 450ms var(--ease-in-out); }
[data-chat-shift][data-chat-open="true"]{ padding-right:480px; }
}
/* Chat offen: Floating-Ecke (Sticky 1450 + Chat-Button) ausblenden — wie auf der Startseite */
body:has([data-chat-fab-panel][data-open="true"]) [data-sticky-live],
body:has([data-chat-fab-panel][data-open="true"]) [data-chat-fab]{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity 200ms var(--ease-in-out), visibility 0s linear 200ms; }
@media (prefers-reduced-motion:reduce){ [data-chat-shift],[data-sticky-live],[data-chat-fab]{ transition:none; } }
[data-chat-fab-panel] > *{ padding-left:32px; padding-right:32px; }
@media (max-width:767px){ [data-chat-fab-panel] > *{ padding-left:24px; padding-right:24px; } }
[data-cfp-head]{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-xs); padding-top:32px; padding-bottom:16px; border-bottom:1px solid var(--color-border-light,#E5EEF2); }
@media (max-width:767px){ [data-cfp-head]{ padding-top:24px; } }
[data-cfp-title]{ font-size:var(--fs-ps); font-weight:700; line-height:1.3; color:var(--color-black,#00384D); }
[data-cfp-sub]{ font-size:var(--fs-pxxs); line-height:1.4; color:var(--color-muted,rgba(0,56,77,0.75)); }
[data-cfp-close]{ flex:0 0 auto; width:44px; height:44px; margin:-8px -8px 0 0; padding:0; background:transparent; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
[data-cfp-close]:hover{ background:var(--color-blue-light-10,#EEF8FD); }
[data-cfp-close]:focus-visible{ outline:2px solid var(--color-blue-dark,#00597A); outline-offset:2px; }
[data-cfp-close] .ms{ font-size:22px; }
[data-cfp-msgs]{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding-top:16px; padding-bottom:16px; }
[data-cfp-msgs]:empty{ padding:0; }
[data-cfp-msg-user]{ align-self:flex-end; max-width:85%; background:var(--color-blue-light-10,#EEF8FD); padding:var(--sp-xs); font-size:var(--fs-pxs); line-height:1.5; color:var(--color-black,#00384D); }
[data-cfp-msg-bot]{ align-self:flex-start; max-width:100%; display:flex; flex-direction:column; gap:var(--sp-xs); }
[data-cfp-text]{ font-size:var(--fs-pxs); line-height:1.6; color:var(--color-black,#00384D); margin:0; max-width:60ch; }
[data-cfp-emg]{ background:var(--color-signal-red,#D7263D); padding:var(--sp-sm); display:flex; flex-direction:column; gap:var(--sp-xs); }
[data-cfp-emg] p{ font-size:16px; line-height:1.6; margin:0; color:#FFFFFF; }
[data-cfp-emg] p a{ color:#FFFFFF; font-weight:700; text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-size:100% 1px; background-position:0 calc(100% + 2px); transition:background-size 250ms var(--ease-out); }
[data-cfp-emg] p a:hover,[data-cfp-emg] p a:focus-visible{ background-size:0 1px; }
@media (prefers-reduced-motion:reduce){ [data-cfp-emg] p a{ transition:none; } }
[data-cfp-emg-call]{ align-self:flex-start; display:inline-flex; align-items:center; gap:var(--sp-xxs); color:#FFFFFF; font-size:var(--fs-pxs); font-weight:700; text-decoration:none; }
[data-cfp-emg-call] .ms{ font-size:18px; color:#FFFFFF; }
[data-cfp-emg-call]:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }
[data-cfp-chips]{ display:flex; flex-wrap:wrap; gap:var(--sp-xxs); padding-top:16px; padding-bottom:16px; border-top:1px solid var(--color-border-light,#E5EEF2); }
[data-cfp-answer-chips]{ display:flex; flex-wrap:wrap; gap:var(--sp-xxs); }
[data-cfp-chip]{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; background:var(--color-blue-light-10,#EEF8FD); color:var(--color-blue-dark,#00597A); border:none; border-radius:0; cursor:pointer; font-family:inherit; font-size:var(--fs-pxxs); font-weight:700; line-height:1.3; text-align:left; transition:background 350ms var(--ease-out,ease); }
[data-cfp-chip]:hover{ background:var(--color-blue-light-30,#CBEAF8); }
[data-cfp-chip]:focus-visible{ outline:2px solid var(--color-blue-dark,#00597A); outline-offset:2px; }
[data-cfp-answer-chips] [data-cfp-chip]{ min-height:24px; padding:3px 8px; }
[data-cfp-emg-tile]{ width:24px; height:24px; flex:0 0 auto; background:var(--color-signal-red,#D7263D); display:inline-flex; align-items:center; justify-content:center; }
[data-cfp-emg-tile] .ms{ font-size:14px; color:#FFFFFF; }
[data-cfp-links]{ display:flex; flex-direction:column; gap:var(--sp-xxs); align-items:flex-start; }
[data-cfp-typing]{ display:flex; gap:4px; padding:var(--sp-xs) 0; }
[data-cfp-typing] i{ width:6px; height:6px; background:var(--color-blue-dark,#00597A); animation:tk-cfp-dot 900ms infinite var(--ease-in-out,ease); }
[data-cfp-typing] i:nth-child(2){ animation-delay:150ms; }
[data-cfp-typing] i:nth-child(3){ animation-delay:300ms; }
@keyframes tk-cfp-dot{ 0%,100%{ opacity:0.25; } 50%{ opacity:1; } }
[data-cfp-form]{ display:flex; align-items:center; gap:var(--sp-xxs); padding-top:16px; padding-bottom:32px; border-top:1px solid var(--color-border-light,#E5EEF2); }
@media (max-width:767px){ [data-cfp-form]{ padding-bottom:24px; } }
[data-cfp-form] input{ flex:1 1 auto; min-width:0; height:56px; padding:0 16px; background:var(--color-white,#FFFFFF); border:1px solid var(--color-border,#CCDEE4); border-radius:0; font-family:inherit; font-size:16px; color:var(--color-black,#00384D); }
[data-cfp-form] input:focus-visible{ outline:2px solid var(--color-blue-dark,#00597A); outline-offset:-1px; }
[data-cfp-send]{ flex:0 0 auto; width:56px; height:56px; padding:0; background:var(--color-blue-light-10,#EEF8FD); border:none; border-radius:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
[data-cfp-send]:hover{ background:var(--color-blue-light-60,#97D6F1); }
[data-cfp-send]:focus-visible{ outline:2px solid var(--color-blue-dark,#00597A); outline-offset:2px; }
[data-cfp-send] .ms{ font-size:18px; }
[data-cfp-sr]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Unsichtbares Fokus-Ziel am Seitenanfang (Altbestand Skip-Links) */
[data-toptarget]{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
[data-toptarget]:focus,[data-toptarget]:focus-visible{ outline:none; }
/* Fokussierte Elemente nicht verdecken (WCAG 2.4.11) — Ecke belegt 1450 (48) + 8 + Chat (48) + 16 = 120px. */
html:root{ scroll-padding-bottom:120px; }
@media (prefers-reduced-motion: reduce){
[data-chat-fab]{ transition:background 350ms var(--ease-out,ease); transform:none !important; }
[data-chat-fab] [data-chat-full]{ transition:none; }
[data-chat-fab-panel]{ transition:opacity 1ms linear, visibility 0s; transform:none !important; }
[data-cfp-typing] i{ animation:none; opacity:0.6; }
}
/* === 4 KOMPONENTEN ========================================================= */
[data-quicklink-card]{
position:relative;
display:grid;
grid-template-columns:auto 1fr;
grid-template-rows:auto auto 1fr;
column-gap:var(--sp-xxs);
row-gap:var(--sp-sm);
align-items:center;
padding:var(--sp-md);
background:var(--color-white);
transition:background 350ms var(--ease-out);
}
[data-quicklink-card] > [data-icontile]{ grid-column:1; grid-row:1; }
[data-quicklink-card] > h3{ grid-column:2; grid-row:1; line-height:1.25; }
[data-quicklink-card] > p{ grid-column:1 / -1; grid-row:2; margin-top:0; }
[data-quicklink-card] > [data-textbtn]{ grid-column:1 / -1; grid-row:3; align-self:end; justify-self:start; }
/* Flächenwechsel im Hover/Fokus — !important, weil die Instanzen background:var(--color-white) inline tragen */
[data-quicklink-card]:hover,
[data-quicklink-card]:has(:focus-visible){ background:var(--color-blue-light-10); }
@media (max-width:767px){
[data-quicklink-card]{ padding:var(--sp-sm); }
}
@media (prefers-reduced-motion:reduce){
[data-quicklink-card]{ transition:none; }
}
/* === QUICKLINK-BUTTON auf dunkler Fläche (Variante der Library-Klasse [data-quickbtn]) ======
Lag bisher in jedem Seiten-Helmet; hier die einzige Quelle. */
[data-quickbtn~="on-dark"]{ background:transparent; border:1px solid rgba(255,255,255,0.5); color:var(--color-white); min-height:48px; padding:0 16px; border-radius:0; transition:background 200ms var(--ease); }
[data-quickbtn~="on-dark"] .ms{ color:var(--color-white); }
[data-quickbtn~="on-dark"]:hover,[data-quickbtn~="on-dark"]:focus-visible{ background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.5); color:var(--color-white); }
[data-quickbtn~="on-dark"]:hover .ms,[data-quickbtn~="on-dark"]:focus-visible .ms{ color:var(--color-white); transform:none; }
[data-quickbtn~="on-dark"]:focus-visible{ outline:2px solid var(--color-white); outline-offset:2px; }
/* === PDF-BADGE — Atom (bisher Inline-Styles im Header-Markup) ============================== */
[data-badge="pdf"]{ margin-left:auto; font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:1px; color:var(--color-blue-dark); background:var(--color-blue-light-10); padding:2px 8px; }
/* === HERO-VARIANTE „TEXT" — GLOBALE KOMPONENTE für Übersichts- und Textseiten =================
(Standorte, Ambulanzen & Zeiten, Anfahrt, Lagepläne, Besuchszeiten, Erklärungen …)
Markup:
Weißer Grund, keine Bild-/Farbfläche, keine Eyebrow. Maße, Typo und Abstände nur von hier. */
[data-hero="text"]{ background:var(--color-white); }
[data-hero="text"] > div{ max-width:1560px; margin:0 auto; padding:var(--sp-md) var(--sp-lg) 0; }
/* Direkt nach dem Breadcrumb: dessen Innenabstand wird abgezogen (sichtbar exakt 2 × --block-space) */
[data-breadcrumb] + [data-hero="text"] > div{ padding-top:var(--sp-md); }
[data-hero="text"] h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.1; }
[data-hero="text"] [data-hero-lead]{ margin-top:var(--sp-sm); font-size:var(--fs-p); line-height:1.6; color:var(--color-blue-dark); max-width:var(--text-measure); }
@media (min-width:1200px){ [data-hero="text"] > div{ width:min(1560px, 100% - 160px); max-width:none; padding-left:0; padding-right:0; } }
@media (max-width:767px){
[data-hero="text"] > div{ padding-left:var(--sp-sm); padding-right:var(--sp-sm); }
[data-hero="text"] h1{ font-size:36px; }
[data-hero="text"] [data-hero-lead]{ font-size:var(--fs-ps); }
}
/* === TOPIC-RASTER + TOPIC CARD „BILD-VARIANTE" — data-card="topic-img" ========================
Eigenständige, dokumentierte Variante der Topic Card (components.md: die Icon-Variante ohne
Bild bleibt unverändert). Zelle im Linienraster:
· Bild links, 96px breit im Format 4:5 (= 120px hoch; mobil 64px), grid-row 1/-1 —
definiert die Kartenhöhe (Referenz: Standorte-Übersicht)
· Titel + Teaser rechts oben · Pfeil IMMER rechts unten, bündig mit der Bild-Unterkante —
alle Pfeile einer Rasterreihe fluchten, egal ob Titel ein- oder zweizeilig ist
· Padding allseitig gleich: 24px Desktop / 16px Mobile · Radius 0 · ganze Zelle Stretched-Link
· Hover: Titel-Underline + Pfeil-Shift 4px + Bild scale(1.04) (aus den [data-card]-Atomen)
REDAKTIONSREGEL: Titel ≤ ~28 Zeichen (max. 2 Zeilen), Teaser ≤ ~75 Zeichen / ein Satz
(max. 2 Zeilen) — technisch per -webkit-line-clamp:2 abgesichert.
Raster: 4 → 3 (<1700) → 2 (<1200) → 1 (<768) Spalten. Horizontale Linien laufen full-bleed
nach JEDER Reihe (aus [data-fullbleed-lines], auch beim Responsive-Umbruch 4→2); vertikale
Spaltenlinien NUR als Zell-Border — leere Zellen einer unvollständigen letzten Reihe
bleiben linienfrei (Referenz: LKH Hall). */
[data-topics]{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background-color:var(--color-white); }
[data-topics] > [data-card]{ border-right:1px solid var(--color-border-light); }
[data-topics] > [data-card]:nth-child(4n){ border-right:none; }
/* Zeilenlinien: Card-::after bei -1px — zwischen den Reihen liegt die Linie über dem Weiß der
Folgezeile (z-index), unter der LETZTEN Reihe deckungsgleich auf der border-bottom des
full-bleed-Wrappers → überall exakt 1px, Abschlusslinie läuft full-bleed. */
[data-topics] > [data-card]::after{ bottom:-1px; z-index:5; }
@media (max-width:1699px){
[data-topics]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
[data-topics] > [data-card]{ border-right:1px solid var(--color-border-light); }
[data-topics] > [data-card]:nth-child(4n){ border-right:1px solid var(--color-border-light); }
[data-topics] > [data-card]:nth-child(3n){ border-right:none; }
}
@media (max-width:1199px){
[data-topics]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
[data-topics] > [data-card]{ border-right:1px solid var(--color-border-light); }
[data-topics] > [data-card]:nth-child(3n){ border-right:1px solid var(--color-border-light); }
[data-topics] > [data-card]:nth-child(2n){ border-right:none; }
/* Ungerade Anzahl im 2-Spalter: letzter Eintrag spannt beide Spalten — nie leere Rahmenfragmente */
[data-topics] > [data-card]:last-child:nth-child(odd){ grid-column:1 / -1; border-right:none; }
}
@media (max-width:767px){
[data-topics]{ grid-template-columns:minmax(0,1fr); margin-left:var(--sp-lg) !important; margin-right:var(--sp-lg) !important; }
[data-topics] > [data-card]{ border-right:none !important; }
}
[data-card~="topic-img"]{ min-width:0; position:relative; background:var(--color-white); color:var(--color-black); display:grid; grid-template-columns:96px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; column-gap:16px; padding:var(--sp-sm); border-radius:0; }
[data-card~="topic-img"] [data-stretch]{ min-width:0; overflow-wrap:break-word; }
[data-card~="topic-img"] [data-topic-img]{ grid-column:1; grid-row:1 / -1; position:relative; z-index:2; width:96px; aspect-ratio:4 / 5; height:auto; display:block; overflow:hidden; align-self:start; }
[data-card~="topic-img"] [data-topic-img] [data-cardimg]{ width:100%; height:100%; object-fit:cover; display:block; }
[data-card~="topic-img"] [data-topic-body]{ grid-column:2; grid-row:1; min-width:0; }
/* Titel: line-clamp auf dem ÄUSSEREN , der Text bleibt inline. KEINE Hover-Underline —
die Topic Card nutzt das Flächen-Hover (ganze Zelle #EEF8FD), s. u. */
/* Silbentrennung: global hyphens:auto mit hyphenate-limit-chars 6 3 3 (Wort ≥6 Zeichen,
min. 3 vor und 3 nach der Trennstelle) — nie hyphens:manual, keine Soft-Hyphens im Text. */
[data-card~="topic-img"] [data-topic-body] > a{ color:var(--color-black); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:var(--fs-cardtitle); font-weight:700; line-height:var(--lh-tight); text-wrap:wrap; word-break:break-word; overflow-wrap:break-word; 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; }
[data-card~="topic-img"] [data-topic-body] [data-underline]{ display:inline; background-image:none; text-decoration:none; }
/* Flächen-Hover wie Akkordeon/Abteilungen: ganze Zelle #EEF8FD bis an die Rasterlinien.
Icon-Shift 4px und Bild-Scale 1.04 kommen unverändert aus den [data-card]-Atomen und
triggern gleichzeitig über :hover der Zelle. KEIN Text-Shift am Titel (der gehört nur
zu Akkordeon/Abteilungen). Fokus: :focus-within = Outline + dieselben Zustände. */
[data-card~="topic-img"]{ transition:background var(--dur-1) var(--ease-in-out); }
@media (hover:hover){
[data-card~="topic-img"]:hover{ background:var(--color-blue-light-10); }
}
[data-card~="topic-img"]:has(:focus-visible){ background:var(--color-blue-light-10); } /* Ring: zentral, s. ZELLEN-FOKUS */
@media (prefers-reduced-motion:reduce){ [data-card~="topic-img"]{ transition:none; } }
[data-card~="topic-img"] [data-topic-teaser]{ margin-top:var(--sp-xxs); font-size:var(--fs-pxs); line-height:var(--lh-body); color:var(--color-blue-dark); text-wrap:pretty; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
[data-card~="topic-img"] > .ms{ grid-column:2; grid-row:2; align-self:end; justify-self:end; font-size:20px; padding-top:16px; }
@media (max-width:767px){
[data-card~="topic-img"]{ padding:16px; grid-template-columns:64px minmax(0,1fr); }
[data-card~="topic-img"] [data-topic-img]{ width:64px; }
}
/* === ZEILEN-HOVER — zentrales Hover-Muster für Zeilen-Komponenten ============================
(FAQ-Akkordeon, Abteilungen): ganze Zeile Fläche #EEF8FD (--color-blue-light-10) bis an die
Rasterlinien · Text rückt 4px nach rechts (transform, nie padding/margin) · Icon/Chevron/Pfeil
bleibt ORTSFEST · KEINE Underline (dokumentierte Abweichung vom Icon-Shift-Vokabular) ·
nur unter @media (hover:hover) · Fokus ausschließlich :focus-visible (Outline 2px blue-dark). */
/* === FAQ-AKKORDEON — globale Komponente ======================================================
Headline-Block AUSSERHALB der Linien; Fragen als Zeilen im Linienraster (Linien 1px full-bleed
über den Wrapper, Zeilenlinien via ::before ±100vw). EXKLUSIV: genau EIN Item offen — Öffnen
eines Items schließt das zuvor geöffnete (aria-expanded="false", Panel display:none).
Zustands-Quellen getrennt: open = aria-expanded · Hover = :hover · Fokus = :focus-visible.
Hover = Zeilen-Hover (s. o.); Open-State: Frage + Antwort zusammenhängend #EEF8FD, KEIN Shift. */
[data-faq-linewrap]{ overflow:hidden; border-top:1px solid var(--color-border-light); border-bottom:1px solid var(--color-border-light); }
[data-faq]{ border-left:1px solid var(--color-border-light); border-right:1px solid var(--color-border-light); }
[data-faq-q] > button{ padding-inline:var(--sp-md); }
[data-faq-panel] > div > p{ padding-inline:var(--sp-md); }
[data-faq-row]{ position:relative; }
[data-faq-row] + [data-faq-row]::before{ content:""; position:absolute; top:0; left:-100vw; right:-100vw; height:1px; background:var(--color-border-light); }
[data-faq-q]{ margin:0; font-size:inherit; font-weight:inherit; }
[data-faq-q] > button{ width:100%; min-height:56px; padding-block:var(--sp-sm); background:none; border:none; font-family:inherit; font-size:var(--fs-cardtitle); font-weight:700; line-height:1.4; color:var(--color-black); text-align:left; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-sm); transition:background var(--dur-1) var(--ease-in-out); }
[data-faq-q] > button [data-underline]{ display:inline-block; transition:transform var(--dur-2) var(--ease-in-out); }
[data-faq-q] > button [data-underline]::after{ display:none; }
@media (hover:hover){
[data-faq-q] > button:hover{ background:var(--color-blue-light-10); }
[data-faq-q] > button:not([aria-expanded="true"]):hover [data-underline]{ transform:translateX(4px); }
}
[data-faq-q] > button[aria-expanded="true"]{ background:var(--color-blue-light-10); }
[data-faq-panel][data-open="true"]{ background:var(--color-blue-light-10); }
[data-faq-chev]{ flex:0 0 auto; display:inline-block; font-size:20px; color:var(--color-blue-dark); transform-origin:center; transition:transform 250ms var(--ease-in-out,ease); }
[data-faq-q] > button[aria-expanded="true"] [data-faq-chev]{ transform:rotate(180deg) !important; }
[data-faq-panel]{ display:none; }
[data-faq-panel][data-open="true"]{ display:block; animation:tk-faq-in 250ms var(--ease-out) both; }
[data-faq-panel] p{ font-size:var(--fs-ps); line-height:1.6; color:var(--color-blue-dark); max-width:var(--text-measure); padding-block:var(--sp-xxs) var(--sp-sm); margin:0; }
@keyframes tk-faq-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ [data-faq-panel][data-open="true"]{ animation:none !important; } [data-faq-chev]{ transition:none; } [data-faq-q] > button [data-underline]{ transition:none; } [data-faq-q] > button:not([aria-expanded="true"]):hover [data-underline]{ transform:none; } }
@media (max-width:767px){
[data-faq-q] > button{ font-size:var(--fs-ps); padding-inline:var(--sp-sm); }
[data-faq-panel] > div > p{ padding-inline:var(--sp-sm); }
[data-faq-panel] p{ font-size:var(--fs-pxs); }
}
/* === ABTEILUNGEN — klickbares Zeilen-Verzeichnis (globale Komponente) ========================
Einsatz: Fachabteilungs-Verzeichnisse (z. B. „Zehn Fachabteilungen unter einem Dach").
Aufbau: 2-spaltiges Linienraster (2 → 1 <768px), Zeile = ganze Fläche als Link (),
Titel 18px Bold links + Pfeil rechts. Full-bleed-Linie nach jeder Zeile kommt aus dem
[data-fullbleed-lines]-Wrapper (::after der Zeilen), vertikaler Mitteltrenner als border,
Rahmen an den Container-Kanten. Ungerade Anzahl → letzter Eintrag spannt beide Spalten.
Hover = Zeilen-Hover (s. o.): Fläche #EEF8FD, Titel +4px, Pfeil ORTSFEST, keine Underline.
KEIN Active-/Open-State (Navigations-Link, kein Disclosure).
ABGRENZUNG: „Primariate-Liste" und „Zeilen-Liste" (Besuchszeiten) sind NICHT klickbar
und NICHT diese Komponente. */
[data-abteilungen]{ display:grid; grid-template-columns:1fr 1fr; }
[data-abteilungen] > a:nth-child(odd){ border-right:1px solid var(--color-border-light); }
[data-abteilungen] > a:last-child:nth-child(odd){ grid-column:1 / -1; border-right:none; }
[data-abteilung]{ position:relative; background:transparent; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-sm); padding:var(--sp-md) var(--sp-lg); color:var(--color-black); text-decoration:none; transition:background var(--dur-1) var(--ease-in-out); }
a[data-abteilung] [data-underline]{ font-size:var(--fs-ps); font-weight:700; display:inline-block; background-image:none; transition:transform var(--dur-2) var(--ease-in-out); }
a[data-abteilung] [data-underline]::after{ display:none; }
[data-abteilung] > .ms{ font-size:22px; flex:0 0 auto; }
@media (hover:hover){
a[data-abteilung]:hover{ background:var(--color-blue-light-10); }
a[data-abteilung]:hover [data-underline]{ transform:translateX(4px); }
a[data-abteilung]:hover [data-arrow]{ transform:none; }
}
@media (prefers-reduced-motion:reduce){ a[data-abteilung] [data-underline]{ transition:none; } a[data-abteilung]:hover [data-underline]{ transform:none; } }
@media (max-width:767px){
[data-abteilungen]{ grid-template-columns:1fr; }
[data-abteilungen] > a:nth-child(odd){ border-right:none; }
[data-abteilungen] > a:last-child:nth-child(odd){ grid-column:auto; }
[data-abteilung]{ padding:16px; align-items:flex-start; gap:12px; }
a[data-abteilung] [data-underline]{ font-size:18px; line-height:1.3; }
[data-abteilung] > .ms{ font-size:20px; align-self:flex-start; margin-top:1px; }
}
/* === TEAM-BAND — Fotoband (globale Komponente) ==============================================
Team-Cards im Linienraster als durchlaufendes Band: Foto 3:4, Name, Funktion. Statische Zellen
(kein [data-card], kein Hover-System, kein Pointer, Radius 0) — die Karten sind bewusst NICHT
verlinkt; Ziel-Navigation läuft über den Sektions-CTA. In den Karten gibt es KEINE Tab-Stops:
fokussierbare Kinder (u. a. die unsichtbaren Schalter im Shadow-DOM der Bild-Platzhalter) werden
in globale-bloecke.js auf tabindex="-1" gesetzt.
Der Kartensatz liegt doppelt in der Reihe (2. Satz aria-hidden + inert), Animation -50 % → nahtlos.
A11Y: Bedienleiste (Pause/Weiter) steht in der Tab-Reihenfolge VOR dem Band · Band ist ein
fokussierbarer, horizontal scrollbarer Bereich (Pfeiltasten/Pos1/Ende) → alle Karten sind auch
ohne Animation erreichbar (WCAG 2.1.1) · Fokus pausiert automatisch · aria-live meldet den
Zustand · prefers-reduced-motion: Band steht still, Pause-Schalter entfällt (WCAG 2.2.2).
Bildquelle ≥ 2× Anzeigebreite (320px ⇒ ≥ 640px), object-fit:cover, keine CSS-Filter. */
[data-teamband]{ --tb-w:320px; position:relative; }
/* Bedienleiste. Variante "incol": sitzt im selben Wrapper wie der Intro-Fließtext — Boxkante des
44px-Schalters flieht mit der Textkante (strukturell, keine Magic Numbers). Fallback ohne
Intro-Text: eigene Zeile im 1560er-Raster. */
[data-tb-controls]{ max-width:1560px; margin:var(--sp-sm) auto; padding:0 var(--sp-lg); }
/* Ausrichtung NICHT hart setzen, sondern der des Intro-Texts folgen: [data-introtext] ist
linksbündig und wird erst ab 1200px rechtsbündig (margin-left:auto) — die Leiste spiegelt das. */
[data-tb-controls="incol"]{ max-width:var(--text-measure); margin:var(--sp-md) 0 0 0; padding:0; }
@media (min-width:1200px){ [data-tb-controls="incol"]{ margin-left:auto; } }
/* Der Wrapper macht die Textspalte höher (Text + Leiste). In Headline-Rastern mit
align-items:end würde die H2 dadurch nach unten wandern — der Abstand Eyebrow → H2 ist aber
überall konstant. Deshalb bleibt die Überschrift oben verankert. */
*:has(> [data-tb-textcol]) > h2{ align-self:start; }
[data-tb-controls-inner]{ max-width:var(--text-measure); margin-left:auto; display:flex; align-items:center; gap:var(--sp-sm); }
[data-tb-controls="incol"] [data-tb-controls-inner]{ max-width:none; margin-left:0; }
[data-tb-status]{ font-size:var(--fs-pxs); line-height:1.5; color:var(--color-blue-dark); margin:0; }
@media (max-width:767px){ [data-tb-controls]{ padding:0 var(--sp-sm); } [data-tb-controls-inner]{ max-width:none; } }
[data-tb-controls] [data-visually-hidden]{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
[data-tb-toggle]{ flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:var(--color-white); border:1px solid var(--color-border-light); border-radius:0; color:var(--color-blue-dark); cursor:pointer; transition:background var(--dur-1) var(--ease-in-out); }
[data-tb-toggle] .ms{ font-size:22px; color:var(--color-blue-dark); }
@media (hover:hover){ [data-tb-toggle]:hover{ background:var(--color-blue-light-10); } }
[data-tb-toggle]:focus-visible{ outline:2px solid var(--color-blue-dark); outline-offset:2px; }
/* Kein scroll-behavior:smooth \u2014 das Tastatur-Scrollen wird in globale-bloecke.js selbst getweent. */
[data-tb-viewport]{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
[data-tb-viewport]::-webkit-scrollbar{ display:none; }
[data-tb-viewport]:focus{ outline:none; }
[data-tb-viewport]:focus-visible{ outline:2px solid var(--color-blue-dark); outline-offset:-2px; }
[data-teamband] [data-tb-row]{ display:flex; width:max-content; will-change:transform; animation:tb-left 96s linear infinite; }
@keyframes tb-left{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
[data-teamband][data-paused="true"] [data-tb-row]{ animation-play-state:paused; }
@media (hover:hover){ [data-teamband]:hover [data-tb-row]{ animation-play-state:paused; } }
[data-teamband] [data-team-card]{ flex:0 0 auto; width:var(--tb-w); background:var(--color-white); padding:var(--sp-md); display:flex; flex-direction:column; gap:var(--sp-sm); border-right:1px solid var(--color-border-light); cursor:default; }
/* Nicht klickbar darf nicht klickbar aussehen: kein Hover-Effekt, kein Pointer, kein Bild-Zoom. */
[data-teamband] [data-team-card] *{ cursor:default; }
@media (hover:hover){
[data-teamband] [data-team-card]:hover{ background:var(--color-white); box-shadow:none; transform:none; }
[data-teamband] [data-team-card]:hover [data-team-photo] > img,
[data-teamband] [data-team-card]:hover [data-team-photo] > image-slot,
[data-teamband] [data-team-card]:hover .ms{ transform:none; scale:none; }
}
[data-teamband] [data-team-photo]{ position:relative; aspect-ratio:3/4; background:var(--color-blue-light-10); }
[data-teamband] [data-team-photo] > img,[data-teamband] [data-team-photo] > image-slot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:none; }
[data-teamband] [data-team-name]{ font-size:var(--fs-cardtitle); font-weight:700; line-height:var(--lh-tight); color:var(--color-black); hyphens:none; -webkit-hyphens:none; text-wrap:pretty; }
[data-teamband] [data-team-role]{ font-size:var(--fs-pxs); line-height:var(--lh-body); color:var(--color-blue-dark); margin-top:var(--sp-xxs); }
@media (prefers-reduced-motion:reduce){
[data-teamband] [data-tb-row]{ animation:none !important; }
[data-tb-viewport]{ scroll-behavior:auto; }
[data-tb-toggle]{ display:none; }
}
@media (max-width:1199px){ [data-teamband]{ --tb-w:280px; } }
@media (max-width:767px){ [data-teamband]{ --tb-w:240px; } [data-teamband] [data-team-card]{ padding:var(--sp-sm); } [data-tb-controls]{ padding:0 var(--sp-sm); } }
/* === ZELLEN-FOKUS — EINE zentrale Definition für alle Zellen im Linienraster ==================
Problem: Das Raster ist mit 1px-Linien dicht gepackt und [data-fullbleed-lines] trägt
overflow:hidden — ein Ring MIT positivem outline-offset liegt außerhalb der Zellkante und wird
von der Nachbarzelle bzw. der Wrapper-Kante angeschnitten.
Lösung: Ring nach INNEN (outline-offset:-2px) — kann prinzipiell nicht überdeckt werden, kein
Layout-Shift (Outline ist layout-neutral, kein border/box-shadow). Zusätzlich wird die
fokussierte Zelle mit z-index:2 angehoben, damit auch künftige Varianten (Ring mit positivem
Offset, Hover-Flächen, Schatten) frei liegen. Die Stapelung INNERHALB der Zelle bleibt
unberührt: [data-stretch]::after z-index:1 < [data-ontop] z-index:2.
Kopplung: ausschließlich :focus-visible bzw. :has(:focus-visible) — Maus-Klick erzeugt NIE
einen Ring (nicht :focus-within, das auch bei Klick greift). Kontrast #00597A auf #FFFFFF
(8,0:1) und auf #EEF8FD (7,2:1) — beides ≥ 3:1, WCAG 1.4.11.
NEUE Zellen-Komponenten hier eintragen, NICHT pro Komponente kopieren. */
[data-card]:has(:focus-visible),
[data-quicklink-card]:has(:focus-visible),
[data-ql-cell]:focus-visible,
[data-quickbar] [data-quicklink]:focus-visible,
a[data-abteilung]:focus-visible,
[data-faq-q] > button:focus-visible,
[data-loc-more]:focus-visible{
outline:2px solid var(--color-blue-dark);
outline-offset:-2px;
position:relative;
z-index:2;
}
/* Der Stretched-Link selbst zeichnet keinen eigenen Ring — die ZELLE trägt den Fokus-State. */
[data-card] [data-stretch]:focus-visible{ outline:none; }
/* --- Cards als Stretched-Link (global — EINE Quelle für alle Seiten) ------- */
[data-card]{ position:relative; }
[data-card] [data-stretch]::after{ content:""; position:absolute; inset:0; z-index:1; }
[data-card] [data-ontop]{ position:relative; z-index:2; }
[data-card] [data-stretch]{ color:inherit; text-decoration:none; }
/* --- Portale & Services: Filter-Chips + Ergebnisraster (Rasterzellen-Muster) --- */
[data-ps-chip]{ display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; background:var(--color-white); border:1px solid var(--color-border); border-radius:0; color:var(--color-blue-dark); font-family:inherit; font-size:var(--fs-pxs); font-weight:700; cursor:pointer; transition:background 350ms var(--ease-out,ease); }
@media (hover:hover){ [data-ps-chip]:hover{ background:var(--color-blue-light-10); } }
[data-ps-chip]:focus-visible{ outline:2px solid var(--color-blue-dark); outline-offset:2px; }
[data-ps-chip][aria-pressed="true"]{ background:var(--color-blue-light-60); border-color:var(--color-blue-light-60); color:var(--color-black); }
[data-amb-searchbtn]{ position:absolute; right:20px; top:50%; transform:translateY(-50%); width:26px; height:26px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--color-blue-dark); }
[data-amb-searchbtn] .ms{ font-size:26px; }
[data-amb-searchbtn]:focus-visible{ outline:2px solid #00597A; outline-offset:2px; }
[data-ps-topics]{ max-width:1560px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); border-left:1px solid var(--color-border-light); border-right:1px solid var(--color-border-light); }
[data-ps-topic]{ position:relative; background:var(--color-white); padding:16px; display:flex; align-items:center; gap:16px; min-width:0; border-right:1px solid var(--color-border-light); }
[data-ps-topic]::after{ content:""; position:absolute; bottom:0; left:-100vw; right:-100vw; height:1px; background:var(--color-border-light); z-index:5; }
[data-ps-topic]:nth-child(2n){ border-right:none; }
[data-ps-topic] h3{ font-size:var(--fs-cardtitle); font-weight:700; line-height:var(--lh-tight); min-width:0; hyphens:none; -webkit-hyphens:none; margin:0; }
[data-ps-topic] > .ms[data-arrow]{ margin-left:auto; font-size:20px; flex:0 0 auto; }
@media (max-width:767px){ [data-ps-topics]{ margin-left:var(--sp-lg); margin-right:var(--sp-lg); } }
@media (min-width:768px){ [data-ps-topics]{ width:calc(100% - 80px); max-width:none; } }
@media (min-width:1200px){
[data-ps-topics]{ grid-template-columns:repeat(4,1fr); width:min(1560px, 100% - 160px); }
[data-ps-topic]:nth-child(2n){ border-right:1px solid var(--color-border-light); }
[data-ps-topic]:nth-child(4n){ border-right:none; }
}
[data-ps-wiz]{ display:grid; grid-template-columns:1fr; gap:var(--sp-xs); }
@media (min-width:768px){ [data-ps-wiz]{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ [data-ps-wiz]{ grid-template-columns:repeat(3,1fr); gap:var(--sp-sm); } }
[data-ps-wiztile]{ display:flex; align-items:center; gap:16px; min-width:0; min-height:80px; padding:16px; background:var(--color-white); border:1px solid var(--color-border-light); border-radius:0; cursor:pointer; font-family:inherit; text-align:left; transition:background 350ms var(--ease-out,ease), border-color 350ms var(--ease-out,ease); }
@media (hover:hover){ [data-ps-wiztile]:hover{ border-color:var(--color-blue-dark); } [data-ps-wiztile]:hover .ms[data-arrow]{ transform:translateX(4px); } }
[data-ps-wiztile]:focus-visible{ outline:2px solid var(--color-blue-dark); outline-offset:2px; }
[data-ps-wiztile][aria-pressed="true"]{ border-color:var(--color-blue-dark); background:var(--color-white); box-shadow:inset 0 0 0 1px var(--color-blue-dark); }
[data-ps-wiztile] [data-ps-wiztext]{ display:flex; flex-direction:column; gap:2px; min-width:0; }
[data-ps-wiztile] [data-ps-wiztitle]{ font-size:var(--fs-cardtitle); font-weight:700; line-height:var(--lh-tight); color:var(--color-black); hyphens:none; -webkit-hyphens:none; }
[data-ps-wiztile] [data-ps-wizdesc]{ font-size:var(--fs-pxs); line-height:1.4; color:var(--color-blue-dark); }
[data-ps-wiztile] > .ms[data-arrow]{ margin-left:auto; flex:0 0 auto; font-size:20px; transition:transform 250ms var(--ease-out,ease); }
@media (prefers-reduced-motion:reduce){ [data-ps-wiztile], [data-ps-wiztile] > .ms[data-arrow]{ transition:none; transform:none; } }
[data-ps-linewrap]{ width:100%; border-top:1px solid var(--color-border-light); overflow:hidden; }
[data-ps-grid]{ max-width:1560px; margin:0 auto; display:grid; grid-template-columns:1fr; border-left:1px solid var(--color-border-light); border-right:1px solid var(--color-border-light); }
[data-ps-grid]:empty{ border:none; }
[data-ps-cell]{ position:relative; background:var(--color-white); padding:var(--sp-md); display:flex; flex-direction:column; min-width:0; transition:background 350ms var(--ease-out,ease); }
/* Flächenwechsel wie Quicklink-Card (Startseite): Hover/Fokus = hellblaue Fläche, Titel OHNE Underline */
[data-ps-cell]:hover, [data-ps-cell]:has(:focus-visible){ background:var(--color-blue-light-10); }
@media (prefers-reduced-motion:reduce){ [data-ps-cell]{ transition:none; } }
[data-ps-cell]::after{ content:""; position:absolute; bottom:0; left:-100vw; right:-100vw; height:1px; background:var(--color-border-light); z-index:5; }
@media (max-width:767px){ [data-ps-grid]{ margin-left:var(--sp-lg); margin-right:var(--sp-lg); } [data-ps-cell]{ padding:var(--sp-sm); } }
@media (min-width:768px){
[data-ps-grid]{ grid-template-columns:repeat(2,1fr); width:calc(100% - 80px); max-width:none; }
[data-ps-cell]{ border-right:1px solid var(--color-border-light); }
[data-ps-cell]:nth-child(2n){ border-right:none; }
}
@media (min-width:1200px){
[data-ps-grid]{ grid-template-columns:repeat(3,1fr); width:min(1560px, 100% - 160px); }
[data-ps-cell]{ border-right:1px solid var(--color-border-light); }
[data-ps-cell]:nth-child(2n){ border-right:1px solid var(--color-border-light); }
[data-ps-cell]:nth-child(3n){ border-right:none; }
}
/* Pressekontakt: kompakte Kontakt-Zeilen (24px statt 44px Tap-Höhe — Desktop-Leseblock) */
[data-presse-lines] [data-contactline]{ min-height:24px; }
[data-presse-lines] [data-contactline] .ms:not([data-arrow]){ height:24px; }
/* --- Aktuelles: Aufmacher-Split, News-Grid (3→1, KEIN 2er-Tablet — Kundenwunsch), Pagination --- */
@media (max-width:1023px){
[data-nw-split]{ grid-template-columns:1fr !important; }
[data-nw-split] [data-nw-featbody]{ border-left:0 !important; border-top:1px solid var(--color-border-light); padding:var(--sp-sm) !important; }
}
[data-nw-linewrap]{ width:100%; border-top:1px solid var(--color-border-light); border-bottom:1px solid var(--color-border-light); overflow:hidden; }
[data-nw-grid]{ margin:0 auto; display:grid; grid-template-columns:1fr; border-left:1px solid var(--color-border-light); border-right:1px solid var(--color-border-light); }
[data-nw-grid]:empty{ border:none; }
[data-nw-cell]{ position:relative; background:var(--color-white); padding:var(--sp-md); display:flex; flex-direction:column; min-width:0; }
[data-nw-cell]::after{ content:""; position:absolute; bottom:0; left:-100vw; right:-100vw; height:1px; background:var(--color-border-light); z-index:5; }
@media (max-width:1023px){ [data-nw-grid]{ margin-left:var(--sp-lg); margin-right:var(--sp-lg); } [data-nw-cell]{ padding:var(--sp-sm); } }
@media (min-width:1024px){
[data-nw-grid]{ grid-template-columns:repeat(3,1fr); width:min(1560px, 100% - 160px); }
[data-nw-cell]{ border-right:1px solid var(--color-border-light); }
[data-nw-cell]:nth-child(3n){ border-right:none; }
}
/* Pagination — EINE globale Komponente (Referenz Ambulanzseite): Chip-Stil, Radius 0, aktive Seite Rahmen #00597A + Bold */
[data-pagebtn]{ min-width:44px; height:44px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; background:var(--color-white); border:1px solid var(--color-border); border-radius:0; font-family:inherit; font-size:var(--fs-pxs); font-variant-numeric:tabular-nums; color:var(--color-black); cursor:pointer; }
@media (hover:hover){ [data-pagebtn]:hover:not(:disabled){ background:var(--color-blue-light-10); } }
[data-pagebtn]:focus-visible{ outline:2px solid #00597A; outline-offset:2px; }
[data-pagebtn].is-current{ border-color:#00597A; font-weight:700; }
[data-pagebtn]:disabled{ opacity:0.4; cursor:default; }
[data-pagegap]{ min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--color-blue-dark); }
/* Filter-Chip (Haus/Kategorie) — EINE globale Komponente (Referenz Ambulanzseite) */
[data-hauschip]{ display:inline-flex; align-items:center; gap:var(--sp-xxs); min-height:44px; padding:0 16px; background:var(--color-white); border:1px solid var(--color-border); color:var(--color-blue-dark); font-family:inherit; font-size:var(--fs-btnsm); font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:background 350ms var(--ease-out), border-color 350ms var(--ease-out); }
@media (hover:hover){ [data-hauschip]:hover{ background:var(--color-blue-light-10); } }
[data-hauschip]:focus-visible{ background:var(--color-blue-light-10); outline:2px solid #00597A; outline-offset:2px; }
[data-hauschip][aria-pressed="true"]{ background:var(--color-blue-light-10); border-color:var(--color-blue-med); }
@media (prefers-reduced-motion:reduce){ [data-hauschip]{ transition:none; } }
/* „Aktive Filter"-Token (entfernbar, ✕) — EINE globale Komponente (Referenz Ambulanzseite) */
[data-filterchip]{ display:inline-flex; align-items:center; gap:var(--sp-xxs); min-height:32px; padding:3px 12px; background:var(--color-blue-light-10); border:none; color:var(--color-blue-dark); font-family:inherit; font-size:var(--fs-pxxs); font-weight:700; cursor:pointer; border-radius:0; transition:background 350ms var(--ease-out); }
@media (hover:hover){ [data-filterchip]:hover{ background:color-mix(in srgb, var(--color-blue-light-10), var(--color-blue-med) 15%); } }
[data-filterchip]:focus-visible{ background:color-mix(in srgb, var(--color-blue-light-10), var(--color-blue-med) 15%); outline:2px solid #00597A; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ [data-filterchip]{ transition:none; } }
/* Lightbox (News-Galerie) */
[data-nw-lightbox]{ position:fixed; inset:0; z-index:200; background:rgba(0,56,77,0.92); display:flex; align-items:center; justify-content:center; padding:var(--sp-lg); }
[data-nw-lightbox] [data-lb-close]{ position:absolute; top:24px; right:24px; width:44px; height:44px; padding:0; background:transparent; border:1px solid rgba(255,255,255,0.4); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
[data-nw-lightbox] [data-lb-close] .ms{ color:var(--color-white); font-size:22px; }
[data-nw-lightbox] button:focus-visible{ outline:2px solid var(--color-white); outline-offset:2px; }
/* --- Testimonial-Band: Rasterzeile im Linienraster (Zellgrenze, Zellen-Padding, Mobile-Zeilenlinie) --- */
@media (min-width:768px){ [data-testi-photo]{ border-left:1px solid var(--color-border-light); } }
@media (max-width:767px){
[data-testi-quote]{ position:relative; padding:var(--sp-sm) !important; }
[data-testi-quote]::before{ content:""; position:absolute; top:0; left:-100vw; right:-100vw; height:1px; background:var(--color-border-light); }
}
/* Sticky „1450“ + Chat-Button ausblenden, solange das Burger-Menü offen ist (Notrufnummer ist dort bereits abgebildet) */
body:has([data-menu-overlay][data-open="true"]) [data-sticky-live],
body:has([data-menu-overlay][data-closing="true"]) [data-sticky-live],
body:has([data-menu-overlay][data-open="true"]) [data-chat-fab],
body:has([data-menu-overlay][data-closing="true"]) [data-chat-fab],
body:has([data-menu-overlay][data-open="true"]) [data-chat-fab-panel],
body:has([data-menu-overlay][data-closing="true"]) [data-chat-fab-panel]{ display:none !important; }
/* === WEITERFÜHRENDE LINKS (Besuchszeiten, pro Standort) =======================================
Gestapelte Zeilen-Liste unter der Zeitenliste (ab 3 Einträgen Pflichtform laut Navigations-
Grundsätzen). Icon-Spalte 26px, Text fluchtet; Zeilen kompakt mit unsichtbarer 44px-Tap-
Erweiterung. Farben: Icon + Text blue-dark; Hover = wortbreite Underline + Icon-Shift 4px. */
[data-bz-links]{ margin-top:var(--sp-md); display:flex; flex-direction:column; gap:var(--sp-xxs); align-items:flex-start; }
[data-bz-link]{ position:relative; display:grid; grid-template-columns:20px 1fr; align-items:center; gap:8px; min-height:24px; color:var(--color-blue-dark); font-size:16px; line-height:1.4; text-decoration:none; }
[data-bz-link]::before{ content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:32px; }
[data-bz-link] .ms{ font-size:18px; }
[data-bz-link] [data-underline]{ background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-size:0 1px; background-position:0 100%; transition:background-size 250ms var(--ease-out); }
@media (hover:hover){ [data-bz-link]:hover [data-underline]{ background-size:100% 1px; } }
[data-bz-link]:focus-visible{ outline:2px solid var(--color-blue-dark); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ [data-bz-link] [data-underline]{ transition:none; } }
[data-bz-filtercell]{ min-width:0; }
/* === 5 KONSOLIDIERT — vormals identische Inline-Kopien der Seiten (Dedup 2026-09-01) === */
/* === LOCATION-CARDS — Blockstil (Inhalte + Verhalten: standort-daten.js) === */
/* Kontaktzeilen in der Card: Card-Hover unterstreicht Adresse/Telefon NICHT — nur der Hover
auf der Zeile selbst. Im Block gehalten, damit beide Seiten identisch reagieren, unabhängig
vom Seiten-Atom [data-contactline] (Startseite inline-flex, Standortseiten inline-grid). */
/* Adresse/Telefon sind eigenständige Links: ihr Hover darf den „Zum Standort"-Link
und den Bild-Scale der Card NICHT auslösen (analog zur Regel für die Quicklink-Chips). */
/* Anker als horizontal scrollbare Chips — sticky, solange die Sektion sichtbar ist */
@media (max-width:1199px){
}
@media (min-width:1200px){
}
@media (max-width:767px){
}
/* === HERO-VARIANTE „TEXT" (hero--text) — GLOBALE KOMPONENTE für Übersichts- und Textseiten ===
(Standorte, Anfahrt, Lagepläne, Besuchszeiten, Barrierefreiheits-Erklärung …)
Markup:
Weißer Grund, keine Bild-/Farbfläche, keine Eyebrow, kein Suchmodul.
Maße, Typo und Abstände kommen ausschließlich von hier — keine Inline-Styles in der Instanz. */
/* Sprungziel des Skip-Links: kein Fokusrahmen, aber Abstand zum Sticky-Header */
#main{ scroll-margin-top:120px; }
#main:focus{ outline:none; }
/* Direkt nach dem Breadcrumb: dessen Innenabstand wird abgezogen, damit der sichtbare
Abstand Breadcrumb → H1 exakt 2 × --block-space bleibt. */
@media (max-width:767px){
}
/* Kievit Pro — projekteigene Schnitte (OTF, lokal). Webfont/Lizenz folgt später. */
@font-face{ font-family:"Kievit Pro"; src:url("../assets/fonts/KievitPro-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Kievit Pro"; src:url("../assets/fonts/KievitPro-Light.otf") format("opentype"); font-weight:350; font-style:normal; font-display:swap; }
@font-face{ font-family:"Kievit Pro"; src:url("../assets/fonts/KievitPro-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Kievit Pro"; src:url("../assets/fonts/KievitPro-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Kievit Pro"; src:url("../assets/fonts/KievitPro-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
/* === TOPIC CARD — Blockstil (Bild links, Titel + Teaser oben am Bild ausgerichtet, Pfeil unten rechts) === */
/* Bildformat 4:5 auf allen Breakpoints — Höhe folgt der Breite über aspect-ratio, nie fix */
/* Umbruch Topic Cards: Titel ausbalanciert, Silbentrennung bei Titel UND Teaser aktiv
(deutsche Komposita in schmalen Spalten), Teaser text-wrap:pretty gegen Schusterjungen. */
[data-highlights]{ display:grid; grid-template-columns:repeat(3,1fr); }
[data-services]{ display:grid; grid-template-columns:repeat(4,1fr); }
[data-split]{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-section); }
/* REGEL: Bei Split-Sektionen steht das MEDIUM im Markup immer VOR dem Text — damit es
beim einspaltigen Umbruch oben landet (Lese-/Fokusreihenfolge = visuelle Reihenfolge,
WCAG 1.3.2/2.4.3). Liegt das Medium auf Desktop rechts, wird das NUR über die
Grid-Spalte gedreht ([data-split="media-right"]), nie über order oder DOM-Tausch. */
@media (min-width:768px){
[data-split="media-right"] > :first-child{ grid-column:2; grid-row:1; }
[data-split="media-right"] > :nth-child(2){ grid-column:1; grid-row:1; }
[data-kontakt-grid] > :first-child{ grid-column:2; grid-row:1; }
[data-kontakt-grid] > :nth-child(2){ grid-column:1; grid-row:1; }
}
@media (max-width:767px){
[data-kontakt-grid] > div{ border-left:0 !important; }
}
/* Intro + Kennzahlen: Facts breiter, engerer Abstand zum Text */
[data-split="intro"]{ grid-template-columns:1fr 1fr; gap:var(--sp-section); }
[data-news3]{ display:grid; grid-template-columns:repeat(3,1fr); }
[data-contactbar]{ display:grid; grid-template-columns:repeat(3,1fr); }
[data-contactbar] > div{ position:relative; padding:var(--sp-md) !important; }
[data-contactbar] > div + div{ border-left:1px solid rgba(255,255,255,0.4); }
/* Desktop: Kontakt-Zeilen kompakter (Mobile behält 44px Tap-Höhe) */
[data-contactbar] [data-contactline]{ min-height:32px; }
/* Kontakt-Leiste — Variante GRID (Default): weiße Zellen im Linienraster, bündig unter dem Bild */
[data-barstyle="grid"] [data-glassbar]{ position:relative; background:var(--color-white); border-left:1px solid var(--color-border-light); border-right:1px solid var(--color-border-light); }
[data-barstyle="grid"] [data-glassbar]::before,[data-barstyle="grid"] [data-glassbar]::after{ content:""; position:absolute; left:-100vw; right:-100vw; height:1px; background:var(--color-border-light); pointer-events:none; }
[data-barstyle="grid"] [data-glassbar]::before{ top:0; }
[data-barstyle="grid"] [data-glassbar]::after{ bottom:0; }
[data-barstyle="grid"] [data-contactbar] > div{ padding:var(--sp-sm) !important; }
[data-barstyle="grid"] [data-contactbar] > div + div{ border-left:1px solid var(--color-border-light); }
/* Kontakt-KARTE — Variante PANEL: weiße Overlay-Karte rechts (4 col / 509px), startet 80px unter der oberen Bildkante, 80px Abstand rechts — sticky, bis die Sektion „Das LKH Hall" durchgescrollt ist. */
[data-barstyle="grid"] [data-cardcol]{ overflow:hidden; }
[data-barstyle="panel"] [data-glassbar]{ background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--color-border-light); padding:var(--sp-md); }
[data-barstyle="panel"] [data-contactbar]{ grid-template-columns:1fr; }
/* Zellen-Anatomie: Gruppen durch symmetrische Divider getrennt (1px border-light, 24px Abstand oben/unten) */
[data-barstyle="panel"] [data-contactbar] > div{ padding:24px 0 !important; }
[data-barstyle="panel"] [data-contactbar] > div:first-child{ padding-top:0 !important; }
[data-barstyle="panel"] [data-contactbar] > div:last-child{ padding-bottom:0 !important; }
[data-barstyle="panel"] [data-contactbar] > div + div{ border-top:1px solid var(--color-border-light); border-left:none; }
/* ≥768px: Sticky-Overlay-Spalte (Sticky-Bereich = Hero + Intro-Sektion); Copy + Intro/Kennzahlen laufen links in der freien Fläche. Mobil: Karte als voller Block unter dem Bild. */
@media (min-width:768px){
[data-barstyle="panel"] [data-cardcol]{ position:absolute; top:80px; bottom:0; left:0; right:0; z-index:2; pointer-events:none; }
[data-barstyle="panel"] [data-cardcol] > div{ height:100%; }
[data-barstyle="panel"] [data-glassbar]{ position:sticky; top:80px; width:min(509px, 50%); min-height:480px; margin-left:auto; margin-right:var(--sp-section); pointer-events:auto; }
[data-barstyle="panel"] [data-hero-copy]{ padding-right:calc(min(509px, 50%) + var(--sp-section) + var(--sp-xl)) !important; }
[data-barstyle="panel"] [data-split="intro"]{ grid-template-columns:1fr !important; gap:var(--sp-xl) !important; padding-right:calc(min(509px, 50%) + var(--sp-section) + var(--sp-xl)); }
}
@media (max-width:1199px){
[data-hero-grid]{ grid-template-columns:1fr; gap:var(--sp-xl); }
[data-metrics]{ grid-template-columns:repeat(2, minmax(0, 340px)); }
[data-highlights]{ grid-template-columns:1fr; }
[data-services]{ grid-template-columns:repeat(2,1fr); }
[data-split]{ gap:var(--sp-xl); }
[data-news3]{ grid-template-columns:1fr; }
}
@media (max-width:767px){
[data-metrics]{ grid-template-columns:1fr 1fr; }
/* Abteilungs-Liste mobil: kompakte Zeilen (16px Padding), Name 18px/1.3, Pfeil an der ERSTEN Textzeile */
/* „Gut zu wissen“-Raster mobil: einspaltig, 56×56-Bild links, Titel 18px daneben, keine Silbentrennung */
[data-services]{ grid-template-columns:1fr; }
[data-split]{ grid-template-columns:1fr; gap:var(--sp-lg); }
[data-kontakt-grid]{ grid-template-columns:1fr !important; }
[data-kontakt-grid] > div + div{ border-left:0 !important; border-top:1px solid var(--color-border-light); }
/* Mobile: Bar/Karte wandert aus dem Bild — gestapelte Zellen */
[data-contactbar]{ grid-template-columns:1fr; }
/* Kompakter Innen-Rhythmus (mobile): Gruppe 12px padding-block · Label -> 1. Zeile 8px
· zwischen interaktiven Zeilen 12px (Rechenweg s. u.). */
[data-contactbar] > div,[data-barstyle="grid"] [data-contactbar] > div{ padding:12px var(--sp-sm) !important; }
/* Nicht-interaktive Zeile (Besuchszeiten-Text) braucht keine 44px-Tap-Höhe */
[data-contactbar] p[data-contactline]{ min-height:0 !important; }
[data-contactbar] > div > div:first-child{ margin-bottom:8px !important; }
[data-contactbar] [data-contactline] + [data-contactline]{ margin-top:12px !important; }
/* Gruppentrennung: 1px full-bleed, ohne zusätzlichen Leerraum */
[data-barstyle="grid"] [data-contactbar] > div + div{ border-left:none; border-top:none; }
[data-contactbar] > div + div::before{ content:""; position:absolute; top:0; left:-100vw; right:-100vw; height:1px; background:var(--color-border-light); }
/* Visuelle Zeilenhöhe 32px, Trefferfläche unsichtbar auf 44px erweitert.
Rechenweg: 32px Zeile + 2 × 6px Erweiterung = 44px Tap-Ziel; damit sich zwei
benachbarte Trefferflächen nicht überschneiden, muss der Zeilen-Gap ≥ 12px sein
(6 + 6) — gewählt: Gap 12px, Erweiterung ±6px, Flächen stoßen exakt aneinander. */
[data-contactbar] [data-contactline]{ min-height:32px !important; position:relative; }
[data-contactbar] a[data-contactline]::before{ content:""; position:absolute; inset:-6px 0; }
[data-contactbar] [data-contactline] > .ms{ font-size:18px !important; }
/* Standort-Hero mobil: Content-Skala 24px ringsum, Text im unteren Bilddrittel,
Höhe aus Inhalt (min 320px, max 420px) statt fixer 440px-Fläche */
[data-hero-copy]{ min-height:320px !important; max-height:420px; padding:var(--sp-sm) 0 !important; justify-content:flex-end !important; }
[data-hero-copy] > h1 + p{ margin-top:var(--sp-xs) !important; }
/* Bild folgt der Inhaltshöhe des Heros statt fixer 440px-Bande */
section [data-hero-img]{ height:100% !important; }
}
/* Hero-Bild auf Mobile bündig über die volle Breite */
@media (max-width:1199px){ [data-hero-grid] > aside{ margin-top:0; } }
@media (max-width:767px){ section [data-hero-img]{ left:0 !important; right:0 !important; height:100% !important; } }
/* === LOCATION-CARDS — VARIANTE B (kompakt, Foto oben, 3 Spalten, keine Sticky-Sidebar) ===
Gleiche Inhaltsquelle (globale-bloecke.js) und dieselben Atome; nur Raster + Kartenaufbau
unterscheiden sich. „+4 weitere" ist hier in allen Breakpoints aktiv (wie mobil in Variante A). */
[data-locb-grid]{ display:grid; grid-template-columns:1fr; gap:var(--sp-xs); min-width:0; }
/* Headline-Block der Card-Sektion (außerhalb des Rasters) */
[data-locb] [data-locb-head] h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.1; }
[data-locb-lead]{ font-size:var(--fs-pxs); line-height:1.6; color:var(--color-blue-dark); max-width:var(--text-measure); }
@media (max-width:767px){
[data-locb] [data-locb-head] h1{ font-size:36px; }
[data-locb-lead]{ font-size:var(--fs-pxs); }
}
[data-locb] [data-loc-contact] [data-contactline]{ display:inline-flex; flex-wrap:wrap; align-items:center; align-content:center; line-height:1.6; color:var(--color-blue-dark); }
[data-locb] [data-loc-contact] [data-contactline] .ms:not([data-arrow]){ height:1.6em; }
[data-locb] [data-loc-contact] [data-contactline] [data-underline]::after{ transform:scaleX(0); }
[data-locb] [data-card]:hover [data-contactline] [data-underline],[data-locb] [data-card]:focus-within [data-contactline] [data-underline]{ background-size:0 1px; }
[data-locb] [data-card] [data-contactline]:hover [data-underline],[data-locb] [data-card] [data-contactline]:focus-visible [data-underline]{ background-size:100% 1px; }
[data-locb] [data-card]:has([data-contactline]:hover) [data-cardimg]{ transform:none; }
[data-locb] [data-card]:has([data-contactline]:hover) [data-loc-cta] [data-underline]{ background-size:0 1px; }
[data-locb] [data-card]:has([data-contactline]:hover) [data-loc-cta] [data-underline]::after{ transform:scaleX(0); }
[data-locb] [data-loc-cta]{ margin-top:auto !important; padding-top:var(--sp-md); }
[data-locb] [data-locb-sr]{ position:absolute !important; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Erster Block nach der Navigation: oberes Innen-Padding 80px Desktop / 40px Tablet / 32px Mobile */
@media (max-width:1199px){ [data-locb]{ padding-block:var(--sp-lg) calc(var(--block-space) * 2) !important; } }
@media (max-width:767px){ [data-locb]{ padding-block:var(--sp-md) calc(var(--block-space) * 2) !important; } }
/* „+4 weitere" nur auf Mobile — ab Tablet stehen alle Chips offen (globales Verhalten) */
@media (max-width:767px){
[data-locb] [data-loc-more]{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; background:var(--color-white); border:1px solid var(--color-border); color:#00384D; font-size:var(--fs-pxxs); font-weight:700; font-family:inherit; cursor:pointer; transition:border-color var(--dur-1) var(--ease-in-out,ease); }
[data-locb] [data-loc-more]:hover,[data-locb] [data-loc-more]:focus-visible{ border-color:var(--color-blue-dark); }
[data-locb] [data-loc-quick]:not([data-open]) [data-loc-morewrap]{ display:none; }
[data-locb] [data-loc-quick][data-open] [data-loc-more]{ display:none; }
[data-locb] [data-loc-quick][data-open] [data-loc-morewrap] [data-quickbtn]{ animation:locChipIn var(--dur-2) var(--ease-out) both; }
[data-locb] [data-locb-body]{ padding:var(--sp-sm) !important; }
[data-locb] [data-locb-img]{ height:200px !important; }
[data-locb] [data-loc-cta]{ padding-top:var(--sp-sm); }
}
@media (min-width:768px){
[data-locb-grid]{ grid-template-columns:repeat(2,1fr); }
/* Kontaktzeilen ab Tablet auf 16px Zeilenhöhe (kompakte Cards) */
[data-locb] [data-loc-contact] [data-contactline]{ min-height:24px; line-height:1; }
[data-locb] [data-loc-contact] [data-contactline] .ms:not([data-arrow]){ height:24px; font-size:16px; }
}
@media (min-width:1200px){
[data-locb-grid]{ grid-template-columns:repeat(3,1fr); }
}
/* === BLOCKABSTÄNDE — einzige Quelle --block-space (Desktop 64 / Tablet 48 / Mobile 32px).
Jeder Block: margin-block:var(--block-space) → sichtbarer Abstand 2× (128/96/64px).
Blöcke mit Fläche zusätzlich padding-block:calc(var(--block-space) * 2).
main ist Flex-Spalte, damit die Margins NICHT kollabieren.
Ausnahmen: Hero ohne margin-top · Footer ohne margin-bottom ·
farbige Flächen, die aneinandergrenzen (CTA-Band → Footer), bleiben bündig. === */
main{ display:flex; flex-direction:column; }
/* FAQ-Akkordeon: globale Komponente — Markup hier, CSS in globale-komponenten.css */
/* === FAKTEN-BAND — hellblaue Fläche #EEF8FD über die volle Viewport-Breite.
KEINE Rasterlinien: keine horizontalen full-bleed-Linien, keine Spalten- oder
Zellenrahmen — die Farbkante ist die Begrenzung. Die Kennzahlen liegen frei auf der
Fläche (2×2, 32px Abstand), getrennt nur durch Weißraum. Die 2px-Akzentlinien
(2px #00597A, Inhalt 22px eingerückt) sind Kennzahlen-Motiv, kein Raster — Blue-Light
erreicht auf #EEF8FD nur 2:1 und wäre zu schwach. Nicht klickbar. === */
[data-facts]{ display:grid; grid-template-columns:5fr 6fr; gap:var(--sp-section); align-items:start; }
[data-facts-grid]{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-md); }
[data-fact-body]{ padding-left:22px; border-left:2px solid var(--color-blue-dark); }
[data-fact-num]{ margin-top:var(--sp-xxs); font-size:var(--fs-h2); font-weight:700; line-height:1; color:var(--color-blue-dark); font-variant-numeric:tabular-nums; }
@media (max-width:1199px){
[data-facts]{ grid-template-columns:1fr; gap:var(--sp-xl); }
}
@media (max-width:767px){
[data-facts-grid]{ gap:var(--sp-sm); }
[data-fact-num]{ font-size:36px; }
}
/* Spaltenraster gilt für ALLE Bänder gleich — Bänder ohne Hinweis-Spalte lassen Spalte 3
leer, statt Spalte 2 zu dehnen. Sonst bricht dieselbe Zeit-Angabe von Band zu Band
unterschiedlich um. */
/* === INFORMATIONS-RASTER (Referenzfall: Sektion „Barrierefreiheit") ===
Getönte Zellen #EEF8FD, freistehendes 24px-Icon vor dem Titel, KEINE Interaktion:
kein Hover, kein Pointer, kein Stretched-Link, keine Icon-Kachel. Keine Rasterlinien —
die Zellen stehen als getönte Flächen mit 8px Weißraum (--sp-xxs) horizontal und
vertikal frei; auch keine Abschlusslinien oben/unten.
ABGRENZUNG — Link-Card (z. B. Quicklink-Cards): weiße Fläche, Icon-KACHEL 48px,
Text-Link + Stretched-Link, Card-Hover. Getönt + freistehendes Icon = Information,
weiß + Kachel + Link = Ziel. Beides nie mischen. */
[data-infogrid]{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-xxs); background:var(--color-white); }
[data-infocell]{ background:var(--color-blue-light-10); padding:var(--sp-md); min-width:0; }
[data-infocell-title]{ display:flex; align-items:center; gap:12px; font-size:var(--fs-ps); font-weight:700; line-height:var(--lh-tight); color:var(--color-black); }
[data-infocell-title] > .ms{ flex:0 0 auto; font-size:24px; color:var(--color-blue-dark); }
/* --color-muted auf #EEF8FD = 5,6:1 — über AA-Schwelle */
[data-infocell-text]{ margin-top:var(--sp-xs); font-size:var(--fs-pxs); line-height:var(--lh-body); color:var(--color-muted); text-wrap:pretty; }
@media (max-width:1199px){ [data-infogrid]{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:767px){
[data-infogrid]{ grid-template-columns:minmax(0,1fr); }
[data-infocell]{ padding:var(--sp-sm); }
}
/* === 6 KANONISCHE BASIS — regelweise Dedup über alle Seiten (2026-09-01).
Diese Regeln waren in >=2 Seiten byte-identisch inline; Seiten-Reste bleiben dort. === */
.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; }
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; }
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; }
[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; }
[data-breadcrumb] > ol{ max-width:1560px; margin:0 auto; padding:var(--sp-sm) var(--sp-lg) calc(var(--sp-sm) / 2); display:flex; flex-wrap:wrap; gap:2px var(--sp-xxs); line-height:1.4; align-items:center; list-style:none; font-size:var(--fs-pxxs); line-height:1.4; color:var(--color-blue-dark); }
@media (min-width:1200px){
[data-breadcrumb] > ol{ padding-block:var(--sp-sm) calc(var(--sp-sm) / 2) !important; }
}
[data-breadcrumb] li{ display:inline-flex; align-items:center; }
[data-breadcrumb] a{ color:var(--color-blue-dark); }
[data-breadcrumb] .ms{ font-size:16px; }
[data-breadcrumb] [aria-current="page"]{ font-weight:700; color:var(--color-black); }
[data-breadcrumb="tint"]{ background:var(--color-blue-light-10); }
[data-breadcrumb] li[aria-hidden="true"] .ms{ color:var(--color-muted); }
[data-breadcrumb="inverse"] li[aria-hidden="true"] .ms{ color:rgba(255,255,255,0.75); }
[data-breadcrumb="inverse"] [aria-current="page"]{ color:rgba(255,255,255,0.85); }
[data-breadcrumb] a{ position:relative; display:inline-flex; align-items:center; min-height:24px; }
[data-breadcrumb] a::before{ content:""; position:absolute; left:0; right:0; top:-4px; bottom:-4px; }
[data-breadcrumb] a:focus-visible{ outline:2px solid var(--color-blue-dark); outline-offset:2px; }
[data-breadcrumb="inverse"] a:focus-visible{ outline-color:var(--color-white); }
@media (min-width:768px){
[data-breadcrumb] > ol{ flex-wrap:nowrap; }
[data-breadcrumb] li:last-child{ min-width:0; }
[data-breadcrumb] [aria-current="page"]{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:767px){
[data-breadcrumb] li{ display:none; }
[data-breadcrumb] li:nth-last-child(3){ display:inline-flex; }
[data-breadcrumb] li:nth-last-child(3)::before{ content:"‹"; margin-right:4px; }
}
: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; }
.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); }
[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); }
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); }
[data-navlink] [data-underline]::after,[data-footlink] [data-underline]::after{ bottom:0; }
[data-inlinelink]:hover,[data-inlinelink]:focus-visible{ background-size:0% 1px; }
[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); }
[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; }
[style*="font-size: var(--fs-eyebrow)"]{ text-transform:uppercase; }
[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); }
[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); }
}
[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); }
[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; }
[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-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; }
@media (max-width:767px){
[data-news-style="grid"] [data-news-grid]{ margin-left:var(--sp-lg) !important; margin-right:var(--sp-lg) !important; }
[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; }
}
[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; }
@media (max-width:767px){
[data-visit-alt-split]{ grid-template-columns:1fr !important; padding:0 var(--sp-lg) !important; }
}
@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; }
}
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; }
[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; }
[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; }
}
[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; }
[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); }
[data-tag-sec]{ transition:border-color var(--dur-1) var(--ease); text-decoration:none; }
[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); }
[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); }
[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; }
[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; }
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); } }
@media (prefers-reduced-motion:reduce){
[data-underline]::after,[data-arrow],[data-arrow-back],[data-cardimg],[data-inlinelink],[data-blink],.ms{ transition:none; animation:none; }
}
@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); }
@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; } }
@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; }
}
[data-contactline]:hover [data-underline]::after,[data-contactline]:focus-visible [data-underline]::after{ transform:scaleX(1); }
[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); }
[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; }
[aria-label="Frage absenden"]:hover,[aria-label="Frage absenden"]:focus-visible{ background:var(--color-blue-light-60) !important; }
[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; }
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; }
}
: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; }
[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)"]{ 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; }
article[data-card] [style*="margin-top: auto"]{ margin-top:var(--sp-md) !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; }
[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; }
[data-hero-content]{ padding:calc(var(--block-space) * 2) var(--sp-lg) 0 !important; min-height:0 !important; }
[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; }
[data-introtext]{ margin-left:0 !important; }
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; }
[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; }
@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;
}
[data-menu-portale]{ display:none !important; }
[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; }
[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-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); }
}
@media (min-width:1200px){
:root{ --block-space:64px; --fs-h1:56px; --fs-h2:44px; --fs-h3:38px; --fs-h5:24px; }
[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"]{ grid-template-columns:760px 1fr !important; gap:var(--sp-lg) var(--sp-section) !important; }
[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)"]{ grid-template-columns:repeat(4,1fr) !important; }
[style*="grid-template-columns: repeat(3, 1fr)"]{ grid-template-columns:repeat(3,1fr) !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; }
[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; }
[style*="grid-template-columns: repeat(5, 1fr)"] > *{ min-width:0 !important; }
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; }
[data-tag-pri]::after,[data-tag-sec]::after{ content:none; }
}
[data-hero-grid]{ display:grid; grid-template-columns:1fr 400px; gap:var(--sp-section); align-items:start; }
[data-metrics]{ display:grid; grid-template-columns:repeat(2, minmax(0, 340px)); align-items:stretch; }
[data-metrics] > div{ display:flex; flex-direction:column; }
[data-metrics] > div > div:last-child{ margin-top:auto !important; padding-top:8px; }
[data-card] [data-cardimg-wrap]{ order:-1; }
@media (min-width:768px){
[data-card] [data-cardimg-wrap]{ order:0; }
}
[data-breadcrumb="inverse"] a, [data-breadcrumb="inverse"] .ms, [data-breadcrumb="inverse"] [aria-current="page"]{ color:var(--color-white); }
[data-fullbleed-lines] [data-card]::after,[data-fullbleed-lines] [data-quicklink-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; }
[data-visit-band] > *{ min-width:0; }
@media (max-width:1199px){
[data-amb-head]{ grid-template-columns:1fr !important; align-items:start !important; }
[data-amb-searchwrap]{ padding-left:0 !important; padding-right:0 !important; }
}
@media (max-width:767px){
[data-amb-searchbtn]{ right:12px; }
#ps-search{ font-size:16px !important; padding-right:56px !important; }
}
/* === 7 KANONISIERT — Runde 3 (2026-09-01): Drift-Entscheidungen ===============================
inlinelink: background-Technik (mehrzeilig sicher) ist kanonisch; index' ::after-Variante entfernt.
contactline: inline-grid-Variante (neuere Fassung) kanonisch — gilt jetzt auch auf index/ambulanzen.
breadcrumb: Superset inkl. position/z-index (nötig über Hero-Bildern, sonst wirkungslos).
Dead Code entfernt: testi-* (nur index nutzt es), hero-img/content-Regeln auf Seiten ohne Markup,
visit-*-Regeln auf Seiten ohne Markup. Seiten-Fixes (visit-Band Desktop-Spalten, alt-split-Gap
hall/abteilung, Hero-Höhen je Variante) bleiben bewusst inline auf ihren Seiten. */
[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-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; }
[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-breadcrumb]{ display:block; position:relative; z-index:2; }
@media (max-width:767px){
[data-news-style="grid"] [data-news-cell]{ padding:var(--sp-sm); }
[data-visit-band]{ grid-template-columns:1fr !important; gap:var(--sp-xxs) !important; padding:var(--sp-xs) !important; }
}
@media (min-width:768px) and (max-width:1199px){
[data-visit-band]{ grid-template-columns:1fr !important; gap:var(--sp-xxs) !important; }
}