/* SpeechToWork Landingpage. Graphit, Elfenbein, Gold. Schriften und Bilder liegen auf dem eigenen Server, nichts wird von Dritten geladen. */

@font-face { font-family: "Geist"; src: url("/assets/schriften/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/schriften/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --elfenbein: #f7f5f0;
  --papier: #ffffff;
  --nebel: #eceae4;
  --linie: #dedbd3;
  --linie-stark: #c9c5bb;
  --tinte: #141416;
  --text: #46464b;
  --gedaempft: #7a7a80;
  --graphit: #111113;
  --graphit-2: #18181b;
  --graphit-3: #222226;
  --graphit-linie: #2e2e33;
  --rauch: #a4a4ab;
  --schnee: #f4f2ec;
  --gold: #c2a068;
  --gold-hell: #dcc08c;
  --gold-tief: #8f7241;
  --gold-verlauf: linear-gradient(100deg, #b8945c 0%, #dcc08c 100%);
  --gold-schimmer: linear-gradient(100deg, #b8945c 0%, #dcc08c 40%, #f1dfb5 50%, #dcc08c 60%, #b8945c 100%);
  --warnung: #c0664f;
  --radius: 22px;
  --weich: cubic-bezier(.2, .7, .2, 1);
  --feder: cubic-bezier(.34, 1.4, .64, 1);
  --anzeige: "Geist", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --schatten: 0 1px 2px rgba(20, 20, 22, .04), 0 24px 48px -24px rgba(20, 20, 22, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--elfenbein); color: var(--text); font: 400 17.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: var(--gold-tief); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--tinte); }
h1, h2, h3 { margin: 0; color: var(--tinte); text-wrap: balance; }
h1, h2 { font-family: var(--anzeige); font-weight: 640; letter-spacing: -.045em; line-height: .98; }
h1 { font-size: clamp(3rem, 7.6vw, 6.8rem); }
h2 { font-size: clamp(2.5rem, 5.6vw, 5rem); }
h3 { font-family: var(--anzeige); font-size: 1.3rem; font-weight: 620; letter-spacing: -.025em; line-height: 1.2; }
h1 em, h2 em { font-style: normal; font-weight: 640; color: var(--gold-tief); }
.hero h1 em, .dunkel h2 em, .unter-hero h1 em, .anmeldung h2 em { color: var(--gold-hell); }
@keyframes schimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { color: var(--tinte); font-weight: 650; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--gold-hell); color: var(--graphit); }
.sprung { position: absolute; left: -9999px; top: 8px; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 200; }
.sprung:focus { left: 16px; }

/* Feines Korn über der ganzen Seite und der goldene Lesefortschritt */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }
.fortschritt { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 120; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }

.rahmen { width: min(1240px, 100% - 48px); margin-inline: auto; }
.weit { width: min(1440px, 100% - 48px); margin-inline: auto; }
.schmal { width: min(820px, 100% - 48px); margin-inline: auto; }
section { padding: clamp(110px, 14vw, 210px) 0; position: relative; }
.abschnittskopf { max-width: 860px; margin-bottom: clamp(56px, 8vw, 110px); }
.abschnittskopf.mitte { margin-inline: auto; text-align: center; }
.abschnittskopf p { margin-top: 28px; font-size: clamp(1.15rem, 1.5vw, 1.35rem); max-width: 640px; line-height: 1.5; }
.abschnittskopf.mitte p { margin-inline: auto; }
.dachzeile { display: inline-flex; align-items: center; gap: 12px; font: 600 .74rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-tief); margin-bottom: 22px; }
.dachzeile::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.mitte .dachzeile::after { content: ""; width: 34px; height: 1px; background: currentColor; }

/* Knöpfe */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 30px; border-radius: 999px; border: 1px solid transparent; font: 600 .98rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform .35s var(--weich), box-shadow .35s, color .3s, border-color .3s, background .3s; will-change: transform; }
.knopf svg { width: 17px; height: 17px; flex: none; transition: transform .35s var(--weich); }
.knopf:hover svg { transform: translateX(4px); }
.knopf-haupt { background: var(--tinte); color: var(--schnee); box-shadow: 0 14px 30px -14px rgba(20, 20, 22, .6); }
.knopf-haupt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-schimmer); background-size: 200% 100%; opacity: 0; transition: opacity .4s; }
.knopf-haupt:hover { color: var(--graphit); box-shadow: 0 18px 38px -14px rgba(184, 147, 90, .75); }
.knopf-haupt:hover::before { opacity: 1; animation: schimmer 2.4s linear infinite; }
.knopf-gold { background: var(--gold-schimmer); background-size: 200% 100%; color: var(--graphit); animation: schimmer 6s linear infinite; box-shadow: 0 16px 36px -16px rgba(217, 187, 133, .7); }
.knopf-gold:hover { color: var(--graphit); box-shadow: 0 20px 44px -14px rgba(217, 187, 133, .9); }
.knopf-zweit { background: transparent; color: var(--tinte); border-color: var(--linie-stark); }
.knopf-zweit:hover { border-color: var(--gold); color: var(--tinte); }
.dunkel .knopf-zweit, .hero .knopf-zweit, .unter-hero .knopf-zweit { color: var(--schnee); border-color: rgba(244, 242, 236, .28); }
.dunkel .knopf-zweit:hover, .hero .knopf-zweit:hover, .unter-hero .knopf-zweit:hover { border-color: var(--gold-hell); color: var(--gold-hell); }
.knopf-klein { min-height: 44px; padding: 0 22px; font-size: .9rem; }

/* Kopf */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .4s, box-shadow .4s, backdrop-filter .4s; }
.kopf.gerollt { background: rgba(17, 17, 19, .78); backdrop-filter: saturate(1.3) blur(18px); -webkit-backdrop-filter: saturate(1.3) blur(18px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.kopf.fest { background: rgba(17, 17, 19, .94); }
.kopf-innen { display: flex; align-items: center; gap: 30px; min-height: 80px; transition: min-height .4s var(--weich); }
.kopf.gerollt .kopf-innen { min-height: 66px; }
.marke { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--schnee); font: 600 .86rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.marke:hover { color: var(--schnee); }
.marke b { font-weight: 300; color: var(--gold-hell); }
.zeichen { width: 34px; height: 23px; flex: none; color: var(--gold-hell); }
.zeichen rect { transform-box: fill-box; transform-origin: center; }
.marke:hover .zeichen .w { animation: zeichenpuls .9s ease-in-out infinite alternate; }
.marke:hover .zeichen .w:nth-child(2) { animation-delay: -.2s; } .marke:hover .zeichen .w:nth-child(3) { animation-delay: -.45s; } .marke:hover .zeichen .w:nth-child(4) { animation-delay: -.7s; }
@keyframes zeichenpuls { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.navi { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.navi > a:not(.knopf), .navi-gruppe > button { font: 500 .93rem/1 var(--sans); color: rgba(244, 242, 236, .78); text-decoration: none; padding: 12px 14px; border-radius: 999px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: color .25s; }
.navi > a:not(.knopf):hover, .navi-gruppe > button:hover, .navi-gruppe:focus-within > button { color: var(--gold-hell); }
.navi-gruppe { position: relative; }
.navi-gruppe > button svg { width: 11px; height: 11px; transition: transform .3s var(--weich); }
.navi-gruppe:hover > button svg, .navi-gruppe:focus-within > button svg { transform: rotate(180deg); }
.navi-menue { position: absolute; top: calc(100% + 10px); left: -16px; min-width: 330px; padding: 10px; background: rgba(24, 24, 27, .96); backdrop-filter: blur(18px); border: 1px solid var(--graphit-linie); border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: 20% 0; transition: opacity .28s, transform .28s var(--weich), visibility .28s; }
.navi-gruppe:hover .navi-menue, .navi-gruppe:focus-within .navi-menue { opacity: 1; visibility: visible; transform: none; }
.navi-menue a { display: block; padding: 11px 14px; border-radius: 12px; text-decoration: none; color: var(--schnee); font-weight: 600; font-size: .94rem; line-height: 1.3; transition: background .2s, padding-left .3s var(--weich); }
.navi-menue a small { display: block; font-weight: 400; color: var(--rauch); font-size: .83rem; margin-top: 3px; }
.navi-menue a:hover { background: rgba(217, 187, 133, .1); padding-left: 20px; color: var(--gold-hell); }
.navi .knopf { margin-left: 12px; }
.menue-taste { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(244, 242, 236, .25); background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.menue-taste span, .menue-taste span::before, .menue-taste span::after { display: block; width: 17px; height: 1.5px; background: var(--schnee); transition: transform .35s var(--weich), background .2s; }
.menue-taste span { position: relative; }
.menue-taste span::before, .menue-taste span::after { content: ""; position: absolute; left: 0; }
.menue-taste span::before { top: -5px; } .menue-taste span::after { top: 5px; }
.menue-offen .menue-taste span { background: transparent; }
.menue-offen .menue-taste span::before { transform: translateY(5px) rotate(45deg); }
.menue-offen .menue-taste span::after { transform: translateY(-5px) rotate(-45deg); }

/* Hero: Film als Hintergrund, links die Botschaft, rechts die Vorführung */
.hero { background: var(--graphit); color: var(--rauch); padding: clamp(120px, 10vw, 150px) 0 0; overflow: hidden; isolation: isolate; min-height: min(100vh, 980px); display: flex; flex-direction: column; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(620px circle at var(--mx, 30%) var(--my, 30%), rgba(220, 192, 140, .12), transparent 62%); }
.hero-film { position: absolute; inset: 0; z-index: -2; }
.hero-film video { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 70% 50%; transform: translateY(var(--parallaxe, 0px)); opacity: .62; }
.hero-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 17, 19, .97) 0%, rgba(17, 17, 19, .9) 34%, rgba(17, 17, 19, .45) 62%, rgba(17, 17, 19, .25) 100%), linear-gradient(180deg, rgba(17, 17, 19, .2) 0%, transparent 30%, transparent 70%, var(--graphit) 100%); }
.hero-raster { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 5vw, 80px); align-items: center; flex: 1; }
.hero h1 { color: var(--schnee); font-size: clamp(2.8rem, 4.9vw, 4.9rem); }
h1 .dachzeile { display: flex; margin-bottom: 28px; }
.hero h1 .zeile { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero h1 .zeile > span { display: inline-block; transform: translateY(110%); animation: hoch 1.1s var(--weich) forwards; }
.hero h1 .zeile:nth-child(2) > span { animation-delay: .1s; }
.hero h1 .zeile:nth-child(3) > span { animation-delay: .2s; }
@keyframes hoch { to { transform: none; } }
.hero .dachzeile { color: var(--gold-hell); opacity: 0; animation: auftauchen .9s .1s var(--weich) forwards; }
.hero-seite { opacity: 0; animation: auftauchen 1s .5s var(--weich) forwards; margin-top: 30px; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero .lead { font-size: clamp(1.1rem, 1.5vw, 1.32rem); color: rgba(244, 242, 236, .76); max-width: 46ch; line-height: 1.5; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-hinweis { margin-top: 18px; font-size: .88rem; color: rgba(244, 242, 236, .5); }
.siegel { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: clamp(40px, 5vw, 64px); padding: 26px 0 34px; border-top: 1px solid rgba(244, 242, 236, .1); opacity: 0; animation: auftauchen 1s .9s var(--weich) forwards; }
.siegel li { display: inline-flex; align-items: center; gap: 10px; font: 500 .88rem/1.2 var(--sans); letter-spacing: .03em; color: rgba(244, 242, 236, .82); }
.siegel svg { width: 17px; height: 17px; color: var(--gold-hell); }

.vorfuehrung { position: relative; opacity: 0; animation: einschweben 1.3s .35s var(--weich) forwards; }
@keyframes einschweben { from { opacity: 0; transform: translateY(40px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
.vorfuehrung-buehne { position: relative; padding: 30px 0 44px 20px; }
.szene-etikett { position: absolute; z-index: 3; top: 6px; left: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--gold-schimmer); background-size: 200% 100%; animation: schimmer 6s linear infinite; color: var(--graphit); font: 600 .8rem/1 var(--sans); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7); }
.szene-etikett span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--graphit); color: var(--gold-hell); font: 600 .68rem/1 var(--anzeige); }
.szene-etikett.wechsel { animation: etikett .6s var(--weich), schimmer 6s linear infinite; }
@keyframes etikett { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
.app-fenster { position: relative; background: var(--papier); border-radius: 20px; box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; color: var(--tinte); transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin: 0 50%; transition: transform 1s var(--weich); }
.vorfuehrung:hover .app-fenster { transform: perspective(1600px) rotateY(-2deg); }
.app-leiste { display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: var(--elfenbein); border-bottom: 1px solid var(--linie); font: 600 .78rem/1 var(--sans); color: var(--gedaempft); }
.app-leiste i { width: 10px; height: 10px; border-radius: 50%; background: var(--linie-stark); }
.app-leiste span { margin-left: 10px; }
.app-zeile { margin: 0 24px; padding: 11px 0; border-bottom: 1px solid var(--nebel); font-size: .9rem; color: var(--gedaempft); }
.app-zeile b { color: var(--tinte); font-weight: 600; margin-left: 8px; }
.app-text { margin: 0 24px; padding: 18px 0 8px; min-height: 12.5em; max-height: 14em; overflow: hidden; font-size: 1.02rem; line-height: 1.6; white-space: pre-wrap; }
.app-text .roh { color: var(--gedaempft); }
.app-text .weg { text-decoration: line-through; text-decoration-color: var(--warnung); color: #b3b0a8; }
.app-text .markiert { background: rgba(80, 130, 230, .22); border-radius: 3px; transition: background .3s; }
.app-text .fix { background: rgba(220, 192, 140, .35); border-bottom: 2px solid var(--gold); border-radius: 2px; }
.app-text .sprecher { display: block; margin-bottom: 10px; animation: auftauchen .5s var(--weich) both; }
.app-text .sprecher b { display: block; font: 600 .74rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-tief); }
.app-kopf:empty, .app-chat:empty { display: none; }
.app-chat { margin: 14px 24px 0; }
.app-chat div { display: inline-block; max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--nebel); font-size: .92rem; }
.app-chat b { display: block; font: 600 .72rem/1.4 var(--sans); color: var(--gedaempft); }
.app-popup { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 58px; padding: 18px 20px; border-radius: 16px; background: rgba(17, 17, 19, .96); border: 1px solid rgba(220, 192, 140, .35); color: var(--schnee); font-size: .9rem; line-height: 1.5; white-space: pre-line; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .45s var(--weich), transform .45s var(--weich); pointer-events: none; }
.app-popup.sichtbar { opacity: 1; transform: none; }
.app-popup .etikett { color: var(--gold-hell); }
.app-popup small { display: block; margin-top: 10px; color: var(--rauch); font-size: .78rem; }
.sprechblase { position: absolute; z-index: 3; left: 0; bottom: 70px; max-width: 280px; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: rgba(17, 17, 19, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(220, 192, 140, .3); color: var(--schnee); font: 500 .95rem/1.4 var(--sans); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s var(--weich); }
.sprechblase.sichtbar { opacity: 1; transform: none; }
.sprechblase .etikett { color: var(--gold-hell); margin-bottom: 6px; }
.szenen-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0 20px; }
.szenen-leiste button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(244, 242, 236, .14); background: rgba(17, 17, 19, .5); color: rgba(244, 242, 236, .62); font: 500 .78rem/1 var(--sans); cursor: pointer; overflow: hidden; transition: color .3s, border-color .3s; }
.szenen-leiste button i { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 242, 236, .3); }
.szenen-leiste button:hover { color: var(--schnee); border-color: rgba(220, 192, 140, .5); }
.szenen-leiste button[aria-selected="true"] { color: var(--schnee); border-color: rgba(220, 192, 140, .6); }
.szenen-leiste button[aria-selected="true"] i { background: var(--gold-hell); }
.szenen-leiste button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold-hell); transform-origin: 0 50%; transform: scaleX(0); }
.szenen-leiste button.laeuft::after { animation: fortschreiten var(--szene-dauer, 7s) linear forwards; }
@keyframes fortschreiten { to { transform: scaleX(1); } }
.app-text .zeiger { background: var(--gold); }
.app-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 14px 24px 34px; }
.app-senden { padding: 9px 18px; border-radius: 999px; background: var(--tinte); color: var(--schnee); font: 600 .82rem/1 var(--sans); }
.dauer { color: var(--gold-tief); font: 600 .84rem/1 var(--sans); opacity: 0; transition: opacity .4s; }
.dauer.sichtbar { opacity: 1; }
.aufnahme-pille { position: absolute; z-index: 2; bottom: 0; left: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 999px; background: rgba(17, 17, 19, .82); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(220, 192, 140, .35); color: var(--schnee); font: 600 .82rem/1 var(--sans); letter-spacing: .02em; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); }
.aufnahme-pille > i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-hell); opacity: .45; }
.hoert .aufnahme-pille > i { opacity: 1; animation: leuchten 1.2s ease-out infinite; }
@keyframes leuchten { from { box-shadow: 0 0 0 0 rgba(220, 192, 140, .7); } to { box-shadow: 0 0 0 12px rgba(220, 192, 140, 0); } }
.aufnahme-pille [data-status] { min-width: 8.5em; }
.pegel { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.pegel b { width: 3px; height: 4px; border-radius: 2px; background: rgba(220, 192, 140, .35); transition: height .12s linear, background .2s; }
.hoert .pegel b { background: var(--gold-hell); }
.kappe { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(244, 242, 236, .25); border-bottom-width: 3px; font: 600 .76rem/1 var(--sans); color: var(--schnee); transition: transform .12s, border-bottom-width .12s, background .2s, color .2s; }
.hoert .kappe { transform: translateY(2px); border-bottom-width: 1px; background: var(--gold-hell); color: var(--graphit); border-color: var(--gold-hell); }
.lokal-marke { position: absolute; z-index: 2; right: -18px; top: 0; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(17, 17, 19, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(220, 192, 140, .3); color: rgba(244, 242, 236, .7); font-size: .8rem; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); }
.lokal-marke svg { width: 22px; height: 22px; color: var(--gold-hell); }
.lokal-marke b { display: block; color: var(--schnee); font-size: .9rem; margin-bottom: 2px; }
.zeiger { display: inline-block; width: 2px; height: 1.1em; background: var(--gold-hell); vertical-align: -3px; animation: blinken 1s steps(2, start) infinite; }
@keyframes blinken { to { visibility: hidden; } }

/* Laufband mit Programmen */
.laufband { position: relative; background: var(--graphit); border-top: 1px solid var(--graphit-linie); padding: 34px 0; overflow: hidden; }
.laufband::before, .laufband::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--graphit), rgba(17, 17, 19, 0)); }
.laufband::before { left: 0; } .laufband::after { right: 0; transform: scaleX(-1); }
.laufband-titel { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 26px; font: 600 .74rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hell); }
.laufband-titel::before, .laufband-titel::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.laufband-spur { display: flex; gap: 56px; width: max-content; animation: laufen 60s linear infinite; }
.laufband:hover .laufband-spur { animation-play-state: paused; }
.laufband span { display: inline-flex; align-items: center; gap: 12px; font: 600 1.12rem/1 var(--anzeige); letter-spacing: -.02em; color: rgba(244, 242, 236, .5); white-space: nowrap; transition: color .3s; }
.laufband span svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.laufband span:hover { color: var(--schnee); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Highlights: große Bildflächen mit Überschrift im Bild */
.highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.highlight { position: relative; display: block; border-radius: 32px; overflow: hidden; color: var(--schnee); text-decoration: none; isolation: isolate; min-height: 520px; background: var(--graphit); }
.highlight.voll { grid-column: 1 / -1; min-height: min(760px, 78vh); }
.highlight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.06); transition: transform 1.6s var(--weich); }
.highlight:hover img { transform: scale(1.1); }
.highlight::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 17, 19, .1) 30%, rgba(17, 17, 19, .82) 100%); }
.highlight.voll img { object-position: 72% 50%; }
.highlight.voll::after { background: linear-gradient(90deg, rgba(17, 17, 19, .82) 0%, rgba(17, 17, 19, .35) 55%, rgba(17, 17, 19, 0) 100%); }
.highlight-text { position: absolute; inset: auto clamp(26px, 4vw, 56px) clamp(26px, 4vw, 56px); max-width: 520px; }
.highlight.voll .highlight-text { inset: 50% auto auto clamp(26px, 5vw, 80px); transform: translateY(-50%); max-width: 560px; }
.highlight .dachzeile { color: var(--gold-hell); margin-bottom: 18px; }
.highlight h3 { color: var(--schnee); font: 640 clamp(1.9rem, 3.2vw, 3rem)/1.02 var(--anzeige); letter-spacing: -.04em; }
.highlight p { margin-top: 16px; font-size: 1.08rem; color: rgba(244, 242, 236, .8); max-width: 44ch; }
.highlight .mehr { color: var(--schnee); border-color: var(--gold-hell); }

/* Nutzen: vier Geschäftsvorteile */
.nutzen { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linie-stark); }
.nutzen-karte { position: relative; padding: 44px 34px 10px 0; margin-right: 34px; }
.nutzen-karte:last-child { margin-right: 0; }
.nutzen-karte::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: var(--gold-verlauf); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--weich); transition-delay: var(--verzug, 0ms); }
.nutzen-karte.sichtbar::before { transform: none; }
.nutzen-wort { font: 600 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-tief); }
.nutzen-zahl { display: block; margin: 20px 0 16px; font: 700 clamp(3.4rem, 6vw, 5.4rem)/.95 var(--anzeige); letter-spacing: -.06em; color: var(--tinte); white-space: nowrap; }
.nutzen-zahl small { font: 500 1rem/1 var(--sans); letter-spacing: 0; color: var(--gedaempft); margin-left: 6px; }
.nutzen-karte h3 { font: 640 1.5rem/1.1 var(--anzeige); letter-spacing: -.035em; margin-bottom: 10px; }
.nutzen-karte p { font-size: .97rem; }

/* Geschichte: klebende Vorführung, die beim Rollen ihre Stufe wechselt */
.geschichte-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 96px); align-items: start; }
.klebt { position: sticky; top: 110px; }
.geraet { background: var(--papier); border: 1px solid var(--linie); border-radius: 26px; box-shadow: var(--schatten); overflow: hidden; }
.geraet-leiste { display: flex; align-items: center; gap: 7px; padding: 15px 20px; border-bottom: 1px solid var(--linie); font: 600 .8rem/1 var(--sans); letter-spacing: .04em; color: var(--gedaempft); }
.geraet-leiste i { width: 10px; height: 10px; border-radius: 50%; background: var(--linie-stark); }
.geraet-leiste span { margin-left: 10px; }
.geraet-inhalt { padding: 26px 28px 30px; min-height: 380px; position: relative; }
.zeile-mail { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--nebel); font-size: .92rem; color: var(--gedaempft); }
.zeile-mail b { color: var(--tinte); font-weight: 600; }
.stufe { position: absolute; inset: 124px 28px 26px; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--weich), transform .6s var(--weich); font-size: 1.02rem; color: var(--tinte); white-space: pre-line; }
.stufe.aktiv { opacity: 1; transform: none; }
.stufe .roh { color: var(--gedaempft); }
.stufe .weg { text-decoration: line-through; text-decoration-color: var(--warnung); color: #b3b0a8; }
.stufe .tastenbild { display: grid; place-items: center; height: 100%; white-space: normal; }
.grosse-taste { display: inline-grid; place-items: center; min-width: 170px; height: 78px; padding: 0 26px; border-radius: 16px; background: var(--elfenbein); border: 1px solid var(--linie-stark); border-bottom-width: 6px; font: 600 1rem/1 var(--sans); letter-spacing: .06em; color: var(--tinte); animation: tastendruck 2.4s var(--weich) infinite; }
@keyframes tastendruck { 0%, 30%, 100% { transform: none; border-bottom-width: 6px; background: var(--elfenbein); } 40%, 85% { transform: translateY(4px); border-bottom-width: 2px; background: var(--gold-hell); } }
.welle { display: flex; align-items: center; justify-content: center; gap: 5px; height: 110px; white-space: normal; }
.welle b { width: 5px; border-radius: 3px; background: var(--gold-verlauf); height: 20%; animation: wogen 1.1s ease-in-out infinite alternate; }
@keyframes wogen { to { height: 100%; } }
.schritte-lang { display: grid; gap: clamp(60px, 16vh, 170px); padding: clamp(36px, 6vh, 70px) 0 clamp(60px, 14vh, 150px); }
.schritt-lang { opacity: .28; transition: opacity .6s; }
.schritt-lang.aktiv { opacity: 1; }
.schritt-lang .nummer { font: 700 clamp(3.4rem, 6vw, 5.4rem)/1 var(--anzeige); letter-spacing: -.05em; color: var(--gold); display: block; margin-bottom: 14px; width: max-content; padding-right: .1em; }
.schritt-lang h3 { font: 640 clamp(1.9rem, 3vw, 2.7rem)/1.05 var(--anzeige); letter-spacing: -.04em; margin-bottom: 14px; }
.schritt-lang p { font-size: 1.1rem; max-width: 40ch; }

/* Tempo und Rechner */
.tempo { background: var(--papier); border-block: 1px solid var(--linie); }
.tempo-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.balkenpaar { display: grid; gap: 26px; margin-top: 36px; }
.balken header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-weight: 600; color: var(--tinte); }
.balken header b { font: 700 2.4rem/1 var(--anzeige); letter-spacing: -.05em; }
.balken header b small { font: 500 .8rem/1 var(--sans); letter-spacing: .06em; color: var(--gedaempft); margin-left: 6px; }
.bahn { height: 10px; border-radius: 5px; background: var(--nebel); overflow: hidden; }
.bahn i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--linie-stark); transition: width 1.8s var(--weich) .15s; }
.bahn.gold i { background: var(--gold-verlauf); }
.sichtbar .bahn i { width: var(--weite); }
.quelle { margin-top: 22px; font-size: .82rem; color: var(--gedaempft); }
.rechner { background: var(--graphit); color: var(--rauch); border-radius: 28px; padding: clamp(26px, 3.4vw, 44px); position: relative; overflow: hidden; }
.rechner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 100% 0%, rgba(217, 187, 133, .16), transparent 70%); pointer-events: none; }
.rechner > * { position: relative; }
.rechner h3 { color: var(--schnee); font: 640 1.9rem/1.05 var(--anzeige); letter-spacing: -.04em; margin-bottom: 26px; }
.regler { display: grid; gap: 22px; }
.regler label { display: grid; gap: 12px; font: 500 .9rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(244, 242, 236, .75); }
.regler label span { display: flex; justify-content: space-between; }
.regler output { color: var(--gold-hell); font-weight: 650; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-hell) var(--fuell, 50%), var(--graphit-linie) var(--fuell, 50%)); outline-offset: 8px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--schnee); border: 5px solid var(--gold); cursor: grab; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); transition: transform .2s var(--feder); }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.2); cursor: grabbing; }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--schnee); border: 5px solid var(--gold); cursor: grab; }
.ergebnis-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--graphit-linie); }
.ergebnis-zeile b { display: block; font: 700 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--anzeige); letter-spacing: -.05em; color: var(--schnee); white-space: nowrap; }
.ergebnis-zeile div:last-child b { color: var(--gold-hell); }
.ergebnis-zeile span { display: block; margin-top: 8px; font-size: .86rem; color: rgba(244, 242, 236, .6); }
.kleingedrucktes { margin-top: 20px; font-size: .78rem; line-height: 1.5; color: rgba(244, 242, 236, .42); }

/* Kacheln mit kleinen Vorführungen */
.kacheln { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.kachel { --sx: 50%; --sy: 0%; position: relative; grid-column: span 2; background: var(--papier); border: 1px solid var(--linie); border-radius: 28px; padding: 34px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 360px; transition: transform .5s var(--weich), box-shadow .5s, border-color .5s; }
.kachel.breit { grid-column: span 3; }
.kachel.gross { grid-column: span 4; }
.kachel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(217, 187, 133, .2), transparent 60%); opacity: 0; transition: opacity .4s; }
.kachel:hover { transform: translateY(-5px); box-shadow: var(--schatten); border-color: rgba(184, 147, 90, .55); }
.kachel:hover::before { opacity: 1; }
.kachel h3 { margin-bottom: 8px; font-size: 1.32rem; }
.kachel p { font-size: .98rem; }
.kachel-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tastenhinweis { flex: none; display: inline-block; padding: 6px 11px; border-radius: 8px; background: var(--elfenbein); border: 1px solid var(--linie); border-bottom-width: 2px; font: 600 .72rem/1 var(--sans); letter-spacing: .06em; color: var(--tinte); white-space: nowrap; }
.mini { margin-top: auto; padding-top: 22px; }
.mini-feld { background: var(--elfenbein); border: 1px solid var(--linie); border-radius: 14px; padding: 16px 18px; font-size: .92rem; line-height: 1.55; color: var(--tinte); }
.mini-linien { display: grid; gap: 9px; }
.mini-linien i { display: block; height: 7px; border-radius: 4px; background: var(--linie); transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--weich); transition-delay: calc(var(--n) * 130ms + 250ms); }
.mini-linien i:nth-child(1) { width: 92%; --n: 0; } .mini-linien i:nth-child(2) { width: 100%; --n: 1; } .mini-linien i:nth-child(3) { width: 78%; --n: 2; } .mini-linien i:nth-child(4) { width: 55%; --n: 3; background: var(--gold-verlauf); }
.sichtbar .mini-linien i { transform: none; }
.mini-welle { display: flex; align-items: center; gap: 4px; height: 46px; margin-bottom: 14px; }
.mini-welle b { flex: 1; max-width: 5px; border-radius: 3px; background: var(--gold-verlauf); height: 25%; animation: wogen 1s ease-in-out infinite alternate; }
.durch { position: relative; color: var(--gedaempft); }
.durch::after { content: ""; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: var(--warnung); transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--weich) .7s; }
.sichtbar .durch::after { transform: none; }
.ersatz { display: inline-block; font-weight: 650; color: var(--gold-tief); opacity: 0; transform: translateY(6px); transition: opacity .6s 1.2s, transform .6s var(--weich) 1.2s; }
.sichtbar .ersatz { opacity: 1; transform: none; }
.markiert { background: linear-gradient(var(--gold-hell), var(--gold-hell)) 0 100% / 0 100% no-repeat; transition: background-size .9s var(--weich) .5s; border-radius: 3px; padding: 0 2px; }
.sichtbar .markiert { background-size: 100% 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips span { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--linie-stark); font: 600 .8rem/1 var(--sans); color: var(--tinte); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .5s, transform .5s var(--feder); transition-delay: calc(var(--n) * 110ms + 1100ms); }
.chips span:nth-child(1) { --n: 0; } .chips span:nth-child(2) { --n: 1; } .chips span:nth-child(3) { --n: 2; } .chips span:nth-child(4) { --n: 3; }
.sichtbar .chips span { opacity: 1; transform: none; }
.koepfe { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.koepfe i { width: 38px; height: 38px; border-radius: 50%; background: var(--nebel); border: 1px solid var(--linie-stark); position: relative; }
.koepfe i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; animation: sprechen 3.6s ease-in-out infinite; animation-delay: calc(var(--n) * 1.2s); }
.koepfe i:nth-child(1) { --n: 0; background: var(--tinte); } .koepfe i:nth-child(2) { --n: 1; } .koepfe i:nth-child(3) { --n: 2; background: var(--gold-hell); }
@keyframes sprechen { 0%, 30%, 100% { opacity: 0; transform: scale(.9); } 10%, 22% { opacity: 1; transform: scale(1); } }
.haken-liste { display: grid; gap: 9px; font-size: .9rem; color: var(--tinte); }
.haken-liste li { display: flex; gap: 10px; align-items: center; opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .5s var(--weich); transition-delay: calc(var(--n) * 260ms + 500ms); }
.haken-liste li:nth-child(1) { --n: 0; } .haken-liste li:nth-child(2) { --n: 1; } .haken-liste li:nth-child(3) { --n: 2; }
.sichtbar .haken-liste li { opacity: 1; transform: none; }
.haken-liste li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 5px; border: 1.5px solid var(--gold); background: var(--gold-verlauf) center / 0 0 no-repeat; transition: background-size .4s var(--feder); transition-delay: calc(var(--n) * 260ms + 1100ms); }
.sichtbar .haken-liste li::before { background-size: 100% 100%; }
.beleg-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: center; }
.beleg-bild { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; }
.beleg-bild img { width: 100%; height: 100%; object-fit: cover; }
.beleg-bild::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; top: 0; background: var(--gold-hell); box-shadow: 0 0 22px 6px rgba(217, 187, 133, .55); animation: abtasten 3.4s ease-in-out infinite; }
@keyframes abtasten { 0%, 100% { top: 6%; } 50% { top: 92%; } }
.felder { display: grid; gap: 9px; font-size: .88rem; }
.felder div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--weich); transition-delay: calc(var(--n) * 140ms + 600ms); }
.felder div:nth-child(1) { --n: 0; } .felder div:nth-child(2) { --n: 1; } .felder div:nth-child(3) { --n: 2; } .felder div:nth-child(4) { --n: 3; }
.sichtbar .felder div { opacity: 1; transform: none; }
.felder span { color: var(--gedaempft); } .felder b { color: var(--tinte); font-weight: 650; }
.luecke { display: inline-block; padding: 0 6px; border-radius: 5px; background: var(--nebel); color: transparent; transition: background .5s 1s, color .5s 1.1s; font-weight: 650; }
.sichtbar .luecke { background: rgba(217, 187, 133, .25); color: var(--gold-tief); }

/* Einsatzbeispiele mit Bild */
.reiter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 38px; }
.reiter button { padding: 13px 20px; border-radius: 999px; border: 1px solid var(--linie-stark); background: transparent; font: 600 .92rem/1 var(--sans); color: var(--text); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.reiter button:hover { border-color: var(--gold); color: var(--tinte); }
.reiter button[aria-selected="true"] { background: var(--tinte); color: var(--schnee); border-color: var(--tinte); }
.szene { display: none; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 5vw, 80px); align-items: center; padding-bottom: 30px; }
.szene.aktiv { display: grid; }
.szene.aktiv .szene-bild { animation: bildauf 1s var(--weich) both; }
.szene.aktiv .szene-text > * { animation: auftauchen .8s var(--weich) both; }
.szene.aktiv .szene-text > *:nth-child(2) { animation-delay: .08s; } .szene.aktiv .szene-text > *:nth-child(3) { animation-delay: .16s; } .szene.aktiv .szene-text > *:nth-child(4) { animation-delay: .24s; }
@keyframes bildauf { from { clip-path: inset(0 0 100% 0 round 26px); } to { clip-path: inset(-40px -40px -40px -40px round 26px); } }
.szene-bild { position: relative; }
.szene-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px; }
.karte-ueber { position: absolute; right: -18px; bottom: -26px; width: min(370px, 84%); padding: 18px 20px; border-radius: 18px; background: rgba(17, 17, 19, .9); backdrop-filter: blur(16px); border: 1px solid rgba(217, 187, 133, .3); color: var(--schnee); font-size: .86rem; line-height: 1.5; white-space: pre-line; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); max-height: 78%; overflow: hidden; }
.etikett { display: block; font: 600 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; color: var(--gold-hell); font-style: normal; }
.szene h3 { font: 640 clamp(2rem, 3.2vw, 2.9rem)/1.02 var(--anzeige); letter-spacing: -.04em; margin-bottom: 16px; }
.zitat { margin-top: 22px; padding: 16px 20px; border-left: 2px solid var(--gold); background: var(--papier); border-radius: 0 14px 14px 0; color: var(--gedaempft); font-size: .96rem; }
.zitat .etikett { color: var(--gold-tief); }
.mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 600; text-decoration: none; color: var(--tinte); border-bottom: 1px solid var(--gold); padding-bottom: 4px; }
.mehr svg { width: 15px; height: 15px; transition: transform .3s var(--weich); }
.mehr:hover svg { transform: translateX(5px); }

.punkte { display: grid; gap: 10px; margin-top: 20px; }
.punkte li { display: flex; gap: 12px; font-size: .96rem; color: var(--tinte); }
.punkte svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--gold); }
.dunkel .punkte li { color: rgba(244, 242, 236, .85); }

/* Dunkle Sektionen */
.dunkel { background: var(--graphit); color: var(--rauch); overflow: hidden; isolation: isolate; }
.dunkel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 45% at 85% 0%, rgba(217, 187, 133, .12), transparent 70%); }
.dunkel h2, .dunkel h3 { color: var(--schnee); }
.dunkel .dachzeile { color: var(--gold-hell); }
.dunkel a { color: var(--gold-hell); }
.dunkel strong { color: var(--schnee); }
.tresor { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.tresor-bild { position: relative; }
.tresor-bild img { width: 100%; border-radius: 28px; aspect-ratio: 4 / 3; object-fit: cover; }
.tresor-bild::before { content: ""; position: absolute; inset: -14px; border-radius: 40px; border: 1px solid rgba(217, 187, 133, .22); pointer-events: none; }
.marke-null { position: absolute; left: -22px; bottom: 34px; padding: 18px 24px; border-radius: 18px; background: rgba(17, 17, 19, .82); backdrop-filter: blur(16px); border: 1px solid rgba(217, 187, 133, .32); }
.marke-null b { display: block; font: 700 2.8rem/1 var(--anzeige); letter-spacing: -.05em; color: var(--schnee); }
.marke-null span { font-size: .8rem; letter-spacing: .08em; color: var(--rauch); }
.saeulen { display: grid; margin-top: 34px; }
.saeule { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--graphit-linie); }
.saeule svg { width: 24px; height: 24px; color: var(--gold-hell); margin-top: 3px; }
.saeule h3 { margin-bottom: 6px; font-size: 1.32rem; }
.saeule p { font-size: .98rem; }
.pruefliste { margin-top: clamp(60px, 8vw, 100px); }
.pruefliste > h3 { font: 640 clamp(1.8rem, 2.8vw, 2.5rem)/1.05 var(--anzeige); letter-spacing: -.04em; margin-bottom: 26px; }
.tabelle-huelle { overflow-x: auto; border: 1px solid var(--graphit-linie); border-radius: var(--radius); background: var(--graphit-2); }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { text-align: left; padding: 18px 24px; border-bottom: 1px solid var(--graphit-linie); font-size: .96rem; vertical-align: top; }
thead th { font: 600 .72rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rauch); }
thead th:last-child { color: var(--gold-hell); }
tbody th { color: var(--schnee); font-weight: 600; width: 32%; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .3s; } tbody tr:hover { background: rgba(217, 187, 133, .05); }
td.ja { color: var(--schnee); }
td.ja::before { content: "✓"; color: var(--gold-hell); font-weight: 700; margin-right: 10px; }
td.nein::before { content: "✕"; color: var(--warnung); font-weight: 700; margin-right: 10px; }
.fussnote { margin-top: 20px; font-size: .84rem; color: rgba(244, 242, 236, .45); max-width: 760px; }
.hell .tabelle-huelle { border-color: var(--linie); background: var(--papier); }
.hell th, .hell td { border-bottom-color: var(--linie); }
.hell thead th { color: var(--gedaempft); } .hell thead th:last-child { color: var(--gold-tief); }
.hell tbody th, .hell td.ja { color: var(--tinte); } .hell td.ja::before { color: var(--gold-tief); }
.hell .fussnote { color: var(--gedaempft); }

/* Branchen */
.branchen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.branche { position: relative; display: block; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 4; text-decoration: none; color: var(--schnee); isolation: isolate; }
.branche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--weich), filter .8s; filter: saturate(.85); }
.branche::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 17, 19, 0) 35%, rgba(17, 17, 19, .9) 100%); }
.branche:hover img { transform: scale(1.07); filter: saturate(1); }
.branche-text { position: absolute; inset: auto 22px 22px; }
.branche h3 { color: var(--schnee); font: 640 1.7rem/1.05 var(--anzeige); letter-spacing: -.035em; }
.branche p { font-size: .88rem; color: rgba(244, 242, 236, .78); margin-top: 8px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--weich), opacity .5s; }
.branche:hover p, .branche:focus-visible p { max-height: 9em; opacity: 1; }
.branche .linie { display: block; height: 1px; width: 36px; background: var(--gold-hell); margin-top: 14px; transition: width .6s var(--weich); }
.branche:hover .linie { width: 100%; }

/* Ablauf */
.ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: s; position: relative; }
.ablauf::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--linie-stark); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--weich) .2s; }
.ablauf.sichtbar::before { transform: none; }
.ablauf li { counter-increment: s; padding: 0 28px 0 0; }
.ablauf li::before { content: "0" counter(s); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--elfenbein); border: 1px solid var(--gold); font: 600 1rem/1 var(--anzeige); color: var(--gold-tief); margin-bottom: 26px; position: relative; }
.ablauf h3 { font: 640 1.6rem/1.1 var(--anzeige); letter-spacing: -.035em; margin-bottom: 10px; }

/* Preise */
.umschalter { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; font-weight: 600; color: var(--tinte); }
.umschalter button { width: 58px; height: 30px; border-radius: 15px; border: 1px solid var(--linie-stark); background: var(--papier); position: relative; cursor: pointer; }
.umschalter button::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--tinte); transition: transform .4s var(--feder), background .3s; }
.umschalter button[aria-checked="true"]::after { transform: translateX(28px); background: var(--gold); }
.umschalter .spar { font: 600 .74rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-tief); border: 1px solid var(--gold); padding: 6px 10px; border-radius: 999px; }
.preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.preis { position: relative; background: var(--papier); border: 1px solid var(--linie); border-radius: 26px; padding: 36px 30px; display: flex; flex-direction: column; transition: transform .5s var(--weich), box-shadow .5s; }
.preis:hover { transform: translateY(-6px); box-shadow: var(--schatten); }
.preis.empfohlen { background: var(--graphit); color: var(--rauch); border-color: transparent; }
.preis.empfohlen::before { content: ""; position: absolute; inset: -1px; border-radius: 27px; padding: 1px; background: var(--gold-verlauf); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.preis.empfohlen h3, .preis.empfohlen .betrag { color: var(--schnee); }
.preis.empfohlen li { color: rgba(244, 242, 236, .85); }
.band { position: absolute; top: 22px; right: 22px; font: 600 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hell); }
.preis h3 { font: 640 1.8rem/1.05 var(--anzeige); letter-spacing: -.035em; }
.preis .fuer { margin-top: 10px; font-size: .94rem; min-height: 3.2em; }
.betrag { margin: 26px 0 6px; font: 700 4.6rem/1 var(--anzeige); letter-spacing: -.06em; color: var(--tinte); display: flex; align-items: baseline; gap: 8px; }
.betrag small { font: 500 1rem/1 var(--sans); letter-spacing: 0; color: var(--gedaempft); }
.betrag .zahl { display: inline-block; transition: opacity .25s, transform .25s var(--weich); }
.betrag .zahl.wechsel { opacity: 0; transform: translateY(-10px); }
.preis .netto { font-size: .84rem; color: var(--gedaempft); }
.preis ul { margin: 28px 0 32px; display: grid; gap: 12px; }
.preis li { display: flex; gap: 12px; font-size: .96rem; color: var(--tinte); }
.preis li svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--gold); }
.preis .knopf { margin-top: auto; width: 100%; }
.preis-hinweis { margin-top: 28px; font-size: .92rem; color: var(--gedaempft); }

/* Keine Zusatzkosten */
.alles-drin { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 60px); padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--papier); border: 1px solid var(--linie); }
.alles-drin-kopf h3 { font: 640 clamp(1.7rem, 2.6vw, 2.3rem)/1.05 var(--anzeige); letter-spacing: -.04em; margin-bottom: 14px; }
.alles-drin-kopf p { font-size: 1.02rem; }
.alles-drin-liste { display: grid; gap: 18px; align-content: center; }
.alles-drin-liste li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.alles-drin-liste svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--gold); color: var(--papier); margin-top: 2px; }
.alles-drin-liste b { display: block; color: var(--tinte); font-size: 1.05rem; }
.alles-drin-liste span { display: block; font-size: .96rem; margin-top: 2px; }

/* Fragen */
.fragen { display: grid; gap: 0; border-top: 1px solid var(--linie-stark); }
details { border-bottom: 1px solid var(--linie-stark); }
summary { list-style: none; cursor: pointer; padding: 26px 56px 26px 0; position: relative; }
summary::-webkit-details-marker { display: none; }
summary h3 { font: 600 clamp(1.3rem, 2vw, 1.65rem)/1.2 var(--anzeige); letter-spacing: -.03em; transition: color .3s; }
summary:hover h3 { color: var(--gold-tief); }
summary::before, summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 1.5px; background: var(--gold-tief); transition: transform .45s var(--weich); }
summary::after { transform: rotate(90deg); }
details[open] summary::after { transform: rotate(0deg); }
.antwort { overflow: hidden; }
.antwort p { padding: 0 60px 28px 0; max-width: 70ch; }

/* Anmeldung */
.anmeldung { position: relative; border-radius: 34px; padding: clamp(36px, 5.4vw, 80px); color: var(--rauch); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 70px); align-items: center; overflow: hidden; isolation: isolate; background: var(--graphit); }
.anmeldung::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/assets/bilder/hero-klein.webp") 30% 50% / cover no-repeat; opacity: .5; }
.anmeldung::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 17, 19, .6) 0%, rgba(17, 17, 19, .93) 58%); }
.anmeldung h2 { color: var(--schnee); }
.anmeldung .dachzeile { color: var(--gold-hell); }
.anmeldung p { margin-top: 18px; color: rgba(244, 242, 236, .75); }
.anmeldung ul { margin-top: 24px; display: grid; gap: 10px; }
.anmeldung li { display: flex; gap: 12px; font-size: .96rem; color: rgba(244, 242, 236, .85); }
.anmeldung li svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--gold-hell); }
form { background: rgba(24, 24, 27, .78); backdrop-filter: blur(18px); border: 1px solid rgba(217, 187, 133, .22); border-radius: 24px; padding: 28px; display: grid; gap: 16px; }
label { display: grid; gap: 8px; font: 600 .78rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 242, 236, .7); }
input[type="text"], input[type="email"], select { height: 54px; border-radius: 14px; border: 1px solid var(--graphit-linie); background: rgba(17, 17, 19, .8); color: var(--schnee); padding: 0 16px; font: 400 1rem var(--sans); letter-spacing: 0; text-transform: none; width: 100%; transition: border-color .3s, box-shadow .3s; }
input::placeholder { color: #6c6c73; }
input[type="text"]:focus, input[type="email"]:focus, select:focus { outline: none; border-color: var(--gold-hell); box-shadow: 0 0 0 4px rgba(217, 187, 133, .12); }
.klein { font-size: .8rem; line-height: 1.5; color: rgba(244, 242, 236, .5) !important; margin-top: 0 !important; }
.klein a { color: var(--gold-hell); }
.meldung { font-size: .92rem; padding: 13px 15px; border-radius: 12px; background: rgba(217, 187, 133, .1); border: 1px solid rgba(217, 187, 133, .4); color: var(--schnee) !important; margin-top: 0 !important; }
.meldung[hidden] { display: none; }
.nur-bots { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Unterseiten */
.unter-hero { background: var(--graphit); color: var(--rauch); padding: clamp(130px, 14vw, 180px) 0 clamp(60px, 8vw, 110px); overflow: hidden; isolation: isolate; }
.unter-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(620px circle at var(--mx, 80%) var(--my, 10%), rgba(217, 187, 133, .13), transparent 62%); }
.brotkrumen { font-size: .82rem; letter-spacing: .06em; color: rgba(244, 242, 236, .45); margin-bottom: 30px; }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 10px; }
.brotkrumen li + li::before { content: "·"; margin-right: 10px; color: var(--gold); }
.brotkrumen a { color: inherit; text-decoration: none; } .brotkrumen a:hover { color: var(--gold-hell); }
.unter-hero-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.unter-hero h1 { color: var(--schnee); font-size: clamp(2.3rem, 4vw, 3.8rem); }
.unter-hero .dachzeile { color: var(--gold-hell); }
.unter-hero .lead { margin-top: 24px; font-size: 1.12rem; color: rgba(244, 242, 236, .72); max-width: 52ch; }
.unter-bild { position: relative; }
.unter-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.unter-bild::before { content: ""; position: absolute; inset: -14px; border-radius: 40px; border: 1px solid rgba(217, 187, 133, .22); pointer-events: none; }
.zahlenband { background: var(--graphit); border-top: 1px solid var(--graphit-linie); padding: 0; }
.zahlenband ul { display: grid; grid-template-columns: repeat(3, 1fr); }
.zahlenband li { padding: 34px 28px; border-left: 1px solid var(--graphit-linie); }
.zahlenband li:first-child { border-left: 0; padding-left: 0; }
.zahlenband b { display: block; font: 700 clamp(2.2rem, 3.6vw, 3.3rem)/1 var(--anzeige); letter-spacing: -.05em; color: var(--schnee); }
.zahlenband span { display: block; margin-top: 10px; font-size: .9rem; color: var(--rauch); max-width: 30ch; }
.kapitel { display: grid; grid-template-columns: 150px 1fr; gap: clamp(20px, 4vw, 60px); padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--linie-stark); }
.kapitel:first-child { border-top: 0; padding-top: 0; }
.kapitel-nr { font: 700 clamp(3rem, 5vw, 4.6rem)/1 var(--anzeige); letter-spacing: -.05em; color: var(--gold); width: max-content; padding-right: .1em; }
.kapitel h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin-bottom: 22px; }
.fliesstext { display: grid; gap: 18px; max-width: 68ch; }
.fliesstext ul { display: grid; gap: 12px; }
.fliesstext ul li { position: relative; padding-left: 34px; }
.fliesstext ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.vorher-nachher { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vn { border-radius: var(--radius); padding: 28px 30px; white-space: pre-line; font-size: .98rem; }
.vn.vorher { background: var(--nebel); color: var(--gedaempft); }
.vn.nachher { background: var(--graphit); color: var(--schnee); border: 1px solid rgba(217, 187, 133, .3); box-shadow: var(--schatten); }
.vn.vorher .etikett { color: var(--gedaempft); }
.vorlage { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--schatten); }
.vorlage dl { margin: 0; display: grid; grid-template-columns: 210px 1fr; gap: 12px 20px; }
.vorlage dt { font-weight: 600; color: var(--tinte); font-size: .95rem; }
.vorlage dd { margin: 0; border-bottom: 1px dotted var(--linie-stark); min-height: 1.6em; }
.hinweiskasten { background: rgba(217, 187, 133, .16); border: 1px solid rgba(184, 147, 90, .45); border-radius: 16px; padding: 18px 22px; font-size: .96rem; color: #4d3d22; }
.vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vorteil { --sx: 50%; --sy: 0%; position: relative; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: 30px 28px; overflow: hidden; isolation: isolate; transition: transform .5s var(--weich), box-shadow .5s, border-color .5s; }
.vorteil::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(380px circle at var(--sx) var(--sy), rgba(217, 187, 133, .2), transparent 60%); opacity: 0; transition: opacity .4s; }
.vorteil:hover { transform: translateY(-5px); box-shadow: var(--schatten); border-color: rgba(184, 147, 90, .55); }
.vorteil:hover::before { opacity: 1; }
.vorteil svg { width: 26px; height: 26px; color: var(--gold-tief); margin-bottom: 20px; }
.dunkel .vorteil { background: var(--graphit-2); border-color: var(--graphit-linie); }
.dunkel .vorteil svg { color: var(--gold-hell); }
.dunkel .vorteil p { color: var(--rauch); }
.vorteil h3 { margin-bottom: 8px; font-size: 1.4rem; }
.vorteil p { font-size: .97rem; }
.verwandt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.verwandt a { display: block; padding: 28px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--papier); text-decoration: none; color: inherit; transition: transform .5s var(--weich), border-color .4s, box-shadow .5s; }
.verwandt a:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--schatten); }
.verwandt h3 { font: 640 1.5rem/1.1 var(--anzeige); letter-spacing: -.035em; margin-bottom: 10px; }
.verwandt p { font-size: .95rem; }
.recht { padding-top: clamp(140px, 14vw, 180px); }
.recht-kopf { background: var(--graphit); height: 96px; }
.recht h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 30px; }
.recht h2 { font-size: 1.9rem; margin-top: 26px; }

/* Fuß */
.fuss { background: var(--graphit); color: var(--rauch); padding: clamp(60px, 8vw, 100px) 0 36px; font-size: .94rem; border-top: 1px solid var(--graphit-linie); overflow: hidden; }
.fuss-raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.fuss h2 { font: 600 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 20px; }
.fuss ul { display: grid; gap: 11px; }
.fuss a { color: rgba(244, 242, 236, .72); text-decoration: none; transition: color .25s, padding-left .3s var(--weich); }
.fuss li a:hover { color: var(--gold-hell); padding-left: 6px; }
.fuss p { margin-top: 20px; max-width: 34ch; color: rgba(244, 242, 236, .5); }
.fuss-wort { margin-top: clamp(50px, 7vw, 90px); font: 800 clamp(3rem, 12.4vw, 11.4rem)/.9 var(--anzeige); letter-spacing: -.06em; white-space: nowrap; background: linear-gradient(180deg, rgba(217, 187, 133, .3), rgba(244, 242, 236, .02)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.fuss-unten { margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--graphit-linie); display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; color: rgba(244, 242, 236, .42); font-size: .84rem; }
.mobil-cta { display: none; }

/* Einblenden beim Rollen */
.js .ein { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--weich), transform 1s var(--weich), box-shadow .5s, border-color .5s; transition-delay: var(--verzug, 0ms); }
.js .ein.sichtbar { opacity: 1; transform: none; }
.js .ein.fertig { transition-delay: 0ms; transition-duration: .5s; }
/* Vorhang auf dem Bild, nicht auf der Fläche: Ein komplett ausgeschnittenes Element meldet Chrome nie als sichtbar. */
.js .bild-ein img { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.3s var(--weich), transform 1.8s var(--weich); transition-delay: var(--verzug, 0ms); }
.js .bild-ein .highlight-text { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--weich) .4s, transform 1s var(--weich) .4s; }
.js .bild-ein.sichtbar .highlight-text { opacity: 1; transform: none; }
.js .bild-ein.sichtbar img { clip-path: inset(0); transform: none; }
.js .titel-ein { opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity 1.1s var(--weich), transform 1.1s var(--weich), filter 1.1s; }
.js .titel-ein.sichtbar { opacity: 1; transform: none; filter: none; }

/* Anwendungsfälle: Karten, Filter, Gruppen */
.faelle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fall { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--papier); transition: transform .5s var(--weich), border-color .4s, box-shadow .5s; }
.fall:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--schatten); }
.fall[hidden] { display: none; }
.fall-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fall-funktion { font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-tief); }
.fall-taste { font: 600 .74rem/1 var(--sans); color: var(--gedaempft); padding: 6px 10px; border-radius: 999px; background: var(--nebel); }
.fall h3 { font: 640 1.3rem/1.15 var(--anzeige); letter-spacing: -.03em; color: var(--tinte); }
.fall p { margin: 0; font-size: .95rem; }
.fall .etikett { color: var(--gold-tief); margin-bottom: 6px; }
.fall-sagt { color: var(--text); }
.fall-ergebnis { flex: 1; padding: 14px 16px; border-radius: 14px; background: var(--elfenbein); color: var(--tinte); white-space: pre-line; }
.fall-branchen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fall-branchen li { font-size: .76rem; color: var(--gedaempft); border: 1px solid var(--linie); border-radius: 999px; padding: 4px 9px; }
.faelle-mehr { margin-top: 48px; text-align: center; }
.fall-bereich { padding-top: clamp(50px, 6vw, 80px); }
.fall-filter { display: grid; gap: 16px; padding: 22px 24px; margin-bottom: 40px; border-radius: var(--radius); border: 1px solid var(--linie); background: rgba(247, 245, 240, .94); backdrop-filter: blur(12px); }
.fall-filter .etikett { color: var(--gold-tief); }
.filter-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-knoepfe button { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--linie-stark); background: transparent; font: 600 .84rem/1 var(--sans); color: var(--text); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.filter-knoepfe button:hover { border-color: var(--gold); color: var(--tinte); }
.filter-knoepfe button[aria-pressed="true"] { background: var(--tinte); color: var(--schnee); border-color: var(--tinte); }
.fall-zaehler { margin: 0; font-size: .88rem; color: var(--gedaempft); }
.fall-gruppe { padding: 0; margin-bottom: clamp(48px, 5vw, 72px); }
.fall-gruppe[hidden] { display: none; }
.fall-gruppe-titel { font: 640 clamp(1.7rem, 2.6vw, 2.3rem)/1.1 var(--anzeige); letter-spacing: -.04em; color: var(--tinte); margin-bottom: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.fall-gruppe-link { font: 600 .92rem/1 var(--sans); letter-spacing: 0; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.fall-gruppe-link svg { width: 16px; height: 16px; }
.fall-leer { text-align: center; color: var(--gedaempft); }

/* Programmfenster der Anwendungsfälle: je Programm ein eigener Look, Ablauf wie im Hero */
.fall-demo { display: flex; flex-direction: column; flex: 1; border-radius: 16px; border: 1px solid var(--linie); background: var(--papier); overflow: hidden; box-shadow: 0 18px 40px -30px rgba(20, 20, 22, .35); }
.demo-leiste { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--nebel); border-bottom: 1px solid var(--linie); font: 600 .74rem/1 var(--sans); color: var(--gedaempft); }
.demo-leiste i { width: 8px; height: 8px; border-radius: 50%; background: var(--linie-stark); }
.demo-leiste span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-flaeche { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 250px; }
.fall .demo-flaeche p { margin: 0; }
.demo-zeile { display: flex; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--nebel); font-size: .8rem; }
.demo-zeile span { width: 52px; color: var(--gedaempft); } .demo-zeile b { color: var(--tinte); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-kontakt { display: flex; align-items: center; gap: 9px; font-size: .84rem; padding-bottom: 8px; border-bottom: 1px solid var(--nebel); }
.demo-kontakt i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #5b5fc7; color: #fff; font: 700 .75rem/1 var(--sans); font-style: normal; }
.demo-eingang { align-self: flex-start; max-width: 82%; padding: 9px 12px; border-radius: 12px 12px 12px 3px; background: var(--nebel); font-size: .86rem; color: var(--tinte); }
.demo-adresse { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--nebel); font-size: .78rem; color: var(--text); }
.demo-adresse svg { width: 13px; height: 13px; }
.demo-datensatz { padding: 8px 12px; border-radius: 8px; background: var(--graphit); color: var(--schnee); font: 600 .78rem/1.3 var(--sans); }
.demo-label { font: 600 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); margin-bottom: -4px !important; }
.demo-feld { font-size: .9rem; line-height: 1.5; color: var(--tinte); white-space: pre-line; min-height: 4.5em; transition: opacity .4s; }
[data-fenster="browser"] .demo-feld, [data-fenster="crm"] .demo-feld, [data-fenster="fach"] .demo-feld { padding: 10px 12px; border: 1px solid var(--linie-stark); border-radius: 8px; background: var(--papier); }
[data-fenster="chat"] .demo-feld { align-self: flex-end; max-width: 86%; min-height: 0; padding: 9px 12px; border-radius: 12px 12px 3px 12px; background: #e8e6f8; }
[data-fenster="dokument"] .demo-flaeche, [data-fenster="pdf"] .demo-flaeche { background: var(--nebel); }
[data-fenster="dokument"] .demo-feld { padding: 16px 18px; background: var(--papier); border-radius: 4px; box-shadow: 0 6px 16px -10px rgba(20, 20, 22, .4); }
[data-fenster="meeting"] .demo-flaeche { background: #1b1b22; }
[data-fenster="app"] .demo-flaeche { background: var(--elfenbein); }
.demo-auswahl { background: linear-gradient(rgba(80, 130, 230, .24), rgba(80, 130, 230, .24)) 0 0 / 0% 100% no-repeat; border-radius: 3px; transition: background-size .9s var(--weich); }
.demo-auswahl.an { background-size: 100% 100%; }
.fall .fix { background: rgba(220, 192, 140, .35); border-bottom: 2px solid var(--gold); border-radius: 2px; }
.fall .demo-sagt { position: relative; align-self: flex-start; max-width: 94%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: var(--graphit); color: var(--schnee); font-size: .86rem; line-height: 1.45; box-shadow: var(--schatten); transition: opacity .4s, transform .4s var(--feder); }
.fall .demo-sagt .etikett { color: var(--gold-hell); margin-bottom: 5px; }
.demo-dok { position: relative; padding: 14px 16px; background: var(--papier); border-radius: 4px; font-size: .84rem; line-height: 1.7; color: var(--tinte); box-shadow: 0 6px 16px -10px rgba(20, 20, 22, .4); }
.demo-dok p:first-child { font-weight: 700; }
.demo-rahmen { position: absolute; inset: 6px; border: 2px dashed var(--gold); border-radius: 6px; background: rgba(220, 192, 140, .1); transform-origin: 0 0; transition: transform .9s var(--weich), opacity .3s; }
.demo-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.demo-liste li { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; background: var(--papier); border: 1px solid var(--linie); font-size: .84rem; transition: opacity .4s, transform .4s var(--weich); transition-delay: calc(var(--n) * 380ms); }
.demo-liste b { font: 600 .72rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-tief); }
[data-fenster="meeting"] .demo-liste { grid-template-columns: 1fr 1fr; }
[data-fenster="meeting"] .demo-liste li { background: #2a2a33; border-color: #3a3a44; color: var(--schnee); min-height: 64px; }
[data-fenster="meeting"] .demo-liste b { color: var(--gold-hell); }
.demo-popup { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; padding: 13px 15px; border-radius: 14px; background: rgba(17, 17, 19, .97); border: 1px solid rgba(220, 192, 140, .35); color: var(--schnee); font-size: .84rem; line-height: 1.5; white-space: pre-line; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .6); transition: opacity .45s var(--weich), transform .45s var(--weich); }
.demo-popup .etikett { color: var(--gold-hell); margin-bottom: 6px; }
.demo-popup small { display: block; margin-top: 8px; color: var(--rauch); font-size: .72rem; }
.fall .demo-status { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--linie); margin: 0; font: 600 .74rem/1 var(--sans); color: var(--gedaempft); }
.demo-status i { width: 8px; height: 8px; border-radius: 50%; background: #2e8b57; flex: none; }
/* Abläufe: leer, markieren, rahmen, laufen, hoeren, arbeiten, schreiben, fertig */
.fall-demo[data-phase]:not([data-phase="fertig"]) .demo-popup { opacity: 0; transform: translateY(12px) scale(.98); }
.fall-demo[data-phase="leer"] .demo-sagt, .fall-demo[data-phase="markieren"] .demo-sagt, .fall-demo[data-phase="rahmen"] .demo-sagt { opacity: 0; transform: translateY(8px) scale(.97); }
.fall-demo[data-phase="leer"] .demo-rahmen { transform: scale(0); opacity: 0; }
.fall-demo[data-ziel="popup"]:not([data-phase]) .demo-sagt, .fall-demo[data-ziel="popup"][data-phase="fertig"] .demo-sagt { opacity: 0; }
.fall-demo[data-phase="leer"] .demo-liste li { opacity: 0; transform: translateY(8px); }
.fall-demo[data-art="diktat"][data-phase="leer"] .demo-feld, .fall-demo[data-art="diktat"][data-phase="hoeren"] .demo-feld, .fall-demo[data-art="diktat"][data-phase="arbeiten"] .demo-feld { opacity: 0; }
.fall-demo[data-phase="hoeren"] .demo-status i, .fall-demo[data-phase="markieren"] .demo-status i, .fall-demo[data-phase="rahmen"] .demo-status i, .fall-demo[data-phase="laufen"] .demo-status i { background: var(--gold); animation: leuchten 1s infinite; }
.fall-demo[data-phase="arbeiten"] .demo-status i, .fall-demo[data-phase="schreiben"] .demo-status i { background: var(--gold-hell); animation: leuchten .6s infinite; }
.fall-demo[data-phase="hoeren"] .demo-sagt-text::after, .fall-demo[data-phase="schreiben"] .demo-feld::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--gold); animation: blinken 1s steps(1) infinite; }

@media (max-width: 1060px) {
  .faelle { grid-template-columns: repeat(2, 1fr); }
  .navi { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(17, 17, 19, .98); border-top: 1px solid var(--graphit-linie); padding: 14px 24px 26px; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100vh - 66px); overflow-y: auto; }
  .menue-offen .navi { display: flex; animation: auftauchen .4s var(--weich) both; }
  .menue-offen.kopf { background: rgba(17, 17, 19, .98); }
  .menue-taste { display: inline-flex; }
  .navi > a:not(.knopf) { padding: 15px 4px; font-size: 1.04rem; border-bottom: 1px solid var(--graphit-linie); border-radius: 0; }
  .navi-gruppe > button { width: 100%; pointer-events: none; color: var(--gold-hell); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; padding: 22px 4px 8px; }
  .navi-gruppe > button svg { display: none; }
  .navi-menue { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0; min-width: 0; background: none; backdrop-filter: none; }
  .navi-menue a { padding: 11px 4px; } .navi-menue a small { display: none; }
  .navi .knopf { margin: 22px 0 0; }
  .hero-raster { grid-template-columns: 1fr; gap: 20px; }
  .vorfuehrung { max-width: 620px; }
  .geschichte-raster, .tempo-raster, .szene, .szene.aktiv, .tresor, .anmeldung, .unter-hero-raster { grid-template-columns: 1fr; }
  .klebt { position: static; }
  .schritte-lang { gap: 44px; padding: 10px 0 0; }
  .schritt-lang { opacity: 1; }
  .nutzen { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .kachel, .kachel.breit, .kachel.gross { grid-column: span 3; }
  .branchen { grid-template-columns: 1fr 1fr; }
  .highlights { grid-template-columns: 1fr; }
  .highlight { min-height: 460px; }
  .highlight.voll { min-height: 520px; }
  .highlight.voll .highlight-text { inset: auto 26px 26px; transform: none; }
  .preise, .vorteile, .verwandt { grid-template-columns: 1fr 1fr; }
  .karte-ueber { right: 12px; bottom: -20px; }
  .marke-null { left: 12px; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .kapitel { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 700px) {
  .faelle { grid-template-columns: 1fr; }
  .filter-knoepfe { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .filter-knoepfe button { flex: none; }
  body { font-size: 16px; }
  .rahmen, .schmal { width: calc(100% - 40px); }
  .nutzen { grid-template-columns: 1fr; }
  .nutzen-karte { margin-right: 0; padding-right: 0; }
  .kachel, .kachel.breit, .kachel.gross { grid-column: span 6; min-height: 0; }
  .beleg-raster, .vorher-nachher { grid-template-columns: 1fr; }
  .preise, .vorteile, .verwandt, .ablauf, .zahlenband ul, .alles-drin { grid-template-columns: 1fr; }
  .ablauf::before { display: none; } .ablauf li { padding: 0 0 34px; }
  .zahlenband li { border-left: 0; border-top: 1px solid var(--graphit-linie); padding: 26px 0; } .zahlenband li:first-child { border-top: 0; }
  .vorfuehrung-buehne { padding: 40px 0 34px; }
  .szenen-leiste { margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .szenen-leiste button { flex: none; }
  .sprechblase { left: 8px; }
  .app-fenster { transform: none; }
  .app-text { min-height: 11em; font-size: .95rem; }
  .aufnahme-pille { left: 8px; } .aufnahme-pille [data-status] { min-width: 0; }
  .lokal-marke { right: 8px; }
  .hero-film::after { background: linear-gradient(180deg, rgba(17, 17, 19, .92) 0%, rgba(17, 17, 19, .75) 50%, var(--graphit) 100%); }
  .hero-knoepfe .knopf { width: 100%; }
  .highlight, .highlight.voll { min-height: 420px; }
  .branche p { max-height: 9em; opacity: 1; }
  .vorlage dl { grid-template-columns: 1fr; gap: 4px 0; } .vorlage dd { margin-bottom: 12px; }
  .fuss-raster { grid-template-columns: 1fr; }
  .ergebnis-zeile { grid-template-columns: 1fr; }
  .antwort p { padding-right: 0; }
  .mobil-cta { display: block; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 95; transform: translateY(160%); transition: transform .6s var(--weich); }
  .mobil-cta.sichtbar { transform: none; }
  .mobil-cta .knopf { width: 100%; }
  .fuss { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .ein, .js .titel-ein, .hero .dachzeile, .hero-seite, .siegel, .vorfuehrung { opacity: 1; transform: none; filter: none; }
  .js .bild-ein img { clip-path: none; transform: none; } .js .bild-ein .highlight-text { opacity: 1; transform: none; }
  .hero h1 .zeile > span { transform: none; }
  .bahn i { width: var(--weite); }
  .schritt-lang { opacity: 1; }
}