/* Gestaltungsvorlage „Werkstatt" für wunsch3D.
   Wird vorerst nur von index.html geladen. Nach der Freigabe wandert das in style.css
   und gilt für alle Seiten.
   Schriften liegen lokal in web/fonts (Roboto Slab für Überschriften, Roboto für Text).
   Keine externe Quelle, die Seite funktioniert offline und per Doppelklick. */

@font-face {
  font-family: "Modell Slab";
  src: url("../fonts/robotoslab.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Modell Text";
  src: url("../fonts/roboto.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

:root {
  --papier: #f1f3f5;
  --papier-tief: #e4e8ec;
  --flaeche: #ffffff;
  --text: #1f262e;
  --text-leise: #5d6670;
  --linie: #dbe0e6;
  --akzent: #2f5d8c;
  --akzent-dunkel: #24496e;
  --olive: #53683d;
  --radius: 12px;
  --schatten: 0 1px 2px rgba(31, 38, 46, .05), 0 6px 18px rgba(31, 38, 46, .07);
  --vorschau: #e9edf1;
}

/* Dunkle Fassung. Wird über data-theme="dunkel" am <html>-Element geschaltet.
   color-scheme: dark sorgt dafür, dass auch die Auswahllisten des Browsers dunkel kommen. */
:root[data-theme="dunkel"] {
  color-scheme: dark;
  --papier: #22252a;
  --papier-tief: #2b2f35;
  --flaeche: #2b2f35;
  --text: #f0ece6;
  --text-leise: #a9a49c;
  --linie: #3b4049;
  --akzent: #c9743d;
  --akzent-dunkel: #ad5f2e;
  --olive: #8a9566;
  --schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .35);
  --vorschau: #1b1e22;
}
:root[data-theme="dunkel"] .eingaben input[type=number],
:root[data-theme="dunkel"] .eingaben select,
:root[data-theme="dunkel"] .eingaben textarea,
:root[data-theme="dunkel"] .eingaben input[type=text],
:root[data-theme="dunkel"] .eingaben input[type=search] {
  background: #1b1e22;
  color: var(--text);
  border-color: #454b55;
}
:root[data-theme="dunkel"] .eingaben input:focus,
:root[data-theme="dunkel"] .eingaben select:focus,
:root[data-theme="dunkel"] .eingaben textarea:focus {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(201, 116, 61, .22);
}
:root[data-theme="dunkel"] .ansicht-steuerung button {
  background: rgba(43, 47, 53, .92);
  color: var(--text-leise);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
:root[data-theme="dunkel"] .ansicht-steuerung button:hover:not(:disabled) { background: #343941; color: var(--text); }
:root[data-theme="dunkel"] button.zweit { color: var(--text); }
:root[data-theme="dunkel"] button.zweit:hover:not(:disabled) { background: #343941; }
:root[data-theme="dunkel"] .meldung.warnung { background: #4a3a16; color: #ffdf9e; }
:root[data-theme="dunkel"] .meldung.fehler { background: #4d2420; color: #ffc9c0; }
:root[data-theme="dunkel"] .meldung.erfolg { background: #1f3d26; color: #bfe6c7; }
:root[data-theme="dunkel"] .fuss .offen { color: #7d8691; }

/* Schalter für die Fassung */
.thema-schalter {
  font: inherit;
  font-size: .86rem;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--text-leise);
  cursor: pointer;
}
.thema-schalter:hover { color: var(--text); border-color: var(--text-leise); background: transparent; }
.marke svg { color: var(--akzent); }

body {
  font-family: "Modell Text", "Segoe UI", system-ui, sans-serif;
  background: var(--papier);
  color: var(--text);
  line-height: 1.55;
}

h1, h2, h3, .marke {
  font-family: "Modell Slab", Georgia, serif;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* ---------- Kopf ---------- */
.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding: 0;
}
.kopf-innen {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.kopf a.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  color: var(--text);
  text-decoration: none;
}
.marke .wort b { font-weight: 400; }
.marke .wort span { color: var(--akzent); }
.marke .zusatz {
  display: block;
  font-family: "Modell Text", sans-serif;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-top: 2px;
}
.kopf nav { display: flex; gap: 22px; flex-wrap: wrap; }
.kopf nav a {
  color: var(--text-leise);
  text-decoration: none;
  font-size: .95rem;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.kopf nav a:hover { color: var(--text); border-bottom-color: var(--akzent); }

main { max-width: 1180px; margin: 0 auto; padding: 0 24px 64px; }

/* ---------- Blickfang ---------- */
.blickfang {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
  padding: 60px 0 56px;
}
.blickfang h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin: 0 0 18px; }
.blickfang p.vorspann {
  font-size: 1.12rem;
  color: var(--text-leise);
  margin: 0 0 28px;
  max-width: 46ch;
}
.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; }
.knopf {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--akzent);
  font-size: 1rem;
}
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf.leise { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf.leise:hover { background: var(--flaeche); border-color: var(--text-leise); }

.blickfang figure {
  margin: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--schatten);
}
.blickfang figure img { display: block; width: 100%; height: auto; }
.blickfang figure svg { display: block; width: 100%; height: auto; padding: 18px; }

/* ---------- Karten ---------- */
.abschnitt { padding: 14px 0 10px; }
.abschnitt h2 { font-size: 1.6rem; margin: 0 0 6px; }
.abschnitt p.unter { color: var(--text-leise); margin: 0 0 24px; }

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.karte {
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--schatten);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.karte:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(31,38,46,.06), 0 12px 26px rgba(31,38,46,.11); }
.karte .bild {
  aspect-ratio: 16 / 10;
  background: var(--papier-tief);
  border-bottom: 1px solid var(--linie);
  display: grid;
  place-items: center;
  color: var(--olive);
}
.karte .bild svg { width: 58%; height: auto; }
.karte .text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.karte h3 { margin: 0; font-size: 1.12rem; }
.karte p { margin: 0; color: var(--text-leise); font-size: .95rem; }
.karte .fuss { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.marker {
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--olive);
  border: 1px solid var(--olive);
  border-radius: 999px;
  padding: 2px 10px;
}
.karte.bald { opacity: .72; }
.karte.bald .marker { color: var(--text-leise); border-color: var(--linie); }
.weiter { color: var(--akzent); font-size: .95rem; }

/* ---------- Ablauf ---------- */
.ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 8px; }
.ablauf .schritt { display: flex; gap: 14px; }
.ablauf .schritt .nr {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  display: grid; place-items: center;
  font-family: "Modell Slab", serif;
}
.ablauf .schritt h3 { margin: 4px 0 4px; font-size: 1.05rem; }
.ablauf .schritt p { margin: 0; color: var(--text-leise); font-size: .95rem; }

/* ---------- Hinweisband ---------- */
.band {
  margin-top: 46px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.band div strong { display: block; font-family: "Modell Slab", serif; font-weight: 400; margin-bottom: 2px; }
.band div span { color: var(--text-leise); font-size: .93rem; }

/* ---------- Fußbereich ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  margin-top: 56px;
}
.fuss-innen {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
  font-size: .92rem;
  color: var(--text-leise);
}
.fuss h4 { font-family: "Modell Slab", serif; font-weight: 400; color: var(--text); margin: 0 0 8px; font-size: 1rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 5px; }
.fuss a { color: var(--text-leise); }
.fuss .offen { color: #96a0ab; }

@media (max-width: 860px) {
  .blickfang { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 32px; }
  .fuss-innen { grid-template-columns: 1fr; }
  .kopf-innen { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- Generatorseiten ---------- */
.seitenkopf { padding: 24px 0 16px; max-width: 70ch; }
.seitenkopf h1 { font-size: clamp(1.6rem, 2.6vw, 2.05rem); margin: 0 0 6px; }
.seitenkopf .untertitel { color: var(--text-leise); margin: 0; font-size: 1.05rem; }

.generator { grid-template-columns: 400px 1fr; gap: 24px; }
/* Ein Feld je Zeile: im schmalen Formular werden sonst lange Auswahltexte abgeschnitten.
   Zahlenpaare (Breite/Höhe) bleiben nebeneinander. */
.eingaben .feldreihe { grid-template-columns: 1fr; gap: 0; }
.eingaben .feldreihe:has(input[type=number]) { grid-template-columns: 1fr 1fr; gap: 12px; }

/* Jede Gruppe steht in einem eigenen Rahmen, die Überschrift sitzt mit einer Schrittziffer
   auf der Rahmenlinie. */
.eingaben {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  counter-reset: stufe;
}
.eingaben fieldset {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 11px 16px 10px;
  margin: 0 0 12px;
  box-shadow: var(--schatten);
}
.eingaben fieldset:last-of-type { margin-bottom: 0; }
.eingaben legend {
  font-family: "Modell Slab", serif;
  font-weight: 400;
  font-size: .98rem;
  color: var(--text);
  /* float + volle Breite: die Überschrift steht im Rahmen statt auf der Rahmenlinie */
  float: left;
  width: 100%;
  margin: 0 0 9px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.eingaben fieldset > *:not(legend) { clear: both; }
.eingaben legend::before {
  content: counter(stufe);
  counter-increment: stufe;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: "Modell Text", "Segoe UI", sans-serif;
  font-size: .78rem;
}
.feld { gap: 3px; margin-bottom: 9px; }
.feld label, .feld .bez { font-size: .88rem; color: var(--text-leise); }
.eingaben input[type=number], .eingaben select, .eingaben textarea, .eingaben input[type=text] {
  padding: 7px 10px;
  border-radius: 8px;
  border-color: var(--linie);
  background: #fff;
}
.eingaben input:focus, .eingaben select:focus, .eingaben textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(47, 93, 140, .16);
}
.haken { font-size: .93rem; margin-bottom: 5px; }
.haken input { accent-color: var(--akzent); }

.ansicht {
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
#vorschau, #licht { background: var(--vorschau); }
/* Blicksteuerung liegt in der Vorschau, nicht bei den Knöpfen für Bestellung und Datei */
.ansicht-steuerung { position: absolute; top: 10px; right: 10px; z-index: 2; }
.ansicht-steuerung button {
  padding: 6px 13px;
  font-size: .82rem;
  background: rgba(255, 255, 255, .92);
  border-color: var(--linie);
  color: var(--text-leise);
  box-shadow: 0 1px 3px rgba(31, 38, 46, .10);
}
.ansicht-steuerung button:hover:not(:disabled) { background: #fff; color: var(--text); border-color: var(--text-leise); }
.ansicht-fuss { padding: 13px 18px 15px; background: var(--flaeche); }
.masse {
  font-family: "Modell Slab", serif;
  font-size: .98rem;
  margin-bottom: 8px;
  color: var(--text);
}
.meldung { border-radius: 8px; padding: 10px 12px; }
.meldung.warnung { background: #fdf2d6; color: #6b4e00; }
.meldung.fehler { background: #fbe0dd; color: #8a2b18; }

button {
  border-radius: 999px;
  padding: 8px 18px;
  background: var(--akzent);
  border-color: var(--akzent);
}
button:hover:not(:disabled) { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
button.zweit { background: transparent; color: var(--text); border-color: var(--linie); }
button.zweit:hover:not(:disabled) { background: var(--papier); border-color: var(--text-leise); }
.knoepfe { gap: 10px; }
.hinweis { font-size: .84rem; color: var(--text-leise); line-height: 1.45; margin-top: 6px; }

.reiter { background: var(--papier-tief); border-bottom: 1px solid var(--linie); }
.reiter button { border-radius: 0; background: transparent; color: var(--text-leise); padding: 11px 12px; }
.reiter button:hover:not(:disabled) { background: transparent; color: var(--text); }
.reiter button.aktiv { background: var(--flaeche); color: var(--akzent); border-bottom-color: var(--akzent); }

@media (max-width: 860px) {
  .generator { grid-template-columns: 1fr; }
  .seitenkopf { padding: 22px 0 16px; }
}

/* Link in einer Meldung, z. B. „Text kopieren" */
.meldung a.textlink { color: inherit; }
.meldung .textlink {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 2px;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  border-radius: 0;
}
.meldung .textlink:hover { background: none; opacity: .8; }

/* Akzentfarbe in Zeichnungen und Strichbildern, wechselt mit dem Design */
.akzent-f { fill: var(--akzent); stroke: var(--akzent); }

/* ---------- Wohndeko ---------- */
.produkt-huelle { margin-bottom: 40px; }
.produkt {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 30px;
  align-items: start;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--schatten);
}
/* Die Bilder behalten ihr eigenes Seitenverhältnis: Teelichthalter quer (10:7),
   Vasen hoch (4:5). Ein fester Ausschnitt würde das Hochformat oben beschneiden. */
.produkt-bild {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--papier-tief);
  display: block;
}
.farbstreifen { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.farbknopf {
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--probe);
  cursor: pointer;
}
.farbknopf:hover:not(:disabled) { background: var(--probe); transform: scale(1.06); }
.farbknopf.aktiv { outline: 2px solid var(--akzent); outline-offset: 2px; }

.produkt-text h2 { font-size: 1.5rem; margin: 0 0 6px; }
.produkt-text p { margin: 0 0 12px; color: var(--text-leise); }
.produkt-text p.kurz { color: var(--text); font-size: 1.05rem; }
.produkt-hinweis {
  border-left: 3px solid var(--akzent);
  padding-left: 12px;
}
.produkt-wahl { display: grid; grid-template-columns: 1fr 120px; gap: 14px; margin: 18px 0 16px; }
.produkt-wahl .feld { display: flex; flex-direction: column; gap: 4px; }
.produkt-wahl label { font-size: .88rem; color: var(--text-leise); }
.produkt-wahl select, .produkt-wahl input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  width: 100%;
}
:root[data-theme="dunkel"] .produkt-wahl select,
:root[data-theme="dunkel"] .produkt-wahl input { background: #1b1e22; color: var(--text); border-color: #454b55; }
.produkt-text .meldungen:empty { display: none; }
.produkt-text .meldungen { margin-top: 12px; }

.produkt-reihe { margin: 14px 0 0; }
.produkt-reihe img {
  width: 100%;
  /* Gruppenbild als breiter Streifen, sonst nimmt es die halbe Seite ein */
  aspect-ratio: 24 / 7;
  object-fit: cover;
  object-position: center 62%;
  border-radius: var(--radius);
  display: block;
}
.reihe-vase img { aspect-ratio: 16 / 7; object-position: center 46%; }
.produkt-reihe figcaption { color: var(--text-leise); font-size: .88rem; margin-top: 8px; }

@media (max-width: 860px) {
  .produkt { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
}

.produkt-angaben {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  margin: 0 0 12px;
  font-size: .93rem;
}
.produkt-angaben dt { color: var(--text-leise); }
.produkt-angaben dd { margin: 0; color: var(--text); }

/* Wort mit Hinweisbild, z. B. „Sanbitter" */
.hinweisbild {
  position: relative;
  border-bottom: 1px dotted var(--akzent);
  cursor: help;
  color: var(--text);
}
.hinweisbild .blase {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: 190px;
  padding: 10px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.hinweisbild:hover .blase,
.hinweisbild:focus .blase,
.hinweisbild:focus-within .blase { opacity: 1; visibility: visible; transform: translateY(0); }
.hinweisbild.nach-unten .blase { bottom: auto; top: calc(100% + 10px); }
.hinweisbild .blase img { width: 100%; border-radius: 6px; display: block; background: #fff; }
.hinweisbild .blase span {
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  color: var(--text-leise);
  border: 0;
}
@media (max-width: 860px) {
  .hinweisbild .blase { left: 50%; transform: translate(-50%, 4px); }
  .hinweisbild:hover .blase, .hinweisbild:focus .blase, .hinweisbild:focus-within .blase { transform: translate(-50%, 0); }
}

/* Produktkarte mit echtem Bild statt Strichbild */
.karte .bild.foto { padding: 0; }
.karte .bild.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Schritte auf der Entwurfseite ---------- */
.schritte { gap: 16px; }
.schritte .schritt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  box-shadow: var(--schatten);
}
.schritte .schritt h2 {
  font-family: "Modell Slab", serif;
  font-weight: 400;
  font-size: 1.05rem;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.schritte .schritt .nr {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: "Modell Text", sans-serif;
  font-size: .78rem;
}
.schritte .schritt p { margin: 0 0 10px; color: var(--text-leise); }
.schritte .schritt p.hinweis { margin-bottom: 0; }
.prompt {
  background: var(--papier-tief);
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: 8px;
  font: .84rem/1.5 Consolas, "Cascadia Mono", monospace;
}
:root[data-theme="dunkel"] .prompt { background: #1b1e22; border-color: #454b55; }
.anleitung { color: var(--text-leise); margin: 0 0 10px; padding-left: 20px; }
.anleitung li { margin-bottom: 6px; }
.anleitung code {
  background: var(--papier-tief);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .9em;
}
.schritte input[type=file] { color: var(--text-leise); font: inherit; max-width: 100%; }
.pruefung ul { margin: 8px 0; padding-left: 20px; color: var(--text-leise); }
.pruefung li { margin-bottom: 4px; }
#vorschau { background: var(--vorschau); border-radius: 8px; }
.mass-zeile input { background: #fff; }
:root[data-theme="dunkel"] .mass-zeile input { background: #1b1e22; color: var(--text); border-color: #454b55; }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext { max-width: 76ch; padding-bottom: 20px; }
.rechtstext h2 {
  font-family: "Modell Slab", serif;
  font-weight: 400;
  font-size: 1.22rem;
  margin: 34px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linie);
}
.rechtstext h3 {
  font-family: "Modell Slab", serif;
  font-weight: 400;
  font-size: 1.02rem;
  margin: 22px 0 6px;
}
.rechtstext p { margin: 0 0 12px; }
.rechtstext ul { margin: 0 0 12px; padding-left: 20px; }
.rechtstext li { margin-bottom: 6px; }
.rechtstext address { font-style: normal; margin: 0 0 12px; }
.rechtstext a { color: var(--akzent); }
.rechtstext .quelle { font-size: .86rem; color: var(--text-leise); }
.rechtstext dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0 0 14px;
}
.rechtstext dt { color: var(--text-leise); }
.rechtstext dd { margin: 0; }
@media (max-width: 560px) {
  .rechtstext dl { grid-template-columns: 1fr; gap: 0 0; }
  .rechtstext dd { margin-bottom: 8px; }
}
/* Noch auszufüllende Angaben. Fällt bewusst auf, damit nichts übersehen wird. */
.luecke {
  background: #fdf2d6;
  color: #6b4e00;
  border-left: 3px solid #c9a227;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: .93rem;
}
:root[data-theme="dunkel"] .luecke { background: #4a3a16; color: #ffdf9e; border-left-color: #c9a227; }
.luecke strong { font-weight: 400; color: inherit; }
.platzhalter {
  background: rgba(201, 162, 39, .22);
  border-bottom: 1px dashed #c9a227;
  padding: 0 3px;
  border-radius: 3px;
}
.stand { color: var(--text-leise); font-size: .9rem; margin-top: 32px; }

/* ---------- Becherhalter-Einsatz: Messskizze und Fächerliste ---------- */
.messbild { margin: 0 0 14px; }
.messbild svg { width: 100%; height: auto; display: block; background: var(--papier-tief); border-radius: 8px; padding: 6px 0; }
.messbild figcaption { font-size: .84rem; color: var(--text-leise); line-height: 1.45; margin-top: 6px; }

.fachliste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.fach {
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 10px 10px 8px;
  background: var(--papier-tief);
}
:root[data-theme="dunkel"] .fach { background: #1b1e22; border-color: #454b55; }
.fach-kopf { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.fach-kopf .fach-name, .fach-kopf select { flex: 1; min-width: 0; }
.fach-knoepfe { display: flex; gap: 4px; flex: 0 0 auto; }
.fach-knoepfe button {
  width: 28px;
  padding: 4px 0;
  font-size: .95rem;
  line-height: 1;
  background: transparent;
  color: var(--text-leise);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.fach-knoepfe button:hover:not(:disabled) { color: var(--text); border-color: var(--text-leise); background: var(--flaeche); }
.fach-knoepfe button:disabled { opacity: .35; }
:root[data-theme="dunkel"] .fach-knoepfe button { border-color: #454b55; }
:root[data-theme="dunkel"] .fach-knoepfe button:hover:not(:disabled) { background: #2b2f35; }
.fach-masse { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fach-masse label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--text-leise); }
.fach-masse input { font: inherit; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; color: var(--text); width: 100%; }
:root[data-theme="dunkel"] .fach-masse input { background: #2b2f35; color: var(--text); border-color: #454b55; }
.fach-berechnet { align-self: end; font-size: .84rem; color: var(--text-leise); padding-bottom: 7px; }
.fach-neu { align-items: end; }
.fach-neu button { width: 100%; }
@media (max-width: 420px) {
  .fach-masse { grid-template-columns: 1fr; }
}

/* ---------- Vorschau bleibt beim Scrollen stehen ----------
   .ansicht ist bereits klebend, das greift aber nur, solange der Block niedriger als der
   Bildschirm ist. Mit 520 px Vorschau plus Fußbereich ist er das nicht, also scrollt er mit
   hinaus. Hier bekommt der Block die Bildschirmhöhe als Obergrenze und die Vorschau wächst
   und schrumpft darin mit. Nur auf breiten Fenstern: darunter liegt die Vorschau ohnehin
   über dem Formular. */
@media (min-width: 861px) {
  .generator-klebend .ansicht {
    /* position muss hier noch einmal stehen: Die Grundregel weiter oben in dieser Datei
       setzt relative und überschreibt damit das sticky aus style.css. */
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    /* Echte Höhe statt nur einer Obergrenze: Sonst hat der Flexbau nichts zu verteilen
       und die Vorschau bliebe auf ihrer Grundhöhe stehen. Die Deckelung verhindert,
       dass die Vorschau auf sehr hohen Bildschirmen ins Unermessliche wächst. */
    height: calc(100vh - 32px);
    max-height: 760px;
  }
  /* Alle Leinwände des Blocks, nicht nur #vorschau: Das Leuchtbild hat zwei davon
     (Durchlicht und 3D), von denen immer eine ausgeblendet ist. */
  .generator-klebend .ansicht > canvas {
    height: auto;
    flex: 1 1 360px;
    min-height: 220px;
  }
  /* Reiterleiste und Fußbereich behalten ihre Höhe; der Fuß rutscht bei vielen
     Meldungen intern, statt den Block über den Bildschirmrand zu schieben. */
  .generator-klebend .ansicht > .reiter {
    flex: 0 0 auto;
  }
  .generator-klebend .ansicht-fuss {
    flex: 0 0 auto;
    overflow-y: auto;
  }
}