/* ============================================================================
   Startseite · Brandel & Kollegen und Kanzlei Georgiadis
   ----------------------------------------------------------------------------
   Ein Raster für die ganze Seite. Jeder Abschnitt hält sich daran — daher
   stehen alle Maße hier oben und nirgends sonst.

   Die Farben kommen je Kanzlei über --marke und --akzent von außen.
   ========================================================================== */

:root {
  /* Raster */
  --rand: 96px;            /* Seitenrand am Rechner */
  --luft: 112px;           /* Innenabstand oben/unten je Abschnitt */
  --bildkante: 52%;        /* Breite der Bildseite in geteilten Abschnitten */
  --inhalt: 1440px;        /* Außenmaß der Bahn; der Seitenrand liegt darin */
  /* Höhe der Kopfzeile: je Kanzlei anders (bau.py setzt --kopf-rechner);
     auf dem Handy für beide 80 px — s. Handy-Block unten */
  --kopf: var(--kopf-rechner, 96px);

  /* Flächen */
  --weiss: #ffffff;
  --grau: #f6f7f9;         /* derselbe Ton wie auf den bestehenden Seiten */
  --linie: #e6e8ec;

  /* Schrift */
  --text: #14142b;
  --text-leise: #4a4f60;
  --auf-dunkel: #ffffff;
}

@font-face { font-family: Roboto; src: url("assets/fonts/roboto-light.ttf");   font-weight: 300; font-display: swap }
@font-face { font-family: Roboto; src: url("assets/fonts/roboto-regular.ttf"); font-weight: 400; font-display: swap }
@font-face { font-family: Roboto; src: url("assets/fonts/roboto-medium.ttf");  font-weight: 500; font-display: swap }
@font-face { font-family: Roboto; src: url("assets/fonts/roboto-bold.ttf");    font-weight: 700; font-display: swap }
@font-face { font-family: Merriweather; src: url("assets/fonts/merriweather-light.ttf");   font-weight: 300; font-display: swap }
@font-face { font-family: Merriweather; src: url("assets/fonts/merriweather-regular.ttf"); font-weight: 400; font-display: swap }
@font-face { font-family: Merriweather; src: url("assets/fonts/merriweather-bold.ttf");    font-weight: 700; font-display: swap }

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

html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  /* Sicherheitsnetz: Ein Wort, das sonst aus seiner Fläche ragen würde, bricht um.
     Getrennt wird nur, wo es eng ist (siehe .leistungen .karte) — sonst entstünden
     Trennungen wie „Da-bei" mitten im Fließtext. */
  overflow-wrap: break-word;
}

img, video { display: block; max-width: 100% }
a { color: inherit }


/* ---------------------------------------------------------------- Bausteine
   Diese vier Klassen tragen die ganze Seite. Sie sorgen dafür, dass jeder
   Abschnitt denselben Rand, dieselbe Luft und dieselben Schriftgrößen hat. */

.abschnitt { padding: var(--luft) 0 }
.abschnitt.grau { background: var(--grau) }
.abschnitt.randlos { padding: 0 }          /* für Abschnitte, die selbst bis zum Rand gehen */

.bahn { width: 100%; max-width: var(--inhalt); margin: 0 auto; padding: 0 var(--rand) }
/* In geteilten Abschnitten reicht das Bild bis zum Bildschirmrand — deshalb dort
   kein max-width, sondern volle Breite mit Rand nur auf der Textseite. */
.geteilt { display: grid; grid-template-columns: calc(100% - var(--bildkante)) var(--bildkante);
           align-items: center; gap: 0 }
.geteilt > .seite { padding: 0 64px 0 var(--rand) }
.geteilt > .bildseite { padding: 0 var(--rand) 0 0 }
.geteilt.bild-links { grid-template-columns: var(--bildkante) calc(100% - var(--bildkante)) }
.geteilt.bild-links > .seite { padding: 0 var(--rand) 0 64px }
.geteilt.bild-links > .bildseite { padding: 0 0 0 var(--rand) }

.dachzeile {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--marke); margin-bottom: 18px;
}
.dachzeile::before { content: ""; width: 26px; height: 2px; background: var(--akzent); flex: 0 0 auto }
.dachzeile.hell { color: var(--auf-dunkel) }

.titel {
  font-family: Merriweather, Georgia, serif; font-weight: 400;
  font-size: 46px; line-height: 1.18; letter-spacing: -.005em;
}
.titel.gross { font-size: 56px }
.titel.hell { color: var(--auf-dunkel) }

.fliess { font-size: 17.5px; line-height: 1.62; color: var(--text-leise); max-width: 62ch }
.fliess + .fliess { margin-top: 16px }

/* Der Satz, der für Bewerber zählt — in der zweiten Hausschrift, mit Akzentkante */
.kernsatz {
  margin: 22px 0; padding-left: 20px; border-left: 3px solid var(--akzent);
  font-family: Merriweather, Georgia, serif; font-size: 19px; line-height: 1.7;
  color: var(--text); max-width: 58ch;
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15.5px; font-weight: 700; text-decoration: none;
  padding: 15px 27px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.knopf:hover { transform: translateY(-1px) }
.knopf.haupt { background: var(--marke); color: #fff }
.knopf.haupt:hover { box-shadow: 0 10px 26px rgba(0,0,0,.22) }
.knopf.neben { border-color: var(--marke); color: var(--marke); background: transparent }
.knopf.neben:hover { background: rgba(0,0,0,.04) }
.knopf.hell { background: #fff; color: var(--marke) }
.knopf.umriss-hell { border-color: rgba(255,255,255,.8); color: #fff; background: rgba(28,10,30,.22) }

.aktionen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px }


/* --------------------------------------------------------------- Kopfzeile
   1:1 wie die Originale — Höhe, Logomaß und Knopfform unterscheiden sich je
   Kanzlei. Die Werte sind an den Live-Seiten nachgemessen; die Kanzlei kommt
   als Klasse am <body>, die Höhe als --kopf aus bau.py. */

.kopfzeile {
  position: sticky; top: 0; z-index: 60; background: #fff;
  border-bottom: 1px solid var(--linie);
  display: flex; align-items: center; gap: 30px;
  padding: 0 72px; height: var(--kopf);
}
body.brandel .kopfzeile .logo { height: 80px; width: auto }
body.georgiadis .kopfzeile .logo { height: 70px; width: auto }
.kopfzeile nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 400 }
.kopfzeile nav a { text-decoration: none }
body.brandel .kopfzeile nav a { color: #333 }
body.georgiadis .kopfzeile nav a { color: #000 }
.kopfzeile nav a:hover, .kopfzeile nav a.aktiv { color: var(--akzent) }
.kopfzeile .knoepfe { display: flex; gap: 10px; margin-left: 26px }
.kopfzeile .knoepfe .knopf {
  background: var(--marke); color: #fff; font-weight: 700;
  line-height: 15.6px; border: 4px solid transparent; transition: none;
}
.kopfzeile .knoepfe .knopf:hover { transform: none; filter: brightness(1.1) }
.kopfzeile .knoepfe .knopf:focus-visible { box-shadow: 0 0 0 3px var(--akzent) }
/* Brandel & Kollegen: runde Ecken, weißer Innenring 3 px innerhalb der Außenkante.
   Die Außenmaße (175/165 x 44) kommen über Mindestbreiten exakt auf die Messwerte. */
body.brandel .kopfzeile .knoepfe .knopf {
  font-size: 12px; padding: 10px 24px; border-radius: 20px;
  outline: 1px solid #fff; outline-offset: -3px;
}
body.brandel .kopfzeile .knoepfe .knopf:first-child { min-width: 175px }
body.brandel .kopfzeile .knoepfe .knopf:last-child  { min-width: 165px }
/* Kanzlei Georgiadis: eckig, kein Innenring, zwei Schriftgrößen wie im Original,
   Außenmaße 167/158 x 46. */
body.georgiadis .kopfzeile .knoepfe .knopf {
  border-radius: 0; outline: none; line-height: normal; min-height: 46px;
}
body.georgiadis .kopfzeile .knoepfe .knopf:first-child  { font-size: 12px; min-width: 167px; padding: 10px 20px }
body.georgiadis .kopfzeile .knoepfe .knopf:last-child   { font-size: 14px; min-width: 158px; padding: 10px 18px }
.burger { display: none; margin-left: auto; width: 26px; background: none; border: 0; cursor: pointer }
.burger i { display: block; height: 2px; background: #222; margin: 6px 0 }


/* -------------------------------------------------- 1 · Einstieg
   Der Träger steht in der Bildmitte wie bisher. Er scheint durch: 70 % beim
   Kreis, 74 % beim hellen Feld — die kleinsten Werte, bei denen die Schrift
   auf jedem Videobild über 4,5 : 1 bleibt. */

.einstieg { position: relative; height: calc(100vh - var(--kopf)); min-height: 620px; overflow: hidden }
.einstieg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
/* Der Einstieg läuft nach unten in die weiße Fläche aus. Ohne das stoßen zwei
   Bildkanten aufeinander — das Video oben, das Foto des nächsten Abschnitts darunter. */
.einstieg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: 1;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55) 55%, #fff);
  pointer-events: none;
}
.einstieg .traeger {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  z-index: 2; box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.einstieg .zeichen { margin-bottom: 20px }
.einstieg .titel { margin-bottom: 14px }
.einstieg .unterzeile { font-size: 19px; line-height: 1.45 }
.einstieg .aktionen { justify-content: center; margin-top: 26px }

.einstieg .traeger.kreis {
  width: 520px; height: 520px; border-radius: 50%; padding: 0 52px;
  background: color-mix(in srgb, var(--marke) 70%, transparent);
  border: 1px solid rgba(255,255,255,.55);
  color: #fff; justify-content: center;
}
.einstieg .traeger.kreis .zeichen { height: 58px }
.einstieg .traeger.kreis .titel { font-size: 40px }
.einstieg .traeger.kreis .unterzeile { opacity: .94 }

.einstieg .traeger.feld {
  width: 760px; padding: 44px 60px 46px; border-radius: 4px;
  background: rgba(255,255,255,.74); color: var(--marke);
}
.einstieg .traeger.feld .zeichen { height: 46px; margin-bottom: 22px }
.einstieg .traeger.feld .titel { font-size: 48px }
.einstieg .traeger.feld .strich {
  width: 220px; height: 5px; margin: 16px 0 14px;
  background: linear-gradient(90deg, var(--akzent), rgba(181,0,90,.15));
}
.einstieg .traeger.feld .unterzeile { color: var(--text-leise); font-size: 21px }


/* -------------------------------------------------- 2 · Die drei Werte
   Der Abschnitt entfaltet sich beim Scrollen: rechts bleibt ein Bild stehen und
   wechselt mit dem Wert, links laufen die Texte durch.

   Wichtig für den Übergang vom Einstieg: Der Abschnitt beginnt mit weißer Luft.
   Das Bild klebt erst danach — so stoßen nicht zwei Bildkanten aufeinander. */

/* Vorlauf: erst Ruhe, dann startet der Effekt. So folgt auf den Auslauf des
   Einstiegs nicht sofort die nächste Bildkante.
   (.abschnitt.werte, weil .abschnitt.randlos sonst mit padding:0 gewinnt) */
/* Vorlauf und Nachlauf: Der Effekt startet erst nach Ruhe und endet vor dem
   nächsten Abschnitt. Ohne den Nachlauf klebte die Schrittanzeige bis an die
   Abschnittskante und stand fast schon auf dem Folgeabschnitt. */
.abschnitt.werte { background: var(--weiss); padding: 170px 0 120px }
/* Bild und Texte liegen in derselben Rasterzelle übereinander. So endet das
   klebende Bild exakt mit dem Abschnitt — mit negativen Rändern lief es in den
   nächsten Abschnitt hinein. */
.werte .buehne { display: grid; grid-template-columns: 1fr }
.werte .klebe {
  grid-area: 1 / 1; align-self: start; justify-self: end;
  position: sticky; top: var(--kopf); width: var(--bildkante);
  height: calc(100vh - var(--kopf)); min-height: 560px;
  overflow: hidden; z-index: 0;
}
.werte .stufen { grid-area: 1 / 1 }
.werte .klebe img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .55s ease;
}
.werte .klebe img.an { opacity: 1 }
/* Das Bild wächst aus der weißen Fläche heraus — an allen drei Seiten, an denen
   es sonst eine harte Kante hätte: links zum Text, oben und unten zur Seite. */
.werte .klebe::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, #fff, rgba(255,255,255,0) 90px),
    linear-gradient(to top, #fff, rgba(255,255,255,0) 90px),
    linear-gradient(to right, #fff, rgba(255,255,255,0) 16%);
}
.werte .stufen { position: relative; z-index: 1; pointer-events: none }
.werte .stufe .rumpf { pointer-events: auto }
.werte .stufe {
  min-height: calc(100vh - var(--kopf)); display: flex; align-items: center;
  width: calc(100% - var(--bildkante)); padding: 0 64px 0 var(--rand);
}
.werte .stufe .wort {
  font-family: Merriweather, Georgia, serif; font-weight: 400;
  font-size: 56px; line-height: 1.16; color: var(--marke); margin-bottom: 18px;
}
/* Die Schrittanzeige gehört in dieselbe Rasterzelle wie Bild und Texte. Stand sie
   darunter, klebte sie über das Ende des Abschnitts hinaus und war noch im nächsten
   Abschnitt zu sehen. Jetzt füllt die Leiste die Zelle, die Anzeige klebt darin —
   und hört mit dem Abschnitt auf. */
.werte .schrittleiste {
  grid-area: 1 / 1; align-self: stretch; z-index: 5; pointer-events: none;
  display: flex; align-items: flex-end;
}
.werte .schritte {
  position: sticky; bottom: 40px; display: flex; gap: 10px; padding: 0 var(--rand);
}
.werte .schritte i {
  display: block; width: 30px; height: 3px; border-radius: 2px;
  background: rgba(20,20,40,.2); transition: width .3s ease, background .3s ease;
}
.werte .schritte i.an { background: var(--marke); width: 52px }
.werte .handybild { display: none }


/* -------------------------------------------------- 3 · Kanzleivorstellung */

.film .laenge { display: flex; align-items: center; gap: 9px; font-size: 15px; margin-top: 16px }
.film .laenge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent) }
.film .aktionen { margin-top: 26px }
.film .fussnote { font-size: 13px; color: #6b7080; margin-top: 16px; max-width: 46ch }
/* Wie das Partnerbild und das Karriere-Video: abgerundet und mit Schatten.
   Damit ist die Fläche ein bewusstes Element und keine zufällige Bildkante. */
.film .flaeche {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border: 0; padding: 0;
  background: #000; cursor: pointer; overflow: hidden; display: block;
  border-radius: 10px; box-shadow: 0 20px 50px rgba(20,12,30,.16);
}
.film .flaeche img { width: 100%; height: 100%; object-fit: cover }
.film .flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.film .abspielen {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: grid; place-items: center; transition: transform .18s ease;
}
.film .flaeche:hover .abspielen { transform: translate(-50%,-50%) scale(1.06) }
.film .abspielen::after {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 20px solid var(--marke); border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.film .marke {
  position: absolute; right: 14px; bottom: 14px; background: rgba(0,0,0,.72); color: #fff;
  font-size: 13px; padding: 4px 9px; border-radius: 4px;
}


/* -------------------------------------------------- 4 · Leistungen
   Das Panorama bleibt Hintergrund. Statt eines Flächenschleiers ein Verlauf,
   und jede Leistung sitzt auf einer eigenen Fläche. */

.leistungen { position: relative; overflow: hidden; padding: var(--luft) 0 }
.leistungen > img.panorama {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.leistungen .verlauf {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8,4,16,.72), rgba(8,4,16,.32) 42%, rgba(8,4,16,.78));
}
.leistungen .bahn { position: relative; z-index: 2 }
.leistungen .kopf { text-align: left; margin-bottom: 44px }
/* minmax(0,1fr): sonst sprengt der Mindestinhalt der langen Wörter die Gleichverteilung */
.leistungen .karten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px }
.leistungen .karte {
  display: flex; flex-direction: column; text-decoration: none; color: #fff;
  background: rgba(12,6,20,.62); border: 1px solid rgba(255,255,255,.16);
  padding: 24px 22px 20px; border-radius: 10px; min-height: 210px;
  transition: background .18s ease, transform .18s ease;
}
.leistungen .karte:hover { background: rgba(12,6,20,.78); transform: translateY(-3px) }
/* Fünf schmale Spalten und lange Fachwörter. Getrennt wird ausschließlich an den
   weichen Trennstellen aus bau.py — „auto“ suchte sich sonst eigene Stellen und
   machte aus „Einkommen-steuererklärungen“ ein „Einkom-mensteuererklärungen“. */
.leistungen .karte h3, .leistungen .karte p { hyphens: manual }
.leistungen .karte h3 { font-family: Merriweather, Georgia, serif; font-weight: 400;
  font-size: 21px; line-height: 1.25; margin-bottom: 10px }
.leistungen .karte p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82) }
.leistungen .karte .mehr {
  margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
.leistungen .karte .mehr::after {
  content: ""; width: 18px; height: 1px; background: currentColor; transition: width .18s ease;
}
.leistungen .karte:hover .mehr::after { width: 30px }


/* -------------------------------------------------- 5 · Netzwerk */

.netzwerk .partnerbild {
  width: 100%; aspect-ratio: 1200 / 1628; object-fit: cover; border-radius: 10px;
  box-shadow: 0 20px 50px rgba(20,12,30,.16);
}
.netzwerk .logoband { border-top: 1px solid var(--linie); margin-top: 56px; padding-top: 36px }
.netzwerk .logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 26px 54px }
/* Alle Logos auf gleicher optischer Höhe — heute reichen sie von 41 bis 100 px */
.netzwerk .logos img { height: 42px; width: auto; object-fit: contain }


/* -------------------------------------------------- 6 · Newsletter */

.newsletter .kopf { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; margin-bottom: 34px }
.newsletter .archiv {
  font-size: 15px; font-weight: 500; color: var(--marke); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap;
}
.newsletter .karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.newsletter .karte { position: relative; display: block; overflow: hidden; border-radius: 10px;
  aspect-ratio: 1 / 1; text-decoration: none }
.newsletter .karte img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease }
.newsletter .karte:hover img { transform: scale(1.03) }
.newsletter .beschriftung {
  position: absolute; left: 0; right: 0; bottom: 0; color: #fff; font-size: 16px;
  font-weight: 500; padding: 44px 18px 16px;
  background: linear-gradient(to top, rgba(6,3,10,.86), rgba(6,3,10,0));
}
.newsletter .fuss { display: flex; align-items: center; justify-content: space-between;
  gap: 30px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linie) }
.newsletter .fuss .satz { font-size: 16px; color: var(--text-leise); max-width: 52ch }
.newsletter .sozial { display: flex; gap: 12px }
.newsletter .sozial a {
  width: 44px; height: 44px; border-radius: 50%; background: var(--marke);
  display: grid; place-items: center; transition: transform .15s ease;
}
.newsletter .sozial a:hover { transform: translateY(-2px) }
.newsletter .sozial svg { width: 20px; height: 20px; fill: #fff }


/* -------------------------------------------------- 7 · Karriere-Teaser */

.karriere .frage {
  font-family: Merriweather, Georgia, serif; font-size: 22px; line-height: 1.35;
  color: var(--marke); margin-bottom: 12px; display: flex; align-items: center; gap: 14px;
}
.karriere .frage::before { content: ""; width: 30px; height: 2px; background: var(--akzent); flex: 0 0 auto }
.karriere .versprechen { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 }
.karriere .versprechen span { display: flex; align-items: baseline; gap: 10px;
  font-size: 17px; color: var(--text-leise) }
.karriere .versprechen span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); flex: 0 0 auto;
}
.karriere .versprechen b { color: var(--text); font-weight: 700 }
.karriere .bild { border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(20,12,30,.16) }
.karriere .bild video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }


/* -------------------------------------------------- 8 · Fußzeile */

.fusszeile { background: var(--grau); padding: 72px 0 0 }
.fusszeile .drei { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px }
.fusszeile .logo { height: 64px; width: auto; margin-bottom: 26px }
.fusszeile .spaltentitel {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #6b6b7a; margin-bottom: 14px;
}
.fusszeile .kontakt { font-size: 16px; line-height: 1.75 }
.fusszeile .kontakt a { color: var(--marke) }
.fusszeile .zeiten { font-size: 15px; color: var(--text-leise); margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--linie) }
.fusszeile .menue { display: flex; flex-direction: column; gap: 9px; font-size: 16px }
.fusszeile .menue a { text-decoration: none }
.fusszeile .menue a:hover { color: var(--akzent) }
.fusszeile .siegel img { height: 62px; width: auto }
.fusszeile .stellen { margin-top: 24px }
.fusszeile .abschluss {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 56px; padding: 22px 0 26px; border-top: 1px solid var(--linie);
  font-size: 14px; color: #6b6b7a;
}
.fusszeile .abschluss a { margin-left: 22px }


/* ==========================================================================
   Handy — dieselbe Anmutung, nur schmaler. Der Aufbau bleibt gleich:
   kein Abschnitt kippt in eine andere Bauform.
   ========================================================================== */

@media (max-width: 900px) {
  :root { --rand: 22px; --luft: 64px; --kopf: 80px; }

  .kopfzeile { padding: 0 var(--rand) }
  body.brandel .kopfzeile .logo, body.georgiadis .kopfzeile .logo { height: 48px }
  .kopfzeile nav, .kopfzeile .knoepfe { display: none }
  .burger { display: block }

  .titel { font-size: 30px }
  .titel.gross { font-size: 34px }
  .fliess { font-size: 15.5px }
  .kernsatz { font-size: 16.5px; padding-left: 14px }

  /* Geteilte Abschnitte werden untereinander gesetzt — Bild zuerst, dann Text */
  .geteilt, .geteilt.bild-links { grid-template-columns: 1fr; gap: 26px }
  .geteilt > .seite, .geteilt.bild-links > .seite { padding: 0 var(--rand) }
  .geteilt > .bildseite { order: -1 }

  .einstieg { height: calc(100vh - var(--kopf)); min-height: 560px }
  .einstieg .traeger.kreis { width: 330px; height: 330px; padding: 0 30px }
  .einstieg .traeger.kreis .zeichen { height: 40px; margin-bottom: 12px }
  .einstieg .traeger.kreis .titel { font-size: 26px }
  .einstieg .traeger.kreis .unterzeile { font-size: 14.5px }
  .einstieg .traeger.feld { width: calc(100vw - 2 * var(--rand)); padding: 26px 24px 28px }
  .einstieg .traeger.feld .zeichen { height: 34px; margin-bottom: 14px }
  .einstieg .traeger.feld .titel { font-size: 29px }
  .einstieg .traeger.feld .strich { width: 150px; height: 4px; margin: 12px 0 10px }
  .einstieg .traeger.feld .unterzeile { font-size: 16px }
  .einstieg .aktionen { flex-direction: column; width: 100%; margin-top: 20px }
  .einstieg .aktionen .knopf { width: 100%; font-size: 14.5px; padding: 13px 18px }

  /* Werte: derselbe klebende Effekt, das Bild liegt über die volle Breite dahinter.
     Vorlauf und weicher Auslauf oben/unten wie am Rechner — sonst stoßen die
     Bildkante des Einstiegs und die des Fotos ohne Übergang aneinander. */
  .abschnitt.werte { padding: 90px 0 70px }
  .werte .klebe { top: var(--kopf); height: calc(100vh - var(--kopf)); width: 100%; justify-self: stretch }
  .werte .klebe::after { background:
    linear-gradient(to bottom, #fff, rgba(255,255,255,0) 90px),
    linear-gradient(to top, #fff, rgba(255,255,255,0) 90px);
  }
  .werte .stufe {
    width: 100%; min-height: calc(100vh - var(--kopf)); padding: 0 var(--rand) 34px;
    align-items: flex-end;
  }
  .werte .stufe .wort { font-size: 32px; color: #fff }
  .werte .stufe .fliess, .werte .stufe .kernsatz { color: #fff }
  .werte .stufe .kernsatz { border-left-color: #fff }
  /* Damit die weiße Schrift auf jedem Bild steht: ein Verlauf am Textblock */
  .werte .stufe .rumpf {
    position: relative; padding: 22px 18px 20px; border-radius: 10px;
    background: linear-gradient(to top, rgba(8,4,16,.86), rgba(8,4,16,.62));
  }
  .werte .schritte { padding: 0 var(--rand) }
  .werte .schritte i { background: rgba(255,255,255,.45) }
  .werte .schritte i.an { background: #fff }

  .leistungen .karten { grid-template-columns: 1fr; gap: 12px }
  .leistungen .karte { min-height: 0 }

  .newsletter .kopf { flex-direction: column; align-items: flex-start; gap: 14px }
  .newsletter .karten { grid-template-columns: 1fr; gap: 14px }
  .newsletter .fuss { flex-direction: column; align-items: flex-start; gap: 20px }

  .netzwerk .logos { gap: 20px 32px }
  .netzwerk .logos img { height: 34px }

  .fusszeile { padding-top: 48px }
  .fusszeile .drei { grid-template-columns: 1fr; gap: 34px }
  .fusszeile .abschluss { flex-direction: column; gap: 10px; margin-top: 34px }
  .fusszeile .abschluss a { margin: 0 18px 0 0 }
}