/* ALBA Alubau & Bauelemente GmbH — Bochum
   ------------------------------------------------------------------
   Thema: Passgenau. Der Betrieb beschreibt sich selbst über Passung —
   „passgenaue Balkongeländer", „Elemente, die perfekt zusammenpassen
   und sicher verbaut werden", „nach Maß in unserer Werkstatt". Deshalb
   hat diese Seite keine weichen Ecken: Radius 0, harte Kanten, Raster
   auf Stoß. Metall wird nicht gerundet, es wird abgelängt.

   Farbe ist NICHT erfunden: Gelb #ffff00 auf Tiefblau #100f3a stehen im
   Firmenlogo. Nachgerechnet 9,66:1 — die eigene Hausfarbe ist zugleich
   die zugänglichste Kombination, die man sich wünschen kann.

   Mobile first (Hausregel 3 vom 04.08.2026): Grundregeln beschreiben die
   schmale Ansicht, jede Medienabfrage ist ein `min-width`.
*/

@font-face{font-family:ArchivoLokal;src:url("schrift/archivo-700-x.woff2?v=20260806d") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:ArchivoLokal;src:url("schrift/archivo-600-x.woff2?v=20260806d") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:KarlaLokal;src:url("schrift/karla-400.woff2?v=20260806d") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:KarlaLokal;src:url("schrift/karla-500.woff2?v=20260806d") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:KarlaLokal;src:url("schrift/karla-700.woff2?v=20260806d") format("woff2");font-weight:700;font-display:swap}

:root{
  --tief:#0c0e26;
  --tief-2:#141733;
  --tief-3:#1c2043;
  --kante:rgba(232,234,245,.16);
  --text:#e8eaf5;
  --gedaempft:rgba(232,234,245,.72);
  /* Hausgelb aus dem Logo, minimal abgesenkt damit es auf Bildschirmen
     nicht flimmert. Nachgerechnet gegen alle drei Untergruende:
       #f2d117 auf #0c0e26 = 12,5:1   Text und Auszeichnung
       #0c0e26 auf #f2d117 = 12,5:1   gefuellte Knoepfe, dunkle Schrift
       #6b5a00 auf #f4f3ef =  5,6:1   Akzenttext auf hellem Band */
  --gelb:#f2d117;
  --gelb-tief:#6b5a00;
  --hell:#f4f3ef;
  --hell-2:#e2e0d8;
  --auf-hell:#14162e;
  --auf-hell-2:#545a66;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tief);color:var(--text);
  font-family:KarlaLokal,system-ui,Arial,sans-serif;line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:ArchivoLokal,system-ui,sans-serif;font-weight:700;
  line-height:1.05;margin:0;letter-spacing:-.015em;overflow-wrap:break-word}
h1{font-size:clamp(2.2rem,9.5vw,3rem)}
h2{font-size:clamp(1.7rem,6.5vw,2.3rem)}
h3{font-size:1.1rem;line-height:1.22}
p{margin:0;color:var(--gedaempft)}
h1+p,h2+p,h3+p{margin-top:1rem}

.marke{display:inline-block;font-family:ArchivoLokal;font-weight:600;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gelb);margin-bottom:.9rem}
.hell .marke{color:var(--gelb-tief)}

.sprung{position:absolute;left:-9999px;top:.5rem;background:var(--gelb);
  color:var(--tief);padding:.7rem 1rem;z-index:40;font-weight:700}
.sprung:focus{left:.75rem}

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:30;background:rgba(12,14,38,.95);
  backdrop-filter:blur(14px);border-bottom:2px solid var(--gelb)}
.kopf__innen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;row-gap:.15rem;column-gap:.5rem;
  max-width:1220px;margin:auto;padding:.2rem .8rem .25rem}
.wortmarke{display:flex;align-items:center;gap:.5rem;order:1;flex:0 1 auto;min-width:0}
.wortmarke img{width:30px;height:30px;object-fit:contain}
.wortmarke span{font-family:ArchivoLokal;font-weight:700;font-size:.74rem;
  line-height:1.06;letter-spacing:.02em}
/* Der Zusatz unter dem Firmennamen kostet auf dem Handy eine dritte Zeile und
   traegt den Kopf ueber die erlaubten 80 px (gemessen 82, bei 320 px sogar
   119). Er erscheint erst, wenn die Leiste wieder einreihig ist. */
.wortmarke i{display:none;font-style:normal;font-family:KarlaLokal;font-weight:400;
  font-size:.66rem;color:var(--gedaempft);letter-spacing:.04em}
.wege{order:3;flex:1 0 100%;display:flex;gap:.1rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.wege::-webkit-scrollbar{display:none}
.wege a{flex:0 0 auto;font-size:.8rem;color:var(--gedaempft);
  padding:.25rem .5rem;white-space:nowrap;border-bottom:2px solid transparent}
.wege a[aria-current="page"],.wege a:hover{color:var(--text);border-bottom-color:var(--gelb)}
.ruf{order:2;flex:0 0 auto}

/* Radius 0: Metall wird abgelaengt, nicht gerundet. */
.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.55rem 1.1rem;border:2px solid var(--gelb);
  background:var(--gelb);color:var(--tief);font-family:ArchivoLokal;
  font-weight:700;font-size:.86rem;cursor:pointer}
.knopf:hover{background:#fce14a;border-color:#fce14a}
.kopf .knopf{min-height:34px;padding:.25rem .75rem;font-size:.8rem}
.knopf--leer{background:transparent;color:var(--text);border-color:var(--kante)}
.knopf--leer:hover{background:rgba(232,234,245,.09);border-color:var(--text)}
.hell .knopf--leer{color:var(--auf-hell);border-color:#c8c5bb}
.hell .knopf--leer:hover{background:rgba(20,22,46,.07);border-color:var(--auf-hell)}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;display:grid;align-items:end;min-height:72vh;
  overflow:hidden;border-bottom:2px solid var(--gelb)}
.hero__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,14,38,.96) 8%,rgba(12,14,38,.55) 55%,rgba(12,14,38,.7)),
             linear-gradient(90deg,rgba(12,14,38,.85),transparent 74%)}
/* Kein `margin:auto`: automatische Raender an einem Rasterelement schlagen
   `align-items:end` und wuerden den Text in die Bildmitte setzen. */
.hero__innen{position:relative;z-index:1;width:100%;max-width:1220px;
  margin-inline:auto;padding:5rem 1rem 2.6rem}
.hero .marke{color:#f7dd55}
.hero p{font-size:1.05rem;max-width:38rem}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.8rem}
.hero__knoepfe .knopf{flex:1 1 14rem}
.hero.klein{min-height:42vh}
.hero.klein .hero__innen{padding-top:4rem}

.band{padding:3.4rem 1rem}
.innen{max-width:1220px;margin:auto}
.hell{background:var(--hell);color:var(--auf-hell);
  border-block:2px solid var(--gelb)}
.hell h1,.hell h2,.hell h3{color:var(--auf-hell)}
.hell p{color:#4b515d}

.zwei{display:grid;gap:1.6rem}
.zwei p{font-size:1.04rem}

/* ── Leistungsraster ──────────────────────────────────────────────── */
.raster{display:grid;gap:2px;background:var(--kante);border:2px solid var(--kante);
  margin-top:2.2rem}
.hell .raster{background:var(--hell-2);border-color:var(--hell-2)}
.feld{background:var(--tief-2);padding:1.4rem 1.25rem 1.6rem}
.feld:has(.feld__bild){padding-top:0}
.hell .feld{background:var(--hell)}
.feld__kopf{display:flex;align-items:baseline;gap:.65rem;
  font-size:1.1rem;line-height:1.22;min-height:2.44em}
.feld__nr{font-family:ArchivoLokal;font-weight:700;color:var(--gelb);
  font-size:inherit;line-height:inherit}
.hell .feld__nr{color:var(--gelb-tief)}
.feld p{margin-top:.55rem;font-size:.95rem}
.feld[hidden]{display:none}

/* ── Zahlenreihe ──────────────────────────────────────────────────── */
.zahlen{display:grid;gap:2px;background:var(--kante);border:2px solid var(--kante);
  margin-top:2.2rem}
.zahl{background:var(--tief-2);padding:1.3rem 1.2rem}
.zahl b{display:block;font-family:ArchivoLokal;font-weight:700;
  font-size:clamp(1.9rem,7vw,2.6rem);line-height:1;color:var(--gelb)}
.zahl span{display:block;margin-top:.4rem;font-size:.9rem;color:var(--gedaempft)}
.hell .zahlen{background:var(--hell-2);border-color:var(--hell-2)}
.hell .zahl{background:var(--hell)}
.hell .zahl b{color:var(--gelb-tief)}
.hell .zahl span{color:var(--auf-hell-2)}

/* ── Mitmach-Station ──────────────────────────────────────────────── */
.station{border:2px solid var(--kante);background:var(--tief-2);
  padding:1.3rem 1.15rem;margin-top:1.8rem}
.hell .station{border-color:var(--hell-2);background:#fff}
.wahl{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.wahl button{appearance:none;font:inherit;font-family:ArchivoLokal;font-weight:600;
  font-size:.86rem;min-height:44px;padding:.5rem .95rem;cursor:pointer;
  border:2px solid var(--kante);background:transparent;color:var(--text)}
.wahl button[aria-pressed="true"]{background:var(--gelb);border-color:var(--gelb);color:var(--tief)}
.hell .wahl button{border-color:#c8c5bb;color:var(--auf-hell)}
.hell .wahl button[aria-pressed="true"]{background:var(--gelb);border-color:var(--gelb);color:var(--tief)}
.antwort{border-left:4px solid var(--gelb);padding:.2rem 0 .2rem 1rem}
.antwort b{display:block;font-family:ArchivoLokal;font-weight:700;font-size:1.05rem;
  color:var(--text);margin-bottom:.35rem}
.hell .antwort b{color:var(--auf-hell)}
.antwort a{color:var(--gelb);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:26px;padding-block:3px}
.hell .antwort a{color:var(--gelb-tief)}

/* ── Bildstreifen ─────────────────────────────────────────────────── */
.streifen{position:relative;min-height:36vh;overflow:hidden;
  border-block:2px solid var(--gelb)}
.streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.streifen::after{content:"";position:absolute;inset:0;background:rgba(12,14,38,.6)}

/* ── Kontakt ──────────────────────────────────────────────────────── */
.formular{display:grid;gap:.9rem;margin-top:1.6rem}
label{display:grid;gap:.3rem;font-family:ArchivoLokal;font-weight:600;font-size:.86rem}
input,textarea,select{width:100%;font:inherit;padding:.75rem;
  border:2px solid var(--kante);background:rgba(232,234,245,.06);color:var(--text)}
textarea{min-height:7.5rem;resize:vertical}
.daten{display:grid;gap:0;margin-top:1.4rem;border-top:2px solid var(--kante)}
.daten p{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:.2rem 1.2rem;padding:.15rem 0;border-bottom:2px solid var(--kante)}
.daten b,.daten span,.daten a{display:flex;align-items:center;min-height:44px;margin:0}
.daten a{padding-block:0}
.daten b{font-family:ArchivoLokal;font-weight:600;font-size:.98rem;color:var(--text)}
.daten span{color:var(--gedaempft);font-size:.9rem}
.daten a{color:var(--gelb);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:44px;padding-block:.55rem}
.zeiten{display:grid;gap:0;margin-top:1.6rem;border-top:2px solid var(--kante)}
.zeiten div{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.15rem 1rem;padding:.8rem 0;border-bottom:2px solid var(--kante)}
.zeiten b{font-family:ArchivoLokal;font-weight:600;font-size:.98rem}
.zeiten span{color:var(--gedaempft);font-size:.9rem}

/* ── Rechtstexte ──────────────────────────────────────────────────── */
.rechtstext{max-width:44rem}
.rechtstext h1{font-size:clamp(2rem,8vw,2.5rem);margin-bottom:.4rem}
.rechtstext h2{font-size:1.14rem;margin:2.2rem 0 .5rem}
.rechtstext p{margin-bottom:.85rem}
.rechtstext a{text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:26px;padding-block:3px}
.hinweis{margin-top:2.6rem;border:2px solid var(--gelb);border-left-width:5px;
  background:rgba(242,209,23,.08);padding:1.15rem}
.hinweis strong{display:block;font-family:ArchivoLokal;color:var(--gelb);margin-bottom:.5rem}
.hinweis p:last-child{margin-bottom:0}

/* ── Fuss ─────────────────────────────────────────────────────────── */
.fuss{background:#070919;border-top:2px solid var(--gelb);padding:2.6rem 1rem}
.fuss__innen{max-width:1220px;margin:auto;display:grid;gap:1.6rem}
.fuss b{font-family:ArchivoLokal;font-weight:700}
.fuss p{font-size:.92rem}
.fuss a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:44px;padding-block:.55rem}
.fein{font-size:.82rem;color:rgba(232,234,245,.6)}
.fein a{min-height:32px;padding-block:.3rem;font-weight:700}

:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}

/* ══ ab 620 px ═══════════════════════════════════════════════════ */
@media (min-width:620px){
  .raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .zahlen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fuss__innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular .weit{grid-column:1/-1}
  .hero__knoepfe .knopf{flex:0 0 auto}
}

/* ══ ab 760 px: Kopf wieder einreihig ════════════════════════════ */
@media (min-width:760px){
  .kopf__innen{flex-wrap:nowrap;padding:.45rem 1.4rem;column-gap:1.2rem}
  .wortmarke{order:0}
  .wortmarke img{width:44px;height:44px}
  .wortmarke span{font-size:.9rem}
  .wortmarke i{display:block}
  .wege{order:0;flex:1 1 auto;justify-content:center;overflow:visible}
  .wege a{font-size:.88rem;padding:.45rem .7rem}
  .ruf{order:0}
  .kopf .knopf{min-height:42px;padding:.5rem 1rem;font-size:.86rem}
  .band{padding:5rem 1.4rem}
  .hero__innen{padding:7rem 1.4rem 4rem}
  .fuss{padding:3.4rem 1.4rem}
  .zahlen{grid-template-columns:repeat(4,1fr)}
}

/* ══ ab 1000 px ══════════════════════════════════════════════════ */
@media (min-width:1000px){
  h1{font-size:clamp(2.9rem,5.2vw,4.4rem)}
  h2{font-size:clamp(2.1rem,3.3vw,2.9rem)}
  .hero{min-height:80vh}
  .hero.klein{min-height:48vh}
  /* 05.08.2026: Ueberschrift und Text stehen UNTEREINANDER. Der Beitext
     neben der Ueberschrift zerreisst den Lesefluss — die Anweisung dazu
     steht in ANWEISUNG-NEU, Hausregel 15. */
  .zwei{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .zwei > div > p{max-width:70ch}
  /* Zwei eigenstaendige Bloecke duerfen nebeneinander stehen (Kontaktdaten
     und Formular). Das ist kein Beitext zur Ueberschrift, sondern ein Paar. */
  .zwei.gespann{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.6rem;align-items:start}
  .raster{grid-template-columns:repeat(3,1fr)}
  .band{padding:6rem 2rem}
  .hero__innen{padding:8rem 2rem 5rem}
  .streifen{min-height:44vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Referenzfotos je Leistung (ergänzt 05.08.2026) ───────────────────
   Die bisherige Website zeigt zu jeder der zehn Leistungen eigene Fotos
   ausgeführter Arbeiten — 50 Bilder, von denen keines übernommen worden
   war. Ein Metallbauer wird an seiner Arbeit gemessen, nicht an einer
   Beschreibung; deshalb steht jetzt über jedem Feld sein Bild. */
.feld__bild{height:auto;width:calc(100% + 2.5rem);margin:0 -1.25rem 1.2rem;display:block;
  aspect-ratio:4/3;object-fit:cover;
  border-bottom:1px solid var(--linie);background:var(--grund-2)}