/* =========================================================================
   Ulis Textildruck — Richtung "Faden"
   Siehe DESIGN.md. Radien 0, ein Akzent, keine Karten, keine Verläufe als Deko.
   ========================================================================= */

/* ---------- Schriften (lokal gehostet, kein CDN, kein Consent nötig) ------ */
@font-face{
  font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/archivo-black-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/archivo-black-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  --indigo:#161C33;
  --indigo-2:#1E2540;
  --indigo-3:#0F1425;
  --cream:#EFE9DC;
  --cream-2:#B9B2A4;
  --red:#D6412F;
  --red-hi:#E4523F;
  --red-dk:#BE3020;  /* Button-Hover: Weiß darauf 5.78:1 */
  --red-txt:#E86752; /* nur für kleine rote Textzeichen: 5.2:1 auf --indigo */
  --line:rgba(239,233,220,.16);
  --line-strong:rgba(239,233,220,.32);

  --disp:"Archivo Black",Impact,"Haettenschweiler","Arial Black",system-ui,sans-serif;
  --sans:"Inter Tight","Inter","Helvetica Neue",Arial,system-ui,sans-serif;

  --pad:40px;
  --s-lg:120px;
  --s-md:96px;
  --s-sm:64px;
}
@media (max-width:860px){
  :root{--pad:20px;--s-lg:72px;--s-md:56px;--s-sm:44px}
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Das hidden-Attribut muss staerker sein als jede display-Regel weiter unten
   (.btn, .filter, .wizard__nav) - sonst bleiben ausgeblendete Elemente sichtbar. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--indigo);color:var(--cream);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}

:focus-visible{outline:2px solid var(--red-hi);outline-offset:3px}
::selection{background:var(--red);color:#fff}

.wrap{max-width:1280px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--red);color:#fff;padding:14px 22px;font-weight:600;
}
.skip:focus{left:0}

/* ---------- Typo-Rollen -------------------------------------------------- */
.disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:-.015em;line-height:.94}
h1.disp{font-size:clamp(40px,7vw,104px)}
h2.disp{font-size:clamp(28px,4vw,58px)}
h3.disp{font-size:clamp(24px,2.9vw,40px)}
.kicker{
  display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-2);font-weight:600;
}
.lede{font-size:clamp(17px,1.35vw,19px);color:var(--cream);max-width:46ch}
.muted{color:var(--cream-2)}
.measure{max-width:46ch}

/* ---------- Buttons ------------------------------------------------------ */
.btn{
  display:inline-block;text-decoration:none;font-weight:600;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:18px 32px;border:1px solid transparent;background:var(--red);color:#fff;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
  min-height:44px;
}
.btn:hover{background:var(--red-dk)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--cream)}
.btn--ghost:hover{background:transparent;border-color:var(--cream);color:var(--cream)}
.btn--block{display:block;width:100%;text-align:center}

.tlink{
  color:var(--cream);text-decoration:underline;text-decoration-color:var(--red);
  text-underline-offset:4px;text-decoration-thickness:2px;
}
.tlink:hover{text-decoration-color:var(--cream)}

.arrowlink{
  display:inline-block;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;text-decoration:none;color:var(--cream);
  border-bottom:1px solid var(--red);padding-bottom:6px;
  transition:border-color .2s ease;min-height:44px;
}
.arrowlink:hover{border-bottom-color:var(--cream)}

/* ---------- Header ------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background-color .2s ease,border-color .2s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-solid{background:var(--indigo);border-bottom-color:var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:44px;width:auto}
.nav-desktop ul{display:flex;gap:32px;align-items:center}
.nav-desktop a{
  text-decoration:none;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--cream);opacity:.78;padding:12px 0;display:inline-block;
  border-bottom:1px solid transparent;transition:opacity .18s ease,border-color .18s ease;
}
.nav-desktop a:hover{opacity:1}
.nav-desktop a[aria-current="page"]{opacity:1;border-bottom-color:var(--red)}
.header-cta{
  display:inline-flex;align-items:center;min-height:44px;padding:12px 20px;
  border:1px solid var(--line-strong);text-decoration:none;color:var(--cream);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:border-color .2s ease;white-space:nowrap;
}
.header-cta:hover{border-color:var(--cream)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);color:var(--cream);
  width:48px;height:44px;cursor:pointer;padding:0;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  display:block;width:20px;height:2px;background:var(--cream);margin:0 auto;position:relative;
}
.nav-toggle span::before{content:"";position:absolute;top:-6px}
.nav-toggle span::after{content:"";position:absolute;top:6px}
.nav-mobile{display:none;background:var(--indigo);border-top:1px solid var(--line)}
.nav-mobile[data-open="true"]{display:block}
.nav-mobile a{
  display:block;padding:18px var(--pad);text-decoration:none;font-size:15px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line);
}
.nav-mobile a[aria-current="page"]{color:var(--red-txt)}

@media (max-width:1040px){
  .nav-desktop,.header-cta{display:none}
  .nav-toggle{display:block}
}

/* ---------- Hero --------------------------------------------------------- */
.hero{
  position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;
  overflow:hidden;padding-top:120px;
}
.hero__bg{position:absolute;inset:-6% 0;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.06) brightness(.92)}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,28,51,.86) 0%,rgba(22,28,51,.42) 34%,rgba(22,28,51,.80) 72%,var(--indigo) 100%);
}
.hero .wrap{position:relative;width:100%;padding-bottom:clamp(48px,6vw,84px)}
.hero h1{margin-top:20px;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--red-hi)}
.hero__sub{
  display:flex;align-items:flex-end;justify-content:space-between;gap:56px;
  margin-top:clamp(28px,3vw,40px);padding-top:26px;border-top:1px solid var(--line-strong);
}
.hero__sub p{max-width:46ch}
@media (max-width:860px){
  .hero{min-height:auto;padding-top:104px}
  .hero__sub{flex-direction:column;align-items:flex-start;gap:26px}
  .hero__bg{inset:0}
}

/* Kleinerer Seitenkopf für Unterseiten */
.pagehead{padding:calc(104px + var(--s-sm)) 0 var(--s-sm);border-bottom:1px solid var(--line)}
.pagehead h1{margin-top:18px;max-width:16ch}
.pagehead p{margin-top:26px}

/* ---------- Statement ---------------------------------------------------- */
.statement{padding:var(--s-lg) 0;text-align:center;border-bottom:1px solid var(--line)}
.statement h2{max-width:20ch;margin:18px auto 0}
.statement__rule{width:56px;height:2px;background:var(--red);margin:32px auto 0}

/* ---------- Kapitel ------------------------------------------------------ */
.chapter{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.chapter__img{position:relative;overflow:hidden;background:var(--indigo-3);min-height:520px}
.chapter__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.chapter__cap{
  position:absolute;left:0;bottom:0;background:rgba(15,20,37,.86);
  padding:10px 18px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-2);font-weight:600;
}
.chapter__txt{padding:clamp(48px,6vw,96px) clamp(20px,5vw,76px);display:flex;flex-direction:column;justify-content:center}
.chapter__num{font-family:var(--disp);font-size:14px;letter-spacing:.1em;color:var(--red-txt);text-transform:uppercase}
.chapter__txt h3{margin:16px 0 20px;max-width:15ch}
.chapter__txt p{color:var(--cream-2);max-width:46ch}
.chapter__txt .arrowlink{margin-top:30px;align-self:flex-start}
.chapter--rev .chapter__img{order:2}
@media (max-width:860px){
  .chapter{grid-template-columns:1fr}
  .chapter__img{min-height:0;height:clamp(240px,58vw,340px);order:0!important}
  .chapter__txt{padding:44px var(--pad) 52px}
}

/* ---------- Verfahrensband ---------------------------------------------- */
.strip{padding:30px 0;overflow:hidden;background:var(--indigo-2);border-bottom:1px solid var(--line)}
.strip__row{display:flex;width:max-content;animation:marquee 40s linear infinite}
.strip__row span{
  font-family:var(--disp);font-size:clamp(18px,2vw,26px);text-transform:uppercase;
  color:rgba(239,233,220,.30);padding:0 26px;white-space:nowrap;
}
.strip__row span.on{color:var(--cream)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sektionen ---------------------------------------------------- */
.sec{padding:var(--s-md) 0}
.sec--line{border-bottom:1px solid var(--line)}
.sec__head{margin-bottom:clamp(32px,4vw,52px)}
.sec__head h2{margin-top:16px}
.sec__head p{margin-top:20px;color:var(--cream-2);max-width:52ch}

/* Verfahrensliste (Tabelle ohne Karten) */
.methods{border-top:1px solid var(--line-strong)}
.method{
  display:grid;grid-template-columns:56px 1.1fr 1.9fr;gap:24px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--line);
}
.method__n{font-family:var(--disp);font-size:14px;color:var(--red-txt);padding-top:5px}
.method h3{font-family:var(--disp);font-size:clamp(19px,1.7vw,24px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.method__meta{margin-top:10px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);font-weight:600}
.method p{color:var(--cream-2)}
@media (max-width:860px){
  .method{grid-template-columns:40px 1fr;gap:16px}
  .method p{grid-column:2}
}

/* Faktenzeile */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.facts div{padding:32px 28px 32px 0}
.facts div+div{padding-left:32px;border-left:1px solid var(--line)}
.facts b{display:block;font-family:var(--disp);font-size:clamp(24px,2.4vw,34px);text-transform:uppercase;letter-spacing:-.01em}
.facts span{display:block;margin-top:8px;color:var(--cream-2);font-size:14.5px;line-height:1.45}
@media (max-width:860px){
  .facts{grid-template-columns:1fr 1fr}
  .facts div{padding:24px 16px 24px 0}
  .facts div+div{padding-left:20px}
  .facts div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .facts div:nth-child(4){border-top:1px solid var(--line)}
}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.gallery figure{margin:0;position:relative;background:var(--indigo-3);overflow:hidden}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.gallery figcaption{
  padding:14px 16px 18px;display:flex;justify-content:space-between;gap:12px;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;background:var(--indigo);
}
.gallery figcaption b{font-weight:600}
.gallery figcaption span{color:var(--cream-2)}
.gallery--wide{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.gallery,.gallery--wide{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.gallery,.gallery--wide{grid-template-columns:1fr}}

/* Team */
.team{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.team figure{margin:0;background:var(--indigo)}
.team img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 30%;filter:saturate(.9) contrast(1.05)}
.team figcaption{padding:22px 0 0}
.team figcaption b{display:block;font-family:var(--disp);text-transform:uppercase;font-size:19px;letter-spacing:-.01em}
.team figcaption span{color:var(--cream-2);font-size:14.5px}
@media (max-width:640px){.team{grid-template-columns:1fr}}

/* FAQ */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:26px 44px 26px 0;position:relative;
  font-family:var(--disp);text-transform:uppercase;font-size:clamp(16px,1.5vw,20px);
  letter-spacing:-.01em;line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;background:var(--red-hi);
  transform:translateY(-50%);
}
.faq summary::before{
  content:"";position:absolute;right:12px;top:50%;width:2px;height:14px;background:var(--red-hi);
  transform:translateY(-50%);transition:opacity .2s ease;
}
.faq details[open] summary::before{opacity:0}
.faq .faq__body{padding:0 0 28px;color:var(--cream-2);max-width:62ch}
.faq .faq__body p+p{margin-top:14px}
.faq .faq__body ul{list-style:disc;padding-left:20px;margin-top:12px}
.faq .faq__body li{margin-bottom:6px}

/* ---------- Kontakt / Formular ------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.dl-contact{display:grid;grid-template-columns:auto 1fr;gap:14px 24px;margin-top:28px}
.dl-contact dt{color:var(--cream-2);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding-top:2px}
.dl-contact dd{margin:0}
.dl-contact a{display:inline-block;padding:6px 0;color:var(--cream);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}

.field{padding:0 0 4px;margin-bottom:24px}
.field label{
  display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-2);font-weight:600;margin-bottom:8px;
}
.field .req{color:var(--red-txt)}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  color:var(--cream);font-family:var(--sans);font-size:16.5px;padding:10px 0;border-radius:0;
  min-height:44px;
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cream-2) 50%),linear-gradient(135deg,var(--cream-2) 50%,transparent 50%);background-position:calc(100% - 14px) 22px,calc(100% - 8px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:var(--indigo-2);color:var(--cream)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--red-hi)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:2px solid var(--red-hi);outline-offset:4px}
.field .hint{margin-top:8px;font-size:13.5px;color:var(--cream-2)}
.form-note{margin-top:18px;font-size:13.5px;color:var(--cream-2);max-width:52ch}
.form-status{margin-top:18px;font-size:15px;padding:14px 18px;border:1px solid var(--line-strong)}
.form-status[hidden]{display:none}
.form-status.is-error{border-color:var(--red);color:var(--cream)}

/* ---------- Footer ------------------------------------------------------- */
.site-footer{background:var(--indigo-3);border-top:1px solid var(--line);padding:var(--s-sm) 0 36px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.site-footer h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2);font-weight:600;margin-bottom:16px}
.site-footer a{color:var(--cream);text-decoration:none;font-size:15px;display:inline-block;padding:5px 0}
.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer img.mark{height:52px;width:auto}
.foot-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:13.5px;color:var(--cream-2);
}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---------- 404 ---------------------------------------------------------- */
/* Nicht .err nennen - so heissen die Fehlermeldungen im Formular. */
.errpage{min-height:70vh;display:flex;align-items:center;padding:calc(104px + var(--s-sm)) 0 var(--s-md)}

/* ---------- Bewegung ----------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .strip__row{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .hero__bg{transform:none!important}
}

/* ---------- Logo auf dunklem Grund --------------------------------------
   Die Logodatei ist schwarze Tusche auf Transparenz. brightness(0) invert(1)
   färbt alle deckenden Pixel weiß und lässt die Transparenz unangetastet. */
.brand img,.site-footer img.mark{filter:brightness(0) invert(1)}

/* ---------- Korrektur: Kapitelbilder füllen die Zeile -------------------
   height:100% greift nur gegen eine definite Höhe. Die Kapitelzeile wächst
   mit der Textspalte, deshalb wird das Bild absolut über die Fläche gelegt. */
.chapter__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Korrektur: Hero-Lesbarkeit ---------------------------------
   Das Heromotiv ist eine helle Aufnahme. Ein rein vertikaler Schleier müsste
   so dunkel sein, dass vom Foto nichts bliebe. Stattdessen zwei Ebenen:
   vertikal nur so viel, dass das Bild in den Grund übergeht — horizontal ein
   Scrim, der die linke Textspalte trägt und die rechte Bildhälfte frei lässt.
   Gemessen: Kicker und h1 erreichen damit WCAG AA gegen die hellsten Bildstellen. */
.hero__veil{
  background:linear-gradient(180deg,
    rgba(22,28,51,.62) 0%,
    rgba(22,28,51,.30) 26%,
    rgba(22,28,51,.62) 72%,
    var(--indigo) 100%);
}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(15,20,37,.94) 0%,
    rgba(15,20,37,.90) 34%,
    rgba(15,20,37,.62) 56%,
    rgba(15,20,37,0) 80%);
}
@media (max-width:860px){
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(15,20,37,.46) 0%,
      rgba(15,20,37,.72) 42%,
      rgba(15,20,37,.90) 100%);
  }
}

/* ---------- Rechtstexte (Langform) --------------------------------------
   Ausnahme zur 46ch-Regel aus DESIGN.md: juristische Fließtexte werden bei
   46 Zeichen unlesbar zerhackt. Deshalb 68ch, dafür größere Zeilenhöhe. */
.legal{padding:calc(104px + var(--s-sm)) 0 var(--s-md)}
.legal .wrap{max-width:940px}
.prose{max-width:68ch;font-size:16.5px;line-height:1.72;color:var(--cream)}
.prose > * + *{margin-top:18px}
.prose h2{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;
  font-size:clamp(20px,2.1vw,27px);margin-top:56px;padding-top:22px;border-top:1px solid var(--line);
}
.prose h2:first-of-type{margin-top:44px}
.prose h3{
  font-family:var(--sans);font-weight:600;font-size:17.5px;letter-spacing:.01em;
  margin-top:32px;color:var(--cream);
}
.prose p,.prose li{color:var(--cream-2)}
.prose strong{color:var(--cream);font-weight:600}
.prose ul,.prose ol{padding-left:22px;margin-top:12px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--cream-2)}
.prose a{
  color:var(--cream);text-decoration:underline;text-decoration-color:var(--red);
  text-underline-offset:4px;word-break:break-word;
}
.prose a:hover{text-decoration-color:var(--cream)}
.prose address{font-style:normal;color:var(--cream);line-height:1.7}
.legal__meta{
  margin-top:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-2);font-weight:600;
}
.legal__toc{
  margin:40px 0 0;padding:24px 0 4px;border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line);
}
.legal__toc ul{columns:2;column-gap:40px;padding:0}
.legal__toc li{margin-bottom:10px;break-inside:avoid}
.legal__toc a{
  color:var(--cream-2);text-decoration:none;font-size:15px;
  display:inline-block;padding:4px 0;border-bottom:1px solid transparent;
}
.legal__toc a:hover{color:var(--cream);border-bottom-color:var(--red)}
@media (max-width:640px){.legal__toc ul{columns:1}}

/* Lange deutsche Komposita in Rechtstexten ("Verbraucherstreitbeilegung",
   "Sachmängelgewährleistung") sprengen auf schmalen Displays die Zeile.
   Silbentrennung greift über lang="de" am <html>; break-word ist der Notnagel. */
.prose h2,.prose h3{hyphens:auto;overflow-wrap:break-word}
.prose p,.prose li,.prose address{hyphens:auto}

/* Faktenzeile: "8 Verfahren" sprengt bei 320 px die halbe Spalte. */
.facts div{min-width:0}
.facts b{overflow-wrap:anywhere;hyphens:auto}

/* =========================================================================
   ERWEITERUNG — Bausteine aus der Struktur-Zusammenführung
   Gleiche Regeln wie oben: Radius 0, ein Akzent, keine Karten, keine
   Verläufe als Deko. Trennung passiert über 1px-Linien, nicht über Flächen.
   ========================================================================= */

/* ---------- Kopf: Untermenüs -------------------------------------------- */
.nav-desktop .has-sub{position:relative}
.nav-desktop .has-sub > button{
  background:none;border:0;cursor:pointer;color:var(--cream);opacity:.78;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;padding:12px 0;display:inline-flex;align-items:center;gap:7px;
  border-bottom:1px solid transparent;transition:opacity .18s ease,border-color .18s ease;
}
.nav-desktop .has-sub > button:hover{opacity:1}
.nav-desktop .has-sub > button[aria-expanded="true"]{opacity:1;border-bottom-color:var(--red)}
.nav-desktop .has-sub.is-current > button{opacity:1;border-bottom-color:var(--red)}
.nav-desktop .has-sub > button svg{transition:transform .2s ease}
.nav-desktop .has-sub > button[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-desktop .sub-menu{
  position:absolute;top:calc(100% + 18px);left:-24px;min-width:290px;z-index:60;
  background:var(--indigo-3);border:1px solid var(--line-strong);padding:6px 0;display:none;
}
.nav-desktop .has-sub[data-open="true"] .sub-menu{display:block}
.nav-desktop .sub-menu a{
  display:block;padding:14px 24px;opacity:1;border-bottom:0;text-transform:none;
  letter-spacing:.01em;font-size:15px;font-weight:600;
}
.nav-desktop .sub-menu a small{
  display:block;margin-top:3px;font-size:12.5px;font-weight:400;letter-spacing:.01em;
  color:var(--cream-2);text-transform:none;
}
.nav-desktop .sub-menu a:hover{background:var(--indigo-2)}
.nav-desktop .sub-menu a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--red)}
.nav-desktop .sub-menu li + li{border-top:1px solid var(--line)}

/* Kopf: zwei Aktionen nebeneinander */
.header-actions{display:flex;align-items:center;gap:12px}
.btn--sm{padding:13px 22px;font-size:11.5px;letter-spacing:.16em;min-height:44px}
@media (max-width:1240px){.header-cta{display:none}}
@media (max-width:1040px){.header-actions{display:none}}

/* ---------- Mobiles Menü: Gruppen --------------------------------------- */
.nav-mobile{max-height:calc(100vh - 82px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav-mobile .group{
  padding:20px var(--pad) 8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-2);font-weight:600;border-bottom:1px solid var(--line);
}
.nav-mobile a.sub{padding-left:calc(var(--pad) + 18px);font-size:14px;color:var(--cream-2);text-transform:none;letter-spacing:.01em}
.nav-mobile a.sub[aria-current="page"]{color:var(--red-txt)}
.nav-mobile .mob-cta{padding:22px var(--pad) 26px;border-bottom:0;display:grid;gap:12px}
.nav-mobile .mob-cta .btn{padding:16px 22px}

/* ---------- Mobile Aktionsleiste ---------------------------------------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  grid-template-columns:1fr 1fr;background:var(--indigo-3);border-top:1px solid var(--line-strong);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar a{
  display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;
  text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--cream);
}
.actionbar a + a{background:var(--red);color:#fff}
.actionbar a + a:hover{background:var(--red-dk)}
.actionbar svg{flex:none}
@media (max-width:860px){
  .actionbar{display:grid}
  body{padding-bottom:56px}
  .site-footer{padding-bottom:20px}
}
@media print{.actionbar{display:none}}

/* ---------- Brotkrumen --------------------------------------------------- */
.crumbs{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--cream-2)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{content:"/";color:rgba(239,233,220,.34)}
.crumbs a{text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:var(--red)}
.crumbs [aria-current="page"]{color:var(--cream)}
.pagehead .crumbs{margin-bottom:22px}

/* ---------- Rasterlisten (Leistungen, Vorteile) -------------------------
   Kein Kartenlook: die Zellen werden nur durch Linien getrennt. */
.grid-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong)}
.grid-list--2{grid-template-columns:repeat(2,1fr)}
.grid-list--4{grid-template-columns:repeat(4,1fr)}
.grid-list > *{padding:32px 32px 34px 0;border-bottom:1px solid var(--line);min-width:0}
.grid-list > * + *{padding-left:32px;border-left:1px solid var(--line)}
.grid-list h3{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;
  font-size:clamp(17px,1.5vw,21px);hyphens:auto;overflow-wrap:break-word;
}
.grid-list p{margin-top:12px;color:var(--cream-2);font-size:15.5px}
.grid-list .num{display:block;font-family:var(--disp);font-size:13px;color:var(--red-txt);margin-bottom:12px}
@media (max-width:900px){
  .grid-list,.grid-list--4{grid-template-columns:1fr 1fr}
  .grid-list > *{padding:26px 20px 28px 0}
  .grid-list > * + *{padding-left:22px}
  .grid-list > *:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:560px){
  .grid-list,.grid-list--2,.grid-list--4{grid-template-columns:1fr}
  .grid-list > *{padding:24px 0 26px;border-left:0!important;padding-left:0!important}
}

/* ---------- Ablaufschritte ----------------------------------------------- */
.steps{counter-reset:s;border-top:1px solid var(--line-strong)}
.steps li{
  display:grid;grid-template-columns:82px 1fr;gap:26px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--line);
}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--disp);font-size:clamp(26px,3vw,40px);color:var(--red-txt);line-height:.9;
}
.steps h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(18px,1.7vw,23px);letter-spacing:-.01em;line-height:1.1}
.steps p{margin-top:10px;color:var(--cream-2);max-width:58ch}
.steps .when{
  display:inline-block;margin-top:12px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--cream);border:1px solid var(--line-strong);padding:7px 12px;
}
@media (max-width:560px){.steps li{grid-template-columns:52px 1fr;gap:16px}}

/* ---------- Vergleichstabelle -------------------------------------------- */
.tablewrap{overflow-x:auto;border-top:1px solid var(--line-strong);-webkit-overflow-scrolling:touch}
.ctable{width:100%;border-collapse:collapse;min-width:660px;font-size:15.5px}
.ctable th,.ctable td{text-align:left;padding:18px 20px 18px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ctable thead th{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-2);font-weight:600;
  border-bottom:1px solid var(--line-strong);white-space:nowrap;
}
.ctable tbody th{
  font-family:var(--disp);text-transform:uppercase;font-size:16px;letter-spacing:-.01em;font-weight:400;
  white-space:nowrap;padding-right:28px;
}
.ctable td{color:var(--cream-2)}
.ctable .yes{color:var(--cream)}
.ctable .no{color:rgba(239,233,220,.42)}
.tablehint{margin-top:14px;font-size:13.5px;color:var(--cream-2)}

/* ---------- Merkmalspaare (Was geht / Was nicht) ------------------------- */
.pros{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-strong)}
.pros > div{padding:30px 30px 32px 0;border-bottom:1px solid var(--line)}
.pros > div + div{padding-left:32px;border-left:1px solid var(--line)}
.pros h3{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--cream-2);font-family:var(--sans)}
.pros ul{margin-top:18px}
.pros li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--cream-2)}
.pros li::before{position:absolute;left:0;top:0;font-weight:600}
.pros .ok li::before{content:"+";color:var(--red-hi)}
.pros .nok li::before{content:"\2013";color:rgba(239,233,220,.42)}
@media (max-width:640px){
  .pros{grid-template-columns:1fr}
  .pros > div + div{padding-left:0;border-left:0}
}

/* ---------- Hinweisblock -------------------------------------------------- */
.note{border-left:2px solid var(--red);padding:4px 0 4px 24px;color:var(--cream-2);max-width:62ch}
.note b{color:var(--cream);display:block;margin-bottom:6px;font-weight:600}

/* ---------- Zitat --------------------------------------------------------- */
.quote{border-top:1px solid var(--line-strong);padding-top:34px;max-width:64ch}
.quote blockquote{
  margin:0;font-family:var(--disp);text-transform:uppercase;letter-spacing:-.01em;line-height:1.12;
  font-size:clamp(19px,2.1vw,28px);
}
.quote figcaption{margin-top:20px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2);font-weight:600}

/* ---------- Filterchips (Arbeiten) --------------------------------------- */
.filter{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;padding-bottom:30px}
.filter__set{min-width:0}
.filter__lab{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-2);font-weight:600;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:transparent;border:1px solid var(--line-strong);color:var(--cream);cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:11px 16px;min-height:44px;transition:border-color .18s ease,background-color .18s ease;
}
.chip:hover{border-color:var(--cream)}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.filter__count{font-size:13.5px;color:var(--cream-2);margin-left:auto;padding-bottom:12px}
.gallery figure[hidden]{display:none}
.empty{padding:64px 0;text-align:center;color:var(--cream-2)}
.empty[hidden]{display:none}

/* ---------- Mehrstufiges Formular ---------------------------------------- */
.wizard{max-width:640px}
.wizard__nav{
  display:flex;gap:0;list-style:none;margin:0 0 38px;padding:0;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);
}
.wizard__nav li{flex:1;min-width:0}
.wizard__nav b{
  display:block;padding:16px 8px 16px 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:rgba(239,233,220,.42);border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wizard__nav li[data-state="now"] b{color:var(--cream);border-bottom-color:var(--red)}
.wizard__nav li[data-state="done"] b{color:var(--cream-2);border-bottom-color:var(--line-strong)}
.wizard__step[hidden]{display:none}
.wizard__step > .kicker{margin-bottom:10px}
.wizard__step > h2{margin-bottom:30px}
.wizard__foot{display:flex;gap:14px;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.wizard__foot .btn{flex:none}
.wizard__foot .spacer{flex:1}

/* Optionskacheln (Radio / Checkbox ohne Kartenlook) */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opts--2{grid-template-columns:repeat(2,1fr)}
.opts input{position:absolute;opacity:0;width:1px;height:1px}
.opts label{
  display:block;border:1px solid var(--line-strong);padding:16px 18px;cursor:pointer;
  font-size:15px;font-weight:600;transition:border-color .18s ease,background-color .18s ease;min-height:44px;
}
.opts label small{display:block;margin-top:5px;font-size:12.5px;font-weight:400;color:var(--cream-2)}
.opts label:hover{border-color:var(--cream)}
.opts input:checked + label{border-color:var(--red);background:rgba(214,65,47,.12)}
.opts input:focus-visible + label{outline:2px solid var(--red-hi);outline-offset:3px}
@media (max-width:640px){.opts,.opts--2{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.opts,.opts--2{grid-template-columns:1fr}}

/* Fehlerzustände */
.field [aria-invalid="true"]{border-bottom-color:var(--red-hi)}
.field .err{display:none;margin-top:9px;font-size:14px;color:var(--red-txt)}
.field[data-error="true"] .err{display:block}
.fieldset{border:0;padding:0;margin:0 0 26px}
.fieldset legend{
  padding:0;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-2);font-weight:600;margin-bottom:12px;
}
.fieldset .err{display:none}
.fieldset[data-error="true"] .err{display:block;margin-top:11px;font-size:14px;color:var(--red-txt)}

/* Dateiliste */
.filelist{margin-top:12px;font-size:14px;color:var(--cream-2)}
.filelist li{padding:6px 0;border-bottom:1px solid var(--line)}

/* Einwilligung */
.consent{display:flex;gap:14px;align-items:flex-start;margin-bottom:26px;flex-wrap:wrap}
.consent input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--red)}
.consent label{font-size:14.5px;color:var(--cream-2);line-height:1.55;flex:1;min-width:200px}
.consent a{color:var(--cream);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.consent .err{display:none;width:100%}
.consent[data-error="true"] .err{display:block;margin-top:8px;font-size:14px;color:var(--red-txt)}

/* Zusammenfassung */
.summary{border-top:1px solid var(--line-strong);margin-bottom:30px}
.summary div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.summary dt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2);font-weight:600;padding-top:3px}
.summary dd{margin:0;overflow-wrap:anywhere}
@media (max-width:480px){.summary div{grid-template-columns:1fr;gap:4px}}

/* ---------- Preisfaktoren ------------------------------------------------- */
.factors{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.factors > div{padding:30px 26px 32px 0;min-width:0}
.factors > div + div{padding-left:28px;border-left:1px solid var(--line)}
.factors h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.01em}
.factors p{margin-top:12px;color:var(--cream-2);font-size:15.5px}
@media (max-width:900px){
  .factors{grid-template-columns:1fr 1fr}
  .factors > div:nth-child(odd){border-left:0;padding-left:0}
  .factors > div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .factors{grid-template-columns:1fr}
  .factors > div{border-left:0!important;padding-left:0!important}
  .factors > div + div{border-top:1px solid var(--line)}
}

/* ---------- Zielgruppen-Teaser (Startseite) ------------------------------ */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.audience a{
  display:block;text-decoration:none;background:var(--indigo);padding:38px 34px 42px;
  transition:background-color .2s ease;
}
.audience a:hover{background:var(--indigo-2)}
.audience .num{font-family:var(--disp);font-size:13px;color:var(--red-txt)}
.audience h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,2vw,28px);letter-spacing:-.01em;margin-top:14px;line-height:1.05}
.audience p{margin-top:14px;color:var(--cream-2);font-size:15.5px}
.audience .go{
  display:inline-block;margin-top:24px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;border-bottom:1px solid var(--red);padding-bottom:5px;
}
@media (max-width:860px){.audience{grid-template-columns:1fr}}

/* ---------- Markenband ---------------------------------------------------- */
.brands{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.brands span{border:1px solid var(--line-strong);padding:11px 16px;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--cream-2)}

/* ---------- Sprungmarken unter fixem Kopf -------------------------------- */
:target{scroll-margin-top:110px}

/* Zweispaltige Galerie (Fahrzeugseite). Als Klasse statt inline, damit die
   Umbruchregeln der Media Queries greifen — ein inline style haette sie
   ueberstimmt und die Bildunterschrift bei 375 px aus dem Raster geschoben. */
.gallery--two{grid-template-columns:1fr 1fr}
.gallery--two img{aspect-ratio:4/3}
@media (max-width:560px){.gallery--two{grid-template-columns:1fr}}

/* Bildunterschriften: lange Begriffe duerfen umbrechen statt herauszuragen. */
.gallery figcaption{flex-wrap:wrap}
.gallery figcaption b,.gallery figcaption span{min-width:0;overflow-wrap:anywhere}

/* Rasterkinder duerfen schmaler werden als ihr Inhalt. Ohne min-width:0
   bleibt eine Spalte auf ihrer min-content-Breite stehen und schiebt die
   ganze Seite seitlich heraus. */
.contact-grid > *{min-width:0}

/* Formularsteuerung: die drei Schaltflaechen passen nebeneinander erst ab
   etwa 520 px. Darunter brechen sie um und teilen sich die Zeile. */
@media (max-width:520px){
  .wizard__foot{flex-wrap:wrap}
  .wizard__foot .spacer{display:none}
  .wizard__foot .btn{flex:1 1 140px;text-align:center;padding-left:18px;padding-right:18px}
}

/* Öffnungszeiten: Tag und Zeit in zwei Spalten, damit die Zeiten
   untereinander stehen statt zu flattern. */
.hours{
  display:grid;grid-template-columns:52px 1fr;gap:10px;
  font-size:15px;color:var(--cream);padding:4px 0;
}
.hours span{color:var(--cream-2)}
.site-footer .hours{font-size:14.5px}

/* Rasterlisten: Korrektur der Trennlinien bei Zeilenumbruch ------------
   `> * + *` setzt die linke Linie auf jedes Element ausser dem ersten —
   also auch auf das erste Element der zweiten und dritten Zeile, wo sie als
   freistehender Strich am linken Spaltenrand steht. Der erste Eintrag jeder
   Zeile bekommt sie deshalb wieder abgenommen, je nach Spaltenzahl. */
.grid-list > *:nth-child(3n+1){border-left:0;padding-left:0}
.grid-list--2 > *:nth-child(2n+1){border-left:0;padding-left:0}
.grid-list--4 > *:nth-child(4n+1){border-left:0;padding-left:0}
/* Unterhalb von 900px laufen alle Varianten zweispaltig, dort gilt 2n+1.
   Die Regel dafuer steht bereits im Block oben (nth-child(odd)). */
@media (min-width:901px){
  .grid-list--2 > *:nth-child(3n+1){border-left:1px solid var(--line);padding-left:32px}
  .grid-list--2 > *:nth-child(2n+1){border-left:0;padding-left:0}
  .grid-list--4 > *:nth-child(3n+1){border-left:1px solid var(--line);padding-left:32px}
  .grid-list--4 > *:nth-child(4n+1){border-left:0;padding-left:0}
}