/* =========================================================================
   TROAS Glasstudio - Gestaltungsvariante C "Glas"
   -------------------------------------------------------------------------
   Leitgedanke: helle Ebenen, die übereinander liegen, und eine Farbe, die
   aus dem Produkt selbst kommt - das Grün der Scheibe (#154e8a, in der
   3D-Szene als Kantenfarbe 0x76a894 und im Situationssymbol als #4c658a).

   Zwei Regeln halte ich durch, weil diese Richtung sonst kippt:

   1. Tiefe nur dort, wo wirklich eine Ebene über einer anderen liegt.
      Schatten haben genau drei Stärken: Karte (kaum sichtbar),
      Ansichtsfeld (die eine hervorgehobene Ebene) und schwebend (Maß-
      fähnchen, Bildunterschrift, Ungültig-Überlagerung). Felder,
      Reiter und Listen bekommen keinen Schatten.

   2. Durchscheinend nur über bekanntem Grund und nie unter 88 Prozent
      Deckkraft, wenn Schrift darauf steht. Alle Werte unten sind gegen
      Schwarz und gegen Weiß gerechnet, damit auch das helle Fliesenbild
      der 3D-Ansicht den Kontrast nicht auffrisst.

   Selektoren mit vorangestelltem "html" sind Absicht: finder.mjs und
   einbau.mjs hängen ihre eigenen Stilblätter später in den Kopf. Das
   zusätzliche "html" hebt die Spezifität um eins an, damit diese Datei
   gewinnt, ohne dass irgendwo ein !important nötig wird.
   ========================================================================= */

/* ---- 1. Schrift. Nur die beiden mitgelieferten Dateien, nichts aus dem Netz. */
@font-face{font-family:Open Sans;src:url(assets/opensans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Open Sans;src:url(assets/opensans-600.woff2) format('woff2');font-weight:600;font-display:swap}

/* ---- 2. Farben, Radien, Tiefe --------------------------------------------
   Kontrast gerechnet (WCAG):
   #131a24 auf #ffffff        16,2:1      Fließtext
   #131a24 auf #eef0f3        14,4:1      Fließtext auf der Seite
   #4a525d auf #ffffff         7,0:1      gedämpft
   #4a525d auf #eef0f3         6,3:1      gedämpft auf der Seite
   #ffffff auf #154e8a         6,0:1      Schrift auf dem Akzent
   #ffffff auf #142033        13,6:1      Schrift auf dem Ansichtsfeld
   #a8b3c4 auf #142033         7,3:1      gedämpft auf dem Ansichtsfeld
   #131a24 auf #fbbe06         9,6:1      Schrift auf dem Gold
   #131a24 auf #fbfcfd        15,9:1      Maßfähnchen
   ------------------------------------------------------------------------ */
:root{
  font-family:Open Sans,Arial,sans-serif;
  color:#131a24;
  background:#eef0f3;
  font-synthesis:none;
  -webkit-text-size-adjust:100%;

  --papier:#eef0f3;
  --karte:#ffffff;
  --tinte:#131a24;
  --gedaempft:#4a525d;
  --linie:#dbe0e7;
  --linie-zart:#e9ecf1;
  --glas:#154e8a;
  --glas-tief:#183157;
  --glas-hell:#e4eaf2;
  --glas-zart:#f5f7fa;
  --tief:#142033;
  --auf-tief:#a8b3c4;
  --gold:#fbbe06;

  /* von finder.mjs und einbau.mjs benutzt, deshalb hier weitergeführt */
  --line:#dbe0e7;
  --muted:#4a525d;
  --yellow:#fbbe06;

  --r-karte:22px;
  --r-buehne:16px;
  --r-feld:12px;

  /* Stufe 1: Karte liegt auf der Seite. Fast nur eine Kante. */
  --tiefe-karte:0 1px 2px rgba(17,29,48,.05), 0 16px 32px -26px rgba(17,29,48,.28);
  /* Stufe 2: das Ansichtsfeld ist die eine hervorgehobene Ebene. */
  --tiefe-feld:0 2px 6px rgba(10,22,40,.12), 0 34px 64px -34px rgba(10,22,40,.58);
  /* Stufe 3: liegt wirklich über der Bühne. */
  --tiefe-schwebend:0 2px 8px rgba(13,25,42,.22);
}

/* ---- 3. Grundlagen ------------------------------------------------------ */
*{box-sizing:border-box}
body{
  margin:0;
  background-color:var(--papier);
  /* Licht als Gestaltungsmittel: zwei sehr weiche Scheine, kein Muster. */
  background-image:
    radial-gradient(940px 520px at 86% -180px, rgba(93,130,186,.26), rgba(93,130,186,0) 70%),
    radial-gradient(760px 420px at -6% 60px, rgba(138,190,214,.20), rgba(138,190,214,0) 70%);
  background-repeat:no-repeat;
}
h1,h2,h3,p{margin:0}
dl{margin:0}
dd{margin:0;overflow-wrap:anywhere}

.skip{
  position:absolute;top:-120px;left:16px;z-index:40;
  background:var(--glas);color:#fff;text-decoration:none;
  padding:14px 20px;border-radius:0 0 14px 14px;font-size:13px;font-weight:600;
}
.skip:focus{top:0}

/* Pflicht: die Anwendung blendet Felder hierüber aus. */
#invalid-overlay[hidden],[hidden]{display:none!important}

/* ---- 4. Bedienelemente -------------------------------------------------- */
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}

/* Kein Bedienziel unter 44 Pixel. */
button,input,select{min-height:44px}

button{
  min-height:44px;border:1px solid var(--linie);background:var(--karte);
  color:inherit;padding:11px 16px;border-radius:var(--r-feld);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
button:hover{background:var(--glas-zart);border-color:#c6cfdc}

input,select{
  width:100%;min-width:0;min-height:48px;
  border:1px solid #d3d9e3;border-radius:var(--r-feld);
  background:var(--glas-zart);color:var(--tinte);
  padding:12px 14px;font-size:15px;font-weight:600;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
input::placeholder{color:#7b838f;font-weight:400}
input:hover,select:hover{border-color:#bec8d6}
input:focus,select:focus{background:#fff}
input[aria-invalid=true]{border-color:#a8412c;background:#fdf1ee}

/* Eigene Klappliste statt Systempfeil. Das Symbol steckt als Datei-URI hier
   drin, es wird nichts nachgeladen. */
select{
  appearance:none;-webkit-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%234a5d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  font-size:14px;
}

/* Sichtbarer Fokusring, auf hellem wie auf dunklem Grund. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--glas);outline-offset:2px;
}
.visual button:focus-visible,.visual [tabindex]:focus-visible{outline-color:#8fafe0}

/* ---- 5. Typografie ------------------------------------------------------ */
h1{
  font-size:clamp(31px,3.5vw,50px);line-height:1.06;font-weight:600;
  letter-spacing:-.025em;
}
h2{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.018em}
h3{font-size:15px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.15em;
  color:var(--gedaempft);margin-bottom:10px;
}
.helper{font-size:12px;line-height:1.75;color:var(--gedaempft);margin-top:11px}
.optional{font-size:12px;color:var(--gedaempft);font-weight:400}

/* Zahlen sind das Wichtigste auf dem Schirm: gleiche Ziffernbreite,
   damit sie beim Tippen nicht zappeln. */
input,#size-summary,#area-summary,.specification dd,.stueckliste dd,
#cut-table td,.code,#spec dd{font-variant-numeric:tabular-nums}

/* ---- 6. Kopfleiste und Fuß --------------------------------------------- */
/* .prototype (Vorschauleiste mit Baustand) entfernt, S11 vom 24.09.2026:
   an ihrer Stelle steht p.t-preview aus theme.css. */

.header{
  display:flex;align-items:center;gap:28px;
  padding:18px 4%;background:#fff;border-bottom:1px solid var(--linie);
}
.header img{width:122px;height:auto}
.header-title{
  font-size:13px;font-weight:600;letter-spacing:.12em;
  border-left:1px solid var(--linie);padding-left:28px;
}
.header-title span{
  display:block;font-weight:400;font-size:12px;letter-spacing:0;
  color:var(--gedaempft);margin-top:6px;
}
.edition{
  margin-left:auto;font-size:12px;letter-spacing:.1em;color:var(--gedaempft);
  background:var(--glas-hell);border-radius:999px;padding:8px 14px;white-space:nowrap;
}

footer{
  background:var(--tief);color:var(--auf-tief);
  padding:30px 4%;display:flex;justify-content:space-between;gap:20px;
  font-size:12px;line-height:1.6;
}
footer strong{color:#fff;font-weight:600}

/* ---- 7. Einstieg -------------------------------------------------------- */
main{max-width:1560px;margin:auto;padding:40px 4% 68px}

.intro{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:48px;margin-bottom:30px;
}
.intro .eyebrow{
  display:inline-block;margin-bottom:14px;
  background:var(--glas-hell);color:#13294b;
  border-radius:999px;padding:7px 14px;letter-spacing:.14em;
}
.intro>p{max-width:340px;font-size:13.5px;line-height:1.75;color:var(--gedaempft)}

/* ---- 8. Produktfinder ---------------------------------------------------
   finder.mjs bringt eigene Regeln mit, deshalb hier durchgehend mit "html". */
html .finder{
  display:grid;grid-template-columns:1fr 1.55fr;gap:46px;align-items:start;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-karte);
  box-shadow:var(--tiefe-karte);
  padding:30px 32px 32px;margin-bottom:18px;
}
html .finder h2{font-size:30px}
html .finder h3{font-size:15px;margin:0 0 14px}
html .finder-lead{max-width:330px;font-size:12.5px;line-height:1.8;color:var(--gedaempft);margin-top:14px}
html .finder-kopf #finder-neu{margin-top:22px;width:auto;padding-inline:26px;font-size:12px}
html .finder-rechts{min-width:0}
html .finder-schritt{padding-bottom:22px}
html .finder-schritt+.finder-schritt{border-top:1px solid var(--linie-zart);padding-top:22px}

html .finder-optionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:8px}
html .finder-optionen button{
  min-height:52px;min-width:0;text-align:left;padding:12px 14px;
  font-size:12px;line-height:1.5;border-radius:14px;
  background:var(--glas-zart);border:1px solid var(--linie);
}
html .finder-optionen button:hover{background:#eef2f7;border-color:#bfc9d9}
/* Ausgewählt wird mit Ring und Tonung markiert, nicht mit Vollfläche:
   in diesem Block stehen Zeichnungen in den Knöpfen, die eine dunkle
   Fläche unlesbar machen würde. */
html .finder-optionen button[aria-pressed="true"]{
  background:var(--glas-hell);color:var(--tinte);
  border-color:var(--glas);box-shadow:inset 0 0 0 1px var(--glas);
}
html .finder-option-titel{display:block;font-weight:600;overflow-wrap:anywhere}
html .finder-option-sub{display:block;font-size:12px;line-height:1.6;color:var(--gedaempft);margin-top:4px;overflow-wrap:anywhere}
html .finder-optionen button[aria-pressed="true"] .finder-option-sub{color:#2f415d}
html .finder-zeichen{display:block;margin-bottom:6px}
html .finder-zeichen svg{display:block;width:48px;height:auto;border-radius:6px}

html .finder-ergebnis{
  background:var(--glas-hell);border:1px solid #c9d3e2;border-top:3px solid var(--glas);
  border-radius:16px;padding:20px 20px 22px;margin-top:6px;
}
html .finder-ergebnis:focus-visible{outline:3px solid var(--glas);outline-offset:3px}
html .finder-ergebnis h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
html .finder-ergebnis .eyebrow{color:#2f415d}
html .finder-ergebnis-lead{font-size:12px;line-height:1.8;color:#2f415d;margin-bottom:16px}
html .finder-gruende{margin:0 0 18px}
html .finder-gruende>div{font-size:12px;padding:11px 0;border-top:1px solid #cfd7e4}
html .finder-gruende dt{font-weight:600;color:var(--tinte)}
html .finder-gruende dd{color:#2f415d;line-height:1.8}
html .finder-offen{margin:0;padding:0;list-style:none}
html .finder-offen li{
  font-size:12px;line-height:1.7;color:#7a5412;
  padding-left:17px;position:relative;margin-bottom:7px;
}
html .finder-offen li:before{
  content:'';position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:999px;background:#c99413;
}
html .finder-status{font-size:12px;line-height:1.7;margin-top:14px;color:var(--gedaempft)}
html .finder-status:empty{margin-top:0}

/* ---- 9. Produktwahl ----------------------------------------------------- */
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.products button{
  display:block;text-align:left;padding:16px 18px 17px;
  border-radius:16px;border:1px solid var(--linie);background:var(--karte);
  font-size:14px;font-weight:600;box-shadow:var(--tiefe-karte);
}
.products button:hover{background:#f7f9fb;border-color:#c6cfdc}
.products button>span{
  display:inline-block;min-width:26px;
  font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--glas);
}
.products small{
  display:block;font-weight:400;font-size:12px;line-height:1.5;
  margin-left:26px;margin-top:6px;color:var(--gedaempft);
}
.products button[aria-pressed=true]{
  background:var(--glas);border-color:var(--glas);color:#fff;
  box-shadow:0 2px 6px rgba(20,36,60,.12), 0 18px 32px -20px rgba(31,63,111,.75);
}
.products button[aria-pressed=true]:hover{background:var(--glas-tief);border-color:var(--glas-tief)}
.products button[aria-pressed=true]>span,
.products button[aria-pressed=true] small{color:#d5dfef}

/* ---- 10. Arbeitsfläche ------------------------------------------------- */
.workspace{
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(340px,1fr);
  gap:18px;align-items:start;
}

/* Das Ansichtsfeld ist die eine Ebene, die wirklich über der Seite liegt -
   und die einzige, die dafür einen kräftigen Schatten bekommt. */
.visual{
  min-width:0;position:sticky;top:18px;
  color:#fff;border-radius:var(--r-karte);padding:20px 18px 4px;
  background-color:var(--tief);
  background-image:radial-gradient(130% 92% at 14% -8%, #1e3250 0%, rgba(30,50,80,0) 62%);
  box-shadow:var(--tiefe-feld);
}
.visual-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 4px 16px}
.visual-top .eyebrow{font-size:12px;color:var(--auf-tief);margin-bottom:7px;letter-spacing:.1em}
.visual-top h2{font-size:25px;color:#fff}
.visual-top button{
  border:1px solid rgba(255,255,255,.26);color:#fff;background:rgba(255,255,255,.09);
  font-size:12px;white-space:nowrap;border-radius:999px;padding:11px 16px;
}
.visual-top button:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.4)}

/* Reiter als Segmentschalter. Durchscheinend, aber über bekanntem dunklem
   Grund - die Schrift steht mit 8,5:1 darauf. */
.view-tabs{
  display:flex;gap:4px;margin-bottom:12px;
  background:rgba(255,255,255,.08);border-radius:999px;padding:4px;
}
.view-tabs button{
  flex:1;min-width:0;background:transparent;border:0;color:#d7dee8;
  font-size:12px;border-radius:999px;padding:10px 8px;
}
.view-tabs button:hover{background:rgba(255,255,255,.12);color:#fff}
/* Der aktive Reiter bleibt hell, nicht gold: das Gold gehört einmal je
   Bildschirm an das Aufmaßblatt. #f2f4f8 auf #142033 sind 12,6:1. */
html .view-tabs button[aria-pressed="true"]{
  background:#f2f4f8;color:var(--tief);border-color:#f2f4f8;font-weight:600;
}
html .view-tabs button[aria-pressed="true"]:hover{background:#fff}

.stage{background:#e9e9e2;position:relative;color:var(--tinte);min-width:0;border-radius:var(--r-buehne);overflow:hidden}

/* Feste Höhe und overflow:hidden sind Pflicht, sonst bricht die Szene. */
#scene{height:530px;position:relative;overflow:hidden;touch-action:pan-y}
#scene canvas{display:block;width:100%;height:100%}

/* Schwebt wirklich über der Bühne: eigene Fläche, eigener Schatten. */
.scene-caption{
  position:absolute;top:14px;left:14px;z-index:1;pointer-events:none;
  background:rgba(255,255,255,.92);color:var(--tinte);
  border-radius:14px;padding:8px 13px;
  font-size:12px;font-weight:600;letter-spacing:.1em;
  box-shadow:var(--tiefe-schwebend);
}
.scene-caption span{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--gedaempft);margin-top:4px}

/* Bildunterschrift unter der Ansicht, innerhalb der Bühne. Sie trägt die
   Vorbehalte, die zur ganzen Konfiguration gehören - bis zum 19.09.2026 hing
   "Befestigung noch nicht gewählt" als Fähnchen mitten auf der Scheibe.

   Unter der Ansicht und nicht darin: im Bild verdeckt jede Fläche das Produkt,
   und tools/bildvergleich.mjs misst genau dieses Bild gegen das des Piloten.

   Dieselben Farben und Maße wie der Hinweisstreifen unter der Zeichnung weiter
   unten - es ist derselbe Platz und dieselbe Art Satz, also sieht er auch
   gleich aus. #2f415d auf #eaeef3 sind 6,9:1. */
.szene-unterschrift{
  margin:0;background:#eaeef3;color:#2f415d;
  font-size:12px;line-height:1.6;
  padding:11px 14px;border-top:1px solid #d3dae5;
}
/* Mit der Ansicht zusammen weg: schaltet der Kunde auf Zeichnung oder Teile,
   gehört der Satz zu einem Bild, das gerade nicht zu sehen ist. scene.mjs
   hängt ihn dafür unmittelbar hinter #scene. */
.szene-unterschrift[hidden],#scene[hidden]+.szene-unterschrift{display:none}

/* Maßfähnchen: müssen auf jedem Grund lesbar bleiben, auch über dem
   hellen Fliesenbild. Deshalb eigene, fast deckende Fläche statt Glas.
   #131a24 auf #fbfcfd sind 15,9:1. Die Maße bleiben knapp, weil scene.mjs
   die Fähnchen anhand ihrer Größe auseinanderschiebt. */
.dimension-label{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  background:#fbfcfd;color:#131a24;border:1px solid #b6c0d0;
  font:600 12px Open Sans,Arial,sans-serif;
  padding:5px 8px;border-radius:999px;pointer-events:none;
  box-shadow:var(--tiefe-schwebend);
}
.dimension-label.marke{padding:4px 0;min-width:26px;text-align:center}

#drawing{background:#f7f9fb;min-height:530px;display:flex;align-items:center}
#drawing svg{display:block;width:100%;height:auto}

#invalid-overlay{
  position:absolute;inset:0;z-index:2;
  background:rgba(243,245,249,.95);color:var(--tinte);
  display:flex;align-items:center;text-align:center;justify-content:center;
  padding:30px;line-height:1.7;font-size:14px;
}

/* Die Knoepfe unter der Ansicht. Sie sind das einzige, womit der Kunde die
   Scheibe bewegen kann, und der Abnehmer vom 19.09.2026 hat sie nicht als
   Knoepfe erkannt: "winzige Haken in einem 48-Punkt-Kreis, dunkelgrau auf
   dunkelgruen. Plus und Minus daneben liest man auch nicht."

   Nachgesehen, woran es liegt: index.html stellt die Schriftzeichen U+21B6
   und U+21B7 hinein. Die rendern in den Systemschriften als duenner Haken
   OHNE Pfeilspitze, und zwar in Schriftgrad 14 - gemessen an der lebenden
   Seite, qa/bedien-welle5/vorher/drehknoepfe.png. Ein Zeichen, das in der
   Schrift keine Spitze hat, bekommt auch bei Grad 20 keine.

   Deshalb wird das Zeichen nicht vergroeszert, sondern ersetzt: ein
   gezeichneter Pfeil als Hintergrundbild, dazu das Wort. Ein Knopf, der
   "Links drehen" sagt, muss nicht erkannt werden. Die Zeichen aus index.html
   bleiben im Text stehen (Schriftgrad 0 statt display:none) - sie sind der
   Fallbacktext und stehen weiter im aria-label des Knopfes, an dem sich
   Vorleseprogramme ohnehin halten.

   Zum Zoomen zwei Lupen statt Strich und Kreuz. Eine Lupe mit Plus ist ohne
   Wort eindeutig; Woerter an allen vier Knoepfen haetten die Reihe auf dem
   1.024er Schirm umbrechen lassen. */
.view-controls{display:flex;align-items:center;gap:8px;padding:12px 4px;flex-wrap:wrap}
.view-controls button{
  min-width:44px;height:44px;padding:0 12px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  color:#fff;font-size:14px;border-radius:999px;
}
.view-controls button:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5)}
.view-controls #left,.view-controls #right,
.view-controls #zoom-raus,.view-controls #zoom-rein{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:0;/* der duenne Haken aus index.html - er wird hier ersetzt */
}
.view-controls #left,.view-controls #right{padding:0 16px 0 13px}
.view-controls #left::before,.view-controls #right::before,
.view-controls #zoom-raus::before,.view-controls #zoom-rein::before{
  content:"";flex:0 0 21px;width:21px;height:21px;
  background-repeat:no-repeat;background-position:center;background-size:21px 21px;
}
.view-controls #left::after,.view-controls #right::after{
  font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
}
/* Gezeichnet statt geschrieben: Kreisbogen ueber 315 Grad mit ausgefuellter
   Spitze, die in Laufrichtung zeigt. Weisz auf dem dunklen Feld. */
.view-controls #left::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 1 0 2.34-5.66' fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M2.8 9.2 8.7 8.1 3.9 3.3z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.view-controls #left::after{content:"Links"}
.view-controls #right::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66' fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M21.2 9.2 15.3 8.1 20.1 3.3z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.view-controls #right::after{content:"Rechts"}
.view-controls #zoom-raus::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.6'/%3E%3Cpath d='M15.6 15.6 20.8 20.8'/%3E%3Cpath d='M7.6 10.5h5.8'/%3E%3C/svg%3E");
}
.view-controls #zoom-rein::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.6'/%3E%3Cpath d='M15.6 15.6 20.8 20.8'/%3E%3Cpath d='M7.6 10.5h5.8'/%3E%3Cpath d='M10.5 7.6v5.8'/%3E%3C/svg%3E");
}
.view-controls #reset{font-size:12px;padding:0 16px}
.view-controls>span{font-size:12px;color:var(--auf-tief);margin-left:auto;padding-right:4px}

/* Die beiden Zahlen, die im Termin zählen: eigene Fläche, größtes
   Schriftgrad im dunklen Feld. */
.visual-footer{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:rgba(255,255,255,.07);border-radius:14px;
  padding:14px 16px;margin-top:2px;
}
.visual-footer strong{font-size:20px;font-weight:600;letter-spacing:-.015em;color:#fff}
.visual-footer>span{font-size:12px;color:var(--auf-tief)}
.visual-note{font-size:12px;line-height:1.7;color:var(--auf-tief);padding:12px 4px 18px}

#cut-table table{border-collapse:collapse;width:100%;font-size:12px;margin-bottom:18px}
#cut-table caption{text-align:left;color:var(--auf-tief);padding-bottom:8px}
#cut-table th,#cut-table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.14);text-align:left}
#cut-table th{color:var(--auf-tief);font-weight:400}
#cut-table td{color:#fff}

/* ---- 11. Eingabespalte --------------------------------------------------- */
.config{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-karte);
  box-shadow:var(--tiefe-karte);padding:26px 26px 28px;min-width:0;
}
.config-heading{padding-bottom:20px}
.config-heading h2{font-size:27px}
.config-heading>p:last-child{font-size:12px;color:var(--gedaempft);margin-top:10px}

/* Segmentschalter Einfach / Fachmann. */
html .modus{display:flex;gap:4px;margin-bottom:18px;background:#e6eaef;border-radius:999px;padding:4px}
html .modus button{
  flex:1;min-height:44px;border:0;background:transparent;color:var(--tinte);
  font:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;border-radius:999px;
}
html .modus button:hover{background:rgba(255,255,255,.7)}
html .modus button[aria-pressed="true"]{
  background:var(--glas);color:#fff;
  box-shadow:0 1px 2px rgba(20,36,60,.14), 0 8px 18px -12px rgba(31,63,111,.8);
}
html .modus button[aria-pressed="true"]:hover{background:var(--glas-tief)}
html .modus-hinweis{font-size:12px;line-height:1.7;color:var(--gedaempft);margin:-8px 0 18px}

/* Kein border-top am fieldset: die Legende schneidet dort ein Loch in die
   Linie, und genau dieser halbe Strich neben der Überschrift ist der Griff
   in die klassische Kiste, aus der diese Variante heraus soll. Die Schritte
   trennt stattdessen der Abstand, gehalten von der Nummernmarke. */
fieldset{border:0;padding:8px 0 18px;margin:0;min-width:0}
legend{
  display:block;font-size:14px;font-weight:600;padding:0;
  letter-spacing:-.008em;margin-bottom:14px;
}
/* Die Schrittnummer wird zur Marke. Das ersetzt die Trennlinien als
   Gliederung, ohne eine weitere Kastenebene aufzumachen. */
legend>span{
  display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;margin-right:10px;vertical-align:-7px;
  border-radius:999px;background:var(--glas-hell);color:#13294b;
  font-size:12px;font-weight:600;letter-spacing:.02em;
}

.situations{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin-top:12px}
.situations button{
  padding:6px 6px 10px;font-size:12px;min-width:0;border-radius:14px;
  background:var(--glas-zart);border:1px solid var(--linie);line-height:1.4;
}
.situations svg{width:100%;display:block;border-radius:9px}
.situations button[aria-pressed=true]{
  background:var(--glas-hell);border-color:var(--glas);
  box-shadow:inset 0 0 0 1px var(--glas);font-weight:600;
}

label{font-size:12px;display:block;line-height:1.5;min-width:0;color:var(--gedaempft)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.input{display:flex;position:relative;margin-top:7px}
/* Die Einheit steht nur da, wo es eine gibt. Ausschnittsfelder bekommen
   deshalb den vollen Platz. */
.input:has(>span) input{padding-right:44px}
.input>span{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:12px;font-weight:400;color:var(--gedaempft);pointer-events:none;
}
.single{margin-top:18px}
.single>.input{margin-top:7px}
select{margin-top:7px}

.errors{
  background:#fdeeea;color:#8c2f1e;border:1px solid #f0c3b7;border-radius:14px;
  padding:14px 16px;margin-bottom:16px;font-size:12px;line-height:1.7;
}

/* Rückfrage mm/cm. Bedienziele hier waren 36 Pixel hoch - das hebe ich
   auf 44 an, sonst ist die Anforderung an einer Stelle verletzt, die der
   Prüfer nicht anfasst. */
html .mass-rueckfrage{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:8px;padding:11px 13px;font-size:12px;line-height:1.6;
  background:#fff7e8;border:1px solid #e8cd93;border-radius:14px;color:#6f4b10;
}
html .mass-rueckfrage button{
  min-height:44px;padding:8px 14px;font-size:12px;font-weight:600;
  border:1px solid #b98c2a;background:#fff;color:#6f4b10;border-radius:999px;cursor:pointer;
}
html .mass-rueckfrage button:hover{background:#fffdf7}

.cut-row{border:1px solid var(--linie);border-radius:14px;padding:13px;margin-bottom:10px;background:var(--glas-zart)}
.cut-row header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12.5px}
.cut-row button{font-size:12px;padding:8px 14px;border-radius:999px}
.cut-row .fields{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.cut-row .input input{padding:10px;font-size:14px}
#add-cut{width:100%}

/* Die beiden Abschlussblöcke bekommen als Einzige im Formular eine eigene
   Fläche. Damit hängt das Gewicht am Ergebnis, nicht an jedem Feld. */
.exports{
  border-top:0;margin-top:22px;padding:20px;
  background:var(--glas-zart);border:1px solid var(--linie-zart);border-radius:18px;
}
.export-buttons{display:grid;gap:9px}
.primary,.secondary{width:100%;min-height:48px;font-size:12.5px;border-radius:var(--r-feld)}
.primary{background:var(--gold);border-color:var(--gold);font-weight:600;color:var(--tinte)}
.primary:hover{background:#eeb300;border-color:#eeb300}
.secondary{background:#fff;border-color:var(--linie)}
.secondary:hover{background:#eef2f7;border-color:#bfc9d9}
/* Gold genau einmal je Bildschirm: die Abschlusstat. */
html .export-buttons #wa-blatt{
  background:var(--gold);border:1px solid var(--gold);color:var(--tinte);
  font-weight:600;width:100%;min-height:48px;font-size:12.5px;border-radius:var(--r-feld);
  /* G3 24.09.2026 (Befund 25): ohne gelblichen Schatten, wie jeder andere Knopf der Seite. */
  box-shadow:none;
}
html .export-buttons #wa-blatt:hover{background:var(--gold);border-color:var(--tinte)}
#export-status{font-size:12px;line-height:1.7;margin-top:12px;color:var(--gedaempft)}
#export-status:empty{margin-top:0}

html .wiederaufruf{
  border-top:0;margin-top:12px;padding:20px;
  background:#fff;border:1px solid var(--linie);border-radius:18px;
}
html .code-zeile{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
html .code{
  font-size:24px;letter-spacing:.16em;font-weight:600;color:var(--tinte);
  background:var(--glas-hell);border-radius:12px;padding:10px 14px;
}
html .wiederaufruf input{
  min-height:48px;width:100%;border:1px solid #d3d9e3;border-radius:var(--r-feld);
  padding:12px 14px;font:inherit;font-size:15px;font-weight:600;
  background:var(--glas-zart);color:var(--tinte);letter-spacing:.08em;
}
html .wiederaufruf input::placeholder{font-weight:400;letter-spacing:.04em;color:#7b838f}
html .wiederaufruf .knopfreihe{display:grid;gap:9px;margin-top:11px}
html #wa-status{font-size:12px;line-height:1.7;color:var(--gedaempft)}

/* ---- 12. Ergebnisabschnitte --------------------------------------------- */
.specification,
html .stueckliste{
  display:grid;grid-template-columns:1fr 1.6fr;gap:56px;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-karte);
  box-shadow:var(--tiefe-karte);
  padding:32px;margin-top:18px;
}
.specification h2,html .stueckliste h2{font-size:30px}
.specification p:not(.eyebrow),
html .stueckliste p:not(.eyebrow){max-width:320px;font-size:12.5px;line-height:1.8;color:var(--gedaempft);margin-top:14px}
.specification dl>div,
html .stueckliste dl>div{
  display:grid;grid-template-columns:1fr 1.6fr;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--linie-zart);font-size:12.5px;
}
.specification dt,html .stueckliste dt{color:var(--gedaempft)}
.specification dd,html .stueckliste dd{color:var(--tinte);font-weight:600}
html .stueckliste .sl-offen{color:#7a5412}
html .stueckliste ul{margin:20px 0 0;padding:0;list-style:none}
html .stueckliste li{
  font-size:12px;line-height:1.7;color:var(--gedaempft);
  padding-left:17px;position:relative;margin-bottom:8px;
}
html .stueckliste li:before{
  content:'';position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:999px;background:#9dacc2;
}

/* ---- 13. Großansicht ---------------------------------------------------- */
.workspace.expanded{
  position:fixed;inset:0;overflow:auto;background:var(--papier);z-index:20;
  padding:20px;grid-template-columns:minmax(0,2fr) minmax(340px,1fr);
}
body:has(.workspace.expanded){overflow:hidden}
.workspace.expanded .visual{top:0}
.workspace.expanded #scene{height:calc(100vh - 300px);min-height:350px}

/* ---- 14. Bewegung -------------------------------------------------------
   Nur dort, wo sie etwas erklärt: ein neuer Schritt, ein neuer Vorschlag,
   der Wechsel auf die bemaßte Zeichnung, ein anderes Produkt. Nie auf der
   3D-Leinwand. Nie länger als 180 Millisekunden. */
@keyframes glas-auf{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes glas-ein{from{opacity:.35}to{opacity:1}}
.glas-auf{animation:glas-auf .18s ease-out}
.glas-ein{animation:glas-ein .16s ease-out}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* ---- 15. Breiten --------------------------------------------------------- */
@media(max-width:1180px){
  main{padding-inline:3%}
  .workspace{grid-template-columns:minmax(0,1.32fr) minmax(320px,1fr);gap:14px}
  .config{padding:22px 20px 24px}
  .visual{padding:18px 12px 4px}
  .intro{gap:28px}
  .intro>p{max-width:280px}
  .edition{display:none}
  html .finder{gap:30px;padding:24px}
  .specification,html .stueckliste{gap:32px;padding:26px}
  .dimension-label{font-size:12px}
  #scene,#drawing{min-height:430px;height:430px}
}

@media(max-width:850px){
  main{padding:30px 22px 44px}
  .intro{display:block}
  .intro>p{max-width:520px;margin-top:16px}
  .workspace{grid-template-columns:1fr}
  .visual{position:static;padding:18px 14px 4px}
  .config{padding:24px 20px 26px}
  html .finder{grid-template-columns:1fr;gap:22px;padding:24px 20px}
  html .finder h2{font-size:27px}
  html .finder-lead{max-width:none}
  html .finder-kopf #finder-neu{margin-top:16px}
  .specification,html .stueckliste{grid-template-columns:1fr;gap:20px;padding:26px 22px}
  .specification h2,html .stueckliste h2{font-size:27px}
  .situations{gap:10px}
  .situations button{font-size:12px}
  .situations svg{height:82px}
  .workspace.expanded{grid-template-columns:1fr;padding:14px}
  .workspace.expanded .visual{position:static}
  .workspace.expanded #scene{height:460px}
  .header{padding:15px 22px}
  footer{flex-wrap:wrap;padding-inline:22px}
  #scene,#drawing{height:500px;min-height:500px}
  .dimension-label{font-size:12px}
  .fields{gap:16px}
}

@media(max-width:620px){
  main{padding:24px 14px 34px}
  .header{padding:13px 14px;gap:14px}
  .header img{width:96px}
  .header-title{padding-left:14px;font-size:12px;letter-spacing:.1em}
  .header-title span{font-size:12px;line-height:1.5;max-width:160px;margin-top:4px}
  .intro{margin-bottom:20px}
  .intro>p{font-size:12.5px}

  /* Drei Produkte nebeneinander werden hier zu Quetschsatz. Untereinander
     bleibt jede Zeile lesbar und jedes Ziel groß genug. */
  .products{grid-template-columns:1fr;gap:8px;margin-bottom:14px}
  .products button{padding:13px 15px 14px;font-size:13.5px;box-shadow:none}
  .products small{margin-left:26px;margin-top:4px;font-size:12px}

  html .finder{padding:20px 16px;margin-bottom:14px;border-radius:18px}
  html .finder h2{font-size:24px}
  html .finder-optionen{grid-template-columns:repeat(auto-fit,minmax(122px,1fr))}
  html .finder-optionen button{padding:11px 12px;font-size:12px}
  html .finder-ergebnis{padding:17px 15px 19px}
  html .finder-ergebnis h3{font-size:18px}

  .visual{padding:16px 10px 4px;border-radius:18px}
  .visual-top{padding:0 3px 14px;gap:10px}
  .visual-top h2{font-size:21px}
  .visual-top .eyebrow{font-size:12px;max-width:150px;line-height:1.6}
  .visual-top button{font-size:12px;padding:10px 12px;white-space:normal;max-width:100px}
  .view-tabs button{padding:10px 6px;font-size:12px}
  .view-controls{gap:6px;flex-wrap:wrap;padding:12px 2px}
  .view-controls>span{font-size:12px}
  .view-controls #reset{font-size:12px;padding:0 12px}
  /* Auf dem Handy nur die Zeichnung. Mit den Woertern braucht die Reihe zwei
     Zeilen und schiebt die Ansicht nach oben aus dem Bild; der Pfeil allein
     ist gross genug, und das aria-label sagt weiter, was der Knopf tut. */
  .view-controls #left::after,.view-controls #right::after{display:none}
  /* Ohne Innenrand sind die vier Knoepfe genau so breit wie vorher (44 px).
     Mit dem Rand des gezeichneten Zeichens waren es 55, und damit brach die
     Reihe bei 390 px in zwei Zeilen - ein Schaden, den es vorher nicht gab. */
  .view-controls #left,.view-controls #right,
  .view-controls #zoom-raus,.view-controls #zoom-rein{padding:0;min-width:44px}
  .visual-footer{padding:12px 13px}
  .visual-footer strong{font-size:16px}
  .visual-footer>span{font-size:12px}
  .visual-note{font-size:12px;padding:11px 3px 16px}
  .scene-caption{top:11px;left:11px;padding:7px 11px;font-size:12px}
  .scene-caption span{font-size:12px}
  .szene-unterschrift{font-size:12px;padding:10px 12px}
  #scene,#drawing{height:355px;min-height:355px}
  /* Maßfähnchen bleiben auf dem schmalen Schirm bewusst knapp: scene.mjs
     schiebt sie anhand ihrer eigenen Größe auseinander. */
  .dimension-label{font-size:12px;padding:4px 6px}

  .config{padding:20px 16px 22px;border-radius:18px}
  .config-heading h2{font-size:24px}
  .fields{gap:12px}
  .situations{gap:7px}
  .situations button{font-size:12px}
  .situations svg{height:64px}
  input,select{font-size:16px}
  select{font-size:14px}
  .exports,html .wiederaufruf{padding:16px}
  html .code{font-size:21px;letter-spacing:.14em}

  .specification,html .stueckliste{padding:22px 16px;border-radius:18px;margin-top:14px}
  .specification h2,html .stueckliste h2{font-size:23px}
  .specification dl>div,html .stueckliste dl>div{gap:14px;font-size:12px}
  footer{padding:24px 16px;display:grid;gap:10px}
  .workspace.expanded{padding:8px}
  .workspace.expanded #scene{height:355px;min-height:355px}
  .cut-row{padding:10px}
  .cut-row label{font-size:12px}
  .cut-row .input input{padding:9px;font-size:15px;min-width:0}
}

/* Unter 420 Pixel stehen zwei Maßfelder nebeneinander nicht mehr gut:
   von der Eingabe bleibt sonst weniger Platz als die Zahl breit ist. */
@media(max-width:420px){
  .fields{grid-template-columns:1fr}
  .cut-row .fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .cut-row .input input{padding:8px 6px}
  html .finder-optionen{grid-template-columns:1fr}
}

/* Die Zeichnung bleibt bemaßt, auch auf dem schmalen Schirm: lieber
   seitlich verschiebbar als unleserlich klein.
   W07 (24.09.2026): Das Blatt ist 1000 Einheiten breit, seine kleinste
   Beschriftung 15 Einheiten. Bei 620 px Blattbreite stand sie mit 9,3 px da,
   bei 1440 px Fensterbreite mit 11,6 px (gemessen). Das Blatt wird deshalb nie
   schmaler als 750 px gezeichnet, und app.mjs (zeichnungLesbar) hebt jede
   Beschriftung, die dann noch unter 12 px läge, auf 12 px. Mehr Anhebung
   ohne Mindestbreite ließ Beschriftungen ineinander laufen (Probe bei 1024 px).
   Bis 850 px, wo die Ansicht nicht klebt, sagt ein Hinweis, dass sie rollt. */
#drawing svg{min-width:750px;flex-shrink:0}
@media(max-width:850px){
  #drawing{overflow-x:auto;align-items:center;justify-content:flex-start;min-height:355px;height:auto}
  #drawing svg{min-width:750px;flex-shrink:0;width:750px}
  .stage:has(#drawing:not([hidden])):after{
    content:'Zeichnung seitlich verschieben ↔ · Maße stehen auch unter der Ansicht';
    display:block;background:#eaeef3;color:#2f415d;font-size:12px;
    padding:11px 13px;border-top:1px solid #d3dae5;line-height:1.6;
  }
}

/* Weiterknopf des Finders auf seiner eigenen Seite. Er fuehrt mit der getroffenen
   Auswahl in den Konfigurator und ist ein echter Verweis, damit man ihn auch in
   einem neuen Tab oeffnen kann. */
html .finder-weiter{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:20px;min-height:48px;padding:12px 26px;
  border-radius:999px;background:var(--glas,#154e8a);color:#fff;
  font-weight:600;font-size:14px;text-decoration:none;letter-spacing:.01em
}
html .finder-weiter:hover{filter:brightness(.92)}
html .finder-weiter:focus-visible{outline:3px solid #947000;outline-offset:3px}

/* Auswahl der Anbauteile als Bildkacheln.
   Vorgabe vom 17.09.2026: die Zusatzteile sollen klar zu sehen sein.
   Ein Auswahlfeld zeigt nichts und schneidet den Text ab, eine Kachel zeigt
   Teil, Bezeichnung, Länge und Artikelnummer auf einen Blick.
   Die Zubehörzeile ist ein Knopf und kein Ankreuzkästchen: ein Kästchen wäre
   24 Pixel hoch und damit unter der 44er Grenze dieser Seite. */
.teil-gruppe{margin-top:20px}
.teil-titel{
  margin:0 0 9px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gedaempft);
}
.teil-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.teil-karte{
  display:flex;flex-direction:column;align-items:stretch;gap:5px;
  padding:9px 10px 11px;min-width:0;text-align:left;cursor:pointer;
  border:1px solid var(--linie);border-radius:15px;background:var(--karte);
  font-size:12px;line-height:1.45;color:var(--tinte);
}
.teil-karte:hover{border-color:#b6bcc4}
.teil-karte[aria-pressed=true]{
  background:var(--glas-hell);border-color:var(--glas);
  box-shadow:inset 0 0 0 1px var(--glas);
}
.teil-bild{
  display:block;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#fdfdfe,#eef0f3);border:1px solid #e7e9ec;
}
.teil-bild svg{display:block;width:100%;height:auto}
.teil-karte[aria-pressed=true] .teil-bild{border-color:#bfc8d6}
.teil-name{font-weight:600;overflow-wrap:anywhere}
.teil-daten{color:var(--gedaempft);font-size:12px;overflow-wrap:anywhere}
.teil-marke{
  align-self:flex-start;padding:2px 8px;border-radius:999px;
  background:var(--glas-hell);color:#13294b;font-size:12px;font-weight:600;letter-spacing:.02em;
}
.optionen{margin-top:4px}
.zubehoer{margin-top:22px;padding-top:18px;border-top:1px solid var(--linie)}
.zubehoer-zeile{display:flex;gap:8px;align-items:stretch;min-width:0}
.zubehoer-zeile .teil-karte{flex:1;min-width:0}
.zubehoer-zeile input.menge{width:62px;flex:0 0 62px;text-align:center;margin-top:0;align-self:stretch}
.zubehoer .helper{margin-top:12px}
@media(max-width:540px){
  .teil-karten{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
  .teil-karte{padding:8px 9px 10px}
}

/* Ansicht "Beschläge": die gewählten Teile in ihrer eigenen Größe.
   Der Grund steht in app.mjs: ein Duschtürknopf ist 32 mm groß, die Scheibe
   1.000 mm breit. In der räumlichen Ansicht bleibt er ein Punkt, hier nicht. */
#teileboard{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-karte);
  padding:22px 22px 26px;min-height:530px;overflow:auto;
}
.teileboard-kopf{margin-bottom:18px}
.teileboard-kopf h3{font-size:19px;letter-spacing:-.01em;margin:6px 0 0;color:var(--tinte)}
.teileboard-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px}
.teileboard-teil{
  margin:0;border:1px solid var(--linie);border-radius:15px;overflow:hidden;background:var(--karte);
}
.teileboard-teil .teil-bild{border:0;border-radius:0;border-bottom:1px solid #e9ebee}
.teileboard-teil figcaption{display:flex;flex-direction:column;gap:3px;padding:11px 13px 13px}
.teileboard-teil strong{font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.teileboard-teil span{font-size:12px;color:var(--gedaempft);overflow-wrap:anywhere}
.teileboard-teil em{
  align-self:flex-start;margin-top:3px;padding:2px 8px;border-radius:999px;font-style:normal;
  background:var(--glas-hell);color:#13294b;font-size:12px;font-weight:600;
}
.teileboard-fuss{margin:18px 0 0;font-size:12px;line-height:1.7;color:var(--gedaempft)}
.teileboard-leer{margin:0;font-size:12.5px;line-height:1.8;color:var(--gedaempft);max-width:42ch}
@media(max-width:860px){
  #teileboard{padding:18px 16px 20px;min-height:430px}
  .teileboard-raster{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
}










/* Unter 540 px stand vorher auch beim aktuellen Schritt kein Name mehr: der
   Kunde sah nummerierte Kreise und sonst nichts. Der Name des Schrittes, in dem
   er steht, bleibt jetzt stehen; die uebrigen sind weiter nur Nummern, weil
   sechs Namen nebeneinander Querscrollen erzwingen wuerden und genau das die
   Regel horizontal-scroll verbietet. Was als Naechstes kommt, sagt der Fuss. */

@media(min-width:841px) and (max-width:1279px){
  /* In diesem Band hat auch die Knopfreihe unter der Ansicht zu wenig Platz;
     ohne das bricht sie in zwei Zeilen und schiebt das Bild nach oben. */
  .view-controls{gap:6px}
  .view-controls #left,.view-controls #right{padding:0 13px 0 11px;gap:6px}
}
/* Unter 980 px reicht der Platz auch dafuer nicht mehr: gemessen am
   19.09.2026 brach die Reihe bei 900 und 860 px in zwei Zeilen, und das war
   sie vorher nicht. Dann steht nur noch der Pfeil - der Knopf sagt, was er
   tut, weiterhin im aria-label und im Sprechblasentext. */
@media(min-width:841px) and (max-width:979px){
  .view-controls #left::after,.view-controls #right::after{display:none}
  .view-controls #left,.view-controls #right,
  .view-controls #zoom-raus,.view-controls #zoom-rein{padding:0;min-width:44px}
}








/* Weiter fuehrt nur weiter. Die goldene Flaeche bleibt dem Aufmaßblatt
   vorbehalten, sonst ist der Abschluss nicht mehr die Abschlusstat
   (Regel primary-action: eine Haupttat je Bildschirm). */


legend>span[hidden]{display:none}
/* Die Bildflaeche traegt jetzt dasselbe Verhaeltnis wie die Zeichnungen selbst.
   Vorher stand hier 160/98, waehrend jede Zeichnung in teile-svg.mjs mit
   viewBox 160 120 kommt. Eine SVG passt sich in den Kasten ein, statt ihn zu
   fuellen: die Zeichnung wurde also auf 98/120 herunterskaliert und gab 18
   Prozent der Kachelbreite ungenutzt ab. Bei Strichstaerken von 0,8 bis 1,3
   Einheiten faellt damit jedes feine Detail unter einen Bildpunkt - deshalb
   wirkten die Details schlecht dargestellt.
   Die Kachelspalte wird dadurch hoeher; der Dichtungsschritt wird darum unten
   im Kachelraster wieder eingefangen und nachgemessen. */
.teil-bild{aspect-ratio:160/120;display:flex}
.teil-bild svg{width:100%;height:100%}
/* Dieselbe Rechnung wie oben, nur war sie hier stehengeblieben: 160/104 gegen
   eine viewBox von 160 x 120 hiesz, dass die Zeichnung im Reiter Beschlaege
   13 Prozent der Kachelbreite ungenutzt abgab (gemessen 200 gezeichnete px in
   einer 231 px breiten Kachel). Ausgerechnet dort, wo seit dem 18.09.2026 die
   Beschlagzeichnungen mit ihren feinen Strichen stehen. */
.teileboard-teil .teil-bild{aspect-ratio:160/120}
/* Letzte Straffung, damit auch der Dichtungsschritt unter zwei Bildhoehen
   bleibt: engere Abstaende, kein zweiter Kachelrand.
   Am 18.09.2026 nachgezogen: die Bildflaeche traegt jetzt das volle Verhaeltnis
   160/120 der Zeichnungen, jede Kachelreihe ist dadurch rund 21 px hoeher.
   Damit der Dichtungsschritt trotzdem unter der gemessenen Grenze bleibt, wird
   die Hoehe hier zurueckgeholt - an Abstaenden, nicht an der Zeichnung. */
.teil-karten{gap:6px}
.teil-karte{padding:5px 8px 7px;gap:3px}
.teil-gruppe{margin-top:9px}
.zubehoer{margin-top:11px;padding-top:10px}
.teil-marke{margin-top:1px;padding:1px 7px}
.teil-titel{margin-bottom:4px}
.zubehoer .helper{margin-top:8px}
.teil-name{line-height:1.35}
.teil-daten{line-height:1.4}





/* Leerzustand mit Handlung statt nur mit Satz. */
.leerfall{
  margin-top:14px;padding:16px 16px 17px;border:1px dashed var(--linie);
  border-radius:15px;background:var(--glas-zart);
}
.leerfall p{margin:0 0 12px;font-size:12px;line-height:1.7;color:var(--gedaempft)}
.leerfall button{width:auto;padding-inline:20px;font-size:12px}

/* Lage der Bohrung: erscheint nur, wenn "Individuelle Bohrung" gewählt ist. */
.bohrung-kasten{
  margin-top:14px;padding:14px 15px 16px;border:1px solid var(--linie);
  border-radius:15px;background:var(--glas-zart);
}
.bohrung-kasten .fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.bohrung-kasten label{font-size:12px}
.bohrung-kasten .helper{margin-top:11px}
@media(max-width:540px){.bohrung-kasten .fields{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ---- Meldung am Feld selbst -------------------------------------------
   Bis zum 18.09.2026 verlangte das Overlay "die markierten Eingaben
   korrigieren", und markiert war nichts: die Feldpruefung sah nur, ob eine
   Zahl lesbar ist, nicht das Ergebnis von validate(). Die Meldung steht jetzt
   unter dem Feld, das sie meint, und ist ueber aria-describedby mit ihm
   verbunden. Farbe und Rahmen wie bei der mm/cm-Rueckfrage, damit nicht zwei
   Fehlersprachen nebeneinander stehen. */
.feld-fehler{
  margin:6px 0 0;padding:7px 10px;font-size:12px;line-height:1.6;
  background:#fdf2f2;border:1px solid #d9a3a3;color:#8a2f2f;
}
input[aria-invalid="true"]{border-color:#c06a6a}
.input:has(input[aria-invalid="true"]){border-color:#c06a6a}

/* Der Leerzustand des Reiters "Beschläge" traegt jetzt einen Knopf. Ohne
   eigene Regel stand er direkt am Satz und sah aus wie ein Absatzrest. */
.teileboard-leer{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.teileboard-leer p{margin:0;max-width:46ch}
.teileboard-leer button{width:auto;min-height:44px;padding:10px 18px}
/* Der Ausblick steht zurueckgenommen unter dem Befund: er sagt, was nach der
   Wahl kommt, und darf den Satz, der die Lage erklaert, nicht ueberstimmen. */
.teileboard-leer-was{
  padding-top:13px;border-top:1px solid var(--linie-zart);
  font-size:12px;line-height:1.7;color:var(--gedaempft);
}
/* Der Kasten misst 530 px, weil die raeumliche Szene so hoch ist und die
   Buehne beim Reiterwechsel nicht springen soll. Fuer drei Zeilen Text ist das
   eine halbe Bildschirmhoehe Leere - genau der Punkt von der Meideliste.
   Ist nichts zu zeigen, richtet sich der Kasten deshalb nach seinem Inhalt.
   Die Buehne springt dabei kleiner, und das ist der ehrlichere Zustand: hier
   steht wirklich noch nichts. */
.stage:has(.teileboard-leer) #teileboard{min-height:0}
@media(max-width:860px){
  .stage:has(.teileboard-leer) #teileboard{min-height:0}
}

/* Die Schraegecke hat zwei Masze und eine Seite. Derselbe Satzspiegel wie die
   uebrigen Konturfelder, damit sie nicht wie angeklebt wirken. */
#bevel-field{display:block}
#bevel-field .fields{margin-top:12px}

/* ---- Richtwert im Abschluss --------------------------------------------
   Die Zahl ist das, was jeder offene Wettbewerber zeigt und was hier bisher
   fehlte. Sie steht deshalb oben im Abschlussblock, vor den Downloads - aber
   bewusst ohne Gold: Gold traegt auf diesem Bildschirm das Aufmaszblatt, und
   ein Richtwert ist keine Abschlusstat. Ueberschrift, Betrag und Herkunft
   bilden eine Einheit; die Herkunftszeile ist nie wegzulassen, sonst wandert
   die Zahl als Zusage durch die Gegend. */
.preis{
  margin:0 0 18px;padding:16px 18px;
  background:#fff;border:1px solid var(--linie-zart);border-radius:14px;
}
.preis .eyebrow{margin:0}
.preis>strong{
  display:block;margin:6px 0 8px;font-size:26px;line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.preis .helper{margin:0 0 5px;font-size:12px;line-height:1.55}
.preis .helper:empty{display:none}
#preis-posten{margin-top:10px;font-size:12px}
#preis-posten summary{
  cursor:pointer;min-height:44px;display:flex;align-items:center;
  font-size:12px;color:var(--gedaempft);
}
#preis-posten[hidden]{display:none}
.preis-posten-zeile{
  display:flex;justify-content:space-between;gap:14px;
  padding:7px 0;border-top:1px solid var(--linie-zart);line-height:1.6;
}
.preis-posten-zeile strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.preis-posten-zeile em{font-style:normal;color:#7a5412}

/* Die vier Glasangaben gehoeren zusammen: aus ihnen entsteht der Richtwert.
   Sie stehen deshalb als eigene Gruppe im Maszschritt, nicht als vier lose
   Zeilen zwischen den Maszen. */
#glas-felder{margin-top:18px}
#glas-felder .fields+.fields{margin-top:9px}
/* G3 24.09.2026 (Befund 25): zwei Auswahlfelder nebeneinander nur, wenn die längste Angabe hineinpasst
   ("ESG getönt satiniert grau", "Normal, mit Grünstich"); in der schmalen Spalte stehen sie untereinander. */
#glas-felder .fields{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
#glas-felder select{margin-top:7px}

/* ---- 18. Produktauswahl als Einstieg ------------------------------------
   Im Shop beginnt der Kunde bei einem Produkt mit Bild und ab-Preis. Deshalb
   ist der Einstieg hier eine Kachelwand, kein Dreierknopf. Neun Kacheln, drei
   je Reihe: sieben Duschgläser aus dem Shop, Küchenrückwand, begehbares Glas.
   Das Bild trägt die Erkennung, der Preis die Entscheidung, die Unterzeile
   sagt in einem Halbsatz, wofür das Produkt steht.
   ------------------------------------------------------------------------ */
/* finder.mjs haengt seinen Abschnitt zur Laufzeit mit ziel.before() vor
   nav.products - und das steht jetzt in diesem Kasten. Ohne Reihenfolge stuende
   der Produktfinder zwischen der Ueberschrift "Welches Glas brauchen Sie?" und
   den Kacheln, mitten in der Auswahl. Sein eigener Kommentar sagt "oberhalb der
   Produktauswahl"; genau dorthin setzt ihn order:0. So bleibt finder.mjs
   unangetastet und beide stehen richtig. */
html .katalog{margin-bottom:20px;display:flex;flex-direction:column}
html .katalog>*{order:9}
html .katalog>.finder{order:0;margin-bottom:22px}
html .katalog>.katalog-kopf{order:1}
html .katalog>.products{order:2}
html .katalog>#katalog-leer{order:3}
html .katalog>#katalog-fuss{order:4}
html .katalog>#katalog-anfrage{order:5}
html .katalog-kopf{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:14px;
}
html .katalog-kopf h2{font-size:25px;line-height:1.2}
html .katalog-kopf .eyebrow{margin-bottom:6px}
html .katalog-suche{display:flex;flex-direction:column;gap:6px;min-width:250px}
html .katalog-suche>span{font-size:12px;letter-spacing:.08em;color:var(--gedaempft);text-transform:uppercase}
html .katalog-suche input{
  min-height:46px;padding:0 14px;border-radius:var(--r-feld);
  border:1px solid var(--linie);background:var(--karte);font-size:14px;
}
html .katalog-suche input:focus-visible{border-color:var(--glas);outline:2px solid var(--glas);outline-offset:1px}

/* Die Kachel selbst. Bild oben, Text darunter, Preis als letzte Zeile - der
   Blick läuft genauso, wie entschieden wird. */
html .products{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin-bottom:0}
html .products button{padding:0;overflow:hidden;display:flex;flex-direction:column}
html .products button[hidden]{display:none}
html .products .kachel-bild{
  display:block;min-width:0;width:100%;aspect-ratio:16/11;max-height:190px;
  background:var(--glas-hell);border-bottom:1px solid var(--linie-zart);
  position:relative;overflow:hidden;
}
html .products .kachel-bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Kein Bild: statt eines kaputten Symbols das Zeichen der Einbausituation,
   mittig und ruhig. Die Kachel bleibt in jedem Fall vollständig bedienbar. */
html .products .kachel-bild-ersatz{display:grid;place-items:center}
html .products .kachel-bild-ersatz svg{width:58%;height:58%;opacity:.7}
/* Die alte Regel .products button>span faerbte den ersten Span gruen und gab
   ihm Sperrschrift - sie galt der Nummer "01" der drei Familienknoepfe. Hier
   traegt der erste Span das Bild und der zweite den Text, also wird beides
   zurueckgenommen. Gruen bleibt allein der Preis. */
html .products .kachel-bild,html .products .kachel-text{
  color:var(--tinte);letter-spacing:normal;font-size:inherit;font-weight:400;
}
html .products .kachel-text{
  display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto;
  padding:13px 15px 15px;text-align:left;
}
html .products .kachel-text strong{font-size:14px;line-height:1.35;font-weight:600}
html .products .kachel-text small{
  display:block;font-weight:400;font-size:12px;line-height:1.5;
  color:var(--gedaempft);margin:0;
}
html .products .kachel-preis{
  font-size:13px;font-weight:600;color:var(--glas);
  font-variant-numeric:tabular-nums;margin-top:auto;padding-top:5px;
}
html .products .kachel-preis:empty{display:none}
html .products button[aria-pressed=true] .kachel-text{color:#fff}
html .products button[aria-pressed=true] .kachel-text small,
html .products button[aria-pressed=true] .kachel-preis{color:#d5dfef}
html .products button[aria-pressed=true] .kachel-bild{border-bottom-color:rgba(255,255,255,.2)}

html .katalog-leer{
  margin-top:12px;padding:14px 16px;border-radius:14px;
  background:var(--karte);border:1px dashed var(--linie);
  font-size:13px;color:var(--gedaempft);
}
html .katalog-fuss{margin-top:12px}
html .katalog-fuss:empty{display:none}
/* Ein Produkt, das dieser Konfigurator nicht rechnet, endet nicht in einer
   Fehlermeldung, sondern in einem Weg: Kundentext plus Knopf zu den
   Kontaktdaten. Von dort geht nichts hinaus. */
html .katalog-anfrage{
  margin-top:14px;padding:16px 18px;border-radius:16px;
  background:var(--karte);border:1px solid var(--gold);
  box-shadow:var(--tiefe-karte);
}
html .katalog-anfrage p{font-size:13.5px;line-height:1.65;margin-bottom:12px}
html .katalog-anfrage button{width:auto;min-width:230px;min-height:44px}

/* ---- 19. Der mitlaufende Richtwert ---------------------------------------
   Er steht als Erstes in der Eingabespalte und bleibt beim Rollen oben
   kleben, also dort, wo entschieden wird. Vorher stand die Zahl nur unten im
   Abschlussschritt: 640 px zu weit unten, am Handy 2.500 px.
   Kein Gold: Gold trägt auf diesem Bildschirm das Aufmaßblatt. Ein Richtwert
   ist keine Abschlusstat und soll auch nicht wie eine aussehen.
   ------------------------------------------------------------------------ */
html .preis-leiste{
  position:sticky;top:0;z-index:5;
  margin:0 -26px 11px;padding:9px 26px 9px;
  background:var(--glas-zart);border-bottom:1px solid var(--linie);
  backdrop-filter:saturate(1.4) blur(6px);
}
html .preis-leiste[hidden]{display:none}
html .preis-leiste-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
html .preis-leiste-zahl{min-width:0}
html .preis-leiste-zahl .eyebrow{margin:0}
html .preis-leiste-zahl>strong{
  display:block;margin:2px 0 1px;font-size:23px;line-height:1.15;
  font-variant-numeric:tabular-nums;
}
html .preis-leiste-was{display:block;font-size:12px;line-height:1.5;color:var(--gedaempft)}
html .preis-leiste-mehr{
  /* 44 px ist die kleinste Flaeche, die auf dem Schirm sicher zu treffen ist.
     Die Pruefliste misst sie, und ein Knopf, der die Zahl erklaert, ist kein
     Ort zum Sparen. */
  flex:0 0 auto;width:auto;min-height:44px;padding:0 14px;
  border:1px solid var(--linie);background:var(--karte);border-radius:999px;
  font-size:12px;color:var(--gedaempft);
}
html .preis-leiste-mehr:hover{background:#eef2f7;border-color:#bfc9d9}
/* Was nicht drin ist, steht immer da. Kein Aufklappen, kein Sternchen: der
   Beschlag ist der größte Einzelposten, den dieser Betrag nicht enthält. */
html .preis-leiste-nicht{
  margin:6px 0 0;font-size:12px;line-height:1.5;font-weight:600;color:#7a5412;
}
html .preis-leiste-nicht:empty{display:none}
html .preis-leiste-auf{margin-top:11px;border-top:1px solid var(--linie-zart);padding-top:10px}
html .preis-leiste-auf[hidden]{display:none}
/* Aufgeklappt klebt die Leiste nicht mehr.
   Gemessen am 19.09.2026 bei 1440 px: zugeklappt ist sie 96 px hoch, mit der
   Aufschlüsselung je Scheibe wächst sie auf ein Mehrfaches - und weil sie oben
   klebt, schiebt sich beim Rollen genau die Scheibenumschaltung darunter, also
   der Umschalter, dessen Beträge sie gerade erklärt. Der Kunde liest "Scheibe B
   327,96" und kann Scheibe B nicht anklicken.
   Aufgeklappt ist die Leiste ein Text zum Lesen, kein Wert zum Mitlaufen:
   position:static lässt sie die Seite nach unten schieben statt sie zu
   überdecken. Zugeklappt bleibt alles, wie es war. */
html .preis-leiste.preis-leiste-offen{position:static;max-height:none;overflow:visible}

/* Der Abstand, den eine klebende Leiste ueber jedem Rollziel freilassen musz.
   --leiste-hoehe kommt gemessen aus app.mjs (leistePlatz) und ist 0, solange
   die Leiste nichts ueberdeckt. Die 14 px darueber sind eine reine
   Darstellungskonstante: Luft, damit das Feld nicht an der Leiste klebt.
   Warum ueberhaupt: ein Klick im Schrittband rollt das Feld an den oberen
   Rand, und dort stand die Leiste davor. Gemessen am 19.09.2026 traf ein Klick
   auf die Mitte der Scheibenkacheln bei 1366x768, 1280x720 und 1024x768 die
   Leiste statt der Kachel - der Kunde konnte seine zweite Scheibe nicht
   waehlen, und das ist die Stelle, an der aus einer Scheibe eine Dusche wird.
   Die Regel gilt fuer alles, was der Browser selbst anspringt: Schrittfelder,
   der Scheibenumschalter und jedes Bedienelement der Eingabespalte, das ueber
   die Tastatur den Fokus bekommt. */
html [data-kschritt],
html .scheiben-wahl,
html .config .angebot,
html .config input,
html .config select,
html .config button,
html .config a{scroll-margin-top:calc(var(--leiste-hoehe,0px) + 14px)}
html .preis-leiste-auf .helper{margin:0 0 7px;font-size:12px;line-height:1.6}
html .preis{padding:12px 14px}
html .preis>strong{margin:3px 0 5px;font-size:17px}
html .preis .helper{font-size:12px;line-height:1.5}
html #preis-posten{margin-top:7px}
html .preis-leiste-auf .helper:empty{display:none}
html .leiste-scheiben:not(:empty){margin-bottom:9px}
html .leiste-scheiben .preis-posten-zeile:first-child{border-top:0}
html .preis-scheibe-kopf{
  margin:10px 0 0;font-size:12px;font-weight:600;color:var(--glas);
}

/* ---- 20. Die Scheiben dieser Dusche --------------------------------------
   Eine Eckdusche hat zwei Scheiben, eine U-Form drei. Jede bekommt ihr
   eigenes Maß, der Umschalter holt sie ins Formular. */
html .scheiben-wahl{display:grid;grid-auto-flow:column;gap:8px;margin:0 0 14px}
html .scheiben-wahl[hidden]{display:none}
html .scheibe-knopf{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-height:44px;padding:10px 12px 11px;border-radius:var(--r-feld);
  border:1px solid var(--linie);background:var(--karte);text-align:left;
}
html .scheibe-knopf strong{font-size:12px;font-weight:600;line-height:1.3}
html .scheibe-knopf span{font-size:12px;color:var(--gedaempft);font-variant-numeric:tabular-nums}
html .scheibe-knopf:hover{background:#eef2f7;border-color:#bfc9d9}
html .scheibe-knopf[aria-pressed=true]{background:var(--glas);border-color:var(--glas);color:#fff}
html .scheibe-knopf[aria-pressed=true] span{color:#d5dfef}
html #scheiben-hinweis[hidden]{display:none}

/* ---- 21. Abschluss: Zusammenfassung und Kontakt -------------------------- */
html .config-heading{padding-bottom:12px}
html .config-heading h2{font-size:21px}
html .config-heading>p:last-child{margin-top:6px}
html .angebot{
  margin-top:14px;padding:16px;border-radius:18px;
  background:var(--karte);border:1px solid var(--linie);
}
html .angebot h3{font-size:18px;line-height:1.3;margin:4px 0 12px}
html .abschluss-karte{
  padding:12px 14px 11px;border-radius:14px;margin-bottom:13px;
  background:var(--glas-zart);border:1px solid var(--linie-zart);
}
html .abschluss-liste{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
html .abschluss-liste>div{
  display:flex;justify-content:space-between;gap:10px;
  padding:4px 0;border-top:1px solid var(--linie-zart);
}
html .abschluss-liste>div:nth-child(-n+2){border-top:0}
html .abschluss-liste dt{font-size:12px;line-height:1.4;color:var(--gedaempft);flex:0 0 auto;max-width:50%}
html .abschluss-liste dd{
  font-size:12px;line-height:1.4;text-align:right;font-variant-numeric:tabular-nums;
  min-width:0;overflow-wrap:anywhere;
}
html .abschluss-liste dd.code{font-weight:700;letter-spacing:.1em}
html #abschluss-nicht{margin:9px 0 0;font-size:12px;line-height:1.6}
html .angebot-weg{margin:0 0 13px;font-size:12.5px;line-height:1.7}
/* G3 24.09.2026 (Befund 25): Im Fließtext ohne die 10 px Innenabstand des großen Code-Felds, sonst überdeckt
   der Hintergrund die Zeile darüber. */
html .angebot-weg .code{font-size:13px;padding:1px 6px;border-radius:0;letter-spacing:.08em;line-height:inherit}
html .kontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:0 14px}
html .kontakt-zeile{margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--gedaempft)}
html .kontakt-zeile span{font-weight:600;color:var(--tinte)}
/* Beschriftung oben, darunter Angabe und Kopierknopf in einer Zeile. Vorher
   stand die Beschriftung daneben, und Angabe und Knopf brachen darum herum um -
   drei Zeilen fuer zwei Angaben. */
html .kontakt>div{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:7px 0;border-top:1px solid var(--linie-zart);
}
html .kontakt>div{border-top:0}
html .kontakt dt{flex:0 0 auto;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--gedaempft)}
html .kontakt dd{
  width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:12.5px;min-width:0;overflow-wrap:anywhere;
}
html .kontakt dd>span{font-weight:600}
/* W11 (24.09.2026): Telefon und E-Mail sind Verweise (tel:, mailto:), so wie im
   Fußbereich; der Kopierknopf daneben bleibt für alle, die lieber selbst tippen. */
html .kontakt dd>a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--tinte);text-underline-offset:3px}
html .kontakt dd button{width:auto;min-height:44px;padding:0 11px;font-size:12px;flex:0 0 auto}
html #kontakt-status{margin-top:10px}
html #kontakt-status:empty{display:none}

@media(max-width:1180px){
  html .products{grid-template-columns:repeat(auto-fill,minmax(182px,1fr))}
}
@media(max-width:850px){
  html .products{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  html .preis-leiste{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
}
@media(max-width:620px){
  html .katalog-kopf{align-items:stretch}
  html .katalog-suche{min-width:0;width:100%}
  html .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  html .products .kachel-text{padding:11px 12px 13px}
  html .products .kachel-text strong{font-size:13px}
  html .scheiben-wahl{grid-auto-flow:row}
  /* Auf dem Handy steht die Eingabespalte unter der Ansicht. Oben kleben
     hieße: hinter dem Ansichtsfeld, und sticky am unteren Rand trägt nicht,
     weil die Leiste am Anfang ihres Kastens steht - gemessen am 19.09.2026:
     sie verschwand nach oben aus dem Bild. Deshalb liegt sie hier fest am
     unteren Bildrand. Der Testkunde fand den Preis am Handy 2.500 px vom
     Maßfeld entfernt; jetzt steht er beim Tippen immer darunter.
     body bekommt denselben Platz als Polster, damit die Leiste nichts
     verdeckt, was der Kunde noch braucht. */
  html .preis-leiste{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;
    margin:0;padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--linie);border-bottom:0;border-radius:0;
    background:var(--karte);box-shadow:0 -10px 26px -16px rgba(10,22,40,.7);
    max-height:72vh;overflow:auto;
  }
  /* G3, 24.09.2026: Hier stand html body{padding-bottom:148px}, auch auf finder.html ohne Leiste; darunter
     blieb ein heller Streifen in der Seitenfarbe (Befund "Leerstreifen unter dem Fuß"). Das Polster setzt
     leistePlatz() in app.mjs ohnehin passend zur Leiste als style am body; die Farbe steht unten. */
  html .preis-leiste-zahl>strong{font-size:23px}
  html .preis-leiste-auf{max-height:42vh;overflow:auto}
  html .abschluss-liste,html .kontakt{grid-template-columns:1fr}
  /* 24.09.2026: stand auf 88 px Breite aus der Zeit, als die Beschriftung neben der Angabe stand;
     seit die Spalte senkrecht läuft, wurden daraus 88 px Höhe und ein Loch unter "TELEFON". */
  html .kontakt dt{flex:0 0 auto}
  html .abschluss-liste>div:nth-child(2),html .kontakt>div:nth-child(2){border-top:1px solid var(--linie-zart)}
  html .angebot,html .abschluss-karte{padding:15px}
}
@media(max-width:420px){
  html .products{grid-template-columns:1fr}
}

/* legend>span ist weiter oben die runde Schrittmarke, 25 px im Durchmesser.
   Seit der Scheibenname in der Beschriftung steht, traf diese Regel auch ihn:
   "Maße der Scheibe A · Festteil" stand am 19.09.2026 auf dem Handy in einem
   55 px schmalen Kreis, ueber fuenf Zeilen gebrochen. Der Name ist Fliesztext. */
html legend>span#masse-legende{
  display:inline;width:auto;height:auto;margin:0;vertical-align:baseline;
  border-radius:0;background:none;color:inherit;font-size:inherit;
  font-weight:inherit;letter-spacing:inherit;
}

/* ---- Zwei Preise, zwei Namen ---------------------------------------------
   Die Kachel zeigt den ab-Preis des Shops, die Leiste den gerechneten
   Richtwert. Beide trugen bis zum 19.09.2026 nur das Wort "ab" und standen am
   Handy gleichzeitig im Bild. Die Kachel bekommt deshalb eine Zeile darueber,
   die sagt, wessen Zahl das ist; die Zahl selbst bleibt die kraeftige.
   Woran es liegt, dass sie auseinanderliegen, steht an der Leiste und kommt
   aus der Rechnung. */
html .products .kachel-preis-wort{
  display:block;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gedaempft);
  margin-top:auto;padding-top:5px;
}
/* Steht das Wort davor, traegt es den Abstand nach oben - sonst stuenden zwei
   Abstaende uebereinander und die Zahl haenge nicht mehr am Fusz der Kachel. */
html .products .kachel-preis-wort+.kachel-preis{margin-top:0;padding-top:0}
html .products button[aria-pressed=true] .kachel-preis-wort{color:#bccade}
/* Eine Luecke im Datenbestand, vor dem Klick sichtbar: zu Walk-in, U-Form und
   Fuenfeck gibt Bohle kein Aufmaszblatt heraus, die Beschlagauswahl ist dort
   leer. Gedaempft und klein - es ist ein Hinweis, keine Warnung. */
html .products .kachel-offen{
  display:block;font-size:12px;line-height:1.45;color:var(--gedaempft);
  margin-top:auto;padding-top:6px;
}
/* Marke, Wort und Zahl sind ein Block am Fusz der Kachel. Den Abstand nach
   oben traegt immer nur das oberste der drei, sonst reiszt die Gruppe
   auseinander und die Marke haengt an der Unterzeile statt am Preis. */
html .products .kachel-offen+.kachel-preis-wort{margin-top:0;padding-top:4px}
html .products button[aria-pressed=true] .kachel-offen{color:#cfd8e6}

/* Der Vergleich ab-Preis gegen Richtwert. Zugeklappt steht dort der eine Satz,
   der den Widerspruch benennt; aufgeklappt stehen die Gruende. Kein Kasten in
   Warnfarbe: es ist kein Fehler, sondern eine offene Frage an Oberkersch. */
html .preis-abvergleich{
  margin-top:8px;border-top:1px solid var(--linie-zart);padding-top:8px;
}
html .preis-abvergleich[hidden]{display:none}
html .preis-abvergleich>summary{
  /* 44 px hoch treffbar, auch wenn der Satz nur eine Zeile braucht. */
  display:list-item;cursor:pointer;list-style-position:outside;
  /* W16 (24.09.2026): gemessen waren 32 px, jetzt wirklich 44 px. */
  padding:12px 0;min-height:44px;box-sizing:border-box;
  font-size:12px;line-height:1.55;color:var(--tinte);
}
html .preis-abvergleich>summary::marker{color:var(--glas)}
html .preis-abvergleich>summary:hover{color:var(--glas-tief)}
html .preis-abvergleich .eyebrow{margin:4px 0 6px}
html .abvergleich-zeile{
  margin:0 0 6px;font-size:12px;line-height:1.6;color:var(--gedaempft);
}
html .abvergleich-zeile:last-child{margin-bottom:2px}
html .abvergleich-abpreis,html .abvergleich-richtwert{color:var(--tinte)}
html .abvergleich-warnung{color:#7a5412;font-weight:600}

/* Die Kantenbearbeitung bewegt den Betrag mehr als jedes andere Feld. Die
   Spanne steht deshalb am Feld und nicht nur in der Aufstellung ganz unten. */
html .kante-hinweis{
  margin:2px 0 10px;padding:9px 11px;border-radius:10px;
  background:var(--glas-zart);border:1px solid var(--linie-zart);
  font-size:12px;line-height:1.6;color:var(--gedaempft);
}
html .kante-hinweis[hidden]{display:none}

/* Beim Verkleinern der Scheibenzahl: was abgelegt wurde und wiederkommt. */
html .scheiben-ablage{
  margin:0 0 10px;padding:9px 11px;border-radius:10px;
  background:var(--glas-hell);border:1px solid var(--linie-zart);
  font-size:12px;line-height:1.6;color:var(--tinte);
}
html .scheiben-ablage[hidden]{display:none}

/* ---- 24. Der eine Weg ----------------------------------------------------
   Stand 19.09.2026. Vorgabe: alles in einer Konfiguration, durch die man
   gefuehrt wird, und trotzdem stehen alle bestehenden Produkte darin.

   Bis dahin standen neun Produktkacheln VOR der Konfiguration. Jetzt fuehrt
   die Konfiguration, und das Produktverzeichnis steht darunter. Diese Regeln
   kleiden die zwei neuen Schritte und die drei Tueren, die von auszen direkt
   in den Katalog fuehren.

   Warum die Knoepfe von Schritt 01 und 02 dieselbe Klasse .situations tragen
   wie vorher die sechs Einbausituationen: das Raster ist ueber alle zwanzig
   Breiten von 320 bis 1920 px schon gemessen. Eine zweite Rasterklasse waere
   eine zweite Messreihe. */

/* Die Knoepfe tragen jetzt Text statt nur eines Zeichens: Titel, Unterzeile
   und - im Bauformschritt - den ab-Preis des Shops. Deshalb brauchen sie mehr
   Mindestbreite als die 88 px, die fuer ein Zeichen reichten. min() haelt das
   Raster auch dann einspaltig, wenn der Platz wirklich schmaler ist als die
   Mindestbreite; sonst schoebe die Spalte die Seite seitlich auf. */
html #vorhaben-wahl,html #situations{
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px;
}
html #vorhaben-wahl button,html #situations button{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:12px 13px 13px;text-align:left;min-height:64px;
}
html #vorhaben-wahl button strong,html #situations button strong{
  font-size:13.5px;line-height:1.3;font-weight:600;color:var(--tinte);
}
html #vorhaben-wahl button small,html #situations button small{
  font-size:12px;line-height:1.45;color:var(--gedaempft);font-weight:400;
}
html #situations button svg{
  width:100%;height:auto;margin-bottom:4px;border-radius:9px;
}
/* Preiswort und Preis wortgleich zur Kachel im Produktverzeichnis. Sie stehen
   am Fusz des Knopfes, damit die Zeile auch dann die letzte bleibt, wenn der
   Vorbehalt zur Fuenfeck-Schraege darueber dazukommt. */
html #situations button .kachel-preis-wort{
  margin-top:auto;padding-top:6px;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gedaempft);font-weight:600;
}
html #situations button .kachel-preis{
  font-size:13px;font-weight:600;color:var(--glas);font-variant-numeric:tabular-nums;
}
html #situations button .bauform-offen{
  margin-top:6px;font-size:12px;line-height:1.4;color:var(--gold,#8a6d2f);font-weight:600;
}
html #situations button[aria-pressed=true] strong{color:var(--tinte)}
html #situations button[aria-pressed=true] .kachel-preis{color:#122747}

/* Die Herkunftszeile unter dem Bauformraster. Sie sagt, wessen Zahlen ueber
   den Knoepfen stehen und was daran unsere Ableitung ist - der Beleg steht in
   duschen.json unter ableitung_scheibenzahl. */
html #bauform-ableitung,html #vorhaben-vorzeile{margin-top:10px}
html #bauform-grund,html #vorhaben-grund,html #vorhaben-offen{margin-top:8px}
html #bauform-grund:empty,html #vorhaben-grund:empty,html #vorhaben-offen:empty,
html #glas-bohrung-hinweis:empty{display:none}

/* ---- Tuer 2: das Suchfeld im Kopf der Konfiguration ------------------- */
/* Das Suchfeld steht NEBEN der Ueberschrift, nicht darunter.
   Der Grund ist gemessen, nicht gestalterisch: die Konfigurationsspalte wird
   an jedem einzelnen Schritt gemessen (pruefe-schritte, Grenze 2.200 px), und
   dieser Kopf steht ueber jedem davon. Gestapelt kostete das Feld 82 px auf
   jedem Schritt, einzeilig darunter noch 54, daneben null - die Ueberschrift
   ist ohnehin zwei Zeilen hoch. Wird die Spalte zu schmal, bricht es von
   selbst unter die Ueberschrift um. */
html .config-heading{
  position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
html .config-heading>h2{flex:0 0 auto}
html .config-heading>p{flex:1 0 100%;order:3}
html .config-heading .katalog-suche{
  flex:1 1 240px;min-width:0;margin-top:0;
  flex-direction:column;align-items:stretch;gap:5px;
}
html .config-heading .katalog-suche>span{
  text-transform:none;letter-spacing:0;font-size:12px;
}
/* 44 px, nicht weniger: das ist die kleinste Flaeche, die auf dem Schirm
   sicher zu treffen ist, und pruefe.mjs misst sie auf fuenf Breiten. */
html .config-heading .katalog-suche input{min-width:0;min-height:44px}
html .config-heading .suche-treffer{flex:1 0 100%;order:4}
html .suche-treffer{
  display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:6px;
  background:var(--karte);border:1px solid var(--linie);border-radius:14px;
}
html .suche-treffer[hidden]{display:none}
html .suche-treffer button{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  width:100%;min-height:44px;padding:9px 12px;border-radius:10px;
  background:transparent;border:1px solid transparent;text-align:left;
}
html .suche-treffer button strong{font-size:13px;font-weight:600;color:var(--tinte)}
html .suche-treffer button .kachel-preis{
  font-size:12.5px;font-weight:600;color:var(--glas);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
html .suche-treffer button:hover,html .suche-treffer button:focus-visible{
  background:var(--glas-zart);border-color:var(--linie);
}

/* ---- Das Produktverzeichnis unter der Konfiguration ------------------- */
html .katalog-unter{
  margin-top:8px;font-size:12.5px;line-height:1.65;color:var(--gedaempft);max-width:52ch;
}

/* ---- Der Weg im Abschluss --------------------------------------------- */
/* Knapp gehalten: der Abschlussschritt ist der laengste der Strecke, und
   dieser Block steht zusaetzlich darin. */
html .abschluss-weg{margin-top:10px;border-top:1px solid var(--linie-zart);padding-top:10px}
html .abschluss-weg[hidden]{display:none}
html .abschluss-weg summary{
  font-size:12px;font-weight:600;color:var(--gedaempft);cursor:pointer;min-height:44px;
  display:flex;align-items:center;
}
html .abschluss-weg dl{margin-top:10px;display:flex;flex-direction:column;gap:10px}
html .abschluss-weg dt{font-size:12px;font-weight:600;color:var(--tinte)}
html .abschluss-weg dd{font-size:12px;line-height:1.7;color:var(--gedaempft);margin:2px 0 0}
html .abschluss-weg ul{margin:10px 0 0;padding-left:18px}
html .abschluss-weg li{font-size:12px;line-height:1.7;color:var(--gedaempft)}
html .abschluss-weg ul:empty{display:none}

@media(max-width:540px){
  /* Am Handy ist ein zweispaltiges Raster mit Titel, Unterzeile und Preis in
     jeder Zelle nicht mehr lesbar: gemessen bei 320 px bleiben je Spalte
     knapp 130 px, und der ab-Preis bricht mitten im Betrag um. */
  html #vorhaben-wahl,html #situations{grid-template-columns:1fr}
  html #situations button svg{max-height:120px;object-fit:contain}
}

/* Gestaltungsüberarbeitung 20.09.2026: klare Werkzeuge und ruhiger Seitenrhythmus. */
#scene{touch-action:none}
#scene canvas{cursor:grab}
#scene canvas:active{cursor:grabbing}
#scene canvas:focus-visible{outline:3px solid #244576;outline-offset:-4px}
html .szene-unterschrift{font-size:13px;line-height:1.6;padding:12px 16px}
.szene-werkzeuge{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;background:#f1f3f5;border-top:1px solid #ced3db}
.szene-werkzeuge[hidden]{display:none}
.szene-werkzeuge button{min-height:44px;padding:8px 13px;border:1px solid #b5bdc8;border-radius:8px;background:#fff;color:#19283f;font-size:12px;font-weight:600}
.szene-werkzeuge button:hover{background:#e0e5ec}
.szene-werkzeuge button[aria-pressed=true]{background:#1f3b66;color:#fff;border-color:#1f3b66}
.szene-werkzeuge button:disabled{opacity:.55;cursor:default}
.szene-bedienhilfe{flex-basis:100%;font-size:12px;line-height:1.5;color:#4b5360;margin:0}
html .view-controls button{background:#edf0f5;color:#15253d;border-color:#edf0f5;border-radius:10px;font-weight:600}
html .view-controls button:hover{background:#fff;border-color:#fff}
html .view-controls #left::before,html .view-controls #right::before,html .view-controls #zoom-raus::before,html .view-controls #zoom-rein::before{filter:brightness(0) saturate(100%);width:24px;height:24px;background-size:24px}
html .view-controls #reset{font-size:12px}
html .visual-note{font-size:12px;line-height:1.65}





html .katalog{margin-top:44px;margin-bottom:28px;padding-top:28px;border-top:1px solid var(--linie)}
html .products{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
html .products .kachel-bild{max-height:220px;aspect-ratio:16/9}
html .products .kachel-text{padding:16px 18px 18px}
html .products .kachel-text strong{font-size:16px}
html .products .kachel-text small{font-size:13px}
html .products .kachel-preis{font-size:14px;padding-top:12px}
html .katalog-unter{font-size:14px;max-width:65ch}
@media(max-width:850px){html .products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.szene-werkzeuge{gap:6px;padding:10px}.szene-werkzeuge button{flex:1 1 auto;padding:8px;font-size:12px}html .szene-unterschrift{font-size:12px;padding:11px 12px}html .view-controls #left::after,html .view-controls #right::after{display:inline;font-size:12px}html .view-controls #left,html .view-controls #right{padding:0 9px;gap:5px}html .katalog{margin-top:28px}}
@media(max-width:420px){html .products{grid-template-columns:1fr}}

/* Technische Produktabbildungen vollständig zeigen, statt Teilansichten abzuschneiden. */
html .products .kachel-bild{background:#fff}
html .products .kachel-bild img{object-fit:contain;padding:10px}

/* ---- 21. Eine Spalte zum Rollen, eine, die stehen bleibt -----------------
   Vorgabe vom 22.09.2026 zum Schrittassistenten: die Schritte heraus,
   rechts zum Rollen, links fest.

   position:sticky steht an der linken Spalte seit dem 16.09.2026, getragen
   hat es trotzdem nicht: sticky haelt nur, was kuerzer ist als das Fenster.
   Die Buehne stand fest auf 530 px, dazu kommen Kopf, Reiter, Knopfreihe,
   Maszzeile und Fuszsatz. Auf einem 900 px hohen Fenster war die Spalte
   damit hoeher als der Schirm, klebte mit dem Kopf oben fest und schob ihr
   unteres Ende dauerhaft aus dem Bild. Deshalb rechnet die Buehne jetzt mit
   der Fensterhoehe statt mit einer festen Zahl.

   Der Abzug von 340 px ist gemessen und nicht geschaetzt, siehe
   tests/pruefe-spalten.mjs: dort faellt der Lauf durch, sobald die linke
   Spalte hoeher wird als das Fenster. */
@media(min-width:851px){
  /* Gemessen am 22.09.2026 auf 1440 x 900: alles auszer der Buehne braucht in
     der linken Spalte 500 px (Kopf 70, Reiter 52, Werkzeugreihe und
     Bildunterschrift in der Buehne 162, Knopfreihe 68, Maszzeile 60,
     Fuszsatz 50, Polster 24). 530 px Abzug lassen die 18 px fuer den Abstand
     nach oben und etwas Luft, wenn die Bildunterschrift zweizeilig wird. */
  #scene{height:clamp(240px,calc(100vh - 530px),530px);min-height:0}
  /* Die beiden anderen Reiter tragen dieselbe Hoehe, sonst waechst die Spalte
     beim Umschalten ueber das Fenster hinaus und das Stehenbleiben endet
     genau dort. Beide rollen dann in sich statt die Seite zu verlaengern. */
  #drawing,#teileboard{height:clamp(240px,calc(100vh - 530px),530px);min-height:0;overflow:auto}
  #drawing{align-items:flex-start}
  #drawing svg{max-width:100%;height:auto}
}

/* Die lange Eingabespalte braucht Fugen: ohne Trennlinie zwischen den
   Bloecken liest sie sich als ein Teig, und die Ueberschrift des naechsten
   Abschnitts geht im Hilfetext des vorigen unter. */
.config fieldset+fieldset{border-top:1px solid var(--linie);margin-top:10px;padding-top:22px}

/* Der kurze Weg: fuer Walk-in, U-Form und Fuenfeck gibt Bohle kein Blatt
   heraus, also entfallen zwei Bloecke ganz. Ohne ein Wort dazu sieht das aus,
   als fehlte etwas. */
.weg-hinweis{
  margin:0 0 18px;padding:11px 13px;border-radius:var(--r-feld);
  background:var(--glas-hell);color:#13294b;font-size:12.5px;line-height:1.6;
}

/* Der Weg in die Werkstattansicht (vorgang.mjs) stand bis zum 22.09.2026 im
   Block "Mitnehmen" und damit fast immer hinter einem anderen Schritt. Seit
   die Spalte alles gleichzeitig zeigt, ist er dauerhaft im Bild - und dann
   zaehlt auch sein Klickziel. Gemessen wurden 15 px, verlangt sind 44. */
.vorgang-fuss a{display:inline-flex;align-items:center;min-height:44px}

/* G3 24.09.2026 (Befund 25): Küchenrückwand und begehbares Glas zeigen eine Ansicht aus dem Konfigurator statt
   einer Isometrie auf Weiß. Die Ansicht füllt die Bildfläche, statt mit Rand im weißen Feld zu schwimmen. */
html .products button[data-product="kitchen"]:not([data-shop]) .kachel-bild img,
html .products button[data-product="floor"]:not([data-shop]) .kachel-bild img{object-fit:cover;padding:0}

/* G3 24.09.2026 (Befund "Leerstreifen unter dem Fuß"): Unter der festen Preisleiste hält body ein Polster in
   Leistenhöhe frei (leistePlatz in app.mjs). Es trägt jetzt die Farbe des Fußes statt der Seitenfarbe. */
html:has(#preis-leiste:not([hidden])){background:#d7dce3}
html:has(#preis-leiste:not([hidden])) body{background-clip:content-box}