/* Blechbearbeitung — „Werkhalle live". Kopf (.buehne-klein, aus basis.css) mit erzeugter
   Abwicklungszeichnung, Bühne „Biegen" (Simulation, Grundregeln in sim.css), danach Maschinenpark,
   Branchen, Materiallager. Farben nur über die Tokens aus BRIEF.md (mit Ersatzwerten). */
.seite-blechbearbeitung {
  --bb-mono: var(--schrift-mono, var(--schrift-daten, ui-monospace, Menlo, monospace));
  --bb-anzeige: var(--schrift-anzeige, 'Barlow Semi Condensed', 'Arial Narrow', sans-serif);
  --bb-text: var(--text, #15191c);
  --bb-leise: var(--text-leise, #5b6670);
  --bb-linie: var(--linie, rgba(21, 25, 28, .16));
  --bb-flaeche: var(--flaeche, #eceeee);
  --bb-mulde: var(--mulde, rgba(21, 25, 28, .05));
  --bb-rot: var(--rot, #e2231a);
  --bb-stahl: var(--stahl, #aeb7bd);
}

/* --- Kopf: erzeugte Abwicklung im Szenen-Slot (nie über dem Foto) ------------------------- */
.bb-abwicklung { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bb-abw__ebene { will-change: transform; }
.bb-abw__raster { stroke: var(--bb-linie); stroke-width: 1; opacity: .45; fill: none; }
.bb-abw__kontur { fill: none; stroke: var(--bb-leise); stroke-width: 1.4; opacity: .55; }
.bb-abw__biege line { stroke: var(--bb-rot); stroke-width: 1.2; stroke-dasharray: 14 6 3 6; opacity: .7; }
.bb-abw__loch { fill: none; stroke: var(--bb-leise); stroke-width: 1.2; opacity: .5; }
.bb-abw__mass line { stroke: var(--bb-leise); stroke-width: 1; opacity: .55; }
.bb-abw__mass text { font: 500 22px var(--bb-mono); fill: var(--bb-leise); text-anchor: middle; opacity: .8; }
.bb-abw__mass .bb-abw__notiz { text-anchor: start; }
.js .bb-abw__biege line { animation: bb-strich 14s linear infinite; }
@keyframes bb-strich { to { stroke-dashoffset: -290; } }
@media (max-width: 760px) { .bb-abwicklung { opacity: .4; } }

/* --- Abschnittsleiste ------------------------------------------------------------------- */
.bb-index { border-block: 1px solid var(--bb-linie); background: var(--grund, #f5f6f4); }
.bb-index__innen { display: flex; gap: 8px 32px; flex-wrap: wrap; padding-block: 14px; }
.bb-index a {
  display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; align-items: center;
  font: 600 1rem/1 var(--bb-anzeige); letter-spacing: .02em; text-transform: uppercase;
  color: var(--bb-text); text-decoration: none;
}
.bb-index a span { font: 500 .72rem/1 var(--bb-mono); color: var(--bb-leise); letter-spacing: 0; }
.bb-index a:hover { color: var(--rot-text, var(--bb-rot)); }

/* --- Bühne „Biegen" ------------------------------------------------------------------------ */
.bb-sim { background: var(--grund, #f5f6f4); color: var(--bb-text); }
.bb-sim .sim-buehne__klebe { display: grid; grid-template-columns: minmax(0, 1fr) min(392px, 100%); align-items: start;
  padding: clamp(20px, 4vh, 44px) max(16px, var(--rand, 56px)); gap: 24px; box-sizing: border-box; }
.bb-sim__text { position: relative; z-index: 2; max-width: 420px; pointer-events: none; }
.bb-sim__text button, .bb-sim__text a { pointer-events: auto; }
.bb-sim__marke { display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 500 .72rem/1.2 var(--bb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bb-leise); }
.bb-sim__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--bb-rot); }
.js .bb-sim__punkt { animation: bb-puls 2.4s ease-in-out infinite; }
@keyframes bb-puls { 50% { opacity: .25; } }
.bb-sim .sim-kapitel { position: relative; }
.bb-sim__nr { margin: 0; font: 500 .75rem/1 var(--bb-mono); color: var(--bb-leise); }
.bb-sim__titel { margin: 6px 0 12px; font: 700 clamp(2.4rem, 1.4rem + 3vw, 4.4rem)/.95 var(--bb-anzeige);
  letter-spacing: -.01em; text-transform: uppercase; }
.bb-sim__absatz { margin: 0 0 14px; font-size: 1rem; line-height: 1.55; max-width: 38ch; }
.bb-sim__formel { margin: 0 0 10px; font: 500 .9rem/1.4 var(--bb-mono); display: inline-flex; flex-wrap: wrap; gap: 4px 12px;
  padding: 8px 12px; border-radius: 10px; background: var(--tafel, rgba(250, 251, 251, .8)); border: 1px solid var(--bb-linie);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bb-sim__formel sub { font-size: .72em; line-height: 0; vertical-align: -.3em; }
.bb-sim__formel span { color: var(--bb-leise); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; align-self: center; }
.bb-sim__hinweis { margin: 0; font-size: .85rem; color: var(--bb-leise); }
.bb-sim__wechsel { display: flex; gap: 6px; margin-top: 18px; }
.bb-sim__sprung { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bb-linie);
  background: var(--tafel, rgba(250, 251, 251, .8)); color: var(--bb-text); cursor: pointer;
  font: 600 .95rem/1 var(--bb-anzeige); letter-spacing: .03em; text-transform: uppercase; }
.bb-sim__sprung[aria-current="true"] { border-color: var(--bb-text); background: var(--bb-text); color: var(--grund, #fff); }
.bb-sim__sprung:focus-visible { outline: 2px solid var(--bb-rot); outline-offset: 2px; }
.bb-sim__tafel { position: relative; z-index: 2; align-self: center; width: min(392px, 100%); }
.bb-walzleiste { display: none; }
.bb-sim__naht { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; padding: 4px 8px; border-radius: 6px;
  font: 500 .7rem/1 var(--bb-mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
  background: var(--bb-text); color: var(--grund, #fff); opacity: 0; transition: opacity .4s; }
.bb-sim__naht.ist-an { opacity: 1; }
.sim--ohne-webgl .bb-sim__tafel, .sim--ohne-webgl .bb-sim__hinweis { display: none; }
@media (max-width: 900px) {
  .bb-sim .sim-buehne__klebe { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: 16px; gap: 10px; }
  .bb-sim__text { max-width: none; }
  .bb-sim__titel { font-size: 2.2rem; margin: 4px 0 6px; }
  .bb-sim__absatz { font-size: .9rem; margin-bottom: 8px; max-width: 46ch; }
  .bb-sim__marke { margin-bottom: 8px; }
  .bb-sim__formel { font-size: .8rem; padding: 6px 10px; margin-bottom: 0; }
  .bb-sim__hinweis { display: none; }
  .bb-sim__wechsel { position: absolute; top: 0; right: 0; margin: 0; }
  .bb-sim__sprung { min-height: 38px; padding: 0 10px; font-size: .8rem; }
  .bb-sim__tafel { grid-row: 3; align-self: end; justify-self: stretch; width: 100%; }
}
@media (max-width: 560px) {
  .bb-sim__absatz, .bb-sim__marke { display: none; }
  .bb-sim__nr { margin-top: 4px; }
  .bb-sim__formel { font-size: .72rem; }
  .bb-sim__formel span { display: none; }
  .bb-sim__titel { font-size: 1.85rem; }
  .bb-sim__sprung { padding: 0 8px; }
}
@media (max-width: 900px) and (min-width: 561px) { .bb-sim__tafel { justify-self: end; width: min(440px, 100%); } }

/* --- Kapitel-Grundform ---------------------------------------------------------------------- */
.bb-kapitel { padding-block: var(--abstand, clamp(88px, 11vw, 184px)); scroll-margin-top: 80px; }
.bb-kapitel h2 { margin: 18px 0 22px; font: 700 clamp(2.2rem, 1.3rem + 3vw, 4rem)/1 var(--bb-anzeige); letter-spacing: -.01em; text-wrap: balance; }
.bb-nr { color: var(--rot-text, var(--bb-rot)); font-family: var(--bb-mono); }
.bb-kopfzeile { max-width: 900px; margin-bottom: clamp(40px, 6vw, 72px); }
.bb-vorspann, .bb-fliess { font-size: 1.0625rem; line-height: 1.7; color: var(--bb-leise); max-width: 62ch; margin: 0; }
.bb-fliess p { margin: 0 0 1em; } .bb-fliess p:last-child { margin: 0; }
.bb-textlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--bb-text);
  text-decoration: none; border-bottom: 1px solid currentColor; }
.bb-textlink svg { width: 18px; height: 18px; transition: transform .3s; }
.bb-textlink:hover { color: var(--rot-text, var(--bb-rot)); }
.bb-textlink:hover svg { transform: translateX(4px); }

/* --- Maschinenpark: Walzen-Umschalter ---------------------------------------------------- */
.walzwerk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start;
  padding-top: 32px; border-top: 1px solid var(--bb-linie); margin-bottom: clamp(56px, 8vw, 110px); }
.walzwerk__titel { margin: 0 0 16px; font: 700 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1.1 var(--bb-anzeige); }
.walzwerk__einleitung { margin: 0 0 20px; line-height: 1.7; color: var(--bb-leise); }
.walzwerk__wahl .wahl__leiste { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bb-mulde); }
.walzwerk__wahl .wahl__knopf { flex: 1; min-height: 46px; border: 0; border-radius: 9px; background: none; color: var(--bb-leise); cursor: pointer;
  font: 600 1rem/1 var(--bb-anzeige); letter-spacing: .02em; text-transform: uppercase; }
.walzwerk__wahl .wahl__knopf[aria-selected="true"] { background: var(--grund, #fff); color: var(--bb-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.walzwerk__wahl .wahl__knopf:focus-visible { outline: 2px solid var(--bb-rot); outline-offset: 1px; }
.walzwerk__wahl .wahl__tafeln { display: grid; }
.walzwerk__wahl .wahl__tafel { grid-area: 1 / 1; padding-top: 22px; transition: opacity .3s; }
.js .walzwerk__wahl .wahl__tafel[data-aktiv="false"] { opacity: 0; visibility: hidden; }
.bb-walztafel { display: grid; grid-template-columns: minmax(130px, 2fr) minmax(0, 3fr); gap: 24px; align-items: center; }
.bb-walzbild { width: 100%; height: auto; display: block; background: var(--bb-flaeche); border-radius: 12px; }
.bb-walzbild circle { fill: var(--grund, #fff); stroke: var(--bb-text); stroke-width: 1.4; }
.bb-walzbild path { fill: none; stroke: var(--bb-leise); stroke-width: .8; }
.bb-walze--ober circle { stroke: var(--bb-rot); }
.bb-walzbild__blech { stroke: var(--bb-text) !important; stroke-width: 2.4 !important; stroke-linecap: round; }
.bb-walzbild text { font: 500 7px var(--bb-mono); fill: var(--bb-leise); }
.bb-werte { margin: 0; }
.bb-werte__zeile { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--bb-linie); }
.bb-werte__zeile dt { font-weight: 600; }
.bb-werte__zeile dd { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.bb-werte__zeile dd b { font: 600 clamp(1.6rem, 1.2rem + 1vw, 2.2rem)/1 var(--bb-anzeige); font-variant-numeric: tabular-nums; }
.bb-werte__zeile dd i { font: 500 .75rem var(--bb-mono); font-style: normal; color: var(--bb-leise); }
.bb-werte__zeile small { grid-column: 1 / -1; color: var(--bb-leise); font-size: .85rem; }
.bb-werte__hinweis { margin: 18px 0 0; line-height: 1.6; color: var(--bb-leise); }

/* --- Datenblätter ------------------------------------------------------------------------- */
.datenblaetter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.datenblatt { min-width: 0; display: flex; flex-direction: column; border-radius: 16px; background: var(--bb-flaeche); border: 1px solid var(--bb-linie); overflow: hidden; }
.datenblatt__kopf { display: flex; gap: 10px; align-items: center; padding: 14px 18px; font: 500 .7rem/1 var(--bb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bb-leise); }
.datenblatt__nr { color: var(--rot-text, var(--bb-rot)); }
.datenblatt__blatt { margin-left: auto; }
.datenblatt__ansicht { margin: 0 18px; height: 120px; border-radius: 10px; background: var(--grund, #fff); border: 1px solid var(--bb-linie); }
.datenblatt__ansicht svg { width: 100%; height: 100%; display: block; }
.bb-ans__teil { fill: var(--bb-mulde); stroke: var(--bb-text); stroke-width: 1.2; stroke-linejoin: round; }
.bb-ans__blech { fill: none; stroke: var(--bb-stahl); stroke-width: 5; stroke-linecap: round; }
.bb-ans__mass { stroke: var(--bb-leise); stroke-width: 1; }
.bb-ans__naht { stroke: var(--bb-linie); stroke-width: 1; stroke-dasharray: 3 3; }
.bb-ans__raupe { fill: none; stroke: var(--bb-rot); stroke-width: 1.6; stroke-linecap: round; }
.bb-ans__schnitt { fill: none; stroke: var(--bb-rot); stroke-width: 1.6; stroke-dasharray: 6 5; }
.js .bb-ans__stempel { animation: bb-hub 3.6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes bb-hub { 0%, 100% { transform: translateY(-6px); } 45%, 60% { transform: translateY(4px); } }
.js .bb-ans__schnitt { animation: bb-strich-kurz 6s linear infinite; }
@keyframes bb-strich-kurz { to { stroke-dashoffset: -110; } }
.js .bb-ans__raupe { stroke-dasharray: 120; animation: bb-raupe 4s ease-in-out infinite; }
@keyframes bb-raupe { from { stroke-dashoffset: 120; } 70%, to { stroke-dashoffset: 0; } }
.datenblatt__inhalt { padding: 20px 18px 22px; display: flex; flex-direction: column; flex: 1; }
.datenblatt__titel { margin: 0 0 10px; font: 700 1.5rem/1.1 var(--bb-anzeige); }
.datenblatt__titel.bb-abstand { margin-top: 26px; }
.datenblatt__hinweis { margin: 0 0 14px; line-height: 1.6; color: var(--bb-leise); font-size: .95rem; }
.datenblatt__hinweis.bb-abstand { margin-top: 18px; }
.datenblatt__werte { list-style: none; margin: 0; padding: 0; }
.datenblatt__werte li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--bb-linie); font-size: .95rem; }
.datenblatt__werte b { font: 500 .85rem/1.4 var(--bb-mono); text-align: right; }
.datenblatt__knopf { margin-top: auto; padding-top: 18px; }

/* --- Branchen ------------------------------------------------------------------------------- */
.bb-kunden { background: var(--bb-flaeche); }
.bb-kunden__duo { align-items: center; }
.bb-kunden__foto { margin: 0; border-radius: 4px; }
.bb-kunden__foto img { aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* --- Materiallager --------------------------------------------------------------------------- */
.bb-lager__kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); align-items: center; }
.bb-lager__kopf .bb-kopfzeile { margin-bottom: 0; }
.tafelformate { margin: 0; }
.tafelformate svg { width: 100%; height: auto; display: block; overflow: visible; color: var(--bb-text); }
.tafelformate .tafel rect { fill: var(--bb-mulde); stroke: var(--bb-text); stroke-width: .6; transition: fill .3s, stroke .3s, opacity .3s; }
.tafelformate .tafel__diag { stroke: var(--bb-linie); stroke-width: .4; }
.tafelformate .tafel__pos { fill: var(--grund, #fff); stroke: var(--bb-text); stroke-width: .5; }
.tafelformate .tafel__pos-text { font: 600 6px var(--bb-mono); text-anchor: middle; fill: var(--bb-text); }
.tafelformate .mass-linie line { stroke: var(--bb-leise); stroke-width: .4; }
.tafelformate .mass-linie .hilf { stroke-dasharray: 1 1.5; }
.tafelformate .mass-linie text { font: 500 5px var(--bb-mono); fill: var(--bb-leise); }
.tafelformate marker path { fill: var(--bb-leise); }
.tafelformate__mm { font: 500 5px var(--bb-mono); fill: var(--bb-leise); letter-spacing: .08em; text-transform: uppercase; }
.tafelformate .tafel.ist-hervor rect { fill: color-mix(in srgb, var(--bb-rot) 14%, transparent); stroke: var(--bb-rot); stroke-width: 1; }
.tafelformate .tafel.ist-leer { opacity: .3; }
.bb-filter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 32px; align-items: end;
  margin: clamp(40px, 6vw, 72px) 0 24px; padding-top: 28px; border-top: 1px solid var(--bb-linie); }
.bb-filter label { font: 700 1.3rem/1.2 var(--bb-anzeige); }
.bb-filter input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bb-linie);
  background: var(--grund, #fff); color: var(--bb-text); font: 500 1rem var(--bb-mono); }
.bb-filter input:focus-visible { outline: 2px solid var(--bb-rot); outline-offset: 1px; }
.bb-filter small { grid-column: 2; font: 500 .75rem var(--bb-mono); color: var(--bb-leise); }
.bb-tabelle { overflow-x: auto; border-radius: 14px; border: 1px solid var(--bb-linie); }
.bb-tabelle:focus-visible { outline: 2px solid var(--bb-rot); outline-offset: 2px; }
.bb-daten { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .95rem; text-align: left; }
.bb-daten caption { caption-side: bottom; text-align: left; padding: 14px 18px; font-size: .85rem; color: var(--bb-leise); line-height: 1.6; }
.bb-daten th, .bb-daten td { padding: 14px 18px; border-bottom: 1px solid var(--bb-linie); vertical-align: top; }
.bb-daten thead th { background: var(--bb-flaeche); font: 600 .78rem/1.3 var(--bb-mono); white-space: nowrap; }
.bb-daten tbody th { font-weight: 600; }
.bb-daten tbody th small { display: block; font-weight: 400; font-size: .82rem; color: var(--bb-leise); margin-top: 2px; }
.bb-daten td { font: 400 .85rem/1.6 var(--bb-mono); }
.bb-pos { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; border: 1px solid currentColor; font-size: .65rem; }
.bb-daten[data-spalte="A"] [data-format="A"], .bb-daten[data-spalte="B"] [data-format="B"], .bb-daten[data-spalte="C"] [data-format="C"] { background: var(--bb-mulde); }

@media (max-width: 1000px) {
  .datenblaetter { grid-template-columns: 1fr 1fr; }
  .datenblatt:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .walzwerk, .bb-lager__kopf, .bb-filter { grid-template-columns: 1fr; }
  .bb-filter small { grid-column: 1; }
  .datenblaetter { grid-template-columns: 1fr; }
  .bb-walztafel { grid-template-columns: 1fr; }
  .bb-walzbild { max-width: 260px; }
  .bb-index__innen { gap: 0 20px; padding-block: 6px; }
  .bb-index a { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .bb-abw__biege line, .js .bb-ans__stempel, .js .bb-ans__schnitt, .js .bb-ans__raupe, .js .bb-sim__punkt { animation: none; }
  .js .bb-ans__raupe { stroke-dashoffset: 0; }
}