/* Zinnhandel Jenster. Alle Werte kommen aus tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--hintergrund); color: var(--text);
  font: 400 var(--fs-text)/1.6 var(--sans);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); text-underline-offset: 3px; }
a:hover { color: var(--akzent-hell); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: var(--radius-s); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }

/* ---------- Layout ---------- */
.huelle { width: min(100% - 2rem, var(--breite)); margin-inline: auto; }
@media (min-width: 700px) { .huelle { width: min(100% - 4rem, var(--breite)); } }
.sektion { padding-block: var(--sektion); scroll-margin-top: 88px; }
.sektion--dunkel { background: var(--primaer); color: var(--auf-dunkel); }
.sektion--dunkel h2, .sektion--dunkel h3 { color: var(--auf-dunkel); }
.sektion--flaeche { background: var(--flaeche); }
.kopfblock { max-width: var(--breite-text); display: grid; gap: var(--r4); margin-bottom: var(--r7); }
.kicker {
  font: 600 0.8125rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--akzent); display: flex; align-items: center; gap: var(--r3);
}
.sektion--dunkel .kicker { color: var(--akzent-hell); }
.kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.lead { font-size: 1.125rem; color: var(--text-gedaempft); max-width: var(--breite-text); }
.sektion--dunkel .lead { color: var(--auf-dunkel-weich); }
.klein { font-size: var(--fs-klein); color: var(--text-gedaempft); }
.sektion--dunkel .klein { color: var(--auf-dunkel-weich); }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r3);
  font: 600 var(--fs-text)/1 var(--sans); text-decoration: none; white-space: nowrap;
  padding: 1rem 1.6rem; border-radius: var(--radius-s); border: 1px solid transparent; cursor: pointer;
  transition: background var(--kurz) var(--kurve), color var(--kurz) var(--kurve),
              border-color var(--kurz) var(--kurve), transform var(--kurz) var(--kurve);
}
.knopf:hover { transform: translateY(-2px); }
.knopf--voll { background: var(--akzent); color: #fff; }
.knopf--voll:hover { background: var(--akzent-hell); color: #fff; }
.knopf--rand { background: transparent; color: var(--text); border-color: var(--rahmen); }
.knopf--rand:hover { border-color: var(--akzent); color: var(--akzent); }
.sektion--dunkel .knopf--rand, .hero .knopf--rand { color: var(--auf-dunkel); border-color: rgba(245,244,240,.34); }
.sektion--dunkel .knopf--rand:hover, .hero .knopf--rand:hover { border-color: var(--auf-dunkel); color: var(--auf-dunkel); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--r4); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 60; background: var(--primaer);
  border-bottom: 1px solid rgba(245,244,240,.12);
  transition: padding var(--kurz) var(--kurve), box-shadow var(--kurz) var(--kurve);
  padding-block: var(--r4);
}
.kopf.verdichtet { padding-block: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.26); }
.kopf-inhalt { display: flex; align-items: center; gap: var(--r5); }
.marke { display: flex; align-items: center; flex: none; }
.marke img { height: 40px; width: auto; transition: height var(--kurz) var(--kurve); }
.kopf.verdichtet .marke img { height: 32px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--r5); }
.nav a {
  color: var(--auf-dunkel-weich); text-decoration: none; font-size: var(--fs-klein); font-weight: 500;
  white-space: nowrap; padding-block: 4px; border-bottom: 2px solid transparent;
  transition: color var(--kurz) var(--kurve), border-color var(--kurz) var(--kurve);
}
.nav a:hover { color: var(--auf-dunkel); border-color: var(--akzent-hell); }
.nav .knopf { padding: .7rem 1.2rem; font-size: var(--fs-klein); }
.nav .knopf:hover { border-color: transparent; }
.burger {
  display: none; margin-left: auto; background: none; border: 1px solid rgba(245,244,240,.3);
  border-radius: var(--radius-s); padding: 10px; cursor: pointer; color: var(--auf-dunkel);
}
.burger span { display: block; width: 20px; height: 2px; background: currentColor; margin: 4px 0; transition: transform var(--kurz) var(--kurve), opacity var(--kurz); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 920px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--primaer); padding: var(--r5) 1rem var(--r6); gap: var(--r4);
    border-bottom: 1px solid rgba(245,244,240,.14); margin-left: 0;
    transform: translateY(-120%); visibility: hidden;
    transition: transform 320ms var(--kurve), visibility 0s linear 320ms;
  }
  /* visibility nimmt die Links aus der Tab-Reihenfolge, solange das Menue zu ist */
  .nav.offen { transform: translateY(0); visibility: visible; transition: transform 320ms var(--kurve); }
  .nav a { font-size: 1.0625rem; padding-block: 10px; border-bottom: 1px solid rgba(245,244,240,.1); }
  .nav .knopf { justify-content: center; padding: 1rem; font-size: var(--fs-text); }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--auf-dunkel); background: var(--primaer); overflow: hidden; }
.hero-bild { position: absolute; inset: 0; z-index: -2; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(21,30,34,.94) 0%, rgba(21,30,34,.86) 46%, rgba(21,30,34,.58) 100%);
}
.hero-inhalt { padding-block: clamp(56px, 11vw, 130px); display: grid; gap: var(--r5); max-width: 760px; }
.hero h1 { font-size: var(--fs-h1); color: var(--auf-dunkel); }
.hero h1 .wort { display: inline-block; }
.preisblock { display: flex; align-items: flex-end; gap: var(--r4); flex-wrap: wrap; margin-top: var(--r2); }
.preis {
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-preis); line-height: .9;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--auf-dunkel);
}
.preis-einheit { font-family: var(--sans); font-size: 1.25rem; font-weight: 500; color: var(--auf-dunkel-weich); padding-bottom: .5rem; }
.preis-bedingung {
  display: flex; flex-wrap: wrap; gap: var(--r3) var(--r5); font-size: var(--fs-klein);
  color: var(--auf-dunkel-weich); list-style: none;
}
.preis-bedingung li { display: flex; align-items: center; gap: 8px; }
.preis-bedingung li::before { content: ""; width: 6px; height: 6px; background: var(--akzent-hell); flex: none; }
.hero-fuss { font-size: var(--fs-klein); color: var(--auf-dunkel-weich); max-width: 56ch; }

/* ---------- Laufband Fakten ---------- */
.fakten { background: var(--akzent); color: #fff; overflow: hidden; padding-block: var(--r4);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fakten.zieht { cursor: grabbing; }
.fakten-spur { display: flex; gap: var(--r8); width: max-content; will-change: transform; }
.fakten-spur span { display: flex; align-items: center; gap: var(--r3); font-size: var(--fs-klein); font-weight: 500; white-space: nowrap; }
.fakten-spur span::before { content: ""; width: 7px; height: 7px; background: rgba(255,255,255,.6); flex: none; transform: rotate(45deg); }

/* ---------- Ablauf ---------- */
.schritte { display: grid; gap: var(--r5); counter-reset: s; }
.schritt {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--r5); align-items: start;
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-l);
  padding: var(--r6); position: relative; overflow: hidden;
}
.schritt-nr {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 600; line-height: 1;
  color: var(--akzent); font-variant-numeric: tabular-nums;
}
.schritt-nr::after { content: ""; display: block; width: 28px; height: 2px; background: var(--rahmen); margin-top: var(--r3); transition: width var(--lang) var(--kurve); }
.schritt.in .schritt-nr::after { width: 52px; background: var(--akzent); }
.schritt-text { display: grid; gap: var(--r3); }
.schritt-bild { display: none; }
@media (min-width: 900px) {
  .schritt { grid-template-columns: 72px 1fr 260px; align-items: center; }
  /* Schritt ohne Bild soll die Bildspalte nicht leer stehen lassen */
  .schritt--ohne-bild { grid-template-columns: 72px 1fr; }
  .schritt-bild { display: block; border-radius: var(--radius-s); overflow: hidden; }
  .schritt-bild img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform var(--lang) var(--kurve); }
  .schritt:hover .schritt-bild img { transform: scale(1.04); }
}

/* ---------- Ankauf-Karten ---------- */
/* Drei Karten, deshalb feste drei Spalten statt auto-fit. Mit auto-fit blieb auf
   breiten Bildschirmen eine vierte Spalte leer und bei etwa 800px hing die dritte
   Karte allein in der zweiten Reihe (21.10.2026, nachdem Zinnfiguren rausfiel). */
.karten { display: grid; gap: var(--r5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .karten { grid-template-columns: 1fr; } }
.karte {
  position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--primaer);
  min-height: 300px; display: flex; align-items: flex-end; isolation: isolate;
}
.karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--kurve); }
.karte::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(18,26,30,.96) 0%, rgba(18,26,30,.78) 35%, rgba(18,26,30,.12) 100%);
}
.karte:hover img { transform: scale(1.05); }
.karte-text { padding: var(--r5); display: grid; gap: 6px; color: var(--auf-dunkel); text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.karte-text h3 { color: #fff; }
.karte-text p { font-size: var(--fs-klein); color: rgba(245,244,240,.86); }

.nichtliste {
  margin-top: var(--r6); background: var(--hinweis); border-radius: var(--radius-l);
  padding: var(--r6); display: grid; gap: var(--r4);
}
.nichtliste ul { list-style: none; display: grid; gap: var(--r3); }
.nichtliste li { display: flex; gap: var(--r3); align-items: flex-start; font-size: var(--fs-klein); }
.nichtliste li::before { content: "×"; color: var(--text-gedaempft); font-weight: 600; flex: none; line-height: 1.5; }

/* ---------- Preis-Datenblatt ---------- */
.datenblatt-gitter { display: grid; gap: var(--r6); align-items: start; }
@media (min-width: 900px) { .datenblatt-gitter { grid-template-columns: 1.15fr .85fr; gap: var(--r7); } }
.datenblatt { width: 100%; border-collapse: collapse; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-l); overflow: hidden; }
.datenblatt caption { text-align: left; padding: var(--r5) var(--r5) 0; font-weight: 600; font-family: var(--serif); font-size: var(--fs-h3); }
.datenblatt th, .datenblatt td { text-align: left; padding: var(--r4) var(--r5); border-bottom: 1px solid var(--rahmen); vertical-align: top; font-size: var(--fs-klein); }
.datenblatt th { font-weight: 500; color: var(--text-gedaempft); width: 42%; }
.datenblatt td { font-weight: 600; font-variant-numeric: tabular-nums; }
.datenblatt tr:last-child th, .datenblatt tr:last-child td { border-bottom: 0; }
.rechenweg { background: var(--primaer); color: var(--auf-dunkel); border-radius: var(--radius-l); padding: var(--r6); display: grid; gap: var(--r4); }
.rechenweg h3 { color: var(--auf-dunkel); }
.rechenweg ol { list-style: none; display: grid; gap: var(--r4); counter-reset: r; }
.rechenweg li { display: grid; grid-template-columns: 26px 1fr; gap: var(--r3); font-size: var(--fs-klein); color: var(--auf-dunkel-weich); }
.rechenweg li::before { counter-increment: r; content: counter(r); font-weight: 600; color: var(--akzent-hell); font-variant-numeric: tabular-nums; }
.hinweiskasten {
  background: var(--hinweis); border-left: 3px solid var(--akzent); border-radius: var(--radius-s);
  padding: var(--r5); font-size: var(--fs-klein); display: grid; gap: var(--r3); margin-top: var(--r6);
}
.hinweiskasten strong { font-family: var(--sans); }

/* ---------- Warum ---------- */
.warum-gitter { display: grid; gap: var(--r7); align-items: center; }
@media (min-width: 900px) { .warum-gitter { grid-template-columns: 1fr 1fr; } }
.warum-liste { list-style: none; display: grid; gap: var(--r5); }
.warum-liste li { display: grid; grid-template-columns: 32px 1fr; gap: var(--r4); }
.warum-liste svg { width: 24px; height: 24px; color: var(--akzent); margin-top: 2px; }
.warum-liste h3 { margin-bottom: 4px; }
.warum-liste p { font-size: var(--fs-klein); color: var(--text-gedaempft); }
.warum-bild { border-radius: var(--radius-l); overflow: hidden; }
.warum-bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ---------- Galerie ---------- */
.galerie { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.galerie button {
  padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-s);
  overflow: hidden; display: block;
}
.galerie img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform var(--lang) var(--kurve), filter var(--kurz); }
.galerie button:hover img { transform: scale(1.05); filter: brightness(1.05); }
.lichtbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(16,22,26,.94);
  display: grid; place-items: center; padding: var(--r5); border: 0;
}
.lichtbox[hidden] { display: none; }
.lichtbox img { max-width: min(1100px, 94vw); max-height: 86vh; width: auto; border-radius: var(--radius-s); box-shadow: var(--schatten-stark); }
.lichtbox-zu {
  position: absolute; top: var(--r5); right: var(--r5); background: none; border: 1px solid rgba(245,244,240,.4);
  color: var(--auf-dunkel); width: 44px; height: 44px; border-radius: var(--radius-s); cursor: pointer; font-size: 1.4rem; line-height: 1;
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--r3); max-width: 880px; }
.faq details { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-l); overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--r5) var(--r6); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: var(--r4);
  font-family: var(--serif); font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 11px; height: 11px; border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(45deg); flex: none; transition: transform var(--kurz) var(--kurve); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq-text { padding: 0 var(--r6) var(--r5); display: grid; gap: var(--r4); font-size: var(--fs-klein); color: var(--text-gedaempft); max-width: 70ch; }

/* ---------- Bewertungsband ---------- */
.beispiel-hinweis {
  background: #FFF7D6; border: 1px solid #E8D48A; border-radius: var(--radius-s);
  padding: var(--r4) var(--r5); font-size: var(--fs-klein); margin-bottom: var(--r5); max-width: var(--breite-text);
}
.band {
  position: relative; overflow: hidden; margin-inline: calc(50% - 50vw);
  padding-block: var(--r3) var(--r7); cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
}
.band.zieht { cursor: grabbing; }
.band-spur { display: flex; gap: var(--r5); width: max-content; will-change: transform; padding-inline: var(--r5); }
.bewertung {
  flex: 0 0 min(420px, 82vw); background: var(--flaeche); border: 1px solid var(--rahmen);
  border-radius: var(--radius-l); padding: var(--r6); display: grid; gap: var(--r4); align-content: start;
  box-shadow: var(--schatten); transition: transform 500ms var(--kurve), box-shadow 500ms var(--kurve);
}
.band:not(.zieht) .bewertung:hover { transform: translateY(-4px); box-shadow: var(--schatten-stark); }
.sterne { display: flex; gap: 3px; color: var(--akzent); }
.sterne svg { width: 16px; height: 16px; }
.bewertung blockquote { margin: 0; font-size: var(--fs-klein); line-height: 1.65; }
.bewertung footer { display: flex; align-items: center; gap: var(--r3); }
.avatar {
  width: 38px; height: 38px; flex: none; border-radius: var(--radius-s); background: var(--hinweis);
  color: var(--akzent); display: grid; place-items: center; font-weight: 600; font-size: .8125rem;
}
.bewertung cite { font-style: normal; font-weight: 600; font-size: var(--fs-klein); display: grid; }
.bewertung cite small { font-weight: 400; color: var(--text-gedaempft); font-size: .8125rem; }

/* ---------- Formular ---------- */
.formular-gitter { display: grid; gap: var(--r7); align-items: start; }
@media (min-width: 980px) { .formular-gitter { grid-template-columns: .85fr 1.15fr; gap: var(--r8); } }
.formular {
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-l);
  padding: clamp(var(--r5), 4vw, var(--r7)); box-shadow: var(--schatten); display: grid; gap: var(--r5);
}
.feldreihe { display: grid; gap: var(--r5); }
@media (min-width: 620px) { .feldreihe--zwei { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: 7px; }
.feld label { font-size: var(--fs-klein); font-weight: 600; }
.feld .optional { font-weight: 400; color: var(--text-gedaempft); }
.feld input, .feld select, .feld textarea {
  font: 400 var(--fs-text)/1.5 var(--sans); color: var(--text); background: var(--hintergrund);
  border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: .85rem 1rem; width: 100%;
  transition: border-color var(--kurz) var(--kurve), background var(--kurz);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); background: var(--flaeche); outline: none; }
.feld textarea { min-height: 130px; resize: vertical; }
.feld input[type="file"] { padding: .6rem; background: var(--flaeche); }
.einwilligung { display: grid; grid-template-columns: 22px 1fr; gap: var(--r3); align-items: start; font-size: .875rem; color: var(--text-gedaempft); }
.einwilligung input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--akzent); }
.formular-hinweis { font-size: .8125rem; color: var(--text-gedaempft); }
/* Koederfeld gegen Bots. Nicht display:none, das erkennen viele Skripte,
   sondern aus dem Sichtfeld geschoben. */
.koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-fehler { margin: var(--r3) 0 0; font-size: .875rem; color: var(--warnung, #b3261e); }
.formular-fehler[hidden] { display: none; }
[data-senden][disabled] { opacity: .6; cursor: progress; }
.formular-seite { display: grid; gap: var(--r5); align-content: start; }
.kontaktliste { list-style: none; display: grid; gap: var(--r4); }
.kontaktliste li { display: grid; grid-template-columns: 24px 1fr; gap: var(--r4); font-size: var(--fs-klein); align-items: start; }
.kontaktliste svg { width: 20px; height: 20px; color: var(--akzent); margin-top: 2px; }
.luecke {
  background: #FFF3BF; border-bottom: 2px solid #E0C65A; padding: 1px 5px; border-radius: 2px;
  font-weight: 500; color: #4A3C00;
}
.danke { background: var(--hinweis); border-left: 3px solid var(--akzent); padding: var(--r5); border-radius: var(--radius-s); }
.danke[hidden] { display: none; }

/* ---------- Downloads ---------- */
.downloads { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.download {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--r4); align-items: center;
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-l);
  padding: var(--r5); text-decoration: none; color: var(--text);
  transition: border-color var(--kurz) var(--kurve), transform var(--kurz) var(--kurve);
}
.download:hover { border-color: var(--akzent); transform: translateY(-2px); color: var(--text); }
.download svg { width: 26px; height: 26px; color: var(--akzent); }
.download strong { display: block; font-size: var(--fs-klein); }
.download small { color: var(--text-gedaempft); font-size: .8125rem; }

/* ---------- Footer ---------- */
.fuss { background: var(--primaer); color: var(--auf-dunkel-weich); padding-block: var(--r8) var(--r6); font-size: var(--fs-klein); }
.fuss-gitter { display: grid; gap: var(--r6); }
@media (min-width: 760px) { .fuss-gitter { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--r7); } }
.fuss img { height: 44px; width: auto; margin-bottom: var(--r4); }
.fuss h4 { font-family: var(--sans); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--auf-dunkel); margin-bottom: var(--r4); font-weight: 600; }
.fuss ul { list-style: none; display: grid; gap: 10px; }
.fuss a { color: var(--auf-dunkel-weich); text-decoration: none; }
.fuss a:hover { color: var(--auf-dunkel); text-decoration: underline; }
.fuss-unten { margin-top: var(--r7); padding-top: var(--r5); border-top: 1px solid rgba(245,244,240,.14); display: flex; flex-wrap: wrap; gap: var(--r3) var(--r5); justify-content: space-between; font-size: .8125rem; }

/* ---------- Sticky-Leiste mobil ---------- */
.sticky-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  background: var(--primaer); border-top: 1px solid rgba(245,244,240,.16);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px;
  transform: translateY(110%); transition: transform 320ms var(--kurve);
}
.sticky-leiste.sichtbar { transform: translateY(0); }
.sticky-leiste .knopf { flex: 1; padding: .78rem 6px; font-size: .78rem; }
@media (max-width: 760px) { .sticky-leiste { display: flex; } body { padding-bottom: 68px; } }

/* ---------- Bewegung ---------- */
html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity var(--lang) var(--kurve), transform var(--lang) var(--kurve); }
html.js .hero h1 .wort { opacity: 0; transform: translateY(14px); }
html.js .hero h1.los .wort { opacity: 1; transform: none; transition: opacity 460ms var(--kurve), transform 460ms var(--kurve); }
.hero-bild img { animation: kenburns 24s var(--kurve) forwards; }
@keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.07) translateY(-1.5%); } }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .hero h1 .wort { opacity: 1; transform: none; transition: none; }
  .hero-bild img { animation: none; }
  .karte img, .schritt-bild img, .galerie img { transition: none; }
  .knopf:hover, .download:hover { transform: none; }
}

/* ---------- Rechtsseiten ---------- */
.recht { padding-block: var(--sektion); }
.recht h1 { text-transform: none; hyphens: auto; overflow-wrap: anywhere; margin-bottom: var(--r6); }
.recht h2 { font-size: 1.3rem; margin-top: var(--r7); margin-bottom: var(--r4); }
.recht h3 { margin-top: var(--r5); margin-bottom: var(--r3); }
.recht-inhalt { max-width: var(--breite-text); display: grid; gap: var(--r4); }
.recht-inhalt p, .recht-inhalt li { font-size: var(--fs-klein); color: var(--text-gedaempft); }
.recht-inhalt ul { padding-left: 1.2rem; list-style: disc; display: grid; gap: 8px; }
.zurueck { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-klein); text-decoration: none; margin-bottom: var(--r5); }

@media (max-width: 760px) {
  .band {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
  }
  .schritt { padding: var(--r5); grid-template-columns: 54px 1fr; gap: var(--r4); }
  .schritt-nr { font-size: 1.9rem; }
  .sektion { scroll-margin-top: 72px; }
}

/* ---------- Korrekturen aus der Sichtpruefung 15.10.2026 ---------- */
/* [hidden] verliert gegen display:grid der Klasse, deshalb ausdruecklich */
.kontaktliste li[hidden] { display: none; }
/* Fliesstexte auf dunklem Grund waren zu dunkel */
.sektion--dunkel .warum-liste p { color: var(--auf-dunkel-weich); }
.rechenweg .klein { color: var(--auf-dunkel-weich); }
.rechenweg p { color: var(--auf-dunkel-weich); }
/* Knopf mit Rand in der Fussleiste: dunkler Grund braucht helle Schrift */
.sticky-leiste .knopf--rand { color: var(--auf-dunkel); border-color: rgba(245,244,240,.34); }
.sticky-leiste .knopf--rand:hover { color: var(--auf-dunkel); border-color: var(--auf-dunkel); }

/* Vorweg-Kasten: die unbequemen Bedingungen, bewusst vor dem Ablauf (16.10.2026) */
.vorweg { background: var(--flaeche); border: 1px solid var(--rahmen); border-left: 3px solid var(--akzent);
  border-radius: var(--radius-l); padding: var(--r6); margin-bottom: var(--r7); box-shadow: var(--schatten); }
.sektion--flaeche .vorweg { background: var(--hintergrund); }
.vorweg h3 { font-family: var(--serif); font-size: var(--fs-h3); margin-bottom: var(--r4); }
.vorweg ul { display: grid; gap: var(--r4); list-style: none; }
.vorweg li { padding-left: var(--r5); position: relative; color: var(--text-gedaempft); line-height: 1.62; }
.vorweg li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--akzent); }
.vorweg li strong { color: var(--text); }
@media (max-width: 560px) { .vorweg { padding: var(--r5); } }

/* Versandadresse und Selbstanlieferung (17.10.2026) */
.adressfeld { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r7);
  margin-top: var(--r7); padding: var(--r6); background: var(--hintergrund);
  border: 1px solid var(--rahmen); border-radius: var(--radius-l); }
.adressfeld h3 { font-family: var(--serif); font-size: var(--fs-h3); margin-bottom: var(--r3); }
.adressfeld p { color: var(--text-gedaempft); }
.adressfeld p + p { margin-top: var(--r4); }
.adressfeld .adresse { font-size: 1.125rem; line-height: 1.5; color: var(--text); font-weight: 500; }
.adressfeld--einzeln { grid-template-columns: 1fr; }
.textlink { color: var(--akzent); font-weight: 500; text-underline-offset: 4px; }
@media (max-width: 760px) { .adressfeld { grid-template-columns: 1fr; gap: var(--r6); padding: var(--r5); } }

/* Preisrechner (Kundenwunsch 17.10.2026): zwei Regler, Summe rechnet live mit */
.rechner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  margin-bottom: var(--r7); border: 1px solid var(--rahmen); border-radius: var(--radius-l);
  overflow: hidden; box-shadow: var(--schatten); }
.rechner-regler { background: var(--flaeche); padding: var(--r6); display: grid; gap: var(--r5); align-content: start; }
.rechner-regler h3 { font-family: var(--serif); font-size: var(--fs-h3); }
.rechner-regler h3 + .klein { margin-top: calc(var(--r5) * -1 + var(--r2)); }

.regler { display: grid; gap: var(--r2); }
.regler-kopf { display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 500; font-size: var(--fs-klein); color: var(--text-gedaempft); }
.regler-kopf output { font-family: var(--serif); font-size: 1.375rem; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums; }
.regler-fuss { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--text-gedaempft); }

.regler input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%;
  height: 4px; border-radius: 2px; background: var(--rahmen); outline-offset: 6px; cursor: pointer; }
.regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%; background: var(--akzent); border: 3px solid var(--flaeche);
  box-shadow: 0 1px 6px rgba(30,42,48,.3); transition: transform 160ms var(--kurve); }
.regler input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.14); }
.regler input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%;
  background: var(--akzent); border: 3px solid var(--flaeche); box-shadow: 0 1px 6px rgba(30,42,48,.3); }
.regler input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--rahmen); }

.rechner-ergebnis { background: var(--primaer); color: var(--auf-dunkel); padding: var(--r6);
  display: grid; align-content: center; gap: var(--r2); }
.rechner-label { font-size: var(--fs-klein); letter-spacing: .06em; text-transform: uppercase;
  color: var(--auf-dunkel-weich); }
.rechner-summe { font-family: var(--serif); font-weight: 600; line-height: 1.04;
  font-size: clamp(2.5rem, 6vw, 3.5rem); color: var(--auf-dunkel); font-variant-numeric: tabular-nums; }
.rechner-zeile { color: var(--auf-dunkel-weich); font-size: var(--fs-klein); }
.rechner-ergebnis .klein { color: var(--auf-dunkel-weich); margin-top: var(--r3); opacity: .82; }

@media (max-width: 860px) { .rechner { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rechner-regler, .rechner-ergebnis { padding: var(--r5); } }