/* imber.-Kundenseite (Kurth Web): eigene Gestaltung. Stand 2026-10-05, übernommen aus duschen-erfassung/index.html (Kundenseite ?kunde).
   Schrift, Variablen, Kopf, Menü, Seitenfuss, Kontaktformular und «Bewegung reduzieren» kommen aus ../gemeinsam/marke.css.
   Oben die allgemeinen Teile der Erfassung, die die Seite braucht (Felder, Auswahlkarten, Hinweise, 3D-Ansicht), danach die Kundenseite. */
  :root { --black:#000; --white:#fff; --paper:#fff; --surface:#F2F2F2; --ink:#1A1A1A; --ink-2:#8C8C8C; --line:#D9D9D9; --glass:#E8E8E8; --glass-line:var(--ink); --r:2px; }
  * { box-sizing:border-box; }
  :where(#view-kunde) a { color:inherit; text-decoration:underline; text-underline-offset:2px; } :where(#view-kunde) a:hover { color:var(--ink-2); }   /* nur im Inhalt: Kopf und Fuss gestaltet marke.css */
  body { margin:0; font-family:"League Spartan",Arial,"Helvetica Neue",Helvetica,sans-serif; background:var(--surface); color:var(--ink); font-size:16px; line-height:1.35; -webkit-font-smoothing:antialiased; }
  button { font:inherit; }
  main { padding:24px; max-width:1440px; margin:0 auto; }
  .view { display:none; } .view.active { display:block; }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:var(--r); border:1px solid var(--black); background:var(--black); color:var(--white); font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:opacity .15s; white-space:nowrap; }
  .btn:hover { opacity:.85; }
  .btn.secondary { background:var(--paper); color:var(--ink); border-color:var(--ink); }
  .btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
  .btn.small { min-height:36px; padding:0 14px; font-size:12px; }
  .btn:disabled { opacity:.3; cursor:default; }
  .actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  :where(#view-kunde) :is(input, select, textarea) { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); font:inherit; font-size:16px; background:var(--paper); color:var(--ink); min-height:44px; }
  :where(#view-kunde) :is(input, select, textarea):focus { outline:none; border-color:var(--ink); }
  input[readonly] { background:var(--surface); color:var(--ink-2); }
  input::placeholder, textarea::placeholder { color:var(--ink-2); opacity:.7; }
  textarea { min-height:88px; resize:vertical; }
  .unit { position:relative; } .unit input { padding-right:44px; }
  .unit span { position:absolute; right:12px; bottom:13px; font-size:12px; color:var(--ink-2); }
  .big input { font-size:26px; font-weight:600; min-height:60px; } .big .unit span { bottom:20px; }
  .muted { color:var(--ink-2); font-size:14px; }
  .tip { display:flex; gap:8px; align-items:flex-start; font-size:14px; color:var(--ink-2); margin-top:12px; }
  .tip::before { content:"i"; flex:0 0 18px; height:18px; border:1px solid var(--ink-2); border-radius:50%; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
  .seg { display:inline-flex; flex-wrap:wrap; border:1px solid var(--ink); border-radius:var(--r); overflow:hidden; max-width:100%; }
  .seg button { border:0; border-right:1px solid var(--ink); background:var(--paper); color:var(--ink); padding:0 18px; min-height:44px; font-size:14px; font-weight:600; letter-spacing:.04em; cursor:pointer; }
  .seg button:last-child { border-right:0; }
  .seg button.active { background:var(--black); color:var(--white); }
  .seg.compact button { min-height:36px; padding:0 12px; font-size:12px; text-transform:uppercase; }
  .opt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
  .opt { position:relative; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); padding:16px; text-align:left; cursor:pointer; color:var(--ink); display:flex; flex-direction:column; gap:10px; transition:border-color .15s; }
  .opt:hover { border-color:var(--ink); }
  .opt.active { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
  .opt.active::after { content:"✓"; position:absolute; top:10px; right:12px; font-weight:700; }
  .opt.ausf.active::after { top:16px; right:16px; width:24px; height:24px; border-radius:50%; background:var(--black); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:13px; }
  .opt .ico { width:80px; height:80px; color:var(--ink); } .opt .ico svg { width:100%; height:100%; display:block; }
  .opt.ausf { padding:10px 10px 14px; } .opt.ausf .t, .opt.ausf .d, .opt.ausf .baender, .opt.ausf .code { margin-left:6px; margin-right:6px; }
  .opt .bild { width:100%; aspect-ratio:4/3; background:#fff; border-radius:var(--r); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .opt .bild img, .opt .bild > svg { width:100%; height:100%; object-fit:cover; display:block; }
  .kopf-mit-wahl { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; } .kopf-mit-wahl h2 { margin:0 !important; } .opt .bild .ico { width:56px; height:56px; color:var(--ink-2); }
  .opt .code { margin-top:auto; font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--ink-2); }
  .opt .t { font-weight:700; font-size:15px; } .opt .d { font-size:12px; color:var(--ink-2); }
  .swatch { width:100%; height:36px; border:1px solid var(--line); border-radius:var(--r); }
  .sketch { width:100%; height:auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); display:block; }
  #sketch .dim { cursor:pointer; } #sketch .dim line { stroke:var(--ink-2); } #sketch .dim text { fill:var(--ink-2); }
  #sketch .dim:hover line, #sketch .dim.hi line { stroke:var(--ink); stroke-width:1.6; } #sketch .dim:hover text, #sketch .dim.hi text { fill:var(--ink); font-weight:700; }
  .hints { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .warn { background:var(--paper); border:1px solid var(--ink); border-left:4px solid var(--ink); color:var(--ink); padding:8px 12px; border-radius:var(--r); font-size:14px; }
  .warn::before { content:"!"; font-weight:700; margin-right:8px; }
  .ok { font-size:14px; color:var(--ink-2); } .ok::before { content:"✓"; margin-right:8px; font-weight:700; color:var(--ink); }
  .fotos { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:12px; }
  .foto { position:relative; aspect-ratio:1; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
  .foto img { width:100%; height:100%; object-fit:cover; display:block; }
  .foto button { position:absolute; top:6px; right:6px; width:28px; height:28px; border:0; background:var(--black); color:var(--white); cursor:pointer; border-radius:var(--r); }
  .drop { border:1px dashed var(--ink-2); border-radius:var(--r); padding:24px; text-align:center; color:var(--ink-2); cursor:pointer; } .drop:hover, .drop.over { border-color:var(--ink); color:var(--ink); }
  .toggle { display:flex; align-items:center; gap:8px; font-size:15px; text-transform:none; letter-spacing:0; color:var(--ink); font-weight:400; }
  .toggle input { width:auto; min-height:0; accent-color:var(--black); }
  #viewer3d { position:relative; width:100%; aspect-ratio:4/3; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; touch-action:none; }
  #viewer3d canvas { display:block; width:100% !important; height:100% !important; }
  #viewer3d .v3-hint { position:absolute; left:8px; bottom:6px; font-size:11px; color:var(--ink-2); pointer-events:none; }
  #viewer3d .v3-tools { position:absolute; right:8px; top:8px; display:flex; gap:6px; }
  #viewer3d .v3-muster { position:absolute; left:8px; top:10px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); pointer-events:none; }
  @media (max-width:700px) { #viewer3d .v3-muster { top:auto; bottom:24px; } }   /* Handy: Hinweis unten statt unter den Knöpfen */
  .seg.stretch { display:flex; width:100%; } .seg.stretch button { flex:1; padding:0 8px; }
  .opt .ico svg { stroke:currentColor; }
  /* ============ Kundenseite (Entwurf, index.html?kunde) im Stil von MURALE, dem Konfigurator für Küchenrückwände (Vorlage 03.10.2026):
     Menü links, Marke mittig, bildschirmfüllende Bildflächen, Abschnitte mit Karten, grosser Seitenfuss; Konfigurator mit Schrittleiste,
     grosser Vorschau, Eingaben rechts und Preisleiste unten. Schwarz/Weiss, Grau funktional, League Spartan Regular und Bold aus dem
     Ordner kunde/ (keine Anfrage an Google), 8-pt-Raster, linksbündig, eckig, keine Schatten, keine Verläufe. ============ */
  html.kunde { --ink:var(--kw-schwarz); --ink-2:var(--kw-grau); --k-ink2:var(--kw-ink-2); --line:var(--kw-linie); --surface:var(--kw-flaeche); --paper:var(--kw-papier); --r:var(--kw-radius); --k-kopf:var(--kw-kopf-h); --black:#000; --white:#fff; scroll-padding-top:var(--k-kopf); }   /* Werte aus ../gemeinsam/marke.css */
  html.kunde body { line-height:1.5; overflow-x:clip; }
  html.kunde [hidden] { display:none !important; }
  html.kunde main { max-width:none; padding:0; }
  html.kunde :is(button, a, input, select, textarea):focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  .kd-wrap { max-width:1280px; margin:0 auto; padding-inline:24px; }
  .kd-eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:0 0 12px; line-height:1.4; }
  #view-kunde :is(h1, h2, h3) { margin:0; font-weight:700; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; color:inherit; }
  #view-kunde h1 { font-size:clamp(44px,7vw,96px); letter-spacing:-.03em; }
  #view-kunde h2 { font-size:clamp(30px,4vw,52px); }
  #view-kunde h3 { font-size:20px; letter-spacing:-.01em; }
  .kd-lead { font-size:clamp(17px,1.6vw,21px); line-height:1.45; max-width:38ch; color:var(--k-ink2); margin:0; }
  .kd-muted { font-size:13px; color:var(--ink-2); line-height:1.5; margin:0; }
  /* Knöpfe: schwarz 48 px, weiss mit Kontur, Kontur weiss auf Bild, Textlink */
  .kd-primary, .kd-secondary, .kd-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:var(--r); font:inherit; font-size:15px; font-weight:700; line-height:1; letter-spacing:0; text-transform:none; text-decoration:none; white-space:nowrap; cursor:pointer; }
  .kd-primary { background:var(--ink); color:#fff; border:1px solid var(--ink); }
  .kd-primary:hover { background:var(--k-ink2); border-color:var(--k-ink2); color:#fff; }
  .kd-secondary { background:#fff; color:var(--ink); border:1px solid var(--ink); padding:0 20px; }
  .kd-secondary:hover { background:var(--surface); color:var(--ink); }
  .kd-ghost { background:transparent; color:#fff; border:1px solid #fff; padding:0 20px; }
  .kd-ghost:hover { background:#fff; color:#000; }
  .kd-primary.kd-invert { background:#fff; color:#000; border-color:#fff; }
  .kd-primary.kd-invert:hover { background:var(--line); border-color:var(--line); color:#000; }
  .kd-small { min-height:40px; padding:0 16px; font-size:14px; }
  .kd-big { min-height:56px; padding:0 32px; font-size:17px; }
  .kd-primary:disabled, .kd-secondary:disabled { opacity:.4; cursor:not-allowed; }
  .kd-link { background:none; border:0; min-height:40px; padding:0 4px; font:inherit; font-size:14px; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
  .kd-actions { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:24px; }
  /* Hinweis «Entwurf» über der Kopfzeile */
  html.kunde .kd-banner { display:flex; background:#000; color:#fff; font-size:13px; padding:8px 24px; gap:8px 24px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .kd-banner a { color:#fff; white-space:nowrap; } .kd-banner a:hover { color:var(--line); }
  /* Bildflächen: Titelbild bleibt stehen und dunkelt beim Scrollen ab, der nächste Abschnitt gleitet darüber */
  .kd-panel { position:relative; min-height:calc(100svh - var(--k-kopf)); display:flex; align-items:flex-end; overflow:hidden; background:#1A1A1A; color:#fff; isolation:isolate; }
  .kd-start > .kd-panel-held { position:sticky; top:var(--k-kopf); z-index:0; }
  .kd-start > :not(.kd-panel-held) { position:relative; z-index:1; }
  .kd-panel-bild { position:absolute; inset:0; margin:0; z-index:-2; overflow:hidden; }
  .kd-panel-bild img { width:100%; height:100%; object-fit:cover; object-position:var(--pos, 62% 50%); display:block; transform:translate3d(0,var(--py,0px),0) scale(1.04); animation:kd-bild-ein .9s ease both; }
  @media (orientation:portrait) { .kd-panel-bild img { object-position:var(--pos-hoch, var(--pos, 50% 50%)); } }   /* hochkant: eigener Bildausschnitt, damit die Dusche sichtbar bleibt */
  @keyframes kd-bild-ein { from { opacity:0; } to { opacity:1; } }
  .kd-panel-dim { position:absolute; inset:0; background:#000; opacity:var(--dim,.3); z-index:-1; }
  .kd-panel-bild.mehrere { display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:4px; background:#000; }   /* drei Fotos nebeneinander (Hochformat) */
  .kd-panel-bild .kd-zelle { position:relative; min-width:0; overflow:hidden; }
  .kd-panel-bild.mehrere img { object-position:50% 50%; }
  @media (orientation:portrait) { .kd-panel-bild.mehrere { grid-template-columns:minmax(0,1fr); } .kd-panel-bild.mehrere .kd-zelle:not(:first-child) { display:none; } }
  .kd-panel-body { width:100%; padding-block:80px; }
  .kd-panel .kd-eyebrow { color:#fff; }
  #view-kunde .kd-panel :is(h1, h2) { color:#fff; max-width:13ch; margin-top:16px; }
  #view-kunde .kd-panel h2 { font-size:clamp(40px,6.4vw,96px); letter-spacing:-.03em; }
  .kd-panel-text { margin:24px 0 0; max-width:44ch; font-size:clamp(17px,1.5vw,21px); line-height:1.45; color:#fff; }
  .kd-panel .kd-actions { margin-top:32px; }
  .kd-panel-tag { position:absolute; right:24px; top:24px; background:#fff; color:#000; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:4px 8px; }
  /* Abschnitte der Startseite */
  .kd-section { padding-block:80px; background:var(--surface); }
  .kd-alt { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .kd-kopfzeile { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px; align-items:end; margin-bottom:40px; }
  .kd-unterkopf { margin-top:48px !important; margin-bottom:16px !important; font-size:20px !important; }
  /* Live in 3D: grosse Bühne mit Glaswahl und Festpreis */
  .kd-buehne { position:relative; background:#E9E9E9; border:1px solid var(--line); height:min(68vh,720px); min-height:420px; overflow:hidden; }
  .kd-buehne-3d { position:absolute; inset:0; }
  html.kunde .kd-buehne #viewer3d { aspect-ratio:auto; width:100%; height:100%; border:0; border-radius:0; background:transparent; }
  html.kunde .kd-buehne #viewer3d .v3-hint, html.kunde .kd-buehne #viewer3d .v3-muster { display:none !important; }
  .kd-ov { position:absolute; display:flex; gap:8px; flex-wrap:wrap; pointer-events:none; z-index:3; } .kd-ov > * { pointer-events:auto; }
  .kd-tl { left:16px; top:16px; } .kd-bl { left:16px; bottom:16px; align-items:center; } .kd-br { right:16px; bottom:16px; }
  .kd-chip { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; background:#fff; border:1px solid var(--line); border-radius:var(--r); font-size:13px; font-weight:700; }
  .kd-hint { font-size:12px; color:var(--ink-2); background:#fff; border:1px solid var(--line); padding:8px 12px; border-radius:var(--r); }
  .kd-preischip { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; min-width:220px; }
  .kd-preischip .kd-eyebrow { font-size:10px; margin:0; }
  .kd-preischip b { display:block; font-size:26px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; margin-top:4px; }
  .kd-preischip small { display:block; font-size:12px; color:var(--ink-2); margin-top:2px; }
  .kd-glasfelder { display:flex; gap:6px; flex-wrap:wrap; max-width:560px; }
  .kd-glasfelder button { min-height:32px; padding:0 10px; background:#fff; border:1px solid var(--line); border-radius:var(--r); font:inherit; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--ink); cursor:pointer; }
  .kd-glasfelder button:hover { border-color:var(--ink); }
  .kd-glasfelder button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
  html.kunde #viewer3d .v3-tools { right:16px; top:16px; gap:8px; }
  html.kunde #viewer3d .v3-tools .btn { min-height:36px; padding:0 12px; background:#fff; color:#000; border:1px solid var(--line); font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; }
  html.kunde #viewer3d .v3-tools .btn:hover { border-color:#000; opacity:1; }
  html.kunde #viewer3d .v3-hint { left:16px; bottom:12px; font-size:12px; }
  html.kunde #viewer3d .v3-muster { left:16px; top:16px; padding:8px 12px; background:#fff; border:1px solid var(--line); color:#000; font-size:12px; font-weight:700; letter-spacing:.06em; }
  /* Formen, Gläser, Farben: Karten mit Bild, eckig, Auswahl mit doppelter Kontur */
  .kd-formen { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:24px; }
  .kd-form, .kd-kachel { display:flex; flex-direction:column; align-items:stretch; min-width:0; padding:0; background:#fff; border:1px solid var(--line); border-radius:0; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
  .kd-form:hover, .kd-kachel:hover { border-color:var(--ink); }
  .kd-form .bild { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; background:#fff; border-bottom:1px solid var(--line); overflow:hidden; }
  .kd-form .bild img, .kd-form .bild > svg { width:100%; height:100%; object-fit:cover; display:block; }
  .kd-form .bild > canvas.kd-anim { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .7s ease; }
  .kd-form .bild > canvas.kd-anim.an { opacity:1; }
  .kd-form .text { display:flex; flex-direction:column; gap:6px; flex:1; padding:20px 24px 24px; }
  .kd-form .text b { font-size:22px; letter-spacing:-.01em; line-height:1.1; } .kd-form .text small { font-size:15px; color:var(--k-ink2); }
  .kd-form .fuss { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:auto; padding-top:16px; font-size:13px; color:var(--ink-2); }
  .kd-form .fuss strong { color:var(--ink); font-size:15px; white-space:nowrap; }
  .kd-glaeser { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:16px; }
  @media (max-width:1100px) { .kd-glaeser { grid-template-columns:repeat(4,minmax(0,1fr)); } }   /* sieben Gläser mit calcless.: 7 nebeneinander, mittel 4 + 3, Handy 2 × 4 */
  :is(.kd-kachel .muster, #view-kunde .opt .bild.glas) img[src$="calcless.webp"] { object-fit:contain; padding:8%; background:#fff; }   /* runder Kleber ganz zeigen */
  .kd-farben { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
  @media (max-width:800px) { .kd-farben { grid-template-columns:repeat(2,minmax(0,1fr)); } }   /* vier Farben: eine Reihe, schmal 2 × 2 */
  .kd-kachel .muster { display:block; aspect-ratio:509/450; background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden; }
  .kd-kachel .muster svg, .kd-kachel .muster img { width:100%; height:100%; display:block; object-fit:cover; }
  #view-kunde .opt .bild.glas { aspect-ratio:509/450; }
  .kd-kachel .text { display:flex; flex-direction:column; gap:2px; padding:12px 16px 16px; }
  .kd-kachel .text b { font-size:15px; } .kd-kachel .text small { font-size:13px; color:var(--ink-2); line-height:1.35; }
  .kd-kachel[aria-pressed=true] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
  .kd-farben .kd-kachel { flex-direction:row; align-items:center; gap:16px; padding:12px 16px; }
  .kd-farben .kd-kachel i { display:block; width:48px; height:48px; flex:none; border:1px solid var(--line); background:var(--feld); }
  .kd-farben .kd-kachel .text { padding:0; }
  /* Inspiration: Diashow über die ganze Breite mit Überblendung und langsamem Zoom, Bildkarte mit «Diese Dusche gestalten» */
  .kd-insp-buehne { position:relative; width:100%; height:min(82svh,880px); min-height:420px; overflow:hidden; background:#1A1A1A; }
  .kd-insp-bilder figure { position:absolute; inset:0; margin:0; opacity:0; z-index:0; transition:opacity .9s ease; }
  .kd-insp-bilder figure.aktiv { opacity:1; z-index:2; }
  .kd-insp-bilder figure.vorher { opacity:1; z-index:1; transition:none; }   /* altes Bild bleibt stehen, bis das neue ganz eingeblendet ist: kein dunkler Zwischenschritt */
  .kd-insp-bilder img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); transform:scale(1.02); }
  @media (orientation:portrait) { .kd-insp-bilder img { object-position:var(--pos-hoch, var(--pos, 50% 50%)); } }
  .kd-insp-bilder figure.aktiv img { animation:kd-ken 9s linear both; }
  .kd-insp.steht .kd-insp-bilder figure.aktiv img { animation-play-state:paused; }
  @keyframes kd-ken { from { transform:scale(1.02); } to { transform:scale(1.1); } }
  .kd-insp-karte { position:absolute; left:max(24px, calc((100% - 1280px) / 2 + 24px)); bottom:40px; z-index:2; width:min(400px, calc(100% - 48px)); padding:24px; background:#fff; color:#000; border:1px solid var(--line); }
  .kd-insp-karte .kd-eyebrow { margin-bottom:8px; }
  #view-kunde .kd-insp-karte h3 { font-size:24px; } .kd-insp-karte p:not(.kd-eyebrow) { margin:8px 0 16px; font-size:15px; color:var(--k-ink2); }
  .kd-insp-steuerung { position:absolute; right:max(24px, calc((100% - 1280px) / 2 + 24px)); bottom:40px; z-index:2; display:flex; gap:8px; }
  .kd-insp-knopf { min-width:44px; min-height:44px; padding:0 12px; background:#fff; color:#000; border:1px solid var(--line); border-radius:var(--r); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
  .kd-insp-knopf:hover { border-color:#000; }
  .kd-insp-fortschritt { position:absolute; left:0; right:0; bottom:0; z-index:2; height:3px; background:rgba(255,255,255,.35); }
  .kd-insp-fortschritt i { display:block; width:0; height:100%; background:#fff; }
  .kd-insp.steht .kd-insp-fortschritt i { animation-play-state:paused !important; }
  @keyframes kd-balken { from { width:0; } to { width:100%; } }
  .kd-insp .kd-panel-tag, .kd-insp-karte, .kd-insp-steuerung, .kd-insp-fortschritt { z-index:3; }
  @media (min-width:861px) {   /* Fotos im Hochformat (3:4): rechts das Foto in voller Höhe, links Karte und Knöpfe (seit 05.10.2026, Fotos von KURTH-Montagen) */
    .kd-insp-buehne { --insp-b:min(50%, calc(max(420px, min(82svh, 880px)) * .8)); background:var(--surface); }
    .kd-insp-bilder { position:absolute; top:0; right:0; bottom:0; width:var(--insp-b); overflow:hidden; }
    .kd-insp-fortschritt { left:auto; width:var(--insp-b); }
    .kd-insp-karte { top:50%; bottom:auto; transform:translateY(-50%); width:min(440px, calc(100% - var(--insp-b) - 48px)); }
    .kd-insp-steuerung { right:auto; left:max(24px, calc((100% - 1280px) / 2 + 24px)); }
  }
  /* Warum KURTH, Ablauf, Fragen; auf weissem Grund graue Karten (wie MURALE) */
  .kd-alt .kd-karte, .kd-alt .kd-schritte li { background:var(--surface); }
  .kd-karten { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:40px; }
  .kd-karte { background:#fff; border:1px solid var(--line); padding:32px 24px; min-width:0; }
  .kd-karte-n { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--ink); font-weight:700; margin-bottom:24px; }
  #view-kunde .kd-karte h3 { font-size:22px; } .kd-karte p { margin:12px 0 0; font-size:15px; color:var(--k-ink2); }
  .kd-schritte { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:40px 0 0; padding:0; }
  .kd-schritte li { background:#fff; border:1px solid var(--line); padding:24px; min-width:0; }
  .kd-schritte span { display:block; font-size:40px; font-weight:700; line-height:1; letter-spacing:-.02em; }
  #view-kunde .kd-schritte h3 { margin-top:16px; } .kd-schritte p { margin:8px 0 0; font-size:15px; color:var(--k-ink2); }
  .kd-faq { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px 48px; margin-top:40px; }
  #view-kunde .kd-faq h3 { font-size:18px; } .kd-faq p { margin:8px 0 0; font-size:15px; color:var(--k-ink2); max-width:60ch; }
  /* Aus unserer Glaserei: Bildstreifen */
  .kd-strip { display:grid; grid-auto-flow:column; grid-auto-columns:max(260px,32%); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
  .kd-strip figure { margin:0; background:#fff; border:1px solid var(--line); scroll-snap-align:start; min-width:0; }
  .kd-strip img { display:block; width:100%; height:auto; aspect-ratio:7/5; object-fit:cover; }
  .kd-strip figcaption { display:flex; flex-direction:column; gap:2px; padding:12px 16px 16px; } .kd-strip figcaption b { font-size:15px; } .kd-strip figcaption span { font-size:13px; color:var(--k-ink2); }
  .kd-fotonachweis { margin-top:16px; }
  /* Seitenfuss wie ein Verzeichnis */
  /* ============ Konfigurator «Schritt für Schritt zur Traumdusche» (Fabian 04.10.2026: «der konfigurator muss viel besser werden»):
     Schrittleiste oben, grosse 3D-Bühne links (bleibt stehen, Kamera fährt je Schritt an die passende Stelle, Masslinien im Schritt «Masse»),
     eine Frage pro Schritt rechts, Preisleiste unten mit Auswahl und Preis zum Aufklappen. CI: Schwarz/Weiss, eckig, keine Schatten. ============ */
  html.kunde { --k-leiste:56px; --k-unten:72px; }
  .kd-gestalten { background:#fff; }
  .kd-k-leiste { position:sticky; top:var(--k-kopf); z-index:24; background:#fff; border-bottom:1px solid var(--line); }
  .kd-k-leiste-innen { padding-inline:24px; }
  .kd-steps { list-style:none; display:flex; gap:6px; margin:0; padding:0; }
  .kd-steps li { flex:1 1 0; min-width:0; }
  .kd-steps button { position:relative; display:flex; align-items:center; gap:10px; width:100%; height:calc(var(--k-leiste) - 1px); padding:0 8px 0 0; background:none; border:0; font:inherit; font-size:13px; font-weight:700; line-height:1.2; letter-spacing:0; text-transform:none; color:var(--ink-2); text-align:left; white-space:nowrap; cursor:pointer; }
  .kd-steps button::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--line); transition:background-color .5s ease; }
  .kd-steps :is(.fertig, .jetzt) button { color:var(--ink); }
  .kd-steps :is(.fertig, .jetzt) button::before { background:var(--ink); }
  .kd-steps .n { flex:none; font-size:11px; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
  .kd-steps .l { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .kd-steps button:hover .l { text-decoration:underline; text-underline-offset:4px; }
  .kd-k-grid { display:grid; grid-template-columns:minmax(0,1fr) clamp(360px,34vw,560px); align-items:start; }
  .kd-k-buehne { position:sticky; top:calc(var(--k-kopf) + var(--k-leiste)); height:calc(100svh - var(--k-kopf) - var(--k-leiste) - var(--k-unten)); min-height:420px; overflow:hidden; background:#E9E9E9; }
  #kd-vorschau { position:absolute; inset:0; }
  html.kunde #kd-vorschau #viewer3d { aspect-ratio:auto; width:100%; height:100%; border:0; border-radius:0; background:transparent; }
  html.kunde #kd-vorschau #viewer3d :is(.v3-hint, .v3-muster) { display:none !important; }
  html.kunde #kd-vorschau #sketch { display:block; width:100%; height:100%; border:0; border-radius:0; background:#fff; }
  .kd-k-buehne .kd-tl { left:24px; top:20px; }
  html.kunde .kd-k-buehne #viewer3d .v3-tools { right:24px; top:20px; }
  .kd-k-bildtext { position:absolute; left:24px; bottom:20px; z-index:3; max-width:min(64%, 520px); padding:14px 18px 16px; background:#fff; border:1px solid var(--line); pointer-events:none; }
  .kd-k-bildtext .kd-eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:11px; color:var(--ink); }
  .kd-k-titel { margin:0; font-size:clamp(17px,1.4vw,21px); font-weight:700; letter-spacing:-.01em; line-height:1.2; }
  .kd-k-zeile { margin:4px 0 0; font-size:13px; line-height:1.4; color:var(--k-ink2); }
  .kd-gestalten[data-schritt="masse"] .kd-k-bildtext { display:none; }
  #view-kunde input[type=number] { -moz-appearance:textfield; appearance:textfield; }
  #view-kunde input[type=number]::-webkit-inner-spin-button, #view-kunde input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  #view-kunde .kd-fields.gross input::placeholder { font-size:18px; font-weight:400; letter-spacing:0; }
  .kd-punkt { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ink); animation:kd-puls 2.4s ease-in-out infinite; }
  @keyframes kd-puls { 50% { opacity:.2; } }
  /* Masslinien im Schritt «Masse»: weisse Linie auf schwarzer Unterlinie, Wert als Etikett; das Mass des aktiven Felds schwarz */
  .kd-k-mass { position:absolute; inset:0; z-index:2; pointer-events:none; }
  .kd-k-mass svg { position:absolute; inset:0; overflow:visible; }
  .kd-k-mass path { fill:none; stroke-linecap:square; }
  .kd-k-mass .unter { stroke:#000; stroke-width:3.5; } .kd-k-mass .linie { stroke:#fff; stroke-width:1.5; }
  .kd-k-mass .an .unter { stroke-width:5; } .kd-k-mass .an .linie { stroke-width:2.5; }
  .kd-mass-etikett { position:absolute; transform:translate(-50%,-50%); padding:5px 9px; background:#fff; color:#000; border:1px solid #000; font-size:12px; font-weight:700; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; transition:background-color .2s, color .2s; }
  .kd-mass-etikett.an { background:#000; color:#fff; }
  .kd-mass-etikett.leer { color:var(--ink-2); }
  .kd-mass-etikett.an.leer { color:#fff; }
  /* Auswahl rechts: eine Frage pro Schritt */
  .kd-k-panel { min-width:0; min-height:calc(100svh - var(--k-kopf) - var(--k-leiste) - var(--k-unten)); padding:clamp(28px,3vw,48px) clamp(24px,3vw,48px) 40px; border-left:1px solid var(--line); background:#fff; }
  .kd-schritt { display:none; } .kd-schritt.active { display:block; animation:kd-schritt-ein .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes kd-schritt-ein { from { opacity:0; transform:translate3d(0,14px,0); } to { opacity:1; transform:none; } }
  #view-kunde .kd-k-panel h2 { font-size:clamp(28px,2.5vw,40px); margin-bottom:12px; }
  #view-kunde .kd-k-panel h3 { font-size:16px; margin:32px 0 12px; padding-top:24px; border-top:1px solid var(--line); }
  #view-kunde .kd-k-panel h3 .kd-muted { font-weight:400; font-size:14px; letter-spacing:0; }
  #view-kunde .kd-k-panel h3 + .kd-sub { margin-top:-4px; }
  .kd-sub { margin:0 0 24px; font-size:15px; line-height:1.5; color:var(--k-ink2); max-width:60ch; }
  .kd-k-notiz { margin:24px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:14px; line-height:1.5; color:var(--k-ink2); }
  .kd-k-notiz a { color:var(--ink); font-weight:700; white-space:nowrap; }
  .kd-k-tipp { margin-top:12px; }
  .kd-k-werkzeug { display:flex; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:16px; border-top:1px solid var(--line); }
  .kd-k-werkzeug .kd-link { font-size:13px; font-weight:400; color:var(--k-ink2); }
  /* Einstieg: Titel und die sieben Schritte */
  #view-kunde .kd-intro h2 { font-size:clamp(36px,3.6vw,60px); line-height:.98; letter-spacing:-.03em; margin:0 0 20px; max-width:11ch; }
  .kd-intro .kd-lead { font-size:17px; max-width:none; }
  .kd-intro-liste { list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--ink); }
  .kd-intro-liste li { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
  .kd-intro.active .kd-intro-liste li { animation:kd-schritt-ein .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 70ms + 150ms); }
  .kd-intro-liste .n { padding-top:3px; font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--ink-2); font-variant-numeric:tabular-nums; }
  .kd-intro-liste b { display:block; font-size:16px; } .kd-intro-liste small { display:block; margin-top:2px; font-size:14px; color:var(--k-ink2); }
  .kd-intro .kd-actions { margin-top:32px; }
  .kd-intro-fuss { margin-top:16px !important; }
  /* 3D erst ab «Masse» (Fabian 04.10.2026: «die 3d ansicht erst ab den massen anzeigen»): Einstieg, Form und Ausführung über die ganze Breite */
  .kd-gestalten:is([data-schritt="intro"], [data-schritt="form"], [data-schritt="ausf"]) .kd-k-grid { grid-template-columns:minmax(0,1fr); }
  .kd-gestalten:is([data-schritt="intro"], [data-schritt="form"], [data-schritt="ausf"]) .kd-k-buehne { display:none; }
  .kd-gestalten:is([data-schritt="intro"], [data-schritt="form"], [data-schritt="ausf"]) .kd-k-panel { width:100%; max-width:1280px; min-height:calc(100svh - var(--k-kopf) - var(--k-leiste) - var(--k-unten)); margin:0 auto; padding-inline:24px; border-left:0; }
  .kd-gestalten:is([data-schritt="form"], [data-schritt="ausf"]) .kd-bildwahl { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
  .kd-gestalten:is([data-schritt="form"], [data-schritt="ausf"]) .kd-k-panel .kd-sub { max-width:72ch; }
  .kd-intro-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:start; }
  .kd-intro-bild { position:relative; margin:0; overflow:hidden; }
  .kd-intro-bild img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:35% 50%; }
  .kd-intro-bild figcaption { position:absolute; right:12px; top:12px; padding:4px 8px; background:#fff; color:#000; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .kd-error { position:sticky; top:calc(var(--k-kopf) + var(--k-leiste)); z-index:25; margin:0 0 16px; }
  .kd-error:empty { display:none; }
  .kd-error .warn { background:#000; color:#fff; border:0; border-radius:0; padding:16px 20px; font-size:14px; }
  .kd-error .warn::before { content:'⚠'; margin-right:8px; }
  .kd-tabs { display:flex; gap:8px; flex-wrap:wrap; }
  .kd-tabs button { min-height:40px; padding:0 16px; background:#fff; border:1px solid var(--line); border-radius:var(--r); font:inherit; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; }
  .kd-tabs button:hover { border-color:var(--ink); }
  .kd-tabs button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
  .kd-tabs.klein button { min-height:32px; padding:0 10px; font-size:13px; }
  #view-kunde label:not(.kd-check):not(.kd-switch):not(.kw-check):not(.kw-nur-sr) { display:block; margin:12px 0 6px; font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink); }
  #view-kunde :is(input:not([type=checkbox]):not([type=file]), select, textarea) { min-height:48px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r); font-size:16px; font-variant-numeric:tabular-nums; }
  #view-kunde textarea { min-height:96px; padding:12px; }
  #view-kunde :is(input, select, textarea):focus { border-color:var(--ink); }
  #view-kunde .unit span { bottom:15px; font-size:13px; }
  .kd-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
  .kd-fields.drei { grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr); }
  .kd-fields.adresse { grid-template-columns:minmax(0,2fr) minmax(0,.8fr) minmax(0,1.4fr); }
  #view-kunde .kd-fields.gross input { min-height:64px; font-size:26px; font-weight:700; letter-spacing:-.01em; }
  #view-kunde .kd-fields.gross .unit span { bottom:22px; }
  label.kd-check, label.kw-check { display:flex; gap:12px; align-items:flex-start; margin:12px 0 0; padding:12px 0; font-size:15px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); cursor:pointer; }
  .kd-check input, .kw-check input { width:20px; height:20px; min-height:0; margin:2px 0 0; flex:none; accent-color:#000; }
  .kd-check b { display:block; font-size:15px; } .kd-check small { display:block; font-size:13px; color:var(--ink-2); }
  label.kd-check.kd-k-option { margin:0; padding:16px; border:1px solid var(--line); }
  label.kd-check.kd-k-option:hover { border-color:var(--ink); }
  label.kd-check.kd-k-option:has(input:checked) { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
  #view-kunde .kd-weiter-liste { margin:6px 0 18px; padding-left:22px; line-height:1.6; } #view-kunde .kd-weiter-liste li { margin:3px 0; }
  .kd-calcless-preis { display:block; margin-top:6px; font-size:14px; font-variant-numeric:tabular-nums; }
  #view-kunde :is(input, select).kd-fehlt { border:2px solid var(--ink); }
  .kd-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .kd-grid.zwei, .kd-grid.kd-bildwahl { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #view-kunde .opt { position:relative; padding:16px; gap:6px; background:#fff; border:1px solid var(--line); border-radius:var(--r); transition:border-color .2s; }
  #view-kunde .opt:hover { border-color:var(--ink); }
  #view-kunde .opt.active { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
  #view-kunde .opt.active::after { content:none; }
  #view-kunde .kd-bildwahl .opt.ausf.active::after { content:'✓'; position:absolute; top:8px; right:8px; display:grid; place-items:center; width:24px; height:24px; border-radius:0; background:var(--ink); color:#fff; font-size:13px; font-weight:700; }
  #view-kunde .opt.ausf { padding:0 0 14px; gap:6px; overflow:hidden; }
  #view-kunde .opt.ausf :is(.t, .d, .code, .preis) { margin:0 12px; }
  #view-kunde .opt .bild { border-radius:0; border-bottom:1px solid var(--line); overflow:hidden; }
  #view-kunde .opt .bild img { transition:transform .9s cubic-bezier(.2,.7,.2,1); }
  #view-kunde .opt:hover .bild img { transform:scale(1.04); }
  #view-kunde .opt.active .bild { border-bottom-color:var(--ink); }
  #view-kunde .opt .bild.detail { aspect-ratio:4/3; background:#F2F2F2; }
  #view-kunde .opt .bild.plan { padding:4% 6%; background:#fff; }
  #view-kunde .opt .bild.plan > svg { width:100%; height:100%; object-fit:contain; }
  #view-kunde .opt .bild.detail .swatch { width:100%; height:100%; }
  #view-kunde .opt .t { font-size:15px; font-weight:700; } #view-kunde .opt .d { font-size:13px; line-height:1.35; color:var(--ink-2); }
  #view-kunde .opt .preis { margin-top:4px; font-size:14px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
  #view-kunde .opt .code { font-size:11px; letter-spacing:.1em; }
  #view-kunde .opt .swatch { height:48px; border-radius:0; }
  #view-kunde .opt .kd-symbol { background:var(--surface); border-radius:0; }
  #view-kunde .kd-textwahl .opt { justify-content:flex-start; padding:16px; }
  #view-kunde .hints .warn, .kd-k-panel .warn { background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--ink); border-radius:0; font-size:14px; }
  #view-kunde .drop { border:1px dashed var(--ink-2); border-radius:0; padding:24px; font-size:15px; }
  #view-kunde .foto { border-radius:0; }
  /* Preisleiste: Preis (öffnet Auswahl und Preis), Schritt, Zurück, Weiter mit Ziel */
  .kd-bottom { position:sticky; bottom:0; z-index:26; display:flex; align-items:center; gap:16px; height:var(--k-unten); padding:0 24px; background:#fff; border-top:1px solid var(--line); }
  .kd-bottom-preis { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; padding:0; background:none; border:0; font:inherit; letter-spacing:0; text-transform:none; color:var(--ink); text-align:left; cursor:pointer; }
  .kd-bottom-preis b { font-size:24px; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .kd-bottom-preis small { max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--ink-2); white-space:nowrap; }
  .kd-bottom-preis small span { color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
  .kd-bottom-schritt { margin-left:auto; font-size:13px; color:var(--ink-2); white-space:nowrap; }
  .kd-weiter-kurz { display:none; }
  .kd-blatt { position:absolute; left:0; bottom:100%; width:min(480px,100%); max-height:calc(100svh - var(--k-kopf) - var(--k-unten) - 16px); overflow:auto; padding:24px; background:#fff; border:1px solid var(--line); border-bottom:0; animation:kd-schritt-ein .3s cubic-bezier(.2,.7,.2,1) both; }
  .kd-blatt-kopf { display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .kd-blatt-kopf .kd-eyebrow { margin:0; }
  .kd-wahl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; margin:0; padding:16px 0; font-size:14px; }
  .kd-wahl dt { color:var(--ink-2); } .kd-wahl dd { margin:0; font-weight:700; }
  .kd-preis { padding-top:16px; border-top:1px solid var(--ink); }
  .kd-preis:empty { display:none; }
  .kd-preis .betrag { font-size:32px; font-weight:700; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .kd-preis .betrag small { font-size:13px; font-weight:400; letter-spacing:0; color:var(--ink-2); }
  .kd-preis .zeilen { margin:12px 0; border-top:1px solid var(--line); font-size:14px; }
  .kd-preis .zeilen div { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
  .kd-preis .zeilen span:last-child { white-space:nowrap; }
  /* Prüfen, Danke */
  .kd-zusammen { display:grid; grid-template-columns:minmax(100px,150px) minmax(0,1fr); gap:8px 24px; margin:0; font-size:15px; } .kd-zusammen dt { color:var(--ink-2); } .kd-zusammen dd { margin:0; }
  .kd-zusammen-bild { display:block; width:100%; max-width:560px; margin:16px 0; background:#E9E9E9; border:1px solid var(--line); }
  .kd-preis.innen { margin-top:24px; }
  .kd-k-panel .kd-zusammen { grid-template-columns:minmax(0,96px) minmax(0,1fr); gap:10px 16px; font-size:14px; }
  /* Formular in der schmalen Spalte: eine Spalte, Anrede halb, PLZ und Ort nebeneinander */
  .kd-k-panel .kd-fields:not(.gross) { grid-template-columns:minmax(0,1fr); }
  .kd-k-panel .kd-fields.drei { grid-template-columns:repeat(2,minmax(0,1fr)); } .kd-k-panel .kd-fields.drei > :first-child { grid-column:1 / -1; max-width:50%; }
  .kd-k-panel .kd-fields.adresse { grid-template-columns:minmax(0,1fr) minmax(0,2fr); } .kd-k-panel .kd-fields.adresse > :first-child { grid-column:1 / -1; }
  .kd-k-panel .kd-fields:not(.gross) .unit { max-width:240px; }
  .kd-k-panel .kd-zusammen-bild { max-width:100%; }
  .kd-danke { padding-block:48px 80px; }
  .kd-done { max-width:880px; padding:32px; background:#fff; border:2px solid var(--ink); }
  .kd-nr { margin:8px 0 16px; font-size:32px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .kd-intern { max-width:880px; margin-top:24px; padding:24px; background:#fff; border:1px solid var(--line); }
  @media (max-width:860px) {   /* schmal: Bühne oben (bleibt bei Formen, Glas und Beschlägen stehen), Auswahl darunter, Schrittleiste mit Nummern */
    html.kunde { --k-leiste:44px; --k-unten:64px; }
    .kd-k-leiste-innen { padding-inline:16px; }
    .kd-steps { gap:4px; } .kd-steps li { flex:0 0 30px; } .kd-steps li.jetzt { flex:1 1 auto; }
    .kd-steps .l { display:none; } .kd-steps .jetzt .l { display:block; }
    .kd-k-grid { grid-template-columns:minmax(0,1fr); }
    .kd-k-buehne { z-index:6; height:clamp(220px,38svh,440px); min-height:0; border-bottom:1px solid var(--line); }
    .kd-gestalten:is([data-schritt="masse"], [data-schritt="kontakt"], [data-schritt="anfrage"]) .kd-k-buehne { position:relative; top:auto; }
    .kd-gestalten:is([data-schritt="kontakt"], [data-schritt="anfrage"]) .kd-k-buehne { display:none; }
    .kd-k-buehne .kd-tl { left:12px; top:12px; } html.kunde .kd-k-buehne #viewer3d .v3-tools { right:12px; top:12px; }
    .kd-mass-etikett { padding:3px 7px; font-size:11px; }
    .kd-k-bildtext { left:12px; bottom:12px; max-width:calc(100% - 24px); padding:8px 12px 10px; } .kd-k-bildtext .kd-eyebrow { display:none; } .kd-k-titel { font-size:15px; } .kd-k-zeile { font-size:12px; }
    .kd-k-panel { min-height:0; padding:28px 16px 32px; border-left:0; }
    .kd-gestalten:is([data-schritt="intro"], [data-schritt="form"], [data-schritt="ausf"]) .kd-k-panel { min-height:0; padding-inline:16px; }
    .kd-gestalten:is([data-schritt="form"], [data-schritt="ausf"]) .kd-bildwahl { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
    .kd-intro-grid { grid-template-columns:minmax(0,1fr); } .kd-intro-bild { display:none; }
    .kd-bottom { gap:8px; padding:0 16px; } .kd-bottom-schritt { display:none; } .kd-bottom-preis b { font-size:20px; }
  }
  /* Einblenden beim Scrollen; Schalter «Bewegung reduzieren» wirkt wie die Systemeinstellung */
  html:not(.kw-ruhig) .kd-reveal { opacity:0; transform:translate3d(0,16px,0); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  html:not(.kw-ruhig) .kd-reveal.kd-in { opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce) { html.kunde .kd-reveal { opacity:1 !important; transform:none !important; } html.kunde *, html.kunde *::before, html.kunde *::after { animation:none !important; transition:none !important; } }
  @media (max-width:1000px) { .kd-karten, .kd-schritte { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:900px) { .kd-kopfzeile { grid-template-columns:minmax(0,1fr); gap:16px; } }
  @media (max-width:640px) {
    .kd-wrap { padding-inline:16px; } .kd-banner { padding:8px 16px; } .kd-section { padding-block:56px; }
    .kd-karten, .kd-schritte { grid-template-columns:minmax(0,1fr); }
    .kd-panel-body { padding-block:48px; } .kd-panel-tag { right:16px; top:16px; } .kd-panel .kd-actions { flex-direction:column; align-items:flex-start; }
    .kd-buehne { height:52vh; min-height:320px; } .kd-br, .kd-hint, .kd-tl { display:none; }
    .kd-insp-buehne { height:72svh; min-height:480px; } .kd-insp-karte { left:16px; right:16px; width:auto; bottom:84px; padding:16px; } .kd-insp-steuerung { left:16px; right:auto; bottom:24px; } #view-kunde .kd-insp-karte h3 { font-size:20px; } .kd-insp-karte p:not(.kd-eyebrow) { margin:6px 0 12px; font-size:14px; }
    .kd-formen { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .kd-form .text { padding:12px 12px 14px; } .kd-form .text b { font-size:17px; } .kd-form .text small { font-size:13px; } .kd-form .fuss { flex-direction:column; align-items:flex-start; gap:2px; padding-top:10px; } .kd-strip { grid-auto-columns:80%; } .kd-farben { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .kd-farben .kd-kachel { flex-direction:column; align-items:flex-start; gap:10px; } .kd-glaeser { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .kd-fields, .kd-fields.drei, .kd-fields.adresse { grid-template-columns:minmax(0,1fr); }
    .kd-bottom .kd-primary, .kd-bottom .kd-secondary { padding:0 14px; } .kd-bottom .kd-secondary { min-width:48px; padding:0; } .kd-weiter-lang { display:none; } .kd-weiter-kurz { display:inline; }
    .kd-grid, .kd-grid.klein { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .kd-zusammen { grid-template-columns:minmax(0,1fr); gap:2px; } .kd-zusammen dd { margin-bottom:8px; }
    .kd-done { padding:24px 16px; } #view-kunde .kd-fields.gross input { font-size:22px; }
  }
  @media (max-width:480px) { #view-kunde .kd-panel h1 { font-size:40px; } }   /* Handy: im Kopf nur IMBER, KURTH steht im Seitenfuss (wie bei MURALE) */
  @media (max-width:640px), (max-height:640px) { .kd-start > .kd-panel-held { position:relative; top:auto; } }   /* Handy und niedrige Fenster: Titelbild scrollt mit, damit Text und Knöpfe ganz sichtbar bleiben */
  /* ============ Überarbeitung 04.10.2026 (Fabian: «mach die seite richtig stylisch»): mehr Luft, ruhige Bewegung, Kopf über dem Titelbild,
     Formen in vier Spalten mit Kachel «Sonderform», Warum KURTH mit Werkstattbild, Ablauf als Zeitstrahl, Fragen zum Aufklappen, grosse Farbkacheln.
     CI bleibt: Schwarz/Weiss, Grau funktional, eckig, keine Schatten, keine Verläufe; Logo weiss auf dunkel wie bei MURALE (invert). ============ */
  html.kunde .kd-banner { font-size:12px; padding:6px 24px; background:#1A1A1A; }
  html.kunde .kd-section { padding-block:clamp(64px, 9vw, 128px); }
  html.kunde .kd-kopfzeile { margin-bottom:clamp(32px, 4vw, 56px); }
  /* Kopf: durchsichtig über dem Titelbild, weiss sobald der Inhalt kommt */
  .kd-start > .kd-panel-held { margin-top:calc(-1 * var(--k-kopf)); top:0; min-height:100svh; }
  .kd-panel-held .kd-panel-bild img { animation:kd-bild-ein .9s ease both, kd-held-zoom 32s ease-in-out 1s infinite alternate; }
  @keyframes kd-held-zoom { from { scale:1; } to { scale:1.08; } }
  .kd-panel-held .kd-panel-tag { top:calc(var(--k-kopf) + 16px); right:max(24px, calc((100% - 1280px) / 2 + 24px)); }   /* Titelbild liegt unter dem Kopf: Hinweis darunter */
  @media (max-width:640px) { .kd-panel-held .kd-panel-tag { right:16px; top:calc(var(--k-kopf) + 12px); } }
  .kd-scroll-hinweis { position:absolute; right:max(24px, calc((100% - 1280px) / 2 + 24px)); bottom:40px; display:flex; flex-direction:column; align-items:center; gap:14px; padding:0; background:none; border:0; color:#fff; font:inherit; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; }
  .kd-scroll-hinweis i { position:relative; display:block; width:1px; height:64px; background:rgba(255,255,255,.35); overflow:hidden; }
  .kd-scroll-hinweis i::after { content:''; position:absolute; left:0; top:-40%; width:1px; height:40%; background:#fff; animation:kd-tropfen 2.4s cubic-bezier(.6,0,.4,1) infinite; }
  @keyframes kd-tropfen { from { top:-40%; } to { top:100%; } }
  /* Formen: vier Spalten, Kachel «Sonderform», ruhiger Zoom beim Darüberfahren */
  html.kunde .kd-formen { grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
  .kd-form .bild > :is(canvas.kd-anim, img) { transition:opacity .7s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
  .kd-form:hover .bild > :is(canvas.kd-anim, img) { transform:scale(1.035); }
  html.kunde .kd-form .text b { font-size:20px; }
  .kd-form.kd-form-cta { justify-content:space-between; gap:32px; padding:32px 24px 28px; background:#000; color:#fff; border-color:#000; }
  .kd-form.kd-form-cta:hover { border-color:#000; }
  .kd-form-cta .kd-eyebrow { color:var(--ink-2); }
  .kd-form-cta b { display:block; font-size:clamp(24px, 2.2vw, 32px); line-height:1.06; letter-spacing:-.02em; max-width:11ch; }
  .kd-form-cta .kd-cta-text { display:block; margin:16px 0 0; font-size:15px; line-height:1.45; color:var(--line); max-width:26ch; }
  .kd-pfeil { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:700; }
  .kd-pfeil::after { content:'→'; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
  :is(.kd-form-cta, .kd-pfeil):hover .kd-pfeil::after, .kd-pfeil:hover::after { transform:translateX(4px); }
  /* Gläser und Farben: grosse Kacheln, Bild zoomt leicht */
  .kd-kachel .muster img { transition:transform 1s cubic-bezier(.2,.7,.2,1); }
  .kd-kachel:hover .muster img { transform:scale(1.04); }
  html.kunde .kd-farben .kd-kachel { flex-direction:column; align-items:stretch; gap:0; padding:0; }
  html.kunde .kd-farben .kd-kachel i { width:100%; height:auto; aspect-ratio:3/1; border:0; border-bottom:1px solid var(--line); }
  html.kunde .kd-farben .kd-kachel .text { padding:12px 16px 16px; }
  /* Warum KURTH: grosses Werkstattbild, Punkte als Liste mit Linien; darunter die Glaserei */
  .kd-warum-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 96px); align-items:center; }
  .kd-warum-bild { position:relative; margin:0; overflow:hidden; }
  .kd-warum-bild img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 45%; }
  .kd-warum-bild figcaption { position:absolute; left:0; bottom:0; padding:8px 12px; background:#fff; color:#000; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
  .kd-warum-text .kd-lead { margin-top:20px; }
  .kd-punkte { list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--ink); }
  .kd-punkte li { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
  .kd-punkte span { padding-top:4px; font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--ink-2); font-variant-numeric:tabular-nums; }
  #view-kunde .kd-punkte h3 { font-size:20px; } .kd-punkte p { margin:6px 0 0; font-size:15px; color:var(--k-ink2); }
  .kd-glaserei { margin-top:clamp(72px, 9vw, 128px); scroll-margin-top:var(--k-kopf); }
  @media (min-width:901px) { html.kunde .kd-glaserei .kd-strip { grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0,1fr)); overflow:visible; } }
  .kd-strip img { transition:transform 1s cubic-bezier(.2,.7,.2,1); } .kd-strip figure { overflow:hidden; } .kd-strip figure:hover img { transform:scale(1.04); }
  /* calcless.: beschichtetes Glas von KURTH, eigene Glassorte (Kleber aus Fabians imber..zip, Band «Diese Seite ist nicht beschichtet» entfernt), Pflege nach der IMBER-Etikette */
  .kd-calcless { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(32px,6vw,96px); align-items:center; margin-top:clamp(64px,8vw,112px); padding-top:clamp(48px,6vw,80px); border-top:1px solid var(--ink); scroll-margin-top:var(--k-kopf); }
  .kd-calcless-bild { justify-self:center; width:100%; max-width:480px; margin:0; }
  .kd-calcless-bild img { display:block; width:100%; height:auto; }
  #view-kunde .kd-calcless-text h3 { margin-top:32px; font-size:17px; }
  .kd-calcless-text .kd-lead { margin-top:20px; }
  .kd-pflege { list-style:none; margin:12px 0 0; padding:0; border-top:1px solid var(--line); }
  .kd-pflege li { display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.45; }
  .kd-pflege span { color:var(--k-ink2); }
  /* Ablauf als Zeitstrahl */
  .kd-zeitstrahl { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; margin:0; padding:0; }
  .kd-zeitstrahl li { position:relative; min-width:0; padding-top:32px; border-top:1px solid var(--ink); }
  .kd-zeitstrahl li::before { content:''; position:absolute; left:0; top:-6px; width:11px; height:11px; background:var(--ink); }
  .kd-zs-nr { display:block; font-size:clamp(48px, 5.5vw, 80px); font-weight:400; line-height:.9; letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums; }
  #view-kunde .kd-zeitstrahl h3 { margin-top:20px; font-size:22px; } .kd-zeitstrahl p { margin:8px 0 0; max-width:30ch; font-size:15px; color:var(--k-ink2); }
  /* Fragen zum Aufklappen */
  .kd-fragen-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:clamp(32px, 6vw, 96px); align-items:start; }
  .kd-fragen-grid .kd-lead { margin-top:20px; } .kd-fragen-grid .kd-lead a { color:inherit; font-weight:700; white-space:nowrap; }
  html.kunde .kd-faq { display:block; margin:0; border-top:1px solid var(--ink); }
  .kd-faq details { border-bottom:1px solid var(--line); }
  .kd-faq summary { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0; list-style:none; font-size:clamp(17px, 1.5vw, 20px); font-weight:700; letter-spacing:-.01em; line-height:1.3; cursor:pointer; }
  .kd-faq summary::-webkit-details-marker { display:none; }
  .kd-faq summary::after { content:'+'; flex:none; font-size:28px; font-weight:400; line-height:1; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
  .kd-faq details[open] summary::after { transform:rotate(45deg); }
  .kd-faq summary:hover { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
  html.kunde .kd-faq details p { margin:0 0 24px; max-width:62ch; font-size:16px; color:var(--k-ink2); }
  @media (max-width:1100px) { html.kunde .kd-formen { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width:900px) { .kd-calcless { grid-template-columns:minmax(0,1fr); } .kd-calcless-bild { max-width:300px; } .kd-pflege li { grid-template-columns:minmax(0,1fr); gap:2px; } .kd-warum-grid, .kd-fragen-grid { grid-template-columns:minmax(0,1fr); } .kd-warum-bild img { aspect-ratio:4/3; } .kd-zeitstrahl { grid-template-columns:minmax(0,1fr); gap:0; margin-left:5px; border-left:1px solid var(--ink); } .kd-zeitstrahl li { padding:0 0 40px 32px; border-top:0; } .kd-zeitstrahl li::before { left:-6px; top:10px; } .kd-zs-nr { font-size:44px; } }
  @media (max-width:640px) {
    html.kunde .kd-banner { padding:6px 16px; } html.kunde .kd-formen { gap:8px; } .kd-form.kd-form-cta { padding:20px 14px 16px; gap:16px; } .kd-form-cta b { font-size:20px; } .kd-form-cta .kd-cta-text { font-size:13px; }
    .kd-scroll-hinweis { display:none; } .kd-bl { left:12px; right:12px; bottom:12px; } .kd-glasfelder { flex-wrap:nowrap; overflow-x:auto; max-width:none; scrollbar-width:none; } .kd-glasfelder::-webkit-scrollbar { display:none; } .kd-glasfelder button { flex:none; }
  }