:root{
  --flaeche:#FBF8F7;--flaeche-2:#F2ECEA;--text:#1C1517;--text-2:#62575B;--text-3:#72676B;
  --strich:rgba(28,21,23,.10);--akzent:#C2255C;--akzent-weich:rgba(194,37,92,.10);--auf-akzent:#FFFFFF;
  --glas:rgba(255,255,255,.56);--glas-rand:rgba(255,255,255,.78);--glas-licht:rgba(255,255,255,.95);
  --glas-schatten:0 14px 44px rgba(90,20,45,.16),0 2px 8px rgba(90,20,45,.08);
  --glas-dick:rgba(251,248,247,.95);--linse:rgba(194,37,92,.09);--abdunkeln:rgba(40,12,24,.22);
  --kante-a:rgba(255,255,255,1);--kante-b:rgba(255,255,255,.7);--kante-flaeche:rgba(251,248,247,.78);
  --licht-1:rgba(255,107,142,.28);--licht-2:rgba(130,110,255,.19);--licht-3:rgba(255,168,120,.15);
  --fein:180ms cubic-bezier(.32,.72,0,1);--fluss:520ms cubic-bezier(.22,1,.36,1);--feder:620ms cubic-bezier(.34,1.32,.44,1);
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --flaeche:#0A0A0B;--flaeche-2:#161618;--text:#F5F5F7;--text-2:#9A9AA2;--text-3:#8A8A93;
  --strich:rgba(255,255,255,.09);--akzent:#FF6B8E;--akzent-weich:rgba(255,107,142,.14);--auf-akzent:#0A0A0B;
  --glas:rgba(28,28,32,.5);--glas-rand:rgba(255,255,255,.14);--glas-licht:rgba(255,255,255,.24);
  --glas-schatten:0 18px 54px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.32);
  --glas-dick:rgba(22,22,26,.9);--linse:rgba(255,107,142,.16);--abdunkeln:rgba(0,0,0,.42);
  --kante-a:rgba(255,255,255,.42);--kante-b:rgba(255,255,255,.18);--kante-flaeche:rgba(10,10,11,.8);
  --licht-1:rgba(255,107,142,.34);--licht-2:rgba(130,110,255,.24);--licht-3:rgba(255,168,120,.19);
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--flaeche);color:var(--text);font:16px/1.5 var(--schrift);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
button,input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
a{color:inherit}
.seite{max-width:1320px;margin:0 auto;padding:20px 16px calc(96px + env(safe-area-inset-bottom))}
.zwei{display:grid;gap:28px}
@media (min-width:1080px){.zwei{grid-template-columns:1.1fr 1fr;align-items:start;gap:48px}.seite{padding:28px 40px 110px}}
h1{font-size:34px;line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:0 0 12px}
h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin:0}
p{margin:0}
.ueber{font-size:13px;color:var(--text-3);font-weight:500}
.leise{color:var(--text-2);font-size:15px}
.unter{font-size:17px;font-weight:600}
.akzent{color:var(--akzent)}
.neu{color:var(--akzent);font-weight:600;font-size:13px}
.zahl{font-variant-numeric:tabular-nums}
.gross{font-size:clamp(112px,34vw,176px);font-weight:700;letter-spacing:-.045em;line-height:.9;font-variant-numeric:tabular-nums;margin:10px 0 6px}
.block{padding-top:16px;margin-top:22px;border-top:1px solid var(--strich)}
.block>*+*{margin-top:10px}
.liste{list-style:none;margin:0;padding:0}
.liste>li{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--strich)}
.liste>li:first-child{border-top:0}
.fuellt{flex:1;min-width:0;overflow-wrap:anywhere}
@media (min-width:1080px){.liste.spalten{columns:2;column-gap:32px}.liste.spalten>li{break-inside:avoid}}
.reihe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.knopf{min-height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--strich);background:transparent;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background var(--fein),border-color var(--fein),color var(--fein),transform var(--fein)}
.knopf:active{transform:scale(.97)}
.knopf.haupt{background:var(--akzent);color:var(--auf-akzent);border-color:transparent}
.knopf[aria-pressed="true"]{background:var(--akzent-weich);border-color:var(--akzent);color:var(--akzent)}
.knopf:disabled{opacity:.45;cursor:default}
input[type=text],input[type=time],input[type=date],textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid var(--strich);background:var(--flaeche-2);font-size:16px}
textarea{min-height:88px;resize:vertical}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.herz{width:1em;height:1em;fill:currentColor;flex:none}
.jahrestag{display:flex;gap:8px;align-items:center;color:var(--akzent);font-weight:600}
.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%);padding:10px 16px;border-radius:14px;background:var(--text);color:var(--flaeche);font-size:15px;font-weight:500;z-index:30;max-width:calc(100vw - 32px)}

#leiste{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:2px;padding:6px;border-radius:22px;background:var(--glas);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--strich);box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:10}
#leiste a{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:62px;min-height:48px;padding:6px 8px;border-radius:16px;color:var(--text-2);text-decoration:none;font-size:11px;font-weight:600;transition:color var(--fein),background var(--fein)}
#leiste a svg,#zahnrad svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#leiste a[aria-current="page"]{color:var(--akzent)}
#zahnrad{position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));width:44px;height:44px;display:grid;place-items:center;color:var(--text-2);border-radius:12px;z-index:10}

.schloss{max-width:420px;margin:0 auto;padding:48px 0 24px;display:flex;flex-direction:column;gap:14px;text-align:center}
.schloss .kopf{display:flex;align-items:center;justify-content:space-between}
.schloss .monat{font-size:22px;font-weight:700}
.pfeil{width:44px;height:44px;border-radius:12px;border:1px solid var(--strich);background:transparent;font-size:22px;line-height:1;cursor:pointer}
.wochentage,.raster{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.wochentage span{font-size:12px;color:var(--text-3);font-weight:500;text-align:center}
.raster .tag{aspect-ratio:1;min-height:44px;border:0;border-radius:12px;background:transparent;font-size:17px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--fein)}
.raster .tag:hover{background:var(--flaeche-2)}
.wahl{display:grid;gap:12px}
.wahl .knopf{justify-content:center;font-size:20px;min-height:64px}
.punkte{display:flex;justify-content:center;gap:16px;margin:8px 0}
.punkte span{width:14px;height:14px;border-radius:50%;border:2px solid var(--text-3);transition:background var(--fein),border-color var(--fein)}
.punkte span.voll{background:var(--akzent);border-color:var(--akzent)}
.tastatur{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(300px,100%);margin:8px auto 0}
.taste{height:64px;border-radius:32px;border:1px solid var(--strich);background:transparent;font-size:26px;font-weight:500;cursor:pointer;font-variant-numeric:tabular-nums}
.taste:active{background:var(--flaeche-2)}
.taste.leer{border:0;background:transparent;font-size:20px}

.gedacht{font-size:17px;min-height:56px}
.gedacht-zahlen .zeile{display:flex;gap:12px;align-items:baseline;padding:4px 0}
.gedacht-zahlen .name{font-weight:600;min-width:70px}
.flug{position:fixed;width:28px;height:28px;color:var(--akzent);pointer-events:none;z-index:20}

.kal-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kal-links{max-width:560px;width:100%}
.kal .tag{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:15px}
.kal .tag.heute{box-shadow:inset 0 0 0 2px var(--text)}
.kal .tag.treffen{background:var(--akzent);color:var(--auf-akzent)}
.kal .tag.jahrestag{box-shadow:inset 0 0 0 2px var(--akzent)}
.kal .marken{display:flex;gap:3px;height:9px;align-items:center}
.kal .marken .herz{width:9px;height:9px}
.kal .punkt{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
dialog.blatt{border:0;border-radius:22px;padding:0;background:var(--flaeche);color:var(--text);width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 48px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.blatt::backdrop{background:rgba(0,0,0,.45)}
dialog.blatt .innen{padding:20px;display:flex;flex-direction:column;gap:12px}
.stufen{display:grid;gap:8px}
.stufen .knopf{justify-content:space-between}

.frage-gross{font-size:clamp(26px,6vw,40px);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:6px 0 14px}
.antwort{padding:8px 0}
.antwort>*+*{margin-top:8px}
.antwort .wer{font-size:13px;color:var(--text-3);font-weight:600}

.fortschritt{height:6px;border-radius:3px;background:var(--flaeche-2);overflow:hidden;margin:10px 0}
.fortschritt span{display:block;height:100%;width:0;background:var(--akzent);transition:width var(--fluss)}
.haken{display:flex;gap:12px;align-items:center;min-height:44px;cursor:pointer}
.haken input{width:22px;height:22px;accent-color:var(--akzent);flex:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Umgebungslicht: gibt dem Glas etwas zum Brechen. Verlauf ist hier Licht, nicht Dekor. */
html,body{overflow-x:clip}
body{background:transparent}
#licht{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* Das Licht treibt in unsichtbar kleinen Schritten (etwa 1 px pro halbe Sekunde) statt in jedem Bild neu: gleiche Wirkung, ein Bruchteil der Arbeit. */
#licht span{position:absolute;width:40vmax;height:40vmax;border-radius:50%;will-change:transform}
#licht span:nth-child(1){left:-7vmax;top:-11vmax;transform:scale(1.75);background:radial-gradient(circle,var(--licht-1),transparent 62%);animation:treiben1 38s steps(90) infinite alternate}
#licht span:nth-child(2){right:-13vmax;top:calc(8vh + 15vmax);transform:scale(1.75);background:radial-gradient(circle,var(--licht-2),transparent 62%);animation:treiben2 47s steps(110) infinite alternate}
#licht span:nth-child(3){left:calc(6vw + 15vmax);bottom:-25vmax;transform:scale(1.75);background:radial-gradient(circle,var(--licht-3),transparent 62%);animation:treiben3 55s steps(130) infinite alternate}
@keyframes treiben1{from{transform:scale(1.75)}to{transform:translate(14vw,10vh) scale(2.06)}}
@keyframes treiben2{from{transform:scale(1.75)}to{transform:translate(-12vw,16vh) scale(1.58)}}
@keyframes treiben3{from{transform:scale(1.75)}to{transform:translate(10vw,-12vh) scale(1.96)}}

/* Liquid Glass, nur auf der schwebenden Ebene */
#leiste,#zahnrad,dialog.blatt,.toast{
  background:var(--glas);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid var(--glas-rand);
  box-shadow:inset 0 1px 0 var(--glas-licht),inset 0 -1px 0 rgba(0,0,0,.06),var(--glas-schatten);
}
/* Lichtkante: heller Rand oben links und unten rechts, wie Licht, das sich in der Glaskante bricht */
#leiste::before,#zahnrad::before,.toast::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(155deg,var(--kante-a),transparent 34%,transparent 62%,var(--kante-b));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.toast{color:var(--text);border-radius:22px;padding:10px 20px}
#leiste{padding:6px;border-radius:999px;isolation:isolate}
#leiste::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.22),transparent 60%);opacity:.9;transition:opacity var(--fein)}
#leiste a{position:relative;z-index:1;background:transparent!important;border-radius:999px;transition:color var(--fein),transform 420ms cubic-bezier(.34,1.32,.44,1)}
#leiste a:active{transform:scale(.92)}
#leiste .linse{position:absolute;left:0;top:6px;bottom:6px;z-index:0;border-radius:999px;pointer-events:none;
  background:var(--linse);box-shadow:inset 0 1px 0 var(--glas-licht),inset 0 0 0 .5px var(--glas-rand);transform-origin:center}
#zahnrad{border-radius:999px}

/* Scroll-Kante: Inhalt blendet unter den Leisten weich aus, das Licht bleibt sichtbar */
body::before,body::after{content:"";position:fixed;left:0;right:0;z-index:5;pointer-events:none}
body::before{top:0;height:calc(env(safe-area-inset-top) + 28px);background:linear-gradient(var(--kante-flaeche),transparent)}
body::after{bottom:0;height:calc(env(safe-area-inset-bottom) + 96px);background:linear-gradient(transparent,var(--kante-flaeche) 80%)}

/* Blatt: auf dem Handy von unten, mit Griff. Viel Text darauf, deshalb dickeres Glas. */
dialog.blatt{border-radius:28px;background:var(--glas-dick)}
dialog.blatt::backdrop{background:var(--abdunkeln)}
.griff{display:flex;justify-content:center;align-items:center;height:28px;margin:-8px 0 -4px;touch-action:none;cursor:grab}
.griff::before{content:"";width:40px;height:5px;border-radius:3px;background:var(--text-3);opacity:.55}
@media (max-width:699px){
  dialog.blatt{margin:auto 0 0;width:100%;max-width:100%;max-height:92dvh;border-radius:32px 32px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);transform-origin:50% 100%}
}
@media (min-width:700px){.griff{display:none}}

/* Rückmeldung beim Tippen: federt zurück */
.knopf,.taste,.pfeil,.raster .tag{transition:background var(--fein),border-color var(--fein),color var(--fein),box-shadow var(--fein),transform 460ms cubic-bezier(.34,1.32,.44,1)}
.knopf:active,.taste:active,.pfeil:active,.raster .tag:active{transform:scale(.94);transition-duration:90ms}
.haken input:checked{animation:haken 380ms cubic-bezier(.34,1.32,.44,1)}
@keyframes haken{from{transform:scale(.6)}to{transform:scale(1)}}
.toast{animation:toast-rein 560ms cubic-bezier(.34,1.32,.44,1),toast-raus 300ms cubic-bezier(.4,0,1,1) 2100ms forwards}
@keyframes toast-rein{from{opacity:0;transform:translate(-50%,-24px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toast-raus{to{opacity:0;transform:translate(-50%,-12px) scale(.94)}}
.flug{width:24px;height:24px}
.raster .tag.richtig{background:var(--akzent);color:var(--auf-akzent)}

/* Barrierefreiheit */
:root[data-ruhe] #licht span{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){#licht span{animation:none}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  #leiste,#zahnrad,dialog.blatt,.toast{background:var(--flaeche-2);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--text-3)}
  #leiste::before,#leiste::after,#zahnrad::before,.toast::before{display:none}
  #licht{display:none}
  body::before,body::after{--kante-flaeche:var(--flaeche)}
}

/* Der schwebende Einstellungs-Knopf bekommt seine eigene Zeile, damit Titel und Pfeile nicht darunter liegen */
@media (max-width:1079px){#zahnrad:not([hidden]) ~ .seite{padding-top:58px}}