/* L1fe Theme. Gestaltung 1:1 aus dem Website-Designprototyp (shiftid Co-Pilot, Studio Jonas Becker BrandOS):
   Grundwerte aus tokens.css, Regeln aus web.css. Anpassungen an WordPress stehen gesammelt am Ende (Abschnitt 8). */

:root {
  --color-creme: #DFD9C9;
  --color-weiss: #FFFFFF;
  --color-beton: #E6E6E6;
  --color-anthrazit: #2F2D2C;
  --color-orange: #CF603E;
  --color-sand-50: #EFECE4;
  --color-sand-25: #F7F5F1;
  --color-stone: #9A8E7A;
  --satz-zeile-mass: 58;
  --satz-zeichen-em: 0.46;
  --web-field: 8.3333cqw;
  --web-wertkante: 2;
  --web-randspalte-luft: 2;
  --web-tabelle-zeilen: 3;
  --web-third: 2.7778cqw;
  --web-axis: 16.6667cqw;
  --web-end: 8.3333cqw;
  --web-bar-edge: 2.7455cqw;
  --web-u: max(1.5625cqw, 8px);
  --web-type-text: clamp(16px, 1.25cqw, 21px);
  --web-type-lead: clamp(19px, 1.75cqw, 30px);
  --web-type-small: clamp(11px, .8cqw, 13px);
  --web-title-line: 1.15;
  --web-type-cta: 19px;
  --web-type-stoerer: var(--web-type-cta);
  --web-badge: max(11px, .7812cqw);
  --web-badge-inset: max(7px, .5208cqw);
  --web-mobile: 700px;
  --web-end-m: 5.5556cqw;
  --web-title: 2.0;
  --web-title-m: 2.8;
  --web-head: 1.5;
  --web-head-m: 2.2;
  --web-score: 4;
  --web-score-m: 8;
  --web-sec-top: 5;
  --web-sec-bottom: 6;
  --web-hero-bottom: 3;
  --web-logo: 8.3333cqw;
  --web-logo-m: 20.8333cqw;
  --web-logo-foot: 12.5cqw;
  --web-logo-foot-m: 29.1667cqw;
  --web-cut: 17.6327cqw;
  --web-slope: 0.17633;
  --stoerer-rand: 1.5;
  --stoerer-zeilenabstand: 1.1;
  --stoerer-umbruch: 14;
  --font-brand: pacaembu, sans-serif;
  --font-text: 'Hanken Grotesk', sans-serif;
}


/* 1 Grundlagen */
@font-face { font-family: 'Hanken Grotesk'; font-weight: 100 900; font-display: swap; src: url('../fonts/HankenGrotesk-wght.ttf') format('truetype'); }
/* Pacaembu: vertikale Metriken wie die Adobe-Fonts-Ausgabe im Prototyp (Ascent 1240, Descent 295), damit Grundlinien und L1fe Line exakt sitzen */
@font-face { font-family: pacaembu; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Pacaembu-Regular.woff2') format('woff2'); ascent-override: 124%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: pacaembu; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Pacaembu-Bold.woff2') format('woff2'); ascent-override: 124%; descent-override: 29.5%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--color-anthrazit); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font: 400 var(--web-type-text) / 1.5 var(--font-text); font-kerning: normal; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; }

/* 2 Raster und Flächen: 12 Felder über die Seitenbreite; Satzachse Spaltenlinie 2, rechter Satzrand Spaltenlinie 11 */
.wp-site-blocks { container-type: inline-size; overflow-x: clip;
  --end: var(--web-end); --title: var(--web-title); --head: var(--web-head); --score: var(--web-score);
  --logo: var(--web-logo); --logo-foot: var(--web-logo-foot); }
.sec { position: relative; padding: calc(var(--web-u) * var(--web-sec-top)) var(--end) calc(var(--web-u) * var(--web-sec-bottom)) var(--web-axis); }
:root { --rubber: var(--color-anthrazit) url('../img/rubber-impact.jpg') center top / 100vw auto repeat; }   /* ein Maßstab für jede Rubber-Fläche: Kornbreite an der Seitenbreite, nie an der Fläche (JB 10.10.2026) */
.rubber { background: var(--rubber); color: var(--color-weiss); }   /* Schrift auf Rubber immer Weiß */
.sand25 { background: var(--color-sand-25); color: var(--color-anthrazit); }
.wp-site-blocks { --top-h: calc(var(--web-u) * 7); --wertkante: calc(var(--web-field) * var(--web-wertkante)); }   /* Wertkante: zwei Felder hinter der Satzachse; auch die Störer-Form der Kontakttabelle beginnt hier */
.hero { min-height: 72svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--top-h) + var(--web-field) / 2); }   /* der Titel bleibt ein halbes Feld unter dem Kopf, frei vom Logo; im ersten Bildschirm ist die helle Fläche der 10°-Teilung schon zu sehen (JB 01.10.2026) */
.cut { margin-top: calc(var(--web-cut) * -1); padding-top: calc(var(--web-cut) + var(--web-u) * var(--web-sec-top));
  clip-path: polygon(0 var(--web-cut), 100% 0, 100% 100%, 0 100%); }   /* 10°-Teilung: die Fläche schneidet steigend in die vorige */
.sec:has(+ .cut), main:has(+ .cut) .sec:last-child { padding-bottom: calc(var(--web-cut) + var(--web-u) * var(--web-sec-bottom)); }   /* Abstand zur Teilung (regeln.teilung): über jeder Schräge der volle Abschnittsabstand, auch im Einstieg (JB 11.10.2026), auch vor dem Fuß außerhalb von main */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--web-field); align-items: end; }
.split.start { align-items: start; }
.split + .split { margin-top: calc(var(--web-u) * 6); }

/* 3 Schrift: Versalhöhe der Headlines in Balkenkanten (Pacaembu: Versalhöhe 0,76 der Schriftgröße) */
.title { font: 700 calc(var(--web-bar-edge) * var(--title) / .76) / var(--web-title-line) var(--font-brand); letter-spacing: -.02em; max-width: min(11em, var(--web-field) * 7); }   /* bis Spaltenlinie 9: ein Feld Abstand zum Logo (Manual, Headline mit Balken) */
.head { font: 700 calc(var(--web-bar-edge) * var(--head) / .76) / var(--web-title-line) var(--font-brand); letter-spacing: -.015em; max-width: 16em; }
.score { font: 700 calc(var(--web-bar-edge) * var(--score) / .76) / 1 var(--font-brand); letter-spacing: -.03em; }
.sub { font: 700 calc(var(--web-type-lead) * 1.2) / 1.2 var(--font-brand); }
.lead { font: 400 var(--web-type-lead) / 1.35 var(--font-brand); max-width: 26em; margin-top: calc(var(--web-u) * 1.5); }
.lead + .text, .head + .text { margin-top: calc(var(--web-u) * 1.5); }
.label { font: 600 var(--web-type-small) / 1.5 var(--font-text); text-transform: uppercase; letter-spacing: .15em; }
.text { max-width: 34em; }
.small { font-size: var(--web-type-small); line-height: 1.5; }
.text a, .small a { text-decoration-thickness: .08em; text-underline-offset: .2em; }   /* Links im Mengentext unterstrichen (WCAG 1.4.1) */

/* 4 Bausteine */
.cta, .more { display: inline-block; margin-top: calc(var(--web-u) * 3); font: 700 var(--web-type-small) / 1.5 var(--font-text); text-transform: uppercase;
  letter-spacing: .15em; text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .35em; }
.cta { color: var(--color-orange); }   /* Call to Action als Text (Navigation, Nebenaufrufe): Studio Orange, Bold, unterstrichen */
.cta.big { font-size: var(--web-type-cta); }   /* Aufruf neben der L1fe Line: groß, Bold, unterstrichen, kein Kasten (ab 19 px Bold gilt Orange auf Rubber als große Schrift) */
.cta.stoerer { margin-left: calc(var(--stoerer-rand) * -1cap); position: relative; display: inline-flex; align-items: flex-start; justify-content: flex-start; box-sizing: border-box;
  padding: 0 calc(var(--stoerer-rand) * 1cap); background: var(--color-orange); color: var(--color-weiss); text-decoration: none; white-space: nowrap; font-size: var(--web-type-stoerer); }
  /* Störer (Manual, JB 02.10.2026): Parallelogramm mit 10°-Steigung und senkrechten Enden; Länge, Höhe und Form (clip-path) setzt web.js aus Schrift und Luft */
.cta.stoerer > span { display: inline-block; line-height: var(--stoerer-zeilenabstand); transform: skewY(-10deg); }   /* Störer-Schrift senkrecht um 10° verzerrt, Grundlinie steigt wie die Form */
.stoerer-zeile { display: grid; grid-template-columns: var(--wertkante) auto; justify-content: start; align-items: start; margin-top: calc(var(--web-u) * var(--web-tabelle-zeilen)); }   /* vierte Zeile der Kontakttabelle (regeln.stoerer-copy): Copy in der Randspalte, Störer-Form auf der Wertkante, im Takt der Tabellenzeilen */
.stoerer-zeile .cta { margin-top: 0; }
#kontakt .row > .label, .stoerer-zeile > .stoerer-satz { text-align: right; padding-right: calc(var(--web-u) * var(--web-randspalte-luft)); }   /* rechtsbündige Randspalte an der Störerkante (typography: rechtsbündig nur in einer Marginalspalte an einer Bild- oder Störerkante) */
.stoerer-zeile > .stoerer-satz { order: 1; }
.stoerer-zeile > .stoerer-link { order: 2; }
.stoerer-satz { font: 400 var(--web-type-text) / 1.5 var(--font-text); max-inline-size: calc(var(--satz-zeile-mass) * var(--satz-zeichen-em) * 1em); hyphens: manual; text-wrap: pretty; }   /* was nach dem Klick passiert; Grundlinie der letzten Zeile auf der Grundlinie der letzten Störer-Zeile (web.js) */
.more { font-weight: 600; }
/* Aufrufe kommen bei Berührung entgegen: Schritt auf der 10°-Achse nach vorn, Linie wird kräftiger (JB 02.10.2026) */
.cta, .more, .nav a, .foot a { transition: text-decoration-thickness .35s, text-underline-offset .35s; }
/* Bewegung ohne Zucken (JB 03.10.2026): Der Link bleibt als Trefferfläche stehen, nur sein Inhalt (.zug, Störer-Form) bewegt sich. */
.zug { display: inline-block; text-decoration: inherit; text-underline-offset: inherit; }   /* Unterstreichung wandert mit dem Inhalt */
.zug, .cta.stoerer { transition: transform .35s cubic-bezier(.2, .7, .1, 1); }
.cta.big:hover, .cta.big:focus-visible, .more:hover, .more:focus-visible { text-decoration-thickness: .2em; text-underline-offset: .25em; }
.cta.big:hover > .zug, .cta.big:focus-visible > .zug, .more:hover > .zug, .more:focus-visible > .zug { transform: translate(calc(var(--web-u) / 2), calc(var(--web-u) / 2 * var(--web-slope) * -1)) scale(1.04); }
.stoerer-link { display: inline-block; text-decoration: none; transition: transform .9s cubic-bezier(.2, .7, .1, 1) .25s, opacity .5s .25s; }
.sec:not(.seen) .stoerer-link { transform: translate(calc(var(--web-u) * -6), calc(var(--web-u) * 6 * var(--web-slope))); opacity: 0; }   /* Einfahren (JB 11.10.2026): einmal entlang der 10°-Achse von links unten an den Platz, sobald der Abschnitt ins Bild kommt */
@media (prefers-reduced-motion: reduce) { .stoerer-link { transition: none; } .sec:not(.seen) .stoerer-link { transform: none; opacity: 1; } }
.stoerer-link:hover > .cta.stoerer, .stoerer-link:focus-visible > .cta.stoerer, .cta.stoerer.schwebt { transform: translate(calc(var(--web-u) / 2), calc(var(--web-u) / 2 * var(--web-slope) * -1)) scale(1.06); }
.nav a:hover, .nav a:focus-visible, .foot a:hover, .foot a:focus-visible { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .35em; }
.nav a:hover > .zug, .nav a:focus-visible > .zug, .foot a:hover > .zug, .foot a:focus-visible > .zug { transform: translateY(calc(var(--web-u) / -4)); }
.line { position: absolute; left: 0; width: var(--web-field); aspect-ratio: 135.321 / 68.44; background: currentColor;
  clip-path: polygon(100% 0, 100% 65.14%, 0 100%, 0 34.86%); pointer-events: none; }   /* L1fe Line an der Headline: exakte Balkenform vom Seitenrand bis Spaltenlinie 1; Höhe setzt web.js */
.index { display: grid; }
.entry { display: grid; grid-template-columns: 1fr 1fr; gap: var(--web-field); align-items: baseline; padding: calc(var(--web-u) * 1.5) 0; text-decoration: none; }
.entry .head { transition: transform .4s cubic-bezier(.2, .7, .1, 1); }
.entry:hover .head, .entry:focus-visible .head { transform: translate(var(--web-third), calc(var(--web-third) * var(--web-slope) * -1)); }   /* rückt auf der 10°-Achse vor */
.rows { margin-top: calc(var(--web-u) * 4); display: grid; gap: calc(var(--web-u) * var(--web-tabelle-zeilen)); }
.rows.stack { max-width: 50em; }
.rows.stack .row { grid-template-columns: minmax(0, 1fr); gap: calc(var(--web-u) / 2); }
.row { display: grid; grid-template-columns: var(--wertkante) 1fr; column-gap: 0; align-items: baseline; }   /* Label und Wert auf einer Grundlinie, alle Werte und Erklärungen auf einer Kante (regeln.naehe, Tabellen) */
/* Umbruchsystem (regeln.satz, Tokens „satz“): Trennstellen setzt der Build, der Browser trennt nie selbst; er gleicht nur aus */
h1, h2, h3, .title, .head, .sub { hyphens: manual; text-wrap: balance; }   /* Headlines ausgewogen, nie automatisch getrennt */
p, li, .text, .lead { hyphens: manual; text-wrap: pretty; widows: 2; orphans: 2; max-inline-size: calc(var(--satz-zeile-mass) * var(--satz-zeichen-em) * 1em); }   /* Mengentext: keine kurze letzte Zeile, Absätze nie mit einer Zeile umbrochen, Zeilen höchstens --satz-zeile-max Zeichen */
.pic { position: relative; }
.paar { white-space: nowrap; }
.paar.frei { white-space: normal; }   /* passt das gebundene Wortpaar nicht in die Zeile, bricht es um statt abgeschnitten zu werden (JB 02.10.2026) */
.pic > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.pic.bleed { --bild: 1.5; height: calc(100cqw / var(--bild) + var(--web-cut)); margin: calc(var(--web-cut) * -1) 0; z-index: 1; overflow: hidden;
  clip-path: polygon(0 var(--web-cut), 100% 0, 100% calc(100% - var(--web-cut)), 0 100%); }   /* Bild über die ganze Breite folgt der 10°-Teilung (JB 10.10.2026): Kanten oben und unten steigen 10°, sichtbar 3:2 */
.sec:has(+ .pic.bleed) { padding-bottom: calc(var(--web-cut) + var(--web-u) * var(--web-sec-bottom)); }   /* über der schrägen Bildkante der volle Abstand, auch im Einstieg (JB 10.10.2026) */
.pic.bleed + .sec { padding-top: calc(var(--web-cut) + var(--web-u) * var(--web-sec-top)); }   /* unter der schrägen Bildkante: nichts verschwindet unter dem Bild */
.pic.square { aspect-ratio: 1; }
.ai { position: absolute; right: var(--web-badge-inset); bottom: var(--web-badge-inset); height: var(--web-badge); width: auto; opacity: .75; filter: invert(1); }   /* KI-Kennzeichnung wie im Manual */
.cards { margin-top: calc(var(--web-u) * 4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--web-field) var(--web-third); }   /* drei Porträts je Zeile: Namen passen, die Personen sind groß genug */
.card .sub + .small { margin-top: calc(var(--web-u) / 2); }   /* Rolle mit Luft unter den Unterlängen des Namens (JB 11.10.2026), näher am Namen als das Porträt */
.card .portrait { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; margin-bottom: var(--web-u); }   /* Porträt 4:5, Gesicht im oberen Drittel */

/* 5 Kopf und Fuß: Navigation auf der Satzachse, Wortmarke rechts (Datei = Schutzzone, Marke endet auf Spaltenlinie 11) */
.top { position: sticky; z-index: 5; top: 0; height: 0; color: var(--color-weiss); }   /* Kopf bleibt beim Scrollen stehen; Höhe 0, damit er über dem Einstieg liegt */
.top::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--top-h); background: var(--rubber);
  opacity: 0; transition: opacity .3s, height .3s; }
.top.klein::before { opacity: 1; height: var(--top-k); }   /* nach dem Einstieg: schmaler Kopf auf Rubber, Logo kleiner */
.top .nav, .top .head-logo, .top .menu-open { transition: transform .3s; }
.top { --s: .6; --top-k: calc(var(--logo) * var(--logo-hm) * var(--s)); }   /* schmaler Kopf = Logodatei mit Schutzzone, verkleinert: nie enger */
.top.klein .head-logo { transform: translateY(calc(var(--w) * var(--y0) - var(--web-u) * 2)) scale(var(--s)); transform-origin: right top; }   /* Logodatei oben bündig im Kopf */
.top.klein .nav, .top.klein .menu-open { transform: translateY(calc(var(--top-k) / 2 - var(--web-u) * 3)); }   /* mittig im schmalen Kopf */
.nav { position: absolute; left: var(--web-axis); top: calc(var(--web-u) * 2.5); display: flex; gap: calc(var(--web-u) * 1.5); align-items: baseline; }
.nav a { text-decoration: none; }
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .35em; }
.nav .cta { margin-top: 0; }
.logo { display: block; line-height: 0; width: calc(var(--w) * var(--k)); }
.logo svg { width: 100%; height: auto; }
.head-logo { position: absolute; right: calc(var(--web-field) - var(--w) * var(--x1)); top: calc(var(--web-u) * 2 - var(--w) * var(--y0)); }
.foot-logo { margin: calc(var(--w) * var(--y0) * -1) 0 0 calc(var(--w) * var(--x0) * -1); color: currentColor; }   /* Logo in der Schriftfarbe der Fläche */
.foot .cols { margin-left: calc(var(--logo-foot) * var(--claim-x)); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--web-third); }
.foot a { text-decoration: none; display: inline-block; }   /* Trefferfläche = Inhalt, auch an der Unterkante */
.foot .label { margin-bottom: calc(var(--web-u) / 2); }
.menu-open, .menu-close { display: none; background: none; border: 0; color: inherit; cursor: pointer; }
.menu-open svg { display: block; width: calc(var(--web-u) * 3); fill: currentColor; }   /* Burger mobil: drei Flächen in Schriftfarbe */
.menu { position: fixed; inset: 0; z-index: 9; padding: calc(var(--web-u) * 12) var(--end) var(--web-u) var(--web-axis); }
.menu a { display: block; text-decoration: none; margin-bottom: calc(var(--web-u) * 1.5); }
.menu-close { display: block; position: absolute; left: var(--web-axis); top: calc(var(--web-u) * 3.5); }

/* 6 Bewegung entlang der 10°-Achse (Token web-slope): die L1fe Line gleitet auf ihrer eigenen Steigung vom Seitenrand an die Headline,
   ohne ihre Form zu verändern; Text blendet nur ein; ohne Bewegung steht alles */
.line { transform: translate(calc(var(--web-field) * -1), calc(var(--web-field) * var(--web-slope))); transition: transform .9s cubic-bezier(.2, .7, .1, 1); }
.seen .line { transform: none; }
.reveal { opacity: 0; transition: opacity .8s .2s; }
.seen .reveal, .reveal.seen { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .line, .reveal, .entry .head, .cta, .more, .nav a, .foot a, .zug { transition: none; transform: none; opacity: 1; } }

/* 7 Mobil: Werte aus den mobilen Tokens; Raster bleibt, Spalten werden untereinander gestellt */
@media (max-width: 700px) {
  .wp-site-blocks { --end: var(--web-end-m); --title: var(--web-title-m); --head: var(--web-head-m); --score: var(--web-score-m);
    --logo: var(--web-logo-m); --logo-foot: var(--web-logo-foot-m); }
  .nav { display: none; }
  .title { max-width: none; }   /* mobil steht der Titel unter dem Logo, die Zeile reicht bis zum Satzrand */
  .menu-open { display: block; position: absolute; left: var(--web-axis); top: calc(var(--web-u) * 2 + var(--logo) * var(--logo-base) - var(--web-u) * 2.25); }   /* unterer Strich auf der Grundlinie des L im Logo */
  .top.klein .menu-open { transform: translateY(calc(var(--s) * var(--logo) * (var(--logo-y0) + var(--logo-base)) - var(--web-u) * 2 - var(--logo) * var(--logo-base))); }   /* im schmalen Kopf: Grundlinie des verkleinerten Logos */
  .wp-site-blocks { --top-h: calc(var(--web-u) * 13); }   /* mobil: Kopf so hoch wie das Logo mit Luft */
  .split, .row { grid-template-columns: 1fr; }
  .row { gap: calc(var(--web-u) / 2); }
  .pic.bleed { --bild: .8; }   /* mobil sichtbar 4:5 */
  br.ab-tablet { display: none; }   /* gesetzte Zeilenwechsel nach Sinn gelten ab Tablet; am Telefon fließt der Text */
  .entry { grid-template-columns: 1fr; gap: calc(var(--web-u) / 2); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card .sub { font-size: var(--web-type-text); }   /* Namen passen in die halbe Breite */
  .cta-rest { display: none; }   /* mobil nur „Probetraining“: der Aufruf bleibt einzeilig im Satzspiegel */
  .stoerer-zeile { display: grid; grid-template-columns: 1fr; justify-items: start; gap: calc(var(--web-u) * 2); margin-top: calc(var(--web-u) * 5); }   /* mobil: Copy oben, Störer darunter */
  #kontakt .row > .label, .stoerer-zeile > .stoerer-satz { text-align: left; padding-right: 0; }   /* mobil untereinander: ohne Wert daneben keine rechte Kante */
  br.sem { display: none; }   /* semantische Zeilenwechsel im Mengentext: mobil fließt der Text (regeln.satz, satz-semantisch-ab) */
  .foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .cards { grid-template-columns: 1fr; }   /* schmale Telefone: ein Porträt je Zeile, Namen in voller Breite */
}

/* 8 WordPress: Blockmarkup an die Prototyp-Struktur angleichen */
body { margin: 0; }
.wp-site-blocks { padding: 0; }
:where(.wp-site-blocks > *, .is-layout-flow > *, .is-layout-constrained > *) { margin-block: 0; }   /* Abstände kommen nur aus den Regeln oben */
.top { top: var(--wp-admin--admin-bar--height, 0px); --logo-hm: 1.3081; --logo-y0: 0.2851; --logo-base: 0.6251; }   /* Kopf unter der Admin-Leiste */
.foot { --claim-x: 0.1931; }
.top .nav p, .foot .cols p { max-inline-size: none; }
.foot .cols > * { min-width: 0; }
.wp-site-blocks .rows > .row > .text { margin: 0; }
html :where(.wp-block-heading) { margin: 0; }
.menu a.head { color: inherit; }
@media (max-width: 700px) {
  main .lead br, main .text br { display: none; }   /* wie br.sem und br.ab-tablet im Prototyp: mobil fließt der Text */
  .hero { min-height: 0; justify-content: flex-start; }   /* mobil steht der Titel auf jeder Seite an derselben Stelle unter dem Kopf, auch bei kurzem Inhalt */
  /* Fuß mobil: Inhalt in der größten Stufe von --web-type-small (13 px), Spaltenköpfe bleiben klein; Links mit Luft, Trefferfläche ≥ 24 px (WCAG 2.5.8) */
  .foot .cols { row-gap: calc(var(--web-u) * 4); }
  .foot .cols p:not(.label) { font-size: 13px; line-height: 1.5; }
  .foot .cols a { padding-block: calc(var(--web-u) / 2); }
}
/* Flächenwechsel am Fuß: endet die Seite hell (sand25), steht der Fuß auf Rubber, wie im Prototyp (Studio) */
main:has(.wp-block-post-content > .sec.sand25:last-child) + .foot { background: var(--rubber); color: var(--color-weiss); }
.wp-block-image.pic:not(.bleed) { margin: 0; }
/* Bildstil „Ganzes Bild“: Höhe aus dem Seitenverhältnis des Fotos, nichts wird seitlich beschnitten; die 10°-Kanten bleiben */
.pic.bleed.is-style-ganz { height: auto; }
.pic.bleed.is-style-ganz > img { height: auto; }
/* Nach oben: Form der L1fe Line (10°-Steigung, senkrechte Enden), Pfeil um 10° verzerrt wie die Störer-Schrift.
   Fläche wechselt mit dem Grund: auf Rubber und Bild hell (Sand, Pfeil Anthrazit), auf hellen Flächen Anthrazit mit weißem Pfeil.
   Kommt wie der Störer entlang der 10°-Achse herein, Berührung: Schritt nach vorn auf der Achse. */
.nach-oben { --g: max(36px, calc(var(--web-u) * 2)); position: fixed; z-index: 6; right: calc(var(--web-u) * 2); bottom: calc(var(--web-u) * 2);
  width: var(--g); height: calc(var(--g) * 1.17633); display: grid; place-items: center;
  background: var(--color-anthrazit); color: var(--color-weiss); clip-path: polygon(100% 0, 100% 85%, 0 100%, 0 15%);
  transition: transform .9s cubic-bezier(.2, .7, .1, 1), opacity .5s, background-color .3s, color .3s; }
.nach-oben.hell { background: var(--color-sand-25); color: var(--color-anthrazit); }
.nach-oben:not(.da) { opacity: 0; pointer-events: none; transform: translate(calc(var(--web-u) * -3), calc(var(--web-u) * 3 * var(--web-slope))); }
.nach-oben svg { width: 42%; height: auto; transform: skewY(-10deg); overflow: visible; }
.nach-oben:hover, .nach-oben:focus-visible { transform: translate(calc(var(--web-u) / 2), calc(var(--web-u) / 2 * var(--web-slope) * -1)) scale(1.06); transition-duration: .35s; }
.nach-oben:focus-visible { outline-offset: 4px; }
body:has(.menu:not([hidden])) .nach-oben { display: none; }
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: opacity .2s; } .nach-oben:not(.da), .nach-oben:hover, .nach-oben:focus-visible { transform: none; } }
/* Rechtliche Seiten: Mengentext in der Satzbreite */
.recht h2, .recht h3 { font: 700 calc(var(--web-type-lead) * 1.2) / 1.2 var(--font-brand); margin-top: calc(var(--web-u) * 4); hyphens: manual; }
.recht h2:first-child, .recht h3:first-child { margin-top: 0; }
.recht p, .recht ul { margin-top: calc(var(--web-u) * 1.5); }
.recht ul { padding-left: 1.2em; }
.recht a { text-decoration-thickness: .08em; text-underline-offset: .2em; overflow-wrap: anywhere; }