:root {
  --anthrazit: #1c2126;
  --anthrazit-2: #272e36;
  --linie: #e3e6ea;
  --gelb: #f5b301;
  --gelb-dunkel: #d99c00;
  --text: #1c2126;
  --text-leise: #5d6873;
  --bg: #ffffff;
  --bg-2: #f6f7f9;
  --gruen: #2e7d5b;
  --radius: 14px;
  --schatten: 0 2px 4px rgba(20, 26, 32, .06), 0 12px 32px rgba(20, 26, 32, .09);
  --gelb-tint: #fffdf6;
  --warn-bg: #fff8e6;
  --warn-linie: #f0d99a;
  --erfolg-bg: #e8f5ef;
  --erfolg-text: #22684c;
  --fehler: #b42318;
  --fehler-bg: #fff1f0;
  --weiss: #ffffff;
  --overlay: rgba(28, 33, 38, .58);
  --bar-bg: rgba(28, 33, 38, .97);
  --bar-leise: #c1c8cf;
  --focus-ring: rgba(245, 179, 1, .32);
  --kachel-verlauf: linear-gradient(160deg, #fbfcfd, #eef2f4);
  --platzhalter-verlauf: repeating-linear-gradient(135deg, #f0f2f5 0 12px, #eaedf1 12px 24px);
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: min(1240px, 92vw);
  --bp-s: 520px;
  --bp-m: 760px;
  --bp-l: 860px;
  --bp-xl: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--font-system);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { max-width: 100%; }
:focus-visible {
  outline: 3px solid var(--gelb);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-ring);
}
.wrap { width: var(--wrap); margin-inline: auto; }
.preis, .kf-preis, .kf-zeile b, .kf-bar .kwota { font-variant-numeric: tabular-nums; }

.btn, .kf-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active, .kf-btn:active { transform: translateY(1px); }
.btn-gelb, .kf-btn { background: var(--gelb); color: var(--anthrazit); }
.btn-gelb:hover, .kf-btn:hover { background: var(--gelb-dunkel); }
.btn-dunkel, .btn-anfrage { background: var(--anthrazit); color: var(--weiss); }
.btn-dunkel:hover, .btn-anfrage:hover { background: var(--anthrazit-2); }
.btn-rand { background: transparent; color: var(--text); border: 1.5px solid var(--linie); }
.btn-rand:hover { border-color: var(--text-leise); }
.btn[disabled], .kf-btn[disabled], .ist-laden { opacity: .55; cursor: wait; pointer-events: none; }
.kf-btn { width: 100%; margin-top: 16px; }

.karte, .option-card, .trust-card {
  background: var(--bg);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: none;
}
.karte { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
.karte:hover { border-color: var(--gelb-dunkel); box-shadow: var(--schatten); transform: translateY(-2px); }
.karte-bild, .produktmedien { position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: 4/3; }
.karte-bild.hoch, .produktmedien.hoch { aspect-ratio: 3/4; }
.karte-bild img, .produktmedien img { width: 100%; height: 100%; object-fit: cover; }
.karte-text { padding: 20px 22px 24px; }
.platzhalter { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; background: var(--platzhalter-verlauf); color: var(--text-leise); }

.kr-krok, .fortschritt-kompakt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kr-krok span, .fortschritt-kompakt span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--warn-linie);
  border-radius: 999px;
  background: var(--gelb-tint);
  color: var(--gelb-dunkel);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.kr-krok span[aria-current="step"] { border-width: 2px; color: var(--anthrazit); }

.kf { margin: 34px 0; overflow: hidden; border: 1.5px solid var(--linie); border-radius: 16px; }
.kf-kopf { padding: 17px 22px; border-bottom: 1.5px solid var(--linie); background: var(--bg-2); }
.kf-kopf h1, .kf-kopf h2 { margin: 0; letter-spacing: -.025em; }
.kf-kopf p { margin: 4px 0 0; color: var(--text-leise); font-size: 14px; }
.kf-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); }
.kf-links, .kf-rechts { min-width: 0; padding: 22px; }
.kf-rechts { border-left: 1.5px solid var(--linie); background: var(--bg-2); }
.kf-schritt { padding-block: 4px 22px; }
.kf-schritt + .kf-schritt { padding-top: 22px; border-top: 1px solid var(--linie); }
.kf-schritt h2 { margin: 0 0 4px; font-size: 19px; }
.kf-schritt > p { margin: 0 0 14px; color: var(--text-leise); font-size: 14px; }

.kf-wahl, .optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.kf-wahl button, .option-card {
  min-height: 44px;
  position: relative;
  padding: 12px 42px 12px 13px;
  border: 1.5px solid var(--linie);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.kf-wahl button b, .option-card b { display: block; }
.kf-wahl button small, .option-card small { display: block; margin-top: 3px; color: var(--text-leise); }
.kf-wahl button::after, .option-card::after {
  content: "✓";
  width: 24px;
  height: 24px;
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--linie);
  border-radius: 50%;
  background: var(--bg);
  color: transparent;
  font-size: 13px;
  font-weight: 900;
}
.kf-wahl button.an, .kf-wahl button[aria-pressed="true"], .option-card.an, .option-card[aria-pressed="true"] {
  border-width: 2px;
  border-color: var(--gelb-dunkel);
  background: var(--gelb-tint);
}
.kf-wahl button.an::after, .kf-wahl button[aria-pressed="true"]::after, .option-card.an::after, .option-card[aria-pressed="true"]::after {
  border-color: var(--anthrazit);
  background: var(--anthrazit);
  color: var(--weiss);
}
.diagram-card .option-media, .option-card .option-media { aspect-ratio: 16/10; margin: -12px -42px 12px -13px; display: grid; place-items: center; overflow: hidden; background: var(--kachel-verlauf); border-bottom: 1px solid var(--linie); }
.diagram-card .option-media img, .option-card .option-media img { width: 100%; height: 100%; object-fit: contain; }

.kf-farben, .swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.kf-farben button, .swatch {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  border: 1.5px solid var(--linie);
  border-radius: 9px;
  background: var(--bg);
  cursor: pointer;
}
.swatch i { width: 26px; height: 26px; flex: none; overflow: hidden; border: 1px solid var(--linie); border-radius: 6px; background: var(--swatch, var(--bg-2)); }
.swatch i img { width: 100%; height: 100%; object-fit: cover; }
.swatch[aria-pressed="true"] { border-width: 2px; border-color: var(--gelb-dunkel); background: var(--gelb-tint); }
.swatch[aria-pressed="true"]::after { content: "✓"; font-weight: 900; }

.kf-masse, .massfelder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.feld, .form-feld { min-width: 0; }
.feld label, .form-feld label { display: block; margin-bottom: 6px; color: var(--text-leise); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.feld input, .feld select, .feld textarea, .form-feld input, .form-feld select, .form-feld textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--linie);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
}
.feld input[type="range"] { padding: 0; accent-color: var(--gelb-dunkel); }
.feld.hat-fehler input, .form-feld.hat-fehler input { border-color: var(--fehler); background: var(--fehler-bg); }
.feld-fehler { margin: 5px 0 0; color: var(--fehler); font-size: 13px; }

.kf-anzahl, .mengen-stepper { display: inline-flex; align-items: center; gap: 10px; }
.kf-anzahl button, .mengen-stepper button { width: 44px; min-width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--linie); border-radius: 9px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 20px; font-weight: 800; }
.kf-anzahl output, .mengen-stepper output { min-width: 34px; text-align: center; font-size: 18px; font-weight: 800; }

.toggle { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { width: 44px; height: 24px; accent-color: var(--anthrazit); }
.erweitert { border: 1px solid var(--linie); border-radius: var(--radius); }
.erweitert summary { min-height: 44px; display: flex; align-items: center; padding: 10px 14px; cursor: pointer; font-weight: 700; }
.erweitert-in { padding: 0 14px 14px; }

.kf-erg { position: sticky; top: 86px; }
.kf-preis { margin: 0 0 5px; font-size: clamp(30px, 4vw, 38px); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.kf-pod { margin: 0 0 14px; color: var(--text-leise); font-size: 13px; }
.kf-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.kf-zeile b { white-space: nowrap; }
.kf-summe { margin-top: 4px; padding-top: 9px; border-top: 2px solid var(--anthrazit); font-weight: 800; }
.kf-sperre, .anfrage-block { padding: 18px; border: 1.5px solid var(--warn-linie); border-radius: var(--radius); background: var(--warn-bg); }
.anfrage-block h3 { margin: 0 0 6px; }
.anfrage-block p { margin: 0 0 14px; }
.anfrage-block .btn-anfrage { width: 100%; }
.preisblock { padding: 20px; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--bg); }

.kf-bar { display: none; }
.dialog-overlay, .blatt {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--overlay);
}
.dialog-overlay[hidden], .blatt[hidden] { display: none; }
.dialog, .sheet {
  width: min(620px, 100%);
  max-height: min(780px, calc(100vh - 40px));
  overflow: auto;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--schatten);
}
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-schliessen { width: 44px; height: 44px; border: 1px solid var(--linie); border-radius: 50%; background: var(--bg); cursor: pointer; }

.pill, .punkt, .fahne, .s-tag, .badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--text-leise); font-size: 12px; font-weight: 800; }
.pill.erfolg, .s-tag { background: var(--erfolg-bg); color: var(--erfolg-text); }
.fahne { background: var(--gelb); color: var(--anthrazit); }
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trust-card { padding: 16px; }
.trust-card b { display: block; margin-bottom: 4px; }
.trust-card span { color: var(--text-leise); font-size: 14px; }
.services { display: grid; gap: 10px; }
.service { min-height: 44px; display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--linie); border-radius: 10px; }
.service input { width: 22px; height: 22px; flex: none; }

@media (min-width: 1240px) {
  .dialog { width: min(680px, 100%); }
}

@media (max-width: 860px) {
  .kf-in { grid-template-columns: minmax(0, 1fr); }
  .kf-rechts { border-top: 1.5px solid var(--linie); border-left: 0; }
  .kf-erg { position: static; }
  .kf-bar {
    width: auto;
    min-height: 68px;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--bar-bg);
    color: var(--weiss);
    box-shadow: var(--schatten);
  }
  .kf-bar .kwota { min-width: 0; font-size: 20px; font-weight: 800; line-height: 1.15; }
  .kf-bar .kwota small { display: block; overflow: hidden; color: var(--bar-leise); font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
  .kf-bar .btn { min-width: 44px; margin-left: auto; padding-inline: 14px; flex: none; }
  body.hat-kf-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) {
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .dialog-overlay, .blatt { align-items: end; padding: 0; }
  .dialog, .sheet { width: 100%; max-height: min(82vh, 720px); border-radius: var(--radius) var(--radius) 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  .kf { margin-inline: 0; }
  .kf-kopf, .kf-links, .kf-rechts { padding-inline: 16px; }
  .kf-wahl, .optionen, .kf-masse, .massfelder { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .kf-bar .btn { width: auto; }
}