/* ============================================================================
   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.
   ========================================================================== */

.kanzlei-rahmen {
  /* 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 }

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

/* Grundstellung im echten Projekt
   ----------------------------------------------------------------------------
   Dort liegt über diesem Blatt das Webflow-CSS der bestehenden Seite. Es bringt
   zweierlei mit: Schrift und Gewicht auf Elementebene (p, h1–h6) und ein
   eigenes Abschnittslayout für vier Klassennamen, die auch wir verwenden.
   Beides nehmen wir hier zurück. Im Vorschaupaket ändert die Regel nichts,
   weil es dort nichts zurückzunehmen gibt.
   (bau.py stellt beim Export jedem Selektor .kanzlei-rahmen voran.) */
.kanzlei-rahmen p, .kanzlei-rahmen h1, .kanzlei-rahmen h2, .kanzlei-rahmen h3, .kanzlei-rahmen h4, .kanzlei-rahmen h5, .kanzlei-rahmen h6 {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  line-height: inherit; color: inherit;
}
.kanzlei-rahmen .kontakt, .kanzlei-rahmen .leistungen, .kanzlei-rahmen .karriere, .kanzlei-rahmen .newsletter, .kanzlei-rahmen .grau, .kanzlei-rahmen .bild, .kanzlei-rahmen .sozial {
  display: block; flex-direction: row; align-items: stretch;
  justify-content: normal; background: none; position: static;
  width: auto; height: auto; overflow: visible; z-index: auto;
  color: inherit;
}


/* Der Rahmen um die ganze Seite. Im echten Projekt liegt darüber das
   Webflow-Stilblatt, das jedem <div> ein display:flex mitgibt — dann
   schrumpfen die Abschnitte auf ihre Inhaltsbreite. Deshalb hier ausdrücklich
   zurücksetzen. */
.kanzlei-rahmen {
  display: block !important; width: 100%; float: none; box-sizing: border-box;
  padding: 0 !important; margin: 0 !important; max-width: none;
}
.kanzlei-rahmen > * { width: 100% }

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

.kanzlei-rahmen {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 17.5px;
  /* Ausdruecklich, nicht geerbt: das Webflow-Blatt der Karriere-Seite setzt auf
     dem Koerper 300, und die ganze Seite lief dadurch im leichten Schnitt. */
  font-weight: 400;
  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;
}

.kanzlei-rahmen img, .kanzlei-rahmen video { display: block; max-width: 100% }
.kanzlei-rahmen a { color: inherit; text-decoration: none }


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

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

.kanzlei-rahmen .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. */
.kanzlei-rahmen .geteilt { display: grid; grid-template-columns: calc(100% - var(--bildkante)) var(--bildkante);
           align-items: center; gap: 0 }
.kanzlei-rahmen .geteilt > .seite { padding: 0 64px 0 var(--rand) }
.kanzlei-rahmen .geteilt > .bildseite { padding: 0 var(--rand) 0 0 }
.kanzlei-rahmen .geteilt.bild-links { grid-template-columns: var(--bildkante) calc(100% - var(--bildkante)) }
.kanzlei-rahmen .geteilt.bild-links > .seite { padding: 0 var(--rand) 0 64px }
.kanzlei-rahmen .geteilt.bild-links > .bildseite { padding: 0 0 0 var(--rand) }
/* Damit die Bildseite auch dann links steht, wenn sie im Quelltext hinten kommt —
   die Lesereihenfolge bleibt so überall Text, dann Bild. */
.kanzlei-rahmen .geteilt.bild-links > .bildseite { order: -1 }

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

/* Ein Ort fuer Dachzeile und Ueberschrift — alle Abschnitte auf allen Seiten
   holen sich Groesse und Schnitt von hier. Die uebrigen Regeln aendern nur die
   Groesse, nie den Schnitt; damit bleibt der Auftritt einheitlich.
   Merriweather liegt in 300, 400 und 700 vor — zwischen 400 und 700 gibt es
   keinen Schnitt, „etwas dicker" ist hier also 700. */
.kanzlei-rahmen .titel {
  font-family: Merriweather, Georgia, serif; font-weight: 700;
  font-size: 46px; line-height: 1.18; letter-spacing: -.012em;
}
.kanzlei-rahmen .titel.gross { font-size: 56px }
.kanzlei-rahmen .titel.hell { color: var(--auf-dunkel) }

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

/* Der Satz, der für Bewerber zählt — in der zweiten Hausschrift, mit Akzentkante */
.kanzlei-rahmen .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;
}

.kanzlei-rahmen button { font: inherit; color: inherit }

.kanzlei-rahmen .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;
}
.kanzlei-rahmen .knopf:hover { transform: translateY(-1px) }
.kanzlei-rahmen .knopf.haupt { background: var(--marke); color: #fff }
.kanzlei-rahmen .knopf.haupt:hover { box-shadow: 0 10px 26px rgba(0,0,0,.22) }
.kanzlei-rahmen .knopf.neben { border-color: var(--marke); color: var(--marke); background: transparent }
.kanzlei-rahmen .knopf.neben:hover { background: rgba(0,0,0,.04) }
.kanzlei-rahmen .knopf.hell { background: #fff; color: var(--marke) }
.kanzlei-rahmen .knopf.umriss-hell { border-color: rgba(255,255,255,.8); color: #fff; background: rgba(28,10,30,.22) }

.kanzlei-rahmen .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. */

.kanzlei-rahmen .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);
}
.kanzlei-rahmen.brandel .kopfzeile .logo { height: 80px; width: auto }
.kanzlei-rahmen.georgiadis .kopfzeile .logo { height: 70px; width: auto }
.kanzlei-rahmen .kopfzeile nav { display: flex; gap: 22px; margin-left: auto; font-size: 16px; font-weight: 400 }
.kanzlei-rahmen .kopfzeile nav a { text-decoration: none }
.kanzlei-rahmen.brandel .kopfzeile nav a { color: #333 }
.kanzlei-rahmen.georgiadis .kopfzeile nav a { color: #000 }
.kanzlei-rahmen .kopfzeile nav a:hover, .kanzlei-rahmen .kopfzeile nav a.aktiv { color: var(--akzent) }
.kanzlei-rahmen .kopfzeile .knoepfe { display: flex; gap: 10px; margin-left: 26px }
.kanzlei-rahmen .kopfzeile .knoepfe .knopf {
  background: var(--marke); color: #fff; font-weight: 700;
  line-height: 15.6px; border: 4px solid transparent; transition: none;
  /* Nie umbrechen: Mit der größeren Schrift rutschte „Mandant werden" bei
     1200 px in eine zweite Zeile und der Knopf wurde 66 statt 47 px hoch. */
  white-space: nowrap;
}
.kanzlei-rahmen .kopfzeile .knoepfe .knopf:hover { transform: none; filter: brightness(1.1) }
.kanzlei-rahmen .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 Mindestbreiten stammen aus der Vorlage; seit die Schrift zwei Einheiten
   groesser ist, bestimmt der Text die Breite und die Knoepfe wachsen mit. */
.kanzlei-rahmen.brandel .kopfzeile .knoepfe .knopf {
  font-size: 14px; padding: 10px 24px; border-radius: 20px;
  outline: 1px solid #fff; outline-offset: -3px;
}
.kanzlei-rahmen.brandel .kopfzeile .knoepfe .knopf:first-child { min-width: 175px }
.kanzlei-rahmen.brandel .kopfzeile .knoepfe .knopf:last-child { min-width: 165px }
/* Kanzlei Georgiadis: eckig, kein Innenring, Außenmaße 167/158 x 46.
   Die Vorlage hatte zwei verschiedene Schriftgrößen (12 und 14 px). Das fiel
   nebeneinander auf — „Jetzt bewerben" wirkte größer als „Mandant werden".
   Beide stehen jetzt auf 16 px. */
.kanzlei-rahmen.georgiadis .kopfzeile .knoepfe .knopf {
  border-radius: 0; outline: none; line-height: normal; min-height: 46px;
  font-size: 16px;
}
.kanzlei-rahmen.georgiadis .kopfzeile .knoepfe .knopf:first-child { min-width: 167px; padding: 10px 20px }
.kanzlei-rahmen.georgiadis .kopfzeile .knoepfe .knopf:last-child { min-width: 158px; padding: 10px 18px }
.kanzlei-rahmen .burger { display: none; margin-left: auto; width: 26px; background: none; border: 0; cursor: pointer }
.kanzlei-rahmen .burger i { display: block; height: 2px; background: #222; margin: 6px 0 }


/* Sozietaet: zwei Standorte, ein Team. Das Foto zeigt beide Inhaber zusammen —
   es belegt die Aussage, statt sie nur zu behaupten. Steht direkt ueber dem
   Kontaktblock, wo es um Standort und Ansprechperson geht.
   Spaltenteilung 5:6 statt halbe/halbe: Das Hochformat des Fotos braucht weniger
   Breite als der Text, sonst steht rechts eine leere Spalte. */
.kanzlei-rahmen .k-sozietaet .bahn.geteilt {
  gap: 0 60px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
}
.kanzlei-rahmen .k-sozietaet .bahn.geteilt > * { padding: 0 }
.kanzlei-rahmen .k-sozietaet .titel { font-size: 38px; margin-top: 6px }
.kanzlei-rahmen .k-sozietaet .fliess { margin-top: 16px; max-width: 560px }
.kanzlei-rahmen .k-sozietaet .bildseite img {
  width: 100%; max-width: 440px; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 22%; border-radius: 14px; display: block;
}
.kanzlei-rahmen .k-sozietaet .bildtext {
  margin: 12px 0 0; font-size: 13.5px; color: var(--text-leise); max-width: 440px;
}
/* Zwei Karten nebeneinander, gleich breit — sie stehen fuer die zwei Standorte
   und sollen auch optisch gleichwertig sein. */
.kanzlei-rahmen .k-orte { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; max-width: 460px }
.kanzlei-rahmen .k-ort {
  display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 12px;
  padding: 16px 18px; border-top: 3px solid var(--marke);
}
.kanzlei-rahmen .k-ort b { font-size: 20px; font-weight: 600 }
.kanzlei-rahmen .k-ort span {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-leise);
}
/* Die Ortszeile im Karriere-Teaser der Startseite */
.kanzlei-rahmen .karriere .k-orte-zeile { font-weight: 500; color: var(--marke) }

/* -------------------------------------------------- 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. */

.kanzlei-rahmen .einstieg { position: relative; height: calc(100vh - var(--kopf)); min-height: 620px; overflow: hidden }
.kanzlei-rahmen .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. */
.kanzlei-rahmen .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;
}
.kanzlei-rahmen .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);
}
.kanzlei-rahmen .einstieg .zeichen { margin-bottom: 20px }
.kanzlei-rahmen .einstieg .titel { margin-bottom: 14px }
.kanzlei-rahmen .einstieg .unterzeile { font-size: 19px; line-height: 1.45 }
.kanzlei-rahmen .einstieg .aktionen { justify-content: center; margin-top: 26px }

.kanzlei-rahmen .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;
}
.kanzlei-rahmen .einstieg .traeger.kreis .zeichen { height: 58px }
.kanzlei-rahmen .einstieg .traeger.kreis .titel { font-size: 40px }
.kanzlei-rahmen .einstieg .traeger.kreis .unterzeile { opacity: .94 }

.kanzlei-rahmen .einstieg .traeger.feld {
  width: 760px; padding: 44px 60px 46px; border-radius: 4px;
  background: rgba(255,255,255,.74); color: var(--marke);
}
.kanzlei-rahmen .einstieg .traeger.feld .zeichen { height: 46px; margin-bottom: 22px }
.kanzlei-rahmen .einstieg .traeger.feld .titel { font-size: 48px }
.kanzlei-rahmen .einstieg .traeger.feld .strich {
  width: 220px; height: 5px; margin: 16px 0 14px;
  background: linear-gradient(90deg, var(--akzent), rgba(181,0,90,.15));
}
.kanzlei-rahmen .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. */
.kanzlei-rahmen .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. */
.kanzlei-rahmen .werte .buehne { display: grid; grid-template-columns: 1fr }
.kanzlei-rahmen .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;
}
.kanzlei-rahmen .werte .stufen { grid-area: 1 / 1 }
.kanzlei-rahmen .werte .klebe img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .55s ease;
}
.kanzlei-rahmen .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. */
.kanzlei-rahmen .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%);
}
.kanzlei-rahmen .werte .stufen { position: relative; z-index: 1; pointer-events: none }
.kanzlei-rahmen .werte .stufe .rumpf { pointer-events: auto }
.kanzlei-rahmen .werte .stufe {
  min-height: calc(100vh - var(--kopf)); display: flex; align-items: center;
  width: calc(100% - var(--bildkante)); padding: 0 64px 0 var(--rand);
}
.kanzlei-rahmen .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. */
.kanzlei-rahmen .werte .schrittleiste {
  grid-area: 1 / 1; align-self: stretch; z-index: 5; pointer-events: none;
  display: flex; align-items: flex-end;
}
.kanzlei-rahmen .werte .schritte {
  position: sticky; bottom: 40px; display: flex; gap: 10px; padding: 0 var(--rand);
}
.kanzlei-rahmen .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;
}
.kanzlei-rahmen .werte .schritte i.an { background: var(--marke); width: 52px }
.kanzlei-rahmen .werte .handybild { display: none }


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

.kanzlei-rahmen .film .laenge { display: flex; align-items: center; gap: 9px; font-size: 15px; margin-top: 16px }
.kanzlei-rahmen .film .laenge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent) }
.kanzlei-rahmen .film .aktionen { margin-top: 26px }
.kanzlei-rahmen .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. */
.kanzlei-rahmen .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);
}
.kanzlei-rahmen .film .flaeche img { width: 100%; height: 100%; object-fit: cover }
.kanzlei-rahmen .film .flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.kanzlei-rahmen .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;
}
.kanzlei-rahmen .film .flaeche:hover .abspielen { transform: translate(-50%,-50%) scale(1.06) }
.kanzlei-rahmen .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;
}
.kanzlei-rahmen .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. */

.kanzlei-rahmen .leistungen { position: relative; overflow: hidden; padding: var(--luft) 0 }
.kanzlei-rahmen .leistungen > img.panorama {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.kanzlei-rahmen .leistungen .verlauf {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(var(--marke-rgb),.72), rgba(var(--marke-rgb),.32) 42%, rgba(var(--marke-rgb),.78));
}
.kanzlei-rahmen .leistungen .bahn { position: relative; z-index: 2 }
.kanzlei-rahmen .leistungen .kopf { text-align: left; margin-bottom: 44px }
/* minmax(0,1fr): sonst sprengt der Mindestinhalt der langen Wörter die Gleichverteilung */
.kanzlei-rahmen .leistungen .karten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px }
.kanzlei-rahmen .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;
}
.kanzlei-rahmen .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“. */
.kanzlei-rahmen .leistungen .karte h3, .kanzlei-rahmen .leistungen .karte p { hyphens: manual }
.kanzlei-rahmen .leistungen .karte h3 { font-family: Merriweather, Georgia, serif; font-weight: 400;
  font-size: 21px; line-height: 1.25; margin-bottom: 10px }
.kanzlei-rahmen .leistungen .karte p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82) }
.kanzlei-rahmen .leistungen .karte .mehr {
  margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
.kanzlei-rahmen .leistungen .karte .mehr::after {
  content: ""; width: 18px; height: 1px; background: currentColor; transition: width .18s ease;
}
.kanzlei-rahmen .leistungen .karte:hover .mehr::after { width: 30px }


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

.kanzlei-rahmen .netzwerk .partnerbild {
  width: 100%; aspect-ratio: 1200 / 1628; object-fit: cover; border-radius: 10px;
  box-shadow: 0 20px 50px rgba(20,12,30,.16);
}
.kanzlei-rahmen .netzwerk .logoband { border-top: 1px solid var(--linie); margin-top: 56px; padding-top: 36px }
.kanzlei-rahmen .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 */
.kanzlei-rahmen .netzwerk .logos img { height: 42px; width: auto; object-fit: contain }


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

.kanzlei-rahmen .newsletter .kopf { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; margin-bottom: 34px }
.kanzlei-rahmen .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;
}
.kanzlei-rahmen .newsletter .karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.kanzlei-rahmen .newsletter .karte { position: relative; display: block; overflow: hidden; border-radius: 10px;
  aspect-ratio: 1 / 1; text-decoration: none }
.kanzlei-rahmen .newsletter .karte img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease }
.kanzlei-rahmen .newsletter .karte:hover img { transform: scale(1.03) }
.kanzlei-rahmen .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));
}
.kanzlei-rahmen .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) }
.kanzlei-rahmen .newsletter .fuss .satz { font-size: 16px; color: var(--text-leise); max-width: 52ch }
.kanzlei-rahmen .newsletter .sozial { display: flex; gap: 12px }
.kanzlei-rahmen .newsletter .sozial a {
  width: 44px; height: 44px; border-radius: 50%; background: var(--marke);
  display: grid; place-items: center; transition: transform .15s ease;
}
.kanzlei-rahmen .newsletter .sozial a:hover { transform: translateY(-2px) }
.kanzlei-rahmen .newsletter .sozial svg { width: 20px; height: 20px; fill: #fff }


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

.kanzlei-rahmen .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;
}
.kanzlei-rahmen .karriere .frage::before { content: ""; width: 30px; height: 2px; background: var(--akzent); flex: 0 0 auto }
.kanzlei-rahmen .karriere .versprechen { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 }
.kanzlei-rahmen .karriere .versprechen span { display: flex; align-items: baseline; gap: 10px;
  font-size: 17px; color: var(--text-leise) }
.kanzlei-rahmen .karriere .versprechen span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); flex: 0 0 auto;
}
.kanzlei-rahmen .karriere .versprechen b { color: var(--text); font-weight: 700 }
.kanzlei-rahmen .karriere .bild { border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(20,12,30,.16) }
.kanzlei-rahmen .karriere .bild video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }


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

.kanzlei-rahmen .fusszeile { background: var(--grau); padding: 72px 0 0 }
.kanzlei-rahmen .fusszeile .drei { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px }
.kanzlei-rahmen .fusszeile .logo { height: 64px; width: auto; margin-bottom: 26px }
.kanzlei-rahmen .fusszeile .spaltentitel {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #6b6b7a; margin-bottom: 14px;
}
.kanzlei-rahmen .fusszeile .kontakt { font-size: 16px; line-height: 1.75 }
.kanzlei-rahmen .fusszeile .kontakt a { color: var(--marke) }
.kanzlei-rahmen .fusszeile .zeiten { font-size: 15px; color: var(--text-leise); margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--linie) }
.kanzlei-rahmen .fusszeile .menue { display: flex; flex-direction: column; gap: 9px; font-size: 16px }
.kanzlei-rahmen .fusszeile .menue a { text-decoration: none }
.kanzlei-rahmen .fusszeile .menue a:hover { color: var(--akzent) }
.kanzlei-rahmen .fusszeile .siegel img { height: 62px; width: auto }
.kanzlei-rahmen .fusszeile .stellen { margin-top: 24px }
.kanzlei-rahmen .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;
}
.kanzlei-rahmen .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) {
  .kanzlei-rahmen { --rand: 22px; --luft: 64px; --kopf: 80px; }

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

  /* Das geöffnete Menü: die Kopfzeile wächst nach unten. Weil sie klebt,
     legt sie sich dabei über den Inhalt, statt ihn zu verschieben — nur ganz
     oben auf der Seite rückt er mit, und dort ist das richtig so.
     Die beiden Knöpfe kommen mit: auf dem Handy ist „Jetzt bewerben." der Weg,
     der zählt, und er wäre sonst bis zum Seitenende nicht erreichbar. */
  .kanzlei-rahmen .kopfzeile.offen {
    height: auto; flex-wrap: wrap; align-items: center;
    padding-bottom: 22px; max-height: 100vh; overflow-y: auto;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .12);
  }
  .kanzlei-rahmen .kopfzeile.offen nav {
    display: flex; flex-direction: column; gap: 0;
    order: 3; width: 100%; margin: 4px 0 0; font-size: 17px;
  }
  .kanzlei-rahmen .kopfzeile.offen nav a { padding: 16px 0; border-bottom: 1px solid var(--linie) }
  .kanzlei-rahmen .kopfzeile.offen .knoepfe {
    display: flex; flex-direction: column; gap: 12px;
    order: 4; width: 100%; margin: 20px 0 0;   /* der Rand von der Kopfzeile entfällt hier */
  }
  .kanzlei-rahmen .kopfzeile.offen .knoepfe .knopf { width: 100% }

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

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

  .kanzlei-rahmen .einstieg { height: calc(100vh - var(--kopf)); min-height: 560px }
  .kanzlei-rahmen .einstieg .traeger.kreis { width: 330px; height: 330px; padding: 0 30px }
  .kanzlei-rahmen .einstieg .traeger.kreis .zeichen { height: 40px; margin-bottom: 12px }
  .kanzlei-rahmen .einstieg .traeger.kreis .titel { font-size: 26px }
  .kanzlei-rahmen .einstieg .traeger.kreis .unterzeile { font-size: 14.5px }
  .kanzlei-rahmen .einstieg .traeger.feld { width: calc(100vw - 2 * var(--rand)); padding: 26px 24px 28px }
  .kanzlei-rahmen .einstieg .traeger.feld .zeichen { height: 34px; margin-bottom: 14px }
  .kanzlei-rahmen .einstieg .traeger.feld .titel { font-size: 29px }
  .kanzlei-rahmen .einstieg .traeger.feld .strich { width: 150px; height: 4px; margin: 12px 0 10px }
  .kanzlei-rahmen .einstieg .traeger.feld .unterzeile { font-size: 16px }
  .kanzlei-rahmen .einstieg .aktionen { flex-direction: column; width: 100%; margin-top: 20px }
  .kanzlei-rahmen .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. */
  .kanzlei-rahmen .abschnitt.werte { padding: 90px 0 70px }
  .kanzlei-rahmen .werte .klebe { top: var(--kopf); height: calc(100vh - var(--kopf)); width: 100%; justify-self: stretch }
  .kanzlei-rahmen .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);
  }
  .kanzlei-rahmen .werte .stufe {
    width: 100%; min-height: calc(100vh - var(--kopf)); padding: 0 var(--rand) 34px;
    align-items: flex-end;
  }
  .kanzlei-rahmen .werte .stufe .wort { font-size: 32px; color: #fff }
  .kanzlei-rahmen .werte .stufe .fliess, .kanzlei-rahmen .werte .stufe .kernsatz { color: #fff }
  .kanzlei-rahmen .werte .stufe .kernsatz { border-left-color: #fff }
  /* Damit die weiße Schrift auf jedem Bild steht: ein Verlauf am Textblock */
  .kanzlei-rahmen .werte .stufe .rumpf {
    position: relative; padding: 22px 18px 20px; border-radius: 10px;
    background: linear-gradient(to top, rgba(var(--marke-rgb),.86), rgba(var(--marke-rgb),.62));
  }
  .kanzlei-rahmen .werte .schritte { padding: 0 var(--rand) }
  .kanzlei-rahmen .werte .schritte i { background: rgba(255,255,255,.45) }
  .kanzlei-rahmen .werte .schritte i.an { background: #fff }

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

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

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

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


/* ==========================================================================
   Die Karriereseite
   --------------------------------------------------------------------------
   Erster Schritt: 1:1 nachgebaut. Alle Texte stehen wortgleich wie live, die
   Reihenfolge der sechs Abschnitte ist unverändert. Neu ist nur, dass sie sich
   an dasselbe Raster halten wie die Startseite.
   ========================================================================== */

/* ---------------------------------------------------- 1 · Der Einstieg */

/* Der Einstieg ist zugleich die Landeseite der Anzeigen. Der Text sitzt unten
   links, der Verlauf kommt von unten und läuft nach oben aus — die obere Hälfte
   des Videos bleibt frei. Der frühere ganzflächige Schleier deckte am Text 72 %
   und erzeugte 7,9 : 1, wo 4,5 : 1 reichen; er hat das Team verdeckt, ohne dass
   die Lesbarkeit es verlangt hätte. Die Deckung unten ist je Kanzlei gemessen. */
.kanzlei-rahmen .k-einstieg {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  /* Oberhalb des Textes bleibt ein Streifen Video sichtbar, und der Abschnitt
     mit den Stellen beginnt am unteren Rand. */
  min-height: clamp(600px, 77vh, 800px);
}
.kanzlei-rahmen .k-einstieg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
/* Ein leichter Verlauf: unten die Markenfarbe bei 40 % (Georgiadis 55 %) —
   der gerechnete Mittelwert zwischen den beiden Fassungen davor —, oben der
   hellere Ton der bestehenden Karriereseite bei 30 % (Georgiadis 45 %).
   Der Unterschied ist klein, er nimmt dem oberen Rand nur die Schwere.

   Bei dieser Stärke trägt der Ton den Text allein nicht: gemessen über acht
   Videobilder kommt weiße Schrift auf 1,6 : 1. Deshalb steht hinter der
   Schrift ein weicher Schatten. Er wirkt nur an den Buchstaben und lässt das
   Video unangetastet — anders als jede Verstärkung der Fläche. */
.kanzlei-rahmen .k-einstieg .schleier {
  position: absolute; inset: 0;
  /* Ein Farbton, nur die Deckung laeuft aus. Drei Halte statt zwei: mit nur
     zwei Enden laege die Mitte zwangslaeufig genau dazwischen — bei 40 und 5
     also bei 22,5 %. Der Halt bei 50 % setzt sie auf die verlangten 26,5 %.
     Dieselben drei Werte fuer beide Kanzleien, je in ihrer Markenfarbe. */
  background: linear-gradient(to top,
    rgba(var(--einstieg-rgb), .400) 0%,
    rgba(var(--einstieg-rgb), .265) 50%,
    rgba(var(--einstieg-rgb), .050) 100%);
}
.kanzlei-rahmen .k-einstieg .inhalt {
  position: relative; z-index: 2;
  /* Zehn Prozent mehr Hoehe als zuvor — die Luft liegt ueber und unter dem
     Textblock, nicht zwischen den Zeilen. */
  padding-top: 150px; padding-bottom: 80px;
}
/* Schrift wie auf der bestehenden Karriereseite: Groteske in Grossbuchstaben.
   Sie liest sich auf dem bewegten Bild besser als die Serife — gleichmaessige
   Strichstaerke, keine feinen Haarlinien, keine Unterlaengen.

   Dazu ein enger Schatten: 2 px Streuung statt der frueheren 22. Er sitzt
   dicht an der Kante, laesst die Buchstabenform scharf und hebt die Werte
   trotzdem deutlich — gemessen von 1,6 auf ueber 3 : 1. */
.kanzlei-rahmen .k-einstieg .titel, .kanzlei-rahmen .k-einstieg .k-versprechen {
  text-shadow: 0 1px 2px rgba(16,6,20,.58);
}

.kanzlei-rahmen .k-einstieg .k-dach {
  font-family: Roboto, system-ui, sans-serif; font-size: 26px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .015em;
  line-height: 1.4; color: #fff; margin-bottom: 20px; max-width: none;
}
/* Die Dachzeile stand mit 1,3 : 1 am schwaechsten. Auf dem Markenkasten
   traegt sie ihren Kontrast selbst — 10 : 1, unabhaengig vom Videobild. */
.kanzlei-rahmen .k-einstieg .k-dach span {
  background: var(--marke); border-radius: 8px;
  padding: .12em .34em .18em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* Auf 950 px begrenzt, nicht ueber die volle Inhaltsbreite: dort liegt die
   helle Seite des Videos, gemessen fiel die Ueberschrift dort auf 1,7 : 1. */
.kanzlei-rahmen .k-einstieg .titel {
  font-family: Roboto, system-ui, sans-serif;
  font-size: 60px; font-weight: 700; line-height: 1.16;
  text-transform: uppercase; letter-spacing: 0;
  max-width: min(100%, 950px);
}
/* Ein Wort auf einem Kasten in der Markenfarbe, wie auf der bestehenden Seite.
   Weiss auf der vollen Markenfarbe ergibt 10 : 1 — der Kasten haengt nicht am
   Verlauf und gibt dem Auge einen festen Punkt.
   box-decoration-break sorgt dafuer, dass der Kasten auch bei einem Zeilen-
   umbruch an beiden Teilen runde Ecken behaelt. */
.kanzlei-rahmen .k-einstieg .titel .hervor {
  background: var(--marke);
  padding: .02em .18em .08em;
  border-radius: 9px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.kanzlei-rahmen .k-einstieg .k-versprechen {
  margin-top: 20px; font-size: 24px; color: rgba(255,255,255,.96);
}

/* Die drei Stellen. Sie tragen ihren Kontrast selbst — getöntes Glas mit
   heller Kante —, damit sie unabhängig vom Verlauf darunter lesbar bleiben. */
.kanzlei-rahmen .k-hero-stellen {
  margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; max-width: 1000px;
}
.kanzlei-rahmen .k-hero-stelle {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px 17px; border-radius: 11px;
  background: rgba(var(--schleier-rgb),.50);
  border: 2px solid #fff;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.kanzlei-rahmen .k-hero-stelle:hover {
  transform: translateY(-2px);
  background: rgba(var(--schleier-rgb),.64);
}
.kanzlei-rahmen .k-hero-stelle .was {
  font-family: Merriweather, Georgia, serif; font-size: 19px; line-height: 1.3;
  color: #fff;
}
.kanzlei-rahmen .k-hero-stelle .zusatz { color: rgba(255,255,255,.75); font-size: 15.5px }
.kanzlei-rahmen .k-hero-stelle .geld { font-size: 16.5px; font-weight: 700; color: #fff }

/* Der Weg zur Stelle steht ausdruecklich in der Karte — der Pfeil sagt, dass
   es weitergeht, und ruecht beim Zeigen nach. */
.kanzlei-rahmen .k-hero-stelle .mehr {
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.24);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 15.5px; font-weight: 700; color: #fff;
}
.kanzlei-rahmen .k-hero-stelle .mehr::after {
  content: "→"; font-size: 19px; line-height: 1;
  transition: transform .15s ease;
}
.kanzlei-rahmen .k-hero-stelle:hover .mehr::after { transform: translateX(4px) }

/* Der Weg zum Formular. Die Karten fuehren auf die einzelnen Stellen, dieser
   Knopf direkt in die Bewerbung — wer schon weiss, was er will, spart einen
   Schritt. Weiss, weil er auf dem farbigen Schleier am deutlichsten steht. */
.kanzlei-rahmen .k-einstieg .aktionen { margin-top: 22px }


/* -------------------------------------- 2 · Aussagen unserer Mitarbeiter */

/* „Leere Worte." steht durchgestrichen — das ist die Pointe des
   Abschnitts. Der Strich in der Akzentfarbe, damit er als Absicht lesbar ist
   und nicht als Darstellungsfehler. */
.kanzlei-rahmen .k-aussagen .titel s {
  text-decoration: line-through;
  text-decoration-color: var(--akzent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0;
}

.kanzlei-rahmen .k-aussagen .bahn { margin-bottom: 56px }
.kanzlei-rahmen .k-aussagen .stimme { margin-bottom: 72px; align-items: center }
.kanzlei-rahmen .k-aussagen .stimme:last-child { margin-bottom: 0 }
.kanzlei-rahmen .k-aussagen .stimme img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px;
  box-shadow: 0 20px 50px rgba(20,12,30,.16);
}
.kanzlei-rahmen .k-aussagen .stimme .titel { font-size: 34px; margin-bottom: 18px }
/* Ein Zitat, kein Fließtext — deshalb die zweite Hausschrift */
.kanzlei-rahmen .k-aussagen .zitat {
  font-family: Merriweather, Georgia, serif; font-size: 17px; line-height: 1.72;
  color: var(--text); position: relative; padding-left: 22px;
  border-left: 3px solid var(--akzent);
}
.kanzlei-rahmen .k-aussagen .person { font-size: 15px; color: var(--text-leise); margin-top: 16px }


/* ------------------------------------ 3 · Ein transparenter Arbeitgeber */

.kanzlei-rahmen .k-transparenz .auftakt { font-size: 19px; margin-top: 18px; max-width: 58ch }
.kanzlei-rahmen .k-transparenz .auftakt b { color: var(--text) }
.kanzlei-rahmen .k-transparenz .drei-karten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 44px;
}
.kanzlei-rahmen .k-transparenz .karte {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 10px; padding: 28px 26px 30px;
  box-shadow: 0 2px 10px rgba(20,12,30,.06); display: flex; flex-direction: column;
}
.kanzlei-rahmen .k-transparenz .karte img { width: 100%; border-radius: 8px; margin-bottom: 18px }
/* Die Aufnahme ist freigestellt und zeigt die ganze Person, 694 x 1000.
   Im 96-px-Kreis mittig beschnitten landete der Ausschnitt auf dem Oberkoerper —
   der Kopf war weg. Jetzt steht sie unten in der Karte, ganz zu sehen, und
   fuellt zugleich den Raum, der dort ohnehin leer war (gemessen 339 px). */
.kanzlei-rahmen .k-transparenz .karte .portraet {
  margin: auto auto -28px; width: auto; max-width: 100%;
  height: 300px; object-fit: contain; object-position: bottom center;
  border-radius: 0;
}
.kanzlei-rahmen .k-transparenz .karte .portraet-alt { width: 96px; height: 96px; object-fit: cover;
  border-radius: 50%; margin: 18px 0 14px }
.kanzlei-rahmen .k-transparenz .adresse, .kanzlei-rahmen .k-transparenz .name { font-size: 16px; line-height: 1.6 }
.kanzlei-rahmen .k-transparenz .kontakt { font-size: 15px; line-height: 1.7; margin-top: 12px }
.kanzlei-rahmen .k-transparenz .kontakt a { color: var(--marke) }
.kanzlei-rahmen .k-transparenz .karte .titel.klein { font-size: 28px; margin-bottom: 12px }
/* Die Stufen nehmen den restlichen Platz ein, statt oben zu kleben —
   sonst stand die mittlere Karte zu 278 px leer. */
.kanzlei-rahmen .k-transparenz .stufen {
  margin-top: 18px; display: flex; flex-direction: column; gap: 12px;
  flex: 1; justify-content: flex-end;
}
/* Die beiden Spannen sind jetzt Verweise auf die passende Stelle. Sie sehen aus
   wie vorher, bekommen aber eine Zeile „Zur Stelle" und heben sich beim Zeigen. */
/* Nur die Unterstreichung wegnehmen — das Spaltenlayout kommt aus .stufe und
   darf nicht ueberschrieben werden, sonst stehen Bezeichnung und Betrag in
   einer Zeile. */
.kanzlei-rahmen .k-transparenz a.stufe { text-decoration: none }
.kanzlei-rahmen .k-transparenz a.stufe:hover { background: color-mix(in srgb, var(--marke) 7%, #fff) }
.kanzlei-rahmen .k-transparenz .stufe .mehr {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 14px; font-weight: 700; color: var(--marke);
}
.kanzlei-rahmen .k-transparenz .stufe .mehr::after {
  content: "→"; font-size: 15px; transition: transform .15s ease;
}
.kanzlei-rahmen .k-transparenz a.stufe:hover .mehr::after { transform: translateX(4px) }

.kanzlei-rahmen .k-transparenz .stufe {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 8px; background: var(--grau);
}
.kanzlei-rahmen .k-transparenz .stufe span { font-size: 14px; color: var(--text-leise) }
.kanzlei-rahmen .k-transparenz .stufe b { font-size: 19px; color: var(--marke) }
.kanzlei-rahmen .k-transparenz .funfacts { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--linie) }
.kanzlei-rahmen .k-transparenz .fakten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px;
}
.kanzlei-rahmen .k-transparenz .fakt { display: flex; flex-direction: column; align-items: center; gap: 14px }

/* Der Ring: ein Kegelverlauf zeichnet den Anteil, eine Scheibe in der
   Flächenfarbe stanzt die Mitte aus. Der Anteil kommt als --anteil aus dem
   Markup, damit Zahl und Ring nicht auseinanderlaufen können. */
.kanzlei-rahmen .k-transparenz .ring {
  position: relative; width: 124px; height: 124px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(var(--marke) calc(var(--anteil) * 1%), var(--linie) 0);
}
.kanzlei-rahmen .k-transparenz .ring::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: var(--grau);
}
.kanzlei-rahmen .k-transparenz .ring b {
  position: relative;
  font-family: Merriweather, Georgia, serif; font-weight: 400; font-size: 27px;
  line-height: 1; color: var(--marke);
}
.kanzlei-rahmen .k-transparenz .fakt .was { font-size: 15px; color: var(--text-leise); text-align: center }


/* ------------------------------- 4 · Arbeit kann auch Spaß machen */

/* Raster wie auf der bestehenden Seite: vier Spalten, zwei Reihen, je Reihe eine
   breite Kachel ueber zwei Spalten. Die schmalen Kacheln geben die Zeilenhoehe
   vor (258 : 370 wie im Original), die breiten fuellen sie aus.

   Der Ausschnitt steht je Bild im Markup. Vorher lag hier 4:3 und fuer die
   breite Kachel 8:3 — ein Streifen, der die Aufnahmen mittig beschnitt und
   damit genau die Gesichter wegnahm. */
.kanzlei-rahmen .k-spass .galerie, .kanzlei-rahmen .k-einblick .galerie {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-top: 40px;
}
.kanzlei-rahmen .k-spass .galerie img, .kanzlei-rahmen .k-einblick .galerie img {
  width: 100%; aspect-ratio: 258 / 370; object-fit: cover; border-radius: 10px;
}
/* Die breite Kachel bekommt ihr eigenes Seitenverhaeltnis, nicht height: 100%.
   Sonst richtet sie sich nach der Hoehe der Bilddatei und blaeht die Reihe auf —
   gemessen 744 px statt 344. 532 : 370 sind die Masse des Originals; bei
   gleicher Spaltenbreite kommen beide Kacheln damit auf dieselbe Hoehe. */
.kanzlei-rahmen .k-spass .galerie img, .kanzlei-rahmen .k-einblick .galerie img.quer {
  grid-column: span 2; aspect-ratio: 532 / 370;
}


/* ------------------------------------------------ 5 · Unsere Benefits */

/* Heute stehen die acht Punkte in einem Schieber — einer ist im Blick, für die
   anderen sind sieben Klicks nötig. Hier stehen sie nebeneinander. */
/* Acht gleiche weisse Kacheln mit Bild oben lesen sich wie eine Blogliste.
   Drei Eingriffe geben dem Abschnitt Leben, ohne ein Bild oder ein Wort zu
   aendern:
     · jede zweite Kachel traegt die Markenfarbe, im Schachbrett verteilt
     · eine Nummer sitzt auf der Bildkante und macht daraus eine Aufzaehlung
     · beim Zeigen hebt sich die Kachel und das Bild zieht leicht heran      */
.kanzlei-rahmen .k-benefits .karten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px;
}
.kanzlei-rahmen .k-benefits .karte {
  position: relative;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(20,12,30,.06);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kanzlei-rahmen .k-benefits .karte:hover {
  transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20,12,30,.14);
}
.kanzlei-rahmen .k-benefits .bildseite { position: relative; overflow: hidden }
.kanzlei-rahmen .k-benefits .karte img {
  width: 100%; height: 168px; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.kanzlei-rahmen .k-benefits .karte:hover img { transform: scale(1.06) }

/* Die Nummer sitzt auf der Kante zwischen Bild und Text — als Kind der Kachel,
   nicht der Bildflaeche: die wird fuer den Zoom beschnitten und haette die
   Nummer halbiert. Das Bild ist 168 px hoch, die Nummer 40 — 148 px setzen sie
   mittig auf die Kante. */
.kanzlei-rahmen .k-benefits .nummer {
  position: absolute; left: 20px; top: 148px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  background: var(--marke); color: #fff;
  box-shadow: 0 3px 10px rgba(20,12,30,.22);
}
.kanzlei-rahmen .k-benefits .karte .rumpf { padding: 34px 24px 28px }
.kanzlei-rahmen .k-benefits .karte h3 {
  font-family: Merriweather, Georgia, serif; font-weight: 700; font-size: 20px;
  line-height: 1.3; margin-bottom: 12px; color: var(--marke); hyphens: auto;
}
.kanzlei-rahmen .k-benefits .karte p { font-size: 15.5px; line-height: 1.6; color: var(--text-leise) }

/* Schachbrett bei vier Spalten: in Reihe 1 die Kacheln 1 und 3, in Reihe 2 die
   Kacheln 6 und 8 — der Achterschritt wiederholt das Muster fuer jede weitere
   Doppelreihe. Weiss auf der Markenfarbe ergibt 10 : 1. */
.kanzlei-rahmen .k-benefits .karte:nth-child(8n+1), .kanzlei-rahmen .k-benefits .karte:nth-child(8n+3), .kanzlei-rahmen .k-benefits .karte:nth-child(8n+6), .kanzlei-rahmen .k-benefits .karte:nth-child(8n+8) { background: var(--marke) }
.kanzlei-rahmen .k-benefits .karte:nth-child(8n+1) h3, .kanzlei-rahmen .k-benefits .karte:nth-child(8n+3) h3, .kanzlei-rahmen .k-benefits .karte:nth-child(8n+6) h3, .kanzlei-rahmen .k-benefits .karte:nth-child(8n+8) h3 { color: #fff }
.kanzlei-rahmen .k-benefits .karte:nth-child(8n+1) p, .kanzlei-rahmen .k-benefits .karte:nth-child(8n+3) p, .kanzlei-rahmen .k-benefits .karte:nth-child(8n+6) p, .kanzlei-rahmen .k-benefits .karte:nth-child(8n+8) p {
  color: rgba(255,255,255,.9);
}
.kanzlei-rahmen .k-benefits .karte:nth-child(8n+1) .nummer, .kanzlei-rahmen .k-benefits .karte:nth-child(8n+3) .nummer, .kanzlei-rahmen .k-benefits .karte:nth-child(8n+6) .nummer, .kanzlei-rahmen .k-benefits .karte:nth-child(8n+8) .nummer {
  background: #fff; color: var(--marke);
}
.kanzlei-rahmen .k-benefits .aktionen { margin-top: 40px }


/* ------------------------------- 7 · Die offenen Stellen zum Abschluss */

/* Am Seitenende noch einmal, aber als Liste statt als Karten: wer bis hierher
   gelesen hat, braucht keinen Anreisser mehr, sondern Titel, Gehalt und den
   Knopf — in einer Zeile erfassbar. */
.kanzlei-rahmen .k-liste .liste { margin-top: 36px; border-top: 1px solid var(--linie) }
.kanzlei-rahmen .k-liste .zeile {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--linie);
}
.kanzlei-rahmen .k-liste .zeile h3 {
  font-family: Merriweather, Georgia, serif; font-weight: 700; font-size: 25px;
  line-height: 1.25;
}
.kanzlei-rahmen .k-liste .zeile .zusatz { color: var(--text-leise); font-weight: 400; font-size: 19px }
.kanzlei-rahmen .k-liste .zeile .fakten { margin-top: 8px; font-size: 16px; color: var(--text-leise) }
.kanzlei-rahmen .k-liste .zeile .knopf { white-space: nowrap }
.kanzlei-rahmen .k-liste .k-hinweis { margin-top: 22px; font-size: 15px; color: var(--text-leise) }


/* --------------------------------------------- 6 · Die offenen Stellen */

/* Drei Karten, gleich unter dem Einstieg. Jede führt auf ihre eigene Seite —
   dort steht der vollständige Text, den früher der aufklappbare Block trug. */
.kanzlei-rahmen .k-karten {
  margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.kanzlei-rahmen .k-karte {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--linie); border-radius: 12px; background: #fff;
  padding: 30px 28px 26px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kanzlei-rahmen .k-karte:hover {
  transform: translateY(-2px); border-color: var(--marke);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .09);
}
.kanzlei-rahmen .k-kartenkopf { display: block }
.kanzlei-rahmen .k-kartentitel {
  display: block; font-family: Merriweather, Georgia, serif; font-size: 23px; line-height: 1.25;
}
.kanzlei-rahmen .k-karte .zusatz { color: var(--text-leise); font-size: 16px }
.kanzlei-rahmen .k-karte .fliess { font-size: 16px; color: var(--text-leise) }

/* Gehalt, Ort, Arbeitszeit — sie beantworten die drei Fragen, die vor dem
   Klick im Kopf stehen. */
.kanzlei-rahmen .k-fakten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px }
.kanzlei-rahmen .k-fakten b {
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  color: var(--marke); background: color-mix(in srgb, var(--marke) 8%, #fff);
  border-radius: 999px; padding: 6px 13px;
}
.kanzlei-rahmen .k-karte .mehr {
  font-size: 15px; font-weight: 700; color: var(--marke);
  display: flex; align-items: center; gap: 9px;
}
.kanzlei-rahmen .k-karte .mehr::after {
  content: ""; width: 22px; height: 1px; background: var(--marke);
  transition: width .15s ease;
}
.kanzlei-rahmen .k-karte:hover .mehr::after { width: 32px }
.kanzlei-rahmen .k-hinweis { margin-top: 22px; font-size: 14.5px; color: var(--text-leise) }


/* ------------------------------------------------- 7 · Eine Stellenseite */

.kanzlei-rahmen .k-stellenkopf { padding: 64px 0 56px; border-bottom: 1px solid var(--linie) }
.kanzlei-rahmen .k-zurueck {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  font-size: 14.5px; color: var(--text-leise);
}
.kanzlei-rahmen .k-zurueck::before { content: ""; width: 20px; height: 1px; background: var(--text-leise) }
.kanzlei-rahmen .k-zurueck:hover { color: var(--marke) }
.kanzlei-rahmen .k-stellenkopf .zusatz { color: var(--text-leise); font-weight: 300 }
.kanzlei-rahmen .k-stellenkopf .fliess { margin-top: 16px; max-width: 640px }
.kanzlei-rahmen .k-sozzeile { margin-top: 18px; max-width: 640px; font-size: 15.5px }
/* Der Seitenkopf mit Bild. Die Textspalte bekommt mehr Platz als das Bild —
   Titel, Gehalt und Knopf sind hier die Hauptsache, das Bild gibt das Gefuehl.
   `align-items: center` haelt das Bild auf der Hoehe des Textblocks, auch wenn
   der je nach Stelle unterschiedlich hoch ist. */
.kanzlei-rahmen .k-stellenkopf .bahn.geteilt {
  gap: 0 56px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
}
.kanzlei-rahmen .k-stellenkopf .bahn.geteilt > * { padding: 0 }
.kanzlei-rahmen .k-stellenkopf .bildseite img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%;
  border-radius: 14px; display: block;
}
.kanzlei-rahmen .k-stellenkopf .aktionen { margin-top: 26px; display: flex; align-items: center; gap: 18px }
.kanzlei-rahmen .k-stellenkopf .ohne { font-size: 14px; color: var(--text-leise) }

.kanzlei-rahmen .k-fakten-reihe { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 30px }
.kanzlei-rahmen .k-fakt { display: flex; flex-direction: column; gap: 2px }
.kanzlei-rahmen .k-fakt b { font-size: 21px; font-weight: 500 }
.kanzlei-rahmen .k-fakt span {
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise);
}

/* Die Abschnitte einer Stellenseite. Reihenfolge und Zielwerte stehen in
   5-redesign/40-stellenseiten-struktur.md: erst der Nutzen, dann die Huerde,
   ein Bild alle 400-600 px Scrollstrecke. */
/* Alle Abschnitte laufen ueber dieselbe Bahn wie der Seitenkopf. Vorher waren
   die einspaltigen auf 980 px gedeckelt — dadurch standen sie mittig, waehrend
   alle anderen linksbuendig begannen. Die Lesebreite wird jetzt am Text
   begrenzt, nicht an der Bahn: gleiche Kante, trotzdem kurze Zeilen. */
.kanzlei-rahmen .k-schluss .fliess { max-width: 780px }

/* „Das bringst du mit": Ueberschrift links, Anforderungen rechts. Vorher stand
   alles in einer Spalte und die rechte Haelfte blieb leer. */
.kanzlei-rahmen .k-block-abschnitt .bahn.geteilt {
  gap: 0 60px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.kanzlei-rahmen .k-block-abschnitt .bahn.geteilt > * { padding: 0 }
.kanzlei-rahmen .k-block-abschnitt .titel { font-size: 38px }
.kanzlei-rahmen .k-block-abschnitt .aktionen { margin-top: 30px }
/* Die Anforderungen bekommen eine ruhige Flaeche — sonst schweben sie neben
   der grossen Ueberschrift im Weissraum. */
/* Der Waehler muss `> .listenseite` heissen: Die Regel darueber setzt fuer alle
   direkten Kinder padding 0 und wuerde sonst gewinnen. */
.kanzlei-rahmen .k-block-abschnitt .bahn.geteilt > .listenseite {
  background: #f4f4f7; border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 16px; padding: 34px 36px;
}
.kanzlei-rahmen .k-block-abschnitt .listenseite .punkte { margin-top: 0 }
.kanzlei-rahmen .k-block-abschnitt .nachsatz {
  margin: 24px 0 0; padding-top: 22px; border-top: 1px solid rgba(0,0,0,.09);
  font-size: 16px; line-height: 1.65; color: var(--text-leise);
}
.kanzlei-rahmen .k-ablauf .schritte { max-width: 1100px }
/* Diese Abschnitte nutzen `bahn geteilt` zusammen. `.bahn` setzt den Seitenrand,
   `.geteilt` setzt zusaetzlich Raender auf seinen Spalten — beides addiert sich
   und ragte auf dem Handy 34 px ueber den Rand. Hier zaehlt nur die Bahn, die
   Spalten bekommen stattdessen einen Zwischenraum. */
.kanzlei-rahmen .k-tag .bahn.geteilt, .kanzlei-rahmen .k-bieten .bahn.geteilt, .kanzlei-rahmen .k-stimme .bahn.geteilt, .kanzlei-rahmen .k-wirsind .bahn.geteilt {
  gap: 0 56px;
  /* minmax(0, …) statt 1fr: sonst zaehlt die Breite des Bildes als Mindestmass
     und die Spalte waechst ueber die Bahn hinaus. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.kanzlei-rahmen .k-tag .bahn.geteilt > *, .kanzlei-rahmen .k-bieten .bahn.geteilt > *, .kanzlei-rahmen .k-stimme .bahn.geteilt > *, .kanzlei-rahmen .k-wirsind .bahn.geteilt > * { padding: 0 }

/* In den geteilten Abschnitten steht die Ueberschrift in einer halben Spalte —
   bei 46 px bricht sie dort mitten im Wort um. */
.kanzlei-rahmen .k-tag .titel, .kanzlei-rahmen .k-bieten .titel, .kanzlei-rahmen .k-stimme .titel, .kanzlei-rahmen .k-wirsind .titel { font-size: 36px }
/* Kein festes Seitenverhaeltnis mehr: Die Motive der beiden Kanzleien sind
   unterschiedlich ausgerichtet, und ein erzwungenes Hochformat hat aus einem
   Querformat einen gestreckten Ausschnitt gemacht. Jetzt behaelt jedes Bild
   seine eigenen Masse, begrenzt nur durch die Hoehe. */
.kanzlei-rahmen .k-bieten .bildseite img {
  width: auto; max-width: 100%; max-height: 520px; aspect-ratio: auto;
  object-fit: contain; margin-inline: auto;
}

/* Jeder Abschnitt der Stellenseite endet mit dem Weg ins Formular. Wer nach
   dem Tagesablauf ueberzeugt ist, soll nicht erst weiterscrollen muessen. */
.kanzlei-rahmen .k-tag .aktionen, .kanzlei-rahmen .k-block-abschnitt .aktionen, .kanzlei-rahmen .k-bieten .aktionen, .kanzlei-rahmen .k-stimme .aktionen, .kanzlei-rahmen .k-wirsind .aktionen, .kanzlei-rahmen .k-ablauf .aktionen, .kanzlei-rahmen .k-weitere .aktionen {
  margin-top: 28px; display: flex; align-items: center; gap: 18px;
}
.kanzlei-rahmen .k-tag .ohne, .kanzlei-rahmen .k-block-abschnitt .ohne, .kanzlei-rahmen .k-bieten .ohne, .kanzlei-rahmen .k-stimme .ohne, .kanzlei-rahmen .k-wirsind .ohne, .kanzlei-rahmen .k-ablauf .ohne, .kanzlei-rahmen .k-weitere .ohne {
  font-size: 14px; color: var(--text-leise);
}

.kanzlei-rahmen .k-tag .punkte, .kanzlei-rahmen .k-block-abschnitt .punkte, .kanzlei-rahmen .k-bieten .punkte {
  margin: 24px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.kanzlei-rahmen .k-tag .punkte li, .kanzlei-rahmen .k-block-abschnitt .punkte li, .kanzlei-rahmen .k-bieten .punkte li {
  display: flex; gap: 13px; font-size: 17px; line-height: 1.6; color: var(--text-leise);
}
.kanzlei-rahmen .k-tag .punkte li::before, .kanzlei-rahmen .k-block-abschnitt .punkte li::before, .kanzlei-rahmen .k-bieten .punkte li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent);
  flex: 0 0 auto; margin-top: 11px;
}
.kanzlei-rahmen .nachsatz { margin-top: 20px; font-size: 16.5px; color: var(--text-leise) }
.kanzlei-rahmen .nachsatz a { color: var(--marke); font-weight: 700 }

/* Zwei Abschnitte stehen neben einem Bild — das haelt die Bildabstaende ein,
   ohne die Seite laenger zu machen. */
.kanzlei-rahmen .k-tag .bildseite img, .kanzlei-rahmen .k-stimme .bildseite img, .kanzlei-rahmen .k-wirsind .bildseite img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%;
  border-radius: 12px;
}
/* Das Portraet fuellte sonst die halbe Spalte — gemessen 553 x 737 px und
   damit der hoechste Abschnitt der Seite. Auf 340 px begrenzt. */
.kanzlei-rahmen .k-stimme .bildseite img {
  aspect-ratio: 4 / 5; max-width: min(420px, 100%); margin-inline: auto;
}
.kanzlei-rahmen .k-stimme .zitat { font-size: 19px; line-height: 1.65 }
.kanzlei-rahmen .k-stimme .person { margin-top: 16px; font-size: 15.5px; color: var(--text-leise) }

/* Der Weg zur Bewerbung: drei Schritte nebeneinander */
.kanzlei-rahmen .k-ablauf .schritte {
  margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.kanzlei-rahmen .k-ablauf .schritt { display: flex; gap: 16px; align-items: flex-start }
.kanzlei-rahmen .k-ablauf .schritt > b {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--marke); color: #fff; font-size: 16px;
}
.kanzlei-rahmen .k-ablauf .schritt h3 {
  font-family: Merriweather, Georgia, serif; font-weight: 700; font-size: 19px;
  margin-bottom: 6px;
}
.kanzlei-rahmen .k-ablauf .schritt p { font-size: 16px; line-height: 1.6; color: var(--text-leise) }

.kanzlei-rahmen .k-block { max-width: 820px }          /* Lesebreite, damit die Zeilen nicht zu lang werden */
.kanzlei-rahmen .k-block + .k-block { margin-top: 54px }
.kanzlei-rahmen .k-block .titel { font-size: 30px; margin-bottom: 14px }
.kanzlei-rahmen .k-block .punkte { margin: 20px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 11px }
.kanzlei-rahmen .k-block .punkte li {
  display: flex; gap: 12px; font-size: 16.5px; line-height: 1.6; color: var(--text-leise);
}
.kanzlei-rahmen .k-block .punkte li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent);
  flex: 0 0 auto; margin-top: 10px;
}

.kanzlei-rahmen .k-weitere .k-karten { grid-template-columns: repeat(2, 1fr) }
.kanzlei-rahmen .k-schluss .fliess { max-width: 640px; margin-top: 6px }
.kanzlei-rahmen .k-schluss .aktionen { margin-top: 28px; display: flex; align-items: center; gap: 18px }
.kanzlei-rahmen .k-schluss .ohne { font-size: 14px; color: var(--text-leise) }


/* ---------------------------------------------------------------- Handy */

@media (max-width: 900px) {
  /* Die Stellen-Regeln stehen hier und nicht im allgemeinen Handy-Block:
     dort kämen sie vor den Karten-Stilen und würden von ihnen überstimmt. */
  .kanzlei-rahmen .k-karten, .kanzlei-rahmen .k-weitere .k-karten { grid-template-columns: 1fr; gap: 14px }
  .kanzlei-rahmen .k-karte { padding: 24px 22px 22px }
  .kanzlei-rahmen .k-stellenkopf { padding: 40px 0 38px }
  .kanzlei-rahmen .k-fakten-reihe { gap: 20px 28px; margin-top: 24px }
  .kanzlei-rahmen .k-stellenkopf .aktionen, .kanzlei-rahmen .k-schluss .aktionen, .kanzlei-rahmen .k-tag .aktionen, .kanzlei-rahmen .k-block-abschnitt .aktionen, .kanzlei-rahmen .k-bieten .aktionen, .kanzlei-rahmen .k-stimme .aktionen, .kanzlei-rahmen .k-wirsind .aktionen, .kanzlei-rahmen .k-ablauf .aktionen, .kanzlei-rahmen .k-weitere .aktionen {
    flex-direction: column; align-items: flex-start; gap: 12px;
  }
  .kanzlei-rahmen .k-block + .k-block { margin-top: 40px }
  .kanzlei-rahmen .k-warum .auftakt { font-size: 18px }
  .kanzlei-rahmen .k-ablauf .schritte { grid-template-columns: 1fr; gap: 20px; margin-top: 30px }
  .kanzlei-rahmen .k-tag .punkte li, .kanzlei-rahmen .k-block-abschnitt .punkte li, .kanzlei-rahmen .k-bieten .punkte li { font-size: 16px }
  .kanzlei-rahmen .k-stimme .zitat { font-size: 17px }
  .kanzlei-rahmen .k-tag .bahn.geteilt, .kanzlei-rahmen .k-bieten .bahn.geteilt, .kanzlei-rahmen .k-stimme .bahn.geteilt, .kanzlei-rahmen .k-wirsind .bahn.geteilt, .kanzlei-rahmen .k-sozietaet .bahn.geteilt, .kanzlei-rahmen .k-stellenkopf .bahn.geteilt, .kanzlei-rahmen .k-block-abschnitt .bahn.geteilt {
    gap: 26px 0; grid-template-columns: minmax(0, 1fr);
  }
  /* Auf dem Handy steht das Bild unter dem Text — Titel und Gehalt zuerst. */
  .kanzlei-rahmen .k-stellenkopf .bildseite { order: 2 }
  /* Dasselbe fuer die uebrigen geteilten Abschnitte der Stellenseite. Sonst
     zieht die allgemeine Regel `.geteilt > .bildseite { order: -1 }` das Bild
     nach oben — und weil der Seitenkopf mit einem Bild endet, staenden zwei
     Bilder direkt hintereinander.

     Es genuegt nicht, nur `k-tag` zu drehen: Dann stiessen `k-tag` und
     `k-bieten` aneinander. Erst wenn alle Abschnitte mit Text beginnen und mit
     Bild enden, wechseln sich Text und Bild ueber die ganze Seite ab.

     `bahn.geteilt` statt nur `geteilt`: Zwei der Abschnitte haben das Bild am
     Rechner bewusst links (`geteilt bild-links`), und die zugehoerige Regel
     `.geteilt.bild-links > .bildseite { order: -1 }` ist spezifischer als eine
     Auswahl mit zwei Klassen. Ohne die zusaetzliche Klasse bliebe das Bild dort
     oben stehen. */
  .kanzlei-rahmen .k-tag .bahn.geteilt > .bildseite, .kanzlei-rahmen .k-bieten .bahn.geteilt > .bildseite, .kanzlei-rahmen .k-stimme .bahn.geteilt > .bildseite, .kanzlei-rahmen .k-wirsind .bahn.geteilt > .bildseite { order: 2 }
  .kanzlei-rahmen .k-stellenkopf .bildseite img { aspect-ratio: 3 / 2 }
  .kanzlei-rahmen .k-block-abschnitt .bahn.geteilt > .listenseite { padding: 26px 22px }
  .kanzlei-rahmen .k-block-abschnitt .titel { font-size: 25px }
  .kanzlei-rahmen .k-sozietaet .titel { font-size: 25px }
  .kanzlei-rahmen .k-sozietaet .bildseite img { max-width: 100%; aspect-ratio: 3 / 2 }
  .kanzlei-rahmen .k-orte { max-width: 100% }
  .kanzlei-rahmen .k-block .titel { font-size: 25px }

  .kanzlei-rahmen .k-einstieg { min-height: 0; padding-top: 52px }
  .kanzlei-rahmen .k-einstieg .inhalt { padding-top: 32px; padding-bottom: 28px }
  .kanzlei-rahmen .k-einstieg .aktionen .knopf { width: 100% }
  .kanzlei-rahmen .k-einstieg .k-versprechen { font-size: 19px; margin-top: 14px }
  .kanzlei-rahmen .k-einstieg .titel { font-size: 34px }
  /* Untereinander, je Karte eine Zeile — Tippfläche bleibt über 44 px. */
  .kanzlei-rahmen .k-hero-stellen { grid-template-columns: 1fr; gap: 8px; margin-top: 18px }
  /* Titel und Gehalt in eine Zeile, die Aufforderung darunter — sonst waechst
     der Einstieg ueber das Fenster hinaus und der Knopf rutscht darunter. */
  .kanzlei-rahmen .k-hero-stelle {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "was geld" "mehr mehr";
    align-items: center; gap: 2px 10px; padding: 12px 14px;
  }
  .kanzlei-rahmen .k-hero-stelle .was { grid-area: was }
  .kanzlei-rahmen .k-hero-stelle .geld { grid-area: geld; text-align: right }
  .kanzlei-rahmen .k-hero-stelle .mehr { grid-area: mehr; margin-top: 8px; padding-top: 8px; font-size: 14px }
  .kanzlei-rahmen .k-hero-stelle .was { font-size: 15.5px }
  .kanzlei-rahmen .k-hero-stelle .zusatz { font-size: 13px }
  .kanzlei-rahmen .k-hero-stelle .geld { font-size: 14px; white-space: nowrap }
  .kanzlei-rahmen .k-einstieg .k-dach { font-size: 18px }

  .kanzlei-rahmen .k-aussagen .stimme { margin-bottom: 44px }
  .kanzlei-rahmen .k-aussagen .stimme .titel { font-size: 26px }

  .kanzlei-rahmen .k-transparenz .drei-karten { grid-template-columns: 1fr }
  .kanzlei-rahmen .k-transparenz .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .kanzlei-rahmen .k-transparenz .fakt b { font-size: 32px }

  .kanzlei-rahmen .k-spass .galerie, .kanzlei-rahmen .k-einblick .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .kanzlei-rahmen .k-spass .galerie img.quer, .kanzlei-rahmen .k-einblick .galerie img.quer { grid-column: span 2; aspect-ratio: 532 / 370; height: auto }

  .kanzlei-rahmen .k-liste .zeile { grid-template-columns: 1fr; gap: 16px; padding: 22px 0 }
  .kanzlei-rahmen .k-liste .zeile h3 { font-size: 21px }
  .kanzlei-rahmen .k-liste .zeile .zusatz { font-size: 16px }
  .kanzlei-rahmen .k-liste .zeile .knopf { width: 100% }

  .kanzlei-rahmen .k-benefits .karten { grid-template-columns: 1fr; gap: 12px }
  /* Bei einer Spalte ergibt der Achterschritt kein Schachbrett mehr, sondern
     zweimal Weiss hintereinander. Hier zaehlt der einfache Wechsel.
     Die Auswahl geht ueber .karten, damit sie schwerer wiegt als die
     Schachbrett-Regeln oben — sonst gewinnen die bei den geraden Kacheln. */
  .kanzlei-rahmen .k-benefits .karten .karte:nth-child(even) { background: #fff }
  .kanzlei-rahmen .k-benefits .karten .karte:nth-child(even) h3 { color: var(--marke) }
  .kanzlei-rahmen .k-benefits .karten .karte:nth-child(even) p { color: var(--text-leise) }
  .kanzlei-rahmen .k-benefits .karten .karte:nth-child(even) .nummer { background: var(--marke); color: #fff }
  .kanzlei-rahmen .k-benefits .karten .karte:nth-child(odd) { background: var(--marke) }
  .kanzlei-rahmen .k-benefits .karten .karte:nth-child(odd) h3 { color: #fff }
  .kanzlei-rahmen .k-benefits .karten .karte:nth-child(odd) p { color: rgba(255,255,255,.9) }
  .kanzlei-rahmen .k-benefits .karten .karte:nth-child(odd) .nummer { background: #fff; color: var(--marke) }

  .kanzlei-rahmen .k-stellen summary { padding: 20px 20px }
  .kanzlei-rahmen .k-stellen .stellentitel { font-size: 21px }
  .kanzlei-rahmen .k-stellen .zusatz { font-size: 16px }
  .kanzlei-rahmen .k-stellen .stellentext { padding: 0 20px 26px }
  .kanzlei-rahmen .k-stellen .teil h4 { font-size: 20px }
}