/* =====================================================================
   Wittmann GmbH · Rheinberg — Design-System
   Handschrift: warmes Kalkpapier, Mahagoni als Primärton, Logo-Blau als
   Präzisionsakzent, Giebel/Sparren als Formensprache.
   Alle Farben aus dem Firmenlogo abgeleitet (#1786BF Signet, #56210E Wortmarke).
   Eine Datei für alle Seiten. Keine externen Requests.
   ===================================================================== */

/* ---------- 1 · Schriften (selbst gehostet) --------------------------
   ACHTUNG Bricolage: variable Datei, Standardinstanz ist opsz 96 / wght 800.
   Deshalb überall font-variation-settings explizit setzen (siehe .display).  */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-var.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Rubik';
  src:url('fonts/rubik-var.woff2') format('woff2');
  font-weight:300 900; font-style:normal; font-display:swap;
}

/* ---------- 2 · Gestaltungsmarken (Tokens) --------------------------- */
:root{
  /* Logo-Blau — Technik und Präzision */
  --blau:#1786BF;          /* NUR Flächen/Icons/fette Schrift ab 19px */
  --blau-tief:#0F6390;     /* blaue Textlinks, Hover, kleine Schrift */
  --blau-hell:#5FB0DA;     /* Akzent auf dunklem Grund */
  --blau-nebel:#E8F3FA;    /* Flächenton für Konditionskarten */

  /* Mahagoni — Wortmarke, Primär-CTA */
  --mahagoni:#56210E;
  --mahagoni-tief:#3D1608;

  /* Holz und Dunkelflächen */
  --nuss:#241610;
  --laerche:#C1834B;
  --laerche-hell:#E7D3BC;

  /* Papier und Text */
  --papier:#FAF6F1;
  --papier-tief:#F1E9DF;
  --weiss:#FFFFFF;
  --ink:#22160F;
  --text:#4A3A31;
  --gedaempft:#776257;
  --linie:#E4D9CB;

  /* Signalfarben */
  --erfolg:#2E7D5B;
  --fehler:#A32D22;
  --fehler-nebel:#FBF1EF;

  /* Radien, Schatten, Maße */
  --r-l:16px; --r-m:12px; --r-s:8px; --r-pille:999px;
  --sch:0 8px 24px rgba(58,32,18,.08);
  --sch-tief:0 22px 54px rgba(36,22,16,.16);
  --max:1200px;
  --gutter:24px;
  --kopf-h:76px;

  /* Schriftfamilien */
  --display:'Bricolage Grotesque','Segoe UI',system-ui,-apple-system,sans-serif;
  --sans:'Rubik','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ---------- 3 · Grundlagen ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px; line-height:1.65; font-weight:400;
  color:var(--text); background:var(--papier);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:.25em 0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
hr{border:0;border-top:1px solid var(--linie);margin:32px 0}
table{border-collapse:collapse;width:100%}
strong,b{font-weight:600;color:var(--ink)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:3px}
::selection{background:var(--laerche-hell);color:var(--ink)}
section{scroll-margin-top:calc(var(--kopf-h) + 12px)}
[id]{scroll-margin-top:calc(var(--kopf-h) + 12px)}

.sr-nur{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.spring{position:absolute;left:-9999px;top:0;z-index:200;background:var(--mahagoni);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0;font-weight:500}
.spring:focus{left:0}

/* ---------- 4 · Typografie ------------------------------------------- */
h1,h2,h3,h4,.display{
  font-family:var(--display);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.12;
  text-wrap:balance;
  font-synthesis:none;
}
h1,.h1{font-size:clamp(33px,5.2vw,58px);font-variation-settings:'opsz' 72,'wght' 760;letter-spacing:-.015em}
h2,.h2{font-size:clamp(27px,3.6vw,42px);font-variation-settings:'opsz' 48,'wght' 700;letter-spacing:-.01em;line-height:1.15}
h3,.h3{font-size:clamp(19px,2.1vw,23px);font-variation-settings:'opsz' 24,'wght' 650;line-height:1.28}
h4,.h4{font-size:17.5px;font-variation-settings:'opsz' 18,'wght' 650;line-height:1.35;margin-bottom:.35em}

/* Fachzeile in der H1: haelt den Suchbegriff in der Ueberschrift, ohne die
   Schlagzeile lauter zu machen. Ruhige Zweitzeile in der Fliesstextschrift. */
.h1-fach{
  display:block;margin-top:15px;
  font-family:var(--sans);
  font-size:clamp(15.5px,1.55vw,18px);
  font-variation-settings:'wght' 500;
  letter-spacing:0;line-height:1.45;
  color:var(--gedaempft);
  text-wrap:pretty;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--display);font-size:13px;
  font-variation-settings:'opsz' 14,'wght' 700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--blau-tief);margin:0 0 14px;
}
.eyebrow::before{content:"";flex:none;width:26px;height:4px;background:var(--blau);border-radius:2px}
.eyebrow.hell{color:var(--blau-hell)}
.eyebrow.hell::before{background:var(--blau-hell)}
.eyebrow.holz{color:var(--laerche)}
.eyebrow.holz::before{background:var(--laerche)}

.lead{font-size:19px;line-height:1.6;color:var(--text);max-width:62ch}
.klein{font-size:14.5px;line-height:1.55;color:var(--gedaempft)}
.mini{font-size:12.5px;line-height:1.5;color:var(--gedaempft)}
.mahagoni{color:var(--mahagoni)}
.blau{color:var(--blau-tief)}
.mitte{text-align:center}
.eng{max-width:62ch}
.enger{max-width:52ch}
.textlink{color:var(--blau-tief);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:500}
.textlink:hover{color:var(--mahagoni)}
.pfeil-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-variation-settings:'opsz' 16,'wght' 650;font-size:15.5px;color:var(--mahagoni);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.pfeil-link svg{flex:none;transition:transform .15s}
.pfeil-link:hover svg{transform:translateX(3px)}
.pfeil-link.hell{color:#fff}

/* ---------- 5 · Layout ----------------------------------------------- */
.ctn{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}
.ctn-schmal{max-width:840px;margin:0 auto;padding:0 var(--gutter);width:100%}
.sek{padding:104px 0}
.sek-eng{padding:72px 0}
.sek-papier{background:var(--papier)}
.sek-tief{background:var(--papier-tief)}
.sek-weiss{background:var(--weiss)}
.sek-nuss{background:var(--nuss);color:#D9CFC6}
.sek-nuss h1,.sek-nuss h2,.sek-nuss h3,.sek-nuss h4{color:#fff}
.sek-nuss .lead{color:#CDC2B8}
.sek-nuss .klein,.sek-nuss .mini{color:#A5978C}
.sek-kopf{max-width:720px;margin:0 0 52px}
.sek-kopf.mitte{margin-left:auto;margin-right:auto}
.sek-kopf p{margin-bottom:0}
.sek-kopf h2{margin-bottom:14px}

.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.raster-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.raster-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.reihe{display:flex;gap:14px;flex-wrap:wrap}
.reihe-mitte{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.stapel{display:grid;gap:14px}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split.bild-links{grid-template-columns:.95fr 1.05fr}

/* Giebel-Motiv: flacher Trapez-Schnitt an der Oberkante (aus dem Logo) */
.giebel-oben{clip-path:polygon(0 26px,50% 0,100% 26px,100% 100%,0 100%)}
.giebel-unten{clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 26px),0 100%)}
/* Sparrenraster: geneigte Linienstruktur für dunkle Flächen */
.sparren{position:relative;isolation:isolate}
.sparren::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(108deg,rgba(193,131,75,.12) 0 2px,transparent 2px 28px);
}

/* ---------- 6 · Knöpfe ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-size:17px;font-variation-settings:'opsz' 16,'wght' 650;
  padding:15px 30px;border-radius:var(--r-pille);
  text-align:center;line-height:1.25;
  transition:background-color .15s,color .15s,transform .15s,box-shadow .15s;
}
.btn svg{flex:none}
.btn-primaer{background:var(--mahagoni);color:#fff;box-shadow:0 8px 20px rgba(86,33,14,.24)}
.btn-primaer:hover{background:var(--mahagoni-tief);transform:translateY(-2px)}
.btn-linie{background:transparent;color:var(--mahagoni);box-shadow:inset 0 0 0 2px var(--mahagoni)}
.btn-linie:hover{background:var(--mahagoni);color:#fff;transform:translateY(-2px)}
.btn-hell{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.btn-hell:hover{box-shadow:inset 0 0 0 2px #fff;transform:translateY(-2px)}
.btn-weiss{background:#fff;color:var(--mahagoni);box-shadow:var(--sch)}
.btn-weiss:hover{background:var(--laerche-hell);transform:translateY(-2px)}
.btn-blau{background:var(--blau-tief);color:#fff}
.btn-blau:hover{background:#0B5077;transform:translateY(-2px)}
.btn-klein{padding:11px 21px;font-size:15px}
.btn-breit{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* ---------- 7 · Karten und Bilder ------------------------------------- */
/* Schrumpf-Sicherung: als Grid-/Flex-Kind sonst min-width:auto (Overflow auf schmalen Geräten). */
.karte,.karte-flach,.karte-tief,.karte-blau,.karte-dunkel,.split-bild,.rahmen,figure{min-width:0;max-width:100%}
.karte{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);
  padding:30px 28px;box-shadow:var(--sch);
}
.karte-flach{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);padding:22px 22px}
.karte-tief{background:var(--papier-tief);border:1px solid var(--linie);border-radius:var(--r-l);padding:30px 28px}
.karte-blau{background:var(--blau-nebel);border:1px solid #CDE5F3;border-radius:var(--r-l);padding:26px 26px}
.karte-dunkel{background:#31201A;border:1px solid rgba(255,255,255,.10);border-radius:var(--r-l);padding:30px 28px;color:#CDC2B8}
.karte-dunkel h3,.karte-dunkel h4{color:#fff}
.karte-link{display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.karte-link:hover{transform:translateY(-3px);box-shadow:var(--sch-tief)}

.rahmen{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--linie);box-shadow:var(--sch);background:var(--papier-tief)}
.rahmen img{width:100%;height:100%;object-fit:cover;display:block}
.rahmen-4-3{aspect-ratio:4/3}
.rahmen-3-2{aspect-ratio:3/2}
.rahmen-1-1{aspect-ratio:1/1}
.rahmen-hoch{aspect-ratio:3/4}
.bildnachweis{font-size:12.5px;line-height:1.45;color:var(--gedaempft);margin:8px 2px 0}
figure{margin:0}
figcaption{font-size:13.5px;line-height:1.5;color:var(--gedaempft);margin-top:10px}

/* Leistungs-/Clusterkarte mit Foto */
.cluster{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sch);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.cluster:hover{transform:translateY(-3px);box-shadow:var(--sch-tief)}
.cluster-bild{aspect-ratio:4/3;overflow:hidden;background:var(--papier-tief)}
.cluster-bild img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cluster:hover .cluster-bild img{transform:scale(1.03)}
.cluster-text{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.cluster-text h3{margin-bottom:10px}
.cluster-liste{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:7px}
.cluster-liste li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45}
.cluster-liste li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;background:var(--blau);border-radius:1px;transform:rotate(45deg)}
.cluster-text .pfeil-link{margin-top:auto}

/* Merkmalsliste mit Haken */
.haken-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.haken-liste li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.5}
.haken-liste li::before{
  content:"";flex:none;width:22px;height:22px;margin-top:3px;border-radius:50%;
  background:var(--blau) 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px 13px no-repeat;
}
.sek-nuss .haken-liste li::before{background-color:var(--laerche)}

/* Ablauf-Schritte */
.ablauf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:schritt}
.ablauf-schritt{position:relative;padding-top:12px}
.ablauf-nr{
  font-family:var(--display);font-variation-settings:'opsz' 40,'wght' 760;
  font-size:44px;line-height:1;color:var(--laerche);display:block;margin-bottom:12px;
}
.ablauf-schritt h3{font-size:19px;margin-bottom:8px}
.ablauf-schritt p{font-size:15.5px;margin:0}
.ablauf-schritt::before{content:"";position:absolute;top:0;left:0;width:44px;height:4px;background:var(--blau);border-radius:2px}

/* Statistik-/Faktenband */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
.fakt-w{font-family:var(--display);font-variation-settings:'opsz' 32,'wght' 700;font-size:30px;line-height:1.15;color:var(--ink);display:block}
.sek-nuss .fakt-w{color:#fff}
.fakt-t{font-size:15px;color:var(--gedaempft);margin-top:4px}
.sek-nuss .fakt-t{color:#A5978C}

/* Referenzband (waagerecht scrollbar auf klein) */
.band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.band figure{display:flex;flex-direction:column}
.band .rahmen{margin-bottom:0}

/* Info-/Konditionsliste */
.kondition{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kondition li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55}
.kondition li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--blau-tief)}
.preis-zeile{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--linie);font-size:16px}
.preis-zeile:last-child{border-bottom:0}
.preis-zeile b{font-family:var(--display);font-variation-settings:'opsz' 18,'wght' 700;white-space:nowrap;min-width:0}
/* Auf schmalen Geraeten muss der Wert umbrechen duerfen — 'nach telefonischer
   Vereinbarung' und 'Handwerkskammer Duesseldorf' schoben das Impressum 45px raus. */
@media (max-width:640px){
  .preis-zeile{flex-wrap:wrap;gap:4px 12px}
  .preis-zeile b{white-space:normal;text-align:left;overflow-wrap:anywhere}
}

/* Merkzeile / Chip */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--blau-nebel);color:var(--blau-tief);border-radius:var(--r-pille);padding:7px 15px;font-size:13.5px;font-weight:500}
.chip-holz{background:var(--laerche-hell);color:var(--mahagoni)}
.chip-dunkel{background:rgba(255,255,255,.10);color:#E7D3BC}

/* Tabelle */
.tabelle{width:100%;font-size:15.5px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);overflow:hidden}
.tabelle th,.tabelle td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle thead th{background:var(--papier-tief);font-family:var(--display);font-variation-settings:'opsz' 16,'wght' 650;color:var(--ink)}
.tabelle tr:last-child td{border-bottom:0}
.tabelle-rollen{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* FAQ */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);box-shadow:var(--sch)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 54px 19px 22px;position:relative;
  font-family:var(--display);font-variation-settings:'opsz' 20,'wght' 650;
  font-size:17.5px;color:var(--ink);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:14px;height:14px;margin-top:-7px;
  border-right:2.5px solid var(--blau-tief);border-bottom:2.5px solid var(--blau-tief);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq summary:hover{color:var(--mahagoni)}
.faq .faq-a{padding:0 22px 20px;font-size:16px;color:var(--text)}
.faq .faq-a p:last-child{margin-bottom:0}

/* ---------- 8 · Kopfzeile --------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:80;
  background:rgba(250,246,241,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linie);
}
.kopf-in{max-width:var(--max);margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:22px}
.marke{flex:none;display:flex;align-items:center}
.marke img{height:52px;width:auto}
/* Sieben Eintraege (…, Betrieb, Downloads, Kontakt) muessen neben Logo,
   Telefonnummer und Auftragsknopf in die 1200-px-Zeile passen. Deshalb sind
   Abstand und Schriftgrad hier knapper als vor der Downloads-Seite; darunter
   klappt die Navigation ab 1200 px ins Menue (siehe Abschnitt 15). */
.nav{display:flex;gap:16px;margin-left:auto}
.nav .nav-tel{display:none}   /* Telefonnummer nur im ausgeklappten Handy-Menü */
.nav a{
  font-size:14.5px;font-weight:500;color:var(--text);
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.nav a:hover{color:var(--ink);border-color:var(--blau)}
.nav a[aria-current="page"]{color:var(--mahagoni);border-color:var(--mahagoni)}
.kopf-rechts{display:flex;align-items:center;gap:14px;margin-left:auto}
.kopf-tel{display:flex;flex-direction:column;line-height:1.15;text-align:right;white-space:nowrap}
.kopf-tel .nr{font-family:var(--display);font-variation-settings:'opsz' 18,'wght' 700;font-size:17px;color:var(--ink)}
.kopf-tel .zu{font-size:12px;color:var(--gedaempft)}
.kopf-tel:hover .nr{color:var(--mahagoni)}
.kopf-rechts .btn{white-space:nowrap}
.menue-knopf{display:none;flex:none;width:46px;height:46px;border-radius:var(--r-s);border:1px solid var(--linie);background:var(--weiss);align-items:center;justify-content:center}
.menue-knopf span,.menue-knopf span::before,.menue-knopf span::after{
  content:"";display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;
}
.menue-knopf span::before{position:relative;top:-6px}
.menue-knopf span::after{position:relative;top:4px}
.menue-knopf[aria-expanded="true"] span{background:transparent}
.menue-knopf[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- 9 · Fußzeile ---------------------------------------------- */
.fuss{background:var(--nuss);color:#A5978C;padding:66px 0 0}
.fuss a{color:#CDC2B8}
.fuss a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fuss-raster{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:46px}
.fuss h3,.fuss h4{color:#fff;font-size:14px;font-variation-settings:'opsz' 14,'wght' 700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
.fuss-marke img{height:64px;width:auto;background:#fff;border-radius:var(--r-s);padding:8px 12px}
.fuss-marke p{margin-top:18px;font-size:15px;line-height:1.6;max-width:34ch}
.fuss-unten{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 26px;display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;font-size:13.5px}
.fuss-unten nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- 10 · Mobile Fußleiste -------------------------------------- */
.mobil-leiste{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(36,22,16,.97);backdrop-filter:blur(10px);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:10px}
.mobil-leiste .btn{flex:1;padding:13px 12px;font-size:15.5px}

/* ---------- 11 · Formulare --------------------------------------------- */
.formular{display:grid;gap:18px}
.feld{display:flex;flex-direction:column;gap:7px}
.feld.breit{grid-column:1/-1}
.feld label,.feld-legende{
  font-family:var(--display);font-size:14.5px;font-variation-settings:'opsz' 16,'wght' 650;
  color:var(--ink);line-height:1.35;
}
.feld label .opt{font-family:var(--sans);font-weight:400;color:var(--gedaempft);font-size:13.5px}
.feld input,.feld textarea,.feld select{
  width:100%;padding:13px 15px;border:1.5px solid var(--linie);border-radius:var(--r-s);
  background:var(--weiss);font-size:16.5px;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.feld textarea{min-height:118px;resize:vertical;line-height:1.55}
.feld input:hover,.feld textarea:hover,.feld select:hover{border-color:#CFC0AE}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--blau);box-shadow:0 0 0 3px rgba(23,134,191,.16);outline:none}
.feld input::placeholder,.feld textarea::placeholder{color:#A39285}
.feld .hinweis{font-size:13.5px;color:var(--gedaempft);line-height:1.45}
.feld .feldfehler{font-size:13.5px;color:var(--fehler);font-weight:500;display:none}
.feld.fehlerhaft input,.feld.fehlerhaft textarea,.feld.fehlerhaft select{border-color:var(--fehler);background:var(--fehler-nebel)}
.feld.fehlerhaft .feldfehler{display:block}
.feld-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}

/* Auswahlkacheln: echte Radios, gestaltete Labels.
   Aufbau: label.kachel > input + span.kachel-inh > .kachel-ic + .kachel-tx + .kachel-haken
   Gleich hohe Kacheln (height:100% + align-items:stretch im Raster),
   Piktogramm als Inline-SVG in currentColor, Häkchen zeigt die Auswahl. */
/* grid-auto-rows:1fr macht ALLE Reihen gleich hoch — sonst bekommt jede Reihe
   ihre eigene Hoehe und das Raster wirkt unruhig, sobald ein Titel umbricht. */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-auto-rows:1fr;gap:14px;align-items:stretch;margin:0;padding:0;border:0}
.kacheln.eng{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kacheln.einspaltig{grid-template-columns:1fr}
.kachel{position:relative;display:block;height:100%}
.kachel input{position:absolute;opacity:0;width:1px;height:1px}
.kachel-inh{
  position:relative;display:flex;align-items:center;gap:15px;
  height:100%;min-height:96px;padding:18px 50px 18px 18px;
  border:2px solid var(--linie);border-radius:var(--r-m);background:var(--weiss);cursor:pointer;
  transition:border-color .15s,background-color .15s,transform .15s,box-shadow .15s;
}
.kachel-ic{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  background:var(--blau-nebel);color:var(--blau-tief);
  border:1px solid #DCEBF5;
  transition:background-color .15s,color .15s,border-color .15s,transform .15s;
}
.kachel-ic svg{width:23px;height:23px}
.kachel:hover .kachel-ic{transform:scale(1.04)}
.kachel-tx{display:block;min-width:0}
.kachel-tt{display:block;font-family:var(--display);font-size:16.5px;font-variation-settings:'opsz' 18,'wght' 650;line-height:1.28;color:var(--ink);text-wrap:balance}
/* Zwei Zeilen als Deckel: die Beispiel-Zeilen sind unterschiedlich lang und
   liessen die Kacheln sonst um bis zu 21px auseinanderlaufen. */
.kachel-tx small{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:5px;font-size:13.5px;line-height:1.45;color:#8A7A70;
  font-variation-settings:'wght' 400;font-weight:400;
}
.kachel-haken{
  position:absolute;top:50%;right:16px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  border:2px solid #C9BCAD;background:var(--weiss);color:transparent;
  transition:background-color .15s,border-color .15s,color .15s;
}
.kachel-haken svg{width:13px;height:13px}
.kachel:hover .kachel-inh{border-color:var(--blau-hell);transform:translateY(-2px);box-shadow:var(--sch)}
.kachel:hover .kachel-haken{border-color:var(--blau-hell)}
.kachel input:checked + .kachel-inh{border-color:var(--blau);background:var(--blau-nebel);box-shadow:0 6px 18px rgba(23,134,191,.15)}
.kachel input:checked + .kachel-inh .kachel-ic{background:var(--blau);color:#fff}
.kachel input:checked + .kachel-inh .kachel-haken{background:var(--blau-tief);border-color:var(--blau-tief);color:#fff}
.kachel input:focus-visible + .kachel-inh{outline:3px solid var(--blau);outline-offset:3px}
.feld.fehlerhaft .kachel-inh{border-color:var(--fehler);background:var(--fehler-nebel)}
.feld.fehlerhaft .kachel input:checked + .kachel-inh{border-color:var(--blau);background:var(--blau-nebel)}

/* Kontrollkästchen */
.check{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--blau-tief);cursor:pointer}
.check.fehlerhaft{color:var(--fehler)}

/* Honigtopf */
.honigtopf{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 12 · Auftragsstrecke (Funnel) ------------------------------- */
.fnl{max-width:820px;margin:0 auto;background:var(--weiss);border:1px solid var(--linie);border-radius:20px;box-shadow:var(--sch-tief);overflow:hidden;position:relative}
.fnl-kopf{padding:24px 32px 0}
.fnl-fortschritt{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.fnl-fortschritt .lbl{font-family:var(--display);font-size:12.5px;font-variation-settings:'opsz' 14,'wght' 700;letter-spacing:.14em;text-transform:uppercase;color:var(--gedaempft);white-space:nowrap}
.fnl-balken{flex:1;height:8px;border-radius:99px;background:var(--papier-tief);overflow:hidden}
.fnl-balken i{display:block;height:100%;width:0;background:var(--blau);border-radius:99px;transition:width .3s}
.fnl-koerper{padding:22px 32px 32px}
.fnl-schritt{display:none}
.fnl-schritt.an{display:block;animation:fnl-ein .25s ease}
@keyframes fnl-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fnl-schritt h2,.fnl-schritt h3{margin-bottom:6px}
.fnl-schritt .mikro{font-size:15.5px;color:var(--gedaempft);margin-bottom:22px}
.fnl-fuss{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--linie)}
.fnl-fuss .btn{min-width:180px}
.fnl-zurueck{font-size:15px;font-weight:500;color:var(--gedaempft);text-decoration:underline;text-underline-offset:3px}
.fnl-zurueck:hover{color:var(--ink)}
.fnl-hilfe{margin-left:auto;font-size:14px;color:var(--gedaempft)}
.fnl-lade{display:none;text-align:center;padding:52px 20px}
.fnl-lade.an{display:block}
.dreher{width:46px;height:46px;margin:0 auto 20px;border-radius:50%;border:4px solid var(--papier-tief);border-top-color:var(--blau);animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.fnl-ok{display:none;padding:12px 0 6px}
.fnl-ok.an{display:block}
.fnl-ok .haken{width:70px;height:70px;border-radius:50%;background:var(--erfolg);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.fnl-fehler{display:none;border:2px solid var(--fehler);background:var(--fehler-nebel);border-radius:var(--r-m);padding:20px 22px;margin-bottom:24px}
.fnl-fehler.an{display:block}
.fnl-fehler h3{color:var(--fehler);font-size:19px;margin-bottom:8px}
.fnl-fehler .wege{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.fnl-zusammenfassung{background:var(--papier-tief);border-radius:var(--r-m);padding:18px 20px;font-size:15px;margin:20px 0}
.fnl-zusammenfassung dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.fnl-zusammenfassung dt{font-weight:500;color:var(--gedaempft)}
.fnl-zusammenfassung dd{margin:0;color:var(--ink)}

/* Schritt-Überschrift: <legend> erbt keine Überschriften-Stile, die
   Auftragsstrecke braucht aber fieldset/legend je Schritt. */
.fnl-titel{
  display:block;width:100%;padding:0;margin:0 0 6px;
  font-family:var(--display);font-variation-settings:'opsz' 24,'wght' 650;
  font-size:clamp(20px,2.4vw,25px);line-height:1.25;color:var(--ink);
}
.pflicht-stern{color:var(--fehler)}
/* Abstände zwischen den Feldern eines Schritts (Schritte sind fieldsets,
   kein .formular-Raster, deshalb hier gesetzt) */
.fnl-schritt > .feld,.fnl-schritt > .feld-paar{margin-top:18px}
.fnl-schritt > .feld[data-nummernfehler]{margin-top:0}
.fnl-schritt > .karte-blau + h3{margin-top:26px}

/* Gabelung: die zwei großen Auswahlkarten im ersten Schritt */
.wahl-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;margin:0;padding:0;border:0}
.wahl-karte{position:relative;display:block;height:100%}
.wahl-karte input{position:absolute;opacity:0;width:1px;height:1px}
.wahl-karte .inh{
  position:relative;display:flex;flex-direction:column;gap:10px;
  height:100%;min-height:64px;padding:22px 22px 24px;cursor:pointer;
  border:2px solid var(--linie);border-radius:var(--r-l);background:var(--weiss);
  transition:border-color .15s,background-color .15s,transform .15s,box-shadow .15s;
}
.wahl-karte .kopfzeile{display:flex;align-items:center;gap:13px;padding-right:34px}
.wahl-karte .ic{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:var(--papier-tief);color:var(--blau-tief);
  transition:background-color .15s,color .15s;
}
.wahl-karte .ic svg{width:25px;height:25px}
.wahl-karte .tt{font-family:var(--display);font-variation-settings:'opsz' 22,'wght' 700;font-size:20px;color:var(--ink);line-height:1.25}
.wahl-karte .ut{font-size:15.5px;line-height:1.5;color:var(--text);margin:0}
.wahl-karte .pr{font-size:14px;line-height:1.45;color:var(--blau-tief);font-weight:500;margin-top:auto;padding-top:4px}
.wahl-karte .haken{
  position:absolute;top:20px;right:20px;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--linie);background:var(--weiss);color:transparent;
  transition:background-color .15s,border-color .15s,color .15s;
}
.wahl-karte .haken svg{width:15px;height:15px}
.wahl-karte:hover .inh{border-color:#C6B49F;transform:translateY(-2px);box-shadow:var(--sch)}
.wahl-karte:hover .haken{border-color:#C6B49F}
.wahl-karte input:checked + .inh{border-color:var(--blau);background:var(--blau-nebel);box-shadow:0 8px 22px rgba(23,134,191,.16)}
.wahl-karte input:checked + .inh .ic{background:var(--blau);color:#fff}
.wahl-karte input:checked + .inh .haken{background:var(--blau-tief);border-color:var(--blau-tief);color:#fff}
.wahl-karte input:focus-visible + .inh{outline:3px solid var(--blau);outline-offset:3px}
.feld.fehlerhaft .wahl-karte .inh{border-color:var(--fehler)}
.feld.fehlerhaft .wahl-karte input:checked + .inh{border-color:var(--blau)}

/* ---------- 13 · Kontakt ------------------------------------------------ */
.kontakt-karte{background:var(--papier-tief);border:1px solid var(--linie);border-radius:var(--r-l);padding:32px 30px}
.kontakt-liste{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.kontakt-liste li{display:flex;gap:14px;align-items:flex-start}
.kontakt-liste .ic{flex:none;width:40px;height:40px;border-radius:var(--r-s);background:var(--blau-nebel);color:var(--blau-tief);display:flex;align-items:center;justify-content:center}
.kontakt-liste .bz{font-size:13px;color:var(--gedaempft);display:block;line-height:1.3}
.kontakt-liste .wt{font-family:var(--display);font-variation-settings:'opsz' 20,'wght' 650;font-size:18px;color:var(--ink);line-height:1.35}
.kontakt-liste a.wt:hover{color:var(--mahagoni)}

/* ---------- 14 · Bewegung ------------------------------------------------ */
[data-rv]{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
[data-rv].rv-an{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rv]{opacity:1;transform:none}
}

/* ---------- 15 · Umbrüche ------------------------------------------------ */
@media (max-width:1080px){
  .marke img{height:46px}
  .split{gap:38px}
}
/* Ab hier passt die flache Navigation mit ihren sieben Eintraegen nicht mehr
   neben Logo, Telefonnummer und Auftragsknopf – sie klappt ins Menue. Die
   Regeln sind identisch mit dem 940er Umbruch darunter; wer sie aendert, muss
   BEIDE Stellen anfassen. Das Seitenskript schliesst das Menue oberhalb
   derselben Schwelle (window.innerWidth > 1200). */
@media (max-width:1200px){
  :root{--kopf-h:70px}
  .menue-knopf{display:flex}
  .kopf-tel{display:none}
  .nav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    display:none;flex-direction:column;gap:0;
    background:var(--papier);border-bottom:1px solid var(--linie);
    box-shadow:var(--sch-tief);padding:8px var(--gutter) 18px;
    max-height:calc(100vh - var(--kopf-h));overflow-y:auto;
  }
  .nav.offen{display:flex}
  .nav .nav-tel{display:block}
  .nav a{padding:14px 2px;border-bottom:1px solid var(--linie);border-radius:0;font-size:17px}
  .nav a:last-child{border-bottom:0}
  .nav a:hover{border-color:var(--linie);color:var(--mahagoni)}
  .nav .nav-tel{font-family:var(--display);font-variation-settings:'opsz' 18,'wght' 700}
}
@media (max-width:940px){
  :root{--kopf-h:70px}
  .sek{padding:72px 0}
  .sek-eng{padding:56px 0}
  .raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  .split{grid-template-columns:1fr;gap:34px}
  .split.bild-links{grid-template-columns:1fr}
  .split.bild-links .split-bild{order:-1}
  .fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  /* Navigation klappt aus */
  .menue-knopf{display:flex}
  .kopf-tel{display:none}
  .nav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    display:none;flex-direction:column;gap:0;
    background:var(--papier);border-bottom:1px solid var(--linie);
    box-shadow:var(--sch-tief);padding:8px var(--gutter) 18px;
    max-height:calc(100vh - var(--kopf-h));overflow-y:auto;
  }
  .nav.offen{display:flex}
  .nav .nav-tel{display:block}
  .nav a{padding:14px 2px;border-bottom:1px solid var(--linie);border-radius:0;font-size:17px}
  .nav a:last-child{border-bottom:0}
  .nav a:hover{border-color:var(--linie);color:var(--mahagoni)}
  .nav .nav-tel{font-family:var(--display);font-variation-settings:'opsz' 18,'wght' 700}
}
@media (max-width:760px){
  body{padding-bottom:74px}          /* Platz für die mobile Leiste */
  .mobil-leiste{display:flex}
  .kopf-rechts .btn{display:none}
}
@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16.5px}
  .sek{padding:56px 0}
  .sek-eng{padding:44px 0}
  .sek-kopf{margin-bottom:34px}
  /* minmax(0,1fr) statt 1fr: Grid-Items haben min-width:auto und wachsen sonst
     über ihre Zelle hinaus — auf 390px schob das die Karten 16px aus der Seite. */
  .raster-2,.raster-3,.raster-4,.band{grid-template-columns:minmax(0,1fr)}
  .ablauf{grid-template-columns:1fr;gap:26px}
  .feld-paar{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr;gap:30px}
  .karte,.karte-tief{padding:24px 20px}
  .fnl-kopf{padding:20px 20px 0}
  .fnl-koerper{padding:18px 20px 26px}
  .fnl-fuss .btn{width:100%;min-width:0}
  .fnl-hilfe{margin-left:0}
  /* Auswahlkacheln: volle Breite, großzügige Tap-Fläche */
  .kacheln,.kacheln.eng{grid-template-columns:1fr}
  .kachel-inh{min-height:60px;padding:16px 46px 16px 16px}
  .wahl-raster{grid-template-columns:1fr}
  .wahl-karte .inh{padding:20px 20px 22px}
  .btn{width:100%}
  .kopf-rechts .btn,.reihe .btn.auto,.mobil-leiste .btn{width:auto}
  .lead{font-size:17.5px}
  .giebel-oben{clip-path:polygon(0 16px,50% 0,100% 16px,100% 100%,0 100%)}
}
@media (max-width:380px){
  :root{--gutter:16px}
  .marke img{height:40px}
}

/* ---------- 16 · Druck ---------------------------------------------------- */
@media print{
  .kopf,.mobil-leiste,.fuss,.btn,.fnl-fortschritt{display:none!important}
  body{background:#fff;color:#000;font-size:12pt;padding:0}
  .fnl{box-shadow:none;border:0}
  a{text-decoration:underline}
  [data-rv]{opacity:1;transform:none}
}