/* ==========================================================================
   Hagge Schweißbetrieb – Stylesheet (dunkles Design, mobile first)
   Die Grundwerte gelten fürs Handy. Darüber erweitern min-width-Abfragen:
   ab 640 px (Tablet hoch), ab 900 px (Tablet quer / kleiner Rechner) und
   ab 1100 px (volle Navigation, Schnellzugriffsleiste aus).
   Schriften: Archivo breit (Titel), Barlow (Text). Akzent: Hagge-Blau aus dem
   Logo 2017 (#005aaa), für dunklen Grund aufgehellt.
   ========================================================================== */
:root {
  color-scheme: dark;
  --akzent: #3b9ae8;
  --akzent-dunkel: #2a84d0;
  --auf-akzent: #06131b;
  --logo-blau: #005aaa;
  --text: #e3e9ed;
  --titel: #ffffff;
  --grau: #9aa7b0;
  --linie: #28323a;
  --linie-feld: #34404a;
  --grund: #0e1215;
  --flaeche: #1a2127;
  --karte: #141a1f;
  --feld: #10161a;
  --zeichnung: #c9d3d9;
  --beton: #3d474e;
  --schatten: 0 20px 50px rgba(0, 0, 0, .45);
  --glanz: rgba(59, 154, 232, .45);
  --radius: 4px;
  --radius-knopf: 3px;
  --schrift-titel: Archivo, "Arial Black", sans-serif;
  --schrift-text: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  --breite: 1280px;
  --kopf-hoehe: 64px;
  --leiste-hoehe: 62px;
}
@media (min-width: 1100px) { :root { --kopf-hoehe: 84px; --leiste-hoehe: 0px; } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-tap-highlight-color: rgba(59, 154, 232, .25); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 60px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.6; color: var(--text); background: var(--grund); }
/* Lange deutsche Wörter (Schweißfachingenieur, Konstruktionstechnik …) dürfen auf schmalen Bildschirmen trennen */
p, li, small, b, strong, legend, summary, label, dd, dt, td, th, figcaption { overflow-wrap: break-word; hyphens: auto; }
.knopf, .knopf *, .nav, .aktionsleiste, .kopf { hyphens: manual; }
body.mit-leiste { padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom)); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> (WebP + JPEG-Rückfall) nimmt nicht am Layout teil: das <img> verhält sich wie ein direktes Kind */
picture { display: contents; }
a { color: var(--akzent); }
h1, h2, h3, h4 { font-family: var(--schrift-titel); line-height: 1.08; margin: 0 0 .5em; color: var(--titel); font-weight: 800; font-stretch: 108%; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
p, li { text-wrap: pretty; }
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }
.ergebnis b, .pr-gross b, td.z, .stueckliste td, .pl-tabelle input, .kennzahl b { font-variant-numeric: tabular-nums; }
h1, h2 { text-transform: uppercase; }
h1 { font-size: clamp(2.1rem, 9vw, 4.8rem); }
h2 { font-size: clamp(1.6rem, 6.4vw, 3rem); }
h3 { font-size: 1.2rem; }
@media (min-width: 900px) { h1, h2, h3 { font-stretch: 118%; } body { font-size: 1.1rem; } }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.innen { width: min(100% - 32px, var(--breite)); margin-inline: auto; }
.sprung { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--akzent); color: var(--auf-akzent); padding: 10px 16px; border-radius: 6px; }
.sprung:focus { left: 8px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.klein { font-size: .85rem; color: var(--grau); margin: .8em 0 0; }
.kleingedrucktes { font-size: .88rem; color: var(--grau); margin-top: 24px; max-width: 760px; }
.eyebrow { font-family: var(--schrift-titel); font-stretch: 112%; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); margin: 0 0 .9em; }
.lead { font-size: 1.05rem; color: var(--grau); max-width: 680px; }
@media (min-width: 900px) { .eyebrow { font-size: .8rem; } .lead { font-size: 1.25rem; } }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .7em 1.2em;
  border-radius: var(--radius-knopf); border: 2px solid transparent; font-weight: 700; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; line-height: 1.2; transition: background .18s, color .18s, border-color .18s, box-shadow .18s; }
.knopf .ic { transition: transform .18s; }
.knopf:hover .ic { transform: translateX(3px); }
.knopf-primaer { background: var(--akzent); color: var(--auf-akzent); }
.knopf-primaer:hover { background: var(--akzent-dunkel); box-shadow: 0 0 28px var(--glanz); }
.knopf-zweit { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.knopf-zweit:hover { background: #fff; color: var(--grund); border-color: #fff; }
.knopf-dezent { background: var(--flaeche); color: var(--text); border-color: var(--linie); min-height: 42px; padding: .5em 1em; font-size: .82rem; }
.knopf-dezent:hover { border-color: var(--akzent); }
.knopf-dezent:hover .ic { transform: none; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopf.breit { width: 100%; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.knopfreihe .knopf { flex: 1 1 200px; }
@media (min-width: 640px) { .knopfreihe .knopf { flex: 0 0 auto; } }
.klein-knoepfe { margin-top: 10px; gap: 8px; }
.klein-knoepfe .knopf { flex: 1 1 140px; }
.mehr { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--akzent); }

/* ---------- Kopf und Navigation ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(14, 18, 21, .97); border-bottom: 1px solid var(--linie); transition: background .25s, border-color .25s; }
.startseite .kopf { position: fixed; left: 0; right: 0; background: linear-gradient(rgba(6, 9, 12, .8), rgba(6, 9, 12, 0)); border-color: transparent; }
.startseite .kopf.verdichtet, body.menue-offen .kopf { background: #0e1215; border-color: var(--linie); }
.kopf-innen { display: flex; align-items: center; gap: 8px; min-height: var(--kopf-hoehe); }
.marke { margin-right: auto; padding: 6px 0; }
.marke img { width: auto; height: calc(var(--kopf-hoehe) - 16px); }
.kopf-tel, .menue-knopf { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-knopf); background: transparent; color: #fff; cursor: pointer; }
.kopf-tel .ic, .menue-knopf .ic { width: 22px; height: 22px; }
.kopf-cta { display: none; }

/* Handy: Menü als Vollbild-Tafel mit Gruppen – alles sofort sichtbar, nichts aufzuklappen */
.nav { position: fixed; top: var(--kopf-oben, var(--kopf-hoehe)); left: 0; right: 0; bottom: 0; z-index: 49; background: #0e1215; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 16px calc(28px + env(safe-area-inset-bottom)); transform: translateX(100%); visibility: hidden; transition: transform .25s, visibility .25s; }
body.menue-offen { overflow: hidden; }
body.menue-offen .nav { transform: none; visibility: visible; }
.nav > ul { list-style: none; display: grid; }
.nav > ul > li { border-bottom: 1px solid var(--linie); }
.nav > ul > li > a { display: flex; justify-content: space-between; align-items: center; padding: 15px 2px; color: #fff; text-decoration: none;
  font-family: var(--schrift-titel); font-stretch: 110%; font-weight: 700; font-size: 1.05rem; text-transform: uppercase; }
.nav > ul > li > a .ic { color: var(--akzent); }
.nav a[aria-current="page"] { color: var(--akzent); }
.hat-unter > button { display: block; width: 100%; padding: 18px 2px 10px; border: 0; background: none; text-align: left; pointer-events: none;
  font-family: var(--schrift-titel); font-stretch: 112%; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); }
.hat-unter > button svg { display: none; }
.unter { list-style: none; display: grid; gap: 8px; padding: 0 0 16px; }
.unter-leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unter a { display: flex; align-items: center; gap: 10px; min-height: 58px; height: 100%; padding: 10px 12px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.unter a:hover, .unter a[aria-current="page"] { border-color: var(--akzent); }
.nav-ic { display: grid; place-items: center; flex: none; color: var(--akzent); }
.nav-ic .ic { width: 22px; height: 22px; }
.unter b { display: block; font-weight: 700; font-size: .98rem; line-height: 1.2; }
.unter small { display: block; color: var(--grau); font-size: .8rem; line-height: 1.25; }
.unter-leistungen small { display: none; }
.nav-kontakt { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 640px) { .unter-leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); } .unter-planen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .unter-leistungen small { display: block; } }

@media (min-width: 1100px) {
  .kopf-innen { gap: 16px; }
  .kopf-tel, .menue-knopf, .nav-kontakt { display: none; }
  .kopf-cta { display: inline-flex; min-height: 44px; padding: .55em 1.1em; }
  .nav { position: static; transform: none; visibility: visible; background: none; padding: 0; overflow: visible; }
  .nav > ul { display: flex; align-items: center; gap: 2px; }
  .nav > ul > li { border: 0; }
  .nav > ul > li > a .ic { display: none; }
  .nav > ul > li > a, .hat-unter > button { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 10px 10px; pointer-events: auto; cursor: pointer;
    font-family: var(--schrift-text); font-stretch: normal; font-size: .9rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #dfe6ea; }
  .nav > ul > li > a:hover, .hat-unter > button:hover, .hat-unter.aktiv > button, .nav > ul > li > a[aria-current="page"] { color: var(--akzent); }
  .hat-unter { position: relative; }
  .nav > ul > li > a, .hat-unter > button { white-space: nowrap; }
  .hat-unter > button svg { display: block; width: 12px; height: 12px; transition: transform .2s; }
  .hat-unter::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
  .unter { position: absolute; top: calc(100% + 10px); left: -8px; width: 330px; gap: 2px; padding: 8px; background: #151b20; border: 1px solid var(--linie); border-top: 2px solid var(--akzent);
    box-shadow: var(--schatten); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
  .unter-leistungen { width: 540px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unter-planen { grid-template-columns: minmax(0, 1fr); }
  .unter-leistungen small { display: block; }
  .hat-unter:hover .unter, .hat-unter.offen .unter, .hat-unter:focus-within .unter { opacity: 1; visibility: visible; transform: none; }
  .hat-unter:hover > button svg, .hat-unter.offen > button svg { transform: rotate(180deg); }
  .unter a { min-height: 0; padding: 10px 12px; background: none; border: 0; border-left: 2px solid transparent; border-radius: 0; }
  .unter a:hover, .unter a[aria-current="page"] { background: var(--flaeche); border-left-color: var(--akzent); }
}

/* ---------- Schnellzugriff (Handy/Tablet) ---------- */
.aktionsleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1.3fr 1fr;
  background: rgba(10, 13, 16, .98); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
.aktionsleiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--leiste-hoehe); color: #dfe6ea; text-decoration: none;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.aktionsleiste .ic { width: 22px; height: 22px; }
.aktionsleiste a[aria-current="page"] { color: var(--akzent); }
.aktionsleiste .al-haupt { background: var(--akzent); color: var(--auf-akzent); }
.aktionsleiste .al-haupt[aria-current="page"] { color: var(--auf-akzent); }
body.menue-offen .aktionsleiste { display: none; }
@media (min-width: 1100px) { .aktionsleiste { display: none; } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 48px 0; }
.abschnitt-eng { padding-top: 28px; }
.abschnitt-kopf { max-width: 760px; margin-bottom: 22px; }
.abschnitt-kopf.zeile { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 20px; flex-wrap: wrap; }
.abschnitt-kopf.zeile .knopf { margin: 0; }
.abschnitt-kopf p:last-child { margin-bottom: 0; }
.abschnitt-kopf > p:not(.eyebrow) { color: var(--grau); }
.abschnitt-grau { background: #12181c; }
.abschnitt-dunkel { background: #0a0d10; border-block: 1px solid var(--linie); }
@media (min-width: 900px) { .abschnitt { padding: clamp(64px, 8vw, 104px) 0; } .abschnitt-eng { padding-top: 40px; } .abschnitt-kopf { margin-bottom: 40px; } }

/* ---------- Startseite: Held ---------- */
.held { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; min-height: min(66svh, 560px); overflow: hidden; background: #000; }
.held-bild { position: absolute; inset: 0; }
.held-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.held-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 11, 14, .97) 0%, rgba(8, 11, 14, .78) 42%, rgba(8, 11, 14, .3) 100%); }
.held-text { position: relative; padding: calc(var(--kopf-hoehe) + 28px) 0 24px; }
.held .held-titel { font-family: var(--schrift-titel); font-weight: 800; text-transform: uppercase; color: var(--titel); font-size: clamp(2.8rem, 13vw, 8.6rem); line-height: .88; font-stretch: 112%; letter-spacing: -.02em; margin: 0 0 .3em; }
.held h1.held-h1 { font-size: .78rem; line-height: 1.45; font-weight: 600; font-stretch: 112%; letter-spacing: .16em; color: var(--akzent); max-width: 34em; margin: 0 0 1em; }
.held .lead { color: #cdd6dc; margin-bottom: 0; }
.held .knopfreihe { margin-top: 18px; }
.held .knopfreihe .knopf { flex: 1 1 140px; padding-inline: .8em; }
@media (min-width: 640px) { .held-punkte { display: flex; } .held .knopfreihe .knopf { flex: 0 0 auto; padding-inline: 1.2em; } }
.held-punkte { list-style: none; display: none; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #cfd8de; }
.held-punkte li { display: inline-flex; align-items: center; gap: 8px; }
.held-punkte .ic { color: var(--akzent); width: 20px; height: 20px; }
@media (min-width: 900px) {
  .held { min-height: min(92svh, 900px); }
  .held-bild::after { background: linear-gradient(90deg, rgba(8, 11, 14, .92) 0%, rgba(8, 11, 14, .6) 45%, rgba(8, 11, 14, .1) 78%), linear-gradient(0deg, rgba(8, 11, 14, .9) 0%, transparent 40%); }
  .held-text { padding-bottom: 64px; }
  .held .held-titel { font-stretch: 125%; }
  .held .lead { max-width: 560px; }
  .held-punkte { display: flex; font-size: .86rem; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
}

/* ---------- Startseite: Themenwahl ---------- */
.themen-abschnitt { padding-top: 36px; }
.themen { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.thema { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: #fff; text-decoration: none; }
.thema img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.thema::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 11, 14, .92) 0%, rgba(8, 11, 14, .35) 55%, rgba(8, 11, 14, 0) 100%); }
.thema-text { position: absolute; left: 12px; right: 34px; bottom: 11px; z-index: 1; }
.thema b { display: block; font-family: var(--schrift-titel); font-stretch: 110%; font-weight: 800; font-size: clamp(.9rem, 4.6vw, 1.05rem); line-height: 1.1; text-transform: uppercase; hyphens: manual; }
@media (max-width: 639px) { .thema-text { right: 12px; } .thema > .ic { top: 11px; bottom: auto; } }
.thema small { display: block; margin-top: 3px; font-size: .8rem; line-height: 1.3; color: #cdd6dc; }
.thema > .ic { position: absolute; right: 11px; bottom: 13px; z-index: 1; color: var(--akzent); transition: transform .2s; }
.thema:hover { border-color: var(--akzent); }
.thema:hover img { transform: scale(1.05); }
.thema:hover > .ic { transform: translateX(3px); }
@media (min-width: 640px) { .themen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .thema { aspect-ratio: 4 / 3; } .thema b { font-size: 1.2rem; } }
@media (min-width: 1100px) { .themen { grid-template-columns: repeat(6, minmax(0, 1fr)); } .thema { aspect-ratio: 3 / 4; } }
.themen > li:first-child { grid-column: 1 / -1; }
.themen > li:first-child .thema { aspect-ratio: 2 / 1; }
@media (min-width: 640px) { .themen > li:first-child .thema { aspect-ratio: 3 / 1; } .themen > li:first-child .thema b { font-size: 1.6rem; } }
@media (min-width: 1100px) { .themen > li:first-child .thema { aspect-ratio: 4 / 1; } }

/* ---------- Online-Werkzeuge ---------- */
.werkzeuge { background: radial-gradient(900px 400px at 85% 0%, rgba(59, 154, 232, .14), transparent 70%), var(--grund); }
.wz-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wz-karte { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.wz-karte:hover { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent), 0 24px 60px rgba(0, 0, 0, .5); }
.wz-bild { display: grid; place-items: center; align-self: stretch; padding: 8px 6px; border-radius: 3px; background: #10161a;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 20px 20px; }
.wz-text .wz-titel { font-size: 1.02rem; text-transform: uppercase; margin-bottom: .25em; }
.wz-text p { font-size: .9rem; line-height: 1.45; color: var(--grau); margin: 0 0 .45em; }
.wz-text .mehr { font-size: .9rem; }
/* Übersichtsseite: große Karten mit Merkmalen, auch am Handy untereinander (Bild oben) */
.wz-gross .wz-karte { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; align-items: stretch; }
.wz-gross .wz-bild { padding: 18px 24px 8px; border-radius: 0; }
.wz-gross .wz-text { padding: 16px 18px 20px; }
.wz-gross .wz-text .wz-titel { font-size: 1.25rem; }
.wz-merkmale { font-size: .95rem; margin: 10px 0 14px; }
@media (min-width: 900px) {
  .wz-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .wz-karte { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0; }
  .wz-karte:hover { transform: translateY(-3px); }
  .wz-bild { padding: 26px 30px 12px; border-radius: 0; }
  .wz-text { padding: 20px 26px 26px; }
  .wz-text .wz-titel { font-size: 1.35rem; }
  .wz-text p { font-size: 1rem; }
}
.mg-stahl rect { fill: var(--zeichnung); }
.mg-boden { fill: var(--linie); }
.mg-mass line { stroke: var(--akzent); stroke-width: 1.5; }
.mp-teil { fill: var(--zeichnung); }
.mp-loch { fill: var(--flaeche); }
.mh-dach { fill: #e3e4dd; stroke: #7b858b; stroke-width: 1.2; }
.mh-dach2 { fill: #9aa3a8; }
.mh-seite { fill: #2f5f4d; }
.mh-giebel { fill: #3f7361; }
.mh-tor { fill: #d5d9d6; }
.mh-linie { stroke: var(--akzent); stroke-width: 2; fill: none; }

/* ---------- Referenzband ---------- */
.referenzband { border-top: 1px solid var(--linie); }
.band-spur { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 420px); gap: 10px; overflow-x: auto; padding: 4px 16px 16px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--akzent) var(--flaeche); }
.band-kachel { height: 300px; scroll-snap-align: start; }
.band-kachel .kachel-titel { font-family: var(--schrift-titel); font-stretch: 110%; text-transform: uppercase; font-size: .9rem; letter-spacing: .02em; }
@media (min-width: 900px) { .band-spur { grid-auto-columns: clamp(260px, 30vw, 420px); gap: 14px; padding-inline: max(16px, calc((100vw - var(--breite)) / 2)); } .band-kachel { height: clamp(340px, 36vw, 480px); } }

/* ---------- Fakten, Karriere, Kontakt ---------- */
.fakten { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.fakten b { display: block; font-family: var(--schrift-titel); font-stretch: 118%; font-weight: 800; font-size: clamp(1.9rem, 8vw, 3.4rem); line-height: 1; color: var(--akzent); }
.fakten span { display: block; font-weight: 700; margin: 8px 0 4px; color: #fff; }
.fakten p { margin: 0; color: var(--grau); font-size: .92rem; line-height: 1.45; }
@media (min-width: 900px) { .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.faktenband { background: #0a0d10; padding: 40px 0; border-block: 1px solid var(--linie); }

.karriereband { position: relative; display: flex; align-items: center; min-height: 420px; overflow: hidden; }
.kb-bild { position: absolute; inset: 0; }
.kb-bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); }
.kb-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 11, 14, .94) 0%, rgba(8, 11, 14, .78) 60%, rgba(0, 90, 170, .4) 100%); }
.kb-inhalt { position: relative; padding: 56px 0; }
.kb-inhalt h2 { font-size: clamp(2rem, 8vw, 4rem); line-height: .95; }
.kb-inhalt p:not(.eyebrow) { color: #cdd6dc; max-width: 520px; }
@media (min-width: 900px) { .karriereband { min-height: 520px; } .kb-inhalt { padding: 72px 0; } }

.kontaktband { padding: 48px 0; border-top: 1px solid var(--linie); background: linear-gradient(135deg, #0f1a21 0%, #0e1215 60%); }
.kb-innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.kb-innen h2 { font-size: clamp(1.6rem, 6vw, 2.8rem); }
.kb-innen > div > p:not(.eyebrow) { color: var(--grau); margin: 0; }
.kb-wege { display: grid; gap: 10px; }
.kb-weg { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); text-decoration: none; color: inherit; font-weight: 700; font-size: 1.02rem;
  background: var(--karte); border: 1px solid var(--linie); overflow-wrap: anywhere; }
.kb-weg:hover { border-color: var(--akzent); color: var(--akzent); }
.kb-weg .ic { width: 26px; height: 26px; color: var(--akzent); }
.kb-weg small { display: block; font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
@media (min-width: 900px) { .kontaktband { padding: clamp(64px, 7vw, 96px) 0; } .kb-innen { grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; } .kb-weg { font-size: 1.1rem; padding: 16px 20px; } }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf { position: relative; display: flex; align-items: flex-end; min-height: 280px; overflow: hidden; background: #000; border-bottom: 1px solid var(--linie); }
.sk-bild { position: absolute; inset: 0; }
.sk-bild img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.sk-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 18, 21, 1) 0%, rgba(14, 18, 21, .55) 50%, rgba(14, 18, 21, .25) 100%); }
.sk-text { position: relative; padding: 48px 0 26px; }
.seitenkopf .lead { color: #cdd6dc; margin-bottom: 0; }
.seitenkopf .knopfreihe { margin-top: 18px; }
.krumen { display: flex; flex-wrap: wrap; gap: .5em; font-size: .82rem; color: #aeb9c0; margin-bottom: 14px; }
.krumen a { color: inherit; }
.seitenkopf-kompakt { min-height: 0; background: radial-gradient(700px 300px at 90% 0%, rgba(59, 154, 232, .16), transparent 70%), #0e1215; }
.seitenkopf-kompakt .sk-text { padding: 28px 0 24px; }
.seitenkopf-kompakt h1 { font-size: clamp(2rem, 8vw, 3.6rem); }
@media (min-width: 900px) { .seitenkopf { min-height: 440px; } .sk-text { padding: 120px 0 48px; } .seitenkopf-kompakt .sk-text { padding: 56px 0 40px; } .krumen { margin-bottom: 18px; } }

/* ---------- Metallbau: Sprungleiste und Leistungsabschnitte ---------- */
.sprungleiste { position: sticky; top: var(--kopf-hoehe); z-index: 20; background: rgba(14, 18, 21, .97); border-bottom: 1px solid var(--linie); }
.sprungleiste .innen { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.sprungleiste .innen::-webkit-scrollbar { display: none; }
.sprungleiste a { flex: none; padding: .45em 1em; border: 1px solid var(--linie); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; transition: background .15s, color .15s, border-color .15s; }
.sprungleiste a:hover { border-color: var(--akzent); color: var(--akzent); }
.sprungleiste a.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.leistung + .leistung { border-top: 1px solid var(--linie); }
.leistung-raster-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ld-text h2 { font-size: clamp(1.6rem, 6.4vw, 2.6rem); }
.ld-text > p { color: var(--grau); }
.ld-text .knopfreihe { margin-top: 18px; }
@media (min-width: 900px) {
  .leistung-raster-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
  .leistung-gegen .leistung-raster-detail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .leistung-gegen .ld-text { order: 2; }
}

/* ---------- Galerien ---------- */
.galerie { display: grid; gap: 10px; }
.galerie-kachel, .band-kachel { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--flaeche); color: #fff; text-decoration: none; }
.galerie-kachel img, .band-kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.galerie-kachel:hover img, .band-kachel:hover img { transform: scale(1.04); }
.kachel-titel { position: absolute; inset: auto 0 0 0; padding: 36px 14px 12px; font-size: .86rem; font-weight: 600; line-height: 1.3;
  background: linear-gradient(transparent, rgba(8, 12, 16, .8)); opacity: 1; transition: opacity .25s, transform .25s; }
@media (hover: hover) { .galerie-kachel .kachel-titel { opacity: 0; transform: translateY(6px); } .galerie-kachel:hover .kachel-titel, .galerie-kachel:focus-visible .kachel-titel { opacity: 1; transform: none; } }
/* Leistungsgalerie: am Handy seitlich wischen statt sechs Bilder untereinander */
.galerie-leistung { grid-auto-flow: column; grid-auto-columns: 76%; grid-template-rows: 230px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 6px; scrollbar-width: none; }
.galerie-leistung::-webkit-scrollbar { display: none; }
.galerie-leistung .galerie-kachel { scroll-snap-align: start; }
@media (min-width: 640px) { .galerie-leistung { grid-auto-columns: 46%; grid-template-rows: 260px; } }
@media (min-width: 900px) {
  .galerie-leistung { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 170px; gap: 14px; overflow: visible; margin-inline: 0; padding: 0; }
  .galerie-leistung .galerie-kachel:first-child { grid-column: span 2; grid-row: span 2; }
  .galerie-leistung.galerie-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; }
  .galerie-leistung.galerie-vier .galerie-kachel:first-child { grid-column: auto; grid-row: auto; }
}
.galerie-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; }
.galerie-raster .galerie-kachel:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
@media (min-width: 640px) { .galerie-raster { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 200px; gap: 14px; } .galerie-raster .galerie-kachel:nth-child(7n + 1) { grid-column: auto; grid-row: auto; } .galerie-raster .galerie-kachel:first-child { grid-row: span 2; } }
.filterleiste { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filterleiste button { flex: none; border: 1.5px solid var(--linie); background: var(--karte); color: var(--text); border-radius: 999px; padding: .5em 1.1em; cursor: pointer; font-weight: 600; }
.filterleiste button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
@media (min-width: 640px) { .filterleiste { flex-wrap: wrap; overflow: visible; margin-bottom: 28px; } }

/* ---------- Großansicht ---------- */
body.ga-aktiv { overflow: hidden; }
.grossansicht { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(4, 6, 8, .96); padding: 64px 8px; }
.grossansicht.offen { display: flex; }
.grossansicht figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.grossansicht img { max-height: calc(100vh - 150px); max-width: 100%; width: auto; border-radius: 4px; }
.grossansicht figcaption { color: #dfe6ea; margin-top: 12px; font-size: .95rem; text-align: center; }
.grossansicht button { position: absolute; border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.grossansicht button:hover { background: var(--akzent); color: var(--auf-akzent); }
.ga-zu { top: 12px; right: 12px; }
.ga-zurueck, .ga-vor { bottom: 14px; }
.ga-zurueck { left: 28%; }
.ga-vor { right: 28%; }
@media (min-width: 640px) { .grossansicht { padding: 24px 64px; } .grossansicht img { max-height: calc(100vh - 110px); } .ga-zurueck, .ga-vor { top: 50%; bottom: auto; transform: translateY(-50%); } .ga-zurueck { left: 10px; } .ga-vor { right: 10px; } }

/* ---------- Ablauf ---------- */
.ablauf { list-style: none; display: grid; border: 1px solid var(--linie); border-radius: var(--radius); }
.ablauf li { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; padding: 16px; border-bottom: 1px solid var(--linie); }
.ablauf li:last-child { border-bottom: 0; }
.ablauf .nr { grid-row: span 2; font-family: var(--schrift-titel); font-stretch: 118%; font-weight: 800; font-size: 1.8rem; line-height: 1; color: var(--akzent); }
.ablauf h3 { font-size: 1.05rem; text-transform: uppercase; margin-bottom: .25em; }
.ablauf p { margin: 0; color: var(--grau); font-size: .95rem; }
@media (min-width: 900px) {
  .ablauf { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .ablauf li { display: block; padding: 26px 24px; border-bottom: 0; border-right: 1px solid var(--linie); }
  .ablauf li:last-child { border-right: 0; }
  .ablauf .nr { display: block; font-size: 3rem; margin-bottom: 14px; }
  .ablauf h3 { font-size: 1.15rem; }
}

/* ---------- Inhaltsbausteine ---------- */
.hakenliste { list-style: none; display: grid; gap: 10px; margin: 18px 0; }
.hakenliste li { display: flex; gap: 12px; align-items: flex-start; }
.hakenliste .ic { color: var(--akzent); margin-top: 3px; }
.hinweiszeile { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; background: var(--flaeche); font-size: .95rem; }
.hinweiszeile .ic { color: var(--akzent); }
.materialliste { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.materialliste li { background: var(--karte); border: 1px solid var(--linie); border-top: 3px solid var(--akzent); border-radius: var(--radius); padding: 18px; }
.materialliste h3, .bereich h3, .qualitaet h3, .werte h3, .person h3 { font-size: 1.1rem; text-transform: uppercase; }
.materialliste p { margin: 0; color: var(--grau); font-size: .95rem; }
@media (min-width: 640px) { .materialliste { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } }
.bereiche { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bereich { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.bereich img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bereich div { padding: 18px 20px 22px; }
.bereich p { margin: 0; color: var(--grau); }
@media (min-width: 640px) { .bereiche { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .bereich img { aspect-ratio: 16 / 10; } }
.qualitaet, .werte { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.qualitaet li, .werte li { padding: 22px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--karte); }
.qualitaet .ic, .werte .ic { width: 36px; height: 36px; color: var(--akzent); margin-bottom: 14px; }
.qualitaet p, .werte p { margin: 0; color: var(--grau); }
@media (min-width: 640px) { .qualitaet, .werte { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .qualitaet li, .werte li { padding: 26px; } }
.text-bild { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.tb-text h2 { font-size: clamp(1.6rem, 6.4vw, 2.6rem); }
.tb-bilder { display: grid; gap: 14px; }
.tb-bilder img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
.tb-bilder img:nth-child(2) { width: 78%; margin-left: auto; margin-top: -60px; border: 6px solid var(--grund); }
@media (min-width: 900px) { .text-bild { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); } }
.zertifikat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.zt-siegel { display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; width: 180px; height: 180px; border-radius: 50%; border: 3px solid var(--akzent); padding: 22px; }
.zt-siegel .ic { width: 34px; height: 34px; color: var(--akzent); }
.zt-siegel b { font-family: var(--schrift-titel); font-size: 1.45rem; line-height: 1; color: #fff; }
.zt-siegel span { font-size: .85rem; line-height: 1.35; }
.zertifikat h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
@media (min-width: 700px) { .zertifikat { grid-template-columns: auto 1fr; gap: 40px; } .zt-siegel { width: 210px; height: 210px; gap: 8px; } .zt-siegel .ic { width: 38px; height: 38px; } .zt-siegel b { font-size: 1.7rem; } }
.personen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .personen { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } }
.person { display: flex; gap: 16px; padding: 20px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.person-kuerzel { flex: none; width: 56px; height: 56px; border-radius: 4px; background: var(--akzent); color: var(--auf-akzent); display: grid; place-items: center; font-family: var(--schrift-titel); font-stretch: 120%; font-size: 1.35rem; font-weight: 800; }
.person h3 { margin-bottom: .2em; }
.person .rolle { font-weight: 600; margin: 0; }
.person .bereich { color: var(--grau); margin: 0 0 10px; font-size: .95rem; background: none; border: 0; }
.person-wege { display: grid; gap: 6px; margin: 0; }
.person-wege a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.person-wege a:hover { color: var(--akzent); }
.foerderung { display: flex; align-items: center; gap: 24px 32px; flex-wrap: wrap; }
.foerderung img { width: 420px; max-width: 100%; background: #fff; padding: 14px 18px; border-radius: 8px; }
.foerderung p { flex: 1 1 280px; margin: 0; color: var(--grau); }
.stellen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.stelle { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.stelle summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; }
.stelle summary::-webkit-details-marker { display: none; }
.stelle summary > span:first-child { min-width: 0; }
.stelle summary b { display: block; font-family: var(--schrift-titel); font-size: 1.1rem; line-height: 1.2; text-transform: uppercase; }
.stelle summary small { color: var(--grau); }
.stelle-auf { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--linie); display: grid; place-items: center; font-size: 1.4rem; transition: transform .2s; }
.stelle[open] .stelle-auf { transform: rotate(45deg); background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
.stelle-inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 32px; padding: 0 20px 22px; }
.stelle-inhalt h3 { font-family: var(--schrift-text); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); }
.stelle-inhalt ul { padding-left: 1.1em; display: grid; gap: 4px; }
.stelle-inhalt .knopf { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 700px) { .stelle-inhalt { grid-template-columns: 1fr 1fr; padding: 0 24px 24px; } .stelle summary { padding: 20px 24px; } }
.zeitleiste { list-style: none; margin: 22px 0; border-left: 3px solid var(--akzent); padding-left: 22px; display: grid; gap: 16px; }
.zeitleiste li { position: relative; }
.zeitleiste li::before { content: ""; position: absolute; left: -31px; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--grund); border: 3px solid var(--akzent); }
.zeitleiste b { font-family: var(--schrift-titel); font-size: 1.2rem; }
.zeitleiste p { margin: 2px 0 0; color: var(--grau); }
.duo-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 900px) { .duo-text { grid-template-columns: 1fr 1fr; gap: 40px; } }

/* ---------- Fuß ---------- */
.fuss { font-size: .95rem; background: #0a0d10; border-top: 1px solid var(--linie); color: #b9c4cb; }
.fuss-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 44px 0 28px; }
.fuss-marke { grid-column: 1 / -1; }
.fuss-marke img { width: 150px; height: auto; margin-bottom: 18px; }
.fuss h2 { font-family: var(--schrift-titel); font-stretch: 112%; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.fuss ul { list-style: none; display: grid; gap: 4px; }
.fuss ul a { display: inline-block; padding: 4px 0; }
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { color: var(--akzent); }
.fuss-foerderung { padding: 18px 0; }
.fuss-foerderung img { width: 330px; max-width: 100%; background: #fff; padding: 10px 14px; border-radius: 6px; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding: 18px 0 28px; font-size: .85rem; border-top: 1px solid var(--linie); }
.fuss-unten > span:last-child { display: flex; flex-wrap: wrap; gap: 8px 18px; }
@media (min-width: 900px) { .fuss-raster { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; padding: 64px 0 36px; } .fuss-marke { grid-column: auto; } .fuss-marke img { width: 170px; } }

/* ---------- Formulare ---------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.schritt, .anfrageformular fieldset { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 16px 20px; margin-bottom: 14px; }
@media (min-width: 640px) { .schritt, .anfrageformular fieldset { padding: 22px 24px 24px; margin-bottom: 16px; } }
.schritt legend, .anfrageformular legend { float: left; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--schrift-titel); font-stretch: 112%; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; margin-bottom: 16px; color: var(--titel); }
.schritt legend + *, .anfrageformular legend + * { clear: both; }
.schritt legend span, .anfrageformular legend span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; background: var(--akzent); color: var(--auf-akzent); font-family: var(--schrift-titel); font-weight: 800; font-size: .95rem; flex: none; }
.schritt-hilfe { clear: both; margin: -6px 0 14px; font-size: .9rem; color: var(--grau); }
.unterlabel { font-weight: 600; font-size: .92rem; margin: 18px 0 8px; }
.unterlabel:first-of-type { margin-top: 0; }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.feld label { font-size: .88rem; font-weight: 600; }
.feld .einh { font-weight: 400; color: var(--grau); }
.feld input, .feld select, .feld textarea { width: 100%; min-width: 0; min-height: 48px; padding: .6em .8em; border: 1.5px solid var(--linie-feld); border-radius: 6px; background: var(--feld); color: var(--text); font-size: 1rem; }
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 25%, transparent); }
.feld-inline { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.feld-inline select { width: auto; flex: 1 1 240px; }
.einheit { position: relative; width: 100%; min-width: 0; }
.einheit input { padding-right: 3.2em; }
.einheit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--grau); font-size: .88rem; pointer-events: none; }
.feldreihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
@media (min-width: 420px) { .feldreihe, .feldreihe.drei, .feldreihe.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .feldreihe.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feldreihe.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.haken-reihe { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 6px; }
.haken-feld { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .95rem; min-height: 32px; }
.haken-feld input { width: 20px; height: 20px; accent-color: var(--akzent); }
.fehler { color: #ff7b6b; font-weight: 600; font-size: .92rem; margin: 4px 0 0; }

/* ---------- Auswahlkacheln ---------- */
.wahlraster { display: grid; gap: 10px; grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr)); }
.wahlraster.zwei { --spalten: 2; }
.wahlraster.drei, .wahlraster.vier, .wahlraster.fuenf { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.25rem), 1fr)); }
.wahl { position: relative; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-kachel { display: flex; flex-direction: column; height: 100%; gap: 8px; padding: 12px; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--feld); transition: border-color .15s, background .15s, box-shadow .15s; }
.wahl:hover .wahl-kachel { border-color: var(--akzent); }
.wahl input:checked + .wahl-kachel { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, var(--feld)); box-shadow: inset 0 0 0 1px var(--akzent); }
.wahl input:focus-visible + .wahl-kachel { outline: 3px solid var(--akzent); outline-offset: 2px; }
.wahl-bild { display: grid; place-items: center; height: 54px; border-radius: 3px; background: #1c242a; }
.wahl-bild svg { height: 42px; width: auto; }
.wahl-text b { display: block; font-size: .95rem; line-height: 1.25; }
.wahl-text small { display: block; font-size: .8rem; color: var(--grau); line-height: 1.3; margin-top: 2px; }
.wahlraster.klein .wahl-kachel { padding: 10px 12px; }
.wahlraster.kompakt .wahl-bild { height: 46px; }
.gesperrt { opacity: .4; pointer-events: none; }
.s-linie { fill: none; stroke: var(--zeichnung); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-duenn { fill: none; stroke: var(--zeichnung); stroke-width: 1.6; }
.s-punkt { fill: var(--akzent); }
.s-flaeche { fill: var(--zeichnung); }
.s-glas { fill: color-mix(in srgb, var(--akzent) 30%, transparent); stroke: var(--akzent); stroke-width: 1.2; }
.s-loch, .s-loch2, .s-innen { fill: var(--flaeche); }
.s-profil { fill: var(--zeichnung); }
.s-holz { fill: #a8763e; }
.farbwahl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--linie); }
.farbe { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; cursor: pointer; text-align: center; }
.farbe input { position: absolute; opacity: 0; }
.farbe span { width: 44px; height: 44px; border-radius: 50%; background: var(--f); border: 2px solid #3a454e; box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .18); }
.farbe input:checked + span { outline: 3px solid var(--akzent); outline-offset: 3px; }
.farbe input:focus-visible + span { outline: 3px dashed var(--akzent); outline-offset: 3px; }
.farbe small { max-width: 100%; font-size: .72rem; line-height: 1.25; color: var(--grau); overflow-wrap: anywhere; hyphens: manual; }

/* ---------- Konfigurator / Rechner ---------- */
.konfig, .rechner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 980px) {
  .konfig, .rechner { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 28px; }
  .konfig-vorschau, .rechner-ergebnis, .hf-vorschau { position: sticky; top: calc(var(--kopf-hoehe) + 16px); }
}
.vorschau-karte { background: #12181c; border: 1px solid #2c3740; border-radius: var(--radius); padding: 18px; box-shadow: var(--schatten); }
.vk-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vk-titel { font-family: var(--schrift-titel); font-stretch: 112%; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; margin: 0 0 12px; color: var(--titel); }
.vk-grundriss { width: 92px; flex: none; background: var(--flaeche); border-radius: 8px; }
/* Zeichnungen auf hellem „Zeichenblatt“, damit dunkle RAL-Farben lesbar bleiben */
.vk-ansicht { margin: 10px 0 6px; border-radius: 8px; background: linear-gradient(#e9eef1, #d9e0e4); --text: #1c2126; --grau: #5a636a; --beton: #b9c1c6; }
.kz-platte { fill: var(--beton); }
.kz-mass { stroke: var(--akzent); stroke-width: 1.2; }
.kz-text { fill: var(--text); font-size: 13px; font-family: var(--schrift-text); font-weight: 600; }
.kz-klein { fill: var(--grau); font-size: 11px; font-family: var(--schrift-text); font-weight: 700; }
.kz-ecke { stroke: var(--grau); stroke-width: 1; stroke-dasharray: 4 4; }
.kz-flaeche { fill: color-mix(in srgb, var(--akzent) 10%, transparent); }
.kz-linie { fill: none; stroke: var(--zeichnung); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.kennzahlen div { background: #1a2127; border-radius: 6px; padding: 10px 6px; text-align: center; }
.kennzahlen b { display: block; font-family: var(--schrift-titel); font-size: 1.2rem; line-height: 1.1; color: var(--titel); }
.kennzahlen span { font-size: .74rem; color: var(--grau); }
.hinweise { list-style: none; display: grid; gap: 8px; margin: 12px 0; }
.hinweise li { font-size: .85rem; line-height: 1.45; padding: 10px 12px 10px 38px; border-radius: 6px; position: relative; background: rgba(240, 165, 0, .1); border: 1px solid color-mix(in srgb, #f0a500 45%, transparent); }
.hinweise li::before { content: "!"; position: absolute; left: 12px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: #f0a500; color: #1a1a1a; font-weight: 800; font-size: .75rem; display: grid; place-items: center; }
.vk-details { margin: 12px 0; border-top: 1px solid var(--linie); padding-top: 10px; }
.vk-details summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.zusammenfassung { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 10px 0 0; font-size: .86rem; }
.zusammenfassung dt { color: var(--grau); }
.zusammenfassung dd { margin: 0; }
.preiszeile { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 6px; background: #1a2127; font-size: .86rem; margin: 12px 0 14px; }
.preiszeile .ic { color: var(--akzent); width: 22px; height: 22px; margin-top: 2px; }
.preiszeile b { display: block; font-size: .95rem; }

/* Plattenrechner */
.p-skizze { background: #1a2127; border-radius: 8px; margin-bottom: 12px; }
.pz-teil { fill: var(--zeichnung); }
.pz-loch { fill: var(--flaeche); }
.pz-mass { stroke: var(--akzent); stroke-width: 1.2; }
.pz-text { fill: var(--text); font-size: 12px; font-weight: 600; font-family: var(--schrift-text); }
.pz-klein { fill: var(--text); font-size: 9px; font-family: var(--schrift-text); }
.pz-nr-bg { fill: #e8590c; stroke: #ffffff; stroke-width: 1; pointer-events: none; }
.pz-nr { fill: #ffffff; font-size: 7.5px; font-weight: 700; font-family: var(--schrift-text); text-anchor: middle; pointer-events: none; }
.pl-nr { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #e8590c; color: #fff; font-weight: 700; font-size: .75rem; }
.pz-hilf { stroke: var(--akzent); stroke-width: 1; }
.pz-null { fill: var(--akzent); }
/* Wasserzeichen als oberste Ebene über allen Planer-Grafiken (Handnotiz 06.11.2026) */
.wz-ueber { position: relative; overflow: hidden; }
.wz-ueber::after { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='150'%3E%3Cg font-family='Arial,Helvetica,sans-serif' font-size='16' font-weight='700' letter-spacing='3' text-anchor='middle'%3E%3Cg fill='%23ffffff' fill-opacity='.3'%3E%3Ctext x='151' y='46'%3EHAGGE SCHWEISSBETRIEB%3C/text%3E%3Ctext x='451' y='121'%3EHAGGE SCHWEISSBETRIEB%3C/text%3E%3C/g%3E%3Cg fill='%230078b4' fill-opacity='.22'%3E%3Ctext x='150' y='45'%3EHAGGE SCHWEISSBETRIEB%3C/text%3E%3Ctext x='450' y='120'%3EHAGGE SCHWEISSBETRIEB%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 600px 150px repeat; transform: rotate(-20deg); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pz-bearbeitbar svg { cursor: crosshair; touch-action: none; }
.pz-bearbeitbar .pz-bohrung { cursor: grab; stroke: var(--akzent); stroke-width: 1.2; }
.p-loecher { margin: 0 0 12px; font-size: .85rem; }
.pl-hilfe { color: var(--grau); margin: 0 0 8px; font-size: .8rem; }
.pl-tabelle { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.pl-tabelle th { font-size: .72rem; color: var(--grau); text-align: left; font-weight: 600; padding: 2px 4px; }
.pl-tabelle td { padding: 2px 4px; }
.pl-tabelle input { width: 100%; min-width: 0; padding: 4px 6px; font-size: .85rem; }
.pl-standard { font-size: .8rem; }
.druck-hinweis { display: none; }
.ergebnis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.ergebnis div { background: #1a2127; border-radius: 6px; padding: 10px 12px; }
.ergebnis span { display: block; font-size: .75rem; color: var(--grau); }
.ergebnis b { font-family: var(--schrift-titel); font-size: 1.2rem; color: var(--titel); }
.ergebnis .pr-gross { background: color-mix(in srgb, var(--akzent) 12%, var(--karte)); }
.ergebnis .pr-gross b { font-size: 1.55rem; }
.ergebnis div:has(small) { grid-column: 1 / -1; }
.ergebnis small { display: block; margin-top: 2px; font-size: .75rem; color: var(--grau); }
.stueckliste { grid-column: 1; min-width: 0; }  /* nur linke Spalte: rechts läuft das Ergebnis mit (sticky) */
/* Ergebnis rechts über beide Zeilen, sonst beginnt die Stückliste erst unter der (mit Bohrungsliste hohen) Ergebnisspalte */
@media (min-width: 980px) { .rechner { grid-template-rows: auto 1fr; } .rechner-ergebnis { grid-column: 2; grid-row: 1 / span 2; } }
.sl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.sl-kopf h2 { font-size: 1.1rem; font-stretch: 112%; margin: 0; }
.sl-summe { margin: 0; }
.sl-summe b { font-family: var(--schrift-titel); font-size: 1.5rem; color: var(--akzent); }
.tabelle-rahmen { position: relative; overflow-x: auto; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); background: var(--flaeche); }
tbody tr:last-child td { border-bottom: 0; }
td small { display: block; color: var(--grau); }
.z { text-align: right; white-space: nowrap; }
.pr-weg { border: 0; background: transparent; color: var(--grau); font-size: 1.4rem; line-height: 1; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; }
.pr-weg:hover { background: #c0392b; color: #fff; }
.sl-leer { padding: 18px; margin: 0; color: var(--grau); text-align: center; }

/* Hallen-Anfrage (Skizze) */
.hf-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 980px) { .hf-raster { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 28px; } }
.h-skizze { background: #1a2127; border-radius: 8px; }
.hz-wand { fill: var(--zeichnung); opacity: .88; }
.hz-wand.offen { fill: none; stroke: var(--zeichnung); stroke-width: 2; stroke-dasharray: 6 5; }
.hz-dach { fill: none; stroke: var(--akzent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hz-tor { fill: var(--flaeche); stroke: var(--grau); }
.hz-torlinie { stroke: var(--grau); stroke-width: .8; }
.hz-boden { stroke: var(--grau); stroke-width: 2; }
.hz-grund { fill: color-mix(in srgb, var(--akzent) 12%, transparent); stroke: var(--zeichnung); stroke-width: 2; }
.hz-raster { stroke: var(--zeichnung); stroke-width: 1; stroke-dasharray: 3 4; }
.hz-text { fill: var(--text); font-size: 13px; font-weight: 600; font-family: var(--schrift-text); }
.hz-klein { fill: var(--grau); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; font-family: var(--schrift-text); }

/* ---------- Kontakt, Anfrage, Rechtstexte ---------- */
.anfrageformular { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 16px; }
@media (min-width: 640px) { .anfrageformular { padding: clamp(20px, 3vw, 32px); } }
.anfrageformular > h2, .anfrageformular > h3 { font-size: 1.4rem; }
.halle-form { background: transparent; border: 0; padding: 0; }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 900px) { .kontakt-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; } }
.kontakt-karte { padding: 22px 18px; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); border-top: 3px solid var(--akzent); }
@media (min-width: 640px) { .kontakt-karte { padding: clamp(22px, 3vw, 34px); } }
.kontakt-karte h2 { font-size: 1.35rem; }
.kk-zeile { display: flex; gap: 14px; align-items: flex-start; font-size: 1.05rem; overflow-wrap: anywhere; }
.kk-zeile .ic { color: var(--akzent); width: 24px; height: 24px; margin-top: 2px; }
.kk-zeile a { color: inherit; font-weight: 600; }
.kk-zeile small { display: block; color: var(--grau); }
.rechtstext { max-width: 820px; overflow-wrap: break-word; }
.rechtstext h2 { font-size: 1.3rem; margin-top: 1.8em; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
.rechtstext ul { padding-left: 1.2em; display: grid; gap: 6px; margin: 0 0 1em; }
.rt-kurz { padding: 18px 20px; border-radius: var(--radius); background: var(--karte); border-left: 4px solid var(--akzent); }
.macher { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding: 20px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
.macher p { flex: 1 1 280px; margin: 0; }
.macher-logo { flex: none; display: block; border-radius: 6px; transition: transform .2s, opacity .2s; }
.macher-logo img { width: 208px; height: auto; }
.macher-logo:hover { transform: translateY(-2px); opacity: .9; }

/* ---------- Online-Bewerbung (Karriere) ---------- */
.bewerbung-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 980px) { .bewerbung-raster { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; } }
.bewerbung-form fieldset { margin-bottom: 14px; }
.bewerbung-form legend .optional { font-family: var(--schrift-text); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin-left: 4px; }
.hinweis-kasten { margin: 6px 0 0; padding: 12px 14px; border-radius: 6px; font-size: .88rem; line-height: 1.5; background: color-mix(in srgb, var(--akzent) 9%, var(--karte)); border-left: 3px solid var(--akzent); }
.haken-feld.einwilligung { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; font-size: .9rem; line-height: 1.5; }
.haken-feld.einwilligung input { flex: none; margin-top: 2px; }
.bewerber-ds { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 18px; font-size: .88rem; line-height: 1.55; scroll-margin-top: calc(var(--kopf-hoehe) + 20px); }
@media (min-width: 640px) { .bewerber-ds { padding: 22px 24px; } }
.bewerber-ds h3 { font-size: 1.15rem; text-transform: uppercase; margin-bottom: 0; }
.bewerber-ds h4 { font-family: var(--schrift-text); font-size: .92rem; font-weight: 700; margin: 16px 0 4px; text-transform: none; letter-spacing: 0; color: var(--titel); }
.bewerber-ds p, .bewerber-ds li { color: var(--text); }
.bewerber-ds ul { padding-left: 1.1em; display: grid; gap: 6px; margin: 0; }

/* ---------- Versand (anfrage.php) ---------- */
.lockfeld { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.versand-status { margin: 12px 0 0; padding: 12px 14px; border-radius: 6px; font-size: .92rem; line-height: 1.45; }
.versand-status.laeuft { background: var(--flaeche); }
.versand-status.laeuft::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid var(--akzent); border-right-color: transparent; border-radius: 50%; animation: dreh .8s linear infinite; }
.versand-status.ok { background: color-mix(in srgb, #2e9d57 14%, var(--karte)); border: 1px solid color-mix(in srgb, #2e9d57 45%, transparent); }
.versand-status.fehler { background: color-mix(in srgb, #c0392b 10%, var(--karte)); border: 1px solid color-mix(in srgb, #c0392b 40%, transparent); }
.versand-status .knopf { margin-top: 10px; min-height: 38px; font-size: .8rem; }
@keyframes dreh { to { transform: rotate(360deg); } }
.feld-datei input[type="file"] { min-height: 0; padding: .55em; background: var(--feld); cursor: pointer; }
.feld-datei input[type="file"]::file-selector-button { margin-right: 10px; padding: .45em .9em; border: 0; border-radius: 4px; background: var(--akzent); color: var(--auf-akzent); font: 700 .85rem var(--schrift-text); cursor: pointer; }
.feld-datei .schritt-hilfe { margin: 4px 0 0; }
/* Anhang-Bilder (seite.js svgBild): helle Zeichenfarben */
html.zeichenfarben, html.zeichenfarben * { --zeichnung: #39424a !important; --text: #1c2126 !important; --grau: #5a636a !important;
  --flaeche: #e9eef1 !important; --beton: #cfd4d8 !important; --akzent: #0096d6 !important; --karte: #ffffff !important; }

/* ---------- Schweißeffekt (schweissen.js) ---------- */
.schweiss-flaeche { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
html.schweisser, html.schweisser * { cursor: none !important; }
html.schweisser input:not([type="radio"]):not([type="checkbox"]), html.schweisser textarea, html.schweisser select, html.schweisser [contenteditable] { cursor: auto !important; }
html.schweisser input:not([type="radio"]):not([type="checkbox"]), html.schweisser textarea { cursor: text !important; }
html.schweissen, html.schweissen * { user-select: none; -webkit-user-select: none; }
.effekt-schalter { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.effekt-schalter:hover { color: var(--akzent); }
.es-punkt { width: 9px; height: 9px; border-radius: 50%; background: #6b737a; }
.effekt-schalter[aria-pressed="true"] .es-punkt { background: #ffb347; box-shadow: 0 0 0 3px rgba(255, 150, 50, .25), 0 0 10px #ff9a2e; }

/* ---------- 3D-Hallenkonfigurator (hallenkonfigurator.js) ---------- */
/* Handy: Reiterleiste oben, 3D-Ansicht, darunter das Bedienfeld. Ab 980 px: Leiste | Feld | Ansicht */
.hk { --hk-leiste: #0a0d10; --hk-himmel: linear-gradient(#a9bfcc 0%, #dbe4e8 58%, #c6cec5 100%);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 52svh auto; border-bottom: 1px solid var(--linie); background: var(--grund); }
.hk-leiste { display: flex; gap: 4px; padding: 6px; overflow-x: auto; background: var(--hk-leiste); grid-row: 1; scrollbar-width: none; }
.hk-leiste button { display: flex; flex: 0 0 auto; min-width: 74px; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border: 0; border-radius: 6px; background: transparent; color: #b9c4cb;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; text-align: center; cursor: pointer; }
.hk-leiste button .ic { width: 22px; height: 22px; }
.hk-leiste button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.hk-leiste button[aria-selected="true"] { background: var(--akzent); color: var(--auf-akzent); }
.hk-ansicht { position: relative; grid-row: 2; min-width: 0; min-height: 0; overflow: hidden; background: var(--hk-himmel); touch-action: none; }
.hk-panel { display: flex; flex-direction: column; grid-row: 3; min-height: 0; background: var(--karte); }
.hk-panel-kopf { padding: 16px 16px 10px; border-bottom: 1px solid var(--linie); }
.hk-panel-kopf .eyebrow { margin-bottom: .3em; }
.hk-panel-kopf h1, .hk-seite h2 { font-size: 1.1rem; text-transform: uppercase; margin: 0 0 .35em; }
.hk-panel-inhalt { flex: 1; padding: 16px 16px 22px; }
.hk-panel-fuss { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); background: var(--karte); }
.hk-panel-fuss .knopf { min-height: 44px; }
@media (min-width: 980px) {
  .hk { grid-template-columns: 88px minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: none; height: calc(100svh - var(--kopf-hoehe)); min-height: 620px; }
  .hk-leiste { flex-direction: column; padding: 10px 8px; overflow-y: auto; grid-row: auto; }
  .hk-leiste button { min-width: 0; padding: 10px 4px; }
  .hk-ansicht, .hk-panel { grid-row: auto; }
  .hk-panel { border-right: 1px solid var(--linie); }
  .hk-panel-kopf { padding: 18px 22px 10px; }
  .hk-panel-inhalt { overflow-y: auto; padding: 18px 22px 24px; }
  .hk-panel-fuss { position: static; padding: 12px 22px; }
}
.hk-regler label { display: flex; justify-content: space-between; align-items: baseline; }
.hk-regler output { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.05rem; color: var(--akzent); }
.hk-regler-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 10px; align-items: center; }
.hk-regler input[type="range"] { width: 100%; accent-color: var(--akzent); min-height: 32px; padding: 0; border: 0; background: none; box-shadow: none; }
.hk-regler input[type="number"] { min-height: 42px; padding: .4em .5em; text-align: right; }
.hk-vorlagen { display: grid; gap: 10px; }
.hk-vorlage { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; padding: 8px; border: 1.5px solid var(--linie); border-radius: var(--radius); background: var(--feld); color: var(--text); text-align: left; cursor: pointer; }
.hk-vorlage img { width: 112px; height: 70px; object-fit: cover; border-radius: 3px; background: linear-gradient(#d6e3ea, #eef2f3); }
.hk-vorlage b { display: block; font-family: var(--schrift-titel); font-size: 1.02rem; }
.hk-vorlage small { color: var(--grau); font-size: .82rem; line-height: 1.35; display: block; }
.hk-vorlage:hover, .hk-vorlage[aria-pressed="true"] { border-color: var(--akzent); }
.hk-vorlage[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--akzent); background: color-mix(in srgb, var(--akzent) 8%, var(--feld)); }
@media (min-width: 980px) { .hk-vorlage { grid-template-columns: 128px 1fr; } .hk-vorlage img { width: 128px; height: 76px; } }
.hk-neu { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.hk-neu .knopf { min-height: 38px; padding: .35em .8em; font-size: .78rem; }
.hk-oe { border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px 4px; margin-bottom: 10px; background: var(--feld); }
.hk-oe-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hk-oe-kopf b { font-family: var(--schrift-titel); font-size: 1.02rem; }
.hk-oe-weg { border: 0; background: transparent; color: var(--grau); font-size: 1.3rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; line-height: 1; }
.hk-oe-weg:hover { background: #c0392b; color: #fff; }
.hk-oe .feld { margin-bottom: 10px; }
.hk-oe .feld input, .hk-oe .feld select { min-height: 42px; padding: .4em .6em; }
.hk-oe input[type="range"] { accent-color: var(--akzent); min-height: 32px; padding: 0; border: 0; }
.hk-oe-warn { margin: 0 0 10px; font-size: .82rem; color: #f0c060; background: rgba(240, 165, 0, .12); border-radius: 4px; padding: 6px 10px; }
.hk-leer { color: var(--grau); font-size: .92rem; }
.hk-farben { margin-top: 4px; padding-top: 0; border-top: 0; gap: 6px; }
.hk-farben .farbe { width: 58px; }
.hk-farben .farbe span { width: 34px; height: 34px; }
.hk-farben .farbe small { font-size: .72rem; line-height: 1.25; }
.hk-seite .unterlabel { margin-top: 14px; }
.hk-ansicht canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; outline: none; }
.hk-ansicht canvas:active { cursor: grabbing; }
.hk-labels { position: absolute; inset: 0; pointer-events: none; }
.hk-schild { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 12px; font-weight: 600; font-family: var(--schrift-text); color: #065b82; background: rgba(255, 255, 255, .92); padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.hk-werkzeuge { position: absolute; z-index: 2; top: 10px; display: flex; gap: 2px; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 20px rgba(20, 30, 40, .14); }
.hk-wz-links { left: 10px; }
.hk-wz-rechts { right: 10px; top: auto; bottom: 10px; }
.hk-wz { display: grid; place-items: center; min-width: 34px; height: 36px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: #2a3238; cursor: pointer; font: 700 .72rem var(--schrift-text); }
.hk-wz .ic { width: 20px; height: 20px; }
.hk-wz:hover { background: #e9eef1; color: #0060a8; }
.hk-wz[aria-pressed="true"] { background: #005aaa; color: #fff; }
.hk-wz[disabled] { opacity: .35; cursor: default; background: transparent; color: #2a3238; }
.hk-kennzahlen { position: absolute; z-index: 2; left: 10px; top: 60px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); }
.hk-kennzahlen div { background: rgba(255, 255, 255, .92); border-radius: 6px; padding: 5px 9px; box-shadow: 0 4px 14px rgba(20, 30, 40, .1); }
.hk-kennzahlen div:nth-child(n+4) { display: none; }
.hk-kennzahlen b { display: block; font-family: var(--schrift-titel); font-size: 1rem; color: #15191d; line-height: 1.15; }
.hk-kennzahlen span { font-size: .7rem; color: #5a636a; }
.hk-tipp { display: none; position: absolute; z-index: 2; right: 14px; bottom: 12px; margin: 0; font-size: .75rem; color: #3f494f; background: rgba(255, 255, 255, .75); padding: 4px 10px; border-radius: 999px; }
@media (min-width: 980px) {
  .hk-werkzeuge { top: 12px; gap: 4px; }
  .hk-wz-links { left: 12px; }
  .hk-wz-rechts { top: 12px; bottom: auto; right: 12px; }
  .hk-wz { min-width: 38px; height: 38px; padding: 0 8px; font-size: .8rem; }
  .hk-kennzahlen { top: auto; left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  .hk-kennzahlen div { padding: 7px 12px; }
  .hk-kennzahlen div:nth-child(n+4) { display: block; }
  .hk-kennzahlen b { font-size: 1.05rem; }
}
@media (min-width: 1100px) { .hk-tipp { display: block; } }
.hk-speicher { position: absolute; left: 10px; top: 60px; width: min(420px, calc(100% - 20px)); background: var(--karte); color: var(--text); border: 1px solid var(--linie); border-radius: 8px; box-shadow: var(--schatten); padding: 14px 16px; z-index: 3; }
.hk-speicher-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hk-speicher ul { list-style: none; display: grid; gap: 8px; }
.hk-speicher li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 6px; }
.hk-platz-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--flaeche); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.hk-platz-text { flex: 1; min-width: 0; }
.hk-platz-text b { display: block; font-size: .88rem; }
.hk-platz-text small { color: var(--grau); font-size: .78rem; }
.hk-speicher .knopf { min-height: 34px; padding: .3em .7em; font-size: .74rem; }
.hk-fehler { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 32px)); padding: 20px 22px; border-radius: 8px; background: var(--karte); color: var(--text); border: 1px solid var(--linie); border-top: 4px solid #f0a500; box-shadow: var(--schatten); z-index: 4; }
.hk-fehler p { margin: 8px 0 0; font-size: .92rem; }
.hk-druck { display: none; }
/* Ladehinweis, bis der Konfigurator (hallen-start.js) gestartet ist */
.hk-laden { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); margin: 0; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); color: #2a3238; font-size: .85rem; font-weight: 600; }
/* Erklärtext unter dem Konfigurator */
.hk-erklaerung .materialliste { margin-top: 8px; }
.hk-erklaerung-weiter { margin-top: 40px; margin-bottom: 0; }
@media (min-width: 900px) { .hk-erklaerung .materialliste { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
/* Teaser auf der Hallenbau-Seite */
.hk-teaser-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.hk-teaser-bild { display: block; padding: 20px; border-radius: var(--radius); background: var(--hk-himmel, linear-gradient(#a9bfcc, #dbe4e8 60%, #c6cec5)); border: 1px solid var(--linie); transition: transform .2s; }
.hk-teaser-bild:hover { transform: translateY(-3px); }
@media (min-width: 820px) { .hk-teaser-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); } .hk-teaser-bild { padding: 28px; } }

/* ---------- Druck ---------- */
@media print {
  /* Plattenrechner nicht drucken (Handnotiz Denis, 06.11.2026) – die Skizzen gibt es nur mit Wasserzeichen in der Anfrage */
  body:has([data-platten]) main > *:not(.druck-hinweis) { display: none !important; }
  body:has([data-platten]) .druck-hinweis { display: block !important; padding: 20mm; font-size: 12pt; }
  :root { --text: #000; --titel: #000; --grau: #444; --karte: #fff; --flaeche: #eee; --linie: #bbb; --zeichnung: #333; }
  body { background: #fff; color: #000; padding: 0 !important; }
  .kopf, .fuss, .aktionsleiste, .schweiss-flaeche, .konfig-schritte, .knopf, .klein-knoepfe, .abschnitt-grau, .seitenkopf .lead, .krumen { display: none !important; }
  .konfig { display: block; }
  .konfig-vorschau { position: static; }
  .vorschau-karte { box-shadow: none; border: 1px solid #999; }
  .vk-details[open] summary { display: none; }
  body.druck-hk .sprung, body.druck-hk main > *:not(.hk-druck) { display: none !important; }
  body.druck-hk .hk-druck { display: block; font-size: 10pt; }
  .hk-druck header { display: flex; align-items: center; gap: 18px; border-bottom: 2px solid #005aaa; padding-bottom: 8px; margin-bottom: 12px; }
  .hk-druck header img { width: 120px; }
  .hk-druck h1 { font-size: 18pt; margin: 0; color: #111; text-transform: none; }
  .hk-druck header p { margin: 0; color: #555; }
  .hk-druck-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .hk-druck figure { margin: 0; break-inside: avoid; }
  .hk-druck figure img { width: 100%; height: 62mm; object-fit: cover; border: 1px solid #ccc; }
  .hk-druck figcaption { font-size: 8pt; color: #555; }
  .hk-druck table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .hk-druck th, .hk-druck td { border-bottom: 1px solid #ddd; padding: 4px 6px; text-align: left; vertical-align: top; background: none; color: #111; text-transform: none; letter-spacing: 0; }
  .hk-druck th { width: 22%; font-weight: 700; }
  .hk-druck-fuss { margin-top: 10px; font-size: 8pt; color: #555; }
  @page { size: A4; margin: 12mm; }
}

/* ---------- Leistungs- und Ratgeberseiten (SEO) ---------- */
/* Lesespalte linksbündig an der Seitenkante (wie Seitenkopf und Brotkrumen), nur die Zeilenlänge begrenzt –
   mittig gesetzt wirkte sie neben dem linksbündigen Kopf verrutscht (Denis, 09.11.2026) */
.innen.schmal { width: min(100% - 32px, var(--breite)); }
.innen.schmal > * { max-width: 820px; }
/* Einzelner Einleitungsabsatz (Start, Metallbau, Hubs): großer Leitsatz, darf breiter laufen */
.antwort.antwort-gross { font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.5; }
.innen.schmal > .antwort-gross { max-width: 1060px; }

/* Artikel mit Seitenleiste (Leistungs-/Ratgeberseiten): Text links, rechts mitlaufend Inhaltsverzeichnis + Ansprechpartner.
   Unter 1100 px einspaltig, Seitenleiste ausgeblendet – der Kontaktblock folgt dort unter dem Text. */
.artikel { max-width: 820px; }
.artikel .fragen { margin-top: clamp(56px, 7vw, 96px); }
.seitenleiste { display: none; }
@media (min-width: 1100px) {
  .artikel-raster { display: grid; grid-template-columns: minmax(0, 820px) minmax(270px, 330px); justify-content: space-between; gap: 64px; align-items: start; }
  .seitenleiste { display: grid; gap: 16px; position: sticky; top: calc(var(--kopf-hoehe) + 28px); }
}
.sl-verzeichnis, .sl-kontakt { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 22px; }
.sl-verzeichnis ol { list-style: none; counter-reset: sl; }
.sl-verzeichnis li { counter-increment: sl; }
.sl-verzeichnis a { display: grid; grid-template-columns: 28px 1fr; padding: 8px 0; border-top: 1px solid var(--linie); color: var(--text); text-decoration: none; font-size: .93rem; line-height: 1.35; }
.sl-verzeichnis li:first-child a { border-top: 0; padding-top: 0; }
.sl-verzeichnis a::before { content: counter(sl, decimal-leading-zero); font-family: var(--schrift-titel); font-size: .74rem; font-weight: 700; color: var(--akzent); padding-top: .2em; }
.sl-verzeichnis a:hover, .sl-verzeichnis a:focus-visible { color: var(--titel); }
.sl-person { display: flex; gap: 12px; align-items: center; }
.sl-person p { margin: 0; line-height: 1.35; }
.sl-person span { color: var(--grau); font-size: .9rem; }
.sl-wege { display: grid; gap: 6px; margin: 16px 0 0; }
.sl-wege a { display: inline-flex; gap: 8px; align-items: center; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.sl-wege a:hover { color: var(--akzent); }
.sl-wege .ic, .sl-zeiten .ic { width: 18px; height: 18px; flex: none; color: var(--akzent); }
.sl-zeiten { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: .9rem; color: var(--grau); }
.sl-kontakt .knopfreihe { margin-top: 18px; }
.sl-kontakt .knopf { flex-basis: 100%; }

/* Geteilt (FAQ, Eckdaten, Faktentabellen): Überschrift links mitlaufend, Inhalt rechts; mobil untereinander */
.geteilt-inhalt { max-width: 860px; }
.geteilt-hinweis { color: var(--grau); }
@media (min-width: 1000px) {
  .geteilt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
  .geteilt-kopf { position: sticky; top: calc(var(--kopf-hoehe) + 28px); }
  .geteilt .abschnitt-kopf { margin-bottom: 14px; }
  .geteilt-kopf h2 { font-size: clamp(1.5rem, 2.3vw, 2.2rem); }
}
.antwort-abschnitt { padding-bottom: 8px; }
.antwort { font-size: clamp(1.08rem, 2.6vw, 1.28rem); line-height: 1.55; color: var(--text); border-left: 3px solid var(--akzent); padding-left: 18px; margin: 0; }
.frage-block { margin-bottom: 44px; }
.frage-block:last-child { margin-bottom: 0; }
.frage-block h2 { font-size: clamp(1.35rem, 4.6vw, 2rem); }
.frage-block .fazit { font-weight: 600; font-size: 1.05rem; color: var(--text); }
.frage-block p { color: var(--grau); }
.frage-block .fazit, .frage-block .tabelle-rahmen { margin-bottom: 16px; }
.frage-block .hakenliste span, .frage-block .hakenliste li { color: var(--text); }
.faktentabelle th { width: 34%; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text); }
.vergleich thead th { background: var(--flaeche); }
.vergleich tbody th { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text); background: none; }
.faq { display: grid; gap: 10px; }
.faq-eintrag { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.faq-eintrag summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; cursor: pointer; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--akzent); }
.faq-eintrag[open] summary::after { content: "–"; }
.faq-eintrag summary h3 { margin: 0; font-size: 1.02rem; text-transform: none; letter-spacing: 0; font-stretch: 100%; line-height: 1.3; }
.faq-antwort { padding: 0 18px 16px; }
.faq-antwort p { margin: 0; color: var(--grau); }
.fachbox { display: flex; gap: 14px; align-items: center; margin-top: 22px; padding: 14px 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.fachbox p { margin: 0; }
.fachbox .eyebrow { margin-bottom: .3em; }
.cta-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.cta-raster > div > p:not(.eyebrow) { color: var(--grau); }
@media (min-width: 900px) { .cta-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; } }
.typen .bereich a { display: block; height: 100%; color: inherit; text-decoration: none; }
.typen .bereich a:hover h3 { color: var(--akzent); }
.typen .mehr { margin-top: 10px; font-size: .9rem; }
.weiter { border-top: 1px solid var(--linie); }
.weiter-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.weiter-liste a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--linie); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.weiter-liste a:hover { border-color: var(--akzent); color: var(--akzent); }
.weiter-liste .ic { width: 16px; height: 16px; }
/* Lange Seitentitel (Leistungs- und Ratgeberseiten) kleiner setzen */
.seitenkopf h1.h1-lang { font-size: clamp(1.75rem, 5.6vw, 3.3rem); line-height: 1.05; max-width: 22em; }