/* =========================================================
   SABI AI – Landingpage
   Mobile first. Keine externen Abhängigkeiten, keine Tracker.
   ========================================================= */

:root{
  /* Marke */
  --sabi:            #6D3EE0;   /* SABI-Lila (Text/Buttons, AA auf Weiß) */
  --sabi-600:        #5B31C4;
  --sabi-700:        #4A2AA0;
  --lavendel:        #EDE7FF;
  --lavendel-hell:   #F6F2FF;
  --blau-hell:       #EEF4FF;
  --pastell-warm:    #FFF3EC;
  --pastell-rose:    #FDEEF6;

  /* Neutral */
  --weiss:           #FFFFFF;
  --tinte:           #1E1A2E;   /* Fließtext dunkel */
  --tinte-weich:     #4B4462;
  --tinte-leise:     #6B6484;
  --linie:           #E7E2F2;

  /* System */
  --radius:          18px;
  --radius-lg:       26px;
  --radius-pill:     999px;
  --schatten-s:      0 2px 8px rgba(45,30,90,.06);
  --schatten-m:      0 10px 30px rgba(45,30,90,.08);
  --schatten-l:      0 22px 60px rgba(45,30,90,.12);
  --wrap:            1200px;
  --header-h:        68px;

  --ff: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Lokale Informations- und Rechtsseiten */
.legal-page { min-height: 100vh; background: #fbf8ff; color: #251b31; }
.legal-main { width: min(780px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0 96px; }
.legal-main .brand { display: inline-flex; margin-bottom: 48px; text-decoration: none; }
.legal-main h1 { margin: 0 0 24px; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; }
.legal-main h2 { margin: 34px 0 10px; font-size: 1.25rem; }
.legal-main p, .legal-main li { line-height: 1.7; color: #53445c; }
.legal-main a { color: #673c7c; }
.legal-card { padding: clamp(22px, 5vw, 42px); border: 1px solid #e7dced; border-radius: 24px; background: #fff; box-shadow: 0 18px 55px rgba(66,37,83,.08); }
.draft-note { padding: 12px 14px; border-radius: 12px; background: #f2eaf7; color: #5d386f; font-weight: 650; }
.legal-back { display: inline-block; margin-top: 36px; font-weight: 700; }

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--ff);
  font-size:17px;
  line-height:1.65;
  color:var(--tinte);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }

img,svg{ max-width:100%; display:block; }
a{ color:var(--sabi-600); }

h1,h2,h3{ color:var(--tinte); line-height:1.18; letter-spacing:-.015em; margin:0 0 .5em; font-weight:700; }
h1{ font-size:clamp(2.15rem, 8.2vw, 4rem); letter-spacing:-.03em; }
h2{ font-size:clamp(1.6rem, 5.4vw, 2.6rem); letter-spacing:-.02em; }
h3{ font-size:1.12rem; }
p{ margin:0 0 1rem; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

/* ---------- Fokus & Skip-Link ---------- */
:focus-visible{
  outline:3px solid var(--sabi);
  outline-offset:3px;
  border-radius:6px;
}
.skip-link{
  position:absolute; left:12px; top:-64px; z-index:200;
  background:var(--sabi); color:#fff; padding:12px 18px;
  border-radius:var(--radius-pill); text-decoration:none; font-weight:600;
  transition:top .18s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:14px 24px;
  border-radius:var(--radius-pill);
  font-weight:650; font-size:1rem; line-height:1.2;
  text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:transform .16s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  text-align:center;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-primary{ background:var(--sabi); color:#fff; box-shadow:0 8px 22px rgba(109,62,224,.28); }
.btn-primary:hover{ background:var(--sabi-600); box-shadow:0 12px 28px rgba(109,62,224,.34); }

.btn-outline{ background:#fff; color:var(--sabi-700); border-color:var(--lavendel); box-shadow:var(--schatten-s); }
.btn-outline:hover{ border-color:var(--sabi); background:var(--lavendel-hell); }

.btn-ghost{ background:transparent; color:var(--tinte); }
.btn-ghost:hover{ background:var(--lavendel-hell); color:var(--sabi-700); }

.btn-lg{ min-height:58px; padding:16px 30px; font-size:1.05rem; }
.btn-sm{ min-height:46px; padding:11px 20px; font-size:.96rem; }
.btn-block{ display:flex; width:100%; }

/* ---------- Kopfbereich ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.site-header.is-compact{
  border-bottom-color:var(--linie);
  box-shadow:0 6px 20px rgba(45,30,90,.05);
  background:rgba(255,255,255,.95);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:var(--header-h);
  transition:min-height .25s ease;
}
.site-header.is-compact .header-inner{ min-height:56px; }

.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinte); }
.brand-mark{ width:40px; height:40px; transition:width .25s ease, height .25s ease; }
.site-header.is-compact .brand-mark{ width:34px; height:34px; }
.brand-name{ font-weight:750; font-size:1.16rem; letter-spacing:-.02em; }
.brand-ai{ color:var(--sabi); }

.nav-toggle{
  width:48px; height:48px; border:1px solid var(--linie); background:#fff;
  border-radius:14px; display:grid; place-items:center; cursor:pointer; padding:0;
}
.nav-toggle-bars{ display:grid; gap:5px; }
.nav-toggle-bars span{ display:block; width:20px; height:2px; background:var(--tinte); border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.site-nav{
  position:fixed; inset:var(--header-h) 0 auto 0;
  background:#fff; border-bottom:1px solid var(--linie);
  padding:14px 20px 26px;
  display:none; z-index:99;
  box-shadow:var(--schatten-l);
  max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
}
.site-nav.is-open{ display:block; animation:slideDown .22s ease; }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

.nav-list{ list-style:none; margin:0 0 14px; padding:0; }
.nav-list a{
  display:block; padding:14px 8px; font-size:1.06rem; font-weight:600;
  color:var(--tinte); text-decoration:none; border-radius:12px;
}
.nav-list a:hover{ background:var(--lavendel-hell); color:var(--sabi-700); }
.nav-actions{ display:grid; gap:10px; padding-top:8px; border-top:1px solid var(--linie); }
.nav-actions .btn{ width:100%; }

.nav-backdrop{
  position:fixed; inset:0; z-index:98;
  background:rgba(30,26,46,.35);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:38px 0 8px;
  background:
    radial-gradient(1000px 480px at 82% -8%, var(--lavendel) 0%, rgba(237,231,255,0) 62%),
    radial-gradient(760px 420px at 0% 22%, var(--blau-hell) 0%, rgba(238,244,255,0) 60%),
    linear-gradient(180deg, #fff 0%, #FCFAFF 100%);
}
.hero-inner{ display:grid; gap:34px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--linie);
  color:var(--tinte-weich); font-size:.88rem; font-weight:600;
  padding:7px 14px; border-radius:var(--radius-pill); box-shadow:var(--schatten-s);
  margin:0 0 18px;
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--sabi); }

.lead{ font-size:1.09rem; color:var(--tinte-weich); max-width:36ch; margin-bottom:26px; }
.hero-actions{ display:grid; gap:12px; }
.hero-note{ margin-top:16px; font-size:.92rem; color:var(--tinte-leise); }

.hero-visual{ position:relative; display:grid; place-items:center; padding:14px 0 8px; }
.orb{ position:absolute; border-radius:50%; filter:blur(34px); opacity:.75; }
.orb-a{ width:230px; height:230px; background:var(--lavendel); top:-12px; right:2%; }
.orb-b{ width:190px; height:190px; background:var(--pastell-warm); bottom:0; left:2%; }

.chat-card{
  position:relative; width:100%; max-width:400px;
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius-lg);
  box-shadow:var(--schatten-l); padding:18px;
}
.chat-head{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--linie); margin-bottom:14px; }
.chat-name{ display:block; font-weight:700; font-size:1rem; }
.chat-status{ display:block; font-size:.82rem; color:var(--tinte-leise); }
.bubble{ margin:0 0 10px; padding:12px 16px; border-radius:18px; font-size:.96rem; max-width:88%; }
.bubble-user{ background:var(--lavendel-hell); color:var(--tinte); margin-left:auto; border-bottom-right-radius:6px; }
.bubble-sabi{ background:var(--sabi); color:#fff; border-bottom-left-radius:6px; }
.typing{ display:inline-flex; gap:5px; align-items:center; width:auto; padding:14px 18px; }
.typing span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.85); animation:blink 1.3s infinite; }
.typing span:nth-child(2){ animation-delay:.18s; }
.typing span:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.brand-core{
  margin:34px 0 0; padding:26px 22px;
  background:linear-gradient(135deg, var(--lavendel-hell), var(--blau-hell));
  border:1px solid var(--linie); border-radius:var(--radius-lg);
  text-align:center;
}
.brand-core p{
  margin:0; font-size:clamp(1.08rem, 4.2vw, 1.5rem); font-weight:650;
  color:var(--tinte); line-height:1.5; letter-spacing:-.01em;
}

/* ---------- Abschnitte ---------- */
.section{ padding:58px 0; }
.section-tinted{ background:linear-gradient(180deg,#FCFAFF 0%, var(--lavendel-hell) 100%); }
.section-head{ margin-bottom:30px; }
.kicker{
  text-transform:uppercase; letter-spacing:.13em; font-size:.76rem; font-weight:700;
  color:var(--sabi); margin:0 0 10px;
}
.section-sub{ color:var(--tinte-weich); max-width:52ch; margin:0; }

/* Karten */
.cards{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.card{
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius-lg);
  padding:24px 22px; box-shadow:var(--schatten-s);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--schatten-m); border-color:#DCD3F5; }
.card-icon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px;
  background:var(--lavendel-hell); color:var(--sabi); margin-bottom:16px;
}
.card-icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom:.35em; }
.card p{ margin:0; color:var(--tinte-weich); font-size:.98rem; }

/* Schritte */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:s; }
.step{
  position:relative; background:#fff; border:1px solid var(--linie);
  border-radius:var(--radius-lg); padding:24px 22px; box-shadow:var(--schatten-s);
}
.step-num{
  display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  background:var(--sabi); color:#fff; font-weight:750; font-size:1.15rem; margin-bottom:14px;
}
.step h3{ font-size:1.06rem; margin-bottom:.35em; }
.step p{ margin:0; color:var(--tinte-weich); font-size:.96rem; }

/* Persönlicher Nutzen */
.section-personal{ padding-top:10px; }
.personal-card{
  background:linear-gradient(140deg, var(--sabi) 0%, #7C4DEF 48%, #9B6BF5 100%);
  color:#fff; border-radius:var(--radius-lg);
  padding:36px 26px; text-align:center; box-shadow:var(--schatten-l);
}
.personal-card h2{ color:#fff; }
.personal-card p{ color:rgba(255,255,255,.94); max-width:46ch; margin:0 auto 24px; font-size:1.04rem; }
.personal-card .btn-primary{ background:#fff; color:var(--sabi-700); box-shadow:0 10px 26px rgba(20,10,50,.22); }
.personal-card .btn-primary:hover{ background:var(--lavendel-hell); }

/* Tarife */
.plans{ display:grid; gap:18px; }
.plan{
  position:relative; background:#fff; border:1px solid var(--linie);
  border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--schatten-s);
  display:flex; flex-direction:column;
}
.plan-featured{
  border:2px solid var(--sabi); box-shadow:var(--schatten-l);
  background:linear-gradient(180deg,#fff 0%, #FBF9FF 100%);
}
.plan-badge{
  position:absolute; top:-14px; left:24px;
  background:var(--sabi); color:#fff; font-size:.78rem; font-weight:700;
  letter-spacing:.04em; padding:7px 16px; border-radius:var(--radius-pill);
  margin:0; box-shadow:0 6px 16px rgba(109,62,224,.3);
}
.plan-name{ font-size:1.32rem; margin-bottom:.25em; }
.plan-price{ margin:0 0 .6rem; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.plan-price .amount{ font-size:2.3rem; font-weight:750; letter-spacing:-.03em; color:var(--tinte); }
.plan-price .period{ font-size:1rem; color:var(--tinte-leise); font-weight:600; }
.plan-desc{ color:var(--tinte-weich); font-size:.98rem; margin-bottom:1.2rem; }
.plan-list{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:11px; flex:1; }
.plan-list li{ position:relative; padding-left:30px; color:var(--tinte-weich); font-size:.97rem; }
.plan-list li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:20px; height:20px; border-radius:50%;
  background:var(--lavendel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D3EE0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
.plan-foot{
  margin:22px auto 0; max-width:62ch; text-align:center;
  font-size:.9rem; color:var(--tinte-leise);
}

/* Vertrauen */
.trust{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.trust li{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:18px 18px; box-shadow:var(--schatten-s);
}
.trust h3{ font-size:1.02rem; margin:0 0 .2em; }
.trust p{ margin:0; color:var(--tinte-weich); font-size:.94rem; }
.check{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--lavendel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D3EE0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

/* Abschluss */
.section-final{
  background:
    radial-gradient(700px 340px at 50% 0%, var(--lavendel) 0%, rgba(237,231,255,0) 70%),
    linear-gradient(180deg,#FCFAFF 0%, #fff 100%);
  text-align:center;
}
.final-inner p{ color:var(--tinte-weich); max-width:46ch; margin:0 auto 26px; }
.final-actions{ display:grid; gap:12px; max-width:420px; margin-inline:auto; }

/* Footer */
.site-footer{ background:#FBF9FF; border-top:1px solid var(--linie); padding:38px 0 26px; }
.footer-inner{ display:grid; gap:24px; }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand p{ margin:0; font-size:.96rem; }
.muted{ color:var(--tinte-leise); }
.footer-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.footer-nav a{
  display:inline-block; padding:9px 0; color:var(--tinte-weich);
  text-decoration:none; font-size:.96rem; font-weight:550;
}
.footer-nav a:hover{ color:var(--sabi-700); text-decoration:underline; }
.footer-legal{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--linie);
  display:grid; gap:10px;
}
.placeholder-note{
  margin:0; font-size:.85rem; color:var(--tinte-leise);
  background:var(--pastell-warm); border:1px dashed #E8CDBB;
  border-radius:12px; padding:10px 14px;
}
.copyright{ margin:0; font-size:.88rem; color:var(--tinte-leise); }

/* =========================================================
   Tablet ab 640px
   ========================================================= */
@media (min-width:640px){
  .hero{ padding-top:52px; }
  .hero-actions{ display:flex; flex-wrap:wrap; }
  .hero-actions .btn{ flex:0 1 auto; }
  .cards{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .plans{ grid-template-columns:repeat(2,1fr); gap:22px; align-items:stretch; }
  .trust{ grid-template-columns:repeat(2,1fr); }
  .final-actions{ display:flex; flex-wrap:wrap; justify-content:center; max-width:none; }
  .footer-inner{ grid-template-columns:1fr auto; align-items:center; }
  .footer-nav ul{ grid-auto-flow:column; gap:22px; }
  .footer-legal{ grid-template-columns:1fr auto; align-items:center; gap:18px; }
  .brand-core{ padding:34px; }
}

/* =========================================================
   Laptop ab 960px – Navigation horizontal
   ========================================================= */
@media (min-width:960px){
  body{ font-size:17.5px; }
  .wrap{ padding-inline:32px; }
  .section{ padding:86px 0; }
  .section-head{ margin-bottom:44px; }

  .nav-toggle{ display:none; }
  .nav-backdrop{ display:none !important; }
  .site-nav{
    position:static; display:flex !important; align-items:center; gap:26px;
    background:none; border:0; box-shadow:none; padding:0; max-height:none; overflow:visible;
    animation:none;
  }
  .nav-list{ display:flex; gap:6px; margin:0; }
  .nav-list a{ padding:9px 14px; font-size:.98rem; font-weight:600; }
  .nav-actions{
    display:flex; gap:10px; padding:0; border:0;
  }
  .nav-actions .btn{ width:auto; }

  .hero{ padding:70px 0 20px; }
  .hero-inner{ grid-template-columns:1.05fr .95fr; align-items:center; gap:56px; }
  .lead{ font-size:1.16rem; }
  .chat-card{ max-width:430px; padding:22px; }
  .orb-a{ width:330px; height:330px; }
  .orb-b{ width:280px; height:280px; }

  .cards{ grid-template-columns:repeat(3,1fr); gap:22px; }
  .card{ padding:30px 26px; }
  .step{ padding:30px 26px; }
  .trust{ grid-template-columns:repeat(3,1fr); }
  .personal-card{ padding:58px 48px; }
  .plans{ max-width:900px; margin-inline:auto; gap:26px; }
  .plan{ padding:36px 32px; }
  .brand-core{ margin-top:52px; padding:40px; }
}

/* =========================================================
   Große Monitore ab 1400px
   ========================================================= */
@media (min-width:1400px){
  :root{ --wrap:1280px; }
  body{ font-size:18px; }
  .section{ padding:104px 0; }
  .hero{ padding-top:88px; }
  .chat-card{ max-width:470px; }
}

/* Kontrast-Modus */
@media (prefers-contrast: more){
  .card,.step,.plan,.trust li{ border-color:#B9AEDB; }
  .lead,.section-sub,.card p,.step p,.plan-desc,.plan-list li,.trust p{ color:#3A3352; }
}

/* Druck */
@media print{
  .site-header,.nav-backdrop,.hero-visual{ display:none !important; }
  body{ font-size:12pt; }
  .btn{ border:1px solid #666; }
}

/* ---------- Zustände aus script.js ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

.nav-list a[aria-current="true"]{ color:var(--sabi-700); background:var(--lavendel-hell); }

/* Übergabepunkt noch nicht hinterlegt.
   Optisch unauffällig – wird nur im internen Prüfmodus markiert:
   Seite mit ?check=1 aufrufen. */
.is-unconfigured{ cursor:default; }
html.sabi-check .is-unconfigured{
  outline:2px dashed #E06A2C; outline-offset:3px; opacity:.7;
}
html.sabi-check .is-unconfigured::after{
  content:" ⚠"; font-size:.9em;
}