/* Lenkradsattlerei24 v2. Elfenbein, Tinte, eine Akzentfarbe Cognac. Serif Cormorant Garamond für Überschriften, Geist für Text.
   Formen: Knöpfe und Felder fast eckig (2px), Linien 1px. Palette und Begründung: konzept.md Abschnitt 2b. */
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-latin-500-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url(fonts/Geist-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/GeistMono-Variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --grund: #f6f1e8;      /* Elfenbein */
  --flaeche: #fbf8f2;
  --papier: #fffdf9;
  --tinte: #1b1a17;
  --leise: #6b645a;
  --linie: #dcd3c4;
  --linie-fein: #e8e1d5;
  --akzent: #8a4b26;     /* Cognac, einzige Akzentfarbe */
  --akzent-tief: #6f3a1c;
  --akzent-hell: #efe3d4;
  --akzent-dunkel: #c98a5e; /* gleicher Ton, nur auf Tinte */
  --graphit: #1b1a17;
  --auf-dunkel: #ece5d8;
  --auf-dunkel-leise: #a39a8c;
  --linie-dunkel: #36332d;
  --r: 2px;
  --serif: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --kurve: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font: 400 16px/1.65 "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; line-height: 1.02; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--akzent); }
h3 { margin: 0; font-weight: 500; font-size: 17px; letter-spacing: -0.005em; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 40px; } }
.klein { font-size: 14px; color: var(--leise); }
.platzhalter { font-style: normal; color: var(--leise); }
.kicker { font: 500 11.5px/1.4 "Geist", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--leise); }
.ico { width: 1em; height: 1em; display: inline-block; flex: none; vertical-align: -0.15em; }

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: var(--r); border: 0; cursor: pointer;
  background: var(--tinte); color: var(--grund); font: 500 12.5px/1 "Geist", sans-serif; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, transform .15s var(--kurve);
}
.btn:hover { background: var(--akzent-tief); }
.btn:active { transform: scale(.985); }
.btn:focus-visible, button:focus-visible, a:focus-visible, .feld:focus-visible, input:focus-visible + span { outline: 1.5px solid var(--akzent); outline-offset: 3px; }
.btn-zweit { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); }
.btn-zweit:hover { background: var(--tinte); color: var(--grund); }
.btn-hell { background: var(--grund); color: var(--tinte); }
.btn-hell:hover { background: #fff; }
.btn-klein { min-height: 40px; padding: 0 18px; font-size: 11.5px; letter-spacing: .14em; }
.textlink { font: 500 12.5px/1 "Geist", sans-serif; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--tinte); }
.textlink:hover { color: var(--akzent); border-color: var(--akzent); }

/* Leiste + Kopf */
.entwurf-leiste { background: var(--graphit); color: var(--auf-dunkel); font: 500 12px/1.4 var(--mono); padding: 8px 16px; text-align: center; }
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(246, 241, 232, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linie-fein); }
.kopf-in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.marke { display: inline-flex; align-items: center; text-decoration: none; }
.logo { display: block; height: 34px; width: auto; }
.kopf nav { display: none; gap: 32px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }
.kopf nav a { text-decoration: none; color: var(--leise); transition: color .2s ease; }
.kopf nav a:hover { color: var(--tinte); }
@media (min-width: 1000px) { .kopf nav { display: flex; } }
@media (max-width: 480px) { .kopf-in { gap: 12px; height: 60px; } .kopf .logo { height: 25px; } .nur-breit { display: none; } .kopf .btn-klein { padding: 0 12px; font-size: 10.5px; letter-spacing: .12em; flex: none; } }
@media (max-width: 359px) { .kopf .logo { height: 21px; } .kopf .btn-klein { padding: 0 10px; } }

/* Held */
.held { padding: 56px 0 0; overflow: hidden; }
.held-kopf { display: grid; gap: 22px; }
.held h1 { font-size: clamp(54px, 10.4vw, 158px); line-height: .92; letter-spacing: -0.02em; }
.held-unter { max-width: 40ch; color: var(--leise); font-size: 17px; }
.held-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 28px; }
@media (min-width: 1000px) {
  .held { padding-top: 88px; }
  .held-kopf { grid-template-columns: 1.55fr 1fr; column-gap: 64px; align-items: end; }
  .held-kopf .kicker { grid-column: 1 / -1; }
  .held-seite { padding-bottom: 14px; }
}
.held-bild { position: relative; margin: 48px 0 0; }
.held-bild img {
  display: block; width: 100%; height: clamp(320px, 52vw, 720px); object-fit: cover; object-position: 50% 52%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
}
.held-bild figcaption { display: block; margin-top: -6px; font: 500 11px/1.4 "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .held h1 { animation: auf 1.4s var(--kurve) both; }
  .held-seite { animation: auf 1.4s .15s var(--kurve) both; }
  .held-bild img { animation: aufziehen 2s var(--kurve) both; }
  @supports (animation-timeline: scroll()) {
    .held-bild { animation: tiefe linear both; animation-timeline: scroll(root); animation-range: 0 900px; }
  }
}
@keyframes auf { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes aufziehen { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tiefe { to { transform: translateY(60px); } }

.fakten { display: grid; grid-template-columns: 1fr; margin-top: 40px; padding-bottom: 64px; }
.fakten > div { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-top: 1px solid var(--linie); }
.fakten strong { font: 500 34px/1.05 var(--serif); letter-spacing: -0.01em; }
.fakten span { color: var(--leise); font-size: 14px; }
@media (min-width: 768px) {
  .fakten { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linie); }
  .fakten > div { border-top: 0; padding: 28px 32px 0; border-left: 1px solid var(--linie); }
  .fakten > div:first-child { border-left: 0; padding-left: 0; }
}

/* Airbag */
.airbag { border-block: 1px solid var(--linie); background: var(--flaeche); }
.airbag-in { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding-block: 30px; align-items: start; }
.airbag-icon { font-size: 30px; color: var(--akzent); margin-top: 4px; }
.airbag h2 { font-size: clamp(24px, 2.6vw, 30px); }
.airbag p { margin-top: 8px; max-width: 72ch; color: var(--leise); }

/* Material: dunkles Kapitel (Helligkeitssprung als Kapitelmarke) */
.material { background: var(--graphit); color: var(--auf-dunkel); padding: 104px 0 112px; }
.material .kicker { color: var(--auf-dunkel-leise); }
.material h2 { font-size: clamp(44px, 6.6vw, 104px); line-height: .96; margin-top: 18px; }
.material h2 em { color: var(--akzent-dunkel); }
.material-unter { margin-top: 24px; max-width: 46ch; color: var(--auf-dunkel-leise); font-size: 17px; }
@media (min-width: 1000px) { .material-kopf { display: grid; grid-template-columns: 1.5fr 1fr; column-gap: 64px; align-items: end; } .material-kopf .kicker { grid-column: 1 / -1; } .material-unter { margin: 0 0 12px; } }
.material-bild { margin: 56px 0 0; overflow: clip; }
.material-bild img {
  display: block; width: 100%; height: clamp(300px, 46vw, 640px); object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
}
.materialien { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--linie-dunkel); }
.materialien li { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linie-dunkel); }
.materialien .nr { font: 500 12px/1 var(--mono); color: var(--auf-dunkel-leise); }
.materialien .probe { width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.materialien h3 { font: 500 26px/1.15 var(--serif); letter-spacing: 0; }
.materialien p { margin-top: 2px; color: var(--auf-dunkel-leise); font-size: 15px; max-width: 52ch; }
.materialien .mpreis { grid-column: 3; font: 500 11.5px/1 "Geist", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--auf-dunkel); }
@media (min-width: 768px) {
  .materialien li { grid-template-columns: 56px 88px minmax(0, 1fr) 140px; gap: 32px; padding: 26px 0; }
  .materialien .probe { width: 88px; height: 88px; }
  .materialien h3 { font-size: 32px; }
  .materialien .mpreis { grid-column: auto; text-align: right; }
}
.material-zwei { margin: 72px 0 0; display: grid; gap: 22px; }
.material-zwei img { display: block; width: 100%; height: clamp(260px, 40vw, 560px); object-fit: cover; }
.material-zwei figcaption { color: var(--auf-dunkel-leise); max-width: 46ch; }
.material-zwei figcaption span { display: block; font: 500 30px/1.1 var(--serif); color: var(--auf-dunkel); margin-bottom: 6px; }
@media (min-width: 1000px) { .material-zwei { grid-template-columns: 2fr 1fr; gap: 48px; align-items: end; } }
.bild-hinweis { margin-top: 28px; font-size: 13px; color: var(--auf-dunkel-leise); }

/* Konfigurator */
.konf { padding: 112px 0 112px; }
.konf-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.konf-in > * { min-width: 0; }
@media (min-width: 1024px) { .konf-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; } }
.konf-vorschau { position: sticky; top: 60px; z-index: 5; background: var(--grund); padding-top: 8px; }
@media (min-width: 1024px) { .konf-vorschau { top: 104px; } }
.konf-buehne { background: radial-gradient(circle at 50% 42%, #fffdf9 0%, #efe8dc 72%); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--linie-fein); }
@keyframes zucken { 0% { transform: rotate(-6deg); } 100% { transform: none; } }
.konf-info { padding: 18px 0 0; }
.konf-name { font: 500 24px/1.2 var(--serif); }
.konf-detail { color: var(--leise); }
.konf-hinweis { margin-top: 8px; font-size: 13px; color: var(--leise); }
@media (max-width: 1023px) {
  .konf-vorschau { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
  .konf-info { padding: 0; }
  .konf-name { font-size: 18px; } .konf-detail { font-size: 13.5px; } .konf-hinweis { display: none; }
}
.konf-schritte h2 { font-size: clamp(38px, 4.4vw, 64px); margin: 14px 0 12px; }
.schritt { border: 0; margin: 0; padding: 30px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 14px; min-width: 0; }
.schritt legend { font: 500 11.5px/1.4 "Geist", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--tinte); padding: 0; float: left; width: 100%; }
.feld-label { font-size: 14px; font-weight: 500; color: var(--tinte); display: block; }
.feld-hilfe { font-size: 13.5px; color: var(--leise); }
.feld { width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--r); border: 1px solid #c8bead; background: var(--papier); font: inherit; color: var(--tinte); }
.feld::placeholder { color: #7a7266; }
.feld:focus { border-color: var(--tinte); outline: none; }
input[type=file].feld { padding: 12px 14px; }
.optionen { display: grid; gap: 6px; }
.check { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; min-width: 0; }
.check span { min-width: 0; overflow-wrap: anywhere; }
.check input { width: 18px; height: 18px; accent-color: var(--akzent); flex: none; margin: 0; }
.check em, .segment em, .karte-p { font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--leise); margin-left: 6px; }
.sonderfall { display: flex; gap: 12px; padding: 16px; background: var(--papier); border: 1px solid var(--linie); border-left: 2px solid var(--akzent); font-size: 14px; color: var(--leise); }
.sonderfall .ico { color: var(--akzent); font-size: 20px; margin-top: 1px; }

.material-wahl { display: grid; gap: 10px; }
.material-wahl .feld-label:not(:first-child) { margin-top: 10px; }
.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.karte { display: grid; gap: 4px; text-align: left; padding: 8px 8px 14px; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r); cursor: pointer; font: inherit; color: var(--tinte); transition: border-color .2s ease, transform .15s ease; }
.karte:hover { border-color: #b3a893; }
.karte:active { transform: scale(.985); }
.karte.on { border-color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); }
.karte-t { font-weight: 500; font-size: 14px; line-height: 1.3; margin: 8px 4px 0; }
.karte-p { margin: 0 4px; }
.muster { display: block; height: 76px; }
@media (min-width: 640px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Materialflächen: eigene Blender-Renderings v2, siehe bilder/bildquellen.md */
.m-glatt { background: url(bilder/v2-nappa.jpg) center/cover; }
.m-perf { background: url(bilder/v2-perforiert.jpg) center/cover; }
.m-narbe { background: url(bilder/v2-narbe.jpg) center/cover; }
.m-alc { background: url(bilder/v2-mikrofaser.jpg) center/cover; }
.m-alc-griff { background: url(bilder/v2-mikrofaser.jpg) right center/50% auto no-repeat, url(bilder/v2-nappa.jpg) center/cover; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 14px 4px 5px; background: var(--papier); border: 1px solid var(--linie); border-radius: 999px; cursor: pointer; font: 500 13.5px/1 "Geist", sans-serif; color: var(--tinte); transition: border-color .2s ease; }
.swatch:hover { border-color: #b3a893; }
.swatch.on { border-color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); }
.swatch-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -6px 10px rgba(0,0,0,.2); }

.segment { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linie); border-radius: var(--r); }
.segment button { min-height: 52px; border: 0; border-left: 1px solid var(--linie); border-radius: 0; background: transparent; font: 500 14px/1.15 "Geist", sans-serif; color: var(--tinte); cursor: pointer; padding: 6px; transition: background-color .2s ease, color .2s ease; }
.segment button:first-child { border-left: 0; }
.segment button em { display: block; margin: 3px 0 0; font-size: 11px; }
.segment button.on { background: var(--tinte); color: var(--grund); }
.segment button.on em { color: var(--auf-dunkel-leise); }

.summe { margin-top: 32px; background: var(--papier); border: 1px solid var(--linie); padding: 26px; }
.summe-zeilen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 14.5px; }
.summe-zeilen li { min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; color: var(--leise); }
.summe-zeilen li span:first-child { min-width: 0; }
.summe-zeilen li span:last-child { font-family: var(--mono); font-size: 13.5px; color: var(--tinte); white-space: nowrap; margin-left: auto; }
.summe-zeilen li.heiz span:first-child { color: var(--akzent); }
.summe-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linie); }
.summe-label { display: block; font: 500 11px/1.4 "Geist", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--leise); }
.summe-wert { display: block; font: 500 46px/1.05 var(--serif); font-variant-numeric: lining-nums; }
.summe-klein { display: block; font-size: 12.5px; color: var(--leise); }

.mobil-leiste { position: sticky; bottom: 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 248, 242, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linie); margin-top: 32px; }
.mobil-leiste span { font: 500 26px/1 var(--serif); white-space: nowrap; }
@media (max-width: 359px) { .mobil-leiste span { font-size: 21px; } .mobil-leiste .btn-klein { padding: 0 10px; font-size: 10px; } }
@media (min-width: 1024px) { .mobil-leiste { display: none; } }

/* Ablauf */
.ablauf { padding: 112px 0; border-top: 1px solid var(--linie); }
.ablauf h2 { font-size: clamp(42px, 5.6vw, 84px); margin-top: 14px; }
.weg { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 0; }
.weg li { padding: 28px 0; border-top: 1px solid var(--linie); display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; }
.roemisch { grid-row: span 2; font: italic 500 44px/1 var(--serif); color: var(--akzent); }
.weg h3 { font: 500 28px/1.15 var(--serif); }
.weg p { margin-top: 6px; color: var(--leise); max-width: 42ch; }
@media (min-width: 900px) {
  .weg { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .weg li { display: block; padding-top: 32px; }
  .roemisch { display: block; font-size: 64px; margin-bottom: 18px; }
}
.verpacken { display: grid; gap: 16px; margin-top: 72px; }
@media (min-width: 900px) { .verpacken { grid-template-columns: 1.5fr 1fr; gap: 16px; } }
.verpacken-liste, .verpacken-adresse { border: 1px solid var(--linie); padding: 32px; background: var(--flaeche); }
.verpacken h3 { font: 500 26px/1.15 var(--serif); margin-bottom: 16px; }
.verpacken-liste ol { margin: 0; padding-left: 24px; display: grid; gap: 10px; color: #3d3933; }
.verpacken-liste li::marker { font-family: var(--mono); font-size: 13px; color: var(--akzent); }
.verpacken-adresse { background: var(--graphit); color: var(--auf-dunkel); border-color: var(--graphit); }
.verpacken-adresse .platzhalter { color: #fff; font-size: 17px; line-height: 1.6; font-family: var(--mono); }
.verpacken-adresse .klein { color: var(--auf-dunkel-leise); margin-top: 16px; }

/* Preise */
.preise { padding: 112px 0; background: var(--flaeche); border-top: 1px solid var(--linie); }
.preise-in { display: grid; gap: 48px; }
@media (min-width: 1000px) { .preise-in { grid-template-columns: .95fr 1.3fr; gap: 88px; } }
.preise h2 { font-size: clamp(42px, 5vw, 76px); margin-top: 14px; }
.preis-basis { margin: 40px 0 14px; display: flex; flex-direction: column; padding-top: 24px; border-top: 1px solid var(--linie); }
.preis-basis span { font: 500 11.5px/1.4 "Geist", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--leise); }
.preis-basis strong { font: 500 clamp(84px, 10vw, 148px)/1 var(--serif); letter-spacing: -0.02em; margin: 6px 0 18px; }
.preis-gross .btn { margin-top: 32px; }
.beispiele { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.beispiele li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 14.5px; }
.beispiele span { color: var(--leise); }
.beispiele b { font: 500 22px/1.1 var(--serif); white-space: nowrap; }
.preis-gruppen { display: grid; gap: 0; align-content: start; }
@media (min-width: 640px) { .preis-gruppen { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.gruppe { padding: 26px 0 28px; border-top: 1px solid var(--tinte); }
.gruppe h3 { font: 500 11.5px/1.4 "Geist", sans-serif; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
.gruppe dl { margin: 0; display: grid; gap: 10px; }
.gruppe dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; }
.gruppe dt { color: var(--leise); }
.gruppe dd { margin: 0; font-family: var(--mono); font-size: 13px; text-align: right; white-space: nowrap; }

/* Fragen */
.fragen { padding: 112px 0; border-top: 1px solid var(--linie); }
.fragen-in { display: grid; gap: 40px; }
@media (min-width: 1000px) { .fragen-in { grid-template-columns: .8fr 1.6fr; gap: 88px; } }
.fragen h2 { font-size: clamp(42px, 5vw, 76px); margin-top: 14px; }
.faq { border-top: 1px solid var(--tinte); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font: 500 22px/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1px; background: var(--tinte); transition: transform .3s var(--kurve); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq summary:hover { color: var(--akzent); }
.faq details p { padding: 0 0 24px; color: var(--leise); max-width: 62ch; }

/* Schluss + Fuß */
.schluss { background: var(--graphit); color: var(--auf-dunkel); padding: 112px 0 96px; }
.schluss-in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 768px) { .schluss-in { grid-template-columns: auto 1fr; gap: 72px; } }
.schluss-text { display: grid; gap: 32px; justify-items: start; }
.schluss-zeichen { width: clamp(120px, 20vw, 210px); height: auto; color: var(--auf-dunkel); }
.schluss h2 { font-size: clamp(40px, 5.4vw, 80px); max-width: 16ch; }
.schluss h2 em { color: var(--akzent-dunkel); }
/* Die Naht läuft beim Scrollen um den Kranz und schließt sich (Bindeglied zum Logo). */
.naht-zug { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .naht-zug { stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.3,.1,.2,1); }
  .schluss.zu .naht-zug { stroke-dashoffset: 0; }
  @supports (animation-timeline: view()) {
    .naht-zug { transition: none; animation: naht-schliessen linear both; animation-timeline: --schluss; animation-range: entry 10% cover 55%; }
    .schluss { view-timeline: --schluss block; }
  }
}
@keyframes naht-schliessen { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.fuss { background: var(--graphit); color: var(--auf-dunkel-leise); border-top: 1px solid var(--linie-dunkel); padding: 36px 0 44px; font-size: 14px; }
.fuss-in { display: grid; gap: 22px; }
@media (min-width: 768px) { .fuss-in { grid-template-columns: 1fr auto; align-items: end; } }
.fuss .logo { height: 30px; }
.fuss .platzhalter { color: var(--auf-dunkel-leise); margin-top: 10px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }
.fuss nav a { color: var(--auf-dunkel); text-decoration: none; }
.fuss nav a:hover { color: var(--akzent-dunkel); }

/* Bewegung beim Scrollen: Abschnitte heben sich leicht an (nur wo unterstützt, sonst sofort sichtbar) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .materialien li, .weg li, .gruppe, .material-zwei, .faq details, .verpacken > * {
      animation: auf linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
    .material-bild img { animation: tiefe-bild linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes tiefe-bild { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Anfrage-Dialog */
.anfrage { border: 0; border-radius: var(--r); padding: 0; width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--flaeche); color: var(--tinte); box-shadow: 0 30px 80px rgba(27, 26, 23, .35); }
.anfrage::backdrop { background: rgba(27, 26, 23, .5); backdrop-filter: blur(3px); }
.anfrage-in { padding: 32px 26px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.anfrage .feld { max-width: 100%; min-width: 0; }
.anfrage .btn { white-space: normal; }
.anfrage h2 { font-size: 40px; margin-top: -8px; }
.schliessen { position: absolute; right: 14px; top: 14px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linie); background: var(--papier); cursor: pointer; font-size: 18px; display: grid; place-items: center; color: var(--tinte); }
.anfrage-liste { margin: 0; display: grid; gap: 6px; font-size: 14.5px; border-top: 1px solid var(--linie); padding-top: 14px; }
.anfrage-liste div { display: grid; grid-template-columns: 136px 1fr; gap: 12px; }
.anfrage-liste dt { color: var(--leise); }
.anfrage-liste dd { margin: 0; overflow-wrap: anywhere; }
#anfrage-form { display: grid; gap: 14px; }
.feld-gruppe { display: grid; gap: 6px; }
.entwurf-hinweis { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--akzent-tief); background: var(--akzent-hell); padding: 10px 12px; }
.anfrage-ok { display: grid; gap: 14px; justify-items: start; }
.ok-icon { font-size: 40px; color: var(--akzent); }
@media (max-width: 420px) { .anfrage-liste div { grid-template-columns: 1fr; gap: 0; } }
/* Prüfer A1978 v2: Knopf in der Preisleiste darf bei 320 px nicht über den Rand */
.summe-fuss .btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 48px; }

/* v3 Konfigurator: Canvas-Lenkrad, Nahansicht, Formkarten */
.konf-buehne { position: relative; }
.cfg-rad { width: 88%; aspect-ratio: 1; display: block; }
.konf-form { position: absolute; left: 14px; bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.konf-nah { margin: 12px 0 0; }
.cfg-nah { width: 100%; aspect-ratio: 600 / 240; display: block; background: #e9e1d3; border: 1px solid var(--linie-fein); }
.konf-nah figcaption { margin-top: 6px; font-size: 12.5px; color: var(--leise); }
.formen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) and (max-width: 1023px) { .formen { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.form-karte { padding: 8px 6px 12px; }
.form-mini { width: 100%; aspect-ratio: 1; display: block; background: radial-gradient(circle at 50% 42%, #fffdf9 0%, #efe8dc 75%); }
.form-karte .karte-t { font-size: 12.5px; margin: 6px 2px 0; }
.segment-zwei { grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
@media (max-width: 1023px) {
  .konf-vorschau { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-areas: "rad nah" "rad info"; align-items: start; column-gap: 12px; row-gap: 8px; }
  .konf-buehne { grid-area: rad; }
  .konf-nah { grid-area: nah; margin: 0; }
  .konf-nah figcaption { display: none; }
  .konf-info { grid-area: info; }
  .konf-form { display: none; }
  .cfg-rad { width: 94%; }
  .konf-name { font-size: 16px; } .konf-detail { font-size: 12.5px; }
}

/* v4: M-Lenkräder, Sitze, Vor Ort, Über uns */
.check small { display: block; font-size: 12.5px; color: var(--leise); }
.m-band { padding: 96px 0; background: var(--graphit); color: var(--auf-dunkel); }
.m-band-in { display: grid; gap: 32px; }
@media (min-width: 1000px) { .m-band-in { grid-template-columns: .9fr 1.4fr; gap: 88px; align-items: start; } }
.m-band .kicker { color: var(--auf-dunkel-leise); }
.m-band h2 { font-size: clamp(42px, 5vw, 76px); margin-top: 14px; }
.m-band h2 em { color: var(--akzent-dunkel); }
.m-text > p:first-child { font-size: 17px; max-width: 58ch; }
.m-punkte { list-style: none; margin: 28px 0; padding: 0; border-top: 1px solid var(--linie-dunkel); }
.m-punkte li { padding: 12px 0; border-bottom: 1px solid var(--linie-dunkel); color: var(--auf-dunkel-leise); font-size: 15px; }
.m-band .textlink { color: var(--auf-dunkel); }
.m-marke { margin-top: 28px; color: var(--auf-dunkel-leise); max-width: 64ch; font-size: 12.5px; }
.sitze { padding: 112px 0; background: var(--flaeche); border-top: 1px solid var(--linie); }
.sitze h2 { font-size: clamp(42px, 5vw, 76px); margin-top: 14px; }
.sitze-unter { margin-top: 24px; max-width: 60ch; color: var(--leise); font-size: 17px; }
.sitze-raster { display: grid; gap: 0; margin-top: 56px; }
@media (min-width: 900px) { .sitze-raster { grid-template-columns: 1fr 1fr 1.2fr; column-gap: 48px; } }
.sitze-weg { padding: 26px 0 28px; border-top: 1px solid var(--tinte); }
.sitze-weg h3 { font: 500 11.5px/1.4 "Geist", sans-serif; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
.sitze-weg ol { margin: 0 0 24px; padding-left: 22px; display: grid; gap: 10px; color: #3d3933; font-size: 14.5px; }
.sitze-weg li::marker { font-family: var(--mono); font-size: 13px; color: var(--akzent); }
.vorort { padding: 112px 0; border-top: 1px solid var(--linie); }
.vorort h2 { font-size: clamp(42px, 5.6vw, 84px); margin-top: 14px; }
.vorort-unter { margin-top: 24px; max-width: 62ch; color: var(--leise); font-size: 17px; }
.vorort-text { color: #3d3933; max-width: 60ch; }
@media (min-width: 900px) { .weg-vier { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.ueber { padding: 112px 0; background: var(--flaeche); border-top: 1px solid var(--linie); }
.ueber-in { display: grid; gap: 40px; }
@media (min-width: 1000px) { .ueber-in { grid-template-columns: .8fr 1.6fr; gap: 88px; } }
.ueber h2 { font-size: clamp(38px, 4.4vw, 64px); margin-top: 14px; }
.ueber-text > p { font-size: 17px; max-width: 62ch; }
.firma { margin: 32px 0 0; border-top: 1px solid var(--tinte); }
.firma div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 14.5px; }
@media (min-width: 560px) { .firma div { grid-template-columns: 160px 1fr; gap: 16px; } }
.firma dt { color: var(--leise); }
.firma dd { margin: 0; overflow-wrap: anywhere; }


/* ---------- Live (A1978): Bestellen, Anfrage, Fehler ---------- */
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fehler { margin: 0; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--akzent); background: var(--papier); color: var(--akzent-tief); font-size: 14px; }
.feld-fehler { margin: 0; font-size: 13px; color: var(--akzent-tief); }
.bestell-summe { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--linie); padding-top: 14px; }
.bestell-summe strong { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.check-lang { align-items: flex-start; }
.check-lang input { margin-top: 3px; }
.anfrage form { display: grid; gap: 16px; }
.anfrage .textlink { background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; color: var(--tinte); justify-self: start; }
.btn:disabled { opacity: .55; cursor: progress; }
.fuss a { color: inherit; }
/* Online-Widerruf (§ 356a BGB) auf rechtliches.html */
.widerruf-form { display: grid; gap: 16px; max-width: 520px; margin-top: 18px; }
.widerruf-form .btn { justify-self: start; }
.widerruf-ok { margin-top: 18px; border: 1px solid var(--linie); padding: 16px 18px; background: var(--papier); max-width: 520px; }
.widerruf-ok:focus { outline: 2px solid var(--akzent); outline-offset: 2px; }
.feld[aria-invalid="true"] { border-color: var(--akzent-tief); }

/* lange URL in der Widerrufsbelehrung darf auf 390 px umbrechen (sonst Querscroll) */
.umbruch { overflow-wrap: anywhere; }
/* Fokus/Anker nicht unter der festen Kopfleiste verstecken */
#vertrag-widerrufen, .widerruf-ok { scroll-margin-top: 96px; }