/* ============================================================ vamilio · LERNHILFE (Lern-Tutor) — UI nach den neuen Entwürfen. Scope: .vamilio-app .lh Alle Farben kommen aus den App-Tokens (--plum, --cream …), ergänzt um ein paar lernhilfe-eigene Werte. ============================================================ */ .vamilio-app .lh{ --lh-card:#FFFFFF; --lh-bg:#FBF8F4; --lh-line:rgba(46,26,57,.09); --lh-line-hard:rgba(46,26,57,.16); --lh-shadow:0 1px 2px rgba(46,26,57,.04), 0 8px 24px rgba(46,26,57,.05); --lh-shadow-lift:0 4px 10px rgba(46,26,57,.07), 0 18px 44px rgba(46,26,57,.10); --lh-green:#1F9D57; --lh-green-soft:#EAF6EF; --lh-red:#C2554B; --lh-red-soft:#FBEDEB; --lh-amber:#E3A54B; --lh-amber-soft:#FDF3E3; --lh-blue-soft:#E9F0FB; --lh-r:16px; --lh-r-sm:12px; --lh-r-lg:22px; position:relative; font-family:'Bricolage Grotesque',system-ui,sans-serif; color:var(--ink); } .vamilio-app .lh-screen{display:none;} .vamilio-app .lh-screen.is-active{display:block;animation:lhFade .28s ease both;} @keyframes lhFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){ .vamilio-app .lh-screen.is-active{animation:none;} } /* ── Bausteine ────────────────────────────────────────────── */ .vamilio-app .lh-card{ display:flex;flex-direction:column; background:var(--lh-card);border:1px solid var(--lh-line); border-radius:var(--lh-r);box-shadow:var(--lh-shadow);padding:22px; } .vamilio-app .lh-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;} .vamilio-app .lh-card-h{font-family:'Fraunces',serif;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink);margin:0;} .vamilio-app .lh-card-link{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;color:var(--plum);white-space:nowrap;} .vamilio-app .lh-card-link .ic{width:14px;height:14px;} .vamilio-app .lh-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 20px;border-radius:var(--lh-r-sm);border:1.5px solid var(--lh-line-hard); background:var(--lh-card);color:var(--ink); font-family:'Bricolage Grotesque';font-weight:700;font-size:14.5px;line-height:1; cursor:pointer;transition:background .16s,border-color .16s,transform .12s,box-shadow .16s; } .vamilio-app .lh-btn:hover{border-color:var(--lilac);background:var(--cream);} .vamilio-app .lh-btn:active{transform:translateY(1px);} .vamilio-app .lh-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;} .vamilio-app .lh-btn-primary{background:var(--plum);border-color:var(--plum);color:#fff;box-shadow:0 6px 16px rgba(81,48,100,.22);} .vamilio-app .lh-btn-primary:hover{background:var(--plum-mid);border-color:var(--plum-mid);} .vamilio-app .lh-btn-primary[disabled]{background:var(--lilac);border-color:var(--lilac);box-shadow:none;} .vamilio-app .lh-btn-soft{background:var(--lilac-soft);border-color:transparent;color:var(--plum);} .vamilio-app .lh-btn-soft:hover{background:var(--lilac);} .vamilio-app .lh-btn-lg{padding:15px 26px;font-size:15.5px;} .vamilio-app .lh-btn .ic{width:17px;height:17px;} .vamilio-app .lh-bar{height:7px;border-radius:99px;background:var(--lilac-soft);overflow:hidden;} .vamilio-app .lh-bar > span{display:block;height:100%;width:0;border-radius:99px;background:var(--plum);transition:width .5s cubic-bezier(.2,.8,.2,1);} .vamilio-app .lh-bar.is-amber{background:var(--lh-amber-soft);} .vamilio-app .lh-bar.is-amber > span{background:var(--lh-amber);} /* ============================================================ 1 · START (Dashboard) ============================================================ */ /* Kopfbereich: links Begrüßung + Tagesplan, rechts Tutor + Fächer. Der Tutor sitzt damit im Layout statt als eigener Streifen darüber. */ .vamilio-app .lh-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.62fr);gap:18px;margin:0 0 18px;align-items:stretch;} .vamilio-app .lh-top-left, .vamilio-app .lh-top-right{display:flex;flex-direction:column;gap:18px;min-width:0;} .vamilio-app .lh-top-left > .lh-card, .vamilio-app .lh-top-right > .lh-card{flex:1;} .vamilio-app .lh-hero-txt{padding:10px 0 2px;} .vamilio-app .lh-hero-txt h1{ font-family:'Fraunces',serif;font-weight:800;font-size:clamp(28px,3.2vw,40px); line-height:1.06;letter-spacing:-.03em;color:var(--plum-deep);margin:0 0 12px; } .vamilio-app .lh-hero-txt p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);} /* Tutor-Bühne */ .vamilio-app .lh-hero-buddy{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:250px;} .vamilio-app .lh-hero-buddy::before{ content:"";position:absolute;left:50%;bottom:-10px;width:330px;height:250px; transform:translateX(-52%);border-radius:52% 48% 44% 56%; background: radial-gradient(52% 50% at 46% 38%,rgba(232,160,168,.46),transparent 66%), radial-gradient(64% 62% at 58% 60%,rgba(201,182,218,.58),transparent 70%); filter:blur(4px); } /* Der weiche untere Auslauf steckt in der Grafik selbst – eine CSS-Maske zusammen mit drop-shadow lässt in Chromium einen hellen Kasten stehen. */ .vamilio-app .lh-buddy-img{ position:relative;width:min(268px,54%);height:auto; filter:drop-shadow(0 18px 30px rgba(46,26,57,.14)); } .vamilio-app .lh-hero-cta{position:absolute;right:0;top:6px;z-index:3;} .vamilio-app .lh-hero-bubble{ position:absolute;right:0;bottom:16px;max-width:238px;z-index:2; background:var(--lh-card);border:1px solid var(--lh-line);border-radius:var(--lh-r); box-shadow:var(--lh-shadow-lift);padding:14px 16px; } .vamilio-app .lh-hero-bubble b{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--plum-deep);margin-bottom:6px;} .vamilio-app .lh-hero-bubble b .ic{width:15px;height:15px;color:var(--lh-amber);} .vamilio-app .lh-hero-bubble p{margin:0;font-size:12.8px;line-height:1.5;color:var(--muted);} /* Goldene Funken rund um den Tutor */ .vamilio-app .lh-sparks{position:absolute;inset:0;pointer-events:none;z-index:1;} .vamilio-app .lh-sparks i{ position:absolute;width:13px;height:13px;opacity:.75; background:var(--gold); -webkit-mask:radial-gradient(circle at 0 0,transparent 70%,#000 71%) 0 0/50% 50% no-repeat, radial-gradient(circle at 100% 0,transparent 70%,#000 71%) 100% 0/50% 50% no-repeat, radial-gradient(circle at 0 100%,transparent 70%,#000 71%) 0 100%/50% 50% no-repeat, radial-gradient(circle at 100% 100%,transparent 70%,#000 71%) 100% 100%/50% 50% no-repeat; mask:radial-gradient(circle at 0 0,transparent 70%,#000 71%) 0 0/50% 50% no-repeat, radial-gradient(circle at 100% 0,transparent 70%,#000 71%) 100% 0/50% 50% no-repeat, radial-gradient(circle at 0 100%,transparent 70%,#000 71%) 0 100%/50% 50% no-repeat, radial-gradient(circle at 100% 100%,transparent 70%,#000 71%) 100% 100%/50% 50% no-repeat; } .vamilio-app .lh-sparks i:nth-child(1){left:16%;top:26%;} .vamilio-app .lh-sparks i:nth-child(2){left:9%;top:58%;width:9px;height:9px;opacity:.55;} .vamilio-app .lh-sparks i:nth-child(3){left:26%;top:12%;width:9px;height:9px;opacity:.6;} .vamilio-app .lh-sparks i:nth-child(4){right:20%;top:20%;width:10px;height:10px;} .vamilio-app .lh-sparks i:nth-child(5){right:12%;top:52%;width:8px;height:8px;opacity:.5;} .vamilio-app .lh-grid{display:grid;gap:18px;margin:0 0 18px;} .vamilio-app .lh-grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);} .vamilio-app .lh-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));} /* Plan für heute */ .vamilio-app #lh-plan-list{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;} .vamilio-app .lh-plan-item{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--lh-line);} .vamilio-app .lh-plan-item:last-of-type{border-bottom:0;} .vamilio-app .lh-plan-ic{ flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .lh-plan-ic .ic{width:19px;height:19px;} .vamilio-app .lh-plan-ic.is-amber{background:var(--lh-amber-soft);color:#B57A1F;} .vamilio-app .lh-plan-ic.is-blue{background:var(--lh-blue-soft);color:#3D6BA8;} .vamilio-app .lh-plan-ic.is-green{background:var(--lh-green-soft);color:var(--lh-green);} .vamilio-app .lh-plan-txt{flex:1;min-width:0;} .vamilio-app .lh-plan-txt b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);} .vamilio-app .lh-plan-txt small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;} .vamilio-app .lh-plan-count{ flex:0 0 auto;min-width:52px;text-align:center;padding:7px 10px;border-radius:9px; background:var(--lilac-soft);color:var(--plum);font-size:13px;font-weight:800; } .vamilio-app .lh-plan-count.is-done{background:var(--lh-green-soft);color:var(--lh-green);} .vamilio-app .lh-plan-goal{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:auto 0 8px;padding-top:16px;font-size:13.5px;font-weight:700;color:var(--ink);} .vamilio-app .lh-plan-goal span{color:var(--muted);font-weight:600;} /* Fächer */ .vamilio-app .lh-subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;flex:1;align-content:center;} .vamilio-app .lh-subj{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px 10px 18px; border:1px solid var(--lh-line);border-radius:var(--lh-r);background:var(--lh-card); cursor:pointer;text-align:center;transition:transform .16s,box-shadow .16s,border-color .16s; } .vamilio-app .lh-subj:hover{transform:translateY(-3px);box-shadow:var(--lh-shadow-lift);border-color:var(--lilac);} .vamilio-app .lh-subj.is-sel{border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .lh-subj-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--lilac-soft);color:var(--plum);} .vamilio-app .lh-subj-ic .ic{width:23px;height:23px;} .vamilio-app .lh-subj-ic.c-amber{background:var(--lh-amber-soft);color:#B57A1F;} .vamilio-app .lh-subj-ic.c-blue{background:var(--lh-blue-soft);color:#3D6BA8;} .vamilio-app .lh-subj-ic.c-green{background:var(--lh-green-soft);color:var(--lh-green);} .vamilio-app .lh-subj-ic.c-plum{background:#F3E9F8;color:var(--orchid);} .vamilio-app .lh-subj b{font-size:14.5px;font-weight:700;color:var(--ink);} .vamilio-app .lh-subj small{font-size:12px;color:var(--muted);} /* Fortschritts-Ring */ .vamilio-app .lh-prog{display:flex;align-items:center;gap:18px;} .vamilio-app .lh-ring{ position:relative;flex:0 0 auto;display:grid;place-items:center;width:104px;height:104px;border-radius:50%; background:conic-gradient(var(--plum) calc(var(--pct,0)*1%),var(--lilac-soft) 0); } .vamilio-app .lh-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--lh-card);} .vamilio-app .lh-ring-in{position:relative;text-align:center;} .vamilio-app .lh-ring-in b{display:block;font-family:'Fraunces',serif;font-size:21px;font-weight:700;color:var(--plum-deep);line-height:1;} .vamilio-app .lh-ring-in small{display:block;font-size:11px;color:var(--muted);margin-top:3px;} .vamilio-app .lh-prog-side{flex:1;min-width:0;} .vamilio-app .lh-prog-side > b{display:flex;align-items:center;gap:7px;font-size:15px;color:var(--ink);} .vamilio-app .lh-prog-side > p{margin:4px 0 0;font-size:13px;color:var(--muted);} .vamilio-app .lh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:18px;} .vamilio-app .lh-stat{padding:12px 8px;border-radius:12px;background:var(--cream);text-align:center;} .vamilio-app .lh-stat small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;} .vamilio-app .lh-stat b{font-family:'Fraunces',serif;font-size:21px;font-weight:700;color:var(--ink);} .vamilio-app .lh-stat em{ display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;font-style:normal; font-size:11.5px;font-weight:800;background:var(--lh-green-soft);color:var(--lh-green); } /* Weiter lernen */ .vamilio-app .lh-continue{display:flex;gap:14px;align-items:flex-start;flex:1;} .vamilio-app .lh-continue-vis{ flex:0 0 auto;width:92px;height:92px;border-radius:var(--lh-r-sm);display:grid;place-items:center; background:linear-gradient(140deg,var(--lilac-soft),var(--cream));color:var(--plum); } .vamilio-app .lh-continue-vis .ic{width:34px;height:34px;} .vamilio-app .lh-continue-txt{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;} .vamilio-app .lh-continue-txt b{display:block;font-size:14.5px;color:var(--ink);} .vamilio-app .lh-continue-txt small{display:block;font-size:12.5px;color:var(--muted);margin:2px 0 12px;} .vamilio-app .lh-continue-bar{display:flex;align-items:center;gap:9px;margin:0 0 14px;} .vamilio-app .lh-continue-txt .lh-btn{margin-top:auto;align-self:flex-start;} .vamilio-app .lh-continue-bar .lh-bar{flex:1;} .vamilio-app .lh-continue-bar span:last-child{font-size:12px;font-weight:700;color:var(--muted);} /* Kleine Kennzahlen-Zeile in den Übersichtskarten */ .vamilio-app .lh-minirow{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 14px;} .vamilio-app .lh-minirow span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);} .vamilio-app .lh-minirow b{font-weight:800;color:var(--ink);} .vamilio-app .lh-minirow .ic{width:14px;height:14px;color:var(--plum);} /* Belohnungen */ .vamilio-app .lh-points{display:flex;align-items:center;gap:9px;margin-bottom:14px;} .vamilio-app .lh-points .ic{width:22px;height:22px;color:var(--lh-amber);} .vamilio-app .lh-points b{font-family:'Fraunces',serif;font-size:27px;font-weight:700;color:var(--ink);line-height:1;} .vamilio-app .lh-points small{font-size:12.5px;color:var(--muted);} .vamilio-app .lh-next-reward{ display:flex;align-items:center;gap:13px;margin-top:auto;padding:13px 15px;border-radius:var(--lh-r-sm); background:var(--lh-amber-soft);border:1px solid rgba(227,165,75,.25); } .vamilio-app .lh-next-reward .ic{width:22px;height:22px;color:#B57A1F;flex:0 0 auto;} .vamilio-app .lh-next-reward div{flex:1;min-width:0;} .vamilio-app .lh-next-reward b{display:block;font-size:13px;color:var(--ink);} .vamilio-app .lh-next-reward small{display:block;font-size:12px;color:#8A6420;margin:1px 0 8px;} /* Tägliche Challenge */ .vamilio-app .lh-challenge{ display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--lh-r); background:linear-gradient(120deg,var(--lh-amber-soft),#FDFAF3); border:1px solid rgba(227,165,75,.28); } .vamilio-app .lh-challenge-ic{flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fff;color:#B57A1F;box-shadow:0 4px 12px rgba(181,122,31,.14);} .vamilio-app .lh-challenge-ic .ic{width:22px;height:22px;} .vamilio-app .lh-challenge-txt{flex:1;min-width:0;} .vamilio-app .lh-challenge-txt b{display:block;font-size:15px;color:var(--ink);} .vamilio-app .lh-challenge-txt small{display:block;font-size:13px;color:var(--muted);margin:2px 0 9px;} .vamilio-app .lh-challenge-bar{display:flex;align-items:center;gap:10px;max-width:420px;} .vamilio-app .lh-challenge-bar .lh-bar{flex:1;} .vamilio-app .lh-challenge-bar span:last-child{font-size:12px;font-weight:800;color:#8A6420;} /* ============================================================ 2 · FACH-START (Klassenstufe + Schwerpunkt) ============================================================ */ .vamilio-app .lh-back{ display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:99px; border:1px solid var(--lh-line);background:var(--lh-card); font-size:13.5px;font-weight:700;color:var(--plum);cursor:pointer;transition:background .16s; } .vamilio-app .lh-back:hover{background:var(--cream);} .vamilio-app .lh-back .ic{width:14px;height:14px;transform:rotate(180deg);} /* Kopfzeile von Lernreise und Belohnungen */ .vamilio-app .lh-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 22px;} .vamilio-app .lh-head-title{font-family:'Fraunces',serif;font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--plum-deep);margin:0;} .vamilio-app .lh-head-sub{width:100%;margin:-12px 0 0;font-size:14px;color:var(--muted);} /* Kopfzeile über dem Fach */ .vamilio-app .lh-subhead{display:flex;align-items:center;gap:18px;margin:0 0 18px;} .vamilio-app .lh-subhead-title{font-family:'Fraunces',serif;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--plum-deep);} .vamilio-app .lh-setup-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;} /* Fach-Kopf mit Tutor */ .vamilio-app .lh-fachhero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,350px);gap:18px;align-items:end;margin:0 0 18px;} .vamilio-app .lh-fachhero-h{display:flex;align-items:center;gap:14px;margin:0 0 10px;} .vamilio-app .lh-fach-ic{ flex:0 0 auto;width:52px;height:52px;border-radius:16px;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .lh-fach-ic .ic{width:24px;height:24px;} .vamilio-app .lh-fach-ic.c-amber{background:var(--lh-amber-soft);color:#B57A1F;} .vamilio-app .lh-fach-ic.c-blue{background:var(--lh-blue-soft);color:#3D6BA8;} .vamilio-app .lh-fach-ic.c-green{background:var(--lh-green-soft);color:var(--lh-green);} .vamilio-app .lh-fach-ic.c-plum{background:#F3E9F8;color:var(--orchid);} .vamilio-app .lh-fachhero h1{ font-family:'Fraunces',serif;font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1.05; letter-spacing:-.03em;color:var(--plum-deep);margin:0; } .vamilio-app .lh-fachhero-txt > p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);max-width:46ch;} .vamilio-app .lh-fachhero-buddy{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;min-height:150px;} .vamilio-app .lh-fachhero-buddy::before{ content:"";position:absolute;right:4%;bottom:0;width:170px;height:140px;border-radius:50%; background:radial-gradient(60% 60% at 50% 55%,rgba(201,182,218,.24),transparent 70%); } .vamilio-app .lh-fachhero-buddy img{position:relative;flex:0 0 auto;width:148px;height:auto;filter:drop-shadow(0 14px 24px rgba(46,26,57,.16));} .vamilio-app .lh-bubble{ position:relative;flex:0 1 auto;max-width:200px;margin-bottom:52px;padding:12px 15px;z-index:2; background:var(--lh-card);border:1px solid var(--lh-line);border-radius:16px; box-shadow:var(--lh-shadow-lift);font-size:12.6px;line-height:1.5;color:var(--ink); } .vamilio-app .lh-bubble::after{ content:"";position:absolute;right:-6px;bottom:14px;width:11px;height:11px;transform:rotate(45deg); background:var(--lh-card);border-right:1px solid var(--lh-line);border-top:1px solid var(--lh-line); } /* Schrittkarte */ .vamilio-app .lh-setup-card{position:relative;padding:26px;} .vamilio-app .lh-step{display:flex;align-items:flex-start;gap:13px;margin:0 0 16px;} .vamilio-app .lh-step-n{ flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:var(--plum);color:#fff;font-weight:800;font-size:14px; } .vamilio-app .lh-step-txt{flex:1;min-width:0;} .vamilio-app .lh-step-txt h3{font-family:'Fraunces',serif;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--plum-deep);margin:3px 0 0;} .vamilio-app .lh-step-txt h3 em{font-style:normal;font-weight:600;font-size:15px;color:var(--orchid);} .vamilio-app .lh-step-txt p{margin:5px 0 0;font-size:13.5px;color:var(--muted);} .vamilio-app .lh-sep{border:0;border-top:1px solid var(--lh-line);margin:26px 0;} .vamilio-app .lh-grades{display:flex;flex-wrap:wrap;gap:9px;} .vamilio-app .lh-grade{ min-width:54px;height:54px;padding:0 6px;border:1px solid var(--lh-line);border-radius:14px; background:var(--lh-card);font-family:'Bricolage Grotesque';font-weight:800;font-size:16px;color:var(--ink); cursor:pointer;transition:.15s; } .vamilio-app .lh-grade:hover{border-color:var(--lilac);background:var(--cream);} .vamilio-app .lh-grade.is-sel{background:var(--plum);border-color:var(--plum);color:#fff;box-shadow:0 6px 16px rgba(81,48,100,.24);} .vamilio-app .lh-hint{color:var(--muted);font-size:13px;margin:12px 0 0;line-height:1.5;} /* Deko-Illustration rechts neben der ersten Schritt-Überschrift */ .vamilio-app .lh-setup-deko{flex:0 0 auto;width:96px;height:auto;margin:-22px -4px -10px 12px;pointer-events:none;} .vamilio-app .lh-topic{ width:100%;box-sizing:border-box;border:1px solid var(--lh-line-hard);border-radius:var(--lh-r-sm); padding:15px 17px;font:inherit;font-size:max(16px,1em);background:var(--lh-card);color:var(--ink);transition:.16s; } .vamilio-app .lh-topic:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} /* Themenvorschläge */ .vamilio-app .lh-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:12px;} .vamilio-app .lh-topic-chip{ display:flex;align-items:center;gap:11px;padding:13px 15px;text-align:left; border:1px solid var(--lh-line);border-radius:var(--lh-r-sm);background:var(--lh-card); font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s; } .vamilio-app .lh-topic-chip:hover{border-color:var(--lilac);background:var(--cream);transform:translateY(-2px);} .vamilio-app .lh-topic-chip.is-sel{border-color:var(--plum);background:var(--lilac-soft);box-shadow:0 0 0 2px rgba(81,48,100,.10);} .vamilio-app .lh-topic-chip .ic{ flex:0 0 auto;width:34px;height:34px;padding:8px;border-radius:10px; background:var(--lilac-soft);color:var(--plum);box-sizing:border-box; } .vamilio-app .lh-topic-chip.is-sel .ic{background:var(--plum);color:#fff;} .vamilio-app .lh-topic-chip span{flex:1;min-width:0;} /* Hinweisbox */ .vamilio-app .lh-why{ display:flex;align-items:center;gap:14px;margin:22px 0;padding:16px 18px; border-radius:var(--lh-r);background:linear-gradient(120deg,var(--lilac-soft),#FBF7FD); border:1px solid rgba(201,182,218,.45); } .vamilio-app .lh-why-ic{flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--lh-amber);box-shadow:0 3px 9px rgba(46,26,57,.10);} .vamilio-app .lh-why-ic .ic{width:18px;height:18px;} .vamilio-app .lh-why > div{flex:1;min-width:0;} .vamilio-app .lh-why b{display:block;font-size:14.5px;color:var(--plum-deep);margin-bottom:4px;} .vamilio-app .lh-why p{margin:0;font-size:13px;line-height:1.55;color:var(--muted);} .vamilio-app .lh-why img{flex:0 0 auto;width:74px;height:auto;} /* Start-Knöpfe */ .vamilio-app .lh-startrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:6px;} .vamilio-app .lh-btn-xl{padding:16px 20px;justify-content:flex-start;text-align:left;gap:13px;} .vamilio-app .lh-btn-xl span{display:flex;flex-direction:column;gap:3px;line-height:1.25;} .vamilio-app .lh-btn-xl b{font-size:15px;font-weight:700;} .vamilio-app .lh-btn-xl small{font-size:12.3px;font-weight:500;opacity:.78;} .vamilio-app .lh-btn-xl .ic{width:20px;height:20px;} .vamilio-app .lh-btn-xl .lh-btn-arrow{margin-left:auto;width:17px;height:17px;} /* Rechte Spalte: Tutor-Karte, Tipps, Fortschritt */ .vamilio-app .lh-tutorbig{text-align:center;} .vamilio-app .lh-tutorbig > h4{justify-content:flex-start;} .vamilio-app .lh-tutorbig img{width:132px;height:auto;margin:0 auto 14px;filter:drop-shadow(0 12px 20px rgba(46,26,57,.16));} .vamilio-app .lh-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;text-align:left;} .vamilio-app .lh-checks li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink);} .vamilio-app .lh-checks .ic{width:16px;height:16px;color:var(--plum);flex:0 0 auto;} .vamilio-app .lh-checks .lh-check-heart{margin-left:auto;color:#E14D5A;} .vamilio-app .lh-tiplist{display:flex;flex-direction:column;gap:14px;} .vamilio-app .lh-tipitem{display:flex;gap:11px;align-items:flex-start;} .vamilio-app .lh-tipitem-ic{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--lilac-soft);color:var(--plum);} .vamilio-app .lh-tipitem-ic.is-red{background:#FBECEE;color:#E14D5A;} .vamilio-app .lh-tipitem-ic .ic{width:16px;height:16px;} .vamilio-app .lh-tipitem b{display:block;font-size:13px;color:var(--ink);} .vamilio-app .lh-tipitem small{display:block;font-size:12.3px;line-height:1.5;color:var(--muted);margin-top:2px;} .vamilio-app .lh-sparksvg{width:100%;height:auto;overflow:visible;} .vamilio-app .lh-spark-line{fill:none;stroke:var(--plum);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} .vamilio-app .lh-spark-area{fill:rgba(81,48,100,.10);stroke:none;} .vamilio-app .lh-sparksvg circle{fill:var(--plum);} .vamilio-app .lh-spark-star{color:var(--lh-amber);overflow:visible;} .vamilio-app .lh-spark-note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);} .vamilio-app #lh-spark.is-empty{display:none;} /* ============================================================ 3 · LERNREISE (Missionen) ============================================================ */ .vamilio-app .lh-world{border:1px solid var(--lh-line);border-radius:var(--lh-r-lg);background:var(--lh-card);box-shadow:var(--lh-shadow);overflow:hidden;margin-bottom:16px;} .vamilio-app .lh-world.is-locked{opacity:.6;} .vamilio-app .lh-world-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--lh-line);background:linear-gradient(120deg,var(--lilac-soft),transparent 70%);} .vamilio-app .lh-world-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--plum);box-shadow:0 3px 10px rgba(81,48,100,.12);} .vamilio-app .lh-world-ic .ic{width:19px;height:19px;} .vamilio-app .lh-world-name{flex:1;min-width:0;font-family:'Fraunces',serif;font-weight:700;font-size:16px;color:var(--plum-deep);} .vamilio-app .lh-world-stars{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--muted);} .vamilio-app .lh-world-stars .ic{width:15px;height:15px;color:var(--lh-amber);} .vamilio-app .lh-nodes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 20px 20px;} .vamilio-app .lh-node{ position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 8px 12px; border:1px solid var(--lh-line);border-radius:var(--lh-r);background:var(--lh-card);cursor:pointer; transition:transform .16s,box-shadow .16s,border-color .16s; } .vamilio-app .lh-node b{font-family:'Fraunces',serif;font-weight:700;font-size:20px;color:var(--plum-deep);} .vamilio-app .lh-node b .ic{width:18px;height:18px;color:var(--muted);} .vamilio-app .lh-node:not([disabled]):hover{transform:translateY(-3px);box-shadow:var(--lh-shadow-lift);border-color:var(--lilac);} .vamilio-app .lh-node.is-done{background:var(--lilac-soft);border-color:transparent;} .vamilio-app .lh-node.is-current{border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.12);} .vamilio-app .lh-node.is-locked{opacity:.42;cursor:not-allowed;} .vamilio-app .lh-node-stars{display:flex;gap:2px;} .vamilio-app .lh-node-stars .ic{width:13px;height:13px;color:var(--lh-line-hard);} .vamilio-app .lh-node-stars .on .ic{color:var(--lh-amber);} .vamilio-app .lh-saved{margin:18px 0 0;} .vamilio-app .lh-saved-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;} .vamilio-app .lh-saved-item{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--lh-line);border-radius:var(--lh-r-sm);background:var(--cream);font-size:13.5px;line-height:1.45;} .vamilio-app .lh-saved-item .ic{width:15px;height:15px;color:var(--plum);flex:0 0 auto;} .vamilio-app .lh-saved-item span{flex:1;min-width:0;} .vamilio-app .lh-saved-item small{color:var(--muted);font-size:12px;} .vamilio-app .lh-saved-del{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--muted);cursor:pointer;} .vamilio-app .lh-saved-del:hover{background:var(--lh-red-soft);color:var(--lh-red);} .vamilio-app .lh-saved-del .ic{width:13px;height:13px;color:inherit;} .vamilio-app .lh-empty{margin:0;font-size:13.5px;color:var(--muted);} /* ============================================================ 4 · AUFGABE ============================================================ */ .vamilio-app .lh-taskbar{ display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:0 0 16px; border-bottom:1px solid var(--lh-line); } .vamilio-app .lh-crumbs{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;} .vamilio-app .lh-crumb{font-size:13px;font-weight:700;color:var(--muted);text-align:center;} .vamilio-app .lh-dots{display:flex;align-items:center;gap:0;width:min(300px,60%);} .vamilio-app .lh-dots i{ flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--lilac-soft); border:2px solid var(--lh-card);box-shadow:0 0 0 1px var(--lilac-soft);transition:.25s; } .vamilio-app .lh-dots i.on{background:var(--plum);box-shadow:0 0 0 1px var(--plum);} .vamilio-app .lh-dots i.now{transform:scale(1.35);} .vamilio-app .lh-dots u{flex:1;height:3px;background:var(--lilac-soft);text-decoration:none;transition:background .25s;} .vamilio-app .lh-dots u.on{background:var(--plum);} .vamilio-app .lh-taskbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;} .vamilio-app .lh-coins{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;background:var(--lh-amber-soft);color:#8A6420;font-size:13px;font-weight:800;} .vamilio-app .lh-coins .ic{width:16px;height:16px;color:var(--lh-amber);} .vamilio-app .lh-iconbtn{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--lh-line);background:var(--lh-card);color:var(--muted);cursor:pointer;transition:.16s; } .vamilio-app .lh-iconbtn:hover{background:var(--cream);color:var(--plum);} .vamilio-app .lh-iconbtn .ic{width:16px;height:16px;} .vamilio-app .lh-iconbtn.is-off{opacity:.45;} .vamilio-app .lh-task-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;} /* Aufgaben-Karte */ .vamilio-app .lh-taskcard{background:var(--lh-card);border:1px solid var(--lh-line);border-radius:var(--lh-r-lg);box-shadow:var(--lh-shadow);overflow:hidden;} .vamilio-app .lh-taskcard-top{display:flex;align-items:center;gap:14px;padding:16px 22px 12px;} .vamilio-app .lh-mission{font-size:14.5px;font-weight:800;color:var(--plum-deep);} .vamilio-app .lh-mission span{color:var(--muted);font-weight:700;margin-left:8px;} .vamilio-app .lh-hearts{margin-left:auto;display:flex;gap:5px;} .vamilio-app .lh-hearts .ic{width:19px;height:19px;color:var(--lh-line-hard);} .vamilio-app .lh-hearts .on .ic{color:#E14D5A;} .vamilio-app .lh-taskline{height:3px;background:var(--lilac-soft);margin:0 22px;border-radius:99px;overflow:hidden;} .vamilio-app .lh-taskline > span{display:block;height:100%;width:0;background:var(--plum);border-radius:99px;transition:width .4s ease;} .vamilio-app .lh-taskbody{padding:22px;} .vamilio-app .lh-buddyline{display:flex;align-items:center;gap:10px;margin:0 0 18px;} .vamilio-app .lh-buddyline-ic{ flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(150deg,var(--plum),var(--orchid));color:#fff; } .vamilio-app .lh-buddyline-ic .ic{width:15px;height:15px;} .vamilio-app .lh-buddyline-ic.is-think{animation:lhPulse 1.5s ease-in-out infinite;} .vamilio-app .lh-buddyline-ic.is-happy{background:linear-gradient(150deg,var(--lh-green),#3BBF78);} @keyframes lhPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.09);}} @media (prefers-reduced-motion:reduce){.vamilio-app .lh-buddyline-ic{animation:none;}} .vamilio-app .lh-buddyline span{font-size:13.5px;color:var(--muted);font-style:italic;} .vamilio-app .lh-q{ font-family:'Fraunces',serif;font-weight:700;font-size:clamp(20px,2.6vw,27px);line-height:1.3; letter-spacing:-.02em;color:var(--plum-deep);margin:0 0 20px; } /* Anschauungs-Hilfe (Zählbilder) */ .vamilio-app .lh-visual{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px; padding:22px 18px;margin:0 0 22px;border:1px solid var(--lh-line);border-radius:var(--lh-r); background:linear-gradient(150deg,var(--cream),#FFFDFA); } .vamilio-app .lh-visual i{font-style:normal;font-size:clamp(34px,4.6vw,46px);line-height:1;filter:drop-shadow(0 5px 8px rgba(46,26,57,.12));} .vamilio-app .lh-visual i.is-b{opacity:.92;} .vamilio-app .lh-visual em{font-style:normal;font-size:32px;font-weight:700;color:var(--ink);margin:0 10px;} .vamilio-app .lh-visual em.is-gap{width:18px;} .vamilio-app .lh-visual .lh-visual-eq{width:100%;text-align:center;font-family:'Fraunces',serif;font-size:30px;font-weight:700;color:var(--plum-deep);margin-top:8px;} .vamilio-app .lh-visual .lh-visual-eq b{color:var(--lh-green);} /* Antwortbereich */ .vamilio-app .lh-answerbox{border:1px solid var(--lh-line);border-radius:var(--lh-r);padding:20px;background:#FFFDFA;} .vamilio-app .lh-answerbox > b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);} .vamilio-app .lh-answerbox > small{display:block;font-size:12.5px;color:var(--muted);margin:3px 0 16px;} .vamilio-app .lh-numfield{ display:block;width:130px;margin:0 auto 14px;text-align:center; border:2px solid var(--plum);border-radius:14px;padding:14px 10px;background:var(--lh-card); font-family:'Fraunces',serif;font-size:34px;font-weight:700;color:var(--plum-deep); min-height:70px;line-height:1.2; } .vamilio-app .lh-numfield:empty::before{content:attr(data-ph);color:var(--lilac);} .vamilio-app .lh-numpad{display:grid;grid-template-columns:repeat(3,64px);gap:9px;justify-content:center;margin-bottom:18px;} .vamilio-app .lh-key{ height:46px;border:1px solid var(--lh-line);border-radius:11px;background:var(--lh-card); font-family:'Bricolage Grotesque';font-weight:700;font-size:17px;color:var(--ink); cursor:pointer;transition:.12s;display:grid;place-items:center; } .vamilio-app .lh-key:hover{background:var(--cream);border-color:var(--lilac);} .vamilio-app .lh-key:active{transform:translateY(1px);background:var(--lilac-soft);} .vamilio-app .lh-key .ic{width:17px;height:17px;color:var(--muted);} .vamilio-app .lh-input{ width:100%;box-sizing:border-box;border:1.5px solid var(--lh-line-hard);border-radius:var(--lh-r-sm); padding:15px 16px;font:inherit;font-size:max(16px,1.05em);background:var(--lh-card);color:var(--ink);transition:.16s;margin-bottom:16px; } .vamilio-app .lh-input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .lh-choices{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;} .vamilio-app .lh-choice{ text-align:left;border:1.5px solid var(--lh-line);border-radius:var(--lh-r-sm);padding:14px 16px; background:var(--lh-card);font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s; } .vamilio-app .lh-choice:hover{border-color:var(--lilac);background:var(--cream);} .vamilio-app .lh-choice.is-sel{border-color:var(--plum);background:var(--lilac-soft);} .vamilio-app .lh-choice.is-correct{border-color:var(--lh-green);background:var(--lh-green-soft);color:#0F6B39;} .vamilio-app .lh-choice.is-incorrect{border-color:var(--lh-red);background:var(--lh-red-soft);color:#A23F33;} .vamilio-app .lh-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;} .vamilio-app .lh-taskcard.is-shake{animation:lhShake .4s;} @keyframes lhShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} /* Ergebnis-Ansicht (richtig / nicht ganz) */ .vamilio-app .lh-result{ position:relative;text-align:center;padding:26px 22px 26px;margin:14px; border-radius:var(--lh-r);border:1px solid rgba(31,157,87,.20); background:linear-gradient(160deg,#F2F9F4,#FBFDFB 62%); } .vamilio-app .lh-result.is-wrong{ border-color:rgba(194,85,75,.20); background:linear-gradient(160deg,#FCF3F1,#FDFBFA 62%); } .vamilio-app .lh-result-ic{ width:74px;height:74px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center; background:var(--lh-green);color:#fff;box-shadow:0 10px 26px rgba(31,157,87,.30); animation:lhPop .45s cubic-bezier(.2,.9,.3,1.4) both; } .vamilio-app .lh-result.is-wrong .lh-result-ic{background:var(--lh-red);box-shadow:0 10px 26px rgba(194,85,75,.28);} .vamilio-app .lh-result-ic .ic{width:34px;height:34px;} @keyframes lhPop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}} .vamilio-app .lh-result h3{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(21px,2.8vw,27px);color:var(--lh-green);margin:0 0 6px;letter-spacing:-.02em;} .vamilio-app .lh-result.is-wrong h3{color:var(--lh-red);} .vamilio-app .lh-result > p{margin:0 0 22px;font-size:14.5px;color:var(--muted);} .vamilio-app .lh-reward-box{ display:flex;align-items:center;gap:13px;max-width:420px;margin:0 auto 16px;padding:15px 18px; border:1px solid rgba(227,165,75,.30);border-radius:var(--lh-r);background:var(--lh-amber-soft);text-align:left; } .vamilio-app .lh-reward-box .ic{width:24px;height:24px;padding:9px;box-sizing:content-box;border-radius:50%;background:#fff;color:var(--lh-amber);flex:0 0 auto;box-shadow:0 3px 9px rgba(181,122,31,.20);} .vamilio-app .lh-reward-box b{display:block;font-size:15.5px;color:var(--ink);} .vamilio-app .lh-reward-box small{display:block;font-size:12.5px;color:#8A6420;margin-top:2px;} .vamilio-app .lh-your-answer{ display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:420px;margin:0 auto 22px; padding:14px 18px;border:1px solid var(--lh-line);border-radius:var(--lh-r);background:#FFFDFA;text-align:left; } .vamilio-app .lh-your-answer b{font-size:14px;color:var(--ink);} .vamilio-app .lh-your-answer span{ min-width:56px;padding:8px 12px;border-radius:10px;text-align:center; border:1.5px solid var(--lh-green);color:var(--lh-green);font-weight:800;font-size:17px; } .vamilio-app .lh-result.is-wrong .lh-your-answer span{border-color:var(--lh-red);color:var(--lh-red);} .vamilio-app .lh-result .lh-actions{justify-content:center;} .vamilio-app .lh-result > .lh-explain-note{max-width:520px;margin:0 auto 20px;padding:14px 18px;border-radius:var(--lh-r);background:var(--cream);font-size:14px;line-height:1.6;color:var(--ink);text-align:left;} /* Konfetti */ .vamilio-app .lh-confetti{position:absolute;inset:-14px -22px auto;height:220px;pointer-events:none;overflow:hidden;} .vamilio-app .lh-confetti i{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;opacity:0;animation:lhConf 2.4s ease-in forwards;} .vamilio-app .lh-confetti i:nth-child(3n){background:var(--lh-amber);} .vamilio-app .lh-confetti i:nth-child(3n+1){background:var(--orchid);} .vamilio-app .lh-confetti i:nth-child(3n+2){background:var(--lh-green);} @keyframes lhConf{0%{opacity:0;transform:translateY(0) rotate(0);}10%{opacity:1;}100%{opacity:0;transform:translateY(230px) rotate(300deg);}} @media (prefers-reduced-motion:reduce){.vamilio-app .lh-confetti{display:none;}} /* Rechte Spalte */ .vamilio-app .lh-rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px;} .vamilio-app .lh-railcard{background:var(--lh-card);border:1px solid var(--lh-line);border-radius:var(--lh-r);box-shadow:var(--lh-shadow);padding:16px 18px;} .vamilio-app .lh-railcard > h4{font-family:'Fraunces',serif;font-weight:700;font-size:15px;color:var(--plum-deep);margin:0 0 12px;display:flex;align-items:center;gap:8px;} .vamilio-app .lh-railcard > h4 .ic{width:16px;height:16px;color:var(--lh-amber);} .vamilio-app .lh-railcard > h4 .lh-railcount{margin-left:auto;font-family:'Bricolage Grotesque';font-size:12px;font-weight:700;color:var(--muted);} .vamilio-app .lh-tutorcard{display:flex;gap:12px;align-items:flex-start;} .vamilio-app .lh-tutorcard img{width:86px;height:auto;flex:0 0 auto;filter:drop-shadow(0 8px 14px rgba(46,26,57,.16));} .vamilio-app .lh-speech{ position:relative;flex:1;min-width:0;padding:12px 14px;border-radius:14px; background:var(--cream);border:1px solid var(--lh-line); } .vamilio-app .lh-speech::before{ content:"";position:absolute;left:-6px;top:20px;width:11px;height:11px;transform:rotate(45deg); background:var(--cream);border-left:1px solid var(--lh-line);border-bottom:1px solid var(--lh-line); } .vamilio-app .lh-speech b{display:block;font-size:13.5px;color:var(--plum-deep);margin-bottom:5px;} .vamilio-app .lh-speech p{margin:0;font-size:12.8px;line-height:1.5;color:var(--muted);} .vamilio-app .lh-tip-q{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 4px;} .vamilio-app .lh-tip-a{margin:0 0 10px;font-size:12.8px;line-height:1.55;color:var(--muted);} .vamilio-app .lh-tip-more{display:inline-flex;align-items:center;gap:5px;font-size:12.8px;font-weight:700;color:var(--plum);cursor:pointer;} .vamilio-app .lh-tip-more .ic{width:13px;height:13px;} .vamilio-app .lh-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;counter-reset:lhstep;} .vamilio-app .lh-steps li{display:flex;gap:11px;} .vamilio-app .lh-steps li::before{ counter-increment:lhstep;content:counter(lhstep); flex:0 0 auto;width:23px;height:23px;border-radius:50%;display:grid;place-items:center; background:var(--plum);color:#fff;font-size:12px;font-weight:800; } .vamilio-app .lh-steps li > div{flex:1;min-width:0;} .vamilio-app .lh-steps b{display:block;font-size:13px;color:var(--ink);} .vamilio-app .lh-steps small{display:block;font-size:12.3px;line-height:1.5;color:var(--muted);margin-top:2px;} .vamilio-app .lh-steps-out{margin:0;font-size:12.8px;line-height:1.6;color:var(--ink);white-space:pre-wrap;} .vamilio-app .lh-helplinks{display:flex;flex-direction:column;gap:4px;} .vamilio-app .lh-helplink{ display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:11px; font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s;text-align:left;width:100%; } .vamilio-app .lh-helplink:hover{background:var(--cream);} .vamilio-app .lh-helplink .ic{width:16px;height:16px;color:var(--plum);flex:0 0 auto;} .vamilio-app .lh-railstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;} .vamilio-app .lh-railmission{margin:0 0 14px;} .vamilio-app .lh-railmission-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12.5px;color:var(--muted);} .vamilio-app .lh-railmission-top b{font-size:13px;color:var(--ink);} .vamilio-app .lh-next-lead{margin:0 0 12px;font-size:12.5px;color:var(--muted);} .vamilio-app .lh-nextstep{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;} .vamilio-app .lh-nextstep-n{ flex:0 0 auto;width:23px;height:23px;border-radius:50%;display:grid;place-items:center; background:var(--plum);color:#fff;font-size:12px;font-weight:800; } .vamilio-app .lh-nextstep b{display:block;font-size:13px;color:var(--ink);} .vamilio-app .lh-nextstep small{display:block;font-size:12.3px;line-height:1.5;color:var(--muted);margin-top:2px;} .vamilio-app .lh-next-start{width:100%;margin-bottom:10px;} .vamilio-app .lh-railstat{text-align:center;padding:12px 6px;border-radius:12px;background:var(--cream);} .vamilio-app .lh-railstat b{display:block;font-family:'Fraunces',serif;font-size:18px;font-weight:700;color:var(--plum-deep);line-height:1;} .vamilio-app .lh-railstat small{display:block;font-size:11px;color:var(--muted);margin-top:5px;} .vamilio-app .lh-railstat.is-green b{color:var(--lh-green);} .vamilio-app .lh-railstat.is-amber b{color:#B57A1F;} /* Fußleiste der Aufgabe */ .vamilio-app .lh-bottombar{ display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:14px 18px; border:1px solid rgba(227,165,75,.26);border-radius:var(--lh-r); background:linear-gradient(120deg,var(--lh-amber-soft),#FFFDF8); } .vamilio-app .lh-bottombar .lh-btn{background:#fff;} .vamilio-app .lh-bottombar .lh-btn-primary{background:var(--plum);} .vamilio-app .lh-bottombar-mid{flex:1;display:flex;justify-content:center;} .vamilio-app .lh-bookmark.is-on{border-color:var(--plum);color:var(--plum);background:var(--lilac-soft);} /* ============================================================ 5 · BELOHNUNGEN (Tausch-Station) ============================================================ */ .vamilio-app .lh-shop-balance{ display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:14px 18px; border:1px solid rgba(227,165,75,.28);border-radius:var(--lh-r);background:var(--lh-amber-soft);font-size:14px;color:var(--ink); } .vamilio-app .lh-shop-balance .ic{width:20px;height:20px;color:var(--lh-amber);} .vamilio-app .lh-shop-balance b{font-family:'Fraunces',serif;font-size:18px;font-weight:700;color:var(--plum-deep);} .vamilio-app .lh-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;} .vamilio-app .lh-av{ display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px; border:1px solid var(--lh-line);border-radius:var(--lh-r);background:var(--lh-card);box-shadow:var(--lh-shadow); } .vamilio-app .lh-av.is-active{border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .lh-av.is-far{opacity:.7;} .vamilio-app .lh-av canvas{width:100%;max-width:140px;height:auto;border-radius:12px;display:block;} .vamilio-app .lh-av-name{font-size:14px;font-weight:700;color:var(--plum-deep);} .vamilio-app .lh-av .lh-btn{width:100%;padding:10px 8px;font-size:12.5px;} .vamilio-app .lh-av-state{font-size:12.5px;font-weight:700;padding:10px 8px;} .vamilio-app .lh-av-state.is-active{color:var(--plum);} .vamilio-app .lh-av-state.is-far{color:var(--muted);font-weight:600;} .vamilio-app .lh-shop-note{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);} /* ============================================================ 6 · MODALE + TOAST ============================================================ */ .vamilio-app .lh-modal{ position:fixed;inset:0;z-index:99500;display:grid;place-items:center;padding:24px; background:rgba(46,26,57,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); opacity:0;transition:opacity .25s; } .vamilio-app .lh-modal.is-show{opacity:1;} .vamilio-app .lh-modal-card{ position:relative;overflow:hidden;width:min(430px,100%);text-align:center; padding:34px 28px 28px;background:var(--lh-card);border-radius:26px;box-shadow:0 30px 80px rgba(46,26,57,.35); transform:scale(.92);transition:transform .3s cubic-bezier(.2,.9,.3,1.3); } .vamilio-app .lh-modal.is-show .lh-modal-card{transform:scale(1);} .vamilio-app .lh-modal-ring{ display:grid;place-items:center;width:88px;height:88px;margin:0 auto 16px;border-radius:50%; background:linear-gradient(135deg,var(--plum),var(--orchid));box-shadow:0 10px 26px rgba(81,48,100,.32); } .vamilio-app .lh-modal-ring b{font-family:'Fraunces',serif;font-size:36px;font-weight:700;color:#fff;} .vamilio-app .lh-modal-card h3{font-family:'Fraunces',serif;font-weight:800;font-size:24px;color:var(--plum-deep);margin:0 0 8px;letter-spacing:-.02em;} .vamilio-app .lh-modal-card > p{font-size:15px;color:var(--muted);margin:0 0 22px;} .vamilio-app .lh-modal-actions{display:flex;flex-direction:column;gap:9px;} .vamilio-app .lh-modal-actions .lh-btn{width:100%;} .vamilio-app .lh-finish-stars{display:flex;justify-content:center;gap:12px;margin:0 0 14px;} .vamilio-app .lh-finish-stars .ic{width:44px;height:44px;color:var(--lh-line-hard);transform:scale(.7);opacity:.5;} .vamilio-app .lh-modal.is-show .lh-finish-stars .on .ic{color:var(--lh-amber);animation:lhStarPop .5s cubic-bezier(.2,.9,.3,1.4) forwards;} @keyframes lhStarPop{0%{transform:scale(.4) rotate(-18deg);opacity:0;}100%{transform:scale(1) rotate(0);opacity:1;}} .vamilio-app .lh-toast{ position:fixed;left:50%;bottom:calc(104px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,16px);z-index:99400;display:flex;align-items:center;gap:12px; max-width:min(420px,calc(100% - 32px));padding:14px 18px;background:var(--lh-card); border:1px solid var(--lilac);border-radius:var(--lh-r);box-shadow:0 16px 40px rgba(46,26,57,.22); font-size:13.5px;line-height:1.45;color:var(--ink);opacity:0;transition:opacity .3s,transform .3s; } .vamilio-app .lh-toast.is-show{opacity:1;transform:translate(-50%,0);} .vamilio-app .lh-toast .ic{width:22px;height:22px;color:var(--plum);flex:0 0 auto;} /* ============================================================ 7 · RESPONSIV ============================================================ */ @media (max-width:1100px){ .vamilio-app .lh-task-cols{grid-template-columns:minmax(0,1fr);} .vamilio-app .lh-setup-cols{grid-template-columns:minmax(0,1fr);} .vamilio-app .lh-rail{position:static;} .vamilio-app .lh-tutorcard img{width:74px;} .vamilio-app .lh-tutorbig img{width:110px;} } @media (max-width:900px){ .vamilio-app .lh-grid-2, .vamilio-app .lh-grid-3{grid-template-columns:minmax(0,1fr);} /* Einspaltig gehört der Tutor direkt unter die Begrüßung – der Tagesplan folgt danach. Dafür lösen wir die beiden Spalten auf. */ .vamilio-app .lh-top{display:flex;flex-direction:column;} .vamilio-app .lh-top-left, .vamilio-app .lh-top-right{display:contents;} .vamilio-app .lh-hero-txt{order:1;} .vamilio-app .lh-hero-buddy{order:2;} .vamilio-app .lh-top-left > .lh-card{order:3;flex:none;} .vamilio-app .lh-top-right > .lh-card{order:4;flex:none;} .vamilio-app .lh-hero-buddy{min-height:0;flex-direction:column;align-items:stretch;gap:14px;} .vamilio-app .lh-hero-buddy::before{display:none;} .vamilio-app .lh-buddy-img{width:180px;align-self:center;} .vamilio-app .lh-hero-cta{position:static;align-self:flex-start;} .vamilio-app .lh-hero-bubble{position:static;max-width:none;} .vamilio-app .lh-sparks{display:none;} .vamilio-app .lh-fachhero{grid-template-columns:minmax(0,1fr);} .vamilio-app .lh-fachhero-buddy{order:-1;justify-content:center;min-height:0;} .vamilio-app .lh-fachhero-buddy img{width:132px;} .vamilio-app .lh-bubble{position:static;max-width:none;margin:0 0 0 12px;align-self:center;} .vamilio-app .lh-bubble::after{display:none;} .vamilio-app .lh-setup-deko{display:none;} } @media (max-width:640px){ .vamilio-app .lh-card{padding:18px;} .vamilio-app .lh-taskbody{padding:18px;} .vamilio-app .lh-result{margin:10px 0 0;border-left:0;border-right:0;border-radius:0;padding:24px 16px;} .vamilio-app .lh-taskbar{flex-wrap:wrap;gap:12px;} .vamilio-app .lh-crumbs{order:3;flex:1 0 100%;} .vamilio-app .lh-dots{width:100%;} .vamilio-app .lh-taskbar-right{margin-left:auto;} .vamilio-app .lh-nodes{grid-template-columns:repeat(2,1fr);} .vamilio-app .lh-numpad{grid-template-columns:repeat(3,minmax(0,74px));} .vamilio-app .lh-actions .lh-btn{width:100%;} .vamilio-app .lh-bottombar{flex-wrap:wrap;} .vamilio-app .lh-bottombar .lh-btn{flex:1 1 auto;min-width:max-content;white-space:nowrap;padding:12px 13px;} .vamilio-app .lh-bottombar-mid{order:3;width:100%;} .vamilio-app .lh-stats{gap:14px;} .vamilio-app .lh-challenge{flex-wrap:wrap;} .vamilio-app .lh-challenge .lh-btn{width:100%;} .vamilio-app .lh-setup-card{padding:20px;} .vamilio-app .lh-why img{display:none;} .vamilio-app .lh-topics{grid-template-columns:minmax(0,1fr);} } /* ============================================================ BABY-SCHLAF · Kartenlayout (sl2-*) Ergänzt die bestehenden .sl-* Bausteine um ein Raster im Stil der übrigen App. Alle Werte stammen aus erfassten Schlafphasen. ============================================================ */ .vamilio-app .sl2{ --sl2-nacht:#5B3A86; --sl2-tag:#E3A54B; --sl2-wach:#E8E2EE; display:flex;flex-direction:column;gap:16px;margin-top:14px; } /* Kopfzeile mit Kind-Auswahl */ .vamilio-app .sl2-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .vamilio-app .sl2-kids{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0;} .vamilio-app .sl2-range{font-size:12.5px;color:var(--muted);font-weight:600;} /* Kennzahlen */ .vamilio-app .sl2-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;} .vamilio-app .sl2-kpi{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:16px;padding:16px 18px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); display:flex;flex-direction:column;gap:5px; } .vamilio-app .sl2-kpi small{font-size:12.5px;color:var(--muted);font-weight:600;} .vamilio-app .sl2-kpi b{font-family:'Fraunces',serif;font-size:25px;font-weight:700;color:var(--plum-deep);line-height:1.1;} .vamilio-app .sl2-kpi > span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);min-height:18px;} .vamilio-app .sl2-diff{ font-style:normal;font-weight:800;font-size:11.5px;padding:2px 8px;border-radius:99px; background:#EAF6EF;color:#1F9D57; } .vamilio-app .sl2-diff.is-down{background:#FBEDEB;color:#C2554B;} /* Karten-Raster */ .vamilio-app .sl2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start;} .vamilio-app .sl2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:20px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .sl2-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;} .vamilio-app .sl2-card-h b{font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--ink);} .vamilio-app .sl2-card-h > span{font-size:12.5px;color:var(--muted);font-weight:600;} .vamilio-app .sl2-track{text-align:center;} .vamilio-app .sl2-track .sl-ring-wrap{margin:0 auto 14px;} /* Verteilung Nacht / Tag / Wach */ .vamilio-app .sl2-donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;} .vamilio-app .sl2-donut{ position:relative;flex:0 0 auto;width:138px;height:138px;border-radius:50%;display:grid;place-items:center; } .vamilio-app .sl2-donut::before{content:"";position:absolute;inset:22px;border-radius:50%;background:#fff;} .vamilio-app .sl2-donut span{position:relative;text-align:center;} .vamilio-app .sl2-donut b{display:block;font-family:'Fraunces',serif;font-size:19px;font-weight:700;color:var(--plum-deep);line-height:1.1;} .vamilio-app .sl2-donut small{display:block;font-size:11px;color:var(--muted);margin-top:2px;} .vamilio-app .sl2-legend{list-style:none;margin:0;padding:0;flex:1;min-width:150px;display:flex;flex-direction:column;gap:11px;} .vamilio-app .sl2-legend li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);} .vamilio-app .sl2-legend i{width:11px;height:11px;border-radius:4px;flex:0 0 auto;} .vamilio-app .sl2-legend i.is-nacht{background:var(--sl2-nacht);} .vamilio-app .sl2-legend i.is-tag{background:var(--sl2-tag);} .vamilio-app .sl2-legend i.is-wach{background:var(--sl2-wach);} .vamilio-app .sl2-legend b{margin-left:auto;font-weight:800;color:var(--plum-deep);} /* Nächstes Nickerchen */ .vamilio-app .sl2-next{ display:flex;align-items:center;gap:13px;margin-top:18px;padding:14px 16px;border-radius:14px; background:linear-gradient(120deg,var(--lilac-soft),#FBF9FD);border:1px solid rgba(201,182,218,.45); } .vamilio-app .sl2-next.is-due{background:linear-gradient(120deg,#FDF3E3,#FFFDF8);border-color:rgba(227,165,75,.4);} .vamilio-app .sl2-next-ic{ flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 3px 9px rgba(46,26,57,.10); } .vamilio-app .sl2-next-ic svg{width:18px;height:18px;} .vamilio-app .sl2-next b{display:block;font-size:14px;color:var(--plum-deep);} .vamilio-app .sl2-next small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;} @media (max-width:640px){ .vamilio-app .sl2-grid{grid-template-columns:minmax(0,1fr);} .vamilio-app .sl2-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} .vamilio-app .sl2-card{padding:16px;} .vamilio-app .sl2-donut-wrap{justify-content:center;} } /* Der 24-Stunden-Ring darf die Karte nicht sprengen – sonst steht die Nachbarkarte in einer großen Leerfläche. */ .vamilio-app .sl2-track .sl-ring-wrap{max-width:320px;} /* ============================================================ ÄRZTE IN DER NÄHE (ae2-*) ============================================================ */ .vamilio-app .ae2{display:flex;flex-direction:column;gap:18px;margin-top:14px;} .vamilio-app .ae2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:20px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } /* Suche + Notfall-Hinweis */ .vamilio-app .ae2-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:18px;align-items:stretch;} .vamilio-app .ae2-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px;} .vamilio-app .ae2-fld{display:flex;flex-direction:column;gap:7px;min-width:0;} .vamilio-app .ae2-fld > span:first-child{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .ae2-fld input, .vamilio-app .ae2-select select{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 14px;font:inherit;font-size:max(16px,1em);background:#fff;color:var(--ink); appearance:none;-webkit-appearance:none;transition:.16s; } .vamilio-app .ae2-fld input:focus, .vamilio-app .ae2-select select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .ae2-select{position:relative;display:block;} /* Andere Stellen der App zeichnen ihren Chevron als Hintergrundbild ins Select – teils mit höherer Spezifität. Ohne !important stünden dort zwei Haken nebeneinander, deshalb wird das Hintergrundbild hart abgeschaltet. */ .vamilio-app .ae2-select select{ -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background-image:none !important; background-color:#fff !important; padding-right:38px !important; } .vamilio-app .ae2-select > .ic{ position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px; color:var(--plum);pointer-events:none; } .vamilio-app .ae2-select > .ic ~ select{padding-left:40px;} .vamilio-app .ae2-select::after{ content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;pointer-events:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); } .vamilio-app .ae2-go{ display:flex;align-items:center;justify-content:center;gap:9px;width:100%; padding:14px 20px;border:0;border-radius:12px;background:var(--plum);color:#fff; font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;cursor:pointer; box-shadow:0 6px 16px rgba(81,48,100,.22);transition:.16s; } .vamilio-app .ae2-go:hover{background:var(--plum-mid);} .vamilio-app .ae2-go .ic{width:17px;height:17px;} .vamilio-app .ae2-go.is-busy{opacity:.6;pointer-events:none;} .vamilio-app .ae2-reset{ display:block;margin:12px auto 0;background:none;border:0;padding:4px; font-size:13px;font-weight:600;color:var(--muted);cursor:pointer; } .vamilio-app .ae2-reset:hover{color:var(--plum);text-decoration:underline;} .vamilio-app .ae2-help{ position:relative;overflow:hidden; background:linear-gradient(150deg,var(--lilac-soft),#FBF9FD);border-color:rgba(201,182,218,.5); } .vamilio-app .ae2-help-bg{ position:absolute;right:-18px;bottom:-18px;width:120px;height:120px; color:var(--plum);opacity:.10;pointer-events:none; } .vamilio-app .ae2-help b{position:relative;display:block;font-family:'Fraunces',serif;font-size:17px;color:var(--plum-deep);margin-bottom:8px;} .vamilio-app .ae2-help p{position:relative;margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--muted);} .vamilio-app .ae2-help-btn{ position:relative;display:inline-block;padding:11px 18px;border-radius:11px;background:#fff; border:1px solid rgba(46,26,57,.12);font-size:13.5px;font-weight:700;color:var(--plum); } .vamilio-app .ae2-help-btn:hover{background:var(--cream);} /* Ergebnisse */ .vamilio-app .ae2-results{padding:0;overflow:hidden;} .vamilio-app .ae2-results-h{display:flex;align-items:center;gap:10px 12px;padding:18px 20px;border-bottom:1px solid rgba(46,26,57,.08);flex-wrap:wrap;min-width:0;} .vamilio-app .ae2-results-h > b{font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--ink);} /* Chip und Karten-Knopf bleiben IMMER einzeilig – auf schmalen Schirmen bricht stattdessen die Kopfzeile als Ganzes um. */ .vamilio-app .ae2-count{padding:5px 11px;border-radius:99px;background:var(--lilac-soft);color:var(--plum);font-size:12.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;} .vamilio-app .ae2-mapbtn{ margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 15px; border:1px solid rgba(46,26,57,.14);border-radius:99px;background:#fff; font-size:13px;font-weight:700;color:var(--plum);cursor:pointer;transition:.16s; white-space:nowrap;flex:0 0 auto; } .vamilio-app .ae2-mapbtn:hover{background:var(--cream);} .vamilio-app .ae2-mapbtn.is-on{background:var(--plum);border-color:var(--plum);color:#fff;} .vamilio-app .ae2-mapbtn .ic{width:15px;height:15px;} .vamilio-app .ae2-split{display:grid;grid-template-columns:minmax(0,1fr);} .vamilio-app .ae2.has-map .ae2-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .vamilio-app .ae2-list{padding:8px 12px 14px;} .vamilio-app .ae2-list .vx-muted{padding:0 8px;font-size:13px;} .vamilio-app .ae2-item{display:flex;align-items:flex-start;gap:12px;padding:14px 10px;border-bottom:1px solid rgba(46,26,57,.07);} .vamilio-app .ae2-item:last-child{border-bottom:0;} .vamilio-app .ae2-num{ flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:var(--plum);color:#fff;font-size:12.5px;font-weight:800;margin-top:2px; } .vamilio-app .ae2-item-main{flex:1;min-width:0;} .vamilio-app .ae2-item-top{display:flex;align-items:baseline;gap:10px;} .vamilio-app .ae2-item-top b{flex:1;min-width:0;font-size:14.5px;color:var(--ink);} .vamilio-app .ae2-dist{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .ae2-item-sub{font-size:12.8px;color:var(--muted);margin-top:3px;line-height:1.45;} .vamilio-app .ae2-item-zeit{font-size:12.5px;color:#1F9D57;font-weight:600;margin-top:5px;} .vamilio-app .ae2-item-warn{font-size:12.3px;color:#B57A1F;margin-top:5px;line-height:1.45;} .vamilio-app .ae2-item-acts{flex:0 0 auto;display:flex;gap:6px;align-items:center;} .vamilio-app .ae2-act{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(46,26,57,.12);background:#fff;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .ae2-act:hover{background:var(--lilac-soft);border-color:var(--lilac);} .vamilio-app .ae2-act.is-saved{background:var(--plum);border-color:var(--plum);color:#fff;} .vamilio-app .ae2-act .ic{width:16px;height:16px;} /* Karte */ .vamilio-app .ae2-map{position:relative;min-height:420px;background:var(--cream);border-left:1px solid rgba(46,26,57,.08);} .vamilio-app .ae2-map-note{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;font-size:13px;color:var(--muted);} .vamilio-app .ae2-pin{background:none;border:0;} .vamilio-app .ae2-pin i{ display:grid;place-items:center;width:30px;height:30px;border-radius:50% 50% 50% 2px; transform:rotate(-45deg);background:var(--plum); box-shadow:0 4px 10px rgba(46,26,57,.35); } /* Die Nadel ist gedreht – die Ziffer wird gegengedreht, sonst steht sie schräg. */ .vamilio-app .ae2-pin b{transform:rotate(45deg);color:#fff;font-size:13px;font-weight:800;line-height:1;} /* Schnellzugriff */ .vamilio-app .ae2-h{font-family:'Fraunces',serif;font-weight:700;font-size:19px;color:var(--plum-deep);margin:6px 0 4px;} .vamilio-app .ae2-h-sub{margin:0 0 4px;font-size:13.5px;color:var(--muted);} .vamilio-app .ae2-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;} .vamilio-app .ae2-q{ display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px; background:#fff;border:1px solid rgba(46,26,57,.09); box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); transition:transform .16s,box-shadow .16s; } .vamilio-app .ae2-q:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(46,26,57,.07),0 18px 44px rgba(46,26,57,.10);} .vamilio-app .ae2-q-ic{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;} .vamilio-app .ae2-q-ic .ic{width:21px;height:21px;} .vamilio-app .ae2-q.c-red .ae2-q-ic{background:#FBEDEB;color:#C2554B;} .vamilio-app .ae2-q.c-blue .ae2-q-ic{background:#E9F0FB;color:#3D6BA8;} .vamilio-app .ae2-q.c-rose .ae2-q-ic{background:#FCEEF3;color:#B4517E;} .vamilio-app .ae2-q.c-plum .ae2-q-ic{background:#F3E9F8;color:var(--orchid);} .vamilio-app .ae2-q-t{min-width:0;} .vamilio-app .ae2-q-t b{display:block;font-size:13.5px;color:var(--ink);line-height:1.3;} .vamilio-app .ae2-q-t em{display:block;font-style:normal;font-family:'Fraunces',serif;font-size:19px;font-weight:700;color:var(--plum-deep);margin:3px 0 2px;} .vamilio-app .ae2-q-t small{display:block;font-size:11.5px;color:var(--muted);} .vamilio-app .ae2-quick-note{margin:0;font-size:12.3px;color:var(--muted);line-height:1.5;} /* Hinweis Notfall-Karte */ .vamilio-app .ae2-promo{ display:flex;align-items:center;gap:18px;padding:22px;border-radius:18px; background:linear-gradient(120deg,var(--lilac-soft),#FBF9FD);border:1px solid rgba(201,182,218,.5); } .vamilio-app .ae2-promo-ic{ flex:0 0 auto;width:52px;height:52px;border-radius:16px;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 4px 12px rgba(46,26,57,.10); } .vamilio-app .ae2-promo-ic .ic{width:24px;height:24px;} .vamilio-app .ae2-promo-txt{flex:1;min-width:0;} .vamilio-app .ae2-promo-txt b{display:block;font-family:'Fraunces',serif;font-size:17px;color:var(--plum-deep);} .vamilio-app .ae2-promo-txt p{margin:5px 0 12px;font-size:13.5px;color:var(--muted);} .vamilio-app .ae2-promo-txt ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;} .vamilio-app .ae2-promo-txt li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);} .vamilio-app .ae2-promo-txt li .ic{width:15px;height:15px;color:var(--plum);} .vamilio-app .ae2-promo-btn{ flex:0 0 auto;padding:13px 22px;border-radius:12px;background:var(--plum);color:#fff; font-size:14px;font-weight:700;box-shadow:0 6px 16px rgba(81,48,100,.22); } .vamilio-app .ae2-promo-btn:hover{background:var(--plum-mid);} .vamilio-app .ae-osm{margin:0;font-size:11.5px;color:var(--muted);text-align:right;} @media (max-width:900px){ .vamilio-app .ae2-top{grid-template-columns:minmax(0,1fr);} .vamilio-app .ae2.has-map .ae2-split{grid-template-columns:minmax(0,1fr);} .vamilio-app .ae2-map{border-left:0;border-top:1px solid rgba(46,26,57,.08);min-height:320px;} .vamilio-app .ae2-promo{flex-wrap:wrap;} .vamilio-app .ae2-promo-btn{width:100%;text-align:center;} } /* Startzustand der Ergebnisliste – eine leere Karte wirkt wie ein Fehler. */ .vamilio-app .ae2-blank{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:38px 24px;} .vamilio-app .ae2-blank-ic{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum);margin-bottom:4px; } .vamilio-app .ae2-blank-ic .ic{width:22px;height:22px;} .vamilio-app .ae2-blank b{font-family:'Fraunces',serif;font-size:16px;color:var(--plum-deep);} .vamilio-app .ae2-blank p{margin:0;max-width:44ch;font-size:13.5px;line-height:1.55;color:var(--muted);} /* ============================================================ WUNSCHLISTEN (ws2-*) ============================================================ */ .vamilio-app .ws2{display:flex;flex-direction:column;gap:18px;margin-top:14px;} .vamilio-app .ws2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .ws2-card-h{font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--ink);margin:0 0 18px;} /* Formular */ .vamilio-app .ws2-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:18px;} .vamilio-app .ws2-fld{display:flex;flex-direction:column;gap:7px;min-width:0;} .vamilio-app .ws2-fld > span:first-child{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .ws2-fld input, .vamilio-app .ws2-select select{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 14px;font:inherit;font-size:max(16px,1em);background:#fff;color:var(--ink);transition:.16s; } .vamilio-app .ws2-fld input:focus, .vamilio-app .ws2-select select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .ws2-select{position:relative;display:block;} /* Eigener Pfeil – der Hintergrund-Chevron anderer App-Bereiche würde sonst doppelt stehen. */ .vamilio-app .ws2-select select{ -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background-image:none !important;background-color:#fff !important;padding-right:38px !important; } .vamilio-app .ws2-select::after{ content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;pointer-events:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); } .vamilio-app .ws2-add{ display:block;width:100%;max-width:280px;margin:0 auto;padding:14px 24px;border:0;border-radius:12px; background:var(--plum);color:#fff;font-family:'Bricolage Grotesque';font-weight:700;font-size:15px; cursor:pointer;box-shadow:0 6px 16px rgba(81,48,100,.22);transition:.16s; } .vamilio-app .ws2-add:hover{background:var(--plum-mid);} /* Überraschungs-Modus */ .vamilio-app .ws2-reveal{display:flex;align-items:center;gap:11px;cursor:pointer;padding:2px;} .vamilio-app .ws2-reveal input{position:absolute;opacity:0;width:0;height:0;} .vamilio-app .ws2-reveal-box{ flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(46,26,57,.22); background:#fff;display:grid;place-items:center;transition:.16s; } .vamilio-app .ws2-reveal-box::after{ content:"";width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(45deg) scale(0);transition:transform .16s;margin-top:-2px; } .vamilio-app .ws2-reveal input:checked + .ws2-reveal-box{background:var(--plum);border-color:var(--plum);} .vamilio-app .ws2-reveal input:checked + .ws2-reveal-box::after{transform:rotate(45deg) scale(1);} .vamilio-app .ws2-reveal input:focus-visible + .ws2-reveal-box{box-shadow:0 0 0 3px rgba(81,48,100,.18);} .vamilio-app .ws2-reveal-txt{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);} .vamilio-app .ws2-reveal-txt em{font-style:normal;color:var(--muted);} .vamilio-app .ws2-reveal-txt .ic{width:16px;height:16px;color:var(--plum);} /* Kennzahlen */ .vamilio-app .ws2-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;} .vamilio-app .ws2-kpi{ display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:16px;background:#fff; border:1px solid rgba(46,26,57,.09);box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .ws2-kpi-ic{ flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .ws2-kpi-ic .ic{width:19px;height:19px;} .vamilio-app .ws2-kpi.is-green .ws2-kpi-ic{background:#EAF6EF;color:#1F9D57;} .vamilio-app .ws2-kpi.is-rose .ws2-kpi-ic{background:#FCEEF3;color:#B4517E;} .vamilio-app .ws2-kpi.is-amber .ws2-kpi-ic{background:#FDF3E3;color:#B57A1F;} .vamilio-app .ws2-kpi-t b{display:block;font-family:'Fraunces',serif;font-size:24px;font-weight:700;color:var(--plum-deep);line-height:1.1;} .vamilio-app .ws2-kpi-t small{display:block;font-size:12.3px;color:var(--muted);margin-top:2px;} /* Übersicht der Listen */ .vamilio-app .ws2-h{font-family:'Fraunces',serif;font-weight:700;font-size:19px;color:var(--plum-deep);margin:6px 0 0;} .vamilio-app .ws2-groups{display:flex;flex-direction:column;gap:10px;} .vamilio-app .ws2-group{ display:flex;align-items:center;gap:13px;padding:14px 18px;border-radius:16px;background:#fff; border:1px solid rgba(46,26,57,.09);box-shadow:0 1px 2px rgba(46,26,57,.04);cursor:pointer;transition:.16s; } .vamilio-app .ws2-group:hover{border-color:var(--lilac);box-shadow:0 4px 14px rgba(46,26,57,.08);} .vamilio-app .ws2-group.is-on{border-color:var(--plum);box-shadow:0 0 0 2px rgba(81,48,100,.10);} .vamilio-app .ws2-avatar{ flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:var(--plum);color:#fff;font-weight:800;font-size:15px; } .vamilio-app .ws2-group-ic{ flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .ws2-group-ic .ic{width:17px;height:17px;} .vamilio-app .ws2-group-t{flex:0 0 auto;min-width:130px;} .vamilio-app .ws2-group-t b{display:block;font-size:14.5px;color:var(--ink);} .vamilio-app .ws2-group-t small{display:block;font-size:12.3px;color:var(--muted);margin-top:2px;} .vamilio-app .ws2-group-bar{flex:1;min-width:60px;height:7px;border-radius:99px;background:var(--lilac-soft);overflow:hidden;} .vamilio-app .ws2-group-bar i{display:block;height:100%;background:var(--plum);border-radius:99px;transition:width .4s;} .vamilio-app .ws2-group-n{flex:0 0 auto;font-size:12.3px;color:var(--muted);font-weight:600;white-space:nowrap;} .vamilio-app .ws2-group-btn{ flex:0 0 auto;padding:9px 16px;border-radius:10px;border:1px solid rgba(46,26,57,.14); background:#fff;font-size:13px;font-weight:700;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .ws2-group-btn:hover{background:var(--lilac-soft);} .vamilio-app .ws2-blank{padding:30px 20px;text-align:center;border:1px dashed rgba(46,26,57,.18);border-radius:16px;background:#fff;} .vamilio-app .ws2-blank b{display:block;font-family:'Fraunces',serif;font-size:16px;color:var(--plum-deep);margin-bottom:6px;} .vamilio-app .ws2-blank p{margin:0;font-size:13.5px;color:var(--muted);} /* Wünsche der gewählten Liste */ .vamilio-app .ws2-detail-h{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;} .vamilio-app .ws2-detail-h .ws2-card-h{margin:0;} .vamilio-app .ws2-detail-sub{font-size:12.5px;color:var(--muted);font-weight:600;} .vamilio-app .ws2-item{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid rgba(46,26,57,.07);} .vamilio-app .ws2-item:last-child{border-bottom:0;} .vamilio-app .ws2-item.is-done .ws2-item-t{text-decoration:line-through;opacity:.55;} .vamilio-app .ws2-check{position:relative;flex:0 0 auto;width:22px;height:22px;cursor:pointer;} .vamilio-app .ws2-check input{position:absolute;opacity:0;width:0;height:0;} .vamilio-app .ws2-check i{ position:absolute;inset:0;border-radius:7px;border:1.5px solid rgba(46,26,57,.22);background:#fff; display:grid;place-items:center;transition:.16s; } .vamilio-app .ws2-check i::after{ content:"";width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(45deg) scale(0);transition:transform .16s;margin-top:-2px; } .vamilio-app .ws2-check input:checked + i{background:#1F9D57;border-color:#1F9D57;} .vamilio-app .ws2-check input:checked + i::after{transform:rotate(45deg) scale(1);} .vamilio-app .ws2-item-main{flex:1;min-width:0;} .vamilio-app .ws2-item-t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14.5px;color:var(--ink);} .vamilio-app .ws2-item-t a{color:var(--plum);font-weight:600;} .vamilio-app .ws2-price{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .ws2-item-sub{font-size:12.5px;color:var(--muted);margin-top:3px;} .vamilio-app .ws2-badge{ flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px; background:var(--lilac-soft);color:var(--plum);font-size:12.3px;font-weight:700; } .vamilio-app .ws2-badge.is-done{background:#EAF6EF;color:#1F9D57;} .vamilio-app .ws2-badge .ic{width:14px;height:14px;} .vamilio-app .ws2-mini{ flex:0 0 auto;padding:7px 14px;border-radius:99px;border:1px solid rgba(46,26,57,.14); background:#fff;font-size:12.3px;font-weight:700;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .ws2-mini:hover{background:var(--lilac-soft);} .vamilio-app .ws2-x{ flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:none; color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:.16s; } .vamilio-app .ws2-x:hover{background:#FBEDEB;color:#C2554B;} /* Tipps */ .vamilio-app .ws2-tips{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); display:flex;flex-direction:column;gap:14px; } .vamilio-app .ws2-tip{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--cream);} .vamilio-app .ws2-tip-ic{ flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 2px 6px rgba(46,26,57,.08); } .vamilio-app .ws2-tip-ic .ic{width:16px;height:16px;} .vamilio-app .ws2-tip b{display:block;font-size:13.5px;color:var(--plum-deep);} .vamilio-app .ws2-tip small{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:2px;} @media (max-width:760px){ .vamilio-app .ws2-card,.vamilio-app .ws2-tips{padding:16px;} .vamilio-app .ws2-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} .vamilio-app .ws2-group{flex-wrap:wrap;} .vamilio-app .ws2-group-t{flex:1;min-width:0;} .vamilio-app .ws2-group-bar{order:5;flex-basis:100%;} .vamilio-app .ws2-group-n{order:6;} .vamilio-app .ws2-group-btn{order:7;margin-left:auto;} .vamilio-app .ws2-add{max-width:none;} } /* ============================================================ TASCHENGELD (tg2-*) ============================================================ */ .vamilio-app .tg2{display:flex;flex-direction:column;gap:18px;margin-top:14px;} .vamilio-app .tg2-card{ position:relative;background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .tg2-card-h{font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--ink);margin:0 0 6px;} .vamilio-app .tg2-sub{margin:0 0 16px;font-size:13px;color:var(--muted);line-height:1.5;} .vamilio-app .tg2-h{font-family:'Fraunces',serif;font-weight:700;font-size:19px;color:var(--plum-deep);margin:6px 0 0;} /* Kind wählen */ .vamilio-app .tg2-pick{display:flex;flex-direction:column;gap:7px;max-width:320px;} .vamilio-app .tg2-pick > span:first-child{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .tg2-select{position:relative;display:block;} .vamilio-app .tg2-select select{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 38px 13px 14px;font:inherit;font-size:max(16px,1em);color:var(--ink);transition:.16s; -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background-image:none !important;background-color:#fff !important; } .vamilio-app .tg2-select select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .tg2-select::after{ content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;pointer-events:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); } /* Kontostand */ .vamilio-app .tg2-balance{ display:flex;align-items:center;gap:20px;justify-content:space-between; background:linear-gradient(140deg,#FBF8FD,#FFFDFA);border-color:rgba(201,182,218,.45);text-align:left; } .vamilio-app .tg2-balance-txt small{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .vamilio-app .tg2-balance-txt b{ display:block;font-family:'Fraunces',serif;font-size:clamp(30px,4vw,42px);font-weight:700; color:#1F9D57;line-height:1.1;margin:6px 0 6px; } .vamilio-app .tg2-balance-txt b.is-neg{color:#C2554B;} .vamilio-app .tg2-balance-txt span{font-size:13px;color:var(--muted);} .vamilio-app .tg2-balance-ic{ flex:0 0 auto;width:74px;height:74px;border-radius:50%;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 6px 18px rgba(46,26,57,.10); } .vamilio-app .tg2-balance-ic .ic{width:32px;height:32px;} /* Raster */ .vamilio-app .tg2-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start;} /* Formular */ .vamilio-app .tg2-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0 18px;} .vamilio-app .tg2-fld{display:flex;flex-direction:column;gap:7px;min-width:0;} .vamilio-app .tg2-fld > span:first-child{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .tg2-fld input{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 14px;font:inherit;font-size:max(16px,1em);background:#fff;color:var(--ink);transition:.16s; } .vamilio-app .tg2-fld input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .tg2-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;} .vamilio-app .tg2-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px; border-radius:12px;border:1px solid transparent;font-family:'Bricolage Grotesque'; font-weight:700;font-size:14.5px;cursor:pointer;transition:.16s; } .vamilio-app .tg2-btn .ic{width:16px;height:16px;} .vamilio-app .tg2-btn.is-primary{background:var(--plum);color:#fff;box-shadow:0 6px 16px rgba(81,48,100,.22);} .vamilio-app .tg2-btn.is-primary:hover{background:var(--plum-mid);} .vamilio-app .tg2-btn.is-ghost{background:#fff;border-color:var(--lilac);color:var(--plum);} .vamilio-app .tg2-btn.is-ghost:hover{background:var(--lilac-soft);} .vamilio-app .tg2-note{margin:12px 0 0;font-size:12.8px;font-weight:600;color:var(--plum);} /* Kontrollkästchen */ .vamilio-app .tg2-check{position:relative;display:flex;align-items:center;gap:10px;align-self:end;padding-bottom:12px;cursor:pointer;} .vamilio-app .tg2-check input{position:absolute;opacity:0;width:0;height:0;} .vamilio-app .tg2-check i{ flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(46,26,57,.22); background:#fff;display:grid;place-items:center;transition:.16s; } .vamilio-app .tg2-check i::after{ content:"";width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(45deg) scale(0);transition:transform .16s;margin-top:-2px; } .vamilio-app .tg2-check input:checked + i{background:var(--plum);border-color:var(--plum);} .vamilio-app .tg2-check input:checked + i::after{transform:rotate(45deg) scale(1);} .vamilio-app .tg2-check span{font-size:13.5px;color:var(--ink);} /* Erklärkarte */ .vamilio-app .tg2-info{overflow:hidden;background:linear-gradient(140deg,var(--lilac-soft),#FBF9FD);border-color:rgba(201,182,218,.45);} .vamilio-app .tg2-info b{display:block;font-family:'Fraunces',serif;font-size:16px;color:var(--plum-deep);margin-bottom:8px;} .vamilio-app .tg2-info p{margin:0;font-size:13.3px;line-height:1.55;color:var(--muted);max-width:34ch;} .vamilio-app .tg2-info-ic{position:absolute;right:-10px;bottom:-10px;width:96px;height:96px;display:grid;place-items:center;color:var(--plum);opacity:.12;} .vamilio-app .tg2-info-ic .ic{width:70px;height:70px;} /* Übersicht */ .vamilio-app .tg2-sum{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid rgba(46,26,57,.07);} .vamilio-app .tg2-sum:last-child{border-bottom:0;} .vamilio-app .tg2-sum-ic{ flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .tg2-sum-ic.is-green{background:#EAF6EF;color:#1F9D57;} .vamilio-app .tg2-sum-ic.is-amber{background:#FDF3E3;color:#B57A1F;} .vamilio-app .tg2-sum-ic .ic{width:18px;height:18px;} .vamilio-app .tg2-sum b{display:block;font-size:13.5px;color:var(--ink);} .vamilio-app .tg2-sum small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;} /* Buchungen */ .vamilio-app .tg2-item{display:flex;align-items:center;gap:13px;padding:13px 4px;border-bottom:1px solid rgba(46,26,57,.07);} .vamilio-app .tg2-item:last-child{border-bottom:0;} .vamilio-app .tg2-item-ic{ flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .tg2-item-ic.is-green{background:#EAF6EF;color:#1F9D57;} .vamilio-app .tg2-item-ic.is-neg{background:#FBEDEB;color:#C2554B;} .vamilio-app .tg2-item-ic .ic{width:17px;height:17px;} .vamilio-app .tg2-item-main{flex:1;min-width:0;} .vamilio-app .tg2-item-main b{display:block;font-size:14px;color:var(--ink);} .vamilio-app .tg2-item-main small{display:block;font-size:12.3px;color:var(--muted);margin-top:2px;} .vamilio-app .tg2-amount{flex:0 0 auto;font-family:'Fraunces',serif;font-size:16px;font-weight:700;color:#1F9D57;} .vamilio-app .tg2-amount.is-neg{color:#C2554B;} .vamilio-app .tg2-x{ flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:none; color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:.16s; } .vamilio-app .tg2-x:hover{background:#FBEDEB;color:#C2554B;} .vamilio-app .tg2-blank{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 20px;} .vamilio-app .tg2-blank-ic{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum);margin-bottom:6px; } .vamilio-app .tg2-blank-ic .ic{width:22px;height:22px;} .vamilio-app .tg2-blank b{font-family:'Fraunces',serif;font-size:16px;color:var(--plum-deep);} .vamilio-app .tg2-blank p{margin:0;font-size:13.5px;color:var(--muted);} /* Tipp */ .vamilio-app .tg2-tip{ display:flex;align-items:flex-start;gap:11px;margin:0;padding:14px 18px;border-radius:14px; background:var(--lh-amber-soft,#FDF3E3);border:1px solid rgba(227,165,75,.28); font-size:13.3px;line-height:1.55;color:var(--ink); } .vamilio-app .tg2-tip .ic{flex:0 0 auto;width:18px;height:18px;color:#B57A1F;margin-top:1px;} @media (max-width:860px){ .vamilio-app .tg2-grid{grid-template-columns:minmax(0,1fr);} .vamilio-app .tg2-card{padding:16px;} .vamilio-app .tg2-balance{flex-wrap:wrap;} .vamilio-app .tg2-pick{max-width:none;} .vamilio-app .tg2-check{align-self:start;padding-bottom:0;} } /* ============================================================ ÄMTLI-PLAN (am2-*) ============================================================ */ .vamilio-app #am-app{display:flex;flex-direction:column;gap:18px;margin-top:14px;} .vamilio-app .am2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:20px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .am2-card-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;} .vamilio-app .am2-card-h{display:flex;align-items:center;gap:8px;font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--ink);margin:0;} .vamilio-app .am2-card-h .ic{width:18px;height:18px;color:var(--plum);} .vamilio-app .am2-chip{padding:5px 11px;border-radius:99px;background:var(--lilac-soft);color:var(--plum);font-size:12.3px;font-weight:700;} /* Kind wählen */ .vamilio-app .am2-pick{display:flex;flex-direction:column;gap:7px;max-width:320px;} .vamilio-app .am2-pick > span:first-child{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .am2-select{position:relative;display:block;} .vamilio-app .am2-select select{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 38px 13px 14px;font:inherit;font-size:max(16px,1em);color:var(--ink);transition:.16s; -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background-image:none !important;background-color:#fff !important; } .vamilio-app .am2-select select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .am2-select::after{ content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;pointer-events:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); } /* Punktestand */ .vamilio-app .am2-score{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;align-items:center;} .vamilio-app .am2-score small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .vamilio-app .am2-score-l b{ display:flex;align-items:center;gap:8px;font-family:'Fraunces',serif;font-size:34px;font-weight:700; color:var(--plum-deep);line-height:1.1;margin:6px 0 4px; } .vamilio-app .am2-score-l b .ic{width:26px;height:26px;color:var(--lh-amber,#E3A54B);} .vamilio-app .am2-score-l > span{font-size:12.8px;color:var(--muted);} .vamilio-app .am2-goalbar{height:9px;border-radius:99px;background:var(--lilac-soft);overflow:hidden;margin:8px 0 6px;} .vamilio-app .am2-goalbar i{display:block;height:100%;border-radius:99px;background:var(--plum);transition:width .4s;} .vamilio-app .am2-score-m > span{font-size:12.5px;color:var(--muted);font-weight:600;} .vamilio-app .am2-score-r{text-align:right;} .vamilio-app .am2-week{ display:inline-flex;align-items:center;gap:7px;margin-top:7px;padding:7px 13px;border-radius:99px; background:var(--cream);font-size:13px;font-weight:700;color:var(--ink); } .vamilio-app .am2-week.is-done{background:#EAF6EF;color:#1F9D57;} /* Wochentage */ .vamilio-app .am2-daysrow{display:flex;align-items:center;gap:12px;} .vamilio-app .am2-days{flex:1;min-width:0;display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding-bottom:2px;} .vamilio-app .am2-nav{ flex:0 0 auto;width:34px;border:1px solid rgba(46,26,57,.12);border-radius:11px;background:#fff; color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:.16s; } .vamilio-app .am2-nav:hover{background:var(--cream);color:var(--plum);} .vamilio-app .am2-day{ flex:1 0 84px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 8px; border:1px solid rgba(46,26,57,.10);border-radius:14px;background:#fff;cursor:pointer;transition:.16s; } .vamilio-app .am2-day span{font-size:11.5px;font-weight:700;color:var(--muted);} .vamilio-app .am2-day strong{font-family:'Fraunces',serif;font-size:19px;font-weight:700;color:var(--ink);} .vamilio-app .am2-day em{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap;} .vamilio-app .am2-day:hover{border-color:var(--lilac);} .vamilio-app .am2-day.is-today{border-color:var(--lilac);} .vamilio-app .am2-day.is-on{background:var(--plum);border-color:var(--plum);} .vamilio-app .am2-day.is-on span,.vamilio-app .am2-day.is-on strong,.vamilio-app .am2-day.is-on em{color:#fff;} .vamilio-app .am2-today{ flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px; border:1px solid rgba(46,26,57,.12);background:#fff;font-size:13.5px;font-weight:700;color:var(--plum);cursor:pointer; } .vamilio-app .am2-today:hover{background:var(--cream);} .vamilio-app .am2-today .ic{width:16px;height:16px;} /* Raster */ .vamilio-app .am2-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start;} .vamilio-app .am2-side{display:flex;flex-direction:column;gap:18px;} /* Aufgaben */ .vamilio-app .am2-tasks{display:flex;flex-direction:column;} .vamilio-app .am2-task{ display:flex;align-items:center;gap:13px;width:100%;padding:13px 6px;text-align:left; border:0;border-bottom:1px solid rgba(46,26,57,.07);background:none;cursor:pointer;transition:.16s; } .vamilio-app .am2-task:last-child{border-bottom:0;} .vamilio-app .am2-task:hover:not(.is-future){background:var(--cream);border-radius:12px;} .vamilio-app .am2-task.is-future{opacity:.5;cursor:not-allowed;} .vamilio-app .am2-box{ flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(46,26,57,.22); background:#fff;display:grid;place-items:center;transition:.16s; } .vamilio-app .am2-box .ic{width:13px;height:13px;color:#fff;} .vamilio-app .am2-task.is-done .am2-box{background:#1F9D57;border-color:#1F9D57;} .vamilio-app .am2-task-e{ flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center; background:var(--lilac-soft);font-size:21px;line-height:1; } .vamilio-app .am2-task-main{flex:1;min-width:0;} .vamilio-app .am2-task-main b{display:block;font-size:14.5px;color:var(--ink);} .vamilio-app .am2-task.is-done .am2-task-main b{text-decoration:line-through;opacity:.55;} .vamilio-app .am2-stars{ display:inline-block;margin-top:5px;padding:4px 10px;border-radius:99px; background:var(--lh-amber-soft,#FDF3E3);color:#8A6420;font-size:11.8px;font-weight:700; } .vamilio-app .am2-donehead{ display:flex;align-items:center;gap:8px;margin:14px 0 4px;padding-top:12px; border-top:1px solid rgba(46,26,57,.07);font-size:12.5px;font-weight:700;color:var(--muted); } .vamilio-app .am2-donehead .ic{width:14px;height:14px;color:#1F9D57;} .vamilio-app .am2-allgood{ display:flex;align-items:center;gap:9px;margin-bottom:10px;padding:13px 16px;border-radius:14px; background:#EAF6EF;color:#0F6B39;font-size:13.5px;font-weight:700; } .vamilio-app .am2-allgood .ic{width:16px;height:16px;} /* Belohnungen */ .vamilio-app .am2-rewards{display:flex;flex-direction:column;gap:4px;} .vamilio-app .am2-reward{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(46,26,57,.07);} .vamilio-app .am2-reward:last-child{border-bottom:0;} .vamilio-app .am2-reward-e{ flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center; background:var(--lilac-soft);font-size:20px;line-height:1; } .vamilio-app .am2-reward.is-ready .am2-reward-e{background:#EAF6EF;} .vamilio-app .am2-reward-main{flex:1;min-width:0;} .vamilio-app .am2-reward-main b{display:block;font-size:13.8px;color:var(--ink);} .vamilio-app .am2-reward-main small{display:block;font-size:12px;color:var(--muted);margin:2px 0 6px;} .vamilio-app .am2-reward-bar{display:block;height:6px;border-radius:99px;background:var(--lilac-soft);overflow:hidden;} .vamilio-app .am2-reward-bar i{display:block;height:100%;border-radius:99px;background:var(--plum);transition:width .4s;} .vamilio-app .am2-reward.is-ready .am2-reward-bar i{background:#1F9D57;} .vamilio-app .am2-reward-n{flex:0 0 auto;font-size:11.8px;font-weight:700;color:var(--muted);white-space:nowrap;} .vamilio-app .am2-redeem{ flex:0 0 auto;padding:8px 14px;border-radius:99px;border:1px solid var(--lilac); background:#fff;font-size:12.3px;font-weight:700;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .am2-redeem:hover:not([disabled]){background:var(--plum);border-color:var(--plum);color:#fff;} .vamilio-app .am2-redeem[disabled]{opacity:.4;cursor:not-allowed;} .vamilio-app .am2-x{ flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:0;background:none; color:var(--muted);font-size:17px;line-height:1;cursor:pointer;transition:.16s; } .vamilio-app .am2-x:hover{background:#FBEDEB;color:#C2554B;} /* Tipps */ .vamilio-app .am2-tip{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--cream);margin-top:10px;} .vamilio-app .am2-tip-ic{ flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 2px 6px rgba(46,26,57,.08); } .vamilio-app .am2-tip-ic.is-amber{color:#B57A1F;} .vamilio-app .am2-tip-ic.is-green{color:#1F9D57;} .vamilio-app .am2-tip-ic .ic{width:16px;height:16px;} .vamilio-app .am2-tip b{display:block;font-size:13.3px;color:var(--plum-deep);} .vamilio-app .am2-tip small{display:block;font-size:12.3px;line-height:1.5;color:var(--muted);margin-top:2px;} @media (max-width:900px){ .vamilio-app .am2-grid{grid-template-columns:minmax(0,1fr);} .vamilio-app .am2-score{grid-template-columns:minmax(0,1fr);gap:16px;} .vamilio-app .am2-score-r{text-align:left;} .vamilio-app .am2-pick{max-width:none;} .vamilio-app .am2-card{padding:16px;} .vamilio-app .am2-daysrow{flex-wrap:wrap;} .vamilio-app .am2-today{width:100%;justify-content:center;} .vamilio-app .am2-reward{flex-wrap:wrap;} .vamilio-app .am2-reward-n{order:5;} .vamilio-app .am2-redeem{order:6;margin-left:auto;} } /* ============================================================ VORSORGE (vs2-*) ============================================================ */ .vamilio-app .vs2{display:flex;flex-direction:column;gap:18px;margin-top:14px;} /* Filterleiste */ .vamilio-app .vs2-bar{display:flex;gap:16px;flex-wrap:wrap;} .vamilio-app .vs2-fld{display:flex;flex-direction:column;gap:7px;flex:1;min-width:190px;max-width:330px;} .vamilio-app .vs2-fld > span:first-child{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .vs2-select{position:relative;display:block;} .vamilio-app .vs2-select select{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 38px 13px 14px;font:inherit;font-size:max(16px,1em);color:var(--ink);transition:.16s; -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background-image:none !important;background-color:#fff !important; } .vamilio-app .vs2-select select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .vs2-select::after{ content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;pointer-events:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); } /* Info-Karten */ .vamilio-app .vs2-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;} .vamilio-app .vs2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:16px;padding:18px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .vs2-card small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);} .vamilio-app .vs2-card > b{display:block;font-family:'Fraunces',serif;font-size:28px;font-weight:700;color:var(--plum-deep);line-height:1.1;margin:7px 0 3px;} .vamilio-app .vs2-card > span{font-size:12.5px;color:var(--muted);} .vamilio-app .vs2-progbar{height:7px;border-radius:99px;background:var(--lilac-soft);overflow:hidden;margin-top:12px;} .vamilio-app .vs2-progbar i{display:block;height:100%;border-radius:99px;background:var(--plum);transition:width .4s;} .vamilio-app .vs2-next-row{display:flex;align-items:center;gap:13px;margin-top:11px;} .vamilio-app .vs2-next-ic{ flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .vs2-next-ic .ic{width:20px;height:20px;} .vamilio-app .vs2-next-row b{display:block;font-size:17px;color:var(--ink);} .vamilio-app .vs2-next-row span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;} .vamilio-app .vs2-hint{display:flex;gap:13px;align-items:flex-start;background:linear-gradient(140deg,var(--lilac-soft),#FBF9FD);border-color:rgba(201,182,218,.45);} .vamilio-app .vs2-hint-ic{ flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center; background:#fff;color:#B57A1F;box-shadow:0 2px 6px rgba(46,26,57,.08); } .vamilio-app .vs2-hint-ic .ic{width:17px;height:17px;} .vamilio-app .vs2-hint b{display:block;font-size:13.5px;color:var(--plum-deep);} .vamilio-app .vs2-hint p{margin:4px 0 0;font-size:12.8px;line-height:1.5;color:var(--muted);} /* Kopf der Liste */ .vamilio-app .vs2-listhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;} .vamilio-app .vs2-h{font-family:'Fraunces',serif;font-weight:700;font-size:19px;color:var(--plum-deep);margin:0;} .vamilio-app .vs2-legend{display:flex;gap:16px;flex-wrap:wrap;} .vamilio-app .vs2-legend span{display:inline-flex;align-items:center;gap:7px;font-size:12.3px;color:var(--muted);} .vamilio-app .vs2-legend i{width:9px;height:9px;border-radius:50%;} .vamilio-app .vs2-legend i.is-done{background:#1F9D57;} .vamilio-app .vs2-legend i.is-due{background:#E3A54B;} .vamilio-app .vs2-legend i.is-late{background:#C2554B;} .vamilio-app .vs2-legend i.is-off{background:rgba(46,26,57,.22);} /* Liste */ .vamilio-app .vs2-list{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;overflow:hidden; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .vs2-item{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid rgba(46,26,57,.07);} .vamilio-app .vs2-item:last-child{border-bottom:0;} .vamilio-app .vs2-item.is-due{background:#FFFBF4;} .vamilio-app .vs2-item.is-late{background:#FDF6F5;} .vamilio-app .vs2-check{position:relative;flex:0 0 auto;width:22px;height:22px;cursor:pointer;} .vamilio-app .vs2-check input{position:absolute;opacity:0;width:0;height:0;} .vamilio-app .vs2-check i{ position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(46,26,57,.22);background:#fff; display:grid;place-items:center;transition:.16s; } .vamilio-app .vs2-check i::after{ content:"";width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(45deg) scale(0);transition:transform .16s;margin-top:-2px; } .vamilio-app .vs2-check input:checked + i{background:#1F9D57;border-color:#1F9D57;} .vamilio-app .vs2-check input:checked + i::after{transform:rotate(45deg) scale(1);} .vamilio-app .vs2-item.is-due .vs2-check i{border-color:#E3A54B;} .vamilio-app .vs2-item.is-late .vs2-check i{border-color:#C2554B;} .vamilio-app .vs2-item-ic{ flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .vs2-item.is-done .vs2-item-ic{background:#EAF6EF;color:#1F9D57;} .vamilio-app .vs2-item-ic .ic{width:17px;height:17px;} .vamilio-app .vs2-item-main{flex:1;min-width:0;} .vamilio-app .vs2-item-main b{display:block;font-size:14.5px;color:var(--ink);} .vamilio-app .vs2-item-main small{display:block;font-size:12.3px;color:var(--muted);margin-top:2px;} .vamilio-app .vs2-item-range{flex:0 0 auto;font-size:12.5px;color:var(--muted);white-space:nowrap;} .vamilio-app .vs2-badge{ flex:0 0 auto;min-width:88px;text-align:center;padding:6px 12px;border-radius:99px; font-size:11.8px;font-weight:700;background:rgba(46,26,57,.06);color:var(--muted); } .vamilio-app .vs2-badge.is-done{background:#EAF6EF;color:#1F9D57;} .vamilio-app .vs2-badge.is-due{background:#FDF3E3;color:#8A6420;} .vamilio-app .vs2-badge.is-soon{background:#FDF3E3;color:#8A6420;} .vamilio-app .vs2-badge.is-late{background:#FBEDEB;color:#C2554B;} .vamilio-app .vs2-blank{padding:36px 22px;text-align:center;} .vamilio-app .vs2-blank b{display:block;font-family:'Fraunces',serif;font-size:16px;color:var(--plum-deep);margin-bottom:6px;} .vamilio-app .vs2-blank p{margin:0 auto;max-width:46ch;font-size:13.5px;line-height:1.55;color:var(--muted);} .vamilio-app .vs2 .vx-note{ margin:0;padding:14px 18px;border-radius:14px;background:var(--cream); font-size:12.5px;line-height:1.55;color:var(--muted); } @media (max-width:860px){ .vamilio-app .vs2-fld{max-width:none;} .vamilio-app .vs2-item{flex-wrap:wrap;gap:10px;padding:14px;} .vamilio-app .vs2-item-main{flex-basis:calc(100% - 130px);} .vamilio-app .vs2-item-range{order:5;margin-left:74px;} .vamilio-app .vs2-badge{order:6;margin-left:auto;} } /* Überfälliger Termin wird in der Kopfkarte hervorgehoben. */ .vamilio-app .vs2-next.is-late{background:#FDF6F5;border-color:rgba(194,85,75,.28);} .vamilio-app .vs2-next.is-late .vs2-next-ic{background:#FBEDEB;color:#C2554B;} /* Übergabe in den Familienplaner (Ämtli & Vorsorge) */ .vamilio-app .am2-cal, .vamilio-app .vs2-cal{ flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(46,26,57,.12);background:#fff;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .am2-cal:hover:not([disabled]), .vamilio-app .vs2-cal:hover:not([disabled]){background:var(--lilac-soft);border-color:var(--lilac);} .vamilio-app .am2-cal .ic, .vamilio-app .vs2-cal .ic{width:16px;height:16px;} .vamilio-app .am2-cal.is-ok, .vamilio-app .vs2-cal.is-ok{background:#EAF6EF;border-color:rgba(31,157,87,.35);color:#1F9D57;cursor:default;} /* Begleiter-Bilder im Shop und in der Belohnungskarte */ .vamilio-app .lh-av-img{ display:block;width:auto;height:112px;max-width:100%;margin:2px auto 10px;object-fit:contain; filter:drop-shadow(0 6px 12px rgba(46,26,57,.14)); } .vamilio-app .lh-av.is-far .lh-av-img{filter:grayscale(.55) opacity(.55) drop-shadow(0 6px 12px rgba(46,26,57,.10));} .vamilio-app .lh-rw-img{ flex:0 0 auto;width:46px;height:60px;object-fit:contain; filter:drop-shadow(0 4px 8px rgba(46,26,57,.16)); } .vamilio-app .lh-rw-img:not([hidden]) + .ic{display:none;} /* Dialog: Vorsorge in den Familienplaner */ .vamilio-app-page .vs2-modal{ position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:20px; background:rgba(36,27,43,.45);backdrop-filter:blur(2px); } .vamilio-app-page .vs2-modal-card{ width:min(380px,100%);background:#fff;border-radius:18px;padding:22px; box-shadow:0 24px 60px rgba(46,26,57,.30); } .vamilio-app-page .vs2-modal-card h4{ display:flex;align-items:center;gap:9px;margin:0 0 4px; font-family:'Fraunces',serif;font-size:17px;color:var(--plum-deep); } .vamilio-app-page .vs2-modal-card h4 .ic{width:18px;height:18px;color:var(--plum);} .vamilio-app-page .vs2-modal-card > p{margin:0 0 16px;font-size:13.5px;color:var(--muted);} .vamilio-app-page .vs2-modal-card label{display:block;margin-bottom:14px;font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app-page .vs2-modal-card input{ display:block;width:100%;box-sizing:border-box;margin-top:7px; border:1px solid rgba(46,26,57,.16);border-radius:12px;padding:12px 14px; font:inherit;font-size:max(16px,1em);color:var(--ink);background:#fff; } .vamilio-app-page .vs2-modal-card input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app-page .vs2-modal-btns{display:flex;gap:10px;margin-top:6px;} .vamilio-app-page .vs2-m-cancel, .vamilio-app-page .vs2-m-go{ flex:1;padding:13px 16px;border-radius:12px;font-family:'Bricolage Grotesque'; font-weight:700;font-size:14px;cursor:pointer;transition:.16s; } .vamilio-app-page .vs2-m-cancel{background:#fff;border:1px solid rgba(46,26,57,.14);color:var(--muted);} .vamilio-app-page .vs2-m-cancel:hover{background:var(--cream);color:var(--ink);} .vamilio-app-page .vs2-m-go{background:var(--plum);border:0;color:#fff;box-shadow:0 6px 16px rgba(81,48,100,.22);} .vamilio-app-page .vs2-m-go:hover{background:var(--plum-mid);} /* ALDI-Regionswahl im Meal-Prep */ .vamilio-app .meal-aldi-change{ margin-left:auto;padding:6px 12px;border-radius:99px;border:1px solid rgba(46,26,57,.14); background:#fff;font-size:12px;font-weight:700;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .meal-aldi-change:hover{background:var(--lilac-soft);} .vamilio-app .meal-offers-label{display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .vamilio-app .meal-aldi-note{margin:12px 0 0;font-size:12.3px;color:var(--muted);text-align:center;} #meal-aldi .meal-ask-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;} /* ============================================================ MEAL-PREP · Tagesansicht als Seite (ersetzt das frühere Popup) #meal-ask / #meal-aldi bleiben echte Modals – hier geht es NUR um die Tagesansicht #meal-modal mit der Klasse .meal-dayview. ============================================================ */ .vamilio-app .meal-dayview{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); margin-top:18px; } .vamilio-app .meal-dayview-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;} .vamilio-app .meal-dayview-back{ display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:99px; border:1px solid rgba(46,26,57,.14);background:#fff;font-size:13.5px;font-weight:700; color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .meal-dayview-back:hover{background:var(--lilac-soft);} .vamilio-app .meal-dayview-back .ic{width:14px;height:14px;transform:rotate(180deg);} .vamilio-app .meal-dayview h3{ margin:0;font-family:'Fraunces',serif;font-size:24px;font-weight:700;color:var(--plum-deep); } /* Mahlzeiten: eine Spalte mobil, nebeneinander auf breiten Schirmen. */ .vamilio-app .meal-dayview #meal-modal-body{ display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;align-items:start; } .vamilio-app .meal-dayview .mm-daysum{grid-column:1/-1;font-size:14px;color:var(--muted);} .vamilio-app .meal-dayview .mm-daysum b{color:var(--plum-deep);} .vamilio-app .meal-dayview .mm-card{ margin:0;background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:16px;padding:18px; box-shadow:0 1px 2px rgba(46,26,57,.04); } @media (max-width:640px){ .vamilio-app .meal-dayview{padding:16px;} .vamilio-app .meal-dayview h3{font-size:20px;} } /* ============================================================ TAGEBUCH (tb2-*) ============================================================ */ .vamilio-app .tb2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:14px;} .vamilio-app .tb2-main,.vamilio-app .tb2-side{display:flex;flex-direction:column;gap:18px;min-width:0;} .vamilio-app .tb2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } /* Schreiben */ .vamilio-app .tb2-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;margin-bottom:16px;} .vamilio-app .tb2-fld{display:flex;flex-direction:column;gap:7px;min-width:0;margin-bottom:16px;} .vamilio-app .tb2-row .tb2-fld{margin-bottom:0;} .vamilio-app .tb2-fld > label{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .tb2-fld input[type=text], .vamilio-app .tb2-fld input[type=date], .vamilio-app .tb2-fld textarea{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 14px;font:inherit;font-size:max(16px,1em);background:#fff;color:var(--ink);transition:.16s; } .vamilio-app .tb2-fld input:focus, .vamilio-app .tb2-fld textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .tb2-fld textarea{resize:vertical;line-height:1.6;} .vamilio-app .tb2-fld-date{max-width:220px;} /* Stimmung */ .vamilio-app .tb2-moods{display:flex;gap:9px;} .vamilio-app .tb2-mood{ width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(46,26,57,.14); background:#fff;display:grid;place-items:center;cursor:pointer;transition:.16s; } .vamilio-app .tb2-mood span{font-size:21px;line-height:1;filter:grayscale(1) opacity(.6);transition:.16s;} .vamilio-app .tb2-mood:hover{border-color:var(--lilac);} .vamilio-app .tb2-mood:hover span{filter:grayscale(.3) opacity(.9);} .vamilio-app .tb2-mood.is-on{border-color:var(--plum);background:var(--lilac-soft);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .tb2-mood.is-on span{filter:none;} /* Zähler */ .vamilio-app .tb2-textwrap{position:relative;} .vamilio-app .tb2-count{ position:absolute;right:12px;bottom:10px;font-size:11.5px;color:var(--muted); background:rgba(255,255,255,.85);padding:2px 7px;border-radius:8px;pointer-events:none; } /* Dankbarkeits-Chips */ .vamilio-app .tb2-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:10px;} .vamilio-app .tb2-chip{ display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:99px; border:1px solid rgba(46,26,57,.14);background:#fff;font-size:13px;font-weight:600; color:var(--ink);cursor:pointer;transition:.16s; } .vamilio-app .tb2-chip:hover{background:var(--lilac-soft);border-color:var(--lilac);} .vamilio-app .tb2-chip .ic{width:14px;height:14px;color:var(--plum);} .vamilio-app .tb2-chip-own{color:var(--muted);border-style:dashed;} /* Fußzeile der Schreibkarte */ .vamilio-app .tb2-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;} .vamilio-app .tb2-priv{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;color:var(--muted);margin-right:auto;} .vamilio-app .tb2-priv .ic{width:14px;height:14px;} .vamilio-app .tb2-save{ display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border:0;border-radius:14px; background:var(--plum);color:#fff;font-family:'Bricolage Grotesque';font-weight:700;font-size:14.5px; cursor:pointer;box-shadow:0 6px 16px rgba(81,48,100,.22);transition:.16s; } .vamilio-app .tb2-save:hover{background:var(--plum-mid);} .vamilio-app .tb2-save .ic{width:15px;height:15px;} .vamilio-app .tb2-cancel{ padding:12px 18px;border-radius:12px;border:1px solid rgba(46,26,57,.14);background:#fff; font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer; } .vamilio-app .tb2-cancel:hover{background:var(--cream);color:var(--ink);} .vamilio-app .tb2 .tb-saved{font-size:12.8px;font-weight:700;color:#1F9D57;} .vamilio-app .tb2 .tb-saved.is-error{color:#C2554B;} /* Privatsphäre-Banner */ .vamilio-app .tb2-banner{ display:flex;align-items:center;gap:15px;padding:18px 20px;border-radius:16px; background:linear-gradient(120deg,var(--lilac-soft),#FBF9FD);border:1px solid rgba(201,182,218,.5); } .vamilio-app .tb2-banner-ic{ flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 3px 9px rgba(46,26,57,.10); } .vamilio-app .tb2-banner-ic .ic{width:19px;height:19px;} .vamilio-app .tb2-banner b{display:block;font-size:14px;color:var(--plum-deep);} .vamilio-app .tb2-banner p{margin:3px 0 0;font-size:13px;color:var(--muted);} /* Tipp-Karte */ .vamilio-app .tb2-tip{position:relative;overflow:hidden;background:linear-gradient(150deg,#FBF9FD,#fff);} .vamilio-app .tb2-tip-h{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--plum-deep);margin-bottom:12px;} .vamilio-app .tb2-tip-h .ic{width:16px;height:16px;color:#B57A1F;} .vamilio-app .tb2-tip-t{display:block;font-size:14.5px;color:var(--ink);margin-bottom:7px;} .vamilio-app .tb2-tip p{margin:0;font-size:13.3px;line-height:1.6;color:var(--muted);max-width:36ch;position:relative;} .vamilio-app .tb2-tip-ic{position:absolute;right:-14px;bottom:-16px;color:var(--plum);opacity:.10;} .vamilio-app .tb2-tip-ic .ic{width:110px;height:110px;} /* Einträge */ .vamilio-app .tb2-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;} .vamilio-app .tb2-list-head h3{margin:0;font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--ink);} .vamilio-app .tb2-all{ padding:8px 14px;border-radius:99px;border:1px solid rgba(46,26,57,.14);background:#fff; font-size:12.5px;font-weight:700;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .tb2-all:hover{background:var(--lilac-soft);} .vamilio-app .tb2-item{border-bottom:1px solid rgba(46,26,57,.07);} .vamilio-app .tb2-item:last-child{border-bottom:0;} .vamilio-app .tb2-item-head{ display:flex;align-items:center;gap:13px;width:100%;padding:13px 2px;text-align:left; border:0;background:none;cursor:pointer; } .vamilio-app .tb2-date{ flex:0 0 auto;width:48px;padding:7px 0;border-radius:12px;background:var(--lilac-soft); display:flex;flex-direction:column;align-items:center;line-height:1.15; } .vamilio-app .tb2-date b{font-family:'Fraunces',serif;font-size:17px;font-weight:700;color:var(--plum-deep);} .vamilio-app .tb2-date small{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);} .vamilio-app .tb2-item-t{flex:1;min-width:0;} .vamilio-app .tb2-item-t b{display:block;font-size:13.8px;color:var(--ink);} .vamilio-app .tb2-item-t small{ display:block;font-size:12.3px;color:var(--muted);margin-top:3px;line-height:1.45; overflow:hidden;text-overflow:ellipsis; } .vamilio-app .tb2-item-mood{flex:0 0 auto;font-size:19px;line-height:1;} .vamilio-app .tb2-item-chev{ flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(-45deg);transition:transform .16s;margin-right:4px; } .vamilio-app .tb2-item.is-open .tb2-item-chev{transform:rotate(45deg);} .vamilio-app .tb2-item-body{padding:0 2px 15px 63px;} .vamilio-app .tb2-item-text{font-size:13.5px;line-height:1.65;color:var(--ink);} .vamilio-app .tb2-item-grateful{ margin-top:10px;padding:11px 14px;border-radius:12px;background:var(--cream); font-size:13px;line-height:1.6;color:var(--ink); } .vamilio-app .tb2-item-grateful b{color:var(--plum-deep);} .vamilio-app .tb2-item-acts{display:flex;gap:9px;margin-top:11px;} .vamilio-app .tb2-mini{ padding:7px 14px;border-radius:99px;border:1px solid rgba(46,26,57,.14);background:#fff; font-size:12.3px;font-weight:700;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .tb2-mini:hover{background:var(--lilac-soft);} .vamilio-app .tb2-mini.is-del{color:#C2554B;} .vamilio-app .tb2-mini.is-del:hover{background:#FBEDEB;border-color:rgba(194,85,75,.3);} .vamilio-app .tb2-export{ display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px; padding:13px 18px;border-radius:12px;border:1px solid rgba(46,26,57,.14);background:#fff; font-size:13.5px;font-weight:700;color:var(--plum);transition:.16s; } .vamilio-app .tb2-export:hover{background:var(--lilac-soft);} .vamilio-app .tb2-export .ic{width:15px;height:15px;} @media (max-width:920px){ .vamilio-app .tb2{grid-template-columns:minmax(0,1fr);} .vamilio-app .tb2-card{padding:16px;} .vamilio-app .tb2-row{grid-template-columns:minmax(0,1fr);} .vamilio-app .tb2-fld-date{max-width:none;} .vamilio-app .tb2-foot{flex-direction:column;align-items:stretch;} .vamilio-app .tb2-priv{margin-right:0;} .vamilio-app .tb2-save{justify-content:center;} .vamilio-app .tb2-item-body{padding-left:2px;} } /* ============================================================ FAMILIEN-RADAR (rd2-*) ============================================================ */ .vamilio-app .rd2{display:flex;flex-direction:column;gap:18px;margin-top:14px;} .vamilio-app .rd2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .rd2-card-h{margin-bottom:16px;} .vamilio-app .rd2-card-h b{ display:flex;align-items:center;gap:9px;font-family:'Fraunces',serif;font-weight:700; font-size:17px;color:var(--ink); } .vamilio-app .rd2-card-h b .ic{width:18px;height:18px;color:var(--plum);} .vamilio-app .rd2-card-h span{display:block;font-size:13px;color:var(--muted);margin-top:5px;} /* Großer Check-in */ .vamilio-app .rd2-maphead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;} .vamilio-app .rd2-maphead-t{min-width:0;flex:1 1 300px;} .vamilio-app .rd2-checkin{ display:inline-flex;align-items:center;padding:12px 26px;border:0;border-radius:99px; background:var(--plum) !important;color:#fff;cursor:pointer; box-shadow:0 6px 16px rgba(81,48,100,.25);transition:.16s; font-family:'Bricolage Grotesque'; } .vamilio-app .rd2-checkin:hover{background:var(--plum-mid) !important;box-shadow:0 8px 20px rgba(81,48,100,.30);} .vamilio-app .rd2-checkin-tx{text-align:center;} .vamilio-app .rd2-checkin-tx b{display:block;font-weight:800;font-size:14.5px;line-height:1.2;color:#fff;} .vamilio-app .rd2-checkin-tx small{display:block;font-size:12px;color:rgba(255,255,255,.85);margin-top:2px;} /* Karte + Legende */ .vamilio-app .rd2-mapwrap{position:relative;} .vamilio-app .rd2-map{width:100%;height:380px;border-radius:14px;background:#EFEAF5;} .vamilio-app .rd2-nomap{ padding:26px 20px;border-radius:14px;background:var(--cream); font-size:13.5px;line-height:1.55;color:var(--muted); } .vamilio-app .rd2-legend{ position:absolute;left:14px;top:14px;z-index:5;max-width:230px; background:#fff;border-radius:14px;padding:10px 14px; box-shadow:0 8px 24px rgba(46,26,57,.18); } .vamilio-app .rd2-legend:empty{display:none;} .vamilio-app .rd2-nomap ~ .rd2-legend{position:static;max-width:none;box-shadow:none;padding:12px 2px 0;} .vamilio-app .rd2-leg{display:flex;align-items:center;gap:10px;padding:6px 0;} .vamilio-app .rd2-leg i{flex:0 0 auto;width:11px;height:11px;border-radius:50%;} .vamilio-app .rd2-leg-t{min-width:0;} .vamilio-app .rd2-leg-t b{display:block;font-size:12.8px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .vamilio-app .rd2-leg-t small{display:block;font-size:11.3px;color:var(--muted);} .vamilio-app .rd2-mapfoot{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px; } .vamilio-app .rd2-priv-note{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;color:var(--muted);} .vamilio-app .rd2-priv-note .ic{width:14px;height:14px;flex:0 0 auto;} .vamilio-app .rd2-share{ display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:99px; border:1px solid var(--lilac);background:#fff;font-size:13.5px;font-weight:700; color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .rd2-share:hover{background:var(--lilac-soft);} .vamilio-app .rd2-share .ic{width:15px;height:15px;} /* Raster: Orte | Fairness */ .vamilio-app .rd2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start;} /* Orte */ .vamilio-app .rd2-orte{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;} .vamilio-app .rd2-ort{ display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px; border:1px solid rgba(46,26,57,.09);background:#fff; } .vamilio-app .rd2-ort-ic{ flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .rd2-ort-ic .ic{width:16px;height:16px;} .vamilio-app .rd2-ort-t{flex:1;min-width:0;} .vamilio-app .rd2-ort-t b{display:block;font-size:13.8px;color:var(--ink);} .vamilio-app .rd2-ort-t small{display:block;font-size:12px;color:var(--muted);margin-top:1px;} .vamilio-app .rd2-ort-del{ flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:none; color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:.16s; } .vamilio-app .rd2-ort-del:hover{background:#FBEDEB;color:#C2554B;} .vamilio-app .rd2-blank{ display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 16px; border:1.5px dashed rgba(46,26,57,.16);border-radius:14px;background:#FDFBFE; font-size:13px;color:var(--muted); } .vamilio-app .rd2-blank span{font-size:26px;line-height:1;color:var(--plum);opacity:.6;} .vamilio-app .rd2-fld > label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:7px;} .vamilio-app .rd2-addrow{display:flex;gap:10px;} .vamilio-app .rd2-addrow input{ flex:1;min-width:0;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 14px;font:inherit;font-size:max(16px,1em);background:#fff;color:var(--ink);transition:.16s; } .vamilio-app .rd2-addrow input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .rd2-addbtn{ flex:0 0 auto;padding:13px 20px;border:0;border-radius:12px;background:var(--plum);color:#fff; font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;cursor:pointer; box-shadow:0 5px 14px rgba(81,48,100,.22);transition:.16s; } .vamilio-app .rd2-addbtn:hover{background:var(--plum-mid);} .vamilio-app .rd2-addnote{display:block;font-size:12px;color:var(--muted);margin-top:7px;} .vamilio-app .rd2-status{margin:10px 0 0;font-size:12.8px;font-weight:600;color:var(--plum);} .vamilio-app .rd2-status:empty{display:none;} /* Fairness */ .vamilio-app .rd2-fair{display:flex;gap:13px;align-items:flex-start;padding:11px 0;} .vamilio-app .rd2-fair + .rd2-fair{border-top:1px solid rgba(46,26,57,.06);} .vamilio-app .rd2-fair-ic{ flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; } .vamilio-app .rd2-fair-ic.is-plum{background:var(--lilac-soft);color:var(--plum);} .vamilio-app .rd2-fair-ic.is-rose{background:#FCEEF3;color:#B4517E;} .vamilio-app .rd2-fair-ic.is-green{background:#EAF6EF;color:#1F9D57;} .vamilio-app .rd2-fair-ic .ic{width:19px;height:19px;} .vamilio-app .rd2-fair b{display:block;font-size:13.8px;color:var(--ink);} .vamilio-app .rd2-fair small{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:3px;} /* Banner */ .vamilio-app .rd2-banner{ display:flex;align-items:center;gap:15px;padding:18px 20px;border-radius:16px; background:linear-gradient(120deg,var(--lilac-soft),#FBF9FD);border:1px solid rgba(201,182,218,.5); } .vamilio-app .rd2-banner-ic{ flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 3px 9px rgba(46,26,57,.10); } .vamilio-app .rd2-banner-ic .ic{width:19px;height:19px;} .vamilio-app .rd2-banner b{display:block;font-size:14px;color:var(--plum-deep);} .vamilio-app .rd2-banner p{margin:3px 0 0;font-size:13px;color:var(--muted);} /* Schalter „Standort teilen“ + Eltern-Erlaubnis für Kinder */ .vamilio-app .rd2-sharerow{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;cursor:pointer;} .vamilio-app .rd2-sharerow-t{flex:1 1 auto;min-width:0;} .vamilio-app .rd2-sharerow-t b{display:block;font-size:15px;color:var(--ink);} .vamilio-app .rd2-sharerow-t small{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:3px;} .vamilio-app .rd2-sharerow .switch input:focus-visible + .sw-track{outline:2px solid var(--plum);outline-offset:2px;} .vamilio-app .rd2-sharerow .switch input:disabled{cursor:not-allowed;} .vamilio-app .rd2-sharerow .switch input:disabled + .sw-track{opacity:.5;} .vamilio-app .rd2-kids .rd2-sharerow{padding:8px 0;} .vamilio-app .rd2-kids .rd2-sharerow + .rd2-sharerow{border-top:1px solid rgba(46,26,57,.06);} /* Konto → „Deine Einwilligungen“: Standort-Teilen beenden */ .vamilio-app .consent-row .consent-form{flex:0 0 auto;margin:0 0 0 auto;} .vamilio-app .consent-ok{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--plum);} @media (max-width:760px){ .vamilio-app .rd2-card{padding:16px;} .vamilio-app .rd2-map{height:300px;} /* Legende passt mobil nicht auf die Karte – darunter zeigen. */ .vamilio-app .rd2-legend{position:static;max-width:none;box-shadow:none;padding:12px 2px 0;} .vamilio-app .rd2-mapfoot{flex-direction:column;align-items:stretch;} .vamilio-app .rd2-share{justify-content:center;} .vamilio-app .rd2-checkin{width:100%;justify-content:center;} .vamilio-app .rd2-addrow{flex-direction:column;} } /* ============================================================ MENTAL-LOAD-VERTEILER (ml2-*) ============================================================ */ .vamilio-app .ml2{display:flex;flex-direction:column;gap:16px;margin-top:14px;} /* Balance */ .vamilio-app .ml2-balance{padding:4px 2px;} .vamilio-app .ml2-bal-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:9px;} .vamilio-app .ml2-bal-head b{font-size:14px;color:var(--ink);} .vamilio-app .ml2-bal-head span{font-size:13px;font-weight:700;color:var(--plum-deep);} .vamilio-app .ml2-bal-bar{position:relative;display:flex;height:11px;border-radius:99px;overflow:visible;} .vamilio-app .ml2-bal-bar > span{display:block;height:100%;transition:width .4s;} .vamilio-app .ml2-bal-bar > span:first-child{border-radius:99px 0 0 99px;} .vamilio-app .ml2-bal-bar > span:nth-child(2){border-radius:0 99px 99px 0;} .vamilio-app .ml2-bal-dot{ position:absolute;top:50%;width:19px;height:19px;border-radius:50%; background:#fff;border:3px solid var(--plum-deep);transform:translate(-50%,-50%); transition:left .4s;box-shadow:0 2px 6px rgba(46,26,57,.25); } .vamilio-app .ml2-bal-hint{margin:9px 0 0;font-size:12.8px;color:var(--muted);} /* Intro + Legende */ .vamilio-app .ml2-intro{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);} .vamilio-app .ml2-legend{display:flex;gap:18px;flex-wrap:wrap;} .vamilio-app .ml2-legend span{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;color:var(--ink);} .vamilio-app .ml2-legend i{width:10px;height:10px;border-radius:50%;} .vamilio-app .ml2-legend i.is-both{background:#2A2233;} /* Kategorien */ .vamilio-app .ml2-groups{display:flex;flex-direction:column;gap:16px;} .vamilio-app .ml2-groups:empty{display:none;} .vamilio-app .ml2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:6px 20px 16px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .ml2-card-h{ display:flex;align-items:center;gap:12px;width:100%;padding:14px 0;text-align:left; border:0;background:none;cursor:pointer; } .vamilio-app .ml2-card-ic{ flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .ml2-card-ic .ic{width:17px;height:17px;} .vamilio-app .ml2-card-h > b{ font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--plum-deep); } .vamilio-app .ml2-count{padding:5px 11px;border-radius:99px;background:var(--cream);font-size:11.8px;font-weight:700;color:var(--muted);} .vamilio-app .ml2-chev{ margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg);transition:transform .16s; } .vamilio-app .ml2-card[data-closed] .ml2-chev{transform:rotate(-45deg);} .vamilio-app .ml2-card[data-closed] .ml2-card-body{display:none;} /* Aufgabenzeilen */ .vamilio-app .ml2-task{ display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px; border:1px solid rgba(46,26,57,.08);background:#fff;margin-bottom:9px;transition:.16s; } .vamilio-app .ml2-task.is-on{border-color:rgba(81,48,100,.22);background:#FDFBFE;} .vamilio-app .ml2-task-ic{ flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .ml2-task-ic .ic{width:15px;height:15px;} .vamilio-app .ml2-task-label{flex:1;min-width:0;font-size:14px;color:var(--ink);} .vamilio-app .ml2-who{display:flex;gap:7px;flex:0 0 auto;} .vamilio-app .ml2-pill{ padding:8px 15px;border-radius:99px;border:1px solid rgba(46,26,57,.13);background:#fff; font-size:12.3px;font-weight:700;color:var(--muted);cursor:pointer;transition:.16s;white-space:nowrap; } .vamilio-app .ml2-pill:hover{border-color:var(--lilac);color:var(--ink);} .vamilio-app .ml2-pill.is-a.is-sel, .vamilio-app .ml2-pill.is-b.is-sel{background:var(--mc);border-color:var(--mc);color:#fff;} .vamilio-app .ml2-pill.is-both.is-sel{background:#2A2233;border-color:#2A2233;color:#fff;} .vamilio-app .ml2-tools{display:flex;gap:5px;flex:0 0 auto;} .vamilio-app .ml2-icon{ width:28px;height:28px;border-radius:50%;border:0;background:none;color:var(--muted); font-size:14px;line-height:1;cursor:pointer;transition:.16s; } .vamilio-app .ml2-icon:hover{background:var(--cream);color:var(--ink);} .vamilio-app .ml2-add-task{ display:block;margin:4px auto 0;padding:9px 18px;border-radius:99px;border:0;background:none; font-size:13px;font-weight:700;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .ml2-add-task:hover{background:var(--lilac-soft);} /* Eigene Kategorien / Fuß */ .vamilio-app .ml2-custom-head{font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--plum-deep);margin-top:4px;} .vamilio-app .ml2-add-group{ padding:13px 20px;border-radius:14px;border:1.5px dashed rgba(46,26,57,.2);background:#FDFBFE; font-size:13.5px;font-weight:700;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .ml2-add-group:hover{background:var(--lilac-soft);border-color:var(--lilac);} .vamilio-app .ml2-foot{display:flex;align-items:center;gap:14px;} .vamilio-app .ml2-reset{ padding:10px 16px;border-radius:12px;border:1px solid rgba(46,26,57,.14);background:#fff; font-size:12.8px;font-weight:700;color:var(--muted);cursor:pointer;transition:.16s; } .vamilio-app .ml2-reset:hover{background:var(--cream);color:var(--ink);} /* Warum das hilft */ .vamilio-app .ml2-why{ display:flex;align-items:center;gap:15px;padding:18px 20px;border-radius:16px; background:linear-gradient(120deg,var(--lilac-soft),#FBF9FD);border:1px solid rgba(201,182,218,.5); } .vamilio-app .ml2-why-ic{ flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 3px 9px rgba(46,26,57,.10); } .vamilio-app .ml2-why-ic .ic{width:20px;height:20px;} .vamilio-app .ml2-why b{display:block;font-size:14px;color:var(--plum-deep);} .vamilio-app .ml2-why p{margin:3px 0 0;font-size:13px;line-height:1.55;color:var(--muted);} @media (max-width:820px){ .vamilio-app .ml2-card{padding:4px 14px 14px;} .vamilio-app .ml2-task{flex-wrap:wrap;} .vamilio-app .ml2-task-label{flex-basis:calc(100% - 46px);} .vamilio-app .ml2-who{margin-left:46px;} .vamilio-app .ml2-tools{margin-left:auto;} } /* ============================================================ VORSORGE-KOMPASS (ck2-*) ============================================================ */ .vamilio-app .ck2{display:flex;flex-direction:column;gap:16px;margin-top:14px;} .vamilio-app .ck2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .ck2-card-h{ display:flex;align-items:center;gap:9px;margin:0 0 16px; font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--ink); } .vamilio-app .ck2-card-h .ic{width:18px;height:18px;color:var(--plum);} .vamilio-app .ck2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:18px;} .vamilio-app .ck2-fld{display:flex;flex-direction:column;gap:7px;min-width:0;} .vamilio-app .ck2-fld > span:first-child{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .ck2-fld input, .vamilio-app .ck2-select select{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 14px;font:inherit;font-size:max(16px,1em);background:#fff;color:var(--ink);transition:.16s; } .vamilio-app .ck2-fld input:focus, .vamilio-app .ck2-select select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .ck2-select{position:relative;display:block;} .vamilio-app .ck2-select select{ -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background-image:none !important;background-color:#fff !important;padding-right:38px !important; } .vamilio-app .ck2-select::after{ content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;pointer-events:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); } .vamilio-app .ck2-save{ display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto; min-width:220px;padding:13px 26px;border:0;border-radius:14px;background:var(--plum);color:#fff; font-family:'Bricolage Grotesque';font-weight:700;font-size:14.5px;cursor:pointer; box-shadow:0 6px 16px rgba(81,48,100,.22);transition:.16s; } .vamilio-app .ck2-save:hover{background:var(--plum-mid);} .vamilio-app .ck2-save .ic{width:15px;height:15px;} .vamilio-app .ck2-err{margin:12px 0 0;text-align:center;font-size:12.8px;font-weight:700;color:#C2554B;} /* Untersuchungs-Karten */ .vamilio-app .ck2-list{display:flex;flex-direction:column;gap:14px;} .vamilio-app .ck2-item{ display:flex;align-items:flex-start;gap:16px;padding:20px;border-radius:18px;background:#fff; border:1px solid rgba(46,26,57,.09);box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .ck2-item.is-faellig{border-color:rgba(194,85,75,.3);background:#FFFDFC;} .vamilio-app .ck2-item-ic{ flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .ck2-item.is-faellig .ck2-item-ic{background:#FBEDEB;color:#C2554B;} .vamilio-app .ck2-item-ic .ic{width:24px;height:24px;} .vamilio-app .ck2-item-main{flex:1;min-width:0;} .vamilio-app .ck2-item-main > b{display:block;font-family:'Fraunces',serif;font-size:16.5px;font-weight:700;color:var(--ink);} .vamilio-app .ck2-item-due{display:block;font-size:13px;font-weight:700;color:var(--plum);margin-top:4px;} .vamilio-app .ck2-item.is-faellig .ck2-item-due{color:#C2554B;} .vamilio-app .ck2-item-info{display:block;font-size:13.3px;line-height:1.55;color:var(--muted);margin-top:4px;} .vamilio-app .ck2-datum{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--muted);} .vamilio-app .ck2-datum-pill{ display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:12px; border:1px solid rgba(46,26,57,.14);background:#fff; } .vamilio-app .ck2-datum-pill .ic{width:15px;height:15px;color:var(--plum);} .vamilio-app .ck2-datum-pill input{border:0;padding:0;font:inherit;font-size:13.5px;color:var(--ink);background:none;} .vamilio-app .ck2-datum-pill input:focus{outline:none;} .vamilio-app .ck2-datum-pill:focus-within{border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .ck2-badge{ flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:99px; font-size:12.5px;font-weight:700; } .vamilio-app .ck2-badge .ic{width:13px;height:13px;} .vamilio-app .ck2-badge.is-ok{background:#EAF6EF;color:#1F9D57;} .vamilio-app .ck2-badge.is-offen{background:#FDF3E3;color:#8A6420;} .vamilio-app .ck2-badge.is-faellig{background:#FBEDEB;color:#C2554B;} .vamilio-app .ck2-blank{ padding:32px 22px;text-align:center;border:1.5px dashed rgba(46,26,57,.16);border-radius:16px;background:#FDFBFE; } .vamilio-app .ck2-blank b{display:block;font-family:'Fraunces',serif;font-size:16px;color:var(--plum-deep);margin-bottom:6px;} .vamilio-app .ck2-blank p{margin:0 auto;max-width:46ch;font-size:13.5px;color:var(--muted);} /* Fußnote */ .vamilio-app .ck2-note{ display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px; background:var(--cream);border:1px solid rgba(46,26,57,.07); } .vamilio-app .ck2-note-ic{ flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 2px 7px rgba(46,26,57,.09); } .vamilio-app .ck2-note-ic .ic{width:17px;height:17px;} .vamilio-app .ck2-note p{margin:0;font-size:13px;line-height:1.55;color:var(--muted);} .vamilio-app .ck2-note b{color:var(--ink);} @media (max-width:720px){ .vamilio-app .ck2-card,.vamilio-app .ck2-item{padding:16px;} .vamilio-app .ck2-item{flex-wrap:wrap;} .vamilio-app .ck2-item-main{flex-basis:calc(100% - 74px);} .vamilio-app .ck2-badge{margin-left:74px;} .vamilio-app .ck2-save{width:100%;} } /* ============================================================ PAARZEIT (pz2-*) ============================================================ */ .vamilio-app .pz2{display:flex;flex-direction:column;gap:18px;margin-top:14px;} .vamilio-app .pz2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .pz2-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;} .vamilio-app .pz2-card-h{ display:flex;align-items:center;gap:9px;margin:0; font-family:'Fraunces',serif;font-weight:700;font-size:17px;color:var(--plum-deep); } .vamilio-app .pz2-card-h .ic{width:18px;height:18px;color:var(--plum);} .vamilio-app .pz2-week{ padding:8px 15px;border-radius:99px;background:var(--lilac-soft); font-size:12.8px;font-weight:700;color:var(--plum-deep); } .vamilio-app .pz2-week em{font-style:normal;font-weight:600;color:var(--muted);} .vamilio-app .pz2-sub{margin:-6px 0 16px;font-size:13.3px;color:var(--muted);} /* Fragen */ .vamilio-app .pz2-frage{display:flex;gap:15px;align-items:flex-start;margin-bottom:18px;} .vamilio-app .pz2-frage-ic{ flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum);margin-top:22px; } .vamilio-app .pz2-frage-ic .ic{width:19px;height:19px;} .vamilio-app .pz2-frage-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;} .vamilio-app .pz2-frage-main > span:first-child{font-size:14px;font-weight:600;color:var(--ink);} .vamilio-app .pz2-textwrap{position:relative;display:block;} .vamilio-app .pz2-frage textarea{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:14px; padding:14px 15px 26px;font:inherit;font-size:max(16px,1em);line-height:1.55;background:#fff;color:var(--ink); resize:vertical;transition:.16s; } .vamilio-app .pz2-frage textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .pz2-count{ position:absolute;right:13px;bottom:9px;font-style:normal;font-size:11.5px;color:var(--muted); background:rgba(255,255,255,.85);padding:1px 6px;border-radius:8px;pointer-events:none; } .vamilio-app .pz2-save{ display:flex;align-items:center;justify-content:center;gap:9px;margin:4px auto 0; min-width:240px;padding:14px 26px;border:0;border-radius:14px;background:var(--plum);color:#fff; font-family:'Bricolage Grotesque';font-weight:700;font-size:14.5px;cursor:pointer; box-shadow:0 6px 16px rgba(81,48,100,.22);transition:.16s; } .vamilio-app .pz2-save:hover{background:var(--plum-mid);} .vamilio-app .pz2-save .ic{width:15px;height:15px;} .vamilio-app .pz2-hint{ display:flex;align-items:flex-start;gap:9px;margin:16px 0 0; font-size:13px;line-height:1.5;color:var(--muted); } .vamilio-app .pz2-hint .ic{flex:0 0 auto;width:16px;height:16px;color:var(--plum);margin-top:1px;} /* Date-Night */ .vamilio-app .pz2-fld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;} .vamilio-app .pz2-fld > span:first-child{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .pz2-select{position:relative;display:block;} .vamilio-app .pz2-select select{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 38px 13px 42px;font:inherit;font-size:max(16px,1em);color:var(--ink);transition:.16s; -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background-image:none !important;background-color:#fff !important; } .vamilio-app .pz2-select select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .pz2-select::after{ content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;pointer-events:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); } .vamilio-app .pz2-select-ic{ position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px; color:var(--plum);pointer-events:none; } .vamilio-app .pz2-idee{ margin:0 0 16px;padding:18px 20px;border-radius:14px;background:var(--lilac-soft); font-size:15px;line-height:1.6;color:var(--plum-deep);font-weight:600;text-align:center; } .vamilio-app .pz2-ziehen{ display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto; min-width:220px;padding:13px 26px;border:0;border-radius:99px; background:var(--lilac-soft);color:var(--plum-deep); font-family:'Bricolage Grotesque';font-weight:700;font-size:14.5px;cursor:pointer;transition:.16s; } .vamilio-app .pz2-ziehen:hover{background:var(--lilac);} .vamilio-app .pz2-ziehen .ic{width:16px;height:16px;} .vamilio-app .pz2-tip{ display:flex;align-items:center;gap:9px;margin:16px 0 0;padding:14px 18px;border-radius:14px; background:var(--lilac-soft);font-size:13px;color:var(--ink); } .vamilio-app .pz2-tip .ic{flex:0 0 auto;width:16px;height:16px;color:var(--plum);} .vamilio-app .pz2-tip b{color:var(--plum-deep);} /* Frühere Check-ins */ .vamilio-app .pz2-alt{border-bottom:1px solid rgba(46,26,57,.07);} .vamilio-app .pz2-alt:last-child{border-bottom:0;} .vamilio-app .pz2-alt summary{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:13px 2px;cursor:pointer;list-style:none;font-size:14px;font-weight:700;color:var(--ink); } .vamilio-app .pz2-alt summary::-webkit-details-marker{display:none;} .vamilio-app .pz2-alt-chev{ width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg);transition:transform .16s;margin-right:4px; } .vamilio-app .pz2-alt[open] .pz2-alt-chev{transform:rotate(-135deg);} .vamilio-app .pz2-alt p{margin:0 2px 12px;font-size:13.3px;line-height:1.6;color:var(--muted);} .vamilio-app .pz2-alt p b{color:var(--ink);} @media (max-width:680px){ .vamilio-app .pz2-card{padding:16px;} .vamilio-app .pz2-frage{gap:11px;} .vamilio-app .pz2-frage-ic{width:36px;height:36px;margin-top:24px;} .vamilio-app .pz2-frage-ic .ic{width:16px;height:16px;} .vamilio-app .pz2-save,.vamilio-app .pz2-ziehen{width:100%;} } /* ============================================================ GEWOHNHEITEN & ZIELE (hb2-*) ============================================================ */ .vamilio-app .hb2{display:flex;flex-direction:column;gap:18px;margin-top:14px;} .vamilio-app .hb2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .hb2-head{display:flex;gap:14px;align-items:center;margin-bottom:18px;} .vamilio-app .hb2-head-ic{ flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .hb2-head-ic .ic{width:20px;height:20px;} .vamilio-app .hb2-head h3{margin:0;font-family:'Fraunces',serif;font-weight:700;font-size:18px;color:var(--plum-deep);} .vamilio-app .hb2-head p{margin:3px 0 0;font-size:13px;color:var(--muted);} .vamilio-app .hb2-lbl{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:8px;} .vamilio-app .hb2-addrow{display:flex;gap:12px;margin-bottom:14px;} .vamilio-app .hb2-addrow input{ flex:1;min-width:0;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:99px; padding:13px 20px;font:inherit;font-size:max(16px,1em);background:#fff;color:var(--ink);transition:.16s; } .vamilio-app .hb2-addrow input:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .hb2-add{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px; min-width:180px;padding:13px 24px;border-radius:99px;border:1.5px solid var(--plum);background:#fff; font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;color:var(--plum);cursor:pointer;transition:.16s; } .vamilio-app .hb2-add b{font-size:17px;line-height:1;} .vamilio-app .hb2-add:hover{background:var(--lilac-soft);} .vamilio-app .hb2-ideen{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px;font-size:13px;font-weight:600;color:var(--muted);} .vamilio-app .hb2-idee{ padding:8px 15px;border-radius:99px;border:1px solid rgba(46,26,57,.13);background:#fff; font-size:12.8px;font-weight:600;color:var(--ink);cursor:pointer;transition:.16s; } .vamilio-app .hb2-idee:hover{background:var(--lilac-soft);border-color:var(--lilac);} .vamilio-app .hb2-blank{ display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 20px; border:1.5px dashed rgba(46,26,57,.18);border-radius:16px;background:#FDFBFE;text-align:center; } .vamilio-app .hb2-blank .ic{width:24px;height:24px;color:var(--plum);opacity:.7;} .vamilio-app .hb2-blank p{margin:0;font-size:13.5px;color:var(--muted);} /* Wochenraster (bestehende Klassen hb-tage/hb-zeile/hb-cell im neuen Look) */ .vamilio-app .hb2-grid .hb-tage, .vamilio-app .hb2-grid .hb-zeile{ display:grid;grid-template-columns:minmax(90px,1.4fr) repeat(7,minmax(30px,1fr)) 34px; gap:6px;align-items:center; } .vamilio-app .hb2-grid .hb-tage{margin-bottom:6px;} .vamilio-app .hb2-grid .hb-tage span{text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);} .vamilio-app .hb2-grid .hb-zeile{padding:7px 0;border-top:1px solid rgba(46,26,57,.06);} .vamilio-app .hb2-grid .hb-name{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .vamilio-app .hb2-grid .hb-cell{ width:100%;aspect-ratio:1;max-width:32px;margin:0 auto;border-radius:10px; border:1.5px solid rgba(46,26,57,.16);background:#fff;cursor:pointer;transition:.16s; } .vamilio-app .hb2-grid .hb-cell:hover:not([disabled]){border-color:var(--plum);} .vamilio-app .hb2-grid .hb-cell.is-on{background:var(--plum);border-color:var(--plum);} .vamilio-app .hb2-grid .hb-cell[disabled]{opacity:.35;cursor:not-allowed;} .vamilio-app .hb2-grid .hb-del{ width:30px;height:30px;border-radius:50%;border:0;background:none;color:var(--muted); font-size:14px;line-height:1;cursor:pointer;transition:.16s; } .vamilio-app .hb2-grid .hb-del:hover{background:#FBEDEB;color:#C2554B;} /* Ziele */ .vamilio-app .hb2-ziele{display:flex;flex-direction:column;} .vamilio-app .hb2-ziel{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(46,26,57,.07);} .vamilio-app .hb2-ziel:last-child{border-bottom:0;} .vamilio-app .hb2-ziel.is-done .hb2-ziel-t{text-decoration:line-through;opacity:.55;} .vamilio-app .hb2-check{position:relative;flex:0 0 auto;width:22px;height:22px;cursor:pointer;} .vamilio-app .hb2-check input{position:absolute;opacity:0;width:0;height:0;} .vamilio-app .hb2-check i{ position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(46,26,57,.22);background:#fff; display:grid;place-items:center;transition:.16s; } .vamilio-app .hb2-check i::after{ content:"";width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(45deg) scale(0);transition:transform .16s;margin-top:-2px; } .vamilio-app .hb2-check input:checked + i{background:#1F9D57;border-color:#1F9D57;} .vamilio-app .hb2-check input:checked + i::after{transform:rotate(45deg) scale(1);} .vamilio-app .hb2-ziel-t{flex:1;min-width:0;font-size:14px;color:var(--ink);} .vamilio-app .hb2-x{ flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:none; color:var(--muted);font-size:18px;line-height:1;cursor:pointer;transition:.16s; } .vamilio-app .hb2-x:hover{background:#FBEDEB;color:#C2554B;} /* Banner */ .vamilio-app .hb2-banner{ display:flex;align-items:center;gap:15px;padding:18px 20px;border-radius:16px; background:linear-gradient(120deg,var(--lilac-soft),#FBF9FD);border:1px solid rgba(201,182,218,.5); } .vamilio-app .hb2-banner-ic{ flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:#fff;color:var(--plum);box-shadow:0 3px 9px rgba(46,26,57,.10); } .vamilio-app .hb2-banner-ic .ic{width:19px;height:19px;} .vamilio-app .hb2-banner b{display:block;font-size:14px;color:var(--plum-deep);} .vamilio-app .hb2-banner p{margin:3px 0 0;font-size:13px;color:var(--muted);} @media (max-width:680px){ .vamilio-app .hb2-card{padding:16px;} .vamilio-app .hb2-addrow{flex-direction:column;} .vamilio-app .hb2-add{min-width:0;} .vamilio-app .hb2-grid .hb-tage, .vamilio-app .hb2-grid .hb-zeile{grid-template-columns:minmax(70px,1.2fr) repeat(7,minmax(24px,1fr)) 30px;gap:4px;} } /* ============================================================ FREUNDSCHAFTS-PFLEGE (fr2-*) ============================================================ */ .vamilio-app .fr2{display:flex;flex-direction:column;gap:18px;margin-top:14px;} .vamilio-app .fr2-card{ background:#fff;border:1px solid rgba(46,26,57,.09);border-radius:18px;padding:22px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05); } .vamilio-app .fr2-head{display:flex;gap:14px;align-items:center;margin-bottom:18px;} .vamilio-app .fr2-head-ic{ flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .fr2-head-ic .ic{width:20px;height:20px;} .vamilio-app .fr2-head h3{margin:0;font-family:'Fraunces',serif;font-weight:700;font-size:18px;color:var(--plum-deep);} .vamilio-app .fr2-head p{margin:3px 0 0;font-size:13px;color:var(--muted);} .vamilio-app .fr2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:18px;} .vamilio-app .fr2-fld{display:flex;flex-direction:column;gap:7px;min-width:0;} .vamilio-app .fr2-fld > span:first-child{font-size:12.5px;font-weight:700;color:var(--muted);} .vamilio-app .fr2-fld input, .vamilio-app .fr2-select select{ width:100%;box-sizing:border-box;border:1px solid rgba(46,26,57,.16);border-radius:12px; padding:13px 14px;font:inherit;font-size:max(16px,1em);background:#fff;color:var(--ink);transition:.16s; } .vamilio-app .fr2-fld input:focus, .vamilio-app .fr2-select select:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .fr2-select{position:relative;display:block;} .vamilio-app .fr2-select select{ -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background-image:none !important;background-color:#fff !important;padding-right:38px !important; } .vamilio-app .fr2-select::after{ content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;pointer-events:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); } .vamilio-app .fr2-add{ display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto; min-width:240px;padding:14px 28px;border:0;border-radius:99px;background:var(--plum);color:#fff; font-family:'Bricolage Grotesque';font-weight:700;font-size:14.5px;cursor:pointer; box-shadow:0 6px 16px rgba(81,48,100,.22);transition:.16s; } .vamilio-app .fr2-add b{font-size:18px;line-height:1;font-weight:700;} .vamilio-app .fr2-add:hover{background:var(--plum-mid);} .vamilio-app .fr2-hint{ display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:14px 18px;border-radius:14px; background:var(--cream);font-size:13px;color:var(--muted); } .vamilio-app .fr2-hint .ic{flex:0 0 auto;width:16px;height:16px;color:var(--plum);} /* Kontakt-Zeilen */ .vamilio-app .fr2-list{display:flex;flex-direction:column;gap:10px;} .vamilio-app .fr2-item{ display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:14px; border:1px solid rgba(46,26,57,.09);background:#fff;transition:.16s; } .vamilio-app .fr2-item.is-faellig{border-color:rgba(194,85,75,.28);background:#FFFDFC;} .vamilio-app .fr2-avatar{ flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center; font-family:'Fraunces',serif;font-weight:700;font-size:17px; } .vamilio-app .fr2-item-t{flex:1;min-width:0;} .vamilio-app .fr2-item-t b{display:block;font-size:14.2px;color:var(--ink);} .vamilio-app .fr2-st{display:inline-block;font-size:12px;font-weight:700;margin-top:2px;margin-right:8px;} .vamilio-app .fr2-st.is-ok{color:#1F9D57;} .vamilio-app .fr2-st.is-offen{color:#8A6420;} .vamilio-app .fr2-st.is-faellig{color:#C2554B;} .vamilio-app .fr2-last{display:inline-block;font-size:12px;color:var(--muted);margin-top:2px;} .vamilio-app .fr2-chip{ flex:0 0 auto;padding:7px 14px;border-radius:99px;background:var(--lilac-soft); font-size:12.3px;font-weight:700;color:var(--plum-deep);white-space:nowrap; } .vamilio-app .fr2-select-mini{flex:0 0 auto;width:130px;} .vamilio-app .fr2-select-mini select{padding:8px 30px 8px 12px !important;border-radius:99px;font-size:13px;} .vamilio-app .fr2-select-mini::after{right:12px;} .vamilio-app .fr2-done{ flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px; border:1px solid rgba(31,157,87,.35);background:#EAF6EF;color:#1F9D57; font-size:12.3px;font-weight:700;cursor:pointer;transition:.16s; } .vamilio-app .fr2-done:hover{background:#DCF0E4;} .vamilio-app .fr2-done .ic{width:13px;height:13px;} .vamilio-app .fr2-icon{ flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:0;background:none; color:var(--muted);font-size:15px;line-height:1;cursor:pointer;transition:.16s; } .vamilio-app .fr2-icon:hover{background:var(--lilac-soft);color:var(--plum);} .vamilio-app .fr2-icon.is-del{font-size:19px;} .vamilio-app .fr2-icon.is-del:hover{background:#FBEDEB;color:#C2554B;} .vamilio-app .fr2-blank{ display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 20px; border:1.5px dashed rgba(46,26,57,.18);border-radius:16px;background:#FDFBFE;text-align:center; } .vamilio-app .fr2-blank .ic{width:24px;height:24px;color:var(--plum);opacity:.7;} .vamilio-app .fr2-blank p{margin:0;font-size:13.5px;color:var(--muted);} @media (max-width:720px){ .vamilio-app .fr2-card{padding:16px;} .vamilio-app .fr2-add{width:100%;min-width:0;} .vamilio-app .fr2-item{flex-wrap:wrap;} .vamilio-app .fr2-item-t{flex-basis:calc(100% - 55px);} .vamilio-app .fr2-chip,.vamilio-app .fr2-select-mini{margin-left:55px;} .vamilio-app .fr2-done span{display:none;} } /* ============================================================ EINKAUFSLISTE · Kopfbereich im neuen Entwurf ============================================================ */ /* Eingabezeile: große Pill, Plus-Kreis links, Plum-Knopf rechts */ .vamilio-app .ek-addrow{ display:flex;align-items:center;gap:12px;background:#fff; border:1px solid rgba(46,26,57,.09);border-radius:99px;padding:10px 10px 10px 16px; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05);margin-bottom:14px; } .vamilio-app .ek-addrow .ek-add-ic{ flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; border:1.5px solid rgba(46,26,57,.14);color:var(--plum);font-size:22px;line-height:1;background:#fff; } .vamilio-app .ek-addrow input{ flex:1;min-width:0;border:0;background:none;padding:12px 4px; font:inherit;font-size:max(16px,1em);color:var(--ink); } .vamilio-app .ek-addrow input:focus{outline:none;} .vamilio-app .ek-addrow .ek-add-btn{ flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;background:var(--plum); color:#fff;font-size:26px;line-height:1;cursor:pointer; box-shadow:0 6px 16px rgba(81,48,100,.25);transition:.16s; } .vamilio-app .ek-addrow .ek-add-btn:hover{background:var(--plum-mid);} /* Tabs: segmentierte weiße Leiste, aktiver Tab als gefüllte Pille */ .vamilio-app .ek-tabs{ display:flex;flex:1;min-width:0;background:#fff;border:1px solid rgba(46,26,57,.09); border-radius:99px;padding:5px;gap:4px; box-shadow:0 1px 2px rgba(46,26,57,.04); } .vamilio-app .ek-tab{ flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 10px;border:0;border-radius:99px;background:none; font-size:13.3px;font-weight:700;color:var(--ink);cursor:pointer;transition:.16s;white-space:nowrap;min-width:0; } .vamilio-app .ek-tab .ic{width:15px;height:15px;flex:0 0 auto;} .vamilio-app .ek-tab:hover{background:var(--cream);} .vamilio-app .ek-tab.is-on{background:var(--plum);color:#fff;box-shadow:0 4px 12px rgba(81,48,100,.22);} .vamilio-app .ek-tab-n{ font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px; background:var(--lilac-soft);color:var(--plum); } .vamilio-app .ek-tab.is-on .ek-tab-n{background:rgba(255,255,255,.2);color:#fff;} /* Kategorie-Kacheln (3er-Raster wie im Entwurf) */ .vamilio-app .ek-kats{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 4px; } .vamilio-app .ek-kat{ display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 15px; background:#fff;border:1.5px solid rgba(46,26,57,.09);border-radius:18px;cursor:pointer; box-shadow:0 1px 2px rgba(46,26,57,.04),0 8px 24px rgba(46,26,57,.05);transition:.16s; } .vamilio-app .ek-kat:hover{border-color:var(--lilac);} .vamilio-app .ek-kat.is-on{border-color:var(--plum);background:#FDFBFE;box-shadow:0 0 0 3px rgba(81,48,100,.10);} .vamilio-app .ek-kat-ic{ width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:var(--plum-deep); } .vamilio-app .ek-kat-ic .ic{width:24px;height:24px;} .vamilio-app .ek-kat-ic.is-green{background:#E5F0E3;} .vamilio-app .ek-kat-ic.is-amber{background:#FCF0DC;} .vamilio-app .ek-kat-ic.is-blue{background:#DFEAF6;} .vamilio-app .ek-kat-ic.is-rose{background:#FBE4E6;} .vamilio-app .ek-kat-ic.is-sand{background:#F5EBDD;} .vamilio-app .ek-kat-ic.is-lilac{background:var(--lilac-soft);} .vamilio-app .ek-kat-t{ display:inline-flex;align-items:center;gap:7px;font-size:13.3px;font-weight:700;color:var(--ink); max-width:100%; } .vamilio-app .ek-kat-chev{ flex:0 0 auto;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(-45deg);transition:.16s; } .vamilio-app .ek-kat.is-on .ek-kat-chev{transform:rotate(45deg);border-color:var(--plum);} @media (max-width:560px){ .vamilio-app .ek-kat-ic{width:50px;height:50px;} .vamilio-app .ek-kat-t{font-size:12.3px;} .vamilio-app .ek-tab{font-size:12.3px;padding:10px 6px;} } /* Feinschliff Einkaufslisten-Kopf */ .vamilio-app .ek-kat .ek-kat-t{text-transform:none;letter-spacing:0;} @media (max-width:640px){ /* Werkzeuge über die Tabs statt daneben – die Tabs brauchen die Breite. */ .vamilio-app .ek-topbar{flex-wrap:wrap;gap:10px;} .vamilio-app .ek-tools2{order:-1;margin-left:auto;} .vamilio-app .ek-tabs{flex:1 1 100%;} } .vamilio-app .ek-filterbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 2px 4px;padding:10px 14px;border-radius:14px;background:#F3EDF7;color:var(--plum);font-size:13px;scroll-margin-top:80px;} .vamilio-app .ek-filter-x{border:0;background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;font-size:12px;color:var(--plum);cursor:pointer;}