/* ============================================================
   docks.e-surfer.com — Seiten-Stylesheet
   Baut auf brand.css auf (Tokens, Header, Footer, Navigation).
   Hier nur, was die Ponton-Seiten zusätzlich brauchen.
   Keine externen Requests.
   ============================================================ */

:root{
  --panel:#083D38;          /* dunkles Grün aus dem Ponton-Designer */
  --panel-tief:#062E2A;
  --panel-zelle:#0A4540;
  --panel-hell:#5DC8BE;
  --gruen-hell:#E4F5F2;
  --radius:16px;
  --radius-gross:22px;
}
@media (prefers-color-scheme: dark){
  :root{ --gruen-hell:#12302c; }
}

body{ font-size:17px; line-height:1.6; background:var(--bg); color:var(--ink); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.schmal{ max-width:820px; }

h1,h2,h3{ font-family:var(--font-head); font-weight:700; letter-spacing:.01em; }
h1{ font-size:clamp(30px,5vw,52px); line-height:1.02; margin:0 0 16px; }
h2{ font-size:clamp(26px,3.6vw,38px); line-height:1.1; margin:0 0 14px; }
h3{ font-size:21px; line-height:1.25; margin:0 0 8px; font-family:var(--font-body); font-weight:700; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero{ padding:56px 0 30px; }
.hero.mittig{ text-align:center; }
.kicker{
  color:var(--green); font-family:var(--font-head); font-weight:700;
  font-size:clamp(40px,7vw,78px); line-height:.92; margin:0 0 4px;
}
.lead{ color:var(--muted); font-size:19px; line-height:1.6; margin:0 0 22px; max-width:64ch; }
.hero.mittig .lead{ margin-left:auto; margin-right:auto; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-menu); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .16s, border-color .16s, color .16s;
}
.btn-primaer{ background:var(--green); color:#fff; }
.btn-primaer:hover{ background:var(--green-d); text-decoration:none; color:#fff; }
.btn-rand{ border-color:var(--line); background:var(--card); color:var(--ink); }
.btn-rand:hover{ border-color:var(--green); color:var(--green); text-decoration:none; }
.btn-hell{ background:#fff; color:var(--panel); }
.btn-hell:hover{ background:var(--gruen-hell); text-decoration:none; color:var(--panel); }
.btn-reihe{ display:flex; flex-wrap:wrap; gap:12px; }
.hero.mittig .btn-reihe{ justify-content:center; }

/* ── Hero mit Bild (Kategorieseiten) ──────────────────────── */
.hero-split{ display:grid; grid-template-columns:1fr .82fr; gap:44px; align-items:center; }
.hero-split .hero-bild{
  border-radius:var(--radius-gross); overflow:hidden; background:var(--card);
  aspect-ratio:4/3; border:1px solid var(--line);
}
.hero-split .hero-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){
  .hero-split{ grid-template-columns:1fr; gap:26px; }
  .hero-split .hero-bild{ order:-1; aspect-ratio:16/10; }
}

/* ── Breites Bildband ─────────────────────────────────────── */
.bildband{
  border-radius:var(--radius-gross); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:21/9; background:var(--card);
}
.bildband img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:700px){ .bildband{ aspect-ratio:16/10; } }

/* ── Bildstrecke (Montage, Szenen) ────────────────────────── */
.strecke{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.strecke figure{ margin:0; }
.strecke .rahmen{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:4/3; background:var(--card); margin:0 0 10px;
}
.strecke img{ width:100%; height:100%; object-fit:cover; display:block; }
.strecke figcaption{ color:var(--muted); font-size:14px; line-height:1.5; }
.strecke .nummer{
  display:inline-block; min-width:20px; height:20px; border-radius:50%;
  background:var(--green); color:#fff; text-align:center; line-height:20px;
  font-family:var(--font-menu); font-weight:700; font-size:11.5px; margin-right:8px;
}

/* ── USP-Zeile ────────────────────────────────────────────── */
.usps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin:34px 0 0;
}
.usp{ background:var(--bg); padding:22px 22px 24px; }
.usp h3{ font-size:16px; margin:0 0 6px; }
.usp p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; }
.usp::before{
  content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--green); margin:0 0 14px;
}

/* ── Abschnitte ───────────────────────────────────────────── */
.abschnitt{ padding:64px 0; }
.abschnitt.eng{ padding:44px 0; }

/* ── Ratgeber: Listen, Schritte, Summenzeilen (30.09.2026) ── */
.ratgeber-liste, .ratgeber-schritte{ margin:14px 0 18px; padding-left:1.4em; }
.ratgeber-liste li, .ratgeber-schritte li{ margin:0 0 10px; line-height:1.6; }
.ratgeber-schritte li::marker{ font-weight:700; }
table.groessen tr.summe td{ font-weight:700; }
.tabelle-fuss{ margin-top:12px; font-size:.92em; opacity:.8; }
.ratgeber-grafik{ margin:22px 0 6px; }
.ratgeber-grafik img{ display:block; width:100%; max-width:780px; height:auto; }
.ratgeber-grafik figcaption{ margin-top:10px; font-size:.92em; opacity:.8; max-width:780px; }
.abschnitt-kopf{ margin:0 0 30px; max-width:70ch; }
.abschnitt-kopf p{ color:var(--muted); margin:0; font-size:17px; }

/* ── Bereichs-Karten (Jetski / Boot / Badeplattform) ──────── */
.bereiche{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.bereich{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius-gross);
  background:var(--card-2); padding:26px 24px 24px; text-decoration:none; color:inherit;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.bereich:hover{
  border-color:var(--green); transform:translateY(-3px); text-decoration:none;
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}
.bereich{ padding:0; overflow:hidden; }
.bereich-bild{ aspect-ratio:16/10; background:var(--card); border-bottom:1px solid var(--line); overflow:hidden; }
.bereich-bild img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.bereich:hover .bereich-bild img{ transform:scale(1.04); }
.bereich-text{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.bereich h3{ font-family:var(--font-head); font-size:30px; margin:0 0 10px; }
.bereich p{ color:var(--muted); margin:0 0 18px; font-size:15.5px; line-height:1.55; flex:1; }
.bereich .ab{
  font-family:var(--font-menu); font-weight:700; font-size:15px; color:var(--green);
  display:flex; align-items:baseline; gap:7px;
}
.bereich .ab .klein{ color:var(--muted); font-weight:600; font-size:12.5px; }

/* ── Querlinks auf die Bauteile-Seiten ────────────────────── */
.querlinks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.querlink{
  display:flex; flex-direction:column; gap:5px; padding:18px 20px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  text-decoration:none; transition:border-color .2s ease, transform .2s ease;
}
.querlink:hover{ border-color:var(--green); transform:translateY(-2px); }
.querlink-titel{ font-family:var(--font-menu); font-weight:700; font-size:16px; color:var(--ink); }
.querlink-text{ color:var(--muted); font-size:14px; line-height:1.5; }
.querlink-preis{ color:var(--green); font-family:var(--font-menu); font-weight:700; font-size:13.5px; }

/* ── Größen-/Preistabelle ─────────────────────────────────── */
.tabelle-huelle{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table.groessen{ width:100%; border-collapse:collapse; font-size:15.5px; min-width:520px; }
table.groessen th, table.groessen td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); }
table.groessen thead th{
  font-family:var(--font-menu); font-weight:700; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); background:var(--card-2); white-space:nowrap;
}
table.groessen tbody tr:last-child td{ border-bottom:0; }
table.groessen tbody tr:hover{ background:var(--card-2); }
table.groessen td.mass{ font-weight:700; white-space:nowrap; }
/* Die Paketbilder sind seit dem 26.08.2026 isometrische Renderings statt
   Baupläne. Bei den alten 84×60 px war davon nichts zu erkennen; die Box hatte
   ausserdem 1,4:1 während die Bilder 1,87:1 haben — es blieb Leerraum. */
table.groessen td.bild{ width:196px; padding:10px 0 10px 18px; }
table.groessen td.bild img{
  width:180px; height:96px; object-fit:contain; display:block;
  background:var(--card); border-radius:8px;
}
@media (max-width:640px){
  table.groessen td.bild{ width:132px; padding-left:12px; }
  table.groessen td.bild img{ width:120px; height:64px; }
}
table.groessen td.preis{ text-align:right; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.groessen td.tat{ text-align:right; white-space:nowrap; }
.marke{
  display:inline-block; margin-left:9px; padding:3px 9px; border-radius:999px;
  background:var(--green); color:#fff; font-family:var(--font-menu);
  font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  vertical-align:middle;
}

/* ── Preis-Umschalter ─────────────────────────────────────── */
.preisschalter{
  display:inline-flex; align-items:center; gap:0; margin:0 0 18px;
  border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--card-2);
}
.preisschalter button{
  border:0; background:none; cursor:pointer; color:var(--muted);
  font-family:var(--font-menu); font-weight:700; font-size:12.5px;
  padding:8px 16px; border-radius:999px; transition:background .15s, color .15s;
}
.preisschalter button[aria-pressed="true"]{ background:var(--green); color:#fff; }
.preishinweis{ color:var(--muted); font-size:13.5px; margin:12px 0 0; }

/* ── Produktraster (Bauteile) ─────────────────────────────── */
.produkte{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.produkt{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card-2);
  overflow:hidden; transition:border-color .18s, box-shadow .18s;
}
.produkt:hover{ border-color:var(--green); box-shadow:0 10px 26px rgba(0,0,0,.08); }
.produkt-bild{
  aspect-ratio:4/3; background:var(--card); display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line); overflow:hidden;
}
.produkt-bild img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.produkt-bild .platzhalter{
  color:var(--muted); font-size:12.5px; font-family:var(--font-menu); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; opacity:.55;
}
.produkt-text{ padding:15px 16px 17px; display:flex; flex-direction:column; flex:1; }
.produkt-text h3{ font-size:15.5px; line-height:1.3; margin:0 0 7px; font-weight:700; }
.produkt-meta{ color:var(--muted); font-size:12.5px; line-height:1.5; margin:0 0 12px; flex:1; }
.produkt-meta span{ display:block; }
.produkt-preis{
  font-family:var(--font-menu); font-weight:700; font-size:17px; color:var(--ink);
  display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums;
}
.produkt-preis .einheit{ font-size:11.5px; color:var(--muted); font-weight:600; }
.farbpunkte{ display:flex; gap:5px; margin:0 0 11px; }
.farbpunkt{
  width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.18); display:block;
}

/* ── Dunkles Panel (Konfigurator-Teaser) ──────────────────── */
.panel{
  background:var(--panel); color:#fff; border-radius:var(--radius-gross);
  padding:46px 40px; margin:0;
}
.panel h2{ color:#fff; margin:0 0 12px; }
.panel p{ color:var(--panel-hell); font-size:17.5px; line-height:1.6; margin:0 0 24px; max-width:58ch; }
.panel-reihe{ display:flex; gap:40px; align-items:center; flex-wrap:wrap; }
.panel-reihe > div:first-child{ flex:1 1 340px; }
.rasterprobe{ display:grid; gap:3px; flex:0 0 auto; }
.rasterprobe i{
  display:block; width:22px; height:22px; border-radius:4px;
  background:var(--panel-zelle); border:1px solid rgba(93,200,190,.25);
}

/* ── Fließtext-Abschnitt ──────────────────────────────────── */
.text-block{ max-width:70ch; }
.text-block p{ color:var(--muted); font-size:16.5px; line-height:1.7; margin:0 0 16px; }
.text-block p:last-child{ margin-bottom:0; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); max-width:80ch; }
.faq-eintrag{ border-bottom:1px solid var(--line); }
/* Die Frage ist ein h3 (Hausregel + Crawler), soll aber nicht wie eine Überschrift
   aussehen — das Aussehen macht weiterhin .faq-frage. */
.faq-frage-titel{ margin:0; font:inherit; font-weight:inherit; }
.faq-frage{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:0; cursor:pointer; text-align:left; color:var(--ink);
  font-family:var(--font-body); font-weight:700; font-size:17px; line-height:1.4;
  padding:20px 2px;
}
.faq-frage:hover{ color:var(--green); }
.faq-zeichen{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:17px; font-weight:400; color:var(--green);
  transition:transform .2s ease;
}
.faq-eintrag.offen .faq-zeichen{ transform:rotate(45deg); }
.faq-antwort{
  display:none; color:var(--muted); font-size:16px; line-height:1.7;
  margin:0; padding:0 2px 22px; max-width:72ch;
}
.faq-eintrag.offen .faq-antwort{ display:block; }

/* ── Rechtstexte ──────────────────────────────────────────── */
.rechtstext h2{ font-family:var(--font-body); font-size:19px; margin:34px 0 10px; }
.rechtstext p{ color:var(--muted); font-size:16px; line-height:1.7; margin:0; white-space:pre-line; }

/* ── Formular ─────────────────────────────────────────────── */
.formular{ max-width:660px; }
.feld{ margin:0 0 18px; }
.feld label{
  display:block; font-family:var(--font-menu); font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 7px;
}
.feld input, .feld select, .feld textarea{
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:13px 15px;
}
.feld input:focus, .feld select:focus, .feld textarea:focus{
  outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(18,156,139,.15);
}
.feld textarea{ min-height:130px; resize:vertical; }
.feld-reihe{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.honigtopf{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Rückmeldung nach dem Absenden — eingeblendet von seite.js anhand ?status= */
.formular-hinweis{
  max-width:660px; margin:0 0 24px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); font-size:16px; line-height:1.55;
}
.formular-hinweis.ist-ok{ border-color:var(--green); background:var(--gruen-hell); color:var(--ink); }
.formular-hinweis.ist-fehler{ border-color:#C2543F; background:rgba(194,84,63,.08); color:var(--ink); }

/* ── Anfrageliste ─────────────────────────────────────────── */
/* Zähler im Menü */
.es-merk-zahl{
  display:inline-block; min-width:20px; padding:1px 6px; margin-left:6px;
  border-radius:999px; background:var(--green); color:#fff;
  font-size:12px; font-weight:700; text-align:center; line-height:1.5;
}
/* Knopf auf der Produktkachel */
.merk-knopf{
  margin-top:12px; width:100%; padding:9px 12px; cursor:pointer;
  font-family:var(--font-menu); font-weight:700; font-size:13px;
  color:var(--green); background:transparent;
  border:1px solid var(--line); border-radius:10px;
}
.merk-knopf:hover{ border-color:var(--green); background:var(--gruen-hell); }
.merk-knopf.ist-drin{ background:var(--green); border-color:var(--green); color:#fff; }

/* Liste auf der Kontaktseite */
.merkzettel{ max-width:660px; margin:0 0 30px; }
.merkzettel:empty{ display:none; }
.merk-titel{ font-size:24px; margin:0 0 6px; }
.merk-intro{ color:var(--muted); font-size:15px; margin:0 0 16px; }
.merk-leer{ color:var(--muted); font-size:15px; margin:0 0 8px; }
.merk-liste{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.merk-posten{
  display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
/* Bild und Name sind ein gemeinsamer Link auf die Karte der Kategorieseite */
.merk-ware{ display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none; color:inherit; }
.merk-ware img{
  width:60px; height:45px; flex:none; object-fit:contain; padding:3px;
  background:var(--card); border:1px solid var(--line); border-radius:9px;
}
.merk-kein-bild{
  width:60px; height:45px; flex:none;
  background:var(--card); border:1px dashed var(--line); border-radius:9px;
}
.merk-ware:hover .merk-name{ color:var(--green); }
.merk-name{ font-size:15px; line-height:1.35; }
.merk-nr{ display:block; color:var(--muted); font-size:12.5px; }
.merk-menge{ display:flex; align-items:center; gap:4px; }
.merk-menge input{
  width:52px; text-align:center; padding:6px 4px; font-size:15px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink);
}
.merk-schritt{
  width:28px; height:28px; cursor:pointer; font-size:16px; line-height:1;
  border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink);
}
.merk-schritt:hover{ border-color:var(--green); color:var(--green); }
.merk-preis{ font-family:var(--font-menu); font-weight:700; font-size:15px; white-space:nowrap; }
.merk-weg{
  width:28px; height:28px; cursor:pointer; font-size:17px; line-height:1;
  border:0; background:transparent; color:var(--muted);
}
.merk-weg:hover{ color:#C2543F; }
.merk-fuss{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin:16px 0 10px; }
.merk-leeren{
  cursor:pointer; padding:7px 12px; font-size:13.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:9px; background:transparent;
}
.merk-leeren:hover{ border-color:#C2543F; color:#C2543F; }
.merk-summe{ font-size:16px; }
.merk-summe strong{ font-family:var(--font-menu); font-size:19px; }
@media (max-width:560px){
  /* Bild und Name über die ganze Breite, darunter Menge, Preis und Entfernen in
     einer Zeile — mit zwei Spalten würde das Kreuz allein umbrechen. */
  .merk-posten{ grid-template-columns:1fr auto auto; row-gap:10px; }
  .merk-ware{ grid-column:1 / -1; }
}

/* ── Konfigurator ─────────────────────────────────────────── */
.kf{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius-gross); overflow:hidden;
}
.kf-steuerung{ padding:30px 30px 34px; background:var(--card-2); }
.kf-ergebnis{ padding:30px 30px 34px; background:var(--panel); color:#fff; display:flex; flex-direction:column; }
.kf-label{
  display:block; font-family:var(--font-menu); font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 12px;
}
.kf-ergebnis .kf-label{ color:var(--panel-hell); }
.kf-gruppe{ margin:0 0 26px; }
.kf-gruppe:last-child{ margin-bottom:0; }

.kf-tabs{ display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--bg); }
.kf-tabs button{
  border:0; background:none; cursor:pointer; color:var(--muted);
  font-family:var(--font-menu); font-weight:700; font-size:13px;
  padding:9px 18px; border-radius:999px; transition:background .15s, color .15s;
}
.kf-tabs button[aria-pressed="true"]{ background:var(--green); color:#fff; }

.kf-masse{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(11em, 1fr));
  gap:18px; margin:0 0 26px;
}
/* Bei vergroesserter Schrift (Safari-Textzoom, Lesebrille) waechst 11em mit —
   die zweite Spalte rutscht dann von allein nach unten, statt die Seite
   breiter als das Display zu machen und das Plus abzuschneiden. */
.kf-feld{ min-width:0; }
.kf-feld label{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 7px;
  font-family:var(--font-menu); font-weight:700; font-size:13.5px; color:var(--ink); margin:0 0 8px;
}
.kf-feld label small{ font-weight:600; font-size:11.5px; color:var(--muted); text-transform:none; }
.kf-stepper{ display:flex; align-items:stretch; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg); }
.kf-stepper button{
  min-width:44px; flex:0 0 auto; padding:0 12px; border:0; background:var(--card);
  cursor:pointer; color:var(--ink); font-size:19px; line-height:1; font-weight:400;
}
.kf-stepper button:hover{ background:var(--green); color:#fff; }
.kf-stepper input{
  flex:1; min-width:0; border:0; background:none; text-align:center;
  font-family:var(--font-menu); font-weight:700; font-size:19px; color:var(--ink);
  padding:12px 4px; -moz-appearance:textfield;
}
.kf-stepper input:focus{ outline:0; }
.kf-stepper input::-webkit-outer-spin-button,
.kf-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.kf-raster-huelle{
  background:var(--panel-tief); border-radius:12px; padding:16px;
  display:flex; align-items:center; justify-content:center; min-height:150px; overflow:hidden;
}
.kf-raster{ display:grid; gap:2px; }
.kf-raster i{
  display:block; border-radius:3px; background:var(--panel-zelle);
  border:1px solid rgba(93,200,190,.22);
}
.kf-raster i.rinne{ background:transparent; border-style:dashed; border-color:rgba(93,200,190,.35); }
.kf-mass-text{
  margin:11px 0 0; text-align:center; color:var(--muted);
  font-family:var(--font-menu); font-weight:700; font-size:13.5px;
}

.kf-liste{ list-style:none; margin:0 0 22px; padding:0; flex:1; }
.kf-liste li{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.09); font-size:14.5px;
}
.kf-liste li:last-child{ border-bottom:0; }
.kf-menge{ font-family:var(--font-menu); font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.kf-name{ color:var(--panel-hell); }
.kf-zeilenpreis{ color:#fff; font-variant-numeric:tabular-nums; opacity:.75; font-size:13.5px; }

.kf-summe{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:18px 0 0; border-top:2px solid rgba(255,255,255,.18); margin:0 0 20px;
}
.kf-summe-label{
  display:block; font-family:var(--font-menu); font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--panel-hell);
}
.kf-steuer{
  border:0; background:none; padding:4px 0 0; cursor:pointer;
  color:var(--panel-hell); font-family:var(--font-body); font-size:12.5px;
  text-decoration:underline; text-underline-offset:3px;
}
.kf-steuer:hover{ color:#fff; }
.kf-summe strong{
  font-family:var(--font-head); font-weight:700; font-size:clamp(28px, 9vw, 40px); line-height:1;
  color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kf-cta{ width:100%; justify-content:center; }
.kf-hinweis{ margin:14px 0 0; color:var(--panel-hell); font-size:12.5px; line-height:1.5; opacity:.85; }

@media (max-width:820px){
  .kf{ grid-template-columns:1fr; }
  .kf-steuerung, .kf-ergebnis{ padding:24px 20px 28px; }
  .kf-summe strong{ font-size:clamp(26px, 8.5vw, 32px); }
}

/* ── Brotkrumen ───────────────────────────────────────────── */
.krumen{ font-size:13.5px; color:var(--muted); padding:18px 0 0; }
.krumen a{ color:var(--muted); }
.krumen a:hover{ color:var(--green); }
.krumen span{ margin:0 7px; opacity:.5; }

/* ── Mobil ────────────────────────────────────────────────── */
@media (max-width:700px){
  .hero{ padding:36px 0 22px; }
  .abschnitt{ padding:44px 0; }
  .panel{ padding:32px 24px; }
  .feld-reihe{ grid-template-columns:1fr; }
  .rasterprobe{ display:none; }
}

/* ── Adressblock im Anfrageformular (19.08.2026) ──────────────────────────── */
/* Der Rechnungsblock ist ohne JavaScript sichtbar und ausfüllbar. Erst das
   Skript blendet ihn aus und schaltet ihn per Häkchen wieder ein — so bleibt
   das Formular auch ohne JS vollständig bedienbar. */
.formular-titel {
  font-size: 1.15rem;
  margin: 26px 0 12px;
}
.feld-haken label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
}
.feld-haken input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--gruen, #0aa17f);
}
.rechnungsblock[hidden] { display: none; }

/* ── Einwilligungsbanner (20.08.2026) ───────────────────────────────────────
   Steht im HTML mit hidden und wird erst von einwilligung.js eingeblendet.
   Ohne JavaScript bleibt es unsichtbar — dann laedt aber auch Analytics nicht,
   also wird ohne Einwilligung nichts gemessen. Das [hidden] braucht eine eigene
   Regel, weil display:flex sonst gegen das Browser-Standardverhalten gewinnt. */
.einwilligung{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; justify-content:center;
  padding:14px; pointer-events:none;
}
.einwilligung[hidden]{ display:none; }
.einwilligung-inhalt{
  pointer-events:auto;
  max-width:720px; width:100%;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.einwilligung-inhalt h2{
  font-family:var(--font-body); font-weight:700;
  font-size:19px; line-height:1.25; margin:0 0 8px;
}
.einwilligung-inhalt p{ margin:0 0 16px; font-size:15px; line-height:1.55; color:var(--muted); }
.einwilligung-knoepfe{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.einwilligung-mehr{ font-size:14px; color:var(--muted); margin-left:auto; }
@media (max-width:560px){
  .einwilligung-knoepfe .btn{ flex:1 1 100%; justify-content:center; }
  .einwilligung-mehr{ margin:4px auto 0; }
}

/* Widerrufs-Link im Seitenfuss — sieht aus wie die uebrigen Fusszeilen-Links. */
.es-footer-einwilligung{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:underline; }

/* Preisvorteil des Komplettpakets gegenüber der Summe der Einzelteile.
   Steht unter dem Preis in der Größentabelle; der Satz unter der Tabelle
   erklärt, worauf sich die Zahl bezieht. */
.groessen td.preis .sparen {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.25;
  color: #1f7a4d;
  white-space: normal;
}
.preishinweis.paket-vorteil { color: #1f7a4d; }

/* ── Bildplatzhalter ──────────────────────────────────────────
   Wo ein Paket noch kein belastbares Bild hat, steht statt der Grafik der
   Text aus ui.keinBild. Die Box hat exakt die Maße des Bildes, damit die
   Tabellenzeilen nicht verspringen. Gestrichelt, damit sofort erkennbar
   ist, dass hier etwas fehlt und kein Produkt ohne Aufbau gemeint ist. */
table.groessen td.bild .platzhalter{
  width:180px; height:96px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0 8px; box-sizing:border-box;
  background:var(--card); border:1px dashed var(--line); border-radius:8px;
  color:var(--muted); font-size:11.5px; font-family:var(--font-menu); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; opacity:.7;
}
@media (max-width:640px){
  table.groessen td.bild .platzhalter{ width:120px; height:64px; font-size:10px; letter-spacing:.03em; }
}
.paket-bild-platzhalter{
  aspect-ratio:900/495; display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px dashed var(--line); border-radius:9px;
  color:var(--muted); font-size:13px; font-family:var(--font-menu); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; opacity:.7;
}

/* ── Produktlisten auf dem Handy (28.08.2026) ───────────────────────────────
   Anlass: Albert (Dock Discounter) meldete am 27.08.2026, die Seite sei auf dem
   Handy „nicht so gut sichtbar" wie auf dem Laptop. Nachgemessen bei 390 px:
   Die Tabelle war 978 px breit, sichtbar davon 332 px — die Preisspalte begann
   erst bei 894 px, also mehr als eine Bildschirmbreite jenseits des Rands.
   Technisch konnte man wischen (.tabelle-huelle scrollt), nur sah man dem Kasten
   das nicht an.

   Unter 640 px wird deshalb aus jeder Tabellenzeile eine Karte. Die Zellen
   behalten ihre Reihenfolge im HTML — nur das Raster ordnet sie neu an, damit
   der Preis unter dem Namen steht statt rechts außerhalb.

   Gilt nur für .pakete (die beiden Produktlisten). Die Beispielrechnung im
   Konfigurator, die Stückliste der Detailseiten und die Ratgebertabellen
   behalten ihre Tabellenform — dort ist der Vergleich Zeile für Zeile der Zweck. */
@media (max-width:640px){
  /* table.groessen traegt min-width:520px, damit die breiten Tabellen ihre Spalten
     behalten. Die Stueckliste (3 Spalten) und die Ratgebertabelle (4) brauchen das
     nicht — die Mindestbreite hat sie nur kuenstlich aufgeblaeht und zum seitlichen
     Scrollen gezwungen, obwohl sie auf den Schirm passen (28.08.2026). */
  table.groessen.schmal{ min-width:0; font-size:14.5px; }
  table.groessen.schmal td,
  table.groessen.schmal th{ padding-left:10px; padding-right:10px; }
  /* td.mass steht auf nowrap — in der schmalen Tabelle muss die Zeile brechen
     duerfen, sonst bleiben 9 px Ueberhang stehen. */
  table.groessen.schmal td.mass{ white-space:normal; }

  table.groessen.pakete{ min-width:0; display:block; }
  .groessen.pakete thead{ display:none; }
  .groessen.pakete tbody{ display:block; }

  .groessen.pakete tr{
    display:grid; align-items:center;
    gap:2px 14px; padding:16px 14px;
    border-bottom:1px solid var(--line);
    grid-template-columns:1fr auto;
    grid-template-areas:
      "name    name"
      "preis   preis"
      "flaeche tat";
  }
  .groessen.pakete.mit-bild tr{
    grid-template-columns:120px 1fr;
    grid-template-areas:
      "bild    name"
      "preis   preis"
      "flaeche tat";
  }
  .groessen.pakete tbody tr:last-child{ border-bottom:0; }

  /* table.groessen td.mass|.tat|.preis setzen nowrap und haben zwei Klassen —
     diese Regel braucht drei, sonst gewinnt die Schreibtisch-Variante und der Text
     sprengt die Karte wieder. min-width:0 erlaubt dem Raster, unter die
     Inhaltsbreite zu schrumpfen (Grid-Elemente tun das sonst nicht). */
  table.groessen.pakete td{
    display:block; border:0; padding:0;
    white-space:normal; min-width:0; overflow-wrap:break-word;
  }
  .groessen.pakete td.bild{ grid-area:bild; width:auto; }
  .groessen.pakete td.bild img{ width:120px; height:74px; }
  .groessen.pakete td.mass{ grid-area:name; font-size:16.5px; line-height:1.3; }
  .groessen.pakete td.preis{
    grid-area:preis; text-align:left; font-size:21px; margin:10px 0 8px;
  }
  .groessen.pakete td.flaeche{ grid-area:flaeche; }
  .groessen.pakete td.tat{ grid-area:tat; text-align:right; }
  .groessen.pakete td.flaeche,
  .groessen.pakete td.tat{ color:var(--muted); font-size:14px; }

  /* Der Preisvorteil behält seine eigene Zeile unter dem Preis — nebeneinander
     gesetzt drängt er sich bei langen Übersetzungen an den Rand. */
  .groessen.pakete td.preis .sparen{ margin-top:3px; }

  /* Die Hülle braucht weder Rahmen noch Scrollbereich mehr — die Karten tragen
     ihre eigene Trennlinie, und es läuft nichts mehr über. */
  .tabelle-huelle:has(.groessen.pakete){ border:0; border-radius:0; overflow-x:visible; }
}

/* ── Leiste zur Anfrageliste auf dem Handy (28.08.2026) ─────────────────────
   Anlass: Andreas hat es am 28.08.2026 selbst auf dem Telefon probiert — legt man
   ein Teil ab, passiert sichtbar nichts. Die einzige Rückmeldung war der Zähler
   im Menü, und der steckt mobil hinter dem Burger.

   Die Leiste erscheint erst, wenn etwas auf der Liste liegt (merkzettel.js setzt
   das hidden-Attribut), und nur unter 900 px — das ist derselbe Punkt, ab dem das
   Menü zuklappt. Am Schreibtisch bleibt der Menü-Zähler die Rückmeldung.

   z-index bleibt unter dem Einwilligungsbanner (60): Beide sitzen unten am Rand,
   und das Banner muss zuerst beantwortet werden. merkzettel.js blendet die Leiste
   aus, solange das Banner steht. */
.merk-leiste{ display:none; }

@media (max-width:900px){
  .merk-leiste{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    display:flex; align-items:center; gap:12px;
    padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    background:var(--green); color:#fff; text-decoration:none;
    font-family:var(--font-menu); font-weight:700; font-size:15px;
    box-shadow:0 -6px 22px rgba(0,0,0,.18);
  }
  .merk-leiste[hidden]{ display:none; }
  .merk-leiste:hover{ color:#fff; text-decoration:none; }
  .merk-leiste-zahl{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:23px; height:23px; padding:0 6px; border-radius:999px;
    background:rgba(255,255,255,.22); font-size:13px;
  }
  .merk-leiste-pfeil{ margin-left:auto; font-size:19px; line-height:1; }

  /* Platz am Seitenende, damit die Leiste den Footer nicht verdeckt. */
  body.hat-merk-leiste{ padding-bottom:64px; }
}

/* ── Einzelansicht eines Artikels (/zubehoer/#A046-7) ──────────────────────
   Aufgebaut von einzelansicht.js aus der bestehenden Produktkachel. Deshalb
   erben alle Regeln von `.produkt` und werden hier nur vergrößert — Bild,
   Überschrift und Preis wachsen, die Kachel wird zweispaltig. */
.einzel-kopf{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 20px;
}
.einzel-zurueck{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--green); font-weight:700; text-decoration:none; font-size:14.5px;
}
.einzel-zurueck::before{ content:'‹'; font-size:19px; line-height:1; }
.einzel-zurueck:hover{ text-decoration:underline; }
.einzel-kopf .preisschalter{ margin:0 0 0 auto; }

.einzel-halter .produkt{
  display:grid; grid-template-columns:minmax(0,44%) minmax(0,1fr);
  border-color:var(--green); box-shadow:0 14px 34px rgba(0,0,0,.10);
}
.einzel-halter .produkt:hover{ box-shadow:0 14px 34px rgba(0,0,0,.10); }
.einzel-halter .produkt-bild{
  aspect-ratio:4/3; border-bottom:0; border-right:1px solid var(--line);
}
.einzel-halter .produkt-bild img{ padding:26px; }
.einzel-halter .produkt-text{ padding:30px 32px 32px; }
.einzel-halter .produkt-text h3{ font-size:clamp(23px,4.4vw,31px); line-height:1.14; margin:0 0 14px; }
.einzel-halter .produkt-meta{ font-size:15px; line-height:1.8; margin:0 0 16px; flex:0 0 auto; }
.einzel-halter .farbpunkte{ margin:0 0 18px; }
.einzel-halter .produkt-preis{ font-size:clamp(22px,4vw,31px); }
.einzel-halter .produkt-preis .einheit{ font-size:14px; }
.einzel-halter .merk-knopf{ margin-top:22px; font-size:15px; padding:13px 22px; }

.einzel .preishinweis{ margin:18px 0 0; }

/* ── Kettensymbol: Direktlink kopieren ─────────────────────────────────────
   Sitzt hinter der Artikelnummer auf jeder Kachel, auch in der Einzelansicht.
   Zurückhaltend grau, bis die Kachel überfahren wird — der Kunde sucht ein
   Produkt, kein Werkzeug. Die Trefferfläche ist über das negative Padding
   größer als das 14-px-Symbol, damit sie auf dem Handy zu treffen ist. */
.produkt-link{
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:-3px; margin-left:7px; padding:7px; margin-top:-7px; margin-bottom:-7px;
  color:var(--muted); opacity:.45; border-radius:7px;
  transition:opacity .15s, color .15s, background .15s;
  position:relative; text-decoration:none;
}
.produkt:hover .produkt-link{ opacity:.75; }
.produkt-link:hover,.produkt-link:focus-visible{ opacity:1; color:var(--green); background:var(--card); }
.produkt-link svg{ display:block; }

/* Rückmeldung nach dem Kopieren. `pointer-events:none`, damit die Blase den
   nächsten Klick nicht abfängt. */
.produkt-link.kopiert{ opacity:1; color:var(--green); }
.produkt-link.kopiert::after{
  content:attr(data-kopiert); position:absolute; bottom:calc(100% + 2px); left:50%;
  transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  background:var(--ink); color:#fff; border-radius:6px; padding:4px 8px;
  font:700 11.5px/1 var(--font-menu); letter-spacing:.02em; z-index:5;
}

@media(max-width:760px){
  .einzel-halter .produkt{ grid-template-columns:1fr; }
  .einzel-halter .produkt-bild{ border-right:0; border-bottom:1px solid var(--line); }
  .einzel-halter .produkt-text{ padding:22px; }
  .einzel-halter .produkt-bild img{ padding:18px; }
  .einzel-kopf .preisschalter{ margin:0; }
  .einzel-link input{ flex:1 1 100%; }
}