/* sisign — Design-Tokens und Basis (Designvorgabe 12.07.2026, Richtung: Signatur/Bernstein)
   Regel: accent nie als Flächenfarbe hinter Text. Auf Hell für Text immer --accent-text (AA). */

:root {
  --bg: #F4F5F6;
  --surface: #FFFFFF;
  --ink: #16181B;
  --text-2: #575C63;
  --text-3: #8A9097;
  --line: #E2E4E7;
  --accent: #C2751B;
  --accent-text: #A35F0E;
  --ok: #3E7D4E;
  /* dunkle Sektionen (fest, unabhängig vom Modus) */
  --d-bg: #101214;
  --d-surface: #191C1F;
  --d-text: #E8EAEC;
  --d-text-2: #A9AFB7;
  --d-line: #2A2E33;
  --d-accent: #E39A3B;
  --d-ok: #7FB07F;
  /* schwebende Menue-Pillen (Haus-Muster seminar-institut.de).
     Vollstaendig deckend: keine dunkle Ueberschrift scheint durch das Menue (Ali Reza 05.07.). */
  --nav-h: 80px;
  --nav-rand: clamp(14px, 2.2vw, 26px);
  --pill-flaeche: #FFFFFF;
  --pill-linie: rgba(22, 24, 27, .10);
  --pill-schatten: 0 2px 12px rgba(22, 24, 27, .08), 0 8px 28px rgba(22, 24, 27, .10);
  --pill-schatten-hoch: 0 4px 16px rgba(22, 24, 27, .10), 0 12px 36px rgba(22, 24, 27, .12);
}

/* Echter Dunkel-Modus: helle Flächen wechseln auf die Dunkel-Spalte,
   dunkle Sektionen behalten ihre Gestaltung (Vorgabe: kein Invert-Filter). */
html[data-theme="dark"] {
  --bg: #101214;
  --surface: #191C1F;
  --ink: #E8EAEC;
  --text-2: #9AA0A8;
  --text-3: #8A9097;
  --line: #2A2E33;
  --accent: #E39A3B;
  --accent-text: #E39A3B;
  --ok: #7FB07F;
  /* Pillen im Dunkel-Modus: eine Spur heller als die Flaeche darunter, damit sie abheben */
  --pill-flaeche: #22262B;
  --pill-linie: rgba(232, 234, 236, .16);
  --pill-schatten: 0 2px 12px rgba(0, 0, 0, .40), 0 8px 28px rgba(0, 0, 0, .34);
  --pill-schatten-hoch: 0 4px 16px rgba(0, 0, 0, .46), 0 12px 36px rgba(0, 0, 0, .40);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  line-height: 1.65;
}
a { color: var(--ink); }
a:hover { color: var(--accent-text); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}
img { max-width: 100%; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); }
.sec { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }

h1, h2, h3, .serif { font-family: 'Newsreader', serif; font-weight: 500; margin: 0; }
h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; text-wrap: pretty; }
h2 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; }

.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text);
}
.mono { font-family: 'IBM Plex Mono', monospace; font-weight: 400; letter-spacing: .06em; }
.text2 { color: var(--text-2); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot-ok { background: var(--ok); }
.dot-accent { background: var(--accent); }

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--surface);
  padding: 14px 26px; border: none; border-radius: 2px;
  font-family: 'Archivo', sans-serif; font-size: 14.5px; font-weight: 600;
}
html[data-theme="dark"] .btn { background: #E8EAEC; color: #16181B; }
.btn-line {
  display: inline-block; text-decoration: none; color: var(--ink);
  padding: 14px 4px; font-size: 14.5px; font-weight: 600;
  border-bottom: 2px solid var(--accent);
}
.card { border: 1px solid var(--line); background: var(--surface); }
.chip {
  background: var(--bg); border: 1px solid var(--line); border-radius: 99px;
  padding: 8px 14px; font-family: 'Archivo', sans-serif;
  font-size: 12.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}

/* dunkle Marken-Sektionen */
.dark-sec { background: var(--d-bg); color: var(--d-text); }
.dark-sec .kicker { color: var(--d-accent); }
.dark-sec .card, .dark-sec .d-card { border: 1px solid var(--d-line); background: var(--d-surface); }
.dark-sec .text2 { color: var(--d-text-2); }
.dark-sec a { color: var(--d-text); }
.dark-sec a:hover { color: var(--d-accent); }
.dark-sec .btn { background: var(--d-text); color: #16181B; }
.dark-sec .btn-line { color: var(--d-text); border-bottom-color: var(--d-accent); }

/* ===== Navigation: zwei schwebende Pillen (Haus-Muster seminar-institut.de, 13.07.) =====
   Die Leiste selbst ist unsichtbar und schwebt ueber der Buehne. Sichtbar sind nur die
   Logo-Pille links und die Menue-Pille rechts. Die Leiste nimmt keine Klicks an, nur die
   Pillen selbst, damit der Buehnen-Inhalt darunter bedienbar bleibt. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h); background: transparent; pointer-events: none;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 100%; padding: 0 var(--nav-rand);
}
.nav-inner > *, .nav-mobile { pointer-events: auto; }

/* Pille 1: Logo */
.nav-logo {
  display: inline-flex; align-items: center; flex: none;
  text-decoration: none; line-height: 1;
  font-family: 'Newsreader', serif; font-size: 22px; font-weight: 500; color: var(--ink);
  padding: 13px 22px; border-radius: 99px;
  background: var(--pill-flaeche); border: 1px solid var(--pill-linie);
  box-shadow: var(--pill-schatten);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.nav-logo:hover { color: var(--ink); box-shadow: var(--pill-schatten-hoch); border-color: var(--pill-linie); }
.nav-logo span, .logo-dot { color: var(--accent); }

/* Pille 2: Menuepunkte, Status, Modus-Knopf, Gespraechs-Knopf */
.nav-links {
  display: flex; align-items: center; gap: 2px; margin-left: auto;
  padding: 5px 6px 5px 10px; border-radius: 99px;
  background: var(--pill-flaeche); border: 1px solid var(--pill-linie);
  box-shadow: var(--pill-schatten);
  transition: box-shadow .3s ease;
}
.nav-links:hover { box-shadow: var(--pill-schatten-hoch); }
.nav-links a {
  display: inline-flex; align-items: center; white-space: nowrap;
  text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--text-2);
  padding: 7px 12px; border-radius: 99px;
  transition: background .18s ease, color .18s ease;
}
/* Rangfolge in der Pille: aktiver Punkt deutlich dunkler als Hover, sonst verschwindet er
   im Weiss der Pille (Ali Reza 13.07.). Mischung statt fester Farbe -> gilt hell wie dunkel. */
.nav-links a:hover { background: color-mix(in srgb, var(--ink) 7%, var(--pill-flaeche)); color: var(--ink); }
.nav-links a.aktiv { background: color-mix(in srgb, var(--ink) 16%, var(--pill-flaeche)); color: var(--ink); font-weight: 600; }
.nav-links a.aktiv:hover { background: color-mix(in srgb, var(--ink) 21%, var(--pill-flaeche)); }

.nav-trenner { width: 1px; height: 18px; background: var(--line); flex: none; margin: 0 5px; }
.nav-status {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text-2); letter-spacing: .08em;
  padding-right: 4px;
}

/* Modus-Knopf: runder Icon-Knopf, Mond oder Sonne rein ueber CSS (kein Aufblitzen beim Laden) */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; padding: 0;
  background: none; border: none; border-radius: 50%;
  color: var(--text-2); cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.theme-btn:hover { background: color-mix(in srgb, var(--ink) 7%, var(--pill-flaeche)); color: var(--ink); }
.theme-btn svg { display: block; }
.theme-btn .i-sonne { display: none; }
html[data-theme="dark"] .theme-btn .i-mond { display: none; }
html[data-theme="dark"] .theme-btn .i-sonne { display: block; }

/* Gespraechs-Knopf: einziger gefuellter Knopf in der Pille, gleiche Sprache wie .btn.
   Selektor bewusst .nav-links a.nav-cta: sonst schlaegt .nav-links a (hoehere Spezifitaet)
   die Schriftfarbe und es stuende graue Schrift auf fast schwarzer Flaeche. */
.nav-links a.nav-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  text-decoration: none; font-size: 13px; font-weight: 600;
  color: var(--surface); background: var(--ink);
  padding: 8px 15px; border-radius: 99px; margin-left: 5px;
  transition: opacity .18s ease;
}
.nav-links a.nav-cta:hover { color: var(--surface); background: var(--ink); opacity: .86; }

/* Schmaler Desktop: Menue-Pille rueckt zusammen, Status-Zeile tritt ab */
@media (max-width: 1199px) {
  .nav-status, .nav-trenner { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-links a { padding: 7px 9px; font-size: 13px; }
  .nav-links a.nav-cta { padding: 8px 13px; font-size: 12.5px; }
}

/* Burger: eigene runde Pille, Beruehrziel 48px */
.burger {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0; margin-left: auto; flex: none;
  background: var(--pill-flaeche); border: 1px solid var(--pill-linie); border-radius: 50%;
  box-shadow: var(--pill-schatten); cursor: pointer;
}
.burger span { width: 20px; height: 2px; border-radius: 2px; background: var(--ink); display: block; }

/* Mobiles Menue: schwebende Karte unter den Pillen */
.nav-mobile {
  display: none; flex-direction: column;
  position: absolute; top: calc(var(--nav-h) - 6px);
  left: var(--nav-rand); right: var(--nav-rand);
  padding: 8px 16px 16px; border-radius: 22px;
  background: var(--pill-flaeche); border: 1px solid var(--pill-linie);
  box-shadow: var(--pill-schatten-hoch);
  max-height: calc(100dvh - var(--nav-h) - 20px); overflow-y: auto;
}
.nav-mobile a { text-decoration: none; font-size: 16px; font-weight: 500; color: var(--text-2); padding: 14px 2px; border-bottom: 1px solid var(--line); }
.nav-mobile a.aktiv { color: var(--ink); font-weight: 600; }
.theme-btn-mobil {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 12px; padding: 12px 2px;
  background: none; border: none; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 500; color: var(--text-2);
}
.theme-btn-mobil svg { display: block; flex: none; }
.theme-btn-mobil .i-sonne { display: none; }
html[data-theme="dark"] .theme-btn-mobil .i-mond { display: none; }
html[data-theme="dark"] .theme-btn-mobil .i-sonne { display: block; }

@media (max-width: 1023px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-mobile.offen { display: flex; }
}
@media (max-width: 700px) {
  :root { --nav-h: 72px; }
  .nav-logo { font-size: 20px; padding: 12px 18px; }
}

/* Seiten ohne Vollbild-Buehne: die erste Sektion bekommt Luft fuer die schwebenden Pillen.
   !important schlaegt das inline padding-top der Kopf-Sektionen (bewusst, nur hier). */
.nav + header:not(.akt) { padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 52px)) !important; }

/* Assistent */
.as-card { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.as-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.as-head .t { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 10.5px; letter-spacing: .08em; }
.as-status { display: flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-2); }
.as-status .dot { width: 7px; height: 7px; }
.as-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.as-intro { font-family: 'Newsreader', serif; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--text-3); }
.as-cursor { display: inline-block; width: 2px; height: 1em; background: var(--logo-punkt); transform: translateY(2px); margin-left: 1px; }
.as-q { align-self: flex-end; background: var(--bg); border: 1px solid var(--bg); border-radius: 8px 8px 2px 8px; padding: 10px 14px; font-size: 14px; line-height: 1.55; max-width: 88%; }
.as-a { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px 8px 8px 2px; padding: 10px 14px; font-size: 14px; line-height: 1.55; max-width: 88%; }
.as-typing { align-self: flex-start; display: flex; gap: 5px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px 8px 8px 2px; }
.as-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: as-blink 1.2s infinite; }
.as-typing span:nth-child(2) { animation-delay: .2s; }
.as-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes as-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.as-eingabe { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.as-eingabe input { flex: 1; border: none; background: none; font-family: 'Archivo', sans-serif; font-size: 14px; color: var(--ink); padding: 6px 0; }
.as-eingabe input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.as-eingabe button { background: var(--ink); color: var(--surface); border: none; border-radius: 2px; padding: 9px 18px; font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; }
html[data-theme="dark"] .as-eingabe button { background: #E8EAEC; color: #16181B; }
.as-kennzeichen { padding: 10px 18px; background: var(--bg); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--text-2); letter-spacing: .05em; }
.as-aus { padding: 22px 18px; min-height: 120px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }

/* Schalter */
.schalter-pille { width: 56px; height: 30px; border-radius: 15px; background: var(--accent); position: relative; display: inline-block; transition: background .25s; flex: none; }
.schalter-pille .knopf { position: absolute; top: 3px; left: 29px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; display: block; transition: left .25s; }
.schalter-pille.aus { background: #2A2E33; }
.schalter-pille.aus .knopf { left: 3px; }

/* FAQ */
.faq-frage { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; background: none; border: none; padding: 18px 2px; cursor: pointer; font-family: 'Archivo', sans-serif; text-align: left; }
.faq-frage .q { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.faq-frage .icon { font-family: 'Newsreader', serif; font-size: 22px; color: var(--accent-text); flex: none; }
.faq-antwort { display: none; padding: 0 2px 20px; font-size: 14.5px; line-height: 1.7; color: var(--text-2); max-width: 560px; }
.faq-eintrag.offen .faq-antwort { display: block; }

/* Scroll-Reveal (progressive enhancement) */
@keyframes sec-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  [data-reveal] { animation: sec-reveal .55s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 16%; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hr-0 { animation: hero-rise .6s ease both; }
.hr-1 { animation: hero-rise .6s ease .1s both; }
.hr-2 { animation: hero-rise .6s ease .2s both; }
.hr-3 { animation: hero-rise .6s ease .3s both; }
.hr-35 { animation: hero-rise .6s ease .35s both; }
.hr-45 { animation: hero-rise .6s ease .45s both; }
.hr-5 { animation: hero-rise .7s ease .5s both; }
.hr-7 { animation: hero-rise .7s ease .7s both; }
.hr-11 { animation: hero-rise .6s ease 1.1s both; }
.hr-13 { animation: hero-rise .6s ease 1.3s both; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Footer */
.footer { background: var(--d-bg); color: var(--d-text); font-family: 'Archivo', sans-serif; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--d-accent); }
.footer a:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 3px; }

/* ===== Grosse Buehne (v3) ===== */
.stage { padding-top: clamp(88px, 12vw, 176px); padding-bottom: clamp(88px, 12vw, 176px); }
.stage-sm { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.display-xl { font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(40px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.display-l { font-family: 'Newsreader', serif; font-weight: 500; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.08; text-wrap: balance; margin: 0; }
.lead { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.65; color: var(--text-2); }
.zentriert { text-align: center; }
.zentriert .lead { margin-left: auto; margin-right: auto; }

/* Foto-Frame: zeigt gestalteten Grund, echtes Foto legt sich darueber sobald Datei existiert */
.foto-frame { position: relative; overflow: hidden; background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%, color-mix(in srgb, var(--ink) 10%, var(--surface)) 100%); }
.foto-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 28%); }
.foto-frame .frame-hinweis { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; background: var(--surface); border: 1px solid var(--line); padding: 5px 9px; color: var(--text-2); }
.foto-frame.hat-bild .frame-hinweis { display: none; }
.foto-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(18px, 3vw, 34px); background: linear-gradient(transparent, rgba(10,11,12,.62)); color: #FFFFFF; }

/* Daten-Overlay-Pillen im Bild (godaylight-Muster) */
.overlay-pill { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.94); border: 1px solid #E2E4E7; border-radius: 99px; padding: 9px 15px; box-shadow: 0 10px 30px rgba(0,0,0,.22); font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 10px; letter-spacing: .06em; color: #16181B; }

/* Menschen-Galerie */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.galerie .foto-frame { aspect-ratio: 3 / 4; }

/* Buehnen-Sektion dunkel mit Produkt */
.produkt-buehne { background: radial-gradient(ellipse 75% 60% at 50% 24%, #1C2024 0%, #101214 70%); color: #E8EAEC; }

/* Scroll-Reveal auch fuer Buehnen */
@supports (animation-timeline: view()) {
  [data-reveal] { animation: sec-reveal .55s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 16%; }
}

/* ===== Akte: jede Sektion eine Vollbild-Buehne (v4) ===== */
.akt { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
/* Die Nav schwebt (fixed) und nimmt keine Hoehe mehr weg: Akt 1 fuellt den ganzen Viewport.
   Das Freihalten der Pillen macht das padding-top weiter unten, nicht ein Abzug von der Hoehe. */
.akt-voll { min-height: 100svh; }
.akt > .wrap { width: 100%; }
@media (max-height: 640px) { .akt, .akt-voll { min-height: auto; } }

/* Canvas-Ebene hinter Akt-Inhalt */
.akt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.akt > .wrap, .akt > .verlauf-anker { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .akt-canvas { display: none; } }

/* Gestaffelter Auftritt der Inhalte je Akt */
@supports (animation-timeline: view()) {
  .st-1, .st-2, .st-3, .st-4 { animation: sec-reveal .5s ease-out both; animation-timeline: view(); }
  .st-1 { animation-range: entry 0% entry 14%; }
  .st-2 { animation-range: entry 3% entry 18%; }
  .st-3 { animation-range: entry 6% entry 22%; }
  .st-4 { animation-range: entry 9% entry 26%; }
}

/* Verlaufs-Navigation rechts */
.verlauf { position: fixed; right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.verlauf button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--text-3); background: transparent; cursor: pointer; padding: 0; position: relative; transition: background .25s, border-color .25s, transform .25s; }
.verlauf button.aktiv { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
.verlauf button .vl { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .08em; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); padding: 4px 9px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.verlauf button:hover .vl, .verlauf button:focus-visible .vl { opacity: 1; }
.verlauf .verlauf-pfeil { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; margin: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .08); transition: background .2s, color .2s, opacity .25s; }
.verlauf .verlauf-pfeil:hover { background: var(--accent); color: var(--bg); }
.verlauf .verlauf-pfeil[disabled] { opacity: .3; pointer-events: none; }
.verlauf .verlauf-pfeil:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (max-width: 919px) { .verlauf { display: none; } }

/* Nach-oben-Button (alle Seiten, via site.js eingesetzt).
   Gleiche Groesse und Optik wie die Verlaufs-Pfeile; gleicher right-Wert wie .verlauf,
   beide Spalten sind 40px breit, dadurch fluchten die Zentren exakt. */
.nach-oben { position: fixed; right: clamp(10px, 2vw, 26px); bottom: clamp(16px, 2.4vw, 30px); z-index: 45; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .08); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s, background .2s, color .2s; }
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--accent); color: var(--bg); }
.nach-oben:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (max-width: 919px) { .nach-oben { width: 44px; height: 44px; right: 16px; bottom: 16px; } }

/* ===== Licht-Inszenierung: ruhige Verlaeufe statt Gimmicks (v4) ===== */
.glanz { position: relative; overflow: hidden; }
.glanz > * { position: relative; z-index: 2; }
.glanz::before { content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 38% at 22% 18%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 50% 42% at 82% 76%, color-mix(in srgb, var(--ink) 5%, transparent) 0%, transparent 72%);
  animation: glanz-drift 34s ease-in-out infinite alternate; }
@keyframes glanz-drift { from { transform: translate3d(-2.5%, -2%, 0) scale(1); } to { transform: translate3d(2.5%, 2.5%, 0) scale(1.06); } }

.produkt-buehne { position: relative; overflow: hidden; }
.produkt-buehne > * { position: relative; z-index: 2; }
.produkt-buehne::before { content: ""; position: absolute; inset: -25%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 34% at 28% 22%, rgba(227,154,59,.13) 0%, transparent 70%),
    radial-gradient(ellipse 46% 40% at 76% 70%, rgba(227,154,59,.07) 0%, transparent 72%),
    radial-gradient(ellipse 52% 44% at 55% 40%, rgba(138,144,151,.08) 0%, transparent 75%);
  animation: glanz-drift 40s ease-in-out infinite alternate; }

.dark-sec.glanz-dunkel { position: relative; overflow: hidden; }
.dark-sec.glanz-dunkel > * { position: relative; z-index: 2; }
.dark-sec.glanz-dunkel::before { content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 48% 40% at 74% 24%, rgba(227,154,59,.09) 0%, transparent 70%);
  animation: glanz-drift 38s ease-in-out infinite alternate reverse; }

@media (prefers-reduced-motion: reduce) { .glanz::before, .produkt-buehne::before, .dark-sec.glanz-dunkel::before { animation: none; } }

/* Lesefortschritt oben */
.lesefortschritt { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
@supports (animation-timeline: scroll()) {
  .lesefortschritt { animation: lese-f linear both; animation-timeline: scroll(root); }
  @keyframes lese-f { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.akt .stage, .akt .stage-sm { padding-top: clamp(56px, 8vh, 92px); padding-bottom: clamp(56px, 8vh, 92px); }

/* Mobiler Haupt-CTA prominent (rund wie die Pillen) */
.nav-mobile a.cta { background: var(--ink); color: var(--surface); text-align: center; justify-content: center; border-radius: 99px; padding: 14px; margin-top: 12px; font-weight: 600; border-bottom: none; }
.nav-mobile a.cta:hover { color: var(--surface); }
html[data-theme="dark"] .nav-mobile a.cta { background: #E8EAEC; color: #16181B; }

/* Experten-Review 12.07.: Kontrast, Sichtbarkeit, Mobil */
.card { box-shadow: 0 1px 2px rgba(22, 24, 27, .04); }
.dark-sec .text2, .produkt-buehne .lead { color: #A9AFB7; }
.dark-sec .schalter-pille:not(.aus) { background: #E39A3B; }
.verlauf button { background: color-mix(in srgb, var(--text-3) 30%, transparent); }
.verlauf button.aktiv { background: var(--accent); }
@media (max-width: 640px) {
  .galerie .foto-frame { aspect-ratio: 1 / 1; }
  .foto-frame[style*="16/9"] { width: 100%; min-height: 0 !important; max-height: none !important; aspect-ratio: 4 / 5 !important; }
  .overlay-pill { display: none; }
  .cta-stack, .hr-3 { gap: 16px; }
}

/* Logo-Punkt: auffaelliges Signal-Orange (Ali Reza 12.07.) */
:root { --logo-punkt: #F97316; }
.nav-logo span, .logo-punkt { color: var(--logo-punkt); }

/* Foto-Atmen: dauerhaftes, sehr langsames Zoomen (Ali Reza 12.07.) */
@keyframes foto-atmen { from { transform: scale(1); } to { transform: scale(1.07); } }
.foto-frame img { animation: foto-atmen 18s ease-in-out infinite alternate; transform-origin: var(--focal, 50% 28%); will-change: transform; }
.galerie .foto-frame img { animation-duration: 24s; }
@media (prefers-reduced-motion: reduce) { .foto-frame img { animation: none; } }

/* Hero-Zeile 2: auf grossen Schirmen unteilbar, darunter natuerlicher Umbruch */
.display-xl { font-size: clamp(40px, 5.6vw, 68px); }
#hero-wort { white-space: nowrap; }
@media (min-width: 1200px) { .zeile-eins { white-space: nowrap; } }

/* Leitsatz-Buehne: Denkweise gross auf der Buehne */
.leitsatz { display: flex; gap: clamp(18px, 3vw, 44px); align-items: flex-start; padding: clamp(28px, 4.5vw, 56px) 0; border-top: 1px solid var(--line); }
.leitsatz:last-of-type { border-bottom: 1px solid var(--line); }
.ls-nr { font-style: italic; font-size: clamp(22px, 2.6vw, 38px); color: var(--accent-text); flex: none; line-height: 1.1; transform: translateY(.35em); min-width: 1.6em; }
@media (max-width: 640px) { .leitsatz { flex-direction: column; gap: 10px; } .ls-nr { transform: none; } }

/* Geraeteklassen-Feinschliff (Selbstpruefung 13.07.) */
@media (max-width: 700px) {
  .produkt-buehne [style*="grid-template-columns:1.3fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .overlay-pill { font-size: 8.5px; padding: 7px 11px; }
}

/* ============================================================
   BUEHNEN-PASSUNG (13.07., Ali Reza: "perfekte Darstellung von
   oben bis unten in JEDER Sektion, auf JEDEM Geraet")
   Uebernommen aus dem Haus-Muster von seminar-institut.de:
     - 100dvh statt 100vh (Browser-Leisten werden mitgerechnet)
     - Kurzschirm-Query (min-width:1024px) and (max-height:900px)
   Zusatz hier: Typo und Abstaende sind HOEHEN-adaptiv via min(vw, vh),
   damit auf flachen Schirmen (13 Zoll, ~700-780px Viewport) nichts
   angeschnitten wird. Belegt durch Ueberlauf-Messung ueber 8 Viewports.
   ============================================================ */
/* Jede Buehne fuellt den Viewport ganz und haelt oben die Pillen-Zone frei: der Grund laeuft
   bis an die Oberkante durch (border-box), der Inhalt zentriert sich im Rest darunter.
   Gilt fuer ALLE Akte, nicht nur den ersten: die Verlaufs-Pfeile fahren jede Sektion an den
   oberen Rand, und dort schwebt die Nav dauerhaft darueber. */
.akt { min-height: 100svh; min-height: 100dvh; padding-top: var(--nav-h); }
.akt-voll { min-height: 100svh; min-height: 100dvh; }
.akt .stage, .akt .stage-sm { padding-top: clamp(26px, 5vh, 88px); padding-bottom: clamp(26px, 5vh, 88px); }

/* Typo: vh deckelt die Groesse auf flachen Schirmen */
.akt .display-xl { font-size: clamp(30px, min(6.4vw, 8.8vh), 88px); }
.akt .display-l { font-size: clamp(25px, min(4.6vw, 5.4vh), 60px); }
.akt .lead { font-size: clamp(15px, min(1.6vw, 2.05vh), 20px); }

/* Akt 3 · Leitsaetze */
.ls-kicker { margin-bottom: clamp(14px, 3.4vh, 56px); }
.leitsatz { padding: clamp(12px, 2.9vh, 52px) 0; }
.leitsatz .display-xl { font-size: clamp(27px, min(4.8vw, 6.1vh), 72px); }
.leitsatz .lead { margin-top: clamp(5px, 1.1vh, 14px) !important; }
.ls-nr { font-size: clamp(18px, min(2.6vw, 3.2vh), 38px); }

/* Akt 3b · Manifest */
.manifest-text { font-size: clamp(26px, min(4.6vw, 6.6vh), 64px); }
.akt[data-akt="3b"] > .wrap { padding-top: clamp(26px, 5vh, 96px) !important; padding-bottom: clamp(26px, 5vh, 96px) !important; }

/* Akt 4 · Dashboard-Mock skaliert mit der Buehne (zoom rechnet die Hoehe mit, anders als transform) */
.mock-rahmen { max-width: 980px; margin: clamp(18px, 3.4vh, 64px) auto 0; zoom: 1; }
@media (max-height: 900px) { .mock-rahmen { zoom: .86; } }
@media (max-height: 800px) { .mock-rahmen { zoom: .78; } }
@media (max-height: 700px) { .mock-rahmen { zoom: .68; } }

/* Akt 7 · Menschen-Galerie: Bildhoehe fuehrt (Buehne), Breite folgt dem Portraet-
   Verhaeltnis, Gruppe zentriert -> gleiche Abstaende statt Luecken in den Spalten */
.galerie { --bildhoehe: min(46vh, 34vw, 520px); display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2vw, 24px); margin-top: clamp(16px, 3.2vh, 64px); }
.galerie > * { flex: 0 0 calc(var(--bildhoehe) * .75); }
.galerie .foto-frame { aspect-ratio: auto; height: var(--bildhoehe); width: 100%; }
.foto-caption { padding: clamp(12px, 2.4vh, 30px); }

/* Kurzschirm (Haus-Muster): Laptop-Klasse zusaetzlich entlasten */
@media (min-width: 1024px) and (max-height: 900px) {
  .akt .stage, .akt .stage-sm { padding-top: clamp(22px, 3.6vh, 56px); padding-bottom: clamp(22px, 3.6vh, 56px); }
  .galerie { --bildhoehe: min(42vh, 34vw, 520px); }
}

/* Phone: drei Portraets nebeneinander waeren briefmarkengross -> Reihe zum Wischen */
@media (max-width: 700px) {
  .galerie { --bildhoehe: min(46vh, 100vw); justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; }
  .galerie > * { flex: 0 0 min(74%, calc(var(--bildhoehe) * .75)); scroll-snap-align: center; }
}

/* ---- Restliche Ueberlaeufe (gemessen, 13.07.) ---- */
/* Akt 2: Foto-Buehne auf flachen Schirmen (Inline-Werte gezielt ueberschreiben) */
.akt[data-akt="2"] > .wrap { padding-top: clamp(18px, 4vh, 92px) !important; padding-bottom: clamp(18px, 4vh, 92px) !important; }
/* Foto fuellt die Rahmenbreite; die Hoehe folgt der Buehne (cover schneidet, Fokus via --focal).
   Gleiche Falle wie in der Galerie: aspect-ratio + max-height wuerde die BREITE schrumpfen. */
@media (min-width: 641px) {
  .akt[data-akt="2"] .foto-frame { width: 100% !important; height: min(56.25vw, 66vh) !important; aspect-ratio: auto !important; min-height: 0 !important; max-height: none !important; }
}

/* Phone: Buehnen weiter verdichten */
@media (max-width: 700px) {
  .akt .stage, .akt .stage-sm { padding-top: 22px; padding-bottom: 22px; }
  .akt .lead { font-size: 14.5px; line-height: 1.55; }
  .leitsatz { padding: 10px 0; }
  .leitsatz .display-xl { font-size: 24px; }
  .ls-kicker { margin-bottom: 10px; }
  .as-body { min-height: 90px; }

  /* Dashboard-Mock: Kernkarten zeigen, Nebenkarten stehen auf /dashboard */
  .mock-rahmen { zoom: .62; }
  .mock-neben, .mock-zeile-extra { display: none; }
  .mock-grid { padding: 10px !important; gap: 10px !important; }
}

/* ============================================================
   PILLEN-ZONE (13.07.): Die schwebende Nav belegt oben dauerhaft
   ~72-80px. Jede Buehne haelt diese Zone frei (siehe .akt padding-top).
   Auf flachen Schirmen holen die dichten Akte die Hoehe wieder herein.
   Reihenfolge der Hebel: erst die festen Abstaende zwischen den Bloecken
   (die billigsten Pixel), dann Mock-Groesse, dann Fotohoehe.
   Alle Werte gemessen ueber 8 Geraeteklassen, nicht geschaetzt.
   ============================================================ */

/* Flacher Schirm: die Leiste selbst wird schlanker (Pillen bleiben gleich gross) */
@media (max-height: 800px) { :root { --nav-h: 72px; } }

/* Abschluss-Block einer Buehne: fester Inline-Abstand (48-56px) wird hoehen-adaptiv */
.akt > .wrap > .zentriert:last-child { margin-top: clamp(14px, 2.6vh, 56px) !important; }

/* Akt 4: Dashboard-Mock schrumpft weiter mit (zoom rechnet die Hoehe mit) */
@media (max-height: 700px) { .mock-rahmen { zoom: .62; } }
@media (max-height: 660px) { .mock-rahmen { zoom: .56; } }

/* Akt 7: Portraets auf flachen Laptops niedriger (Breite folgt der Hoehe) */
@media (min-width: 1024px) and (max-height: 800px) {
  .galerie { --bildhoehe: min(37vh, 34vw, 520px); }
}

/* Flaches Telefon: Galerie und Beweis-Buehne verdichten */
@media (max-width: 700px) and (max-height: 780px) {
  .galerie { --bildhoehe: min(38vh, 100vw); }
  .akt[data-akt="6"] > .wrap > div { gap: 22px 72px !important; }
  /* Assistenten-Karte ruecken zusammen: Polster und Kennzeichnung, nicht der Inhalt */
  .as-body { min-height: 76px; }
  .as-intro { font-size: 15.5px; line-height: 1.45; }
  .as-head { padding: 10px 14px; }
  .as-chips { padding: 0 14px 10px; }
  .as-eingabe { padding: 10px 14px; }
  .as-kennzeichen { font-size: 9.5px; padding: 8px 14px; line-height: 1.5; }
}

/* ============================================================
   UNTERSEITEN ALS BUEHNEN (13.07., Ali Reza: "jede Sektion fuellt
   immer eine ganze Seite, in Hoehe und Breite" — ab jetzt Standard).
   ALLES hier haengt an body.unterseite: die Startseite ist fertig
   abgestimmt und darf von diesen Regeln nicht getroffen werden.
   (Erster Versuch war ungescopet und hat Akt 3 der Startseite um
   9px ueberlaufen lassen — daher die Abschottung.)
   ============================================================ */

/* Typo: die Unterseiten nutzen h1/h2, die Startseite .display-*.
   Gleiche Regel wie dort: vh deckelt die Groesse auf flachen Schirmen. */
.unterseite .akt h1 { font-size: clamp(26px, min(4vw, 5.2vh), 50px); }
.unterseite .akt h2 { font-size: clamp(20px, min(2.8vw, 3.6vh), 38px); }
.unterseite .akt .stage p, .unterseite .akt .stage-sm p { line-height: 1.6; }

/* Abstaende und Polster folgen der Hoehe */
.unterseite .akt .stage > *, .unterseite .akt .stage-sm > * { margin-top: clamp(10px, 2.2vh, 44px); }
.unterseite .akt .stage > :first-child, .unterseite .akt .stage-sm > :first-child { margin-top: 0; }
.unterseite .akt [style*="grid-template-columns"] { gap: clamp(10px, 1.8vh, 20px) 20px !important; }
.unterseite .akt .card, .unterseite .akt .d-card,
.unterseite .akt [style*="border:1px solid var(--line)"] { padding: clamp(13px, 2.4vh, 26px) !important; }
.unterseite .akt [style*="border-top:1px solid var(--line)"] { padding-top: clamp(8px, 1.8vh, 18px) !important; padding-bottom: clamp(8px, 1.8vh, 18px) !important; }
.unterseite .akt [style*="flex-wrap:wrap"] { gap: clamp(16px, 3vh, 40px) 64px !important; }
.unterseite .akt .as-body { min-height: clamp(70px, 10vh, 120px); }

/* Demo-Flaechen (Dashboard-Oberflaeche, Tour): zoom rechnet die Hoehe mit */
@media (max-height: 820px) { .unterseite .demo-flaeche, .unterseite [data-tour] { zoom: .9; } }
@media (max-height: 720px) { .unterseite .demo-flaeche, .unterseite [data-tour] { zoom: .8; } }
@media (max-height: 660px) { .unterseite .demo-flaeche, .unterseite [data-tour] { zoom: .72; } }

/* ---- Telefon: Karten-Raster wird zur Wisch-Reihe ----
   Haus-Muster von der Startseite (.galerie): drei bis vier gestapelte Karten
   waeren 600-1100px hoch und passten in keine Bildschirmhoehe, ohne die Schrift
   unlesbar zu machen. Gewischt bleibt die Buehne EIN Bildschirm und die Karte lesbar. */
@media (max-width: 700px) {
  .unterseite .akt .stage > [style*="grid-template-columns"],
  .unterseite .akt .stage-sm > [style*="grid-template-columns"],
  .unterseite .akt .stage > [style*="flex-wrap:wrap"][style*="gap:24px"] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    gap: 12px !important;
    padding-bottom: 8px;
    margin-left: -2px; padding-left: 2px;
  }
  .unterseite .akt .stage > [style*="grid-template-columns"] > *,
  .unterseite .akt .stage-sm > [style*="grid-template-columns"] > *,
  .unterseite .akt .stage > [style*="flex-wrap:wrap"][style*="gap:24px"] > * {
    flex: 0 0 84% !important;
    min-width: 0 !important;
    scroll-snap-align: start;
  }
  /* Zwei-Spalten-Bloecke stapeln enger */
  .unterseite .akt [style*="flex-wrap:wrap"] { gap: 16px 24px !important; }
  .unterseite .akt .stage, .unterseite .akt .stage-sm { padding-top: 20px; padding-bottom: 20px; }
  .unterseite .demo-flaeche, .unterseite [data-tour] { zoom: .62; }
}

/* Fotos in Unterseiten-Buehnen: die HOEHE fuehrt, die Breite folgt.
   (aspect-ratio + max-height wuerde die BREITE schrumpfen — dieselbe Falle wie in der
   Galerie der Startseite, dort schon einmal teuer gelernt.) */
.unterseite .akt .foto-frame {
  aspect-ratio: auto !important;
  height: min(40vh, 48vw, 420px) !important;
  width: 100% !important;
  min-height: 0 !important;
}

/* Telefon: straffere Stufe. Text wird dichter, nicht kleiner als lesbar (min 13.5px). */
@media (max-width: 700px) {
  .unterseite .akt .stage, .unterseite .akt .stage-sm { padding-top: 16px; padding-bottom: 16px; }
  .unterseite .akt h1 { font-size: clamp(24px, 6.4vw, 31px) !important; line-height: 1.12; }
  .unterseite .akt h2 { font-size: clamp(19px, 5.4vw, 26px) !important; line-height: 1.18; }
  .unterseite .akt .stage p, .unterseite .akt .stage-sm p { font-size: 13.5px !important; line-height: 1.55 !important; }
  .unterseite .akt .card, .unterseite .akt .d-card,
  .unterseite .akt [style*="border:1px solid var(--line)"] { padding: 14px !important; }
  .unterseite .akt [style*="flex-direction:column"] { gap: 8px !important; }
  .unterseite .akt .stage > *, .unterseite .akt .stage-sm > * { margin-top: 10px !important; }
  .unterseite .akt .stage > :first-child, .unterseite .akt .stage-sm > :first-child { margin-top: 0 !important; }
  .unterseite .akt .foto-frame { height: min(30vh, 60vw, 300px) !important; }
  /* Knopf-Reihen stapeln kompakt statt auseinanderzulaufen */
  .unterseite .akt .btn, .unterseite .akt .btn-line { padding-top: 11px; padding-bottom: 11px; font-size: 13.5px; }
}

/* Flacher Laptop: Foto-Raster niedriger, sonst sprengt es die Buehne */
@media (min-width: 1024px) and (max-height: 800px) {
  .unterseite .akt .foto-frame { height: min(34vh, 30vw, 380px) !important; }
}

/* /kontakt: die drei Wege standen als 2+1 in Spalten -> der Stapel war der Hoehentreiber.
   display:contents loest den Spalten-Behaelter auf: drei gleichwertige Karten nebeneinander,
   auf dem Telefon drei gleichwertige Wisch-Karten. Struktur statt Schrumpfen. */
/* NUR die erste Spalte aufloesen (die zwei gestapelten Karten). Die zweite Spalte
   traegt Weg 3 mit dem Assistenten und muss eine Spalte BLEIBEN — sie ebenfalls
   aufzuloesen hat das Layout zerlegt und die Buehne hoeher gemacht, nicht niedriger.
   !important ist Pflicht: der Behaelter traegt display:flex als INLINE-Stil. */
.wege > :first-child { display: contents !important; }
@media (min-width: 900px) {
  .wege { flex-wrap: nowrap !important; }
  .wege > .card { min-width: 0 !important; }
}

/* Telefon: Knopf-Reihen und Regel-Kaesten enger */
@media (max-width: 700px) {
  .unterseite .akt [style*="gap:14px"] { gap: 10px !important; }
  .unterseite .akt [style*="gap:12px"] { gap: 8px !important; }
}

/* dashboard: Zeitleiste auf flachen Schirmen dichter */
@media (max-height: 800px) {
  .unterseite .akt[data-akt="5"] [style*="display:flex"][style*="gap"] { gap: clamp(6px, 1.2vh, 14px) !important; }
  .unterseite .akt[data-akt="5"] .mono { font-size: 9.5px !important; }
}
@media (max-width: 700px) {
  .unterseite .akt[data-akt="5"] .stage > div { margin-top: 8px !important; }
  .unterseite .akt[data-akt="5"] p { font-size: 12.5px !important; line-height: 1.45 !important; }
}
/* digitaler-auftritt Preis-Logik: Regel-Kaesten und Knopf-Reihe auf dem Telefon dichter */
@media (max-width: 700px) {
  .unterseite .akt[data-akt="6"] [style*="border:1px solid var(--line)"] { padding: 11px 13px !important; }
  .unterseite .akt[data-akt="6"] [style*="border:1px solid var(--line)"] span { font-size: 13px !important; line-height: 1.45 !important; }
  .unterseite .akt[data-akt="6"] .btn, .unterseite .akt[data-akt="6"] .btn-line { padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* Zeitleisten-Eintraege (dashboard): festes Fusspolster summiert sich ueber 5 Eintraege
   zu ueber 100px. Hoehen-adaptiv, damit die Buehne auf flachen Schirmen passt. */
.unterseite .akt [style*="border-left:2px solid"] { padding-bottom: clamp(7px, 1.7vh, 22px) !important; }
@media (max-width: 700px) {
  .unterseite .akt [style*="border-left:2px solid"] { padding-left: 14px !important; }
  .unterseite .akt .stage > div { margin-top: 9px !important; }
}

/* Letzte Reste (gemessen): Zeitleiste auf flachem Laptop und kleinem Telefon,
   Faehigkeiten-Liste auf kleinem Telefon. */
@media (max-height: 700px) {
  .unterseite .akt [style*="border-left:2px solid"] { padding-bottom: 6px !important; }
  .unterseite .akt[data-akt="5"] .stage > div { margin-top: clamp(6px, 1.2vh, 18px) !important; }
  .unterseite .akt[data-akt="5"] p { font-size: 12.5px !important; line-height: 1.42 !important; }
}
@media (max-width: 380px) {
  .unterseite .akt [style*="border-top:1px solid var(--line)"] { padding-top: 7px !important; padding-bottom: 7px !important; }
  .unterseite .akt .stage p { font-size: 13px !important; }
}

/* Kleines Telefon (360x740): faellt durch beide Raster (breiter als 700px-Hoehe,
   schmaler als Tablet). Eigene Stufe, sonst laeuft die Zeitleiste 14px ueber. */
@media (max-width: 700px) and (max-height: 800px) {
  .unterseite .akt[data-akt="5"] .stage > div { margin-top: 7px !important; }
  .unterseite .akt[data-akt="5"] p { font-size: 12.5px !important; line-height: 1.42 !important; }
  .unterseite .akt[data-akt="5"] [style*="border-left:2px solid"] { padding-bottom: 5px !important; }
}

/* /rechtliches: der Kopf ist eine Buehne wie ueberall, der Rechtstext darunter bleibt ein
   fortlaufendes Dokument. Paragraphen in Bildschirm-Haeppchen zu zwingen waere leserfeindlich
   und rechtlich unklug — hier endet das Buehnen-Prinzip bewusst. */
.unterseite .akt + section:not(.akt) { padding-top: clamp(28px, 5vh, 64px); }