/* stil.css — gemeinsame Optik aller Apps4Life Seiten.
   Marke: Sternenhimmel, Gold, Love Ya Like A Sister als Titelschrift (wie in der App). */

:root{
  --gold:#e8c06a;
  --gold-hell:#f7e3a8;
  --gold-tief:#c99a3e;
  --ink:#f4f2ff;
  --muted:#b9b6d6;
  --leise:#6f6a92;
  --karte:rgba(255,255,255,.055);
  --karte-stark:rgba(255,255,255,.085);
  --rand:rgba(255,255,255,.14);
  --blau:#7db8f5;
  --lila:#c69bf2;
  --gruen:#8fd8b0;
  --tuerkis:#7ad5cd;
  --titel:'Love Ya Like A Sister','Playfair Display',Georgia,cursive;
  --serif:'Playfair Display',Georgia,serif;
  --text:'Manrope',system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  min-height:100vh;color:var(--ink);font-family:var(--text);
  line-height:1.55;
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(80,60,160,.55), transparent 60%),
    radial-gradient(1000px 700px at 100% 20%, rgba(30,70,150,.45), transparent 55%),
    radial-gradient(900px 800px at 50% 120%, rgba(120,70,160,.40), transparent 60%),
    linear-gradient(160deg,#0a0a1a 0%,#0d0b22 45%,#0a0a1a 100%);
  background-attachment:fixed;
}
#sterne{position:fixed;inset:0;z-index:0;pointer-events:none;}
.huelle{position:relative;z-index:1;}
.mitte{width:100%;max-width:1080px;margin:0 auto;padding:0 20px;}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  background:rgba(10,10,26,.6);border-bottom:1px solid rgba(255,255,255,.07);}
.kopf .mitte{display:flex;align-items:center;justify-content:space-between;gap:14px;height:62px;}
.marke{font-family:var(--titel);font-size:25px;color:#fff;text-decoration:none;letter-spacing:.02em;
  text-shadow:0 0 16px rgba(200,180,255,.45);white-space:nowrap;}
.marke .punkt{color:var(--gold);}
.menue{display:flex;gap:20px;align-items:center;}
.menue a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s;}
.menue a:hover{color:var(--gold);}
@media(max-width:640px){.verbergen-klein{display:none;}.menue{gap:14px;}}

/* ---------- Titel ---------- */
h1,h2,h3{font-weight:400;}
.gross{font-family:var(--titel);font-size:clamp(40px,9vw,78px);line-height:1.04;color:#fff;
  text-shadow:0 0 22px rgba(200,180,255,.5),0 0 52px rgba(120,90,220,.4);}
.gold-schrift{
  background:linear-gradient(100deg,var(--gold-tief) 0%,var(--gold-hell) 28%,#fff8e0 42%,var(--gold-hell) 56%,var(--gold-tief) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:schimmer 6s ease-in-out infinite;
}
@keyframes schimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.spruch{font-family:var(--serif);font-style:italic;color:var(--muted);
  font-size:clamp(16px,3.6vw,22px);margin-top:14px;}
.trenner{width:70px;height:1px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);}

/* ---------- Abschnitte ---------- */
section{position:relative;z-index:1;padding:76px 0;}
.abschnitt-kopf{text-align:center;max-width:640px;margin:0 auto 44px;}
.abschnitt-kopf h2{font-family:var(--titel);font-size:clamp(28px,6vw,42px);color:#fff;line-height:1.1;}
.abschnitt-kopf p{color:var(--muted);margin-top:12px;font-size:16px;}
.band{background:rgba(255,255,255,.028);border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);}

/* ---------- Knoepfe ---------- */
.knopf{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:30px;transition:transform .2s,box-shadow .2s,background .2s;
  background:linear-gradient(135deg,var(--gold-hell),var(--gold) 55%,var(--gold-tief));color:#241d05;
  box-shadow:0 8px 26px rgba(232,192,106,.28);}
.knopf:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,192,106,.4);}
.knopf.leer{background:transparent;color:var(--ink);border:1px solid var(--rand);box-shadow:none;}
.knopf.leer:hover{border-color:var(--gold);color:var(--gold);}

/* ---------- Status ---------- */
.status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  padding:7px 17px;border-radius:22px;border:1px solid rgba(232,192,106,.4);
  background:rgba(232,192,106,.12);color:var(--gold-hell);}
.status.gruen{border-color:rgba(140,220,170,.4);background:rgba(140,220,170,.12);color:#bff0cf;}

/* ---------- Kacheln (Startseite) ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:24px;}
.kachel{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;color:var(--ink);padding:36px 26px 30px;border-radius:24px;
  background:var(--karte);border:1px solid var(--rand);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1);
  overflow:hidden;opacity:0;transform:translateY(26px);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.kachel.da{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s ease;}
.kachel.da:hover{transform:translateY(-9px) scale(1.015);border-color:rgba(255,255,255,.3);
  box-shadow:0 20px 54px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);}
.kachel::before{content:"";position:absolute;inset:-45% -45% auto auto;width:230px;height:230px;
  border-radius:50%;filter:blur(34px);opacity:.45;z-index:0;transition:opacity .3s;}
.kachel:hover::before{opacity:.8;}
.kachel.eins::before{background:radial-gradient(circle,rgba(232,192,106,.75),transparent 70%);}
.kachel.zwei::before{background:radial-gradient(circle,rgba(125,184,245,.75),transparent 70%);}
.kachel.drei::before{background:radial-gradient(circle,rgba(140,220,170,.75),transparent 70%);}
.kachel>*{position:relative;z-index:1;}
.kachel-bild{width:88px;height:88px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;
  border-radius:24px;border:1px solid rgba(255,255,255,.18);}
.kachel.eins .kachel-bild{background:rgba(232,192,106,.13);box-shadow:0 0 30px rgba(232,192,106,.32);}
.kachel.zwei .kachel-bild{background:rgba(125,184,245,.13);box-shadow:0 0 30px rgba(125,184,245,.32);}
.kachel.drei .kachel-bild{background:rgba(140,220,170,.13);box-shadow:0 0 30px rgba(140,220,170,.32);}
.kachel h2{font-family:var(--titel);font-size:29px;color:#fff;line-height:1.1;}
.kachel .unter{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold);margin-top:2px;}
.kachel p{color:var(--muted);font-size:14.5px;margin-top:12px;}
.kachel .oeffnen{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:14px;color:var(--gold);}
.kachel .marker{position:absolute;top:16px;right:16px;font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:5px 11px;border-radius:14px;background:rgba(255,255,255,.09);color:var(--muted);
  border:1px solid rgba(255,255,255,.12);z-index:2;}
.kachel .marker.jetzt{background:rgba(140,220,170,.16);color:#bff0cf;border-color:rgba(140,220,170,.45);
  box-shadow:0 0 16px rgba(140,220,170,.28);}

/* ---------- Funktions-Raster ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;}
.funk{background:var(--karte);border:1px solid var(--rand);border-radius:18px;padding:24px 22px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .25s,border-color .25s;}
.funk:hover{transform:translateY(-4px);border-color:rgba(232,192,106,.36);}
.funk .zeichen{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(232,192,106,.13);color:var(--gold);margin-bottom:14px;font-size:22px;}
.funk h3{font-family:var(--serif);font-weight:600;font-size:18px;color:#fff;margin-bottom:7px;}
.funk p{color:var(--muted);font-size:14.5px;}

/* ---------- Pillen ---------- */
.pillen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.pille{font-size:14px;color:var(--muted);padding:9px 18px;border-radius:22px;
  background:rgba(255,255,255,.05);border:1px solid var(--rand);}

/* ---------- Fusszeile ---------- */
.fuss{position:relative;z-index:1;padding:54px 0 34px;text-align:center;
  border-top:1px solid rgba(255,255,255,.06);}
.fuss .zeile{color:var(--muted);font-size:13.5px;}
.fuss .herz{color:var(--gold);}
.fuss .recht{margin-top:18px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.fuss .recht a{font-size:11px;color:rgba(150,146,180,.34);text-decoration:none;letter-spacing:.03em;
  transition:color .3s;}
.fuss .recht a:hover{color:rgba(185,182,214,.85);}

/* ---------- Rechtstexte ---------- */
.recht-seite{max-width:760px;margin:0 auto;background:var(--karte);border:1px solid var(--rand);
  border-radius:20px;padding:34px 30px;backdrop-filter:blur(6px);}
.recht-seite h1{font-family:var(--titel);font-size:clamp(30px,7vw,44px);color:#fff;margin-bottom:8px;}
.recht-seite h2{font-family:var(--serif);font-weight:600;font-size:21px;color:#fff;margin:28px 0 10px;}
.recht-seite h3{font-family:var(--text);font-weight:600;font-size:15px;color:var(--gold);margin:18px 0 6px;}
.recht-seite p,.recht-seite li{color:var(--muted);font-size:15px;margin-bottom:9px;}
.recht-seite ul{padding-left:20px;}
.recht-seite strong{color:var(--ink);}
.recht-seite .klein{font-size:13px;color:var(--leise);margin-top:22px;}

/* ---------- QR ---------- */
.qr-block{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:center;
  background:var(--karte);border:1px solid var(--rand);border-radius:22px;padding:30px;
  backdrop-filter:blur(6px);max-width:660px;margin:0 auto;}
.qr-feld{background:#fff;border-radius:16px;padding:12px;line-height:0;
  box-shadow:0 10px 30px rgba(0,0,0,.4);}
.qr-feld svg{width:168px;height:168px;display:block;}
.qr-text{flex:1;min-width:210px;text-align:left;}
.qr-text h3{font-family:var(--serif);font-weight:600;font-size:21px;color:#fff;margin-bottom:8px;}
.qr-text p{color:var(--muted);font-size:14.5px;margin-bottom:16px;}
@media(max-width:520px){.qr-block{flex-direction:column;text-align:center;}.qr-text{text-align:center;}}

/* ---------- Auftauchen beim Scrollen ---------- */
.auf{opacity:0;transform:translateY(24px);}
.auf.da{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s ease;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;}
  .auf,.kachel{opacity:1!important;transform:none!important;}
}