/* ruhragent.de · Seite Runde 2 · Spur Design
   Grundlage: 03_produktion/art-direction/briefing-visuell.md (Raster 1.1, Schrift 1.2, Farbe 1.3, Gegenstaende 1.4).
   Farben nur ueber palette.css. Schatten-Toene per color-mix aus --schiefer (kein eigener Farbwert).
   Mobil zuerst: Handy < 600 · Tablet 600-1023 (Handy-Aufbau, breiter) · Computer ab 1024 (12er-Raster). */

@font-face { font-family: "Zilla Slab"; src: url("../fonts/ZillaSlab-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("../fonts/ZillaSlab-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("../fonts/ZillaSlab-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --rand: 16px;
  --abstand: 16px;                  /* Spaltenabstand */
  --weit: 96px;                     /* vor dem Hoehepunkt und um den grossen Satz (1280: 176) */
  --normal: 64px;                   /* zwischen den uebrigen Abschnitten (1280: 112) */
  --innen: 40px;                    /* innerhalb eines Abschnitts (1280: 64) */
  --kopf-h: 56px;
  --logo-b: 140px;

  --h1: 34px;  --h1-zh: 40px;
  --gross: 32px; --gross-zh: 40px;  /* grosser Satz */
  --h2: 28px;  --h2-zh: 34px;       /* Abschnittsueberschrift / Anlass */
  --lage: 21px; --lage-zh: 30px;
  --etikett: 17px;
  --fliess: 18px; --fliess-zh: 28px;
  --leit: 19px; --leit-zh: 28px;

  --schatten: drop-shadow(2px 3px 3px color-mix(in srgb, var(--schiefer) 12%, transparent))
              drop-shadow(6px 10px 14px color-mix(in srgb, var(--schiefer) 5%, transparent));
}
@media (min-width: 600px) {
  :root { --rand: 32px; --abstand: 24px; }
}
@media (min-width: 1024px) {
  :root {
    --rand: max(48px, calc((100vw - 1120px) / 2));
    --abstand: 32px;
    --weit: 176px; --normal: 112px; --innen: 64px;
    --kopf-h: 72px; --logo-b: 200px;
    --h1: 60px; --h1-zh: 64px;
    --gross: 60px; --gross-zh: 66px;
    --h2: 40px; --h2-zh: 48px;
    --lage: 28px; --lage-zh: 38px;
    --etikett: 18px;
    --fliess: 20px; --fliess-zh: 32px;
    --leit: 22px; --leit-zh: 32px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--schiefer);
  font-family: "Zilla Slab", Rockwell, Georgia, serif;
  font-size: var(--fliess);
  line-height: var(--fliess-zh);
  font-synthesis: none;
  font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
strong, b { font-weight: 600; }
h1, h2 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--rost-tief); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--rost-tief); outline-offset: 3px; }
button { font: inherit; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }
.nummer { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.zeile { display: block; }
.hoerer { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Raster ---------- */
.innen { width: 100%; max-width: calc(1120px + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.raster { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--abstand); }
@media (min-width: 1024px) {
  .raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
.randlos { width: 100%; }

/* ---------- Typografie-Bausteine ---------- */
.etikett {   /* r8 (CMO): normale Schreibweise statt Versalien, ohne Sperrung. Dachzeile bleibt erkennbar ueber Rost, Halbfett und eigene Groesse */
  font-size: var(--etikett); line-height: 24px; font-weight: 600;
  color: var(--rost);
}
h2:not(.etikett) { font-size: var(--h2); line-height: var(--h2-zh); }
.etikett + h2 { margin-top: 16px; }
.fliess { max-width: 34em; }
h2 + .fliess { margin-top: 20px; }
.fliess + .fliess { margin-top: 1em; }
.bildzeile { font-size: 16px; line-height: 24px; color: var(--nebentext); }
.hinweis { font-size: 15px; line-height: 22px; color: var(--nebentext); max-width: 36em; }

/* Knopf und Termin (Briefing 10): ein Knopf, Textlink in eigener Zeile, Hinweis direkt am Link */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 24px; border-radius: 4px;
  background: var(--rost-tief); color: var(--weiss);
  font-size: 20px; line-height: 1; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.knopf .hoerer { color: var(--weiss); }
.knopf:hover span:first-of-type { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.termin { margin-top: 8px; }
.termin a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 18px; line-height: 24px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.termin + .hinweis { margin-top: 0; }

/* Gegenstaende (1.4): liegen auf, Kontaktschatten, Papierkorn */
.liegt { filter: var(--schatten); }
.blatt { position: relative; background: var(--weiss); border: 1px solid var(--linie); overflow: clip; }   /* r8: clip statt hidden, damit A4 nur Mindesthoehe ist und das Blatt bei schmaler Spalte mitwaechst (gez.-Zeile nie abgeschnitten) */
.blatt::after { content: ""; position: absolute; inset: 0; background: url("../img/korn.svg"); opacity: 0.03; pointer-events: none; }
.blind { display: block; height: 7px; margin-top: 10px; border-radius: 1px; background: var(--linie); }
.b45 { width: 45%; } .b55 { width: 55%; } .b60 { width: 60%; } .b70 { width: 70%; } .b75 { width: 75%; }
.b80 { width: 80%; } .b85 { width: 85%; } .b90 { width: 90%; }
/* r8 (Legal 3a): „MUSTER“ quer ueber jedes Musterblatt, unter dem Text, hell, aber als Wort erkennbar.
   Farbe: --rost zu 24 % auf Weiss (Kontrast Schiefer-Text darauf ueber 8 : 1). Groesse folgt der Blattbreite. */
.blatt { container-type: inline-size; }
.wasserzeichen {
  position: absolute; left: 50%; top: 52%; z-index: 0;
  transform: translate(-50%, -50%) rotate(-38deg);
  font-size: 27cqw; line-height: 1; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap;
  color: color-mix(in srgb, var(--rost) 24%, var(--weiss));
  pointer-events: none; user-select: none;
}
.blatt > :not(.wasserzeichen) { position: relative; z-index: 1; }
/* r13 (AD D3, Legal 3a, Psychologie Endphase): on the TB the word crossed four content lines.
   Outline only: still clearly readable as MUSTER, the text lines underneath stay free (fill = paper).
   AD Runde 2 (11.10.): same outline on both sample sheets (TB and Einschaetzung). */
.wasserzeichen {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--rost) 40%, var(--weiss));
  paint-order: stroke;
}
.gez { font-size: 14px; line-height: 20px; font-weight: 500; }   /* Legal 3c: gesetzt, keine Handschrift */

/* Platzhalter (Teil 1, 2.7) */
.platzhalter {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 24px; background: var(--papier); border: 1px dashed var(--nebentext);
  font-size: 16px; line-height: 24px; font-weight: 500; color: var(--nebentext);
}

/* ---------- Kopfzeile ---------- */
.kopf { background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--kopf-h); }
.kopf-logo { display: inline-flex; align-items: center; min-height: 44px; margin-left: calc(var(--logo-b) * -0.0627); }
.kopf-logo img { width: var(--logo-b); height: auto; }
.kopf-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--rost-tief); text-decoration: none; font-size: 18px; font-weight: 600; line-height: 1; }
.kopf-tel .hoerer { color: var(--rost); }
.kopf-tel:hover .nummer { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (min-width: 600px) {
  .kopf { position: sticky; top: 0; z-index: 10; }
  .kopf-tel { font-size: 22px; }
}

/* ---------- 1 · Erster Bildschirm ---------- */
.eb { padding-top: 24px; }
.eb-raster { row-gap: 0; }
.eb-bild { order: -1; position: relative; height: 406px; }
.abzug {
  position: absolute; top: 0; right: 0; width: 272px; padding: 8px;
  background: var(--weiss); transform: rotate(1deg);
}
.abzug img { width: 100%; height: auto; aspect-ratio: 256 / 312; object-fit: cover; object-position: 50% 0; }
.zettel {
  position: absolute; top: 308px; right: 180px; right: min(180px, calc(100% - 162px)); width: 162px; padding: 12px 10px;   /* D2: gedreht höchstens 164 × 100; M3: bei 320 nie links abgeschnitten */
  background: var(--rost-hell); transform: rotate(-1deg);
  font-size: 16px; line-height: 22px; font-weight: 500; color: var(--schiefer);
}
/* Niedrige Handyfenster (z. B. iPhone-Safari 390 × 664): Abzug kleiner, Zettel an seiner unteren linken Ecke,
   damit der Anruf-Knopf ganz im ersten Bildschirm steht. Die Breite folgt der Fensterhoehe:
   Knopf-Unterkante = 81 + Bildhoehe + 304 <= Fensterhoehe - 8 (Text darunter wie bei 390 x 844). */
@media (max-width: 599.98px) and (max-height: 799.98px) {
  .eb-bild { --abzug-b: clamp(160px, calc((100vh - 421px) * 0.8205 + 16px), 272px); height: calc((var(--abzug-b) - 16px) * 1.21875 + 28px); }
  .abzug { width: var(--abzug-b); }
  .zettel { top: auto; bottom: 4px; right: auto; left: max(0px, calc(100% - var(--abzug-b) - 138px)); }
}
@supports (height: 100svh) {
  @media (max-width: 599.98px) and (max-height: 799.98px) {
    .eb-bild { --abzug-b: clamp(160px, calc((100svh - 421px) * 0.8205 + 16px), 272px); }   /* kleine Fensterhoehe, Leisten eingeblendet */
  }
}
.eb-text { padding-top: 12px; }
.dach { font-size: 15px; line-height: 20px; font-weight: 500; }
h1 { margin-top: 12px; font-size: var(--h1); line-height: var(--h1-zh); font-weight: 600; max-width: 10em; }
.leit { margin-top: 12px; font-size: var(--leit); line-height: var(--leit-zh); }
.handeln { margin-top: 16px; }
.eb .knopf { display: flex; width: 100%; }
@media (min-width: 600px) {
  .eb .knopf { display: inline-flex; width: auto; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  /* Tablet: Text links, Abzug rechts (wie am Computer, kleiner) */
  .eb { padding-top: 40px; }
  .eb-raster { grid-template-columns: minmax(0, 1fr) 288px; column-gap: 40px; }
  .eb-text { grid-column: 1; grid-row: 1; padding-top: 0; }
  .eb-bild { grid-column: 2; grid-row: 1; order: 0; height: 470px; }
  .abzug { right: 0; }
  .zettel { top: 312px; right: auto; left: -24px; }
  .eb .hinweis { max-width: calc(100% - 24px); }
}
@media (min-width: 1024px) {
  .eb { padding-top: 24px; }
  .eb-text { grid-column: 1 / span 6; padding-top: 0; }
  .eb-bild { grid-column: 8 / span 5; order: 0; height: 600px; container-type: inline-size; }
  .abzug { top: 20px; right: 0; width: min(432px, 100%); padding: 8px; }   /* R1: 432 × 516, gedreht 40 px unter der Kopfzeile */
  .abzug img { aspect-ratio: 416 / 500; }
  .zettel { top: 510px; top: calc(20px + (min(432px, 100cqw) - 16px) * 500 / 416 + 16px - 26px); right: auto; left: -44px; width: 176px; height: auto; padding: 9px 14px; font-size: 17px; line-height: 23px; }   /* D2: auf der unteren linken Ecke, folgt der Höhe des Abzugs (ab 1024 schmaler als 432) */
  .dach { font-size: 17px; line-height: 22px; }
  h1 { margin-top: 16px; width: calc(100% + 32px); max-width: 576px; }   /* D1: nur die H1 ragt in den Spaltenabstand */
  .leit { margin-top: 24px; }
  .handeln { margin-top: 32px; }
}

/* ---------- Abschnitte allgemein ---------- */
.drueckt { padding-top: var(--normal); }
.buero { padding-top: var(--weit); }
.zwei { padding-top: var(--normal); }
.mitte { padding-block: var(--weit); }
.person { padding-top: 0; }
.gespraech { padding-top: var(--normal); padding-bottom: var(--normal); }

/* ---------- 2 · Wo es drueckt ---------- */
.drueckt-flaeche { background: var(--rost-sehr-hell); padding: 40px 20px; }
.lagen { margin-top: 24px; }
.lagen li {
  position: relative; padding-left: 24px;
  font-size: var(--lage); line-height: var(--lage-zh); font-weight: 500; max-width: 34em; text-wrap: balance;
}
.lagen li + li { margin-top: 20px; }
.lagen li::before { content: ""; position: absolute; left: 0; top: calc(var(--lage-zh) / 2 - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--rost); }
.frage { margin-top: 32px; }
.nummernzeile { margin-top: 8px; }
.nummernzeile a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 20px; font-weight: 600; }
.nummernzeile .hoerer { color: var(--rost); }
@media (min-width: 1024px) {
  .drueckt-flaeche { padding: 64px 72px; }
  .lagen { margin-top: 32px; }
  .lagen li { padding-left: 32px; }
  .lagen li + li { margin-top: 24px; }
  .frage { margin-top: 40px; }
}

/* ---------- 3 · Das mitdenkende Buero ---------- */
.buero-kopf h2 { max-width: 22em; }
.buero-kopf .bildtitel { margin-top: var(--innen); font-size: 20px; line-height: 28px; font-weight: 600; }
.sonnensystem { margin-top: 20px; }
.sonnensystem-buehne { width: 100%; }
/* r11 (M2, technischer Leiter): Die Handy-Fassung gilt bis 1119,98 px. Zwischen 600 und 1119 px steht sie zentriert
   und hoechstens 560 px breit (Beschriftungen dort etwa 20 px), erst ab 1120 px die breite Fassung (16 Einheiten = 14 px). */
@media (min-width: 600px) and (max-width: 1119.98px) {
  .sonnensystem-buehne { max-width: 560px; margin-inline: auto; }
}

.sonnensystem:not([data-bereit]) .sonnensystem-buehne { aspect-ratio: 390 / 749; }   /* nur Platzhalter */
@media (min-width: 1120px) { .sonnensystem:not([data-bereit]) .sonnensystem-buehne { aspect-ratio: 1280 / 760; } }
.sonnensystem-buehne > svg, .sonnensystem-buehne > img, .sonnensystem-buehne picture img { display: block; width: 100%; height: auto; }   /* r10: auch <noscript><picture> (ohne JavaScript) */
.sonnensystem-buehne > .platzhalter { width: 100%; height: 100%; }
.buero-unter { margin-top: 24px; row-gap: 16px; }
/* r10: BUERO-PFLICHT direkt unter dem Bild und vor BUERO-LEGAL, gleiche Schrift, ein gemeinsamer Block mit der Rostlinie */
.kontrollblock { padding-left: 16px; border-left: 2px solid var(--rost); max-width: 32em; }
.pflichtsatz, .kontrollsatz { font-size: var(--fliess); line-height: 1.5; font-weight: 500; }
.pflichtsatz + .kontrollsatz { margin-top: 0.5em; }
/* r10: Zeile „Außerdem“ nur am Handy, direkt unter dem Bild (dort hat nicht jeder Bereich ein Wort) */
.ausserdem { font-size: 16px; line-height: 24px; color: var(--schiefer); }
@media (min-width: 1120px) { .ausserdem { display: none; } }   /* r11 (M2): wie die Fassungsgrenze des Sonnensystems */
/* r10: Legende „Kurz erklärt“, nur die drei von Legal freigegebenen Erklaertexte */
.erklaert summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  color: var(--rost-tief); font-size: 17px; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em;
}
.erklaert summary::-webkit-details-marker { display: none; }
.erklaert summary::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent currentColor; }
.erklaert[open] summary::before { transform: rotate(90deg); }
.erklaert-liste { margin-top: 4px; max-width: 34em; }
.erklaert-liste li { font-size: 17px; line-height: 26px; }
.erklaert-liste li + li { margin-top: 10px; }
.erklaert-liste strong { font-weight: 600; }
.nochmal {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0;
  border: 0; background: none; color: var(--rost-tief); cursor: pointer;
  font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em;
}
.nochmal[hidden] { display: none; }
.nochmal > span { display: none; }   /* ein Knopf, drei Woerter: data-wort setzt ablauf.js */
.nochmal[data-wort="nochmal"] .w-nochmal,
.nochmal[data-wort="ablauf"] .w-ablauf,
.nochmal[data-wort="anhalten"] .w-anhalten,
.nochmal[data-wort="weiter"] .w-weiter { display: inline; }   /* Grafik 11.10.: Sonnensystem-Schleife, „Weiter“ nach „Anhalten“ */
/* r12 (TL M1, WCAG 2.2.2): Knopf „Anhalten“/„Weiter“ im Bild, oben rechts. Er laeuft auf einer Schiene mit (sticky),
   die nur den oberen Teil der Buehne abdeckt (System, nie das Handy). So steht er in jeder Scrollstellung, in der die
   Schleife startet, im Fenster. Lage nach Tintenkarte ueber eine volle Schleife (A und B): oben rechts bleibt leer. */
.sonnensystem { position: relative; }
.sonnensystem-steuer {
  position: absolute; top: 0; left: 0; right: 0; height: 56%; z-index: 2;
  display: flex; justify-content: flex-end; align-items: flex-start; padding-right: 8px;
  pointer-events: none;
}
.sonnensystem-steuer .nochmal {
  position: sticky; top: 8px; margin-top: 8px; padding: 0 10px; pointer-events: auto;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 22px;
}
@media (max-width: 599.98px) {   /* AD 11.10.: paper rim, orbit lines below the button do not look cut off at its edge */
  .sonnensystem-steuer .nochmal { box-shadow: 0 0 0 4px var(--papier); }
}
@media (min-width: 600px) {
  .sonnensystem-steuer .nochmal { top: calc(var(--kopf-h) + 12px); padding: 0 14px; }
}
@media (min-width: 600px) and (max-width: 1119.98px) {
  .sonnensystem-steuer { max-width: 560px; margin-inline: auto; padding-right: 16px; }
}
@media (min-width: 1120px) {
  .sonnensystem-steuer { height: 57%; padding-right: 4%; }   /* rechte Kante wie das Handy, Weg endet ueber dem Handy */
}
/* Reduzierte Bewegung: Schlussbild steht still, „Ablauf ansehen“ ist breiter und stuende im Bild am Wort „Buchhaltung“.
   Deshalb dort direkt unter dem Bild, rechtsbuendig, vor „Außerdem“. Startet der Besucher den Ablauf, bleibt der Knopf dort (kein Sprung). */
@media (prefers-reduced-motion: reduce) {
  .sonnensystem-steuer { position: static; height: auto; }
  .sonnensystem-steuer .nochmal { position: static; margin-top: 8px; }
}
.reduziert .sonnensystem-steuer { position: static; height: auto; }
.sonnensystem[data-ersatz] .sonnensystem-steuer { display: none; }   /* load error: static end frame, nothing moves (Hauptagent 11.10.) */
.reduziert .sonnensystem-steuer .nochmal { position: static; margin-top: 8px; }
@media (min-width: 1024px) {
  .buero-kopf h2 { max-width: 16.5em; }
  .buero-kopf .fliess { max-width: 29em; }
  .buero-kopf .bildtitel { font-size: 24px; line-height: 32px; }
  .sonnensystem { margin-top: 24px; }
  .buero-unter { margin-top: 32px; }
  .ausserdem, .kontrollblock, .erklaert { grid-column: 1 / span 7; }   /* r11: „Außerdem“ steht bis 1119 px auch im 12er-Raster */
  .pflichtsatz, .kontrollsatz { font-size: 20px; line-height: 30px; }
  .buero-bildzeile { grid-column: 10 / span 3; grid-row: 1 / span 2; }
  .erklaert-liste li { font-size: 18px; line-height: 28px; }
}

/* ---------- 4a/4b · Software nach Mass und KI-Seminare ---------- */
.zwei { row-gap: var(--normal); }
.zwei > section { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.zwei .fliess { margin-top: 20px; }
.zwei-bild { margin-top: 32px; }
.fenstertitel { font-size: var(--etikett); line-height: 24px; font-weight: 600; color: var(--rost); }
.kanzlei-fenster { margin-top: 12px; width: 100%; aspect-ratio: 716 / 896; }
.kanzlei-fenster > .platzhalter { width: 100%; height: 100%; }
.kanzlei-fenster video, .kanzlei-fenster img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--linie); }
.kanzlei-fenster video { display: none; }                         /* ohne JavaScript: festes Schlussbild */
html.js .kanzlei-fenster video { display: block; }
html.js .kanzlei-fenster .schlussbild { display: none; }
@media (max-width: 599.98px) {
  .kanzlei-fenster { width: calc(100% + 2 * var(--rand)); margin-inline: calc(-1 * var(--rand)); }   /* randlos: Videoschrift ab 360 px mindestens 13 px */
}
@media (min-width: 600px) { .kanzlei-fenster { max-width: 544px; aspect-ratio: 1088 / 726; } }
.unterzeilen { margin-top: 12px; min-height: 48px; font-size: 17px; line-height: 24px; }   /* immer zwei Zeilen hoch: kein Springen, wenn die Unterzeilen wechseln */
.unterzeilen li { display: none; }
.unterzeilen li:last-child { display: block; }
.unterzeilen.laeuft li { display: none; }
.unterzeilen.laeuft li.jetzt { display: block; }
.stapel { margin-top: 16px; font-size: 20px; line-height: 28px; font-weight: 500; }
.stapel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.zwei-nach { margin-top: 0; }

.tb { width: 100%; max-width: 330px; aspect-ratio: 210 / 297; padding: 24px 24px 20px; display: flex; flex-direction: column;
      font-size: 13px; line-height: 18px; }   /* A4 hoch, 0 Grad; r8: echter Text statt Blindzeilen (Legal 2, Regel 6 und 9) */
.blatt-logo { width: 92px; height: auto; margin-left: -6px; }
.tb .blatt-logo { width: 84px; }
.tb-titel { margin-top: 22px; font-size: 18px; line-height: 24px; font-weight: 600; }
.tb-satz { margin-top: 14px; }
.tb-inhalte-titel { margin-top: 12px; font-weight: 600; }
.tb-inhalte li { margin-top: 2px; padding-left: 0.75em; text-indent: -0.75em; }   /* Strich steht im Text (Legal 2, Kernsatz) */
.luecke { display: inline-block; height: 1px; vertical-align: -2px; background: var(--nebentext); }   /* Datum, Dauer, Ort bleiben leer (keine erfundenen Werte) */
.l-lang { width: 4.5em; } .l-kurz { width: 1.8em; }
.tb-veranstalter { margin-top: 14px; }
.tb .tb-unterschrift { margin-top: auto; font-size: 13px; line-height: 18px; }   /* r10: ohne Unterschriftslinie, wie auf der Einschaetzung */
.b30 { width: 30%; } .b65 { width: 65%; }
.kompetenzsatz { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--rost); max-width: 32em; }

@media (min-width: 1024px) {
  .zwei-bild { margin-top: 40px; }
  .kompetenzsatz { font-size: 20px; line-height: 32px; }
}
@media (min-width: 1024px) and (max-width: 1239.98px) {
  /* D7: Blöcke untereinander, je Block zwei Spalten: Text links (Rest), Bild rechts fest 544 px
     (Kanzlei-Videoschrift 15 px), Abstand 48 px. Etikett und Fenstertitel bzw. Teilnahmebestätigung oben bündig. */
  .zwei > section { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 544px; column-gap: 48px; }
  .kanzlei { grid-template-rows: auto auto auto 1fr auto; }
  .seminar { grid-template-rows: auto auto auto auto 1fr; }
  .zwei > section > .etikett { grid-column: 1; grid-row: 1; }
  .zwei > section > h2 { grid-column: 1; grid-row: 2; font-size: 32px; line-height: 40px; }
  .zwei > section > .fliess { grid-column: 1; grid-row: 3; font-size: 19px; line-height: 30px; }
  .zwei-bild { margin-top: 0; }
  .kanzlei > .zwei-bild { grid-column: 2; grid-row: 1 / 5; }
  .kanzlei > .zwei-nach { grid-column: 2; grid-row: 5; }
  .seminar > .zwei-bild { grid-column: 2; grid-row: 1 / -1; }
  .seminar > .zwei-nach { grid-column: 1; grid-row: 4; }
  .kompetenzsatz { font-size: 19px; line-height: 30px; }
}
@media (min-width: 1240px) {
  /* r13 (AD D1): six rows. The TB spans rows 4-5, so row 4 is only as tall as the Kanzlei window
     and the Kanzlei lines (row 5) sit 12 px under it; the Kompetenzsatz moves to row 6. */
  .zwei { row-gap: 0; grid-template-rows: auto auto auto auto auto auto; }
  .zwei > section { grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .kanzlei > .zwei-bild { grid-row: 4; }
  .kanzlei > .zwei-nach { grid-row: 5; }
  .seminar > .zwei-bild { grid-row: 4 / span 2; }
  .seminar > .zwei-nach { grid-row: 6; }
  .kanzlei { grid-column: 1 / span 6; }
  .seminar { grid-column: 7 / span 6; }
  .tb { margin-top: 36px; }     /* oben buendig mit dem Kanzlei-Fenster (Titel 24 + Abstand 12) */
}

/* ---------- 5 · Der grosse Satz ---------- */
.grosser-satz { font-size: var(--gross); line-height: var(--gross-zh); font-weight: 600; max-width: 22ch; text-wrap: balance; }
.nachsatz { margin-top: 16px; font-size: 22px; line-height: 30px; }
@media (min-width: 1024px) {
  .grosser-satz { max-width: calc(11 * 64px + 10 * 32px); }
  .nachsatz { margin-top: 24px; font-size: 28px; line-height: 36px; }
}

/* ---------- 6 · Wer das macht ---------- */
/* r9 (Art-Director): kein eigenes Foto mehr, das Band S1 ist das Bild des Abschnitts. Ab 1024 zwei Textspalten:
   links Dachzeile, Vertriebssatz, „zuhören“ als groesste Sache; rechts Fliesstext und Werdegang, oben buendig mit „zuhören“. */
.vertrieb { margin-top: 16px; }
.vertrieb-klein { display: block; font-size: var(--fliess); line-height: var(--fliess-zh); }
.vertrieb-gross { display: block; margin-top: 4px; font-size: var(--h2); line-height: var(--h2-zh); font-weight: 500; text-wrap: balance; }
.person-text { margin-top: 24px; }
.fakten { margin-top: 24px; border-bottom: 1px solid var(--linie); }
.fakten li { padding: 12px 0; border-top: 1px solid var(--linie); }
.schreibtisch { margin-top: 48px; }
.schreibtisch.band { margin-top: var(--normal); }   /* r13 (AD D2): stock video stands as its own beat, not as a picture of the CV; back to 48/64 once Babak's own video is in */
.schreibtisch img { width: 100%; height: auto; aspect-ratio: 390 / 290; object-fit: cover; }
.schreibtisch figcaption { margin-top: 12px; }
@media (min-width: 600px) {
  .schreibtisch img { aspect-ratio: 32 / 15; }
}
/* Band video (Nachtrag 11.10.): plays once in view, end frame stays; button in the picture, bottom right (WCAG 2.2.2) */
.band-bild { position: relative; aspect-ratio: 390 / 290; background: var(--linie); }
.band-bild video, .band-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band-bild video { display: none; }                         /* without JavaScript: fixed end frame */
html.js .band-bild video { display: block; }
html.js .band-bild .schlussbild { display: none; }
.band-bild .nochmal {
  position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 0 12px;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 22px;
}
@media (min-width: 600px) {
  .band-bild { aspect-ratio: 32 / 15; }
  .band-bild .nochmal { right: 24px; bottom: 24px; padding: 0 14px; }
}
@media (min-width: 1024px) {
  .person-raster { align-items: start; }
  .person-kopf { grid-column: 1 / span 6; }
  .vertrieb-gross { margin-top: 8px; font-size: 40px; line-height: 48px; }
  .person-text { grid-column: 8 / span 5; margin-top: var(--zuhoeren-oben); }
  .person-text .fliess { margin-top: 0; }
  .schreibtisch { margin-top: 64px; }
  .schreibtisch.band { margin-top: var(--normal); }
  /* Oberkante rechts = Oberkante „zuhören“: Dachzeile 24 + 16 + Vertriebssatz (Zeilenhoehe Fliesstext) + 8 */
  .person-raster { --zuhoeren-oben: calc(24px + 16px + var(--fliess-zh) + 8px); }
}
@media (min-width: 1240px) {
  .vertrieb-gross { font-size: 48px; line-height: 56px; }
}

/* ---------- 7 · Das erste Gespraech ---------- */
.gespraech h2 .zeile { display: block; }
.frage-zeile { margin-top: 20px; font-size: 21px; line-height: 30px; font-weight: 500; max-width: 24em; }
.frage-zeile + .frage-zeile { margin-top: 12px; }
.frage-zeile + .fliess { margin-top: 20px; }
.gespraech-blatt { margin-top: 32px; }
.einschaetzung { width: 100%; max-width: 358px; aspect-ratio: 210 / 297; padding: 22px 22px 20px; }
.muster-kopf { display: flex; justify-content: space-between; align-items: flex-start; }
.muster-kopf .blatt-logo { width: 104px; }
.muster-titel { margin-top: 22px; font-size: 18px; line-height: 24px; font-weight: 600; }
.muster-felder { margin-top: 8px; }
.muster-felder div { display: flex; gap: 10px; padding: 4px 0 2px; border-bottom: 1px solid var(--linie); font-size: 14px; line-height: 20px; }
.muster-felder dt { width: 52px; color: var(--nebentext); }
.muster-teil { margin-top: 16px; font-size: 14px; line-height: 20px; }
.muster-ueber { font-weight: 600; }
.muster-teil p + p { margin-top: 2px; }
.muster-teil .blind { height: 6px; margin-top: 8px; }
.muster-gez { margin-top: 18px; }
.muster-zeile { margin-top: 16px; max-width: 358px; }
.gespraech-schluss { margin-top: 32px; }
/* r8: Name gesetzt statt Unterschrift (Auftrag Abschluss 3). Persoenlich: gross, nah am Schlusssatz, Rostpunkt wie im Logo */
.gruss-name { margin-top: 12px; font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: 0.005em; }
.gruss-name::after { content: ""; display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.1em; border-radius: 50%; background: var(--rost); }
.kontaktblock { margin-top: 64px; padding-top: 24px; border-top: 2px solid var(--rost); max-width: 440px; }
.kontaktblock .knopf { margin-top: 16px; }
@media (max-width: 599.98px) { .kontaktblock .knopf { display: flex; width: 100%; } }
.termin-zeile { margin-top: 24px; }
@media (min-width: 1024px) {
  .gespraech-raster { align-items: start; }
  .gespraech-text, .gespraech-schluss, .kontaktblock { grid-column: 6 / span 7; }   /* 640 px: Leitsatz ein Satz je Zeile */
  .gespraech h2 { font-size: min(40px, 3.4vw); line-height: 1.2; }
  .gespraech-blatt { grid-column: 1 / span 5; grid-row: 1 / span 3; align-self: start; margin-top: 0; }   /* r8: Blatt ueber alle drei Zeilen rechts, so entsteht rechts kein Loch (Reisefoto-Platzhalter entfallen) */
  .einschaetzung { width: 100%; max-width: 400px; padding: 28px 30px 24px; }
  .muster-kopf .blatt-logo { width: 120px; }
  .muster-titel { margin-top: 30px; font-size: 20px; line-height: 26px; }
  .muster-felder { margin-top: 12px; }
  .muster-felder div { font-size: 15px; line-height: 22px; padding: 6px 0 3px; }
  .muster-teil { margin-top: 22px; font-size: 15px; line-height: 22px; }
  .muster-ueber { font-size: 16px; }
  .muster-teil .blind { height: 7px; margin-top: 10px; }
  .muster-gez { margin-top: 26px; font-size: 15px; line-height: 22px; }
  .muster-zeile { max-width: 400px; }
  .gruss-name { font-size: 34px; line-height: 40px; }
  .frage-zeile { font-size: 24px; line-height: 32px; }
  .gespraech-schluss { margin-top: 32px; }
  .kontaktblock { margin-top: 64px; }
}

/* ---------- Fussbereich ---------- */
.fuss { border-top: 1px solid var(--linie); }
.fuss-innen { padding-block: 48px; font-size: 17px; line-height: 1.5; color: var(--nebentext); }
.fuss-links { margin-top: 16px; display: flex; flex-wrap: wrap; column-gap: 32px; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 599.98px) {
  .startseite .fuss-innen { padding-bottom: calc(48px + 64px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }   /* M1, WCAG 2.4.11: Fokus nie unter der Leiste */
}
@media (min-width: 600px) {
  .fuss-innen { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
  .fuss-links { margin-top: 0; }
}

/* ---------- Kontaktleiste (nur Handy) ---------- */
.kontaktleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--papier); border-top: 1px solid var(--linie);
  color: var(--rost-tief); text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms ease;
}
.kontaktleiste.ist-sichtbar { opacity: 1; visibility: visible; }
.kontaktleiste .hoerer { color: var(--rost); width: 24px; height: 24px; }
.kl-zeilen { display: flex; flex-direction: column; }
.kl-wort { font-size: 17px; line-height: 1.2; font-weight: 500; color: var(--schiefer); }
.kontaktleiste .nummer { font-size: 20px; line-height: 1.2; font-weight: 600; }
@media (min-width: 600px) { .kontaktleiste { display: none; } }

/* ---------- Rechtsseiten ---------- */
.recht > .innen { padding-block: 48px 96px; }
.recht-text { max-width: 34em; font-size: 18px; line-height: 1.6; }
.recht-text h1 { margin-top: 24px; font-size: var(--h2); line-height: var(--h2-zh); font-weight: 600; }
.recht-text h1 + * { margin-top: 32px; }
.recht-text h2 { margin-top: 48px; font-size: 24px; line-height: 30px; font-weight: 600; }
.recht-text h2 + * { margin-top: 16px; }
.recht-text p + p, .recht-text ul + p, .recht-text p + ul { margin-top: 1em; }
.recht-text ul { padding-left: 1.25em; list-style: disc; }
.recht-text li + li { margin-top: 0.25em; }
.recht-text .url { overflow-wrap: anywhere; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; }
@media (max-width: 767.98px) {
  .recht-text p, .recht-text li { hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 10 4 4; }
}
@media (min-width: 1024px) { .recht-text { font-size: 19px; } }

/* ---------- Bewegung und Druck ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .kontaktleiste { display: none !important; }
  .kopf { position: static; }
}