/* ===================================================================== AURA PORTAL · Designsystem nach Aura Zentrale v19 Farbwelt: Bereich: Ansicht: (Skins: ansichten.css) ===================================================================== */ @property --au1{syntax:'';inherits:true;initial-value:#3fd2c7} @property --au2{syntax:'';inherits:true;initial-value:#a78bfa} :root{ --acc:var(--au1);--acc2:color-mix(in srgb,var(--au1) 70%,#fff);--accd:color-mix(in srgb,var(--au1) 64%,#000); --acc-soft:color-mix(in srgb,var(--au1) 13%,transparent);--acc-line:color-mix(in srgb,var(--au1) 36%,transparent);--acc-ink:#0a0a12; --glow:0 0 0 1px var(--acc-line),0 10px 32px -12px color-mix(in srgb,var(--au1) 60%,transparent); --grad:linear-gradient(135deg,var(--au1),var(--au2)); --gold-soft:color-mix(in srgb,var(--gold) 12%,transparent);--gold-line:color-mix(in srgb,var(--gold) 32%,transparent); --goldg:linear-gradient(135deg,color-mix(in srgb,var(--gold) 55%,#fff) 0%,var(--gold) 42%,color-mix(in srgb,var(--gold) 72%,#6b4a14) 100%); --ok-soft:color-mix(in srgb,var(--ok) 13%,transparent);--warn-soft:color-mix(in srgb,var(--warn) 13%,transparent);--bad-soft:color-mix(in srgb,var(--bad) 13%,transparent); --live-soft:color-mix(in srgb,var(--live) 14%,transparent); --ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--t1:140ms;--t2:240ms;--t3:420ms; --sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px); color-scheme:dark;transition:--au1 1.1s ease,--au2 1.1s ease; } /* 1 · Aurora Noir (Standard) */ :root,:root[data-theme=noir],.vorschau[data-theme=noir]{ --ff:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;--ffd:'Fraunces','Cormorant Garamond',Georgia,serif; --bg:#05070d;--bg2:#070a12;--s0:#0a0e18;--s1:#0e1320;--s2:#141b2b;--s3:#1c2438;--s4:#29334b; --card:rgba(14,19,32,.74);--card2:rgba(24,32,50,.66);--cardx:rgba(13,18,30,.86);--glass:rgba(10,14,24,.72);--glass2:rgba(12,17,29,.9); --line:rgba(255,255,255,.075);--line2:rgba(255,255,255,.12);--line3:rgba(255,255,255,.19);--edge:rgba(240,212,142,.26); --txt:#eef2fb;--txt2:#e0e6f3;--mut:#c2cadd;--mut2:#b0b9cf;--mut3:#8993ae; --gold:#f0d48e;--gold2:#c9a45a;--ok:#4ade80;--warn:#fbbf24;--bad:#fb7185;--info:#7cc4f5;--live:#ff5470;--vio:#a78bfa;--blue:#86b4f5;--pink:#f49ac1; --r:14px;--r2:18px;--rs:10px;--rp:999px;--blur:18px; --sh1:0 1px 2px rgba(0,0,0,.4);--sh2:0 0 0 1px var(--line),0 20px 60px -30px rgba(0,0,0,.8);--sh3:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px var(--line); --au1:#3fd2c7;--au2:#a78bfa; } :root[data-theme=noir][data-area=uebersicht]{--au1:#3fd2c7;--au2:#a78bfa} :root[data-theme=noir][data-area=diamanten]{--au1:#7cf5d4;--au2:#5eb8ff} :root[data-theme=noir][data-area=live]{--au1:#5eb8ff;--au2:#7c8cff} :root[data-theme=noir][data-area=kampagnen]{--au1:#f0d48e;--au2:#f472b6} :root[data-theme=noir][data-area=postfach]{--au1:#a78bfa;--au2:#f472b6} :root[data-theme=noir][data-area=plan]{--au1:#f0d48e;--au2:#3fd2c7} :root[data-theme=noir][data-area=profil]{--au1:#5ee0b0;--au2:#5eb8ff} /* 2 · Eclipse */ :root[data-theme=eclipse],.vorschau[data-theme=eclipse]{ --ff:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;--ffd:'Sora','Manrope',system-ui,sans-serif; --bg:#0b0b0e;--bg2:#0e0e12;--s0:#111115;--s1:#16161b;--s2:#1c1c22;--s3:#26262e;--s4:#32323c; --card:rgba(23,23,29,.82);--card2:rgba(34,34,42,.8);--cardx:rgba(20,20,25,.9);--glass:rgba(14,14,18,.78);--glass2:rgba(18,18,23,.92); --line:rgba(255,255,255,.065);--line2:rgba(255,255,255,.12);--line3:rgba(255,255,255,.18);--edge:color-mix(in srgb,var(--au1) 30%,transparent); --txt:#f4f3ef;--txt2:#e7e5df;--mut:#c9c6cd;--mut2:#b5b2bb;--mut3:#908d99; --gold:#ffcf7a;--gold2:#d9a24a;--ok:#5eead4;--warn:#fdba74;--bad:#fb7185;--info:#7dd3fc;--live:#ff5a6e;--vio:#c4b5fd;--blue:#93c5fd;--pink:#f9a8d4; --r:12px;--r2:14px;--rs:9px;--blur:10px; --sh2:0 0 0 1px var(--line),0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -40px rgba(0,0,0,.9);--sh3:0 34px 80px -34px rgba(0,0,0,.95),0 0 0 1px var(--line); --au1:#ffcf7a;--au2:#fb923c; } :root[data-theme=eclipse][data-area=uebersicht]{--au1:#ffcf7a;--au2:#fb923c} :root[data-theme=eclipse][data-area=diamanten]{--au1:#5eead4;--au2:#38bdf8} :root[data-theme=eclipse][data-area=live]{--au1:#7dd3fc;--au2:#5eead4} :root[data-theme=eclipse][data-area=kampagnen]{--au1:#ffcf7a;--au2:#f0abfc} :root[data-theme=eclipse][data-area=postfach]{--au1:#c4b5fd;--au2:#f0abfc} :root[data-theme=eclipse][data-area=plan]{--au1:#86efac;--au2:#fde68a} :root[data-theme=eclipse][data-area=profil]{--au1:#7dd3fc;--au2:#5eead4} /* 3 · Nebula Glass */ :root[data-theme=nebula],.vorschau[data-theme=nebula]{ --ff:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;--ffd:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif; --bg:#070618;--bg2:#0a0920;--s0:#0c0a22;--s1:#120f2e;--s2:#19153c;--s3:#231e4e;--s4:#302a66; --card:rgba(24,20,60,.62);--card2:rgba(40,34,92,.56);--cardx:rgba(18,15,46,.86);--glass:rgba(14,12,38,.66);--glass2:rgba(17,14,44,.9); --line:rgba(160,150,255,.14);--line2:rgba(160,150,255,.22);--line3:rgba(170,160,255,.32);--edge:rgba(120,220,255,.3); --txt:#f1efff;--txt2:#e3e0fb;--mut:#c6c2ea;--mut2:#b5b1e0;--mut3:#948fca; --gold:#ffd88a;--gold2:#e0ad55;--ok:#34f5c5;--warn:#ffc46b;--bad:#ff6b9a;--info:#6ee7ff;--live:#ff5c8a;--vio:#b388ff;--blue:#8fb8ff;--pink:#ff8ad8; --r:16px;--r2:22px;--rs:11px;--blur:26px; --sh2:0 0 0 1px var(--line),0 0 40px -14px color-mix(in srgb,var(--au1) 32%,transparent);--sh3:0 30px 80px -30px rgba(0,0,0,.85),0 0 0 1px var(--line2),0 0 60px -20px color-mix(in srgb,var(--au1) 30%,transparent); --au1:#6ee7ff;--au2:#b388ff; } :root[data-theme=nebula][data-area=uebersicht]{--au1:#6ee7ff;--au2:#b388ff} :root[data-theme=nebula][data-area=diamanten]{--au1:#7cf5d4;--au2:#6ee7ff} :root[data-theme=nebula][data-area=live]{--au1:#8fb8ff;--au2:#b388ff} :root[data-theme=nebula][data-area=kampagnen]{--au1:#ffd88a;--au2:#ff8ad8} :root[data-theme=nebula][data-area=postfach]{--au1:#ff8ad8;--au2:#b388ff} :root[data-theme=nebula][data-area=plan]{--au1:#ffd88a;--au2:#7cf5d4} :root[data-theme=nebula][data-area=profil]{--au1:#8affc1;--au2:#6ee7ff} /* 4 bis 11 · Weitere Farbwelten (Punkt 55) */ :root[data-theme=midnight],.vorschau[data-theme=midnight]{--ff:'Inter',system-ui,sans-serif;--ffd:'Fraunces',Georgia,serif;--bg:#04070f;--bg2:#060a15;--s0:#080d1a;--s1:#0c1324;--s2:#111a30;--s3:#18233f;--s4:#233054;--card:rgba(11,17,30,.8);--card2:rgba(20,29,50,.7);--cardx:rgba(9,14,26,.9);--glass:rgba(7,11,22,.76);--glass2:rgba(9,14,26,.92);--line:rgba(140,170,255,.09);--line2:rgba(140,170,255,.16);--line3:rgba(140,170,255,.24);--edge:rgba(120,160,255,.28);--txt:#eaf0ff;--txt2:#dbe4fb;--mut:#b8c4e6;--mut2:#a4b2d8;--mut3:#7f8db4;--gold:#e8d29a;--gold2:#c4aa62;--ok:#4ade80;--warn:#fbbf24;--bad:#fb7185;--info:#7cc4f5;--live:#ff5470;--vio:#9aa8ff;--blue:#86b4f5;--pink:#f49ac1;--au1:#86b4f5;--au2:#5b7cff} :root[data-theme=midnight][data-area=diamanten]{--au1:#9be7ff;--au2:#86b4f5}:root[data-theme=midnight][data-area=kampagnen]{--au1:#e8d29a;--au2:#86b4f5}:root[data-theme=midnight][data-area=plan]{--au1:#e8d29a;--au2:#5b7cff}:root[data-theme=midnight][data-area=postfach]{--au1:#9aa8ff;--au2:#86b4f5}:root[data-theme=midnight][data-area=profil]{--au1:#7de3d1;--au2:#86b4f5} :root[data-theme=obsidian],.vorschau[data-theme=obsidian]{--ff:'Inter',system-ui,sans-serif;--ffd:'Fraunces',Georgia,serif;--bg:#050505;--bg2:#080808;--s0:#0b0b0b;--s1:#111111;--s2:#171717;--s3:#202020;--s4:#2b2b2b;--card:rgba(17,17,17,.86);--card2:rgba(26,26,26,.8);--cardx:rgba(13,13,13,.92);--glass:rgba(10,10,10,.8);--glass2:rgba(13,13,13,.94);--line:rgba(240,212,142,.1);--line2:rgba(240,212,142,.18);--line3:rgba(240,212,142,.28);--edge:rgba(240,212,142,.4);--txt:#f5f1e6;--txt2:#e9e3d2;--mut:#c8c1ad;--mut2:#b5ae9a;--mut3:#8d8776;--gold:#f0d48e;--gold2:#c9a45a;--ok:#5ee0a0;--warn:#fbbf24;--bad:#fb7185;--info:#8bc6f0;--live:#ff5470;--vio:#c4b5fd;--blue:#93c5fd;--pink:#f9a8d4;--au1:#f0d48e;--au2:#c9a45a} :root[data-theme=obsidian][data-area=diamanten]{--au1:#f6e3b0;--au2:#c9a45a}:root[data-theme=obsidian][data-area=live]{--au1:#e6cf8a;--au2:#b28f43}:root[data-theme=obsidian][data-area=postfach]{--au1:#f0d48e;--au2:#8d8776}:root[data-theme=obsidian][data-area=profil]{--au1:#d9c489;--au2:#f0d48e} :root[data-theme=champagne],.vorschau[data-theme=champagne]{--ff:'Manrope',system-ui,sans-serif;--ffd:'Fraunces',Georgia,serif;--bg:#100b07;--bg2:#140e09;--s0:#19120c;--s1:#201810;--s2:#291f15;--s3:#35291c;--s4:#463726;--card:rgba(32,24,16,.8);--card2:rgba(46,35,24,.72);--cardx:rgba(25,18,12,.9);--glass:rgba(22,16,10,.78);--glass2:rgba(26,19,12,.93);--line:rgba(255,220,170,.1);--line2:rgba(255,220,170,.17);--line3:rgba(255,220,170,.26);--edge:rgba(255,215,150,.38);--txt:#fbf3e8;--txt2:#f1e6d5;--mut:#d6c6ae;--mut2:#c3b199;--mut3:#9a8a72;--gold:#ffd9a0;--gold2:#d4a866;--ok:#8fd9a8;--warn:#ffc46b;--bad:#ff8a8a;--info:#9cc7ee;--live:#ff5f70;--vio:#d3b8ff;--blue:#a9c4f5;--pink:#f7b0c9;--au1:#ffd9a0;--au2:#e0916a} :root[data-theme=champagne][data-area=diamanten]{--au1:#ffe7bf;--au2:#d4a866}:root[data-theme=champagne][data-area=live]{--au1:#f5c58d;--au2:#c9855c}:root[data-theme=champagne][data-area=postfach]{--au1:#ecc9a4;--au2:#d3b8ff}:root[data-theme=champagne][data-area=profil]{--au1:#c9d9a8;--au2:#ffd9a0} :root[data-theme=rose],.vorschau[data-theme=rose]{--ff:'Plus Jakarta Sans',system-ui,sans-serif;--ffd:'Fraunces',Georgia,serif;--bg:#120609;--bg2:#17080c;--s0:#1c0b10;--s1:#241016;--s2:#2e151d;--s3:#3b1c26;--s4:#4c2633;--card:rgba(36,16,22,.8);--card2:rgba(52,24,33,.72);--cardx:rgba(28,11,16,.9);--glass:rgba(24,9,13,.78);--glass2:rgba(30,12,17,.93);--line:rgba(255,180,200,.1);--line2:rgba(255,180,200,.17);--line3:rgba(255,180,200,.26);--edge:rgba(255,170,190,.36);--txt:#fff0f4;--txt2:#f6e2e8;--mut:#dcc0c9;--mut2:#c9abb5;--mut3:#9e8590;--gold:#f2cfa2;--gold2:#cfa06c;--ok:#7fdca4;--warn:#ffc46b;--bad:#ff7a92;--info:#9cc7ee;--live:#ff5f70;--vio:#d9a8ff;--blue:#a9c4f5;--pink:#ff9ec0;--au1:#ff9ec0;--au2:#e07a5f} :root[data-theme=rose][data-area=diamanten]{--au1:#ffc1d6;--au2:#ff9ec0}:root[data-theme=rose][data-area=live]{--au1:#ffb3a7;--au2:#e07a5f}:root[data-theme=rose][data-area=kampagnen]{--au1:#f2cfa2;--au2:#ff9ec0}:root[data-theme=rose][data-area=postfach]{--au1:#d9a8ff;--au2:#ff9ec0}:root[data-theme=rose][data-area=profil]{--au1:#9edbd0;--au2:#ff9ec0} :root[data-theme=emerald],.vorschau[data-theme=emerald]{--ff:'Manrope',system-ui,sans-serif;--ffd:'Sora',system-ui,sans-serif;--bg:#04100b;--bg2:#06150e;--s0:#081a12;--s1:#0c2219;--s2:#102b20;--s3:#16382a;--s4:#1f4a38;--card:rgba(12,34,25,.8);--card2:rgba(18,48,36,.72);--cardx:rgba(8,26,18,.9);--glass:rgba(7,22,15,.78);--glass2:rgba(9,27,19,.93);--line:rgba(140,255,200,.09);--line2:rgba(140,255,200,.16);--line3:rgba(140,255,200,.25);--edge:rgba(120,240,190,.32);--txt:#eefff6;--txt2:#dff7ea;--mut:#b9dccb;--mut2:#a3c9b7;--mut3:#7ea391;--gold:#e9d79a;--gold2:#bfa95f;--ok:#4ade80;--warn:#fbbf24;--bad:#fb7185;--info:#7cc4f5;--live:#ff5470;--vio:#b8a8ff;--blue:#86b4f5;--pink:#f49ac1;--au1:#5ee0b0;--au2:#2fb58a} :root[data-theme=emerald][data-area=diamanten]{--au1:#8ff5d0;--au2:#5ee0b0}:root[data-theme=emerald][data-area=live]{--au1:#7de3d1;--au2:#4fc3a1}:root[data-theme=emerald][data-area=kampagnen]{--au1:#e9d79a;--au2:#5ee0b0}:root[data-theme=emerald][data-area=postfach]{--au1:#b8a8ff;--au2:#5ee0b0}:root[data-theme=emerald][data-area=plan]{--au1:#e9d79a;--au2:#2fb58a} :root[data-theme=ocean],.vorschau[data-theme=ocean]{--ff:'Inter',system-ui,sans-serif;--ffd:'Space Grotesk',system-ui,sans-serif;--bg:#03111a;--bg2:#051621;--s0:#071c29;--s1:#0a2435;--s2:#0e2e43;--s3:#143b55;--s4:#1c4c6c;--card:rgba(10,36,53,.8);--card2:rgba(16,50,72,.72);--cardx:rgba(7,28,41,.9);--glass:rgba(6,24,36,.78);--glass2:rgba(8,29,43,.93);--line:rgba(120,220,255,.1);--line2:rgba(120,220,255,.17);--line3:rgba(120,220,255,.26);--edge:rgba(100,220,255,.34);--txt:#ecfaff;--txt2:#dbf3fc;--mut:#b4d6e4;--mut2:#9cc3d3;--mut3:#749cae;--gold:#f0d48e;--gold2:#c9a45a;--ok:#4ade80;--warn:#fbbf24;--bad:#fb7185;--info:#7cc4f5;--live:#ff5470;--vio:#a78bfa;--blue:#6ec3ff;--pink:#f49ac1;--au1:#3fd2c7;--au2:#2c93c9} :root[data-theme=ocean][data-area=diamanten]{--au1:#7cf5d4;--au2:#3fd2c7}:root[data-theme=ocean][data-area=live]{--au1:#6ec3ff;--au2:#2c93c9}:root[data-theme=ocean][data-area=kampagnen]{--au1:#f0d48e;--au2:#3fd2c7}:root[data-theme=ocean][data-area=postfach]{--au1:#a78bfa;--au2:#3fd2c7}:root[data-theme=ocean][data-area=profil]{--au1:#8affc1;--au2:#6ec3ff} :root[data-theme=amethyst],.vorschau[data-theme=amethyst]{--ff:'Plus Jakarta Sans',system-ui,sans-serif;--ffd:'Sora',system-ui,sans-serif;--bg:#0d0716;--bg2:#110a1d;--s0:#160d26;--s1:#1c1230;--s2:#25183e;--s3:#31214f;--s4:#412c68;--card:rgba(28,18,48,.78);--card2:rgba(42,28,68,.7);--cardx:rgba(22,13,38,.9);--glass:rgba(18,11,32,.78);--glass2:rgba(22,13,38,.93);--line:rgba(190,160,255,.12);--line2:rgba(190,160,255,.2);--line3:rgba(190,160,255,.3);--edge:rgba(200,170,255,.36);--txt:#f5f0ff;--txt2:#eae1ff;--mut:#cbbde6;--mut2:#b8a9d6;--mut3:#8f80af;--gold:#f0d48e;--gold2:#c9a45a;--ok:#5ee0a0;--warn:#ffc46b;--bad:#ff6b9a;--info:#8fb8ff;--live:#ff5c8a;--vio:#c9a3ff;--blue:#8fb8ff;--pink:#ff8ad8;--au1:#c9a3ff;--au2:#8a5cff} :root[data-theme=amethyst][data-area=diamanten]{--au1:#e0ccff;--au2:#c9a3ff}:root[data-theme=amethyst][data-area=live]{--au1:#a9b8ff;--au2:#8a5cff}:root[data-theme=amethyst][data-area=kampagnen]{--au1:#f0d48e;--au2:#c9a3ff}:root[data-theme=amethyst][data-area=postfach]{--au1:#ff8ad8;--au2:#c9a3ff}:root[data-theme=amethyst][data-area=profil]{--au1:#8fe3d4;--au2:#c9a3ff} :root[data-theme=ember],.vorschau[data-theme=ember]{--ff:'Inter Tight',system-ui,sans-serif;--ffd:'Fraunces',Georgia,serif;--bg:#12060a;--bg2:#17080c;--s0:#1d0b0f;--s1:#261014;--s2:#31161b;--s3:#3f1d22;--s4:#52272c;--card:rgba(38,16,20,.8);--card2:rgba(54,24,29,.72);--cardx:rgba(29,11,15,.9);--glass:rgba(25,9,12,.78);--glass2:rgba(31,12,16,.93);--line:rgba(255,170,140,.1);--line2:rgba(255,170,140,.17);--line3:rgba(255,170,140,.26);--edge:rgba(255,160,120,.36);--txt:#fff2ee;--txt2:#f8e4de;--mut:#dcbfb7;--mut2:#c9aba2;--mut3:#9e837c;--gold:#f7cf8c;--gold2:#d0a05a;--ok:#7fdca4;--warn:#ffc46b;--bad:#ff7a7a;--info:#9cc7ee;--live:#ff5f70;--vio:#d9a8ff;--blue:#a9c4f5;--pink:#ff9ec0;--au1:#ff8a5c;--au2:#e0413f} :root[data-theme=ember][data-area=diamanten]{--au1:#ffb08a;--au2:#ff8a5c}:root[data-theme=ember][data-area=live]{--au1:#ff9e7a;--au2:#c9302e}:root[data-theme=ember][data-area=kampagnen]{--au1:#f7cf8c;--au2:#ff8a5c}:root[data-theme=ember][data-area=postfach]{--au1:#ff9ec0;--au2:#ff8a5c}:root[data-theme=ember][data-area=profil]{--au1:#9edbd0;--au2:#ff8a5c} /* Vorschauen im Design-Bereich: gleiche Farben, kleine Karte */ .vorschau[data-theme]{display:block;height:64px;border-radius:12px;position:relative;overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line3)} .vorschau i{position:absolute;display:block;border-radius:6px} .vorschau .p1{left:8px;top:8px;width:34%;height:22px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2)} .vorschau .p2{right:8px;top:8px;width:44%;height:22px;border-radius:50px;background:linear-gradient(90deg,var(--au1),var(--au2))} .vorschau .p3{left:8px;bottom:8px;width:60%;height:16px;background:var(--gold);opacity:.85} .vorschau .p4{right:8px;bottom:8px;width:16px;height:16px;border-radius:50%;background:var(--au1)} /* ---------- Grundlage ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;background:var(--bg)} body{background:var(--bg);color:var(--txt);font-family:var(--ff);min-height:100vh;min-height:100dvh;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .8s} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent} input,select,textarea{font:inherit;color:inherit} a{color:var(--acc2)} ::selection{background:color-mix(in srgb,var(--au1) 34%,transparent);color:#fff} :focus-visible{outline:2px solid var(--au1);outline-offset:2px} *{scrollbar-color:color-mix(in srgb,var(--au1) 22%,var(--s3)) transparent} .defs{position:absolute;width:0;height:0} #a19g .a19s1{stop-color:var(--au1)}#a19g .a19s2{stop-color:var(--au2)} #a19gg .a19s1{stop-color:color-mix(in srgb,var(--gold) 55%,#fff)}#a19gg .a19s2{stop-color:var(--gold2)} /* ---------- Hintergrund in Bewegung ---------- */ .aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict} .aurora>i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.34;mix-blend-mode:screen;will-change:transform} .aurora>i:nth-child(1){width:60vw;height:60vw;left:-15vw;top:-25vw;background:radial-gradient(circle,var(--au1) 0%,transparent 65%);animation:a19d1 38s ease-in-out infinite alternate} .aurora>i:nth-child(2){width:55vw;height:55vw;right:-18vw;top:10vh;background:radial-gradient(circle,var(--au2) 0%,transparent 65%);animation:a19d2 46s ease-in-out infinite alternate} .aurora>i:nth-child(3){width:50vw;height:50vw;left:25vw;bottom:-35vw;background:radial-gradient(circle,var(--gold) 0%,transparent 62%);opacity:.12;animation:a19d3 52s ease-in-out infinite alternate} @keyframes a19d1{to{transform:translate(18vw,14vh) scale(1.15)}} @keyframes a19d2{to{transform:translate(-20vw,18vh) scale(.9)}} @keyframes a19d3{to{transform:translate(-14vw,-10vh) scale(1.2)}} .aurora>i.veil,.aurora>i.stars,.aurora>i.spot,.aurora>i.grain{border-radius:0;filter:none;mix-blend-mode:normal;opacity:0;width:auto;height:auto;animation:none;transition:opacity 1s} .aurora>i.veil{inset:-20%;background:repeating-linear-gradient(115deg,transparent 0 6%,color-mix(in srgb,var(--au1) 10%,transparent) 9%,transparent 13%);filter:blur(22px);animation:a19veil 30s linear infinite} @keyframes a19veil{to{transform:translateX(12%)}} .aurora>i.stars{inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff9,transparent),radial-gradient(1px 1px at 70% 20%,#fff7,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff8,transparent),radial-gradient(1px 1px at 85% 60%,#fff6,transparent),radial-gradient(1px 1px at 10% 70%,#fff6,transparent),radial-gradient(1.2px 1.2px at 55% 45%,#fff5,transparent),radial-gradient(1px 1px at 30% 55%,#fff5,transparent),radial-gradient(1.3px 1.3px at 92% 12%,#fff7,transparent);background-size:420px 420px} @keyframes a19tw{from{opacity:1}to{opacity:.45}} .aurora>i.spot{left:50%;top:-40vh;width:120vw;height:80vh;transform:translateX(-50%);background:radial-gradient(ellipse at center,color-mix(in srgb,var(--au1) 18%,transparent),transparent 60%)} .aurora>i.grain{inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} [data-theme=noir] .aurora>i.veil{opacity:.9} [data-theme=eclipse] .aurora>i:nth-child(-n+3){opacity:.2;filter:blur(120px)} [data-theme=eclipse] .aurora>i:nth-child(2){opacity:.14} [data-theme=eclipse] .aurora>i:nth-child(3){opacity:.08} [data-theme=eclipse] .aurora>i.spot{opacity:1} [data-theme=nebula] .aurora>i:nth-child(-n+2){opacity:.5} [data-theme=nebula] .aurora>i:nth-child(3){opacity:.2} [data-theme=nebula] .aurora>i.stars{opacity:1;animation:a19tw 8s ease-in-out infinite alternate} @media(max-width:900px){.aurora>i:nth-child(-n+3){filter:blur(70px)}} /* ---------- Rahmen: Seitenleiste, Kopf, Inhalt, Leiste unten ---------- */ #app{position:relative;z-index:1;min-height:100vh;min-height:100dvh} .huelle{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh} .seite{display:none} .kopf{display:flex;align-items:center;gap:12px;padding:calc(12px + var(--sat)) 16px 10px;position:sticky;top:0;z-index:8;background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(var(--blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);border-bottom:1px solid var(--line)} .kopf .logo{height:26px;width:auto;display:block} .kopf .sp{flex:1} .inhalt{padding:16px 14px calc(104px + var(--sab));max-width:640px;width:100%;margin:0 auto} .unten{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--sab));width:calc(100% - 20px);max-width:600px;height:64px;border-radius:22px;background:var(--glass2);box-shadow:var(--sh3);display:flex;justify-content:space-around;align-items:center;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));z-index:10;border:1px solid var(--line)} .unten button{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10.5px var(--ff);color:var(--mut2);flex:1;height:100%;position:relative;transition:color .25s;border-radius:12px} .unten button.on{color:var(--au1)} .unten button.on::before{content:"";position:absolute;top:7px;width:18px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--au1),var(--au2));box-shadow:0 0 12px var(--au1)} .unten svg,.nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .unten .punkt,.nav .n{position:absolute;top:10px;right:calc(50% - 16px);min-width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--bg)} .avatar{width:36px;height:36px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--gold),var(--au1));color:#111;font:600 13px var(--ffd);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 18px -4px var(--au1)} .avatar img{width:100%;height:100%;object-fit:cover;display:block} .avatar.gross{width:56px;height:56px;font-size:20px} .avatar.live::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--live);animation:a19ring 2s ease-out infinite} .avatar.live{position:relative;overflow:visible} .avatar.live img{border-radius:50%} @keyframes a19ring{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.3)}} /* PC: Seitenleiste wie in der Zentrale */ @media(min-width:1000px){ .huelle{grid-template-columns:236px minmax(0,1fr)} .seite{display:flex;flex-direction:column;gap:4px;padding:18px 14px 14px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--bg) 58%,transparent);backdrop-filter:blur(var(--blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);position:sticky;top:0;height:100vh;height:100dvh;overflow:auto;scrollbar-width:thin;scrollbar-color:transparent transparent} .seite:hover{scrollbar-color:var(--line3) transparent} .seite::-webkit-scrollbar{width:6px} .seite::-webkit-scrollbar-thumb{background:transparent;border-radius:3px} .seite:hover::-webkit-scrollbar-thumb{background:var(--line3)} .seite .who .avatar{width:38px;height:38px;flex:none} .seite .who>div{min-width:0} .seite .who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .seite .marke{padding:6px 8px 18px} .seite .marke img{width:150px;height:auto;display:block;filter:drop-shadow(0 0 14px rgba(240,212,142,.25))} .seite .marke small{display:block;font:600 10px var(--ff);letter-spacing:.32em;color:var(--mut3);margin-top:10px;padding-left:2px} .seite .nlabel{font:700 9.5px var(--ff);letter-spacing:.18em;color:var(--mut3);margin:12px 12px 6px;text-transform:uppercase} .nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font:600 13px var(--ff);color:var(--mut2);position:relative;transition:color .25s,background .25s;width:100%;text-align:left} .nav svg{opacity:.7} .nav:hover{color:var(--txt);background:rgba(255,255,255,.045)} .nav.on{color:var(--txt);background:color-mix(in srgb,var(--au1) 13%,transparent)} .nav.on svg{opacity:1;color:var(--au1);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--au1) 60%,transparent))} .nav.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:3px;background:linear-gradient(var(--au1),var(--au2));box-shadow:0 0 14px var(--au1)} .nav .n{position:static;margin-left:auto;background:color-mix(in srgb,var(--au1) 18%,transparent);color:var(--txt);font:700 10.5px var(--ff);border-radius:20px;padding:2px 8px;min-width:20px;height:auto;box-shadow:none;text-align:center} .seite .sp{flex:1} .a19th{margin:14px 0 10px;padding:10px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)} .a19th>small{display:block;font:700 9.5px var(--ff);letter-spacing:.18em;text-transform:uppercase;color:var(--mut3);margin:0 2px 8px} .a19th>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px} .a19th button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 7px;border-radius:10px;font:600 10.5px var(--ff);color:var(--mut2);border:1px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)} .a19th button:hover{background:rgba(255,255,255,.05);color:var(--txt);transform:translateY(-1px)} .a19th button.on{background:color-mix(in srgb,var(--au1) 12%,transparent);border-color:color-mix(in srgb,var(--au1) 40%,transparent);color:var(--txt)} .a19th button i{display:block;width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 6px 16px -6px rgba(0,0,0,.8)} .a19th button.on i{box-shadow:0 0 0 2px var(--au1),0 0 16px -2px var(--au1)} .seite .who{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--card);border:1px solid var(--line);margin-top:6px} .seite .who b{font-size:13px;display:block}.seite .who small{display:block;color:var(--mut3);font-size:11px} .kopf{display:none} .unten{display:none} .inhalt{max-width:1320px;padding:26px 34px 60px} .cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start} .cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start} .bcol{display:flex;flex-direction:column;gap:18px} } .thw[data-t=noir]{background:radial-gradient(circle at 30% 30%,#3fd2c7 0,transparent 55%),radial-gradient(circle at 75% 75%,#a78bfa 0,transparent 55%),radial-gradient(circle at 60% 20%,#f0d48e 0,transparent 35%),#05070d} .thw[data-t=eclipse]{background:radial-gradient(ellipse at 50% -10%,#ffcf7a 0,transparent 60%),linear-gradient(#1c1c22,#0b0b0e)} .thw[data-t=nebula]{background:radial-gradient(1px 1px at 30% 40%,#fff,transparent),radial-gradient(1px 1px at 70% 65%,#fff,transparent),radial-gradient(circle at 30% 30%,#6ee7ff 0,transparent 55%),radial-gradient(circle at 75% 70%,#b388ff 0,transparent 60%),#070618} @media(max-width:999px){.cols,.cols3{display:flex;flex-direction:column;gap:12px}.bcol{display:flex;flex-direction:column;gap:12px}} .stapel{display:flex;flex-direction:column;gap:12px} @media(min-width:1000px){.stapel{gap:18px}} /* ---------- Überschriften, Text ---------- */ h1,h2,h3{font-family:var(--ffd);font-weight:600;letter-spacing:-.012em;color:var(--txt)} [data-theme=noir] h1,[data-theme=noir] h2,[data-theme=noir] h3{font-weight:500} .hello{font-family:var(--ffd);font-weight:500;font-size:34px;letter-spacing:-.015em;line-height:1.12} [data-theme=eclipse] .hello,[data-theme=nebula] .hello{font-weight:600} .hello i{font-style:normal;background:linear-gradient(100deg,var(--gold),var(--au1) 60%,var(--au2));-webkit-background-clip:text;background-clip:text;color:transparent} .ueber{font:600 11px var(--ff);letter-spacing:.24em;text-transform:uppercase;color:var(--mut3)} .ueber b{color:var(--gold);font-weight:600} .lbl{font:700 10.5px var(--ff);letter-spacing:.14em;text-transform:uppercase;color:var(--mut3);margin-bottom:8px;display:flex;align-items:center;gap:8px} .lbl .r{margin-left:auto;font:500 11.5px var(--ff);letter-spacing:0;text-transform:none;color:var(--mut3)} p{line-height:1.55} .mut{color:var(--mut)}.mut2{color:var(--mut2)}.mut3{color:var(--mut3)}.klein{font-size:12.5px}.mini{font-size:11.5px} .zeile{display:flex;align-items:center;gap:10px}.sp{flex:1} .big{font-family:var(--ffd);letter-spacing:-.02em} .leer{padding:26px 16px;text-align:center;color:var(--mut);font-size:13.5px;line-height:1.6} .leer svg{width:36px;height:36px;stroke:var(--mut3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px} /* ---------- Karten aus Glas ---------- */ .panel{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 42%),var(--card);border:1px solid var(--line);box-shadow:var(--sh2);border-radius:var(--r2);padding:16px 18px;position:relative;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} [data-theme=noir] .panel{background:linear-gradient(90deg,transparent,var(--edge),transparent) top/100% 1px no-repeat,linear-gradient(180deg,rgba(255,255,255,.022),transparent 42%),var(--card)} [data-theme=eclipse] .panel{border-top-color:var(--edge)} [data-theme=nebula] .panel::after{content:"";display:block;position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--au1) 60%,transparent),transparent 40%,transparent 62%,color-mix(in srgb,var(--au2) 50%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;z-index:1} .panel:hover{border-color:var(--line2)} .panel.kpi:hover,.panel.hover:hover{transform:translateY(-3px);box-shadow:var(--sh2),0 22px 50px -26px color-mix(in srgb,var(--au1) 55%,transparent);border-color:var(--acc-line)} .panel .panel{background:rgba(255,255,255,.03);box-shadow:none;border-color:var(--line)} [data-theme=noir] .panel .panel{background:rgba(255,255,255,.028)} .panel>h3{font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:8px} [data-theme=eclipse] .panel>h3,[data-theme=nebula] .panel>h3{font-size:15px} .panel>h3 .r{margin-left:auto;font:500 11.5px var(--ff);color:var(--mut3)} .b-hero{background:radial-gradient(700px 260px at 92% -30%,color-mix(in srgb,var(--au1) 12%,transparent),transparent 62%),radial-gradient(520px 260px at 0% 130%,color-mix(in srgb,var(--au2) 9%,transparent),transparent 62%),var(--card)} [data-theme=noir] .b-hero{background:linear-gradient(90deg,transparent,var(--edge),transparent) top/100% 1px no-repeat,radial-gradient(700px 260px at 92% -30%,color-mix(in srgb,var(--au1) 12%,transparent),transparent 62%),radial-gradient(520px 260px at 0% 130%,color-mix(in srgb,var(--au2) 9%,transparent),transparent 62%),var(--card)} .fok{background:radial-gradient(640px 220px at 0% -20%,color-mix(in srgb,var(--au1) 11%,transparent),transparent 60%),var(--card)} [data-theme=noir] .fok{background:linear-gradient(90deg,transparent,var(--edge),transparent) top/100% 1px no-repeat,radial-gradient(640px 220px at 0% -20%,color-mix(in srgb,var(--au1) 11%,transparent),transparent 60%),var(--card)} .fok>h3{font-size:19px} /* Kennzahl-Karten */ .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media(min-width:1000px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}.kpis.k2{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))}} .kpi{padding:14px 16px;min-height:96px} .kpi .k{font:700 10.5px var(--ff);letter-spacing:.14em;text-transform:uppercase;color:var(--mut3)} .kpi b{display:block;font:500 30px/1.05 var(--ffd);letter-spacing:-.02em;margin:6px 0 4px} [data-theme=eclipse] .kpi b,[data-theme=nebula] .kpi b{font-weight:600} .kpi b small{font-size:15px;color:var(--mut2);margin-left:2px;font-family:var(--ff);font-weight:500} .kpi .d{font-size:12px;color:var(--mut2)} .kpi .d.up{color:var(--ok)}.kpi .d.dn{color:var(--mut2)}.kpi .d.gold{color:var(--gold)} .kpi svg.spark{position:absolute;right:14px;top:12px;width:72px;height:26px;opacity:.85} .kpi .d{display:block;margin-top:2px} @media(max-width:999px){.kpi svg.spark{width:56px;height:22px;opacity:.6}} .spark path{stroke:var(--au1);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;animation:draw 1.8s .3s forwards ease} .spark path.f{fill:url(#a19g);stroke:none;opacity:.14;animation:none} @keyframes draw{to{stroke-dashoffset:0}} /* Ringe */ .ringe{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap} .ringe.z5 .ring10.gross .ctr b{font-size:26px!important} .ringe.z6 .ring10.gross .ctr b{font-size:23px!important} @media(max-width:999px){.ringe.z4 .ring10.gross .ctr b{font-size:20px!important}.ringe.z5 .ring10.gross .ctr b{font-size:18px!important}.ringe.z6 .ring10.gross .ctr b{font-size:16px!important}} @media(max-width:380px){.ringe.z4 .ring10.gross .ctr b{font-size:18px!important}.ringe.z5 .ring10.gross .ctr b{font-size:16px!important}.ringe.z6 .ring10.gross .ctr b{font-size:14px!important}} small.fehlt{display:block;margin-top:2px} .ring10{position:relative;width:var(--rg,120px);height:var(--rg,120px);flex:none;display:grid;place-items:center} .ring10 svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible} .ring10 circle{fill:none;stroke-width:9;stroke-linecap:round} .ring10 .bg{stroke:rgba(255,255,255,.08)} .ring10 .fg{stroke:url(#a19gg);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gold) 45%,transparent));transition:stroke-dashoffset 1.8s var(--ease)} .ring10.acc .fg{stroke:url(#a19g);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--au1) 45%,transparent))} .ring10.ok .fg{stroke:var(--ok);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--ok) 55%,transparent))} .ring10 .ctr{text-align:center;line-height:1.05;position:relative} .ring10 .ctr b{display:block;font:500 26px var(--ffd);letter-spacing:-.02em} [data-theme=eclipse] .ring10 .ctr b,[data-theme=nebula] .ring10 .ctr b{font-weight:600} .ring10 .ctr small{display:block;font:600 9.5px var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--mut3);margin-top:4px} .ring10 .ctr em{display:block;font:500 10.5px var(--ff);color:var(--mut2);font-style:normal;margin-top:2px} /* Feier-Karte (Befund 33): Symbol aufrecht in der Mitte, "PLATZ 1" sauber darunter */ .feier-ring .ctr b{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;height:auto;font-size:30px} .feier-ring .ctr b svg{display:block;position:static;inset:auto;transform:none;width:38px;height:38px;flex:none} .feier-ring .ctr small{margin-top:8px;font-size:11px;color:var(--gold)} .ring10.gross{--rg:164px}.ring10.gross .ctr b{font-size:38px} @media(max-width:999px){.ring10.gross{--rg:136px}.ring10.gross .ctr b{font-size:30px}.b-hero>.zeile{justify-content:center}} .ring10.klein{--rg:76px}.ring10.klein circle{stroke-width:7}.ring10.klein .ctr b{font-size:17px}.ring10.klein .ctr small{font-size:8px;letter-spacing:.04em} /* Aufgaben-Zeilen („Jetzt dran“) */ .t14{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);margin-top:8px;position:relative;transition:background .25s,border-color .25s,transform .25s var(--ease);text-align:left;width:100%} .t14:hover{background:color-mix(in srgb,var(--au1) 8%,transparent);border-color:color-mix(in srgb,var(--au1) 34%,transparent);transform:translateX(3px)} .t14.erste{box-shadow:inset 3px 0 0 var(--au1)} .t14-i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--au1) 14%,transparent);flex:none;font:600 15px var(--ffd);color:var(--acc2)} .t14-i svg{width:18px;height:18px;stroke:var(--au1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .t14.warn .t14-i{background:color-mix(in srgb,var(--bad) 15%,transparent)}.t14.warn .t14-i svg{stroke:var(--bad)} .t14.gold .t14-i{background:var(--gold-soft)}.t14.gold .t14-i svg{stroke:var(--gold)} .t14 .tx{flex:1;min-width:0} .t14 .ikon.klein{width:36px;height:36px;border-radius:10px;flex:none;color:var(--mut2);background:rgba(255,255,255,.04);border:1px solid var(--line);display:grid;place-items:center} .t14 .ikon.klein svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .t14.edit{align-items:flex-start} .check-zeile{display:flex;align-items:center;gap:6px} .chat .msg.system{opacity:.75;text-align:center;background:transparent;border:0} .chat .msg.system p{font-style:italic;color:var(--mut2)} .check-zeile .check{flex:1;min-width:0} .check-zeile .x{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--mut3);flex:none} .check-zeile .x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .t14 .tx b{display:block;font-size:14px;font-weight:600;line-height:1.3} .t14 .tx small{display:block;color:var(--mut);font-size:12.5px;margin-top:2px;line-height:1.45} .t14.d .tx b{color:var(--mut3);text-decoration:line-through;font-weight:500} .t14 .btn{flex:none} .pg{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--mut);font-size:12.5px} .pg .bar{flex:1} .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden} .bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--au1),var(--au2));transition:width 1.6s var(--ease)} .bar.gold i{background:var(--goldg)} /* Buttons, Chips, Eingaben */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:11px;font-weight:600;font-size:13.5px;background:rgba(255,255,255,.055);border:1px solid var(--line2);color:var(--txt2);min-height:42px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease),box-shadow .2s,filter .2s} .btn:hover{background:color-mix(in srgb,var(--au1) 10%,rgba(255,255,255,.04));border-color:var(--acc-line);color:var(--txt);transform:translateY(-1px)} .btn:active{transform:scale(.98)} .btn.primary{background:linear-gradient(135deg,var(--au1),var(--au2));color:#0a0a12;border-color:transparent;font-weight:700;box-shadow:0 8px 24px -10px var(--au1)} .btn.primary:hover{filter:brightness(1.08);box-shadow:0 12px 30px -10px var(--au1);color:#0a0a12} .btn.gold{background:var(--goldg);color:#1a1405;border-color:transparent;font-weight:700;box-shadow:0 8px 24px -10px var(--gold)} .btn.gefahr{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)} .btn.breit{width:100%}.btn.klein{padding:7px 12px;font-size:12.5px;min-height:34px;border-radius:9px} .btn[disabled]{opacity:.5;pointer-events:none} .btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .link{color:var(--acc2);font-weight:600;font-size:13px;text-decoration:none}.link:hover{text-decoration:underline} .chip{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--ff);padding:5px 10px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt2);white-space:nowrap;max-width:100%} .b-hero .chip,.kamp .chip,.tag .chip,.gewinn-karte .chip,.chip.gold{white-space:normal;text-align:left} .chip.ok{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 70%,#fff);border-color:transparent} .chip.warn{background:var(--warn-soft);color:color-mix(in srgb,var(--warn) 70%,#fff);border-color:transparent} .chip.gold{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-line)} .chip.acc{background:var(--acc-soft);color:var(--acc2);border-color:var(--acc-line)} .chip.live{background:var(--live-soft);color:color-mix(in srgb,var(--live) 50%,#fff);border-color:transparent} .chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor} .chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .chip.live .dot{animation:a19pulse 2.4s infinite;background:var(--live)} @keyframes a19pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} .eingabe,.feld input,.feld textarea,.feld select{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line2);background:var(--s1);color:var(--txt);font-size:15px;min-height:44px;color-scheme:dark} .eingabe:focus,.feld input:focus,.feld textarea:focus{border-color:var(--acc-line);background:var(--s2);box-shadow:0 0 0 3px color-mix(in srgb,var(--au1) 14%,transparent);outline:none} .feld label{display:block;font:600 10.5px var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--mut3);margin-bottom:5px} .feld textarea{min-height:84px;resize:vertical;line-height:1.5} .felder{display:grid;grid-template-columns:1fr 1fr;gap:8px} .subtabs{display:flex;gap:3px;padding:4px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh2)} .subtabs button{flex:1;padding:8px 12px;border-radius:12px;color:var(--mut2);font:600 12.5px var(--ff);transition:background .25s,color .25s} .subtabs button.on{background:color-mix(in srgb,var(--au1) 16%,transparent);color:var(--txt);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--au1) 36%,transparent),0 6px 18px -10px var(--au1)} .schalter{width:46px;height:28px;border-radius:20px;background:rgba(255,255,255,.12);position:relative;flex:none;transition:background .25s} .schalter::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .25s} .schalter.on{background:var(--au1)}.schalter.on::after{transform:translateX(18px)} .hinweis{padding:12px 14px;border-radius:12px;background:var(--acc-soft);border:1px solid var(--acc-line);font-size:13px;line-height:1.55;word-break:break-word} .hinweis.fehler{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)} .check{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;cursor:pointer} .check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--au1)} /* Tabellen */ .lt{width:100%;border-collapse:collapse;font-size:13px} .lt th{text-align:left;font:700 10.5px var(--ff);letter-spacing:.1em;text-transform:uppercase;color:var(--mut3);padding:8px 6px;background:rgba(255,255,255,.035)} .lt th:first-child{border-radius:8px 0 0 8px}.lt th:last-child{border-radius:0 8px 8px 0} .lt td{padding:9px 6px;border-bottom:1px solid var(--line)} .lt tr:last-child td{border-bottom:0} .lt tr:hover td{background:color-mix(in srgb,var(--au1) 6%,transparent)} .lt .z{text-align:right} .lt tr.best td{color:var(--gold)} /* Diagramme */ .chart{width:100%;height:auto;display:block} .chart .sb{fill:url(#a19gv);opacity:.92;transform-origin:bottom;animation:wachsen .9s var(--ease) both} .chart .sb.ohne{fill:rgba(255,255,255,.06);animation:none} .chart .sb.heute{fill:url(#a19ggv)} .chart text{font:500 9.5px var(--ff);fill:var(--mut3)} .chart .achse{stroke:var(--line);stroke-width:1} .chart .linie{fill:none;stroke:var(--au1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.8s .2s forwards ease} .chart .linie.gold{stroke:var(--gold)} .chart .flaeche{fill:url(#a19gv);opacity:.14} .chart .flaeche.gold{fill:url(#a19ggv)} #a19gv .a19s1{stop-color:var(--au1)}#a19gv .a19s2{stop-color:var(--au2)} #a19ggv .a19s1{stop-color:color-mix(in srgb,var(--gold) 55%,#fff)}#a19ggv .a19s2{stop-color:var(--gold2)} @keyframes wachsen{from{transform:scaleY(0)}} .mini-balken{display:flex;align-items:flex-end;gap:3px;height:44px} .mini-balken i{flex:1;border-radius:3px 3px 1px 1px;background:color-mix(in srgb,var(--au1) 60%,transparent);min-height:2px;transform-origin:bottom;animation:wachsen .9s var(--ease) both} .mini-balken i.heute{background:var(--goldg)} .mini-balken i.ohne{background:rgba(255,255,255,.06)} /* Heatmap (Kalender der LIVE-Tage) */ .heat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(7,minmax(0,1fr));gap:3px} .heat i{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.06);display:block;transition:transform .2s} .heat i:hover{transform:scale(1.25)} .heat i.l1{background:color-mix(in srgb,var(--au1) 30%,transparent)}.heat i.l2{background:color-mix(in srgb,var(--au1) 55%,transparent)}.heat i.l3{background:color-mix(in srgb,var(--au1) 80%,transparent)}.heat i.l4{background:var(--gold)} .heat i.heute{box-shadow:0 0 0 1.5px var(--txt)} .heat-leg{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mut3);margin-top:6px} .heat-leg span i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 1px;vertical-align:-1px} /* Wochentag-Balken */ .wt{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:92px} .wt div{display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end} .wt i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:color-mix(in srgb,var(--au1) 45%,transparent);transform-origin:bottom;animation:wachsen 1s var(--ease) both;min-height:3px} .wt div.best i{background:var(--goldg)} .wt small{font:600 10.5px var(--ff);color:var(--mut3)} .wt div.best small{color:var(--gold)} /* Uhrzeiten */ .uhr{display:flex;align-items:flex-end;gap:2px;height:52px} .uhr i{flex:1;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--au2) 55%,transparent);min-height:2px;transform-origin:bottom;animation:wachsen 1s var(--ease) both} .uhr i.best{background:var(--goldg)} .uhr-leg{display:flex;justify-content:space-between;font-size:10px;color:var(--mut3);margin-top:4px} /* Sendeplan (Zeitachse) */ .sende{position:relative;margin-top:6px} .sende .achse{font:500 10px var(--ff);color:var(--mut3);margin-bottom:6px;padding-left:44px}.sende .achse>div{position:relative;height:13px}.sende .achse span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}.sende .achse span:first-child{transform:none}.sende .achse span:last-child{transform:translateX(-100%)} .sende .lane{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;height:34px;border-top:1px solid var(--line)} .sende .lane .nm{font:600 11px var(--ff);color:var(--mut2)} .sende .lane.heute .nm{color:var(--gold)} .sende .track{position:relative;height:100%;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--std,12.5%) - 1px),var(--line) calc(var(--std,12.5%) - 1px),var(--line) var(--std,12.5%))} .sende .seg{position:absolute;top:9px;bottom:9px;border-radius:4px;background:linear-gradient(90deg,var(--au1),var(--au2));transform-origin:left;animation:sgrow 1.2s var(--ease) both;box-shadow:0 0 12px -4px var(--au1)} .sende .seg.live{background:repeating-linear-gradient(-45deg,var(--live) 0 6px,color-mix(in srgb,var(--live) 70%,#fff) 6px 12px);background-size:17px 17px;animation:sgrow 1.2s var(--ease) both,sstripe 1s linear infinite} @keyframes sgrow{from{transform:scaleX(0)}}@keyframes sstripe{to{background-position:17px 0}} .sende .now{position:absolute;top:18px;bottom:0;width:1px;background:var(--gold);box-shadow:0 0 10px var(--gold);pointer-events:none} /* Stufen, Meilenstein */ .stufen{display:flex;flex-direction:column;gap:8px} .stufe{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line)} .stufe .pkt{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);flex:none;font:600 12px var(--ffd);color:var(--mut2)} .stufe.ok .pkt{background:var(--goldg);color:#1a1405} .stufe.ok .pkt svg{width:13px;height:13px;stroke:#1a1405;stroke-width:3;fill:none} .stufe b{font-size:13.5px;display:block}.stufe small{color:var(--mut);font-size:11.5px} .stufe.naechste{border-color:var(--gold-line);background:var(--gold-soft)} .meil{display:flex;align-items:center;gap:14px} .meil .tx b{display:block;font:500 17px var(--ffd)}.meil .tx small{color:var(--mut);font-size:12px} /* Postfach */ .post{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);width:100%;text-align:left;transition:transform .25s var(--ease)} .post:first-child{border-top:0} .post:hover{transform:translateX(3px)} .post .art{font:700 10px var(--ff);color:var(--mut3);text-transform:uppercase;letter-spacing:.1em} .post b{display:block;font-size:14px;margin:2px 0} .post span{font-size:11.5px;color:var(--mut)} .th{width:46px;height:60px;border-radius:9px;flex:none;background:linear-gradient(160deg,var(--s3),var(--s1));box-shadow:0 0 0 1px var(--gold-line);display:grid;place-items:center;overflow:hidden} .th img{width:100%;height:100%;object-fit:cover;display:block} .th svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .neu{margin-left:auto;font:700 10px var(--ff);padding:4px 8px;border-radius:10px;background:var(--gold);color:#1a1405;flex:none} .galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px} .galerie button{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--gold-line),0 14px 30px -18px #000;aspect-ratio:9/16;background:var(--s1);position:relative;transition:transform .3s var(--ease)} .galerie button:hover{transform:translateY(-3px)} .galerie img{width:100%;height:100%;object-fit:cover;display:block} .galerie span{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font:600 10.5px var(--ff);color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));text-align:left} .galerie .neu{position:absolute;top:6px;right:6px;margin:0} .detail{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:auto;padding:calc(16px + var(--sat)) 16px calc(24px + var(--sab));animation:auf .3s ease} @keyframes auf{from{opacity:0}} .detail .inner{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:14px} @media(min-width:1000px){.detail{left:236px}} .detail img{width:100%;border-radius:14px;box-shadow:0 30px 70px -30px #000,0 0 0 1px var(--gold-line);background:var(--s1)} .detail .text{font-size:14.5px;line-height:1.65;color:var(--txt2);white-space:pre-wrap} .detail.zeugnis img{animation:zeugnis 1.6s var(--ease) both} .detail.zeugnis .schein{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--gold) 35%,transparent),transparent 55%);animation:glanz 2.2s ease-out forwards} @keyframes zeugnis{0%{opacity:0;transform:perspective(900px) rotateY(-24deg) translateY(30px) scale(.92);filter:brightness(2) saturate(.6)}60%{filter:brightness(1.25)}100%{opacity:1;transform:none;filter:none}} .zurueck{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-weight:600;font-size:13.5px;padding:8px 0} .zurueck svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Plan */ .tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px} .tag em .kurz{display:none} @media(max-width:560px){.tage{gap:4px}.tag em .lang{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.tag em .kurz{display:inline;font-size:15px;line-height:12px}} .tag{padding:10px 2px 8px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:center;font-size:12px;color:var(--mut);transition:background .2s,border-color .2s,transform .2s var(--ease)} .tag b{display:block;font-size:12px;color:var(--txt);margin-bottom:2px} .tag small{font-size:10px;display:block;color:var(--mut3)} .tag em{display:block;font:600 9.5px var(--ff);color:var(--acc2);font-style:normal;margin-top:4px;min-height:12px} .tag.on{background:color-mix(in srgb,var(--au1) 16%,transparent);border-color:color-mix(in srgb,var(--au1) 50%,transparent);color:var(--txt)} .tag.on:hover{transform:translateY(-2px)} .tag.vorbei{opacity:.4} .tag.heute{box-shadow:inset 0 0 0 1.5px var(--gold)} .tag.aktiv{box-shadow:0 0 0 2px var(--au1),0 8px 20px -10px var(--au1);transform:translateY(-2px)} .zeiten{display:flex;flex-direction:column;gap:8px;margin-top:12px} .zeit{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:8px;align-items:center;font-size:13px;padding:12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--acc-line)} .zeit>b{font-size:14px;min-width:64px} .zeit .vorlagen{grid-column:1/-1;margin-top:2px} .zeit b{font-size:13px} .zeit input{padding:9px 8px;border-radius:10px;border:1px solid var(--line2);background:var(--s1);color:var(--txt);font-size:14px;min-height:40px;width:100%;color-scheme:dark} .zeit .x{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--mut3)} .zeit .x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .vorlagen{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} /* Status */ .optionen{display:grid;grid-template-columns:1fr 1fr;gap:8px} @media(min-width:1000px){.optionen{grid-template-columns:repeat(5,1fr)}} .opt{padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:left;display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;min-height:52px;transition:background .25s,border-color .25s} .opt svg{width:20px;height:20px;stroke:var(--mut);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .opt.on{background:color-mix(in srgb,var(--au1) 16%,transparent);border-color:color-mix(in srgb,var(--au1) 50%,transparent)} .opt.on svg{stroke:var(--au1)} .reihe{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);width:100%;text-align:left;color:inherit;text-decoration:none} .reihe:first-child{border-top:0} .reihe b{font-size:14px;display:block}.reihe small{font-size:12px;color:var(--mut);display:block;margin-top:2px;line-height:1.45} .reihe>svg{width:20px;height:20px;stroke:var(--mut3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .ansichten{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} @media(min-width:700px){.ansichten{grid-template-columns:repeat(5,1fr)}} .ans{padding:10px 8px 9px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035);text-align:left;font:600 12px var(--ff);color:var(--mut);transition:border-color .25s,transform .25s var(--ease)} .ans i{display:block;height:54px;border-radius:9px;margin-bottom:8px;position:relative;overflow:hidden} .ans small{display:block;font:400 10.5px var(--ff);color:var(--mut3);margin-top:2px;line-height:1.35} .ans.on{border-color:var(--au1);color:var(--txt);box-shadow:0 0 0 2px color-mix(in srgb,var(--au1) 30%,transparent)} .ans:hover{transform:translateY(-2px)} .ans[data-a=standard] i{background:linear-gradient(120deg,#05070d,#1b2a46 60%,#3fd2c7)} .ans[data-a=standard] i::after{content:"";position:absolute;left:8px;top:8px;width:26%;height:38px;border-radius:4px;background:rgba(255,255,255,.1)} .ans[data-a=orbit] i{background:radial-gradient(circle at 50% 50%,#27347a 0,#0b1034 45%,#03040c 100%)} .ans[data-a=orbit] i::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #7de3ff;box-shadow:0 0 0 8px rgba(169,139,255,.25),0 0 0 16px rgba(255,210,122,.12)} .ans[data-a=signal] i{background:#0a0a0a;border:1px solid #232323} .ans[data-a=signal] i::after{content:"";position:absolute;left:8px;right:8px;top:14px;height:3px;background:#ff5b2e;box-shadow:0 0 10px #ff5b2e,0 12px 0 #333,0 24px 0 #333} .ans[data-a=bento] i{background:radial-gradient(circle at 20% 20%,#1fd1b9 0,transparent 45%),radial-gradient(circle at 80% 70%,#7b5cff 0,transparent 50%),#05060d} .ans[data-a=bento] i::after{content:"";position:absolute;inset:8px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.14) 0 45%,transparent 45% 50%,rgba(255,255,255,.1) 50%)} .ans[data-a=kommando] i{background:#0b0d10;border:1px solid #1d222a} .ans[data-a=kommando] i::after{content:"";position:absolute;left:8px;top:8px;right:8px;height:14px;background:repeating-linear-gradient(90deg,#ffc561 0 14px,transparent 14px 18px);opacity:.7} .themen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .thema{padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);text-align:center;font-size:11.5px;font-weight:600;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:6px} .thema i{display:block;width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset} .thema.on{border-color:var(--au1);color:var(--txt);box-shadow:0 0 0 2px color-mix(in srgb,var(--au1) 30%,transparent)} .thema.on i{box-shadow:0 0 0 2px var(--au1),0 0 16px -2px var(--au1)} /* Chronik / Ticker */ .ev{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px} .ev:first-child{border-top:0} .ev .t{font:600 10.5px var(--ff);color:var(--mut3);width:56px;flex:none;padding-top:3px;letter-spacing:.02em} .ev .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--au1) 12%,transparent);flex:none} .ev .ic svg{width:14px;height:14px;stroke:var(--au1);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ev.meilenstein .ic{background:var(--gold-soft)}.ev.meilenstein .ic svg{stroke:var(--gold)} .ev.live .ic{background:var(--live-soft)}.ev.live .ic svg{stroke:var(--live)} .tick{overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .tick div{display:inline-block;padding:12px 0;animation:tick 60s linear infinite;font-size:12.5px;color:var(--mut)} .tick span{margin:0 22px}.tick b{color:var(--txt2);font-weight:600}.tick em{font-style:normal;color:var(--gold);font-weight:600;margin-right:6px} @keyframes tick{to{transform:translateX(-50%)}} /* Kampagne */ .kamp .bar{height:8px} .kamp .row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut3);margin-top:8px} .kamp b.w{font:500 30px var(--ffd);letter-spacing:-.02em}.kamp b.w small{font:500 13px var(--ff);color:var(--mut2)} /* ---------- Anmeldung, Einwilligung, Angebot ---------- */ .login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 26px;text-align:center;position:relative;z-index:1} .login .logo{width:min(260px,70vw);height:auto;display:block;margin-bottom:28px;filter:drop-shadow(0 0 30px rgba(240,212,142,.28));animation:logoauf 1.4s var(--ease) both} @keyframes logoauf{from{opacity:0;transform:translateY(12px) scale(.96);filter:drop-shadow(0 0 0 rgba(240,212,142,0))}to{opacity:1;transform:none;filter:drop-shadow(0 0 30px rgba(240,212,142,.28))}} .login h2{font-size:28px;line-height:1.15;font-weight:500} [data-theme=eclipse] .login h2,[data-theme=nebula] .login h2{font-weight:600} .login p{color:var(--mut);font-size:13.5px;line-height:1.55;margin:10px 0 28px;max-width:340px} .lb{width:100%;max-width:360px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:14px;font-weight:650;font-size:14.5px;margin-bottom:10px;color:#fff;min-height:50px;transition:transform .2s,filter .2s;border:1px solid transparent} .lb:active{transform:scale(.98)}.lb svg{width:20px;height:20px;flex:none} .lb.dc{background:#5865f2;box-shadow:0 10px 30px -10px #5865f2} .lb.gg{background:#fff;color:#1f1f1f;box-shadow:0 10px 30px -14px #fff} .lb.ml,.lb.pk{background:rgba(255,255,255,.06);border-color:var(--line2)} .lb.pk{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)} .or{font-size:11.5px;color:var(--mut3);margin:6px 0 14px} .kleinschrift{font-size:11.5px;color:var(--mut3);margin-top:20px;line-height:1.6;max-width:340px} .kleinschrift a{color:var(--mut)} .demo-box{width:100%;max-width:360px;margin-top:18px;padding:14px;border-radius:16px;background:var(--gold-soft);border:1px dashed var(--gold-line);text-align:left} .demo-box .lbl{color:var(--gold)} .demo-box button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.05);margin-top:6px;text-align:left;font-weight:600;font-size:14px} .demo-box button small{display:block;font-weight:400;font-size:11.5px;color:var(--mut)} .formular{width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px;text-align:left} .voll{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:34px 22px;gap:14px;max-width:560px;margin:0 auto;position:relative;z-index:1} .voll h2{font-size:26px;line-height:1.15} .voll .text{color:var(--mut);font-size:14px;line-height:1.6} .voll ul{padding-left:18px;color:var(--mut);font-size:13.5px;line-height:1.7} .symbol-gross{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:var(--gold-soft);border:1px solid var(--gold-line);margin-bottom:6px} .symbol-gross svg{width:36px;height:36px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ---------- Bewegung: Aufsteigen, Start, Login, Feiern ---------- */ .rise{animation:a19rise .8s var(--ease) both} @keyframes a19rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .stagger>*{animation:a19rise .8s var(--ease) both} .stagger>*:nth-child(2){animation-delay:.06s}.stagger>*:nth-child(3){animation-delay:.12s}.stagger>*:nth-child(4){animation-delay:.18s}.stagger>*:nth-child(5){animation-delay:.24s}.stagger>*:nth-child(n+6){animation-delay:.3s} #splash{position:fixed;inset:0;z-index:100;background:#05070d;display:grid;place-items:center;transition:opacity .7s ease,visibility 0s linear .7s} #splash.weg{opacity:0;visibility:hidden} #splash .mitte{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;animation:splash 1.6s var(--ease) both} #splash img{width:min(280px,62vw)} #splash small{font:600 14px 'Inter',system-ui,sans-serif;letter-spacing:.42em;color:#f0d48e;padding-left:.42em} #splash::before{content:"";position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(240,212,142,.28),rgba(63,210,199,.08) 40%,transparent 65%);animation:aura 1.8s var(--ease) both} @keyframes splash{0%{opacity:0;transform:scale(.9);filter:brightness(.4)}45%{opacity:1;filter:brightness(1.6) drop-shadow(0 0 40px rgba(240,212,142,.6))}100%{opacity:1;transform:scale(1);filter:brightness(1) drop-shadow(0 0 24px rgba(240,212,142,.3))}} @keyframes aura{from{opacity:0;transform:translate(-50%,-50%) scale(.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} #splash.login img{animation-duration:2s} #splash.login::before{animation-duration:2.2s} .app-rein{animation:appreinop .9s var(--ease) backwards} .app-rein>.inhalt,.app-rein>.seite{animation:apprein .9s var(--ease) backwards} @keyframes appreinop{from{opacity:0}to{opacity:1}} #seite.still .stagger>*{animation:none} /* Touch-Ziele am Handy mindestens 44 px hoch (Testauftrag 19 bis 27) */ @media(max-width:999px){ .btn.klein{min-height:44px} .kopf .chip{min-height:40px} .zeit .x,.check-zeile .x,.cp .x{width:40px;height:40px} .t14-i.kreis{width:44px;height:44px;flex:none} .schalter{position:relative} .schalter::after{content:"";position:absolute;inset:-9px -4px} .subtabs button,.subtabs.scroll button{min-height:44px;padding-top:9px;padding-bottom:9px} button.chip,a.chip{min-height:40px;padding-top:9px;padding-bottom:9px} button.link,a.link{min-height:44px;display:inline-flex;align-items:center;padding:8px 4px;min-width:44px;justify-content:center} .zurueck{min-height:44px;padding:8px 6px 8px 0} .kopf .logo-btn{min-height:44px;min-width:60px;display:flex;align-items:center} .kopf .ikon{width:44px;height:44px} .vorlagen button.chip,.chips button.chip{min-height:40px} .t14{min-height:48px} } #seite.wechsel{animation:inhaltwechsel .26s ease} @keyframes inhaltwechsel{from{opacity:.55}to{opacity:1}} .frage-fenster .sheet-fuss .btn.gefahr{background:color-mix(in srgb,var(--bad) 22%,var(--card));border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:#fff} @keyframes apprein{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}} #toast{position:fixed;left:50%;bottom:calc(88px + var(--sab));transform:translateX(-50%) translateY(20px);z-index:60;padding:11px 16px;border-radius:14px;background:var(--glass2);border:1px solid var(--acc-line);box-shadow:var(--sh3),0 0 30px -14px var(--au1);color:#fff;font-size:13.5px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:calc(100% - 32px);text-align:center;backdrop-filter:blur(14px)} #toast.an{opacity:1;transform:translateX(-50%)} #toast.fehler{border-color:color-mix(in srgb,var(--bad) 50%,transparent)} @media(min-width:1000px){#toast{bottom:28px}} /* Feier: Ziel, Meilenstein */ .feier{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:auf .5s ease} .feier .lichter{position:absolute;inset:0;overflow:hidden;pointer-events:none} .feier .lichter i{position:absolute;top:-14px;width:7px;height:14px;border-radius:2px;opacity:0;animation:fall 3s ease-in forwards} .feier .lichter i.k{width:5px;height:5px;border-radius:50%} @keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(110vh) rotate(720deg)}} .feier .schein{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--gold) 40%,transparent),transparent 50%);animation:glanz 2.6s ease-out forwards;pointer-events:none} @keyframes glanz{from{opacity:1}to{opacity:0}} .feier .box{position:relative;max-width:420px;width:100%;text-align:center;padding:34px 26px 26px;border-radius:24px;background:linear-gradient(90deg,transparent,var(--edge),transparent) top/100% 1px no-repeat,var(--glass2);border:1px solid var(--gold-line);box-shadow:var(--sh3),0 0 80px -20px var(--gold);animation:feierbox 1s var(--ease) both} @keyframes feierbox{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}} .feier .box .ring10{margin:0 auto 16px} .feier .box .ring10 .fg{stroke:url(#a19gg);filter:drop-shadow(0 0 14px var(--gold))} .feier .ueber{margin-bottom:8px;color:var(--gold)} .feier h2{font-size:30px;line-height:1.1} .feier p{color:var(--mut);margin:12px 0 20px;font-size:14px} .feier .glanzring{position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--gold) 60%,transparent),transparent 30%);animation:dreh 3s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px} @keyframes dreh{to{transform:rotate(360deg)}} /* Rundgang */ .tour{position:fixed;inset:0;z-index:80;pointer-events:none} .tour .loch{position:absolute;border-radius:16px;box-shadow:0 0 0 9999px color-mix(in srgb,var(--bg) 78%,transparent),0 0 0 3px var(--gold),0 0 40px -6px var(--gold);transition:all .45s var(--ease);pointer-events:none} .tour .karte{position:absolute;left:16px;right:16px;max-width:400px;margin:0 auto;padding:18px 20px;border-radius:18px;background:var(--glass2);border:1px solid var(--gold-line);box-shadow:var(--sh3),0 0 40px -14px var(--gold);pointer-events:auto;transition:top .45s var(--ease),bottom .45s var(--ease)} .tour .karte .ueber{color:var(--gold);margin-bottom:0} .tour .tour-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .tour .tour-x{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--ff);color:var(--mut2);padding:6px 8px;border-radius:10px;min-height:40px;margin:-6px -8px -6px 0;white-space:nowrap;flex-shrink:0} .tour .tour-kopf .ueber{white-space:nowrap;letter-spacing:.1em;min-width:0} .tour .tour-x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} .tour .tour-inhalt{min-height:96px} .tour .tour-fuss .btn[disabled]{opacity:.4} /* Kurz einrichten (Befund 32) */ .einrichten .einr-kopf{width:100%;text-align:center;margin-bottom:6px} .einrichten .einr-kopf .ueber{color:var(--gold)} .einrichten .einr-block{width:100%;max-width:420px;text-align:left;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);margin-bottom:10px} .einrichten .einr-optionen{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px} .einrichten .einr-optionen button{flex:1 1 auto;min-height:44px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--mut2);font:600 13px var(--ff)} .einrichten .einr-optionen button.on{background:color-mix(in srgb,var(--au1) 16%,transparent);color:var(--txt);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--au1) 36%,transparent)} .einrichten .btn.breit{max-width:420px} .tour .karte h3{font-size:20px;margin-bottom:6px} .tour .karte p{color:var(--mut);font-size:13.5px} .tour .karte .zeile{margin-top:14px} .tour .punkte{display:flex;gap:4px}.tour .punkte i{width:6px;height:6px;border-radius:50%;background:var(--line3)}.tour .punkte i.on{background:var(--gold)} @media(min-width:1000px){.tour .karte{left:auto;right:40px;bottom:40px!important;top:auto!important;width:400px}} .zaehl{display:inline-block} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rise,.stagger>*{opacity:1;transform:none}#splash{display:none}} /* ===================================================================== Runde 3 · Standard-Ansicht: neue Bausteine ===================================================================== */ /* Kopf und Rahmen */ .kopf .logo-btn{display:block;padding:0} .kopf .ikon{position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--mut2);background:rgba(255,255,255,.04);border:1px solid var(--line)} .kopf .ikon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .kopf .ikon .n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:#1a1405;font:700 10.5px var(--ff);display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg)} .kopf .stand-badge{max-width:140px;overflow:hidden;text-overflow:ellipsis} .seite .marke{text-align:left;padding:6px 8px 18px} .seite .who{width:100%;text-align:left} .avatar{border:0;padding:0} .avatar.klein{width:30px;height:30px;font-size:11px} .bkopf{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap} .bkopf .hello{font-size:28px} .bkopf .bsub{margin-top:4px;max-width:640px} .bkopf .brechts{margin-left:auto} .bkopf .zurueck{padding:0 0 6px} @media(min-width:1000px){.bkopf .hello{font-size:34px}} .sprachwahl{position:absolute;top:calc(14px + var(--sat));right:14px;display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--card);border:1px solid var(--line)} .sprachwahl button{padding:6px 10px;border-radius:9px;font:600 12px var(--ff);color:var(--mut2)} .sprachwahl button.on{background:color-mix(in srgb,var(--au1) 16%,transparent);color:var(--txt)} .login.info{justify-content:flex-start;text-align:left;align-items:stretch;max-width:680px;margin:0 auto} .login.info .zurueck{align-self:flex-start} .eingabe.code{text-align:center;font:600 20px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase} /* Start-Animation (Punkt 49): Lichtspur */ #splash{background:#04050a} #splash .raum{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(240,212,142,.16),transparent 55%),radial-gradient(ellipse at 20% 20%,rgba(63,210,199,.08),transparent 50%)} #splash .teilchen{position:absolute;inset:0;overflow:hidden;pointer-events:none} #splash .teilchen i{position:absolute;border-radius:50%;background:#f0d48e;box-shadow:0 0 10px 2px rgba(240,212,142,.7);opacity:0;animation:teilchen 2s ease-out forwards} @keyframes teilchen{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}} #splash .logo-spur{position:relative;width:min(280px,62vw)} #splash .logo-spur img{width:100%;display:block;animation:logospur 1.9s var(--ease) both} @keyframes logospur{0%{opacity:0;filter:brightness(.2) blur(6px);transform:scale(.94)}55%{opacity:1;filter:brightness(1.7) blur(0) drop-shadow(0 0 30px rgba(240,212,142,.7))}100%{opacity:1;filter:brightness(1) drop-shadow(0 0 22px rgba(240,212,142,.35));transform:none}} #splash .logo-spur .spur{position:absolute;inset:-14px -20px;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 78%,rgba(240,212,142,.0) 80%,rgba(255,235,180,.95) 90%,transparent 100%);-webkit-mask:radial-gradient(ellipse at center,transparent 52%,#000 62%,#000 66%,transparent 76%);mask:radial-gradient(ellipse at center,transparent 52%,#000 62%,#000 66%,transparent 76%);filter:blur(2px);animation:spur 1.8s cubic-bezier(.4,0,.2,1) both} @keyframes spur{0%{transform:rotate(-40deg);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:rotate(320deg);opacity:0}} #splash .mitte{gap:14px} #splash .wer{animation:a19rise .9s .3s var(--ease) both;width:76px;height:76px;font-size:26px} #splash .wk{font:500 24px var(--ffd);color:#fff;animation:a19rise .9s .55s var(--ease) both} #splash .status-fliegt{font:500 13px var(--ff);color:#c9b98a;letter-spacing:.02em;max-width:320px;text-align:center;padding:0 20px;animation:fliegt .9s .9s var(--ease) both} @keyframes fliegt{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} #splash.kurz .logo-spur img{animation-duration:.6s}#splash.kurz .logo-spur .spur{animation-duration:.7s}#splash.kurz .teilchen{display:none}#splash.kurz .wk,#splash.kurz .status-fliegt,#splash.kurz .wer{animation-delay:0s;animation-duration:.4s} /* Übersicht */ .hero .hero-kopf{align-items:center;gap:14px} .hero .hello{font-size:26px;margin-top:2px} @media(min-width:1000px){.hero .hello{font-size:32px}} .hero .satz{margin-top:14px;font:500 17px/1.5 var(--ffd);color:var(--txt2)} .hero .wetter-satz{margin-top:6px} .hero .wetter{display:inline-flex;align-items:center;gap:4px;color:var(--txt2)} .hero .wetter svg{width:15px;height:15px;stroke:var(--au1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px} .hero .sieger{flex:none;align-self:flex-start} .hero .chips,.chips{display:flex;flex-wrap:wrap;gap:6px} .datumzeile{margin-top:4px} .naechstes{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--gold-soft);border:1px solid var(--gold-line)} .naechstes .zeile{flex-wrap:wrap;gap:8px} .naechstes .big{font-size:18px} .hinweis.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)} .kpi{text-align:left;width:100%;display:block} .kpi .pf{position:absolute;right:10px;bottom:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--mut3);opacity:.7;transition:opacity .2s,transform .2s,background .2s} .kpi .pf svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .kpi:hover .pf,.panel.hover:hover .pf{opacity:1;background:var(--acc-soft);color:var(--acc2);transform:translateX(2px)} .kpi svg.spark{position:static;display:block;width:100%;max-width:120px;height:24px;margin-top:8px;opacity:.8} .panel.hover{width:100%;text-align:left;display:block} .panel.hover .pf,.kamp .pf{position:absolute;right:14px;top:14px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--mut3)} .panel.hover .pf svg,.kamp .pf svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .panel.hover>h3{padding-right:30px} .tipp-text{font:500 15px/1.5 var(--ffd);color:var(--txt2);margin-bottom:8px} .mehr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .mehr-k{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);font:600 11px var(--ff);color:var(--mut2);text-align:center;transition:transform .2s var(--ease),border-color .2s} .mehr-k:hover{transform:translateY(-2px);border-color:var(--acc-line);color:var(--txt)} .mehr-k svg{width:22px;height:22px;stroke:var(--au1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .mehr-k .n{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--gold);color:#1a1405;font:700 10px var(--ff);display:grid;place-items:center;font-style:normal} .gewinn-k h3{padding-right:30px} .ev{width:100%;text-align:left;align-items:flex-start} .ev .tx{flex:1;min-width:0} .ev>svg{width:16px;height:16px;stroke:var(--mut3);fill:none;stroke-width:2;flex:none;margin-top:5px} /* Status-Karte (Punkt 39) */ .optionen.s5{grid-template-columns:repeat(2,1fr)} @media(min-width:700px){.optionen.s5{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}} .status-k .opt{min-width:0} .status-k .opt span{white-space:normal;line-height:1.2} .status-k .opt{min-height:46px;padding:9px 10px;font-size:12.5px} .status-mehr .vorlagen{align-items:center} .status-mehr .eingabe{margin-top:8px} /* Kleine Kennzahlen, Laufbahn, Quellen */ .klein-k{gap:8px} .mini-kpi{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line)} .mini-kpi .k{display:flex;align-items:flex-end;font:700 9.5px var(--ff);letter-spacing:.1em;text-transform:uppercase;color:var(--mut3);white-space:normal;line-height:1.25;min-height:2.5em} .mini-kpi b{display:block;font:500 20px/1.15 var(--ffd);margin-top:3px;letter-spacing:-.01em} .mini-kpi.gold b{color:var(--gold)} .kpis.k3.klein-k{grid-template-columns:repeat(3,minmax(0,1fr))} @media(min-width:1000px){.kpis.k3.klein-k{grid-template-columns:repeat(3,minmax(0,1fr))}} .lb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} @media(min-width:1000px){.lb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .lb-k{padding:10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);min-width:0} .lb-k .k{display:flex;align-items:flex-end;font:700 9.5px var(--ff);letter-spacing:.08em;text-transform:uppercase;color:var(--mut3);white-space:normal;line-height:1.25;min-height:2.5em} .lb-k b{display:block;font:500 19px var(--ffd);margin-top:3px;white-space:nowrap} .quellen{display:flex;flex-direction:column;gap:6px} .quellen .q{display:grid;grid-template-columns:90px 1fr 42px auto;gap:8px;align-items:center;font-size:12.5px} .quellen .q i{display:block;height:8px;border-radius:6px;background:rgba(255,255,255,.07);position:relative;overflow:hidden} .quellen .q i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:6px;background:linear-gradient(90deg,var(--au1),var(--au2))} .quellen .q b{text-align:right}.quellen .q small{color:var(--mut3);font-size:11px} .live-karte{border-color:color-mix(in srgb,var(--live) 35%,transparent)} .serie .w{font-size:40px;color:var(--gold);margin-right:6px} .serie.gefahr{border-color:var(--gold-line)} .big.wert{font-size:18px}.big.wert.gold{color:var(--gold)} .reihe{border:0;background:none;padding:12px 0} .reihe .wert{white-space:nowrap} /* Diagramme mit Werten (Punkt 15) */ .chart-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin:0 -4px;padding:0 4px} .chart.bars{height:auto;width:auto} .chart .wert{font:600 10.5px var(--ff);fill:var(--txt2)} .chart .u2{fill:var(--mut3);font-size:9px} .chart .u2.gold{fill:var(--gold);font-weight:700} .chart .krone{font-size:11px} .subtabs.wrap{flex-wrap:wrap} .subtabs.wrap button{flex:1 1 auto} .chart .sb.best{fill:url(#a19ggv)} .chart .bal.klick{cursor:pointer} .chart .bal.klick:hover .sb{filter:brightness(1.25)} .subtabs.scroll{overflow-x:auto;scrollbar-width:none}.subtabs.scroll::-webkit-scrollbar{display:none} .subtabs.scroll button{flex:none;padding:7px 12px} .subtabs .n{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--gold);color:#1a1405;font:700 10px var(--ff);font-style:normal;margin-left:2px;vertical-align:1px} /* Kalender (Punkt 26c) */ .kal{display:flex;flex-direction:column;gap:4px} .kal-monate{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;padding-left:26px;font:600 9.5px var(--ff);color:var(--mut3);height:12px;overflow:hidden} .kal-body{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px} .kal-wt{display:grid;grid-template-rows:repeat(7,minmax(0,1fr));gap:3px;font:600 9px var(--ff);color:var(--mut3);align-items:center} .heat{grid-auto-flow:column;grid-template-rows:repeat(7,minmax(0,1fr))} .heat button{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.06);display:block;transition:transform .2s;padding:0;width:100%} .heat button:hover{transform:scale(1.25);z-index:1;position:relative} .heat button.l1{background:color-mix(in srgb,var(--au1) 30%,transparent)}.heat button.l2{background:color-mix(in srgb,var(--au1) 55%,transparent)}.heat button.l3{background:color-mix(in srgb,var(--au1) 80%,transparent)}.heat button.l4,.heat button.rekord{background:var(--gold)} .heat button.heute{box-shadow:0 0 0 1.5px var(--txt)} .heat button{position:relative;display:grid;place-items:center;min-height:0} .heat button span{font:600 9px var(--ff);color:rgba(255,255,255,.55);line-height:1;pointer-events:none} .heat button.l2 span,.heat button.l3 span,.heat button.rekord span,.heat button.laeuft span{color:#fff} .heat button.l0{background:rgba(255,255,255,.05)} .heat button.l1{background:color-mix(in srgb,var(--au1) 24%,transparent)} .heat button.l2{background:color-mix(in srgb,var(--au1) 52%,transparent)} .heat button.l3{background:color-mix(in srgb,var(--au1) 92%,transparent)} .heat button.neu-monat{box-shadow:inset 2px 0 0 var(--mut2)} .heat button.heute.neu-monat{box-shadow:inset 2px 0 0 var(--mut2),0 0 0 1.5px var(--txt)} .heat button.aktiv{outline:2px solid var(--gold);outline-offset:1px;z-index:1} .heat-leg i.l0{background:rgba(255,255,255,.08)} .heat-leg i.l1{background:color-mix(in srgb,var(--au1) 24%,transparent)} .heat-leg i.l2{background:color-mix(in srgb,var(--au1) 52%,transparent)} .heat-leg i.l3{background:color-mix(in srgb,var(--au1) 92%,transparent)} .heat-leg i.l4{background:var(--gold)} .heat-leg i.lh{box-shadow:0 0 0 1.5px var(--txt);background:transparent} .kal-info{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:13px;min-height:44px} .kal-info .btn{flex:none} .kal-monate span{font-weight:700;color:var(--mut2)} /* Befund 25: Rekorde bündig */ .rekorde .reihe{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center} .rekorde .reihe .wert{text-align:right;min-width:88px;font-variant-numeric:tabular-nums} /* Mini-Kennzahlen: Überschrift darf zweizeilig sein statt abgeschnitten (Befund 21) */ .heat-leg{flex-wrap:wrap;gap:8px} /* Sendeplan geplant/ist (Punkt 26g, 33) */ .sende .seg.plan{background:transparent;border:1.5px dashed color-mix(in srgb,var(--gold) 70%,transparent);box-shadow:none;top:5px;bottom:5px;animation:none} .sende .laeuft{position:absolute;left:4px;top:-4px;font:700 9px var(--ff);color:var(--live);letter-spacing:.06em;text-transform:uppercase;background:var(--card);padding:1px 4px;border-radius:6px;z-index:2} .seg-leg{display:inline-block;width:18px;height:8px;border-radius:3px;vertical-align:-1px;margin-right:2px} .seg-leg.plan{border:1.5px dashed var(--gold)}.seg-leg.ist{background:linear-gradient(90deg,var(--au1),var(--au2))}.seg-leg.lv{background:var(--live)} .tabelle-scroll{overflow-x:auto} .lt tr.klick{cursor:pointer} .lt .chip.mini{padding:2px 7px;font-size:9.5px} /* Kampagnen (Punkt 24) */ .preise{display:flex;flex-direction:column;gap:6px} .preis{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:13px} .preis.meins{background:var(--gold-soft);border-color:var(--gold-line)} .medaille,.pos{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--ff);flex:none;background:rgba(255,255,255,.06);color:var(--mut2)} .medaille.m1{background:linear-gradient(135deg,#ffe8a3,#d4a12f);color:#3a2a05;box-shadow:0 0 14px -2px #f0d48e} .medaille.m2{background:linear-gradient(135deg,#f0f0f0,#a9a9b0);color:#2a2a2a} .medaille.m3{background:linear-gradient(135deg,#e8b98a,#a86a3a);color:#3a1d05} .rang{display:flex;flex-direction:column;gap:4px} .re{display:grid;grid-template-columns:28px 30px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;font-size:13.5px;border:1px solid transparent} .re.top{background:rgba(255,255,255,.03)} .re.eigen{background:var(--acc-soft);border-color:var(--acc-line);box-shadow:0 0 0 1px var(--acc-line),0 10px 24px -16px var(--au1)} .re b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .re .pkt{font:500 14px var(--ffd);white-space:nowrap}.re .pkt small{font:500 10.5px var(--ff);color:var(--mut3)} .regeln{margin-top:10px}.regeln summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--acc2)}.regeln p{margin-top:6px} .gewinn-karte{background:var(--gold-soft);border-color:var(--gold-line)} /* Postfach (Punkt 32) */ .postliste .subtabs{margin-bottom:2px} .post{align-items:flex-start;padding:12px 8px;border-radius:12px;border-top:0;margin-top:2px;transition:background .2s} .post:hover{background:rgba(255,255,255,.04);transform:none} .post.on{background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-line)} .post .tx{flex:1;min-width:0} .post .art{display:block} .post b{font-weight:500} .post.ungelesen b{font-weight:700;color:var(--txt)} .post .vorschau{display:block;font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .post .rechts{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none} .post .rechts small{font:600 11px var(--ff);color:var(--mut3);white-space:nowrap} .post .punkt{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)} .post .th.mini{width:30px;height:38px;border-radius:6px} .pav{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--au1) 14%,transparent);overflow:hidden;box-shadow:0 0 0 1px var(--line2)} .pav img{width:100%;height:100%;object-fit:cover} .pav svg{width:18px;height:18px;stroke:var(--au1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pav.gold{background:var(--gold-soft)}.pav.gold svg{stroke:var(--gold)}.pav.vio svg{stroke:var(--vio)}.pav.pink svg{stroke:var(--pink)}.pav.info svg{stroke:var(--info)} .pav.gross{width:48px;height:48px} .post-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)} .post-detail .absender{display:flex;align-items:center;gap:12px;margin:10px 0 14px} .post-detail .absender b{display:block;font-size:14px}.post-detail .absender small{display:block;color:var(--mut3);font-size:12px} .post-titel{font-size:24px;line-height:1.15;margin-bottom:10px} .post-detail .text{font-size:14.5px;line-height:1.65;color:var(--txt2);white-space:pre-wrap} .post-bild{width:100%;max-width:420px;border-radius:14px;box-shadow:0 30px 70px -30px #000,0 0 0 1px var(--gold-line);background:var(--s1);display:block} .zeugnis-bild{animation:zeugnis 1.4s var(--ease) both} .feier-karte{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--gold-soft);border:1px solid var(--gold-line)} .feier-karte svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .zeugnis-box a.btn{text-decoration:none} .zeugnis-detail .btn.klein svg{width:16px;height:16px} /* Story (Punkt 44) */ .story{position:fixed;inset:0;z-index:90;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--au1) 22%,transparent),transparent 55%),var(--bg);display:grid;place-items:center;padding:24px;animation:auf .4s ease;user-select:none} .story .punkte{position:absolute;top:calc(14px + var(--sat));left:14px;right:14px;display:flex;gap:4px} .story .punkte i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.18)} .story .punkte i.on{background:var(--gold)} .story .x{position:absolute;top:calc(28px + var(--sat));right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;z-index:2} .story .x svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2} .story .slide{max-width:480px;text-align:center;animation:a19rise .6s var(--ease) both} .story .slide h2{font-size:30px;margin:8px 0 12px} .story .riesig{display:block;font:500 72px/1 var(--ffd);letter-spacing:-.03em;background:linear-gradient(100deg,var(--gold),var(--au1) 60%,var(--au2));-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0 14px} .story .slide p{color:var(--mut);font-size:15px;line-height:1.55} .story .nav{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr} .story .nav button{background:none;border:0} /* Profil (Punkt 35, 23) */ .push-arten.aus{opacity:.45;pointer-events:none} .push-arten .reihe{cursor:pointer} /* Design (Punkt 54, 55) */ .ansichten{grid-template-columns:repeat(2,1fr)} @media(min-width:700px){.ansichten{grid-template-columns:repeat(5,1fr)}} .ans.bald{opacity:.65;cursor:default;position:relative} .ans.bald::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(255,255,255,.02) 8px 10px)} .ans.bald small{color:var(--gold)} .themen{grid-template-columns:repeat(2,1fr)} @media(min-width:700px){.themen{grid-template-columns:repeat(4,1fr)}} .thema{align-items:stretch;text-align:left;padding:8px;gap:8px} .thema b{font-size:12.5px;display:block}.thema small{display:block;font:400 10.5px var(--ff);color:var(--mut3);margin-top:-4px} /* Meilensteine, Aufgaben, Ziele */ .klein-stapel{gap:8px} .ms-karte{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)} .ms-karte .bar{margin-top:8px} .t14 .t14-i{border:0;cursor:pointer} .t14 .tx{border:0;background:none;padding:0;text-align:left;cursor:pointer} button.tx{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:40px} .kal-kommt .kk-e{min-height:40px} .t14 button.tx{display:block} .etappen{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .ziel-karte.geschafft{border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .hinweis.realistisch{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)} .hinweis.sehr_schwer{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent)} .check input[type=checkbox]{cursor:pointer} .checkliste{display:flex;flex-direction:column;gap:8px} /* Notizen (Punkt 50) */ .suchfeld{position:relative;flex:1} .suchfeld svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--mut3);fill:none;stroke-width:2;stroke-linecap:round} .suchfeld .eingabe{padding-left:36px;min-height:40px} .notizen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px} @media(min-width:700px){.notizen{grid-template-columns:repeat(3,minmax(0,1fr))}} .notiz{position:relative;text-align:left;padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh2);min-height:120px;display:flex;flex-direction:column;gap:6px;transition:transform .25s var(--ease),border-color .25s;border-top:3px solid var(--nf,var(--gold))} .notiz:hover{transform:translateY(-2px);border-color:var(--line2)} .notiz b{font-size:14px;padding-right:20px} .notiz p{font-size:12.5px;color:var(--mut);line-height:1.45;flex:1;white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical} .notiz ul{list-style:none;padding:0;flex:1;font-size:12.5px;color:var(--mut)} .notiz li{padding-left:18px;position:relative}.notiz li::before{content:"";position:absolute;left:0;top:5px;width:10px;height:10px;border-radius:3px;border:1.5px solid var(--mut3)} .notiz li.ok{color:var(--mut3);text-decoration:line-through}.notiz li.ok::before{background:var(--nf,var(--gold));border-color:var(--nf,var(--gold))} .notiz small{font-size:11px;color:var(--mut3)} .notiz .pinz{position:absolute;top:10px;right:10px}.notiz .pinz svg{width:14px;height:14px;stroke:var(--nf,var(--gold));fill:none;stroke-width:2} .f-gold{--nf:var(--gold)}.f-teal{--nf:#3fd2c7}.f-vio{--nf:#a78bfa}.f-pink{--nf:#f472b6}.f-ok{--nf:#4ade80}.f-blau{--nf:#5eb8ff} .notiz-editor{border-top:3px solid var(--nf,var(--gold))} .notiz-editor .titel{font:600 18px var(--ffd);margin-top:10px} .farben{display:flex;gap:6px} .farben .f{width:24px;height:24px;border-radius:50%;background:var(--nf);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;transition:transform .2s} .farben .f.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--nf)} .cp{display:grid;grid-template-columns:22px 1fr 30px;gap:8px;align-items:center} .cp input[type=checkbox]{width:20px;height:20px;accent-color:var(--nf,var(--gold))} .cp .eingabe{min-height:38px;padding:8px 10px} .cp .x{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--mut3)}.cp .x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} /* Wissen, Info-Seiten */ details.wissen{padding:8px 0;border-top:1px solid var(--line)}details.wissen:first-of-type{border-top:0} details.wissen summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:8px} details.wissen summary::after{content:"+";margin-left:auto;color:var(--mut3);font-size:18px} details.wissen[open] summary::after{content:"\2013"} details.wissen .text{margin-top:8px;font-size:13.5px;line-height:1.65;color:var(--txt2);white-space:pre-wrap} .info-text h1{font-size:28px;margin:6px 0 10px} .info-text h2{font-size:16px;margin:20px 0 6px} .info-text p{color:var(--mut);font-size:14px;line-height:1.65} .info-text .ueber{margin-bottom:12px} .info-text a{color:var(--acc2)} .vert-punkt{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)} .vert-punkt:first-of-type{border-top:0} .vert-punkt b{display:block;font-size:14px;margin-bottom:3px} /* Feier (Punkt 14): Lichtspur am Kartenrand, Zähler */ .feier .box .glanzring{display:none} .feier .lichtspur{position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;padding:2px;background:conic-gradient(from 0deg,transparent 0 62%,color-mix(in srgb,var(--gold) 18%,transparent) 72%,color-mix(in srgb,var(--gold) 92%,#fff) 82%,color-mix(in srgb,var(--gold) 18%,transparent) 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:blur(1.2px) drop-shadow(0 0 6px var(--gold));animation:dreh 3.2s linear infinite} .feier .zaehler{position:absolute;top:12px;right:14px;font:700 10.5px var(--ff);letter-spacing:.1em;color:var(--mut3);text-transform:uppercase} /* Gründer */ .huelle.gruender .marke small{color:var(--gold)} .code-anzeige{font:700 22px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;color:var(--gold)} /* Plan: Tage mit Ist-Werten (Punkt 33) */ .tag .ist{display:block;font:600 9.5px var(--ff);margin-top:3px;color:var(--mut3)} .tag .ist.ok{color:var(--ok)}.tag .ist.nicht{color:var(--bad)} .tag.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent)} .tag.nicht{border-color:color-mix(in srgb,var(--bad) 40%,transparent)} .tag[disabled]{cursor:default} .tage.klein .tag{padding:8px 2px 6px} .zeit{grid-template-columns:1fr 1fr auto;margin-top:12px} .zeit>b{grid-column:1/-1;font-size:14px} .zeit .feld input,.zeit .feld select{min-height:40px;padding:8px 10px;font-size:14px;width:100%;border-radius:10px;border:1px solid var(--line2);background:var(--s1);color:var(--txt);color-scheme:dark} .zeit .x{align-self:end;margin-bottom:5px} .assistent .tage.klein .tag em{font-size:9px} .wt em{font:600 10px var(--ff);color:var(--mut2);font-style:normal;min-height:12px} .wt div.best em{color:var(--gold)} .wt{height:110px} .chip.mini{padding:2px 7px;font-size:9.5px} .stagger>*{animation-play-state:paused}.stagger.an>*{animation-play-state:running} @media(max-width:999px){.inhalt{padding-bottom:calc(112px + var(--sab))}.bkopf .hello{font-size:24px}.mehr-grid{grid-template-columns:repeat(4,1fr)}.re{grid-template-columns:26px 28px 1fr auto;gap:8px;font-size:13px}} @media(min-width:1000px){.kopf{display:none}.inhalt{padding-top:26px}} @media (prefers-reduced-motion:reduce){.stagger>*{animation:none;opacity:1}} /* Symbole in Kartentiteln, Breiten */ .panel>h3 svg,.panel>h3 .chip svg{width:18px;height:18px;stroke:var(--au1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .panel>h3 .chip svg{width:14px;height:14px} .stapel>*,.bcol>*,.cols>*,.inhalt>*{min-width:0;max-width:100%} .panel{max-width:100%;min-width:0} .huelle{max-width:100vw;overflow-x:clip} .inhalt{overflow-x:clip} .ringe .ring10{max-width:100%} @media(max-width:999px){.ring10.gross{--rg:104px}.ring10.gross .ctr b{font-size:22px}.ringe{gap:10px}.hero .hello{font-size:24px}} @media(max-width:999px){.ringe .ring10.gross{--rg:96px}.ringe .ring10.gross .ctr b{font-size:20px}.ringe .ring10.gross .ctr em{font-size:9.5px}} [hidden]{display:none!important} .lb.pk svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ===================================================================== Runde 4 · Standard-Ansicht (Punkte 56 bis 121) ===================================================================== */ /* Schriften kommen aus /static/fonts/fonts.css (Punkt 113). Scrollbalken dezent, nur beim Drüberfahren (Punkt 75) */ *{scrollbar-width:thin;scrollbar-color:transparent transparent} *:hover{scrollbar-color:color-mix(in srgb,var(--au1) 30%,var(--s3)) transparent} ::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--au1) 30%,var(--s3))} /* Handy-Kopfleiste (Punkt 109): nicht durchsichtig */ .kopf{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;gap:8px;padding:calc(10px + var(--sat)) 12px 8px} .kopf .mitte{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0} .kopf .mitte .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis} /* Menü von rechts (Punkt 109) */ #menue-wrap{position:fixed;inset:0;z-index:50;pointer-events:none} #menue-wrap .menue-hintergrund{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s} #menue-wrap .menue{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);background:var(--bg);border-left:1px solid var(--line2);box-shadow:-20px 0 60px -20px #000;padding:calc(12px + var(--sat)) 12px calc(20px + var(--sab));overflow:auto;transform:translateX(100%);transition:transform .26s var(--ease);display:flex;flex-direction:column;gap:2px} #menue-wrap.auf{pointer-events:auto}#menue-wrap.auf .menue-hintergrund{opacity:1}#menue-wrap.auf .menue{transform:none} .menue .menue-kopf{display:flex;align-items:center;gap:8px;margin-bottom:8px} .menue .menue-kopf .who{flex:1;display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:left} .menue .who b{font-size:14px;display:block}.menue .who small{display:block;color:var(--mut3);font-size:11px} .menue .ikon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--mut2);background:rgba(255,255,255,.04);border:1px solid var(--line)} .menue .ikon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .menue .nlabel{font:700 9.5px var(--ff);letter-spacing:.18em;color:var(--mut3);margin:12px 12px 6px;text-transform:uppercase} .menue .nav{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;font:600 14px var(--ff);color:var(--mut2);position:relative;width:100%;text-align:left} .menue .nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.75} .menue .nav.on{color:var(--txt);background:color-mix(in srgb,var(--au1) 13%,transparent)}.menue .nav.on svg{opacity:1;color:var(--au1)} .menue .nav .n{position:static;margin-left:auto;background:color-mix(in srgb,var(--au1) 18%,transparent);color:var(--txt);font:700 10.5px var(--ff);border-radius:20px;padding:2px 8px;min-width:20px;height:auto;box-shadow:none;text-align:center} .menue .menue-fuss{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)} body.menue-auf{overflow:hidden} html.gesperrt,html.gesperrt body{overflow:hidden;overscroll-behavior:none} .detail,.story,.sheet .sheet-inhalt,.menue{overscroll-behavior:contain} /* Leiste unten (Punkt 110): fest am Rand, immer sichtbar, nichts verdeckt */ @media(max-width:999px){ .unten{left:0;right:0;transform:none;width:100%;max-width:none;bottom:0;border-radius:0;height:calc(60px + var(--sab));padding-bottom:var(--sab);background:var(--bg);border:0;border-top:1px solid var(--line2);box-shadow:0 -10px 30px -20px #000;backdrop-filter:none;-webkit-backdrop-filter:none} .unten button{font-size:10px;gap:2px;padding:0 2px} .unten button .nt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .unten button.on::before{top:4px} .inhalt{padding:14px 14px calc(84px + var(--sab))} #toast{bottom:calc(74px + var(--sab))} .tour .karte{bottom:calc(72px + var(--sab))} } /* Meldungen als Fenster von unten (Punkt 111), Hinweis-Fenster (Punkt 106) */ #sheet-wrap,.sheet-wrap{position:fixed;inset:0;z-index:55;pointer-events:none} #sheet-wrap .sheet-hintergrund,.sheet-wrap .sheet-hintergrund{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s} #sheet-wrap .sheet,.sheet-wrap .sheet{position:absolute;left:0;right:0;bottom:0;max-height:78vh;display:flex;flex-direction:column;background:var(--bg);border-radius:22px 22px 0 0;border-top:1px solid var(--line2);box-shadow:0 -30px 80px -30px #000;transform:translateY(100%);transition:transform .28s var(--ease);padding-bottom:calc(12px + var(--sab))} #sheet-wrap.auf,.sheet-wrap.auf{pointer-events:auto}#sheet-wrap.auf .sheet-hintergrund,.sheet-wrap.auf .sheet-hintergrund{opacity:1}#sheet-wrap.auf .sheet,.sheet-wrap.auf .sheet{transform:none} .sheet .sheet-kopf{display:flex;align-items:center;gap:10px;padding:14px 16px 8px} .sheet .sheet-kopf h3{font-size:18px;flex:1;display:flex;align-items:center;gap:8px} .sheet .sheet-kopf .n{background:var(--gold);color:#1a1405;font:700 11px var(--ff);border-radius:10px;padding:2px 8px} .sheet .ikon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--mut2)} .sheet .ikon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .sheet .sheet-inhalt{overflow:auto;padding:4px 14px 8px;flex:1} .sheet .sheet-inhalt .t14{margin-top:6px} .sheet .sheet-fuss{padding:8px 14px 0} @media(min-width:1000px){#sheet-wrap .sheet,.sheet-wrap .sheet{left:50%;right:auto;width:440px;transform:translate(-50%,100%);border-radius:22px;bottom:30px}#sheet-wrap.auf .sheet,.sheet-wrap.auf .sheet{transform:translate(-50%,0)}} .sheet.klein .sheet-inhalt{padding:16px 18px 6px} /* Vorschau "Als Creator ansehen" (Punkt 56) */ .vorschau-banner{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--gold);color:#1a1405;font:600 13px var(--ff)} .vorschau-banner svg{width:18px;height:18px;stroke:#1a1405;fill:none;stroke-width:2} .vorschau-banner span{flex:1} .vorschau-banner .btn{background:#1a1405;color:var(--gold);border-color:transparent;text-decoration:none} :root[data-vorschau] .kopf{top:40px} /* Seitenleiste: PORTAL zentriert (Punkt 81) */ @media(min-width:1000px){.seite .marke{display:flex;flex-direction:column;align-items:center}.seite .marke small{padding-left:.32em;text-align:center}} /* Einheitliche Kennzahl-Karten (Punkt 74): 3 je Reihe, gleiche Höhe, Zahl auf einer Linie, Mini-Diagramm bei allen */ .kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:999px){.kpis.k3:not(.klein-k){grid-template-columns:repeat(2,minmax(0,1fr))}} .kpi{display:grid;grid-template-rows:auto auto auto 1fr;min-height:144px;padding:12px 12px 12px;gap:0} .kpi .k{display:flex;align-items:flex-end;gap:4px;white-space:normal;overflow:hidden;font-size:10px;line-height:1.3;height:26px} .kpi b{font-size:24px;margin:6px 0 2px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:26px} .kpi b small{font-size:12px} .kpi .dz{display:block;min-height:16px;max-height:32px;overflow:hidden} .kpi .d{font-size:11px;line-height:16px;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .kpi svg.spark{position:static;display:block;width:100%;max-width:none;height:26px;margin-top:6px;opacity:.9;align-self:end} .kpi svg.spark.leer{opacity:.25;background:linear-gradient(transparent 60%,color-mix(in srgb,var(--ok) 25%,transparent));border-radius:4px} .spark path{stroke:var(--ok)}.spark path.f{fill:var(--ok)} .kpi .pf{right:8px;bottom:8px;width:20px;height:20px} .kpi .d.dn{color:var(--mut2)} .kpi .info,.info{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;color:var(--mut3);vertical-align:middle;cursor:help;flex:none} .info svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} @media(max-width:999px){.kpis.k3{gap:8px}.kpi{min-height:118px;padding:10px 9px}.kpi b{font-size:19px;height:22px}.kpi .k{font-size:9px}.kpi .d{font-size:10px}.kpi .pf{display:none}} @media(max-width:380px){.kpi .k{letter-spacing:.06em}.kpi b{font-size:17px}} /* Begrüßung (Punkt 82): Block rechts mit Uhr, Wetter, Stadt */ .hero .hero-mitte{min-width:0} .hero-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;text-align:right} .hero-rechts .uhr{font:500 30px/1 var(--ffd);letter-spacing:-.02em;color:var(--txt)} .hero-rechts .wetter-gross{display:flex;align-items:center;gap:8px;margin-top:6px} .hero-rechts .wetter-gross svg{width:34px;height:34px;stroke:var(--au1);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .hero-rechts .wetter-gross b{display:block;font:500 22px/1 var(--ffd)} .hero-rechts .wetter-gross small{display:block;font:600 11px var(--ff);color:var(--mut2);margin-top:2px} .hero-rechts .stadt{font:600 11px var(--ff);color:var(--mut3);letter-spacing:.06em;text-transform:uppercase;margin-top:4px} @media(max-width:999px){.hero .hero-kopf{flex-wrap:wrap}.hero-rechts{width:100%;flex-direction:row;align-items:center;justify-content:space-between;text-align:left;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}.hero-rechts .uhr{font-size:26px}.hero-rechts .wetter-gross{margin-top:0}.hero-rechts .stadt{margin-top:0}} /* Ziel-Ringe (Punkt 83): "von 18" größer und heller, STUNDEN ausgeschrieben */ .ring10 .ctr em{font:600 12px var(--ff);color:var(--txt2);margin-top:3px} .ring10.gross .ctr em{font-size:13px} .ring10 .ctr small{font-size:10.5px;letter-spacing:.1em;color:var(--mut2)} /* Nächstes Ziel (Punkt 84): schlichte goldene Zeile mit Linien-Symbolen */ .zielzeile{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--gold);font:600 13.5px var(--ff)} .zielzeile svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .zielzeile i{width:1px;height:14px;background:var(--gold-line);margin:0 2px} /* Tipp-Streifen (Punkt 85) */ .tipp-streifen{display:flex;align-items:center;gap:10px;padding:12px 40px 12px 16px;background:linear-gradient(90deg,var(--gold-soft),transparent 70%),var(--card)} .tipp-streifen .ts-k{font:700 11px var(--ff);color:var(--gold);letter-spacing:.06em;white-space:nowrap;flex:none;margin-right:2px} .tipp-streifen .ts-t{font:500 14px/1.45 var(--ff);color:var(--txt2)} .rang-zeile .rt{display:inline-flex;align-items:center;gap:3px;font:600 11px var(--ff);color:var(--mut3);white-space:nowrap} .rang-zeile .rt.auf{color:var(--ok)} .rang-zeile .rt svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round} /* Heute für dich (Punkt 59) */ .tagesplan .t14{margin-top:8px} .tagesplan .t14 .tx{flex:1} .tagesplan .tp-leer{padding:4px 0} .kal-kommt .kk-tag{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line)} .kal-kommt .kk-tag:first-of-type{border-top:0} .kal-kommt .kk-datum b{display:block;font:600 13px var(--ff)}.kal-kommt .kk-datum small{display:block;color:var(--mut3);font-size:11px} .kal-kommt .kk-liste{display:flex;flex-direction:column;gap:4px} .kal-kommt .kk-e{display:flex;align-items:center;gap:8px;text-align:left;font-size:13px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--line);width:100%} .kal-kommt .kk-e svg{width:15px;height:15px;stroke:var(--au1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .kal-kommt .kk-e.kampagne svg{stroke:var(--gold)}.kal-kommt .kk-e.match svg{stroke:var(--vio)} /* Sperren-Karte (Punkt 57b) */ .sperre-karte.rot{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--bad) 10%,transparent),transparent 60%),var(--card)} .sperre-karte.gruen{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 10%,transparent),transparent 60%),var(--card)} .sperre-karte.rot>h3 svg{stroke:var(--bad)}.sperre-karte.gruen>h3 svg{stroke:var(--ok)} .sperre-karte .link{font-size:12px;color:var(--mut2)} .schritte{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:8px} .schritte li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5} .schritte .nr{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font:700 12px var(--ff);flex:none} .schritte li.jetzt .nr{background:var(--gold);color:#1a1405} .schritte li.jetzt{color:var(--txt)} .verstoss{padding:12px 0;border-top:1px solid var(--line)}.verstoss:first-of-type{border-top:0} .verstoss.aktiv b{color:var(--warn)} .panel.wa{border-color:color-mix(in srgb,#25d366 45%,transparent)} .panel.wa .btn.gold{background:#25d366;color:#052e16;box-shadow:0 8px 24px -10px #25d366} /* Ranglisten-Zeile auf der Übersicht (Punkt 60) */ .rang-zeile{display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);text-align:left;font:600 13px var(--ff);color:var(--txt2)} .rang-zeile svg{width:16px;height:16px;stroke:var(--au1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .rang-zeile>svg:last-child{margin-left:auto;stroke:var(--mut3)} .rang-zeile span{min-width:0} .trend{display:inline-grid;place-items:center;width:16px;height:16px;flex:none} .trend svg{width:14px;height:14px;stroke:var(--mut3);stroke-width:2.2}.trend.auf svg{stroke:var(--ok)}.trend.ab svg{stroke:var(--mut3)} /* Podest (Punkt 95) */ .podest{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:end;margin:6px 0 10px;padding-top:24px} .pod{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0} .pod .pav-rand{padding:3px;border-radius:50%;background:linear-gradient(135deg,#f0f0f0,#a9a9b0)} .pod.p1 .pav-rand{background:linear-gradient(135deg,#ffe8a3,#d4a12f);box-shadow:0 0 22px -4px #f0d48e} .pod.p3 .pav-rand{background:linear-gradient(135deg,#e8b98a,#a86a3a)} .pod .avatar{width:58px;height:58px;font-size:18px;box-shadow:none} .pod.p1 .avatar{width:74px;height:74px;font-size:22px} .pod b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pod small{font-size:12px;color:var(--mut)} .pod .krone{position:absolute;top:-24px;left:50%;transform:translateX(-50%)} .pod .krone svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linejoin:round;filter:drop-shadow(0 0 8px var(--gold))} .pod .sockel{width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--line2);display:grid;place-items:center;font:600 16px var(--ffd);color:var(--mut2);height:var(--h,44px);transform-origin:bottom} .pod.p1 .sockel{--h:72px;background:linear-gradient(180deg,var(--gold-soft),rgba(255,255,255,.03));border-color:var(--gold-line);color:var(--gold)} .pod.p2 .sockel{--h:54px}.pod.p3 .sockel{--h:40px} .pod.eigen .sockel{box-shadow:0 0 0 2px var(--au1),0 0 24px -6px var(--au1)} .pod.frei{visibility:hidden} .podest.wachsen .pod .sockel{animation:sockel .7s var(--ease) both} .podest.wachsen .pod.p2 .sockel{animation-delay:.1s}.podest.wachsen .pod.p3 .sockel{animation-delay:.2s} @keyframes sockel{from{transform:scaleY(0)}} .re .pos{color:var(--mut3)} .re.eigen{background:var(--acc-soft);border-color:var(--acc-line);box-shadow:0 0 0 1px var(--acc-line),0 0 24px -8px var(--au1)} .re.blink{animation:blink 1.5s ease} @keyframes blink{0%,100%{box-shadow:0 0 0 1px var(--acc-line)}50%{box-shadow:0 0 0 3px var(--au1),0 0 30px -4px var(--au1)}} .re .pkt{display:flex;align-items:center;gap:6px} .rang-du .rt{display:inline-flex;align-items:center;gap:3px;font:600 11px var(--ff);color:var(--mut3);white-space:nowrap} .rang-du .rt.auf{color:var(--ok)} .rang-du .rt svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2} .rang-du{margin-top:14px;flex-wrap:wrap} .rang-du>span{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;flex:1;min-width:0} .rang-du>span svg:first-child{width:16px;height:16px;flex:none} #rangliste{overflow:visible} .rang-du{position:sticky;bottom:calc(76px + var(--sab));z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--glass2);border:1px solid var(--acc-line);box-shadow:var(--sh3);font-size:13px;backdrop-filter:blur(12px)} .rang-du span{display:flex;align-items:center;gap:8px;flex:1;min-width:0} .rang-du svg{width:16px;height:16px;stroke:var(--au1);fill:none;stroke-width:1.8;flex:none} @media(min-width:1000px){.rang-du{bottom:16px}} @media(max-width:999px){.podest{gap:6px}.pod .avatar{width:50px;height:50px}.pod.p1 .avatar{width:64px;height:64px}.pod b{font-size:12px}} /* Belohnungen (Punkt 119) */ .bel-kachel .bel-satz{font:500 15px/1.45 var(--ffd);color:var(--txt2)} .bel-gross .bel-summe{font-size:24px;line-height:1.25;margin-top:6px} @media(min-width:1000px){.bel-gross .bel-summe{font-size:30px}} .big.wert.gold{color:var(--gold)} /* Plan (Punkt 96, 97) */ .tag.vorbei{opacity:.55} .tag em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .schalter-zeile{cursor:pointer;gap:12px} .schalter-zeile>div{flex:1} .plan-analyse{margin-top:12px;padding:12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)} .plan-analyse.kompakt{margin-top:10px} .plan-auto-k h3{padding-right:30px} .vorlagen .chip svg{width:13px;height:13px} /* Aufgaben (Punkt 98): Kreis und Häkchen */ .t14-i.kreis{background:transparent;border:0} .t14-i.kreis svg{width:26px;height:26px;stroke:var(--mut3);stroke-width:1.6} .t14.d .t14-i.kreis svg{stroke:var(--ok)} .t14:hover .t14-i.kreis svg{stroke:var(--au1)} /* Abzeichen (Punkt 100) */ .medaillen{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px} .medal{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);text-align:center} .medal i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ffe8a3,#d4a12f);box-shadow:0 0 18px -4px #f0d48e,inset 0 0 0 2px rgba(255,255,255,.35)} .medal i svg{width:24px;height:24px;stroke:#3a2a05;fill:none;stroke-width:1.8;stroke-linejoin:round} .medal.grau i{background:linear-gradient(135deg,#4a4f5c,#2b2f39);box-shadow:none;opacity:.7}.medal.grau i svg{stroke:#9aa1b3} .medal.grau b{color:var(--mut3)} .medal b{font:600 12px var(--ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .medal small{font-size:10px;color:var(--mut3)} /* Verlauf (Punkt 77): Einheit sichtbar, am PC kein Scrollbalken, am Handy wischen */ .einheit-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px} .einheit-zeile .wisch{display:none} .chart-scroll{overflow:visible;margin:0;padding:0} .chart-scroll svg{width:100%;height:auto} .chart .ax{font-size:9px} .chart .wert.gold{fill:var(--gold)} @media(max-width:999px){.chart-scroll{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.chart-scroll svg{min-width:var(--cw,440px)}.einheit-zeile .wisch{display:inline}} /* Kalender (Punkt 89): Top-Tag, läuft */ .heat button.laeuft{background:var(--live);box-shadow:0 0 0 1.5px var(--txt)} .heat-leg span i.lv{background:var(--live)} /* Match-Börse (Punkt 62) */ .match.vorbei{opacity:.75} .chat .chat-hinweis{padding:10px 12px;border-radius:12px;background:var(--acc-soft);border:1px solid var(--acc-line);margin-bottom:10px} .chat-liste{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding:4px 2px} .msg{max-width:86%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.06);border:1px solid var(--line);align-self:flex-start} .msg.eigen{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--acc-soft);border-color:var(--acc-line)} .msg small{display:block;font-size:10.5px;color:var(--mut3);margin-bottom:2px} .msg p{font-size:14px;line-height:1.45;white-space:pre-wrap} .msg .melden{font-size:11px;color:var(--mut3);margin-top:4px;display:block} .erschienen{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--gold-soft);border:1px solid var(--gold-line)} /* Zeugnisse (Punkt 103): größere, scharfe Kacheln */ .galerie{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .galerie img{image-rendering:auto} /* Profil (Punkt 63): TikTok-Name grau, nicht bearbeitbar */ .eingabe.grau{color:var(--mut3);background:rgba(255,255,255,.03);border-style:dashed;cursor:default} /* Feier-Karte (Punkt 65): keine Lichtspur, Konfetti nur außen, Ring füllt sich in 1,4 s und leuchtet danach */ .feier .lichtspur{display:none} .feier .lichter{z-index:0} .feier .box{z-index:1;background:linear-gradient(90deg,transparent,var(--edge),transparent) top/100% 1px no-repeat,color-mix(in srgb,var(--bg) 88%,#1c2438);box-shadow:var(--sh3),0 0 80px -20px var(--gold)} .feier .box .ring10.gross{--rg:150px} .feier .box .ring10 .fg{transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1)} .feier .box .ring10 .ctr b{font-size:34px} .feier .box .ring10 .ctr b span{font-size:34px} .feier .box .ring10 .ctr b svg{display:block;margin:0 auto} .feier .box .ring10.leuchtet .fg{animation:ringglanz 1.6s ease-out both} @keyframes ringglanz{0%{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gold) 45%,transparent))}30%{filter:drop-shadow(0 0 26px var(--gold)) brightness(1.35)}100%{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--gold) 70%,transparent))}} .feier .box .ring10.leuchtet::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 28%,transparent),transparent 65%);animation:ringpuls 1.6s ease-out both;pointer-events:none;z-index:-1} @keyframes ringpuls{0%{opacity:0;transform:scale(.8)}40%{opacity:1;transform:scale(1.08)}100%{opacity:.55;transform:scale(1)}} /* App-Karte (Punkt 120) */ .app-karte{position:fixed;inset:0;z-index:75;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:auto;padding:calc(16px + var(--sat)) 14px calc(24px + var(--sab));display:grid;place-items:start center;animation:auf .4s ease} .app-box{width:100%;max-width:440px;padding:24px 18px 20px;border-radius:24px;background:color-mix(in srgb,var(--bg) 90%,#1c2438);border:1px solid var(--gold-line);box-shadow:var(--sh3),0 0 80px -30px var(--gold);text-align:center;animation:feierbox .8s var(--ease) both} .app-symbol img{width:84px;height:84px;border-radius:22px;box-shadow:0 10px 30px -10px #000,0 0 0 1px var(--gold-line)} .app-box h2{font-size:26px;margin:12px 0 6px} .app-box .text{color:var(--mut);font-size:14px;line-height:1.55} .app-spalten{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;text-align:left} .app-spalte{padding:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)} .app-spalte.mit{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 35%,transparent)} .app-spalte b{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:8px} .app-spalte b svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round} .app-spalte.mit b{color:color-mix(in srgb,var(--ok) 70%,#fff)} .app-spalte ul{list-style:none;display:flex;flex-direction:column;gap:6px} .app-spalte li{display:flex;gap:6px;align-items:flex-start;font-size:12px;line-height:1.4;color:var(--txt2)} .app-spalte li svg{width:13px;height:13px;flex:none;margin-top:2px;stroke:var(--ok);fill:none;stroke-width:2.4;stroke-linecap:round} .app-spalte.ohne li svg{stroke:var(--mut3);stroke-width:1.8} .app-spalte.ohne li{color:var(--mut)} .app-aktionen{margin-top:14px;display:flex;flex-direction:column;gap:8px} .app-schritte{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left} .app-schritt{position:relative;padding:12px 10px 10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12.5px;line-height:1.4} .app-schritt .nr{position:absolute;top:6px;left:8px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1a1405;font:700 11px var(--ff);display:grid;place-items:center} .app-schritt svg{width:34px;height:34px;stroke:var(--au1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:8px} @media(max-width:360px){.app-spalten{grid-template-columns:1fr}.app-schritte{grid-template-columns:1fr}} /* Datumsfeld mit Beschriftung (Punkt 107) */ .datumfeld{position:relative;display:inline-flex} .datumfeld input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;min-height:0} /* Rückkehr-Frage (Punkt 107) */ .rueckkehr{border-color:var(--gold-line);background:linear-gradient(90deg,var(--gold-soft),transparent 70%),var(--card)} /* Wissen (Punkt 104): Kategorien mit Symbol */ details.wissen summary svg{width:16px;height:16px} details.wissen summary .mut{font-weight:500} /* Impressum (Punkt 112) */ .info-text.impressum p{white-space:normal} /* Kein einzelner lila Knopf (Punkt 75): Knöpfe einheitlich */ .btn.vio{background:rgba(255,255,255,.055);color:var(--txt2)} /* Handy-Feinheiten (Punkt 108): nichts abgeschnitten */ @media(max-width:999px){.bkopf .hello{font-size:22px;word-break:break-word}.subtabs button{padding:8px 8px;font-size:12px}.lb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.lb-k b{font-size:16px}.reihe .wert{font-size:15px}.panel>h3{flex-wrap:wrap}.panel>h3 .r{white-space:nowrap}.hero .satz{font-size:15px}.tage{gap:4px}.tag{padding:8px 1px 6px;font-size:11px}.tag b{font-size:11px}.tag small{font-size:9px}.tag em{font-size:9px}.optionen.s5{grid-template-columns:repeat(2,1fr)}.felder{grid-template-columns:1fr 1fr}.medaillen{grid-template-columns:repeat(3,1fr)}} @media(max-width:380px){.tage{gap:2px}.tag{padding:7px 1px 5px}.tag em{font-size:8.5px}.ringe{gap:6px}.ringe .ring10.gross{--rg:88px}.ringe .ring10.gross .ctr b{font-size:18px}.ring10 .ctr small{font-size:9px;letter-spacing:.04em}} .subtabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px} .subtabs button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .lbl svg{width:14px;height:14px;stroke:var(--au1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .feier .box .ring10 .ctr{display:flex;flex-direction:column;align-items:center;gap:4px} .feier .box .ring10 .ctr b{line-height:1} .feier .box .ring10 .ctr small{margin-top:0} .kpi .k{min-width:0}.kpi .k .kt{min-width:0;overflow:hidden;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.kpi .k .info{flex:none} .feld .subtabs{flex-wrap:wrap}.feld .subtabs button{flex:1 1 auto;min-width:0} @media(max-width:430px){.felder{grid-template-columns:1fr}.felder .feld{grid-column:auto!important}} /* Testauftrag 18: sehr lange Wörter oder Links ohne Leerzeichen brechen um statt aus der Karte zu ragen */ #seite,.detail,.story,.app-karte,.frage-fenster,.sheet,.chat,.feier{overflow-wrap:break-word} .reihe>div,.reihe>b,.reihe>span,.zeile>div,.ev .tx,.t14-i>div,.msg{min-width:0} /* Knöpfe am Zeilenende behalten ihre Größe, nur der Text daneben bricht um */ .reihe>.zeile:last-child:not(:first-child),.reihe>button:last-child:not(:first-child),.reihe>.btn:last-child:not(:first-child){flex-shrink:0;min-width:auto} /* Lange Knopftexte (z. B. Face ID oder Fingerabdruck einrichten) brechen in schmalen Karten um statt herauszuragen */ .panel .btn{white-space:normal;text-align:center;max-width:100%} .panel .btn svg{flex-shrink:0} /* Befund 27: wischbare Leisten zeigen am Rand, dass es weitergeht */ .subtabs.scroll.rand-r,.chart-scroll.rand-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)} .subtabs.scroll.rand-l,.chart-scroll.rand-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)} .subtabs.scroll.rand-l.rand-r,.chart-scroll.rand-l.rand-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)} /* Gleich breite Ziffern in Kennzahlen: beim Hochzählen springt nichts und nichts wird breiter als die Endzahl */ .kpi b,.mini-kpi b,.lb-k b{font-variant-numeric:tabular-nums}