/* ==========================================================================
   bbcom secure Deutschland gmbh — Stylesheet
   Umsetzung von "Bauanleitung Website", Stand 18. August 2026.
   Alle Werte stammen aus dieser Bauanleitung; sie ist die verbindliche
   Referenz. Wo der HTML-Entwurf abweichende Werte enthielt, gilt die
   Bauanleitung.
   ========================================================================== */

/* --- 1 Schriften, lokal ausgeliefert (kein Google Fonts, DSGVO) ---------- */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-400-normal.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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-ext-400-normal.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-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-500-normal.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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-ext-500-normal.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-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-600-normal.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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-sans-3-latin-ext-600-normal.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-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-ext-400-normal.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;
}

/* --- 2 Tokens ------------------------------------------------------------ */

:root {
  /* Farben, Bauanleitung §2 */
  --anthrazit:        #1B1815;
  --anthrazit-tief:   #141210;
  --weiss-warm:       #FAF7F1;
  --weiss-warm-tief:  #F3EEE4;
  --sand:             #EFE5D2;
  --gold-hell:        #E4B85C;
  --gold:             #B4892B;
  --gold-dunkel:      #8A6A21;
  /* Blau (#1E5C8F) war laut Bauanleitung §2 "Sekundärakzent aus der
     Wortmarke". Seit das Wortbildzeichen nur noch schwarz oder weiss
     gesetzt wird, hat der Ton keine Herkunft mehr in der Marke — deshalb
     entfernt. Er wurde nirgends verwendet. */

  /* Text auf hellem Grund */
  --text-hell-titel:  #1B1815;
  --text-hell-body:   #544E45;
  --text-hell-neben:  #7C7568;
  /* Text auf dunklem Grund */
  --text-dunkel-titel:#F6F1E9;
  --text-dunkel-body: #BDB4A6;
  --text-dunkel-neben:#8C8377;

  /* Trennlinien */
  --linie-hell:       rgba(27, 24, 21, 0.14);
  --linie-hell-stark: rgba(27, 24, 21, 0.18);
  --linie-dunkel:     rgba(246, 241, 233, 0.12);

  /* Raster und Abstände, Bauanleitung §4 */
  --inhalt:      1120px;
  --rand:        40px;
  --raum-6:      6px;
  --raum-12:    12px;
  --raum-16:    16px;
  --raum-26:    26px;
  --raum-34:    34px;
  --raum-56:    56px;
  --raum-72:    72px;
  --raum-96:    96px;
  --raum-112:  112px;
  --kopfzeile:  84px;
  --ecke:        2px;

  /* Schrift */
  --font: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Schriftgrößen, Bauanleitung §3.
     Untere Grenze = Mobilwert (etwa halbe Größe bei Überschriften),
     obere Grenze = Entwurfswert bei 1440 px. */
  --gr-hero:     clamp(2.125rem, 1.05rem + 3.6vw, 4.25rem);   /* 34 → 68 */
  --gr-h1:       clamp(1.875rem, 1.05rem + 2.8vw, 3.5rem);    /* 30 → 56 */
  --gr-h2:       clamp(1.625rem, 1.05rem + 1.95vw, 2.75rem);  /* 26 → 44 */
  --gr-h2-klein: clamp(1.5rem, 1.0rem + 1.7vw, 2.375rem);     /* 24 → 38 */
  --gr-zitat:    clamp(1.625rem, 0.95rem + 2.3vw, 3.25rem);   /* 26 → 52 */
  --gr-zahl:     clamp(2.25rem, 1.4rem + 2.9vw, 3.5rem);      /* 36 → 56 */
  --gr-begriff:  clamp(1.75rem, 1.1rem + 2.2vw, 2.875rem);    /* 28 → 46 */
  --gr-kachel:   clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); /* 19 → 22 */
  --gr-schritt:  clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);   /* 20 → 26 */
  --gr-lead:     clamp(1.0625rem, 1.0rem + 0.25vw, 1.1875rem);/* 17 → 19 */
  --gr-body:     clamp(1.0625rem, 1.0rem + 0.2vw, 1.125rem);  /* 17 → 18 */
  --gr-neben:    1rem;
  --gr-klein:    0.875rem;
  --gr-mono:     0.6875rem;
}

/* --- 3 Grundlagen ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--gr-body);
  line-height: 1.6;
  color: var(--text-hell-body);
  background: var(--weiss-warm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-hell-titel);
  font-weight: 600;
  text-wrap: balance;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--gold-dunkel);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprungmarke für Tastaturbedienung */
.skip {
  position: absolute; left: var(--rand); top: -100px; z-index: 100;
  background: var(--gold); color: #fff; padding: 12px 20px;
  border-radius: var(--ecke); font-weight: 600;
  transition: top .15s;
}
.skip:focus { top: 12px; }

/* --- 4 Layout ----------------------------------------------------------- */

.inhalt {
  max-width: calc(var(--inhalt) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
@media (max-width: 600px) {
  :root { --rand: 22px; }
}

.abschnitt { padding-block: var(--raum-112); }
.abschnitt--hell  { background: var(--weiss-warm); }
.abschnitt--tief  { background: var(--weiss-warm-tief); }
.abschnitt--sand  { background: var(--sand); }
.abschnitt--dunkel{ background: var(--anthrazit); }
.abschnitt--weit  { padding-block: clamp(var(--raum-72), 9vw, 128px); }

@media (max-width: 900px) {
  .abschnitt { padding-block: var(--raum-72); }
}

/* Auf dunklem Grund kehren sich die Textrollen um */
.abschnitt--dunkel,
.hero--dunkel { color: var(--text-dunkel-body); }
.abschnitt--dunkel h1, .abschnitt--dunkel h2, .abschnitt--dunkel h3,
.hero--dunkel h1, .hero--dunkel h2 { color: var(--text-dunkel-titel); }

/* Zweispaltiger Abschnitt, Bauanleitung §4 */
.zwei-spalten {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: var(--raum-96);
  align-items: start;
}
@media (max-width: 1040px) {
  .zwei-spalten { grid-template-columns: 1fr; gap: var(--raum-56); }
}

/* --- 5 Bausteine -------------------------------------------------------- */

/* Vorzeile, Bauanleitung §5 */
.vorzeile {
  font-family: var(--font-mono);
  font-size: var(--gr-mono);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dunkel);
  margin-bottom: var(--raum-26);
}
.vorzeile--dunkel { color: var(--gold-hell); }

/* Überschriften */
.h-hero {
  font-size: var(--gr-hero);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
.h-seite {
  font-size: var(--gr-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.h-abschnitt {
  font-size: var(--gr-h2);
  line-height: 1.12;
  letter-spacing: -0.018em;
}
.h-abschnitt--klein { font-size: var(--gr-h2-klein); }

.lead {
  font-size: var(--gr-lead);
  line-height: 1.62;
  max-width: 64ch;
}
.text { line-height: 1.65; max-width: 66ch; }
.text + .text { margin-top: 22px; }
.neben { font-size: var(--gr-neben); line-height: 1.55; color: var(--text-hell-neben); }
.quelle { font-size: var(--gr-klein); line-height: 1.55; color: var(--text-hell-neben); }

/* Schaltflächen, Bauanleitung §5 */
.knopf-reihe { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.knopf {
  display: inline-block;
  padding: 15px 28px;
  border-radius: var(--ecke);
  font-size: 1.0625rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.knopf--haupt { background: var(--gold); color: #fff; }
.knopf--haupt:hover { background: var(--gold-dunkel); }
.knopf--haupt-dunkel { background: var(--gold-hell); color: var(--anthrazit); }
.knopf--haupt-dunkel:hover { background: #F0C871; }

.knopf--kontur {
  padding: 14px 26px;
  font-weight: 500;
  background: none;
  border-color: rgba(27, 24, 21, 0.30);
  color: var(--text-hell-titel);
}
.knopf--kontur:hover { border-color: var(--gold); color: var(--gold-dunkel); }

.knopf--kontur-dunkel {
  padding: 14px 26px;
  font-weight: 500;
  background: none;
  border-color: rgba(246, 241, 233, 0.32);
  color: var(--text-dunkel-titel);
}
.knopf--kontur-dunkel:hover { border-color: var(--gold-hell); color: var(--gold-hell); }

/* Kachelraster aus Haarlinien, Bauanleitung §5 */
.kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linie-hell);
  border: 1px solid var(--linie-hell);
}
.kacheln--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .kacheln { grid-template-columns: 1fr; } }

.kachel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
  background: var(--weiss-warm);
  padding: var(--raum-34) 32px 30px;
  min-height: 184px;
  transition: background-color .15s;
}
.kachel:hover { background: var(--weiss-warm-tief); }
.abschnitt--tief .kachel { background: var(--weiss-warm-tief); }
.abschnitt--tief .kachel:hover { background: var(--weiss-warm); }

.kachel__titel {
  font-size: var(--gr-kachel);
  line-height: 1.3;
  font-weight: 500;
  color: var(--text-hell-titel);
  max-width: 22ch;
}
.kachel__verweis { font-size: 0.9375rem; color: var(--gold-dunkel); }

/* ---------------------------------------------------------------------------
   Motivkacheln — Anlassfeld der Startseite

   Anders als die Textkacheln oben stehen diese Kacheln frei, mit Abstand
   zueinander, und tragen je ein eigenes Hintergrundmotiv.

   Der Grund ist hell. Sechs dunkle Kacheln direkt unter dem dunklen Hero
   hatten die halbe Startseite schwarz gemacht — für ein Haus, das Lösungen
   verkauft, der falsche Eindruck. Jetzt bleibt der Hero der einzige dunkle
   Block, und das Anlassfeld liegt offen darunter.

   Wer die dunkle Fassung will: .motivkacheln--dunkel am Behälter ergänzen.
   Dann brauchen auch die Motive dunkle Fassungen.

   Das Bild kommt per Eigenschaft --kachel-bild aus dem Template, gefüllt aus
   dem Feld "Kachelbild" der Collection. Fehlt das Bild, bleibt eine ruhige
   Fläche mit feiner Linie — keine Lücke, kein gebrochenes Bild.
   --------------------------------------------------------------------------- */
.motivkacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--raum-26);
}
@media (max-width: 900px) { .motivkacheln { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 620px) { .motivkacheln { grid-template-columns: 1fr; gap: var(--raum-16); } }

.motivkachel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(262px, 23vw, 330px);
  padding: var(--raum-26);
  border-radius: var(--ecke);
  background: var(--weiss-warm-tief);
}

/* Motiv als eigene Ebene, damit die Verdunkelung darüber unabhängig arbeitet */
.motivkachel::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--kachel-bild, none);
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}

/* Zweiter Anlauf, verworfen: ein breites Lichtfeld unten links, das die
   Schrift lesbar machen sollte. Ergebnis laut Rückmeldung — der helle
   Übergang selbst wurde zum auffälligsten Element der Kachel und zog den
   Blick auf sich statt auf den Text. Jetzt trägt eine eng sitzende dunkle
   Schriftkarte (.motivkachel__karte) den Text; das Bild bleibt bis auf einen
   ganz flachen, dunklen Bodenschleier unangetastet und lenkt nicht mehr ab. */
.motivkachel::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(20, 18, 16, 0.20) 0%,
    rgba(20, 18, 16, 0)    38%);
  transition: opacity .18s ease;
}

@media (hover: hover) {
  .motivkachel:hover::before { transform: scale(1.04); }
}
.motivkachel:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

/* Kachel ohne Motiv */
.motivkachel--leer { border: 1px solid var(--linie-hell); }
.motivkachel--leer::after { background: none; }

/* Die Schriftkarte: eng um Titel und Verweis, nicht breiter als der Text
   selbst braucht. Anthrazit, wie die dunklen Flächen der Website — nicht
   noch eine Bildbearbeitung, sondern derselbe Grundton, den Anlassseite und
   Abschluss auch tragen. Dadurch liest sich die Karte als Bauteil der
   Website, nicht als Nachbearbeitung des Fotos. */
.motivkachel__karte {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 10px;
  max-width: 100%;
  padding: 16px 22px;
  background: rgba(27, 24, 21, 0.88);
  border-radius: var(--ecke);
}

.motivkachel__titel {
  font-size: var(--gr-kachel);
  line-height: 1.28;
  font-weight: 500;
  color: var(--text-dunkel-titel);
  max-width: 20ch;
  text-wrap: balance;
}
.motivkachel__verweis {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gold-hell);
}
.motivkachel__verweis i { font-style: normal; transition: transform .18s ease; }
@media (hover: hover) {
  .motivkachel:hover .motivkachel__verweis i { transform: translateX(4px); }
}

/* Auf schmalen Geräten stehen alle sechs untereinander. Flachere Kacheln,
   damit das Feld nicht zu einer langen Rutschbahn wird. Die Karte selbst
   bleibt gleich — sie ist ja schon eng am Text und nicht auf die Bildbreite
   angewiesen. */
@media (max-width: 620px) {
  .motivkachel {
    min-height: 232px;
    padding: var(--raum-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motivkachel::before, .motivkachel::after,
  .motivkachel__verweis i { transition: none; }
  .motivkachel:hover::before { transform: none; }
}

/* Vier-Schritte-Diagramm, Bauanleitung §5 */
.schritte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--raum-34);
}
@media (max-width: 900px) { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .schritte { grid-template-columns: 1fr; } }

.schritt__marke {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 22px;
}
.schritt__punkt {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}
.schritt__linie {
  flex: 1 1 auto;
  height: 1px;
  background: var(--gold);
  position: relative;
  margin-right: var(--raum-34);
}
.schritt__linie::after {
  content: '';
  position: absolute; right: -1px; top: -3px;
  border-left: 6px solid var(--gold);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
}
.schritt:last-child .schritt__linie { display: none; }
@media (max-width: 900px) { .schritt__linie { display: none; } }

.schritt__ziffer {
  font-family: var(--font-mono);
  font-size: var(--gr-mono);
  letter-spacing: 0.16em;
  color: var(--text-hell-neben);
  margin-bottom: var(--raum-12);
}
.schritt__name {
  font-size: var(--gr-schritt);
  line-height: 1.3;
  font-weight: 500;
  color: var(--text-hell-titel);
  margin-bottom: var(--raum-12);
}

/* Kernaussage mit Randlinie, Bauanleitung §5 */
.kernaussage {
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--text-hell-titel);
  max-width: 56ch;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
}

/* Zahlenblock, Bauanleitung §5 */
.zahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--raum-56);
}
@media (max-width: 860px) { .zahlen { grid-template-columns: 1fr; gap: var(--raum-34); } }

.zahl { border-top: 1px solid var(--linie-hell-stark); padding-top: var(--raum-26); }
.zahl__wert {
  font-size: var(--gr-zahl);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--text-hell-titel);
  margin-bottom: var(--raum-12);
}
.zahl__label { font-size: 1.0625rem; color: var(--text-hell-titel); margin-bottom: var(--raum-6); }
/* Der Herkunftshinweis ist Pflicht und nie kleiner als 14 px, Bauanleitung §5 */
.zahl__herkunft { font-size: var(--gr-klein); line-height: 1.55; color: var(--text-hell-neben); }

/* Stichpunktliste ohne Aufzählungszeichen, Bauanleitung §5 */
.stichpunkte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-hell-stark); }
.stichpunkte > li { padding-block: 22px; border-bottom: 1px solid var(--linie-hell-stark); }
.stichpunkte__titel { font-size: 1.1875rem; font-weight: 600; color: var(--text-hell-titel); margin-bottom: var(--raum-6); }

/* Zitat-Abschnitt: optionales, leicht scrollendes Hintergrundbild unter
   einem Sand-Schleier, damit der Text vorne immer gut lesbar bleibt. */
.zitat-abschnitt {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--raum-56), 6vw, 96px);
}
.zitat-abschnitt__hintergrund {
  position: absolute;
  inset: -18% 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
}
.zitat-abschnitt__hintergrund::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(239, 229, 210, 0.86); /* var(--sand), deckend genug für Lesbarkeit */
}
.zitat-abschnitt__inhalt { position: relative; z-index: 1; }

/* Zitat, ganze Breite */
.zitat {
  position: relative;
  border-top: 1px solid rgba(180, 137, 43, 0.28);
  border-bottom: 1px solid rgba(180, 137, 43, 0.28);
  padding-block: clamp(var(--raum-34), 4vw, 56px);
  padding-left: clamp(48px, 6vw, 84px);
  margin: 0;
}
.zitat::before {
  content: '\201E';
  position: absolute;
  left: -8px;
  top: 0.08em;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  color: var(--gold);
  pointer-events: none;
}
.zitat__satz {
  font-size: var(--gr-zitat);
  line-height: 1.22;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--anthrazit);
  max-width: 24ch;
}

/* Abschlussbegriffe */
.begriffe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-56); }
@media (max-width: 720px) { .begriffe { grid-template-columns: 1fr; gap: var(--raum-34); } }
.begriff { border-top: 1px solid var(--gold); padding-top: var(--raum-26); }
.begriff__wort {
  font-size: var(--gr-begriff);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text-hell-titel);
  margin-bottom: var(--raum-16);
}
.abschnitt--dunkel .begriff__wort { color: var(--text-dunkel-titel); }

/* Brotkrume */
.brotkrume { font-size: 0.9375rem; color: var(--text-hell-neben); margin-bottom: var(--raum-26); }
.brotkrume a:hover { color: var(--gold-dunkel); }

/* --- 6 Kopfzeile und Navigation, Bauanleitung §6 ------------------------ */

.kopf {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--linie-hell);
  background: var(--weiss-warm);
}
/* Auf der Startseite steht die Kopfzeile auf dem dunklen Hero, Bauanleitung §6.
   Sie trägt deshalb selbst den Anthrazitgrund — sonst schlägt der helle
   Seitengrund durch und das weiße Wortbildzeichen verschwindet. */
.kopf--auf-dunkel { background: var(--anthrazit); border-bottom-color: var(--linie-dunkel); }

.kopf__zeile {
  display: flex;
  align-items: center;
  gap: var(--raum-56);
  height: var(--kopfzeile);
}
.kopf__logo { flex: 0 0 auto; display: flex; align-items: center; }
.kopf__logo img { height: 22px; width: auto; }

.kopf__menue { display: flex; align-items: center; gap: var(--raum-34); font-size: 1rem; }
.kopf__aktion { margin-left: auto; }

.kopf__punkt {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 0;
  background: none; border: 0; cursor: pointer;
  color: var(--text-hell-body);
  font-size: 1rem;
  transition: color .15s;
}
.kopf__punkt:hover, .kopf__punkt[aria-expanded="true"] { color: var(--gold-dunkel); }
.kopf__punkt-pfeil { font-size: 0.6875rem; opacity: .8; }

.kopf--auf-dunkel .kopf__punkt { color: #CFC7BA; }
.kopf--auf-dunkel .kopf__punkt:hover,
.kopf--auf-dunkel .kopf__punkt[aria-expanded="true"] { color: var(--gold-hell); }

.kopf__knopf {
  display: inline-block;
  border: 1px solid rgba(180, 137, 43, 0.55);
  color: var(--gold-dunkel);
  padding: 10px 20px;
  border-radius: var(--ecke);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color .15s;
}
.kopf__knopf:hover { background: rgba(180, 137, 43, 0.08); }
.kopf--auf-dunkel .kopf__knopf {
  border-color: rgba(228, 184, 92, 0.55);
  color: var(--gold-hell);
}
.kopf--auf-dunkel .kopf__knopf:hover { background: rgba(228, 184, 92, 0.10); }

/* Mega-Menü über die ganze Breite */
.mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--weiss-warm-tief);
  border-bottom: 1px solid rgba(180, 137, 43, 0.28);
  display: none;
}
.kopf--auf-dunkel .mega {
  background: #23201B;
  border-bottom-color: rgba(228, 184, 92, 0.28);
}
.mega[data-offen="true"] { display: block; }

.mega__innen { padding-block: 38px 42px; }
.mega__liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 40px;
}
@media (max-width: 900px) { .mega__liste { grid-template-columns: 1fr; } }

.mega__eintrag {
  display: block;
  padding: 14px 16px 14px 0;
  border-top: 1px solid var(--linie-hell);
  font-size: 1.0625rem;
  color: var(--text-hell-titel);
  transition: color .15s;
}
.mega__eintrag:hover { color: var(--gold-dunkel); }
.kopf--auf-dunkel .mega__eintrag { border-top-color: var(--linie-dunkel); color: #EFE9DF; }
.kopf--auf-dunkel .mega__eintrag:hover { color: var(--gold-hell); }

/* Mobile Navigation */
.kopf__schalter {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--linie-hell-stark);
  border-radius: var(--ecke);
  padding: 9px 14px;
  color: inherit; cursor: pointer;
  font-size: 0.9375rem;
}
.kopf--auf-dunkel .kopf__schalter { border-color: rgba(246,241,233,.28); color: var(--text-dunkel-titel); }

@media (max-width: 1040px) {
  .kopf__schalter { display: block; }
  .kopf__menue, .kopf__aktion {
    display: none;
    width: 100%;
  }
  .kopf__zeile { flex-wrap: wrap; height: auto; padding-block: 18px; gap: var(--raum-16); }
  .kopf[data-offen="true"] .kopf__menue {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--linie-hell); padding-top: var(--raum-12);
  }
  .kopf[data-offen="true"] .kopf__aktion { display: block; margin: var(--raum-16) 0 var(--raum-12); }
  .kopf__punkt { padding-block: 14px; border-bottom: 1px solid var(--linie-hell); width: 100%; }
  .mega { position: static; border: 0; background: none; }
  .kopf--auf-dunkel .mega { background: none; }
  .mega__innen { padding-block: 0 var(--raum-16); }
  .mega__eintrag { padding-left: var(--raum-16); font-size: 1rem; }
}

/* --- 7 Hero ------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; }
.hero--dunkel { background: var(--anthrazit); }
.hero--hell   { background: var(--weiss-warm); }

/* Warmes Licht auf dem dunklen Grund.
   Ohne diese Ebene ist der Hero eine gleichmässig dunkle Wand — mit ihr hat
   er eine Lichtquelle rechts oben, hinter dem Video. Sehr flach dosiert:
   sichtbar als Aufhellung, nicht als Farbfleck. */
.hero--dunkel::before {
  content: "";
  position: absolute;
  top: -20%; right: -6%;
  width: 74%; height: 124%;
  background: radial-gradient(closest-side at 58% 44%,
    rgba(198, 154, 62, 0.22),
    rgba(198, 154, 62, 0.08) 50%,
    rgba(198, 154, 62, 0) 76%);
  pointer-events: none;
}
.hero__raster { position: relative; z-index: 1; }

.hero__raster {
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: var(--raum-56);
  align-items: start;
  padding-block: var(--raum-96) 104px;
}
@media (max-width: 1040px) {
  .hero__raster { grid-template-columns: 1fr; gap: var(--raum-56); padding-block: var(--raum-72); }
}

.hero__text { padding-top: var(--raum-12); }
.hero__text .h-hero { margin-bottom: 30px; }
.hero__text .lead { margin-bottom: 42px; }

/* Zweiter Weg: feine Linie plus zurückgenommener Textlink, Bauanleitung §7 */
.hero__nebenweg {
  margin-top: var(--raum-34);
  padding-top: 22px;
  border-top: 1px solid var(--linie-dunkel);
}
.hero--hell .hero__nebenweg { border-top-color: var(--linie-hell); }
.hero__nebenweg a { font-size: 0.9375rem; color: var(--text-dunkel-neben); transition: color .15s; }
.hero__nebenweg a:hover { color: var(--text-dunkel-body); }
.hero--hell .hero__nebenweg a { color: var(--text-hell-neben); }
.hero--hell .hero__nebenweg a:hover { color: var(--text-hell-body); }

/* Rechts im Hero steht ausschliesslich das Video, Bauanleitung §7 in der
   angepassten Fassung: keine Illustration, kein zweiter Baustein. */
.hero__bild {
  display: flex;
  flex-direction: column;
  gap: var(--raum-26);
  /* Ohne Illustration ist das Video der kürzere Baustein. Mittig zur
     Textspalte gesetzt liest sich das als Absicht, nicht als Rest. */
  align-self: center;
}
@media (max-width: 1040px) { .hero__bild { align-self: start; } }

/* --- 8 Video, Bauanleitung §7: nur nach Klick, keine Automatik ---------- */

.video { display: block; width: 100%; }
.video__rahmen {
  position: relative;
  border: 1px solid var(--linie-dunkel);
  background: #F7F3EC;
  border-radius: var(--ecke);
  overflow: hidden;
  cursor: pointer;
}
.hero--hell .video__rahmen, .abschnitt--hell .video__rahmen { border-color: var(--linie-hell); }
.video__standbild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Der Rahmen ist ein Button: Browserstile zurücksetzen */
button.video__rahmen {
  display: block; width: 100%; padding: 0; text-align: left;
  font: inherit; color: inherit;
}

.video__knopf {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.video__kreis {
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(27, 24, 21, 0.82);
  border: 1px solid rgba(228, 184, 92, 0.7);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s;
}
.video__rahmen:hover .video__kreis,
.video__rahmen:focus-visible .video__kreis { background: rgba(27, 24, 21, 0.94); }
.video__dreieck {
  width: 0; height: 0;
  border-left: 17px solid var(--gold-hell);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
}

.video__zeile {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--raum-12);
  font-family: var(--font-mono);
  font-size: var(--gr-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dunkel-neben);
}
.hero--hell .video__zeile, .abschnitt--hell .video__zeile { color: var(--text-hell-neben); }

/* Lichtbox für die Videowiedergabe.
   Verdunkelt die Seite, das Video sitzt mittig und behält 16 zu 9.
   Schliessen per Klick daneben, Escape oder Schaltfläche. */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 18, 16, 0.96);
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.overlay[data-offen="true"] {
  display: flex;
  animation: lichtbox-auf .18s ease-out;
}
@keyframes lichtbox-auf { from { opacity: 0 } to { opacity: 1 } }

.overlay__buehne {
  position: relative;
  width: 100%;
  max-width: 1120px;
  /* Bei hohen, schmalen Fenstern soll das Video nicht über den Rand laufen */
  max-height: 82vh;
  display: flex; align-items: center; justify-content: center;
}

.overlay__buehne video {
  width: 100%;
  max-height: 82vh;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(246, 241, 233, 0.14);
  border-radius: var(--ecke);
  background: #000;
}

/* Rahmen nur zur Positionierung der KI-Kennzeichnung relativ zum Video,
   Größe deckungsgleich mit der video-Regel oben. */
.video-kennzeichnung-rahmen {
  position: relative;
  width: 100%;
  max-height: 82vh;
  aspect-ratio: 16 / 9;
}
.video-kennzeichnung-rahmen video { margin: 0; }

/* Pflichtkennzeichnung nach EU-KI-Verordnung (Art. 50): kurz nach
   Wiedergabestart unten am Rand, blendet nach wenigen Sekunden von
   selbst wieder aus. */
.video-kennzeichnung {
  position: absolute;
  left: 50%;
  bottom: var(--raum-16);
  transform: translateX(-50%);
  max-width: calc(100% - 2 * var(--raum-16));
  margin: 0;
  padding: 4px 12px;
  background: rgba(20, 18, 16, 0.78);
  color: var(--text-dunkel-titel);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: center;
  border-radius: 999px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease-in;
}
/* Das Ausblenden übernimmt app.js per Timer (setTimeout + Klasse), nicht
   eine reine CSS-Animation — die lief bei manchen Besuchern nicht zu Ende. */
.video-kennzeichnung--ausgeblendet { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .video-kennzeichnung { transition: none; }
}
.overlay__schliessen {
  position: absolute; top: 18px; right: 18px;
  background: none; border: 1px solid rgba(246, 241, 233, 0.32);
  color: var(--text-dunkel-titel);
  border-radius: var(--ecke);
  padding: 9px 16px;
  cursor: pointer;
  font-size: 0.9375rem;
}
.overlay__schliessen:hover { border-color: var(--gold-hell); color: var(--gold-hell); }

/* --- 9 Fußzeile --------------------------------------------------------- */

.fuss { background: var(--weiss-warm-tief); padding-block: var(--raum-72); }
.fuss__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-56); }
@media (max-width: 860px) { .fuss__raster { grid-template-columns: 1fr; gap: var(--raum-34); } }
.fuss__logo img { height: 20px; width: auto; margin-bottom: var(--raum-26); }
.fuss a { color: var(--text-hell-body); }
.fuss a:hover { color: var(--gold-dunkel); }
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li + li { margin-top: var(--raum-12); }
.fuss__schluss {
  margin-top: var(--raum-56); padding-top: var(--raum-26);
  border-top: 1px solid var(--linie-hell);
  font-size: var(--gr-klein); color: var(--text-hell-neben);
}

/* --- 10 Druck ----------------------------------------------------------- */

@media print {
  .kopf, .overlay, .video__knopf, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .abschnitt { padding-block: 24px; }
}

/* --- 11 Kleine Hilfsklassen ---------------------------------------------
   Ersetzen Inline-Styles in den Templates, damit dort nur Struktur steht.
   Bewusst wenige und an die Abstandsstufen aus §4 gebunden. */

.oben-16  { margin-top: var(--raum-16); }
.oben-26  { margin-top: var(--raum-26); }
.oben-34  { margin-top: var(--raum-34); }
.oben-56  { margin-top: var(--raum-56); }
.oben-72  { margin-top: var(--raum-72); }

.unten-26 { margin-bottom: var(--raum-26); }
.unten-42 { margin-bottom: 42px; }
.unten-56 { margin-bottom: var(--raum-56); }
.unten-64 { margin-bottom: 64px; }

.eng      { max-width: 24ch; }
.breit    { max-width: 75ch; }
.lead--dunkel { color: var(--text-dunkel-body); }

/* Haarlinie über einem Nachsatz, z. B. der Hinweis unter dem Diagramm */
.nachsatz {
  margin-top: var(--raum-56);
  padding-top: var(--raum-26);
  border-top: 1px solid var(--linie-hell);
}

/* --- 12 Fliesstext mit Auszeichnungen ------------------------------------
   Für Impressum, Datenschutzerklärung und andere Textseiten, deren Inhalt
   als HTML aus dem Redaktionsfeld kommt. */

.text h2 {
  font-size: var(--gr-schritt);
  line-height: 1.25;
  font-weight: 600;
  margin: var(--raum-56) 0 var(--raum-16);
}
.text h2:first-child { margin-top: 0; }
.text h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin: var(--raum-34) 0 var(--raum-6);
}
.text p + p { margin-top: var(--raum-16); }
.text a {
  color: var(--gold-dunkel);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.text a:hover { color: var(--gold); }
.text ul, .text ol { margin: var(--raum-16) 0; padding-left: 1.4em; }
.text li + li { margin-top: var(--raum-6); }
.text hr { border: 0; border-top: 1px solid var(--linie-hell); margin: var(--raum-56) 0; }

/* Dunkle Fassung des Anlassfelds — nur nötig, wenn die Entscheidung von
   hellen auf dunkle Kacheln zurückgeht. Setzt .motivkacheln--dunkel am
   Behälter voraus und dunkle Fassungen der sechs Motive. */
.motivkacheln--dunkel .motivkachel { background: var(--anthrazit); }
.motivkacheln--dunkel .motivkachel::after {
  background:
    radial-gradient(125% 95% at 0% 100%,
      rgba(20, 18, 16, 0.94)  0%,
      rgba(20, 18, 16, 0.86) 30%,
      rgba(20, 18, 16, 0.52) 56%,
      rgba(20, 18, 16, 0.12) 74%,
      rgba(20, 18, 16, 0)    86%),
    linear-gradient(to top,
      rgba(20, 18, 16, 0.42) 0%,
      rgba(20, 18, 16, 0.32) 100%);
}
.motivkacheln--dunkel .motivkachel__titel { color: var(--text-dunkel-titel); }
.motivkacheln--dunkel .motivkachel__verweis { color: var(--gold-hell); }
.motivkacheln--dunkel .motivkachel--leer { border-color: rgba(228, 184, 92, 0.22); }