/* ============================================================================
   blechline-konfigurator.css — die vier Konfiguratoren
   Stand: 2026-09-07 · Quelle im Projekt:
   20_blechline/web/theme/assets/blechline-konfigurator.css

   Baut in den INNENRAUM des Konfigurator-Rahmens aus E-036 hinein.
   Rahmen, Kopfzeile und Ergebniszeile kommen weiterhin aus
   pdp-konfigurator-kopf.liquid / pdp-konfigurator-fuss.liquid und werden hier
   NICHT angefasst. Eigener Namensraum .blk-, damit nichts kollidiert.

   Farben aus blechline-pdp.css: Akzent #0082b4 · Linie #cbe6f4 ·
   Flaeche #f4fafd → #eaf5fb · Text #3d4c63 · gedaempft #516079
   2026-10-03 (Redesign v9, P1): Variablen auf blechline-tokens.css umgeleitet
   (Fallback-Werte in var() fuer Seiten ohne Tokens). Keine Layoutaenderung.
   ========================================================================== */

.blk{
  --blk-akzent:var(--bl-blau-500,#0082b4);
  --blk-akzent-dunkel:var(--bl-blau-600,#005f85);
  --blk-linie:var(--bl-linie-2,#d5dbe4);
  --blk-linie-fest:var(--bl-linie-2,#d5dbe4);
  --blk-flaeche:var(--bl-flaeche,#f5f7fa);
  --blk-text:var(--bl-text-2,#516079);
  --blk-gedaempft:var(--bl-text-3,#5d6b83);
  --blk-warn-bg:#fff6e4;
  --blk-warn-linie:#f0d9a8;
  --blk-warn-text:#7a4b00;
  --blk-gut-bg:#eaf7ee;
  --blk-gut-linie:#b9dfc6;
  --blk-gut-text:#1d6b36;
  --blk-fehler-bg:#fdeceb;
  --blk-fehler-linie:#f2c4c0;
  --blk-fehler-text:#8c2318;
  font-family:var(--bl-f-text,'Inter',system-ui,sans-serif);
  color:var(--blk-text);
  font-size:14.5px;
  line-height:1.55;
}
.blk *,.blk *::before,.blk *::after{ box-sizing:border-box; }

/* --- Reiter zwischen den Eingangstueren ----------------------------------- */
.blk-reiter{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; }
.blk-reiter button{
  font:600 13.5px/1 'Barlow',sans-serif; letter-spacing:.01em;
  padding:9px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--blk-linie); background:#fff; color:var(--bl-blau-600,#005f85);
}
.blk-reiter button:hover{ background:var(--blk-flaeche); }
.blk-reiter button[aria-selected="true"]{
  background:var(--blk-akzent); border-color:var(--blk-akzent); color:#fff;
}

/* --- Feldraster ----------------------------------------------------------- */
.blk-felder{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:0 0 16px; }
.blk-felder--eng{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
.blk-feld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.blk-feld > span{ font:600 13.5px/1.3 'Barlow',sans-serif; color:var(--blk-text); }
.blk-feld input,.blk-feld select{
  width:100%; padding:9px 10px; font-size:15px; font-family:inherit;
  border:1px solid var(--blk-linie-fest); border-radius:8px; background:#fff; color:var(--blk-text);
}
.blk-feld input:focus,.blk-feld select:focus{ outline:2px solid var(--blk-akzent); outline-offset:1px; }
.blk-feld small{ font-size:13px; color:var(--blk-gedaempft); }
.blk-feld--voll{ grid-column:1/-1; }

.blk-schalter{ display:flex; align-items:center; gap:9px; font-size:14px; padding:4px 0; }
.blk-schalter input{ width:17px; height:17px; accent-color:var(--blk-akzent); flex:none; }

fieldset.blk-gruppe{ border:1px solid var(--blk-linie); border-radius:10px; padding:14px 16px 16px; margin:0 0 16px; background:#fff; }
fieldset.blk-gruppe > legend{ font:800 13px/1 'Barlow',sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--bl-blau-600,#005f85); padding:0 6px; }

/* --- Schenkel-Liste des Profil-Konfigurators ------------------------------ */
.blk-schenkel{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
.blk-schenkel__zeile{
  display:grid; grid-template-columns:34px 1fr 1fr 36px; gap:8px; align-items:center;
  padding:8px; border:1px solid var(--blk-linie-fest); border-radius:9px; background:#fff;
}
.blk-schenkel__zeile[data-aktiv="ja"]{ border-color:var(--blk-akzent); box-shadow:0 0 0 2px rgba(0,130,180,.14); }
.blk-schenkel__nr{
  width:28px; height:28px; border-radius:50%; background:var(--blk-akzent); color:#fff;
  font:800 13px/28px 'Barlow',sans-serif; text-align:center;
}
.blk-schenkel__zeile input{
  width:100%; padding:7px 8px; font-size:14.5px; font-family:inherit;
  border:1px solid var(--blk-linie-fest); border-radius:7px; min-width:0;
}
.blk-schenkel__zeile label{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.blk-schenkel__zeile label span{ font-size:13px; color:var(--blk-gedaempft); }
.blk-weg{
  border:none; background:none; cursor:pointer; font-size:19px; line-height:1;
  color:#a8b2c1; padding:4px; border-radius:6px;
}
.blk-weg:hover{ color:var(--blk-fehler-text); background:var(--blk-fehler-bg); }
.blk-weg[disabled]{ opacity:.25; cursor:not-allowed; }

/* --- Knoepfe -------------------------------------------------------------- */
.blk-knopf{
  font:700 14px/1 'Barlow',sans-serif; padding:11px 18px; border-radius:8px; cursor:pointer;
  border:1px solid var(--blk-akzent); background:var(--blk-akzent); color:#fff;
}
.blk-knopf:hover{ background:var(--blk-akzent-dunkel); border-color:var(--blk-akzent-dunkel); }
.blk-knopf--zweit{ background:#fff; color:var(--bl-blau-600,#005f85); }
.blk-knopf--zweit:hover{ background:var(--blk-flaeche); }
.blk-knopfreihe{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 0; }

/* --- Zeichenflaeche ------------------------------------------------------- */
.blk-buehne{
  border:1px solid var(--blk-linie); border-radius:10px; background:#fff;
  padding:10px; margin:0 0 14px; overflow-x:auto;
}
.blk-buehne svg{ display:block; width:100%; height:auto; max-height:340px; }
.blk-buehne__leer{ padding:36px 12px; text-align:center; color:var(--blk-gedaempft); font-size:14px; }

/* --- Meldungen ------------------------------------------------------------ */
.blk-meldung{
  border-radius:9px; padding:11px 13px; margin:0 0 10px; font-size:13.8px; line-height:1.5;
  border:1px solid var(--blk-linie-fest); background:#fff;
}
.blk-meldung b{ font-family:'Barlow',sans-serif; }
.blk-meldung--gut{ background:var(--blk-gut-bg); border-color:var(--blk-gut-linie); color:var(--blk-gut-text); }
.blk-meldung--warn{ background:var(--blk-warn-bg); border-color:var(--blk-warn-linie); color:var(--blk-warn-text); }
.blk-meldung--fehler{ background:var(--blk-fehler-bg); border-color:var(--blk-fehler-linie); color:var(--blk-fehler-text); }
.blk-meldung--info{ background:var(--blk-flaeche); border-color:var(--blk-linie); color:var(--bl-blau-600,#005f85); }
.blk-meldungen:empty{ display:none; }

/* --- Ergebnisblock -------------------------------------------------------- */
.blk-ergebnis{
  border:1px solid var(--blk-linie); border-radius:10px;
  background:linear-gradient(180deg,var(--blk-flaeche),#eaf5fb);
  padding:14px 16px; margin:16px 0 0;
}
.blk-ergebnis h4{
  margin:0 0 10px; font:800 13px/1 'Barlow',sans-serif;
  text-transform:uppercase; letter-spacing:.06em; color:var(--bl-blau-600,#005f85);
}
.blk-werte{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:12px; }
.blk-wert{ min-width:0; }
.blk-wert span{ display:block; font-size:13px; color:var(--blk-gedaempft); }
.blk-wert b{ display:block; font:800 19px/1.25 'Barlow',sans-serif; color:#123; overflow-wrap:anywhere; }
.blk-wert small{ display:block; font-size:13px; color:var(--blk-gedaempft); }
.blk-wert--haupt b{ color:var(--blk-akzent-dunkel); font-size:23px; }

/* --- Tabellen (Trag-Rechner, Stueckliste) ---------------------------------
   Ergaenzt 2026-09-15 (WP-A, Audit-Nr. 12): max-width:100% auf der Huelle
   ergaenzt - overflow-x:auto allein schliesst die Box nicht auf die
   Elternbreite ein, wenn diese selbst (durch andere Inhalte im Pruefstand)
   breiter als der Viewport gerechnet wird. Auf /pages/konfigurator gemessen:
   860px scrollWidth bei 390px Fenster vor der Aenderung. */
.blk-tabelle-huelle{ display:block; overflow-x:auto; max-width:100%; border:1px solid var(--blk-linie-fest); border-radius:10px; background:#fff; }
table.blk-tabelle{ width:100%; border-collapse:collapse; font-size:13.6px; min-width:520px; }
table.blk-tabelle th,table.blk-tabelle td{ padding:9px 11px; text-align:left; border-bottom:1px solid #eef2f6; white-space:nowrap; }
table.blk-tabelle th{ font:700 13px/1.3 'Barlow',sans-serif; color:var(--bl-blau-600,#005f85); background:var(--blk-flaeche); text-transform:uppercase; letter-spacing:.04em; }
table.blk-tabelle tbody tr:last-child td{ border-bottom:none; }
table.blk-tabelle tbody tr:hover{ background:#fafcfe; }
table.blk-tabelle td.blk-zahl,table.blk-tabelle th.blk-zahl{ text-align:right; font-variant-numeric:tabular-nums; }
.blk-marke{
  display:inline-block; padding:2px 7px; border-radius:5px; font:700 13px/1.5 'Barlow',sans-serif;
  background:#eef4f8; color:var(--bl-blau-600,#005f85); white-space:nowrap;
}
.blk-marke--eng{ background:var(--blk-warn-bg); color:var(--blk-warn-text); }

/* --- Protokoll ------------------------------------------------------------ */
.blk-protokoll{
  border:1px solid var(--blk-linie-fest); border-radius:10px; background:#fff;
  padding:14px 16px; margin:14px 0 0; font-size:13.4px;
}
.blk-protokoll h4{ margin:0 0 8px; font:800 13px/1 'Barlow',sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--bl-blau-600,#005f85); }
.blk-protokoll dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; }
.blk-protokoll dt{ color:var(--blk-gedaempft); }
.blk-protokoll dd{ margin:0; }
.blk-protokoll__fuss{ margin:12px 0 0; padding-top:10px; border-top:1px solid #eef2f6; color:var(--blk-gedaempft); font-size:13px; line-height:1.5; }

/* --- Hinweisfahne "Annahme" ----------------------------------------------- */
.blk-annahme{
  display:inline-block; font:700 13px/1.6 'Barlow',sans-serif; letter-spacing:.05em;
  text-transform:uppercase; padding:1px 6px; border-radius:4px; vertical-align:middle;
  background:var(--blk-warn-bg); color:var(--blk-warn-text); border:1px solid var(--blk-warn-linie);
}

/* .bl-pruefstand (max-width:860px; margin:0 auto; - Inline-Style aus
   templates/page.konfigurator.json, ausserhalb des Dateikreises von WP-A)
   steckt als einzelnes Grid-Item in der mittleren Spur (358px) des
   full-width-Section-Grids (16px / 358px / 16px). margin:0 auto zentriert
   ein Element normalerweise INNERHALB verfuegbarer Breite - als Grid-Item
   bedeutet auto-Margin aber "nicht auf die Spur strecken, an eigenem Inhalt
   ausrichten", wodurch .bl-pruefstand auf die Inhaltsbreite seiner Kinder
   waechst (860px, angetrieben von der 520px-Mindestbreite der Trag-Rechner-
   Tabelle) statt auf die 358px-Spur gestaucht zu werden. min-width:0 allein
   (erster Versuch) griff nicht, weil das Problem nicht am Inhalts-Minimum
   lag, sondern an margin:auto im Grid-Kontext. Per Playwright bestaetigt:
   erst width:100% + margin-inline:0 bringt .bl-pruefstand auf 358px zurueck.
   WP-A, 2026-09-15, Audit-Nr. 12. */
.bl-pruefstand{ min-width:0; width:100%; margin-inline:0; }

@media (max-width:520px){
  .blk-schenkel__zeile{ grid-template-columns:28px 1fr 1fr 30px; gap:6px; }
  .blk-wert b{ font-size:17px; }
  .blk-wert--haupt b{ font-size:20px; }
}

@media print{
  .blk-reiter,.blk-knopfreihe,.blk-weg{ display:none !important; }
  .blk-buehne,.blk-ergebnis,.blk-protokoll{ break-inside:avoid; }
}

/* ============================================================================
   VEREDELUNG auf der Produktseite (Redesign v9, P4, 2026-10-03)
   Nur innerhalb der Werkzeugflaeche .bl-konfig (Produktseite). Der Pruefstand
   /pages/konfigurator bleibt unveraendert. Logik/Markup: Konfigurator-Agent.
   Bild: ein ruhiges Werkzeug — Segmentschalter, Gruppen mit Haarlinie statt
   Kasten, Zeichenbrett mit Raster, Ergebnis in Barlow mit Tabellenziffern.
   ========================================================================== */
.bl-konfig .bl-konfig__innen{ border-top: 1px solid var(--bl-linie-2); margin-top: 20px; padding-top: 20px; }
.bl-konfig .blk{ color: var(--bl-ink); font-size: 15px; }

/* Segmentschalter statt zweier Pillen */
.bl-konfig .blk-reiter{
  display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 18px; flex-wrap: nowrap; max-width: 100%;
  background: #fff; border: 1px solid var(--bl-linie-2); border-radius: var(--r-s);
}
.bl-konfig .blk-reiter button{
  border: 0 !important; background: transparent; color: var(--bl-text-2); border-radius: 6px;
  min-height: 40px; padding: 0 16px; font-family: var(--bl-f-kopf); font-weight: 600; font-size: 14.5px;
  white-space: nowrap; transition: background var(--m-fast) ease, color var(--m-fast) ease;
}
.bl-konfig .blk-reiter button:hover{ color: var(--bl-ink); background: var(--bl-flaeche); }
.bl-konfig .blk-reiter button[aria-selected="true"]{ background: var(--bl-blau-800); color: #fff; }

/* Gruppen: Haarlinie oben, Legende als Mikro-Label — kein Kasten im Kasten */
.bl-konfig fieldset.blk-gruppe{ border: 0; border-top: 1px solid var(--bl-linie-2); border-radius: 0; background: transparent; padding: 18px 0 4px; margin: 0 0 6px; min-width: 0; }
.bl-konfig fieldset.blk-gruppe > legend{
  float: left; width: 100%; padding: 0; margin: 0 0 12px;
  font: 700 13px/1.2 var(--bl-f-kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--bl-text-3);
}
.bl-konfig fieldset.blk-gruppe > legend + *{ clear: both; }

/* Felder */
.bl-konfig .blk-felder{ gap: 14px; }
.bl-konfig .blk-feld > span{ font-family: var(--bl-f-kopf); font-weight: 600; font-size: 13.5px; color: var(--bl-ink); }
.bl-konfig .blk-feld input, .bl-konfig .blk-feld select, .bl-konfig .blk-schenkel__zeile input{
  min-height: 48px; border: 1px solid var(--bl-linie-2); border-radius: var(--r-s); background-color: #fff;
  font-family: var(--bl-f-text); font-size: 16px; color: var(--bl-ink); font-variant-numeric: tabular-nums;
  transition: border-color var(--m-fast) ease, box-shadow var(--m-fast) ease;
}
.bl-konfig .blk-feld input:hover, .bl-konfig .blk-feld select:hover{ border-color: var(--bl-metall-3); }
.bl-konfig .blk-feld input:focus, .bl-konfig .blk-feld select:focus, .bl-konfig .blk-schenkel__zeile input:focus{
  outline: none; border-color: var(--bl-blau-500); box-shadow: 0 0 0 3px rgba(0,130,180,.18);
}
.bl-konfig .blk-feld small{ color: var(--bl-text-3); font-size: 13px; }
.bl-konfig .blk-schenkel__zeile{ border-radius: var(--r-s); }
.bl-konfig .blk-schenkel__zeile[data-aktiv="ja"]{ background: var(--bl-blau-50); box-shadow: inset 3px 0 0 var(--bl-blau-500); }
.bl-konfig .blk-schenkel__nr{ font-family: var(--bl-f-kopf); font-weight: 700; color: #fff; background: var(--bl-blau-800); font-variant-numeric: tabular-nums; }

/* Zeichenbrett */
.bl-konfig .blk-buehne{
  border: 1px solid var(--bl-linie-2); border-radius: var(--r-s); padding: 12px; margin: 4px 0 16px;
  background-color: #fff;
  background-image: linear-gradient(var(--bl-metall-1) 1px, transparent 1px), linear-gradient(90deg, var(--bl-metall-1) 1px, transparent 1px);
  background-size: 16px 16px; background-position: -1px -1px;
}
.bl-konfig .blk-buehne svg text{ font-family: var(--bl-f-kopf); font-variant-numeric: tabular-nums; }

/* Meldungen: leise Flaechen, Farbe nie allein (Text bleibt) */
.bl-konfig .blk-meldung{ border-radius: var(--r-s); font-size: 14px; background: #fff; border-color: var(--bl-linie-2); }
.bl-konfig .blk-meldung--gut{ background: #f3faf6; border-color: #cfe7da; color: #1d5f38; }
.bl-konfig .blk-meldung--warn{ background: #fff8ee; border-color: #f0dcbc; color: #7a4b00; }
.bl-konfig .blk-meldung--info{ background: var(--bl-blau-50); border-color: var(--bl-blau-100); color: var(--bl-blau-800); }

/* Ergebnis */
.bl-konfig .blk-ergebnis{ background: #fff; border: 1px solid var(--bl-linie-2); border-radius: var(--r-s); padding: 16px 18px; margin-top: 8px; box-shadow: var(--sh-1); }
.bl-konfig .blk-ergebnis h4{ font: 700 13px/1.2 var(--bl-f-kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--bl-text-3); margin: 0 0 10px; }
.bl-konfig .blk-wert b{ font-family: var(--bl-f-kopf); font-weight: 700; color: var(--bl-ink); font-variant-numeric: tabular-nums; }
.bl-konfig .blk-wert--haupt b{ color: var(--bl-ink); font-size: 26px; letter-spacing: -.01em; }
.bl-konfig .blk-wert span, .bl-konfig .blk-wert small{ color: var(--bl-text-2); }

/* Knoepfe wie die Hauptaktion der Seite */
.bl-konfig .blk-knopf{
  min-height: 52px; border-radius: var(--r-s); background: var(--bl-blau-500); border-color: var(--bl-blau-500);
  font-family: var(--bl-f-kopf); font-weight: 700; font-size: 16px;
  transition: background var(--m-fast) ease, box-shadow var(--m-base) var(--m-kurve);
}
.bl-konfig .blk-knopf:hover{ background: var(--bl-blau-600); box-shadow: var(--sh-2); }
.bl-konfig .blk-knopf--zweit{ background: #fff; color: var(--bl-blau-600); border: 1px solid var(--bl-linie-2); }
.bl-konfig .blk-knopf--zweit:hover{ background: #fff; border-color: var(--bl-blau-500); box-shadow: none; }
.bl-konfig .blk-weg{ border-radius: var(--r-s); }

/* Link-Kachel "Wie viel brauche ich?" */
.bl-konfig .bl-konfig__kachel{ border: 1px solid var(--bl-linie-2); border-radius: var(--r-s); background: #fff; padding: 16px 18px; transition: border-color var(--m-fast) ease; }
.bl-konfig .bl-konfig__kachel:hover{ border-color: var(--bl-blau-500); background: #fff; }
.bl-konfig .bl-konfig__kachel-knopf{ background: var(--bl-blau-800); border-radius: var(--r-s); min-height: 44px; }
.bl-konfig .bl-konfig__kachel:hover .bl-konfig__kachel-knopf{ background: var(--bl-blau-600); }

@media (max-width: 749px){
  .bl-konfig .blk-reiter{ display: flex; }
  .bl-konfig .blk-reiter button{ flex: 1 1 0; padding: 0 10px; }
}

/* ============================================================================
   WORDPRESS (Jury J1/J5, bauplan.md 5.3 und 9.5, 2026-10-19)
   Kein sichtbarer Text unter 13 px (oben angehoben), Tippziele mindestens 44 x 44 px,
   Kontrollkaesten mit 44-px-Klickflaeche, sichtbarer Fokusring 2 px.
   ========================================================================== */
.blk-feld input,
.blk-feld select,
.blk-schenkel__zeile input { min-height: 44px; }
.blk-reiter button,
.bl-konfig .blk-reiter button { min-height: 44px; }
.blk-knopf { min-height: 44px; }
.blk-weg { min-width: 44px; min-height: 44px; }
.blk-schalter { min-height: 44px; padding: 0; cursor: pointer; }
.blk-schalter input { width: 24px; height: 24px; }
.blk-schenkel__zeile { grid-template-columns: 34px 1fr 1fr 44px; }
.blk :focus-visible { outline: 2px solid var(--blk-akzent); outline-offset: 2px; }
.b-ohnejs { font-size: 14px; }
@media (max-width: 520px) {
  .blk-schenkel__zeile { grid-template-columns: 28px 1fr 1fr 44px; }
}