/* SmartChat Startseite, Prototyp. Grundlage der Seite (Hero, Leiste, Manifest, Fuß) und gemeinsame Hilfsklassen.
   Alle Werte (Farben, Radien, Schriften) stammen aus dem echten SmartChat, siehe kern/DESIGN-ABGLEICH.md.
   Die Bauteile (Knopf, Chip, Karte, Kugel ...) stehen in kern/komponenten.css (Präfix sc-).
   Schrift laut CI: Überschriften Instrument Serif, Text Instrument Sans.
   Bunt ist nur das Hero-Foto und die KI-Kugel. Sonst nur Weiß, Schwarz und die Grautöne der App. */
:root{
  --weiss:#ffffff;
  --grau-hell:#f5f5f7;      /* App: --g50, Flächen von Feldern und Reitern */
  --grau-rand:#e8e8ec;      /* App: --line, jeder Ring und jede Linie */
  --text:#0d0d10;           /* App: --ink */
  --text-grau:#6e6f78;      /* App: --grey */
  --text-grau-2:#4b4c54;    /* App: --ink2 */
  --linie-stark:#d6d6dd;    /* App: --g300 */
  --schwarz:#0d0d10;
  --verlauf-schwarz:linear-gradient(180deg,#2b2b31 0%,#0d0d10 100%);   /* App: --sw-grad, Knöpfe, Kacheln, Schalter */
  --app-radius:14px;        /* App: überall 14 px (Eckenregel) */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --inset-seite:18px;   /* Endzustand: Rand links und rechts */
  --inset-oben:16px;
  --inset-unten:16px;
  --radius:32px;        /* Endzustand: runde Ecken des Hero-Fotos */
  --reise:16vh;         /* Scrollweg, in dem das Bild schrumpft (18.10.: 90vh -> 16vh: Gründer "hängt am Anfang", Rand ist nur 16-18 px, also kurz) */
  --kurve:cubic-bezier(.23,1,.32,1);   /* App: --ease-out */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{font-family:var(--sans);color:var(--text);background:var(--weiss);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic;font-weight:400}
/* ---------- HERO ---------- */
.hero-wrap{height:calc(100vh + var(--reise));position:relative}
.hero{--p:0;position:sticky;top:0;height:100vh;overflow:hidden}
.hero-bild{
  position:absolute;inset:0;
  clip-path:inset(
    calc(var(--p) * var(--inset-oben))
    calc(var(--p) * var(--inset-seite))
    calc(var(--p) * var(--inset-unten))
    round calc(var(--p) * var(--radius)));
  will-change:clip-path;background:#f6c9d6;
}
.hero-bild::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(70,25,50,.30) 0%,rgba(70,25,50,.30) 45%,rgba(70,25,50,.30) 100%)   /* 7.10. 22:35: Fassung des Kirschbaum-Bildes, die der Gründer "mit Abstand am besten" findet (Tönung 30 %) */;pointer-events:none}
.hero-bild img{position:absolute;left:0;bottom:0;width:100%;height:116%;object-fit:cover;object-position:50% 100%}
/* ---------- LEISTE ---------- */
.leiste{
  position:fixed;z-index:20;top:16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:42px;
  height:64px;padding:0 9px 0 28px;
  color:#fff;font-size:16px;
  background:rgba(255,255,255,0);
  backdrop-filter:blur(0px) saturate(1);-webkit-backdrop-filter:blur(0px) saturate(1);
  border:1px solid rgba(255,255,255,0);border-radius:999px;box-shadow:0 10px 36px rgba(0,0,0,0);
  transition:background-color 300ms var(--kurve),border-color 300ms var(--kurve),box-shadow 300ms var(--kurve),backdrop-filter 300ms var(--kurve),-webkit-backdrop-filter 300ms var(--kurve);
}
.leiste.da{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-color:rgba(255,255,255,.75);box-shadow:0 10px 36px rgba(0,0,0,.10);
}
.logo{position:relative;display:block;width:109px;height:28px;flex:none}
/* Wortmarke wie in der App: 28 px hoch */
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity 300ms var(--kurve)}
.logo .logo-s{opacity:0}
.leiste.da .logo .logo-w{opacity:0}
.leiste.da .logo .logo-s{opacity:1}
.links{display:flex;gap:30px}
.links a{color:#fff;text-shadow:0 1px 16px rgba(60,20,40,.35);transition:color 300ms var(--kurve),text-shadow 300ms var(--kurve)}
.leiste.da .links a{color:var(--text);text-shadow:none}
.links a:hover{opacity:.7}
/* Knopf: gleicher Knopf wie in der App (14 px Radius,
Glasglanz oben).
   Oben auf dem Foto weiß (wie der helle Knopf der App),
nach dem Scrollen und mit .schwarz der schwarze Knopf mit Verlauf.
   Der schwarze Verlauf liegt auf ::after und blendet per opacity ein (Verlauf selbst lässt sich nicht überblenden). */
.btn-knopf{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 26px;border-radius:var(--app-radius);font-weight:600;font-size:15px;line-height:1.5;white-space:nowrap;
  background:#fff;color:var(--schwarz);
  box-shadow:0 0 0 1px rgba(13,13,16,.06),0 6px 18px rgba(13,13,16,.14);
  transition:transform 150ms var(--kurve),color 300ms var(--kurve),box-shadow 300ms var(--kurve);
}
.btn-knopf::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--verlauf-schwarz);opacity:0;transition:opacity 300ms var(--kurve)}
.btn-knopf::before{content:"";position:absolute;left:1px;right:1px;top:1px;height:50%;z-index:-1;pointer-events:none;
  border-radius:13px 13px 10px 10px/13px 13px 8px 8px;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 100%);opacity:0;transition:opacity 300ms var(--kurve)}
.btn-knopf:active{transform:scale(.97)}
.leiste.da .btn-knopf,
.btn-knopf.schwarz{color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),0 6px 12px -8px rgba(13,13,16,.28)}
.leiste.da .btn-knopf::after,
.btn-knopf.schwarz::after,
.leiste.da .btn-knopf::before,
.btn-knopf.schwarz::before{opacity:1}
.btn-knopf.klein{height:32px;padding:0 14px;font-size:13px}
/* ---------- HERO-INHALT ---------- */
.hero-inhalt{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-46%);
  width:min(980px,92vw);text-align:center;
}
h1{
  font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.02;
  font-size:clamp(34px,5.2vw,72px);color:#fff;text-shadow:0 2px 30px rgba(60,20,40,.30);
}
h1 em{font-size:1em}
.unterzeile{margin:22px auto 0;font-size:clamp(16px,1.5vw,20px);color:rgba(255,255,255,.96);text-shadow:0 1px 18px rgba(60,20,40,.35);max-width:36ch;line-height:1.45}
.knopfreihe{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.btn-knopf.gross{height:52px;padding:0 30px;font-size:16px}
/* Hero: der App-Knopf,
passend zur 72-px-Überschrift etwas größer als die 46 px der App */

/* Hero-Pille oben: "300+ Unternehmen" mit vier runden Fotos */
.hero-pille.oben{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;padding:8px 18px 8px 10px;border-radius:999px;color:#fff;font-size:14.5px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:none;text-shadow:0 1px 10px rgba(60,20,40,.3);white-space:nowrap}
.gesichter{display:flex}
.gesicht{position:relative;display:inline-block;width:34px;height:34px;margin-left:-9px;border-radius:50%;overflow:hidden;background:#e8e8ec;border:2px solid #fff}
.gesichter .gesicht:first-child{margin-left:0}
.gesicht img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
/* Gesicht im oberen Drittel des Fotos */

.scroll-hinweis{position:absolute;z-index:3;left:50%;bottom:44px;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(255,255,255,.8);border-radius:999px;opacity:.9}
.scroll-hinweis i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:scrolli 1.8s var(--kurve) infinite}
0%{transform:translateY(0);opacity:1}
70%{transform:translateY(14px);opacity:0}
100%{opacity:0}
.hero-bild img{will-change:transform}
/* Überschrift Wort für Wort */
.woerter .w{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(6px)}
.geladen .woerter .w{animation:wort 900ms var(--kurve) forwards;animation-delay:calc(var(--i) * 70ms + 200ms)}
to{opacity:1;transform:none;filter:blur(0)}
.unterzeile,
.knopfreihe,
.hero-pille,
.scroll-hinweis{opacity:0}
.geladen .unterzeile{animation:hoch 900ms var(--kurve) 900ms forwards}
.geladen .knopfreihe{animation:hoch 900ms var(--kurve) 1100ms forwards}
.geladen .hero-inhalt .hero-pille.oben{animation:hoch 900ms var(--kurve) 100ms forwards}
.geladen .scroll-hinweis{animation:ein 900ms ease 1700ms forwards}
from{opacity:0;transform:translateY(24px)}
to{opacity:1;transform:none}
to{opacity:.9}
/* Fortschrittsstrich oben: schwarz wie die Tinte der App */

/* Einblenden beim Scrollen */
.rv{opacity:0;transform:translateY(28px);transition:opacity 800ms var(--kurve),transform 800ms var(--kurve);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
/* ---------- Gemeinsame Hilfsklassen für die Sektionen ---------- */
.spalte{width:min(760px,90vw);margin:0 auto;text-align:center}
.spalte.weit{width:min(1080px,90vw)}
h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.04;font-size:clamp(36px,5vw,64px)}
.lead{margin:20px auto 0;color:var(--text-grau);font-size:17.5px;line-height:1.5;max-width:46ch}
/* App: Untertitel 17,
5 px,
#6e6f78 */
.textlink{font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--linie-stark);transition:text-decoration-color 150ms var(--kurve)}
/* App: .btn3 */
.textlink:hover{text-decoration-color:var(--text)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;text-align:left}
/* Kicker: gleich wie ein Chip der App (34 px,
Pille,
13 px / 600,
Ring #e8e8ec) */
.kicker{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;margin-bottom:26px;border-radius:99px;
  font-size:13px;font-weight:600;line-height:1.5;color:var(--text-grau-2);background:#fff;box-shadow:0 0 0 1px var(--grau-rand);white-space:nowrap}
/* ---------- Manifest ---------- */
.manifest{padding:150px 0 70px;background:#fff}
.manifest-in{width:min(1040px,90vw)}
.manifest-text{font-size:clamp(30px,4.6vw,60px);line-height:1.12;letter-spacing:-.025em;font-weight:500;text-align:left}
.manifest-text .mw{color:var(--linie-stark);transition:color 300ms linear}
.manifest-text .mw.an{color:var(--text)}
.manifest-text .mw.emo{filter:grayscale(1);opacity:.28;transition:filter 300ms linear,opacity 300ms linear}
.manifest-text .mw.emo.an{filter:none;opacity:1}
/* ---------- Fuß: weiß,
ruhig,
wie die Seiten der App ---------- */
.fuss{background:#fff;padding:110px 0 48px;text-align:left;font-size:14.5px}
.fuss .spalte{text-align:left}
.fuss-gitter{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}
.fuss-gitter div{display:grid;gap:12px;align-content:start}
.fuss-gitter b{margin-bottom:6px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-grau)}
/* App: .sect */
.fuss-gitter a{color:var(--text-grau-2);transition:color 150ms var(--kurve)}
.fuss-gitter a:hover{color:var(--text)}
.fuss-news{margin-top:64px;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:#fff;border-radius:var(--app-radius);box-shadow:0 0 0 1px var(--grau-rand)}
/* App: .pcard */
.fuss-news b{font-size:17px;font-weight:600;line-height:24px}
.fuss-unten{margin-top:44px;padding-top:28px;border-top:1px solid var(--grau-rand);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fuss-wm{display:block;height:28px;width:auto}
.fuss-sprachen{font-size:13px;color:var(--text-grau)}
.proto{margin-top:30px;font-size:12.5px;color:#9a9ba3}
/* Hinweis-Marken (nur im Prototyp,
standardmäßig unsichtbar,
siehe global.css) */
.beleg{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.02em;padding:5px 9px;border-radius:999px;background:#fde2dd;color:#a3271a;vertical-align:middle;margin-left:8px;text-shadow:none}
.beleg.gelb{background:#fff0c9;color:#8a5a00}
.beleg.gruen{background:#dff5e3;color:#1b6b34}
.ohne-hinweise .beleg,
.ohne-hinweise .proto{display:none!important}

/* ---------- Tablet und Handy ---------- */
@media (max-width:980px){
  .zwei{grid-template-columns:1fr;gap:40px}
  .fuss-gitter{grid-template-columns:1fr 1fr}
  .hero-pille.oben{font-size:13px}
}
@media (max-width:820px){
  :root{--inset-seite:10px;--inset-oben:10px;--inset-unten:10px;--radius:24px;--reise:12vh}
  .links{display:none}
  .leiste{gap:20px;height:58px;padding-left:20px}
  .btn-knopf{height:40px;padding:0 18px;font-size:14px}
  .btn-knopf.gross{height:48px;padding:0 24px;font-size:15px}
  .logo{width:96px;height:25px}
  .hero-pille.oben{display:none}
  .scroll-hinweis{display:none}
  .fuss{padding-top:80px}
  .fuss-news{padding:20px}
}

/* ---------- weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-wrap{height:100vh}
  .hero{--p:1 !important}
  .rv,.woerter .w,.unterzeile,.knopfreihe,.hero-pille,.scroll-hinweis{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .scroll-hinweis i{animation:none!important}
  .manifest-text .mw{color:var(--text)!important}
}
/* ===== Änderungen 7.10.2026 (Gründer) ===== */
/* Hero-Pille: kein Hintergrund,
keine Umrandung */
.hero-pille.oben{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
/* Knöpfe oben auf dem Foto: Glas,
ganz abgerundet,
nicht weiß. Nach dem Scrollen (.leiste.da) und .schwarz bleibt der schwarze Knopf,
nur ebenfalls rund. */
.btn-knopf{border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.22) 100%);backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);color:#fff;text-shadow:0 1px 10px rgba(60,20,40,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.12),0 10px 30px rgba(60,20,40,.18)}
.btn-knopf:hover{background:linear-gradient(180deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,.30) 100%)}
.btn-knopf::before{border-radius:999px}
.leiste.da .btn-knopf,
.btn-knopf.schwarz{text-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Ladeschleier. Standard: Variante "Stern" (SVG,
Ablauf in der Skriptstelle im Kopf der Seite). ?lader=wisch: alte Variante (Logo,
Weiß schiebt nach oben).
   Notaus: bleibt der Schleier aus irgendeinem Grund stehen (Skript fehlt),
verschwindet er nach 9 s von selbst. Gilt auf JEDER Seite (Markup im gemeinsamen Kopf). */
.ladeschleier{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#fff;animation:ls-notaus 1ms 9s forwards}
.ladeschleier .ls-alt{display:none}
.ladeschleier .ls-neu{position:absolute;inset:0;width:100%;height:100%;display:block}
.ladeschleier.alt{animation:schleier-weg 1000ms cubic-bezier(.77,0,.18,1) 2500ms forwards}
.ladeschleier.alt .ls-neu{display:none}
.ladeschleier.alt .ls-alt{display:block;width:clamp(150px,18vw,230px);height:auto;opacity:0;filter:blur(10px);transform:scale(.97);
  animation:schleier-logo 1100ms cubic-bezier(.2,.7,.2,1) 1000ms forwards}
to{opacity:1;filter:blur(0);transform:none}
0%{transform:translateY(0)}
99.9%{transform:translateY(-100%);visibility:visible}
100%{transform:translateY(-100%);visibility:hidden;pointer-events:none}
to{visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ladeschleier{display:none}}
/* Ladeschleier Fassung 5 (7.10.2026): Fassung b ("bereit") zeigt alle Hero-Teile von Anfang an,
nur der Schleier löst sich auf */
.bereit .woerter .w,
.bereit .unterzeile,
.bereit .knopfreihe,
.bereit .hero-pille,
.bereit .scroll-hinweis{animation:none!important;opacity:1;transform:none;filter:none}
.bereit .scroll-hinweis{opacity:.9}
.ladeschleier.neu{will-change:opacity}
/* Änderungen 7.10.2026 abends: Kopfleiste im Hero ohne Logo und ohne Knopf,
Pille "300+ Unternehmen" entfernt (Gründer). Erst nach dem Hero (Klasse "da") sind Logo und Knopf wieder da. */
/* 22:45: Logo und Knopf oben sind wieder da (Gründer). Knopf oben im Hero in Weiß mit schwarzer Schrift. Nach dem Hero (Klasse "da") bleibt er schwarz wie bisher. */
.leiste:not(.da) .btn-knopf{background:#fff;color:#0d0d10;text-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 26px rgba(60,20,40,.22)}
.leiste:not(.da) .btn-knopf:hover{background:#fff;box-shadow:0 10px 30px rgba(60,20,40,.30)}
.hero-pille.oben{display:none}
/* Blumenhügel-Bild (7.10. abends): helles Bild,
deshalb weicher Schatten hinter Überschrift und Unterzeile statt noch mehr Tönung */
.hero-inhalt h1,
.hero-inhalt .unterzeile{text-shadow:0 2px 28px rgba(70,25,40,.45),0 1px 4px rgba(70,25,40,.25)}
/* ===== 14.10.2026 (Gründer): Leiste oben IMMER mit derselben Glas-Umrandung,
im Hero wie danach.
   Einziges,
was wechselt: Logo,
Punkte und Knopf von Weiß (auf dem Foto) auf Schwarz (nach dem Hero,
Klasse "da").
   Sicherung: style.css.vor-glas-14-10 ===== */
.leiste,
.leiste.da{
  background:rgba(255,255,255,.3);
  backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px rgba(13,13,16,.05),0 10px 32px rgba(13,13,16,.10);
  transition:none;
}
.leiste .links a{transition:color 300ms var(--kurve),text-shadow 300ms var(--kurve)}
/* 14.10.2026: Menüpunkte nie umbrechen ("Über uns") und mittig in der Leiste */
.leiste .links{align-items:center}
.leiste .links a{white-space:nowrap;line-height:1}
/* ===== 14.10.2026 (Gründer): Hero oben Glas-Pille "300+ Unternehmen nutzen bereits SmartChat" mit drei Gesichtern,
darunter zwei Knöpfe nebeneinander: weiß (Kostenfrei starten) und Glas (So funktioniert es). Kein Bewegen beim Darüberfahren.
   Sicherungen: index.basis.html / script.js / style.css .vor-hero-14-10 ===== */
.hero-inhalt .hero-pille.oben{display:inline-flex;
  background:rgba(255,255,255,.22);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 26px rgba(60,20,40,.14)}
.hero-inhalt .hero-pille.oben .gesicht{border-color:rgba(255,255,255,.9)}
.knopfreihe .btn-knopf{transform:none!important}
.knopfreihe .btn-knopf.weiss{background:#fff;color:#0d0d10;text-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 26px rgba(60,20,40,.22)}
.knopfreihe .btn-knopf.weiss:hover{background:#fff}
.knopfreihe .btn-knopf.glas{background:rgba(255,255,255,.22);color:#fff;text-shadow:0 1px 10px rgba(60,20,40,.3);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 26px rgba(60,20,40,.14)}
.knopfreihe .btn-knopf.glas:hover{background:rgba(255,255,255,.22)}
.knopfreihe .btn-knopf.weiss::after,
.knopfreihe .btn-knopf.weiss::before,
.knopfreihe .btn-knopf.glas::after,
.knopfreihe .btn-knopf.glas::before{opacity:0}
@media (max-width:820px){
  .hero-inhalt .hero-pille.oben{display:inline-flex;font-size:13px;gap:9px;padding:6px 14px 6px 7px}
  .hero-inhalt .hero-pille.oben .gesicht{width:28px;height:28px}
}
/* Prüfhinweis nur intern (sichtbar mit ?hinweise=1 über s2-hinweise),
Glas weniger Farbsättigung,
damit es weiß-gläsern statt orange wirkt */
.hero-pille .beleg{display:none}
html.s2-hinweise .hero-pille .beleg{display:inline-flex}
.hero-inhalt .hero-pille.oben,
.knopfreihe .btn-knopf.glas{background:rgba(255,255,255,.26);backdrop-filter:blur(20px) saturate(1.05);-webkit-backdrop-filter:blur(20px) saturate(1.05)}
@media (max-width:820px){.hero-inhalt .hero-pille.oben{max-width:calc(100vw - 32px);white-space:normal;text-align:left}}
/* ===== 14.10.2026 (Gründer): Leiste tiefer,
Glas von Pille und Glas-Knopf: Rand weiß 70 %,
Fläche weiß 20 %,
stark verschwommen;
   Headline fett außer "einfachste". Instrument Serif hat nur eine Stärke,
deshalb Verstärkung über eine feine Kontur in Schriftfarbe. ===== */
.leiste{top:30px}
.hero-inhalt .hero-pille.oben,
.knopfreihe .btn-knopf.glas{
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(36px) saturate(1.05);-webkit-backdrop-filter:blur(36px) saturate(1.05)}
.knopfreihe .btn-knopf.glas:hover{background:rgba(255,255,255,.2)}
#h1 .w:not(em){-webkit-text-stroke:.022em currentColor;paint-order:stroke fill}
@media (max-width:820px){.leiste{top:18px}}
/* 14.10.2026 (Gründer): Knöpfe unten im Hero mit 14 px Rundung (wie in der App) */
.knopfreihe .btn-knopf,
.knopfreihe .btn-knopf::before{border-radius:14px}
/* 14.10.2026 (Gründer): Pille und Glas-Knopf: Weichzeichner 30 px,
Fläche weiß 10 %,
Rand weiterhin 70 % */
.hero-inhalt .hero-pille.oben,
.knopfreihe .btn-knopf.glas{background:rgba(255,255,255,.1);backdrop-filter:blur(30px) saturate(1.05);-webkit-backdrop-filter:blur(30px) saturate(1.05)}
.knopfreihe .btn-knopf.glas:hover{background:rgba(255,255,255,.1)}
/* 14.10.2026 (Gründer,
Vorbild Lyra Agent): schwarzer Knopf oben (nach dem Hero) mit weichem Farbschein darunter: links Lila,
Mitte Rosa,
rechts Orange */
.leiste.da .btn-knopf{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),
  -16px 14px 26px -8px rgba(177,92,255,.55),0 16px 28px -8px rgba(255,122,182,.5),16px 14px 26px -8px rgba(255,177,58,.6)}
/* Schein weicher und tiefer (wie Lyra) */
.leiste.da .btn-knopf{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),
  -18px 20px 34px -12px rgba(177,92,255,.38),0 22px 36px -12px rgba(255,122,182,.32),18px 20px 34px -12px rgba(255,177,58,.42)}
/* 14.10.2026 (Gründer): Leiste noch tiefer; Pille und Glas-Knopf: Rand 50 %,
Fläche 5 %,
Weichzeichner 20 px;
   Farbschein leichter und auch am weißen Knopf oben (im Hero) */
.leiste{top:42px}
@media (max-width:820px){.leiste{top:24px}}
.hero-inhalt .hero-pille.oben,
.knopfreihe .btn-knopf.glas{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(20px) saturate(1.05);-webkit-backdrop-filter:blur(20px) saturate(1.05)}
.knopfreihe .btn-knopf.glas:hover{background:rgba(255,255,255,.05)}
.leiste.da .btn-knopf{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),
  -18px 20px 34px -14px rgba(177,92,255,.26),0 22px 36px -14px rgba(255,122,182,.22),18px 20px 34px -14px rgba(255,177,58,.3)}
.leiste:not(.da) .btn-knopf,
.leiste:not(.da) .btn-knopf:hover{box-shadow:0 6px 18px rgba(60,20,40,.12),
  -18px 20px 34px -14px rgba(177,92,255,.26),0 22px 36px -14px rgba(255,122,182,.22),18px 20px 34px -14px rgba(255,177,58,.3)}
/* 14.10.2026 (Gründer): Pille schmaler,
Fotos kleiner,
weißer Ring um die Fotos halb so dick */
.hero-inhalt .hero-pille.oben{gap:9px;padding:5px 14px 5px 6px;font-size:13.5px}
.hero-inhalt .hero-pille.oben .gesicht{width:28px;height:28px;margin-left:-7px;border-width:1px}
.hero-inhalt .hero-pille.oben .gesichter .gesicht:first-child{margin-left:0}
@media (max-width:820px){.hero-inhalt .hero-pille.oben .gesicht{width:24px;height:24px}}
/* 14.10.2026 (Gründer): weißer Knopf oben wieder mit grauem Schatten; schwarzer Knopf: Schein unten bleibt,
dazu ganz leicht an den Seiten und oben;
   Headline nicht mehr fett; Pille wieder wie vorher (34-px-Fotos,
2-px-Ring,
alter Innenabstand),
nur größere Schrift */
.leiste:not(.da) .btn-knopf,
.leiste:not(.da) .btn-knopf:hover{box-shadow:0 8px 26px rgba(60,20,40,.22)}
.leiste.da .btn-knopf{box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 1px 2px rgba(13,13,16,.14),
  -18px 20px 34px -14px rgba(177,92,255,.26),0 22px 36px -14px rgba(255,122,182,.22),18px 20px 34px -14px rgba(255,177,58,.3),
  -12px 0 18px -10px rgba(177,92,255,.14),12px 0 18px -10px rgba(255,177,58,.16),0 -8px 16px -10px rgba(255,122,182,.12)}
#h1 .w:not(em){-webkit-text-stroke:0}
.hero-inhalt .hero-pille.oben{gap:12px;padding:8px 18px 8px 10px;font-size:15.5px}
.hero-inhalt .hero-pille.oben .gesicht{width:34px;height:34px;margin-left:-9px;border-width:2px}
.hero-inhalt .hero-pille.oben .gesichter .gesicht:first-child{margin-left:0}
@media (max-width:820px){.hero-inhalt .hero-pille.oben{font-size:13.5px;gap:9px;padding:6px 14px 6px 7px}.hero-inhalt .hero-pille.oben .gesicht{width:28px;height:28px}}
/* 14.10.2026 (Gründer): Ring um die Fotos der Pille halb so dick */
.hero-inhalt .hero-pille.oben .gesicht{border-width:1px}
/* 14.10.2026 (Gründer): V2 ohne Filter verworfen ("nur V1 ist besser"); Tönung über dem Hero-Bild als Mittelding: 15 % statt 30 % */
.hero-bild::after{background:linear-gradient(180deg,rgba(70,25,50,.15) 0%,rgba(70,25,50,.15) 45%,rgba(70,25,50,.15) 100%)}
/* V2 der Leiste (?leiste=2): im Hero unsichtbar,
erscheint weich,
sobald der weiße Bereich beginnt (Klasse "da") */
html[data-leiste="2"] .leiste{transition:opacity 450ms var(--kurve),transform 550ms var(--kurve),visibility 0s linear 0s}
html[data-leiste="2"] .leiste:not(.da){opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-24px);
  transition:opacity 300ms var(--kurve),transform 400ms var(--kurve),visibility 0s linear 400ms}
/* ===== 14.10.2026 (Gründer): vier Hero-Stile zum Vergleich (?stil=2/3/4; ohne Angabe = Stil 1 Blumenwiese wie bisher) =====
   Stile 2 bis 4 haben einen hellen Hintergrund: Schrift dunkel,
Leiste schon im Hero schwarz{background:#fff}
/* gemeinsam für 2 bis 4: dunkle Schrift{color:#0d0d10;text-shadow:none}
/* Stil 2 mit dem echten Bild vom Gründer (14.10.2026,
hero-stil2.jpg,
Original stil-ideen-14-10/hero-stil2-original.webp): keine Umfärbung,
kein Verlauf{background:#f3ebe2}
/* Stil 2: Bild ganze Breite,
unten angelegt{background:#f3ebe2 url(hero-stil2.jpg) 50% 100%/max(100%,calc(100vh * 16 / 9)) auto no-repeat}
/* Stil 2 jetzt schwarz-weiß (Gründer 14.10.: nur Schwarz/Weiß{background-color:#fff}
/* ===== Stil 3 "Nacht" (Gründer 14.10.2026: "alles schwarz und oben kleine Sterne und einen größeren Stern in SmartChat-Farbe in den 4 Farben") =====
   Markenfarben aus der Logo-Kugel: Rosa #F08EC6,
Lila #D8A6EA,
Orange #F59A2C,
Gelb #F6D870. Sicherungen *.vor-nacht-14-10 */
.nacht{display:none}
.nacht-sterne{position:absolute;inset:0}
.nacht-sterne .funkel{animation:nachtFunkel 3.6s ease-in-out infinite}
0%,
100%{opacity:.25}
50%{opacity:1}
.nacht-stern{position:absolute;left:50%;top:13%;width:clamp(70px,7vw,110px);height:auto;transform:translateX(-50%);
  filter:drop-shadow(0 0 18px rgba(240,142,198,.55)) drop-shadow(0 0 46px rgba(216,166,234,.35));animation:nachtStern 6s ease-in-out infinite}
0%,
100%{transform:translateX(-50%) scale(1)}
50%{transform:translateX(-50%) scale(1.06)}
.nacht-schein{position:absolute;left:50%;top:13%;width:clamp(420px,46vw,760px);aspect-ratio:1;transform:translate(-50%,-38%);border-radius:50%;
  background:radial-gradient(circle,rgba(240,142,198,.22) 0%,rgba(216,166,234,.12) 30%,rgba(245,154,44,.05) 52%,rgba(0,0,0,0) 70%)}
@media (max-width:820px){.nacht-stern{top:16%}.nacht-schein{top:16%}}
@media (prefers-reduced-motion:reduce){.nacht-sterne .funkel,.nacht-stern{animation:none}}
/* ===== Stil 2 jetzt "Nachtwiese" (Gründer 14.10.2026: Bild mit grünen Hügeln,
Sternenhimmel,
SmartChat-Stern oben rechts).
   Berg-Fassung: hero-stil2.jpg (Schwarz-Weiß),
Sicherung style.css.vor-nachtwiese ===== */
html[data-stil="2"] .hero{background:#050816}
html[data-stil="2"] .hero-bild img{display:none}
html[data-stil="2"] .hero-bild{background:#050816 url(hero-nachtwiese.jpg) 50% 100%/cover no-repeat}
html[data-stil="2"] .hero-bild::after{background:linear-gradient(180deg,rgba(5,8,22,.12) 0%,rgba(5,8,22,0) 40%)}
html[data-stil="2"] .hero-inhalt h1,
html[data-stil="2"] .hero-inhalt .unterzeile{text-shadow:0 2px 24px rgba(5,8,22,.55)}
html[data-stil="2"] .hero-inhalt .unterzeile{color:rgba(255,255,255,.82)}
html[data-stil="2"] .hero-inhalt .hero-pille.oben,
html[data-stil="2"] .knopfreihe .btn-knopf.glas{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
/* Stil 2 Nachtwiese am Handy: Ausschnitt nach rechts, damit der SmartChat-Stern sichtbar bleibt */
@media (max-width:820px){html[data-stil="2"] .hero-bild{background-position:82% 100%}}
/* Stil 2: beim Zusammenziehen (Scrollen) bleibt der Rand um die Bildkarte weiß,
nicht dunkel */
html[data-stil="2"] .hero{background:#fff}

/* ===== Stil 3 jetzt "Nachtwiese 2" (Gründer 14.10.2026: weniger Sterne, nur oben, alle verschieden, SmartChat-Stern kleiner mit Glow), Vergleich zu Stil 2.
   Code-Nacht (Sterne im Code) ersetzt; Sicherung style.css.vor-nachtwiese2 ===== */
html[data-stil="3"] .hero{background:#fff}
html[data-stil="3"] .hero-bild img{display:none}
html[data-stil="3"] .hero-bild{background:#081433 url(hero-nachtwiese2.jpg) 50% 100%/cover no-repeat}
html[data-stil="3"] .hero-bild::after{background:linear-gradient(180deg,rgba(5,8,22,.12) 0%,rgba(5,8,22,0) 40%)}
html[data-stil="3"] .hero-inhalt h1,html[data-stil="3"] .hero-inhalt .unterzeile{text-shadow:0 2px 24px rgba(5,8,22,.55)}
html[data-stil="3"] .hero-inhalt .unterzeile{color:rgba(255,255,255,.82)}
html[data-stil="3"] .hero-inhalt .hero-pille.oben,html[data-stil="3"] .knopfreihe .btn-knopf.glas{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
@media (max-width:820px){html[data-stil="3"] .hero-bild{background-position:80% 100%}}

/* ===== Stil 4 "Nachtwiese 3" (Gründer 14.10.2026: finaler Prompt, vorderer Hügel höher, Sterne weiß, SmartChat-Stern stärker), Vergleich zu Stil 3 ===== */
html[data-stil="4"] .hero{background:#fff}
html[data-stil="4"] .hero-bild img{display:none}
html[data-stil="4"] .hero-bild{background:#081433 url(hero-nachtwiese3.jpg) 50% 100%/cover no-repeat}
html[data-stil="4"] .hero-bild::after{background:linear-gradient(180deg,rgba(5,8,22,.12) 0%,rgba(5,8,22,0) 40%)}
html[data-stil="4"] .hero-inhalt h1,html[data-stil="4"] .hero-inhalt .unterzeile{text-shadow:0 2px 24px rgba(5,8,22,.55)}
html[data-stil="4"] .hero-inhalt .unterzeile{color:rgba(255,255,255,.82)}
html[data-stil="4"] .hero-inhalt .hero-pille.oben,html[data-stil="4"] .knopfreihe .btn-knopf.glas{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
@media (max-width:820px){html[data-stil="4"] .hero-bild{background-position:80% 100%}}

/* ===== Stil 5 "Nachtwiese 4" (Gründer 14.10.2026: wie V4, nur vordere Hügel tiefer, wieder mehrere Schichten) ===== */
html[data-stil="5"] .hero{background:#fff}
html[data-stil="5"] .hero-bild img{display:none}
html[data-stil="5"] .hero-bild{background:#081433 url(hero-nachtwiese4.jpg) 50% 100%/cover no-repeat}
html[data-stil="5"] .hero-bild::after{background:linear-gradient(180deg,rgba(5,8,22,.12) 0%,rgba(5,8,22,0) 40%)}
html[data-stil="5"] .hero-inhalt h1,html[data-stil="5"] .hero-inhalt .unterzeile{text-shadow:0 2px 24px rgba(5,8,22,.55)}
html[data-stil="5"] .hero-inhalt .unterzeile{color:rgba(255,255,255,.82)}
html[data-stil="5"] .hero-inhalt .hero-pille.oben,html[data-stil="5"] .knopfreihe .btn-knopf.glas{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
@media (max-width:820px){html[data-stil="5"] .hero-bild{background-position:80% 100%}}
/* Stil 5 am Desktop: Bild 120 % hoch und oben angelegt, damit die Hügel tiefer sitzen (unten wird nur Gras abgeschnitten) */
@media (min-width:821px){html[data-stil="5"] .hero-bild{background-size:auto 120%;background-position:70% 0%;background-color:#060a17}}

/* ===== 14.10.2026 (Gründer): Leiste breiter, Logo größer, Glas der Leiste genau wie Pille und Glas-Knopf; Hero-Inhalt ein Stück höher ===== */
.leiste{gap:58px;height:68px;padding:0 10px 0 36px}
.logo{width:128px;height:33px}
.leiste,.leiste.da{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(20px) saturate(1.05);-webkit-backdrop-filter:blur(20px) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 26px rgba(60,20,40,.14)}
html[data-stil="2"] .leiste,html[data-stil="3"] .leiste,html[data-stil="4"] .leiste,html[data-stil="5"] .leiste{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.leiste.da{border-color:rgba(13,13,16,.08)}
.hero-inhalt{top:46%}
@media (max-width:820px){.leiste{gap:20px;height:58px;padding:0 9px 0 20px}.logo{width:104px;height:27px}.hero-inhalt{top:47%}}
/* 15.10.2026 (Gründer): Unterzeile etwas schmaler als Headline-Zeile 2 ("Lösung für dein Unternehmen", 714 px bei 1440); bei diesem Text ergibt das 3 Zeilen */
.hero-inhalt .unterzeile{max-width:min(660px,92vw);font-size:clamp(16px,1.35vw,19px)}
/* 15.10.2026 (Gründer): Abstände im Hero: Pille bis Headline 30, Headline bis Unterzeile 20, Unterzeile bis Knöpfe 30 */
.hero-inhalt .hero-pille.oben{margin-bottom:30px}
.hero-inhalt .unterzeile{margin-top:20px}
.hero-inhalt .knopfreihe{margin-top:30px}
/* 15.10.2026 (Gründer): Pille bis Headline 20, Headline bis Unterzeile 14, Unterzeile bis Knöpfe 20 */
.hero-inhalt .hero-pille.oben{margin-bottom:20px}
.hero-inhalt .unterzeile{margin-top:14px}
.hero-inhalt .knopfreihe{margin-top:20px}
/* 15.10.2026 (Gründer, final): Headline bis Unterzeile 10 px */
.hero-inhalt .unterzeile{margin-top:10px}
/* 15.10.2026 (Gründer): weiße Knöpfe mit demselben Verlauf wie der schwarze (oben heller, unten etwas dunkler) und demselben feinen Glanz oben */
.knopfreihe .btn-knopf.weiss,.knopfreihe .btn-knopf.weiss:hover,
.leiste:not(.da) .btn-knopf,.leiste:not(.da) .btn-knopf:hover{background:linear-gradient(180deg,#ffffff 0%,#e9e9ee 100%)}
.knopfreihe .btn-knopf.weiss::before,.leiste:not(.da) .btn-knopf::before{opacity:1;background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.2) 100%)}

/* ===== 18.10.2026 Handy-Bugrunde 2 (Gründer: "siehst du die Fehler am Handy nicht?!"), NUR bis 760 px, Desktop unverändert =====
   Leiste: am Handy lag sie als fast durchsichtiges Glas (weiß 5 %, Weichzeichner) über den Inhalten. Über weißen Seiten wirkte sie dadurch
   grau und ausgewaschen (der Inhalt dahinter schimmerte verwischt durch, z. B. schwarze Knöpfe als grauer Fleck neben dem Logo).
   Jetzt: nach dem Hero (.da) deckend weiß, klarer Rand, deutlicher Schatten, Knopf schwarz mit dem bunten Schein wie am Desktop.
   Im Hero (nicht .da) dunkles, deckenderes Glas, damit die weiße Wortmarke nicht über den weißen Hero-Knöpfen verschwindet. */
@media (max-width:760px){
  /* html[data-stil] .leiste (Stil 5 ist Standard) ist stärker als .leiste.da, deshalb hier mit html davor */
  html .leiste.da,html[data-stil] .leiste.da{background:#fff;border-color:rgba(13,13,16,.10);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 1px 2px rgba(13,13,16,.06),0 10px 28px -8px rgba(13,13,16,.22)}
  html .leiste:not(.da),html[data-stil] .leiste:not(.da){background:rgba(8,12,28,.42);border-color:rgba(255,255,255,.34)}
}
/* Handy-Bugrunde 2: Hero-Pille 14 px statt 13,5 px, Zeilen ausgeglichen (vorher stand "bereits" allein in Zeile 2). Nur bis 760 px. */
@media (max-width:760px){
  .hero-inhalt .hero-pille.oben{font-size:14px}
  .hero-inhalt .hero-pille.oben>span{text-wrap:balance}
}


/* 02.11.2026 (Gründer, nur Handy): Kopfleiste oben nur "Kostenfrei testen" und drei Striche, kein Logo; die drei Striche öffnen die Links. Desktop unverändert. */
.leiste-menue,.btn-knopf .k-kurz{display:none}
@media (max-width:760px){
  .leiste{display:flex!important;align-items:center;justify-content:space-between;gap:10px}
  .leiste .logo{display:none!important}
  .leiste .btn-knopf .k-lang{display:none}
  .leiste .btn-knopf .k-kurz{display:inline}
  .leiste-menue{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin:0;padding:0;background:transparent;border:0;cursor:pointer;flex:none}
  .leiste-menue span{display:block;width:22px;height:2px;border-radius:2px;background:#0d0d10}
  .leiste .links{display:none!important}
  .leiste.offen .links{display:flex!important;flex-direction:column;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:18px;padding:10px 8px;box-shadow:0 12px 32px rgba(13,13,16,.16)}
  .leiste.offen .links a{color:#0d0d10!important;text-shadow:none!important;padding:14px 16px;font-size:17px;text-align:center}
}

@media (max-width:760px){
  .leiste:not(.da) .leiste-menue span{background:#fff}
  .leiste.da .leiste-menue span{background:#0d0d10}
  .leiste.offen .links{left:50%;right:auto;transform:translateX(-50%);width:min(335px,calc(100vw - 40px))}
}


/* 02.11.2026 (Gründer, nur Handy-Hero): nur EIN Knopf, Block etwas höher, Bild unten abgeschnitten (Hero kürzer, der nächste Abschnitt schaut unten heraus), Pfeil nach unten, Unterzeile etwas kleiner. Desktop unverändert. */
@media (max-width:760px){
  .hero-wrap{height:calc(100svh - 72px)!important}
  .hero{height:calc(100svh - 72px)!important;position:relative!important}
  .hero-inhalt{top:44%!important;transform:translate(-50%,-50%)!important}
  .knopfreihe .btn-knopf.glas{display:none!important}
  .unterzeile{font-size:15px!important;line-height:1.45!important}
  .scroll-hinweis{display:block!important;width:28px;height:28px;border:0!important;bottom:20px;opacity:1}
  .scroll-hinweis i{left:50%;top:3px;width:14px;height:14px;margin-left:-7px;border:0;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;border-radius:0;background:none;transform:rotate(45deg);animation:none!important}
}

/* 02.11.2026: Handy: kein seitliches Wackeln (Seite war 385 px breit statt 375) */
@media (max-width:760px){html,body{overflow-x:clip}}

/* 02.11.2026 (Gründer, nur Handy): oben rechts NUR drei Striche (kein Knopf, keine Umrandung, kein Hintergrund); beim Öffnen wird die ganze Seite weiß, die Links stehen linksbündig, und die drei Striche werden oben rechts ein schwarzes X. */
@media (max-width:760px){
  .leiste{left:auto!important;right:0!important;top:0!important;transform:none!important;width:auto!important;height:56px!important;padding:0 6px!important;gap:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;outline:0!important}
  .leiste::before,.leiste::after{display:none!important}
  .leiste .btn-knopf{display:none!important}
  .leiste-menue{position:relative;z-index:3;width:48px;height:48px}
  .leiste-menue span{transition:none!important}
  .leiste.offen{left:0!important;right:0!important;top:0!important;bottom:0!important;width:100%!important;height:100svh!important;background:#fff!important;justify-content:flex-end;align-items:flex-start!important;padding:4px 6px!important;overflow-y:auto}
  .leiste.offen .leiste-menue{position:absolute;top:4px;right:6px}
  .leiste.offen .leiste-menue span{background:#0d0d10!important}
  .leiste.offen .leiste-menue span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .leiste.offen .leiste-menue span:nth-child(2){opacity:0}
  .leiste.offen .leiste-menue span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .leiste.offen .links{display:flex!important;position:static!important;transform:none!important;width:100%!important;flex-direction:column;align-items:flex-start!important;gap:0;padding:84px 24px 40px!important;background:none!important;box-shadow:none!important;border-radius:0!important}
  .leiste.offen .links a{color:#0d0d10!important;text-shadow:none!important;text-align:left!important;font:400 30px/1.2 var(--serif,"Instrument Serif",Georgia,serif)!important;padding:14px 0!important;border-bottom:1px solid #ececf0;width:100%}
  html:has(.leiste.offen){overflow:hidden}
}


/* 02.11.2026 (Gründer, nur Handy-Hero): Unterzeile in genau 3 Zeilen; Hero-Knopf etwas breiter mit Herzschlag-Animation (pumpt). Desktop unverändert. */
.u-br{display:none}
@keyframes herzschlag{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(1)}36%{transform:scale(1.07)}60%{transform:scale(1)}}
@media (max-width:760px){
  .u-br{display:inline}
  .unterzeile{font-size:clamp(13px,3.9vw,15px)!important;max-width:none!important;white-space:nowrap}
  .knopfreihe .btn-knopf.gross.weiss{min-width:260px;padding:0 36px!important;animation:herzschlag 1.6s ease-in-out infinite!important}
}
@media (prefers-reduced-motion:reduce){.knopfreihe .btn-knopf.gross.weiss{animation:none!important}}


/* 02.11.2026 (Gründer, nur Handy): Menü-Knopf "Kostenfrei testen" unten im geöffneten Menü; drei Striche und X größer. Desktop: der Knopf ist unsichtbar. */
.links .menue-knopf{display:none}
@media (max-width:760px){
  .leiste-menue{width:56px!important;height:56px!important;gap:7px!important}
  .leiste-menue span{width:30px!important;height:3px!important;border-radius:2px!important}
  .leiste.offen .leiste-menue{top:0!important;right:4px!important}
  .leiste.offen .leiste-menue span:nth-child(1){transform:translateY(10px) rotate(45deg)!important}
  .leiste.offen .leiste-menue span:nth-child(3){transform:translateY(-10px) rotate(-45deg)!important}
  .leiste.offen .links{min-height:100svh!important;box-sizing:border-box!important;padding-bottom:28px!important}
  .leiste.offen .links a.menue-knopf{display:flex!important;align-items:center;justify-content:center;margin-top:auto!important;width:100%;height:56px;padding:0!important;border:0!important;border-radius:14px;background:#0d0d10!important;color:#fff!important;font:600 17px/1 "Instrument Sans",system-ui,sans-serif!important;text-align:center!important}
}

/* 02.11.2026 (Gründer, nur Handy): Pfeil im Hero hüpft */
@keyframes pfeilhuepf{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(9px) rotate(45deg)}}
@media (max-width:760px){.scroll-hinweis i{animation:pfeilhuepf 1.1s ease-in-out infinite!important}}
@media (prefers-reduced-motion:reduce){.scroll-hinweis i{animation:none!important}}

/* 02.11.2026 (Gründer, Korrektur): "Kostenfrei testen" ist ein ganz normaler Menüpunkt direkt unter "Anmelden" (kein Knopf unten). */
@media (max-width:760px){
  .leiste.offen .links{min-height:0!important;padding-bottom:40px!important}
  .leiste.offen .links a.menue-knopf{margin-top:0!important;height:auto!important;border:0!important;border-bottom:1px solid #ececf0!important;border-radius:0!important;background:none!important;color:#0d0d10!important;font:400 30px/1.2 var(--serif,"Instrument Serif",Georgia,serif)!important;text-align:left!important;justify-content:flex-start!important;padding:14px 0!important;width:100%}
}


/* 02.11.2026 (Gründer, nur Handy-Hero): Unterzeile ohne "individuelles", in 2 Zeilen (ausgewogen umbrochen). Desktop unverändert (Wort bleibt). */
@media (max-width:760px){
  .u-ind{display:none}
  .u-br{display:none!important}
  .unterzeile{white-space:normal!important;text-wrap:balance;max-width:345px!important;margin-left:auto!important;margin-right:auto!important}
}

@media (max-width:760px){
  .u-br{display:inline!important}
  .unterzeile{white-space:nowrap!important;font-size:clamp(12px,3.45vw,14px)!important;max-width:none!important}
}

/* 02.11.2026 (Gründer, nur Handy): Pfeil hüpft langsamer und sitzt etwas weiter oben */
@media (max-width:760px){
  .scroll-hinweis{bottom:48px!important}
  .scroll-hinweis i{animation:pfeilhuepf 2.2s ease-in-out infinite!important}
}