/* ═════════════════════════════════════════════════════════════════
   stadlmayr.at — zentrales Stylesheet des Neubaus
   Alle Werte am Original nachgemessen (01.09.2026, Viewport 1280).
   Schriften liegen lokal unter /assets/schriften/ (Google Fonts, OFL).
   ═════════════════════════════════════════════════════════════════ */

/* ── Schriften ──────────────────────────────────────────────────── */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400;
  src: url('/assets/schriften/open-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400;
  src: url('/assets/schriften/open-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 500;
  src: url('/assets/schriften/open-sans-normal-latin.woff2') format('woff2');
  font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600;
  src: url('/assets/schriften/open-sans-normal-latin.woff2') format('woff2');
  font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700;
  src: url('/assets/schriften/open-sans-normal-latin.woff2') format('woff2');
  font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400;
  src: url('/assets/schriften/open-sans-italic-latin.woff2') format('woff2');
  font-display: swap; }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 500;
  src: url('/assets/schriften/open-sans-italic-latin.woff2') format('woff2');
  font-display: swap; }

/* Anmerkung: Open Sans ist eine variable Schrift — die eine Datei
   deckt alle Gewichte ab, der Browser interpoliert. */

/* ── Farb- und Maßtöne (alle gemessen) ─────────────────────────── */
:root {
  --blau: #649AD7;          /* Kasten blau, Überschriftband Produktseite */
  --gruen: #4D897C;         /* Kasten grün */
  --dunkelblau: #324A6D;    /* Navigation, Fußzeilen-Überschriften */
  --dunkelblau2: #1C244B;   /* Fußzeilen-Text */
  --balken-rot: #E51A4B;    /* Produktbalken 1 */
  --balken-grau: #898989;   /* Produktbalken 2 */
  --balken-blau: #008DD2;   /* Produktbalken 3 */
  --karten-rot: #C4244B;    /* Überschriftband „Die inneren Werte" */
  --knopf-grau: #666666;    /* Kontakt-Knopf, ©-Balken */
  --titel-grau: #757575;    /* Titelband der Unterseiten */
  --text: #3B3B3B;
  --text-grau: #7A7A7A;
  --hero-text: #E7E7E7;
  --rand: 8vw;              /* Seitenrand von Kopf- und Fußzeile */
  --inhalt: 1280px;         /* Inhaltsdeckel: ab 1280px bleibt alles zentriert
                               stehen (am Original bei 1920px nachgemessen:
                               Inhalt 313..1593, Hintergründe voll breit) */
}

/* ── Grundgerüst ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text);
  font: 400 15px/1.6 'Open Sans', sans-serif; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.2; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--dunkelblau); }

/* ── Kopfzeile (weiß, haftend, 100 px) ─────────────────────────── */
.kopf { position: sticky; top: 0; z-index: 50; background: #fff;
  height: 100px;
  padding: 0 max(var(--rand), calc((100% - var(--inhalt)) / 2));
  display: flex; align-items: center; gap: 24px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.hauptmenue { flex: 1; }
.hauptmenue ul { list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; }
.hauptmenue li { display: flex; align-items: center; }
.hauptmenue li + li::before { content: "|"; color: var(--text-grau);
  margin: 0 26px; font-size: 15px; }
.hauptmenue a { font-size: 17px; color: var(--dunkelblau);
  text-decoration: none; padding: 5px 0; }
.hauptmenue a:hover, .hauptmenue .aktiv a { text-decoration: underline; }
.kontakt-knopf { background: var(--knopf-grau); color: #fff;
  font: 400 18px/1 Arial, sans-serif; padding: 16px 45px;
  text-decoration: none; white-space: nowrap; }
.kontakt-knopf:hover { background: #555; }

/* Menü-Knopf (mobil) */
.menue-knopf { display: none; background: none; border: 0; padding: 8px;
  cursor: pointer; }
.menue-knopf span { display: block; width: 26px; height: 3px;
  background: var(--dunkelblau); margin: 5px 0; }

/* Suche (bewusste Ergänzung, von Kalle freigegeben 01.09.2026) */
.suche { position: relative; }
.suche-knopf { background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--dunkelblau); display: flex; align-items: center; gap: 7px; }
.suche-knopf svg { width: 22px; height: 22px; }
.suche-knopf .wort { font: 400 17px 'Open Sans', sans-serif; }
.suche-feld { display: none; position: absolute; right: 0; top: 46px;
  background: #fff; border: 1px solid #ddd; box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: 10px; width: 320px; }
.suche.offen .suche-feld { display: block; }
.suche-feld input { width: 100%; font: inherit; padding: 8px 10px;
  border: 1px solid #ccc; }
.suche-treffer a { display: block; padding: 7px 4px; font-size: 14px;
  text-decoration: none; border-bottom: 1px solid #eee; }
.suche-treffer a:hover { background: #F9FAFD; }

/* ── Brotkrumen (bewusste Ergänzung) ───────────────────────────── */
.brotkrumen { font-size: 16px; color: var(--text-grau);
  padding: 32px max(var(--rand), calc((100% - var(--inhalt)) / 2)) 0; }
.brotkrumen a { text-decoration: none; }
.brotkrumen span { margin: 0 6px; }

/* ── Bänder allgemein ──────────────────────────────────────────── */
main > section { margin-top: 80px;
  max-width: var(--inhalt); margin-inline: auto; }

/* ── Hero (Startseite) ─────────────────────────────────────────── */
.hero { min-height: 387px;
  background: url('/assets/bilder/schrankenanlagen_stadlmayr.avif')
    center center / contain no-repeat;
  display: flex; align-items: flex-end; }
.hero h1 { font-size: 40px; line-height: 48px; font-weight: 500;
  color: var(--hero-text); max-width: 928px; margin: 0 0 16px 20px; }
.hero h1 i { font-style: italic; }

/* ── Logoband (Startseite): Logo / Plus / Magnetic ─────────────── */
.logoband { display: grid; grid-template-columns: 25% 50% 25%;
  align-items: center; justify-items: center; min-height: 71px; }
.logoband img { width: auto; }
.logoband .logo-stadlmayr { height: 54px; }
.logoband .logo-plus { height: 56px; }
.logoband .logo-magnetic { height: 71px; }

/* ── Zwei Textkästen grün/blau (Startseite) ────────────────────── */
.kastenband { display: flex; justify-content: space-between;
  padding: 0 2px; }
.kastenband .kasten { width: 42%; color: #fff;
  border-bottom: 5px solid #fff; padding: 30px 30px 55px;
  /* Orange Linie unter dem Kasten — im Original als harter Schatten
     gelöst (post-354.css), Farbe exakt #EF7F1A. */
  box-shadow: 0 5px 0 0 #EF7F1A; }
.kasten-gruen { background: var(--gruen); }
.kasten-blau { background: var(--blau); }
.kasten h2 { font-size: 32px; font-weight: 600; line-height: 1; }
.kasten p { margin-bottom: 13px; }
.kasten .unterzeile { font-style: italic; margin: 6px 0 22px; }
.kasten .zitat { font-size: 22px; line-height: 1.4; font-style: italic;
  margin: 26px 0 0; }

/* ── Produktreihen (Startseite): Bild + Farbkasten ─────────────── */
.reihe3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reihe3 figure { margin: 0; display: flex; flex-direction: column; }
.reihe3 img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: filter .3s; }
/* Beim Überfahren dunkeln die sechs Bilder ab — wie im Original */
.reihe3 figure:hover img { filter: brightness(75%); }
.reihe3 .farbkasten { flex: 1; color: #fff; padding: 26px 30px; }
.farbkasten-rot { background: var(--balken-rot); }
.farbkasten-grau { background: var(--balken-grau); }
.farbkasten-blau { background: var(--balken-blau); }
.farbkasten-blau2 { background: var(--blau); }  /* Drehkreuz-Übersicht MPT */
.farbkasten h2 { font-size: 28px; font-weight: 500; margin-bottom: 18px; }
.farbkasten ul { margin: 0; padding-left: 1.4em; }
.farbkasten li { margin-bottom: 10px; }
.farbkasten li:last-child { margin-bottom: 0; }
.farbkasten p { margin-bottom: 12px; }
.aktuellesband .farbkasten { padding: 34px 40px; }

/* Bandabstände wie gemessen (80 ist die Regel, diese zwei weichen ab) */
.produktband { margin-top: 120px; }
.aktuellesband { margin-top: 100px; }

/* ── Seitentitel blau auf Weiß + Hero-Bild (Übersichtsseiten) ──── */
.seitentitel { margin-top: 50px; margin-bottom: 10px; }
.seitentitel h1 { font-size: 40px; font-weight: 600; line-height: 1;
  color: var(--blau); }
.heldenbild { height: 387px; margin-top: 10px;
  background: var(--bild) center center / contain no-repeat; }

/* ── Dreikasten-Gruppe (3 farbige Textspalten, Orange-Schatten) ── */
.dreikasten { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px; }
.dreikasten .kasten3 { color: #fff; padding: 30px 30px 20px;
  box-shadow: 0 5px 0 0 #EF7F1A; }
.dreikasten .kasten3:first-child { border-radius: 10px 0 0 0; }
.dreikasten .kasten3:last-child { border-radius: 0 10px 0 0; }
.kasten3 h2 { font-size: 24px; font-weight: 600; margin-bottom: 16px; }
.kasten3 p { margin-bottom: 13px; }
.kasten3 ul { margin: 0; padding-left: 1.4em; }
.kasten3-blau { background: var(--blau); }
.kasten3-gruen { background: var(--gruen); }

/* ── Kachelreihe (farbige Spalten mit Bild oben) ───────────────── */
.kachelreihe { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px; }
.kachelreihe figure { margin: 0; color: #fff; }
.kachelreihe img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: filter .3s; }
.kachelreihe a:hover img { filter: brightness(75%); }
.kachel-inhalt { padding: 24px 30px 24px; }
.kachel-inhalt h2 { font-size: 32px; font-weight: 500; }
.kachel-inhalt h5 { font-size: 20px; font-weight: 500; margin: 6px 0 14px; }
.kachel-rot { background: var(--karten-rot); }
.kachel-grau { background: var(--balken-grau); }
.kachel-blau { background: var(--blau); }
.kachel-ocker { background: #D19563; }
.kachel-gruen { background: var(--gruen); }
.kachel-orange { background: #EF7F1A; }

/* ── Dreierkasten mit Rundung (Drehkreuz-Übersicht) ────────────── */
.kastenband3 { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; }
.kastenband3 .kasten { color: #fff; border-radius: 20px 20px 0 0;
  padding: 30px 30px 20px; box-shadow: 0 5px 0 0 #EF7F1A; }
.kastenband3 .kasten p { margin-bottom: 10px; }
.kastenband3 .unterzeile { margin-bottom: 16px; }

/* zusätzliche Kachel-/Kastenfarben */
.farbkasten-hellgruen { background: #61A375; }
.farbkasten-ocker { background: #D19563; }
.farbkasten .unterzeile20 { font-size: 20px; margin: 4px 0 14px; }

/* ── Parksystem-Seite: Kopfbalken, Abschnittsbänder, Wechselzeilen ── */
.intro-spalten { display: grid; grid-template-columns: 788fr 492fr; }
.gruenkopf { background: #61A375; color: #fff; border-radius: 10px 0 0 0;
  padding: 20px; font-size: 24px; font-weight: 500; line-height: 1.3; }
.intro-spalten .textblock { line-height: 1.4;
  /* grüner Seitenstreifen wie im Original (6px, Farbe des Grünkopfs) */
  border-left: 6px solid #61A375; padding: 20px 40px 20px 20px; }
.intro-spalten h5 { font-size: 20px; font-weight: 500; margin: 14px 0 16px; }

.abschnittsband { background: var(--blau); color: #fff;
  border-radius: 20px 20px 0 0; padding: 20px 28px; }
.abschnittsband h2 { font-size: 24px; font-weight: 500; line-height: 1; }

.kachel-lead { font-size: 18px; font-weight: 600; }
.kachel-hellrot { background: var(--balken-rot); }

.wechselzeile { display: grid; grid-template-columns: 576fr 704fr; }
.wechselzeile .balken { color: #fff; font-size: 24px; font-weight: 400;
  line-height: 1; padding: 20px 20px 20px 50px; }
/* Rechts gerundete Balken — gilt überall, nicht nur in Wechselzeilen */
.balken.ecke15 { border-radius: 0 15px 0 0; }
.balken-gruen2 { background: var(--gruen); }
.balken-blau2 { background: var(--blau); }
.balken-orangerot { background: #FF6633; }
.wechselzeile .textblock { padding: 20px 20px 0 50px; line-height: 1.4; }
/* Farbstreifen rechts am Wechselzeilen-Text, in der Balkenfarbe */
.wechselzeile .balken + .textblock {
  border-right: 7px solid var(--strich, transparent);
  padding: 30px 30px 0 50px; }
.balken-gruen2 + .textblock { --strich: var(--gruen); }
.balken-orangerot + .textblock { --strich: #FF6633; }

.karten3 { display: grid; grid-template-columns: 32% 34% 28%;
  justify-content: space-between; }
.karten3 figure { margin: 0; display: flex; flex-direction: column;
  align-items: center; }
.karten3 img { height: 230px; width: auto; margin-bottom: 20px; }
.karten3 .karte { background: #ECECEC; border-radius: 15px;
  padding: 30px; width: 100%; flex: 1; }
.karten3 .karte.ecke20 { border-radius: 20px; }
.karten3 h2 { font-size: 22px; font-weight: 600; margin-bottom: 14px; }

/* ── Aktuelles: graues Titelband mit rotem Schatten + Artikel ──── */
.titelband2 { background: var(--knopf-grau); color: #fff;
  min-height: 147px; display: flex; flex-direction: column;
  justify-content: center; padding: 24px 40px 18px;
  box-shadow: 0 5px 0 0 #FF0000; }
.titelband2 h1 { font-size: 27px; font-weight: 400; }
/* „Stadlmayr Verkehrssysteme" steht in allen Kopfbändern rechts (Kalle) */
.titelband2 .unterzeile { font-style: italic; margin-top: 8px;
  text-align: right; }
.artikel { display: grid; grid-template-columns: 651fr 629fr; }
.balken-hellblau { background: var(--balken-blau); }
.balken.ecke15l { border-radius: 15px 0 0 0; }
.artikel .balken { color: #fff; font-size: 24px; font-weight: 400;
  line-height: 1.2; padding: 20px 20px 20px 28px; }
.artikel .textblock { padding: 20px 40px 20px 20px; line-height: 1.4; }

/* Farbstreifen am Artikeltext: 7px in der Bandfarbe, Richtung je Bauform.
   Gemessen am Original (border am Textblock unter jedem Balken). */
.artikel .balken + .textblock,
.artikel-breit .balken + .textblock { border-left: 7px solid var(--strich, transparent); }
.artikel-r .balken + .textblock { border-right: 7px solid var(--strich, transparent); }
.balken-hellblau + .textblock { --strich: var(--balken-blau); }
.balken-blau2 + .textblock { --strich: var(--blau); }
.balken-kartenrot + .textblock { --strich: var(--karten-rot); }
.balken-ziegelrot + .textblock { --strich: #CC3300; }
.balken-orange2 { background: #FF6600; }
.balken-orange2 + .textblock { --strich: #FF6600; }
.balken-himmelblau { background: #6699FF; }
.balken-himmelblau + .textblock { --strich: #6699FF; }
/* Balkenfarben der Detailseiten (Paket 3) */
.balken-grau { background: var(--balken-grau); }
.balken-grau + .textblock { --strich: var(--balken-grau); }
.balken-grau2 { background: #727271; }
.balken-grau2 + .textblock { --strich: #727271; }
.balken-dunkelgrau { background: #5B5B5B; }
.balken-dunkelgrau + .textblock { --strich: #5B5B5B; }
.balken-marine { background: #004488; }
.balken-marine + .textblock { --strich: #004488; }
.balken-rot { background: var(--balken-rot); }
.balken-rot + .textblock { --strich: var(--balken-rot); }
.balken-gruen { background: #61A375; }
.balken-gruen + .textblock { --strich: #61A375; }
/* Roter Strich unter dem grauen Titelband (Drehkreuz-Produktseiten) */
.titelband.strich-rot { box-shadow: 0 5px 0 0 var(--balken-rot); }
/* Vollbreite Zwischenbänder der Drehkreuz-Seiten */
.vollband { color: #fff; font-size: 24px; font-weight: 400;
  line-height: 1.2; padding: 20px 20px 20px 28px; }
.vollband-blau { background: var(--blau); border-radius: 20px 0 0 0; }
.vollband-gruen { background: #61A375; border-radius: 0 20px 0 0; }
/* Spaltenvarianten der Detailseiten */
.artikel.spalten-691 { grid-template-columns: 691fr 589fr; }
.artikel.spalten-546 { grid-template-columns: 546fr 734fr; }

/* ── Wissensseite (Induktionsschleife) ─────────────────────────── */
/* Zwei GETRENNTE graue Kästen mit 8px Lücke, jeder mit eigenem roten
   Strich darunter (Kalle 02.09., gilt für alle Knowledge-Base-Köpfe) */
.wissenskopf { color: #fff; min-height: 147px; display: grid;
  grid-template-columns: 216px 1fr; gap: 8px; align-items: stretch; }
.wissenskopf .wissen-marke { background: var(--knopf-grau);
  box-shadow: 0 5px 0 0 #FF0000;
  text-align: center; padding: 16px 0 10px; }
.wissenskopf .wissen-marke img { display: inline-block; }
.wissenskopf .wissen-marke h2 { font-size: 18px; font-weight: 600;
  margin-top: 4px; }
.wissenskopf .wissen-titel { background: var(--knopf-grau);
  box-shadow: 0 5px 0 0 #FF0000;
  padding: 18px 20px 14px 40px; display: flex; flex-direction: column;
  justify-content: center; }
.wissenskopf h1 { font-size: 27px; font-weight: 400; font-style: italic; }
.wissenskopf .unterzeile { font-style: italic; margin-top: 8px;
  text-align: right; }

/* Projektierungs-Seite: halbe-halbe Spalten, Textblock rundum 20px */
.artikel.spalten-640 { grid-template-columns: 640fr 640fr; }
.artikel.spalten-640 .textblock { padding: 20px; }

/* Fundament-Abschnitt: Foto als Spalten-Hintergrund (im Original ein
   Lazy-Hintergrundbild — von den Lesewerkzeugen übersehen!) */
.fundament-abschnitt { display: grid; grid-template-columns: 1fr 1fr; }
.fundament-bild { min-height: 500px; border-left: 7px solid #6699FF;
  background: url('/assets/bilder/fundament_schranke.avif')
    center / cover no-repeat; }

.artikel-r { display: grid; grid-template-columns: 646fr 634fr; }
.artikel-r .balken { color: #fff; font-size: 24px; font-weight: 400;
  line-height: 1.2; padding: 20px 20px 20px 28px; }
.artikel-r .textblock { padding: 20px 30px 0 30px; line-height: 1.4; }
.artikel-breit { display: grid; grid-template-columns: 768fr 512fr; }
.artikel-breit .balken { color: #fff; font-size: 24px; font-weight: 400;
  line-height: 1.2; padding: 20px 20px 20px 28px; }
.artikel-breit .textblock { padding: 20px; line-height: 1.4; }
.balken-kartenrot { background: var(--karten-rot); }
.balken-ziegelrot { background: #CC3300; }
.minispalten { display: grid; grid-template-columns: auto auto;
  justify-content: start; gap: 40px; margin-top: 16px; }

.abschnittsband-grau { background: var(--knopf-grau); color: #fff;
  border-radius: 15px 0 0 0; padding: 24px 28px; }
.abschnittsband-grau h2 { font-size: 24px; font-weight: 400; line-height: 1; }

.faq { padding: 20px 20px 0; line-height: 1.4;
  border-left: 7px solid #666; }  /* grauer Streifen in der Bandfarbe */
/* Bildreihen liegen im FAQ innerhalb des Streifens, ohne Eigenränder */
.faq .viererreihe, .faq .bilderreihe { padding: 0; }
.faq h3 { font-size: 22px; font-weight: 700; color: #000;
  margin: 8px 0 16px; }
.faq-bild { margin: 0 0 16px; }
.faq-bild img { width: 426px; max-width: 100%; height: auto; }
.faq-bild figcaption { font-size: 15px; padding-top: 8px; }

.viererreihe { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; padding: 0 13px; }
.viererreihe figure { margin: 0; }
.viererreihe figcaption { font-size: 15px; padding-top: 8px; }
.zweierreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.zweierreihe figure { margin: 0; }
.zweierreihe figcaption { font-size: 15px; padding-top: 8px; }
.bilderreihe { display: flex; gap: 20px; align-items: flex-end;
  padding: 0 27px; }

/* Feinabstände einzelner Bänder */
.abstand-100 { margin-top: 100px; }
.abstand-120 { margin-top: 120px; }
.abstand-135 { margin-top: 135px; }
.abstand-64 { margin-top: 64px; }
.abstand-60 { margin-top: 60px; }
.ohne-abstand { margin-top: 4px; }
.schluss-60 { margin-bottom: 60px; }

/* ── Geräteauswahl: blaues Titelband + Produktspalten ──────────── */
.titelband-blau { background: var(--blau); color: #fff;
  /* Höhe wächst mit der H1: 32px-Titel ergibt 142, 27px-Titel 136.
     Unter dem Band: weiße 2px-Linie + farbiger Strich (Original). */
  border-bottom: 2px solid #fff;
  padding: 39px 10px 14px 40px; box-shadow: 0 5px 0 0 #FF0000; }
.titelband-blau h1 { font-size: 32px; font-weight: 500; line-height: 1;
  border-top: 2px solid #fff; border-bottom: 2px solid #fff;
  /* Linien immer nur so lang wie die Schrift (Kalle, 02.09.) */
  padding: 6px 0; width: fit-content; max-width: 100%; }
.titelband-blau .unterzeile { font-style: italic; font-size: 17px;
  text-align: right; margin: 14px 10px 0 0; }

.produktreihe { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; }
.produkt h2 { font-size: 32px; font-weight: 700; color: var(--blau);
  line-height: 1; text-align: center; border: 2px solid var(--blau);
  border-radius: 20px 0 0 0; padding: 20px 0; }
.produkt img { display: block; width: 100%; height: auto; margin-top: 20px; }
.produkt .infokasten { background: #649AD0; color: #fff; padding: 30px 0; }
.produkt .infokasten h5 { font-size: 20px; font-weight: 600;
  line-height: 1; margin: 0 30px 20px; }
.produkt .infokasten ul { margin: 0; padding: 0 10px 0 40px;
  line-height: 1.5; }

/* Zubehör-Seite: orange Linie unter dem Band, Zwischentitel,
   Viererreihen mit Schattenbildern und fetter Unterschrift */
.titelband-blau.schatten-orange { box-shadow: 0 5px 0 0 #D19563; }
.zwischentitel { font-size: 32px; font-weight: 500; line-height: 1.2; }
.zubehoerreihe { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 30px; }
.zubehoerreihe figure { margin: 0; text-align: center; }
.zubehoerreihe img { width: 100%; height: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.zubehoerreihe figcaption { font-size: 15px; font-weight: 600;
  color: #494949; padding-top: 9px; }
/* Mouse-over dunkelt die Bilder ab — wie im Original (brightness 75%) */
.zubehoerreihe figure:hover img { filter: brightness(75%); }

/* Bild mit Rahmen und weichem Schlagschatten (Kalle, 02.09.) */
.bild-rahmen img { border: 1px solid #838383;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5); }

/* ── Sicherheits-Seite: roter Artikel, graues Band, Farbkacheln ── */
.artikel-sicherheit { display: grid; grid-template-columns: 691fr 589fr; }
.artikel-sicherheit .balken { color: #fff; font-size: 24px;
  font-weight: 400; line-height: 1.2; padding: 20px 20px 20px 28px; }
.artikel-sicherheit .textblock { padding: 20px 80px 20px 20px;
  line-height: 1.4; }
.artikel-sicherheit .balken + .textblock {
  border-left: 7px solid var(--strich, transparent); }
.balken-signalrot { background: #E31E24; }
.balken-signalrot + .textblock { --strich: #E31E24; }

.sicherheitsband { background: var(--balken-grau); color: #fff;
  padding: 25px; }
.sicherheitsband h2 { font-size: 27px; font-weight: 500; line-height: 1; }

.sicherheitskacheln { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 100px 50px; }
.sicherheitskacheln figure { margin: 0; color: #fff; }
.sicherheitskacheln img { display: block; width: 100%; height: auto; }
.sicherheitskacheln .inhalt { padding: 20px 30px 30px;
  line-height: 1.4; }  /* 21px wie im Original, sonst werden die Kästen zu lang */
.sicherheitskacheln h4 { font-size: 24px; font-weight: 500;
  line-height: 1.2; margin: 8px 0 16px; }
.sicherheitskacheln .inhalt p { margin-bottom: 14.4px; }
.sicherheitskacheln .inhalt ul { margin: 0; padding-left: 40px; }
.sicherheitskacheln .inhalt li { margin: 0; }
.sk-gruen { background: #61A375; }
.sk-orange { background: #EF7F1A; }
.sk-ocker { background: #D19563; }
.sk-blau { background: var(--blau); }
.sk-rot { background: #E31E24; }
/* Spezifischer als „.sicherheitskacheln figure" — sonst bleibt der
   Text weiß auf weiß und die Kachel wirkt leer! */
.sicherheitskacheln .sk-hell { color: var(--text);
  border: 1px solid #7A7A7A; }
.sk-hell .inhalt { padding: 30px; }
/* dünne Bildrahmen wie im Original (1px, nicht an der Ultraschall-Kachel) */
.sicherheitskacheln .rand img { border: 1px solid #838383; }
/* Mouse-over dunkelt die Kachelbilder ab (Original: brightness 75%) */
.sicherheitskacheln figure:hover img { filter: brightness(75%); }

/* ── YouTube-Klick-Embed: extern lädt erst nach dem Klick ──────── */
.video-klick { position: relative; aspect-ratio: 16 / 9; width: 800px;
  max-width: 100%; margin-inline: auto; background: #1C244B;
  cursor: pointer; overflow: hidden; }
.video-klick .abspielen { position: absolute; inset: 0; display: grid;
  place-items: center; }
.video-klick .abspielen span { width: 76px; height: 54px;
  background: #cc0000; border-radius: 14px; display: grid;
  place-items: center; }
.video-klick .abspielen span::after { content: '';
  border: 11px solid transparent; border-left: 20px solid #fff;
  margin-left: 8px; }
.video-klick .hinweis { position: absolute; left: 0; right: 0;
  bottom: 12px; text-align: center; color: #fff; font-size: 14px; }
.video-klick iframe { position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; }

/* ── Titelband der Unterseiten (grau) ──────────────────────────── */
.titelband { background: var(--titel-grau); min-height: 141px;
  color: #fff; display: flex; flex-direction: column;
  justify-content: center;
  /* Band im 1280er-Deckel (nicht voll breit) — Quelle: post-1076.css,
     darunter weiße Linie + blauer Strich (Kalle 02.09.) */
  border-bottom: 2px solid #fff;
  box-shadow: 0 5px 0 0 var(--blau);
  padding: 18px 20px 8px 44px; }
.titelband .titel { display: inline-block; }
.titelband h1 { font-size: 32px; font-weight: 500;
  border-top: 1px solid #fff; border-bottom: 1px solid #fff;
  /* Linien immer nur so lang wie die Schrift (Kalle, 02.09.) */
  padding: 6px 0; width: fit-content; }
.titelband .unterzeile { font-style: italic; text-align: right;
  margin: 10px 16px 0 0; }

/* ── Inhaltsabschnitte der Unterseiten ─────────────────────────── */
.spalten2 { display: grid; grid-template-columns: 1fr 1fr; }
.spalten2-luecke { display: grid; grid-template-columns: 539fr 626fr;
  gap: 100px; }
.spalten3 { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 50px; }

/* Überschriftband auf Karten (blau bzw. rot) */
.h2band { color: #fff; font-size: 24px; font-weight: 400;
  line-height: 1; padding: 20px 20px 20px 28px; }
.h2band-blau { background: var(--blau); border-radius: 15px 0 0 0; }
.h2band-rot { background: var(--karten-rot); border-radius: 0 15px 0 0; }
.h2band-gruen { background: #61A375; border-radius: 15px 0 0 0; }
.h2band-orange { background: #FF9933; border-radius: 0 15px 0 0; }

.textblock { padding: 20px 30px 0 30px; line-height: 1.4; }
.textblock p { margin-bottom: 14.4px; }
.textblock ul { margin: 0; padding-left: 40px; }
.textblock li { margin: 0; }
.textblock strong, .textblock b { font-weight: 700; }

/* Magnetic-Bauform: Streifen unter den Überschriftbändern */
.h2band-blau + .textblock { border-left: 7px solid var(--blau);
  padding: 30px 40px 0 20px; }
.h2band-rot + .textblock { border-right: 7px solid var(--karten-rot);
  padding: 20px 30px 0 30px; }
.h2band-gruen + .textblock { border-left: 7px solid #61A375;
  padding: 30px 40px 0 20px; }
.h2band-orange + .textblock { border-right: 7px solid #FF9933;
  padding: 20px 30px 0 30px; }

figure.bild { margin: 0; }
/* Bildspalten füllen die Spalte immer ganz aus — im Original steht an
   jedem dieser Widgets img{width:100%} (Kalle: „am Rahmen anstehen") */
figure.bild img { display: block; width: 100%; height: auto; }
figure.bild figcaption { font-size: 15px; color: var(--text);
  padding: 10px 12px; }

/* ── Technische Tabelle (Kundentabelle, sauber übernommen) ─────── */
.tech-specs-table { width: 100%; border-collapse: collapse;
  font-family: Arial, sans-serif; font-size: 14px; color: #333; }
.tech-specs-table th { background-color: #0091d0; color: #fff;
  text-align: left; padding: 12px; border: 1px solid #fff; }
.tech-specs-table td { padding: 10px 12px; border-bottom: 1px solid #eee; }
.tech-specs-table tbody tr:nth-child(even) { background-color: #f2f2f2; }
.tech-specs-table tbody tr:hover { background-color: #e9f5fb; }

/* ── Knöpfe im Inhalt (z.B. Datenblatt-PDF) ────────────────────── */
.knopfzeile { text-align: center; margin-top: 90px; }
.inhalt-knopf { display: inline-block; background: var(--blau); color: #fff;
  font-size: 15px; padding: 14px 35px; text-decoration: none;
  /* wie Original: runde Ecken + feiner grauer Rand (post-1076.css) */
  border: 1px solid #747474; border-radius: 10px; }
.inhalt-knopf:hover { background: #4f83bd; }

/* ── Fußzeile (weiß) + ©-Balken (grau) ─────────────────────────── */
.fusszeile { margin-top: 100px; background: #fff;
  border-top: 4px solid var(--text-grau);   /* grauer Streifen wie Original */
  padding: 26px max(var(--rand), calc((100% - var(--inhalt)) / 2)) 40px;
  /* Spaltenmaße am Original gemessen (1280 UND 1920): 47% + 100px Lücke,
     dann 33% und 23% — die dritte Spalte ragt bewusst über den Deckel */
  display: grid; grid-template-columns: calc(47% + 100px) 33% 23%; }
.fusszeile .logo { height: 51px; width: auto; }
.fusszeile .tagline { margin-top: 20px; font-size: 16px; }
.fusszeile h6 { font-size: 22px; color: var(--dunkelblau2);
  margin-bottom: 12px; }
.fusszeile ul { list-style: none; margin: 0; padding: 0; }
.fusszeile li { margin-bottom: 6px; }
/* Fußzeilen-Links: beim Überfahren NUR Unterstrich, keine helle Farbe.
   Kalles Entscheidung 02.09.2026 — das Original färbt die aktuelle Seite
   #C8D5DC, das fällt aber bei Google an der Kontrastprüfung durch. */
.fusszeile a { color: var(--text); text-decoration: none; }
.fusszeile a:hover { text-decoration: underline; }
.fusszeile address { font-style: normal; color: var(--dunkelblau); }
.fusszeile .kontaktliste { margin-top: 12px; color: var(--dunkelblau); }
/* ©-Zeile: Text mittig wie im Original; die zusätzliche Luft unter dem
   Text ist Kalles Wunsch vom 02.09.2026 (Original: 45px, vertikal mittig) */
.copyright { background: var(--knopf-grau); color: #fff;
  text-align: center; font-size: 16px;
  padding: 12px max(var(--rand), calc((100% - var(--inhalt)) / 2)) 45px; }

/* ═════════ Tablet (bis 1024 px) ═════════ */
@media (max-width: 1024px) {
  .hauptmenue { display: none; }
  .menue-knopf { display: block; margin-right: auto; }
  .kopf.menue-offen .hauptmenue { display: block; position: absolute;
    left: 0; right: 0; top: 100px; background: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,.12); padding: 10px var(--rand) 20px; }
  .kopf.menue-offen .hauptmenue ul { flex-direction: column;
    align-items: flex-start; }
  .kopf.menue-offen .hauptmenue li + li::before { content: none; }
  .kopf.menue-offen .hauptmenue a { display: block; padding: 12px 0;
    font-size: 18px; }
}

/* ═════════ Schmäler als der Inhaltsdeckel ═════════
   Das Original gibt Inhalten dann 10px Seitenluft; Bänder mit
   eigener Hintergrundfläche laufen weiter voll durch. */
@media (max-width: 1300px) {
  main > section { width: calc(100% - 20px); }
  main > section.titelband, main > section.titelband-blau,
  main > section.titelband2, main > section.wissenskopf,
  main > section.hero, main > section.heldenbild,
  main > section.logoband, main > section.abschnittsband,
  main > section.sicherheitsband { width: 100%; }
}

/* ═════════ Paket 7: Wissens-Restseiten und Schlussblock ═════════ */

/* Podcast-Kasten (Portfolio): blasses Hintergrundbild hinter dem
   Rahmen — im Original ein Lazy-Hintergrundbild (podcast.avif) */
.podcast-kasten { position: relative; overflow: hidden;
  border: 1px solid #838383; border-radius: 20px; padding: 20px;
  display: flex; align-items: center; gap: 20px; }
.podcast-kasten::before { content: ""; position: absolute; inset: 0;
  background: url('/assets/bilder/podcast.avif') center / cover no-repeat;
  opacity: .26; }
.podcast-kasten > * { position: relative; }
.podcast-kasten h2 { font-size: 24px; font-weight: 400; line-height: 1.3;
  padding-left: 63px; flex: 1; }
.podcast-kasten audio { width: 300px; }

/* Portfolio: drei Kundenlisten nebeneinander */
.kundenliste { display: flex; justify-content: space-between; }
.kundenliste ul { width: 411px; margin: 0; padding-left: 22px;
  line-height: 2; font-size: 15px; }
.kundenliste li { margin: 0; }

/* Kontaktseite: linke Textspalte, rechts das Formular */
.kontakt-spalten { display: grid; grid-template-columns: 600fr 626fr;
  gap: 54px; align-items: start; }
.nachbarn-kasten { background: #F9F9F9; border-left: 4px solid #D9534F;
  padding: 20px; margin: 20px 0 30px; display: flex;
  align-items: center; gap: 20px; }
.anschrift-spalten h3 { font-size: 16px; text-transform: uppercase;
  color: #777; margin-bottom: 10px; }
.anschrift-spalten { display: grid; grid-template-columns: 1fr 1fr;
  gap: 30px; margin-top: 30px; }
.formular-kasten { border-left: 6px solid var(--blau); padding-left: 50px; }
.formular label { display: block; font-size: 16px; font-weight: 600;
  margin: 15px 0 5px; }
.formular .pflicht { color: #D63637; }
.formular .feldhinweis { font-size: 14px; color: #666; margin-top: 4px; }
.formular input[type="text"], .formular input[type="email"],
.formular input[type="tel"], .formular select, .formular textarea {
  width: 100%; padding: 10px 14px; font: inherit; font-size: 16px;
  color: var(--text); border: 1px solid #999; border-radius: 3px;
  background: #fff; }
.formular textarea { min-height: 140px; resize: vertical; }
.formular .dsgvo-zeile { display: flex; gap: 10px;
  align-items: flex-start; margin-top: 15px; font-size: 15px; }
.formular .dsgvo-zeile input { margin-top: 4px; }
.formular button { margin-top: 20px; font: inherit; font-size: 17px;
  color: #fff; background: var(--blau); border: 0; border-radius: 3px;
  padding: 10px 28px; cursor: pointer; }
.formular button:hover { background: #4A83C4; }
.formular .honig { position: absolute; left: -9999px; }
.formular-meldung { padding: 14px 18px; border-radius: 3px;
  margin-bottom: 10px; }
.formular-meldung.gut { background: #E7F5E9; border: 1px solid #4D897C; }
.formular-meldung.schlecht { background: #FBEAEA;
  border: 1px solid #D63637; }

/* DSGVO- und FAQ-Seite: Abschnitte in voller Breite, ohne Rahmen,
   jeder zweite hell hinterlegt (Kalle 03.09.: kein Kartenraster) */
.dsgvo-abschnitt, .faq-abschnitt { padding: 26px 28px 20px; }
.dsgvo-abschnitt:nth-child(even),
.faq-abschnitt:nth-child(even) { background: #F4F4F4; }
.dsgvo-abschnitt h2, .faq-abschnitt h3 { font-size: 18px;
  font-weight: 600; color: var(--gruen); margin: 0 0 10px; }
.faq-abschnitt h3 { color: var(--dunkelblau); }
.dsgvo-abschnitt p, .faq-abschnitt p { font-size: 15px;
  line-height: 22px; }
.dsgvo-abschnitt ul, .faq-abschnitt ul { margin: 0 0 14.4px; }
.dsgvo-abschnitt li, .faq-abschnitt li { line-height: 22px; }

/* Zuletzt-aktualisiert-Zeile unter den Brotkrumen (Wissensseiten) */
.stand-zeile { font-size: 13px; font-style: italic;
  color: var(--text-grau); margin: 0;
  padding: 8px max(var(--rand), calc((100% - var(--inhalt)) / 2)) 0; }
.dsgvo-stand { margin-top: 8px; color: var(--text-grau);
  font-style: italic; }

/* ═════════ Mobil (bis 767 px) ═════════ */
@media (max-width: 767px) {
  .kontakt-spalten, .anschrift-spalten { grid-template-columns: 1fr; }
  .formular-kasten { padding-left: 20px; }
  .podcast-kasten { flex-direction: column; }
  .podcast-kasten h2 { padding-left: 0; }
  .kundenliste { flex-direction: column; gap: 10px; }
  .kundenliste ul { width: 100%; }
  main > section { margin-top: 48px; }
  .hero { min-height: 0; background-size: cover; padding-top: 46%; }
  .hero h1 { font-size: 28px; line-height: 1.25; margin: 0 0 12px 14px; }
  .logoband { grid-template-columns: 1fr; gap: 26px; padding: 0 20px; }
  .kastenband { flex-direction: column; gap: 32px; padding: 0; }
  .kastenband .kasten { width: 100%; }
  .reihe3, .spalten2, .spalten2-luecke, .spalten3,
  .dreikasten, .kachelreihe, .kastenband3, .intro-spalten,
  .wechselzeile, .karten3, .produktreihe, .artikel-sicherheit,
  .sicherheitskacheln, .fundament-abschnitt {
    grid-template-columns: 1fr; gap: 32px; }
  .titelband-blau { padding-left: 20px; }
  .titelband-blau h1 { font-size: 24px; }
  /* Bildpaare der Detailseiten (inline als Flex gesetzt) mobil stapeln */
  section[style*="display: flex"] { display: block !important; }
  section[style*="display: flex"] figure { width: 100% !important;
    margin-bottom: 24px; }
  .wechselzeile .balken, .wechselzeile .textblock { padding-left: 20px; }
  .seitentitel { margin-top: 24px; padding: 0 20px; }
  .seitentitel h1 { font-size: 28px; }
  .heldenbild { height: 0; padding-top: 30%; background-size: cover; }
  .titelband { padding-left: 20px; }
  .titelband h1 { font-size: 26px; }
  .fusszeile { grid-template-columns: 1fr; gap: 28px; }
}