/* =========================================================
   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; }
  /* Ohne Bewegung darf nichts unsichtbar bleiben: die Einblendung entfaellt,
     der Inhalt steht sofort. */
  .reveal{ opacity:1 !important; transform:none !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;
}

.billing-interval{
  display:flex; justify-content:center; gap:8px; margin:0 auto 24px;
}
.billing-option{
  min-height:44px; padding:0 16px; border:1px solid #6d3b8d;
  border-radius:999px; background:#fff; color:#5f3774;
  font:inherit; font-weight:750; cursor:pointer;
}
.billing-option.is-active{ background:#6d3b8d; color:#fff; }
.billing-option:focus-visible{ outline:3px solid #bf99d8; outline-offset:3px; }
.annual-saving{ color:#5f3774; font-weight:700; }
@media(max-width:480px){
  .billing-interval{ display:grid; grid-template-columns:1fr; }
  .billing-option{ width:100%; }
}

/* Vertrieb und Partnerschaften: drei gleichwertige Wege, jeweils mit
   einer Schaltflaeche am Kartenfuss. Die Karten erben das Aussehen der
   Moeglichkeiten-Karten, brauchen aber einen ruhigen Abschluss unten. */
.partner-intro{
  max-width:62ch; margin:0 auto 26px; text-align:center;
  color:var(--tinte-weich); font-size:1rem;
}
.partner-card{ display:flex; flex-direction:column; }
.partner-card p{ flex:1; margin-bottom:20px; }
.partner-card:hover{ transform:none; }
.partner-foot{
  margin:26px auto 0; max-width:62ch; text-align:center;
  color:var(--tinte-leise); font-size:.93rem;
}
@media(min-width:900px){
  .partner-cards{ grid-template-columns:repeat(3,1fr); }
}

/* Seit die Navigation den Punkt "Partner" traegt, wird es zwischen 960 und
   1080 Pixeln knapp: "So funktioniert's" brach dort auf zwei Zeilen um und
   machte die Kopfzeile hoeher als den Rest. Die Beschriftungen bleiben
   einzeilig, dafuer ruecken die Punkte in diesem Bereich enger zusammen. */
@media(min-width:900px){
  .nav-list a{ white-space:nowrap; }
}
@media(min-width:900px) and (max-width:1099px){
  .nav-list{ gap:2px; }
  .nav-list a{ padding:9px 10px; font-size:.94rem; }
}

/* Der Empfehlungs-Bonus ist die einzige Aussage im Partnerbereich, die einen
   konkreten Vorteil verspricht. Sie steht deshalb ruhig hervorgehoben ueber
   den drei Karten - ohne Zahlen, ohne Geldbetrag. */
.partner-bonus{
  max-width:62ch; margin:0 auto 26px; text-align:center;
  color:var(--tinte); font-size:1.06rem;
}

/* Schnellstarter: kurze Einstiege direkt unter dem Aufmacher. Bewusst
   flach gehalten - sie sollen den Weg in die App oeffnen, nicht selbst
   wie ein eigener Abschnitt wirken. */
.section-quick{ padding-top:0; }
.quick-heading{ font-size:1.22rem; margin:0 0 14px; text-align:center; }
.quick-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.quick-list a{
  display:inline-block; padding:11px 17px; border:1px solid var(--linie);
  border-radius:999px; background:#fff; color:var(--sabi-700);
  text-decoration:none; font-size:.95rem; font-weight:600;
}
.quick-list a:hover{ background:var(--lavendel-hell); }
.quick-note{ margin:16px 0 0; text-align:center; color:var(--tinte-leise); font-size:.92rem; }

/* =========================================================
   LANDING V2 – 08.09.2026
   Mehr Tiefe, mehr Marke, SABI wieder im Bild.
   Bewusst als geschlossener Block am Ende: die bestehenden
   Regeln darueber bleiben unveraendert, ein Rueckbau ist ein
   Loeschen dieses Blocks.
   ========================================================= */

:root{
  --sabi-tief:   #3B1F7A;   /* dunkler Markenton fuer Flaechen */
  --sabi-nacht:  #2A1657;
  --flaeche-1:   linear-gradient(180deg, #FFFFFF 0%, #FBF9FF 55%, #F4EFFF 100%);
  --flaeche-2:   linear-gradient(180deg, #F7F3FF 0%, #FFFFFF 60%);
  --schatten-xl: 0 34px 90px rgba(45,30,90,.16);
}

/* ---------- Aufmacher: SABI und Gespraech als eine Buehne ---------- */
.hero-visual{ padding:6px 0 4px; }

.hero-stage{
  position:relative;
  width:100%;
  max-width:520px;
  margin-inline:auto;
}

/* Die Figur wird auf ein ruhigeres Hochformat beschnitten. Der Ausschnitt
   sitzt oben, damit Gesicht und die offene Handbewegung sichtbar bleiben. */
.sabi-figure{
  margin:0 0 0 auto;
  width:62%;
  max-width:330px;
}
.sabi-figure img{
  width:100%;
  height:auto;
  aspect-ratio:3/5;
  object-fit:cover;
  object-position:50% 6%;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--lavendel-hell), var(--blau-hell));
  box-shadow:var(--schatten-xl);
}

.hero-stage .chat-card{
  position:absolute;
  left:0;
  bottom:7%;
  width:76%;
  max-width:340px;
  z-index:2;
  backdrop-filter:saturate(150%) blur(2px);
}
.hero-stage .orb{ z-index:0; }
.hero-stage .sabi-figure{ position:relative; z-index:1; }

/* ---------- Wobei darf SABI dir helfen? ---------- */
.section-help{
  position:relative;
  padding:52px 0 58px;
  background:
    radial-gradient(760px 420px at 88% 10%, var(--lavendel) 0%, rgba(237,231,255,0) 62%),
    radial-gradient(620px 380px at 4% 88%, var(--blau-hell) 0%, rgba(238,244,255,0) 60%),
    linear-gradient(180deg, #FCFAFF 0%, #F6F2FF 100%);
  border-block:1px solid var(--linie);
}
.help-inner{ display:grid; gap:28px; align-items:center; }

.help-portrait{ position:relative; width:min(300px, 78%); margin-inline:auto; }
.help-portrait img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:50% 4%;
  border-radius:28px;
  background:linear-gradient(160deg, var(--lavendel-hell), var(--blau-hell));
  box-shadow:var(--schatten-l);
}
.help-quote{
  position:absolute; left:-10px; bottom:-18px;
  margin:0; max-width:82%;
}
.help-quote span{
  display:inline-block;
  background:var(--sabi); color:#fff;
  padding:12px 18px;
  border-radius:20px 20px 20px 6px;
  font-size:1rem; font-weight:650; line-height:1.35;
  box-shadow:0 12px 30px rgba(109,62,224,.32);
}
.help-copy .section-sub{ max-width:54ch; margin-bottom:22px; }
.section-help .quick-list{ justify-content:flex-start; }
.section-help .quick-list a{ box-shadow:var(--schatten-s); }
.section-help .quick-note{ text-align:left; }

/* ---------- Abschnitte bekommen Grund unter den Fuessen ---------- */
.section-soft{
  background:var(--flaeche-1);
}
.section-soft-2{
  position:relative;
  background:
    radial-gradient(720px 380px at 50% -6%, var(--lavendel) 0%, rgba(237,231,255,0) 66%),
    var(--flaeche-2);
}

/* Karten wirken hochwertiger: ruhige Kante, waermerer Fuss, klarer Griff */
.card{
  background:linear-gradient(180deg,#fff 0%, #FDFCFF 100%);
}
.card-icon{
  background:linear-gradient(150deg, var(--lavendel) 0%, #DCCFFA 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.card:hover{ box-shadow:var(--schatten-m); }

.step{ background:linear-gradient(180deg,#fff 0%, #FDFCFF 100%); }
.step-num{ background:linear-gradient(150deg, var(--sabi) 0%, #8A5BF0 100%); box-shadow:0 8px 20px rgba(109,62,224,.28); }

.trust li{ background:linear-gradient(180deg,#fff 0%, #FDFCFF 100%); }

/* ---------- Partnerbereich: erst Haltung, dann Wege ---------- */
.partner-band{
  display:grid; gap:26px;
  margin:0 0 34px;
  padding:32px 24px;
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg, var(--sabi-nacht) 0%, var(--sabi-tief) 44%, var(--sabi) 100%);
  color:#fff;
  box-shadow:var(--schatten-xl);
}
.partner-band h2{ color:#fff; margin-bottom:.35em; }
.kicker-light{ color:#CDB8FF; }
.partner-claim{
  margin:0 0 .6rem;
  font-size:clamp(1.12rem, 4.4vw, 1.45rem);
  font-weight:700; letter-spacing:-.01em; color:#fff;
}
.partner-band-note{ margin:0; color:rgba(255,255,255,.86); max-width:52ch; font-size:1rem; }

.partner-band-person{ display:flex; align-items:center; gap:16px; }
.partner-band-person img{
  flex:0 0 auto;
  width:96px; height:96px;
  object-fit:cover; object-position:50% 4%;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.5);
  box-shadow:0 14px 34px rgba(15,6,45,.35);
}
.partner-band-person p{
  margin:0; font-size:.99rem; color:rgba(255,255,255,.92); font-weight:600;
}

/* ---------- Abschluss als kraeftige Markenflaeche ---------- */
.section-final{
  background:
    radial-gradient(760px 420px at 78% 8%, rgba(155,107,245,.5) 0%, rgba(155,107,245,0) 62%),
    linear-gradient(150deg, var(--sabi-nacht) 0%, var(--sabi-tief) 50%, #5B31C4 100%);
  color:#fff;
}
.section-final h2{ color:#fff; }
.section-final .final-inner p{ color:rgba(255,255,255,.9); }
.section-final .btn-outline{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.55); box-shadow:none;
}
.section-final .btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.section-final .btn-primary{ background:#fff; color:var(--sabi-700); box-shadow:0 12px 30px rgba(12,4,40,.34); }
.section-final .btn-primary:hover{ background:var(--lavendel-hell); }
.section-final .btn-ghost{ color:#fff; }
.section-final .btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ---------- Tablet ---------- */
@media (min-width:640px){
  .help-inner{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:34px; }
  .help-portrait{ width:100%; margin:0; }
  .partner-band{ grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); align-items:center; padding:38px 34px; }
  .partner-band-person{ flex-direction:column; text-align:center; gap:14px; }
  .partner-band-person img{ width:120px; height:120px; }
}

/* ---------- Laptop ---------- */
@media (min-width:960px){
  .section-help{ padding:76px 0 82px; }
  .help-inner{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:52px; }
  .help-portrait{ width:100%; max-width:340px; }
  .help-quote{ bottom:-22px; left:-18px; }
  .partner-band{ padding:46px 44px; gap:40px; }
  .partner-band-person img{ width:136px; height:136px; }
}

@media (min-width:1400px){
  .hero-stage{ max-width:580px; }
  .sabi-figure{ max-width:370px; }
}

/* ---------- Sehr schmale Geraete ---------- */
@media (max-width:400px){
  .hero-stage .chat-card{ width:82%; bottom:4%; padding:14px; }
  .hero-stage .chat-card .bubble{ font-size:.9rem; padding:10px 13px; }
  .sabi-figure{ width:58%; }
  .help-quote span{ font-size:.94rem; padding:10px 15px; }
}

/* Im Druck bleibt die Seite eine reine Textseite. */
@media print{
  .hero-stage,.help-portrait,.partner-band-person{ display:none !important; }
  .partner-band,.section-final{ background:none !important; color:#000 !important; }
  .partner-band h2,.section-final h2{ color:#000 !important; }
}

/* =========================================================
   Kontaktseite – eigenes Formular statt mailto
   ========================================================= */
.kontakt-main{
  padding:38px 0 72px;
  background:
    radial-gradient(880px 460px at 88% -6%, var(--lavendel) 0%, rgba(237,231,255,0) 62%),
    radial-gradient(620px 380px at 0% 40%, var(--blau-hell) 0%, rgba(238,244,255,0) 58%),
    linear-gradient(180deg,#fff 0%, #FBF9FF 100%);
  min-height:70vh;
}
.kontakt-kopf{ margin-bottom:30px; max-width:60ch; }
.kontakt-kopf h1{ font-size:clamp(1.9rem, 6.4vw, 3rem); margin-bottom:.35em; }

.kontakt-inner{ display:grid; gap:22px; align-items:start; }

.kontakt-formularkarte{
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius-lg);
  padding:26px 22px; box-shadow:var(--schatten-l);
}
.kontakt-untertitel{ font-size:1.06rem; margin:0 0 16px; }
.kontakt-seitenkarte .kontakt-untertitel{ margin-top:24px; }
.kontakt-seitenkarte .kontakt-untertitel:first-of-type{ margin-top:0; }

.kontakt-formular{ display:grid; gap:18px; }
.feld{ display:grid; gap:7px; }
.feld label{ font-weight:650; font-size:.96rem; color:var(--tinte); }
.feld input[type="text"],
.feld input[type="email"],
.feld textarea{
  width:100%;
  font:inherit; font-size:1rem;
  color:var(--tinte); background:#FDFCFF;
  border:1px solid var(--linie); border-radius:14px;
  padding:13px 15px;
  min-height:52px;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.feld textarea{ resize:vertical; min-height:150px; line-height:1.6; }
.feld input::placeholder,
.feld textarea::placeholder{ color:#9990AE; }
.feld input:hover,
.feld textarea:hover{ border-color:#D6CCF0; }
.feld input:focus,
.feld textarea:focus{
  outline:none; background:#fff;
  border-color:var(--sabi);
  box-shadow:0 0 0 4px rgba(109,62,224,.16);
}
.feld-hinweis{ margin:0; font-size:.87rem; color:var(--tinte-leise); }

.feld-zustimmung{
  grid-template-columns:auto 1fr; align-items:start; gap:12px;
  background:var(--lavendel-hell); border:1px solid var(--linie);
  border-radius:14px; padding:14px 16px;
}
.feld-zustimmung input{ width:22px; height:22px; margin:2px 0 0; accent-color:var(--sabi); }
.feld-zustimmung label{ font-weight:500; font-size:.92rem; color:var(--tinte-weich); line-height:1.55; }

/* Der Honigtopf muss fuer Menschen unerreichbar sein, aber im Formular
   stehen bleiben - deshalb aus dem Sichtfeld geschoben, nicht display:none. */
.honigtopf{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.kontakt-status{
  margin:0; padding:13px 16px; border-radius:14px;
  font-size:.95rem; font-weight:600; line-height:1.5;
}
.kontakt-status.ist-erfolg{ background:#E9F7EE; border:1px solid #BCE3CB; color:#1F6236; }
.kontakt-status.ist-fehler{ background:#FDECEC; border:1px solid #F2C3C3; color:#8C2323; }
.kontakt-status.ist-hinweis{ background:var(--lavendel-hell); border:1px solid var(--linie); color:var(--tinte-weich); }

.kontakt-seitenkarte{
  background:linear-gradient(180deg,#fff 0%, #FBF9FF 100%);
  border:1px solid var(--linie); border-radius:var(--radius-lg);
  padding:24px 22px; box-shadow:var(--schatten-s);
}
.kontakt-person{
  display:flex; align-items:center; gap:15px;
  padding-bottom:20px; margin-bottom:4px; border-bottom:1px solid var(--linie);
}
.kontakt-person img{
  flex:0 0 auto; width:84px; height:84px;
  object-fit:cover; object-position:50% 4%;
  border-radius:50%;
  background:linear-gradient(160deg, var(--lavendel-hell), var(--blau-hell));
  box-shadow:var(--schatten-m);
}
.kontakt-person p{ margin:0; font-size:.96rem; color:var(--tinte-weich); font-weight:600; }
.kontakt-adresse{ margin:0; font-size:1.02rem; font-weight:650; }
.kontakt-anbieter,.kontakt-hinweis{ margin:0; color:var(--tinte-weich); font-size:.95rem; }
.kontakt-links{
  list-style:none; margin:26px 0 0; padding:20px 0 0;
  border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; gap:8px 18px;
}
.kontakt-links a{ font-size:.92rem; color:var(--tinte-weich); text-decoration:none; font-weight:550; }
.kontakt-links a:hover{ color:var(--sabi-700); text-decoration:underline; }

.kontakt-main + .site-footer{ border-top:1px solid var(--linie); }

@media (min-width:900px){
  .kontakt-main{ padding:64px 0 96px; }
  .kontakt-kopf{ margin-bottom:44px; }
  .kontakt-inner{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:30px; }
  .kontakt-formularkarte{ padding:38px 34px; }
  .kontakt-seitenkarte{ padding:30px 26px; position:sticky; top:calc(var(--header-h) + 20px); }
}

/* Feinschliff nach der ersten Durchsicht am 08.09.2026:
   Das Portraet stand zu klein neben dem Text, und der Abschnitt
   "Was SABI kann" blieb die letzte grosse weisse Flaeche. */
@media (min-width:960px){
  .help-inner{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .help-portrait{ max-width:390px; }
}
.section-soft{
  position:relative;
  background:
    radial-gradient(700px 400px at 96% 4%, var(--lavendel) 0%, rgba(237,231,255,0) 58%),
    radial-gradient(560px 340px at 2% 96%, var(--pastell-rose) 0%, rgba(253,238,246,0) 56%),
    var(--flaeche-1);
}

/* Auf dem Handy war die Gespraechskarte fast so hoch wie SABI selbst und
   hat sie damit verdeckt. Unter 640 Pixeln stehen beide deshalb
   untereinander: SABI rechts und vollstaendig sichtbar, die Karte
   darunter, mit einer knappen Ueberlappung als Verbindung. */
@media (max-width:639px){
  .hero-stage{ max-width:440px; }
  .sabi-figure{ width:66%; max-width:none; margin:0 0 0 auto; }
  .hero-stage .chat-card{
    position:relative;
    left:auto; bottom:auto;
    width:94%; max-width:none;
    margin:-58px auto 0;
  }
  .orb-a{ top:-18px; right:-4%; }
  .orb-b{ bottom:12%; left:-6%; }
}
@media (max-width:400px){
  .hero-stage .chat-card{ width:100%; margin-top:-46px; }
  .sabi-figure{ width:70%; }
}