:root {
  /* Tailwind-like design tokens */
  --background: hsl(210, 40%, 98%);
  --foreground: hsl(222.2, 84%, 4.9%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222.2, 84%, 4.9%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(222.2, 84%, 4.9%);
  --primary: hsl(172, 76%, 64%);
  --primary-foreground: hsl(210, 40%, 98%);
  --secondary: hsl(210, 40%, 96%);
  --secondary-foreground: hsl(222.2, 84%, 4.9%);
  --muted: hsl(210, 40%, 96%);
  --muted-foreground: hsl(215.4, 16.3%, 46.9%);
  --accent: hsl(339, 90%, 51%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(214.3, 31.8%, 91.4%);
  --input: hsl(214.3, 31.8%, 91.4%);
  --ring: hsl(172, 76%, 64%);
  --radius: 12px;
  --chart-1: hsl(172, 76%, 64%);
  --chart-2: hsl(159.78, 100%, 36.08%);
  --chart-3: hsl(42.03, 92.83%, 56.27%);
  --chart-4: hsl(147.14, 78.50%, 41.96%);
  --chart-5: hsl(341.49, 75.20%, 50.98%);
  --sidebar: hsl(0, 0%, 100%);
  --sidebar-foreground: hsl(222.2, 84%, 4.9%);
  --sidebar-primary: hsl(172, 76%, 64%);
  --sidebar-primary-foreground: hsl(210, 40%, 98%);
  --sidebar-accent: hsl(210, 40%, 96%);
  --sidebar-accent-foreground: hsl(172, 76%, 64%);
  --sidebar-border: hsl(214.3, 31.8%, 91.4%);
  --sidebar-ring: hsl(172, 76%, 64%);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-heading: "Poppins", system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;

  /* Local aliases (back-compat with existing styles) */
  --midnight:#1A2238;
  --midnight-2:#0f2b3a;
  --pink: var(--accent);
  --mint: var(--primary);
  --mint-strong: hsl(172, 76%, 50%);
  --mint-glow: rgba(109,211,206,.35);
  --pink-glow: rgba(255,46,99,.28);
  --bg: var(--background);
  --text: var(--foreground);
  --text-weak: var(--muted-foreground);
  --shadow:0 14px 34px rgba(26,34,56,.12);
  --radius-lg:24px;

  /* Background layer tints */
  --bg-mint: rgba(70,140,240,.42);
  --bg-pink: rgba(255,60,120,.34);
  --bg-ink: rgba(16,34,64,.24);
  --bg-light: rgba(255,255,255,.92);
}
/* Dark mode removed for a consistent branded look */

/* Optional dark token override */
.dark{
  --background: hsl(222.2, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --card: hsl(222.2, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --popover: hsl(222.2, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --primary: hsl(172, 76%, 64%);
  --primary-foreground: hsl(222.2, 84%, 4.9%);
  --secondary: hsl(217.2, 32.6%, 17.5%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --muted: hsl(217.2, 32.6%, 17.5%);
  --muted-foreground: hsl(215, 20.2%, 65.1%);
  --accent: hsl(339, 90%, 51%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(217.2, 32.6%, 17.5%);
  --input: hsl(217.2, 32.6%, 17.5%);
  --ring: hsl(172, 76%, 64%);
  --sidebar: hsl(222.2, 84%, 4.9%);
  --sidebar-foreground: hsl(210, 40%, 98%);
  --sidebar-primary: hsl(172, 76%, 64%);
  --sidebar-primary-foreground: hsl(222.2, 84%, 4.9%);
  --sidebar-accent: hsl(217.2, 32.6%, 17.5%);
  --sidebar-accent-foreground: hsl(172, 76%, 64%);
  --sidebar-border: hsl(217.2, 32.6%, 17.5%);
  --sidebar-ring: hsl(172, 76%, 64%);
}

/* Utility classes mirroring your Tailwind layers */
.glass-card{ background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); border:1px solid rgba(255,255,255,0.2); }
.gradient-primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); }
.chat-gradient{ background: linear-gradient(145deg, var(--primary) 0%, hsl(184,81%,56%) 100%); }
.border-border{ border-color: var(--border) !important; }
.bg-card{ background: var(--card); }
.text-foreground{ color: var(--foreground); }
.text-muted-foreground{ color: var(--muted-foreground); }
.bg-muted{ background: var(--muted); }
.bg-primary{ background: var(--primary); }
.text-primary{ color: var(--primary); }
.text-primary-foreground{ color: var(--primary-foreground); }
.bg-accent{ background: var(--accent); }
.text-accent{ color: var(--accent); }
.bg-secondary{ background: var(--secondary); }
.sidebar-scroll::-webkit-scrollbar{ width:4px; }
.sidebar-scroll::-webkit-scrollbar-thumb{ background: var(--border); border-radius:20px; }
.chat-scroll::-webkit-scrollbar{ width:6px; }
.chat-scroll::-webkit-scrollbar-track{ background: var(--muted); }
.chat-scroll::-webkit-scrollbar-thumb{ background: var(--primary); border-radius:20px; }
.animate-pulse-slow{ animation: pulse 3s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-bounce-gentle{ animation: bounce-gentle 2s infinite; }
@keyframes bounce-gentle{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; height:100%; }
body{ margin:0; font-family:'Inter','Poppins',sans-serif; background:var(--bg); color:var(--text); min-height:100%; display:flex; flex-direction:column; }
:focus-visible{ outline:3px solid var(--mint-strong); outline-offset:2px; border-radius:10px; }
@media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Feste Hintergrund-Layer direkt unter <body> */
.app-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.03'/></svg>") repeat,
    radial-gradient(1300px 640px at -10% -10%, var(--bg-mint), transparent 62%),
    radial-gradient(1100px 560px  at 110% 6%, var(--bg-pink), transparent 64%),
    radial-gradient(1400px 640px at 50% 120%, var(--bg-ink), transparent 62%),
    linear-gradient(180deg, var(--bg-light), transparent 40%),
    linear-gradient(180deg, var(--bg), var(--bg));
  filter: saturate(1.05);
}
.app-bg::before,
.app-bg::after{
  content:""; position:absolute; inset:auto; pointer-events:none; mix-blend-mode:screen; opacity:.65;
  width:140vmax; height:140vmax; border-radius:50%; filter:blur(60px);
}
.app-bg::before{
  left:-40vmax; top:-30vmax;
  background: radial-gradient(45% 45% at 50% 50%, rgba(70,140,240,.55), transparent 64%),
              radial-gradient(40% 40% at 65% 30%, rgba(255,60,120,.42), transparent 64%);
  animation:bgFloat1 26s ease-in-out infinite alternate;
}
.app-bg::after{
  right:-32vmax; bottom:-28vmax;
  background: radial-gradient(46% 46% at 50% 50%, rgba(70,140,240,.48), transparent 66%),
              radial-gradient(38% 38% at 30% 70%, rgba(18,36,72,.32), transparent 62%);
  animation:bgFloat2 32s ease-in-out infinite alternate;
}
@keyframes bgFloat1{ from{ transform:translate3d(0,0,0) rotate(0.2deg);} to{ transform:translate3d(4vmax,2vmax,0) rotate(-0.8deg);} }
@keyframes bgFloat2{ from{ transform:translate3d(0,0,0) rotate(-0.3deg);} to{ transform:translate3d(-3vmax,-2vmax,0) rotate(0.6deg);} }

/* Wenn Identity-Modal sichtbar: Scrollschutz */
body[data-modal="visible"]{ overflow:hidden; }

/* ================= NAVIGATION ================= */
.navbar{
  backdrop-filter: none;
  background: var(--card);
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 6vw; box-shadow:0 8px 22px rgba(0,0,0,.10);
  position:sticky; top:0; z-index:120; border-bottom:3px solid var(--mint-strong);
  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}
.logo{font-weight:800;font-size:2rem;color:var(--pink);letter-spacing:2px;text-decoration:none}
.logo-img{ height:72px; width:auto; display:block; }
.logo-img{ height:72px; width:auto; display:block; }
.nav-links{display:flex;gap:36px;margin-left:32px;flex:1;justify-content:center}
.nav-link{color:var(--midnight);font-size:1.05rem;font-weight:600;text-decoration:none;padding:6px 10px;border-radius:10px;transition:.2s}
.nav-link:hover{color:var(--midnight-2);background:rgba(109,211,206,.25)}
.nav-link.active{color:var(--midnight-2);background:rgba(109,211,206,.28);box-shadow:0 2px 8px rgba(26,34,56,.08)}

/* Desktop Menü */
.nav-cta{display:flex;gap:12px;align-items:center}
.menu{ position:relative; }
.menu-button{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:var(--card); color:var(--text); border:2px solid rgba(109,211,206,.45); cursor:pointer;
  transition: background .18s, box-shadow .18s, transform .12s, border-color .18s;
}
.menu-button:hover,
.menu-button:focus-visible{ background:rgba(109,211,206,.10); box-shadow:0 4px 14px rgba(26,34,56,.10); border-color:rgba(109,211,206,.60); }
.menu-avatar{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:linear-gradient(135deg,#f2fbfa,#fff); border:2px solid rgba(109,211,206,.45); font-weight:800;
}
.menu-caret{ opacity:.8; }
.menu-list{
  position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:var(--card);
  border:2px solid var(--border); border-radius:14px; box-shadow:0 14px 34px rgba(26,34,56,.18);
  padding:8px; display:none; z-index:150; color:var(--text);
}
.menu-list.show{ display:block; }
.menu-item{ width:100%; text-align:left; padding:10px 12px; border:none; background:transparent; border-radius:10px; cursor:pointer; font-weight:700; color:var(--text); }
.menu-item:hover{ background:rgba(109,211,206,.12); }
.menu-item.danger{ color:#ff7386; }
.menu-sep{ border:none; border-top:1px solid rgba(0,0,0,.08); margin:6px 0; }

/* Dark mode removed */

/* ================= MOBILE NAV / DRAWER ================= */
.hamburger{ display:none; border:none; background:transparent; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; }
.hamburger span{ display:block; width:22px; height:2.8px; background:var(--midnight); margin:3.5px 0; border-radius:3px; transition:.2s }
/* Dark mode removed */

.drawer{ position:fixed; top:0; right:-100%; width:min(86vw, 380px); height:100vh; background:var(--card);
  box-shadow:-24px 0 60px rgba(0,0,0,.18); z-index:200; transition:right .24s ease; display:flex; flex-direction:column; }
.drawer.show{ right:0; }
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:180; }
.drawer-backdrop.show{ opacity:1; pointer-events:auto; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.06); }
.drawer-logo{ font-weight:800; color:var(--pink); font-size:1.2rem; }
.drawer-close{ border:none; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--text); }
.drawer-user{ display:flex; gap:10px; padding:12px 16px; align-items:center; border-bottom:1px solid rgba(0,0,0,.06); }
.drawer-avatar{ width:44px; height:44px; border-radius:50%; border:2px solid rgba(109,211,206,.45); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.drawer-avatar img{ width:100%; height:100%; object-fit:cover; display:none; }
.drawer-avatar span{ font-weight:800; }
.drawer-name{ font-weight:800; }
.drawer-email{ font-size:.9rem; color:var(--text-weak); }
.drawer-links{ display:flex; flex-direction:column; padding:10px 12px; gap:4px; }
.drawer-link{ padding:10px 8px; border-radius:10px; color:var(--text); text-decoration:none; font-weight:600; }
.drawer-link:hover{ background:rgba(109,211,206,.12); }
.drawer-actions{ margin-top:auto; padding:12px; display:grid; grid-template-columns:1fr; gap:8px; }
.drawer-btn{ padding:12px 12px; border-radius:12px; border:none; background:var(--pink); color:#fff; font-weight:800; cursor:pointer; }
.drawer-btn.outline{ background:transparent; color:var(--midnight-2); border:2px solid var(--mint-strong); }
.drawer-btn.ghost{ background:transparent; color:var(--text); border:2px dashed rgba(109,211,206,.45); }
.drawer-btn.danger{ background:#f14560; }

/* ================= HERO (Startbereich) ================= */
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 1fr; gap:36px;
  max-width:1200px; margin:24px auto 64px; padding:40px 40px;
  background:
    radial-gradient(520px 240px at 88% 0%, rgba(255,60,120,.20), transparent 70%),
    radial-gradient(520px 240px at 12% 0%, rgba(70,140,240,.28), transparent 70%),
    linear-gradient(180deg, #0f2745, #163a66 70%);
  border-radius:24px; border:1.5px solid rgba(255,255,255,.06); box-shadow:0 24px 60px rgba(11,22,34,.35);
  min-height: clamp(520px, 78vh, 880px); align-items:center; color:#f8fbff;
}
.hero-left{ min-width:0; display:flex; flex-direction:column; }
.hero-title{
  margin:0 0 6px; font-weight:800; font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  background:linear-gradient(90deg, var(--mint) 0%, #a8ece7 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-logo{ height:44px; width:auto; display:block; margin-bottom:6px; }
.hero-logo{ height:44px; width:auto; display:block; margin-bottom:6px; }
.hero-sub{ margin:0 0 14px; color:#eef5ff; font-weight:700; font-size:1.1rem; font-style:italic; }
.hero-copy p{ margin:0 0 10px; color:#e2eeff; line-height:1.6; }
.hero-copy p b{ color:#ffffff; }

/* Hero USP grid (3 compact cards) */
.hero-usps{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin: 8px 0 12px; }
@media(max-width:860px){ .hero-usps{ grid-template-columns:1fr; } }

.hero-right{ display:flex; align-items:flex-end; justify-content:center; transform: translateY(var(--parallax-y, 0px)); will-change: transform; }
.mock-phone{
  --ph-w: 360px; --ph-h: 640px;
  width:var(--ph-w); height:var(--ph-h); margin:0;
  background:linear-gradient(180deg,#0d1b2a,#0d1b2a 8%, #0b1622 50%, #0d1b2a 100%);
  border-radius:34px; padding:16px; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.25);
  border:8px solid #0b1622; animation:float 6s ease-in-out infinite alternate;
}
@keyframes float{ from{ transform:translateY(0) rotate(-.2deg);} to{ transform:translateY(-8px) rotate(.2deg);} }
.phone-notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:120px; height:18px; background:#0b1622; border-radius:0 0 12px 12px; }
.phone-screen{
  background:#f7fbfd; border:2px solid rgba(109,211,206,.4); border-radius:24px; width:100%; height:100%; padding:18px; overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
}
.chat-bubble{ max-width:92%; padding:10px 12px; border-radius:14px; line-height:1.5; font-size:.98rem; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.chat-bubble.user{ margin-left:auto; background:#eef6ff; border:1.5px solid rgba(30,96,255,.25); color:#0f2b3a; }
.chat-bubble.bot{ margin-right:auto; background:#ffffff; border:1.5px solid rgba(255,46,99,.35); color:var(--text); }
.chip-selve{ display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; color:#fff; background:#ff7f96; border-radius:999px; padding:2px 8px; margin-right:6px; }
.chat-cta{ margin-top:auto; display:flex; }
.hero-left .chat-cta{ margin-top:auto; margin-bottom:18px; }
.chat-cta .primary{
  width:100%; padding:12px 16px; border:none; border-radius:12px; cursor:pointer; font-weight:900;
  background:linear-gradient(135deg,var(--pink),#ff4e86); color:#fff; box-shadow:0 10px 24px rgba(255,46,99,.22);
}
.chat-cta .primary:hover{ background:var(--midnight); color:var(--mint); }

/* Trust bar */
.trustbar{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; color:#eaf3ff; font-weight:800; }
.trustbar .trust-item{
  color:#ffffff;
  background: linear-gradient(180deg, rgba(70,140,240,.22), rgba(255,60,120,.12));
  border:2px solid rgba(255,255,255,.28);
  padding:8px 12px; border-radius:999px;
  box-shadow: 0 8px 22px rgba(16,34,64,.28), inset 0 2px 8px rgba(255,255,255,.06);
}
.demo-note{ margin-top:8px; color: #ffffff; font-weight:800; }

/* ================= SECTIONS (Journey/Keep/FAQ) ================= */
.section-grid{
  display:flex; align-items:center; justify-content:center; gap:48px; max-width:1200px; margin:0 auto 64px;
  background:
    radial-gradient(560px 260px at 14% 0%, rgba(109,211,206,.28), transparent 72%),
    radial-gradient(560px 260px at 86% 0%, rgba(255,60,120,.16), transparent 74%),
    linear-gradient(180deg, rgba(16,66,78,.92) 0%, rgba(22,92,106,.92) 100%);
  border-radius:var(--radius-lg); box-shadow:0 34px 96px rgba(11,22,34,.52); padding:60px 40px;
  border:2px solid rgba(255,255,255,.10); opacity:0; transform:translateY(40px); transition:opacity .6s, transform .6s; color:#f1f7ff;
}
.faq-compact{ max-width: 1100px; padding: 30px 26px; gap: 56px; }
@media (max-width: 1024px){ .faq-compact{ max-width: 96vw; gap: 34px; } }
@media (max-width: 768px){ .faq-compact{ padding: 18px 12px; gap: 16px; } }
/* Extra Abstand zwischen Fragen und Bild */
.faq-compact .faq-accordion{ margin-top: 10px; }
.section-grid.show{ opacity:1; transform:none; }
.section-grid.reverse{ flex-direction:row-reverse; }
.section-text{ flex:1.2; min-width:270px; }
.section-text h2{
  margin:0 0 8px; font-weight:900;
  background:linear-gradient(90deg, var(--mint) 0%, #a8ece7 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-highlight{
  background:linear-gradient(90deg, var(--mint) 0%, #a8ece7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-size:2.4rem;font-weight:800;margin-bottom:18px;display:block;
}
.section-image{ flex:1; min-width:250px; display:flex; align-items:center; justify-content:center; }
.section-img{ width:100%; height:auto; border-radius:18px; border:2px solid rgba(255,255,255,.18); box-shadow:0 20px 44px rgba(0,0,0,.28); object-fit:cover; }

/* iPhone-like framed shot (FAQ left) */
:root{ --iphone-bezel: clamp(10px, 1.8vw, 16px); }
.section-image.iphone{ max-width:520px; }
.section-image.iphone .iphone-wrap{
  background:#fff; /* weißer Rand wie iPhone-Rahmen */
  padding: var(--iphone-bezel);
  border-radius: 34px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  overflow: hidden;
}
.section-image.iphone .iphone-shot{
  display:block;
  width:100%; height:auto; object-fit:cover;
  border-radius: 24px;
}

@media (max-width: 768px){
  .section-image.iphone{ max-width: 92vw; }
}
.section-btn{ background:linear-gradient(135deg,var(--pink), #ff4e86); color:#fff; border:none; border-radius:999px; padding:12px 26px; font-weight:800; box-shadow:0 12px 24px rgba(255,46,99,.25); cursor:pointer; }
.section-btn{ transition: background .18s, box-shadow .18s, transform .12s, color .18s; }
.section-btn:hover, .section-btn:focus-visible{ background:var(--midnight); color:var(--mint); transform: translateY(-1px); box-shadow:0 16px 28px rgba(26,34,56,.18); }
.cta-secondary-alt{ background:var(--card); color:var(--midnight); border:2px solid rgba(109,211,206,.4); }

/* FAQ Accordion */
.faq-accordion{ width:100%; }
.faq-accordion details{
  background: linear-gradient(180deg, #0f2745 0%, #163a66 88%);
  border:1.5px solid rgba(255,255,255,.14);
  border-radius:14px; padding:10px 12px;
  box-shadow: 0 16px 42px rgba(11,22,34,.35);
  color:#f1f7ff;
}
.faq-accordion details + details{ margin-top:12px; }
.faq-accordion summary{ list-style:none; cursor:pointer; font-weight:900; color:#ffffff; display:flex; align-items:center; justify-content:space-between; }
.faq-accordion summary::-webkit-details-marker{ display:none; }
.faq-accordion .faq-content{ color:#e2eeff; margin-top:8px; line-height:1.6; }

/* Steps */
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.step-card{
  background: linear-gradient(180deg, #0f2745, #163a66);
  border:1.5px solid rgba(109,211,206,.40);
  border-radius:16px;
  box-shadow: 0 16px 36px rgba(0,0,0,.30), 0 0 0 1px rgba(109,211,206,.18) inset;
  padding:16px; color:#f7fbff;
}
.step-num{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--pink),#ff6c9c); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:8px; box-shadow: 0 6px 16px rgba(255,46,99,.25); }
.step-title{ font-weight:900; margin-bottom:6px; color:#ffffff; }
.step-text{ color:#e9f3ff; opacity:1; }
@media(max-width:860px){ .steps-grid{ grid-template-columns:1fr; } }

/* ===== Customer Feedback Marquee ===== */
.feedback-section{ max-width:1200px; margin:0 auto 64px;
  background:
    radial-gradient(520px 240px at 12% 0%, rgba(109,211,206,.26), transparent 72%),
    radial-gradient(520px 240px at 88% 0%, rgba(255,60,120,.16), transparent 74%),
    linear-gradient(180deg, rgba(16,66,78,.92) 0%, rgba(22,92,106,.92) 100%);
  border:1.5px solid rgba(255,255,255,.10); border-radius:24px;
  box-shadow:0 28px 70px rgba(11,22,34,.45); padding:18px; overflow:hidden;
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.feedback-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px 14px; color:#eaf2fb; }
.feedback-header .section-title{ font-weight:800; margin:0; background:linear-gradient(90deg, var(--mint) 0%, #a8ece7 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.feedback-marquee{ overflow:hidden; width:100%; mask-image: linear-gradient( to right, transparent 0, black 5%, black 95%, transparent 100% ); }
.feedback-track{ display:flex; gap:18px; padding-bottom:10px; will-change: transform; animation: fbScroll 12s linear infinite; animation-play-state: running; }
.feedback-card{ flex:0 0 auto; min-width:320px; max-width:380px; position:relative;
  background: linear-gradient(180deg, rgba(85,199,193,.22), rgba(36,121,165,.26));
  border:1.5px solid rgba(255,255,255,.08);
  border-radius:22px; box-shadow: 0 16px 42px rgba(0,0,0,.28);
  padding:18px 18px 16px; color:#f1f7ff;
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s; }
.feedback-card:hover{ transform: translateY(-2px); box-shadow:0 22px 56px rgba(0,0,0,.35); border-color: rgba(255,255,255,.16); }
.feedback-card::before{
  content:'\201C'; position:absolute; left:14px; top:8px; font-size:54px; line-height:1; color: rgba(255,46,99,.65); font-weight:800; font-family: Georgia, 'Times New Roman', serif;
}
.feedback-text{ margin:18px 0 10px; color:#f3f8ff; line-height:1.6; font-weight:600; font-size:1.02rem; }
.feedback-author{ font-weight:700; color:#d3e5ff; }
.feedback-stars{ margin-top:8px; color:#FFD766; letter-spacing:2px; text-shadow: 0 2px 6px rgba(0,0,0,.25); font-size:1rem; }
@keyframes fbScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.feedback-marquee:hover .feedback-track{ animation-play-state: running; }
@media(prefers-reduced-motion:reduce){ .feedback-track{ animation:none; } }

/* ================= SNACKBAR ================= */
.snackbar{
  position: fixed; right:16px; bottom:16px; min-width:220px; max-width:380px; padding:12px 14px;
  background:#192437; color:#fff; border-radius:12px; box-shadow:0 12px 30px rgba(26,34,56,.28); z-index:200;
  opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .25s, transform .25s;
}
/* Dark mode removed */
.snackbar.show{ opacity:1; transform:none; }

/* ================= COACH WRAPPER + CHAT ================= */

/* Journey color themes (coach page) */
body[data-journey='turquoise'] .coach-card,
body[data-journey='turquoise'] .coach-info{
  background:
    radial-gradient(520px 240px at 14% 0%, rgba(70,180,255,.32), transparent 72%),
    radial-gradient(520px 240px at 86% 0%, rgba(40,120,220,.22), transparent 74%),
    linear-gradient(180deg, #0c2f57 0%, #154a7a 88%);
}
/* Global background tint overrides per journey */
body[data-journey='turquoise']{
  --bg-mint: rgba(70,180,255,.42);
  --bg-pink: rgba(40,120,220,.28);
  --bg-ink:  rgba(12,47,87,.28);
}
body[data-journey='pink'] .coach-card,
body[data-journey='pink'] .coach-info{
  background:
    radial-gradient(520px 240px at 14% 0%, rgba(255,80,150,.32), transparent 72%),
    radial-gradient(520px 240px at 86% 0%, rgba(255,120,170,.20), transparent 74%),
    linear-gradient(180deg, #38142a 0%, #5a2142 88%);
}
body[data-journey='pink']{
  --bg-mint: rgba(255,100,160,.36);
  --bg-pink: rgba(255,60,120,.38);
  --bg-ink:  rgba(90,33,66,.26);
}
body[data-journey='blue'] .coach-card,
body[data-journey='blue'] .coach-info{
  background:
    radial-gradient(520px 240px at 14% 0%, rgba(80,140,255,.30), transparent 72%),
    radial-gradient(520px 240px at 86% 0%, rgba(120,170,255,.18), transparent 74%),
    linear-gradient(180deg, #0b2240 0%, #123a6a 88%);
}
body[data-journey='blue']{
  --bg-mint: rgba(80,140,255,.34);
  --bg-pink: rgba(40,90,200,.26);
  --bg-ink:  rgba(11,34,64,.30);
}
body[data-journey='green'] .coach-card,
body[data-journey='green'] .coach-info{
  background:
    radial-gradient(520px 240px at 14% 0%, rgba(60,190,150,.30), transparent 72%),
    radial-gradient(520px 240px at 86% 0%, rgba(30,160,120,.22), transparent 74%),
    linear-gradient(180deg, #0b2e28 0%, #11483f 88%);
}
body[data-journey='green']{
  --bg-mint: rgba(80,210,170,.34);
  --bg-pink: rgba(40,160,120,.24);
  --bg-ink:  rgba(17,72,63,.26);
}
body[data-journey='mint'] .coach-card,
body[data-journey='mint'] .coach-info{
  background:
    radial-gradient(520px 240px at 14% 0%, rgba(90,220,210,.30), transparent 72%),
    radial-gradient(520px 240px at 86% 0%, rgba(70,180,170,.22), transparent 74%),
    linear-gradient(180deg, #0a2e33 0%, #124952 88%);
}
body[data-journey='mint']{
  --bg-mint: rgba(90,220,210,.36);
  --bg-pink: rgba(70,180,170,.26);
  --bg-ink:  rgba(18,73,82,.26);
}
#coach.section-grid{
  background:transparent; box-shadow:none; border:none; padding:0 24px 8px; margin:24px auto 64px; flex-direction:column; gap:16px;
}
.coach-head { width:100%; }
.coach-head h2 { margin: 0 0 8px; color:#ffffff; font-weight:900; text-shadow:0 2px 6px rgba(0,0,0,.45); font-size:clamp(1.4rem,3.2vw,2rem); }
.coach-head p  { margin: 0; color:#ffffff; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.40); }

.coach-layout{
  display:grid;
  grid-template-columns: minmax(560px, 3fr) 1fr; /* Chat breiter, Info dünner */
  gap:24px;
  width:100%;
  align-items:start;
}


@media(max-width:1000px){
  .coach-layout{ grid-template-columns: 1fr; }
}
.coach-column{ display:flex; flex-direction:column; gap:12px; min-width:0; }

.session-bar.inside{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px; margin:10px 10px 0; border-radius:14px;
  background:linear-gradient(180deg, rgba(109,211,206,.10), rgba(255,46,99,.05));
  border:2px solid rgba(109,211,206,.35);
  box-shadow:0 6px 18px rgba(26,34,56,.10) inset, 0 6px 16px rgba(26,34,56,.06);
}
.session-bar.inside select{
  border:2px solid rgba(230,230,230,.7); background:var(--card); color:var(--text);
  border-radius:999px; padding:10px 12px; min-width:180px;
  box-shadow:0 4px 10px rgba(26,34,56,.06);
}
/* Journey/Agent Auswahl ausblenden */
#agentSelect{ display:none !important; }
.session-bar.inside .chip{
  background:#f2fbfa; border-color:rgba(109,211,206,.55);
  border-radius:999px; box-shadow:0 4px 10px rgba(26,34,56,.06);
}
.session-bar.inside .chip.strong{ font-weight:800; }
:root{ --tile-min-h: clamp(420px, 60vh, 680px); }


.coach-card{
  display:block; width:100%; height: var(--tile-min-h);
  border-radius:22px;
  background:
    radial-gradient(520px 240px at 86% 0%, rgba(255,60,120,.18), transparent 74%),
    radial-gradient(520px 240px at 14% 0%, rgba(70,140,240,.26), transparent 74%),
    linear-gradient(180deg, #0f2745 0%, #163a66 88%);
  border:2px solid rgba(109,211,206,.38); box-shadow:0 28px 72px rgba(11,22,34,.45), 0 0 0 1px rgba(109,211,206,.22) inset; position:relative; overflow:hidden;
  padding: 10px; /* sorgt für Luft zum Rand */
}

.profile-banner{
  display:none; align-items:center; justify-content:space-between; gap:8px;
  margin:8px 10px 0; padding:10px 12px; border-radius:12px;
  background:#fff8f9; border:2px solid rgba(255,46,99,.25);
}
.profile-banner .profile-banner-actions{ display:flex; gap:8px; }

.coach-feed{ height: calc(var(--tile-min-h) - 86px - 54px); padding:12px 16px 8px; overflow-y:auto; scroll-behavior:smooth; margin: 0 4px; }
.msg{ display:flex; align-items:flex-start; gap:8px; margin:10px 0; line-height:1.5; max-width:85%; opacity:0; transform:translateY(6px); animation:msgIn .22s ease forwards; }
@keyframes msgIn{ to{opacity:1; transform:none;} }

.msg .bot-avatar{
  flex:0 0 26px; width:26px; height:26px; border-radius:6px; background:#e8f9f7; border:1.5px solid rgba(109,211,206,.55);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
/* Dark mode removed */

.msg .bubble{ padding:10px 12px; border-radius:14px; border:1.5px solid transparent; }
.msg.User{ margin-left:auto; flex-direction:row-reverse; }
.msg.User .bubble{ color:#f8fbff; background:rgba(109,211,206,.28); border-color:rgba(109,211,206,.55); border-radius:14px 14px 4px 14px; }
.msg.SELVE .bubble{ color:var(--text); background:#fbfdff; border-color:rgba(70,140,240,.22); border-radius:14px 14px 14px 4px; }

.msg .actions{ margin-top:8px; display:flex; gap:8px; }
.msg .link{ border:none; background:none; color:var(--pink); font-weight:700; cursor:pointer; }
.msg .copy-btn{ border:none; background:transparent; color:var(--text-weak); cursor:pointer; font-weight:700; }
.msg .copy-btn:hover{ color:var(--text); }

/* Typing indicator */
.typing { display:inline-flex; gap:4px; align-items:center; }
.typing .dot{ width:6px; height:6px; border-radius:50%; background: var(--text-weak); opacity:.5; animation: typingBlink 1.2s infinite; }
.typing .dot:nth-child(2){ animation-delay: .2s; }
.typing .dot:nth-child(3){ animation-delay: .4s; }
@keyframes typingBlink { 0%,80%,100%{ opacity:.3 } 40%{ opacity:1 } }

/* Screen-reader only */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1,1); white-space:nowrap; border:0; }

.inline-profile{ margin:8px 16px 0; padding:12px; background:var(--card); border:2px solid rgba(255,46,99,.25); border-radius:14px; box-shadow:0 8px 18px rgba(26,34,56,.10); }
.inline-profile-title{ font-weight:800; margin-bottom:8px; }
.inline-profile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.inline-profile-grid input{ border:2px solid rgba(230,230,230,.6); border-radius:12px; padding:10px 12px; background:var(--card); color:var(--text); }
.inline-profile-actions{ display:flex; gap:8px; margin-top:8px; }

/* Prompt suggestions */
.prompt-suggestions{
  display:flex; flex-wrap:wrap; gap:8px; padding:6px 12px; margin:0 10px 4px; align-items:center;
}
.prompt-chip{
  border:2px solid rgba(109,211,206,.45); color:var(--text); background:var(--card); border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:700; font-size:.92rem;
}
.prompt-chip:hover{ background:rgba(109,211,206,.10); }

/* Locked state card (logged out) */
#coach-locked{
  display:block; margin:8px 10px 0; padding:14px 16px; border-radius:14px;
  background: var(--card); border:2px solid var(--border); box-shadow: var(--shadow);
}
#coach-locked h3{ margin:0 0 6px; color: var(--text); font-weight:900; letter-spacing:.2px; }
#coach-locked p{ margin:0; color: var(--text); font-weight:700; }
#coach-locked .locked-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }

/* Auth modal messages */
.auth-form #auth-msg{ margin-top:6px; font-weight:700; }
.auth-form #auth-msg.ok{ color:#1b4735; background:#f1fff8; border:2px solid #c7f3df; padding:8px 10px; border-radius:10px; }
.auth-form #auth-msg.error{ color:#7a1f3f; background:#fff5f7; border:2px solid #ffd0e0; padding:8px 10px; border-radius:10px; }

.coach-inputbar{
  position:sticky; bottom:0; z-index:2; display:grid; grid-template-columns:1fr 88px; gap:8px;
  padding:10px; border-top:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(22,58,102,.42), rgba(16,42,74,.68));
  margin: 0 6px 6px; border-radius:14px; border:1.5px solid rgba(109,211,206,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.coach-inputbar textarea{
  border:2px solid rgba(230,230,230,.6); border-radius:12px; padding:12px; resize:none; max-height:160px; min-height:44px; line-height:1.5;
  background:var(--card); color:var(--text);
}
.send-stack{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mic-btn{
  border:2px solid rgba(230,230,230,.6); border-radius:12px; background:var(--card); color:var(--text);
  font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.mic-btn.listening{ border-color: var(--mint-strong); box-shadow:0 0 0 3px rgba(109,211,206,.25) inset; }

.coach-inputbar button{
  border:none; border-radius:12px; background:linear-gradient(135deg,var(--pink),#ff4e86); color:#fff; font-weight:900; font-size:1.15rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; transition: filter .18s, transform .12s, box-shadow .18s;
}
.coach-inputbar button:hover, .coach-inputbar button:focus-visible{ filter: brightness(1.03); transform: translateY(-1px); box-shadow:0 10px 20px rgba(255,46,99,.20); }
.send-spinner{ width:18px; height:18px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
button.loading .send-label{ opacity:0; }
button.loading .send-spinner{ display:inline-block; }

.coach-info{
  background:
    radial-gradient(520px 240px at 86% 0%, rgba(255,60,120,.18), transparent 74%),
    radial-gradient(520px 240px at 14% 0%, rgba(70,140,240,.26), transparent 74%),
    linear-gradient(180deg, #0f2745 0%, #163a66 88%);
  border:1.5px solid rgba(255,255,255,.10); border-radius:16px; padding:16px; box-shadow:0 22px 56px rgba(11,22,34,.35); height: var(--tile-min-h); overflow:auto; color:#ffffff;
}
.coach-info h3{ color:#ffffff; }
.coach-info p, .coach-info li { color:#ffffff; }
.coach-info h3{ margin:4px 0 8px; }
.coach-info p{ margin:0 0 8px; }
.coach-info ul{ margin:8px 0 0 18px; }

footer{ text-align:center; padding:24px 10px 16px; font-size:.95rem; margin-top:32px; background:transparent; color:var(--text-weak); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns:1fr; padding:28px 20px; gap:22px; }
  .mock-phone{ --ph-w: 320px; --ph-h: 580px; }
  .hero-right{ transform:none; }
  .logo-img{ height:48px; }
}
@media (max-width: 480px){
  .hero-grid{ padding:22px 14px; border-radius:18px; }
  .mock-phone{ --ph-w: 300px; --ph-h: 540px; border-width:6px; }
  .logo-img{ height:40px; }
}

@media (max-width: 768px) {
  .hamburger{ display:flex; }
  .nav-links, .nav-cta-desktop{ display:none; }
  .navbar { padding: 12px 14px; border-bottom-width: 2px; }
  .logo { font-size:1.7rem; }

  .section-grid {
    padding: 20px 14px;
    margin: 0 auto 20px;
    border-radius: 14px;
    border-width: 1.5px;
    box-shadow: 0 8px 18px rgba(26,34,56,.08);
    gap: 16px;
    flex-direction: column;
  }
  .section-text { min-width: 0; }
  .section-text h2 { margin-bottom: 6px; }
  .section-image { min-width: 0; }
  .section-img { border-radius: 12px; border-width: 1.5px; box-shadow: 0 6px 14px rgba(26,34,56,.08); }

  #journey.section-grid, #keep.section-grid, #faq.section-grid { padding: 18px 14px; margin-bottom: 18px; }

  #coach.section-grid { padding: 0; margin-bottom: 24px; gap: 12px; }
  .coach-layout { grid-template-columns: 1fr; gap: 12px; }

  :root { --tile-min-h: clamp(280px, 52vh, 400px); }

  .coach-card, .coach-info { border-radius: 14px; border-width: 1.5px; box-shadow: 0 10px 26px rgba(26,34,56,.12); }
  .coach-info { padding: 12px; }

  .session-bar.inside {
    margin: 8px 8px 0; padding: 8px; border-radius: 12px; border-width: 1.5px;
    box-shadow: 0 4px 10px rgba(26,34,56,.06) inset, 0 4px 10px rgba(26,34,56,.06);
    position: sticky; top: 0; z-index: 3;
  }
  .session-bar.inside select { min-width: 150px; padding: 8px 10px; font-size: .98rem; box-shadow: 0 3px 8px rgba(26,34,56,.06); }

  .inline-profile{ display:none !important; }
  .profile-banner { display:flex; margin: 6px 8px 0; padding: 8px 10px; border-radius: 10px; border-width: 1.5px; }

  .coach-feed { height: calc(var(--tile-min-h) - 92px - 48px); padding: 6px 10px 6px; }

  .coach-inputbar { grid-template-columns: 1fr 92px; padding: 8px; }
  .coach-inputbar textarea { min-height: 40px; padding: 9px 10px; font-size: 1rem; }
  .coach-inputbar button { font-size: 1rem; border-radius: 12px; }

  .msg { max-width: 92%; margin: 8px 0; }
  .msg.User .bubble, .msg.SELVE .bubble { padding: 8px 10px; border-radius: 12px; }

  .drawer { width: min(88vw, 360px); }
}

@media (max-width: 375px) {
  :root { --tile-min-h: clamp(260px, 54vh, 360px); }
  .coach-feed { height: calc(var(--tile-min-h) - 96px - 46px); }
  .session-bar.inside select { min-width: 140px; font-size: .95rem; }
  .section-grid { padding: 18px 12px; border-radius: 12px; }
}
.selve-btn {
  background: linear-gradient(90deg, var(--mint-strong), var(--mint));
  color: var(--midnight);
  border: none;
  border-radius: 999px;
  padding: 0.7em 2.2em;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 16px rgba(109,211,206,0.13);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
  margin: 0.3em 0;
}

.selve-btn:hover,
.selve-btn:focus-visible {
  background: linear-gradient(90deg, var(--pink), #ff6c9c 85%);
  color: #fff;
  box-shadow: 0 6px 24px rgba(255,46,99,0.18);
  transform: translateY(-2px) scale(1.04);
}

.selve-btn--secondary {
  background: var(--card);
  color: var(--midnight);
  border: 2px solid var(--mint-strong);
  box-shadow: none;
}

.selve-btn--secondary:hover,
.selve-btn--secondary:focus-visible {
  background: var(--mint);
  color: var(--midnight);
  border-color: var(--pink);
  box-shadow: 0 4px 16px rgba(109,211,206,0.12);
}

.btn-arrow {
  font-size: 1.1em;
  transition: transform 0.18s;
}

.selve-btn:hover .btn-arrow,
.selve-btn:focus-visible .btn-arrow {
  transform: translateX(4px);
}
.onboarding-modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(26,34,56,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-form {
  background: var(--card, #fff);
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(26,34,56,0.16);
  padding: 34px 30px 26px 30px;
  width: 98%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fadeIn .4s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px);}
  to   { opacity: 1; transform: none;}
}

.onboarding-form h2 {
  margin-top: 0;
  color: var(--mint-strong, #53d6d3);
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
}

.onb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

.onb-full {
  grid-column: 1 / span 2;
}

.onboarding-form label {
  font-weight: 600;
  color: var(--midnight, #1A2238);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.onboarding-form input,
.onboarding-form select {
  border: 2px solid var(--border, #e0e0e0);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 1rem;
  background: var(--bg, #f7f9fb);
  color: var(--text, #1A2238);
  margin-top: 2px;
}

.onboarding-form select[multiple] {
  min-height: 58px;
  resize: vertical;
}

.onb-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.onb-btn-main {
  background: linear-gradient(90deg, var(--mint-strong, #53d6d3), var(--mint, #6DD3CE));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7em 2.1em;
  font-size: 1.08rem;
  font-weight: 800;
  box-shadow: 0 3px 16px rgba(109,211,206,0.13);
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}

.onb-btn-main:hover,
.onb-btn-main:focus-visible {
  background: linear-gradient(90deg, var(--pink, #FF2E63), #ff6c9c 85%);
  color: #fff;
  box-shadow: 0 6px 24px rgba(255,46,99,0.18);
  transform: translateY(-2px) scale(1.04);
}

@media (max-width: 600px) {
  .onboarding-form {
    padding: 18px 6px 16px 6px;
    max-width: 98vw;
    border-radius: 12px;
  }
  .onb-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .onb-full {
    grid-column: 1 / span 1;
  }
}
/* ===== Feature Tile (Journey + Keep) ===== */
.feature-tile {
  display: grid;
  grid-template-columns: 1fr minmax(0,24px) 1fr;
  gap: 0;
  padding: clamp(18px, 3.2vw, 32px);
  border-radius: 24px;
  background:
    radial-gradient(520px 260px at 14% 0%, rgba(109,211,206,.28), transparent 72%),
    radial-gradient(520px 260px at 86% 0%, rgba(255,60,120,.16), transparent 74%),
    linear-gradient(180deg, rgba(16,66,78,.92) 0%, rgba(22,92,106,.92) 100%);
  border: 2px solid rgba(255,255,255,.10);
  box-shadow: 0 36px 100px rgba(11,22,34,.58);
  margin: 0 auto 64px;
  max-width: 1200px; color:#f1f7ff;
}

.feature-col {
  padding: clamp(8px, 1.8vw, 18px);
  display:flex;
  flex-direction:column;
}

.feature-col h2 {
  margin: 6px 0 10px;
  background:linear-gradient(90deg, var(--mint) 0%, #a8ece7 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900;
}

.feature-col p {
  margin: 0 0 10px;
  line-height: 1.6; color:#d1e2ff;
}

.feature-col ul {
  margin: 0 0 14px 1.1rem;
  padding: 0;
  display: grid;
  gap: 6px;
}

.feature-actions { margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
/* USP list: single column stacked */
.usp-list{ display:grid; grid-template-columns:1fr; gap:14px; }

/* Vertikale Trennlinie */
.feature-divider {
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--tile-bd),
    transparent
  );
  align-self: stretch;
  border-radius: 1px;
}

/* leichte Farbnuancen links/rechts (optional, subtil) */
.feature-journey { backdrop-filter: saturate(1.05); }
.feature-keep    { backdrop-filter: saturate(1.05); }

/* Mobile: untereinander + horizontale Trennung */
@media (max-width: 860px) {
  .feature-tile {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: clamp(14px, 4vw, 22px);
  }
  .feature-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, var(--tile-bd), transparent);
  }
}
/* sorgt dafür, dass Anker-Scrolls nicht unter der sticky Navbar landen */
.scroll-target { scroll-margin-top: 90px; }
@media (max-width: 768px){
  .scroll-target { scroll-margin-top: 76px; }
}
/* --- Nav/Dropdown stets über allem halten --- */
.navbar { position: sticky; top: 0; z-index: 2000; overflow: visible; }
.menu { position: relative; z-index: 2100; }
.menu-list { z-index: 2200; } /* Liste über Card/Content legen */

/* ================= NETLIFY IDENTITY POLISH ================= */
/* Overlay look & feel */
.netlify-identity-modal{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 12vh !important;
  background: rgba(26,34,56,.28) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 10000 !important;
}
/* Frame styling */
.netlify-identity-modal iframe,
.netlify-identity-widget iframe{
  width: min(520px, 92vw) !important;
  height: min(640px, 90vh) !important;
  border-radius: 20px !important;
  border: 2px solid var(--border) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.35) !important;
  background: var(--card) !important;
}
/* Dark-mode friendly overlay */
/* Dark mode removed */

/* Custom Auth Modal (reuse onboarding styles) */
.auth-form .link{ border:none; background:none; color:var(--pink); cursor:pointer; font-weight:700; }
.auth-form .link:hover{ text-decoration:underline; }

/* ================= SITE CHAT WIDGET ================= */
.sitechat-fab{
  position: fixed; right: 14px; bottom: 14px; z-index: 4000;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), #ff6c9c); color: #fff;
  display:flex; align-items:center; justify-content:center;
  border: none; box-shadow: 0 10px 26px rgba(255,46,99,.25); cursor:pointer;
}
.sitechat-backdrop{
  position: fixed; inset: 0; z-index: 3950; background: rgba(26,34,56,.22);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.sitechat-backdrop.show{ opacity: 1; pointer-events: auto; }
.sitechat-panel{
  position: fixed; right: 14px; bottom: 78px; z-index: 4000;
  width: min(92vw, 340px); height: 440px; display:none;
  background: var(--card); color: var(--text);
  border: 2px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
  overflow:hidden; flex-direction:column;
}
.sitechat-panel.show{ display:flex; }
.sitechat-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom: 1px solid rgba(0,0,0,.08); font-weight:800; }
.sitechat-title{ display:flex; align-items:center; gap:8px; }
.sitechat-badge{ display:inline-flex; align-items:center; gap:6px; justify-content:center; font-weight:900; letter-spacing:.6px; font-size:.76rem; padding:4px 8px; border-radius:999px; color:#fff; background: linear-gradient(135deg, var(--pink), #ff6c9c); }
.sitechat-badge-img{ width:16px; height:16px; display:inline-block; border-radius:4px; background:#fff1f5; }
.sitechat-close{ border:none; background:transparent; font-size:1.2rem; cursor:pointer; color:var(--text); }
.sitechat-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; border-bottom:1px solid rgba(0,0,0,.06); }
.sitechat-chip{ border:1.5px solid var(--border); border-radius:999px; background:var(--card); color:var(--text); padding:6px 10px; font-weight:700; cursor:pointer; }
.sitechat-demo{ padding:6px 10px; color: var(--text-weak); border-bottom:1px solid rgba(0,0,0,.06); font-size:.92rem; }
.sitechat-footer{ display:flex; justify-content:flex-end; gap:8px; padding:6px 10px; border-top:1px solid rgba(0,0,0,.06); }
.sitechat-footer a{ color: var(--pink); font-weight:800; text-decoration:none; }
.sitechat-footer a:hover{ text-decoration:underline; }
.sitechat-feed{ flex:1; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.sitechat-row{ display:flex; gap:8px; }
.sitechat-row.user{ justify-content:flex-end; }
.sitechat-bubble{ max-width:80%; padding:8px 10px; border-radius:12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.sitechat-row.user .sitechat-bubble{ background: rgba(109,211,206,.18); border:1px solid rgba(109,211,206,.45); color: var(--midnight-2); }
.sitechat-row.bot  .sitechat-bubble{ background: var(--card); border:1px solid rgba(255,46,99,.28); color: var(--text); }
.sitechat-inputbar{ display:grid; grid-template-columns: 1fr 70px; gap:6px; padding:8px; border-top: 1px solid rgba(0,0,0,.06); }
.sitechat-inputbar textarea{ resize:none; border:2px solid rgba(230,230,230,.6); border-radius:10px; padding:8px 10px; max-height:120px; min-height:40px; background:var(--card); color:var(--text); }
.sitechat-send{ border:none; border-radius:10px; background: linear-gradient(135deg, var(--pink), #ff6c9c); color:#fff; font-weight:800; cursor:pointer; }

/* Mobile: make help chat smaller and lighter */
@media (max-width: 480px){
  .feedback-section{ padding: 12px; border-radius: 18px; }
  .feedback-header{ padding:8px 10px; }
  .feedback-marquee{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; scroll-snap-type:x mandatory; mask-image:none; }
  .feedback-track{ animation:none; gap:12px; width:max-content; }
  .feedback-card{ min-width: 260px; max-width: 86vw; padding: 14px 14px 12px; scroll-snap-align:start; }
  .sitechat-panel{ right: 3vw; bottom: 70px; width: 94vw; height: 48vh; border-radius: 14px; }
  .sitechat-header{ padding:6px 10px; }
  .sitechat-feed{ padding:8px; font-size:.95rem; line-height:1.45; }
  .sitechat-bubble{ max-width: 90%; }
  .sitechat-inputbar{ grid-template-columns: 1fr 62px; }
  .sitechat-inputbar textarea{ min-height: 36px; font-size:.95rem; }
.sitechat-send{ font-size:.92rem; }
}
@media (max-width: 360px){
  .sitechat-panel{ height: 44vh; }
}

/* ================= INVERTED LOOK (dark page bg, light tiles) ================= */
body.invert .app-bg{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.05'/></svg>") repeat,
    radial-gradient(520px 240px at 12% 0%, rgba(70,140,240,.28), transparent 72%),
    radial-gradient(520px 240px at 88% 0%, rgba(255,60,120,.20), transparent 74%),
    linear-gradient(180deg, #102a4a 0%, #163a66 100%);
  filter: saturate(1.05);
}

/* light tiles */
body.invert header.hero-grid,
body.invert .section-grid,
body.invert .feature-tile,
body.invert .feedback-section{
  background:
    radial-gradient(560px 260px at 14% 0%, rgba(109,211,206,.28), transparent 72%),
    radial-gradient(560px 260px at 86% 0%, rgba(255,60,120,.16), transparent 74%),
    linear-gradient(180deg, rgba(16,66,78,.92), rgba(22,92,106,.92)) !important;
  border: 2px solid rgba(255,255,255,.10);
  color: #f1f7ff;
  box-shadow: 0 34px 96px rgba(11,22,34,.52);
}
/* Coach tiles ebenfalls dunkel */
body.invert .coach-card,
body.invert .coach-info{
  background:
    radial-gradient(520px 240px at 86% 0%, rgba(255,60,120,.14), transparent 74%),
    radial-gradient(520px 240px at 14% 0%, rgba(109,211,206,.22), transparent 74%),
    linear-gradient(180deg, rgba(16,66,78,.92), rgba(22,92,106,.92)) !important;
  border:1.5px solid rgba(255,255,255,.10);
  color:#ffffff;
}
body.invert .section-text,
body.invert .section-text p,
body.invert .section-text li{ color: #f1f7ff; }
body.invert .section-text h2,
body.invert .coach-head h2{ color: var(--text); text-shadow:none; }
body.invert .feedback-header .section-sub{ color: #e2eeff !important; }
body.invert .faq-accordion details{ background: linear-gradient(180deg, #0f2745 0%, #163a66 88%); color:#f1f7ff; border-color: rgba(255,255,255,.14); box-shadow: 0 16px 42px rgba(11,22,34,.35); }
body.invert .faq-accordion summary{ color:#ffffff; }
body.invert .faq-accordion .faq-content{ color:#e2eeff; }
body.invert .section-highlight{
  background:linear-gradient(90deg, var(--mint) 0%, #a8ece7 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.invert .section-img{ border-color: rgba(255,255,255,.18); box-shadow: 0 20px 44px rgba(0,0,0,.28); }
body.invert .step-card{ background: linear-gradient(180deg, rgba(109,211,206,.20), rgba(255,46,99,.12)); border-color: rgba(109,211,206,.35); box-shadow: 0 14px 36px rgba(0,0,0,.10), 0 1px 0 rgba(109,211,206,.25) inset; }
body.invert .coach-info p,
body.invert .coach-info li{ color: #ffffff; }
body.invert .feedback-text{ color: var(--text); }
body.invert .feedback-author{ color: var(--text-weak); }
body.invert .feedback-card{ background: linear-gradient(180deg, rgba(85,199,193,.22), rgba(36,121,165,.26)); border-color: rgba(255,255,255,.08); color:#f1f7ff; }

/* Turquoise accents and stronger contrast */
body.invert .section-text h2{
  position:relative; font-weight:900;
  background:linear-gradient(90deg, var(--mint) 0%, #a8ece7 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* USP cards pop a bit more */
body.invert .hero-usps .step-card{
  background: linear-gradient(180deg, #0f2745, #163a66);
  border:1.5px solid rgba(109,211,206,.40);
  box-shadow: 0 16px 36px rgba(0,0,0,.30), 0 0 0 1px rgba(109,211,206,.18) inset;
  color:#f7fbff;
}
body.invert .hero-usps .step-title{ color:#ffffff; font-weight: 900; }
body.invert .hero-usps .step-text{ color:#e9f3ff; }

/* Feature tile titles with mint underline */
body.invert .feature-col h2{ position:relative; color: var(--mint); font-weight:900; }
body.invert .feature-col h2::before{ display:none; }

/* Session bar mint glow */
body.invert .session-bar.inside{
  background:linear-gradient(180deg, rgba(109,211,206,.12), rgba(255,46,99,.06));
  border-color: rgba(109,211,206,.50);
  box-shadow:0 8px 20px rgba(109,211,206,.12), 0 6px 18px rgba(0,0,0,.06);
}
body.invert .session-bar.inside select:focus{ outline:3px solid rgba(109,211,206,.35); outline-offset:2px; }

/* Coach tiles subtle mint gradient */
/* handled above for dark variant */

/* Locked/warteliste (coach) dunkel */
body.invert #coach-locked{
  background: linear-gradient(180deg, #0f2745, #163a66);
  border:2px solid rgba(109,211,206,.45);
  color:#f7fbff;
}

/* Buttons brighten in invert mode */
body.invert .section-btn{ filter: saturate(1.04); }
body.invert .cta-secondary-alt{ background:#fff; color:var(--midnight); border-color: var(--mint-strong); box-shadow:0 8px 20px rgba(109,211,206,.14); }
body.invert .cta-secondary-alt:hover{ background: var(--mint); color: var(--midnight); }