/* Ergänzungen für den Optik-Assistenten (Grundlage: erp.css aus dem Sehstudio-Shop) */
.feldraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.feldraster .breit2 { grid-column: span 2; }
.feldraster .ganz { grid-column: 1 / -1; }
.feldraster p { margin: 0; }
@media (max-width: 600px) { .feldraster .breit2 { grid-column: auto; } }
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.kopfzeile h1 { margin: 0; }
.kopfzeile .aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.unterzeile { color: var(--leise); margin: 2px 0 0; }
.meldung.warn { background: #fff7e0; border-color: #e2b93b; color: #6b4e00; }
.marke.offen { background: #e8eefc; color: #23468a; }
.marke.bestellt { background: #fff1c7; color: #6b4e00; }
.marke.fertig { background: #dff1e5; color: #1f5a35; font-weight: 600; }
.marke.abgeholt { background: #eef0f3; color: #555; }
.marke.alt { background: #f0e8fb; color: #5b2f8a; }
.marke.entwurf { background: #e8eefc; color: #23468a; }
.marke.gesendet { background: #fff1c7; color: #6b4e00; }
.marke.erhalten { background: #dff1e5; color: #1f5a35; }
.abc { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px; }
.abc a { padding: 3px 8px; border-radius: 6px; text-decoration: none; color: var(--text); background: #fff; border: 1px solid var(--linie); font-size: 13px; }
.abc a.an { background: var(--dunkel); color: #fff; }
/* Refraktionsprotokoll: kompakte Wertetabelle */
table.refr { border-collapse: collapse; width: 100%; background: #fff; }
table.refr th, table.refr td { border: 1px solid var(--linie); padding: 3px; text-align: center; }
table.refr th { font-size: 12px; color: var(--leise); font-weight: 500; background: #fafbfc; }
table.refr td.block { text-align: left; font-weight: 600; white-space: nowrap; padding: 4px 8px; font-size: 13px; }
table.refr td.auge { font-weight: 600; width: 28px; }
table.refr input { height: 30px; padding: 0 4px; text-align: center; font-size: 14px; min-width: 52px; }
table.refr tr.trenner td { background: #f3f4f6; padding: 2px; }
.refr-scroll { overflow-x: auto; }
.blocktexte { display: grid; grid-template-columns: 120px 1fr 2fr; gap: 6px 10px; align-items: center; margin: 6px 0 14px; }
.blocktexte input { height: 32px; }
table.liste input { height: 32px; }
table.liste td.betrag input { width: 110px; text-align: right; }
.summenzeile td { font-weight: 600; border-top: 2px solid var(--linie); }
.glasliste td small { color: var(--leise); }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knopfreihe form { margin: 0; }
.bericht td, .bericht th { padding: 4px 8px; }
.gitter2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .gitter2 { grid-template-columns: 1fr; } }
/* Druckansichten (Werkstattauftrag) */
.druckblatt { background: #fff; max-width: 800px; margin: 0 auto; padding: 24px; font-size: 13px; }
.druckblatt h1 { font-size: 20px; }
.druckblatt table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; }
.druckblatt th, .druckblatt td { border: 1px solid #999; padding: 4px 6px; text-align: left; }
@media print {
  body { display: block; background: #fff; }
  .leiste, .nicht-drucken, .meldung { display: none !important; }
  .seite { padding: 0; max-width: none; }
  .druckblatt { padding: 0; }
}
/* Felder ohne type-Attribut wie Textfelder darstellen (erp.css kennt nur input[type=text]) */
input:not([type]) { box-sizing: border-box; width: 100%; height: var(--feldhoehe); padding: 0 10px; border: 1px solid #c9ced6;
  border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: var(--feldschrift); }
input:not([type]):focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(47, 95, 179, .15); }
table.refr input:not([type]) { height: 30px; padding: 0 4px; text-align: center; font-size: 14px; }
/* Rasterspalten dürfen schmaler werden als ihr Inhalt; breite Tabellen scrollen in ihrer Kachel */
.gitter2 > *, .feldraster > * { min-width: 0; }
.kachel { overflow-x: auto; }
table.refr tr.trenner input { text-align: left; }
/* Preistabelle im Auftrag: Auswahlfelder breit genug für ihren Text */
table.liste td.eng select { min-width: 170px; }
table.liste td.eng select[name$="_wg"] { min-width: 140px; }
input:not([type]):disabled, input:not([type])[readonly] { background: #f6f7f9; color: var(--leise); }

/* ================================================================== Auftragsmaske (01.11.2026)
   Nach dem Vorbild des alten FileMaker-Optik-Assistenten: alles auf einem Bildschirm, kleine Felder,
   Blöcke mit Überschrift, rechts dauerhaft die Preise. */
.maske-seite { --feldhoehe: 28px; --feldschrift: 13px; font-size: 13px; }
.maske-seite .seite, .seite.maske-seite { padding-top: 14px; max-width: 1600px; }
.maske-seite label { font-size: 11px; margin-bottom: 1px; }
.maske-seite input:not([type=checkbox]):not([type=radio]):not([type=file]), .maske-seite select {
  height: 28px; padding: 0 6px; border-radius: 5px; font-size: 13px; }
.maske-seite textarea { min-height: 54px; padding: 4px 6px; border-radius: 5px; font-size: 13px; }
.maske-seite .knopf, .maske-seite button.haupt { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 6px; }
.maske-seite .knopf.klein { height: 26px; padding: 0 8px; font-size: 12px; }
.maskenkopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.maskenkopf h1 { font-size: 18px; margin: 0; }
.maskenkopf .kunde { font-size: 14px; }
.maskenkopf .kunde a { font-weight: 600; font-size: 15px; }
.maskenkopf .kunde span { color: var(--leise); margin-left: 10px; }
.statusleiste { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; margin-bottom: 8px; }
.statusleiste .schritt { flex: 1 1 120px; border: 1px solid var(--linie); background: var(--flaeche); padding: 4px 10px;
  margin-right: -1px; min-width: 110px; }
.statusleiste .schritt:first-child { border-radius: 8px 0 0 8px; }
.statusleiste .schritt:last-of-type { border-radius: 0 8px 8px 0; }
.statusleiste .schritt b { display: block; font-size: 12px; }
.statusleiste .schritt small { color: var(--leise); font-size: 11.5px; }
.statusleiste .schritt.erledigt { background: #eef7f1; }
.statusleiste .schritt.jetzt { background: #fff7e0; border-color: #e2b93b; position: relative; z-index: 1; }
.statusleiste .schritt button { margin-top: 3px; }
.statusleiste .storno { margin-left: 12px; align-self: center; }
.maskenreiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 8px; }
.maskenreiter button { background: none; border: 1px solid transparent; border-bottom: 0; padding: 6px 14px; border-radius: 8px 8px 0 0;
  font: inherit; font-size: 13px; cursor: pointer; color: var(--leise); height: auto; }
.maskenreiter button.an { background: var(--flaeche); border-color: var(--linie); color: var(--text); font-weight: 600; margin-bottom: -1px; }
.maske { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 8px; align-items: start; }
@media (max-width: 1100px) { .maske { grid-template-columns: 1fr; } }
.maske > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.block { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px 8px; min-width: 0; overflow-x: auto; }
.block > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 0 0 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.block > h3 a { text-transform: none; letter-spacing: 0; font-weight: 400; }
.zeile { display: grid; gap: 4px 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.zeile p { margin: 0; }
.zeile .b2 { grid-column: span 2; }
.zeile .ganz { grid-column: 1 / -1; }
table.mt { border-collapse: collapse; width: 100%; }
table.mt th { font-size: 11px; color: var(--leise); font-weight: 500; text-align: center; padding: 1px 3px; white-space: nowrap; }
table.mt td { padding: 2px 3px; }
table.mt td.auge { font-weight: 700; width: 18px; text-align: center; }
table.mt input { text-align: center; }
table.mt td.text input { text-align: left; }
table.mt .anzeige { display: block; height: 28px; line-height: 26px; border: 1px solid var(--linie); border-radius: 5px;
  background: #f6f7f9; text-align: center; min-width: 46px; padding: 0 4px; }
table.preise { width: 100%; border-collapse: collapse; }
table.preise td { padding: 2px 3px; }
table.preise td.art { font-size: 12px; color: var(--leise); white-space: nowrap; width: 1%; padding-right: 8px; }
table.preise td.betrag { width: 96px; }
table.preise td.betrag input { text-align: right; }
table.preise tr.summe td { border-top: 2px solid var(--linie); font-weight: 700; padding-top: 6px; font-size: 14px; }
.speicherleiste { position: sticky; bottom: 0; background: rgba(243, 244, 246, .95); padding: 8px 0; display: flex; gap: 8px;
  align-items: center; z-index: 5; border-top: 1px solid var(--linie); margin-top: 8px; }
.haken { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; font-size: 12.5px; }
.haken .jn { display: flex; gap: 2px; }
.haken .jn button { height: 22px; padding: 0 7px; font-size: 11.5px; border: 1px solid #c9ced6; background: #fff; border-radius: 4px; cursor: pointer; }
.haken .jn button.an { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }
.tracer { height: 110px; border: 1px dashed #c9ced6; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--leise); font-size: 12px; text-align: center; padding: 6px; }
.kacheln .kachel b { font-size: 17px; }
.kacheln .kachel:hover { border-color: var(--akzent); }
.statusleiste .schritt.erledigt.jetzt { background: #fff7e0; }
.maske-seite input:disabled { color: #3a3f47; }
/* Glasauswahl: Filterspalten wie in der alten Glasauswahl_OPS („Tannenbaum“) */
/* sieben Spalten seit 04.11.2026: Hersteller, Glastyp, Material, Produktgruppe (breit), Index, Qualität, Phototrop */
.tannenbaum { display: grid; grid-template-columns: repeat(2, minmax(90px, .8fr)) minmax(200px, 2.4fr) repeat(3, minmax(80px, .7fr)); gap: 6px; }
.tannenbaum.mit-hersteller { grid-template-columns: minmax(150px, 1.1fr) repeat(2, minmax(90px, .8fr)) minmax(200px, 2.4fr) repeat(3, minmax(80px, .7fr)); }
@media (max-width: 1100px) { .tannenbaum, .tannenbaum.mit-hersteller { grid-template-columns: repeat(2, 1fr); } }
.tannenbaum .spalte { border: 1px solid var(--linie); border-radius: 6px; padding: 4px 6px; max-height: 190px; overflow-y: auto; }
.tannenbaum .spalte b { display: block; font-size: 12px; margin-bottom: 2px; }
.tannenbaum .spalte a { display: block; text-decoration: none; color: var(--text); font-size: 12.5px; padding: 1px 4px; border-radius: 4px; white-space: nowrap; }
.tannenbaum .spalte a:hover { background: #eef2fa; }
.tannenbaum .spalte a.an { background: var(--dunkel); color: #fff; }
.tannenbaum .spalte a small { color: var(--leise); }
.tannenbaum .spalte a.an small { color: #cfd3da; }
.glasliste td, .glasliste th { padding: 3px 6px; font-size: 12.5px; }
.auswahlliste td.nw { white-space: nowrap; }   /* Hersteller, Bezeichnung, Produktgruppe */
.tannenbaum { grid-template-columns: repeat(2, minmax(120px, .9fr)) minmax(200px, 2.2fr) repeat(3, minmax(85px, .7fr)); }
.tannenbaum.mit-hersteller { grid-template-columns: minmax(150px, 1.15fr) repeat(2, minmax(120px, .9fr)) minmax(200px, 2.2fr) repeat(3, minmax(85px, .7fr)); } .tannenbaum .spalte { overflow-x: hidden; }
.optionen td { padding: 3px 8px; font-size: 13px; } .optionen label { margin: 0; color: var(--text); font-size: 13px; }
/* Glasauswahl Schritt 2 (Vorbild: alte Bestellmaske 2) */
.drei-listen { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 8px; margin: 8px 0; align-items: start; }
@media (max-width: 1100px) { .drei-listen { grid-template-columns: 1fr; } }
.wahlliste { border: 1px solid var(--linie); border-radius: 6px; max-height: 300px; overflow-y: auto; margin-bottom: 6px; }
.wahl { display: grid !important; grid-template-columns: 18px 46px 1fr auto; gap: 6px; align-items: center; margin: 0 !important;
  padding: 3px 8px; border-bottom: 1px solid var(--linie); font-size: 12.5px !important; color: var(--text) !important; cursor: pointer; }
.wahl:last-child { border-bottom: 0; }
.wahl:hover { background: #f3f6fb; }
.wahl:has(input:checked) { background: #e7eefb; }
.wahl .c { color: var(--leise); font-size: 11.5px; }
.wahl .p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.farbfleck { width: 34px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); }
.durchmesser td, .durchmesser th { padding: 3px 8px; font-size: 12.5px; }
.wahl-klein { display: inline-flex !important; gap: 4px; align-items: center; margin: 0 !important; font-size: 12.5px !important; color: var(--text) !important; }
.ek-vk { display: inline-flex; gap: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.ek-vk label { margin: 0 !important; font-size: 12px !important; color: var(--text) !important; }
.kosten td.betrag { text-align: right; font-variant-numeric: tabular-nums; }
table.mt.kurz td { padding: 2px 6px; }
table.mt.kurz td:first-child { color: var(--leise); width: 1%; white-space: nowrap; }
.wahl[hidden] { display: none !important; }
.drei-oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(240px, .8fr); gap: 8px; align-items: start; }
@media (max-width: 1100px) { .drei-oben { grid-template-columns: 1fr; } }
.drei-listen { grid-template-columns: 1.25fr 1fr 1fr; }
.wahl { grid-template-columns: 18px 38px minmax(0, 1fr) auto; font-size: 12px !important; }
@media (max-width: 1400px) { .drei-oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .drei-oben > .block:last-child { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .drei-oben { grid-template-columns: 1fr; } }
table.liste.durchmesser td, table.liste.durchmesser th { padding: 2px 8px; font-size: 12.5px; }
/* Ohne innere Scrollbalken (Wunsch des Users 01.11.2026): Listen wachsen mit, lange Listen zweispaltig */
.wahlliste { max-height: none; overflow: visible; }
.wahlliste.lang { columns: 230px auto; column-gap: 0; column-rule: 1px solid var(--linie); }
.wahlliste.lang .wahl { break-inside: avoid; }
.drei-listen { grid-template-columns: 1fr 1fr; }
.drei-listen > .block:first-child { grid-column: 1 / -1; }
@media (min-width: 1400px) { .drei-listen { grid-template-columns: 2fr 1fr 1fr; } .drei-listen > .block:first-child { grid-column: auto; } }
/* Tracerabbildung */
.tracer.mit-bild { height: auto; padding: 4px; background: #fff; }
.tracerbild { width: 100%; max-height: 220px; }
.tracerbild .kontur { fill: rgba(45, 212, 191, .13); stroke: #0d9488; stroke-width: 2; }
.tracerbild .box { fill: none; stroke: #9aa1ab; stroke-dasharray: 3 3; }
.tracerbild .mind { fill: none; stroke: #d97706; stroke-dasharray: 5 4; }
.tracerbild .kreuz { stroke: #1d4ed8; stroke-width: 1.5; }
.tracerbild .steg { stroke: #059669; stroke-width: 2; }
.tracerbild .seite { font: 600 15px system-ui, sans-serif; fill: #0d9488; text-anchor: middle; }
.tracerwerte td { text-align: center; font-variant-numeric: tabular-nums; }
.tracerwerte td.knapp { background: #fff7e0; }
.tracerwerte td.zu-klein { background: #fde8e8; color: #9b1c1c; font-weight: 600; }
.tracer-lesen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
.tracer-lesen[hidden] { display: none; }
.tracer-lesen input[type=file] { max-width: 220px; font-size: 11.5px; }
.tracer-lesen select { width: auto; min-width: 130px; height: 26px; }
/* Schritt 2: Kostenaufstellung unten rechts neben den Durchmessern (Wunsch des Users 01.11.2026) */
.zwei-oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: stretch; }
.unten-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 8px; align-items: start; }
.unten-zwei .durchmesser { width: auto; }
.kostenblock { position: sticky; bottom: 8px; }
@media (max-width: 1100px) { .zwei-oben, .unten-zwei { grid-template-columns: 1fr; } .kostenblock { position: static; } }
/* Durchmesser als Tabelle, aber mit Schrift und Rahmen der Vergütungsliste (Wunsch des Users 01.11.2026) */
.unten-zwei .durchmesser { width: 100%; border: 1px solid var(--linie); border-radius: 6px; border-collapse: separate;
  border-spacing: 0; overflow: hidden; }
table.liste.durchmesser th { padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--leise); text-transform: none;
  letter-spacing: 0; background: #f7f8fa; border-bottom: 1px solid var(--linie); }
table.liste.durchmesser td { padding: 3px 8px; font-size: 12px; border-bottom: 1px solid var(--linie); }
table.liste.durchmesser tr:last-child td { border-bottom: 0; }
table.liste.durchmesser tr:hover td { background: #f3f6fb; }
table.liste.durchmesser tr:has(input:checked) td { background: #e7eefb; }
table.liste.durchmesser .wahl-klein { font-size: 12px !important; }
table.liste.durchmesser input[type=radio] { height: auto; width: auto; margin: 0; }
/* Glasauswahl Schritt 2: eine Zeilenhöhe für alle Listen und Tabellen (Wunsch des Users 01.11.2026) */
#schritt2 { --zeile: 24px; }
#schritt2 .wahl { min-height: var(--zeile); padding-top: 0; padding-bottom: 0; line-height: 16px; }
#schritt2 .wahl > span:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#schritt2 #farben > p { min-height: var(--zeile); margin: 0; padding: 0 8px; display: flex; align-items: center; }
#schritt2 table tr { height: var(--zeile); }
#schritt2 table td, #schritt2 table th { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 16px; vertical-align: middle; }
#schritt2 table th { height: 20px; }
#schritt2 .anzeige { height: 20px; min-height: 0; line-height: 18px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; }
#schritt2 table.kosten tr.summe td { padding-top: 2px !important; }

/* Warenwirtschaft: Handelsware (ware.html, ware_artikel.html) */
.marke.knapp { background: #fde2e2; color: #8b1c1c; margin-left: 6px; }
.klraster-rahmen { overflow-x: auto; margin-bottom: 12px; }
.klraster { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.klraster th, .klraster td { border: 1px solid var(--linie); padding: 0; height: 24px; text-align: center; }
.klraster th { background: #f4f5f7; color: var(--leise); font-weight: 500; padding: 0 8px; white-space: nowrap; }
.klraster tr > th:first-child { text-align: right; position: sticky; left: 0; }
.klraster td { min-width: 56px; }
.klraster td a { display: block; line-height: 24px; text-decoration: none; color: var(--text); }
.klraster td a:hover { background: #eef2f8; }
.klraster td a.leer { color: var(--leise); }
.klraster td a.knapp { background: #fde2e2; color: #8b1c1c; font-weight: 600; }
.klraster td a.gewaehlt { outline: 2px solid var(--dunkel); outline-offset: -2px; }
.klraster td a.aus { text-decoration: line-through; opacity: .5; }

/* Suchfenster für Fassungen (templates/_fassungssuche.html) */
dialog.suchfenster { width: min(980px, 94vw); max-height: 86vh; border: 1px solid var(--linie); border-radius: 10px; padding: 16px 20px; }
dialog.suchfenster::backdrop { background: rgba(20, 24, 32, .45); }
dialog.suchfenster .kopfzeile { margin-bottom: 4px; }
dialog.suchfenster #fs_felder { grid-template-columns: repeat(3, 1fr); }

/* Lieferschein prüfen: Bild links, Zeilen rechts (templates/lieferschein.html) */
.lieferschein { display: grid; grid-template-columns: minmax(280px, 42%) 1fr; gap: 14px; align-items: start; }
.lieferschein .bild { position: sticky; top: 10px; padding: 6px; }
.lieferschein .bild img { width: 100%; height: auto; display: block; }
.lieferschein .bild iframe { width: 100%; height: 78vh; border: 0; }
.lszeilen td { vertical-align: top; }
.lszeilen tr.sicher-mittel td { background: #fff8e1; }
.lszeilen tr.sicher-niedrig td { background: #fdecea; }
.lsneu { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lsneu input { width: 110px; }
@media (max-width: 900px) { .lieferschein { grid-template-columns: 1fr; } .lieferschein .bild { position: static; } }
/* Selbständiges Speichern (autospeichern.js) */
.autostand { position: fixed; right: 18px; bottom: 18px; z-index: 60; max-width: 420px; padding: 8px 14px; border-radius: 6px;
  background: #374151; color: #fff; font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.autostand.ok { background: #166534; }
.autostand.warn { background: #92400e; }
.autostand.fehler { background: #b91c1c; }
.autofehler { border-color: #dc2626 !important; background: #fef2f2 !important; }
button[data-rueck][hidden] { display: none; }

/* ================================================================== Moderner Stil (03.11.2026, Wunsch des Users)
   Ruhige weiße Flächen, größere dunkle Schrift; jeder Bereich hat seine Farbe nur als Streifen links und als Symbol
   (Farben unter Einstellungen, CSS-Variablen --farbe-<bereich> aus basis.html). Lesewerte als Text, Seltenes eingeklappt. */
.maske-seite { --feldhoehe: 34px; --feldschrift: 14px; font-size: 14px; }
.maske-seite label { font-size: 13px; color: var(--text); margin-bottom: 3px; }
.maske-seite input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .maske-seite select {
  height: 34px; padding: 0 8px; border-radius: 8px; font-size: 14px; }
.maske-seite textarea { min-height: 60px; padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.maske-seite .knopf, .maske-seite button.haupt { height: 34px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.maske-seite .knopf.klein { height: 30px; padding: 0 10px; font-size: 13px; }
.maske, .maske > div { gap: 14px; }
.block { --farbe: transparent; background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  padding: 12px 16px 14px 21px; box-shadow: inset 5px 0 0 var(--farbe); }
.block > h3 { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600;
  margin: 0 0 10px; justify-content: flex-start; flex-wrap: wrap; }
.block > h3 .symbol { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  flex: none; background: color-mix(in srgb, var(--farbe) 15%, #fff); color: var(--farbe); }
.block > h3 .symbol svg { width: 16px; height: 16px; }
.block > h3 .rechts { margin-left: auto; font-weight: 400; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.block > h3 .zusatz { font-weight: 400; font-size: 13px; color: var(--leise); }
.stand { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 6px; background: #dcfce7; color: #166534; white-space: nowrap; }
.stand.fehlt { background: #fef3c7; color: #92400e; }
.stand.neutral { background: #f1f5f9; color: #334155; }
.zeile { gap: 10px 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lesewert { font-size: 15px; line-height: 1.8; }
.lesewert b { display: inline-block; width: 20px; }
details.mehr { margin-top: 10px; }
details.mehr > summary { cursor: pointer; color: var(--akzent); font-size: 13px; list-style: none; width: fit-content; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::before { content: "+ "; }
details.mehr[open] > summary::before { content: "− "; }
details.mehr > .zeile, details.mehr > table { margin-top: 8px; }
table.mt th { font-size: 12px; }
table.mt td.auge { font-size: 14px; }
table.preise td { padding: 3px 3px; }
table.preise td.art { font-size: 13px; color: var(--text); }
.preissumme { border-top: 1px solid var(--linie); margin-top: 8px; padding-top: 8px; }
.preissumme .klein { font-size: 13px; color: var(--leise); }
.preissumme .gross { font-size: 26px; font-weight: 700; line-height: 1.2; }
.maskenkopf { border-radius: 12px; padding: 12px 16px; }
.maskenkopf h1 { font-size: 19px; }
.naechster { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.naechster .hinweis { font-size: 12px; color: var(--leise); }
.statusleiste .schritt { padding: 6px 12px; }
.statusleiste .schritt b { font-size: 13px; }
.statusleiste details.vonhand { margin-left: 12px; align-self: center; font-size: 13px; }
.statusleiste details.vonhand > summary { cursor: pointer; color: var(--akzent); }
.statusleiste details.vonhand > div { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.speicherhinweis { font-size: 13px; color: var(--leise); margin: 10px 0 0; }
.block[data-farbe=auftrag], .farbig[data-farbe=auftrag] { --farbe: var(--farbe-auftrag); }
.block[data-farbe=refraktion], .farbig[data-farbe=refraktion] { --farbe: var(--farbe-refraktion); }
.block[data-farbe=fassung], .farbig[data-farbe=fassung] { --farbe: var(--farbe-fassung); }
.block[data-farbe=glaeser], .farbig[data-farbe=glaeser] { --farbe: var(--farbe-glaeser); }
.block[data-farbe=zentrierung], .farbig[data-farbe=zentrierung] { --farbe: var(--farbe-zentrierung); }
.block[data-farbe=preise], .farbig[data-farbe=preise] { --farbe: var(--farbe-preise); }
.block[data-farbe=rechnung], .farbig[data-farbe=rechnung] { --farbe: var(--farbe-rechnung); }
.block[data-farbe=info], .farbig[data-farbe=info] { --farbe: var(--farbe-info); }
.kachel.farbig { box-shadow: inset 5px 0 0 var(--farbe); padding-left: 23px; }
/* Einstellungen: Farbwähler je Bereich */
.farbwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 8px; }
label.farbfeld { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); border: 1px solid var(--linie);
  border-radius: 10px; padding: 6px 10px; background: #fff; margin: 0; cursor: pointer; }
label.farbfeld input[type=color] { width: 40px; height: 30px; padding: 0; border: 1px solid #c9ced6; border-radius: 6px; background: #fff; cursor: pointer; }
label.farbfeld .farbmuster { box-shadow: inset 4px 0 0 var(--farbe); padding-left: 10px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Fotos der Fassungen (_fassungsbilder.html) */
.fotogalerie { display: flex; flex-wrap: wrap; gap: 12px; }
.fotogalerie figure { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fotogalerie img { width: 180px; height: 120px; object-fit: contain; background: #f8fafc; border: 1px solid var(--linie); border-radius: 8px; }
/* Vorschaubilder der Fassungen, groß beim Überfahren (vorschau.js) */
.vorschau { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 4px; }
.vorschau img { width: 46px; height: 32px; object-fit: contain; background: #fff; border: 1px solid var(--linie); border-radius: 5px; cursor: zoom-in; }
.vorschau img:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; }
.fotogalerie img[data-zoom] { cursor: zoom-in; }
.zoombild { position: fixed; z-index: 1000; width: 420px; height: 300px; background: #fff; border: 1px solid var(--linie);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); padding: 8px; pointer-events: none; }
.zoombild img { width: 100%; height: 100%; object-fit: contain; }
.marke.ruecklaeufer { background: #ffedd5; color: #9a3412; }
/* Kundenkarte im modernen Stil (03.11.2026) */
.block[data-farbe=kunde], .farbig[data-farbe=kunde] { --farbe: var(--farbe-kunde); }
.karte { display: flex; flex-direction: column; gap: 14px; }
.karte .gitter2 { gap: 14px; margin: 0; }
.karte .block { font-size: 14.5px; }
.karte .block table.liste { margin: 0; }
.kopfkarte { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--linie);
  border-radius: 12px; padding: 14px 18px 14px 23px; box-shadow: inset 5px 0 0 var(--farbe-kunde); }
.kopfkarte h1 { margin: 0; font-size: 22px; }
.kopfkarte .unterzeile { margin: 2px 0 0; }
.kopfkarte .aktionen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kontaktzeile { display: grid; grid-template-columns: 22px 1fr; gap: 4px 8px; align-items: start; margin: 0 0 8px; }
.kontaktzeile .lbl { color: var(--leise); font-size: 13px; }
/* Refraktion im modernen Stil: eingeklappte Messungen als Block mit Überschrift */
details.block > summary { cursor: pointer; list-style: none; }
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary h3 { gap: 8px; align-items: center; }
details.block:not([open]) { padding-bottom: 12px; }
details.block:not([open]) > summary h3 .zusatz { color: var(--akzent); }
details.block > summary h3 { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }
details.block > summary h3 .symbol { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; flex: none; background: color-mix(in srgb, var(--farbe) 15%, #fff); color: var(--farbe); }
details.block > summary h3 .symbol svg { width: 16px; height: 16px; }
details.block > summary h3 .zusatz { font-weight: 400; font-size: 13px; color: var(--leise); }
.maske-seite .refr-scroll table.mt input { min-width: 58px; }
#auftragsform .refr-scroll table.mt input { min-width: 40px; padding: 0 3px; }
#auftragsform .refr-scroll table.mt th { font-size: 11.5px; white-space: normal; line-height: 1.2; }
#auftragsform .refr-scroll table.mt td { padding: 2px 2px; }
.tracer-zeile { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tracer-zeile .tracer-lesen { display: flex; align-items: center; gap: 8px; }
.tracer-zeile .zahnrad { margin-left: auto; width: 34px; padding: 0; }
.tracer-zeile .zahnrad svg { width: 18px; height: 18px; }
/* ±-Knopf: Plus- ↔ Minuszylinder (transposition.js) */
button.tp { width: 26px; height: 26px; padding: 0; margin-left: 2px; border: 1px solid #c9ced6; border-radius: 6px; background: #fff;
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; color: var(--text); vertical-align: middle; }
button.tp:hover { background: #f4f5f7; border-color: #aeb4bd; }
button.tp:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; }
td.auge { white-space: nowrap; }
/* Glasbestellung: Einschleifdaten direkt unter dem Tracerbild, Kennwerte klein darunter (User 03.11.2026) */
#tracer .einschleif { margin-top: 10px; padding: 8px 10px; border-left: 4px solid var(--farbe-zentrierung); background: #fafbfc; border-radius: 6px; }
#tracer .einschleif h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; }
#tracer .einschleif table.mt { margin: 0; }
p.tracerwerte { font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
p.tracerwerte .zu-klein { color: #b91c1c; font-weight: 700; }
p.tracerwerte .knapp { color: #b45309; font-weight: 700; }
/* Spracheingabe im Auftrag (diktat.js, 04.11.2026) */
.diktat-knopf.an { background: #dc2626; color: #fff; border-color: #dc2626; animation: diktat-puls 1.2s infinite; }
@keyframes diktat-puls { 50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, .25); } }
.diktat-panel { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: min(420px, calc(100vw - 32px)); background: #fff;
  border: 1px solid #d0d5dd; border-left: 5px solid var(--farbe-refraktion, #2563eb); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15); font-size: 14px; }
.diktat-panel[data-zustand="hoert"] { border-left-color: #dc2626; }
.diktat-kopf { display: flex; align-items: center; gap: 8px; } .diktat-kopf button { margin-left: auto; }
.diktat-zustand { color: var(--leise); }
.diktat-panel p { margin: 6px 0 0; } .diktat-liste { margin: 6px 0 0; padding-left: 18px; }
.diktat-hinweise { color: #b45309; }
.diktat-knoepfe { margin-top: 8px; }
input.diktat-feld { outline: 2px solid #f59e0b; background: #fffbeb; }
.diktat-neu { display: block; font-size: 12px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 4px; padding: 0 4px; margin-top: 2px; white-space: nowrap; }
/* EK verdeckt (Kunde schaut mit) – sichtbar nur bei body.ek-an: Strg halten oder Maus auf „Kostenaufstellung“ */
.nur-ek { display: none; }
body.ek-an th.nur-ek, body.ek-an td.nur-ek { display: table-cell; }
body.ek-an span.nur-ek { display: inline; }
.ek-marke { font-size: 11px; color: var(--warn, #b45309); font-weight: 700; margin-left: 6px; }
body.ek-an .kostenblock .betrag { color: var(--warn, #b45309); }
/* Einheitliche Knöpfe in Kastenüberschriften (User 04.11.2026): links Symbol, Titel, graue Zusatzangabe;
   rechtsbündig alle Aktionen als gleich große helle Knöpfe; der Status (erledigt / fehlt noch) steht immer ganz rechts. */
.block > h3 .rechts { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.block > h3 .rechts .knopf { font-weight: 500; white-space: nowrap; }
.block > h3 .rechts .stand { order: 99; }
.block > h3 .zusatz a { color: var(--akzent); }
/* Knöpfe bleiben eine Reihe: lieber rutscht die ganze Reihe unter den Titel, als dass der Status allein umbricht */
.block > h3 .rechts { flex-wrap: nowrap; }
@media (max-width: 700px) { .block > h3 .rechts { flex-wrap: wrap; } }
/* Kopfzeile (User 04.11.2026): Status-Marke im Titel etwas kleiner, Knöpfe rechts in einer Reihe */
.maskenkopf h1 .marke { font-size: 12px; vertical-align: middle; margin-left: 6px; }
.maskenkopf .naechster { justify-content: flex-end; }
/* Vor der Anmeldung gibt es keine Menüleiste: dann eine Spalte über die ganze Breite (Anmelde- und Code-Seite) */
body.ohne-leiste { grid-template-columns: 1fr; }