@import url("./tokens.css");

/* ============================ fonts (self-hosted) ======================== */
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

/* ============================ reset ===================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--color-ink);background:var(--color-surface);-webkit-font-smoothing:antialiased}
img,picture,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);line-height:var(--lh-head);letter-spacing:var(--tracking-head);font-weight:var(--fw-bold);text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-lg);font-weight:var(--fw-semi)}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:var(--color-brand);text-underline-offset:.18em}
a:hover{color:var(--color-brand-hover)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--color-brand);outline-offset:2px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--color-brand);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0}

/* ============================ layout ==================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--container-pad)}
.container--wide{max-width:var(--container-wide)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:calc(var(--section-y) * .6)}
.section--alt{background:var(--color-surface-alt)}
.section--brand{background:var(--color-brand);color:var(--color-on-brand)}
.section--brand h1,.section--brand h2,.section--brand h3{color:#fff}
.section--brand p{color:#D6DEF5}
.stack>*+*{margin-top:var(--space-md)}
.grid{display:grid;gap:var(--space-lg)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ============================ type helpers ============================== */
.eyebrow{display:block;font-size:var(--fs-eyebrow);font-weight:var(--fw-semi);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-brand);margin-bottom:var(--space-sm)}
.section--brand .eyebrow{color:#93A9E8}
.lead{font-size:var(--fs-lg);color:var(--color-ink-soft);max-width:62ch}
.section--brand .lead{color:#D6DEF5}
.muted{color:var(--color-ink-soft)}
.section-head{max-width:70ch;margin-bottom:var(--space-2xl)}
.section-head p{margin-top:var(--space-md);color:var(--color-ink-soft);font-size:var(--fs-lg)}
.section--brand .section-head p{color:#D6DEF5}

/* ============================ buttons =================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:var(--fw-medium);font-size:var(--fs-base);line-height:1;text-decoration:none;
  padding:.95em 1.6em;border:2px solid transparent;border-radius:var(--radius-btn);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--primary{background:var(--color-brand);color:#fff}
.btn--primary:hover{background:var(--color-brand-hover);color:#fff}
.btn--ghost{background:transparent;color:var(--color-brand);border-color:var(--color-line-strong)}
.btn--ghost:hover{background:var(--color-brand-tint);border-color:var(--color-brand);color:var(--color-brand)}
.btn--on-brand{background:#fff;color:var(--color-brand)}
.btn--on-brand:hover{background:var(--color-brand-tint);color:var(--color-brand)}
.btn--on-brand-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--on-brand-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-sm)}

/* Subtle in-section CTA: an underlined brand link with an arrow that nudges on
   hover. Every content block on the service pages carries one, so a visitor can
   book from wherever they stopped reading instead of scrolling on to the next
   full button. Matters most on phones, where the header CTA is folded into the
   burger menu. The label carries the underline rather than the anchor, so the
   rule stops before the arrow and the arrow is free to move on its own. */
.link-cta{display:inline-flex;align-items:center;gap:.45rem;line-height:1.35;
  font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--color-brand);text-decoration:none;
  transition:color var(--dur) var(--ease)}
.link-cta__label{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.link-cta::after{content:"→";flex:0 0 auto;font-size:1.05em;line-height:1;
  transition:transform var(--dur) var(--ease)}
.link-cta:hover,.link-cta:focus-visible{color:var(--color-brand-hover)}
.link-cta:hover::after,.link-cta:focus-visible::after{transform:translateX(.25rem)}
/* thumb-sized target on phones, where these carry the most weight */
@media (max-width:768px){.link-cta{min-height:44px;font-size:var(--fs-base)}}

/* trailing row that parks the CTA under a grid, a step list or a text column */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md) var(--space-xl);
  margin-top:var(--space-xl)}

/* ============================ header ==================================== */
.topbar{background:var(--color-brand-deep);color:#C8D3EE;font-size:var(--fs-sm)}
.topbar .container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md) var(--space-lg);padding-block:.5rem}
.topbar a{color:#C8D3EE;text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar__loc{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.topbar__sep{width:1px;height:1rem;background:rgba(255,255,255,.22)}
/* Auf Telefonbreite kostet das Band zwei Zeilen Hoehe, ohne etwas beizutragen:
   sobald die Navigation zum Burger wird, stehen beide Nummern im Menue unter
   "Direkt anrufen" (und weiterhin im Footer und auf /kontakt). */
@media (max-width:1024px){
  .topbar{display:none}
}

.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--color-line)}
.site-header .container{display:flex;align-items:center;gap:var(--space-lg);min-height:76px}
.site-header__logo{flex:0 0 auto}
.site-header__logo img{height:50px;width:auto}
.nav{flex:1 1 auto;min-width:0}
.nav__inner{display:contents}
.nav__list{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);list-style:none}
.nav__list a{color:var(--color-ink);text-decoration:none;font-weight:var(--fw-medium);font-size:.95rem;padding-block:.5rem;display:inline-block;background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-repeat:no-repeat;background-position:0 calc(100% - 4px);transition:background-size var(--dur) var(--ease)}
.nav__list a:hover,.nav__list a[aria-current="page"]{color:var(--color-brand)}
.nav__list a:hover{background-size:100% 2px}
.nav__row{display:flex;align-items:center;gap:.45rem}
/* Chevron als Aufklapp-Hinweis: am Desktop rein dekorativ (Hover oeffnet das
   Menue), auf Mobil ist der Button die eigentliche Akkordeon-Steuerung. */
.nav__sub-toggle{display:none;flex:0 0 auto;background:none;border:0;padding:0;color:var(--color-ink-faint);cursor:pointer}
.nav__item--has-sub{position:relative}
.nav__item--has-sub>.nav__row::after{content:"";flex:0 0 auto;width:.42em;height:.42em;margin-top:-.22em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
  color:var(--color-ink-faint);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav__sub-wrap{position:absolute;top:100%;left:0;min-width:290px;padding-top:.4rem;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
@media (min-width:1025px){
  .nav__item--has-sub:hover>.nav__row::after,.nav__item--has-sub:focus-within>.nav__row::after{color:var(--color-brand);transform:rotate(225deg);margin-top:.16em}
  .nav__item--has-sub:hover .nav__sub-wrap,.nav__item--has-sub:focus-within .nav__sub-wrap{opacity:1;visibility:visible;transform:translateY(0)}
}
.nav__sub{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:var(--space-xs);list-style:none}
.nav__sub a{display:block;padding:.6rem .75rem;border-radius:var(--radius-sm);font-size:.9rem;font-weight:var(--fw-regular)}
.nav__sub a:hover{background:var(--color-brand-tint)}
.header__cta{flex:0 0 auto}
.nav__foot{display:none}

/* ---- Burger: drei Balken, die sich beim Oeffnen zum X drehen ------------ */
.nav-toggle{display:none;flex:0 0 auto;margin-left:auto;place-items:center;
  width:46px;height:46px;background:none;border:1px solid var(--color-line-strong);
  border-radius:var(--radius-sm);padding:0;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.nav-toggle:hover{border-color:var(--color-brand);background:var(--color-brand-tint)}
.nav-toggle__box{position:relative;display:block;width:22px;height:16px}
.nav-toggle__bar{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--color-ink);
  transition:transform var(--dur-nav) var(--ease),opacity calc(var(--dur-nav) * .5) var(--ease),background var(--dur) var(--ease)}
.nav-toggle__bar:nth-child(1){top:0}
.nav-toggle__bar:nth-child(2){top:7px}
.nav-toggle__bar:nth-child(3){top:14px}
.nav-toggle[aria-expanded="true"]{border-color:var(--color-brand);background:var(--color-brand-tint)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{background:var(--color-brand)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0;transform:scaleX(.1)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Abdunkler hinter dem Panel. Liegt unter Topbar (49) und Header (50), damit
   Logo und Burger beim geoeffneten Menue voll sichtbar bleiben. */
.nav-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,26,94,.5);
  opacity:0;transition:opacity var(--dur-nav) var(--ease)}
.nav-scrim[data-open="true"]{opacity:1}
.topbar{position:relative;z-index:49}

@media (max-width:1024px){
  .nav-toggle{display:grid}
  .header__cta{display:none}
  /* --nav-top = Unterkante des Headers, per JS gemessen. So startet das Panel
     immer exakt unter der Navileiste, egal ob die Topbar noch sichtbar ist. */
  .nav{position:fixed;top:var(--nav-top,76px);left:0;right:0;z-index:45;
    max-height:calc(100dvh - var(--nav-top,76px));overflow-y:auto;overscroll-behavior:contain;
    background:#fff;border-bottom:1px solid var(--color-line);
    border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-lg);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--dur-nav) var(--ease),transform var(--dur-nav) var(--ease),visibility var(--dur-nav)}
  .nav[data-open="true"]{opacity:1;visibility:visible;transform:none}
  .nav__inner{display:block;padding:var(--space-xs) var(--container-pad) var(--space-lg)}

  .nav__list{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0}
  .nav__list>li{border-bottom:1px solid var(--color-line)}
  .nav__list>li:last-child{border-bottom:0}
  /* Eintraege laufen leicht versetzt ein, sobald das Panel offen ist. */
  .nav__list>li{opacity:0;transform:translateY(-8px);transition:opacity var(--dur-nav) var(--ease),transform var(--dur-nav) var(--ease)}
  .nav[data-open="true"] .nav__list>li{opacity:1;transform:none}
  .nav[data-open="true"] .nav__list>li:nth-child(1){transition-delay:.04s}
  .nav[data-open="true"] .nav__list>li:nth-child(2){transition-delay:.08s}
  .nav[data-open="true"] .nav__list>li:nth-child(3){transition-delay:.12s}
  .nav[data-open="true"] .nav__list>li:nth-child(4){transition-delay:.16s}
  .nav[data-open="true"] .nav__list>li:nth-child(5){transition-delay:.2s}

  .nav__row{gap:var(--space-sm)}
  .nav__list>li>a,.nav__row>a{flex:1 1 auto;display:flex;align-items:center;min-height:54px;
    padding:.35rem 0 .35rem .75rem;font-size:1.05rem;font-weight:var(--fw-medium);
    border-left:3px solid transparent;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    background-image:none;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
  .nav__list a[aria-current="page"]{border-left-color:var(--color-brand);background:var(--color-brand-tint)}
  .nav__list>li>a:active,.nav__row>a:active{background:var(--color-brand-tint)}
  .nav__item--has-sub>.nav__row::after{display:none}
  .nav__sub-toggle{display:grid;place-items:center;width:44px;height:44px;margin-right:-.35rem;
    border-radius:var(--radius-sm);color:var(--color-ink-soft);
    transition:transform var(--dur-nav) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
  .nav__sub-toggle:hover{background:var(--color-brand-tint);color:var(--color-brand)}
  .nav__sub-toggle[aria-expanded="true"]{transform:rotate(180deg);color:var(--color-brand)}

  /* Akkordeon. --sub-h ist die per JS gemessene Inhaltshoehe, damit die Kurve
     ueber die echte Distanz laeuft und nicht ueber einen geratenen Maximalwert. */
  .nav__sub-wrap{position:static;min-width:0;padding-top:0;opacity:1;transform:none;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height var(--dur-nav) var(--ease),visibility var(--dur-nav)}
  .nav__item--has-sub[data-sub-open="true"] .nav__sub-wrap{max-height:var(--sub-h,40rem);visibility:visible}
  .nav__sub{background:transparent;border:0;box-shadow:none;padding:0}
  .nav__sub li{border-top:1px solid var(--color-line)}
  .nav__sub li:first-child{border-top:0}
  .nav__sub a{display:flex;align-items:center;min-height:46px;padding:.5rem .75rem .5rem 1.5rem;
    font-size:.95rem;color:var(--color-ink-soft);border-radius:0}
  .nav__sub a[aria-current="page"]{color:var(--color-brand);background:var(--color-brand-tint)}

  /* Handlungsblock: Haupt-CTA plus Tap-to-Call fuer beide Standorte. */
  .nav__foot{display:block;margin-top:var(--space-lg);
    opacity:0;transform:translateY(-8px);transition:opacity var(--dur-nav) var(--ease),transform var(--dur-nav) var(--ease)}
  .nav[data-open="true"] .nav__foot{opacity:1;transform:none;transition-delay:.24s}
  .nav__cta{width:100%}
  .nav__foot-label{margin:var(--space-lg) 0 var(--space-xs);font-size:var(--fs-eyebrow);
    font-weight:var(--fw-semi);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-ink-soft)}
  .nav__calls{list-style:none;display:grid;gap:var(--space-xs)}
  .nav__calls a{display:flex;align-items:center;gap:.65rem;min-height:52px;padding:.5rem .85rem;
    border:1px solid var(--color-line);border-radius:var(--radius);text-decoration:none;
    color:var(--color-ink);font-size:.95rem;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
  .nav__calls a:hover{border-color:var(--color-brand);background:var(--color-brand-tint)}
  .nav__calls svg{flex:0 0 auto;color:var(--color-brand)}
  .nav__calls span{display:flex;flex-direction:column;line-height:1.3}
  .nav__calls strong{font-size:var(--fs-eyebrow);font-weight:var(--fw-semi);letter-spacing:.06em;
    text-transform:uppercase;color:var(--color-ink-soft)}
}

/* Beim offenen Menue scrollt nur das Panel, nicht die Seite dahinter.
   Die Sperre gehoert ausschliesslich auf <html>: dessen overflow wird an den
   Viewport weitergereicht, das Element selbst bleibt visible. Auf <body>
   gesetzt wuerde body zum Scroll-Container und damit zum naechsten Scrollport
   des sticky Headers, der dann beim Oeffnen aus der Fixierung faellt und an
   seine statische Position nach oben aus dem Bild springt. */
html.is-nav-open{overflow:hidden;padding-right:var(--sb-w,0px)}
/* Ab Desktop gibt es kein Panel, also darf auch kein Rest davon die Seite
   abdunkeln oder das Scrollen blockieren. */
@media (min-width:1025px){
  .nav-scrim{display:none}
  html.is-nav-open{overflow:visible;padding-right:0}
}

@media (prefers-reduced-motion:reduce){
  .nav,.nav__list>li,.nav__foot,.nav-scrim,.nav__sub-wrap,.nav-toggle__bar,.nav__sub-toggle{transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ============================ hero ====================================== */
.hero{position:relative;background:var(--color-brand);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -40% 55%;height:70%;
  background:radial-gradient(closest-side,rgba(63,98,195,.55),transparent 70%);pointer-events:none}
.hero .container{position:relative;z-index:1;padding-block:clamp(3.5rem,2rem + 7vw,7rem)}
.hero__inner{max-width:72ch}
.hero h1{font-size:clamp(1.75rem,1.35rem + 1.6vw,2.75rem);color:#fff}
/* Zweite Zeile der Hero-Headline auf eine eigene Zeile, ohne die H1 zu teilen. */
.hero h1 .hero__h1-line{display:block}
.hero__kicker{font-size:var(--fs-lg);color:#93A9E8;margin-bottom:var(--space-md);font-weight:var(--fw-medium)}
.hero p{color:#D6DEF5;font-size:var(--fs-lg);margin-top:var(--space-lg);max-width:55ch}
/* Suchleiste und CTA-Zeile teilen sich eine Breite, damit die Kanten fluchten. */
.hero__inner{--hero-cta-w:36rem}
.hero .btn-row{margin-top:var(--space-sm);max-width:var(--hero-cta-w)}
/* Zwei gleich breite CTAs, zusammen so breit wie die Suchleiste darueber. */
.hero .btn-row .btn{flex:1 1 0;min-width:0}
/* Auf schmalen Displays sind die zwei CTAs sonst unterschiedlich breit und
   linksbuendig gestapelt. Volle Breite gibt eine ruhige Kante und grosse
   Tapflaechen. */
@media (max-width:560px){
  .hero .btn-row{gap:var(--space-xs)}
  .hero .btn-row .btn{flex:1 1 100%}
}

/* Finanzierungspartner: linksbuendig unter den CTAs, Logos in Originalfarben. */
.hero__partners{margin-top:var(--space-xl)}
/* Klassenselektor allein verliert gegen `.hero p` - daher .hero davor. */
.hero .hero__partners-label{font-size:.6875rem;font-weight:var(--fw-semi);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:#D6DEF5;
  margin:0 0 var(--space-sm)}
.hero__partners-logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,2.2vw,1.75rem)}
.hero__partners-logos img{height:22px;width:auto;object-fit:contain}

/* Autegro-Suchleiste im Hero, gleiche Label-Optik wie bei den Partnern. */
.hero__search{margin-top:var(--space-xl);max-width:var(--hero-cta-w)}
.hero__search-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-md);margin:0 0 var(--space-sm)}
/* Klassenselektor allein verliert gegen `.hero p` - daher .hero davor. */
.hero .hero__search-label{font-size:.6875rem;font-weight:var(--fw-semi);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:#D6DEF5;
  margin:0}
.hero .hero__search-link{font-size:.8125rem;font-weight:var(--fw-medium);
  color:#D6DEF5;white-space:nowrap}
.hero .hero__search-link:hover{color:#fff}
/* Platz für die Suchleiste reservieren, damit der Hero beim Nachladen des
   Widgets nicht springt. 52px = gemessene Höhe des kompakten Suchfelds, das
   das Widget aktuell rendert (96px war für eine ältere, dreigeteilte
   Fahrzeugtyp/Marke/Modell-Variante kalibriert und liess eine Lücke). */
.hero__search-host{min-height:52px}

/* ---- hero mit Hintergrundvideo (Luftaufnahme Autohaus) ---------------- */
/* Rund 80% der Bildschirmhöhe, Inhalt vertikal zentriert. */
.hero--video{isolation:isolate;display:flex;align-items:center;
  min-height:80vh;min-height:80svh}
.hero--video > .container{width:100%}
.hero--video::after{display:none}          /* der Radial-Glow stört über Bewegtbild */
/* overflow:visible statt hidden: die Autegro-Suchleiste rendert ihre Dropdowns
   absolut relativ zum .hero (nächster positionierter Vorfahre über die
   Shadow-DOM-Grenze hinweg). Mit overflow:hidden wurden sie am unteren
   Hero-Rand abgeschnitten. .hero__media clipped das Video ohnehin selbst. */
.hero--video{overflow:visible}
.hero__media{position:absolute;inset:0;overflow:hidden;background:var(--color-brand-deep)}
.hero__video{width:100%;height:100%;object-fit:cover;display:block}
/* Blauer Verlauf über dem Video: hält Überschrift, Text und Logos lesbar,
   ohne die Luftaufnahme zuzudecken. Links (Textspalte) dichter als rechts. */
.hero--video .hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,26,94,.9) 0%,rgba(0,35,131,.74) 48%,rgba(0,35,131,.3) 100%),
    linear-gradient(0deg,rgba(0,26,94,.6) 0%,rgba(0,26,94,0) 55%)}
/* Schmale Viewports: Text läuft über die volle Breite, also gleichmäßig abdunkeln. */
@media (max-width:860px){
  .hero--video .hero__media::after{
    background:linear-gradient(180deg,rgba(0,26,94,.82) 0%,rgba(0,35,131,.88) 100%)}
}

/* Steuerung: unten rechts, innerhalb der Containerbreite. */
.hero__vidctl{position:relative;z-index:2;display:flex;gap:var(--space-xs);
  justify-content:flex-end;margin-top:var(--space-xl)}
.hero__vidbtn{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;cursor:pointer;color:#fff;
  background:rgba(0,26,94,.45);border:1px solid rgba(255,255,255,.45);
  border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.hero__vidbtn:hover{background:rgba(255,255,255,.18);border-color:#fff}
.hero__vidbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hero__vidicon{flex:none}
/* Nur das jeweils passende Icon zeigen. */
.hero__vidicon--play,
[data-hero-video-state="paused"] .hero__vidicon--pause{display:none}
[data-hero-video-state="paused"] .hero__vidicon--play{display:block}

@media (max-width:560px){
  .hero__vidctl{justify-content:flex-start;margin-top:var(--space-lg)}
}
/* Bewegung reduzieren: Video steht still, das Standbild bleibt sichtbar. */
@media (prefers-reduced-motion:reduce){
  .hero__vidbtn{transition:none}
}

.page-hero{background:var(--color-brand);color:#fff;padding-block:clamp(2.75rem,1.8rem + 4vw,4.5rem)}
.page-hero h1{color:#fff}
.page-hero p{color:#D6DEF5;font-size:var(--fs-lg);margin-top:var(--space-md);max-width:65ch}
.page-hero .btn-row{margin-top:var(--space-xl)}
.page-hero .eyebrow{color:#93A9E8}
/* Auf schmalen Displays sonst linksbuendig und unterschiedlich breit gestapelt;
   volle Breite gibt eine ruhige Kante und grosse Tapflaechen. */
@media (max-width:560px){
  .page-hero .btn-row{gap:var(--space-xs)}
  .page-hero .btn-row .btn{flex:1 1 100%}
}

/* Lead-Hero: Formular rechts im Erstbild, links nur Headline, ein Satz und drei
   Haken. Die lange Textfassung steht weiter unten auf der Seite. */
.page-hero--lead{padding-block:clamp(2.5rem,1.6rem + 4vw,4rem)}
.page-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32rem);
  gap:clamp(2rem,4vw,4rem);align-items:center}
.page-hero--lead h1{font-size:clamp(1.75rem,1.25rem + 1.9vw,2.75rem)}
.page-hero__copy{max-width:34rem}
.page-hero .page-hero__sub{max-width:44ch}

.hero-checks{list-style:none;margin-top:var(--space-xl);display:grid;gap:var(--space-md)}
.hero-checks li{display:flex;align-items:flex-start;gap:var(--space-sm);
  color:#fff;font-weight:var(--fw-medium);line-height:1.45}
.hero-checks li::before{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:.1em;
  border-radius:var(--radius-sm);background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/13px no-repeat}

/* Kein eigener weisser Rahmen: das Autegro-Widget bringt seine eigene weisse Karte mit. */
.page-hero__form{scroll-margin-top:calc(76px + var(--space-lg))}
.page-hero__form .inventory-host{min-height:480px}
@media (max-width:960px){
  .page-hero__grid{grid-template-columns:1fr}
  .page-hero__copy{max-width:60ch}
}

/* ============================ signature: Standort-Split ================= */
/* The one element that is true only of Bösing: two towns, two brand focuses. */
.locations{background:var(--color-brand-deep);color:#fff;padding-block:var(--section-y)}
.locations__head{margin-bottom:var(--space-2xl)}
.locations__head h2{color:#fff}
.locations__grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:0}
/* Columns pad inward only, so the left column stays flush with the heading. */
.locations__grid>.locations__col:first-child{padding-right:clamp(1rem,3vw,3rem)}
.locations__grid>.locations__col:last-child{padding-left:clamp(1rem,3vw,3rem)}
.locations__col{display:flex;flex-direction:column;align-items:flex-start}
.locations__rule{background:linear-gradient(180deg,transparent,rgba(255,255,255,.28) 15%,rgba(255,255,255,.28) 85%,transparent)}
.locations__town{font-size:var(--fs-h3);font-weight:var(--fw-bold);color:#fff}
.locations__focus{display:inline-block;margin-top:var(--space-sm);font-size:var(--fs-sm);font-weight:var(--fw-semi);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:#93A9E8}
.locations__list{list-style:none;margin-top:var(--space-lg);display:grid;gap:var(--space-sm)}
.locations__list li{display:flex;gap:.7rem;align-items:flex-start;color:#D6DEF5;font-size:var(--fs-sm)}
.locations__list a{color:#fff;text-decoration:none}
.locations__list a:hover{text-decoration:underline}
.locations__hours{width:100%;margin-top:var(--space-lg);padding-top:var(--space-md);
  border-top:1px solid rgba(255,255,255,.18);color:#D6DEF5;font-size:var(--fs-sm)}
.locations__hours-title{font-weight:var(--fw-semi);color:#fff;font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;margin-bottom:.5rem}
.locations__hours-list{list-style:none;display:grid;gap:.3rem}
.locations__hours-list li{display:grid;grid-template-columns:4rem auto;column-gap:var(--space-sm)}
.locations__hours-list li span:first-child{color:#fff;font-weight:var(--fw-medium)}
.locations__cta{margin-top:var(--space-lg);font-size:var(--fs-sm)}
.locations__pin{flex:0 0 auto}
@media (max-width:768px){
  .locations__grid{grid-template-columns:1fr}
  .locations__rule{height:1px;background:rgba(255,255,255,.24);margin-block:var(--space-2xl)}
  .locations__grid>.locations__col:first-child,
  .locations__grid>.locations__col:last-child{padding-inline:0}
}

/* ============================ cards ===================================== */
.card{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-lg);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);height:100%}
.card:hover{border-color:var(--color-brand);box-shadow:var(--shadow)}
.card h3{margin-bottom:var(--space-sm)}
.card p{color:var(--color-ink-soft);font-size:var(--fs-sm)}
.card__list{list-style:none;margin-top:var(--space-md);display:grid;gap:.4rem}
.card__list li{position:relative;padding-left:1.1rem;font-size:var(--fs-sm);color:var(--color-ink-soft)}
.card__list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--color-brand)}
.card__link{margin-top:var(--space-md);display:inline-block;font-weight:var(--fw-medium);font-size:var(--fs-sm);text-decoration:none}
.card__link::after{content:" →"}
.card--media{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card--media .card__body{padding:var(--space-lg);flex:1;display:flex;flex-direction:column}
.card--flat{border:0;background:var(--color-surface-alt)}
.card--flat:hover{box-shadow:none;border-color:transparent}
.benefit__icon{width:3rem;height:3rem;display:grid;place-items:center;border-radius:var(--radius);
  background:var(--color-brand-tint);color:var(--color-brand);margin-bottom:var(--space-md)}

.tag{display:inline-block;font-size:var(--fs-eyebrow);font-weight:var(--fw-semi);letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-brand);background:var(--color-brand-tint);
  padding:.3rem .6rem;border-radius:var(--radius-sm)}

/* value / benefit tiles */
.tile{display:grid;gap:var(--space-sm)}
.tile__num{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--color-brand-tint);line-height:1}
.section--brand .tile__num{color:rgba(255,255,255,.28)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);text-align:center}
.stats__n{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:var(--fw-bold);color:#fff;line-height:1}
.stats__l{font-size:var(--fs-sm);color:#B9C7EC;margin-top:var(--space-xs)}
@media (max-width:768px){.stats{grid-template-columns:repeat(2,1fr);gap:var(--space-xl)}}

/* logo strip */
.partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,4rem)}
.partners__item{display:grid;gap:.35rem;justify-items:center;text-align:center}
.partners img{height:38px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:all var(--dur) var(--ease)}
.partners__item:hover img{filter:none;opacity:1}
.partners__name{font-weight:var(--fw-semi);font-size:var(--fs-sm)}
.partners__sub{font-size:var(--fs-eyebrow);color:var(--color-ink-soft)}

/* split media + text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.split--media-right{direction:ltr}
.split--top{align-items:start}
.split img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* Sticky media column: the image holds in place while the service list scrolls
   past it, the way the old Elementor section behaved. */
.split--sticky{align-items:start}
.split__sticky{position:sticky;top:calc(76px + var(--space-lg))}
@media (max-width:900px){.split__sticky{position:static}}

/* Service list: check icon per item, arrow slides in on hover (old site cue) */
.service-list{list-style:none;display:grid;gap:var(--space-xs);margin-top:var(--space-xl)}
.service-list a{display:flex;align-items:center;gap:var(--space-sm);
  padding:.8rem var(--space-md);background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);
  color:var(--color-ink);font-weight:var(--fw-medium);text-decoration:none;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.service-list a::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:var(--radius-sm);
  background:var(--color-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/13px no-repeat}
.service-list a::after{content:"→";margin-left:auto;flex:0 0 auto;color:var(--color-brand);
  opacity:0;transform:translateX(-.5rem);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.service-list a:hover,.service-list a:focus-visible{background:var(--color-brand-tint);border-color:var(--color-brand);color:var(--color-brand)}
.service-list a:hover::after,.service-list a:focus-visible::after{opacity:1;transform:none}

/* process steps */
.steps{counter-reset:step;display:grid;gap:var(--space-xl)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-lg);align-items:start}
.step__n{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);color:var(--color-brand);
  background:var(--color-brand-tint);width:3rem;height:3rem;display:grid;place-items:center;border-radius:var(--radius)}
.step h3{margin-bottom:var(--space-xs)}
.step p{color:var(--color-ink-soft)}

/* accordion / FAQ
   Two columns: the heading (and the "still stuck?" nudge) stay parked on the
   left while the questions scroll past on the right, so the section fills the
   container instead of leaving half of it empty. Collapses to one column at
   960px, where the heading simply sits above the list. */
.faq-layout{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);align-items:start}
.faq-layout__intro{position:sticky;top:calc(76px + var(--space-xl))}
.faq-layout .section-head{margin-bottom:0}
.faq-layout .section-head p{font-size:var(--fs-base)}
/* one column below 960px, with the nudge card dropped below the questions so
   the list starts right after the heading */
@media (max-width:960px){
  .faq-layout{grid-template-columns:1fr;gap:var(--space-xl)}
  .faq-layout__intro{display:contents}
  .faq-layout .section-head{order:1}
  .faq-layout .faq{order:2}
  .faq-layout .faq-aside{order:3;margin-top:0}
}

.faq-aside{margin-top:var(--space-xl);padding:var(--space-lg);border-radius:var(--radius);
  background:var(--color-brand-tint);border:1px solid rgba(0,35,131,.1)}
.faq-aside h3{font-size:var(--fs-lg);font-weight:var(--fw-semi)}
.faq-aside p{margin-top:var(--space-xs);font-size:var(--fs-sm);color:var(--color-ink-soft)}
.faq-aside .btn{margin-top:var(--space-md)}
.section--alt .faq-aside{background:#fff;border-color:var(--color-line)}

.faq{display:grid;gap:var(--space-sm);interpolate-size:allow-keywords}
.faq details{border:1px solid var(--color-line);border-radius:var(--radius);background:#fff;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.faq details:hover{border-color:var(--color-line-strong)}
.faq details[open]{border-color:var(--color-brand);box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:var(--space-md) var(--space-lg);font-weight:var(--fw-semi);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);
  transition:color var(--dur) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
/* plus drawn from two background bars: the vertical one collapses on open, so
   the icon reads as a minus without swapping glyphs mid-transition */
.faq summary::after{content:"";flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:var(--radius-pill);
  background-color:var(--color-brand-tint);
  background-image:linear-gradient(var(--color-brand),var(--color-brand)),
                   linear-gradient(var(--color-brand),var(--color-brand));
  background-size:.7rem 2px,2px .7rem;background-position:center;background-repeat:no-repeat;
  transition:background-color var(--dur) var(--ease),background-size var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.faq summary:hover{color:var(--color-brand)}
.faq summary:hover::after{background-color:var(--color-brand);
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff)}
.faq details[open] summary{color:var(--color-brand)}
.faq details[open] summary::after{background-color:var(--color-brand);
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:.7rem 2px,0 .7rem;transform:rotate(180deg)}
.faq__body{padding:0 var(--space-lg) var(--space-lg);color:var(--color-ink-soft)}
.faq__body>*+*{margin-top:var(--space-sm)}
/* animate the open/close where the browser supports it; elsewhere it just snaps */
@supports (interpolate-size:allow-keywords){
  .faq details::details-content{block-size:0;overflow:clip;
    transition:block-size var(--dur) var(--ease),content-visibility var(--dur) allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* timeline */
.timeline{display:grid;gap:var(--space-xl);position:relative}
.timeline__item{display:grid;grid-template-columns:7rem 1fr;gap:var(--space-lg);align-items:start}
.timeline__year{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xl);color:var(--color-brand)}
.timeline__item h3{margin-bottom:var(--space-xs)}
.timeline__item p{color:var(--color-ink-soft)}
@media (max-width:640px){.timeline__item{grid-template-columns:1fr;gap:var(--space-xs)}}

/* jobs */
.job{border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--space-lg);background:#fff}
.job__head{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:flex-start;justify-content:space-between}
.job__meta{display:flex;flex-wrap:wrap;gap:var(--space-sm);list-style:none;margin-top:var(--space-xs)}
.job__meta li{font-size:var(--fs-sm);color:var(--color-ink-soft)}
.job__meta li+li::before{content:"·";margin-right:var(--space-sm)}
.job h4{margin-top:var(--space-lg);font-size:var(--fs-sm);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-ink-soft)}
.job ul{list-style:none;margin-top:var(--space-sm);display:grid;gap:.35rem}
.job ul li{position:relative;padding-left:1.1rem;font-size:var(--fs-sm);color:var(--color-ink-soft)}
.job ul li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--color-brand)}

/* reviews */
.reviews{--review-lines:6}
.reviews__grid{columns:3;column-gap:var(--space-lg)}
@media (max-width:1024px){.reviews__grid{columns:2}}
.review{break-inside:avoid;margin:0 0 var(--space-lg);background:#fff;border:1px solid var(--color-line);
  border-radius:var(--radius);padding:var(--space-lg);box-shadow:var(--shadow-sm)}
.review__head{display:flex;align-items:center;gap:var(--space-sm)}
.review__avatar{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--color-brand-tint);color:var(--color-brand);font-size:var(--fs-sm);font-weight:var(--fw-semi)}
.review__who{display:grid;min-width:0}
.review__name{font-weight:var(--fw-semi);font-size:.95rem;line-height:1.35}
.review__date{font-size:var(--fs-sm);color:var(--color-ink-soft)}
.review__g{flex:0 0 auto;width:18px;height:18px;margin-left:auto}
.review__stars{display:flex;gap:.1rem;margin-top:var(--space-md);color:#F5B120}
.review__stars svg{width:17px;height:17px;fill:currentColor}
.review__text{position:relative;margin:var(--space-sm) 0 0;font-size:.95rem;color:var(--color-ink-soft)}
.review__text p+p{margin-top:var(--space-sm)}
/* Gekuerzt wird nur, wenn JS den Zustand setzt und einen Aufklapper danebenstellt.
   Ohne JS bleibt der volle Text sichtbar. Die max-height ist ein exaktes Vielfaches
   der Zeilenhoehe, der Schnitt sitzt damit sauber auf der Zeilenkante. */
.review[data-review-clamp="closed"] .review__text{max-height:calc(var(--review-lines) * 1.65 * .95rem);overflow:hidden}
.review__more{margin-top:var(--space-sm);padding:0;border:0;background:none;cursor:pointer;
  font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-brand);
  text-decoration:underline;text-underline-offset:.18em}
.review__more:hover{color:var(--color-brand-hover)}
.reviews__links{display:flex;flex-wrap:wrap;gap:.3rem var(--space-md);margin-bottom:var(--space-xl)}
.reviews__links a{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-brand);
  text-decoration:underline;text-underline-offset:.2em}
.reviews__links a:hover{color:var(--color-brand-hover)}
/* Auf dem Handy wird aus dem Raster ein Wischslider: die Karten laufen bis an
   den Bildschirmrand, die naechste lugt hervor und markiert so den Weg. */
@media (max-width:640px){
  .reviews__grid{columns:auto;display:flex;gap:var(--space-md);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--container-pad);
    margin-inline:calc(var(--container-pad) * -1);padding:2px var(--container-pad) var(--space-sm);
    -webkit-overflow-scrolling:touch}
  .review{flex:0 0 86%;margin-bottom:0;scroll-snap-align:start}
  .reviews__grid::-webkit-scrollbar{height:4px}
  .reviews__grid::-webkit-scrollbar-thumb{background:var(--color-line-strong);border-radius:2px}
}

/* ---------------------------------------------------------------------------
   Editorial text block (service pages)
   The long-form copy on the werkstatt pages used to sit in one 75ch column and
   read as a wall of grey. The heading now parks in a sticky left rail while the
   copy runs beside it, interrupted by a fact strip and a highlighted callout so
   the eye has somewhere to land. Collapses to one column at 960px, where the
   booking link drops below the copy instead of hiding above it.
--------------------------------------------------------------------------- */
.editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.editorial__aside{position:sticky;top:calc(76px + var(--space-xl))}
.editorial__head h2{font-size:clamp(1.5rem,1.15rem + 1.3vw,2.25rem)}
.editorial__aside .link-cta{margin-top:var(--space-xl)}
.editorial__body>*+*{margin-top:var(--space-lg)}
.editorial__body p{color:var(--color-ink-soft);max-width:66ch}
.editorial__body>.editorial__lead{font-size:var(--fs-lg);color:var(--color-ink)}
.editorial__body h3{font-size:var(--fs-lg);font-weight:var(--fw-semi)}
@media (max-width:960px){
  .editorial{grid-template-columns:1fr;gap:var(--space-xl)}
  .editorial__aside{position:static;display:contents}
  .editorial__head{order:1}
  .editorial__body{order:2}
  .editorial__aside .link-cta{order:3;margin-top:0}
}

/* Key facts lifted out of the running text: a hairline grid rather than a
   second card style, so it breaks the column without competing with .card. */
.fact-strip{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--color-line);border:1px solid var(--color-line);
  border-radius:var(--radius);overflow:hidden}
.fact-strip li{display:grid;gap:.25rem;padding:var(--space-md) var(--space-lg);
  background:var(--color-surface)}
.section--alt .fact-strip li{background:var(--color-surface-alt)}
.fact-strip__k{font-size:var(--fs-eyebrow);font-weight:var(--fw-semi);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--color-brand)}
.fact-strip__v{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-ink);line-height:1.45}
@media (max-width:560px){.fact-strip{grid-template-columns:1fr}}

/* Callout: a sub-topic pulled out of the copy. Same tint as .faq-aside so the
   site keeps a single accent surface, with a brand rule marking the break. */
.callout{padding:var(--space-lg);padding-left:calc(var(--space-lg) - 3px);
  border-radius:var(--radius);background:var(--color-brand-tint);
  border:1px solid rgba(0,35,131,.1);border-left:3px solid var(--color-brand)}
.callout>*+*{margin-top:var(--space-sm)}
.callout h3{font-size:var(--fs-lg);font-weight:var(--fw-semi)}
.callout p{color:var(--color-ink-soft)}
.section--alt .callout{background:var(--color-surface);border-color:var(--color-line);
  border-left-color:var(--color-brand)}

/* Benefit list with a check mark instead of the .card__list dot, for the places
   where the list is the argument rather than a spec sheet. */
.checklist{list-style:none;display:grid;gap:var(--space-sm)}
.checklist li{display:flex;align-items:flex-start;gap:var(--space-sm);
  color:var(--color-ink-soft);line-height:1.5}
.checklist li::before{content:"";flex:0 0 auto;width:21px;height:21px;margin-top:.15em;
  border-radius:var(--radius-sm);
  background:var(--color-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002383' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/12px no-repeat}

/* prose (legal pages) */
.prose{max-width:75ch}
.prose>*+*{margin-top:var(--space-md)}
.prose h2{margin-top:var(--space-2xl);font-size:var(--fs-h3)}
.prose h3{margin-top:var(--space-xl);font-size:var(--fs-lg)}
.prose ul,.prose ol{padding-left:1.25rem;display:grid;gap:.4rem}
.prose li{color:var(--color-ink-soft)}
.prose p{color:var(--color-ink-soft)}
.prose a{word-break:break-word}

/* Tables on the legal pages (cookie declaration). The stylesheet carried no
   table rules at all, so these rendered with browser defaults. The scroller
   keeps a multi-column table from squashing on phones without stretching the
   reading measure of the surrounding text. */
.prose .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--color-line);border-radius:var(--radius)}
.prose table{width:100%;min-width:34rem;border-collapse:collapse;font-size:var(--fs-sm)}
.prose thead th{text-align:left;font-family:var(--font-display);font-weight:var(--fw-semi);
  color:var(--color-ink);background:var(--color-surface-alt);
  padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-line-strong)}
.prose tbody td{padding:var(--space-sm) var(--space-md);vertical-align:top;
  color:var(--color-ink-soft);border-top:1px solid var(--color-line)}
.prose tbody tr:first-child td{border-top:0}
.prose tbody td:first-child{color:var(--color-ink);font-weight:var(--fw-medium);white-space:nowrap}
.prose th[data-col="zweck"]{width:38%}
.prose th[data-col="anbieter"]{width:18%}
.prose .linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--color-brand);
  text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.prose .linkbtn:hover{color:var(--color-brand-hover)}

/* ============================ forms ===================================== */
.form{display:grid;gap:var(--space-md)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:.35rem}
.field>label{font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.field .req{color:var(--color-alert-text)}
.field input,.field select,.field textarea{
  width:100%;padding:.75rem .9rem;border:1px solid var(--color-line-strong);border-radius:var(--radius-btn);
  background:#fff;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--color-brand);box-shadow:0 0 0 3px var(--color-brand-tint)}
.field textarea{resize:vertical;min-height:130px}
.field__hint{font-size:var(--fs-eyebrow);color:var(--color-ink-soft)}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--color-ink-soft)}
.consent input{margin-top:.25rem;flex:0 0 auto;width:1.05rem;height:1.05rem;accent-color:var(--color-brand)}
.form__note{font-size:var(--fs-sm);color:var(--color-ink-soft)}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
.form__status{padding:var(--space-md);border-radius:var(--radius);font-size:var(--fs-sm);display:none}
.form__status[data-state="ok"]{display:block;background:#EAF5F1;color:var(--color-success);border:1px solid #BEDFD4}
.form__status[data-state="err"]{display:block;background:#FDECEC;color:var(--color-alert-text);border:1px solid #F7C7C7}
.form-card{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:clamp(1.25rem,3vw,2.25rem);box-shadow:var(--shadow)}

/* ============================ job application modal ===================== */
.job-modal{border:0;border-radius:var(--radius-lg);padding:clamp(1.25rem,3vw,2rem);
  width:min(560px,calc(100vw - 2rem));max-height:min(90vh,720px);overflow:auto;
  background:#fff;box-shadow:var(--shadow-lg)}
.job-modal::backdrop{background:rgba(0,26,94,.55)}
.job-modal[open]{animation:job-modal-in var(--dur) var(--ease)}
@keyframes job-modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.job-modal[open]{animation:none}}
.job-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md)}
.job-modal__head h3{margin:0}
.job-modal__close{flex:0 0 auto;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--color-line-strong);border-radius:var(--radius-sm);color:var(--color-ink-soft);cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.job-modal__close:hover{color:var(--color-brand);border-color:var(--color-brand)}

/* ============================ inventory (Autegro) ======================= */
.inventory-host{min-height:320px}
/* Die Typ-/Marken-Karten sind flacher als Overview und Grouping — 200px
   entspricht der gemessenen Kartenhöhe (195px ab Tablet-Breite aufwärts). */
.inventory-host--type-cards{min-height:200px}
.inventory-note{margin-top:var(--space-lg);font-size:var(--fs-sm);color:var(--color-ink-soft)}

/* ============================ footer ==================================== */
.site-footer{background:var(--color-brand-deep);color:#B9C7EC;padding-block:var(--space-3xl) var(--space-xl);margin-top:0}
.site-footer a{color:#D6DEF5;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:var(--space-xl)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer h3{font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:#fff;margin-bottom:var(--space-md);font-weight:var(--fw-semi)}
.site-footer ul{list-style:none;display:grid;gap:.55rem;font-size:var(--fs-sm)}
.site-footer__logo img{width:200px;margin-bottom:var(--space-md);filter:brightness(0) invert(1)}
.site-footer__brand p{font-size:var(--fs-sm);max-width:38ch}
.footer-bottom{margin-top:var(--space-3xl);padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center;justify-content:space-between;font-size:var(--fs-sm)}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:var(--space-md);list-style:none}
.footer-bottom button{background:none;border:0;color:#D6DEF5;cursor:pointer;font-size:inherit;padding:0;text-decoration:none}
.footer-bottom button:hover{color:#fff;text-decoration:underline}

/* Inception credit badge — agency-kit/footer-badge, retokenised for this footer.
   The kit's fallback colors are the on-light set and would all but vanish on the
   navy band, so the on-dark values are passed in explicitly. The kit wordmark
   already ships white, so unlike some sibling sites it needs no filter. Selectors
   carry .footer-bottom to outrank the .site-footer a rules above.
   The preview popover is anchored to the row, not the badge, so it can never
   overhang the container edge. */
.footer-bottom{position:relative}
.footer-bottom .inception{display:inline-flex;align-items:center;gap:.55rem;line-height:1;
  padding:.45rem .7rem;font-size:var(--fs-sm);color:#B9C7EC;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.footer-bottom .inception:hover,
.footer-bottom .inception:focus-visible{color:#fff;border-color:rgba(255,255,255,.5);text-decoration:none}
.footer-bottom .inception__logo{height:18px;width:auto;flex:none}
.footer-bottom .inception__preview{position:absolute;right:0;bottom:calc(100% + .7rem);z-index:20;
  width:min(340px,100%);padding:6px;background:var(--color-surface);
  border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease)}
.footer-bottom .inception__preview img{width:100%;border-radius:calc(var(--radius) - 2px)}
.footer-bottom .inception:hover .inception__preview,
.footer-bottom .inception:focus-visible .inception__preview{opacity:1;visibility:visible;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.footer-bottom .inception__preview{transform:none}}