:root{
    color-scheme:light dark;
    /* --- Farben: Standard = Dark --- */
    --bg:#000000;
    --bg-elevated:#0a0a0c;
    --surface:#111113;
    --surface-2:#17171a;
    --border:rgba(255,255,255,.08);
    --border-strong:rgba(255,255,255,.14);
    --text:#f5f5f7;
    --text-secondary:rgba(245,245,247,.68);
    --text-tertiary:rgba(245,245,247,.44);
    /* Akzente (in beiden Modi gleich) */
    --blue:#0A84FF;
    --purple:#BF5AF2;
    --pink:#FF375F;
    --orange:#FF9F0A;
    --green:#30D158;
    --gradient-ai:linear-gradient(120deg,#FF9F0A 0%,#FF375F 30%,#BF5AF2 60%,#0A84FF 100%);
    --gradient-ai-soft:linear-gradient(120deg,rgba(255,159,10,.35) 0%,rgba(255,55,95,.35) 30%,rgba(191,90,242,.35) 60%,rgba(10,132,255,.35) 100%);
    /* Theme-abhängige Flächen/Effekte */
    --fill-subtle:rgba(255,255,255,.06);
    --fill-hover:rgba(255,255,255,.11);
    --fill-faint:rgba(255,255,255,.04);
    --header-bg:rgba(0,0,0,.7);
    --menu-bg:rgba(10,10,12,.97);
    --heatmap-empty:rgba(255,255,255,.06);
    --btn-bg:#f5f5f7;
    --btn-fg:#000000;
    --ambient-opacity:1;
    --phone-shadow:0 60px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06), 0 0 90px -10px rgba(191,90,242,.25);
    --phone-screen-bg:
      radial-gradient(circle at 30% 20%, rgba(255,159,10,.25), transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(10,132,255,.3), transparent 55%),
      linear-gradient(180deg, #131316, #0a0a0c 70%);
    /* Radien & Timing */
    --radius-xl:32px;
    --radius-lg:24px;
    --radius-md:18px;
    --ease:cubic-bezier(.16,1,.3,1);
  }

  /* ================= LIGHT MODE (folgt Systemeinstellung) ================= */
  @media (prefers-color-scheme: light){
    :root{
      --bg:#ffffff;
      --bg-elevated:#f5f5f7;
      --surface:#f5f5f7;
      --surface-2:#ececef;
      --border:rgba(0,0,0,.10);
      --border-strong:rgba(0,0,0,.16);
      --text:#1d1d1f;
      --text-secondary:rgba(29,29,31,.72);
      --text-tertiary:rgba(29,29,31,.5);
      --fill-subtle:rgba(0,0,0,.05);
      --fill-hover:rgba(0,0,0,.09);
      --fill-faint:rgba(0,0,0,.035);
      --header-bg:rgba(255,255,255,.72);
      --menu-bg:rgba(255,255,255,.97);
      --heatmap-empty:rgba(0,0,0,.06);
      --btn-bg:#1d1d1f;
      --btn-fg:#ffffff;
      --ambient-opacity:.55;
      --phone-shadow:0 40px 90px -30px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06), 0 0 90px -10px rgba(191,90,242,.18);
      --phone-screen-bg:
        radial-gradient(circle at 30% 20%, rgba(255,159,10,.16), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(10,132,255,.16), transparent 55%),
        linear-gradient(180deg, #ffffff, #eef0f4 70%);
    }
    /* Icon-Kacheln mit Soft-Gradient bekommen im Hellmodus mehr Kontrast */
    .step-icon, .persona-emoji-box, .li-dot{background:var(--gradient-ai);}
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }

  /* Ambient background glows */
  body::before{
    content:"";
    position:fixed;
    top:-20%;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    min-width:1400px;
    height:900px;
    background:
      radial-gradient(circle at 20% 20%, rgba(191,90,242,.16), transparent 55%),
      radial-gradient(circle at 80% 10%, rgba(10,132,255,.16), transparent 55%),
      radial-gradient(circle at 50% 60%, rgba(255,55,95,.10), transparent 55%);
    pointer-events:none;
    z-index:0;
    filter:blur(10px);
    opacity:var(--ambient-opacity);
  }

  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  section{position:relative; z-index:1;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:var(--gradient-ai);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  h1,h2,h3{font-weight:700; letter-spacing:-.02em; line-height:1.05;}

  .section-title{
    font-size:clamp(2rem, 4.2vw, 3.4rem);
    margin-top:14px;
    max-width:720px;
  }

  .section-sub{
    font-size:clamp(1.05rem, 1.6vw, 1.25rem);
    color:var(--text-secondary);
    margin-top:20px;
    max-width:620px;
    line-height:1.55;
  }

  .section-head{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:64px;
  }
  .section-head .section-title, .section-head .section-sub{max-width:680px;}

  /* Reveal-on-scroll */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .reveal-delay-1.is-visible{transition-delay:.08s;}
  .reveal-delay-2.is-visible{transition-delay:.16s;}
  .reveal-delay-3.is-visible{transition-delay:.24s;}

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:16px 0;
    transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:var(--header-bg);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid var(--border);
    padding:12px 0;
  }
  nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:-.01em;
  }
  .logo-mark{
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .logo-mark img{width:100%; height:100%; object-fit:contain; display:block;}

  .nav-links{
    display:flex;
    gap:34px;
    align-items:center;
    font-size:.92rem;
    color:var(--text-secondary);
  }
  .nav-links a{transition:color .25s;}
  .nav-links a:hover{color:var(--text);}

  .nav-cta{
    display:flex;
    align-items:center;
    gap:18px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 24px;
    border-radius:100px;
    font-size:.92rem;
    font-weight:600;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .35s var(--ease), background .3s, border-color .3s, opacity .3s;
    white-space:nowrap;
  }
  .btn:active{transform:scale(.96);}
  .btn-primary{
    background:var(--btn-bg);
    color:var(--btn-fg);
  }
  .btn-primary:hover{opacity:.85;}
  .btn-secondary{
    background:var(--fill-subtle);
    color:var(--text);
    border-color:var(--border-strong);
  }
  .btn-secondary:hover{background:var(--fill-hover);}
  .btn-small{padding:9px 18px; font-size:.82rem;}

  .menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
  }
  .menu-toggle span{width:22px; height:2px; background:var(--text); border-radius:2px; transition:.3s;}

  /* ---------- HERO ---------- */
  .hero{
    padding:220px 0 100px;
    position:relative;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hero .eyebrow{margin-bottom:20px;}
  .hero h1{
    font-size:clamp(2.6rem, 7vw, 5.4rem);
    max-width:900px;
  }
  .hero h1 .grad{
    background:var(--gradient-ai);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero-sub{
    margin-top:26px;
    font-size:clamp(1.1rem, 1.8vw, 1.35rem);
    color:var(--text-secondary);
    max-width:640px;
    line-height:1.6;
  }
  .hero-actions{
    margin-top:38px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .hero-note{
    margin-top:18px;
    font-size:.82rem;
    color:var(--text-tertiary);
  }

  .hero-visual{
    margin-top:80px;
    display:flex;
    justify-content:center;
    width:100%;
    perspective:1400px;
  }

  .phone-frame{
    width:min(300px, 70vw);
    aspect-ratio:9/19.3;
    background:#0c0c0e;
    border-radius:52px;
    border:9px solid #1c1c1e;
    box-shadow:var(--phone-shadow);
    position:relative;
    overflow:hidden;
    animation:floaty 7s ease-in-out infinite;
  }
  @keyframes floaty{
    0%,100%{transform:translateY(0px) rotateX(0deg);}
    50%{transform:translateY(-14px) rotateX(1deg);}
  }
  .phone-frame::before{
    content:"";
    position:absolute;
    top:16px; left:50%;
    transform:translateX(-50%);
    width:36%;
    height:24px;
    background:#000;
    border-radius:20px;
    z-index:5;
  }
  .phone-screen{
    position:absolute; inset:0;
    background:var(--phone-screen-bg);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    padding:20px;
  }
  .placeholder-icon{
    width:46px; height:46px;
    border-radius:14px;
    background:var(--fill-subtle);
    border:1px dashed currentColor;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-tertiary);
  }
  .placeholder-label{
    font-size:.72rem;
    color:var(--text-tertiary);
    max-width:180px;
    line-height:1.4;
  }

  /* ---------- STEPS ---------- */
  .steps{padding:140px 0 60px;}
  .steps-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    margin-top:20px;
  }
  .step-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:34px 28px;
    position:relative;
    overflow:hidden;
    transition:transform .4s var(--ease), border-color .4s;
  }
  .step-card:hover{transform:translateY(-6px); border-color:var(--border-strong);}
  .step-num{
    font-size:.8rem;
    font-weight:700;
    color:var(--text-tertiary);
    letter-spacing:.05em;
  }
  .step-card h3{font-size:1.3rem; margin-top:14px;}
  .step-card p{margin-top:10px; color:var(--text-secondary); font-size:.98rem; line-height:1.55;}
  .step-icon{
    width:44px; height:44px;
    border-radius:12px;
    background:var(--gradient-ai-soft);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
  }
  .step-icon svg{width:22px; height:22px; color:#fff;}

  /* ---------- SPOTLIGHT (alternating feature sections) ---------- */
  .spotlight{
    padding:110px 0;
    border-top:1px solid var(--border);
  }
  .spotlight-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
  }
  .spotlight.reverse .spotlight-grid{direction:rtl;}
  .spotlight.reverse .spotlight-grid > *{direction:ltr;}

  .spotlight-text .section-title{font-size:clamp(1.9rem, 3.2vw, 2.6rem);}
  .spotlight-list{
    margin-top:28px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .spotlight-list li{
    display:flex;
    gap:14px;
    align-items:flex-start;
    color:var(--text-secondary);
    font-size:1rem;
    line-height:1.55;
  }
  .spotlight-list li strong{color:var(--text); font-weight:600;}
  .li-dot{
    flex-shrink:0;
    width:20px; height:20px;
    border-radius:6px;
    background:var(--gradient-ai-soft);
    display:flex; align-items:center; justify-content:center;
    margin-top:3px;
  }
  .li-dot svg{width:11px; height:11px; color:#fff;}

  .spotlight-visual{
    position:relative;
    aspect-ratio:4/3.2;
    border-radius:var(--radius-xl);
    background:var(--surface);
    border:1px solid var(--border);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .spotlight-visual::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:80%; height:80%;
    border-radius:50%;
    background:var(--glow, radial-gradient(circle, rgba(191,90,242,.5), transparent 70%));
    filter:blur(50px);
    opacity:.7;
    z-index:0;
  }
  .visual-inner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
    padding:20px;
  }

  /* ---------- BENTO GRID ---------- */
  .bento{padding:110px 0; border-top:1px solid var(--border);}
  .bento-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:minmax(190px, auto);
    gap:20px;
    margin-top:20px;
  }
  .bento-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:10px;
    transition:transform .4s var(--ease), border-color .4s, background .4s;
    position:relative;
    overflow:hidden;
  }
  .bento-card:hover{transform:translateY(-5px); border-color:var(--border-strong); background:var(--surface-2);}
  .bento-card.wide{grid-column:span 2;}
  .bento-icon{
    width:40px; height:40px;
    border-radius:11px;
    background:var(--fill-subtle);
    border:1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:6px;
  }
  .bento-icon svg{width:20px; height:20px;}
  .bento-card h3{font-size:1.08rem; font-weight:600;}
  .bento-card p{font-size:.9rem; color:var(--text-secondary); line-height:1.5;}

  /* ---------- STATS ---------- */
  .stats{padding:110px 0; border-top:1px solid var(--border);}
  .stats-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
  }
  .heatmap-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:32px;
  }
  .heatmap-tag{
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-tertiary);
    background:var(--fill-subtle);
    border:1px solid var(--border);
    padding:4px 10px;
    border-radius:100px;
    display:inline-block;
    margin-bottom:18px;
  }
  .heatmap-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:5px;
  }
  .heatmap-col{display:grid; grid-template-rows:repeat(7, 1fr); gap:5px;}
  .heatmap-cell{
    aspect-ratio:1;
    border-radius:3px;
    background:var(--heatmap-empty);
  }
  .stats-text .spotlight-list{margin-top:26px;}

  /* ---------- PERSONAS / FÜR WEN ---------- */
  .personas{padding:110px 0; border-top:1px solid var(--border);}
  .persona-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:20px;
  }
  .persona-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:34px 28px;
    transition:transform .4s var(--ease), border-color .4s;
  }
  .persona-card:hover{transform:translateY(-6px); border-color:var(--border-strong);}
  .persona-emoji-box{
    width:50px; height:50px;
    border-radius:14px;
    background:var(--gradient-ai-soft);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
  }
  .persona-emoji-box svg{width:24px; height:24px; color:#fff;}
  .persona-card h3{font-size:1.2rem;}
  .persona-card p{margin-top:10px; color:var(--text-secondary); font-size:.95rem; line-height:1.6;}

  /* ---------- PRIVACY TEASER ---------- */
  .privacy{
    padding:100px 0;
    border-top:1px solid var(--border);
  }
  .privacy-card{
    background:linear-gradient(160deg, var(--surface), var(--bg-elevated));
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:60px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:40px;
    align-items:center;
  }
  .privacy-icon{
    width:64px; height:64px;
    border-radius:18px;
    background:var(--gradient-ai);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .privacy-icon svg{width:30px; height:30px; color:#fff;}
  .privacy-card h3{font-size:1.6rem;}
  .privacy-card p{margin-top:12px; color:var(--text-secondary); line-height:1.6; max-width:640px;}
  .privacy-card .btn{margin-top:20px;}

  /* ---------- DOWNLOAD CTA ---------- */
  .cta{
    padding:140px 0;
    text-align:center;
    border-top:1px solid var(--border);
    position:relative;
  }
  .cta h2{font-size:clamp(2.2rem, 5vw, 3.6rem); max-width:700px; margin:0 auto;}
  .cta p{margin-top:18px; color:var(--text-secondary); font-size:1.15rem;}

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--border);
    padding:70px 0 30px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:50px;
  }
  .footer-brand p{margin-top:14px; color:var(--text-secondary); font-size:.9rem; max-width:260px; line-height:1.6;}
  .footer-col h4{font-size:.85rem; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px;}
  .footer-col ul{display:flex; flex-direction:column; gap:11px;}
  .footer-col a{font-size:.92rem; color:var(--text-secondary); transition:color .25s;}
  .footer-col a:hover{color:var(--text);}
  .footer-bottom{
    border-top:1px solid var(--border);
    padding-top:26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    font-size:.8rem;
    color:var(--text-tertiary);
    line-height:1.6;
  }

  /* ---------- LEGAL PAGES (Datenschutz / Impressum) ---------- */
  .legal-hero{
    padding:180px 0 60px;
    border-bottom:1px solid var(--border);
  }
  .legal-hero .back-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.88rem;
    color:var(--text-secondary);
    margin-bottom:24px;
    transition:color .25s;
  }
  .legal-hero .back-link:hover{color:var(--text);}
  .legal-hero .back-link svg{width:16px; height:16px;}
  .legal-hero h1{font-size:clamp(2.2rem, 4.5vw, 3.2rem);}
  .legal-hero .updated{margin-top:14px; font-size:.88rem; color:var(--text-tertiary);}

  .callout-box{
    margin:0 0 50px;
    padding:22px 26px;
    border-radius:var(--radius-md);
    background:rgba(255,159,10,.08);
    border:1px solid rgba(255,159,10,.28);
    display:flex;
    gap:14px;
    align-items:flex-start;
  }
  .callout-box svg{width:22px; height:22px; flex-shrink:0; color:var(--orange); margin-top:2px;}
  .callout-box p{font-size:.92rem; color:var(--text-secondary); line-height:1.6;}
  .callout-box strong{color:var(--text);}

  .legal-content{
    padding:0 0 120px;
    max-width:760px;
  }
  .legal-content section{margin-bottom:44px;}
  .legal-content h2{font-size:1.4rem; margin-bottom:14px; letter-spacing:-.01em;}
  .legal-content h3{font-size:1.1rem; margin:18px 0 8px; color:var(--text);}
  .legal-content p{color:var(--text-secondary); font-size:.98rem; line-height:1.7; margin-bottom:12px;}
  .legal-content ul{margin:12px 0 12px 4px; display:flex; flex-direction:column; gap:8px;}
  .legal-content li{color:var(--text-secondary); font-size:.98rem; line-height:1.6; padding-left:18px; position:relative;}
  .legal-content li::before{content:"—"; position:absolute; left:0; color:var(--text-tertiary);}
  .legal-content .placeholder{
    color:var(--text-tertiary);
    font-style:italic;
    background:var(--fill-faint);
    padding:2px 8px;
    border-radius:6px;
  }

  /* ---------- FAQ ---------- */
  .faq{padding:110px 0; border-top:1px solid var(--border);}
  .faq-list{
    max-width:760px;
    margin:0 auto;
  }
  .faq-item{
    border-bottom:1px solid var(--border);
    padding:6px 0;
  }
  .faq-item summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 4px;
    cursor:pointer;
    font-size:1.05rem;
    font-weight:600;
    color:var(--text);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item .chevron{
    flex-shrink:0;
    width:20px; height:20px;
    color:var(--text-tertiary);
    transition:transform .35s var(--ease);
  }
  .faq-item[open] .chevron{transform:rotate(180deg);}
  .faq-item .faq-answer{
    padding:0 4px 24px;
    color:var(--text-secondary);
    font-size:.98rem;
    line-height:1.65;
    max-width:660px;
  }

  /* ---------- PAGE LOAD FADE ---------- */
  @keyframes pageFade{from{opacity:0;} to{opacity:1;}}
  body{animation:pageFade .45s ease;}

  /* ---------- NAV ACTIVE / HOVER UNDERLINE ---------- */
  .nav-links a{position:relative;}
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-7px;
    height:2px;
    border-radius:2px;
    background:var(--gradient-ai);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .3s var(--ease);
  }
  .nav-links a:hover::after,
  .nav-links a.active::after{transform:scaleX(1);}
  .nav-links a.active{color:var(--text);}

  /* ---------- PAGE HERO (Unterseiten) ---------- */
  .page-hero{
    padding:200px 0 76px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    border-bottom:1px solid var(--border);
  }
  .page-hero .eyebrow{margin-bottom:18px;}
  .page-hero h1{font-size:clamp(2.3rem, 5.2vw, 3.9rem); max-width:860px;}
  .page-hero h1 .grad{
    background:var(--gradient-ai);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .page-hero .page-sub{
    margin-top:22px;
    font-size:clamp(1.05rem, 1.6vw, 1.3rem);
    color:var(--text-secondary);
    max-width:660px;
    line-height:1.6;
  }

  /* ---------- CHAPTER TILES (Startseite) ---------- */
  .chapters{padding:110px 0; border-top:1px solid var(--border);}
  .chapter-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin-top:8px;
  }
  .chapter-card{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-xl);
    border:1px solid var(--border);
    background:var(--surface);
    padding:40px;
    min-height:300px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    transition:transform .45s var(--ease), border-color .45s;
  }
  .chapter-card:hover{transform:translateY(-6px); border-color:var(--border-strong);}
  .chapter-card .glow{
    position:absolute;
    top:-30%; left:10%;
    width:80%; height:70%;
    border-radius:50%;
    opacity:.55;
    filter:blur(55px);
    z-index:0;
  }
  .chapter-card .c-inner{position:relative; z-index:1;}
  .chapter-card .chapter-eyebrow{
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-tertiary);
  }
  .chapter-card h3{font-size:1.7rem; margin-top:10px;}
  .chapter-card p{color:var(--text-secondary); margin-top:12px; max-width:440px; line-height:1.55; font-size:1rem;}
  .chapter-link{
    margin-top:20px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--text);
    font-weight:600;
    font-size:.95rem;
  }
  .chapter-link svg{width:16px; height:16px; transition:transform .3s var(--ease);}
  .chapter-card:hover .chapter-link svg{transform:translateX(5px);}

  /* ---------- KI-PRINZIPIEN ---------- */
  .principles{padding:100px 0; border-top:1px solid var(--border);}
  .principle-flow{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    margin-top:8px;
  }
  .principle-step{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px 24px;
  }
  .principle-step .p-num{
    font-size:.8rem;
    font-weight:700;
    background:var(--gradient-ai);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .principle-step h3{font-size:1.15rem; margin-top:10px;}
  .principle-step p{color:var(--text-secondary); margin-top:8px; font-size:.92rem; line-height:1.5;}

  /* ---------- CROSS-LINK (nächste Seite) ---------- */
  .crosslink{padding:80px 0; border-top:1px solid var(--border);}
  .crosslink-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    background:linear-gradient(160deg, var(--surface), var(--bg-elevated));
    border:1px solid var(--border);
    border-radius:var(--radius-xl);
    padding:36px 44px;
    transition:border-color .4s;
  }
  .crosslink-card:hover{border-color:var(--border-strong);}
  .crosslink-card .cl-text small{
    display:block;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-tertiary);
    margin-bottom:6px;
  }
  .crosslink-card .cl-text strong{font-size:1.4rem; font-weight:700; letter-spacing:-.01em;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    .nav-links{display:none;}
    .nav-links.open{
      display:flex;
      flex-direction:column;
      position:fixed;
      top:64px; left:20px; right:20px;
      background:var(--menu-bg);
      backdrop-filter:blur(20px) saturate(180%);
      -webkit-backdrop-filter:blur(20px) saturate(180%);
      border:1px solid var(--border);
      border-radius:18px;
      padding:20px;
      gap:18px;
    }
    .menu-toggle{display:flex;}
    .chapter-grid{grid-template-columns:1fr;}
    .principle-flow{grid-template-columns:repeat(2, 1fr);}
    .page-hero{padding:150px 0 58px;}
    .steps-grid{grid-template-columns:1fr;}
    .spotlight-grid{grid-template-columns:1fr; gap:44px;}
    .spotlight.reverse .spotlight-grid{direction:ltr;}
    .spotlight.reverse .spotlight-grid .spotlight-visual{order:-1;}
    .bento-grid{grid-template-columns:repeat(2, 1fr);}
    .bento-card.wide{grid-column:span 2;}
    .stats-layout{grid-template-columns:1fr; gap:40px;}
    .persona-grid{grid-template-columns:1fr;}
    .privacy-card{grid-template-columns:1fr; text-align:center; padding:40px 28px;}
    .privacy-card p{margin-left:auto; margin-right:auto;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
    .hero{padding:160px 0 70px;}
    .legal-hero{padding:150px 0 50px;}
  }
  @media (max-width: 560px){
    .bento-grid{grid-template-columns:1fr;}
    .bento-card.wide{grid-column:span 1;}
    .footer-grid{grid-template-columns:1fr;}
    .principle-flow{grid-template-columns:1fr;}
    .chapter-card{min-height:auto; padding:32px;}
    .crosslink-card{padding:28px;}
  }