/* ============================================================ Watthunt App — Designsystem „STILLE ENERGIE" (verankert 2026-06-10) MANIFEST: Schwarz als Raum · Energie als Licht · Entscheidungen als Fokus · Daten als Orientierung · Bewegung nur mit Bedeutung. REGELN für jeden neuen Screen (Referenz: docs/watthunt-visual-language.md): 1 „Glow folgt Bedeutung": max. EIN Primär-Glow pro Screen (--glow-primary). Alles andere ≤ --glow-soft. Daten leuchten nie — Entscheidungen leuchten. 2 „Luxus ist Reduktion": Klarheit schlägt Effekte, Orientierung schlägt Informationsmenge. 3 Ebenen: E0 Raum (.stage + Ambient „Atem") · E1 Fläche (.card, matt) · E2 Schwebend (.tabbar/.sheet, Glas) · E3 Licht (Ring-Fenster, Primär-CTA). 4 Motion: 140/220/320 ms (--t-micro/std/sheet) + Atmen 8–10 s (--t-breath). Vier Jobs: Herkunft, Erfolg, Richtung, Leben. Kein Dekor. 5 Material: matt / Glas / Leuchten — keine weiteren. Kein WebGL/Canvas/Lottie. 6 Screen-Test vor Merge: „Würde sich das in einem Produkt wohlfühlen, das Millionen Menschen täglich nutzen?" Wenn nein → verfeinern. ============================================================ */ /* ---------- Inter, self-hosted (variable, latin + latin-ext) ---------- Kein externer Request (Datenschutz-Linie der Site); latin deckt Deutsch ab, latin-ext lädt der Browser nur bei Bedarf (unicode-range). */ @font-face{ font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/inter-var-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/inter-var-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* E0 — der Raum */ --bg:#050607; --ambient-g:.07; /* Grün-Anteil des Raumlichts; .105 wenn Aktionsfenster läuft */ /* E1 — matte Flächen */ --surface-1:#0b0e10; --surface-2:#11161a; --surface-3:#171e23; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14); /* Tinte */ --ink:#f4f7f8; --ink-soft:#c2ccd2; --ink-mute:#86929d; /* Energie = Licht (nicht „Farbe") */ --green:#22e58f; --green-deep:#12b76a; --green-soft:rgba(34,229,143,.12); --green-line:rgba(34,229,143,.28); --positive:#22e58f; --warn:#ffd166; --danger:#ff6b6b; /* Akzent (personalisierbar — kuratierte, markentreue Auswahl) */ --acc1:#3ef2c8; --acc2:#b9ff6e; --acc-text:#c9ffe9; --acc-line:rgba(62,242,200,.28); --acc-soft:rgba(62,242,200,.10); /* Aurora-Nacht (Ring v4): günstig leuchtet, Mittel ruht, teuer ist gedimmt */ --aur-cheap-1:var(--acc1); --aur-cheap-2:var(--acc2); --aur-mid:rgba(118,134,200,.62); --aur-exp:rgba(232,134,158,.5); /* Typo (System-Stack, keine externen Requests; Zahlen tabular) */ --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --fs-hero:40px; --fs-display:32px; --fs-title:22px; --fs-heading:17px; --fs-body:15px; --fs-caption:12.5px; --fs-micro:11px; /* Spacing 4er-Basis */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; /* Radii (konsequent rund — Karte = 24) */ --r-sm:12px; --r-md:16px; --r-lg:20px; --r-card:24px; --r-xl:28px; --r-pill:999px; /* Motion — die vier Tempi + Feder */ --t-micro:140ms; --t-std:220ms; --t-sheet:320ms; --t-breath:9s; --ease:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.32,1.25,.5,1); /* Tiefe (E1/E2) — weich, tief, nie hart */ --elev-1:0 14px 36px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18); --elev-2:0 28px 70px rgba(0,0,0,.42),0 4px 14px rgba(0,0,0,.22); /* Glow-Budget („Glow folgt Bedeutung") */ --glow-primary:0 14px 40px rgba(34,229,143,.26),inset 0 1px 0 rgba(255,255,255,.4); --glow-soft:0 10px 26px rgba(34,229,143,.18),inset 0 1px 0 rgba(255,255,255,.3); --glow:var(--glow-primary); /* Legacy-Alias */ /* Layout */ --stage:430px; --tabbar-h:64px; } /* Kuratierte Akzente — Aurora bleibt die Familie, der Ton wird deiner */ html[data-accent="lime"]{--acc1:#a8f26e;--acc2:#5ee68a;--green:#8ee85f; --acc-text:#dfffc4;--acc-line:rgba(168,242,110,.32);--acc-soft:rgba(168,242,110,.10)} html[data-accent="violett"]{--acc1:#9a8cff;--acc2:#c9b8ff;--green:#a89aff; --acc-text:#ddd6ff;--acc-line:rgba(154,140,255,.35);--acc-soft:rgba(154,140,255,.12)} html[data-accent="amber"]{--acc1:#ffd166;--acc2:#ffe9a8;--green:#ffd166; --acc-text:#ffeec2;--acc-line:rgba(255,209,102,.35);--acc-soft:rgba(255,209,102,.10)} *{box-sizing:border-box;margin:0;padding:0} html{background:var(--bg)} body{ font-family:var(--font);color:var(--ink);background:var(--bg); min-height:100dvh;line-height:1.5;font-size:var(--fs-body); -webkit-font-smoothing:antialiased;overflow-x:hidden; } a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(34,229,143,.45)} [hidden]{display:none!important} /* ---------- E0 · Bühne + Ambient „Atem" ---------- Drei unmerklich atmende Lichtinseln. Läuft das Aktionsfenster, hebt sich der Raum (+ Grün) — der Raum weiß, dass jetzt ein guter Moment ist. */ .stage{position:relative;max-width:var(--stage);margin:0 auto;min-height:100dvh; display:flex;flex-direction:column;background:var(--bg)} .stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(92% 44% at 50% -8%,rgba(34,229,143,var(--ambient-g)),transparent 62%), radial-gradient(70% 38% at 90% 106%,rgba(44,38,28,.34),transparent 62%), radial-gradient(58% 34% at 6% 88%,rgba(18,26,30,.5),transparent 66%); animation:atem var(--t-breath) ease-in-out infinite; transition:opacity 1.8s var(--ease)} @keyframes atem{0%,100%{opacity:.88}50%{opacity:1}} .stage.window-active{--ambient-g:.105} .app-head,.views{position:relative;z-index:1} /* ---------- Galaxie-Sternfeld: zwei driftende Tiefen + Leucht-Sterne + Kometen ---------- */ .stars{position:fixed;inset:0;left:50%;transform:translateX(-50%);width:min(var(--stage),100%); pointer-events:none;z-index:0;overflow:hidden} .stars i{position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%} .stars i:nth-child(1){box-shadow:165px 154px 0 2px rgba(220,240,255,0.61),48px 374px 0 0px rgba(220,240,255,0.73),19px 88px 0 0px rgba(220,240,255,0.63),282px 434px 0 0px rgba(220,240,255,0.39),322px 642px 0 2px rgba(220,240,255,0.73),203px 50px 0 0px rgba(220,240,255,0.98),148px 429px 0 1px rgba(220,240,255,0.44),286px 835px 0 2px rgba(220,240,255,0.79),327px 192px 0 0px rgba(220,240,255,0.59),288px 61px 0 1px rgba(220,240,255,0.75),218px 795px 0 0px rgba(220,240,255,0.55),185px 306px 0 0px rgba(220,240,255,0.51),41px 588px 0 0px rgba(220,240,255,0.55),373px 459px 0 0px rgba(220,240,255,0.54),262px 428px 0 0px rgba(220,240,255,0.46),215px 40px 0 2px rgba(220,240,255,0.98),293px 808px 0 1px rgba(220,240,255,0.92),179px 608px 0 0px rgba(220,240,255,0.67),47px 276px 0 0px rgba(220,240,255,0.66),374px 718px 0 1px rgba(220,240,255,0.55),420px 456px 0 1px rgba(220,240,255,0.53),177px 23px 0 1px rgba(220,240,255,0.96),59px 505px 0 0px rgba(220,240,255,0.39),378px 253px 0 0px rgba(220,240,255,0.61),41px 170px 0 0px rgba(220,240,255,0.64),419px 440px 0 0px rgba(220,240,255,0.91),183px 699px 0 0px rgba(220,240,255,0.92),42px 180px 0 0px rgba(220,240,255,0.45),248px 851px 0 0px rgba(220,240,255,0.73),74px 429px 0 0px rgba(220,240,255,0.7),64px 707px 0 1px rgba(220,240,255,0.91),346px 757px 0 1px rgba(220,240,255,0.39),408px 572px 0 0px rgba(220,240,255,0.61),246px 649px 0 0px rgba(220,240,255,0.61),225px 166px 0 0px rgba(220,240,255,0.42),0px 580px 0 1px rgba(220,240,255,0.45),314px 26px 0 1px rgba(220,240,255,0.4),76px 649px 0 0px rgba(220,240,255,0.51),242px 125px 0 0px rgba(220,240,255,0.42),245px 495px 0 1px rgba(220,240,255,0.55),379px 271px 0 1px rgba(220,240,255,0.66),11px 210px 0 0px rgba(220,240,255,0.97),353px 556px 0 0px rgba(220,240,255,0.94),329px 884px 0 1px rgba(220,240,255,0.41),187px 171px 0 1px rgba(220,240,255,0.58),398px 514px 0 0px rgba(220,240,255,0.56),412px 245px 0 0px rgba(220,240,255,0.88),102px 530px 0 0px rgba(220,240,255,0.67),404px 286px 0 2px rgba(220,240,255,0.66),176px 457px 0 0px rgba(220,240,255,0.88),186px 82px 0 0px rgba(220,240,255,0.49),172px 209px 0 1px rgba(220,240,255,0.66),0px 490px 0 1px rgba(220,240,255,0.94),43px 854px 0 1px rgba(220,240,255,0.78),384px 204px 0 1px rgba(220,240,255,0.66),44px 820px 0 0px rgba(220,240,255,0.97),205px 761px 0 0px rgba(220,240,255,0.97),65px 28px 0 1px rgba(220,240,255,0.45),74px 626px 0 1px rgba(220,240,255,0.89),179px 159px 0 0px rgba(220,240,255,0.71); animation:twinkle 3.4s ease-in-out infinite,starDrift 22s ease-in-out infinite alternate} .stars i:nth-child(2){box-shadow:409px 743px 0 0px rgba(220,240,255,0.46),222px 892px 0 0px rgba(220,240,255,0.28),128px 217px 0 1px rgba(220,240,255,0.32),166px 265px 0 0px rgba(220,240,255,0.42),378px 362px 0 1px rgba(220,240,255,0.56),215px 846px 0 1px rgba(220,240,255,0.57),77px 536px 0 0px rgba(220,240,255,0.4),311px 4px 0 0px rgba(220,240,255,0.51),242px 633px 0 0px rgba(220,240,255,0.49),349px 530px 0 0px rgba(220,240,255,0.41),286px 58px 0 0px rgba(220,240,255,0.3),259px 463px 0 0px rgba(220,240,255,0.42),226px 333px 0 1px rgba(220,240,255,0.45),102px 709px 0 0px rgba(220,240,255,0.31),259px 253px 0 0px rgba(220,240,255,0.48),286px 207px 0 0px rgba(220,240,255,0.54),200px 452px 0 0px rgba(220,240,255,0.33),37px 217px 0 0px rgba(220,240,255,0.47),366px 658px 0 0px rgba(220,240,255,0.46),239px 224px 0 1px rgba(220,240,255,0.5),83px 683px 0 1px rgba(220,240,255,0.53),263px 413px 0 1px rgba(220,240,255,0.34),47px 739px 0 0px rgba(220,240,255,0.35),225px 720px 0 1px rgba(220,240,255,0.21),151px 524px 0 0px rgba(220,240,255,0.58),53px 86px 0 0px rgba(220,240,255,0.31),138px 773px 0 1px rgba(220,240,255,0.25),419px 264px 0 1px rgba(220,240,255,0.36),292px 506px 0 0px rgba(220,240,255,0.48),409px 704px 0 0px rgba(220,240,255,0.27),8px 649px 0 1px rgba(220,240,255,0.24),113px 68px 0 0px rgba(220,240,255,0.31),173px 566px 0 1px rgba(220,240,255,0.37),66px 44px 0 0px rgba(220,240,255,0.41); animation:twinkle 4.6s ease-in-out 1.6s infinite,starDrift 30s ease-in-out 4s infinite alternate-reverse} @keyframes twinkle{0%,100%{opacity:.55}50%{opacity:1}} @keyframes starDrift{from{transform:translate(0,0)}to{transform:translate(34px,22px)}} /* Leucht-Sterne: wenige, aber mit echtem Glow-Schweif beim Driften */ .gstar{position:absolute;left:var(--gx);top:var(--gy);width:var(--gs,4px);height:var(--gs,4px); border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle,#fff 0%,rgba(170,225,255,.85) 35%,transparent 70%); box-shadow:0 0 8px 2px rgba(170,225,255,.7),0 0 22px 6px rgba(120,200,255,.3); animation:gdrift var(--gd,16s) ease-in-out var(--gdel,0s) infinite alternate, twinkle calc(var(--gd,16s) * .22) ease-in-out infinite} @keyframes gdrift{from{transform:translate(0,0)}to{transform:translate(var(--gdx,90px),var(--gdy,60px))}} /* Kometen: seltener Lichtstreif mit Schweif */ .comet{position:absolute;left:-12%;top:var(--cy,18%);width:120px;height:1.6px;pointer-events:none;z-index:0; background:linear-gradient(90deg,transparent,rgba(190,235,255,.05) 30%,rgba(220,245,255,.85)); border-radius:2px;filter:drop-shadow(0 0 6px rgba(190,235,255,.8)); transform:rotate(9deg);opacity:0; animation:cometFly var(--cd,13s) ease-in var(--cdel,3s) infinite} @keyframes cometFly{0%,82%{opacity:0;transform:translate(0,0) rotate(9deg)} 84%{opacity:.9} 96%{opacity:0;transform:translate(120%,90px) rotate(9deg)} 100%{opacity:0;transform:translate(120%,90px) rotate(9deg)}} @media(prefers-reduced-motion:reduce){.gstar,.comet{display:none}.stars i{animation:none}} /* ---------- Aurora-Mesh: große, weiche Lichtfelder, treiben langsam ---------- */ .aurora{position:fixed;inset:-10%;left:50%;transform:translateX(-50%);width:min(calc(var(--stage) * 1.3),120%); pointer-events:none;z-index:0;filter:blur(46px);opacity:.85} .aurora::before,.aurora::after{content:"";position:absolute;inset:0} .aurora::before{background: radial-gradient(38% 30% at 26% 24%,rgba(62,242,200,.20),transparent 70%), radial-gradient(34% 26% at 76% 40%,rgba(101,120,210,.22),transparent 70%); animation:auroraDrift 26s ease-in-out infinite alternate} .aurora::after{background: radial-gradient(30% 24% at 60% 14%,rgba(150,110,220,.13),transparent 70%), radial-gradient(36% 26% at 38% 64%,rgba(62,242,200,.10),transparent 70%); animation:auroraDrift 34s ease-in-out 4s infinite alternate-reverse} @keyframes auroraDrift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,3%,0) scale(1.08)}} @media(prefers-reduced-motion:reduce){.aurora::before,.aurora::after{animation:none}} /* ---------- Windräder am Horizont (sichtbare Kulisse, ruhig drehend) ---------- */ .horizon{position:fixed;left:50%;transform:translateX(-50%);width:min(var(--stage),100%); bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) - 6px); pointer-events:none;z-index:0;opacity:.9} .horizon::before{content:"";position:absolute;left:6%;right:6%;bottom:34px;height:1.5px; background:linear-gradient(90deg,transparent,rgba(62,242,200,.5),rgba(62,242,200,.4),transparent); filter:blur(.5px)} .horizon svg{display:block;width:100%} .horizon .rotor{transform-origin:var(--hx) var(--hy);animation:spin var(--spd,16s) linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.horizon .rotor{animation:none}.stars i{animation:none}} /* ---------- App-Header ---------- */ .app-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3); padding:calc(env(safe-area-inset-top,0px) + var(--s4)) var(--s5) var(--s3)} .app-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;letter-spacing:0} .app-logo .mark{width:28px;height:28px;border-radius:9px;display:grid;place-items:center; background:linear-gradient(135deg,var(--green),#68f7c0);box-shadow:0 10px 26px rgba(34,229,143,.18)} .app-logo svg{width:16px;height:16px} .phase-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);font-weight:750; color:var(--warn);border:1px solid rgba(255,209,102,.3);background:rgba(255,209,102,.08); border-radius:var(--r-pill);padding:5px 10px;letter-spacing:.04em} /* ---------- Views ---------- */ .views{flex:1;position:relative;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + var(--s5))} .view{padding:var(--s3) var(--s5) var(--s6);animation:viewIn .32s var(--ease-spring)} @keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .view h1{font-size:var(--fs-display);font-weight:820;line-height:1.06;letter-spacing:-.01em;margin:var(--s2) 0 var(--s2)} .view .sub{color:var(--ink-mute);font-size:var(--fs-body);max-width:34ch} /* ---------- Karten & Listen ---------- */ .card{background:linear-gradient(180deg,rgba(20,26,32,.86),rgba(11,14,16,.92)); border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--elev-1); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:var(--s5)} .card+.card{margin-top:var(--s4)} .card h2{font-size:var(--fs-heading);font-weight:780;margin-bottom:var(--s1)} .card .hint{color:var(--ink-mute);font-size:var(--fs-caption);line-height:1.5} .row-list{display:grid} .row{display:flex;align-items:center;gap:var(--s3);min-height:52px;padding:var(--s2) var(--s1); border-bottom:1px solid var(--line);color:var(--ink-soft);font-weight:650} .row:last-child{border-bottom:0} .row .ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none; background:var(--surface-3);border:1px solid var(--line);font-size:15px;font-style:normal} .row .grow{flex:1;min-width:0} .row small{display:block;color:var(--ink-mute);font-weight:550;font-size:var(--fs-caption)} .row .chev{color:var(--ink-mute);opacity:.7} .row.soon{opacity:.55} .tag{display:inline-flex;align-items:center;font-size:var(--fs-micro);font-weight:800;letter-spacing:.05em; color:var(--ink-mute);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 8px} /* ---------- Preis-Chart-Hero: sofort lesbar, jede Stunde antippbar ---------- Hoehe = Preis. Guenstig leuchtet Aqua→Lime, teuer bleibt dunkles Slate. Das beste Fenster gluehnt, "Jetzt" ist markiert. Balken sind Buttons. */ .hero-card{position:relative;margin-top:var(--s5);padding:var(--s5); background:linear-gradient(180deg,rgba(20,26,32,.86),rgba(11,14,16,.92)); border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--elev-1); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .hero-head{display:grid;gap:3px;margin-bottom:var(--s4)} .hero-head .label{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800; text-transform:uppercase;letter-spacing:.14em} .hero-head .big{font-size:clamp(34px,9vw,40px);font-weight:850;letter-spacing:-.02em;line-height:1.05; background:linear-gradient(180deg,#fff 30%,#bfe9d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-head .adv{color:var(--green);font-weight:780;font-size:15px} .chart{display:flex;align-items:flex-end;gap:3px;height:148px;padding-top:18px} .chart .cb{position:relative;flex:1;min-width:0;border:0;padding:0;cursor:pointer; height:calc(var(--h,50) * 1%);min-height:10px;border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#3a4862,#262f44); transition:height .6s var(--ease-spring),filter var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)} .chart .cb:active{transform:scaleY(.96);transform-origin:bottom} .chart .cb.cheap{background:linear-gradient(180deg,var(--acc1),var(--acc2));filter:saturate(.92) brightness(.92); box-shadow:0 0 12px rgba(62,242,200,.25)} .chart .cb.win{background:linear-gradient(180deg,var(--acc1),var(--acc2)); box-shadow:0 0 18px rgba(62,242,200,.55),0 0 4px rgba(190,255,228,.8);z-index:1} .chart .cb.past{opacity:.28} .chart .cb.sel{outline:2px solid #fff;outline-offset:2px} .chart .cb.now::after{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%); width:6px;height:6px;border-radius:50%;background:#fff; box-shadow:0 0 8px rgba(255,255,255,.9),0 0 16px rgba(62,242,200,.6)} .chart.revealing .cb{height:4px} .chart-axis{display:flex;justify-content:space-between;margin-top:8px;padding:0 1px; color:var(--ink-mute);font-size:var(--fs-micro);font-weight:700;font-variant-numeric:tabular-nums} /* Ziel-Fortschritt in der Kachel */ .tile .bar-track{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:7px} .tile .bar-fill{height:100%;width:0;border-radius:inherit; background:linear-gradient(90deg,#46f6c4,#b9ff6e);transition:width 1s var(--ease-spring)} /* ---------- Partikel: ganzflaechig, frei driftend, funkelnd ---------- */ .fx{position:fixed;inset:0;left:50%;transform:translateX(-50%);width:min(var(--stage),100%); pointer-events:none;z-index:0;overflow:hidden} .fx i{position:absolute;border-radius:50%;opacity:0; width:var(--sz,5px);height:var(--sz,5px);left:var(--px,50%);top:var(--py,50%); background:radial-gradient(circle,var(--c1,#c8ffe9) 0%,var(--c2,rgba(62,242,200,.5)) 40%,transparent 72%); box-shadow:0 0 calc(var(--sz,5px) * 2) var(--c2,rgba(62,242,200,.5)); animation:floatXY var(--pd,12s) ease-in-out var(--pdel,0s) infinite alternate, glimmer calc(var(--pd,12s) * .5) ease-in-out var(--pdel,0s) infinite} @keyframes floatXY{from{transform:translate(0,0)}to{transform:translate(var(--dx,40px),var(--dy,-60px))}} @keyframes glimmer{0%,100%{opacity:.12}50%{opacity:var(--po,.8)}} @media(prefers-reduced-motion:reduce){.fx{display:none}.ring.enter{animation:none}} .pulse-once{animation:pulseOnce 700ms var(--ease)} @keyframes pulseOnce{0%{transform:scale(1)}35%{transform:scale(1.035)}100%{transform:scale(1)}} /* ---------- „Jetzt sparen"-Aussage (groß, ehrlich beziffert) ---------- */ .save-now{display:grid;justify-items:center;gap:2px;margin-top:6px;text-align:center} .save-now .amount{font-size:clamp(24px,7vw,30px);font-weight:850;letter-spacing:-.02em; font-variant-numeric:tabular-nums;color:var(--acc1);text-shadow:0 0 22px rgba(62,242,200,.3)} .save-now .ctx{color:var(--ink-mute);font-size:var(--fs-caption);font-weight:650} /* ---------- Beste-Stunden-Chips (Top 3, antippbar) ---------- */ .best-hours{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap;margin-top:14px} .bh{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px; border-radius:var(--r-pill);border:1px solid var(--acc-line); background:linear-gradient(180deg,var(--acc-soft),transparent); color:var(--acc-text);font-size:13px;font-weight:750;font-variant-numeric:tabular-nums; transition:transform var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease)} .bh:active{transform:scale(.95)} .bh b{font-weight:850} .bh .ct{color:rgba(201,255,233,.75);font-weight:650} /* ---------- Stunden-Auswahl (ehrliche Herleitung) ---------- */ .sel-info{min-height:20px;color:var(--ink-soft);font-size:var(--fs-caption);font-weight:650; text-align:center;font-variant-numeric:tabular-nums;transition:opacity var(--t-std) var(--ease)} .sel-info b{color:var(--ink);font-weight:780} .sel-info .pos{color:#9af5cd} .sel-info .neg{color:#9fb0e8} /* ---------- Daten-Kacheln ---------- */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .tile{background:linear-gradient(180deg,var(--surface-2),var(--surface-1)); border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--elev-1); padding:var(--s3) var(--s3);display:grid;gap:3px;min-height:74px;align-content:center} .tile .v{font-size:17px;font-weight:850;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .tile .v.green{color:var(--acc-text)} .tile .l{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:700;line-height:1.3} /* ---------- Status-Pille / Ampel ---------- */ .status-pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill); padding:9px 15px;font-size:13px;font-weight:750;border:1px solid var(--line); background:var(--surface-2);color:var(--ink-soft)} .status-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-mute)} .status-pill.good{border-color:var(--green-line);background:var(--green-soft);color:#d9ffee} .status-pill.good .dot{background:var(--green);box-shadow:0 0 12px rgba(34,229,143,.7)} .status-pill.mid .dot{background:var(--warn)} .status-pill.bad .dot{background:var(--danger)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px; border-radius:var(--r-pill);padding:0 var(--s6);font-weight:800;font-size:var(--fs-body); transition:transform var(--t-micro) var(--ease),box-shadow var(--t-std) ease,background var(--t-std) ease} .btn:active{transform:scale(.98)} .btn-primary{background:linear-gradient(135deg,var(--acc1),var(--acc2));color:#06130c;box-shadow:var(--glow-primary)} .btn-primary:hover{transform:translateY(-1px)} .btn-ghost{border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink)} /* ---------- Skeleton / Empty / Error ---------- */ .skel{position:relative;overflow:hidden;background:var(--surface-3);border-radius:10px;min-height:14px} .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); animation:shimmer 1.4s infinite} @keyframes shimmer{to{transform:translateX(100%)}} .empty{display:grid;gap:var(--s2);justify-items:start;color:var(--ink-mute);font-size:var(--fs-caption); border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:var(--s4)} .error-note{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(255,209,102,.28); background:rgba(255,209,102,.07);color:#ffe9b0;border-radius:var(--r-md); padding:var(--s3) var(--s4);font-size:var(--fs-caption);line-height:1.5} /* ---------- Tab-Bar ---------- */ .tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:50; width:min(var(--stage),100%);height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:stretch; background:rgba(7,9,11,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-top:1px solid var(--line)} .tab{display:grid;justify-items:center;align-content:center;gap:3px;color:var(--ink-mute); font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em; transition:color var(--t-micro) var(--ease)} .tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .tab[aria-current="page"]{color:var(--green)} .tab:active{transform:scale(.95)} .tab-quick{position:relative;display:grid;place-items:center} .quick-btn{width:54px;height:54px;margin-top:-22px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,var(--acc1),var(--acc2));color:#06130c; /* E3, aber Sekundaer-Glow: der Primaer-Glow des Heute-Screens ist das Ring-Fenster */ box-shadow:0 10px 26px rgba(34,229,143,.22),0 0 0 6px rgba(5,6,7,.9),inset 0 1px 0 rgba(255,255,255,.45); transition:transform var(--t-micro) var(--ease),box-shadow var(--t-std) ease} .quick-btn:active{transform:scale(.94)} .quick-btn svg{width:24px;height:24px;fill:currentColor} /* ---------- Bottom-Sheet ---------- */ .sheet-backdrop{position:fixed;inset:0;z-index:60;background:rgba(2,3,4,.6); opacity:0;pointer-events:none;transition:opacity var(--t-sheet) var(--ease)} .sheet{position:fixed;left:50%;transform:translate(-50%,105%);bottom:0;z-index:61; width:min(var(--stage),100%);max-height:78dvh;overflow:auto; background:var(--surface-2);border:1px solid var(--line-strong);border-bottom:0; border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--elev-2); padding:var(--s3) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom,0px)); transition:transform var(--t-sheet) var(--ease)} .sheet.open{transform:translate(-50%,0)} .sheet-backdrop.open{opacity:1;pointer-events:auto} .sheet .grab{width:38px;height:4px;border-radius:4px;background:var(--line-strong);margin:2px auto var(--s4)} .sheet h2{font-size:var(--fs-title);font-weight:820;margin-bottom:var(--s1)} /* ---------- Ring: Datenfärbung (Phase 1) ---------- */ /* Signature: Jetzt-Punkt, Uhr-Anker, sequenzieller Aufbau (Wow-Moment) */ .ring .now-dot{fill:#eafff4;filter:drop-shadow(0 0 7px rgba(34,229,143,.9))} .ring .now-dot-halo{fill:none;stroke:rgba(34,229,143,.5);stroke-width:1.5; transform-origin:center;animation:haloPulse 2.6s var(--ease) infinite} @keyframes haloPulse{0%,100%{opacity:.55}50%{opacity:.15}} .ring .clock-anchor{fill:rgba(255,255,255,.22);font-size:8px;font-weight:700; font-family:var(--font);text-anchor:middle;dominant-baseline:middle; font-variant-numeric:tabular-nums} /* Dein Aktionsfenster: das Entscheidungs-Element des Rings */ .ring .win-label{fill:#d9ffe9;font-size:9.5px;font-weight:800;font-family:var(--font); text-anchor:middle;dominant-baseline:middle;font-variant-numeric:tabular-nums; filter:drop-shadow(0 0 6px rgba(34,229,143,.5))} .ring-center{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;gap:4px} .ring-center .label{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800; text-transform:uppercase;letter-spacing:.14em} .ring-center .value{font-size:clamp(36px,9.6vw,42px);line-height:1.02;font-weight:850;letter-spacing:-.02em; background:linear-gradient(180deg,#ffffff 30%,#bfe9d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .ring-center .value.live{color:var(--ink)} .ring-center .unit.advantage{color:var(--green);font-weight:780;font-size:15px} .reveal-late{opacity:0;transform:translateY(10px); transition:opacity .5s var(--ease),transform .5s var(--ease)} .reveal-late.in{opacity:1;transform:none} /* ---------- Plan: Synthese vor der Liste ---------- */ .plan-summary{color:var(--ink-soft);font-size:var(--fs-body);line-height:1.55;margin:4px 0 10px} .plan-summary strong{color:var(--green);font-weight:780} .ring-legend{display:flex;justify-content:center;gap:18px;margin-top:16px; color:var(--ink-mute);font-size:var(--fs-micro);font-weight:700} .ring-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;font-style:normal} .ring-legend .lg i{background:linear-gradient(135deg,#3ef2c8,#b9ff6e)} .ring-legend .le i{background:rgba(96,116,188,.45)} .ring-legend .ln i{background:rgba(99,112,166,.75)} /* ---------- Empfehlungskarte (Phase 1) ---------- */ .reco{border-color:var(--acc-line);background: radial-gradient(120% 90% at 90% 0%,rgba(34,229,143,.10),transparent 55%), linear-gradient(180deg,var(--surface-2),var(--surface-1))} .reco .reco-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--acc1); font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px} .reco .reco-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 12px rgba(34,229,143,.7)} .reco .reco-title{font-size:20px;font-weight:820;line-height:1.28;letter-spacing:-.01em;margin-bottom:7px} .reco .reco-body{color:var(--ink-soft);font-size:var(--fs-body);line-height:1.55} .reco .reco-meta{margin-top:12px;padding-top:10px;border-top:1px solid var(--line); color:var(--ink-mute);font-size:var(--fs-micro);font-weight:650} /* ---------- Plan-Liste (Phase 1) ---------- */ .hours{display:grid;gap:5px;margin-top:10px} .day-sep{display:flex;align-items:center;gap:10px;margin:10px 2px 4px; color:var(--ink-mute);font-size:var(--fs-micro);font-weight:750; letter-spacing:.14em;text-transform:uppercase} .day-sep::before,.day-sep::after{content:"";flex:1;height:1px;background:var(--line)} .hour{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:var(--s3); min-height:48px;padding:6px 12px;border-radius:14px; background:rgba(255,255,255,.025);transition:background var(--t-micro) var(--ease)} .hour time{color:var(--ink-soft);font-weight:750;font-size:var(--fs-caption);font-variant-numeric:tabular-nums} .hour .bar{position:relative;height:9px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden} .hour .bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,#3a4862,#54648a)} .hour.cheap .bar i{background:linear-gradient(90deg,#1fbe85,#6ef7c2);box-shadow:0 0 8px rgba(62,242,200,.35)} .hour.exp .bar i{background:linear-gradient(90deg,#262f44,#3a4862)} .hour .price{font-weight:800;font-size:var(--fs-caption);font-variant-numeric:tabular-nums;color:var(--ink-soft)} .hour.cheap .price{color:#a9f5d2} .hour.win{background:linear-gradient(90deg,rgba(62,242,200,.10),rgba(62,242,200,.03)); box-shadow:inset 0 0 0 1px rgba(62,242,200,.22)} .hour.now{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .hour.now time{color:#fff} .hour.now time::after{content:" · jetzt";color:var(--ink-mute);font-weight:600} /* ---------- Onboarding (Phase 1) ---------- */ .onb{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;background: radial-gradient(circle at 50% -10%,rgba(34,229,143,.10),transparent 40%),var(--bg); opacity:0;pointer-events:none;transition:opacity var(--t-sheet) var(--ease)} .onb.open{opacity:1;pointer-events:auto} .onb-inner{width:min(var(--stage),100%);display:flex;flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + var(--s6)) var(--s5) calc(env(safe-area-inset-bottom,0px) + var(--s6))} .onb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s6)} .onb-dots{display:flex;gap:7px} .onb-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);transition:all var(--t-std) var(--ease)} .onb-dots i.on{background:var(--green);box-shadow:0 0 10px rgba(34,229,143,.6)} .onb-skip{color:var(--ink-mute);font-size:var(--fs-caption);font-weight:700;padding:8px} .onb-step{flex:1;display:flex;flex-direction:column;animation:viewIn var(--t-std) var(--ease)} .onb-step h1{font-size:28px;font-weight:820;line-height:1.1;letter-spacing:-.01em;margin-bottom:8px} .onb-step .sub{color:var(--ink-mute);margin-bottom:var(--s6);max-width:32ch} .pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .pick{position:relative;border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-2);padding:var(--s4);display:grid;gap:6px;min-height:92px; text-align:left;transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)} .pick:active{transform:scale(.97)} .pick .pi{font-size:22px;font-style:normal;line-height:1} .pick b{font-size:var(--fs-body);font-weight:760} .pick small{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:600;line-height:1.35} .pick[aria-pressed="true"]{border-color:var(--green-line);background:linear-gradient(180deg,rgba(34,229,143,.14),rgba(34,229,143,.05))} .pick[aria-pressed="true"]::after{content:"✓";position:absolute;top:10px;right:12px;width:20px;height:20px; display:grid;place-items:center;border-radius:50%;background:var(--green);color:#04160c; font-size:12px;font-weight:900} .pick.wide{grid-column:1/-1;min-height:72px} .onb-foot{display:grid;gap:var(--s3);margin-top:var(--s6)} /* ---------- Konto / Auth (Phase 1) ---------- Vollbild-Flow im Onboarding-Muster. Fehlerbereich hat reservierte Höhe (kein Layout-Sprung); Zustände: idle / laden / fehler / erfolg. ---------- */ .auth{position:fixed;inset:0;z-index:85;display:flex;justify-content:center;background: radial-gradient(circle at 50% -10%,rgba(34,229,143,.10),transparent 40%),var(--bg); opacity:0;pointer-events:none;transition:opacity var(--t-sheet) var(--ease)} .auth.open{opacity:1;pointer-events:auto} .auth-inner{width:min(var(--stage),100%);display:flex;flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + var(--s6)) var(--s5) calc(env(safe-area-inset-bottom,0px) + var(--s6))} .auth-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s6)} .auth-close{color:var(--ink-mute);font-size:var(--fs-caption);font-weight:700;padding:8px} .auth h1{font-size:28px;font-weight:820;line-height:1.1;letter-spacing:-.01em;margin-bottom:6px} .auth .sub{color:var(--ink-mute);margin-bottom:var(--s5);max-width:32ch} .mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:var(--s5); border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-1)} .mode-toggle button{min-height:42px;border-radius:var(--r-pill);font-weight:750;font-size:var(--fs-body); color:var(--ink-mute);transition:background var(--t-micro) var(--ease),color var(--t-micro) var(--ease)} .mode-toggle button[aria-pressed="true"]{background:var(--surface-3);color:var(--ink)} .field{display:grid;gap:7px;margin-bottom:var(--s4)} .field label{font-size:var(--fs-caption);font-weight:750;color:var(--ink-soft)} .field input{width:100%;min-height:52px;border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-2);color:var(--ink);padding:0 var(--s4);font:inherit;font-size:16px; transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease)} .field input:focus{outline:none;border-color:rgba(34,229,143,.5);background:var(--surface-3)} .field input[aria-invalid="true"]{border-color:rgba(255,107,107,.55)} .form-err{min-height:42px;display:flex;align-items:center;gap:9px;color:#ffc9c2; font-size:var(--fs-caption);line-height:1.45;padding:0 2px; opacity:0;transition:opacity var(--t-std) var(--ease)} .form-err.show{opacity:1} .form-err::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--danger)} .form-err:not(.show)::before{opacity:0} .auth-submit{margin-top:var(--s1)} .auth-submit[disabled]{opacity:.65;pointer-events:none} .auth-note{margin-top:var(--s4);color:var(--ink-mute);font-size:var(--fs-caption);line-height:1.5} /* Konto-Status im Profil */ .row .acct-dot{width:8px;height:8px;border-radius:50%;background:var(--green); box-shadow:0 0 10px rgba(34,229,143,.6);flex:none} /* ---------- Spar-Konto (Phase 2 · P2): ehrliche Buchungen ---------- */ .reco-act{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)} .reco-act .btn{min-height:42px;padding:0 var(--s4);font-size:var(--fs-caption);font-weight:750} .reco-act .note{color:var(--ink-mute);font-size:var(--fs-micro);line-height:1.4} .reco-done{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s3); color:#bdf7da;font-size:var(--fs-caption);font-weight:750} .reco-done::before{content:"✓";display:grid;place-items:center;width:20px;height:20px; border-radius:50%;background:var(--green);color:#04160c;font-size:12px;font-weight:900} .sv-today{font-size:26px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:2px 0 4px} .sv-total{font-size:38px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.5px} .sv-head{display:grid;gap:2px;margin-bottom:var(--s4)} .sv-head .label{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.1em} .sv-head .sub{color:var(--ink-mute);font-size:var(--fs-caption)} .sv-list{display:grid;max-height:38dvh;overflow:auto;margin:0 calc(-1 * var(--s2))} .sv-item{border-bottom:1px solid var(--line)} .sv-item:last-child{border-bottom:0} .sv-item summary{display:flex;align-items:center;gap:var(--s3);min-height:50px; padding:var(--s2);cursor:pointer;list-style:none} .sv-item summary::-webkit-details-marker{display:none} .sv-item .grow{flex:1;min-width:0} .sv-item .t{font-weight:700;font-size:var(--fs-body)} .sv-item .d{color:var(--ink-mute);font-size:var(--fs-micro)} .sv-item .eur{font-weight:800;font-variant-numeric:tabular-nums;color:#bdf7da} .sv-deriv{padding:0 var(--s2) var(--s3) calc(var(--s2) + 2px);color:var(--ink-mute); font-size:var(--fs-caption);line-height:1.6} .sv-deriv b{color:var(--ink-soft);font-weight:700} /* ---------- Mitteilungen / Push-Opt-in (Phase 2, C.9: kein Dark Pattern) ---------- */ .push-state{display:inline-flex;align-items:center;gap:8px;margin:var(--s2) 0 var(--s4)} .push-actions{display:grid;gap:var(--s2)} .push-actions .btn{width:100%} /* ---------- Teilen (Phase 2 · P5-Vorstufe): ehrlich, ohne Druck ---------- */ .share-row{display:grid;gap:8px;margin-top:12px} .share-feedback{color:var(--ink-mute);font-size:var(--fs-micro);min-height:14px;text-align:center} .share-feedback.ok{color:#bdf7da} .invite-link{border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface-1); padding:var(--s3) var(--s4);font-size:var(--fs-caption);color:var(--ink-soft); font-variant-numeric:tabular-nums;word-break:break-all;user-select:all} #shareCanvas{position:absolute;left:-9999px} /* ---------- Geräte: Premium-Kacheln (ehrlich „bald", kein Fake) ---------- */ .dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} .dev{display:grid;gap:8px;padding:var(--s4);border-radius:var(--r-md); background:linear-gradient(180deg,rgba(20,26,32,.86),rgba(11,14,16,.92)); border:1px solid var(--line);box-shadow:var(--elev-1)} .dev .di{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:20px; background:radial-gradient(circle at 30% 25%,rgba(62,242,200,.22),rgba(62,242,200,.05)); border:1px solid rgba(62,242,200,.22);box-shadow:0 0 14px rgba(62,242,200,.12)} .dev b{font-size:var(--fs-body);font-weight:780} .dev small{color:var(--ink-mute);font-size:var(--fs-micro);line-height:1.4} .dev .tag{justify-self:start} .veto-card{position:relative;padding:var(--s5);border-radius:var(--r-card); border:1px solid rgba(62,242,200,.2); background:radial-gradient(120% 100% at 85% 0%,rgba(62,242,200,.10),transparent 55%), linear-gradient(180deg,rgba(20,26,32,.86),rgba(11,14,16,.92)); box-shadow:var(--elev-1)} .veto-card strong{display:block;font-size:var(--fs-heading);font-weight:800;margin-bottom:6px} .veto-card p{color:var(--ink-soft);font-size:var(--fs-caption);line-height:1.6} /* ---------- Profil: Kopf + Sektionen (iOS-Settings-Klarheit) ---------- */ .phead{display:flex;align-items:center;gap:var(--s4);padding:var(--s5); border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--elev-1); background:linear-gradient(180deg,rgba(20,26,32,.86),rgba(11,14,16,.92));margin-bottom:var(--s4)} .phead .avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none; font-size:22px;font-weight:850;color:#04160c; background:linear-gradient(135deg,var(--acc1),var(--acc2)); box-shadow:0 0 18px rgba(62,242,200,.3)} .phead .who{display:grid;gap:2px;min-width:0} .phead .who b{font-size:var(--fs-heading);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .phead .who small{color:var(--ink-mute);font-size:var(--fs-caption)} .phead .plan-chip{margin-left:auto;flex:none;font-size:var(--fs-micro);font-weight:800;letter-spacing:.06em; color:#aef7d6;border:1px solid rgba(62,242,200,.3);border-radius:var(--r-pill);padding:5px 11px; background:rgba(62,242,200,.08)} .sec-label{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800; text-transform:uppercase;letter-spacing:.12em;margin:var(--s5) var(--s2) var(--s2)} .sec-label:first-of-type{margin-top:var(--s2)} /* ---------- Heute/Morgen-Umschalter + Morgen-Leerzustand ---------- */ .day-seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill); border:1px solid var(--line);background:rgba(255,255,255,.03);margin-bottom:var(--s3)} .day-seg button{min-height:34px;padding:0 16px;border-radius:var(--r-pill); font-size:13px;font-weight:750;color:var(--ink-mute); transition:background var(--t-micro) var(--ease),color var(--t-micro) var(--ease)} .day-seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--ink); box-shadow:inset 0 0 0 1px rgba(62,242,200,.25)} .day-notice{display:grid;gap:6px;place-items:center;text-align:center;height:148px; padding:var(--s4);color:var(--ink-mute);font-size:var(--fs-caption);line-height:1.5} .day-notice .dn-i{font-size:26px;opacity:.8} /* ---------- Typische Woche (historisches Muster, keine Prognose) ---------- */ .pattern-pill{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill); padding:6px 12px;margin-bottom:var(--s4);font-size:var(--fs-micro);font-weight:800; letter-spacing:.05em;color:var(--warn);border:1px solid rgba(255,209,102,.3); background:rgba(255,209,102,.07)} .wk-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end; height:110px;margin:var(--s3) 0 4px} .wk-col{display:grid;gap:6px;justify-items:center;align-self:end} .wk-bar{width:100%;border-radius:6px 6px 2px 2px;height:calc(var(--h,50) * 1px); background:linear-gradient(180deg,#3a4862,#262f44)} .wk-col.best .wk-bar{background:linear-gradient(180deg,#6ef7c2,#1fbe85); box-shadow:0 0 12px rgba(62,242,200,.3)} .wk-col span{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:700} .wk-col.best span{color:#9af5cd} .wk-price{font-variant-numeric:tabular-nums} /* ---------- Aufgaben-Optimierer („Wann soll ich es laufen lassen?") ---------- */ .task-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s4)} .tp{display:grid;gap:5px;justify-items:center;padding:12px 6px;border-radius:var(--r-md); border:1px solid var(--line);background:rgba(255,255,255,.03); font-size:var(--fs-micro);font-weight:700;color:var(--ink-soft); transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)} .tp:active{transform:scale(.95)} .tp .ti{font-size:20px} .tp[aria-pressed="true"]{border-color:rgba(62,242,200,.45);background:linear-gradient(180deg,rgba(62,242,200,.14),rgba(62,242,200,.05));color:#d9ffe9} .steppers{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s4)} .stepper{display:grid;gap:6px;padding:var(--s3);border-radius:var(--r-md); border:1px solid var(--line);background:rgba(255,255,255,.03)} .stepper .sl{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.08em} .stepper .sv{display:flex;align-items:center;justify-content:space-between;gap:8px} .stepper .sv b{font-size:19px;font-weight:850;font-variant-numeric:tabular-nums} .stepper button{width:36px;height:36px;border-radius:11px;border:1px solid var(--line-strong); background:var(--surface-3);font-size:17px;font-weight:800;color:var(--ink); transition:transform var(--t-micro) var(--ease)} .stepper button:active{transform:scale(.92)} .task-result{padding:var(--s4);border-radius:var(--r-md);margin-bottom:var(--s3); border:1px solid rgba(62,242,200,.25); background:radial-gradient(120% 100% at 85% 0%,rgba(62,242,200,.10),transparent 55%),rgba(255,255,255,.02)} .task-result .tr-when{font-size:19px;font-weight:820;letter-spacing:-.01em;line-height:1.3} .task-result .tr-when b{color:#9dffd9} .task-result .tr-cost{margin-top:6px;font-size:var(--fs-body);font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums} .task-result .tr-cost .save{color:#9af5cd;font-weight:800} .task-result .tr-deriv{margin-top:8px;color:var(--ink-mute);font-size:var(--fs-micro);line-height:1.5} .task-result.flat{border-color:var(--line-strong);background:rgba(255,255,255,.03)} .task-actions{display:grid;gap:var(--s2)} .task-note{color:var(--ink-mute);font-size:var(--fs-micro);min-height:14px;text-align:center} .task-note.ok{color:#bdf7da} /* Markierung des Aufgaben-Fensters im Chart */ .chart .cb.task{outline:2px dashed rgba(255,255,255,.65);outline-offset:2px} /* Einstiegs-Button */ .task-entry{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin-top:var(--s4); padding:0 var(--s4);border-radius:var(--r-md);border:1px solid var(--acc-line); background:linear-gradient(180deg,var(--acc-soft),transparent); color:var(--acc-text);font-weight:750;font-size:var(--fs-body); transition:transform var(--t-micro) var(--ease)} .task-entry:active{transform:scale(.98)} .task-entry .te-i{font-size:18px} .task-entry .chev{margin-left:auto;color:var(--ink-mute)} /* ---------- Smarte Erinnerungen (Feature 3) ---------- */ .rule-block{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)} .rule-switch{width:42px;height:25px;border-radius:99px;flex:none;position:relative; background:rgba(255,255,255,.10);transition:background var(--t-std) var(--ease)} .rule-switch::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%; background:#fff;transition:transform var(--t-std) var(--ease)} .rule-switch.on{background:linear-gradient(90deg,#1fbe85,#46f6c4)} .rule-switch.on::after{transform:translateX(17px)} .rule-config{padding:4px 2px 2px} .rule-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px; background:rgba(255,255,255,.03);border:1px solid var(--line);margin-bottom:8px} .rule-item .grow{flex:1;min-width:0} .rule-item b{font-size:var(--fs-body);font-weight:760} .rule-item small{display:block;color:var(--ink-mute);font-size:var(--fs-micro)} .rule-item button{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:750;padding:6px 10px; border:1px solid var(--line-strong);border-radius:var(--r-pill)} /* ---------- Stromjahr / Insights ---------- */ .ins-hero{display:grid;gap:2px;margin-bottom:var(--s4)} .ins-hero .label{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.12em} .ins-hero .big{font-size:36px;font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff 30%,#bfe9d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .ins-hero .sub{color:var(--ink-mute);font-size:var(--fs-caption)} .ins-months{display:flex;gap:6px;align-items:flex-end;height:120px;margin:var(--s3) 0 2px; overflow-x:auto;padding-bottom:2px} .ins-col{display:grid;gap:6px;justify-items:center;align-self:end;min-width:44px;flex:1} .ins-col .ib{width:100%;border-radius:6px 6px 2px 2px;height:calc(var(--h,40) * 1px); background:linear-gradient(180deg,#3a4862,#262f44)} .ins-col.cur .ib,.ins-col.best .ib{background:linear-gradient(180deg,#6ef7c2,#1fbe85); box-shadow:0 0 12px rgba(62,242,200,.3)} .ins-col span{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:700;font-variant-numeric:tabular-nums} .ins-col.cur span,.ins-col.best span{color:#9af5cd} .vs-card{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-md); border:1px solid rgba(62,242,200,.22); background:radial-gradient(120% 100% at 85% 0%,rgba(62,242,200,.08),transparent 55%),rgba(255,255,255,.02)} .vs-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0; font-size:var(--fs-body);color:var(--ink-soft);font-variant-numeric:tabular-nums} .vs-row b{font-weight:800} .vs-row.diff{border-top:1px solid var(--line);margin-top:4px;padding-top:11px;color:#bdf7da} .ins-empty{display:grid;gap:10px;place-items:center;text-align:center;padding:var(--s6) var(--s4); color:var(--ink-mute);font-size:var(--fs-caption);line-height:1.6} .ins-empty .ie-i{font-size:30px} .ins-empty b{color:var(--ink-soft);font-size:var(--fs-body)} /* ---------- Erscheinungsbild ---------- */ .swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin:var(--s3) 0 var(--s2)} .sw{display:grid;gap:8px;justify-items:center;padding:14px 8px;border-radius:var(--r-md); border:1px solid var(--line);background:rgba(255,255,255,.03); font-size:var(--fs-micro);font-weight:700;color:var(--ink-soft)} .sw i{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 14px var(--c1)} .sw[aria-pressed="true"]{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)} /* ---------- Ökostrom-Karte (echte Netz-Daten, Quelle sichtbar) ---------- */ .eco-card{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s3); padding:var(--s4);border-radius:var(--r-md);border:1px solid var(--line); background:linear-gradient(180deg,rgba(20,26,32,.86),rgba(11,14,16,.92));box-shadow:var(--elev-1)} .eco-card .eco-i{font-size:20px;margin-top:2px} .eco-card .grow{display:grid;gap:3px;min-width:0} .eco-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .eco-line b{font-size:22px;font-weight:850;font-variant-numeric:tabular-nums;color:var(--acc-text)} .eco-line span{color:var(--ink-soft);font-size:var(--fs-body);font-weight:700} .eco-card small{display:block;color:var(--ink-mute);font-size:var(--fs-micro);line-height:1.5} .eco-card small#ecoExplain{color:var(--acc-text)} /* ---------- Boot/Splash (C.8): Ring zeichnet sich, dann nahtlos in den Heute-Reveal ---------- */ #boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg); transition:opacity .24s var(--ease)} #boot.done{opacity:0;pointer-events:none} .boot-ring{width:84px;height:84px} .boot-arc{stroke-dasharray:226;stroke-dashoffset:226;animation:bootDraw .6s var(--ease) forwards; filter:drop-shadow(0 0 8px rgba(34,229,143,.5))} @keyframes bootDraw{to{stroke-dashoffset:56}} /* ---------- Install-Einladung (C.9): ein Moment, kein Überfall ---------- */ .install-card{position:fixed;left:50%;transform:translateX(-50%);z-index:55; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 12px); width:min(calc(var(--stage) - 32px),calc(100% - 32px)); display:flex;align-items:center;gap:var(--s3);justify-content:space-between; background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-md); box-shadow:var(--elev-2);padding:var(--s3) var(--s4); animation:installIn .4s var(--ease)} @keyframes installIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%)}} .install-copy{display:grid;gap:2px;min-width:0} .install-copy strong{font-size:var(--fs-body);font-weight:800} .install-copy span{font-size:var(--fs-caption);color:var(--ink-mute);line-height:1.4} .install-actions{display:flex;gap:var(--s2);flex:none} @media(prefers-reduced-motion:reduce){ *,.view,.sheet,.sheet-backdrop,.onb,.stage::before,.boot-arc,.install-card{animation:none!important;transition:none!important} .boot-arc{stroke-dashoffset:56} } /* ============================================================ TAG-THEMA „SONNENSTUNDEN" — html[data-theme="day"] Tagsüber (7–18 Uhr, automatisch via app.js) wird der Raum hell: Sonnenlicht & PV-Wärme statt Aurora-Nacht. Gleiche Struktur, gleiche Bedeutungen — nur das Licht dreht sich. Abends kehrt „Stille Energie" unverändert zurück (kein Selektor hier greift ohne data-theme). ============================================================ */ html[data-theme="day"]{ /* E0 — der Raum wird Tageslicht */ --bg:#eef0ea; --surface-1:#f7f8f3; --surface-2:#ffffff; --surface-3:#edf1ea; --line:rgba(22,34,27,.10); --line-strong:rgba(22,34,27,.18); /* Tinte invertiert */ --ink:#141a17; --ink-soft:#3e4a44; --ink-mute:#67756e; /* Energie bleibt Grün — aber satt genug für hellen Grund */ --green:#0d9c66; --green-deep:#0a8a5a; --green-soft:rgba(16,160,96,.10); --green-line:rgba(16,160,96,.32); --positive:#0d9c66; --warn:#a97800; --danger:#d64541; --acc-text:#0a7d54; --acc-line:rgba(13,158,105,.35); --acc-soft:rgba(16,160,96,.10); --aur-mid:rgba(96,114,180,.55); --aur-exp:rgba(198,110,134,.55); /* Tiefe & Glow weicher (Licht wirft weichere Schatten) */ --elev-1:0 10px 28px rgba(30,45,38,.10),0 2px 8px rgba(30,45,38,.06); --elev-2:0 24px 60px rgba(30,45,38,.16),0 4px 14px rgba(30,45,38,.08); --glow-primary:0 14px 36px rgba(16,160,96,.24),inset 0 1px 0 rgba(255,255,255,.75); --glow-soft:0 10px 24px rgba(16,160,96,.15),inset 0 1px 0 rgba(255,255,255,.6); } /* --- E0-Szene: Nacht aus, Sonne an --- */ html[data-theme="day"] .stars, html[data-theme="day"] .gstar, html[data-theme="day"] .comet{display:none} html[data-theme="day"] .stage::before{background: radial-gradient(92% 44% at 50% -8%,rgba(255,198,88,.22),transparent 62%), radial-gradient(70% 38% at 90% 106%,rgba(130,195,255,.12),transparent 62%), radial-gradient(58% 34% at 6% 88%,rgba(255,224,150,.14),transparent 66%)} html[data-theme="day"] .stage::after{content:"";position:absolute;top:30px;right:9%; width:72px;height:72px;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle,#fff8e0 0%,#ffd97c 44%,rgba(255,205,92,.25) 66%,transparent 72%); box-shadow:0 0 42px 14px rgba(255,196,84,.38),0 0 120px 42px rgba(255,196,84,.16); animation:atem var(--t-breath) ease-in-out infinite} html[data-theme="day"] .aurora{opacity:.95;filter:blur(42px)} html[data-theme="day"] .aurora::before{background: radial-gradient(34% 26% at 74% 10%,rgba(255,192,72,.34),transparent 70%), radial-gradient(40% 30% at 20% 30%,rgba(142,200,255,.22),transparent 70%)} html[data-theme="day"] .aurora::after{background: radial-gradient(30% 22% at 56% 8%,rgba(255,230,160,.28),transparent 70%), radial-gradient(36% 26% at 36% 62%,rgba(110,215,165,.12),transparent 70%)} /* --- Horizont: grüner Hang, PV-Feld erscheint --- */ .pv-farm{display:none} /* nachts unsichtbar — Basis-Regel */ html[data-theme="day"] .pv-farm{display:block} html[data-theme="day"] .horizon path[fill^="url"]{fill:#cfe0c8} html[data-theme="day"] .horizon::before{background:linear-gradient(90deg,transparent,rgba(13,140,90,.45),rgba(13,140,90,.35),transparent)} html[data-theme="day"] .horizon circle{fill:#0d9c66} /* --- Flächen: Karten & Glas in Weiß --- */ html[data-theme="day"] .card, html[data-theme="day"] .hero-card, html[data-theme="day"] .dev, html[data-theme="day"] .phead, html[data-theme="day"] .eco-card{background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(250,251,247,.97))} html[data-theme="day"] .veto-card{background: radial-gradient(120% 100% at 85% 0%,rgba(16,160,96,.10),transparent 55%), linear-gradient(180deg,rgba(255,255,255,.93),rgba(250,251,247,.97))} html[data-theme="day"] .tabbar{background:rgba(255,255,255,.86)} html[data-theme="day"] .sheet-backdrop{background:rgba(28,38,33,.35)} html[data-theme="day"] .onb, html[data-theme="day"] .auth{background:radial-gradient(circle at 50% -10%,rgba(255,198,88,.16),transparent 40%),var(--bg)} html[data-theme="day"] .quick-btn{box-shadow:0 10px 26px rgba(16,160,96,.24),0 0 0 6px rgba(238,240,234,.95),inset 0 1px 0 rgba(255,255,255,.65)} /* --- Große Verlaufs-Texte: dunkel statt weiß --- */ html[data-theme="day"] .hero-head .big, html[data-theme="day"] .ins-hero .big{background:linear-gradient(180deg,#13251d 30%,#0b7a52 100%);-webkit-background-clip:text;background-clip:text} /* --- Chart: Slate wird Tages-Blau, Günstig wird sattes Grün --- */ html[data-theme="day"] .chart .cb{background:linear-gradient(180deg,#b7c2d4,#94a2ba)} html[data-theme="day"] .chart .cb.cheap{background:linear-gradient(180deg,#17c97e,#5fe3a4);filter:none;box-shadow:0 0 10px rgba(16,180,110,.25)} html[data-theme="day"] .chart .cb.win{background:linear-gradient(180deg,#0fbd74,#4ade96);box-shadow:0 0 14px rgba(16,180,110,.45),0 0 4px rgba(16,160,96,.5)} html[data-theme="day"] .chart .cb.now::after{background:#1c2a24;box-shadow:0 0 6px rgba(20,40,30,.45)} html[data-theme="day"] .chart .cb.sel{outline-color:#1c2a24} html[data-theme="day"] .chart .cb.task{outline-color:rgba(20,40,30,.55)} html[data-theme="day"] .wk-bar, html[data-theme="day"] .ins-col .ib{background:linear-gradient(180deg,#b7c2d4,#94a2ba)} html[data-theme="day"] .wk-col.best .wk-bar, html[data-theme="day"] .ins-col.cur .ib, html[data-theme="day"] .ins-col.best .ib{background:linear-gradient(180deg,#3ad189,#12b76a);box-shadow:0 0 10px rgba(16,180,110,.25)} /* --- Hartkodierte Weiß-Alphas → dunkle Alphas --- */ html[data-theme="day"] .hour{background:rgba(22,34,27,.035)} html[data-theme="day"] .hour .bar{background:rgba(22,34,27,.08)} html[data-theme="day"] .hour.now{box-shadow:inset 0 0 0 1px rgba(22,34,27,.22)} html[data-theme="day"] .hour.now time{color:var(--ink)} html[data-theme="day"] .tile .bar-track{background:rgba(22,34,27,.10)} html[data-theme="day"] .day-seg, html[data-theme="day"] .tp, html[data-theme="day"] .stepper, html[data-theme="day"] .rule-item, html[data-theme="day"] .sw{background:rgba(22,34,27,.03)} html[data-theme="day"] .sw[aria-pressed="true"]{border-color:rgba(22,34,27,.35);background:rgba(22,34,27,.06)} html[data-theme="day"] .task-result{background:radial-gradient(120% 100% at 85% 0%,rgba(16,160,96,.10),transparent 55%),rgba(22,34,27,.02)} html[data-theme="day"] .task-result.flat{background:rgba(22,34,27,.03)} html[data-theme="day"] .vs-card{background:radial-gradient(120% 100% at 85% 0%,rgba(16,160,96,.08),transparent 55%),rgba(22,34,27,.02)} html[data-theme="day"] .rule-switch{background:rgba(22,34,27,.16)} html[data-theme="day"] .skel::after{background:linear-gradient(90deg,transparent,rgba(22,34,27,.05),transparent)} /* --- Helle Festfarben → satte Tages-Töne --- */ html[data-theme="day"] .status-pill.good{color:#0a6e49} html[data-theme="day"] .reco-done, html[data-theme="day"] .sv-item .eur, html[data-theme="day"] .task-note.ok, html[data-theme="day"] .share-feedback.ok, html[data-theme="day"] .vs-row.diff{color:#0a7d54} html[data-theme="day"] .sel-info .pos{color:#0a7d54} html[data-theme="day"] .sel-info .neg{color:#4a5da8} html[data-theme="day"] .bh .ct{color:rgba(10,110,73,.8)} html[data-theme="day"] .wk-col.best span, html[data-theme="day"] .ins-col.cur span, html[data-theme="day"] .ins-col.best span{color:#0a7d54} html[data-theme="day"] .task-result .tr-when b, html[data-theme="day"] .task-result .tr-cost .save{color:#0a7d54} html[data-theme="day"] .tp[aria-pressed="true"]{color:#0a6e49} html[data-theme="day"] .day-seg button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(16,160,96,.32)} html[data-theme="day"] .phead .plan-chip{color:#0a6e49;border-color:rgba(16,160,96,.35);background:rgba(16,160,96,.08)} html[data-theme="day"] .tile .v.green{color:#0a7d54} html[data-theme="day"] .eco-line b, html[data-theme="day"] .eco-card small#ecoExplain{color:#0a7d54} html[data-theme="day"] .save-now .amount{color:#0a9d68;text-shadow:0 0 18px rgba(16,180,110,.18)} html[data-theme="day"] .phase-badge{color:#8a6100;border-color:rgba(169,120,0,.35);background:rgba(255,196,60,.16)} html[data-theme="day"] .pattern-pill{color:#8a6100;border-color:rgba(169,120,0,.3);background:rgba(255,196,60,.14)} html[data-theme="day"] .form-err{color:#b23f38} html[data-theme="day"] .ring .clock-anchor{fill:rgba(22,34,27,.35)} html[data-theme="day"] .hour.now time{color:#141a17} /* Plan-Liste im Tag-Thema: Balken in Tages-Slate, Günstig-Preise satt lesbar */ html[data-theme="day"] .hour .bar i{background:linear-gradient(90deg,#b7c2d4,#94a2ba)} html[data-theme="day"] .hour.cheap .bar i{background:linear-gradient(90deg,#12b76a,#3ad189);box-shadow:0 0 8px rgba(16,180,110,.3)} html[data-theme="day"] .hour.exp .bar i{background:linear-gradient(90deg,#c3adb8,#a98e9e)} html[data-theme="day"] .hour.cheap .price{color:#0a7d54} /* ============================================================ TAG-THEMA v2 — „Sonnenstunden Premium" Feedback: hell wirkte flach neben der Aurora-Nacht. Jetzt: echter Himmel mit Tiefe (fixer Verlauf, Wolken, Sonnenstrahlen), Karten als kaltes Milchglas mit getönten Schatten, Verlaufs-Headlines, mehr Licht im Chart. Spätere Regeln überschreiben v1 (gleiche Spezifität). ============================================================ */ /* --- Himmel: fixe Bühne mit Tiefe, Inhalt gleitet darüber --- */ .day-sky{display:none} html[data-theme="day"] .day-sky{display:block;position:fixed;inset:0;left:50%;transform:translateX(-50%); width:min(var(--stage),100%);pointer-events:none;z-index:0;overflow:hidden} html[data-theme="day"] .ds-grad{position:absolute;inset:0;background: linear-gradient(180deg,#cbe0f0 0%,#dfeae6 40%,#f5f0e0 76%,#f1efe4 100%)} html[data-theme="day"] .ds-sun{position:absolute;top:40px;right:9%;width:96px;height:96px;border-radius:50%; background:radial-gradient(circle,#fffef6 0%,#ffeeb2 32%,#ffd97c 52%,rgba(255,205,92,0) 71%); box-shadow:0 0 56px 20px rgba(255,206,100,.5),0 0 150px 64px rgba(255,196,84,.26); animation:atem var(--t-breath) ease-in-out infinite} html[data-theme="day"] .ds-rays{position:absolute;top:-72px;right:calc(9% - 102px);width:300px;height:300px; border-radius:50%;opacity:.55;filter:blur(5px); background:repeating-conic-gradient(rgba(255,214,120,.16) 0 6deg,transparent 6deg 24deg); -webkit-mask-image:radial-gradient(circle,transparent 24%,#000 32%,transparent 66%); mask-image:radial-gradient(circle,transparent 24%,#000 32%,transparent 66%); animation:raySpin 90s linear infinite} @keyframes raySpin{to{transform:rotate(360deg)}} html[data-theme="day"] .ds-cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,.8); filter:blur(16px);animation:cloudDrift var(--cld,110s) linear var(--cldel,0s) infinite} html[data-theme="day"] .ds-cloud.c1{width:190px;height:44px;top:11%;left:-220px;--cld:105s} html[data-theme="day"] .ds-cloud.c2{width:130px;height:32px;top:21%;left:-160px;opacity:.65;--cld:140s;--cldel:-55s} html[data-theme="day"] .ds-cloud.c3{width:240px;height:54px;top:5%;left:-260px;opacity:.5;--cld:170s;--cldel:-110s} @keyframes cloudDrift{to{transform:translateX(calc(var(--stage) + 320px))}} @media(prefers-reduced-motion:reduce){ html[data-theme="day"] .ds-rays,html[data-theme="day"] .ds-cloud{animation:none} html[data-theme="day"] .ds-cloud{display:none} } /* v1-Sonnenfleck weicht der echten Sonne; Ambient bleibt als warmer Atem */ html[data-theme="day"] .stage::after{content:none} html[data-theme="day"] .stage::before{background: radial-gradient(92% 40% at 50% -6%,rgba(255,200,92,.14),transparent 60%), radial-gradient(56% 30% at 8% 90%,rgba(140,205,150,.10),transparent 66%)} html[data-theme="day"] .aurora{opacity:.6} /* --- Horizont: Verlaufs-Hang statt Flachfarbe (SVG-Stops via CSS) --- */ html[data-theme="day"] .horizon path[fill^="url"]{fill:url(#hill)} html[data-theme="day"] .horizon stop:first-child{stop-color:#d9e8c9} html[data-theme="day"] .horizon stop:last-child{stop-color:#b5cfae} /* --- Karten: kaltes Milchglas mit getönten Schatten & Licht-Kante --- */ html[data-theme="day"] .card, html[data-theme="day"] .hero-card, html[data-theme="day"] .dev, html[data-theme="day"] .phead, html[data-theme="day"] .eco-card{ background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.52)); border-color:rgba(255,255,255,.9); box-shadow:0 18px 44px rgba(56,90,110,.14),0 2px 8px rgba(56,90,110,.06),inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)} html[data-theme="day"] .veto-card{ background:radial-gradient(120% 100% at 85% 0%,rgba(16,160,96,.12),transparent 55%), linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.52)); border-color:rgba(255,255,255,.9); box-shadow:0 18px 44px rgba(56,90,110,.14),inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)} html[data-theme="day"] .tile{ background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.48)); border-color:rgba(255,255,255,.85); box-shadow:0 12px 30px rgba(56,90,110,.12),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)} html[data-theme="day"] .tabbar{ background:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.9); backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2); box-shadow:0 -10px 34px rgba(56,90,110,.10)} html[data-theme="day"] .sheet{ background:rgba(252,253,251,.82);border-color:rgba(255,255,255,.95); backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15)} html[data-theme="day"] .install-card{background:rgba(255,255,255,.8); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} html[data-theme="day"] .status-pill{background:rgba(255,255,255,.6); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} /* --- Headlines: Tinte mit Energie-Verlauf (ruhig, nur H1) --- */ html[data-theme="day"] .view h1, html[data-theme="day"] .onb-step h1, html[data-theme="day"] .auth h1, html[data-theme="day"] .sheet h2{ background:linear-gradient(94deg,#16241e 30%,#0b6b49 100%); -webkit-background-clip:text;background-clip:text;color:transparent} /* --- Chart & Fenster: Energie leuchtet auch am Tag --- */ html[data-theme="day"] .chart .cb{background:linear-gradient(180deg,#c3cddd,#9dabc2)} html[data-theme="day"] .chart .cb.cheap{background:linear-gradient(180deg,#14c67c,#57e0a0); box-shadow:0 6px 16px rgba(13,156,102,.35)} html[data-theme="day"] .chart .cb.win{background:linear-gradient(180deg,#0fbd74,#43dc92); box-shadow:0 8px 22px rgba(13,156,102,.5),0 0 8px rgba(13,156,102,.4)} html[data-theme="day"] .save-now .amount{color:#0a9d68;text-shadow:0 2px 18px rgba(13,156,102,.28)} html[data-theme="day"] .bh{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5)); border-color:rgba(13,156,102,.3);box-shadow:0 8px 20px rgba(56,90,110,.10); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} html[data-theme="day"] .quick-btn{box-shadow:0 12px 30px rgba(13,156,102,.35),0 0 0 6px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.7)} /* --- Kleinteile im Glas-Look --- */ html[data-theme="day"] .day-seg{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85)} html[data-theme="day"] .day-seg button[aria-pressed="true"]{background:#fff; box-shadow:0 4px 12px rgba(56,90,110,.14),inset 0 0 0 1px rgba(13,156,102,.3)} html[data-theme="day"] .row .ico{background:rgba(255,255,255,.75);border-color:rgba(56,90,110,.12)} html[data-theme="day"] .mode-toggle{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85)} html[data-theme="day"] .mode-toggle button[aria-pressed="true"]{background:#fff;color:var(--ink); box-shadow:0 4px 12px rgba(56,90,110,.14)} html[data-theme="day"] .field input{background:rgba(255,255,255,.8)} html[data-theme="day"] .field input:focus{background:#fff} html[data-theme="day"] .pick{background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.85); box-shadow:0 10px 26px rgba(56,90,110,.10)} html[data-theme="day"] .pick[aria-pressed="true"]{border-color:rgba(13,156,102,.45); background:linear-gradient(180deg,rgba(16,160,96,.12),rgba(255,255,255,.7))} /* ============================================================ TAG-THEMA v3 — PV-Glanz + Tages-Stimmungen Glanz-Sweep über die PV-Panels (SVG-Glint, geclippt) und drei Himmelsstimmungen via data-daypart: goldener Morgen (7–11), klares Mittagsblau (11–15), warmes Spätlicht (15–18). ============================================================ */ /* --- PV-Glanz: schmale Lichtkante wandert über die Module --- */ .pv-glint{opacity:0} html[data-theme="day"] .pv-glint{animation:pvGlint 7s ease-in-out 1.5s infinite} html[data-theme="day"] .pv-glint-2{animation-delay:4.4s} @keyframes pvGlint{ 0%,64%{transform:translateX(0);opacity:0} 68%{opacity:.95} 82%{transform:translateX(44px);opacity:.9} 86%,100%{transform:translateX(46px);opacity:0} } @media(prefers-reduced-motion:reduce){html[data-theme="day"] .pv-glint{animation:none}} /* --- Morgen (7–11): goldenes Licht, Sonne steht tiefer --- */ html[data-daypart="morgen"] .ds-grad{background: linear-gradient(180deg,#c9dcef 0%,#e6e6d8 36%,#f8e8c8 72%,#f5ecd6 100%)} html[data-daypart="morgen"] .ds-sun{top:74px;right:7%; background:radial-gradient(circle,#fffdf0 0%,#ffe9a0 30%,#ffce6e 52%,rgba(255,196,84,0) 71%); box-shadow:0 0 60px 22px rgba(255,190,84,.55),0 0 160px 70px rgba(255,178,72,.3)} html[data-daypart="morgen"] .ds-rays{top:-38px;right:calc(7% - 102px);opacity:.62; background:repeating-conic-gradient(rgba(255,196,100,.2) 0 6deg,transparent 6deg 24deg)} html[data-daypart="morgen"] .stage::before{background: radial-gradient(92% 40% at 50% -6%,rgba(255,186,80,.18),transparent 60%), radial-gradient(56% 30% at 8% 90%,rgba(150,205,140,.10),transparent 66%)} html[data-daypart="morgen"] .ds-cloud{background:rgba(255,248,235,.85)} /* --- Mittag (11–15): klares, satteres Blau, Sonne im Zenit --- */ html[data-daypart="mittag"] .ds-grad{background: linear-gradient(180deg,#b7d6f0 0%,#d9e7e8 44%,#f3efdf 80%,#f0eee2 100%)} html[data-daypart="mittag"] .ds-sun{top:30px;right:12%} html[data-daypart="mittag"] .ds-rays{top:-84px;right:calc(12% - 102px)} /* --- Spätlicht (15–18): warmes Amber, längere Schatten-Stimmung --- */ html[data-daypart="spaet"] .ds-grad{background: linear-gradient(180deg,#c3d4e6 0%,#e8ddc9 42%,#f9e2ba 78%,#f6ead0 100%)} html[data-daypart="spaet"] .ds-sun{top:96px;right:6%; background:radial-gradient(circle,#fff9e8 0%,#ffdf94 30%,#ffbe62 54%,rgba(255,178,72,0) 72%); box-shadow:0 0 64px 24px rgba(255,172,66,.55),0 0 170px 74px rgba(255,158,54,.3)} html[data-daypart="spaet"] .ds-rays{top:-16px;right:calc(6% - 102px);opacity:.55; background:repeating-conic-gradient(rgba(255,178,84,.2) 0 6deg,transparent 6deg 24deg)} html[data-daypart="spaet"] .stage::before{background: radial-gradient(92% 40% at 50% -6%,rgba(255,168,66,.16),transparent 60%), radial-gradient(56% 30% at 8% 90%,rgba(200,170,110,.10),transparent 66%)} html[data-daypart="spaet"] .ds-cloud{background:rgba(255,242,222,.8)} html[data-daypart="spaet"] .horizon stop:first-child{stop-color:#e3e2b9} html[data-daypart="spaet"] .horizon stop:last-child{stop-color:#c2c99f} /* ============================================================ NACHT-POLITUR v4 — „Stille Energie Premium" Der geliebte Dunkel-Look bleibt Charakter — er bekommt dieselbe Materialqualität wie der Tag: Milchglas mit Licht-Kante, Verlaufs- Headlines, Mond als Gegenstück zur Sonne, lebendige Windrad-Lichter. Alles mit html:not([data-theme="day"]) gescoped → Tag unberührt. ============================================================ */ /* --- Mond: ruhiges Gegenstück zur Tages-Sonne --- */ .night-sky{position:fixed;inset:0;left:50%;transform:translateX(-50%); width:min(var(--stage),100%);pointer-events:none;z-index:0;overflow:hidden} html[data-theme="day"] .night-sky{display:none} .moon{position:absolute;top:46px;right:9%;width:54px;height:54px;border-radius:50%; background:radial-gradient(circle at 36% 34%,#f4f8f6 0%,#d3dcd9 46%,#a9b7b3 100%); box-shadow:0 0 26px 8px rgba(210,238,226,.16),0 0 84px 30px rgba(190,226,210,.07), inset -9px -7px 16px rgba(18,28,26,.38); animation:atem var(--t-breath) ease-in-out infinite} .moon::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.7; background:radial-gradient(8px 8px at 32% 44%,rgba(122,140,136,.55),transparent 62%), radial-gradient(5px 5px at 58% 26%,rgba(122,140,136,.45),transparent 62%), radial-gradient(6px 6px at 63% 62%,rgba(122,140,136,.4),transparent 62%), radial-gradient(4px 4px at 42% 70%,rgba(122,140,136,.35),transparent 62%)} /* --- Windrad-Naben: leben leise (statt statischer Punkte) --- */ html:not([data-theme="day"]) .horizon circle{animation:hubPulse 5.5s ease-in-out infinite} html:not([data-theme="day"]) .horizon circle:nth-of-type(2){animation-delay:1.8s} html:not([data-theme="day"]) .horizon circle:nth-of-type(3){animation-delay:3.6s} @keyframes hubPulse{0%,100%{opacity:.45}50%{opacity:.95}} @media(prefers-reduced-motion:reduce){ .moon{animation:none} html:not([data-theme="day"]) .horizon circle{animation:none} } /* --- Karten: dunkles Milchglas mit Licht-Kante (Signature-Detail) --- */ html:not([data-theme="day"]) .card, html:not([data-theme="day"]) .hero-card, html:not([data-theme="day"]) .dev, html:not([data-theme="day"]) .phead, html:not([data-theme="day"]) .eco-card{ background:linear-gradient(180deg,rgba(23,30,36,.78),rgba(12,15,18,.88)); border-color:rgba(255,255,255,.09); box-shadow:var(--elev-1),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(16px) saturate(1.12);-webkit-backdrop-filter:blur(16px) saturate(1.12)} html:not([data-theme="day"]) .veto-card{ background:radial-gradient(120% 100% at 85% 0%,rgba(62,242,200,.10),transparent 55%), linear-gradient(180deg,rgba(23,30,36,.78),rgba(12,15,18,.88)); box-shadow:var(--elev-1),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(16px) saturate(1.12);-webkit-backdrop-filter:blur(16px) saturate(1.12)} html:not([data-theme="day"]) .tile{ background:linear-gradient(180deg,rgba(20,27,32,.7),rgba(13,17,20,.82)); border-color:rgba(255,255,255,.08); box-shadow:var(--elev-1),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} html:not([data-theme="day"]) .tabbar{ background:rgba(7,9,11,.74);border-top-color:rgba(255,255,255,.09); backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15); box-shadow:0 -12px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)} html:not([data-theme="day"]) .sheet{ background:rgba(17,22,26,.9);border-color:rgba(255,255,255,.12); box-shadow:var(--elev-2),inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15)} html:not([data-theme="day"]) .status-pill{ background:rgba(17,22,26,.72); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} html:not([data-theme="day"]) .bh{ box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)} html:not([data-theme="day"]) .row .ico{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} /* --- Headlines: Weiß → Mint-Verlauf (wie die Hero-Zahl, wie am Tag) --- */ html:not([data-theme="day"]) .view h1, html:not([data-theme="day"]) .onb-step h1, html:not([data-theme="day"]) .auth h1, html:not([data-theme="day"]) .sheet h2{ background:linear-gradient(94deg,#ffffff 30%,#a9e8cc 100%); -webkit-background-clip:text;background-clip:text;color:transparent} /* ============================================================ v5 — HIGH-CLASS-PASS (Apple/Tesla-Anspruch) Weniger Deko, besser orchestriertes Licht: Sichel-Mond tiefer am Himmel, zweite Hügelebene (Tiefe), feines Filmkorn gegen Gradient- Banding (das unsichtbare „teuer"-Detail), ruhiger Lade-Ring am ⚡. ============================================================ */ /* --- Mond v2: elegante Sichel, tiefer und kleiner — Understatement --- */ .moon{top:104px;right:8%;width:46px;height:46px; background:radial-gradient(circle at 36% 34%,#eef4f1 0%,#cdd8d4 48%,#a6b4b0 100%); box-shadow:0 0 22px 7px rgba(210,238,226,.14),0 0 70px 26px rgba(190,226,210,.06); animation:atem var(--t-breath) ease-in-out infinite} .moon::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.55; background:radial-gradient(7px 7px at 30% 46%,rgba(122,140,136,.5),transparent 62%), radial-gradient(5px 5px at 55% 30%,rgba(122,140,136,.4),transparent 62%)} /* Schatten-Scheibe schneidet die Sichel (öffnet nach unten rechts) */ .moon::after{content:"";position:absolute;inset:0;border-radius:50%; background:#06090b;transform:translate(-24%,-16%) scale(.94)} /* --- Zweite Hügelebene: nachts fern & dunkel, am Tag zarter Dunst --- */ html[data-theme="day"] .hill-far{fill:#e0e9d3;opacity:.9} html[data-daypart="spaet"] .hill-far{fill:#e9e2c2} /* --- Filmkorn: statisches Feinrauschen tötet Banding (beide Themen) --- */ body::after{content:"";position:fixed;inset:0;z-index:98;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); background-size:128px 128px;opacity:.03;mix-blend-mode:overlay} html[data-theme="day"] body::after{opacity:.022} /* --- ⚡-Button: ruhig rotierender Lade-Ring (Energie, die nie schläft) --- */ .tab-quick::before{content:"";position:absolute;left:50%;top:-25px;width:60px;height:60px; border-radius:50%;pointer-events:none; background:conic-gradient(from 0deg,transparent 0 68%,rgba(62,242,200,.0) 70%,rgba(62,242,200,.55) 84%,rgba(185,255,110,.35) 92%,transparent 100%); -webkit-mask:radial-gradient(circle,transparent 55%,#000 60%,#000 72%,transparent 78%); mask:radial-gradient(circle,transparent 55%,#000 60%,#000 72%,transparent 78%); filter:blur(1.5px);opacity:.8; animation:chargeRing 7s linear infinite} @keyframes chargeRing{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)}} html[data-theme="day"] .tab-quick::before{ background:conic-gradient(from 0deg,transparent 0 68%,rgba(13,156,102,.0) 70%,rgba(13,156,102,.5) 84%,rgba(120,210,120,.3) 92%,transparent 100%); opacity:.7} @media(prefers-reduced-motion:reduce){ .tab-quick::before{animation:none;opacity:.35} } /* v5.1 — Feinschliff nach Sichtprüfung */ /* Sichel echt geschnitten: transparenter Offset-Kreis im Gradient — der Himmel scheint durch, keine Deck-Scheibe. Krater raus (Understatement). */ .moon{top:72px;right:6%; background:radial-gradient(circle at 30% 28%,transparent 57%,#dbe6e0 59%,#f2f7f4 74%,#c6d2ce 100%); box-shadow:none;filter:drop-shadow(0 0 14px rgba(205,235,222,.28)) drop-shadow(0 0 44px rgba(190,226,210,.12))} .moon::before{content:none} .moon::after{content:none} /* ⚡-Ring: größer, klarer, sitzt sichtbar UM den Button statt dahinter */ .tab-quick::before{top:-29px;width:68px;height:68px;filter:blur(1px);opacity:.9; -webkit-mask:radial-gradient(circle,transparent 52%,#000 58%,#000 78%,transparent 85%); mask:radial-gradient(circle,transparent 52%,#000 58%,#000 78%,transparent 85%)} /* v5.2 — ⚡-Ring präzise: dünne, klare Bahn ganz außen (Tesla-Charge-Feel) */ .tab-quick::before{top:-31px;width:72px;height:72px;filter:none;opacity:1; background:conic-gradient(from 0deg,transparent 0 62%,rgba(62,242,200,.9) 78%,rgba(185,255,110,.85) 88%,transparent 96%); -webkit-mask:radial-gradient(circle,transparent 63%,#000 66%,#000 71%,transparent 74%); mask:radial-gradient(circle,transparent 63%,#000 66%,#000 71%,transparent 74%)} html[data-theme="day"] .tab-quick::before{ background:conic-gradient(from 0deg,transparent 0 62%,rgba(13,156,102,.85) 78%,rgba(90,200,120,.75) 88%,transparent 96%)} /* v5.3 — Lade-Ring wandert vom ⚡-Button (User: irritierend) ans Logo */ .tab-quick::before{content:none} .app-logo .mark{position:relative} .app-logo .mark::after{content:"";position:absolute;left:50%;top:50%;width:42px;height:42px; margin:-21px 0 0 -21px;border-radius:50%;pointer-events:none; background:conic-gradient(from 0deg,transparent 0 66%,rgba(62,242,200,.8) 80%,rgba(185,255,110,.7) 90%,transparent 97%); -webkit-mask:radial-gradient(circle,transparent 60%,#000 66%,#000 74%,transparent 80%); mask:radial-gradient(circle,transparent 60%,#000 66%,#000 74%,transparent 80%); animation:chargeRing 8s linear infinite} html[data-theme="day"] .app-logo .mark::after{ background:conic-gradient(from 0deg,transparent 0 66%,rgba(13,156,102,.75) 80%,rgba(90,200,120,.6) 90%,transparent 97%)} @media(prefers-reduced-motion:reduce){.app-logo .mark::after{animation:none;opacity:.3}} /* ============================================================ v6 — LEBENDE DETAILS („mehr solcher Sachen") Vier kleine Licht-Momente, jeder mit Bedeutung: 1 Licht-Strahl wandert um die Empfehlungskarte (der Copilot spricht) 2 „Jetzt"-Punkt im Chart pulsiert (das ist live) 3 Status-Punkt atmet, wenn die Stunde günstig ist 4 ⚡-Button atmet ruhig (immer bereit) Alle reduced-motion-sicher, beide Themen. ============================================================ */ /* --- 1) Border-Beam auf der Empfehlungskarte --- */ @property --beam{syntax:"";initial-value:0deg;inherits:false} .reco{position:relative} .reco::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px; pointer-events:none; background:conic-gradient(from var(--beam),transparent 0 74%,rgba(62,242,200,.9) 87%,rgba(185,255,110,.5) 93%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:beamTurn 10s linear infinite} @keyframes beamTurn{to{--beam:360deg}} html[data-theme="day"] .reco::before{ background:conic-gradient(from var(--beam),transparent 0 74%,rgba(13,156,102,.8) 87%,rgba(90,200,120,.45) 93%,transparent 100%)} /* --- 2) „Jetzt"-Punkt: lebt (das hier ist live) --- */ .chart .cb.now::after{animation:nowPulse 2.6s ease-in-out infinite} @keyframes nowPulse{0%,100%{opacity:1;transform:translateX(-50%) scale(1)} 50%{opacity:.55;transform:translateX(-50%) scale(.72)}} /* --- 3) Status-Punkt atmet nur, wenn es günstig ist --- */ .status-pill.good .dot{animation:goodBreath 3.2s ease-in-out infinite} @keyframes goodBreath{0%,100%{box-shadow:0 0 12px rgba(34,229,143,.7)} 50%{box-shadow:0 0 4px rgba(34,229,143,.35)}} html[data-theme="day"] .status-pill.good .dot{animation-name:goodBreathDay} @keyframes goodBreathDay{0%,100%{box-shadow:0 0 10px rgba(13,156,102,.6)} 50%{box-shadow:0 0 3px rgba(13,156,102,.3)}} /* --- 4) ⚡-Button: ruhiges Atmen (immer bereit, nie aufdringlich) --- */ .quick-btn{animation:quickBreath 9s ease-in-out infinite} @keyframes quickBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}} @media(prefers-reduced-motion:reduce){ .reco::before,.chart .cb.now::after,.status-pill.good .dot,.quick-btn{animation:none!important} } /* ============================================================ v6.1 — Erfolgs-Moment: Ersparnis fliegt ins Spar-Konto ============================================================ */ .save-fly{position:fixed;z-index:70;pointer-events:none; transform:translate(-50%,-50%) scale(1);opacity:1; display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--r-pill); font-size:15px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.01em; color:#04160c;background:linear-gradient(135deg,var(--acc1),var(--acc2)); box-shadow:0 10px 30px rgba(34,229,143,.4),0 0 14px rgba(62,242,200,.5),inset 0 1px 0 rgba(255,255,255,.5); transition:transform .78s cubic-bezier(.3,.9,.35,1),opacity .3s ease .5s} html[data-theme="day"] .save-fly{color:#fff; background:linear-gradient(135deg,#0da06a,#3ecf8e); box-shadow:0 10px 30px rgba(13,156,102,.4),inset 0 1px 0 rgba(255,255,255,.4)} /* Kachel glüht einmal auf, wenn der Wert ankommt */ .tile.tile-hit{animation:tileHit 1.25s var(--ease)} @keyframes tileHit{ 0%{box-shadow:var(--elev-1),inset 0 1px 0 rgba(255,255,255,.05)} 22%{box-shadow:0 0 0 1px rgba(62,242,200,.65),0 0 26px rgba(62,242,200,.45),var(--elev-1);transform:scale(1.03)} 100%{box-shadow:var(--elev-1),inset 0 1px 0 rgba(255,255,255,.05);transform:scale(1)}} html[data-theme="day"] .tile.tile-hit{animation-name:tileHitDay} @keyframes tileHitDay{ 0%{box-shadow:0 12px 30px rgba(56,90,110,.12)} 22%{box-shadow:0 0 0 1px rgba(13,156,102,.55),0 0 24px rgba(13,156,102,.4),0 12px 30px rgba(56,90,110,.12);transform:scale(1.03)} 100%{box-shadow:0 12px 30px rgba(56,90,110,.12);transform:scale(1)}} /* „Verbucht"-Häkchen federt einmal ein */ .reco-done:not([hidden])::before{animation:doneIn .5s var(--ease-spring)} @keyframes doneIn{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .save-fly{display:none} .tile.tile-hit,.reco-done:not([hidden])::before{animation:none} } /* v6.3 — Logo-Orbit entfernt (User: auch das soll weg) */ .app-logo .mark::after{content:none} /* ============================================================ v7 — Tab-Wechsel: gerichteter Übergang + Icon-Pop Die neue Ansicht gleitet aus der Richtung des Wechsels herein (Heute→Profil: von rechts; zurück: von links). Das aktive Tab-Icon federt einmal ein. Nur Transform+Opacity (60fps). ============================================================ */ .view.slide-l{animation:viewInL .34s var(--ease-spring)} .view.slide-r{animation:viewInR .34s var(--ease-spring)} @keyframes viewInL{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}} @keyframes viewInR{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}} .tab[aria-current="page"] svg{animation:tabPop .42s var(--ease-spring)} @keyframes tabPop{0%{transform:scale(.82)}55%{transform:scale(1.14)}100%{transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .view.slide-l,.view.slide-r,.tab[aria-current="page"] svg{animation:none} } /* ===== E-Auto-Ladeplaner (Plan-Tab) ===== */ .ev-plan .task-result{margin-top:12px} .ev-plan .btn[disabled]{opacity:.45;pointer-events:none} /* ===== Segment-Gate: Potenzial-Einordnung im Onboarding ===== */ .onb-potential{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-md);display:grid;gap:6px; border:1px solid var(--line);background:rgba(255,255,255,.04);animation:viewIn var(--t-std) var(--ease)} .onb-potential b{font-size:var(--fs-body);font-weight:780;line-height:1.35} .onb-potential small{color:var(--ink-mute);font-size:var(--fs-micro);line-height:1.5} .onb-potential.high{border-color:var(--green-line);background:linear-gradient(180deg,rgba(34,229,143,.12),rgba(34,229,143,.04))} .onb-potential.high b{color:#9dffd9} .onb-potential.low{border-color:var(--line-strong)} html[data-theme="day"] .onb-potential{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.85)} html[data-theme="day"] .onb-potential.high{background:linear-gradient(180deg,rgba(16,160,96,.12),rgba(16,160,96,.04));border-color:rgba(16,160,96,.35)} html[data-theme="day"] .onb-potential.high b{color:#0a7d54} /* ===== Monatsbilanz im Spar-Konto ===== */ .sv-balance{margin:14px 0 12px;padding:var(--s4);border-radius:var(--r-md);display:grid;gap:10px; border:1px solid var(--line);background:rgba(255,255,255,.04)} .sv-balance.paid{border-color:var(--green-line);background:linear-gradient(180deg,rgba(34,229,143,.10),rgba(34,229,143,.03))} .svb-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--fs-body)} .svb-row .svb-val{font-size:20px;font-weight:850;font-variant-numeric:tabular-nums} .sv-balance.paid .svb-val{color:#9af5cd} .svb-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden} .svb-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--green),#b9ff6e);transition:width .8s var(--ease)} .svb-verdict{font-size:var(--fs-caption);line-height:1.5;color:var(--ink-soft)} .svb-verdict b{color:#9af5cd} .svb-note{color:var(--ink-mute);font-size:var(--fs-micro);line-height:1.5} html[data-theme="day"] .sv-balance{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.85)} html[data-theme="day"] .sv-balance.paid{background:linear-gradient(180deg,rgba(16,160,96,.10),rgba(16,160,96,.03));border-color:rgba(16,160,96,.35)} html[data-theme="day"] .sv-balance.paid .svb-val, html[data-theme="day"] .svb-verdict b{color:#0a7d54} html[data-theme="day"] .svb-bar{background:rgba(10,20,15,.10)} /* ===== §14a-Sparcheck (Plan-Tab) ===== */ .p14a .task-result{margin-top:2px} .p14a-q{font-size:var(--fs-body);font-weight:760;margin:12px 0 8px} .p14a .field label{display:block;color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px} .p14a-opts .bh[aria-pressed="true"]{border-color:var(--green-line);background:linear-gradient(180deg,rgba(34,229,143,.16),rgba(34,229,143,.06));font-weight:850} html[data-theme="day"] .p14a-opts .bh[aria-pressed="true"]{background:linear-gradient(180deg,rgba(16,160,96,.14),rgba(16,160,96,.05));border-color:rgba(16,160,96,.4)} /* ===== Beta: Pro-Chip ===== */ .pro-chip{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 9px;border-radius:99px; border:1px solid var(--green-line);background:rgba(34,229,143,.10); color:#9af5cd;font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} html[data-theme="day"] .pro-chip{background:rgba(16,160,96,.10);border-color:rgba(16,160,96,.35);color:#0a7d54} /* ===== Beta-Feinschliff: Preisbasis-Hinweis + §14a-Erklärer ===== */ .price-basis{max-width:340px;text-align:center;margin:2px auto 0} .p14a-what{margin:0 0 12px} .p14a-what summary{cursor:pointer;font-size:var(--fs-caption);font-weight:750;color:#9af5cd;padding:4px 0;list-style-position:inside} .p14a-what[open] summary{margin-bottom:4px} html[data-theme="day"] .p14a-what summary{color:#0a7d54} /* ===== Start-Trio (Heute) ===== */ .trio{display:grid;gap:10px;margin:14px 0 16px} .trio-item{display:grid;gap:3px;text-align:left;padding:14px var(--s4);border-radius:var(--r-md); border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font:inherit;cursor:pointer; transition:transform var(--t-std) var(--ease),border-color var(--t-std) var(--ease)} .trio-item:active{transform:scale(.98)} .trio-item .tl{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.08em} .trio-item b{font-size:17px;font-weight:820;line-height:1.3;letter-spacing:-.01em} .trio-item .tv-green{color:#9af5cd} .trio-item small{color:var(--ink-soft);font-size:var(--fs-micro);line-height:1.4} html[data-theme="day"] .trio-item{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.85)} html[data-theme="day"] .trio-item .tv-green{color:#0a7d54} /* ===== Geld-Fund ===== */ .fund-card{display:grid;gap:8px;margin:14px 0 12px;padding:18px var(--s4) 14px;border-radius:var(--r-lg,20px); border:1px solid var(--green-line);background:linear-gradient(180deg,rgba(34,229,143,.12),rgba(34,229,143,.03))} .fund-card .tl{color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800;text-transform:uppercase;letter-spacing:.08em} .fund-total{font-size:30px;font-weight:850;letter-spacing:-.02em;line-height:1.1;color:#eafff4} .fund-sub{color:var(--ink-soft);font-size:var(--fs-caption)} .fund-next{display:flex;align-items:center;gap:10px;text-align:left;margin-top:4px;padding:12px 14px;border-radius:var(--r-md); border:1px solid var(--line-strong);background:rgba(255,255,255,.06);color:var(--ink);font:inherit;font-weight:750;cursor:pointer} .fund-next .fn-k{color:#9af5cd;font-size:var(--fs-micro);font-weight:850;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap} .fund-next .grow{flex:1;font-size:var(--fs-caption);line-height:1.35} .fund-items{display:grid;gap:6px;margin-top:6px} .fi{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;text-align:left; padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.14);color:var(--ink);font:inherit;cursor:pointer} .fi[disabled]{cursor:default;opacity:.75} .fi .fi-l{font-weight:750;font-size:var(--fs-caption)} .fi .fi-s{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:99px;border:1px solid var(--line-strong);color:var(--ink-mute)} .fi.gefunden .fi-s{color:#9af5cd;border-color:var(--green-line);background:rgba(34,229,143,.10)} .fi.gesichert .fi-s{color:#0a0f0c;background:#22e58f;border-color:#22e58f} .fi.laeuft .fi-s{color:#9af5cd;border-color:var(--green-line)} .fi.offen .fi-s{color:#ffd166;border-color:rgba(255,209,102,.4);background:rgba(255,209,102,.08)} .fi .fi-e{font-weight:850;font-variant-numeric:tabular-nums;font-size:var(--fs-caption)} .fi .fi-n{grid-column:1/-1;color:var(--ink-mute);font-size:var(--fs-micro);line-height:1.45} .fund-more{border:0;background:none;color:var(--ink-mute);font:inherit;font-size:var(--fs-micro);font-weight:750;text-align:left;padding:2px 0;cursor:pointer} html[data-theme="day"] .fund-card{background:linear-gradient(180deg,rgba(16,160,96,.12),rgba(16,160,96,.03));border-color:rgba(16,160,96,.35)} html[data-theme="day"] .fund-total{color:#0a3d28} html[data-theme="day"] .fi{background:rgba(255,255,255,.55)} html[data-theme="day"] .fi.gefunden .fi-s,html[data-theme="day"] .fund-next .fn-k{color:#0a7d54} /* ═══════════ WELLE 1: Performance-Stufen + Touch-Ziele ═══════════ */ /* — fx<2: kein Echtzeit-Blur (teuerster Effekt). Glas wird zu sattem, leicht transluzentem Material mit denselben Konturen. — */ html:not([data-fx="2"]) *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important} html:not([data-fx="2"]) .sheet{background:rgba(9,13,12,.985)} html:not([data-fx="2"]) .tabbar{background:rgba(6,8,8,.97)} html:not([data-fx="2"]) .app-head{background:rgba(5,7,7,.92)} html:not([data-fx="2"]) .onb,html:not([data-fx="2"]) .auth{background:rgba(5,7,7,.985)} html:not([data-fx="2"]) .install-card{background:rgba(10,14,13,.97)} html[data-theme="day"]:not([data-fx="2"]) .sheet{background:rgba(244,246,241,.99)} html[data-theme="day"]:not([data-fx="2"]) .tabbar{background:rgba(240,242,237,.98)} html[data-theme="day"]:not([data-fx="2"]) .app-head{background:rgba(238,240,234,.95)} html[data-theme="day"]:not([data-fx="2"]) .onb,html[data-theme="day"]:not([data-fx="2"]) .auth{background:rgba(240,242,237,.99)} html[data-theme="day"]:not([data-fx="2"]) .install-card{background:rgba(255,255,255,.97)} /* — fx<2: Aurora wird STATISCH und blur-frei (Radial-Gradients sind ohnehin weich) — */ html:not([data-fx="2"]) .aurora{filter:none;opacity:.6} html:not([data-fx="2"]) .aurora::before,html:not([data-fx="2"]) .aurora::after{animation:none} html:not([data-fx="2"]) .gstar,html:not([data-fx="2"]) .comet{display:none} html:not([data-fx="2"]) .stars i{animation:none} html[data-fx="0"] .stars,html[data-fx="0"] .aurora{display:none} html[data-fx="0"] .horizon .rotor{animation:none} /* — Touch-Ziele: alles Interaktive ≥44px (Apple HIG) — */ .stepper button{width:44px;height:44px;border-radius:13px} .bh{min-height:44px;padding:0 16px} .day-seg button{min-height:44px} .mode-toggle button{min-height:44px} .fi{min-height:48px} .fund-more{min-height:44px;display:flex;align-items:center} .onb-skip,.auth-close{min-height:44px;display:inline-flex;align-items:center;padding:0 12px} .tp{min-height:48px} .sw{min-height:44px} /* Inline-Links in Hinweisen: unsichtbar vergrößerte Trefffläche */ .hint a,.reco-meta a,.task-note a{display:inline-block;padding:12px 4px;margin:-12px -4px} /* Ring-Balken: Treffzone nach oben erweitert (Balken bleiben optisch schlank) */ #ring .cb{position:relative} #ring .cb::after{content:"";position:absolute;left:-2px;right:-2px;top:-44px;height:44px} /* — fx<2: verteilte Paint-Kosten senken — Rotoren statisch, Schatten flach. (Tiefe kommt aus Border+Gradient; gemessen −9 ms je Frame @4x) — */ html:not([data-fx="2"]) .horizon .rotor{animation:none} html:not([data-fx="2"]) .card, html:not([data-fx="2"]) .hero-card, html:not([data-fx="2"]) .fund-card, html:not([data-fx="2"]) .trio-item, html:not([data-fx="2"]) .task-result, html:not([data-fx="2"]) .dev{box-shadow:none} /* ═══════════ WELLE 2: Motion & Feeling ═══════════ */ /* Gestaffelter Einzug beim Start — einmalig, ruhig, nur fx≥1 */ @media (prefers-reduced-motion: no-preference) { html:not([data-fx="0"]) .fund-card{animation:cardIn .5s var(--ease) both} html:not([data-fx="0"]) #actRow{animation:cardIn .5s var(--ease) .07s both} html:not([data-fx="0"]) .hero-card{animation:cardIn .5s var(--ease) .14s both} } @keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* Verbucht-Zeile */ .fund-booked{color:#9af5cd;font-weight:750} html[data-theme="day"] .fund-booked{color:#0a7d54} /* Pull-to-refresh: Blitz füllt sich, dreht beim Laden */ #ptr{position:fixed;top:-56px;left:50%;z-index:90;width:44px;height:44px;margin-left:-22px; display:grid;place-items:center;border-radius:50%;border:1px solid var(--green-line); background:rgba(8,12,11,.95);opacity:0;pointer-events:none; transform:translateY(0);transition:opacity .15s ease} #ptr.show{opacity:1;transform:translateY(calc(var(--pull,0px) * .6))} #ptr svg{width:22px;height:22px;fill:none;stroke:#22e58f;stroke-width:1.6;stroke-linejoin:round; opacity:calc(.35 + .65 * var(--fill,0))} #ptr.go svg{fill:rgba(34,229,143,calc(var(--fill,0) * .9))} #ptr.spin{transform:translateY(64px)} #ptr.spin svg{animation:ptrSpin .7s linear infinite;fill:#22e58f} @keyframes ptrSpin{to{transform:rotate(360deg)}} html[data-theme="day"] #ptr{background:rgba(255,255,255,.96);border-color:rgba(16,160,96,.4)} /* Konsistenz-Pass (leicht): eine Button-Höhe, ein Fokus-Stil */ .btn{min-height:52px} button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid rgba(34,229,143,.7);outline-offset:2px} /* ═══════════ WELLE 3: Sprache & Wege ═══════════ */ .linklike{border:0;background:none;color:var(--ink-mute);font:inherit;font-size:var(--fs-caption); font-weight:750;text-decoration:underline;text-underline-offset:3px;cursor:pointer; min-height:44px;display:inline-flex;align-items:center;padding:0 4px} #hoursList.collapsed{max-height:470px;overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)} /* ═══ FIX (Feldtest): Onboarding & Konto scrollen auf kleinen Displays ═══ Der Weiter-/Registrieren-Button lag unterhalb des Viewports und war unerreichbar (iPhone-SE-Klasse, große Schrift). */ .onb,.auth{overflow-y:auto;-webkit-overflow-scrolling:touch} .onb-inner,.auth-inner{min-height:100%} .auth-benefits{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none} .auth-benefits li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:var(--fs-caption);line-height:1.45} .auth-benefits li::before{content:"✓";color:#22e58f;font-weight:850;flex:0 0 auto} html[data-theme="day"] .auth-benefits li::before{color:#0a7d54} /* ============ Coming-soon-Länder + Sprachwahl (Onboarding/Profil) ============ */ /* Step 1 ist mit Länder-Grid + Sprach-Pills höher als der Viewport kleiner Geräte — die Onboarding-Ebene muss scrollen können (war bisher nie nötig) */ .onb{overflow-y:auto;-webkit-overflow-scrolling:touch} .soon-label{margin:14px 0 8px;color:var(--ink-mute);font-size:var(--fs-micro);font-weight:800; letter-spacing:.08em;text-transform:uppercase} .pick.soon{opacity:.55;cursor:default} .pick.soon:active{transform:none} .pick.soon small{position:absolute;top:8px;right:10px;color:var(--ink-mute); font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--line);border-radius:999px;padding:2px 7px;line-height:1.2} .soon-note{margin:10px 2px 0;color:var(--ink-mute);font-size:var(--fs-micro);font-weight:600;line-height:1.5} .onb-lang{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px} .lang-pill{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-mute); font:inherit;font-size:var(--fs-micro);font-weight:700;padding:7px 14px;min-height:32px;cursor:pointer} .lang-pill[aria-pressed="true"]{border-color:var(--green-line);color:var(--ink); background:linear-gradient(180deg,rgba(34,229,143,.14),rgba(34,229,143,.05))} .lang-select{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2); color:var(--ink);font:inherit;font-size:14px;font-weight:600;padding:8px 10px;min-height:40px} html[data-theme="day"] .lang-pill{background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.85)} /* ============================================================ v8 — Visual Polish & Motion Pass Ein konsolidiertes System über der bestehenden App: klare Watthunt- Tokens, gezielte Produktmomente, keine Deko-Effekte ohne Bedeutung. ============================================================ */ :root{ /* Brand */ --wh-primary:#22e58f; --wh-primary-strong:#12b76a; --wh-primary-soft:rgba(34,229,143,.13); --wh-accent:#58a6ff; --wh-accent-soft:rgba(88,166,255,.13); --wh-positive:#22e58f; --wh-positive-soft:rgba(34,229,143,.14); --wh-warning:#ffd166; --wh-warning-soft:rgba(255,209,102,.13); --wh-danger:#ff6b6b; --wh-danger-soft:rgba(255,107,107,.12); /* Surfaces */ --wh-bg-dark:#050607; --wh-surface-0:rgba(5,8,10,.74); --wh-surface-1:rgba(17,24,29,.82); --wh-surface-2:rgba(28,37,44,.78); --wh-line:rgba(255,255,255,.10); --wh-line-strong:rgba(255,255,255,.18); /* Motion */ --motion-tap:120ms; --motion-control:160ms; --motion-card:240ms; --motion-page:300ms; --motion-result:820ms; --ease-out:cubic-bezier(.22,1,.36,1); --ease-press:cubic-bezier(.2,.8,.2,1); --ease-emph:cubic-bezier(.18,1.1,.32,1); /* Light, glow, depth */ --glow-result:0 0 0 1px rgba(34,229,143,.42),0 24px 70px rgba(34,229,143,.24),0 0 42px rgba(88,166,255,.16),inset 0 1px 0 rgba(255,255,255,.22); --glow-active:0 0 0 1px rgba(34,229,143,.38),0 14px 36px rgba(34,229,143,.20),inset 0 1px 0 rgba(255,255,255,.18); --glow-recommended:0 0 0 1px rgba(88,166,255,.36),0 18px 42px rgba(88,166,255,.18),inset 0 1px 0 rgba(255,255,255,.16); --glow-success:0 0 0 1px rgba(34,229,143,.45),0 14px 36px rgba(34,229,143,.24); --shadow-card:0 18px 48px rgba(0,0,0,.30),0 2px 10px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07); --shadow-card-strong:0 28px 76px rgba(0,0,0,.42),0 4px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.10); --acc1:var(--wh-primary); --acc2:#5ef0c2; --green:var(--wh-primary); --green-deep:var(--wh-primary-strong); --green-soft:var(--wh-primary-soft); --green-line:rgba(34,229,143,.34); --positive:var(--wh-positive); --warn:var(--wh-warning); --danger:var(--wh-danger); --elev-1:var(--shadow-card); --elev-2:var(--shadow-card-strong); --t-micro:var(--motion-tap); --t-std:var(--motion-card); --t-sheet:var(--motion-page); } html[data-theme="day"]{ --wh-bg-light:#eef3ee; --wh-surface-0:rgba(255,255,255,.60); --wh-surface-1:rgba(255,255,255,.76); --wh-surface-2:rgba(255,255,255,.90); --wh-line:rgba(18,43,32,.11); --wh-line-strong:rgba(18,43,32,.18); --wh-primary:#0d9c66; --wh-primary-strong:#087e52; --wh-primary-soft:rgba(13,156,102,.12); --wh-accent:#2f78e8; --wh-accent-soft:rgba(47,120,232,.11); --wh-positive:#0d9c66; --wh-positive-soft:rgba(13,156,102,.12); --wh-warning:#a97800; --wh-warning-soft:rgba(169,120,0,.12); --wh-danger:#d64541; --wh-danger-soft:rgba(214,69,65,.10); --glow-result:0 0 0 1px rgba(13,156,102,.36),0 24px 58px rgba(13,156,102,.18),0 10px 32px rgba(47,120,232,.10),inset 0 1px 0 rgba(255,255,255,.88); --glow-active:0 0 0 1px rgba(13,156,102,.34),0 14px 32px rgba(13,156,102,.14),inset 0 1px 0 rgba(255,255,255,.88); --glow-recommended:0 0 0 1px rgba(47,120,232,.28),0 18px 38px rgba(47,120,232,.12),inset 0 1px 0 rgba(255,255,255,.88); --glow-success:0 0 0 1px rgba(13,156,102,.34),0 14px 32px rgba(13,156,102,.16); --shadow-card:0 18px 42px rgba(56,90,110,.13),0 2px 9px rgba(56,90,110,.07),inset 0 1px 0 rgba(255,255,255,.9); --shadow-card-strong:0 28px 68px rgba(56,90,110,.18),0 4px 16px rgba(56,90,110,.10),inset 0 1px 0 rgba(255,255,255,.95); } /* Brand atmosphere */ .stage::before{ background: radial-gradient(88% 42% at 50% -7%,rgba(34,229,143,var(--ambient-g)),transparent 60%), radial-gradient(52% 34% at 100% 9%,rgba(88,166,255,.095),transparent 62%), radial-gradient(64% 34% at 3% 92%,rgba(34,229,143,.07),transparent 68%), radial-gradient(70% 38% at 90% 106%,rgba(44,38,28,.26),transparent 62%); } .stage.window-active::before{filter:saturate(1.12) brightness(1.04)} /* Unified interactive material */ .card,.hero-card,.fund-card,.phead,.eco-card,.trio-item,.task-result,.dev,.sheet,.install-card{ transition: transform var(--motion-card) var(--ease-out), box-shadow var(--motion-card) var(--ease-out), border-color var(--motion-card) var(--ease-out), background var(--motion-card) var(--ease-out), opacity var(--motion-card) var(--ease-out); } .card,.hero-card,.phead,.eco-card,.sheet,.install-card{ box-shadow:var(--shadow-card); } .row,.task-entry,.fi,.tp,.pick,.bh,.sw,.rule-item{ transition: transform var(--motion-control) var(--ease-press), box-shadow var(--motion-card) var(--ease-out), border-color var(--motion-card) var(--ease-out), background var(--motion-card) var(--ease-out), color var(--motion-card) var(--ease-out), opacity var(--motion-card) var(--ease-out); } .row:hover,.task-entry:hover,.fi:not([disabled]):hover,.bh:hover,.tp:hover,.pick:not(.soon):hover{ transform:translateY(-1px); border-color:var(--wh-line-strong); } .row:active,.task-entry:active,.fi:not([disabled]):active,.bh:active,.tp:active,.pick:not(.soon):active{ transform:translateY(0) scale(.985); } /* Buttons */ .btn{ position:relative; overflow:hidden; isolation:isolate; border:1px solid transparent; letter-spacing:0; box-shadow:0 10px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.12); transition: transform var(--motion-tap) var(--ease-press), box-shadow var(--motion-card) var(--ease-out), border-color var(--motion-card) var(--ease-out), background var(--motion-card) var(--ease-out), opacity var(--motion-card) var(--ease-out), filter var(--motion-card) var(--ease-out); } .btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0; background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.38) 42%,transparent 62%); transform:translateX(-120%);transition:opacity var(--motion-card) var(--ease-out),transform .7s var(--ease-out)} .btn:hover::before{opacity:.75;transform:translateX(120%)} .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.972);filter:saturate(1.08)} .btn:focus-visible{outline:2px solid var(--wh-primary);outline-offset:3px;box-shadow:var(--glow-active)} .btn-primary{ background: radial-gradient(120% 120% at 20% 0%,rgba(255,255,255,.44),transparent 38%), linear-gradient(135deg,var(--wh-primary),#5ef0c2 58%,var(--wh-accent)); color:#04150d; box-shadow:0 14px 36px rgba(34,229,143,.22),0 4px 14px rgba(88,166,255,.12),inset 0 1px 0 rgba(255,255,255,.52); } .btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border-color:var(--wh-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .btn[disabled],.btn.is-disabled{opacity:.48;filter:saturate(.55);cursor:not-allowed;pointer-events:none;box-shadow:none} .btn.is-loading{color:transparent!important;pointer-events:none} .btn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%; border:2px solid currentColor;border-right-color:transparent;color:#04150d;animation:btnSpin .7s linear infinite} .btn-ghost.is-loading::after{color:var(--ink)} .btn.is-success{box-shadow:var(--glow-success)} @keyframes btnSpin{to{transform:rotate(360deg)}} /* Device selection as combined profile builder */ .pick{overflow:hidden;isolation:isolate} .pick::before{content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;z-index:-1; background:radial-gradient(120% 100% at 78% 0%,var(--wh-primary-soft),transparent 58%), radial-gradient(80% 90% at 0% 100%,var(--wh-accent-soft),transparent 65%); transition:opacity var(--motion-card) var(--ease-out)} .pick[aria-pressed="true"]{ border-color:rgba(34,229,143,.48); background:linear-gradient(180deg,rgba(34,229,143,.16),rgba(88,166,255,.055)); box-shadow:var(--glow-active); } .pick[aria-pressed="true"]::before{opacity:1} .pick[aria-pressed="true"]::after{animation:checkIn .22s var(--ease-emph)} .pick.just-selected{animation:selectPulse .34s var(--ease-emph)} @keyframes checkIn{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}} @keyframes selectPulse{0%{transform:scale(.98)}55%{transform:scale(1.025)}100%{transform:scale(1)}} .onb-potential{ position:relative;overflow:hidden;box-shadow:var(--shadow-card); } .onb-potential::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(80% 110% at 82% 0%,rgba(34,229,143,.14),transparent 60%), radial-gradient(70% 100% at 0% 100%,rgba(88,166,255,.10),transparent 62%); opacity:.9} .onb-potential>*{position:relative} .onb-profile{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px} .profile-indicators{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px} .profile-chip{--chip-delay:0ms;display:inline-flex;align-items:center;gap:7px;min-height:32px; border-radius:999px;padding:5px 10px 5px 6px;border:1px solid rgba(34,229,143,.30); background:linear-gradient(180deg,rgba(34,229,143,.12),rgba(88,166,255,.055)); color:var(--acc-text);font-size:var(--fs-micro);font-weight:820;box-shadow:0 8px 22px rgba(34,229,143,.10); animation:chipIn .38s var(--ease-emph) var(--chip-delay) both} .profile-chip i{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-style:normal; background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} @keyframes chipIn{from{opacity:0;transform:translateY(8px) scale(.88)}to{opacity:1;transform:none}} .contrib-panel{display:grid;gap:8px;margin:10px 0 2px} .contrib-row{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center; min-height:42px;padding:8px 10px;border-radius:14px;border:1px solid var(--wh-line); background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); animation:cardIn .42s var(--ease-out) both} .contrib-row .ci{width:26px;height:26px;border-radius:10px;display:grid;place-items:center;background:rgba(34,229,143,.12); border:1px solid rgba(34,229,143,.22);font-style:normal} .contrib-row b{font-size:var(--fs-caption);font-weight:800} .contrib-row small{display:block;color:var(--ink-mute);font-size:10.5px;line-height:1.35} .contrib-row .cv{font-size:var(--fs-caption);font-weight:900;font-variant-numeric:tabular-nums;color:#9af5cd} .contrib-row.pending .cv{color:var(--warn)} .combined-total{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;padding:12px 13px; border-radius:16px;border:1px solid rgba(34,229,143,.36); background:radial-gradient(120% 120% at 85% 0%,rgba(34,229,143,.18),transparent 60%), linear-gradient(180deg,rgba(34,229,143,.12),rgba(88,166,255,.055)); box-shadow:var(--glow-active)} .combined-total span{font-size:var(--fs-micro);font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute)} .combined-total b{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;color:#eafff4} /* Result moments */ .fund-card{ position:relative;overflow:hidden; background: radial-gradient(120% 115% at 84% -8%,rgba(34,229,143,.16),transparent 54%), radial-gradient(80% 90% at 0% 100%,rgba(88,166,255,.10),transparent 62%), linear-gradient(180deg,rgba(23,32,37,.88),rgba(8,12,14,.86)); box-shadow:var(--shadow-card); } .fund-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:.75; background:linear-gradient(140deg,rgba(34,229,143,.55),rgba(255,255,255,.08) 36%,rgba(88,166,255,.25) 74%,transparent); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude} .fund-card>*{position:relative} .fund-reveal-card{box-shadow:var(--glow-result);transform-origin:center top} .fund-reveal-card.is-entering{animation:resultEnter var(--motion-result) var(--ease-emph) both} .fund-reveal-card.is-ready{box-shadow:var(--glow-result)} .fund-reveal-card.is-ready .btn,.onb-step.is-ready .btn-primary{animation:ctaReady .56s var(--ease-emph) both} .fund-total{ font-variant-numeric:tabular-nums; text-shadow:0 0 28px rgba(34,229,143,.22),0 0 18px rgba(88,166,255,.12); transition:text-shadow var(--motion-result) var(--ease-out),color var(--motion-card) var(--ease-out); } .fund-total.counting{animation:amountGlow var(--motion-result) var(--ease-out) both} .result-amount{font-size:clamp(36px,10vw,48px);line-height:.98;letter-spacing:-.035em} @keyframes resultEnter{0%{opacity:0;transform:translateY(18px) scale(.985)}58%{opacity:1;transform:translateY(-2px) scale(1.006)}100%{opacity:1;transform:none}} @keyframes amountGlow{0%{text-shadow:0 0 0 rgba(34,229,143,0)}45%{text-shadow:0 0 44px rgba(34,229,143,.46),0 0 26px rgba(88,166,255,.24)}100%{text-shadow:0 0 28px rgba(34,229,143,.24),0 0 16px rgba(88,166,255,.16)}} @keyframes ctaReady{0%{transform:translateY(4px);filter:saturate(.86);box-shadow:none}70%{transform:translateY(-1px);filter:saturate(1.08)}100%{transform:none}} .fi{position:relative;overflow:hidden;grid-template-columns:auto 1fr auto auto} .fi::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:99px;background:var(--ink-mute);opacity:.45} .fi-i{width:26px;height:26px;border-radius:10px;display:grid;place-items:center;font-style:normal; background:rgba(255,255,255,.055);border:1px solid var(--wh-line);font-size:13px} .fi.gefunden::before,.fi.gesichert::before,.fi.laeuft::before{background:var(--wh-primary);opacity:1;box-shadow:0 0 12px rgba(34,229,143,.5)} .fi.gefunden,.fi.laeuft{border-color:rgba(34,229,143,.22);background:linear-gradient(180deg,rgba(34,229,143,.075),rgba(255,255,255,.025))} .fi.gesichert{box-shadow:var(--glow-success)} .fi:not([disabled]):hover{box-shadow:var(--glow-active)} .fi .fi-n{grid-column:2/-1} /* Module with meaningful light */ .task-result:not(.flat),.ev-plan .task-result:not(.flat),.p14a .task-result:not(.flat),#tcResult:not(.flat){ border-color:rgba(34,229,143,.32); box-shadow:var(--glow-active); } .task-result.result-pop{animation:resultPop .42s var(--ease-emph)} @keyframes resultPop{0%{transform:translateY(6px);opacity:.74}70%{transform:translateY(-1px);opacity:1}100%{transform:none}} .reco{box-shadow:var(--glow-recommended)} .hour.win,.chart .cb.win,.bh[aria-pressed="true"],.tp[aria-pressed="true"],.rule-switch.on{ box-shadow:var(--glow-active); } /* Auth: trustworthy complete flow */ .auth-inner{gap:0} .auth-benefits{ padding:12px;border:1px solid var(--wh-line);border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); box-shadow:var(--shadow-card); } .auth-benefits li{align-items:center;min-height:28px} .auth-benefits li::before{width:20px;height:20px;display:grid;place-items:center;border-radius:999px; background:var(--wh-primary-soft);box-shadow:0 0 16px rgba(34,229,143,.16)} .auth.is-register .auth-benefits{border-color:rgba(34,229,143,.28);box-shadow:var(--glow-active)} .field input,select,textarea{transition:border-color var(--motion-control) var(--ease-out),box-shadow var(--motion-control) var(--ease-out),background var(--motion-control) var(--ease-out)} .field input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(34,229,143,.16),inset 0 1px 0 rgba(255,255,255,.10)} .field input[aria-invalid="true"]{box-shadow:0 0 0 3px var(--wh-danger-soft)} .form-err.show{animation:errIn .22s var(--ease-out)} @keyframes errIn{from{transform:translateY(-3px);opacity:0}to{transform:none;opacity:1}} /* Profile/settings hierarchy */ .phead{background: radial-gradient(100% 100% at 86% 0%,rgba(34,229,143,.12),transparent 58%), linear-gradient(180deg,var(--wh-surface-1),var(--wh-surface-0))} .row .chev{transition:transform var(--motion-control) var(--ease-out),opacity var(--motion-control) var(--ease-out)} .row:hover .chev{transform:translateX(2px);opacity:1} .row .ico{transition:transform var(--motion-control) var(--ease-out),box-shadow var(--motion-card) var(--ease-out)} .row:hover .ico{transform:scale(1.04);box-shadow:0 0 18px rgba(34,229,143,.12)} /* Light-mode overrides */ html[data-theme="day"] .fund-card{ background: radial-gradient(120% 115% at 84% -8%,rgba(13,156,102,.15),transparent 54%), radial-gradient(80% 90% at 0% 100%,rgba(47,120,232,.08),transparent 62%), linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58)); } html[data-theme="day"] .profile-chip{color:#0a6e49;background:linear-gradient(180deg,rgba(13,156,102,.12),rgba(47,120,232,.045));box-shadow:0 8px 20px rgba(13,156,102,.10)} html[data-theme="day"] .profile-chip i{background:rgba(255,255,255,.74)} html[data-theme="day"] .contrib-row{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.45))} html[data-theme="day"] .contrib-row .cv,html[data-theme="day"] .combined-total b{color:#0a7d54} html[data-theme="day"] .combined-total{background:linear-gradient(180deg,rgba(13,156,102,.12),rgba(47,120,232,.045));border-color:rgba(13,156,102,.30)} html[data-theme="day"] .auth-benefits{background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.48));border-color:rgba(255,255,255,.86)} html[data-theme="day"] .btn-primary{color:#052016} @media(prefers-reduced-motion:reduce){ .fund-reveal-card.is-entering,.fund-total.counting,.profile-chip,.contrib-row,.task-result.result-pop, .pick.just-selected,.fund-reveal-card.is-ready .btn,.onb-step.is-ready .btn-primary,.form-err.show{ animation:none!important } .btn::before{display:none} } /* ===== Stufen-Umbau (Punkte 3–5): ⓘ-Aufklapper, Sparpotenzial-Stufen, Chip-Farben ===== */ details.how{margin-top:10px} details.how>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-mute);-webkit-user-select:none;user-select:none} details.how>summary::-webkit-details-marker{display:none} details.how>summary::before{content:"ⓘ";font-size:13px;opacity:.85} details.how[open]>summary{color:var(--ink)} details.how>.how-body{margin-top:6px} .fund-tier{margin-top:16px} .fund-tier:first-child{margin-top:8px} .ft-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} .ft-t b{font-size:14px;letter-spacing:.01em} .ft-t small{display:block;color:var(--ink-mute);font-size:12px;margin-top:1px} .ft-sum{margin-left:auto;font-weight:750;font-size:14px;white-space:nowrap} /* „offen" einheitlich bernstein — grün ist für „erledigt" reserviert */ .fi.gefunden .fi-s{color:#ffd166;border-color:rgba(255,209,102,.4);background:rgba(255,209,102,.08)} html[data-theme="day"] .fi.gefunden .fi-s{color:#8a6a00;border-color:rgba(180,140,20,.4);background:rgba(255,209,102,.18)} html[data-theme="day"] .fi.offen .fi-s{color:#8a6a00;border-color:rgba(180,140,20,.4);background:rgba(255,209,102,.18)} /* ===== Fix: Stepper-Overflow auf schmalen Handys — Plan-Tab lief bei 360px 27px über. Unter 380px passen zwei Stepper (Knopf+Wert+Knopf) nicht nebeneinander → untereinander. ===== */ @media (max-width:380px){ .steppers{grid-template-columns:1fr} } /* ===== Mail-Flows: Passwort-vergessen-Link, Bestätigungs-Hinweis, Toast ===== */ .linklike{background:none;border:0;color:var(--ink-mute);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:block;margin:12px auto 0;padding:4px} .linklike:hover{color:var(--ink)} .form-err.is-info{color:#7ce8b4} #verifyRow .btn{flex:none;width:auto;padding:7px 13px;font-size:12.5px} .app-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(8px);background:#123326;color:#bdf7da;border:1px solid rgba(46,243,154,.35);border-radius:12px;padding:10px 16px;font-size:13.5px;z-index:120;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:88vw;text-align:center} .app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} html[data-theme="day"] .app-toast{background:#e7f8ef;color:#0c5c38;border-color:rgba(18,120,72,.35)} /* ============ Erklär-Satz pro Tab (Erstbesuch, UX-Menü 2026-08-03) ============ */ .tab-hint{display:flex;align-items:flex-start;gap:10px;background:var(--surface-2);border:1px solid var(--green-line); border-radius:14px;padding:11px 12px 11px 14px;margin:0 0 14px;font-size:13.5px;line-height:1.45;color:var(--ink-soft); animation:tabHintIn .35s ease} .tab-hint button{flex:none;border:0;background:transparent;color:var(--ink-mute);font-size:19px;line-height:1; padding:2px 4px;margin:-2px -2px 0 auto;cursor:pointer;border-radius:8px} .tab-hint button:hover{color:var(--ink)} .tab-hint button:focus-visible{outline:2px solid var(--green);outline-offset:2px} @keyframes tabHintIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.tab-hint{animation:none}} html[data-theme="day"] .tab-hint{background:#fff;border-color:rgba(18,120,72,.22);color:#3d4a43} /* ============ Wunschzeit für den Tages-Push (UX-Menü 2026-08-03) ============ */ .push-time{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 4px} .push-time label{font-size:13.5px;font-weight:650;color:var(--ink-soft)} .push-time .hint{flex-basis:100%;margin:0;font-size:12.5px} /* ============ Stabilität (2026-08-03): natives Pull-to-Refresh aus ============ Der Browser-eigene Zieh-nach-unten-Reload feuerte nach Pinch-Zoom-Out und kollidierte mit unserem sanften In-App-Refresh (#ptr) — ganze Seite lud neu. Der In-App-Refresh bleibt; auch Scroll-Chaining in Sheets ist damit ruhig. */ html,body{overscroll-behavior-y:none} /* Geschlossene Sheets wirklich verstecken (2026-08-03): nur-transform ließ sie beim Pinch-Zoom ins Bild ragen und im Fokus-/A11y-Baum. Visibility flippt erst NACH der Zuklapp-Animation — Auf/Zu sieht aus wie vorher. */ .sheet{visibility:hidden;transition:transform var(--t-sheet) var(--ease),visibility 0s linear var(--t-sheet)} .sheet.open{visibility:visible;transition:transform var(--t-sheet) var(--ease),visibility 0s}