:root{
    --ground:#070b07;
    --panel:#101a10;
    --panel2:#16221a;
    --line:#2c3d28;
    --leaf:#9be24a;
    --leaf-ink:#0a1406;
    --grape:#b77fe8;
    --grape-deep:#8f52c9;
    --grape-ink:#2a1240;
    --cream:#f2f0e6;
    --muted:#aab89d;
    --wa:#25D366;
    --wa-ink:#06240f;
  }
  *{box-sizing:border-box;}
  html{background:var(--ground);}
  body{
    background:
      radial-gradient(1100px 600px at 85% -140px, rgba(143,82,201,.22), transparent 60%),
      radial-gradient(900px 520px at -10% 22%, rgba(155,226,74,.10), transparent 60%),
      radial-gradient(1000px 700px at 110% 78%, rgba(143,82,201,.12), transparent 55%),
      var(--ground);
    color:var(--cream);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.55;
    margin:0; padding:0;
    overflow-x:hidden;
  }
  /* Vignette für Tiefe */
  body::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
    background:radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0,0,0,.5) 100%);
  }
  .wrap{max-width:680px;margin:0 auto;padding:0 18px 130px;position:relative;z-index:2;}
  a{color:inherit;}

  /* ===== Display-Typo ===== */
  .disp{
    font-family:"Arial Black","Avenir-Black","Helvetica Neue",Arial,sans-serif;
    font-weight:900; text-transform:uppercase; line-height:1.02;
    letter-spacing:.01em; text-wrap:balance;
  }
  .kicker{
    color:var(--leaf); font-weight:800; font-size:12px; letter-spacing:.3em;
    text-transform:uppercase; margin:0 0 10px;
  }
  /* Brush-Smear wie auf den Stickern */
  .smear{
    display:inline-block; padding:2px 16px 4px; margin-top:6px;
    background:linear-gradient(100deg, transparent 1.5%, var(--leaf) 3%, var(--leaf) 97%, transparent 98.5%);
    color:var(--leaf-ink);
    transform:skew(-7deg) rotate(-1.6deg);
    box-shadow:0 0 34px rgba(155,226,74,.35);
  }
  .smear-purple{
    display:inline-block; padding:2px 14px 4px;
    background:linear-gradient(100deg, transparent 1.5%, var(--grape-deep) 3%, var(--grape-deep) 97%, transparent 98.5%);
    color:#fff; transform:skew(-7deg) rotate(1.2deg);
    box-shadow:0 0 30px rgba(143,82,201,.4);
  }

  /* ===== Ticker ===== */
  .ticker{
    overflow:hidden; white-space:nowrap; position:relative; z-index:2;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:rgba(155,226,74,.06);
    padding:9px 0; margin:0;
  }
  .ticker .track{
    display:inline-block; white-space:nowrap;
    animation:tick 26s linear infinite;
    font-family:"Arial Black",Arial,sans-serif; font-weight:900;
    font-size:13px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--leaf);
  }
  .ticker.purple{background:rgba(143,82,201,.08);}
  .ticker.purple .track{color:var(--grape); animation-direction:reverse;}
  .ticker .track span{opacity:.55; padding:0 14px;}
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ===== Hero ===== */
  #hero{ text-align:center; padding:54px 0 26px; position:relative; }
  /* Riesige Ghost-Zahl im Hintergrund */
  #hero .ghost{
    position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(-6deg);
    font-family:"Arial Black",Arial,sans-serif; font-weight:900;
    font-size:clamp(150px,44vw,270px); line-height:1;
    color:transparent; -webkit-text-stroke:2px rgba(155,226,74,.14);
    pointer-events:none; user-select:none; z-index:0;
  }
  /* Schwebende Blätter */
  .lf{position:absolute; z-index:0; pointer-events:none; user-select:none; filter:blur(.6px) saturate(.8); opacity:.5;}
  .lf.b{filter:blur(2.5px); opacity:.3;}
  .lf1{top:8%; left:2%; font-size:44px; animation:float 7s ease-in-out infinite;}
  .lf2{top:4%; right:4%; font-size:34px; animation:float 9s ease-in-out infinite 1.2s;}
  .lf3{top:56%; left:-6px; font-size:30px; animation:float 8s ease-in-out infinite .6s;}
  .lf4{top:48%; right:-4px; font-size:48px; animation:float 10s ease-in-out infinite 2s;}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(6deg)}}

  #hero .logo{
    position:relative; z-index:2;
    width:168px; height:168px; max-width:58vw; object-fit:cover; border-radius:50%;
    box-shadow:0 0 0 4px rgba(155,226,74,.3), 0 0 60px rgba(155,226,74,.35), 0 0 120px rgba(143,82,201,.3), 0 18px 50px rgba(0,0,0,.7);
  }
  .chips{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:20px 0 4px; position:relative; z-index:2;}
  .chip{
    font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    border:1px solid var(--line); border-radius:999px; padding:6px 13px;
    background:rgba(16,26,16,.7); color:var(--muted); backdrop-filter:blur(4px);
  }
  .chip.hot{border-color:rgba(155,226,74,.5); color:var(--leaf);}
  #hero h1{
    position:relative; z-index:2;
    font-size:clamp(38px,10vw,60px); margin:14px 0 12px;
  }
  #hero h1 .l1{display:block; text-shadow:0 0 30px rgba(242,240,230,.15);}
  #hero .sub{
    position:relative; z-index:2;
    color:var(--muted); font-size:17px; max-width:40ch; margin:16px auto 24px;
  }
  .btn{
    display:inline-block; text-decoration:none; text-align:center;
    font-family:"Arial Black",Arial,sans-serif; font-weight:900; text-transform:uppercase;
    letter-spacing:.06em; border-radius:999px; padding:15px 30px; font-size:15px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:active{transform:scale(.97);}
  .btn-grape{
    background:linear-gradient(140deg,var(--grape),var(--grape-deep));
    color:#fff; box-shadow:0 0 30px rgba(143,82,201,.45), 0 10px 24px rgba(0,0,0,.5);
    position:relative; z-index:2;
  }

  /* ===== Sections & Cards ===== */
  section{margin:34px 0; position:relative;}
  .card{
    position:relative; border-radius:22px; padding:24px 20px;
    background:linear-gradient(165deg, var(--panel) 0%, #0c140c 100%);
    box-shadow:0 24px 50px rgba(0,0,0,.45);
  }
  .card::before{
    content:""; position:absolute; inset:0; border-radius:22px; padding:1px;
    background:linear-gradient(160deg, rgba(155,226,74,.55), rgba(44,61,40,.25) 38%, rgba(143,82,201,.5));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
  }
  h2.disp{font-size:clamp(24px,6.4vw,32px); margin:2px 0 6px;}
  h2 .gr{color:var(--leaf); text-shadow:0 0 24px rgba(155,226,74,.4);}
  h2 .pu{color:var(--grape); text-shadow:0 0 24px rgba(143,82,201,.45);}
  .lead{color:var(--muted); font-size:15.5px; margin:6px 0 16px;}
  .badge-bsp{
    display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
    color:var(--grape); border:1px dashed rgba(143,82,201,.55); border-radius:8px; padding:3px 9px;
    transform:rotate(-2deg);
  }

  /* Angebot */
  #angebot .deal{
    display:flex; align-items:center; gap:16px; margin-top:14px;
  }
  #angebot .flame{
    flex:0 0 74px; height:74px; border-radius:20px; font-size:38px;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 30% 30%, rgba(183,127,232,.35), rgba(143,82,201,.15)), var(--panel2);
    box-shadow:0 0 30px rgba(143,82,201,.35) inset, 0 0 24px rgba(143,82,201,.25);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
  #angebot .deal b{font-size:22px; display:block; line-height:1.2;}
  #angebot .deal small{color:var(--muted); font-size:14px;}

  /* Standorte */
  .st-grid{display:flex; flex-direction:column; gap:14px; margin-top:16px;}
  .st{
    position:relative; border-radius:20px; overflow:hidden;
    background:linear-gradient(150deg, var(--panel2), #0c140c);
    border:1px solid var(--line);
    padding:18px 18px 16px;
    transition:border-color .2s;
  }
  .st:hover{border-color:rgba(155,226,74,.5);}
  .st .hood{
    font-family:"Arial Black",Arial,sans-serif; font-weight:900; text-transform:uppercase;
    font-size:21px; letter-spacing:.01em;
  }
  .st .hood::before{content:"📍 "; font-size:17px;}
  .st .addr{color:var(--muted); font-size:14.5px; margin:4px 0 12px;}
  .st .row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .tag247{
    font-size:11px; font-weight:900; letter-spacing:.14em;
    background:var(--leaf); color:var(--leaf-ink); border-radius:6px; padding:4px 9px;
    transform:rotate(-2deg); box-shadow:0 0 18px rgba(155,226,74,.35);
  }
  .btn-route{
    text-decoration:none; font-weight:800; font-size:13.5px;
    border:1px solid rgba(155,226,74,.5); color:var(--leaf);
    border-radius:999px; padding:9px 18px;
    transition:background .2s;
  }
  .btn-route:hover{background:rgba(155,226,74,.1);}
  /* Neon-Ecke */
  .st::after{
    content:"24/7"; position:absolute; top:-10px; right:-8px;
    font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:54px; line-height:1;
    color:transparent; -webkit-text-stroke:1.5px rgba(143,82,201,.28);
    transform:rotate(8deg); pointer-events:none;
  }

  /* Neu & Selten — Snap-Reihe */
  .nu-row{
    display:flex; gap:12px; overflow-x:auto; padding:14px 2px 18px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .nu-row::-webkit-scrollbar{display:none;}
  .nu{
    flex:0 0 156px; scroll-snap-align:start;
    background:linear-gradient(160deg, var(--panel2), #0d150d);
    border:1px solid var(--line); border-radius:18px; overflow:hidden;
    transition:border-color .2s;
  }
  .nu:hover{border-color:rgba(183,127,232,.55); transform:rotate(0) scale(1.03);}
  .nu:nth-child(odd){transform:rotate(-1.3deg);}
  .nu:nth-child(even){transform:rotate(1.3deg);}
  .nu .ph{position:relative; height:126px;}
  .nu .ph{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 60%, rgba(143,82,201,.22), rgba(13,21,13,.9));}
  .nu .ph .em{font-size:52px; filter:drop-shadow(0 0 16px rgba(155,226,74,.4));}
  .nu .ph::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(7,11,7,.08) 30%, rgba(7,11,7,.65) 100%),
               linear-gradient(160deg, rgba(143,82,201,.16), rgba(155,226,74,.10));
  }
  .nu .cat{
    position:absolute; top:8px; left:8px; z-index:2;
    font-size:9.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
    background:rgba(7,11,7,.75); color:var(--leaf); border:1px solid rgba(155,226,74,.35);
    border-radius:6px; padding:3px 7px; backdrop-filter:blur(3px);
  }
  .nu .inf{padding:10px 12px 12px;}
  .nu b{font-size:13px; display:block; line-height:1.3;}
  .nu small{color:var(--grape); font-weight:800; font-size:13.5px;}

  /* Produkt-Galerie (E3-Task 4): echtes Produktbild in der .ph-Kachel statt
     nur Emoji, plus Wrapping-Grid für die volle Galerieseite (/produkte) —
     nutzt ausschließlich bestehende Variablen/Klassen, keine neuen Farben. */
  .nu .ph img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .pg-grid{flex-wrap:wrap; overflow-x:visible; scroll-snap-type:none;}
  .produkt-desc{color:var(--muted); font-size:12.5px; line-height:1.4; margin:4px 0 0;}

  /* So läuft's */
  .steps3{display:flex; flex-direction:column; gap:12px; margin-top:14px;}
  .steps3 > div{display:flex; gap:14px; align-items:flex-start;}
  .steps3 .num{
    flex:0 0 38px; height:38px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:17px;
    background:linear-gradient(140deg, var(--grape), var(--grape-deep)); color:#fff;
    box-shadow:0 0 18px rgba(143,82,201,.35);
  }
  .steps3 b{display:block; font-size:15.5px;}
  .steps3 small{color:var(--muted); font-size:13.5px; line-height:1.45; display:block;}

  /* Wunschbox */
  #wunschbox .card{background:linear-gradient(150deg, #1b1226 0%, #0e0a14 70%);}
  #wunschbox .card::before{background:linear-gradient(160deg, rgba(183,127,232,.6), rgba(44,61,40,.2) 45%, rgba(155,226,74,.4));}
  .btn-leaf{
    background:linear-gradient(140deg, var(--leaf), #7cc236);
    color:var(--leaf-ink); box-shadow:0 0 28px rgba(155,226,74,.4), 0 10px 22px rgba(0,0,0,.5);
    margin-top:6px;
  }

  /* Wunschbox-Formular */
  .wform{display:flex; flex-direction:column; gap:16px; margin-top:16px;}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label, .field .flabel{
    font-size:13px; font-weight:800; letter-spacing:.03em; color:var(--muted);
  }
  .field input[type="text"],
  .field input[type="password"],
  .field textarea,
  .field select{
    font:inherit; color:var(--cream); background:var(--panel2);
    border:1px solid var(--line); border-radius:12px; padding:11px 14px;
    resize:vertical;
  }
  .field input[type="text"]:focus,
  .field input[type="password"]:focus,
  .field textarea:focus,
  .field select:focus{outline:2px solid var(--leaf); outline-offset:1px;}
  .stars{display:flex; gap:6px; flex-wrap:wrap;}
  .stars input{position:absolute; opacity:0; pointer-events:none;}
  .stars label{
    cursor:pointer; font-size:14px; font-weight:700; padding:8px 12px; border-radius:999px;
    border:1px solid var(--line); background:var(--panel2); color:var(--muted);
  }
  .stars input:checked + label{
    border-color:rgba(155,226,74,.6); color:var(--leaf); background:rgba(155,226,74,.1);
  }
  /* Honeypot: für Menschen unsichtbar, bleibt aber im DOM (Anti-Spam) */
  .hp{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;}
  .msg-error{
    color:var(--grape); font-weight:700; font-size:14.5px;
    border:1px dashed rgba(143,82,201,.55); border-radius:12px; padding:10px 14px;
    margin:0 0 4px;
  }

  /* Hilfe */
  .sos{display:flex; flex-direction:column; gap:9px; margin:14px 0 16px;}
  .sos div{
    background:rgba(22,34,26,.7); border:1px solid var(--line); border-radius:12px;
    padding:11px 14px; font-size:15px; font-weight:600;
  }
  .btn-wa{
    display:block; background:var(--wa); color:var(--wa-ink);
    box-shadow:0 0 30px rgba(37,211,102,.35), 0 10px 24px rgba(0,0,0,.5);
    text-decoration:none;
  }

  /* Hilfe-Seite: aufklappbare Anleitungen (details/summary), Card-Optik wie .sos */
  .hilfe-details{
    background:rgba(22,34,26,.7); border:1px solid var(--line); border-radius:12px;
    padding:11px 14px; margin:0 0 10px;
  }
  .hilfe-details summary{
    cursor:pointer; font-size:15px; font-weight:700; color:var(--cream); list-style:none;
  }
  .hilfe-details summary::-webkit-details-marker{display:none;}
  .hilfe-details summary::after{content:"+"; float:right; color:var(--leaf); font-weight:800;}
  .hilfe-details[open] summary::after{content:"–";}
  .hilfe-details ol{margin:10px 0 2px; padding-left:20px; color:var(--muted); font-size:14.5px; line-height:1.5;}
  .hilfe-details li{margin-bottom:6px;}
  .hilfe-details li:last-child{margin-bottom:0;}
  .hilfe-details + .btn-wa{margin-top:16px;}

  /* Rechtliches (Impressum/Datenschutz): sachliche Struktur innerhalb .card */
  #impressum h3, #datenschutz h3{
    font-size:15px; font-weight:800; color:var(--leaf); margin:20px 0 6px;
  }
  #impressum h3:first-of-type, #datenschutz h3:first-of-type{margin-top:14px;}
  #impressum p, #datenschutz p{color:var(--muted); font-size:14.5px; line-height:1.6; margin:0 0 4px;}

  /* Footer */
  #footer{text-align:center; padding:16px 0 8px; color:var(--muted); font-size:13.5px;}
  #footer .insta{
    display:inline-block; font-weight:800; text-decoration:none; font-size:15px;
    color:var(--grape); margin-bottom:14px;
  }
  #footer .legal{font-size:12.5px; color:var(--muted); line-height:1.7;}
  #footer .claim{
    margin-top:18px; font-family:"Arial Black",Arial,sans-serif; font-weight:900;
    text-transform:uppercase; font-size:14px; letter-spacing:.12em; color:var(--cream);
  }

  /* Sticky WhatsApp-Leiste */
  .wa-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:10;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, rgba(7,11,7,.96) 60%, rgba(7,11,7,0));
  }
  .wa-bar a{
    display:block; max-width:640px; margin:0 auto; text-align:center; text-decoration:none;
    background:var(--wa); color:var(--wa-ink);
    font-family:"Arial Black",Arial,sans-serif; font-weight:900; text-transform:uppercase;
    font-size:14px; letter-spacing:.05em;
    border-radius:999px; padding:14px 18px;
    box-shadow:0 0 26px rgba(37,211,102,.45), 0 8px 20px rgba(0,0,0,.55);
    animation:wapulse 3s ease-in-out infinite;
  }
  @keyframes wapulse{0%,100%{box-shadow:0 0 22px rgba(37,211,102,.35),0 8px 20px rgba(0,0,0,.55)}50%{box-shadow:0 0 36px rgba(37,211,102,.6),0 8px 20px rgba(0,0,0,.55)}}

  /* Einblende-Animationen */
  .rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  .rv.in{opacity:1; transform:none;}
  #hero .logo, #hero .chips, #hero h1, #hero .sub, #hero .btn{
    animation-name:rise; animation-duration:.8s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.2,.7,.3,1);
  }
  #hero .logo{animation-delay:.05s}
  #hero .chips{animation-delay:.2s}
  #hero h1{animation-delay:.32s}
  #hero .sub{animation-delay:.46s}
  #hero .btn{animation-delay:.6s}
  @keyframes rise{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}

  /* ===== Admin (Task 6): Login/Dashboard — nutzt ausschließlich bestehende
     Tokens (var(--panel2), var(--line), var(--leaf), var(--muted)), keine
     neuen Farben/Fonts. Eigenes .admin-wrap statt .wrap-Footer/Ticker, weil
     die Admin-Seiten kein Ticker/keine WA-Leiste zeigen sollen. ===== */
  .admin-wrap{padding-top:36px;}
  .admin-grid{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
  .stat-tile{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    flex-wrap:wrap;
    background:linear-gradient(150deg, var(--panel2), #0c140c);
    border:1px solid var(--line); border-radius:16px; padding:14px 16px;
  }
  .stat-tile .label{font-weight:800; font-size:14.5px;}
  .stat-tile .nums{color:var(--leaf); font-weight:900; font-size:14.5px;}
  .admin-bar{display:flex; justify-content:flex-end; margin-top:22px;}

  /* ===== Admin (Task 7): Pflege-Seiten (Angebot/News/Postfächer) — kleine
     Ergänzungen, ausschließlich bestehende Tokens (var(--panel2), var(--line),
     var(--leaf), var(--leaf-ink), var(--grape), var(--muted)). ===== */
  .admin-nav{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
  .admin-list{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
  .admin-item{
    background:linear-gradient(150deg, var(--panel2), #0c140c);
    border:1px solid var(--line); border-radius:16px; padding:14px 16px;
  }
  .admin-item .body{font-size:15px; margin:0 0 8px;}
  .admin-item .meta{color:var(--muted); font-size:13px; margin:0 0 10px;}
  .status-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
  .status-row form{margin:0;}
  .btn-status{
    font:inherit; font-weight:800; font-size:13.5px; letter-spacing:.02em;
    border-radius:999px; padding:14px 18px; border:1px solid var(--line);
    background:var(--panel2); color:var(--muted); cursor:pointer;
  }
  .btn-status.is-active{
    border-color:rgba(155,226,74,.6); color:var(--leaf-ink); background:var(--leaf);
  }
  .btn-danger{
    font:inherit; font-weight:800; font-size:13.5px; border-radius:999px;
    padding:14px 18px; border:1px dashed rgba(143,82,201,.55); background:transparent;
    color:var(--grape); cursor:pointer;
  }

  /* ===== Admin (E3-Task 3): Produkte-CRUD — kleine Ergänzungen, ausschließlich
     bestehende Tokens (var(--muted), var(--panel2), var(--line), var(--leaf),
     var(--cream)). Keine neuen Farben. ===== */
  .hint{color:var(--muted); font-size:12.5px; line-height:1.5; margin:0 0 4px;}
  .check-row{display:flex; align-items:center; gap:8px; margin-top:4px;}
  .check-row input[type="checkbox"]{width:18px; height:18px; accent-color:var(--leaf);}
  .check-row label{font-size:13.5px; font-weight:700; color:var(--cream);}
  .produkt-row{display:flex; gap:12px; align-items:flex-start;}
  .produkt-row .info{flex:1; min-width:0;}
  .thumb{
    width:52px; height:52px; border-radius:12px; object-fit:cover; flex-shrink:0;
    border:1px solid var(--line); background:var(--panel2);
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none !important; transition:none !important;}
    .rv{opacity:1; transform:none;}
  }