/* Finale Landing (www, seit 09.10.2026). ERZEUGT von docs/mockups/assets/landing_relaunch/generator/build_www.py
   aus mockup_override.css (Optik von story.diver-id.net) + www_final.css. */
/* Neue Landing (v8): die echte Landing (sechs Panels, jeder Text, echte Kopfleiste und echtes Menü) in der Sprache der
   Videos: Hero wie www mit überarbeiteten Heldenbildern, Filme darunter, Welt aus Lichtblüten, echte App-Objekte als
   Karten und Loops. Farben und Schrift bleiben Diver ID. */
:root { --world: #F3F6F8; --card: rgba(255, 255, 255, .74); --card-line: rgba(255, 255, 255, .9); --band-glass: rgba(255, 255, 255, .42);
  --dark: #06141B; --dark-2: #0A2530; --teal-vivid: #37C6BE; --accent: #0E7C80; --accent-ink: #FFFFFF;
  --shadow-obj: 0 30px 70px -30px rgba(10, 40, 60, .45), 0 4px 14px -6px rgba(10, 40, 60, .25); --ease-o: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg-page: #081620; --bg: #0C2130; --band: #0A1C28; --surface: #122C3A; --surface-2: #0F2734; --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .13);
  --head: #EAF2F6; --ink: #F2F8FB; --ink2: #D4E0E7; --body: #9BB0BC; --faint: #7C909B; --teal: #37C6BE; --teal-bg: rgba(55, 198, 190, .13); --teal-line: rgba(55, 198, 190, .32);
  --underline: rgba(255, 255, 255, .16); --ok: #5FCEA4; --ok-bg: rgba(95, 206, 164, .13); --ok-line: rgba(95, 206, 164, .30); --shadow: rgba(0, 0, 0, .45); --shadow-2: rgba(0, 0, 0, .55);
  --headbar: rgba(8, 20, 29, .55); --headline: rgba(255, 255, 255, .12); --hover: rgba(255, 255, 255, .07); --border-strong: rgba(255, 255, 255, .22);
  --world: #0A1D26; --card: rgba(14, 38, 50, .74); --card-line: rgba(255, 255, 255, .1); --band-glass: rgba(255, 255, 255, .03); --accent: #37C6BE; --accent-ink: #052022;
  --shadow-obj: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 4px 14px -6px rgba(0, 0, 0, .5); color-scheme: dark; } }
:root[data-theme="dark"] { --world: #0A1D26; --card: rgba(14, 38, 50, .74); --card-line: rgba(255, 255, 255, .1); --band-glass: rgba(255, 255, 255, .03); --accent: #37C6BE; --accent-ink: #052022;
  --shadow-obj: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 4px 14px -6px rgba(0, 0, 0, .5); color-scheme: dark; }

[hidden] { display: none !important; }
body { background: var(--world); overflow-x: clip; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .world i, .hover { animation: none !important; } }
.mk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Reiterband des Mockups (liegt über der Seite, gehört nicht zur Landing) */
.mk-bar { position: relative; z-index: 100; background: var(--dark); color: #F1F5F7; padding: 10px clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; font-size: 15px; line-height: 1.4; }
.mk-bar strong { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #8FD6D1; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #F1F5F7; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; font-size: .88rem; }
.tab[aria-selected="true"] { background: var(--teal-vivid); border-color: var(--teal-vivid); color: #052022; }
.mk-note { font-size: .78rem; color: #A9B7BF; flex-basis: 100%; }
.mk-info { display: none; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06); color: #F1F5F7; border-radius: 999px; padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: .8rem; }
/* Am Handy ist das Reiterband einzeilig; der Hinweistext klappt über „Was ist neu?" auf. */
@media (max-width: 600px) { .mk-bar { padding: 8px 16px; gap: .4rem .6rem; } .mk-bar strong { font-size: .7rem; } .mk-long { display: none; } .tab { padding: 7px 13px; font-size: .82rem; } .mk-info { display: inline-flex; margin-left: auto; } .mk-note { display: none; font-size: .72rem; } .mk-bar.show-note .mk-note { display: block; } }

/* Varianten-Schalter (im Reiterband und direkt am Abschnitt, bewusst im Mockup-Stil) */
.mk-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 300; max-width: min(92vw, 460px); background: var(--dark); color: #F1F5F7; border: 1px dashed rgba(143, 214, 209, .55); border-radius: 12px; padding: 10px 14px; font-size: .86rem; line-height: 1.4; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .5); }
@media (min-width: 1024px) { .mk-toast { bottom: 28px; } }

/* Heute */
.heute { max-width: 1120px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 60px; }
.heute h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--head); margin-bottom: 1rem; }
.today-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.shot-scroll { max-height: 820px; overflow-y: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-obj); }
.finds { display: grid; gap: 12px; }
.find { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.find b.n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E8543E; color: #fff; font-size: .9rem; }
.find h3 { font-size: 1rem; margin-bottom: .2rem; color: var(--head); }
.find p { font-size: .92rem; color: var(--body); }
.find .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.find .pair img { width: 100%; max-height: 300px; object-fit: cover; object-position: top; border-radius: 8px; }
.find .pair small { display: block; margin-top: 4px; font-size: .75rem; color: var(--faint); }
@media (max-width: 760px) { .today-grid { grid-template-columns: 1fr; } .shot-scroll { width: 220px; } }

/* Welt */
.site { position: relative; overflow: clip; }
.world { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.world i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7; }
.world i:nth-child(1) { width: 60vmax; height: 60vmax; left: -20vmax; top: 30vmax; background: radial-gradient(circle, rgba(43, 167, 160, .28), rgba(43, 167, 160, 0) 62%); animation: drift1 28s ease-in-out infinite alternate; }
.world i:nth-child(2) { width: 56vmax; height: 56vmax; right: -22vmax; top: 90vmax; background: radial-gradient(circle, rgba(31, 99, 168, .18), rgba(31, 99, 168, 0) 62%); animation: drift2 34s ease-in-out infinite alternate; }
.world i:nth-child(3) { width: 60vmax; height: 60vmax; left: 20vmax; top: 170vmax; background: radial-gradient(circle, rgba(15, 154, 159, .22), rgba(15, 154, 159, 0) 62%); animation: drift1 31s ease-in-out infinite alternate-reverse; }
.world i:nth-child(4) { width: 56vmax; height: 56vmax; right: -10vmax; top: 260vmax; background: radial-gradient(circle, rgba(43, 167, 160, .2), rgba(43, 167, 160, 0) 62%); animation: drift2 30s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vmax, 5vmax) scale(1.1); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-7vmax, 6vmax) scale(.95); } }

/* Echte Kopfleiste: im Original position:fixed. Im Mockup klebt sie (sticky), weil das Reiterband darüber liegt;
   der Inhalt rückt um ihre Höhe (--mk-head, misst mockup.js) nach oben und liegt wie im Original darunter. */
header { position: sticky; }
main#landingPages { position: relative; z-index: 1; margin-top: calc(-1 * var(--mk-head, 62px) - var(--head-gap, 0px)); }
/* Owner 10.10. (Vorbild offloop.org): „menü punkte sind ohne leiste oben zu sehen" ⇒ keine Leiste, keine Pille: Logo,
   Menü und Anmelden stehen frei über dem Film; über Inhalt trägt ein weicher dunkler Verlauf die Schrift, keine Fläche.
   „Jetzt loslegen" steht nicht mehr oben, sondern schwebt unten (.schwebe). Davor (08.10.–10.10.): Glas-Pille. */
:root { --head-gap: 0px; }
header { top: 0; margin: 0 auto; width: 100%; border: 0; border-radius: 0; overflow: visible; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
:root[data-theme="dark"] header { border: 0; background: transparent; box-shadow: none; }
header::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; opacity: 1; transition: opacity .35s;
  background: linear-gradient(180deg, rgba(4, 12, 17, .9), rgba(4, 12, 17, .58) 60%, rgba(4, 12, 17, 0)); }
header.over-hero::before { opacity: .55; }
header .hctrl > a.cta { display: none; }
header .login { padding: .42em 1.05em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); }
/* Seite immer dunkel (Owner 10.10.: „das ganze im dark mode") ⇒ kein Hell/Dunkel-Schalter */
#themeChip, #mobTheme { display: none !important; }
/* Handy N3 „Ohne Leiste" (Owner-Wahl): keine untere Leiste mehr, die Seiten über das Menü-Symbol oben (Vollbild-Menü
   aus landing.js). Hell/Dunkel steht im Menü, damit die Kopfzeile auf 375 px einzeilig bleibt. */
@media (max-width: 1023px) {
  .botnav.botnav { display: none; }
  header .hchip.burger { display: flex; }
  header #themeChip { display: none; }
  .mobnav { inset: 0; z-index: 85; padding-top: calc(var(--mk-head, 62px) + 2 * var(--head-gap) + 10px); }
}
.botnav { z-index: 95; }

/* Hero: der von www mit den überarbeiteten Heldenbildern (v8, Owner 30.09. abends: „die kommen zurück in den hero").
   Film-Abschnitt direkt darunter („die videos werden auf den seiten weiter unten angeboten"): Der Film ist immer ganz
   zu sehen („nicht im richtigen format, es ist nicht alles zu sehen" ⇒ nie beschneiden), quer 16:9, hochkant 9:16
   (Grenze wie mockup.js), und passt samt Rand in die Fensterhöhe unter der Kopfleiste, am Handy über der unteren Leiste.
   Dahinter ein weichgezeichneter Schein aus dem laufenden Bild (Canvas). Die Pfeile im Hero scrollen genau hierher
   (landing.js: nächstes Element nach dem Hero), scroll-margin hält den Film unter der Kopfleiste. */
.filmsek { --fw: 16; --fh: 9; --mk-botnav: 0px; --vh: 100vh; --pad: clamp(28px, 5vw, 64px);
  --avail: calc(var(--vh) - var(--mk-head, 62px) - var(--mk-botnav) - 2 * var(--pad));
  position: relative; z-index: 1; padding: var(--pad) clamp(16px, 4vw, 40px); scroll-margin-top: var(--mk-head, 62px); }
@supports (height: 100svh) { .filmsek { --vh: 100svh; } }
@media (max-aspect-ratio: 4/5) { .filmsek { --fw: 9; --fh: 16; } }
/* Handy ohne untere Leiste (N3): kein Abzug mehr unten */
.filmsek__box { position: relative; margin: 0 auto; width: min(100%, 1200px, calc(var(--avail) * var(--fw) / var(--fh))); aspect-ratio: var(--fw) / var(--fh); }
.mkfilm__amb { position: absolute; left: -4%; top: 6%; width: 108%; height: 100%; border-radius: 48px; pointer-events: none;
  filter: blur(46px) saturate(1.35); opacity: .6; }
.filmsek__stage { position: relative; width: 100%; height: 100%; border-radius: clamp(14px, 2vw, 24px); overflow: hidden; background: #041A23; box-shadow: var(--shadow-obj); }
.filmsek__stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
.filmsek__stage video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Hero-Film (Owner 08.10.): ersetzt Titel, Knopf und Diashow; nur die Pfeile bleiben. Fassung A „Vollbild-Kino"
   (Owner-Wahl nach Mockup docs/mockups/story_hero_vorschlaege.html): der Film füllt den ersten Bildschirm randlos ab ganz
   oben (Kopfleiste liegt darauf), die nächste Sektion schiebt sich mit runden Ecken ein Stück über den Film, damit man
   sieht, dass es weitergeht. Quer 16:9 / hochkant 9:16 per Beschnitt (cover); Handy exakt im 9:16-Format.
   „.mkheld.mkheld“ schlägt die Hero-Höhen aus landing.css (auch in deren Media-Queries). */
:root { --held-blatt: 28px; }
/* Hero im Dunkeln (Owner 10.10.: „vllt überarbeiten wir nochmal komplett unser video, kein logo, kein text im oberen
   rand … das ganze im dark mode und komplett fullscreen … cta soll auch irgendwo schweben am besten unten"): neuer Film
   heldfilm_d1 (../DiverID-Video/videos/diverid-hero-dunkel). Er füllt den ersten Bildschirm randlos (cover); im Film
   bleiben oben 14 % (Menü) und unten 20 % (Knopf) frei, deshalb darf er oben/unten beschnitten werden (bis etwa 2,4 : 1
   innerhalb der freien Zonen). Keine Pfeile mehr, unten schwebt der Knopf. Davor K1 (Streifen über dem Film, ganzer Film
   eingepasst) und davor „Vollbild-Kino". */
.mkheld.mkheld { --vh: 100vh; min-height: 0; height: var(--vh); padding: 0; background: #04131a; overflow: hidden; }
@supports (height: 100svh) { .mkheld.mkheld { --vh: 100svh; } }
.mkheld.mkheld + * { position: relative; z-index: 2; }
.mkheld.mkheld .hero-scrim, .mkheld.mkheld .sp-scrim, .mkheld.mkheld .hero-ctas, .mkheld.mkheld.subpage-hero p,
.mkheld.mkheld .hero-scroll { display: none; }
.mkheld.mkheld .hero-center .hh, .mkheld.mkheld.subpage-hero h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mkheld.mkheld .hero-center, .mkheld.mkheld.subpage-hero .wrap { position: absolute; inset: 0; z-index: 3; padding: 0; pointer-events: none; max-width: none; }
.heldbox { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #04131a; cursor: pointer; }
.heldbox .heldfilm, .heldposter img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.heldglow { display: none; }
.heldposter { position: absolute; inset: 0; z-index: 1; transition: opacity .4s; pointer-events: none; }
.heldbox.laeuft .heldposter { opacity: 0; }
/* Zeitlinie ganz unten an der Kante, über die volle Breite (der Knopf schwebt darüber) */
.heldzeit { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 16px;
  display: flex; align-items: flex-end; cursor: pointer; touch-action: none; outline: none; }
.heldzeit i { position: relative; display: block; width: 100%; height: 3px; overflow: hidden; background: rgba(255, 255, 255, .2); transition: height .2s; }
.heldzeit:hover i, .heldzeit.ziehen i, .heldzeit:focus-visible i { height: 6px; }
.heldzeit:focus-visible i { box-shadow: 0 0 0 2px #2BA7A0; }
.heldzeit b { position: absolute; inset: 0; background: #2BA7A0; transform: scaleX(0); transform-origin: 0 50%; }

/* „Jetzt kostenlos registrieren" schwebt unten (Owner 10.10.: „einfach nur ‚Jetzt kostenlos registrieren'"). Owner 09.10.:
   „hat kein farbverlauf und das icon sieht blöd aus. mach den so wie die anderen button die wir zb unter für center haben.
   und positioniere ihn nicht ganz unten" ⇒ Aussehen kommt aus .btn.btn-primary (Verlauf Teal → Navy, ohne Symbol), hier nur
   die Lage: etwas über dem Rand, bleibt aber in der unteren freien Zone des Hero-Films (20 % der Höhe). */
.schwebe { position: fixed; z-index: 90; left: 50%; bottom: max(clamp(34px, 8vh, 88px), env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none;
  transition: transform .25s var(--ease-o), box-shadow .25s, opacity .3s; }
.schwebe:hover { transform: translateX(-50%) translateY(-2px); }
.schwebe:focus-visible { outline: 2px solid #7FE3DB; outline-offset: 3px; }
body:has(#mobnav.open) .schwebe, body.film-im-bild .schwebe { opacity: 0; pointer-events: none; }
footer { padding-bottom: 150px; }
@media (max-width: 600px) {
  /* Owner 10.10.: „zu breit" ⇒ nicht mehr randbreit, sondern so breit wie der Text, mittig */
  .schwebe { bottom: max(clamp(28px, 7vh, 64px), env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px);
    white-space: normal; text-align: center; }
  .schwebe:hover { transform: translateX(-50%); }
}

/* Zeitlinie unten im Film über der Kante der nächsten Sektion (Owner: „nur so breit wie das video und unten"):
   abgerundet, halbtransparenter Grund; Klicken oder Ziehen springt, Pfeiltasten ±5 s. Kein Pause-Knopf. */
.heldzeit { position: absolute; z-index: 2; left: max(10px, 2.5%); right: max(10px, 2.5%); bottom: 8px; height: 24px;
  display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.heldzeit i { position: relative; display: block; width: 100%; height: 3px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, .34); box-shadow: 0 0 0 1px rgba(4, 23, 28, .14), 0 1px 8px rgba(0, 0, 0, .24); transition: height .2s; }
.heldzeit:hover i, .heldzeit.ziehen i, .heldzeit:focus-visible i { height: 6px; }
.heldzeit:focus-visible i { box-shadow: 0 0 0 2px #2BA7A0; }
.heldzeit b { position: absolute; inset: 0; border-radius: inherit; background: #2BA7A0; transform: scaleX(0); transform-origin: 0 50%; }

/* Schlanke Leiste unten im Bild (Owner zu v5: „schlanker" + „ins Bild unten legen"): Play/Pause mit Fortschrittsring
   und eine dünne Linie zum Springen; ohne Zeit, Ton nur beim Erklärvideo. Ein leichter Verlauf hält sie auch auf
   hellen Filmen lesbar. */
.mkctl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 26px clamp(10px, 2vw, 16px) 10px; color: #fff; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 16, 22, .5), rgba(4, 16, 22, .18) 55%, rgba(4, 16, 22, 0)); }
.mkctl > * { pointer-events: auto; }
.mkctl__pp { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; background: rgba(6, 20, 27, .42);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; cursor: pointer; color: #fff;
  transition: background .2s, transform .2s var(--ease-o); }
.mkctl__pp:hover { background: rgba(6, 20, 27, .62); }
.mkctl__pp:active { transform: scale(.92); }
.mkctl__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mkctl__ring circle { fill: none; stroke-width: 2.5; }
.mkctl__ring .bg { stroke: rgba(255, 255, 255, .2); }
.mkctl__ring .fg { stroke: var(--teal-vivid); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(55, 198, 190, .7)); }
.mkctl__icon { position: relative; width: 14px; height: 14px; fill: currentColor; }
.mkctl__icon path { transform-origin: 12px 12px; transition: opacity .22s ease, transform .3s var(--ease-o); }
.mkctl[data-state="paused"] .i-pause, .mkctl:not([data-state="paused"]) .i-play { opacity: 0; transform: scale(.5) rotate(-30deg); }
.mkctl__track { position: relative; flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.mkctl__rail { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; transition: height .2s var(--ease-o); }
.mkctl__track:hover .mkctl__rail, .mkctl__track.is-drag .mkctl__rail, .mkctl__track:focus-visible .mkctl__rail { height: 6px; }
.mkctl__track:focus-visible { box-shadow: 0 0 0 2px var(--teal-vivid); border-radius: 6px; }
.mkctl__fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #1F8E88, #37C6BE 60%, #9BE7E1); }
.mkctl__head { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(55, 198, 190, .35), 0 1px 6px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s var(--ease-o); }
.mkctl__track:hover .mkctl__head, .mkctl__track.is-drag .mkctl__head, .mkctl__track:focus-visible .mkctl__head { opacity: 1; transform: none; }
.mkctl__tip { position: absolute; bottom: calc(100% + 2px); left: 0; translate: -50% 0; padding: 3px 8px; border-radius: 7px; background: rgba(6, 20, 27, .88);
  color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.mkctl__track:hover .mkctl__tip, .mkctl__track.is-drag .mkctl__tip { opacity: 1; }

.cta-final .btn { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 0 1.5em; border-radius: 999px; background: var(--teal-vivid); color: #052022; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font-size: 1rem; box-shadow: none; }

/* Panels und Bänder in der Welt */
.lp-band { background: transparent; padding: 72px 0; }
.lp-band.alt { background: var(--band-glass); }
.lp-band.tight { padding: 64px 0; }
.lp-wrap { max-width: 1120px; padding: 0 clamp(16px, 4vw, 40px); }
.lp-h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.vcards { gap: 14px; }
.vcard { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 30px -20px var(--shadow); }
.frows { column-gap: 14px; row-gap: 12px; }
.frow, .lp-band:not(.alt) .frow { border-top: 0; background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 18px 18px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 30px -22px var(--shadow); }
.autopilot { box-shadow: var(--shadow-obj); }
.hover { animation: hover 8s ease-in-out infinite alternate; }
@keyframes hover { from { translate: 0 0; } to { translate: 0 -8px; } }

/* „Was ist Diver ID?": das Erklärvideo (nur hochkant) rechts neben dem Text, mit derselben schlanken Leiste */
.takcol { min-width: 0; }
/* Owner 09.10.: Start zeigt unter dem Hero nur den Plattform-Text (mittig), ohne Karte oder Video daneben */
.lp-intro.nurtext { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; text-align: center; }
.lp-intro.nurtext .founder { justify-content: center; }
/* Erklärvideo (nur hochkant) bei Für Center · Basis-Alltag, Größe gibt .alltag__film vor (unten) */
.wasist { position: relative; margin: 0; width: 100%; height: 100%; border-radius: 26px; overflow: hidden;
  background: #041A23; box-shadow: var(--shadow-obj); }
.wasist::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
.wasist video { display: block; width: 100%; height: 100%; object-fit: contain; }
.takcol .founder { margin-top: 18px; }

/* So funktioniert's: in jedem Schritt eine Schleife (Owner 30.09.) im Format des Check-in-Films (9:16) */
.steploop { position: relative; width: min(100%, 272px); aspect-ratio: 9 / 16; margin: 4px 0 22px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 80% at 30% 20%, #F4F8FA, #E2EBEF 60%, #D6E2E8); box-shadow: var(--shadow-obj); }
.steploop video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Schritt 3: der Feier-Screen schwebt wie die Screens im Check-in-Film als Objekt in derselben hellen Welt */
.steploop--screen { display: grid; place-items: center; }
.steploop--screen video { width: 74%; height: auto; aspect-ratio: 780 / 1688; object-fit: contain; border-radius: 16px; background: #0B2E3C;
  box-shadow: 0 24px 48px -18px rgba(10, 40, 60, .55), 0 4px 12px -4px rgba(10, 40, 60, .3); }
@media (min-width: 901px) { @supports (grid-template-rows: subgrid) {
  .steps { grid-template-rows: auto auto auto 1fr auto; }
  .step { grid-row: span 5; }
} }
@media (max-width: 900px) { .steploop { margin-inline: auto; } }

.blocks { list-style: none; margin: 48px 0 20px; padding: 0; display: flex; }
.blocks li { position: relative; flex: 1; text-align: center; font-size: .78rem; font-weight: 600; color: var(--body); padding-top: 20px; }
.blocks li::before { content: ""; position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid rgba(14, 124, 128, .35); box-sizing: border-box; }
.blocks li::after { content: ""; position: absolute; left: 50%; right: -50%; top: 5px; height: 2px; background: rgba(14, 124, 128, .18); }
.blocks li:last-child::after { display: none; }
.blocks li.done { color: var(--ink); } .blocks li.done::before { background: var(--accent); border-color: var(--accent); } .blocks li.done::after { background: var(--accent); }
.blocks li.act { color: var(--accent); } .blocks li.act::before { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(14, 124, 128, .18); }
@media (max-width: 600px) { .blocks li { font-size: .6rem; } }
.mainadv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (max-width: 820px) { .mainadv { grid-template-columns: 1fr; } }
.cert { margin: 0; width: min(620px, 100%); }
.cert img { width: 100%; border-radius: 10px; box-shadow: var(--shadow-obj); border: 1px solid var(--line); background: #fff; }
.cert figcaption { margin-top: 10px; font-size: .85rem; color: var(--body); }
.safegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (max-width: 820px) { .safegrid { grid-template-columns: 1fr; } }
.actcard { background: var(--card); border: 1px solid var(--card-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.faqsec details { background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.faqsec details:last-of-type { border-bottom: 1px solid var(--card-line); }
.cta-final { background: var(--dark); color: #fff; position: relative; overflow: hidden; border-radius: 20px; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem); text-align: center; }
.cta-final h2 { color: #fff; }
.cta-final .cta-final-sub, .cta-final p { color: rgba(255, 255, 255, .82); }
.cta-final .hero-ctas { justify-content: center; }
footer { position: relative; z-index: 1; background: transparent; border-top-color: var(--line); }

/* Ohne style-Attribute (CSP der Subdomain): Fußzeile über eine Klasse */
.foot-links { margin-top: 8px; }

/* Ton-Knopf (nur beim Erklärvideo, Owner 30.09.: „mach ton aktivierbar bei was ist diver id") */
.mkctl__snd { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; background: rgba(6, 20, 27, .42);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .2s, color .2s, transform .2s var(--ease-o); }
.mkctl__snd:hover { background: rgba(6, 20, 27, .62); }
.mkctl__snd:active { transform: scale(.92); }
.mkctl__snd svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mkctl__snd .s-body { fill: currentColor; stroke: none; }
.mkctl__snd[aria-pressed="true"] { color: var(--teal-vivid); }
.mkctl__snd[aria-pressed="true"] .s-off, .mkctl__snd[aria-pressed="false"] .s-on { display: none; }

/* 404-Seite von story.diver-id.net (sites/landing/public/404.html) */
.notfound { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.notfound__mark { height: 40px; width: auto; }
.notfound h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--head); }
.notfound p { color: var(--body); }

/* ================= Start · „Was ist Diver ID?" baut sich beim Scrollen auf (Owner 09.10.) =================
   Große Bühne, die beim Scrollen stehen bleibt: der Satz deckt sich Wort für Wort auf (--t je Wort), danach kommen Zeit,
   Papier und Unterschrift einzeln herein, die Linie darüber zieht sich auf, zuletzt „Von Tauchlehrern entwickelt".
   mockup.js setzt --p (0 … 1, Fortschritt durch die Sektion) und .aufbau-an; ohne JS oder bei reduzierter Bewegung
   steht alles sofort da (keine Höhe, kein Sticky). */
.wid { position: relative; z-index: 2; }
.wid__buehne { display: grid; align-items: center; padding: clamp(96px, 14vh, 150px) clamp(20px, 5vw, 64px) clamp(56px, 9vh, 96px); }
.wid__in { width: 100%; max-width: 1160px; margin: 0 auto; }
.wid__lead { margin: clamp(18px, 3vh, 30px) 0 0; font-size: clamp(30px, 4.8vw, 76px); hyphens: manual; line-height: 1.04;
  letter-spacing: -.032em; font-weight: 800; color: var(--ink); }
.wid__plus { position: relative; list-style: none; margin: clamp(40px, 7vh, 84px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wid__plus::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.wid__plus li { padding: clamp(18px, 3vh, 28px) clamp(16px, 2vw, 32px) 0 0; }
.wid__plus li + li { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.wid__plus .k { display: block; font-size: clamp(30px, 3.4vw, 54px); line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--teal); }
.wid__plus .t { display: block; margin-top: 10px; font-size: clamp(15px, 1.25vw, 19px); font-weight: 600; color: var(--body); }
.wid .founder { margin-top: clamp(28px, 5vh, 52px); }
@media (max-width: 700px) {
  .wid__plus { grid-template-columns: 1fr; }
  .wid__plus li, .wid__plus li + li { padding: 18px 0 16px; border-left: 0; border-top: 1px solid var(--line); }
  .wid__plus::before { display: none; }
}
/* Owner 10.10.: „das gescrolle um den text aufzubauen dauert … zu lange und man muss zu viel scrollen" ⇒ Bühnen kürzer
   (Start 270 → 150, kurze 210 → 140, Basis-Alltag 270 → 165) und der Aufbau beginnt schon beim Hereinscrollen (mockup.js VORLAUF). */
.wid.aufbau-an { height: 150vh; }
@supports (height: 100svh) { .wid.aufbau-an { height: 150svh; } }
@media (max-width: 700px) { .wid.aufbau-an { height: 140vh; } @supports (height: 100svh) { .wid.aufbau-an { height: 140svh; } } }
.wid.aufbau-an .wid__buehne { position: sticky; top: 0; height: 100vh; }
@supports (height: 100svh) { .wid.aufbau-an .wid__buehne { height: 100svh; } }
.wid.aufbau-an .wid__lead .w { opacity: clamp(.12, calc((var(--p, 0) - var(--t, 0)) * 14 + .12), 1); }
.wid.aufbau-an .wid__plus::before { transform: scaleX(clamp(0, calc((var(--p, 0) - .46) * 6), 1)); }
.wid.aufbau-an .wid__plus li { opacity: clamp(0, calc((var(--p, 0) - var(--t, 0)) * 9), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--p, 0) - var(--t, 0)) * 9), 1)) * 42px)); }
.wid.aufbau-an .founder { opacity: clamp(0, calc((var(--p, 0) - .84) * 9), 1); }

/* ================= Start · „Für Taucher / Für Center" (Owner 09.10.: auf der neutralen, nicht eingefärbten Fläche,
   „ein bisschen schöner vom format her … fürchte dich nicht vor viel platz"): die schlichten Zeilen von www, aber groß;
   laufen beim Hereinscrollen nacheinander ein (mockup.js: .einlauf-an / .sichtbar). */
.lp-band.waehle { background: transparent; padding: clamp(72px, 12vh, 150px) 0 clamp(90px, 15vh, 180px); }
.waehle .choose { max-width: 1160px; margin: 0 auto; }
.waehle .choosecard { gap: clamp(16px, 2.4vw, 36px); padding: clamp(28px, 5vh, 52px) 6px; }
.waehle .choosecard .cv i { width: 12px; height: 12px; }
.waehle .choosecard .tx b { font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.032em; }
.waehle .choosecard .tx span { display: block; margin-top: 10px; font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; }
.waehle .choosecard .arr { width: clamp(46px, 4vw, 60px); height: clamp(46px, 4vw, 60px); border-radius: 50%; border: 1.5px solid var(--line2);
  display: grid; place-items: center; font-size: clamp(24px, 2vw, 30px); line-height: 1; padding-bottom: 3px;
  transition: transform .25s var(--ease-soft), background .25s, color .25s, border-color .25s; }
.waehle .choosecard:hover .arr { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateX(6px); }
.waehle.einlauf-an .choosecard { opacity: 0; transform: translateY(46px); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1), border-color .22s; }
.waehle.einlauf-an.sichtbar .choosecard { opacity: 1; transform: none; }
.waehle.einlauf-an.sichtbar .choosecard:nth-child(2) { transition-delay: .16s; }
@media (max-aspect-ratio: 4/5) { .mkheld .heldzeit { bottom: 6px; } }

/* ================= Unterseiten (Owner 09.10.: „mit diesem Runterscroll-Effekt … auch bei für Center und für Taucher und
   bei FAQ … auch auf den weiteren Unterseiten … pass auch mal die Formatierung … an"): dieselbe Sprache wie Start, viel
   Platz, große Schrift, Linien statt Kästen. Bausteine (build_mockup.py): Bühne .wid--kurz, Basis-Alltag .alltag,
   Kapitel .kap, Raster .raster, Hauptvorteil .haupt mit .reel, Abschluss .schluss; Einlaufen über .lauf (mockup.js). */

/* Kürzere Bühne (Umwelt, Sicherheit, Preis): gleiche Mechanik wie Start, weniger Weg */
.wid--kurz.aufbau-an { height: 140vh; }
@supports (height: 100svh) { .wid--kurz.aufbau-an { height: 140svh; } }
@media (max-width: 700px) { .wid--kurz.aufbau-an { height: 135vh; } @supports (height: 100svh) { .wid--kurz.aufbau-an { height: 135svh; } } }
.wid--kurz .wid__lead { font-size: clamp(36px, 5.4vw, 80px); }
.wid__text { margin: clamp(24px, 4vh, 44px) 0 0; max-width: 640px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6; color: var(--body); }
.wid.aufbau-an .auf { --an: clamp(0, calc((var(--p, 0) - var(--t, 0)) * 9), 1); opacity: var(--an);
  transform: translateY(calc((1 - var(--an)) * 42px)); }
.wid__plus .k.k--head { color: var(--head); }
.wid__plus .k.k--ok { color: var(--ok); }   /* Preis bewusst Ampel-Grün wie auf www (Owner 10.07.) */
/* Umwelt, Sicherheit, Preis (Owner 10.10.: „etwas zu viel space zwischen hero und ersten absatz", auch auf Sicherheit
   und Preis): keine stehende Bühne, sondern ein normaler Absatz, der wie die Kapitel einläuft (.lauf); knapp unter dem Hero. */
.wid--fluss .wid__buehne { padding-top: clamp(56px, 8vh, 96px); padding-bottom: clamp(32px, 6vh, 64px); }
.wid--fluss + .haupt { padding-top: clamp(32px, 5vh, 72px); }
.wid--fluss + .kap { padding-top: clamp(24px, 5vh, 64px); }

/* Für Center · Basis-Alltag: stehende Bühne, Erklärvideo groß rechts, links kommen die drei Punkte nacheinander herein
   (der aktuelle voll, die vorigen treten zurück). Handy: Video zuerst, die Punkte laufen darunter ein. */
.alltag { position: relative; z-index: 2; }
.alltag__buehne { display: grid; align-items: center; padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 64px) clamp(48px, 8vh, 80px); }
.alltag__in { width: 100%; max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kopf film" "pkt film"; column-gap: clamp(40px, 7vw, 120px); }
.alltag__kopf { grid-area: kopf; align-self: end; }
.alltag__kopf .eyebrow { margin-bottom: clamp(16px, 3vh, 28px); }
.alltag__film { grid-area: film; position: relative; align-self: center; height: min(76vh, 780px); aspect-ratio: 9 / 16; }
@supports (height: 100svh) { .alltag__film { height: min(76svh, 780px); } }
.alltag__film .mkfilm__amb { left: -14%; top: 5%; width: 128%; height: 96%; }
.alltag__pkt { grid-area: pkt; align-self: start; list-style: none; margin: 0; padding: 0; }
.alltag__pkt li { padding: clamp(18px, 3vh, 30px) 0; border-top: 1px solid var(--line); }
.alltag__pkt li:last-child { border-bottom: 1px solid var(--line); }
.alltag__pkt .k { margin: 0; font-size: clamp(26px, 2.9vw, 46px); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; color: var(--ink); }
.alltag__pkt p { margin: 10px 0 0; max-width: 34em; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--body); }
.alltag__pkt p b { color: var(--ink); }
@media (min-width: 901px) {
  .alltag.aufbau-an { height: 165vh; }
  @supports (height: 100svh) { .alltag.aufbau-an { height: 165svh; } }
  .alltag.aufbau-an .alltag__buehne { position: sticky; top: 0; height: 100vh; }
  @supports (height: 100svh) { .alltag.aufbau-an .alltag__buehne { height: 100svh; } }
  .alltag.aufbau-an .auf { --an: clamp(0, calc((var(--p, 0) - var(--t, 0)) * 8), 1); --ab: clamp(0, calc((var(--p, 0) - var(--t2, 9)) * 8), 1);
    opacity: calc(var(--an) - var(--ab) * .62); transform: translateY(calc((1 - var(--an)) * 36px)); }
}
@media (max-width: 900px) {
  .alltag__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "film" "pkt"; }
  .alltag__buehne { padding-top: clamp(64px, 10vh, 96px); }
  .alltag__film { height: auto; width: min(100%, calc(78vh * 9 / 16)); justify-self: center; margin: 0 0 clamp(28px, 5vh, 44px); }
  @supports (height: 100svh) { .alltag__film { width: min(100%, calc(78svh * 9 / 16)); } }
  .alltag__film .wasist { height: auto; aspect-ratio: 9 / 16; }
}

/* Kapitel: links der Titel groß (bleibt am Rechner stehen, Knöpfe darunter), rechts die Zeilen bzw. Fragen */
.kap { position: relative; z-index: 1; padding: clamp(80px, 13vh, 150px) clamp(20px, 5vw, 64px); }
.kap + .kap { padding-top: clamp(24px, 5vh, 64px); }
.kap__in { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 104px); align-items: start; }
.kap__kopf { position: sticky; top: calc(var(--mk-head, 62px) + 2 * var(--head-gap, 10px) + clamp(24px, 5vh, 56px)); }
.kap__titel { margin: 0; font-size: clamp(34px, 4vw, 60px); line-height: 1.02; letter-spacing: -.034em; font-weight: 800;
  color: var(--ink); hyphens: manual; }
.kap__kopf .hero-ctas, .kap__cta { margin: clamp(26px, 4vh, 40px) 0 0; }
.kap__cta .hero-ctas { margin: 0; }
.kap__cta .price-cta { text-align: start; margin-top: 18px; }
.kap__lead { margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -.01em; color: var(--body); }
.kap__lead b { color: var(--ink); }
@media (max-width: 900px) {
  .kap__in { grid-template-columns: minmax(0, 1fr); }
  .kap__kopf { position: static; }
}
/* Zeilen (Kapitel und Raster): Linien statt Karten, größer */
.kap .frows { display: block; }
.raster { position: relative; z-index: 1; padding: clamp(32px, 6vh, 72px) clamp(20px, 5vw, 64px) clamp(90px, 14vh, 160px); }
.raster__in { max-width: 1160px; margin: 0 auto; }
.raster .frows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); row-gap: 0; }
@media (max-width: 760px) { .raster .frows { grid-template-columns: minmax(0, 1fr); } }
.raster .lawnote { margin-top: clamp(32px, 5vh, 56px); max-width: 860px; }
.kap .frow, .raster .frow { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: clamp(22px, 3.4vh, 32px) 0; gap: clamp(16px, 2vw, 26px); }
.kap .frow:last-child { border-bottom: 1px solid var(--line); }
.kap .frow .fic svg, .raster .frow .fic svg { width: 30px; height: 30px; stroke-width: 1.5; }
.kap .frow .ft b, .raster .frow .ft b { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.25; letter-spacing: -.015em; color: var(--ink); margin-bottom: 6px; }
.kap .frow .ft span, .raster .frow .ft span { font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.55; }

/* FAQ: Fragen als große Zeilen mit rundem Plus (wie die Pfeile bei „Für Taucher / Für Center") */
.kap--faq .kap__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
@media (max-width: 900px) { .kap--faq .kap__in { grid-template-columns: minmax(0, 1fr); } }
.kap--faq .faqsec details { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0; margin: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.kap--faq .faqsec details:last-of-type { border-bottom: 1px solid var(--line); }
.kap--faq .faqsec summary { padding: clamp(20px, 3vh, 28px) 0; align-items: center; gap: 24px; font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.35; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.kap--faq .faqsec summary::after { display: grid; place-items: center; width: 40px; height: 40px; padding-bottom: 2px; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--line2); font-size: 24px;
  transition: transform .3s var(--ease-soft), background .25s, color .25s, border-color .25s; }
.kap--faq .faqsec summary:hover::after { border-color: var(--teal); }
.kap--faq .faqsec details[open] summary::after { background: var(--teal); border-color: var(--teal); color: #fff; }
.kap--faq .faqsec details p { margin: 0 0 clamp(22px, 3vh, 30px); padding-right: 64px; max-width: 720px; font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.65; }
@media (max-width: 600px) { .kap--faq .faqsec details p { padding-right: 0; } .kap--faq .faqsec summary::after { width: 36px; height: 36px; } }

/* Preis: Abschluss als große dunkle Fläche (Preisblock selbst: .preis am Ende der Datei) */
.schluss { position: relative; z-index: 1; padding: clamp(24px, 5vh, 64px) clamp(16px, 4vw, 40px) clamp(90px, 14vh, 160px); }
.schluss .cta-final { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 10vh, 110px) clamp(20px, 5vw, 64px); border-radius: clamp(20px, 2.4vw, 32px); }
.schluss .cta-final h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.034em; margin-bottom: 20px; }
.schluss .cta-final .cta-final-sub { font-size: clamp(16px, 1.3vw, 19px); max-width: 640px; margin-bottom: 36px; }

/* Für Taucher · Der Hauptvorteil: Titel und Text oben, darunter das Netzwerk-Reel groß (quer am Rechner, hochkant am Handy,
   passt samt Rand in die Fensterhöhe unter der Kopfleiste) mit weichem Schein aus dem laufenden Bild */
.haupt { position: relative; z-index: 1; padding: clamp(90px, 14vh, 170px) clamp(20px, 5vw, 64px) clamp(90px, 14vh, 160px); }
.haupt__in { max-width: 1160px; margin: 0 auto; }
.haupt__kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end;
  margin-bottom: clamp(40px, 7vh, 72px); }
.haupt__titel { margin: 0; font-size: clamp(36px, 5vw, 78px); line-height: 1; letter-spacing: -.035em; font-weight: 800; color: var(--ink); }
.haupt__text { margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--body); }
.haupt__text b { color: var(--ink); }
@media (max-width: 900px) { .haupt__kopf { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.reel { --fw: 16; --fh: 9; --vh: 100vh; --avail: calc(var(--vh) - var(--mk-head, 62px) - 2 * var(--head-gap, 10px) - 56px);
  position: relative; margin: 0 auto; width: min(100%, calc(var(--avail) * var(--fw) / var(--fh))); aspect-ratio: var(--fw) / var(--fh); }
@supports (height: 100svh) { .reel { --vh: 100svh; } }
@media (max-aspect-ratio: 4/5) { .reel { --fw: 9; --fh: 16; } }
.reel__stage { position: relative; width: 100%; height: 100%; border-radius: clamp(16px, 2vw, 26px); overflow: hidden; background: #EAF1F4; box-shadow: var(--shadow-obj); }
.reel__stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(11, 58, 83, .08); pointer-events: none; }
.reel__stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.haupt .democtas { margin-top: clamp(40px, 7vh, 64px); }
/* Das Reel ist hell: im Dunkelmodus nur ein leiser Schein statt eines weißen Hofs */
:root[data-theme="dark"] .reel .mkfilm__amb { opacity: .22; }

/* Startbild der Filme (Owner 10.10.: „nicht von allein starten … ein einzeiler über dem video … play drücken ums zu
   starten … ansprechendes thumbnail und aktiviere ton beim starten"): Vorschaubild abgedunkelt, unten ein großer runder
   Play-Knopf im Verlauf der Knöpfe mit leisem Puls, daneben „Film ansehen · mit Ton". Die Leiste erst nach dem Start. */
.filmzeile { margin: 0 0 clamp(18px, 3vh, 28px); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.45; font-weight: 700; color: var(--ink); }
.alltag__kopf .filmzeile { margin-bottom: clamp(22px, 4vh, 40px); }
.haupt .filmzeile { margin-top: clamp(36px, 6vh, 56px); text-align: center; margin-left: auto; margin-right: auto; }
.filmstart { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 1.6vw, 20px);
  padding: 0 clamp(16px, 3vw, 32px) clamp(28px, 9%, 64px); border: 0; margin: 0; cursor: pointer; color: #fff; font: inherit; text-align: start;
  background: linear-gradient(to top, rgba(4, 19, 26, .82), rgba(4, 19, 26, .42) 22%, rgba(4, 19, 26, 0) 44%);
  transition: opacity .35s ease, visibility .35s; }
.filmstart:focus-visible { outline: 3px solid #7FE3DB; outline-offset: -3px; }
.filmstart__knopf { position: relative; flex: none; width: clamp(64px, 6.4vw, 84px); height: clamp(64px, 6.4vw, 84px); border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--teal), var(--navy));
  box-shadow: 0 14px 34px rgba(43, 167, 160, .45), inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .3s var(--ease-o), box-shadow .3s; }
.filmstart__knopf::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(127, 227, 219, .7);
  animation: filmpuls 2.4s ease-out infinite; }
.filmstart__knopf svg { width: 40%; height: 40%; margin-left: 8%; fill: currentColor; }
.filmstart:hover .filmstart__knopf { transform: scale(1.07); box-shadow: 0 18px 44px rgba(43, 167, 160, .6), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.filmstart__txt b { display: block; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.filmstart__txt span { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.filmstart__txt svg { width: 16px; height: 16px; fill: currentColor; }
.filmstart__txt svg .w { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@keyframes filmpuls { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.42); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .filmstart__knopf::before { animation: none; opacity: .5; } }
[data-film].gestartet .filmstart { opacity: 0; visibility: hidden; }
[data-film]:not(.gestartet) .mkctl { visibility: hidden; }

/* Einlaufen (mockup.js: .lauf--warten, dann .lauf--da; --d versetzt, --dw je Wort). .lauf-m nur am Handy. */
.lauf.lauf--warten { opacity: 0; transform: translateY(30px);
  transition: opacity .55s ease var(--d, 0ms), transform .75s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.lauf.lauf--warten.lauf--da { opacity: 1; transform: none; }
.lauf--worte.lauf--warten { opacity: 1; transform: none; }
.lauf--worte.lauf--warten .w { opacity: .12; transition: opacity .45s ease calc(var(--d, 0ms) + var(--dw, 0ms)); }
.lauf--worte.lauf--warten.lauf--da .w { opacity: 1; }
@media (max-width: 900px) {
  .lauf-m.lauf--warten { opacity: 0; transform: translateY(30px);
    transition: opacity .55s ease var(--d, 0ms), transform .75s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
  .lauf-m.lauf--warten.lauf--da { opacity: 1; transform: none; }
}

/* ==================== Finale Landing auf www (Owner-Abnahme 09.10.2026, Mockup docs/mockups/landing_final_start.html) ====
   Ergänzt die Optik von story.diver-id.net (mockup_override.css darüber) um: Start „Apple-mäßig“ mit großen Sätzen,
   die Seite „Aktuelles“, das mobile Menü, das sich schnell schließen lässt (M1), und „Anmelden“ als Wort. */

/* ---- Start: zwei ruhige Kapitel, große Sätze; jede Zeile steigt beim Hineinscrollen aus der Unschärfe auf (.rv) ---- */
.satz { position: relative; z-index: 2; padding: clamp(96px, 15vh, 180px) clamp(20px, 5vw, 64px) 0; }
.satz__in { max-width: 1080px; margin: 0 auto; }
.satz__eb { margin: 0 0 14px; font-size: 17px; font-weight: 600; color: var(--teal-vivid); }
.satz__h { margin: 0; font-size: clamp(38px, 6.6vw, 86px); line-height: 1.02; font-weight: 800; letter-spacing: -.038em; color: var(--ink);
  hyphens: manual; overflow-wrap: break-word; }
.satz__h .g { background: linear-gradient(90deg, #37C6BE, #6FA8DC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.satz__lead { margin: 22px 0 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--body); }
.satz__f { display: grid; gap: 34px 36px; margin-top: clamp(44px, 6vw, 76px); list-style: none; padding: 0; }
.satz__f.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.satz__f.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.satz__f li { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; min-width: 0; }
.satz__f b { display: block; font-size: clamp(25px, 2.7vw, 38px); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; color: var(--ink);
  overflow-wrap: break-word; hyphens: auto; }
.satz__f span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--body); }
@media (max-width: 760px) {
  .satz__f.n3 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .satz__f.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .satz__f b { font-size: 26px; }
  .satz__f span { font-size: 15.5px; }
}
@media (max-width: 370px) { .satz__f.n4 { grid-template-columns: minmax(0, 1fr); } .satz__h { font-size: 36px; } }
/* Die Wege darunter: wie bisher (.waehle), nur etwas näher an den Sätzen */
.satz + .satz + .lp-band.waehle { padding-top: clamp(72px, 11vh, 140px); }
.satz + .satz + .lp-band.waehle .lp-wrap { max-width: none; padding: 0 clamp(20px, 5vw, 64px); }
.satz + .satz + .lp-band.waehle .choose { max-width: 1080px; }

/* Einblenden (site.js: .rv--warten nur für Elemente unterhalb des Fensters, dann .rv--da; --d versetzt Geschwister) */
.rv { transition: opacity 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), transform 1.1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), filter 1s ease var(--d, 0s); }
.rv.rv--warten { opacity: 0; transform: translateY(42px); filter: blur(10px); }
.rv.rv--warten.rv--da { opacity: 1; transform: none; filter: none; }
/* Der Film tritt beim Wegscrollen leicht zurück (site.js setzt --weg 0 … 1 am aktiven Hero) */
.mkheld .heldbox { transform: scale(calc(1 - .08 * var(--weg, 0))); opacity: calc(1 - .55 * var(--weg, 0)); transform-origin: 50% 30%; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.rv--warten { opacity: 1; transform: none; filter: none; transition: none; }
  .mkheld .heldbox { transform: none; opacity: 1; }
}

/* ---- Aktuelles (Owner 09.10.: „die 4 punkte oben lieber etwas kleiner und so wie quasi eine übersicht, darunter das
   Danke und der Text"): kein Film, oben die Übersicht, darunter der Brief ---- */
.akt { position: relative; z-index: 2; padding: clamp(84px, 13vh, 150px) clamp(20px, 5vw, 64px) clamp(84px, 12vh, 150px); }
.akt__in { max-width: 1080px; margin: 0 auto; }
.akt__h1 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.akt__uebersicht { list-style: none; margin: clamp(22px, 3vh, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.akt__uebersicht li { min-width: 0; padding: 18px 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); }
.akt__uebersicht b { display: block; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--ink); overflow-wrap: break-word; hyphens: auto; }
.akt__uebersicht span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--body); }
/* Übersicht A „Zahlen groß“ (Owner-Wahl 09.10. nach Mockup docs/mockups/aktuelles_uebersicht.html; vorher vier Karten) */
.akt__lead { margin: 14px 0 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; color: var(--body); }
.akt__lead b { color: var(--ink); font-weight: 700; }
.akt__zahlen { list-style: none; margin: clamp(26px, 4vh, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.akt__zahlen li { min-width: 0; padding: 4px 28px 0; border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.akt__zahlen li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.akt__zahlen .w { display: block; font-size: clamp(44px, 5vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(90deg, #37C6BE, #6FA8DC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.akt__zahlen .l { display: block; margin-top: 10px; font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.akt__zahlen .k { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--body); }
@media (max-width: 640px) {
  .akt__zahlen { grid-template-columns: minmax(0, 1fr); }
  .akt__zahlen li, .akt__zahlen li:first-child { padding: 18px 0; border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
  .akt__zahlen .w { font-size: 40px; grid-row: span 2; }
  .akt__zahlen .l { margin-top: 0; }
}
.akt__danke { margin: clamp(64px, 10vh, 120px) 0 0; font-size: clamp(56px, 9vw, 120px); line-height: .95; font-weight: 800; letter-spacing: -.045em;
  background: linear-gradient(90deg, #37C6BE, #6FA8DC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.akt__brief { max-width: 62ch; margin-top: clamp(28px, 4vh, 44px); display: grid; gap: 1.1em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: #C3D1D8; }
.akt__brief p { margin: 0; }
.akt__brief .an { color: var(--ink); font-weight: 700; }
.akt__brief .gruss { color: var(--ink); font-weight: 600; margin-top: .4em; }
.akt__ig { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: .4em; padding: 12px 20px 12px 12px; border-radius: 14px;
  font-weight: 700; font-size: 16px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  transition: background .2s, border-color .2s; }
.akt__ig:hover { background: rgba(255, 255, 255, .13); border-color: rgba(55, 198, 190, .5); color: #fff; }
.akt__ig svg { width: 28px; height: 28px; flex: none; }
@media (max-width: 900px) { .akt__uebersicht { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .akt__uebersicht { grid-template-columns: minmax(0, 1fr); } }
[dir="rtl"] .akt__ig { padding: 12px 12px 12px 20px; }

/* ---- FAQ unten auf „Für Center“ bzw. „Für Taucher“ (Owner 09.10.) ---- */
.kap--faq { scroll-margin-top: calc(var(--mk-head, 62px) + 12px); }

/* ---- Handy: „Anmelden“ als Wort statt Symbol (Owner 09.10.: „schreib lieber Anmelden wie auf web (sollte ja passen da
   nur noch die flagge daneben kommt und das menü)“). Daneben nur Flagge und Menü; gemessen bis 360 px in allen 18 Sprachen. */
@media (max-width: 1023px) {
  header .hctrl .login { font-size: 14px; line-height: 1.2; padding: 7px 13px; border-radius: 999px; white-space: nowrap; }
  header .hctrl .login::before { content: none; }
  header .hctrl { gap: 6px; }
  header .install-pill { display: none !important; }
}
@media (max-width: 374px) { header .hctrl .login { font-size: 13px; padding: 6px 10px; } header .brand .wordmark { height: 24px; } }

/* ---- Handy-Menü M1 (Owner-Wahl 09.10.: „wir brauchen noch etwas um das menü … schnell wieder zu schließen ohne nach oben
   rechts drücken zu müssen“): das Menü kommt als Karte von oben, darunter bleibt die Seite abgedunkelt sichtbar. Tippen
   dort, nach oben wischen, Esc oder die Zurück-Taste schließen es (site.js). */
@media (max-width: 1023px) {
  .mobnav { position: fixed; inset: 0 0 auto 0; z-index: 85; display: flex; flex-direction: column; overflow: auto;
    max-height: 100vh; padding: calc(var(--mk-head, 62px) + 4px) 24px 14px; border-radius: 0 0 28px 28px;
    background: rgba(10, 28, 40, .97); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
    opacity: 1; transform: translateY(-104%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); pointer-events: none; touch-action: pan-x; }
  @supports (height: 100svh) { .mobnav { max-height: 100svh; } }
  .mobnav.open { transform: none; pointer-events: auto; }
  .mobnav.zieht { transition: none; }
  #mobnavLinks a { padding: 12px 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .mobnav-cta { margin-top: 22px; }
  .mobnav-cta .btn { display: flex; width: 100%; justify-content: center; }
  .mobnav-meta { display: none; }
  .mobnav-griff { flex: none; width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); margin: 18px auto 2px; }
  .mobnav-scrim { position: fixed; inset: 0; z-index: 84; background: rgba(2, 10, 14, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none; transition: opacity .3s; }
  .mobnav-scrim.an { opacity: 1; pointer-events: auto; }
}
@media (min-width: 1024px) { .mobnav-scrim, .mobnav-griff { display: none; } }

/* ---- Hero in fast quadratischen Fenstern (Owner 09.10.: „der hero passt sich nicht an unterschiedliche größen vom browser
   an, text abgeschnitten“): Zwischen hochkant (≤ 4:5, Hochkant-Film) und 3:2 würde der Querfilm links und rechts so stark
   beschnitten, dass Schrift im Film fehlt. Dort steht der ganze Film, oben und unten füllt ein weicher Schein aus dem
   laufenden Bild (Canvas .heldglow, site.js malt ihn). */
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 3/2) {
  .mkheld .heldbox .heldglow { display: block; position: absolute; z-index: 0; inset: -10%; width: 120%; height: 120%;
    filter: blur(48px) saturate(1.25) brightness(.75); }
  .mkheld .heldbox .heldfilm, .mkheld .heldbox .heldposter img { object-fit: contain; }
}

/* ==== Menü und Ladebalken ruhiger (Owner-Wahl 14.10., Mockup docs/mockups/startseite_menue_zeitleiste.html, Runde 3):
   Rechner W1 + F1, Ladebalken L2, Handy-Kopf H1, Handy-Menü M-C. ==== */

/* Kopf über dem Film: kein dunkler Streifen mehr, nur ein weicher Schatten (über Inhalt bleibt der alte Verlauf) */
header.over-hero::before { opacity: 1; inset: 0 0 -70px; background: linear-gradient(180deg, rgba(3, 12, 17, .62), rgba(3, 12, 17, 0)); }
header .topnav a, header .login, header .hchip { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
/* Anmelden als Wort, ohne Rahmen (Rechner und Handy) */
header .login, header .hctrl .login { padding: 6px 4px; border: 0; border-radius: 0; background: none; color: #fff; font-weight: 600; }
header .login:hover { color: #7FE3DA; }
/* Sprache: runde Flagge mit hauchdünnem Rand (Owner: „zu viel weißer Rand … sieht billig aus“), daneben Kürzel + Pfeil */
header #langChip { gap: 7px; padding: 6px 8px; border: 0; background: none; color: rgba(255, 255, 255, .85); }
header #langChip:hover { color: #fff; }
header #langChip .flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 1px 4px rgba(0, 0, 0, .3); }
header #langChip::after { content: ""; width: 5px; height: 5px; margin: -3px 1px 0 1px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .8; }
/* Rechner: Instagram einfarbig rechts vor der Sprache, Menü genau mittig, aktive Seite mit leuchtendem Punkt */
@media (min-width: 1024px) {
  header .wrap { position: relative; }
  header .brand-ig { order: 2; margin-inline-start: auto; margin-inline-end: 6px; padding-inline-start: 0; opacity: .78; color: #fff; }
  header .brand-ig:hover { opacity: 1; }
  header .brand-ig::before { content: none; }
  header .brand-ig svg { display: none; }
  header .brand-ig::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ig-maske); mask: var(--ig-maske); }
  header .hctrl { order: 3; margin-inline-start: 0; }
  header .topnav a { color: rgba(255, 255, 255, .74); }
  header .topnav a:hover, header .topnav a.on { color: #fff; }
  header .topnav a.on::after { left: 50%; right: auto; bottom: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
    background: #7FE3DA; box-shadow: 0 0 8px #7FE3DA; }
}
/* Menü mittig erst, wenn genug Platz ist (lange Bezeichnungen in manchen Sprachen) */
@media (min-width: 1180px) {
  header .topnav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; flex: none; }
}
/* Instagram-Umriss (einfarbig), als Maske für Kopf und Handy-Menü */
:root { --ig-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5.2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4.1' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.15'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Ladebalken L2: feine Linie in Inhaltsbreite, Verlauf wie die Knöpfe, leuchtender Punkt an der Spitze (--p aus site.js) */
/* bündig mit Logo und „Anmelden“: Rechner 24 px Rand im 1200er-Kopf, Handy 12 px wie der Kopf */
.mkheld .heldzeit { left: max(24px, calc((100% - 1200px) / 2 + 24px)); right: max(24px, calc((100% - 1200px) / 2 + 24px));
  bottom: clamp(10px, 2.4vh, 24px); height: 22px; }
.mkheld .heldzeit i { height: 2px; background: rgba(255, 255, 255, .2); box-shadow: none; }
.mkheld .heldzeit:hover i, .mkheld .heldzeit.ziehen i, .mkheld .heldzeit:focus-visible i { height: 4px; }
.mkheld .heldzeit b { background: linear-gradient(90deg, #2BA7A0, #7FE3DA); }
.mkheld .heldzeit::after { content: ""; position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #E9FFFC; box-shadow: 0 0 8px 2px rgba(127, 227, 218, .75); pointer-events: none; }

/* Handy: Kopf mit runder Flagge, „Anmelden“ als Wort, Menü-Zeichen mit zwei Strichen (offen: Kreuz) */
@media (max-width: 1023px) {
  header #langChip::after { content: none; }
  .mkheld .heldzeit { left: 12px; right: 12px; }
  header #langChip .flag { width: 20px; height: 20px; }
  header .hctrl { gap: 10px; }
  header .hctrl .login { font-size: 15px; padding: 6px 2px; }
  header .hchip.burger { position: relative; width: 34px; height: 34px; padding: 0; justify-content: center; }
  header .hchip.burger svg { display: none; }
  header .hchip.burger::before, header .hchip.burger::after { content: ""; position: absolute; right: 6px; height: 2px; border-radius: 2px;
    background: #fff; transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s, top .3s; }
  header .hchip.burger::before { width: 22px; top: 12px; }
  header .hchip.burger::after { width: 15px; top: 20px; }
  header .hchip.burger[aria-expanded="true"]::before, header .hchip.burger[aria-expanded="true"]::after { width: 20px; top: 16px; }
  header .hchip.burger[aria-expanded="true"]::before { transform: rotate(45deg); }
  header .hchip.burger[aria-expanded="true"]::after { transform: rotate(-45deg); }

  /* Handy-Menü M-C: Karte von oben aus dunklem Glas, Linien, leuchtender Punkt, kurze Zeile, kein Griff, unten rechts Instagram */
  .mobnav { padding: calc(var(--mk-head, 62px) + 4px) 26px 20px; background: rgba(5, 18, 26, .8);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .mobnav-griff { display: none; }
  .mobnav-scrim { background: rgba(2, 10, 14, .45); }
  #mobnavLinks a { position: relative; display: block; padding: 13px 0; padding-inline-start: 18px; font-size: 26px; line-height: 1.1; color: rgba(255, 255, 255, .8); }
  #mobnavLinks a.on { color: #fff; }
  #mobnavLinks a.on::before { content: ""; position: absolute; inset-inline-start: 0; top: 25px; width: 7px; height: 7px; border-radius: 50%;
    background: #7FE3DA; box-shadow: 0 0 10px #7FE3DA; }
  #mobnavLinks a small { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: rgba(255, 255, 255, .5); }
  .mobnav-ig { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 0;
    font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .75); text-decoration: none; }
  .mobnav-ig:hover { color: #fff; }
  .mobnav-ig::after { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--ig-maske); mask: var(--ig-maske); }
}
@media (min-width: 1024px) { .mobnav-ig { display: none; } }
@media (prefers-reduced-motion: reduce) { header .hchip.burger::before, header .hchip.burger::after { transition: none; } }

/* ==== Aktuelles neu (Owner-Wahl 14.10.: Entwurf A „Logbuch“, Fakten mittig als Satz; Mockup docs/mockups/aktuelles_neu.html):
   Zeitleiste 2025 → Beta 1. August → heute, drei Fakten „Taucher aus 35 Nationen“ / „Tauchcenter in 6 Ländern“ (+ Flaggen)
   / „Die App läuft in 18 Sprachen“, Dankesbrief neben „Danke.“ ⛔ Nie eine große „6“ ohne den Satz drumherum (sonst liest man
   „6 Center“). ==== */
.akt__augen { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #7FE3DA; }
.akt__augen::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7FE3DA; box-shadow: 0 0 10px #7FE3DA; flex: none; }
.akt .akt__h1 { margin-top: 18px; font-size: clamp(36px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
.akt .akt__h1 em { font-style: normal; color: #7FE3DA; }
.akt__zeit { position: relative; list-style: none; margin: clamp(48px, 8vh, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.akt__zeit::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(127, 227, 218, .7)); }
[dir="rtl"] .akt__zeit::before { background: linear-gradient(270deg, rgba(255, 255, 255, .22), rgba(127, 227, 218, .7)); }
.akt__zeit li { position: relative; min-width: 0; padding-top: 34px; padding-inline-end: 28px; }
.akt__zeit li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 13px; height: 13px; border-radius: 50%;
  background: #0B1E29; border: 1.5px solid rgba(255, 255, 255, .45); }
.akt__zeit li.jetzt::before { background: #7FE3DA; border-color: #7FE3DA; box-shadow: 0 0 0 6px rgba(127, 227, 218, .14), 0 0 18px #7FE3DA; }
.akt__zeit .wann { display: block; font-size: 15px; font-weight: 700; color: #7FE3DA; }
.akt__zeit b { display: block; margin-top: 6px; font-size: clamp(21px, 2vw, 24px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.akt__zeit .wie { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--body); max-width: 32ch; }
.akt__fakten { list-style: none; margin: clamp(56px, 9vh, 84px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.akt__fakten li { min-width: 0; padding: 38px 24px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.akt__fakten li + li { border-inline-start: 1px solid rgba(255, 255, 255, .1); }
.akt__fakten .vor, .akt__fakten .nach { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.3; font-weight: 700; color: var(--ink); }
.akt__fakten .gross { margin: 6px 0 4px; font-size: clamp(64px, 7vw, 88px); line-height: 1; font-weight: 800; letter-spacing: -.05em;
  background: linear-gradient(180deg, #fff 20%, #7FE3DA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.akt__flaggen { display: flex; justify-content: center; margin-top: 18px; }
.akt__flaggen img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #0B1E29, 0 0 0 3px rgba(255, 255, 255, .12); }
.akt__flaggen img + img { margin-inline-start: -8px; }
.akt__fakten .klein { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--body); max-width: 30ch; }
.akt__dank { margin-top: clamp(72px, 12vh, 110px); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.akt__dankkopf { position: sticky; top: calc(var(--mk-head, 62px) + 24px); }
.akt .akt__danke { margin: 0; font-size: clamp(54px, 6vw, 72px); color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
.akt__von { margin: 18px 0 0; font-size: 15px; color: var(--body); }
.akt__dank .akt__brief { margin-top: 0; }
@media (max-width: 760px) {
  .akt__zeit { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-inline-start: 28px; }
  .akt__zeit::before { left: auto; right: auto; inset-inline-start: 6px; top: 6px; bottom: 6px; width: 1.5px; height: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(127, 227, 218, .7)); }
  .akt__zeit li { padding-top: 0; padding-inline-end: 0; }
  .akt__zeit li::before { inset-inline-start: -28px; }
  .akt__fakten { grid-template-columns: minmax(0, 1fr); }
  .akt__fakten li { padding: 30px 8px 32px; }
  .akt__fakten li + li { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .akt__dank { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .akt__dankkopf { position: static; }
}
/* Aktuelles Runde 2 (14.10.): ohne großen Titel und ohne Unterzeilen ⇒ Zeitleiste rückt an die Dachzeile */
.akt__augen + .akt__zeit { margin-top: clamp(36px, 6vh, 56px); }
.akt__zeit b { margin-top: 4px; }

/* ==== Aktuelles: Umwelt-Abschnitt (Owner-Wahl 14.10., Mockup docs/mockups/umwelt_kompakt.html, Layout K1 ohne Balken):
   ein Satz mittig, eine Zeile mit der vorsichtig geschätzten Zahl, „Wie wir rechnen“ zum Aufklappen (ohne Verbände). ==== */
.akt__umwelt { margin-top: clamp(80px, 13vh, 120px); text-align: center; }
.akt__umwelt::before { content: ""; display: block; width: 56px; height: 2px; margin: 0 auto 28px; border-radius: 2px;
  background: linear-gradient(90deg, #2BA7A0, #7FE3DA); }
.akt__usatz { margin: 0 auto; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -.033em;
  color: var(--ink); }
.akt__usatz em { font-style: normal; color: #7FE3DA; }
.akt__uzahl { margin: 20px auto 0; max-width: 52ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: #C3D1D8; }
.akt__uzahl b { color: var(--ink); }
.akt__rech { margin: 16px auto 0; max-width: 70ch; font-size: 13px; color: var(--faint); }
.akt__rech summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--body); font-weight: 600; list-style: none; }
.akt__rech summary::-webkit-details-marker { display: none; }
.akt__rech summary::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); }
.akt__rech[open] summary::after { transform: rotate(-135deg); }
.akt__rech summary:focus-visible { outline: 2px solid #7FE3DA; outline-offset: 3px; border-radius: 4px; }
.akt__rech p { margin: 8px 0 0; line-height: 1.55; }

/* ==== Lautstärke-Regler neben dem Ton-Knopf (Owner 14.10.; site.js baut ihn, Start bei 50 %). Rechner: klappt beim
   Überfahren auf; Touch: immer sichtbar, schmal. ==== */
.mkctl__laut { display: flex; align-items: center; flex: none; }
.mkctl__vol { -webkit-appearance: none; appearance: none; width: 0; height: 24px; margin: 0; padding: 0; opacity: 0; background: transparent;
  cursor: pointer; transition: width .25s var(--ease-o, ease), opacity .2s, margin .25s; --v: .5; }
.mkctl__laut:hover .mkctl__vol, .mkctl__laut:focus-within .mkctl__vol, .mkctl__vol:active { width: 78px; opacity: 1; margin-inline: 4px 6px; }
@media (hover: none) { .mkctl__vol { width: 56px; opacity: 1; margin-inline: 2px 4px; } }
.mkctl__vol::-webkit-slider-runnable-track { height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #37C6BE calc(var(--v) * 100%), rgba(255, 255, 255, .28) 0); }
.mkctl__vol::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.mkctl__vol::-moz-range-progress { height: 3px; border-radius: 3px; background: #37C6BE; }
.mkctl__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; border: 0;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.mkctl__vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.mkctl__vol:focus-visible { outline: 2px solid #7FE3DB; outline-offset: 2px; border-radius: 4px; }
[dir="rtl"] .mkctl__vol::-webkit-slider-runnable-track { background: linear-gradient(270deg, #37C6BE calc(var(--v) * 100%), rgba(255, 255, 255, .28) 0); }

/* ==== Start, erster Abschnitt: Untertitel mit anklickbarem „Müll“ und aufklappender Schätzung (Owner 14.10.) ==== */
.muell { font: inherit; color: #7FE3DA; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(127, 227, 218, .55); text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: color .2s, text-decoration-color .2s, text-underline-offset .2s; }
/* Owner 15.10.: gleich eine Linie statt Punkte; beim Drüberfahren wird das Wort weiß und die Linie kräftig und rückt näher */
.muell:hover, .muell[aria-expanded="true"] { color: #fff; text-decoration-color: #7FE3DA; text-underline-offset: 3px; }
.muell:focus-visible { outline: 2px solid #7FE3DA; outline-offset: 3px; border-radius: 4px; }
.muell-info { margin-top: 22px; max-width: 620px; }
.muell-info__in { position: relative; padding: 22px 24px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); animation: muellAuf .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes muellAuf { from { opacity: 0; transform: translateY(-6px); } }
.muell-info__t { margin: 0; padding-inline-end: 34px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7FE3DA; }
.muell-info ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.muell-info li b { display: block; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.muell-info li span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.35; color: var(--body); }
.muell-info__n { margin: 16px 0 0; font-size: 12.5px; color: var(--faint); }
.muell-info__zu { position: absolute; top: 14px; inset-inline-end: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255, 255, 255, .08); cursor: pointer; }
.muell-info__zu::before, .muell-info__zu::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 1.5px; margin-top: -.75px;
  background: #fff; transform: rotate(45deg); }
.muell-info__zu::after { transform: rotate(-45deg); }
.muell-info__zu:hover { background: rgba(255, 255, 255, .16); }
.muell-info__zu:focus-visible { outline: 2px solid #7FE3DA; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .muell-info__in { animation: none; } }

/* Preisblock neu (Owner 14.10., Mockup preismodell_neu.html Variante B): Titel „Passend zur Saison: Zahle nur, wenn Gäste
   da sind.“, drei Kacheln (0,39 € pro Check-in · Ein Preis für alles mit allem, was inklusive ist · 30 Credits geschenkt),
   darunter „Wähle dein Paket“ mit den fünf Paketen aus credit_purchase.dart. Ersetzt .wid__plus--preis und .kap--preis. */
.preis { position: relative; z-index: 2; padding: clamp(56px, 8vh, 96px) clamp(20px, 5vw, 64px) clamp(24px, 5vh, 64px); }
.preis__in { max-width: 1160px; margin: 0 auto; }
.preis .eyebrow { margin-bottom: clamp(18px, 3vh, 30px); }
.preis__h { margin: 0; font-size: clamp(36px, 5.4vw, 72px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em;
  color: var(--ink); hyphens: manual; }
.preis__h .g { background: linear-gradient(90deg, var(--teal), #2F6FA8); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .preis__h .g { background-image: linear-gradient(90deg, #37C6BE, #6FA8DC); }
.preis__sub { margin: clamp(14px, 2vh, 20px) 0 0; font-size: clamp(19px, 2vw, 26px); line-height: 1.3; font-weight: 700; color: var(--body); }
.preis__drei { margin-top: clamp(34px, 6vh, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); grid-template-rows: auto auto; gap: 14px; }
.pvk { position: relative; min-width: 0; padding: 26px 24px 24px; border-radius: 22px; background: var(--hover); border: 1px solid var(--line2); }
.pvk.haupt { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; padding: 30px 30px 28px;
  background: linear-gradient(160deg, var(--teal-bg), transparent); border-color: var(--teal-line); }
.pvk .k { font-size: clamp(40px, 4vw, 46px); line-height: 1; font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
.pvk .k.ok { color: var(--ok); }
.pvk .k.wort { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.025em; }
.pvk .t { margin: 10px 0 0; font-size: 16px; line-height: 1.4; color: var(--body); }
.pvk .t b { color: var(--ink); }
.pvk .inkl { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pvk .inkl li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 99px; font-size: 14px; font-weight: 600;
  background: var(--hover); color: var(--ink2); }
.pvk .inkl li::before { content: ""; width: 7px; height: 4px; border-left: 1.8px solid var(--ok); border-bottom: 1.8px solid var(--ok); transform: rotate(-45deg) translateY(-1px); }
.preis__pk { margin-top: clamp(44px, 7vh, 64px); display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.preis__pk h3 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.preis__pk p { margin: 0; font-size: 15px; color: var(--body); }
.preis__karten { margin: 26px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pk { position: relative; min-width: 0; padding: 20px 12px 18px; border-radius: 18px; text-align: center; background: var(--hover); border: 1px solid var(--line2); }
.pk.top { background: linear-gradient(170deg, var(--ok-bg), transparent); border-color: var(--ok-line); }
.pk .band { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bg); background: var(--ok); padding: 3px 9px; border-radius: 99px; }
.pk .n { font-size: 13px; font-weight: 700; color: var(--body); }
.pk .c { margin-top: 8px; font-size: clamp(24px, 2.5vw, 30px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.pk small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--body); }
.pk .je { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); font-size: clamp(19px, 1.9vw, 22px); font-weight: 800; color: var(--ok); }
.pk .p { margin-top: 6px; font-size: 13px; color: var(--body); }
.preis__fuss { margin: 22px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--body); }
@media (max-width: 700px) {
  .preis__drei { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pvk.haupt { grid-column: auto; grid-row: auto; padding: 26px 24px 24px; }
  .preis__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .preis__karten .pk.top { grid-column: span 2; }
}

/* Signatur-Zertifikat als Karte (Owner 15.10., Mockup docs/mockups/signatur_zertifikat.html Entwurf A): oben die echte
   Unterschrift aus dem PDF (signatur_bild.py, am Handy nur Unterschrift + Name), darunter das Audit-Protokoll als Text
   mit den Beschriftungen des PDF-Integritätsnachweises. Papier bleibt in beiden Farbschemata weiß. */
.sigkarte { margin: clamp(28px, 5vh, 52px) 0 0; max-width: 980px; }
.sigkarte__papier { background: #fff; border-radius: 18px 18px 0 0; padding: 14px 18px 4px; }
.sigkarte__kopf { margin: 0; padding: 4px 4px 10px; border-bottom: 1px solid #E3E9EE; font-size: 12px; line-height: 1.2; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #5B677A; }
.sigkarte picture, .sigkarte img { display: block; width: 100%; height: auto; }
.sigkarte__audit { border-radius: 0 0 18px 18px; background: #F1F4F7; color: #3E4A57; padding: 18px 22px 20px; border-top: 1px dashed #CBD5DE;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.sigkarte__t { margin: 0; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 12px; line-height: 1.2; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #0B3A53; }
.sigkarte__t .ok { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 99px; background: #E1F3EA;
  color: #1F6E4B; letter-spacing: .02em; font-size: 11.5px; text-transform: none; }
.sigkarte__t .ok::before { content: ""; width: 8px; height: 4.5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px); }
.sigkarte dl { margin: 14px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; font-size: 13.5px; line-height: 1.35; }
.sigkarte dt { color: #6B7787; }
.sigkarte dd { margin: 0; min-width: 0; color: #16222D; font-weight: 600; }
.sigkarte dd.hash { font: 500 12.5px/1.35 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; color: #2A3742; word-break: break-all; }
.sigkarte figcaption { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--body); }
@media (max-width: 700px) {
  .sigkarte__papier { padding: 10px 10px 2px; border-radius: 14px 14px 0 0; }
  .sigkarte__audit { padding: 14px 16px 16px; border-radius: 0 0 14px 14px; }
  .sigkarte dl { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 13px; }
  .sigkarte dt { margin-top: 6px; font-size: 12px; }
  .sigkarte dd.hash { font-size: 11.5px; }
}
/* Owner 15.10.: „diese künstliche blocksatz kram brauchen wir nicht“ ⇒ keine Ausgleichs-Umbrüche (text-wrap) und keine
   Zeichen-Höchstbreiten mehr bei Überschriften und Untertiteln; Text läuft über die volle Breite. „Check-in“ bricht
   nie am Bindestrich (.nw im HTML). */
/* all: unset, weil Regeln wie „.satz__f span { display: block }“ sonst auch diesen Span treffen */
span.nw { all: unset !important; white-space: nowrap !important; }