/* Stilblaetter der Bausteine, die ihre Gestaltung frueher selbst per
   JavaScript eingefuegt haben. Ausgelagert am 20.09.2026,
   weil die CSP der Auslieferung kein erzeugtes <style>-Element erlaubt.
   Wer hier etwas aendert, aendert es fuer index.html und finder.html. */

/* ---- Produktfinder (finder.mjs) ---- */
.finder{background:#fff;border:1px solid var(--line);padding:26px;margin-bottom:22px;
  display:grid;grid-template-columns:1fr 1.6fr;gap:50px;align-items:start}
.finder h2{font-size:30px}
.finder h3{font-size:14px;font-weight:600;line-height:1.4;margin:0 0 12px}
.finder-lead{max-width:300px;font-size:12px;line-height:1.8;color:var(--muted);margin-top:15px}
.finder-kopf #finder-neu{margin-top:20px;width:auto;padding-inline:28px}
.finder-rechts{min-width:0}
.finder-schritt{padding-bottom:20px}
.finder-schritt+.finder-schritt{border-top:1px solid var(--line);padding-top:20px}
.finder-optionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:6px}
.finder-optionen button{min-height:48px;min-width:0;text-align:left;padding:10px 12px;
  font-size:12px;line-height:1.5;border-radius:2px}
.finder-optionen button[aria-pressed="true"]{background:#282b27;color:#fff;border-color:#282b27}
.finder-option-titel{display:block;font-weight:600;overflow-wrap:anywhere}
.finder-option-sub{display:block;font-size:12px;line-height:1.6;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
.finder-optionen button[aria-pressed="true"] .finder-option-sub{color:#bdc3cd}
.finder-zeichen{display:block;margin-bottom:5px}
.finder-zeichen svg{display:block;width:46px;height:auto}
.finder-ergebnis{border-top:3px solid var(--yellow);background:#faf9f4;padding:19px 18px 21px;margin-top:4px}
.finder-ergebnis:focus-visible{outline:3px solid #947000;outline-offset:3px}
.finder-ergebnis h3{font-size:19px;letter-spacing:-.4px;margin-bottom:8px}
.finder-ergebnis .eyebrow{color:var(--muted)}
.finder-ergebnis .eyebrow+h3{margin-top:0}
.finder-ergebnis-lead{font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:16px}
.finder-gruende{margin:0 0 18px}
.finder-gruende>div{font-size:12px;padding:11px 0}
.finder-gruende>div:first-child{border-top:1px solid var(--line)}
.finder-gruende dt{font-weight:600;color:#282b27}
.finder-gruende dd{color:var(--muted);line-height:1.8}
.finder-offen{margin:0;padding:0;list-style:none}
.finder-offen li{font-size:12px;line-height:1.8;color:#7a5412;padding-left:16px;position:relative;margin-bottom:7px}
.finder-offen li:before{content:'';position:absolute;left:0;top:11px;width:7px;height:1px;background:#b08a3a}
.finder-status{font-size:12px;line-height:1.7;margin-top:14px;color:var(--muted)}
.finder-status:empty{margin-top:0}
@media(max-width:1100px){.finder{gap:32px;padding:22px}}
@media(max-width:850px){
  .finder{grid-template-columns:1fr;gap:22px;padding:22px 18px}
  .finder h2{font-size:26px}
  .finder-lead{max-width:none}
  .finder-kopf #finder-neu{margin-top:16px}
}
@media(max-width:540px){
  .finder{padding:20px 16px;margin-bottom:14px}
  .finder-optionen{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .finder-optionen button{padding:9px 10px}
  .finder-ergebnis{padding:16px 14px 18px}
  .finder-ergebnis h3{font-size:17px}
  .finder-gruende>div{gap:12px}
}

/* ---- Modusleiste, Einbauwahl, mm-Rueckfrage (einbau.mjs) ---- */
[data-easy-hidden]{display:none !important}
.modus{display:flex;gap:6px;margin-bottom:18px}
.modus button{flex:1;min-height:44px;border:1px solid var(--line);background:#fff;font:inherit;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border-radius:2px}
.modus button[aria-pressed="true"]{border-color:#282b27;background:#282b27;color:#fff}
.modus-hinweis{font-size:12px;color:var(--muted);margin:-10px 0 18px}
.wiederaufruf{border-top:1px solid var(--line);padding-top:24px;margin-top:24px}
.code-zeile{display:flex;align-items:center;gap:10px;margin:8px 0 4px}
.code{font-size:22px;letter-spacing:.14em;font-weight:700}
.wiederaufruf input{min-height:44px;width:100%;border:1px solid var(--line);padding:0 10px;font:inherit}
.wiederaufruf .knopfreihe{display:grid;gap:8px;margin-top:10px}

/* Gold genau einmal je Bildschirm. Entscheidung vom 16.09.2026: Das Gold gehoert an die
   Abschlusstat, also an das Aufmaszblatt, nicht an den Ansichtsreiter. Der aktive Reiter
   bleibt trotzdem klar erkennbar, ueber helle Flaeche und Schriftgewicht.
   Gerechnet: #dfe3e8 auf #282b27 sind 11,54 zu 1. */
.view-tabs button[aria-pressed="true"]{
  background:#dfe3e8;color:#282b27;border-color:#dfe3e8;font-weight:600
}
/* Das Aufmaszblatt sitzt jetzt in der Exportgruppe und traegt dort als Einziges Gold. */
.export-buttons #wa-blatt{
  background:var(--yellow);border-color:var(--yellow);font-weight:600;
  width:100%;min-height:48px;font-size:12px
}
.export-buttons #wa-blatt:hover{background:#eeb300}

/* Stueckliste unter dem Zeichnungsstand. Gleicher Satzspiegel wie der Abschnitt
   darueber, damit sie nicht wie angeklebt wirkt. */
.stueckliste{
  display:grid;grid-template-columns:1fr 1.6fr;gap:60px;
  padding:45px 0 0;margin-top:35px;border-top:1px solid var(--line)
}
.stueckliste h2{font-size:30px}
.stueckliste p:not(.eyebrow){max-width:300px;font-size:12px;line-height:1.8;color:var(--muted);margin-top:15px}
.stueckliste dl>div{
  display:grid;grid-template-columns:1fr 1.6fr;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:12px
}
.stueckliste dt{color:var(--muted)}
.stueckliste dd{margin:0;overflow-wrap:anywhere}
.stueckliste .sl-offen{color:#7a5412}
.stueckliste ul{margin:18px 0 0;padding:0;list-style:none}
.stueckliste li{
  font-size:12px;line-height:1.8;color:var(--muted);
  padding-left:16px;position:relative;margin-bottom:6px
}
.stueckliste li:before{content:'';position:absolute;left:0;top:9px;width:7px;height:1px;background:#9399a3}
@media(max-width:850px){
  .stueckliste{grid-template-columns:1fr;gap:20px;padding-top:32px}
  .stueckliste h2{font-size:26px}
  .stueckliste dl>div{gap:14px;font-size:12px}
}

/* Rueckfrage bei vermuteter mm/cm-Verwechslung. Erfahrung aus dem Betrieb: Kunden verwechseln
   Millimeter und Zentimeter, auch wenn es rot und fett dasteht. Ein roter Hinweis reicht also
   nicht, die Eingabe muss den Fall abfangen. Umgerechnet wird nie stillschweigend. */
.mass-rueckfrage{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:6px;padding:9px 11px;font-size:12px;line-height:1.6;
  background:#fff6e6;border:1px solid #e0b565;color:#7a5412
}
.mass-rueckfrage button{
  /* 44 px, wie jedes andere Bedienziel. Vorher 36: die Pruefung sah genau diese
     Stelle nicht an, weil sie eine Liste von Bereichen abfragte statt aller
     Bedienelemente. Gefunden beim Bau der Gestaltungsvariante C. */
  min-height:44px;padding:6px 14px;font-size:12px;font-weight:600;
  border:1px solid #966817;background:#fff;color:#7a5412;cursor:pointer
}
.mass-rueckfrage button:hover{background:#fffdf7}

/* ---- Stand ablegen (vorgang.mjs) ---- */
html .vorgang{border-top:0;margin-top:12px;padding:20px;background:#fff;
  border:1px solid var(--linie,var(--line));border-radius:18px}
html .vorgang h3{font-size:19px;letter-spacing:-.4px;margin:0 0 8px}
html .vorgang p{font-size:12px;line-height:1.8;color:var(--gedaempft,var(--muted));margin:0 0 10px}
html .vorgang .vorgang-knopf{width:100%;min-height:48px;font-size:12.5px;
  border-radius:var(--r-feld,12px);background:#fff;border:1px solid var(--linie,var(--line));
  font-weight:600;color:var(--tinte,#131a24);cursor:pointer}
html .vorgang .vorgang-knopf:hover{background:#eef2f7;border-color:#bfc9d9}
html .vorgang .vorgang-knopf[disabled]{opacity:.55;cursor:not-allowed}
html #vorgang-status{margin:12px 0 0;min-height:0}
html #vorgang-status:empty{margin:0}
html .vorgang-code{font-size:20px;letter-spacing:.16em;font-weight:600;color:var(--tinte,#131a24)}
html .vorgang-fuss{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--linie-zart,#e9ecf1)}
html .vorgang-fuss a{font-size:12px;color:var(--glas,#154e8a)}

/* ---- Bedienziele im Fuss (Startseite und Produktfinder) ---- */
/* Der Verweis "Zum Konfigurator" im Fuss war 91 x 15 px und damit kein
   Bedienziel, sondern ein Zielchen. Befund vom 20.09.2026, nachgemessen. */
footer a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:4px 2px;
}

.wiederaufruf-code{margin-top:14px}