/* Hero-Varianten — Entwurfsseiten zur Abstimmung.
   Farben und Maße ausschließlich aus /styles/tokens.css. */

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

body {
  margin: 0;
  background: var(--c-kanzlei);
  color: var(--c-marine);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base); }

main { position: relative; }

.hero, .sektion {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--s-5);
  position: relative;
  z-index: 1;
}

.hero { padding-block: calc(var(--s-10) + 3rem) var(--s-9); }
.sektion { padding-block: var(--sektion-y); }

.logo { inline-size: min(26rem, 70vw); block-size: auto; display: block; }

h1, h2 { font-family: var(--f-display); font-weight: 500; text-wrap: balance;
  font-optical-sizing: auto; margin: 0; }
h2 { font-size: var(--t-3xl); letter-spacing: var(--ls-3xl); line-height: var(--lh-3xl); }

/* h3 war an fünfzehn Stellen einzeln gesetzt, in zwei Größen, ohne Regel
   dahinter — und nirgends global. Wer ein neues Bauteil baut und die Regel
   vergisst, bekam den Browserwert. Jetzt einmal hier, --t-lg als Standard
   für Kartenüberschriften. Größer nur, wo es begründet ist. */
h3 { font-family: var(--f-display); font-weight: 500; font-optical-sizing: auto;
  font-size: var(--t-lg); letter-spacing: var(--ls-lg); line-height: var(--lh-lg);
  text-wrap: balance; margin: 0 0 var(--s-3); }

.lead { font-size: var(--t-lg); letter-spacing: var(--ls-lg); line-height: var(--lh-lg);
  color: var(--c-grau); max-width: var(--breite-text); margin-block: var(--s-6) var(--s-7); }

.sektion p { max-width: var(--breite-text); margin-block: var(--s-4) 0; }

.marginalie { font-family: var(--f-mono); font-size: var(--t-sm);
  letter-spacing: var(--ls-sm); color: var(--c-grau);
  font-variant-numeric: tabular-nums; margin: 0 0 var(--s-3);
  line-height: var(--lh-sm); }

/* Kurzer Goldstrich vor der Sektionsnummer. Eine Marke am Anfang einer
   Sektion, keine Linie zwischen zweien: sie setzt einen Takt, ohne eine
   Trennung über die ganze Breite zu behaupten — die hat das Design-System
   in Abschnitt 6 aus gutem Grund gestrichen. Und sie tritt dem Goldfaden
   nicht in den Weg, weil sie kurz und örtlich ist.
   Hilft am meisten auf dem Telefon, wo die Marginalienspalte nicht
   seitlich stehen kann. */
.marginalie::before { content: ""; display: inline-block;
  inline-size: 1.5rem; block-size: 1.5px; background: var(--c-gold);
  margin-inline-end: var(--s-3); vertical-align: 0.28em; }

.hinweis { margin-block-start: var(--s-8); border-inline-start: 3px solid var(--c-marine);
  padding-inline-start: var(--s-4); max-width: 34rem; }

.btn { font: inherit; font-weight: 500; color: var(--c-weiss);
  background: var(--c-marine); border: 0; border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-5); min-block-size: 44px; cursor: pointer;
  transition: background-color var(--e-farbe);
  /* auch als <a> verwendbar: ohne diese drei Zeilen bliebe der Link
     inline und unterstrichen */
  display: inline-flex; align-items: center; text-decoration: none; }
.btn:hover { background: var(--c-tresor); }
.btn:focus-visible { outline: 3px solid var(--c-messing); outline-offset: 3px; }

.sektion.dunkel { max-width: none; background: var(--c-tresor); color: var(--c-kanzlei); }
/* Dieselbe Inhaltskante wie die hellen Sektionen: 68rem abzüglich Innenabstand.
   Der linke Rand wird gerechnet statt auto, damit schmalere Absätze links
   bündig bleiben, statt sich in der Mitte einzurücken. */
.sektion.dunkel > * { --spalte: calc(68rem - 2 * var(--s-5));
  max-width: var(--spalte);
  margin-inline: max(0px, calc((100% - var(--spalte)) / 2)) auto; }
.sektion.dunkel > p { max-width: var(--breite-text); }
.sektion.dunkel .marginalie { color: var(--c-gold); }

/* Der Umschalter der Entwurfsvarianten ist am 2026-09-07 entfallen; seine
   Regeln standen hier. Die stillgelegten Seiten liegen mitsamt ihrem Markup
   unter reference/hero-varianten/. */

/* ================= Variante A — Goldfaden ================= */
.faden { position: absolute; inset-block-start: 0; inset-inline-end: 6%;
  inline-size: 14rem; block-size: 100%; pointer-events: none; display: none;
  /* Ueber den Sektionen (1), unter Leiste und Marke (6, 7): der Faden laeuft
     durch die ganze Seite hindurch, auch ueber Bilder und den Fussbereich. */
  z-index: 5; }
@media (min-width: 64em) { .hat-faden .faden { display: block; } }

.faden path {
  fill: none; stroke: var(--c-gold); stroke-width: 1.5; stroke-linecap: round;
  pathLength: 1; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: faden linear both;
  animation-timeline: scroll(root block);
}
@keyframes faden { to { stroke-dashoffset: 0; } }

/* ================= Variante B — Signaturzug ================= */
/* Das Gold im Logo ist eine gefüllte Fläche, kein gestrichener Pfad.
   Gezeichnet wird deshalb über eine wandernde Blende, nicht über dashoffset. */
.logo.schreibt .l-gold {
  clip-path: inset(0 100% 0 0);
  animation: schreiben linear both;
  animation-timeline: scroll(root block);
  animation-range: 0 60vh;
}
@keyframes schreiben { to { clip-path: inset(0 0 0 0); } }

/* ================= Variante C — Aufmaß ================= */
.schlag { font-size: var(--t-4xl); letter-spacing: var(--ls-4xl); line-height: var(--lh-4xl);
  margin-block-start: var(--s-7); display: flex; align-items: center; gap: var(--s-4); }
.mass { display: block; block-size: 1.5px; background: var(--c-messing);
  inline-size: 0; flex: 0 0 auto;
  animation: aufmass linear both;
  animation-timeline: scroll(root block);
  animation-range: 0 70vh;
}
@keyframes aufmass { to { inline-size: 12rem; } }

/* ================= Rückfallebenen ================= */
/* Ohne scrollgesteuerte Animationen steht jede Variante im Endzustand da. */
@supports not (animation-timeline: scroll()) {
  .faden path { stroke-dashoffset: 0; animation: none; }
  .logo.schreibt .l-gold { clip-path: none; animation: none; }
  .mass { inline-size: 12rem; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faden path { stroke-dashoffset: 0; animation: none; }
  .logo.schreibt .l-gold { clip-path: none; animation: none; }
  .mass { inline-size: 12rem; animation: none; }
  .btn { transition: none; }
}

/* ================= Variante A+ — Goldfaden mit Bewegung =================
   Alles hier ist scrollgekoppelt. Nichts läuft von selbst, nichts pulsiert,
   nichts blendet ein. Die Bewegung erklärt, wo man auf der Seite ist. */


/* --- Logo wandert aus dem Hero in die Leiste -------------------------- */
.v-plus .marke {
  position: sticky; inset-block-start: 0.55rem; z-index: 7;
  max-width: 68rem; margin-inline: auto; padding-inline: var(--s-5);
  padding-block-start: var(--s-9);
  transform-origin: left top;
  /* Zwei Bewegungen mit eigenen Bereichen: erst wandert und schrumpft die
     Marke nach oben, dann blendet sie aus, während die Marke im Menü an
     derselben Stelle einblendet. Beide sind etwa gleich groß und gleich
     ausgerichtet, es liest sich als ein durchgehendes Element. */
  animation: marke-schrumpft linear both, marke-uebergabe linear both;
  animation-timeline: scroll(root block), scroll(root block);
  animation-range: 0 40vh, 34vh 46vh;
}
@keyframes marke-schrumpft {
  to { transform: scale(0.34) translateY(-6.4rem); }
}
@keyframes marke-uebergabe { to { opacity: 0; } }
.v-plus .marke .logo { inline-size: min(26rem, 70vw); block-size: auto; display: block; }
.v-plus .hero { padding-block-start: var(--s-6); }

/* --- Knoten am Faden: rasten ein, sobald die Linie sie erreicht -------- */
.v-plus .knoten {
  position: absolute; inset-block-start: 0; inset-inline-end: 6%;
  inline-size: 14rem; block-size: 100%; pointer-events: none; z-index: 0;
  display: none;
}
@media (min-width: 64em) { .v-plus .knoten { display: block; } }

.v-plus .knoten span {
  position: absolute;
  inset-inline-start: var(--x); inset-block-start: var(--y);
  inline-size: 9px; block-size: 9px; margin: -4.5px 0 0 -4.5px;
  border: 1.5px solid var(--c-gold); border-radius: 50%;
  background: var(--c-kanzlei);
  transform: scale(0);
  animation: knoten-ein linear both;
  animation-timeline: scroll(root block);
  animation-range: var(--ab) calc(var(--ab) + 4%);
}
@keyframes knoten-ein { to { transform: scale(1); } }

/* --- Rückfallebenen --------------------------------------------------- */
@supports not (animation-timeline: scroll()) {
  .v-plus .marke { animation: none; opacity: 1; }
  .v-plus .knoten span { transform: scale(1); animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v-plus .marke { animation: none; opacity: 1; }
  .v-plus .knoten span { transform: scale(1); animation: none; }
}

/* ================= Variante D — Lichtkante =================
   Dunkle Bühne, über die eine warme Lichtkante dem Zeiger folgt.
   Sie bewegt sich ausschließlich, wenn der Nutzer die Maus bewegt —
   keine Eigenbewegung, keine Schleife. Gold bleibt Linie und Lichtkante,
   niemals Fläche oder Verlauf als Gestaltungsmittel. */

.v-licht .buehne {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-tresor);
  padding-block: calc(var(--s-10) + 2rem) var(--s-10);
  margin-block-end: var(--s-8);
}

.v-licht .buehne-inhalt {
  position: relative; z-index: 2;
  max-width: 68rem; margin-inline: auto; padding-inline: var(--s-5);
}
.v-licht .buehne .logo { inline-size: min(30rem, 76vw); block-size: auto; display: block; }
/* Auf dunklem Grund wird die Marine-Gruppe hell geschaltet, Gold bleibt.
   Keine zweite Logodatei — Vorgabe aus dem Design-System, Abschnitt 12. */
.v-licht .buehne .logo { --logo-marine: var(--c-kanzlei); }
.v-licht .buehne .lead { color: color-mix(in srgb, var(--c-kanzlei) 76%, transparent); }

/* Korn: feine Textur, damit die Fläche Material wird statt Farbe.
   Erzeugt im Browser, kein Bild — kostet keine Ladezeit. */
.korn {
  position: absolute; inset: 0; z-index: 0; opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23k)' opacity='0.32'/></svg>");
}

/* Die Lichtkante selbst. Folgt --mx/--my, die licht.js pro Frame setzt. */
.licht {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38rem 26rem at var(--mx) var(--my),
      color-mix(in srgb, var(--c-gold) 16%, transparent) 0%,
      color-mix(in srgb, var(--c-gold) 6%, transparent) 38%,
      transparent 72%),
    radial-gradient(22rem 16rem at var(--mx) var(--my),
      color-mix(in srgb, var(--c-weiss) 7%, transparent) 0%,
      transparent 64%);
  transition: background-position var(--e-ruhig);
}

/* Eine Haarlinie am unteren Rand der Bühne, die unter dem Licht aufhellt.
   Das ist die eigentliche Kante — Gold als Linie, wie vorgeschrieben. */
.v-licht .buehne::after {
  content: ""; position: absolute; z-index: 2;
  inset-inline: 0; inset-block-end: 0; block-size: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-gold) 30%, transparent) calc(var(--mx) - 22%),
    var(--c-gold) var(--mx),
    color-mix(in srgb, var(--c-gold) 30%, transparent) calc(var(--mx) + 22%),
    transparent 100%);
}

.v-licht .btn-hell { background: var(--c-kanzlei); color: var(--c-marine); }
.v-licht .btn-hell:hover { background: var(--c-weiss); }
.v-licht .hinweis { max-width: 68rem; margin-inline: auto; padding-inline: var(--s-5);
  border-inline-start: 0; }

/* Ohne feinen Zeiger, ohne Hover oder bei reduzierter Bewegung bleibt das
   Licht in der Ruhelage stehen. licht.js startet dort gar nicht erst. */
@media (prefers-reduced-motion: reduce) {
  .licht { transition: none; }
}

/* ================= Startseite: Bausteine für den Kundenpfad ================= */

.v-plus h1 { font-size: var(--t-4xl); letter-spacing: var(--ls-4xl);
  line-height: var(--lh-4xl); max-width: 20ch; margin-block: var(--s-6) 0; }
@media (min-width: 64em) { .v-plus h1 { font-size: var(--t-5xl);
  letter-spacing: var(--ls-5xl); line-height: var(--lh-5xl); } }

/* Beide Aktionen gleich breit, gemessen an der längeren.
   Das Raster bekommt max-content als Breite; zwei 1fr-Spuren darin werden
   dabei beide so breit wie die grössere — ohne eine feste Breite zu setzen,
   die beim nächsten Textwechsel wieder falsch wäre. */
.aktionen { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  inline-size: max-content; max-inline-size: 100%; gap: var(--s-4); }
.aktionen .btn, .aktionen .btn-zweit { justify-content: center; text-align: center; }
@media (max-width: 34em) {
  .aktionen { grid-auto-flow: row; inline-size: auto; }
}
.btn-zweit { background: none; color: var(--c-marine); border: 1px solid var(--c-linie);
  font: inherit; font-weight: 500; border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-5); min-block-size: 44px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: border-color var(--e-farbe); }
.btn-zweit:hover { border-color: var(--c-marine); }
.btn-zweit:focus-visible { outline: 3px solid var(--c-messing); outline-offset: 3px; }

.sektion h2 + p, .sektion .absatz { margin-block-start: var(--s-4); }

/* ---- Vier Wege ---- */
.wege { list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; gap: var(--s-4); }
@media (min-width: 52em) { .wege { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-5); } }
.wege > li { background: var(--c-weiss); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: var(--s-5); }

.wege p { margin: 0 0 var(--s-3); }
.wege p:last-child { margin-block-end: 0; }
/* Die letzte Karte trägt mehr Gewicht als die fünf Wege davor und bekommt
   deshalb die volle Breite statt eine überlange Spalte. */
.wege > li.breit { grid-column: 1 / -1; }
/* Drei Karten nebeneinander, sobald die Breite es trägt. */
@media (min-width: 60em) { .wege.drei { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* Abschlussart unter einem Ausbildungsweg, klein wie eine Marginalie. */
.wege .abschluss-art { font-family: var(--f-mono); font-size: var(--t-sm);
  letter-spacing: var(--ls-sm); color: var(--akzent-hell); margin: 0; }
.wege .optionen { font-family: var(--f-mono); font-size: var(--t-sm);
  color: var(--akzent-hell);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }

/* ---- Partnerblock: abgesetzt und mit sichtbarer Absenderkennzeichnung.
        Vorgabe aus dem Design-System, Abschnitt 3 — SRT-Inhalte werden
        nie mit Straubinger-Elementen verschmolzen, kein SRT-Gold. ---- */
.partner { margin-block-start: var(--s-6); background: var(--c-weiss);
  border: 1px solid var(--c-linie); border-radius: var(--r-md);
  padding: var(--s-5); max-width: var(--breite-text); }
.partner-logo { display: block; inline-size: 11rem; block-size: auto;
  margin-block-end: var(--s-5); padding-block-end: var(--s-4);
  border-block-end: 1px solid var(--c-linie); }
.partner p { margin: 0 0 var(--s-3); }
.partner p:last-child { margin-block-end: 0; }
.partner .aktion { margin-block-start: var(--s-5); }

/* ---- Häufige Fragen: details/summary, ohne JavaScript ---- */
.fragen { margin-block-start: var(--s-6); max-width: var(--breite-text); }
.fragen details { border-block-end: 1px solid var(--c-linie); }
.fragen summary { cursor: pointer; list-style: none; padding-block: var(--s-4);
  min-block-size: 44px; display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--s-4); font-weight: 500; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-family: var(--f-mono);
  color: var(--c-messing); flex: none; }
.fragen details[open] summary::after { content: "–"; }
.fragen summary:focus-visible { outline: 3px solid var(--c-messing); outline-offset: 2px; }
.fragen details p { margin: 0 0 var(--s-4); }

/* ---- Gesetze: aufklappbar wie die Fragen, mit Kürzel und Einordnung ---- */
.gesetze summary { display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: var(--s-1) var(--s-4); align-items: center; }
.gesetze summary .kuerzel, .gesetze summary .titel { grid-column: 1; }
.gesetze summary::after { grid-column: 2; grid-row: 1 / span 2; }
.gesetze summary .kuerzel { display: block;
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400;
  color: var(--akzent-hell); letter-spacing: var(--ls-xs); line-height: var(--lh-xs); }
.gesetze details h3 { font-size: var(--t-base); letter-spacing: var(--ls-base);
  line-height: var(--lh-base); margin: var(--s-5) 0 var(--s-2); }
.gesetze .policen, .gesetze .kaskade { margin: 0 0 var(--s-4); }
.gesetze .kaskade { padding-inline-start: var(--s-5); }
.gesetze .kaskade li { margin-block-end: var(--s-1); }
.gesetze .kaskade li::marker { font-family: var(--f-mono); color: var(--akzent-hell); }
/* Einordnung am Ende jedes Gesetzes: Goldlinie wie beim Platzhalter, ohne Fläche. */
.sektion .gesetze .folge { margin: var(--s-5) 0 var(--s-5); padding-inline-start: var(--s-4);
  border-inline-start: 1.5px solid var(--c-gold); font-weight: 500; }
.sektion .hinweis-klein { margin-block-start: var(--s-5); font-size: var(--t-sm);
  color: var(--text-sekund); letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }

/* ---- Abschluss ---- */
.abschluss-block { background: var(--c-weiss); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: var(--s-6); margin-block-start: var(--s-6); }
.abschluss-block p { max-width: var(--breite-text); }
.abschluss-block .neben { font-size: var(--t-sm); color: var(--c-grau);
  margin-block-start: var(--s-4);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }

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

/* ---- Variante D: Startseiten-Inhalt auf der dunklen Bühne ---- */
.v-licht .buehne h1 { font-family: var(--f-display); font-weight: 500;
  font-size: var(--t-4xl); letter-spacing: var(--ls-4xl); line-height: var(--lh-4xl);
  color: var(--c-kanzlei); max-width: 20ch; text-wrap: balance;
  font-optical-sizing: auto; margin-block: var(--s-6) 0; }
@media (min-width: 64em) {
  .v-licht .buehne h1 { font-size: var(--t-5xl); letter-spacing: var(--ls-5xl);
    line-height: var(--lh-5xl); }
}
.v-licht .buehne .lead { max-width: var(--breite-text); margin-block: var(--s-5) var(--s-7); }
.v-licht .btn-zweit { color: var(--c-kanzlei);
  border-color: color-mix(in srgb, var(--c-kanzlei) 34%, transparent); }
.v-licht .btn-zweit:hover { border-color: var(--c-gold); }

/* ================= Fußbereich =================
   Gemeinsame Grundlage für beide Varianten. Tresor als Fläche ist die im
   Token-Satz vorgesehene Verwendung („Dunkle Sektionsflächen, Footer").
   Gold erscheint hier als Textakzent auf dunklem Grund und als Haarlinie —
   nie als Fläche. */

.fussbereich { position: relative; background: var(--bg-dunkel);
  color: var(--text-invers); margin-block-start: var(--sektion-y);
  padding-block: var(--s-9) var(--s-7); overflow: hidden; }
.fussbereich > * { position: relative; z-index: 2;
  max-width: 68rem; margin-inline: auto; padding-inline: var(--s-5); }

.fuss-raster { display: grid; gap: var(--s-7); grid-template-columns: minmax(0,1fr); }
@media (min-width: 44em) { .fuss-raster { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (min-width: 68em) { .fuss-raster {
  grid-template-columns: minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,0.9fr) minmax(0,1.3fr);
  gap: var(--s-6); } }

.fussbereich h2 { font-family: var(--f-body); font-weight: 700;
  font-size: var(--t-sm); letter-spacing: var(--ls-sm); text-transform: none;
  color: var(--akzent-dunk); margin: 0 0 var(--s-3);
  line-height: var(--lh-sm); }
.fussbereich .logo { inline-size: 13rem; block-size: auto; display: block;
  margin-block-end: var(--s-4); --logo-marine: var(--c-kanzlei); }
.fussbereich p, .fussbereich address, .fussbereich li {
  font-style: normal; margin: 0 0 var(--s-2);
  font-size: var(--t-sm); letter-spacing: var(--ls-sm); line-height: var(--lh-sm);
  color: color-mix(in srgb, var(--c-kanzlei) 82%, transparent); }
.fussbereich p:last-child { margin-block-end: 0; }
.fussbereich ul { list-style: none; margin: 0; padding: 0; }
.fussbereich li { margin-block-end: var(--s-3); }
.fussbereich a { color: var(--c-kanzlei); text-decoration-color:
  color-mix(in srgb, var(--c-gold) 60%, transparent); text-underline-offset: 4px; }
.fussbereich a:hover { color: var(--akzent-dunk); }
.fussbereich .auf-dunkel a:focus-visible,
.fussbereich a:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
/* „Cookie-Einstellungen“ öffnet das Cookiebot-Banner erneut: eine Aktion, daher ein
   Knopf – sieht aus wie die Links daneben. */
.fussbereich .fuss-knopf { font: inherit; letter-spacing: inherit; color: var(--c-kanzlei);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: start;
  text-decoration: underline; text-decoration-color:
  color-mix(in srgb, var(--c-gold) 60%, transparent); text-underline-offset: 4px; }
.fussbereich .fuss-knopf:hover { color: var(--akzent-dunk); }
.fussbereich .fuss-knopf:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.fussbereich .nummer { font-family: var(--f-mono);
  font-variant-numeric: tabular-nums; color: var(--c-kanzlei);
  /* Eine umgebrochene Rufnummer ist schwer als eine Nummer zu lesen. */
  white-space: nowrap; }

/* Beschriftung über einem Adressblock im Fuß. */
.fussbereich .fuss-label { color: color-mix(in srgb, var(--c-kanzlei) 62%, transparent);
  margin-block-end: var(--s-1); }

/* Fehlende Pflichtseiten werden sichtbar markiert, nicht auf 404 verlinkt. */
.fussbereich .fehlt { color: color-mix(in srgb, var(--c-kanzlei) 55%, transparent); }
.fussbereich .fehlt::after { content: " — in Vorbereitung";
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--akzent-dunk);
  letter-spacing: var(--ls-xs); line-height: var(--lh-xs); }

.fussbereich > .trenner { border: 0; border-block-start: 1px solid
  color-mix(in srgb, var(--c-gold) 45%, transparent);
  max-width: none; margin-inline: 0; padding-inline: 0;
  margin-block: var(--s-7) var(--s-5); }
/* Leitsatz unter dem Logo: etwas kräftiger als der Text darunter. */
.fussbereich .fuss-claim { font-weight: 600; color: var(--c-kanzlei); margin-block-end: var(--s-2); }
.fussbereich .rechtshinweis { font-size: var(--t-xs); letter-spacing: var(--ls-xs);
  line-height: 1.35; max-width: none;   /* volle Breite, so wenig Höhe wie möglich */
  color: color-mix(in srgb, var(--c-kanzlei) 66%, transparent); }
.fussbereich .signatur { font-family: var(--f-mono); font-size: var(--t-xs);
  color: color-mix(in srgb, var(--c-kanzlei) 66%, transparent);
  margin-block-start: var(--s-4);
  letter-spacing: var(--ls-xs); line-height: var(--lh-xs); }

/* ---- A+: hier endet der Goldfaden. Ein letzter Knoten schließt ihn ab. ---- */
.v-plus .fussbereich { border-block-start: var(--linie-faden, 1.5px) solid var(--c-gold); }
.v-plus .fussbereich::before {
  content: ""; position: absolute; z-index: 3;
  inset-block-start: calc(var(--linie-faden, 1.5px) * -1 - 4.5px);
  inset-inline-start: 50%; margin-inline-start: -4.5px;
  inline-size: 9px; block-size: 9px; border-radius: 50%;
  border: 1.5px solid var(--c-gold); background: var(--bg-seite);
}
@media (min-width: 64em) { .v-plus .fussbereich::before { inset-inline-start: 50%; } }

/* ---- D: der Fuß nimmt das Material der Bühne wieder auf.
        Die Seite schließt, wie sie geöffnet hat. ---- */
.v-licht .fussbereich { --mx: 50%; --my: 0%; }
/* Diese drei sind vom Inhaltsraster ausgenommen: die Regel oben gibt jedem
   direkten Kind 68rem Maximalbreite, wodurch Licht und Trennstrich mitten
   auf der Fläche endeten statt an ihrem Rand. */
.fussbereich > .korn, .fussbereich > .licht {
  position: absolute; inset: 0;
  max-width: none; margin-inline: 0; padding-inline: 0; }
.fussbereich > .korn { z-index: 0; }
.fussbereich > .licht { z-index: 1; }

/* ---- Sachwert: Kasten links, Münze rechts ---- */
.sachwert { display: grid; gap: var(--s-5); align-items: center;
  grid-template-columns: minmax(0,1fr);
  margin-block-start: var(--s-6); }
@media (min-width: 56em) {
  .sachwert { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: var(--s-7); }
}
.sachwert .partner { margin-block-start: 0; max-width: none; }
.partner h3 { margin-block-end: var(--s-2); }
.partner h3.weiter { margin-block-start: var(--s-5); }
.partner .betont { margin-block-start: var(--s-4); }
/* Nur Textlinks einfaerben — die Schaltflaeche bringt ihre eigene Farbe mit
   und wuerde sonst Messing auf Marine zeigen, also dunkel auf dunkel. */
.partner a:not(.btn) { color: var(--akzent-hell); }

.muenze { margin: 0; display: flex; justify-content: center; }
.muenze img { inline-size: auto; block-size: auto;
  max-inline-size: min(15rem, 60vw); max-block-size: 30rem; }
/* Das Bild ist 1 zu 2 — jede Breite ergibt die doppelte Höhe. Auf dem Telefon
   nahm es sonst den halben Bildschirm ein, ohne mehr zu zeigen. */
@media (max-width: 40em) {
  .muenze img { max-inline-size: min(10rem, 42vw); max-block-size: 22rem; }
}

/* ---- Fußnote und Sternchen ---- */
.stern { font-family: var(--f-mono); color: var(--akzent-hell);
  text-decoration: none; padding-inline-start: 2px; }
a.stern:hover { text-decoration: underline; }

/* Links im Fließtext: Schriftfarbe des Absatzes, Unterstreichung im
   Messington — sonst bleibt das Blau des Browsers stehen. */
.sektion p a:not(.btn):not(.btn-zweit):not(.stern) { color: inherit;
  text-decoration-color: var(--akzent-hell); text-underline-offset: 3px;
  text-decoration-thickness: 1px; }
.sektion p a:not(.btn):not(.btn-zweit):not(.stern):hover { text-decoration-thickness: 2px; }
.fussbereich .fussnote { font-size: var(--t-xs); letter-spacing: var(--ls-xs);
  line-height: 1.35; max-width: none;   /* volle Breite, damit sie wenig Höhe braucht */
  color: color-mix(in srgb, var(--c-kanzlei) 60%, transparent);
  margin-block-start: var(--s-4); }
.fussbereich .fussnote .stern { color: var(--akzent-dunk); }

/* Einleitungsabsatz einer Sektion. --t-lg ist in der Typo-Skala genau dafür
   vorgesehen; die Farbe bleibt Marine, weil es eine Aussage ist und kein
   Beiwerk. */
.sektion .einleitung { font-size: var(--t-lg); letter-spacing: var(--ls-lg);
  line-height: var(--lh-lg); color: var(--text-primar);
  max-width: var(--breite-text); margin-block: var(--s-5) var(--s-6); }

/* Hervorgehobener Satz im Fließtext: Display-Schrift, eine Stufe grösser,
   ohne Zierrat. Kein zusätzliches Gold — die Auffälligkeit trägt der Goldfaden.
   .schlusssatz schliesst eine Sektion ab, .leitfrage hebt eine Frage darin heraus. */
.sektion .schlusssatz, .sektion .leitfrage { font-family: var(--f-display); font-weight: 500;
  font-optical-sizing: auto; text-wrap: balance;
  font-size: var(--t-xl); letter-spacing: var(--ls-xl); line-height: var(--lh-xl);
  color: var(--text-primar); max-width: 38ch; margin-block-start: var(--s-6); }
.sektion .leitfrage { margin-block: var(--s-5); }

/* ---- Zitat: Display-Kursive, wie im Design-System für Zitate vorgesehen ---- */
.sektion .zitat { font-family: var(--f-display); font-style: italic;
  font-optical-sizing: auto; font-size: var(--t-2xl); letter-spacing: var(--ls-2xl);
  line-height: var(--lh-2xl); color: var(--text-primar); text-wrap: balance;
  max-width: 24ch; margin-block: var(--s-5) var(--s-8); }

/* ---- Anlässe: scrollgesteuert, keine Eigenbewegung ----
   Jedes Element hat seine eigene view()-Zeitachse. Dadurch entsteht der
   Versatz von allein, ohne Verzögerungen zu verteilen — und beim
   Zurückscrollen läuft alles rückwärts. */
.sektion .vorspann { margin-block-start: var(--s-6); }

/* ---- Kennzahlen: Zahl in Plex Mono über einer Goldlinie ---- */
.kennzahlen { list-style: none; margin: var(--s-6) 0; padding: 0;
  display: grid; gap: var(--s-5); grid-template-columns: minmax(0,1fr); }
@media (min-width: 40em) { .kennzahlen { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Als letztes Element einer Sektion kein Rand nach unten — sonst addiert er
   sich zum Sektionsabstand und die Lücke zur nächsten Sektion wird zu groß. */
.kennzahlen:last-child { margin-block-end: 0; }
.sektion:has(> .kennzahlen:last-child) { padding-block-end: var(--s-5); }
.kennzahlen li { border-block-start: 1.5px solid var(--c-gold); padding-block-start: var(--s-4); }
.kennzahlen .zahl { display: block; font-family: var(--f-mono); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--text-primar);
  font-size: var(--t-3xl); letter-spacing: var(--ls-3xl); line-height: var(--lh-3xl); }
.kennzahlen .zahl-text { display: block; margin-block-start: var(--s-2); max-width: 34ch;
  font-size: var(--t-sm); color: var(--text-sekund);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }

/* ---- Angebot für Vermittler: vier Punkte auf dunklem Grund, ohne Karten ---- */
.vermittler { list-style: none; padding: 0; margin-block: var(--s-6) var(--s-5);
  display: grid; gap: var(--s-6) var(--s-7); grid-template-columns: minmax(0,1fr); }
@media (min-width: 48em) { .vermittler { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.vermittler li { border-inline-start: 1.5px solid var(--c-gold); padding-inline-start: var(--s-5); }
.vermittler h3 { color: var(--c-kanzlei); margin: 0 0 var(--s-2); }
.vermittler p { margin: 0; color: color-mix(in srgb, var(--c-kanzlei) 80%, transparent); }

.anlaesse { list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: grid; gap: var(--s-6); grid-template-columns: minmax(0,1fr);
  max-width: var(--breite-text); }
.anlaesse li { position: relative; padding-inline-start: var(--s-5); }

/* Die Goldlinie wächst mit, wenn der Eintrag ins Bild kommt. */
.anlaesse li::before { content: ""; position: absolute;
  inset-block: 0; inset-inline-start: 0; inline-size: 1.5px;
  background: var(--c-gold); transform-origin: top center; scale: 1 0;
  animation: anlass-linie linear both;
  animation-timeline: view();
  animation-range: entry 5% entry 45%; }
@keyframes anlass-linie { to { scale: 1 1; } }

.anlaesse h3 { margin-block-end: var(--s-2); }
.anlaesse p { margin: 0; color: var(--text-sekund); }

.anlaesse h3, .anlaesse p { opacity: 0; translate: 0 0.6rem;
  animation: anlass-ein linear both;
  animation-timeline: view();
  animation-range: entry 10% entry 50%; }
@keyframes anlass-ein { to { opacity: 1; translate: 0 0; } }

/* Ohne Unterstützung und bei reduzierter Bewegung steht alles sofort da. */
@supports not (animation-timeline: view()) {
  .anlaesse li::before { scale: 1 1; animation: none; }
  .anlaesse h3, .anlaesse p { opacity: 1; translate: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .anlaesse li::before { scale: 1 1; animation: none; }
  .anlaesse h3, .anlaesse p { opacity: 1; translate: none; animation: none; }
}

/* ---- Ablauf in vier Schritten. Bewusst ruhig: kein Gold, keine Karten,
        keine Bewegung — die Schritte markiert der Goldfaden mit seinen
        Knoten, und pro Seite bleibt es bei einem auffälligen Element. ---- */
.prozess { list-style: none; margin: var(--s-7) 0 0; padding: 0;
  display: grid; gap: var(--s-7); grid-template-columns: minmax(0,1fr);
  max-width: var(--breite-text); }
.prozess li { display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: var(--s-4);
  align-items: start; }
.prozess .nr { font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-xl); line-height: 1; color: var(--akzent-hell);
  padding-block-start: 0.15em;
  letter-spacing: var(--ls-xl); }

.prozess p { margin: 0 0 var(--s-3); }
.prozess p:last-child { margin-block-end: 0; }
.betont { font-weight: 700; color: var(--text-primar); }
.prozess .betont { margin-block-start: var(--s-4); }

/* ---- Karten reagieren auf den Zeiger.
        Die Marke ist eine Goldlinie an der Oberkante, die dort aufhellt, wo
        der Zeiger steht — dasselbe Motiv wie die Lichtkante der Bühne in
        Variante D. Gold bleibt Linie, nie Fläche.
        --mx setzt licht.js; ohne feinen Zeiger und bei reduzierter Bewegung
        laeuft das Skript nicht, dann steht die Linie mittig. ---- */
.wege > li, .partner, .abschluss-block, .termin .karte, #lvr .abschluss,
.stimmen li, #lvr .feld-gruppe, #lvr .diagramm, .team > li, .partner-logos li {
  --mx: 50%; position: relative;
  transition: border-color var(--e-farbe), box-shadow var(--e-farbe),
              translate var(--e-farbe); }

.wege > li::after, .partner::after, .abschluss-block::after,
.termin .karte::after, #lvr .abschluss::after, .stimmen li::after,
#lvr .feld-gruppe::after, #lvr .diagramm::after, .team > li::after, .partner-logos li::after {
  content: ""; position: absolute; z-index: 1;
  /* Um den Eckradius eingerückt statt per overflow beschnitten — sonst würde
     der Fokusring von Bedienelementen am Kartenrand mit abgeschnitten. */
  inset-inline: var(--r-md); inset-block-start: 0; block-size: 1.5px; opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-gold) 25%, transparent) calc(var(--mx) - 26%),
    var(--c-gold) var(--mx),
    color-mix(in srgb, var(--c-gold) 25%, transparent) calc(var(--mx) + 26%),
    transparent 100%);
  transition: opacity var(--e-farbe); }

.wege > li:hover, .partner:hover, .abschluss-block:hover,
.termin .karte:hover, #lvr .abschluss:hover, .stimmen li:hover,
#lvr .feld-gruppe:hover, #lvr .diagramm:hover, .team > li:hover, .partner-logos li:hover {
  border-color: color-mix(in srgb, var(--c-marine) 35%, var(--c-linie));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--c-marine) 8%, transparent); }
.wege > li:hover::after, .partner:hover::after, .abschluss-block:hover::after,
.termin .karte:hover::after, #lvr .abschluss:hover::after,
.stimmen li:hover::after, #lvr .feld-gruppe:hover::after,
#lvr .diagramm:hover::after, .team > li:hover::after, .partner-logos li:hover::after { opacity: 1; }

/* Angehoben werden nur Karten zum Lesen. Kalender, Zeitraster und Formular
   bleiben stehen — eine Karte, die sich unter dem Zeiger verschiebt, waehrend
   man einen Tag anklickt oder ein Feld ausfuellt, ist im Weg. */
.wege > li:hover, .partner:hover, .abschluss-block:hover,
#lvr .abschluss:hover, .stimmen li:hover, .team > li:hover, .partner-logos li:hover { translate: 0 -2px; }

@media (prefers-reduced-motion: reduce) {
  .wege > li, .partner, .abschluss-block, .termin .karte, #lvr .abschluss,
  .stimmen li, #lvr .feld-gruppe, #lvr .diagramm, .team > li, .partner-logos li {
    transition: border-color var(--e-farbe); }
  .wege > li:hover, .partner:hover, .abschluss-block:hover, .termin .karte:hover,
  .stimmen li:hover, #lvr .feld-gruppe:hover, #lvr .diagramm:hover, .team > li:hover, .partner-logos li:hover {
    translate: none; box-shadow: none; }
}

/* ---- Auf dunklem Grund umfärben: die Hervorhebungen setzen sonst Marine
        auf Tresor, also dunkel auf dunkel. ---- */
.sektion.dunkel .einleitung,
.sektion.dunkel .leitfrage,
.sektion.dunkel .schlusssatz,
.sektion.dunkel .betont { color: var(--c-kanzlei); }
.sektion.dunkel .leitfrage { color: var(--akzent-dunk); }

/* Dreiklang der Terminarten: eine Zeile, die Punkte durch eine Goldhaarlinie
   getrennt. Das Trennzeichen haengt am vorangehenden Punkt, damit es beim
   Umbruch am Zeilenende stehen bleibt und nicht eine neue Zeile eroeffnet. */
.dreiklang { margin-block: var(--s-5) 0; }
.dreiklang span:not(:last-child)::after { content: ""; display: inline-block;
  inline-size: 1.5px; block-size: 0.85em; vertical-align: -0.05em;
  background: var(--akzent-hell); margin-inline: var(--s-4); }

/* Einzige Ausnahme von --t-lg: dieser Kasten ist eine eigenstaendige
   Handlungsaufforderung und muss ziehen, nicht nur gliedern. */
.abschluss-block h3 { font-size: var(--t-xl); letter-spacing: var(--ls-xl);
  line-height: var(--lh-xl); }
.abschluss-block .betont { margin-block-end: var(--s-3); }
.abschluss-block .aktion { margin-block-start: var(--s-5); }

/* ---- Dunkle Sektion mit derselben Lichtkante wie die Bühne ---- */
.sektion.dunkel { --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden; }
.sektion.dunkel > .korn, .sektion.dunkel > .licht {
  max-width: none; margin-inline: 0; }
.sektion.dunkel > *:not(.korn):not(.licht) { position: relative; z-index: 2; }
/* Haarlinie an der Unterkante, die unter dem Licht aufhellt — wie bei der Bühne. */
.sektion.dunkel::after { content: ""; position: absolute; z-index: 3;
  inset-inline: 0; inset-block-end: 0; block-size: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-gold) 30%, transparent) calc(var(--mx) - 22%),
    var(--c-gold) var(--mx),
    color-mix(in srgb, var(--c-gold) 30%, transparent) calc(var(--mx) + 22%),
    transparent 100%); }


/* Goldlinie, die beim Zeigen aus der Mitte herauswächst. Gold als Linie —
   die einzige Form, in der es auf hellem Grund vorkommen darf. */
.menu a::after { content: ""; position: absolute;
  inset-inline: 0; inset-block-end: 0.6rem; block-size: 1.5px;
  background: var(--akzent-hell); scale: 0 1; transform-origin: center;
  transition: scale var(--e-farbe); }
.menu a:hover::after, .menu a:focus-visible::after { scale: 1 1; }
.menu a:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 4px; }

/* Lesefortschritt: eine Haarlinie unter dem Menü, die mit dem Scrollen
   wächst. Scrollgesteuert, keine Eigenbewegung, rückwärts genauso. */
.menu::after { content: ""; position: absolute;
  inset-inline-start: 0; inset-block-end: 0; block-size: 1px;
  inline-size: 100%; background: color-mix(in srgb, var(--c-gold) 55%, transparent);
  transform-origin: left center; scale: 0 1;
  animation: menu-fortschritt linear both;
  animation-timeline: scroll(root block); }
@keyframes menu-fortschritt { to { scale: 1 1; } }
.menu { position: relative; padding-block-end: var(--s-3); }

/* Auf der dunklen Bühne hell setzen. */
.v-licht .buehne .menu a { color: var(--c-kanzlei); }
.v-licht .buehne .menu-nr { color: var(--akzent-dunk); }
.v-licht .buehne .menu a::after,
.v-licht .buehne .menu::after { background: var(--akzent-dunk); }
.v-licht .buehne .menu a:focus-visible { outline-color: var(--c-gold); }

@supports not (animation-timeline: scroll()) {
  .menu::after { scale: 1 1; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu::after { scale: 1 1; animation: none; }
  .menu a::after { transition: none; }
}

/* ================= Menü, fest über der Seite =================
   Ausserhalb von <main>, weil die Bühne in Variante D overflow: hidden hat
   und ein festes Element darin beschnitten würde. Es traegt zugleich das
   Material, in das in A+ die Marke hineinwandert. */
.menu { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 6; }

/* Material baut sich mit dem Scrollen auf. Scroll-Edge-Maske statt
   Trennlinie — Vorgabe aus Abschnitt 6 des Design-Systems. */
.menu::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--c-kanzlei) 74%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
  opacity: 0;
  animation: menu-material linear both;
  animation-timeline: scroll(root block);
  animation-range: 0 28vh; }
@keyframes menu-material { to { opacity: 1; } }

.menu-inhalt { max-width: 68rem; margin-inline: auto;
  padding-inline: var(--s-5); block-size: 5.5rem;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-6); }

.menu a { position: relative; display: inline-flex; align-items: center;
  min-block-size: 44px; font-size: var(--t-sm); font-weight: 500;
  color: var(--text-primar); text-decoration: none; white-space: nowrap;
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }

/* Goldlinie, die beim Zeigen aus der Mitte herauswächst. */
.menu a::after { content: ""; position: absolute;
  inset-inline: 0; inset-block-end: 0.55rem; block-size: 1.5px;
  background: var(--akzent-hell); scale: 0 1; transform-origin: center;
  transition: scale var(--e-farbe); }
.menu a:hover::after, .menu a:focus-visible::after { scale: 1 1; }
.menu a:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 4px; }

/* Lesefortschritt an der Unterkante: waechst mit dem Scrollen der Seite. */
.menu::after { content: ""; position: absolute;
  inset-inline-start: 0; inset-block-end: 0; block-size: 1px; inline-size: 100%;
  background: color-mix(in srgb, var(--c-gold) 55%, transparent);
  transform-origin: left center; scale: 0 1;
  animation: menu-fortschritt linear both;
  animation-timeline: scroll(root block); }
@keyframes menu-fortschritt { to { scale: 1 1; } }

/* Auf der dunklen Bühne beginnt die Schrift hell und wird dunkel, sobald
   das Material darunter aufgebaut ist. */
/* :not(.menu-marke) — sonst ersetzt diese Regel die Einblendung der Marke,
   weil beide dieselbe animation-Eigenschaft setzen. */
.v-licht .menu a:not(.menu-marke) { color: var(--c-kanzlei);
  animation: menu-schrift linear both;
  animation-timeline: scroll(root block);
  animation-range: 0 28vh; }
@keyframes menu-schrift { to { color: var(--text-primar); } }
.v-licht .menu a:not(.menu-marke)::after { background: var(--akzent-dunk); }



@supports not (animation-timeline: scroll()) {
  .menu::before { opacity: 1; animation: none; }
  .menu::after { scale: 1 1; animation: none; }
  .v-licht .menu a:not(.menu-marke) { color: var(--text-primar); animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu::before { opacity: 1; animation: none; }
  .menu::after { scale: 1 1; animation: none; }
  .menu a::after { transition: none; }
  .v-licht .menu a:not(.menu-marke) { color: var(--text-primar); animation: none; }
}

/* ---- Kleine Marke im Menü, blendet nach dem Hero ein ----
   In beiden Varianten. In A+ übernimmt sie von der wandernden Marke, die
   im selben Bereich ausblendet; in D erscheint sie für sich. */
.menu-marke { display: flex; align-items: center; margin-inline-end: auto;
  opacity: 0; scale: 0.92; transform-origin: left center;
  animation: menu-marke-ein linear both;
  animation-timeline: scroll(root block);
  animation-range: 34vh 46vh; }
@keyframes menu-marke-ein { to { opacity: 1; scale: 1; } }
.menu-marke .logo { inline-size: 8.5rem; block-size: auto; display: block; }
/* Die Marke blendet erst ein, wenn das Material darunter steht — dort ist
   der Grund hell, die Marine-Gruppe bleibt also dunkel. */
.menu-marke::after { content: none; }
@media (max-width: 40em) { .menu-marke .logo { inline-size: 6.5rem; } }

@supports not (animation-timeline: scroll()) {
  .menu-marke { opacity: 1; scale: 1; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-marke { opacity: 1; scale: 1; animation: none; }
}

/* ---- Aufklappmenü für schmale Bildschirme ----
   Umschaltpunkt 66em: darunter passen die acht Einträge nicht mehr
   neben die Marke.
   Auf breiten Bildschirmen liegen die Einträge offen in der Leiste, die
   Schaltfläche ist ausgeblendet. Der Zustand steht im aria-expanded der
   Schaltfläche; CSS liest ihn von dort, es gibt keine zweite Wahrheit. */
.menu-liste { display: flex; align-items: center; gap: var(--s-6); }
.menu-schalter { display: none; }
.nur-schmal { display: none; }

@media (max-width: 66em) {
  .menu-inhalt { justify-content: space-between; gap: var(--s-4);
    block-size: 4rem; }

  .menu-schalter { display: grid; gap: 5px; align-content: center;
    inline-size: 44px; block-size: 44px; padding: 0 10px;
    background: none; border: 0; cursor: pointer; }
  .menu-strich { display: block; block-size: 1.5px; inline-size: 24px;
    background: var(--text-primar);
    transition: rotate var(--e-ruhig), translate var(--e-ruhig),
                opacity var(--e-farbe); }
  .menu-schalter:focus-visible { outline: 3px solid var(--akzent-hell);
    outline-offset: 2px; border-radius: var(--r-sm); }

  /* Drei Striche werden zum Kreuz — dieselbe Bewegung rückwärts beim Schließen. */
  .menu-schalter[aria-expanded="true"] .menu-strich:nth-child(1) {
    translate: 0 6.5px; rotate: 45deg; }
  .menu-schalter[aria-expanded="true"] .menu-strich:nth-child(2) { opacity: 0; }
  .menu-schalter[aria-expanded="true"] .menu-strich:nth-child(3) {
    translate: 0 -6.5px; rotate: -45deg; }

  .menu-liste { position: absolute; inset-inline: 0; inset-block-start: 100%;
    display: grid; gap: 0; padding: var(--s-2) var(--s-5) var(--s-5);
    background: color-mix(in srgb, var(--c-kanzlei) 96%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-block-end: 1px solid var(--c-linie);
    opacity: 0; translate: 0 -0.5rem; visibility: hidden;
    transition: opacity var(--e-ruhig), translate var(--e-ruhig),
                visibility 0s var(--e-ruhig); }
  .menu-schalter[aria-expanded="true"] + .menu-liste {
    opacity: 1; translate: 0 0; visibility: visible;
    transition: opacity var(--e-ruhig), translate var(--e-ruhig); }

  .menu-liste a { min-block-size: 52px; font-size: var(--t-base);
    color: var(--text-primar); border-block-end: 1px solid var(--c-linie);
  letter-spacing: var(--ls-base); line-height: var(--lh-base); }
  .menu-liste a:last-child { border-block-end: 0; }
  .menu-liste a::after { inset-block-end: 0.9rem; }
  .nur-schmal { display: inline-flex; }

  /* Im aufgeklappten Menü steht der Grund hell, unabhaengig von der Variante. */
  .v-licht .menu-liste a:not(.menu-marke) { color: var(--text-primar); animation: none; }
  .v-licht .menu-liste a::after { background: var(--akzent-hell); }
  .menu-marke .logo { inline-size: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-strich, .menu-liste { transition: none; }
}

/* ---- Schutz gegen seitliches Verschieben ----
   clip statt hidden: hidden würde einen Scrollcontainer erzeugen und damit
   position: sticky im Dokument aushebeln. Das ist ein Netz, kein Ersatz für
   das Beheben der Ursache — überbreite Elemente werden einzeln gelöst. */
html { overflow-x: clip; }

/* Deutsche Komposita brechen sonst über den Rand, gerade in grossen Graden. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

/* ---- Schaltfläche des Aufklappmenüs ---- */
@media (max-width: 66em) {
  /* Fast deckend statt 74 Prozent: über gemustertem Inhalt war die Leiste
     sonst unruhig und Striche wie Beschriftung schlecht zu lesen. */
  .menu::before { background: color-mix(in srgb, var(--c-kanzlei) 94%, transparent); }

  /* Auf der dunklen Bühne beginnen die Striche hell und werden dunkel,
     sobald das Material darunter steht — wie die Beschriftungen. */
  .v-licht .menu-strich { background: var(--c-kanzlei);
    animation: menu-strich-farbe linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 28vh; }
  @keyframes menu-strich-farbe { to { background: var(--text-primar); } }
}
@supports not (animation-timeline: scroll()) {
  .v-licht .menu-strich { background: var(--text-primar); animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-licht .menu-strich { background: var(--text-primar); animation: none; }
}

/* Sprungziele: die feste Leiste würde sonst die erste Zeile des Ziels
   verdecken. Beim Seitenanfang klemmt der Wert ohnehin auf 0. */
main, .sektion, .fussbereich { scroll-margin-block-start: 6.75rem; }
@media (max-width: 40em) {
  main, .sektion, .fussbereich { scroll-margin-block-start: 5rem; }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Netz auch auf dem Körper: die Weitergabe von overflow an das Sichtfeld
   greift nicht in jedem Browser gleich. */
body { overflow-x: clip; }

/* ================= Stimmen =================
   Monogramme statt Porträts. Die Bild-Skill schliesst KI-erzeugte Menschen
   ausdrücklich aus, und ein echtes Foto gibt es hier nicht — ein Buchstabenpaar
   in einer Goldlinie ist ehrlicher als ein erfundenes Gesicht und bleibt bei
   jeder Grösse scharf. */
.stimmen { list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.stimmen li { background: var(--bg-karte); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: var(--s-5); }
.stimmen figure { margin: 0; display: grid; gap: var(--s-4); }

.monogramm { display: grid; place-items: center;
  inline-size: 3rem; block-size: 3rem; border-radius: 50%;
  border: 1.5px solid var(--c-gold);
  font-family: var(--f-display); font-size: var(--t-lg); font-weight: 500;
  color: var(--akzent-hell);
  letter-spacing: var(--ls-lg); line-height: var(--lh-lg); }

.stimmen blockquote { margin: 0; }
.stimmen blockquote p { font-family: var(--f-display); font-style: italic;
  font-optical-sizing: auto; font-size: var(--t-lg); letter-spacing: var(--ls-lg);
  line-height: var(--lh-lg); color: var(--text-primar); margin: 0; }
.stimmen blockquote p::before { content: "„"; }
.stimmen blockquote p::after { content: "“"; }
.stimmen figcaption { font-family: var(--f-mono); font-size: var(--t-sm);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); color: var(--text-sekund); }

/* Sichtbare Markierung, damit der Entwurf nicht versehentlich live geht. */
.platzhalter { margin-block-start: var(--s-5); max-width: var(--breite-text);
  font-size: var(--t-sm); letter-spacing: var(--ls-sm); line-height: var(--lh-sm);
  color: var(--c-messing); background: color-mix(in srgb, var(--c-gold) 14%, transparent);
  border-inline-start: 3px solid var(--akzent-hell); padding: var(--s-3) var(--s-4); }

/* ---- Die Münze folgt dem Zeiger deutlicher als die Karten ----
   Karten heben sich um 2px, hier neigt sich das Bild und wächst leicht.
   Eine Münze ist ein Gegenstand, keine Fläche — sie darf sich anfassen
   lassen wie einer. --px und --py kommen aus licht.js und laufen von
   -0,5 bis 0,5; ohne Skript, auf Touchgeräten und bei reduzierter Bewegung
   sind sie nicht gesetzt und der Rückfallwert 0 lässt das Bild still. */
.muenze { perspective: 900px; }
/* Ohne display: contents bildet <picture> einen Kasten zwischen figure und
   img — die Perspektive gilt nur fuer direkte Kinder und die Neigung waere
   flach. */
.muenze picture { display: contents; }
.muenze img {
  transform: rotateY(calc(var(--px, 0) * 20deg))
             rotateX(calc(var(--py, 0) * -20deg))
             scale(var(--zoom, 1));
  transition: transform var(--e-farbe);
  will-change: transform;
}
.muenze:hover img { --zoom: 1.06; }

@media (prefers-reduced-motion: reduce) {
  .muenze img { transform: none; transition: none; }
  .muenze:hover img { --zoom: 1; }
}

/* ---- Raumebene: der Zeiger auf hellem Grund ----
   Umkehrung des Effekts auf der dunklen Bühne. Dort hellt der Zeiger auf,
   hier dunkelt er ab. Am 2026-09-03 in drei Schritten eingestellt:
   5 % / 42rem, dann 6,5 %, dann 8,5 % bei halber Ausdehnung (21rem).
   Kleiner und kräftiger liest sich eher als Lichtkegel denn als Wolke.

   Sie liegt fest im Fenster und auf z-index -1, also über dem Seitengrund
   und unter allem Inhalt. Dunkle Sektionen und weiße Karten decken sie
   deshalb ab, ihr eigenes Licht bleibt für sich.

   Sichtbar nur, wenn licht.js läuft — ohne Maus stünde sonst dauerhaft ein
   blasser Fleck in der Mitte. */
.raum { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity var(--e-ruhig);
  background: radial-gradient(21rem 15rem at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--c-marine) 8.5%, transparent) 0%,
    color-mix(in srgb, var(--c-marine) 3.4%, transparent) 42%,
    transparent 74%); }
html[data-zeiger="fein"] .raum { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .raum { display: none; } }


/* ---- Schaltflächen folgen dem Zeiger ----
   Die gefüllte Schaltfläche ist eine dunkle Fläche wie die Bühne, also
   bekommt sie deren Geste: ein warmer Schein unter dem Zeiger. Er liegt
   auf z-index -1, also über der eigenen Füllung und unter der Beschriftung
   — ein Textknoten lässt sich nicht anheben, eine Ebene darunter schon.
   Weiß auf der hellsten Stelle des Scheins erreicht 7,8 und bleibt damit
   klar über den geforderten 4,5. */
.btn:not(.btn-hell) { position: relative; isolation: isolate; overflow: hidden;
  --mx: 50%; --my: 50%; }
.btn:not(.btn-hell)::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(9rem 4rem at var(--mx) var(--my),
    color-mix(in srgb, var(--c-gold) 34%, transparent) 0%,
    color-mix(in srgb, var(--c-gold) 12%, transparent) 45%,
    transparent 75%);
  opacity: 0; transition: opacity var(--e-farbe); }
.btn:not(.btn-hell):hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn:not(.btn-hell)::after { transition: none; }
}


/* ================= Unterseite =================
   Kein wanderndes Logo, kein Goldfaden: beides gehört zur Startseite. */

/* Die Leiste steht hier von Anfang an als Material da. Auf der Startseite
   baut sie sich beim Scrollen auf, weil sie über dem Hero schweben soll —
   über einer dunklen Kopfbühne wäre eine durchscheinende Leiste mit
   marineblauer Schrift unlesbar. */
.unterseite .menu::before { opacity: 1; animation: none; }
.unterseite .menu-marke { opacity: 1; scale: 1; animation: none; }

/* ---- Kopfbühne: dunkel wie der Hero in Variante D ---- */
.kopfbuehne { --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-tresor); color: var(--c-kanzlei);
  padding-block: calc(var(--s-10) + 1rem) var(--s-9); }
.kopfbuehne-inhalt { position: relative; z-index: 2;
  max-width: 68rem; margin-inline: auto; padding-inline: var(--s-5); }
.kopfbuehne .marginalie { color: var(--akzent-dunk); }
.kopfbuehne h1 { font-family: var(--f-display); font-weight: 500;
  font-optical-sizing: auto; text-wrap: balance; margin: 0; max-width: 20ch;
  font-size: var(--t-3xl); letter-spacing: var(--ls-3xl); line-height: var(--lh-3xl); }
@media (min-width: 64em) {
  .kopfbuehne h1 { font-size: var(--t-4xl); letter-spacing: var(--ls-4xl);
    line-height: var(--lh-4xl); }
}
.kopfbuehne .lead { color: color-mix(in srgb, var(--c-kanzlei) 76%, transparent);
  margin-block: var(--s-5) 0; }
/* Haarlinie an der Unterkante, die unter dem Zeiger aufhellt — wie auf der Bühne. */
.kopfbuehne::after { content: ""; position: absolute; z-index: 3;
  inset-inline: 0; inset-block-end: 0; block-size: 1.5px;
  background: linear-gradient(90deg, transparent 0%,
    color-mix(in srgb, var(--c-gold) 30%, transparent) calc(var(--mx) - 22%),
    var(--c-gold) var(--mx),
    color-mix(in srgb, var(--c-gold) 30%, transparent) calc(var(--mx) + 22%),
    transparent 100%); }

.menu a[aria-current="page"] { color: var(--text-primar); font-weight: 700; }
.menu a[aria-current="page"]::after { scale: 1 1; }

/* ================= Team =================
   Das Bild läuft bis an die Kartenkante, die Angaben stehen im Innenabstand
   darunter. Beim Zeigen wächst das Bild im festen Rahmen — die Karte selbst
   bleibt ruhig, es bewegt sich nur, was man ansieht. */
.team { list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; gap: var(--s-5); grid-template-columns: minmax(0,1fr); }
@media (min-width: 40em) { .team { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 60em) {
  .team { grid-template-columns: repeat(3, minmax(0,1fr)); }
  /* Eine einzelne Karte in der letzten Reihe steht mittig statt links. */
  .team > li:last-child:nth-child(3n+1) { grid-column: 2; }
}
.team > li { background: var(--bg-karte); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: 0; overflow: visible; }
.team article { display: flex; flex-direction: column; block-size: 100%; }

/* Gleiche Zeilen für alle Karten einer Reihe: Bild, Name, Rollen, Text und
   Kontakt liegen als Subgrid auf gemeinsamen Spuren. So beginnen Text und
   Kontakt überall auf derselben Höhe, egal wie viele Rollen darüber stehen.
   Abstände nur über Innenabstand und Ränder, nicht über gap — ein gap im
   Subgrid, das vom Eltern-Raster abweicht, verschiebt die Inhalte. */
@supports (grid-template-rows: subgrid) {
  .team { row-gap: 0; }
  .team > li { display: grid; grid-row: span 5; grid-template-rows: subgrid;
    margin-block-end: var(--s-5); }
  .team article { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .team .angaben { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
}

.bildrahmen { aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
  border-block-end: 1px solid var(--c-linie);
  background: var(--bg-seite); }
.bildrahmen picture { display: contents; }
.portraet { inline-size: 100%; block-size: 100%; object-fit: cover;
  object-position: center 18%; display: block;
  transition: scale var(--e-ruhig); }
.team > li:hover .portraet { scale: 1.06; }

/* Ohne Foto: Monogramm auf einem Goldring. Die Fläche bekommt dieselbe
   Korn-Textur wie die dunklen Bereiche der Seite — auf hellem Grund
   multiplizierend statt aufhellend. Damit ist es eine Materialfläche und
   kein leerer Kasten, und der Platz wirkt gefüllt statt fehlend. */
.bildrahmen.ohne-bild { position: relative; display: grid; place-items: center;
  background: var(--bg-seite); }
.bildrahmen.ohne-bild::before { content: ""; position: absolute; inset: 0;
  opacity: 0.3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23k)' opacity='0.32'/></svg>"); }

/* Zwei Ringe: der äußere ist eine Haarlinie, die beim Zeigen aufgeht — dieselbe
   Geste wie das Bild, das im Rahmen wächst. */
.bildrahmen.ohne-bild .monogramm {
  position: relative; z-index: 1;
  inline-size: 6rem; block-size: 6rem; border-radius: 50%;
  border: 1.5px solid var(--c-gold); background: var(--bg-karte);
  font-family: var(--f-display); font-weight: 500; font-optical-sizing: auto;
  font-size: var(--t-2xl); letter-spacing: var(--ls-2xl); line-height: var(--lh-2xl);
  color: var(--akzent-hell); display: grid; place-items: center;
  transition: scale var(--e-ruhig), border-color var(--e-farbe); }
.bildrahmen.ohne-bild .monogramm::after {
  content: ""; position: absolute; inset: -0.6rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-gold) 45%, transparent);
  scale: 0.94; opacity: 0;
  transition: scale var(--e-ruhig), opacity var(--e-ruhig); }
.team > li:hover .bildrahmen.ohne-bild .monogramm {
  scale: 1.04; border-color: var(--akzent-hell); }
.team > li:hover .bildrahmen.ohne-bild .monogramm::after { scale: 1; opacity: 1; }

.angaben { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.team h2 { font-family: var(--f-display); font-weight: 500;
  font-size: var(--t-lg); letter-spacing: var(--ls-lg); line-height: var(--lh-lg);
  margin: 0 0 var(--s-3); }
.rollen { list-style: none; margin: 0 0 var(--s-5); padding: 0;
  font-size: var(--t-sm); letter-spacing: var(--ls-sm); line-height: var(--lh-sm);
  color: var(--text-sekund); }
.rollen li { position: relative; padding-inline-start: var(--s-4);
  margin-block-end: var(--s-1); }
.rollen li::before { content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: 0.6em;
  inline-size: 0.5rem; block-size: 1.5px; background: var(--c-gold); }

/* Vorstellungstext. Statt einer Haarlinie über die volle Breite ein kurzer
   Goldstrich, der beim Zeigen auf die Karte bis an den Rand wächst — dieselbe
   Geste wie die Linien im Menü und an der Kopfbühne. */
.vita { position: relative; margin: 0 0 var(--s-5);
  padding-block-start: var(--s-4);
  font-size: var(--t-sm); letter-spacing: var(--ls-sm); line-height: var(--lh-base);
  color: var(--text-primar); hyphens: auto; }
.vita::before { content: ""; position: absolute; inset-block-start: 0;
  inset-inline-start: 0; inline-size: 100%; block-size: 1.5px;
  background: var(--c-gold); scale: 0.12 1; transform-origin: left center;
  transition: scale var(--e-ruhig); }
.team > li:hover .vita::before { scale: 1 1; }

/* Kontakt sitzt unten — im Subgrid in der gemeinsamen letzten Zeile, ohne
   Subgrid per automatischem Rand. */
.kontakt { display: grid; gap: var(--s-1); align-content: start; margin: auto 0 0;
  padding-block-start: var(--s-3); border-block-start: 1px solid var(--c-linie);
  font-size: var(--t-sm); letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
.kontakt a { color: var(--text-primar); text-decoration-color: var(--c-linie);
  text-underline-offset: 3px; overflow-wrap: anywhere; }
.kontakt a:hover { text-decoration-color: var(--akzent-hell); }
.kontakt .nummer { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .portraet, .bildrahmen.ohne-bild .monogramm,
  .bildrahmen.ohne-bild .monogramm::after { transition: none; }
  .team > li:hover .portraet,
  .team > li:hover .bildrahmen.ohne-bild .monogramm { scale: 1; }
  .vita::before { transition: none; }
}

/* ---- Liste der angekauften Policen im Partnerkasten ---- */
.policen { list-style: none; margin: 0 0 var(--s-4); padding: 0;
  font-size: var(--t-sm); letter-spacing: var(--ls-sm); line-height: var(--lh-sm);
  color: var(--text-sekund); }
.policen li { position: relative; padding-inline-start: var(--s-4);
  margin-block-end: var(--s-2); }
.policen li::before { content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: 0.6em;
  inline-size: 0.5rem; block-size: 1.5px; background: var(--c-gold); }

/* Der Hinweisblock kommt auch ausserhalb des Rechners vor. */
.hinweisblock { margin-block-start: var(--s-6); background: var(--bg-seite);
  border-inline-start: 3px solid var(--c-marine); padding: var(--s-5);
  max-width: var(--breite-text); }
.hinweisblock ul { margin: 0; padding-inline-start: var(--s-5); }
.hinweisblock li { margin-block-end: var(--s-3); }
.hinweisblock li:last-child { margin-block-end: 0; }

/* ---- Partnerlogo im Fußbereich ----
   Die Hauptfarbe des Logos ist ein dunkles Petrol und auf Tresor praktisch
   unsichtbar. Es steht deshalb auf einer hellen Fläche — eine eingefärbte
   Fassung wäre ein Eingriff in ein fremdes Logo. */
.fussbereich > .fuss-partner { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-4) var(--s-5); margin-block-start: var(--s-6); }
.fuss-partner .absender { font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: var(--ls-xs); line-height: var(--lh-xs);
  color: color-mix(in srgb, var(--c-kanzlei) 66%, transparent); }
.partner-chip { display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-weiss); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  transition: box-shadow var(--e-farbe), translate var(--e-farbe); }
.partner-chip img { inline-size: 7rem; block-size: auto; display: block; }
.partner-chip:hover { translate: 0 -2px;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--c-gold) 22%, transparent); }
.partner-chip:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

/* ---- Partnerlogo im Kasten auf der Lebensversicherungsseite ---- */
/* ---- Partnerleiste unter dem Hero der Startseite ----
   Die Bildmarke der Manufaktur liegt groß und blass dahinter: Die Partner
   stehen sichtbar im Rahmen der Manufaktur, nicht daneben. */
.partnerleiste { position: relative; overflow: hidden; isolation: isolate;
  padding-block: var(--s-8); border-block-end: 1px solid var(--c-linie); }
.partner-marke { position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: 50%; inset-inline-end: -6rem; translate: 0 -50%;
  inline-size: min(52rem, 110vw); block-size: auto; aspect-ratio: 2495 / 1363;
  opacity: 0.07; }
.partnerleiste-inhalt { max-width: 68rem; margin-inline: auto; padding-inline: var(--s-5); }
.partner-logos { list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: grid; gap: var(--s-4); grid-template-columns: minmax(0,1fr); }
@media (min-width: 40em) { .partner-logos { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); } }
.partner-logos li { background: var(--bg-karte); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); }
.partner-logos a { display: grid; place-items: center; block-size: 6rem;
  padding: var(--s-4) var(--s-5); }
@media (min-width: 40em) { .partner-logos a { block-size: 8.5rem; } }
.partner-logos a:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 2px;
  border-radius: var(--r-md); }
.partner-logos img { display: block; inline-size: auto; block-size: auto;
  max-inline-size: min(100%, 13rem); max-block-size: 2.6rem; }
.partner-logos img.hochkant { max-block-size: 5.5rem; }
.partner-lockup.lockup-abstand { margin-block-start: var(--s-6); }

.partner-lockup { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-4) var(--s-5); margin-block-end: var(--s-5);
  padding-block-end: var(--s-4); border-block-end: 1px solid var(--c-linie); }
.partner-lockup img { inline-size: 6rem; block-size: auto; display: block; }
.partner-lockup .absender { font-family: var(--f-mono); font-size: var(--t-sm);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); color: var(--text-sekund);
  margin: 0; padding: 0; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .partner-chip { transition: none; }
  .partner-chip:hover { translate: none; box-shadow: none; }
}