/* Shared base styles — consume tokens.css. Plain CSS, no framework. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-weight:var(--fw-light);color:var(--color-body);background:var(--color-surface);line-height:var(--lh-body)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--color-ink);line-height:var(--lh-tight);margin:0 0 var(--space-4)}
h1{font-size:var(--fs-900)} h2{font-size:var(--fs-800)} h3{font-size:var(--fs-700)} h4{font-size:var(--fs-600)}
p{margin:0 0 var(--space-4)}
a{color:inherit}
a:hover{color:var(--color-accent)}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--space-2);top:var(--space-2);background:#fff;padding:var(--space-2);z-index:60}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Layout primitives ------------------------------------------------ */
.section{padding-block:var(--space-24)}
.section--tight{padding-block:var(--space-16)}
.section--alt{background:var(--color-surface-2)}
.section--soft{background:var(--color-surface-3)}
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.stack>*+*{margin-top:var(--space-4)}
.measure{max-width:66ch}
.container.measure{max-width:var(--container)}  /* a container must never collapse to the text measure */

.eyebrow{font-family:var(--font-body);font-weight:var(--fw-light);color:var(--color-accent);margin:0 0 var(--space-2);line-height:1}
.section-head{margin-bottom:var(--space-12)}
.section-head p{color:var(--color-muted)}
/* .section-head p ist spezifischer als .eyebrow — der Kicker braucht seine Farbe zurück */
.section-head .eyebrow,.cta-band .eyebrow{color:var(--color-accent);max-width:none}

.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--space-6)}
.card__media{width:100%;margin:0 0 var(--space-5);border-radius:var(--radius-sm)}

/* News: the campaign artwork is portrait flyer art (1024x1536). Standing it on top of
   the copy leaves a tall, empty card, so it runs down the side instead. The aspect-ratio
   reserves the box before the lazy image lands (no layout shift). */
.card--news{display:grid;grid-template-columns:260px 1fr;gap:var(--space-6);align-items:stretch}
.card--news .card__media{width:260px;aspect-ratio:1024/1536;height:auto;margin:0;align-self:start;
  object-fit:cover;background:var(--color-surface-2)}  /* align-self:start — a stretched grid item would ignore the ratio */
/* Die Kampagnen-Karte läuft wieder über beide Spalten (08.10.2026 zurückgenommen): gleich
   breite Karten mit so unterschiedlich langen Texten ergaben eine ausgefranste Reihe mit
   einer halb leeren Karte daneben. Das Kampagnen-Motiv ist quadratisch, die Flyer sind hoch. */
.card__media--square{aspect-ratio:1/1 !important}
.card--news-wide{grid-column:1/-1;grid-template-columns:400px 1fr}
.card--news-wide picture.card__media{width:400px}
.card--news-wide .card__body{display:flex;flex-direction:column;padding-right:clamp(var(--space-6),10%,6rem)}
.card--news-wide .card__body>*{max-width:34rem}
.card--news-wide .card__cta{margin-top:auto;margin-bottom:0;padding-top:var(--space-5)}
.card__body{display:flex;flex-direction:column;min-width:0}
.card__body h3{font-size:var(--fs-600);margin-bottom:var(--space-3)}
.card__body p{margin-bottom:var(--space-3)}
.card__price{font-size:var(--fs-600);font-family:var(--font-display);
  font-weight:var(--fw-semibold);color:var(--color-ink)}
.card__cta{margin-top:auto;margin-bottom:0;padding-top:var(--space-4)}

/* ---- Buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;
  min-height:3rem;padding:0 var(--space-6);font-size:var(--fs-300);line-height:1.2;text-transform:none;letter-spacing:0;border-radius:var(--radius-sm);
  background:var(--color-accent);color:var(--color-accent-ink);text-decoration:none;
  font-family:var(--font-body);font-weight:var(--fw-medium);border:2px solid var(--color-accent);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--color-accent-2);border-color:var(--color-accent-2);color:#fff}
.btn--ghost{background:transparent;color:var(--color-ink);border-color:var(--color-ink)}
.btn--ghost:hover{background:transparent;color:var(--color-accent);border-color:var(--color-accent)}
/* .btn--sm bleibt als Klasse bestehen, ändert aber nichts: alle Buttons sind gleich groß */
.btn--sm{}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}

/* ---- Header ----------------------------------------------------------- */
.site-header{position:sticky;top:0;background:var(--color-surface);border-bottom:1px solid var(--color-line);z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-3)}
.logo img{width:auto;height:76px}
.site-nav{display:flex;align-items:center;gap:var(--space-8)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-6)}
.site-nav a{text-decoration:none;font-weight:var(--fw-medium);font-size:var(--fs-300);letter-spacing:.01em}
.nav-toggle{display:none;place-items:center;width:44px;height:44px;margin-right:-6px;padding:0;background:none;border:0;color:var(--color-ink);cursor:pointer}
.burger{position:relative;width:22px;height:14px}
.burger>span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .4s cubic-bezier(.65,0,.35,1),opacity .25s ease}
.burger>span:nth-child(1){top:0}.burger>span:nth-child(2){top:6px}.burger>span:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"] .burger>span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .burger>span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle[aria-expanded="true"] .burger>span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-meta{display:none}
body.nav-locked{overflow:hidden}

/* ---- WhatsApp floating button ----------------------------------------- */
/* --consent-h is set from the banner's measured height, so the stack clears it
   at every width (the banner runs to three lines on a phone) */
.fab-stack{position:fixed;left:var(--space-4);bottom:calc(var(--space-4) + var(--consent-h,0px));
  z-index:45;display:grid;gap:var(--space-3);justify-items:start}
.fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  box-shadow:var(--shadow-soft);text-decoration:none;border:0;padding:0;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.fab svg{width:30px;height:30px;display:block}
.fab--whatsapp{background:#25D366;color:#fff}
.fab--whatsapp:hover{background:#1da851;color:#fff}
.fab--cookie{background:var(--color-accent);color:#fff}  /* wie autohandeljakob.de: Markenfarbe, weißes Cookie-Symbol */
.fab--cookie:hover{background:var(--color-accent-2);color:#fff}
.fab--cookie svg{width:28px;height:28px}
body.nav-locked .fab-stack{display:none}

/* ---- Hero ------------------------------------------------------------- */
.hero{background:var(--color-surface-2);border-bottom:1px solid var(--color-line);padding-block:var(--space-24)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
.hero h1{margin-bottom:var(--space-5)}
/* the hero line is set to break exactly twice — size it so line 1 fits the column */
.hero__title{font-size:clamp(2.125rem,1.1rem + 2.6vw,2.875rem)}
.hero .lead{font-size:1.0625rem;max-width:34rem}
.hero-media{position:relative}
.hero-media img{width:100%}
.stat-badge{position:absolute;left:var(--space-4);bottom:var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-soft)}
.stat-badge .stat-badge__label{display:block;font-size:var(--fs-300);color:var(--color-muted);margin:0}
.stat-badge .stat-badge__value{display:block;font-weight:var(--fw-medium);color:var(--color-ink);margin:0}

/* ---- Partner row ------------------------------------------------------ */
.partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-10) var(--space-8)}
/* Trennlinie zwischen Partnern und Bewertungen; der Zeilenabstand des Flex-Containers sorgt
   über und unter ihr für Luft */
.partners__divider{flex:none;width:100%;height:0;margin:0;border:0;border-top:1px solid var(--color-line)}
/* Kicker und Überschrift als ein Block, sonst reiht die Flex-Zeile sie nebeneinander auf */
.partners__head .eyebrow{margin-bottom:var(--space-2)}
.partners__title{margin:0;font-size:var(--fs-600);font-weight:var(--fw-medium);color:var(--color-muted)}
.partner-row{display:flex;align-items:center;gap:var(--space-6);justify-content:flex-end;flex:1 1 auto;min-width:0}
.partner{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.partner img{height:44px;width:auto;flex:none}
.partner__name{font-weight:var(--fw-medium);color:var(--color-ink);margin:0;line-height:1.2}
.partner__role{font-size:var(--fs-300);color:var(--color-muted);margin:0}
.partner>span{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left}
.reviews-slot{flex:1 0 100%;min-height:180px;display:grid;place-items:center;
  border:1px dashed var(--color-line);border-radius:var(--radius);padding:var(--space-8);background:var(--color-surface-3)}
.reviews-slot p{margin:0}
.muted{color:var(--color-muted)}

/* ---- Service cards (image background) --------------------------------- */
.service-card{position:relative;min-height:390px;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:var(--radius);overflow:hidden;padding:var(--space-8);color:#fff;box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease}
.service-card:hover{transform:scale(1.02);box-shadow:0 5px 10px 3px var(--color-accent-tint)}
.service-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.service-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.78));z-index:1}
.service-card>*{position:relative;z-index:2}
.service-card h3{color:#fff;margin-bottom:var(--space-3);font-size:1.6rem;white-space:nowrap}
.service-card h3+p{min-height:7.5em}
.service-card p{color:rgba(255,255,255,.9)}
.service-card .btn{background:#fff;border-color:#fff;color:var(--color-ink)}
.service-card .btn:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}

/* ---- Feature / media split -------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
.split > *{min-width:0}
.split img{border-radius:var(--radius)}
.split__media{width:100%;aspect-ratio:4/3;object-fit:cover}
/* campaign flyer: square artwork must never be cropped by the 4/3 media box */
.split__media--flyer{aspect-ratio:1/1;object-fit:contain;background:var(--color-surface)}
.ticks{list-style:none;padding:0;margin:0 0 var(--space-4);display:grid;gap:var(--space-2)}
.ticks li{display:flex;gap:var(--space-3);align-items:flex-start}
/* Ionicons "checkmark-circle" (MIT) as a mask — the icon takes the brand colour */
.ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:.05em;
  background:var(--color-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%2048C141.31%2048%2048%20141.31%2048%20256s93.31%20208%20208%20208%20208-93.31%20208-208S370.69%2048%20256%2048zm108.25%20138.29l-134.4%20160a16%2016%200%2001-12%205.71h-.27a16%2016%200%2001-11.89-5.3l-57.6-64a16%2016%200%201123.78-21.4l45.29%2050.32%20122.59-145.91a16%2016%200%200124.5%2020.58z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%2048C141.31%2048%2048%20141.31%2048%20256s93.31%20208%20208%20208%20208-93.31%20208-208S370.69%2048%20256%2048zm108.25%20138.29l-134.4%20160a16%2016%200%2001-12%205.71h-.27a16%2016%200%2001-11.89-5.3l-57.6-64a16%2016%200%201123.78-21.4l45.29%2050.32%20122.59-145.91a16%2016%200%200124.5%2020.58z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.section-head--sm{margin-bottom:var(--space-6)}
/* Häkchenliste zweispaltig, wenn sie als eigener Abschnitt steht */
.ticks--grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-8)}
.section--ink .ticks li{color:var(--color-footer-muted)}

/* ---- Jobs ------------------------------------------------------------- */
.job{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4);
  border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--space-5)}
.job__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.job .ticks{margin:0}
.job h3{margin:0;font-size:var(--fs-600)}
.job .job__type{color:var(--color-muted);font-size:var(--fs-300);margin:0}

/* ---- FAQ accordion ---------------------------------------------------- */
.faq{border-top:1px solid var(--color-line)}
.faq details{border-bottom:1px solid var(--color-line)}
.faq summary{cursor:pointer;list-style:none;padding-block:var(--space-6);
  font-family:var(--font-body);font-weight:var(--fw-medium);color:var(--color-ink);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-accent);font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .faq__body{padding-bottom:var(--space-6)}
.faq .faq__body>*:last-child{margin-bottom:0}

/* ---- Forms ------------------------------------------------------------ */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);max-width:40rem}
.form .field{display:grid;gap:var(--space-2)}
.form label{font-size:var(--fs-300);font-weight:var(--fw-medium);color:var(--color-ink)}
.form input,.form textarea,.form select{
  font:inherit;padding:var(--space-3) var(--space-4);border:1px solid var(--color-line);
  border-radius:var(--radius-sm);background:#fff;color:var(--color-body)}
.form textarea{min-height:9rem;resize:vertical}
.form .consent-field{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-300)}
.form .hp{position:absolute;left:-9999px}
.form-status{margin:0;font-size:var(--fs-300)}
.form-status[data-state="error"]{color:#B3261E}
.form-status[data-state="ok"]{color:#0B6E4F}

/* ---- Inventory placeholder -------------------------------------------- */
.placeholder{border:2px dashed var(--color-accent-tint);border-radius:var(--radius);
  padding:var(--space-16) var(--space-8);text-align:center;background:var(--color-surface-3)}
.placeholder h2{color:var(--color-ink)}

/* ---- Link list (/links) ----------------------------------------------- */
.linklist{list-style:none;margin:0 auto;padding:0;max-width:30rem;display:grid;gap:var(--space-3)}
.linklist a{display:block;text-align:center;text-decoration:none;font-weight:var(--fw-medium);
  border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--space-4);background:#fff}
.linklist a:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* ---- Legal / prose ---------------------------------------------------- */
.prose{max-width:72ch}
.prose h2{font-size:var(--fs-700);margin-top:var(--space-10)}
.prose h3{font-size:var(--fs-600);margin-top:var(--space-8)}
.prose ul{padding-left:1.25rem}

/* ---- Map embed (consent-gated) ---------------------------------------- */
.map-embed{border-radius:var(--radius);overflow:hidden;background:var(--color-surface-2);min-height:320px;
  display:grid;place-items:center;text-align:center;padding:var(--space-8)}
.map-embed iframe{width:100%;height:360px;border:0;display:block}

/* ---- Footer (structure adapted from paulmobile.de) --------------------- */
/* kein margin-top: jede Sektion bringt ihr eigenes padding mit, der Abstand ergab sonst
   einen weißen Streifen zwischen dem CTA-Band und dem Footer */
.site-footer{position:relative;isolation:isolate;
  background:linear-gradient(180deg,#0f1c2e 0%,#0a1420 100%);
  color:var(--color-footer-muted);padding-block:var(--space-20) var(--space-12);font-size:.95rem}
.site-footer a{color:var(--color-footer-muted);text-decoration:none;transition:color .2s ease}
.site-footer a:hover{color:var(--color-accent)}
.site-footer p{margin:0 0 var(--space-2)}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:var(--space-4);
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-12)}
.footer-brand{display:inline-block;margin-bottom:var(--space-4)}
.footer-brand img{height:96px;width:auto}

.contact-actions{display:flex;flex-direction:column;gap:.65rem;margin-block:var(--space-4)}
.contact-action{display:inline-flex;align-items:center;gap:.65rem;font-weight:400;font-size:.95rem;transition:color .2s ease}
.contact-action svg{flex-shrink:0;color:var(--color-accent)}
.contact-action:hover,.contact-action:hover svg{color:var(--color-accent)}

.footer-social{display:flex;align-items:center;gap:1rem;margin-top:var(--space-4)}
.footer-social__link{display:inline-flex;align-items:center;justify-content:center;transition:color .2s ease}
.footer-social__link svg{width:28px;height:28px}

.footer-bottom{margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:1px solid var(--color-footer-line);display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:var(--space-4);align-items:center;font-size:var(--fs-300)}

/* Inception Media badge with hover preview */
.inception{position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.45rem .7rem;font-size:.8rem;line-height:1;text-decoration:none;
  border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-sm);
  opacity:.85;transition:color .2s ease,border-color .2s ease,opacity .2s ease,background-color .2s ease}
.inception:hover,.inception:focus-visible{color:#fff;border-color:rgba(255,255,255,.75);
  opacity:1;background:rgba(255,255,255,.06)}
.inception__logo{height:18px;width:auto;flex:none;display:block}
.inception__preview{position:absolute;left:50%;bottom:calc(100% + .7rem);z-index:20;
  width:min(340px,80vw);padding:6px;background:#111;
  border:1px solid var(--color-footer-line);border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateX(-50%);
  transition:opacity .2s ease,visibility .2s ease;pointer-events:none}
.inception:hover .inception__preview,.inception:focus-visible .inception__preview{opacity:1;visibility:visible}
.inception__preview img{display:block;width:100%;height:auto;border-radius:calc(var(--radius-sm) - 1px)}

.consent{position:fixed;inset:auto 0 0 0;background:var(--color-ink);color:#fff;padding:var(--space-4);text-align:center;z-index:50}
.consent p{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:center}
.consent a{color:#fff}
.btn--on-dark{color:#fff;border-color:rgba(255,255,255,.6)}
.btn--on-dark:hover{color:var(--color-accent);border-color:var(--color-accent)}

/* ---- Scroll-Reveal ------------------------------------------------------
   Übernommen von autohandeljakob.de. Nur aktiv, solange <html class="reveal-on">
   steht (head.html); [data-reveal-item] vergibt main.js. */
.reveal-on{--reveal-distance:min(2em,2.5rem);--reveal-ease:cubic-bezier(.77,0,.175,1)}
.reveal-on [data-reveal-item="out"]{opacity:0;transform:translateY(var(--reveal-distance))}
.reveal-on [data-reveal-item="in"]{transition:opacity .8s var(--reveal-ease),transform .8s var(--reveal-ease)}
@media (prefers-reduced-motion:reduce){
  .reveal-on [data-reveal-item]{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ---- <picture> ---------------------------------------------------------
   {{img:…}} liefert <picture> mit AVIF/WebP-srcset. Die Layout-Klasse sitzt am
   <picture>, das <img> füllt es aus — sonst müsste jede Regel doppelt stehen. */
picture{display:block}
picture img{display:block;width:100%;height:auto}
picture.card__media img,picture.split__media img{width:100%;height:100%;object-fit:cover}
picture.split__media--flyer img{object-fit:contain}
.hero-media picture,.service-card picture,.contact-hero__bg picture,.cta-band__media picture{height:100%}
.service-card picture{position:absolute;inset:0;z-index:0}
.service-card picture img{width:100%;height:100%;object-fit:cover}
.contact-hero__bg picture img,.cta-band__media picture img{height:100%;object-fit:cover}
.hero-media--square{align-self:center}
.hero-media--square picture{display:block;height:auto;aspect-ratio:1/1}
.hero-media--square img{height:100%;object-fit:cover}
.hero-media__img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}

/* ---- Page patterns ported from autohandeljakob.de ---------------------- */
/* Same section vocabulary (Einstieg mit Formular, Schritt-Karten, dunkles Band,
   FAQ zweispaltig, Abschluss-Band) auf die helle Marke übersetzt. */
.section--first{padding-top:var(--space-12)}
/* Überschrift, Fließtext und der Knopf darunter stehen linksbündig (Kundenwunsch 08.10.2026). */
.section-head p{max-width:64ch}
.section-cta{margin-top:var(--space-10)}

/* dunkles Band: dasselbe Navy wie der Footer */
.section--ink{background:#0a4655;color:rgba(255,255,255,.82)}  /* Tiefes Türkis: hebt sich vom Marine-Footer ab */
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .section-head p{color:rgba(255,255,255,.82)}
.section--ink .section-head .eyebrow{color:var(--color-accent)}
.section--ink .steps__item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2);box-shadow:none}
.section--ink .steps__body p{color:rgba(255,255,255,.82)}
/* auf dem dunklen Band muss das Symbol die helle Markenfarbe tragen — das dunkle
   Türkis (--color-accent-2) verschwand im Karton */
.section--ink .icon-badge{background:rgba(10,193,220,.16);border-color:rgba(10,193,220,.5);color:var(--color-accent)}
.btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn--on-dark:hover{background:#fff;color:var(--color-ink);border-color:#fff}

/* Schritt-/Vorteilskarten */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.steps--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps--4 .steps__item{padding:var(--space-6)}
.steps--4 .steps__body h3{margin:0;font-size:1rem;line-height:1.35}
.steps--4 .icon-badge{margin-bottom:var(--space-4)}
.steps__item{display:flex;flex-direction:column;padding:var(--space-8);
  border:1px solid var(--color-line);border-radius:var(--radius);
  background:var(--color-surface);box-shadow:var(--shadow-card)}
.steps__body h3{margin-bottom:var(--space-3);font-size:var(--fs-600)}
.steps__body p{margin:0;color:var(--color-muted)}
.steps__body p+p{margin-top:var(--space-3)}
/* Knopf unten bündig, egal wie lang die Stichpunkte sind */
.steps__cta{margin-top:auto;margin-bottom:0;padding-top:var(--space-6)}
.steps__body .ticks{margin-bottom:0}
.steps__body .muted{margin:var(--space-4) 0 0;color:var(--color-muted);font-size:var(--fs-300)}
.icon-badge{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:var(--space-5);
  border-radius:12px;background:rgba(10,193,220,.09);border:1px solid rgba(10,193,220,.28);
  color:var(--color-accent-2);flex:none}
.icon-badge .icon{width:28px;height:28px}

/* Nutzen-Liste im Seitenkopf */
.usp-list{display:grid;gap:var(--space-3);list-style:none;margin:var(--space-6) 0 0;padding:0}
.usp-list li{display:flex;align-items:center;gap:var(--space-3)}
.usp-list .icon{flex:none;width:22px;height:22px;color:var(--color-accent)}
.usp-list strong{color:var(--color-ink)}

/* Ankauf: Ansprache links, Bewertungsformular rechts */
.ankauf-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);
  gap:var(--space-12);align-items:start}
/* Das Autegro-Widget bringt seine eigene weiße Karte mit Rahmen und Schatten mit. Eine zweite
   Karte darum ergab einen doppelten Rahmen — die Spalte ist deshalb nur noch ein Platzhalter. */
.ankauf-hero__form{min-height:520px}
.ankauf-hero__form>div{width:100%}
.trust-line{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--color-line);
  color:var(--color-muted);font-size:var(--fs-300)}
.trust-line strong{color:var(--color-ink)}

/* FAQ zweispaltig mit mitlaufender Überschrift */
.faq-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-12);align-items:start}
.faq-layout__head{position:sticky;top:calc(var(--space-20) + var(--space-4))}
.faq-layout__head h2{margin:0}
.faq__item{border-bottom:1px solid var(--color-line)}
.faq__item summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-6);
  align-items:center;padding-block:var(--space-6);cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:none}
.faq__cat{grid-column:1;font-size:var(--fs-300);font-weight:var(--fw-medium);
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-2);font-size:.7rem}
.faq__q{grid-column:1;font-size:var(--fs-600);font-weight:var(--fw-medium);line-height:1.35;
  color:var(--color-ink);transition:color .2s}
.faq__item summary .icon{grid-column:2;grid-row:1/span 2;width:36px;height:36px;padding:7px;
  border-radius:50%;color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-line);
  transition:transform .3s,background-color .2s,color .2s}
.faq__item[open] summary .icon{transform:rotate(45deg);background:var(--color-accent);color:#fff;box-shadow:none}
.faq__item summary:hover .faq__q{color:var(--color-accent-2)}
.faq__a{padding:0 var(--space-12) var(--space-6) 0}
.faq__a>*:last-child{margin-bottom:0}

/* Kontakt: Fotoband mit überlappender Karte */
.contact-hero{position:relative;isolation:isolate;padding-top:var(--space-24);padding-bottom:var(--space-16)}
.contact-hero__bg{position:absolute;top:0;left:0;right:0;height:420px;z-index:-1;overflow:hidden}
.contact-hero__bg>img{width:100%;height:100%;object-fit:cover}
.contact-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.3))}
.contact-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);overflow:hidden;
  border-radius:var(--radius);background:var(--color-surface);box-shadow:var(--shadow-card)}
.contact-card__info{padding:var(--space-12);border-right:1px solid var(--color-line)}
.contact-card__info h1{font-size:var(--fs-800)}
.contact-card__form{padding:var(--space-12);max-width:none}
.contact-card .form{max-width:none}

.icon-list{display:grid;gap:var(--space-4);list-style:none;margin:var(--space-8) 0 0;padding:0}
.icon-list li{display:flex;gap:var(--space-3);align-items:flex-start}
.icon-list .icon{flex:none;width:22px;height:22px;margin-top:.1em;color:var(--color-accent);transition:color .2s,transform .2s}
.icon-list a{color:var(--color-ink);text-decoration:none}
.icon-list a:hover{color:var(--color-accent);text-decoration:underline}

/* Karte mit Vorschaltfläche (lädt erst nach Klick) */
.map{position:relative;overflow:hidden;height:clamp(340px,40vw,480px);border:1px solid var(--color-line);
  border-radius:var(--radius);background:var(--color-surface-2)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map__facade{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:var(--space-2);padding:var(--space-8);text-align:center}
.map__facade .icon{width:40px;height:40px;color:var(--color-accent)}
.map__facade p{max-width:52ch;margin:0}
.map__facade .btn-row{margin-top:var(--space-4);justify-content:center}

.reviews-slot--block{flex:none;width:100%;min-height:220px}
.reviews-facade{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-8);text-align:center}
.reviews-facade .icon{width:36px;height:36px;color:var(--color-accent)}
.reviews-facade p{max-width:56ch;margin:0;color:var(--color-muted)}
.reviews-facade .btn-row{justify-content:center;margin-top:var(--space-2)}
.reviews-slot[data-mounted]{display:block;border:0;background:none;min-height:0;padding:0}

/* Abschluss-Band mit Foto */
.cta-band{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(420px,38vw,560px);background:#0f1c2e;color:var(--color-footer-muted)}
.cta-band>.container{width:100%}
.cta-band__media{position:absolute;inset:0;z-index:-1}
.cta-band__media>img{width:100%;height:100%;object-fit:cover}
.cta-band__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(15,28,46,.96) 0%,rgba(15,28,46,.9) 32%,rgba(15,28,46,.6) 58%,rgba(15,28,46,.25) 100%)}
.cta-band__body{max-width:680px;padding-block:var(--space-16)}
.cta-band h2{color:#fff}
.cta-band p{max-width:56ch}
.cta-band .btn-row{margin-top:var(--space-8)}


/* Formular: Pflichtkennzeichen, Fehlerzeile unter dem Feld, Honeypot, ALTCHA */
.req{color:var(--color-accent-2)}
.field__error{margin:var(--space-1) 0 0;font-size:var(--fs-300);color:#B3261E;min-height:0}
.field__error:empty{display:none}
.form [aria-invalid="true"]{border-color:#B3261E}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.altcha{margin-block:var(--space-4);max-width:100%;--altcha-border-width:1px;
  --altcha-border-radius:var(--radius-sm);--altcha-color-border:var(--color-line);
  --altcha-color-base:var(--color-surface);--altcha-color-text:var(--color-body)}
.form-status[data-state="ok"]{color:#0B6E4F;font-weight:var(--fw-medium)}

/* Die Auswahlliste trägt denselben Rahmen wie die übrigen Felder und einen eigenen Pfeil
   (ohne appearance:none zeichnet jedes System seinen eigenen, der nicht zum Rest passt). */
.form select{appearance:none;-webkit-appearance:none;background-repeat:no-repeat;
  background-position:right var(--space-4) center;background-size:14px;padding-right:var(--space-10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369727D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
/* ---- Hover ------------------------------------------------------------
   Eine Regel für alle Karten und Kacheln: leicht anheben, Schatten vertiefen,
   Rahmen auf die Marke. Nur für Geräte mit echtem Zeiger, und bei
   prefers-reduced-motion ohne Bewegung. */
@media (hover:hover){
  .form select:hover{border-color:var(--color-accent)}
  .card,.steps__item,.job,.partner,.reviews-slot{
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .card:hover,.steps__item:hover,.job:hover{
    transform:translateY(-4px);border-color:var(--color-accent-tint);
    box-shadow:0 24px 32px -12px rgb(10 193 220 / .22),0 8px 12px -8px rgb(0 0 0 / .12)}
  .section--ink .steps__item:hover{border-color:rgba(10,193,220,.5);
    background:rgba(255,255,255,.07);box-shadow:none}
  /* das Symbol füllt sich, sobald die Karte angefasst wird */
  .steps__item:hover .icon-badge{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
  .section--ink .steps__item:hover .icon-badge{background:var(--color-accent);color:#0f1c2e}
  .card--news:hover .card__media{transform:scale(1.03)}
  .card__media{transition:transform .3s ease}
  .partner:hover{transform:translateY(-2px)}
  .icon-list li:hover .icon{color:var(--color-accent-2);transform:translateX(2px)}
  .fab{transition:transform .2s ease,background-color .15s,color .15s}
  .fab:hover{transform:scale(1.07)}
  .logo{transition:opacity .2s ease}
  .logo:hover{opacity:.82}
  .footer-brand{transition:opacity .2s ease}
  .footer-brand:hover{opacity:.82}
  .btn{transition:background-color .15s,border-color .15s,color .15s,transform .15s,box-shadow .2s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 18px -8px rgb(3 155 174 / .5)}
  .btn--ghost:hover,.btn--on-dark:hover{box-shadow:none}
  /* Navigation: Unterstrich wächst von links */
  .site-nav a{position:relative}
  .site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
    background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  .site-nav a:hover::after{transform:scaleX(1)}
  .site-header .btn::after{display:none}
  .split__media,.hero-media img{transition:transform .35s ease}
  .split:hover .split__media{transform:scale(1.015)}
  .faq__item summary:hover .icon{background:var(--color-accent-tint);color:var(--color-accent-2)}
  .footer-social__link:hover{color:var(--color-accent);transform:translateY(-2px)}
  .footer-social__link{transition:color .2s ease,transform .2s ease}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .card:hover,.steps__item:hover,.job:hover,.btn:hover,.fab:hover,.partner:hover{transform:none}
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ankauf-hero{grid-template-columns:1fr}
}
@media (max-width:768px){
  .section{padding-block:var(--space-12)}
  .hero{padding-block:var(--space-12)}
  .hero-grid,.split{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .ticks--grid{grid-template-columns:1fr}
  .steps,.steps--2{grid-template-columns:1fr}
  .ankauf-hero,.faq-layout,.contact-card{grid-template-columns:minmax(0,1fr)}
  .faq-layout__head{position:static}
  .contact-card__info{border-right:0;border-bottom:1px solid var(--color-line)}
  .contact-card__info,.contact-card__form{padding:var(--space-8)}
  .contact-hero{padding-top:var(--space-12)}
  .contact-hero__bg{height:240px}
  .faq__a{padding-right:0}
  .cta-band__media::after{background:linear-gradient(180deg,rgba(15,28,46,.92),rgba(15,28,46,.8))}
  /* Handy: Bild oben, Text darunter, linksbündig */
  .card--news{grid-template-columns:1fr;gap:var(--space-8)}
  .card--news .card__media,.card--news picture.card__media{width:100%;border-radius:12px;overflow:hidden}
  /* Die Kampagnenkarte trägt eine Stichpunktliste: neben einem 150px-Bild blieben ihr 119px,
     die Liste lief aus der Seite. Auf dem Handy steht das Bild deshalb über dem Text. */
  .card--news-wide{grid-template-columns:1fr;gap:var(--space-8)}
  .card--news-wide .card__body{padding-right:0}
  .card--news.card--news-wide .card__media,.card--news-wide picture.card__media{width:100%}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .footer-bottom{justify-content:center;text-align:center;flex-direction:column}
  .partners{flex-direction:column;align-items:flex-start}
  .partner-row{justify-content:flex-start;gap:var(--space-6);flex-wrap:wrap}
  .split--media-first .split__media{order:-1}
  .nav-toggle{display:inline-grid}
  .logo img{height:56px}
  /* Schublade wie auf autohandeljakob.de: fest unter der Kopfzeile, blendet ein, Einträge folgen nacheinander */
  .site-nav{position:fixed;inset:var(--header-bottom,72px) 0 0;z-index:39;display:flex;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:var(--space-4) var(--space-4) var(--space-8);
    background:var(--color-surface);overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-16px);
    transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .5s}
  .site-nav.open{opacity:1;visibility:visible;transform:none;
    transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s}
  .site-nav li,.site-nav .nav-meta{opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease}
  .site-nav.open li,.site-nav.open .nav-meta{opacity:1;transform:none;
    transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1)}
  .site-nav.open li:nth-child(1){transition-delay:.06s}.site-nav.open li:nth-child(2){transition-delay:.11s}
  .site-nav.open li:nth-child(3){transition-delay:.16s}.site-nav.open li:nth-child(4){transition-delay:.21s}
  .site-nav.open li:nth-child(5){transition-delay:.26s}.site-nav.open .nav-meta{transition-delay:.35s}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav li+li{border-top:1px solid var(--color-line)}
  .site-nav a{display:block;padding:1rem 0;font-size:1.125rem}
  .site-nav a::after{display:none}
  .site-nav__cta{display:none}
  .nav-meta{display:grid;gap:var(--space-6);padding-top:var(--space-12);border-top:1px solid var(--color-line);font-size:.9375rem}
  .nav-meta p{margin:0}
  .nav-meta__label{font-family:var(--font-display);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-2)}
  .nav-meta a{display:inline-flex;align-items:center;gap:.6em;padding:0;font-size:inherit;font-weight:600;color:var(--color-ink)}
  .nav-meta .icon{width:18px;height:18px;flex:none;color:var(--color-accent-2)}
  /* Footer wie auf autohandeljakob.de: Markenblock zentriert, Trennlinie, Linkspalten linksbündig */
  /* Logo und Firmenname zentriert, danach Trennlinie, die Angaben darunter linksbündig bis zur nächsten Linie */
  .footer-grid>div:first-child{display:flex;flex-direction:column;align-items:stretch;text-align:left;
    padding-bottom:var(--space-8);border-bottom:1px solid var(--color-footer-line)}
  .footer-grid>div:first-child .footer-brand{align-self:center}
  .footer-grid>div:first-child h4{text-align:center;margin-bottom:var(--space-6);padding-bottom:var(--space-6);
    border-bottom:1px solid var(--color-footer-line)}
  .footer-grid>div:first-child .contact-actions{align-items:flex-start}
  .footer-grid>div:first-child .footer-social{justify-content:flex-start}
  .footer-bottom{flex-direction:column-reverse;align-items:center;gap:var(--space-5)}
  .job__head{flex-wrap:wrap;gap:var(--space-2)}
  .fab{width:48px;height:48px}
  .fab svg{width:26px;height:26px}
}

/* ---- Formular-Karte nach dem Muster des Autegro-Ankaufsformulars -------- */
.form--card{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-4);
  background:#fff;border:1px solid var(--color-line);border-radius:12px;box-shadow:var(--shadow-soft);padding:var(--space-6)}
.form--card .field--full,.form--card .form__head,.form--card .form__note{grid-column:1/-1}
.form__head h3{margin:0 0 var(--space-3);font-size:var(--fs-600)}
.form__bar{display:block;height:3px;border-radius:2px;background:var(--color-accent)}
.form--card label:not(.consent-field){font-size:.8125rem;font-weight:600}
.form--card input:not([type=checkbox]),.form--card select,.form--card textarea{font-size:.875rem;padding:.6rem .8rem;border-radius:8px;min-height:2.5rem}
.form--card textarea{min-height:6rem}
.form__note{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:.5rem .75rem;border-radius:6px;
  background:rgba(10,193,220,.1);color:var(--color-ink);font-size:.8125rem}
.form__note .icon{width:16px;height:16px;flex:none;color:var(--color-accent-2)}
.form__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4);margin-top:var(--space-2);
  padding-top:var(--space-4);border-top:1px solid var(--color-line)}
.form__foot .form-status{margin-right:auto}
@media (max-width:1024px){.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.form--card{grid-template-columns:minmax(0,1fr)}.steps--4{grid-template-columns:1fr}}

/* ---- Overlap-Slider (Osmo), Quelle: neudeck-odenwaelder.de ------------- */
.oslider{position:relative}
.oslider__viewport{overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  padding:12px 12px 32px;margin-inline:-12px;cursor:grab}
.oslider__viewport:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px;border-radius:var(--radius)}
.oslider__viewport.is-dragging{cursor:grabbing}
.oslider__viewport.is-dragging a,.oslider__viewport.is-dragging .steps__item{pointer-events:none}
.oslider__track{display:flex;gap:var(--space-4);align-items:stretch;width:max-content}
.oslider__item{display:flex;flex-direction:column;flex:0 0 clamp(280px,28vw,330px);
  transform-origin:left top;will-change:transform;align-self:stretch}
.oslider__track{will-change:transform}
.oslider__nav{display:flex;justify-content:center;gap:12px;margin-top:var(--space-1)}
.oslider__btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--color-line);background:#fff;color:var(--color-ink);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.oslider__btn:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.oslider__btn:disabled{opacity:.35;cursor:default}
.oslider__btn:disabled:hover{background:#fff;border-color:var(--color-line);color:var(--color-ink)}
.oslider__btn[data-oslider-prev] svg{transform:rotate(180deg)}
@media (max-width:767px){
  .oslider__viewport{padding-inline:0;margin-inline:0}
  .oslider__item{flex:0 0 calc(100vw - 2 * var(--space-4))}
}
@media (prefers-reduced-motion:reduce){.oslider__item{transform:none !important;opacity:1 !important}}

/* Text neben dem Formular bleibt beim Scrollen an der Oberkante kleben und wandert so an der
   Formularhöhe entlang nach unten (und beim Zurückscrollen wieder hoch). */
.split--follow{align-items:stretch}
.follow-copy{align-self:start;position:sticky;top:calc(var(--space-20) + var(--space-8))}
@media (max-width:1024px){.follow-copy{position:static}}

/* Inhalt in einer abgerundeten grauen Fläche statt eines vollbreiten Bandes */
.panel-soft{background:var(--color-surface-2);border-radius:var(--radius);padding:var(--space-12)}
@media (max-width:768px){
  /* Handy: Bild über die ganze Breite der Fläche, Text mit eigenem Innenabstand darunter */
  .panel-soft{padding:0;overflow:hidden;gap:0}
  .panel-soft picture,.panel-soft .split__media{display:block;width:100%;max-width:none;border-radius:0}
  .panel-soft>div{padding:var(--space-6)}
}

.contact-hero__bg picture img{object-position:50% 38%}
/* Foto-Band reicht am Rechner bis etwa zur Mitte der Karte (Kartenmitte ≈ 49 % der Sektionshöhe) */
@media (min-width:1025px){.contact-hero__bg{height:auto;bottom:49.8%}}

/* Handy: alle Buttons und CTAs über die volle Breite, untereinander */
@media (max-width:768px){
  .btn{display:flex;width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__foot .form-status{margin-right:0}
  .consent p .btn{flex:1 1 100%}
}

/* Handy: beide Partnerlogos gleich breit, damit die Namen untereinander an einer Linie stehen */
@media (max-width:768px){.partner img{width:64px;height:auto;max-height:none}}

.trust-line--reviews{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.trust-line--reviews a{color:var(--color-ink);text-decoration:none}
.trust-line--reviews a:hover{text-decoration:underline}
.trust-stars{color:#FBBC04;font-size:1.25rem;letter-spacing:.1em;line-height:1}
.contact-card__info,.contact-card__form{min-width:0}
.contact-card__info h1,.contact-card__info h2{overflow-wrap:break-word;hyphens:manual}
@media (max-width:480px){.contact-card__info h1,.contact-card__info h2{font-size:1.5rem}}
.form input:not([type=checkbox]),.form select,.form textarea{width:100%;min-width:0;box-sizing:border-box}
/* Kontakt: feste Zeilenumbrüche nur auf dem Handy (08.10.2026) */
.m-br,.m-hy{display:none}
@media (max-width:640px){.m-br,.m-hy{display:inline}}

/* News-Karten (08.10.2026 überarbeitet): Bild mit großem Radius und Innenabstand rundum,
   Text füllt die Kartenbreite, Überschrift größer, Buttons unten bündig. */
.card--news{padding:var(--space-5);gap:var(--space-8);border-radius:24px}
.card--news .card__media,.card--news picture.card__media,.card--news picture.card__media img{border-radius:18px}
.card--news picture.card__media{overflow:hidden;display:block}
.card--news .card__media img{width:100%;height:100%;object-fit:cover}
.card--news .card__body{padding:var(--space-4) var(--space-4) var(--space-4) 0}
.card--news .card__body h3{font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.2;margin-bottom:var(--space-4)}
.card--news-wide{grid-template-columns:minmax(0,420px) 1fr}
.card--news-wide picture.card__media{width:100%}
.card--news-wide .card__body{padding-right:var(--space-6)}
.card--news-wide .card__body>*{max-width:none}
.card--news-wide .card__body>p:not(.card__cta){max-width:40rem}
.card--news .card__cta{margin-top:auto;padding-top:var(--space-5)}
.card--news .card__price{font-size:var(--fs-600);font-weight:700;color:var(--color-accent-2)}
@media (max-width:1024px){
  .card--news,.card--news-wide{grid-template-columns:minmax(0,1fr)}
  .card--news .card__body,.card--news-wide .card__body{padding:0 var(--space-2) var(--space-3)}
  .card--news .card__media,.card--news picture.card__media{width:100%}
}
@media (max-width:560px){h1{overflow-wrap:anywhere;hyphens:auto}.legal h1,.prose h1{font-size:clamp(1.6rem,8vw,2.2rem)}}

/* Bestandsvorschau (Startseite, 12.10.2026): eigene Karten statt Autegro-Widget */
.vslider__frame{position:relative}
.vslider__track{list-style:none;margin:0;padding:var(--space-2) 0 var(--space-4);display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vslider__track::-webkit-scrollbar{display:none}
.vslider__item{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;min-width:0}
.vcard{display:block;height:100%;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.vcard:hover{transform:translateY(-3px)}
.vcard__media{display:block;aspect-ratio:4/3;background:var(--color-surface-2);overflow:hidden}
.vcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.vcard__body{display:grid;gap:var(--space-2);padding:var(--space-5)}
.vcard__title{font-weight:700;font-size:var(--fs-600);line-height:1.25}
.vcard__facts{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);color:var(--color-muted);font-size:var(--fs-sm)}
.vcard__price{font-weight:700;font-size:1.25rem;color:var(--color-accent-2);margin-top:var(--space-1)}
.vslider__nav{position:absolute;top:calc(50% - 40px);width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2);font-size:1.6rem;line-height:1;cursor:pointer;display:none}
.vslider__nav--prev{left:-12px}.vslider__nav--next{right:-12px}
@media (min-width:1025px){.vslider__nav{display:grid;place-items:center}}
@media (max-width:1024px){.vslider__item{flex-basis:calc((100% - 20px)/2)}}
@media (max-width:640px){.vslider__item{flex-basis:84%}}

/* Überschrift links, CTA oben rechts auf der Überschriftenzeile (Startseite, Bestand) */
.section-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6)}
.section-bar .section-head{margin-bottom:0}
.section-bar .btn{flex:none}
@media (max-width:640px){.section-bar{flex-direction:column;align-items:stretch;gap:var(--space-5)}}

/* Werkstatt-Termin: Karte mit Button statt Formular (Autegro-Widget öffnet das Popup) */
.termin-card{display:grid;gap:var(--space-4);align-content:start;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--space-8)}
.termin-card h3{margin:0;font-size:var(--fs-600)}
.termin-card p{margin:0}
.termin-card .ticks{margin:0}
.termin-card__cta{margin-top:var(--space-2)!important}
.termin-card__note{font-size:var(--fs-sm);color:var(--color-muted)}
#consent-banner.is-nudged{animation:nudge .6s ease 2}
@keyframes nudge{50%{transform:translateY(-6px)}}
@media (max-width:640px){.termin-card{padding:var(--space-6)}.termin-card .btn{width:100%}}
.reviews-facade--form{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow-card)}