/* Kalorien-Tracker (Panel „Kalorien“). Eigener Look, kein Neumorphismus (Marcel 12.11.): dunkles Glas, Aurora,
   Ringe und viel Bewegung, die etwas bedeutet. Hell/Dunkel folgt dem System. Kein Schimmer/Abtastlicht. */
:root {
  color-scheme: light dark;
  --bg: #eef2f9; --bg2: #e2e8f4;
  --glas: rgba(255, 255, 255, .74); --glas2: rgba(255, 255, 255, .9); --rand: rgba(15, 30, 60, .08);
  --text: #0c1628; --leise: #5b6882; --hauch: rgba(12, 22, 40, .06); --spur: rgba(12, 22, 40, .08);
  --akzent: #0b68ba; --akzent2: #2f8fe0; --akzent3: #58b6ff;
  --protein: #ea6a33; --kh: #d99608; --fett: #7c4ddb; --zucker: #df3f78; --faser: #0e9a72; --alk: #a54fcf; --koffein: #93603a;
  --warm: #ef4f3c; --warm2: #ff9a3d; --gut: #10a37a;
  --schatten: 0 12px 32px -14px rgba(12, 30, 70, .28), 0 2px 6px rgba(12, 30, 70, .05);
  --aurora-a: #4ca3f0; --aurora-b: #8b7bff; --aurora-c: #2dd4bf; --aurora-deckkraft: .32;
  --r: 22px;
  --feder: cubic-bezier(.34, 1.56, .64, 1);
  --sanft: cubic-bezier(.22, 1, .36, 1);
  --blatt: cubic-bezier(.32, .72, 0, 1);
  --oben: env(safe-area-inset-top, 0px); --unten: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #050912; --bg2: #0a1120;
    --glas: rgba(18, 27, 47, .62); --glas2: rgba(24, 34, 58, .92); --rand: rgba(255, 255, 255, .08);
    --text: #eaf1ff; --leise: #8c99b4; --hauch: rgba(255, 255, 255, .05); --spur: rgba(255, 255, 255, .08);
    --akzent: #4ca3f0; --akzent2: #6fb8ff; --akzent3: #a8dcff;
    --protein: #ff8a5b; --kh: #ffc94d; --fett: #a78bfa; --zucker: #ff6b9d; --faser: #34d399; --alk: #d08cff; --koffein: #d2a77f;
    --warm: #ff6b5b; --warm2: #ffb057; --gut: #34d399;
    --schatten: 0 20px 44px -20px rgba(0, 0, 0, .75);
    --aurora-deckkraft: .5;
  }
}
.im-rahmen { --oben: 0px; --unten: 0px; }
.ueber { --aurora-a: #ff6b5b; --aurora-b: #ff9a3d; --aurora-c: #f472b6; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); overflow-x: hidden; }
body {
  font: 16px/1.4 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Aurora: driftende Farbwolken, Farbe zeigt den Tag (blau im Plan, warm drüber) */
.aurora { position: fixed; inset: -25%; z-index: 0; pointer-events: none; filter: blur(70px) saturate(1.2); opacity: var(--aurora-deckkraft); }
.aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; transition: background 2.5s ease; }
.aurora i:nth-child(1) { background: radial-gradient(circle, var(--aurora-a), transparent 62%); top: 0; left: 0; animation: drift1 28s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: radial-gradient(circle, var(--aurora-b), transparent 62%); top: 10%; right: -5%; animation: drift2 34s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { background: radial-gradient(circle, var(--aurora-c), transparent 62%); bottom: -5%; left: 20%; animation: drift3 40s ease-in-out infinite alternate; opacity: .7; }
@keyframes drift1 { to { transform: translate(18vmax, 22vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-22vmax, 16vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(10vmax, -24vmax) scale(1.2); } }

main { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: calc(10px + var(--oben)) 16px calc(120px + var(--unten)); }
.ansicht { display: none; }
.ansicht.aktiv { display: block; animation: ansicht-rein .5s var(--sanft); }
@keyframes ansicht-rein { from { opacity: 0; transform: translateY(10px); } }
.rein { animation: rein .6s var(--sanft) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes rein { from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(6px); } }

.glas {
  background: var(--glas); border: 1px solid var(--rand); border-radius: var(--r); box-shadow: var(--schatten);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
}
h1 { font-size: 30px; letter-spacing: -.02em; margin: 6px 4px 14px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--leise); margin: 26px 6px 12px; font-weight: 600; }
h3 { font-size: 15px; margin: 0 0 12px; }

/* ---------- Kopf mit Tageswechsel */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pfeil { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--leise); transition: transform .3s var(--feder), opacity .3s; }
.pfeil:active { transform: scale(.85); }
.pfeil[disabled] { opacity: .2; pointer-events: none; }
.pfeil svg { width: 22px; height: 22px; }
.kopf-mitte { text-align: center; overflow: hidden; }
.tag-name { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.tag-datum { font-size: 13px; color: var(--leise); }
.wechsel-links { animation: von-links .45s var(--sanft); } .wechsel-rechts { animation: von-rechts .45s var(--sanft); }
@keyframes von-links { from { opacity: 0; transform: translateX(-30px); } }
@keyframes von-rechts { from { opacity: 0; transform: translateX(30px); } }

.plaketten { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.plakette { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--hauch); border: 1px solid var(--rand); }
.plakette .flamme { display: inline-block; animation: flackern 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flackern { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.15) rotate(4deg); } }
.runter { color: var(--gut); } .rauf { color: var(--warm); }

/* ---------- Der große Ring */
.buehne { position: relative; width: min(84vw, 330px); aspect-ratio: 1; margin: 6px auto 4px; }
.buehne svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.spur { fill: none; stroke: var(--spur); }
.bogen { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--sanft), stroke .6s; }
.bogen-kcal { stroke: url(#g-kcal); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--akzent) 55%, transparent)); }
.ueber .bogen-kcal { stroke: url(#g-warm); animation: glut 2.4s ease-in-out infinite; }
@keyframes glut { 50% { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--warm) 80%, transparent)); } }
.bogen-drueber { stroke: var(--warm); opacity: .95; }
.bogen-p { stroke: var(--protein); } .bogen-k { stroke: var(--kh); } .bogen-f { stroke: var(--fett); }
.spitze { transition: transform 1.4s var(--sanft), opacity .6s; transform-origin: 150px 150px; opacity: 0; }
.spitze circle { fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); }
.ring-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.rest-zahl { font-size: clamp(46px, 15vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; display: flex; justify-content: center; }
.ueber .rest-zahl { color: var(--warm); }
.rest-text { font-size: 14px; color: var(--leise); margin-top: 6px; font-weight: 600; letter-spacing: .02em; }
.ring-sub { font-size: 12px; color: var(--leise); margin-top: 10px; opacity: .85; }

/* Zählwerk: jede Ziffer rollt einzeln */
.od { display: inline-block; height: 1em; overflow: hidden; position: relative; }
.od-band { display: flex; flex-direction: column; transition: transform 1.1s var(--feder); transition-delay: calc(var(--i) * 60ms); }
.od-band span { height: 1em; line-height: 1em; }
.od-zeichen { display: inline-block; }

/* ---------- Makro-Leisten */
.makros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.makro { padding: 12px 14px; }
.makro-kopf { display: flex; align-items: center; font-size: 12px; color: var(--leise); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.makro-wert { margin-top: 3px; white-space: nowrap; }
.makro-wert b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.makro-wert small { font-size: 13px; color: var(--leise); font-weight: 600; }
.leiste { height: 7px; border-radius: 9px; background: var(--spur); margin-top: 9px; overflow: hidden; position: relative; }
.leiste i { position: absolute; inset: 0; border-radius: inherit; background: var(--farbe); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--sanft); }
.makro.voll .leiste i { box-shadow: 0 0 12px var(--farbe); }
.makro.zuviel .makro-wert b { color: var(--warm); }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--farbe); margin-right: 6px; }

/* ---------- Schnell nochmal */
.favoriten { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -16px; padding-left: 16px; scroll-snap-type: x mandatory; }
.favoriten::-webkit-scrollbar { display: none; }
.fav { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 99px; font-size: 14px; font-weight: 600; transition: transform .3s var(--feder); }
.fav:active { transform: scale(.92); }
.fav .fav-bild { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--hauch); font-size: 17px; }
.fav small { color: var(--leise); font-weight: 500; }

/* ---------- Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0 0 0 54px; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 41px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--akzent), color-mix(in srgb, var(--akzent) 10%, transparent)); transform-origin: top; animation: linie 1s var(--sanft) both; }
@keyframes linie { from { transform: scaleY(0); } }
.eintrag { position: relative; margin-bottom: 10px; }
.ez-zeit { position: absolute; left: -54px; top: 50%; transform: translateY(-50%); width: 34px; text-align: right; font-size: 12px; color: var(--leise); font-weight: 600; }
.ez-punkt { position: absolute; left: -17px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--bg); border: 3px solid var(--akzent); }
.ez-karte { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; text-align: left; transition: transform .35s var(--feder); }
.ez-karte:active { transform: scale(.97); }
.ez-bild { width: 54px; height: 54px; border-radius: 15px; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 28px; background: var(--hauch); }
.ez-text { flex: 1; min-width: 0; }
.ez-text b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ez-text small { color: var(--leise); font-size: 13px; }
.ez-kcal { text-align: right; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.ez-kcal small { display: block; font-size: 11px; color: var(--leise); font-weight: 600; letter-spacing: .04em; }
.neu-glanz .ez-karte { animation: neu-da 1.6s var(--sanft); }
@keyframes neu-da { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 70%, transparent), var(--schatten); transform: scale(.9); } 40% { transform: scale(1.02); } 100% { box-shadow: 0 0 0 18px transparent, var(--schatten); } }
.leer { text-align: center; padding: 34px 20px; color: var(--leise); }
.leer .teller { font-size: 64px; display: inline-block; animation: schweben 3.4s ease-in-out infinite; }
@keyframes schweben { 50% { transform: translateY(-10px) rotate(-6deg); } }

/* ---------- Dock mit Kamera-Knopf */
.dock { position: fixed; z-index: 20; left: 50%; bottom: calc(14px + var(--unten)); transform: translateX(-50%); width: min(94vw, 420px);
  display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: center; padding: 8px; border-radius: 30px; }
.dock > button:not(.fab) { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--leise); padding: 6px 0; transition: color .3s, transform .3s var(--feder); }
.dock > button:not(.fab):active { transform: scale(.88); }
.dock > button.aktiv { color: var(--akzent); }
.dock svg { width: 23px; height: 23px; }
.dock-pille { position: absolute; z-index: 0; top: 8px; height: calc(100% - 16px); border-radius: 22px; background: color-mix(in srgb, var(--akzent) 14%, transparent); transition: transform .55s var(--feder), width .55s var(--feder); pointer-events: none; }
.fab { position: relative; justify-self: center; width: 70px; height: 70px; margin-top: -34px; border-radius: 50%; color: #fff; display: grid; place-items: center;
  background: conic-gradient(from 200deg, #0b68ba, #4ca3f0, #8b7bff, #0b68ba); box-shadow: 0 14px 30px -8px rgba(11, 104, 186, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .4s var(--feder); }
.fab::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--akzent) 55%, transparent); animation: atmen 3s ease-in-out infinite; }
.fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; filter: blur(14px); opacity: .55; z-index: -1; }
.fab:active { transform: scale(.86) rotate(-8deg); }
.fab svg { width: 30px; height: 30px; }
@keyframes atmen { 0%, 100% { transform: scale(.94); opacity: .9; } 50% { transform: scale(1.1); opacity: .2; } }

/* ---------- Blatt (Bottom Sheet) */
.blatt-huelle { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.blatt-hinter { position: absolute; inset: 0; background: rgba(2, 6, 16, .45); opacity: 0; transition: opacity .45s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.blatt { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 600px; max-height: calc(94vh - var(--oben)); display: flex; flex-direction: column;
  border-radius: 30px 30px 0 0; background: var(--glas2); border: 1px solid var(--rand); border-bottom: 0; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  transform: translateY(105%); transition: transform .55s var(--blatt); }
.blatt-huelle:not(.offen) .blatt { visibility: hidden; transition: transform .55s var(--blatt), visibility 0s .55s; }
.blatt-huelle.offen { pointer-events: auto; }
.blatt-huelle.offen .blatt-hinter { opacity: 1; }
.blatt-huelle.offen .blatt { transform: translateY(var(--zug, 0px)); }
.blatt-huelle.ziehen .blatt { transition: none; }
.griff { flex: none; padding: 10px 0 6px; display: grid; place-items: center; touch-action: none; }
.griff::before { content: ""; width: 42px; height: 5px; border-radius: 9px; background: var(--spur); }
.blatt-inhalt { overflow-y: auto; padding: 0 18px calc(22px + var(--unten)); overscroll-behavior: contain; }

/* ---------- Editor */
.ed-foto { position: relative; height: 230px; border-radius: 24px; overflow: hidden; background: var(--hauch); display: grid; place-items: center; transition: height .7s var(--sanft); }
.ed-foto.klein { height: 150px; }
.ed-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-foto .gross-emoji { font-size: 90px; animation: plopp .7s var(--feder) both; }
.denkt img { animation: atmen-bild 4s ease-in-out infinite; }
@keyframes atmen-bild { 50% { transform: scale(1.06); } }
.analyse { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(5, 9, 18, .1), rgba(5, 9, 18, .55)); transition: opacity .6s; }
.fertig .analyse { opacity: 0; pointer-events: none; }
.welle { position: absolute; width: 90px; height: 90px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); animation: welle 2.4s var(--sanft) infinite; }
.welle:nth-child(2) { animation-delay: .8s; } .welle:nth-child(3) { animation-delay: 1.6s; }
@keyframes welle { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.orbit { position: absolute; width: 130px; height: 130px; animation: kreisen 3.2s linear infinite; }
.orbit:nth-of-type(2) { width: 86px; height: 86px; animation-duration: 2.1s; animation-direction: reverse; }
.orbit i { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--f); box-shadow: 0 0 12px var(--f);
  transform: rotate(var(--w)) translateX(var(--rad)); }
@keyframes kreisen { to { transform: rotate(360deg); } }
.analyse-kern { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 24px 6px rgba(140, 200, 255, .9); animation: atmen 1.6s ease-in-out infinite; }
.ed-status { text-align: center; margin: 16px 0 6px; height: 26px; overflow: hidden; font-weight: 700; }
.ed-status span { display: block; animation: text-rauf .5s var(--sanft); }
@keyframes text-rauf { from { transform: translateY(100%); opacity: 0; } }
.ed-sek { text-align: center; color: var(--leise); font-size: 13px; }
.ed-kopf { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; }
.ed-emoji { font-size: 40px; animation: plopp .8s var(--feder) both; }
@keyframes plopp { from { transform: scale(0) rotate(-40deg); } }
.ed-titel { flex: 1; min-width: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; border: 0; background: none; padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color .3s; }
.ed-titel:focus { outline: none; border-bottom-color: var(--akzent); }
.ed-beschr { color: var(--leise); margin: 0 0 12px; font-size: 14px; }
.sicher { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--leise); font-weight: 600; }
.sicher .leiste { flex: 1; margin: 0; height: 5px; }
.ed-gross { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 6px; }
.ed-gross b { font-size: 50px; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(120deg, var(--akzent), var(--akzent3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ed-gross span { color: var(--leise); font-weight: 700; }
.budget-balken { position: relative; height: 12px; border-radius: 9px; background: var(--spur); overflow: hidden; margin: 6px 0 4px; }
.budget-balken i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 9px; transition: width .9s var(--sanft), left .9s var(--sanft); }
.budget-balken .bb-schon { background: color-mix(in srgb, var(--akzent) 45%, transparent); }
.budget-balken .bb-neu { background: linear-gradient(90deg, var(--akzent), var(--akzent3)); box-shadow: 0 0 14px var(--akzent); animation: puls-neu 1.8s ease-in-out infinite; }
.budget-balken.ueber .bb-neu { background: linear-gradient(90deg, var(--warm2), var(--warm)); box-shadow: 0 0 14px var(--warm); }
@keyframes puls-neu { 50% { opacity: .7; } }
.bb-text { font-size: 12px; color: var(--leise); display: flex; justify-content: space-between; }
.naehr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.kachel { padding: 10px 12px; border-radius: 16px; background: var(--hauch); border: 1px solid var(--rand); animation: rein .6s var(--sanft) both; animation-delay: calc(var(--i) * 70ms); }
.kachel small { display: flex; align-items: center; font-size: 11px; color: var(--leise); font-weight: 700; letter-spacing: .03em; }
.kachel b { display: block; font-size: 20px; letter-spacing: -.02em; margin-top: 2px; }
.kachel b em { font-style: normal; font-size: 12px; color: var(--leise); margin-left: 2px; }
.reihe-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.chip { padding: 8px 14px; border-radius: 99px; font-size: 14px; font-weight: 700; background: var(--hauch); border: 1px solid var(--rand); transition: background .35s, color .35s, transform .35s var(--feder); }
.chip:active { transform: scale(.9); }
.chip.an { background: var(--akzent); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -6px var(--akzent); }
.etikett { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--leise); font-weight: 700; margin: 18px 2px 2px; }
.komp { padding: 12px 0; border-bottom: 1px solid var(--rand); animation: rein .5s var(--sanft) both; animation-delay: calc(var(--i) * 60ms + 200ms); transition: opacity .35s, transform .35s; }
.komp.weg { opacity: 0; transform: translateX(40px); }
.komp-kopf { display: flex; align-items: center; gap: 8px; }
.komp-name { flex: 1; font-weight: 700; }
.komp-kcal { font-weight: 700; color: var(--leise); font-size: 14px; }
.komp-inhalt { font-size: 12px; color: var(--leise); margin-top: 2px; line-height: 1.35; }
.komp-weg { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--leise); background: var(--hauch); }
.komp-weg svg { width: 14px; height: 14px; }
.komp-regler { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mini { width: 34px; height: 34px; border-radius: 12px; background: var(--hauch); border: 1px solid var(--rand); font-size: 18px; font-weight: 700; display: grid; place-items: center; transition: transform .25s var(--feder); }
.mini:active { transform: scale(.85); }
.komp-menge { display: flex; align-items: baseline; gap: 2px; font-weight: 700; min-width: 84px; justify-content: flex-end; }
.komp-menge input { width: 58px; text-align: right; border: 0; background: none; font-weight: 700; font-size: 16px; padding: 0; }
.komp-menge input:focus { outline: none; color: var(--akzent); }
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 34px; background: none; margin: 0; --p: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 9px; background: linear-gradient(90deg, var(--akzent) var(--p), var(--spur) var(--p)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 9px; background: linear-gradient(90deg, var(--akzent) var(--p), var(--spur) var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .3), 0 0 0 4px color-mix(in srgb, var(--akzent) 30%, transparent); transition: transform .25s var(--feder); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.25); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.hinweis { font-size: 13px; color: var(--leise); padding: 12px 14px; border-radius: 16px; background: var(--hauch); margin: 12px 0; }
.tipp-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; font-size: 14px; margin: 12px 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--akzent) 16%, transparent), color-mix(in srgb, var(--fett) 14%, transparent)); border: 1px solid var(--rand); }
.tipp-box .birne { animation: wackeln 2.8s ease-in-out infinite; display: inline-block; }
@keyframes wackeln { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
.feld { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.feld input, .feld textarea, .eingabe { flex: 1; min-width: 0; font-size: 16px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--rand); background: var(--hauch); transition: border-color .3s, box-shadow .3s; }
.feld input:focus, .feld textarea:focus, .eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 18%, transparent); }
textarea { resize: none; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 16px; font-weight: 700; background: var(--hauch); border: 1px solid var(--rand); transition: transform .3s var(--feder), opacity .3s; white-space: nowrap; }
.knopf:active { transform: scale(.94); }
.knopf svg { width: 18px; height: 18px; }
.knopf.warn { color: var(--warm); }
.haupt { position: relative; width: 100%; margin-top: 18px; padding: 17px; border-radius: 20px; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .01em;
  background: linear-gradient(120deg, #0b68ba, #2f8fe0 55%, #6a7bff); box-shadow: 0 16px 30px -12px rgba(11, 104, 186, .8); overflow: hidden;
  transition: transform .35s var(--feder), width .5s var(--sanft), border-radius .5s var(--sanft); }
.haupt:active { transform: scale(.96); }
.haupt[disabled] { opacity: .5; }
.haupt.ok { width: 62px; margin-left: calc(50% - 31px); border-radius: 50%; padding: 17px 0; }
.haupt .haken { width: 26px; height: 26px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: haken .5s .25s var(--sanft) forwards; }
@keyframes haken { to { stroke-dashoffset: 0; } }
.knopf-reihe { display: flex; gap: 8px; margin-top: 10px; }
.knopf-reihe .knopf { flex: 1; }
.uhr-feld { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uhr-feld input { font-size: 16px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--rand); background: var(--hauch); }
.vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.vorschlaege button { font-size: 13px; padding: 6px 12px; border-radius: 99px; background: var(--hauch); border: 1px solid var(--rand); }
.fehler-box { text-align: center; padding: 18px; }
.fehler-box .gross-emoji { font-size: 54px; display: block; animation: plopp .7s var(--feder) both; }

/* ---------- Verlauf */
.umschalter { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 16px; background: var(--hauch); border: 1px solid var(--rand); margin-bottom: 14px; }
.umschalter button { position: relative; z-index: 1; padding: 8px 0; font-weight: 700; font-size: 14px; color: var(--leise); transition: color .3s; }
.umschalter button.an { color: var(--text); }
.umschalter .us-pille { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 12px; background: var(--glas2); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .25); transition: transform .5s var(--feder); }
.karte { padding: 16px; margin-bottom: 12px; }
.diagramm { width: 100%; display: block; overflow: visible; }
.diagramm text { fill: var(--leise); font-size: 10px; font-weight: 600; }
.balken-saeule { transform-box: fill-box; transform-origin: bottom; animation: wachsen .9s var(--feder) both; animation-delay: calc(var(--i) * 18ms); }
@keyframes wachsen { from { transform: scaleY(0); } }
.linie-zeichnen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 1.8s .2s var(--sanft) forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.dia-punkt { animation: rein .5s var(--sanft) both; animation-delay: calc(var(--i) * 20ms + .4s); }
.kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.wert-kachel { padding: 14px; }
.wert-kachel small { display: block; font-size: 12px; color: var(--leise); font-weight: 700; }
.wert-kachel b { display: block; font-size: 26px; letter-spacing: -.03em; margin: 4px 0 2px; }
.wert-kachel span { font-size: 12px; color: var(--leise); }
.marke { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--akzent) 18%, transparent); color: var(--akzent); vertical-align: middle; }
.blase { position: absolute; padding: 6px 10px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; pointer-events: none; transform: translate(-50%, -110%); white-space: nowrap; animation: rein .3s var(--sanft); }
.prognose-karte { display: flex; gap: 14px; align-items: center; }
.prognose-karte .ziel-icon { font-size: 36px; animation: schweben 3s ease-in-out infinite; }

/* ---------- Ziele */
.riesig { font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(120deg, var(--akzent), var(--akzent3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.budget-karte { text-align: center; padding: 24px 16px; margin-bottom: 12px; }
.rechnung { font-size: 13px; color: var(--leise); margin-top: 12px; line-height: 1.7; }
.rechnung b { color: var(--text); }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stepper b { font-size: 26px; letter-spacing: -.02em; white-space: nowrap; }
.stepper .mini { width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }
.skala { display: flex; justify-content: space-between; font-size: 11px; color: var(--leise); font-weight: 600; margin-top: 2px; }
.schalter-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.form-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-raster label { font-size: 12px; color: var(--leise); font-weight: 700; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-raster input, .form-raster select { width: 100%; -webkit-appearance: none; appearance: none; font-size: 16px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--rand); background: var(--hauch); min-width: 0; }

/* ---------- Rezeptvorschläge */
.vs-knopf { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 16px; border-radius: 20px; text-align: left; border: 1.5px solid transparent;
  background: linear-gradient(var(--glas2), var(--glas2)) padding-box, linear-gradient(120deg, var(--akzent), var(--fett), var(--protein)) border-box;
  box-shadow: var(--schatten); transition: transform .35s var(--feder); }
.vs-knopf:active { transform: scale(.97); }
.vs-knopf > span:nth-child(2) { flex: 1; min-width: 0; }
.vs-knopf b { display: block; font-size: 16px; }
.vs-knopf small { color: var(--leise); font-size: 13px; }
.vs-emoji { font-size: 30px; display: inline-block; animation: wackeln 3.2s ease-in-out infinite; }
.vs-pfeil { font-size: 28px; color: var(--leise); line-height: 1; }
.umschalter.zwei { grid-template-columns: 1fr 1fr; }
.umschalter.zwei .us-pille { width: calc((100% - 8px) / 2); }
.rz-karte { width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px; margin-bottom: 10px; text-align: left; transition: transform .35s var(--feder); }
.rz-karte:active { transform: scale(.97); }
.rz-bild-klein { width: 78px; height: 78px; border-radius: 16px; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 38px; background: var(--hauch); }
.rz-text { flex: 1; min-width: 0; }
.rz-text b { display: block; font-size: 16px; line-height: 1.25; }
.rz-text small { display: block; color: var(--leise); font-size: 13px; margin: 2px 0 6px; }
.rz-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rz-chips span { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--hauch); border: 1px solid var(--rand); }
.rz-chips .p { color: var(--protein); }
.rz-chips .stark { background: color-mix(in srgb, var(--protein) 18%, transparent); color: var(--protein); border-color: transparent; }
.zurueck { padding: 8px 14px; margin-bottom: 10px; }
.ed-foto.rz-gross { height: 190px; }
.rz-titel { font-size: 23px; margin: 0; letter-spacing: -.02em; line-height: 1.2; text-transform: none; color: var(--text); font-weight: 800; }
.rz-kochen { margin-top: 6px; }
.rz-kochen span { font-weight: 600; color: var(--leise); }
.rz-kochen b { font-size: 20px; color: var(--text); }
.rz-portion { margin-top: 12px; }
.zutaten { list-style: none; padding: 0; margin: 4px 0 8px; }
.zutaten li { border-bottom: 1px solid var(--rand); }
.zutaten label { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 2px; cursor: pointer; }
.zutaten input { position: absolute; opacity: 0; pointer-events: none; }
.haekchen { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--spur); flex: none; display: grid; place-items: center; transition: background .3s, border-color .3s, transform .35s var(--feder); }
.zutaten input:checked + .haekchen { background: var(--akzent); border-color: var(--akzent); }
.haekchen::after { content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--feder); }
.zutaten input:checked + .haekchen::after { transform: rotate(45deg) scale(1); }
.zutaten .zt { transition: color .3s, opacity .3s; }
.zutaten input:not(:checked) ~ .zt { color: var(--leise); text-decoration: line-through; opacity: .7; }
.schritte { padding-left: 22px; margin: 6px 0; }
.schritte li { margin: 8px 0; font-size: 15px; }

/* ---------- Training */
.ohne-foto { width: 100%; margin-top: 8px; }
.knopf.umbruch { width: 100%; margin-bottom: 12px; white-space: normal; flex-direction: column; gap: 2px; }
.knopf.umbruch small { color: var(--leise); font-weight: 600; font-size: 12px; }
.woche-kopf { display: flex; justify-content: space-between; align-items: center; }
.woche-kopf h3 { margin: 0; }
.wochenpunkte { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 12px; }
.wt { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: rein .5s var(--sanft) both; animation-delay: calc(var(--i) * 50ms); }
.wt span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--hauch); border: 2px solid var(--rand); transition: transform .4s var(--feder); }
.wt.an span { background: color-mix(in srgb, var(--akzent) 22%, transparent); border-color: var(--akzent); box-shadow: 0 0 14px color-mix(in srgb, var(--akzent) 45%, transparent); }
.wt.heute span { border-style: dashed; border-color: var(--akzent); }
.wt small { font-size: 11px; color: var(--leise); font-weight: 700; }
.naechste { position: relative; text-align: center; padding: 22px 18px 18px; margin-bottom: 12px; border: 1.5px solid transparent;
  background: linear-gradient(var(--glas2), var(--glas2)) padding-box, linear-gradient(140deg, var(--protein), var(--fett), var(--akzent)) border-box; }
.n-emoji { font-size: 54px; line-height: 1; animation: schweben 3.2s ease-in-out infinite; }
.naechste small { color: var(--leise); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.naechste .n-titel { font-size: 28px; margin: 2px 0 6px; text-transform: none; letter-spacing: -.02em; color: var(--text); font-weight: 800; }
.n-liste { color: var(--leise); font-size: 13px; margin: 0 0 4px; }
.checkin { margin-bottom: 10px; }
.checkin p { margin: 6px 0; font-size: 14px; }
.checkin .lob { color: var(--gut); font-weight: 700; }
.fokus { display: flex; gap: 10px; padding: 12px; border-radius: 14px; margin-top: 10px; font-size: 14px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--protein) 16%, transparent), color-mix(in srgb, var(--kh) 12%, transparent)); }
.rekord { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 8px; text-align: left; }
.rekord .pokal { font-size: 26px; }
.rekord > span:nth-child(2) { flex: 1; }
.rekord b { display: block; } .rekord small { color: var(--leise); font-size: 13px; }
.t-kopf { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.ue-karte { padding: 14px; margin-bottom: 10px; animation: rein .5s var(--sanft) both; animation-delay: calc(var(--i) * 60ms); transition: opacity .4s, box-shadow .6s; }
.ue-karte.fertig { opacity: .72; }
.ue-kopf { display: flex; align-items: center; gap: 8px; }
.ue-name { flex: 1; text-align: left; font-weight: 800; font-size: 17px; }
.ue-kopf small { color: var(--leise); font-weight: 700; font-size: 12px; }
.ue-ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gut); color: #fff; font-size: 13px; font-weight: 900; animation: plopp .5s var(--feder); }
.ue-letzte { margin: 4px 0 0; font-size: 13px; color: var(--leise); }
.ue-ziel { margin: 4px 0 8px; font-size: 13px; font-weight: 700; color: var(--akzent); }
.ue-ziel.rauf { color: var(--gut); }
.ue-heute { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.satz-chip { padding: 5px 11px; border-radius: 99px; font-size: 13px; font-weight: 800; background: color-mix(in srgb, var(--akzent) 18%, transparent); color: var(--text); transition: transform .3s var(--feder), background .3s; }
.satz-chip.neu { animation: plopp .5s var(--feder); }
.satz-chip.weg { background: var(--warm); color: #fff; }
.ue-eingabe { display: flex; gap: 8px; align-items: center; }
.zahl-feld { flex: 1; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 14px; background: var(--hauch); border: 1px solid var(--rand); min-width: 0; }
.zahl-feld input { flex: 1; min-width: 0; width: 40px; text-align: center; border: 0; background: none; font-weight: 800; font-size: 17px; padding: 0; }
.zahl-feld input:focus { outline: none; color: var(--akzent); }
.zahl-feld span { font-size: 12px; color: var(--leise); font-weight: 700; margin-right: 2px; }
.zahl-feld .mini { width: 30px; height: 30px; border-radius: 10px; font-size: 16px; }
.satz-los { flex: none; width: 46px; height: 46px; border-radius: 14px; color: #fff; font-size: 20px; font-weight: 900; background: linear-gradient(135deg, var(--gut), #0e8f6a); box-shadow: 0 8px 18px -8px var(--gut); transition: transform .3s var(--feder); }
.satz-los:active { transform: scale(.85) rotate(-8deg); }
.rekord-glanz { animation: rekord 1.8s var(--sanft); }
@keyframes rekord { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kh) 80%, transparent), var(--schatten); } 100% { box-shadow: 0 0 0 22px transparent, var(--schatten); } }
.ue-verlauf:not(:empty) { margin-top: 10px; }
.pause { position: fixed; z-index: 45; right: 18px; bottom: calc(24px + var(--unten)); width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--glas2); border: 1px solid var(--rand); box-shadow: var(--schatten); transform: scale(0); transition: transform .5s var(--feder); }
.pause.da { transform: scale(1); }
.pause svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); }
.pause circle { fill: none; stroke: var(--akzent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset .25s linear; }
.pause span { font-weight: 800; font-size: 17px; margin-top: -8px; }
.pause small { position: absolute; bottom: 16px; font-size: 9px; font-weight: 800; color: var(--leise); text-transform: uppercase; letter-spacing: .08em; }
.pause.los { animation: glut 1s ease-in-out infinite; }
.pause.los circle { stroke: var(--gut); }

/* ---------- Anmeldung (App unter fit.flachnet.de) */
#anmelden { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: ansicht-rein .6s var(--sanft); }
.anm-karte { width: min(100%, 380px); padding: 28px 22px 22px; text-align: center; }
.anm-karte h1 { margin: 10px 0 6px; font-size: 34px; }
.anm-karte p { color: var(--leise); margin: 0 0 14px; }
.anm-karte input { text-align: center; letter-spacing: .25em; font-weight: 800; text-transform: uppercase; }
.anm-fehler { color: var(--warm) !important; min-height: 1.2em; font-weight: 700; }
.anm-ring { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.anm-ring i { position: absolute; inset: 0; border-radius: 50%; border: 9px solid transparent; border-top-color: var(--akzent); border-right-color: var(--akzent3); animation: kreisen 2.4s linear infinite; }
.anm-ring i:nth-child(2) { inset: 18px; border-width: 7px; border-top-color: var(--protein); border-left-color: var(--kh); animation-duration: 1.7s; animation-direction: reverse; }

/* ---------- Onboarding (erster Start) */
#start { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; padding: calc(16px + var(--oben)) 20px calc(18px + var(--unten));
  background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  animation: ansicht-rein .6s var(--sanft); transition: opacity .5s, transform .5s var(--sanft); }
#start.weg { opacity: 0; transform: scale(1.04); }
.start-punkte { display: flex; justify-content: center; gap: 6px; }
.start-punkte i { width: 8px; height: 8px; border-radius: 99px; background: var(--spur); transition: width .5s var(--feder), background .4s; }
.start-punkte i.an { width: 26px; background: var(--akzent); }
.start-punkte i.fertig { background: color-mix(in srgb, var(--akzent) 55%, transparent); }
.start-buehne { flex: 1; display: grid; align-items: center; width: 100%; max-width: 460px; margin: 0 auto; overflow-y: auto; }
.st-schritt { text-align: center; padding: 10px 8px; }
.von-rechts { animation: st-rechts .55s var(--sanft) both; } .von-links { animation: st-links .55s var(--sanft) both; }
@keyframes st-rechts { from { opacity: 0; transform: translateX(40px); filter: blur(6px); } }
@keyframes st-links { from { opacity: 0; transform: translateX(-40px); filter: blur(6px); } }
.st-gross-emoji { display: inline-block; font-size: 72px; line-height: 1; margin-bottom: 10px; animation: plopp .8s var(--feder) both; }
.st-gross-emoji.winken { transform-origin: 70% 80%; animation: plopp .8s var(--feder) both, winken 2.2s .8s ease-in-out infinite; }
@keyframes winken { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(18deg); } 20%, 40% { transform: rotate(-10deg); } }
.st-titel { font-size: 42px; margin: 6px 0 12px; background: linear-gradient(120deg, var(--akzent), var(--fett), var(--protein)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-frage { font-size: 26px; margin: 4px 0 18px; text-transform: none; letter-spacing: -.02em; color: var(--text); font-weight: 800; }
.st-text { font-size: 16px; margin: 8px 0; }
.st-text.leise { color: var(--leise); font-size: 14px; }
.st-zahl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 10px; }
.st-zahl b { font-size: 64px; font-weight: 800; letter-spacing: -.04em; }
.st-zahl span { font-size: 20px; color: var(--leise); font-weight: 700; margin-left: 4px; }
.mini.gross { width: 52px; height: 52px; border-radius: 16px; font-size: 26px; }
.st-datum { width: 100%; font-size: 20px; text-align: center; margin-bottom: 12px; }
.st-mitte { justify-content: center; }
.st-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-karte { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border-radius: 20px; background: var(--hauch); border: 2px solid var(--rand);
  transition: border-color .3s, background .3s, transform .35s var(--feder); }
.st-karte span { font-size: 34px; } .st-karte small { color: var(--leise); }
.st-karte.an { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); transform: scale(1.03); }
.st-handy-symbol img { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 18px 40px -12px rgba(76, 163, 240, .6); animation: plopp .8s var(--feder) both, schweben 3.4s 1s ease-in-out infinite; }
.st-link { margin-top: 18px; color: var(--akzent); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.start-fuss { display: flex; gap: 10px; width: 100%; max-width: 460px; margin: 0 auto; }
.start-fuss .haupt { flex: 1; margin-top: 0; }

/* ---------- Anleitung „App installieren“ mit animiertem Handy */
#anleitung { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: calc(12px + var(--oben)) 12px calc(12px + var(--unten));
  background: rgba(2, 6, 16, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: ansicht-rein .4s var(--sanft); transition: opacity .4s; }
#anleitung.weg { opacity: 0; }
.anl-karte { position: relative; width: min(100%, 480px); max-height: 100%; overflow-y: auto; padding: 20px 16px 16px; background: var(--glas2); }
.anl-zu { position: absolute; top: 14px; right: 14px; }
.anl-inhalt { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 6px; }
.anl-schritte { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.anl-schritte li { display: flex; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: background .4s, border-color .4s; }
.anl-schritte li span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--hauch); transition: background .4s, color .4s; }
.anl-schritte li p { margin: 0; font-size: 13px; line-height: 1.35; }
.anl-schritte li.aktiv { background: color-mix(in srgb, var(--akzent) 14%, transparent); border-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.anl-schritte li.aktiv span { background: var(--akzent); color: #fff; }
.handy { position: relative; flex: none; width: 150px; height: 270px; border-radius: 26px; overflow: hidden; background: var(--bg2);
  border: 3px solid color-mix(in srgb, var(--text) 25%, transparent); box-shadow: var(--schatten); }
.h-adresse { position: relative; height: 22px; margin: 14px 8px 0; border-radius: 11px; background: var(--hauch); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--leise); }
.h-punkte { position: absolute; right: 6px; font-style: normal; font-size: 13px; font-weight: 900; color: var(--text); display: none; }
[data-browser=chrome] .h-punkte { display: block; }
.h-seite span { display: block; height: 10px; margin: 10px 10px 0; border-radius: 5px; background: var(--hauch); }
.h-seite span:first-child { height: 46px; }
.h-leiste { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; justify-content: space-around; align-items: center; font-size: 12px; font-style: normal; color: var(--leise); border-top: 1px solid var(--rand); }
.h-leiste i { font-style: normal; } .h-menue { color: var(--text); font-weight: 900; }
[data-browser=chrome] .h-leiste { display: none; }
.h-menueblatt { position: absolute; left: 6px; right: 6px; bottom: 34px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; font-size: 9px;
  background: var(--glas2); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); border: 1px solid var(--rand); opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--feder); }
[data-browser=chrome] .h-menueblatt { left: auto; right: 6px; bottom: auto; top: 40px; width: 96px; transform: translateY(-10px); }
[data-zustand=eintrag] .h-menueblatt, [data-zustand=eintrag-oben] .h-menueblatt { opacity: 1; transform: none; }
.h-menueblatt span { padding: 5px 6px; border-radius: 6px; }
.h-ziel { background: color-mix(in srgb, var(--akzent) 25%, transparent); color: var(--text); font-weight: 800; }
.h-home { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at 30% 20%, #2a4f9a, #0a1328); }
.h-home img { width: 46px; height: 46px; border-radius: 12px; }
.h-home small { color: #fff; font-size: 10px; font-weight: 700; }
[data-zustand=home] .h-home { opacity: 1; }
[data-zustand=home] .h-home img { animation: plopp .7s var(--feder); }
.h-tipp { position: absolute; z-index: 3; left: 72px; top: 25px; width: 26px; height: 26px; margin: -13px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .35); border: 2px solid #fff; animation: tipp 1.3s ease-out infinite; transition: left .6s var(--sanft), top .6s var(--sanft); }
@keyframes tipp { 0% { box-shadow: 0 0 0 0 rgba(76, 163, 240, .85); } 100% { box-shadow: 0 0 0 16px rgba(76, 163, 240, 0); } }
[data-zustand=menue-unten] .h-tipp { left: 128px; top: 249px; }
[data-zustand=eintrag] .h-tipp { left: 72px; top: 197px; }
[data-zustand=menue-oben] .h-tipp { left: 131px; top: 25px; }
[data-zustand=eintrag-oben] .h-tipp { left: 93px; top: 76px; }
[data-zustand=home] .h-tipp { left: 72px; top: 118px; }

/* ---------- Toast und Funken */
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(110px + var(--unten)); transform: translate(-50%, 30px) scale(.9); opacity: 0; display: flex; gap: 14px; align-items: center;
  padding: 12px 16px 12px 18px; border-radius: 18px; background: var(--text); color: var(--bg); font-weight: 700; font-size: 14px; box-shadow: var(--schatten); transition: transform .5s var(--feder), opacity .35s; pointer-events: none; max-width: 92vw; }
.toast.da { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.toast button { color: var(--akzent3); font-weight: 800; }
@media (prefers-color-scheme: light) { .toast button { color: #8fd0ff; } }
#funken { position: fixed; inset: 0; z-index: 70; pointer-events: none; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  .aurora { display: none; }
}
@media (min-width: 700px) { main { padding-top: 28px; } }