/* =========================================================================== Fubu4you – Grundfarben („Nachthimmel") Tiefes Blau statt Schwarz, warmes Orange als Akzent: dunkel, aber einladend. Voreinstellung fuer App, Team-Portal und Eltern-Ansicht – alle drei haengen an dieser Datei. Helle Themes gibt es unter Einstellungen -> Aussehen; sie setzen data-mode="hell" am und damit den Block weiter unten. =========================================================================== */ :root{ /* Vier Farben tragen das Ganze: Schwarzblau als Grund, Orange als Akzent, ein sattes Blau fuer Hinweise und Diamantblau als heller Glanzpunkt. */ --bg:#0b111c; --bg2:#070c14; --bg-glow:#16243c; --card:#121b2b; --card2:#18233a; --ink:#eaf1fa; --muted:#94a8c4; --line:#26344f; --brand:#F79436; --brand-dark:#e07a18; /* Orange – Aktion */ --diamant:#5fd2f0; --diamant-dark:#33b6da; /* Diamantblau – Glanz, Fortschritt */ --diamant-bg:rgba(95,210,240,.14); --good:#3fc98a; --good-bg:rgba(63,201,138,.15); --warn:#e9b44c; --warn-bg:rgba(233,180,76,.15); --bad:#f0716f; --bad-bg:rgba(240,113,111,.16); --free:rgba(63,201,138,.12); --free-b:rgba(63,201,138,.40); --booked:rgba(247,148,54,.12); --booked-b:rgba(247,148,54,.45); --info:#3e7be8; --info-bg:rgba(62,123,232,.16); /* Blau – Hinweis */ --radius:16px; --scheme:dark; --word1:#F79436; --word2:#ffc861; /* Schriftzug */ --sh:4,10,20; /* Schattenfarbe: blaustichig statt russig */ --sheen:rgba(255,255,255,.16); /* Lichtkante oben */ /* Tiefe, aber weich – kein harter Schlagschatten */ --shadow:0 1px 1px rgba(var(--sh),.30),0 6px 18px rgba(var(--sh),.28),0 22px 50px rgba(var(--sh),.34); } /* Abgeleitete Flaechen: gelten fuer jedes Thema, dunkel wie hell. Alles mischt sich aus Grundfarbe und Tinte – passt also automatisch zum eingestellten Thema, statt wie frueher fest blaugrau zu sein. */ :root{ --field: color-mix(in srgb, var(--bg2) 92%, var(--ink) 8%); --chip: color-mix(in srgb, var(--card2) 91%, var(--ink) 9%); --surface: color-mix(in srgb, var(--card2) 84%, var(--ink) 16%); --surface-h: color-mix(in srgb, var(--card2) 76%, var(--ink) 24%); --line-strong:color-mix(in srgb, var(--line) 62%, var(--ink) 38%); --veil: color-mix(in srgb, var(--bg2) 88%, transparent); } *{box-sizing:border-box} html,body{margin:0;height:100%} body{background: radial-gradient(120% 90% at 50% -10%,var(--bg-glow),transparent 55%),var(--bg); color:var(--ink); font-family:var(--font,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif); -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100%} /* Fubu4you-Ladebildschirm: erst zeichnet sich das Lenkrad, dann waechst das Buchenblatt in der Mitte, dann kommt der Schriftzug. */ #splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem; background:radial-gradient(120% 90% at 50% 40%,var(--bg-glow),transparent 60%),var(--bg); transition:opacity .5s ease} #splash.gone{opacity:0;pointer-events:none} #splash .sp-logo{filter:drop-shadow(0 6px 22px rgba(242,160,26,.28))} .sp-arc{stroke-dasharray:100;stroke-dashoffset:100;animation:spDraw .95s cubic-bezier(.65,0,.35,1) forwards} .sp-spokes{opacity:0;animation:spFade .4s ease .72s forwards} .sp-leaf{opacity:0;transform-box:fill-box;transform-origin:center;animation:spLeaf .55s cubic-bezier(.2,.8,.3,1.4) .6s forwards} .sp-vein{stroke-dasharray:100;stroke-dashoffset:100;animation:spDraw .5s ease .95s forwards} .sp-veins{opacity:0;animation:spFade .35s ease 1.15s forwards} .sp-word{opacity:0;transform:translateY(10px);font-size:2rem;font-weight:900;letter-spacing:-.02em; background:linear-gradient(100deg,var(--word1),var(--word2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; animation:spWord .55s ease 1.05s forwards} .sp-word .sp-4{font-style:italic} @keyframes spDraw{to{stroke-dashoffset:0}} @keyframes spFade{to{opacity:1}} @keyframes spLeaf{from{opacity:0;transform:scale(.25) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}} @keyframes spWord{to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion: reduce){ .sp-arc,.sp-spokes,.sp-leaf,.sp-vein,.sp-veins,.sp-word{animation:none;opacity:1;stroke-dashoffset:0;transform:none} } .boot{padding:4rem;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:.7rem} /* Drehendes Lenkrad als Ladeanzeige – zwischendurch beim Laden */ .g-load{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:2rem 1rem;color:var(--muted);font-size:.9rem} .g-spin{transform-origin:50% 50%;animation:gSpin 1.05s cubic-bezier(.65,.05,.36,1) infinite;filter:drop-shadow(0 3px 11px rgba(242,160,26,.28))} @keyframes gSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.g-spin{animation-duration:2.2s;animation-timing-function:linear}} .boot .tire{font-size:2.4rem} button{font-family:inherit;font-size:.95rem;cursor:pointer;border:none;border-radius:13px; padding:.6rem 1rem;background:var(--brand);color:#fff;font-weight:600;transition:.15s} button:hover{background:var(--brand-dark)} button:disabled{opacity:.45;cursor:not-allowed} button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} button.ghost:hover{background:var(--chip);border-color:var(--line-strong)} button.sec{background:var(--surface);color:var(--ink)} button.sec:hover{background:var(--surface-h)} button.danger{background:var(--bad)}button.danger:hover{background:#c94a49} button.sm{padding:.35rem .7rem;font-size:.82rem} input,select,textarea{font-family:inherit;font-size:.95rem;padding:.55rem .7rem;border:1px solid var(--line); border-radius:13px;background:var(--field);color:var(--ink);width:100%} /* Radio/Checkbox nie auf 100% ziehen (sonst rutscht das Label an den Rand) */ input[type=radio],input[type=checkbox]{width:auto;flex:0 0 auto;padding:0;accent-color:var(--brand)} textarea{line-height:1.4} input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);border-color:var(--brand)} input[type=date]{color-scheme:var(--scheme)} label{font-size:.82rem;font-weight:600;color:var(--muted);display:block;margin:0 0 .3rem} a{color:var(--brand)} .row{display:flex;gap:.8rem;flex-wrap:wrap} .row>*{flex:1;min-width:0} .muted{color:var(--muted)} .center{text-align:center} .hidden{display:none!important} /* Scrollbalken überall unsichtbar – gescrollt wird trotzdem (nativer App-Look) */ *{scrollbar-width:none;-ms-overflow-style:none} *::-webkit-scrollbar{width:0;height:0;display:none} /* ── Smart-Politur: ruhige Bewegung, tastbare Reaktion, kein Tap-Flackern ── */ *{-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} /* Alles Tippbare senkt sich beim Drücken minimal – fühlt sich „echt" an */ button:not(:disabled):not(.edge-handle):active{transform:translateY(.5px) scale(.985)} .edge-tile:active,.stu-card:active,.pl-row:active,.cap-row:active,.bitem:active,.iconbtn:active,.convo:active,.sset:active{transform:scale(.985);transition:transform .08s ease} /* Beim Farb-/Theme-Wechsel Übergänge kurz aus -> neue Farbe sitzt sofort (kein „Kriechen") */ html.anim-off,html.anim-off *,html.anim-off *::before,html.anim-off *::after{transition:none!important} /* Sanfte Einblendung des Tab-Inhalts beim Umschalten (Fahrlehrer) */ @keyframes tabIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} #itab.tab-in{animation:tabIn .34s cubic-bezier(.22,.61,.36,1)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} #itab.tab-in{animation:none} button:not(:disabled):not(.edge-handle):active,.edge-tile:active,.stu-card:active,.pl-row:active,.cap-row:active,.bitem:active,.iconbtn:active,.convo:active,.sset:active{transform:none} } /* ---- Header ---- */ header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg2) 90%,transparent);backdrop-filter:blur(8px); border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.2rem} header .brand{display:flex;align-items:center;gap:.45rem;font-weight:800;letter-spacing:-.01em} header .brand .logo{width:24px;height:24px;object-fit:contain} header .brand .brandname{background:linear-gradient(100deg,var(--word1),var(--word2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} header .brand .logo{font-size:1.4rem} header .who{display:flex;align-items:center;gap:.8rem;font-size:.88rem} header .who .role{background:var(--chip);padding:.2rem .6rem;border-radius:20px;color:var(--muted);font-weight:600} /* Handy: Kopfzeile kompakt halten, nichts läuft über */ @media(max-width:560px){ header{padding:.5rem .5rem} header .brand{font-size:.96rem;gap:.35rem} header .who{gap:.22rem;font-size:.8rem} header .who .role,header .who > .pill{display:none} header .who strong{max-width:7ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} header .who button.sm{padding:.3rem .42rem} main{padding:1rem .7rem 4rem} .card{padding:1rem .9rem} } /* Off-Canvas-Menüs sollen keine horizontale Scroll-Leiste erzeugen */ html{overflow-x:hidden} /* ---- Layout ---- */ main{max-width:1080px;margin:0 auto;padding:1.4rem 1.2rem 4rem} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:1.2rem 1.3rem;margin-bottom:1.2rem} .card h2{margin:.1rem 0 1rem;font-size:1.05rem} .card h2 .sub{font-weight:500;color:var(--muted);font-size:.85rem;margin-left:.4rem} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} @media(max-width:800px){.grid2{grid-template-columns:1fr}} /* ---- Login ---- */ .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2rem} .auth{width:100%;max-width:430px} .auth .logo-big{text-align:center;font-size:2.6rem;margin-bottom:.2rem} .auth h1{text-align:center;margin:0 0 .1rem;font-size:1.5rem} .auth .tag{text-align:center;color:var(--muted);margin-bottom:1.4rem} .tabs{display:flex;gap:.3rem;background:var(--field);padding:.3rem;border-radius:11px;margin-bottom:1.1rem} .tabs button{flex:1;background:transparent;color:var(--muted);padding:.5rem;font-size:.85rem;border-radius:8px} .tabs button.active{background:var(--surface);color:var(--ink)} .field{margin-bottom:.8rem} .err{background:var(--bad-bg);color:var(--bad);padding:.6rem .8rem;border-radius:9px;font-size:.85rem;margin-bottom:.8rem; border:1px solid color-mix(in srgb,var(--bad) 30%,transparent)} .form-actions{margin-top:.4rem} .form-actions button{width:100%;padding:.7rem} /* Ganzen Tag sperren: Banner + Knopf */ .day-blocked{background:var(--bad-bg);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent); border-radius:10px;padding:.6rem .8rem;font-size:.9rem;margin-bottom:.7rem;text-align:center} #k-block.danger{background:transparent;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 50%,transparent)} #k-block.danger:hover{background:var(--bad-bg)} /* ---- Fahrschüler-Liste als Karten (statt Button-Tabelle) ---- */ .stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:.7rem} .stu-card{background:var(--card2);border:1px solid var(--line);border-radius:13px;padding:.8rem .85rem;display:flex;flex-direction:column;gap:.55rem;text-align:left} .stu-head{display:grid;grid-template-columns:auto 1fr auto;align-items:flex-start;gap:.6rem} .stu-namewrap{min-width:0} .stu-login{display:flex;align-items:center;gap:.3rem;margin-top:.2rem;font-size:.82rem;color:var(--muted)} .stu-av{display:flex;width:46px;height:46px;flex:0 0 46px;border-radius:50%;overflow:hidden; background:var(--card);border:2px solid var(--line);align-items:center;justify-content:center; font-size:1rem;font-weight:800;color:var(--muted)} .stu-av img{width:100%;height:100%;object-fit:cover;display:block} .stu-name{font-weight:800;color:var(--ink);font-size:1.02rem;line-height:1.25;min-width:0;overflow-wrap:anywhere} .stu-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center} .stu-hours{flex:0 0 auto;text-align:center;background:var(--card);border:1px solid var(--line); border-radius:10px;padding:.25rem .5rem;min-width:52px} .stu-hours b{display:block;font-size:1.15rem;font-weight:800;color:var(--ink);line-height:1} .stu-hours span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em} .stu-note{background:var(--card);border-radius:8px;padding:.4rem .55rem;font-size:.82rem;color:var(--muted)} .stu-info{display:flex;flex-direction:column;gap:.4rem} .sir{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;min-width:0} .sil{flex:0 0 1.2rem;text-align:center;opacity:.85} .siv{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem} .stu-sonder .pill{font-size:.72rem} .dur-chip{display:inline-flex;align-items:center;gap:.2rem;margin:0;padding:.18rem .5rem;border-radius:16px; border:1px solid var(--line);background:var(--card);font-size:.8rem;font-weight:700;color:var(--muted);cursor:pointer} .dur-chip.on{background:var(--brand);border-color:var(--brand);color:#fff} .dur-chip input{display:none} .linklike{background:none;border:none;color:var(--brand);font-weight:700;font-size:.82rem;padding:.1rem .2rem;cursor:pointer;width:auto} .linklike:hover{text-decoration:underline;background:none} .stu-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:.4rem;border-top:1px solid var(--line);padding-top:.7rem} /* Kompakte Icon-Buttons (Icon oben, kleines Label darunter) – aufgeräumte Werkzeugleiste */ .iconbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem; background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.5rem .2rem;cursor:pointer; color:var(--ink);min-height:58px;overflow:hidden;transition:transform .1s ease,border-color .12s ease,background .12s ease} .iconbtn:hover{border-color:var(--brand);background:var(--card2);transform:translateY(-1px)} .iconbtn:active{transform:translateY(0) scale(.97)} .iconbtn .ib-ic{font-size:1.2rem;line-height:1} .iconbtn .ib-lb{font-size:.63rem;color:var(--muted);font-weight:600;letter-spacing:.005em;text-align:center;line-height:1.05; max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iconbtn.ok{background:var(--card)}.iconbtn.ok:hover{border-color:var(--good);background:var(--good-bg)} .iconbtn.danger{background:var(--card)}.iconbtn.danger:hover{border-color:var(--bad);background:var(--bad-bg)} .iconbtn.ok .ib-lb{color:var(--good)}.iconbtn.danger .ib-lb{color:var(--bad)} .stu-actions .stu-del{margin-left:0} /* ---- Einstellungen: aufklappbare Abschnitte ---- */ .sset{background:var(--card2);border:1px solid var(--line);border-radius:12px;margin-bottom:.6rem;overflow:hidden} .sset>summary{display:flex;align-items:center;gap:.7rem;padding:.8rem .85rem;cursor:pointer;list-style:none;user-select:none} .sset>summary::-webkit-details-marker{display:none} .sset-ic{font-size:1.3rem;flex:0 0 auto;width:2rem;text-align:center} .sset-tx{flex:1;min-width:0;display:flex;flex-direction:column} .sset-tt{font-weight:800;color:var(--ink);font-size:.98rem} .sset-sub{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sset-chev{flex:0 0 auto;color:var(--muted);transition:transform .2s} .sset[open]>summary .sset-chev{transform:rotate(180deg)} .sset[open]>summary{border-bottom:1px solid var(--line)} .sset>summary:hover{background:var(--card)} .sset-body{padding:.85rem} .sset-body .field:last-child{margin-bottom:0} .daypick{display:flex;flex-wrap:wrap;gap:.35rem} /* flex-wrap als Netz: steht der Text ausnahmsweise NICHT in einem , rutschen die Stuecke wenigstens untereinander statt zu schmalen Spalten gequetscht aus dem Bild zu laufen. */ .ck-line{display:flex;align-items:flex-start;flex-wrap:wrap;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--ink);margin:0;cursor:pointer} .ck-line input{width:auto;flex:0 0 auto;margin-top:.15rem} /* Text als EIN Flex-Kind: sonst wird jedes Wort und jeder Link ein eigenes Kaestchen und die Zeile bricht mitten im Satz auseinander. */ /* flex:1 1 0 (Basis NULL), nicht 1 1 auto: mit „auto" rechnet der Browser mit der vollen Textbreite, der Text passt neben dem Kästchen nicht mehr hin und rutscht auf eine eigene Zeile – das Kästchen stand dann allein und mittig darüber. Mit Basis 0 nimmt der Text einfach den Rest der Zeile. */ .ck-line>span{flex:1 1 0;min-width:0;line-height:1.5;font-weight:500} /* ---- Live-Abholung: großer "Wann rausgehen?"-Banner + Verkehr-Knopf ---- */ .live-hero{display:flex;align-items:center;gap:.8rem;background:var(--card2);border:1px solid var(--line); border-radius:12px;padding:.75rem .9rem;margin:.2rem 0 .7rem} .live-hero.go{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 50%,transparent);animation:hero-pulse 1.4s ease-in-out infinite} @keyframes hero-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 35%,transparent)}50%{box-shadow:0 0 0 8px transparent}} .lh-ic{font-size:2rem;flex:0 0 auto} .lh-big{font-size:1.15rem;font-weight:800;color:var(--ink);line-height:1.15} .live-hero.go .lh-big{color:var(--good)} .lh-sub{font-size:.82rem;color:var(--muted);margin-top:.1rem} .live-traffic-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.6rem; padding:.7rem;border-radius:11px;background:linear-gradient(135deg,#35c07d,#2aa568);color:#fff; font-weight:700;text-decoration:none;font-size:.95rem} .live-traffic-btn:hover{filter:brightness(1.06)} /* Live-Karte (Leaflet + OpenStreetMap) */ .btnlink{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-weight:700; font-size:.92rem;padding:.6rem 1rem;border-radius:12px;text-align:center} .btnlink:hover{filter:brightness(1.06)} /* Karte: auf dem Handy fast quadratisch (man sieht mehr Umgebung), auf großen Screens sinnvoll gedeckelt statt breiter Streifen. Feste Pixelhöhe = Leaflet-sicher. */ .live-map{width:100%;height:clamp(320px,90vw,480px);border:1px solid var(--line);border-radius:18px;overflow:hidden; background:var(--card2);position:relative;isolation:isolate} .lm-car,.lm-pin,.lm-you{display:flex;align-items:center;justify-content:center;line-height:1; background:none;border:none;filter:drop-shadow(0 2px 3px rgba(var(--sh),.55))} .lm-car{font-size:30px} .lm-pin,.lm-you{font-size:26px} .leaflet-container{background:var(--card2);font-family:inherit} .leaflet-control-attribution{font-size:9px;background:rgba(var(--sh),.45);color:var(--muted)} .leaflet-control-attribution a{color:var(--muted)} .leaflet-bar{border-radius:12px;overflow:hidden} .leaflet-bar a{background:var(--card);color:var(--ink);border-color:var(--line)} .leaflet-bar a:hover{background:var(--card2)} .leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--card);color:var(--ink)} .leaflet-popup-content-wrapper{border-radius:12px} /* „Zentrieren"-Knopf auf der Karte */ .lm-recenter{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:var(--card); color:var(--ink);font-size:1.05rem;cursor:pointer;box-shadow:0 2px 8px rgba(var(--sh),.35);display:grid;place-items:center;padding:0} .lm-recenter:hover{background:var(--card2);border-color:var(--brand)} /* Lade-Overlay (drehender Reifen) + Offline-Hinweis auf der Karte */ .lm-loading{position:absolute;inset:0;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.5rem;background:var(--card2);color:var(--muted);font-size:.9rem} .lm-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:500;max-width:88%; background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.5rem .8rem;font-size:.82rem;color:var(--muted);text-align:center} /* ---- Reifen-Ladeanzeige (Spinner) ---- */ .tire{display:inline-block;font-size:1.8rem;line-height:1;animation:tire-spin 1s linear infinite;will-change:transform} @keyframes tire-spin{to{transform:rotate(360deg)}} #app-loader{position:fixed;left:50%;bottom:calc(1.1rem + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(8px); z-index:120;display:none;align-items:center;gap:.55rem;background:var(--card);border:1px solid var(--line); border-radius:999px;padding:.5rem .95rem .5rem .7rem;box-shadow:var(--shadow);color:var(--ink); font-size:.88rem;font-weight:600;opacity:0;transition:opacity .18s ease,transform .18s ease} #app-loader.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0)} #app-loader .tire{font-size:1.35rem} #app-loader .al-tx{color:var(--muted);font-weight:600} @media(prefers-reduced-motion:reduce){.tire{animation-duration:2.4s}} /* ---- Slots ---- */ .dateline{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap} .dateline .day{font-weight:700;font-size:1rem} .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem} .slot{border:1px solid var(--line);border-radius:11px;padding:.75rem .8rem;background:var(--card2); display:flex;flex-direction:column;gap:.35rem} .slot .time{font-weight:700;font-variant-numeric:tabular-nums;font-size:1.02rem} .slot .dur{font-size:.75rem;color:var(--muted)} .slot.free{background:var(--free);border-color:var(--free-b)} .slot.booked{background:var(--booked);border-color:var(--booked-b)} .slot.blocked,.slot.closed,.slot.past,.slot.toofar,.slot.offered{background:var(--field);color:var(--muted)} .slot .tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em} .slot .tag.g{color:var(--good)}.slot .tag.b{color:var(--brand)}.slot .tag.x{color:var(--muted)} .slot button{margin-top:.2rem;padding:.4rem} /* ---- Buchungs-Liste ---- */ .blist{display:flex;flex-direction:column;gap:.6rem} .bitem{display:flex;align-items:center;justify-content:space-between;gap:.8rem; border:1px solid var(--line);border-radius:11px;padding:.7rem .9rem;background:var(--card2)} .bitem.warm{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent)} .bitem .when{font-weight:700;font-variant-numeric:tabular-nums} .bitem .meta{font-size:.82rem;color:var(--muted)} .badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:20px} .type-badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.15rem .55rem;border-radius:20px; border:1px solid transparent;white-space:nowrap} .tour-dots{display:flex;gap:.4rem;justify-content:center;margin:1rem 0 .2rem} .tour-dots span{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.2s} .tour-dots span.on{background:var(--brand);width:22px;border-radius:5px} /* Ausbildungskarte */ .modal.wide{max-width:640px} .tc-sec{border:1px solid var(--line);border-radius:10px;margin-bottom:.5rem;background:var(--card2)} .tc-sec>summary{cursor:pointer;padding:.6rem .8rem;font-weight:700;font-size:.9rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:.5rem} .tc-sec>summary::-webkit-details-marker{display:none} .tc-sec[open]>summary{border-bottom:1px solid var(--line)} .tc-items{display:grid;grid-template-columns:1fr 1fr;gap:.1rem .8rem;padding:.5rem .8rem .7rem} @media(max-width:560px){.tc-items{grid-template-columns:1fr}} .tc-item{display:flex;align-items:flex-start;gap:.5rem;font-size:.86rem;font-weight:500;color:var(--ink);margin:0;padding:.25rem 0;cursor:pointer} .tc-item input{width:auto;margin-top:.15rem;flex:none} .tc-item.ro{cursor:default;color:var(--muted)} .tc-item.ro.on{color:var(--ink)} .adk-next{background:var(--good-bg);border:1px solid color-mix(in srgb,var(--good) 35%,transparent);border-radius:11px;padding:.6rem .8rem;margin:0 0 .7rem} .adk-next.done{text-align:center;font-weight:700;color:var(--good)} .adk-next-t{font-weight:800;font-size:.85rem;color:var(--good)} .adk-next ul{margin:.35rem 0 0;padding-left:1.2rem;line-height:1.7;font-size:.9rem;color:var(--ink)} /* Fahrschüler-Liste: am Handy Karten statt breiter Tabelle */ @media(max-width:760px){ #s-list table,#s-list tbody,#s-list tr,#s-list td{display:block;width:auto} #s-list thead,#s-list tr>th{display:none} #s-list tr[data-search]{border:1px solid var(--line);border-radius:12px;background:var(--card2); margin-bottom:.8rem;padding:.7rem .85rem} #s-list td{border:none!important;padding:.4rem 0} #s-list td.s-name-cell{padding-top:0;font-size:1.02rem} #s-list td.s-name-cell strong{font-size:1.05rem} #s-list td[data-label]::before{content:attr(data-label);display:block;font-size:.68rem; text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:.2rem} #s-list td[data-label]:not(:last-child){border-bottom:1px solid var(--line)!important;padding-bottom:.55rem} } .badge.schalt{background:rgba(150,110,220,.2);color:#b79cf0} .badge.automatik{background:rgba(50,160,220,.2);color:#6fc3f0} .badge.done{background:var(--good-bg);color:var(--good)} .badge.booked{background:var(--booked);color:var(--brand)} .badge.offer{background:var(--warn-bg);color:var(--warn)} .badge.reserved{background:rgba(230,150,58,.18);color:#f0b459} .pill{background:var(--chip);border-radius:20px;padding:.15rem .55rem;font-size:.75rem;color:var(--muted);font-weight:600} /* ---- Tacho ---- */ .gauge-wrap{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;justify-content:center} .gauge{text-align:center} .gauge .val{font-size:1.7rem;font-weight:800;margin-top:-.4rem} .gauge .cap{color:var(--muted);font-size:.82rem} .gauge .goal{font-size:.78rem;color:var(--muted)} .weekbars{display:flex;gap:.5rem;align-items:flex-end;height:90px;margin-top:.4rem} .weekbars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.25rem;height:100%} .weekbars .bar{width:70%;background:var(--brand);border-radius:5px 5px 0 0;min-height:3px;transition:height .3s} .weekbars .bar.today{background:var(--good)} .weekbars .lbl{font-size:.68rem;color:var(--muted)} /* ---- Tabellen / Codes ---- */ table{width:100%;border-collapse:collapse;font-size:.88rem} th,td{text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--line)} th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em} .codechip{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.05em; background:var(--field);padding:.2rem .5rem;border-radius:7px;color:var(--brand)} /* ---- Modal ---- */ .modal-bg{position:fixed;inset:0;background:rgba(4,7,11,.65);display:flex;align-items:center; justify-content:center;padding:1.2rem;z-index:90;backdrop-filter:blur(3px)} .modal{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:460px;width:100%; box-shadow:0 20px 60px rgba(var(--sh),.6);display:flex;flex-direction:column; max-height:88vh;max-height:calc(100dvh - 2rem);overflow:hidden} /* Inhalt scrollt; die Aktionsleiste bleibt als fester Footer außen (kein Durchscheinen) */ .modal-body{padding:1.4rem;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto} .modal h3{margin:0 0 1rem} .modal .actions{display:flex;gap:.6rem;justify-content:flex-end;flex:0 0 auto; padding:1rem 1.4rem;background:var(--card);border-top:1px solid var(--line)} .modal .warnbox{background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn); padding:.7rem .9rem;border-radius:10px;font-size:.86rem;margin-bottom:.4rem} /* ---- Toast ---- */ .toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:100; background:var(--surface);color:#fff;padding:.7rem 1.1rem;border-radius:10px;font-size:.9rem; box-shadow:0 8px 30px rgba(var(--sh),.5);max-width:90vw;border:1px solid var(--line)} .toast.err{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 50%,transparent);color:var(--bad)} .toast.ok{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 50%,transparent);color:var(--good)} /* ---- Tab-Nav Fahrlehrer ---- */ .navtabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem} .navtabs button{background:var(--card);color:var(--muted);border:1px solid var(--line)} .navtabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)} .hint{font-size:.82rem;color:var(--muted);margin:.3rem 0 .8rem} .inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} /* ---- Begrüßung + freundliche Leer-Zustände (Fahrschüler) ---- */ .greet{font-size:.95rem;color:var(--muted);margin:0 0 .35rem} .greet strong{color:var(--ink)} .greet-big{font-size:1.35rem;font-weight:800;color:var(--ink);margin:.1rem 0 .8rem;line-height:1.2} .greet-big strong{color:var(--brand)} /* Nächste Fahrstunde – prominenter Hero */ .next-hero{display:flex;align-items:center;gap:.8rem;margin:0 0 1rem;padding:.9rem 1rem;border-radius:14px; background:linear-gradient(135deg,rgba(77,141,255,.18),rgba(77,141,255,.06));border:1px solid var(--booked-b)} .nh-ic{font-size:2rem;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(var(--sh),.3))} .nh-body{flex:1;min-width:0} .nh-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} .nh-when{font-size:1.1rem;font-weight:800;color:var(--ink);line-height:1.2;margin:.1rem 0} .nh-time{font-size:.86rem;color:var(--muted)} .nh-count{flex:0 0 auto;background:linear-gradient(var(--brand),var(--brand-dark));color:#fff; font-weight:800;font-size:.82rem;padding:.4rem .7rem;border-radius:20px;text-align:center;white-space:nowrap} .empty-book{grid-column:1/-1;text-align:center;background:var(--card2);border:1px dashed var(--line); border-radius:14px;padding:1.4rem 1rem 1.5rem;margin-top:.4rem} .empty-book .eb-icon{font-size:2.4rem;line-height:1;margin-bottom:.4rem} .empty-book .eb-title{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.3rem} .empty-book .eb-text{font-size:.9rem;color:var(--muted);line-height:1.55;margin:0 auto .9rem;max-width:34ch} .empty-book button{font-size:1rem;padding:.7rem 1.1rem} .slots-hint{grid-column:1/-1;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap; justify-content:center;background:var(--card2);border:1px solid var(--line); border-radius:11px;padding:.75rem .9rem;color:var(--muted);font-size:.88rem;margin-top:.2rem} /* ---- Sammel-Eintragen (Fahrlehrer) ---- */ .bulk-help{background:var(--card2);border:1px solid var(--line);border-radius:11px; padding:.7rem .85rem;margin:.2rem 0 .7rem;font-size:.86rem} .bulk-help .bh-row{display:flex;gap:.6rem;align-items:baseline;padding:.15rem 0} .bulk-help .bh-k{color:var(--muted);min-width:5.5rem;flex-shrink:0} .bulk-help code{background:var(--bg2);border:1px solid var(--line);border-radius:6px; padding:.1rem .4rem;font-size:.85rem;color:var(--ink)} .bulk-names{margin:0 0 .7rem;font-size:.85rem} .bulk-names summary{cursor:pointer;color:var(--brand)} .bulk-names .bn-list{margin-top:.4rem;color:var(--muted);line-height:1.7} #bk-text{width:100%;font-family:inherit;font-size:1rem;line-height:1.5;resize:vertical} .bulk-summary{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0 .6rem} .bulk-list{display:flex;flex-direction:column;gap:.4rem;max-height:38vh;overflow-y:auto; margin-bottom:.3rem;-webkit-overflow-scrolling:touch} .bulk-row{display:flex;gap:.6rem;align-items:flex-start;background:var(--card2); border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;font-size:.9rem} .bulk-row.ok{border-color:var(--good-b,#2c6b46)} .bulk-row.error{border-color:var(--bad-b,#7a3b3b)} .bulk-row .br-ic{font-size:1rem;line-height:1.3} .bulk-row .br-msg{font-size:.78rem;color:var(--muted);margin-top:.1rem} .bulk-row .br-msg.error{color:var(--bad)} .bulk-past{display:flex;gap:.5rem;align-items:flex-start;font-size:.86rem;margin:.2rem 0 .3rem;line-height:1.4;cursor:pointer} .bulk-past input{width:auto;margin-top:.15rem;flex-shrink:0} /* ---- Segmentierte Auswahl (Arbeitszeiten: Kürzer / Frei / Urlaub) ---- */ .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.2rem 0 1rem} .seg button{display:flex;flex-direction:column;align-items:center;gap:.15rem;background:var(--card2); color:var(--ink);border:1px solid var(--line);border-radius:13px;padding:.75rem .4rem;text-align:center} .seg button .seg-ic{font-size:1.5rem;line-height:1} .seg button .seg-lb{font-weight:700;font-size:.92rem} .seg button .seg-sub{font-size:.72rem;color:var(--muted)} .seg button.active{background:linear-gradient(var(--brand),var(--brand-dark));border-color:var(--brand)} .seg button.active .seg-lb,.seg button.active .seg-sub{color:#fff} /* ---- Mini-Kalender: mehrere Tage antippen (Frei/Urlaub) ---- */ .minical{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.7rem} .mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;font-size:.98rem} .mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.32rem} .mc-wd{margin-bottom:.28rem} .mc-wd span{text-align:center;font-size:.7rem;color:var(--muted);font-weight:700} .mc-empty{aspect-ratio:1} .mc-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:11px; border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;font-size:1rem;padding:0;min-height:42px} .mc-day.today{box-shadow:inset 0 0 0 2px var(--brand)} .mc-day.sel{background:linear-gradient(var(--brand),var(--brand-dark));border-color:var(--brand);color:#fff} .mc-day:disabled{color:var(--muted);opacity:.32;cursor:default} .mc-day:not(:disabled):active{transform:scale(.94)} /* ---- Buchungs-Kalender (Ampel: grün frei / rot ausgebucht) ---- */ .bcal{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.7rem;margin:.2rem 0 1rem} .bcal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;font-size:.98rem} .bcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.32rem} .bcal-wd{margin-bottom:.28rem} .bcal-wd span{text-align:center;font-size:.7rem;color:var(--muted);font-weight:700} .bcal-empty{aspect-ratio:1} .bcal-day{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink); font-weight:700;font-size:1rem;padding:0;min-height:42px;line-height:1} .bcal-day .bc-free{font-size:.72rem;font-weight:800;letter-spacing:-.01em;margin-top:1px} .bcal-day.free{background:color-mix(in srgb,var(--good) 18%,transparent);border-color:color-mix(in srgb,var(--good) 50%,transparent)} .bcal-day.free .bc-free{color:var(--good)} .bcal-day.full{background:color-mix(in srgb,var(--bad) 16%,transparent);border-color:color-mix(in srgb,var(--bad) 42%,transparent);color:var(--bad)} .bcal-day.toofar{color:var(--muted);opacity:.7} .bcal-day.closed,.bcal-day.past{color:var(--muted);opacity:.32} .bcal-day.today{box-shadow:inset 0 0 0 2px var(--brand)} .bcal-day.sel{outline:2px solid var(--brand);outline-offset:1px} .bcal-day:disabled{cursor:default} .bcal-day:not(:disabled):active{transform:scale(.94)} .bcal-legend{display:flex;gap:1rem;justify-content:center;margin-top:.6rem;font-size:.72rem;color:var(--muted);flex-wrap:wrap} .bcal-legend i.lg{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:.25rem} .bcal-legend i.lg.free{background:color-mix(in srgb,var(--good) 60%,transparent)} .bcal-legend i.lg.full{background:color-mix(in srgb,var(--bad) 55%,transparent)} .bcal-legend i.lg.off{background:var(--line)} /* ---- Profilfoto / Avatare ---- */ .pf-photo{display:flex;gap:.9rem;align-items:center;margin:.2rem 0 1rem} .pf-avatar{width:76px;height:76px;border-radius:50%;overflow:hidden;flex-shrink:0; background:var(--card2);border:1px solid var(--line);display:flex;align-items:center; justify-content:center;font-size:1.6rem;font-weight:800;color:var(--muted)} .pf-avatar img{width:100%;height:100%;object-fit:cover;display:block} .pf-photo-actions{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start} .pf-filebtn{display:inline-flex;align-items:center;cursor:pointer;margin:0} /* Profil-Kopf: großes Avatar mit Kamera-Badge, Name groß */ .pf-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin:.2rem 0 1rem} .pf-avatar-lg{position:relative;width:104px;height:104px;margin-bottom:.6rem} .pf-av-inner{display:flex;width:100%;height:100%;border-radius:50%;overflow:hidden; background:var(--card2);border:2px solid var(--line);align-items:center;justify-content:center; font-size:2.2rem;font-weight:800;color:var(--muted)} .pf-av-inner img{width:100%;height:100%;object-fit:cover;display:block} .pf-cam{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%; background:linear-gradient(var(--brand),var(--brand-dark));color:#fff;display:flex;align-items:center; justify-content:center;cursor:pointer;border:2px solid var(--card);font-size:1rem} .pf-name-big{font-size:1.25rem;font-weight:800;color:var(--ink);line-height:1.2} .pf-user{margin-top:.4rem} .pf-privacy{background:var(--card2);border:1px solid var(--line);border-radius:10px; padding:.55rem .8rem;font-size:.83rem;color:var(--muted);margin:0 0 1rem;text-align:center} /* Profil-Karte oben (ein-/ausklappbar, kein Popup) */ .pfc-head{display:flex;align-items:center;gap:.7rem;cursor:pointer} .pfc-av{display:flex;width:48px;height:48px;flex:0 0 48px;border-radius:50%;overflow:hidden; background:var(--card2);border:2px solid var(--line);align-items:center;justify-content:center; font-size:1.05rem;font-weight:800;color:var(--muted)} .pfc-av img{width:100%;height:100%;object-fit:cover;display:block} .pfc-meta{flex:1;min-width:0} .pfc-name{font-weight:800;color:var(--ink);font-size:1.02rem;line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pfc-sub{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pfc-body{margin-top:.2rem} /* Profil-Abschnitte (Persönliches / Adresse / Kontakt / Zugang) */ .pf-sec{background:var(--card2);border:1px solid var(--line);border-radius:12px; padding:.7rem .8rem .3rem;margin:0 0 .7rem} .pf-sec-h{font-size:.82rem;font-weight:800;color:var(--brand);text-transform:uppercase; letter-spacing:.03em;margin:0 0 .5rem} .pf-sec .field{margin-bottom:.55rem} .pf-sec .row{gap:.55rem} .pf-danger{margin-top:1rem;border:1px solid var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,transparent);border-radius:12px;background:color-mix(in srgb,var(--bad) 8%,transparent);padding:.75rem .85rem} .pf-danger .pf-sec-h{color:var(--bad)} .geo-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.65rem; border-radius:10px;background:var(--card);border:1px dashed var(--brand);color:var(--brand);font-weight:700;cursor:pointer} .geo-btn:hover{background:var(--card2)} .geo-btn:disabled{opacity:.6;cursor:default} /* Was ist neu? */ .wn-block{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:.7rem .8rem;margin-bottom:.6rem} .wn-h{font-size:.95rem;margin-bottom:.35rem} .wn-v{display:inline-block;background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;border-radius:6px;padding:.1rem .4rem;margin-right:.2rem} .wn-list{margin:0;padding-left:1.1rem;line-height:1.7;font-size:.9rem} .edge-handle.hasnew::after{content:'';position:absolute;top:11px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%; background:var(--brand);box-shadow:0 0 0 3px rgba(242,160,26,.16),0 0 9px -1px var(--brand);animation:edgePulse 2.6s ease-in-out infinite} @keyframes edgePulse{0%,100%{opacity:.5}50%{opacity:1}} @media (prefers-reduced-motion: reduce){.edge-handle.hasnew::after{animation:none;opacity:.8}} #pf-age{text-align:center;font-weight:700;color:var(--ink);background:var(--card)} .mini-avatar{display:inline-flex;width:30px;height:30px;border-radius:50%;overflow:hidden; vertical-align:middle;margin-right:.45rem;background:var(--card2);border:1px solid var(--line); align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:var(--muted)} .mini-avatar img{width:100%;height:100%;object-fit:cover;display:block} /* ---- Angebot abgeben: anonym / mit Vorname ---- */ .offer-choice{display:flex;flex-direction:column;gap:.5rem;margin:.3rem 0 .2rem} .offer-choice button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem; text-align:left;padding:.7rem .9rem;line-height:1.3} .offer-choice .oc-sub{font-size:.78rem;color:var(--muted);font-weight:400} /* ---- Fortschritts-Karte (Rang & Sonderfahrten) ---- */ .progress-card{background:var(--card2);border:1px solid var(--line);border-radius:13px;padding:.85rem .95rem;margin-bottom:1rem} .pc-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem} .rank-badge{display:inline-flex;align-items:center;gap:.3rem;font-weight:800;font-size:.95rem; background:linear-gradient(var(--brand),var(--brand-dark));color:#fff;padding:.3rem .7rem;border-radius:20px} .rank-badge.r2{background:linear-gradient(var(--good),#2aa568)} .pc-drives{font-size:.9rem;color:var(--muted)} .pc-drives strong{color:var(--ink);font-size:1.05rem} .pc-block{margin-bottom:.8rem} .pc-adk{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin-top:.9rem; padding:.65rem;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:700} .pc-adk:hover{background:var(--card2);border-color:var(--brand)} .pc-line{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;margin-bottom:.35rem} .pbar{height:9px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;overflow:hidden} .pbar>div{height:100%;border-radius:6px;transition:width .4s ease;min-width:2px} .pc-sonder-title{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 .5rem} .pc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .pc-tile{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center; background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .4rem .6rem} .pc-tile{border-color:color-mix(in srgb, var(--tc) 45%, var(--line))} .pc-tile-ic{font-size:1.5rem;line-height:1} .pc-tile-lb{font-size:.76rem;font-weight:700;line-height:1.1} .pc-tile-count{font-size:.8rem;font-weight:800;color:var(--muted);margin-bottom:.15rem} .pc-tile .pbar{width:100%} .pc-tile.done{background:var(--good-bg);border-color:var(--good-b,color-mix(in srgb,var(--good) 50%,transparent))} .pc-tile.done .pc-tile-count{color:var(--good)} /* ---- Rückmeldung/Vermerk zur Fahrstunde ---- */ .lesson-fb{margin-top:.4rem;background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--brand); border-radius:8px;padding:.5rem .7rem;font-size:.88rem;color:var(--ink);line-height:1.5} /* ---- Abholung / Live-Standort ---- */ /* „Meine Fahrstunden" – tabellarische Historie */ .ml-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px} .ml-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:520px} .ml-table th{background:var(--card2);color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em; text-align:left;padding:.5rem .6rem;position:sticky;top:0} .ml-table td{padding:.55rem .6rem;border-top:1px solid var(--line);vertical-align:top} .ml-table tr:nth-child(even) td{background:color-mix(in srgb,var(--sheen) 10%,transparent)} .ml-when strong{color:var(--ink)} .ml-drovelbl{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.06rem} .ml-entry{display:block;font-size:.72rem;color:var(--warn);margin-top:.15rem} .ml-entry.ml-time{color:var(--muted)} .ml-entry.ml-both{color:var(--good);font-weight:600} .sign-time{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.5rem .75rem;margin:.5rem 0;font-size:.9rem} .ml-note{color:var(--muted);max-width:260px} .ml-noshow td{opacity:.7} /* Am Handy: keine seitliche Tabelle – jede Fahrstunde als Karte, alles untereinander */ @media(max-width:560px){ .ml-wrap{overflow:visible;border:none;border-radius:0} .ml-table{min-width:0} .ml-table thead{display:none} .ml-table,.ml-table tbody{display:block} .ml-table tr{display:block;border:1px solid var(--line);border-radius:14px;background:var(--card2); padding:.6rem .8rem;margin-bottom:.55rem} .ml-table tr:nth-child(even) td{background:none} .ml-table td{display:flex;gap:.6rem;border:none;padding:.18rem 0;font-size:.92rem} .ml-table td:empty{display:none} .ml-table td::before{content:attr(data-label);color:var(--muted);font-size:.7rem;text-transform:uppercase; letter-spacing:.03em;min-width:92px;flex:0 0 auto;padding-top:.15rem} /* „Wann"-Zelle: alles untereinander stapeln (Datum, Vermerke) statt in einer Reihe – sonst läuft langer Text seitlich über. */ .ml-table td.ml-when{flex-direction:column;gap:.1rem;padding-bottom:.35rem} .ml-table td.ml-when::before{min-width:0;padding-top:0} .ml-table td, .ml-table td *{min-width:0} .ml-entry, .ml-when strong{white-space:normal;overflow-wrap:anywhere} .ml-note{max-width:none} } .pickup-box{background:var(--card2);border:1px solid var(--line);border-radius:12px; padding:.75rem .85rem;margin:.7rem 0} .pickup-box .pb-line{font-size:.95rem} .pickup-box .pb-line strong{color:var(--ink)} .pickup-box .pk-locked{color:var(--ink);opacity:.85} /* Cockpit-Navigation: Abhol-Status je Fahrschüler */ .pu-badge{display:inline-block;margin-top:.3rem;font-size:.82rem;font-weight:600; padding:.15rem .5rem;border-radius:999px;border:1px solid var(--line);background:var(--card2);color:var(--ink)} .pu-badge .muted{font-weight:400} .pu-badge.pu-fix{border-color:rgba(44,107,70,.5);background:var(--good-bg);color:var(--good)} .pu-badge.pu-live{border-color:rgba(230,147,77,.5);background:rgba(230,147,77,.14)} .pu-badge.pu-flex{border-color:rgba(230,147,77,.45);background:rgba(230,147,77,.1)} /* 🧾 Nachweise: Zeitraum-Filter */ .ml-filter{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:var(--card2); border:1px solid var(--line);border-radius:12px;padding:.5rem .7rem;margin:.3rem 0 .5rem} .ml-filter-t{font-weight:700;color:var(--ink);font-size:.9rem} .ml-filter label{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--muted)} .ml-filter input[type=date]{padding:.25rem .4rem;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink)} .ml-filter-n{font-size:.82rem;margin-left:auto} @media(max-width:560px){ .ml-filter{align-items:stretch} .ml-filter-t{width:100%} .ml-filter label{flex:1 1 46%;justify-content:space-between} .ml-filter input[type=date]{flex:1;min-width:0} .ml-filter-n{margin-left:0;width:100%} } /* 📍 Fehlerbuch / Lernpunkte – Erfassung (Fahrlehrer) */ .lp-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0} .lp-chip{background:var(--card2);border:1px solid var(--line);color:var(--ink);border-radius:999px; padding:.3rem .6rem;font-size:.82rem;cursor:pointer} .lp-chip:active{background:rgba(230,147,77,.18);border-color:var(--brand,#e6934d)} .lp-photos{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0} .lp-thumb{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line)} .lp-thumb img{width:100%;height:100%;object-fit:cover;display:block} .lp-del{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;border:0; background:rgba(var(--sh),.6);color:#fff;font-size:.8rem;line-height:1;cursor:pointer} .lp-list{display:flex;flex-direction:column;gap:.4rem;margin:.3rem 0} .lp-row{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:var(--card2); border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem;cursor:pointer;color:var(--ink)} .lp-row-ic{font-size:1.1rem;flex:none} .lp-row-tx{display:flex;flex-direction:column;min-width:0;flex:1} .lp-row-tx .muted{font-size:.78rem} .lp-row-go{color:var(--muted);flex:none} .lp-btn{background:rgba(214,64,64,.16);border:1px solid rgba(214,64,64,.5);color:var(--ink)} /* 📖 Fehlerbuch (Schüler) */ .fb-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem} .fb-item{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem} .fb-when{font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:.25rem} .fb-text{color:var(--ink);line-height:1.45;white-space:normal} .fb-photos{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem} .fb-ph{width:88px;height:88px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:pointer} .fb-map{margin-top:.55rem} /* Kurzfristige Absage (75 %) – klarer Warnhinweis */ .cx-late{background:rgba(214,64,64,.13);border:1px solid rgba(214,64,64,.5);color:var(--ink); border-radius:12px;padding:.7rem .85rem;margin:.5rem 0;font-size:.95rem;line-height:1.45} .cx-late strong{color:#e0603c} /* Fahrstunde verschieben (Schüler) */ .rs-box{background:rgba(230,147,77,.14);border:1px solid rgba(230,147,77,.5);color:var(--ink); border-radius:10px;padding:.5rem .7rem;font-size:.9rem;margin:.4rem 0} .rs-steps{margin:.3rem 0 .2rem;padding-inline-start:1.3rem;display:flex;flex-direction:column;gap:.5rem} .rs-steps li{color:var(--ink);line-height:1.4} .rs-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:1200; max-width:min(560px,94vw);display:flex;align-items:center;gap:.7rem; background:var(--brand,#e6934d);color:#fff;border-radius:14px;padding:.7rem .9rem; box-shadow:0 8px 28px rgba(var(--sh),.28);font-size:.92rem;font-weight:600} .rs-banner .sec{background:var(--sheen);color:#fff;border:0;flex:none} .rsq-gap{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 .2rem} /* Erst-Login: Abhol-Modus wählen */ .pk-modes{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0 .2rem} .pk-mode{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--line);border-radius:12px; padding:.65rem .75rem;cursor:pointer;background:var(--card2);transition:border-color .15s,background .15s} .pk-mode:hover{border-color:var(--brand,#e6934d)} .pk-mode.sel{border-color:var(--brand,#e6934d);background:rgba(230,147,77,.1)} .pk-mode input{margin-top:.2rem;flex:none} .pk-mode strong{color:var(--ink)} .pk-mode .hint{margin:.15rem 0 0} /* Beruhigender Status (planmäßig / etwas später) */ .run-status{display:flex;align-items:flex-start;gap:.6rem;border-radius:12px;padding:.7rem .85rem; margin:0 0 .7rem;font-size:1.4rem;line-height:1.3} .run-status div{font-size:.95rem;color:var(--ink)} .run-status div span{color:var(--muted);font-size:.9rem} .run-status.ok{background:var(--good-bg);border:1px solid var(--good-b,#2c6b46)} .run-status.late{background:rgba(230,147,77,.14);border:1px solid rgba(230,147,77,.5)} /* Freundliche Abhol-Frage (~1 h vorher) */ .pickup-ask{margin:.2rem 0 .1rem} .pickup-ask .pa-q{font-size:1.05rem;font-weight:700;color:var(--ink)} /* ---- Ankunfts-Ansage & Fahrstunden-Timer ---- */ .eta-row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.6rem 0} .announce{background:var(--good-bg);color:var(--good);border:1px solid var(--good-b,#2c6b46); border-radius:11px;padding:.6rem .85rem;font-size:1rem;margin:0 0 .7rem} .lesson-start{width:100%;font-size:1.15rem;padding:.9rem;font-weight:800} .lesson-timer{display:flex;flex-direction:column;align-items:center;gap:.1rem; background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:1rem 1rem 1.1rem} .lesson-timer .lt-clock{font-size:3rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--brand)} .lesson-timer .lt-sub{font-size:.85rem;color:var(--muted)} .lesson-timer.done .lt-clock{font-size:2rem;color:var(--good)} .lt-bar{height:10px;background:var(--card2);border:1px solid var(--line);border-radius:6px; overflow:hidden;margin-top:.7rem} .lt-bar>div{height:100%;background:var(--brand);transition:width 1s linear} /* ---- Reservierte Termine (Hinweis oben in der Wochenkarte) ---- */ .reserve-note{background:rgba(230,150,58,.12);border:1px solid rgba(230,150,58,.35); color:#f0c07a;border-radius:11px;padding:.6rem .85rem;font-size:.9rem;margin:0 0 .9rem;line-height:1.5} .reserve-note strong{color:#ffd9a0} .resv-due{margin-top:.3rem;font-size:.82rem;color:#f0b459;line-height:1.4} .resv-due strong{color:#ffd9a0} /* KI-Planer */ .pl-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem;font-size:.95rem} .pl-head button{margin-left:auto} .pl-list{display:flex;flex-direction:column;gap:.9rem} .pl-day{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card2)} .pl-dh{background:var(--surface);padding:.5rem .8rem;font-weight:800;font-size:.88rem;color:var(--ink);border-bottom:1px solid var(--line)} .pl-row{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;cursor:pointer;border-top:1px solid rgba(40,50,63,.5)} .pl-row:first-of-type{border-top:none} .pl-row:hover{background:var(--surface-h)} .pl-row input[type=checkbox]{width:20px;height:20px} .pl-time{font-weight:800;font-variant-numeric:tabular-nums;min-width:3.2em} .pl-name{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pl-dur{color:var(--muted);font-size:.82rem} .pl-mode{font-size:.78rem;color:var(--muted);background:var(--chip);border:1px solid var(--line);border-radius:20px;padding:.15rem .55rem;white-space:nowrap;max-width:48%;overflow:hidden;text-overflow:ellipsis} .pl-mode.pick{color:#f0b459;border-color:rgba(230,150,58,.4);background:rgba(230,150,58,.1)} @media(max-width:560px){.pl-mode{max-width:40%}.pl-dur{display:none}} /* Auslastung / freie Zeiten */ .cap-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.2rem 0 1rem} .cap-tile{background:var(--card2);border:1px solid var(--line);border-radius:13px;padding:.7rem .6rem;text-align:center} .cap-tile b{display:block;font-size:1.5rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums} .cap-tile span{display:block;margin-top:.35rem;font-size:.72rem;color:var(--muted);line-height:1.25} .cap-tile.accent b{color:var(--brand)} .cap-tile.good b{color:var(--good)} @media(max-width:520px){.cap-tile b{font-size:1.2rem}.cap-tile span{font-size:.66rem}} .cap-list{display:flex;flex-direction:column;gap:.35rem} .cap-row{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:.5rem .7rem;color:var(--ink);cursor:pointer;transition:.12s} .cap-row:hover{background:var(--surface);border-color:var(--line-strong)} .cap-wd{flex:0 0 5.6em;font-weight:800;font-size:.9rem} .cap-wd em{font-style:normal;color:var(--brand);font-weight:700;font-size:.74rem} .cap-dt{display:block;color:var(--muted);font-weight:500;font-size:.72rem} .cap-bar{flex:1;height:9px;background:var(--field);border-radius:6px;overflow:hidden;min-width:40px} .cap-fill{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-dark));border-radius:6px} .cap-meta{flex:0 0 auto;font-size:.78rem;color:var(--muted);white-space:nowrap} .cap-free{color:var(--good);font-weight:700} .cap-full{color:var(--muted)} /* Vertrag & Monat */ .ct-big{margin:.2rem 0 .1rem;font-size:1rem;color:var(--muted)} .ct-big b{font-size:2.1rem;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums} .ct-big .ct-sub{display:block;font-size:.8rem;margin-top:.1rem} .ct-meter{margin:1.3rem 0 1.1rem} .ct-track{position:relative;height:16px;background:var(--field);border:1px solid var(--line);border-radius:9px;overflow:visible} .ct-fill{position:absolute;left:0;top:0;bottom:0;border-radius:9px 0 0 9px;transition:width .5s ease} .ct-fill-lo{background:linear-gradient(90deg,#e6b23a,#d99a2a)} .ct-fill-ok{background:linear-gradient(90deg,#4d8dff,#3a6fd4)} .ct-fill-good{background:linear-gradient(90deg,#35c07d,#2aa568)} .ct-done{position:absolute;left:0;top:0;bottom:0;border-radius:9px 0 0 9px;background:var(--sheen);pointer-events:none} .ct-mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--muted);transform:translateX(-1px);border-radius:2px} .ct-mark.paid{background:var(--good);width:2.5px} .ct-mark.tgt{background:#fff;width:2.5px} .ct-scale{position:relative;height:1.1em;margin-top:.45rem} .ct-scale span{position:absolute;transform:translateX(-50%);font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .ct-lines{display:flex;flex-direction:column;gap:.4rem} .ct-line{display:flex;align-items:center;gap:.55rem;font-size:.9rem;background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:.5rem .7rem} .ct-line .ct-dot{flex:0 0 1.2em;text-align:center;color:var(--muted);font-weight:900} .ct-line.on .ct-dot{color:var(--good)} .ct-line .ct-lb{flex:1;min-width:0} .ct-line .ct-vl{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)} .ct-line.on .ct-vl{color:var(--good)} /* Tagesstatus */ .ds-banner{display:flex;gap:.7rem;align-items:flex-start;border-radius:14px;padding:.8rem .95rem;margin:0 0 .9rem;border:1px solid var(--line)} .ds-banner .ds-ic{font-size:1.5rem;line-height:1} .ds-banner .ds-t{font-weight:800} .ds-banner .ds-s{font-size:.86rem;color:var(--muted);margin-top:.1rem;line-height:1.45} .ds-ok{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 40%,transparent)} .ds-ok .ds-t{color:var(--good)} .ds-delay{background:rgba(230,150,58,.12);border-color:rgba(230,150,58,.4)} .ds-delay .ds-t{color:#f0b459} .ds-cur{display:flex;gap:.6rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:.65rem .8rem;background:var(--card2)} .ds-cur .ds-ic{font-size:1.4rem} .ds-cur.ds-ok{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 35%,transparent)} .ds-cur.ds-delay{background:rgba(230,150,58,.1);border-color:rgba(230,150,58,.35)} .ds-chips{display:flex;flex-wrap:wrap;gap:.4rem} .ds-chip{background:var(--chip);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:.4rem .8rem;font-size:.86rem;font-weight:600} .ds-chip:hover{background:var(--surface)} .ds-chip.on{background:var(--brand);color:#fff;border-color:var(--brand)} .ds-weather{display:flex;gap:.6rem;align-items:flex-start;margin-top:.7rem;padding:.7rem .85rem;border-radius:12px;background:rgba(91,155,255,.1);border:1px solid rgba(91,155,255,.38)} .ds-weather .ds-ic{font-size:1.4rem;line-height:1} .ds-weather .ds-t{font-weight:800;color:#8fb8ff} .ds-weather .ds-s{font-size:.85rem;color:var(--muted);margin-top:.1rem;line-height:1.45} .ds-weather.ds-jam{background:rgba(230,150,58,.12);border-color:rgba(230,150,58,.4);margin-top:.5rem} .ds-weather.ds-jam .ds-t{color:#f0b459} /* ---- Aussehen-Panel (Farbe, Schrift, Größe) ---- */ .ap-sec{padding:.9rem 0;margin:0;border-top:1px solid var(--line)} .ap-sec:first-of-type{border-top:none;padding-top:.2rem} .ap-label{font-size:.78rem;font-weight:800;color:var(--brand);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.03em} .ap-label .muted{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)} .ap-hint{font-size:.78rem;color:var(--muted);margin-top:.5rem;line-height:1.4} .tone-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap} .tone-sel{flex:1;min-width:180px;padding:.55rem .7rem;border-radius:11px;border:1px solid var(--line); background:var(--card2);color:var(--ink);font-size:.92rem;font-weight:600;appearance:none;-webkit-appearance:none;cursor:pointer} .tone-sel:focus{outline:2px solid var(--brand);outline-offset:1px} .ap-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .ap-fonts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .ap-swatches{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center} .ap-swatches button{padding:0;cursor:pointer;background:none} .ap-free{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; border:1px dashed var(--line);border-radius:50%;cursor:pointer;position:relative;font-size:.9rem} .ap-free input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0} /* ---- Kennzahl-Kacheln ---- */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem;margin-top:1rem} .tile{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:.8rem .9rem} .tile .n{font-size:1.5rem;font-weight:800} .tile .l{font-size:.76rem;color:var(--muted);margin-top:.1rem} .tile.good .n{color:var(--good)} .tile.bad .n{color:var(--bad)} .tile.brand .n{color:var(--brand)} /* ---- Legende ---- */ .legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.35rem;font-size:.8rem} .legend-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--card2);border:1px solid var(--line); border-radius:20px;padding:.15rem .6rem;font-weight:600} .legend-chip .sw{width:12px;height:12px;border-radius:3px;display:inline-block} /* ---- Monats-Kalender ---- */ .monthgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .m-head{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);padding:.2rem 0} .m-cell{min-height:74px;border:1px solid var(--line);border-radius:8px;padding:.3rem .35rem;background:var(--card2); cursor:pointer;display:flex;flex-direction:column;gap:.2rem;transition:.12s;overflow:hidden} .m-cell:hover{border-color:var(--brand);background:var(--chip)} .m-cell.out{opacity:.4} .m-cell.today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)} .m-cell.off{background:var(--field)} .m-day{font-size:.8rem;font-weight:700;display:flex;justify-content:space-between;align-items:center} .m-day .cnt{font-size:.66rem;font-weight:700;background:var(--brand);color:#fff;border-radius:20px;padding:0 .4rem;min-width:1.1rem;text-align:center} .m-tag{font-size:.62rem;color:var(--muted);font-weight:600} .m-dots{display:flex;flex-wrap:wrap;gap:2px;margin-top:auto} .m-dot{width:7px;height:7px;border-radius:50%} /* ---- Wochen-Zeitachse ---- */ .viewtoggle{display:inline-flex;background:var(--field);border-radius:9px;padding:.2rem;gap:.2rem} .viewtoggle button{background:transparent;color:var(--muted);padding:.35rem .8rem;font-size:.85rem;border-radius:7px} .viewtoggle button.active{background:var(--surface);color:var(--ink)} .weekwrap{overflow-x:auto} .weekgrid{display:grid;grid-template-columns:46px repeat(6,minmax(96px,1fr));min-width:660px;border:1px solid var(--line);border-radius:10px;overflow:hidden} .wk-head{padding:.4rem .3rem;text-align:center;font-size:.78rem;font-weight:700;border-bottom:1px solid var(--line);background:var(--field)} .wk-head.today{background:rgba(77,141,255,.18);color:var(--brand)} .wk-head .sub{display:block;font-weight:500;color:var(--muted);font-size:.68rem} .wk-head .daytag{display:block;font-weight:600;font-size:.64rem;margin-top:.1rem} .wk-corner{border-bottom:1px solid var(--line);background:var(--field)} .wk-body{position:relative;border-left:1px solid var(--line)} .wk-body.today{background:rgba(77,141,255,.05)} .wk-hour{height:42px;border-bottom:1px dashed var(--line)} .wk-times .wk-hour{position:relative} .wk-times .wk-hour span{position:absolute;top:-7px;right:.3rem;font-size:.66rem;color:var(--muted)} .wk-block{position:absolute;left:3px;right:3px;border-radius:6px;padding:.15rem .35rem;font-size:.7rem; overflow:hidden;cursor:pointer;color:#fff;box-shadow:0 1px 3px rgba(var(--sh),.35);line-height:1.15} .wk-block .t{font-weight:800;font-variant-numeric:tabular-nums} .wk-block.blk{background:repeating-linear-gradient(45deg,#5b4a2a,#5b4a2a 6px,#4d3f24 6px,#4d3f24 12px);cursor:default} .wk-block.closed{position:absolute;inset:0;background:var(--veil);cursor:default;border-radius:0; display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.72rem;font-weight:700} /* ---------- Edge-Menüs (Samsung-Edge-Stil: Griffe links & rechts) ---------- */ /* S8-artiger Edge-Griff: schlanke, glasige Lasche mit Grip-Linie und Brand-Glow */ /* Edle, schlanke Griffe: Milchglas-Kapsel mit feiner Gold-Griffleiste (kein Emoji-Ballast) */ .edge-handle{position:fixed;top:50%;transform:translateY(-50%);z-index:30;width:15px;height:76px; cursor:pointer;padding:0;color:transparent;font-size:0;line-height:0; border:1px solid color-mix(in srgb,var(--brand) 32%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 22%,transparent),color-mix(in srgb,var(--brand) 8%,transparent)); backdrop-filter:blur(9px) saturate(1.15);-webkit-backdrop-filter:blur(9px) saturate(1.15); box-shadow:0 4px 16px rgba(var(--sh),.32),inset 0 1px 0 var(--sheen); opacity:.72;transition:opacity .22s ease,background .22s ease,box-shadow .22s ease,border-color .22s ease} /* Hover/Fokus: nur heller + sanfter Schein – KEINE Größenänderung (kein Verschieben) */ .edge-handle:hover,.edge-handle:focus-visible{opacity:1;outline:none;border-color:rgba(242,160,26,.55); background:linear-gradient(180deg,rgba(242,160,26,.34),rgba(242,160,26,.15)); box-shadow:0 6px 22px rgba(var(--sh),.4),0 0 24px -8px var(--brand),inset 0 1px 0 color-mix(in srgb,var(--sheen) 150%,transparent)} .edge-handle.left{left:0;border-left:none;border-radius:0 15px 15px 0} .edge-handle.right{right:0;border-right:none;border-radius:15px 0 0 15px} /* schlanke, mittige Gold-Griffleiste */ .edge-handle::before{content:'';position:absolute;top:26px;bottom:26px;left:50%;width:2.5px;margin-left:-1.25px;border-radius:3px; background:linear-gradient(180deg,color-mix(in srgb,var(--sheen) 240%,transparent),var(--brand));opacity:.8} .edge-overlay{position:fixed;inset:0;z-index:39;background:radial-gradient(120% 80% at 50% 50%,rgba(4,7,11,.35),rgba(4,7,11,.64)); backdrop-filter:blur(5px) saturate(1.05);-webkit-backdrop-filter:blur(5px) saturate(1.05); opacity:0;pointer-events:none;transition:opacity .22s} .edge-root.open-left .edge-overlay,.edge-root.open-right .edge-overlay,.edge-root.open-both .edge-overlay{opacity:1;pointer-events:auto} /* Zentrales Schließen-X (nur sichtbar, wenn beide Menüs offen sind) */ .edge-x{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);z-index:44; width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:1.4rem;color:#fff;background:linear-gradient(150deg,var(--brand),var(--brand-dark)); border:2px solid color-mix(in srgb,var(--sheen) 80%,transparent);box-shadow:0 10px 30px rgba(var(--sh),.55),0 0 26px -6px var(--brand),inset 0 1px 0 color-mix(in srgb,var(--sheen) 135%,transparent); opacity:0;pointer-events:none;transition:.22s cubic-bezier(.34,1.56,.64,1)} .edge-root.open-both .edge-x{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)} .edge-x:hover{box-shadow:0 12px 34px rgba(var(--sh),.6),0 0 34px -3px var(--brand),inset 0 1px 0 color-mix(in srgb,var(--sheen) 155%,transparent)} .edge-panel{position:fixed;top:0;height:100%;width:min(86vw,330px);z-index:41;background:var(--edge-bg,var(--card)); border:1px solid var(--edge-line,var(--line)); box-shadow:0 0 55px rgba(var(--sh),.6),inset 0 70px 70px -70px var(--brand),inset 0 1px 0 color-mix(in srgb,var(--sheen) 36%,transparent); padding:1.15rem .85rem 1.5rem; display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:transform .26s cubic-bezier(.22,.61,.36,1)} .edge-panel .edge-title{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin:.15rem .15rem .7rem;display:flex;align-items:center;gap:.45rem} .edge-panel .edge-title::before{content:'';width:16px;height:2px;border-radius:2px;background:var(--brand);box-shadow:0 0 10px -1px var(--brand)} .edge-groupwrap{margin-bottom:1rem} .edge-group{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin:.3rem .3rem .45rem;opacity:.75} .edge-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.55rem} .edge-panel .edge-tile{position:relative;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.42rem;background:var(--edge-tile,var(--card2));color:var(--ink);border:1px solid var(--edge-line,var(--line)); border-radius:16px;padding:.95rem .45rem;min-height:84px;text-align:center;font-weight:600;min-width:0; box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sheen) 22%,transparent),0 6px 14px -12px rgba(var(--sh),.7); transition:transform .14s ease,border-color .14s,box-shadow .16s,background .16s} .edge-panel .edge-tile .et-ic{font-size:1.55rem;line-height:1;filter:drop-shadow(0 1px 2px rgba(var(--sh),.3))} .edge-panel .edge-tile .et-lb{font-size:.8rem;line-height:1.2;overflow-wrap:anywhere;hyphens:auto;max-width:100%} .edge-panel .edge-tile:hover{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset,0 6px 18px -12px rgba(var(--sh),.7)} .edge-panel .edge-tile:active{transform:scale(.97)} .edge-panel .edge-tile.active{background:linear-gradient(150deg,var(--brand),var(--brand-dark));border-color:var(--brand);box-shadow:0 10px 22px -10px var(--brand)} .edge-panel .edge-tile.active .et-lb,.edge-panel .edge-tile.active .et-ic{color:#fff} .edge-tile .et-badge:not(:empty){position:absolute;top:.4rem;right:.4rem} .edge-panel.left{left:0;transform:translateX(-102%);border-radius:0 24px 24px 0} .edge-panel.right{right:0;transform:translateX(102%);border-radius:24px 0 0 24px} .edge-root.open-left .edge-panel.left{transform:translateX(0)} .edge-root.open-right .edge-panel.right{transform:translateX(0)} .edge-root.open-both .edge-panel.left,.edge-root.open-both .edge-panel.right{transform:translateX(0)} .edge-root.open-left .edge-handle,.edge-root.open-right .edge-handle,.edge-root.open-both .edge-handle{opacity:0;pointer-events:none} /* Beide gleichzeitig offen: Panels schmaler, damit sie nebeneinander passen (Platz fürs ✕) */ .edge-root.open-both .edge-panel{width:min(46vw,300px)} @media(max-width:560px){ /* Beide Menüs offen: schmaler, aber immer zwei Kacheln nebeneinander */ .edge-root.open-both .edge-panel{width:48vw;padding:.85rem .4rem 1.4rem} .edge-root.open-both .edge-panel .edge-tiles{gap:.4rem} .edge-root.open-both .edge-panel .edge-tile{min-height:64px;padding:.55rem .3rem} .edge-root.open-both .edge-panel .edge-tile .et-ic{font-size:1.35rem} .edge-root.open-both .edge-panel .edge-tile .et-lb{font-size:.72rem} } /* PWA: schwebender "App installieren"-Button */ .pwa-install{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:60;background:var(--brand);color:#fff;border:none;border-radius:999px; padding:.7rem 1.2rem;font-weight:600;font-size:.95rem;width:auto; box-shadow:0 8px 24px rgba(var(--sh),.4);cursor:pointer} .pwa-install:hover{background:var(--brand-dark)} /* Install-Knopf ausblenden, solange ein Fenster (Modal) offen ist – sonst überlappt er */ body:has(.modal-bg) .pwa-install{display:none} /* ============================================================ Mega-Optik: feiner Schliff – Übergänge, Tipp-Feedback, Einblenden (dezent gehalten; respektiert „reduzierte Bewegung") ============================================================ */ @keyframes gc-modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} @keyframes gc-bg-in{from{opacity:0}to{opacity:1}} @keyframes gc-card-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .modal-bg{animation:gc-bg-in .16s ease} .modal{animation:gc-modal-in .22s cubic-bezier(.2,.7,.3,1)} main>.card{animation:gc-card-in .28s ease both} /* Tipp-Feedback: Knöpfe & Kacheln „drücken" sich leicht ein */ button:active{transform:translateY(1px) scale(.985)} .edge-tile,.pc-tile,.bcal-day,.dur-chip,.stu-card,.bitem,.seg button,.ap-swatches button,.geo-btn,.live-traffic-btn{ transition:transform .14s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease} .edge-tile:active,.pc-tile:active,.bcal-day:not([disabled]):active,.dur-chip:active{transform:scale(.96)} /* Sanftes Anheben bei Hover (nur wo es sich anfühlt wie „anfassbar") */ @media(hover:hover){ .stu-card:hover,.bitem:hover{border-color:#34414f;box-shadow:0 6px 18px rgba(var(--sh),.28)} .bcal-day.free:not([disabled]):hover,.mc-day:not([disabled]):hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--sh),.3)} .ap-swatches button:hover{transform:scale(1.12)} .edge-tile:hover{border-color:var(--line-strong);transform:translateY(-1px)} } /* Aufklapp-Abschnitte (Einstellungen/Profil) weicher */ .sset[open]>.sset-body{animation:gc-card-in .2s ease both} .pfc-body:not(.hidden){animation:gc-card-in .2s ease both} /* Toast: sanft hereinfahren */ @keyframes gc-toast-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}} .toast{animation:gc-toast-in .2s ease} /* Fokus-Ringe etwas edler */ button:focus-visible{outline:2px solid var(--brand);outline-offset:2px} @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ============================================================ Kontext-Hilfe: „?“-Punkt + Erklär-Blase ============================================================ */ .help-dot{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px; border-radius:50%;background:var(--card2);border:1px solid var(--line);color:var(--muted); font-size:.7rem;font-weight:800;padding:0;vertical-align:middle;margin-left:.15rem;line-height:1;transition:.14s} .help-dot:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .help-pop{position:fixed;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom));transform:translateX(-50%); z-index:95;max-width:min(92vw,420px);background:var(--card);border:1px solid var(--brand);border-radius:12px; padding:.75rem .9rem;box-shadow:0 14px 44px rgba(var(--sh),.5);display:flex;gap:.6rem;align-items:flex-start; font-size:.9rem;color:var(--ink);line-height:1.5;animation:gc-toast-in .2s ease} .help-pop .help-x{flex:0 0 auto;background:none;border:none;color:var(--muted);font-size:.9rem;padding:.05rem .2rem;width:auto;cursor:pointer} .help-pop .help-x:hover{color:var(--ink);background:none} /* ============================================================ Einheitliches Karten-Design: gleiche Rundungen & ruhige Abstände ============================================================ */ .pf-sec,.stu-card,.sset,.wn-block,.pickup-box,.live-hero,.bcal,.minical,.progress-card,.stu-hours{border-radius:16px} .pf-sec,.sset{border-color:var(--line)} .card>h2:first-child{margin-top:.1rem} /* gleichmäßiger Abstand zwischen gestapelten Unterkarten */ .pf-sec+.pf-sec,.sset+.sset,.wn-block+.wn-block{margin-top:.7rem} /* ============================================================ Feinschliff: Mitteilungen, Protokoll-Statistik, Kalender ============================================================ */ /* Mitteilungen als Karten mit Icon-Kreis */ .notif-list{display:flex;flex-direction:column;gap:.5rem} .notif{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .8rem;border-radius:12px; background:var(--card2);border:1px solid var(--line);position:relative} .notif.unread{background:color-mix(in srgb,var(--brand) 10%,var(--card2));border-color:var(--booked-b)} .notif-ic{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--card);border:1px solid var(--line);font-size:1rem} .notif-body{flex:1;min-width:0} .notif-msg{font-size:.92rem;color:var(--ink);line-height:1.4} .notif-time{font-size:.76rem;color:var(--muted);margin-top:.2rem} .notif-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--brand);margin-top:.4rem} /* Kurzes Aufleuchten, wenn man per Push „Etwas liegt im Postfach" hierher springt. */ #notif-card.flash-in{animation:flashIn 1.6s ease-out} @keyframes flashIn{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)} 35%{box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 30%,transparent)} 100%{box-shadow:0 0 0 0 transparent}} @media (prefers-reduced-motion:reduce){#notif-card.flash-in{animation:none}} /* Protokoll-Statistik-Kacheln */ .pr-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;margin-bottom:1rem} .pr-stat{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:.55rem .7rem;text-align:center} .pr-stat b{display:block;font-size:1.4rem;font-weight:800;color:var(--ink);line-height:1.1} .pr-stat span{font-size:.74rem;color:var(--muted)} .pr-stat.total{background:linear-gradient(135deg,rgba(77,141,255,.18),rgba(77,141,255,.05));border-color:var(--booked-b)} .pr-stat.total b{color:var(--brand)} /* Kalender-Feinschliff */ .wk-block{box-shadow:0 1px 3px rgba(var(--sh),.3)} .wk-head.today{background:linear-gradient(#1c3a63,#132437);color:#cfe0ff} .m-cell.today{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand),0 2px 8px rgba(77,141,255,.15)} .m-dot{box-shadow:0 0 0 1px rgba(var(--sh),.25)} /* ============================================================ Vollbild-Seite (z.B. Ausbildungskarte abhaken) – kein enges Fenster ============================================================ */ .fp-overlay{position:fixed;inset:0;z-index:95;background:var(--bg); display:flex;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch; animation:gc-bg-in .16s ease} .fp{width:100%;max-width:820px;padding:0 1rem 3rem} .fp-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:.6rem; background:var(--bg);padding:.9rem 0 .7rem;border-bottom:1px solid var(--line)} .fp-back{background:var(--card2);border:1px solid var(--line);color:var(--ink);font-weight:700; padding:.5rem .8rem;border-radius:10px;flex:0 0 auto} .fp-back:hover{background:var(--card);border-color:var(--brand)} .fp-title{flex:1;min-width:0;font-weight:800;font-size:1.05rem;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fp-title span{color:var(--brand);margin-left:.3rem} .fp-sub{font-size:.86rem;color:var(--muted);margin:.7rem 0 .3rem} .fp-progwrap{position:sticky;top:57px;z-index:1;background:var(--bg);padding:.4rem 0 .7rem} .fp-prog-row{display:flex;justify-content:space-between;font-size:.85rem;font-weight:700;color:var(--muted)} .fp-prog-bar{height:11px;background:var(--field);border-radius:6px;overflow:hidden;margin-top:.3rem} .fp-prog-bar>div{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-dark));transition:width .25s} .fp-body .tc-sec{margin-bottom:.7rem} .fp-body .tc-item{padding:.5rem .2rem;font-size:.94rem} .fp-body .tc-item input{width:20px;height:20px;margin-top:.05rem} /* Knopf in der Fahrstunde: zur Vollbild-Ausbildungskarte */ .adk-open{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin:.2rem 0 .9rem; padding:.7rem;border-radius:11px;background:var(--card2);border:1px dashed var(--brand);color:var(--brand);font-weight:700} .adk-open:hover{background:var(--card)} body:has(.fp-overlay) .pwa-install{display:none} /* Suchleiste in der Vollbild-Ausbildungskarte */ .fp-search{margin-top:.55rem;width:100%;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem} .fp-search:focus{border-color:var(--brand)} .fp-noresult{color:var(--muted);text-align:center;padding:1.4rem;font-size:.95rem} /* ============================================================ Login-Seite aufgehübscht + Heute-Kurzüberblick ============================================================ */ .auth-hero{text-align:center;margin-bottom:1.1rem} .auth-logo{position:relative;width:104px;height:104px;margin:0 auto .55rem;border-radius:28px; display:flex;align-items:center;justify-content:center; background:conic-gradient(from 210deg,#ef6a12,#f59a1c,#f5c518,#f59a1c,#ef6a12); box-shadow:0 10px 30px rgba(240,124,26,.22)} /* Innenflaeche der Logo-Kachel: folgt dem Thema, damit auf Papier kein schwarzer Klotz steht. */ .auth-logo::before{content:"";position:absolute;inset:3px;border-radius:25px; background:radial-gradient(120% 90% at 50% 0%,var(--card) 0%,var(--card2) 55%,var(--bg) 100%)} /* Glas-Glanz oben auf der Kachel */ .auth-logo::after{content:"";position:absolute;left:8px;right:8px;top:6px;height:42%;border-radius:22px 22px 40px 40px; background:linear-gradient(180deg,color-mix(in srgb,var(--sheen) 55%,transparent),transparent);pointer-events:none;z-index:2} .auth-logo img,.auth-logo span{position:relative;z-index:3;width:72px;height:72px;object-fit:contain;font-size:2.9rem; display:flex;align-items:center;justify-content:center; filter:drop-shadow(0 2px 6px rgba(var(--sh),.28))} .auth-name{font-size:2.6rem;font-weight:900;letter-spacing:-.03em;margin:0 0 .15rem;line-height:1; background:linear-gradient(100deg,var(--word1) 0%,color-mix(in srgb,var(--word1) 50%,var(--word2)) 45%,var(--word2) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .auth-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:0 0 1.1rem} .auth-feats span{background:var(--card2);border:1px solid var(--line);border-radius:20px; padding:.3rem .7rem;font-size:.8rem;font-weight:600;color:var(--muted)} .today-strip{display:flex;gap:.6rem;margin:.2rem 0 1rem} .today-strip .ts-item{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:12px; padding:.55rem .7rem;text-align:center} .today-strip .ts-item b{display:block;font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1.1} .today-strip .ts-item span{font-size:.76rem;color:var(--muted)} .today-strip .ts-item.accent{background:linear-gradient(135deg,rgba(77,141,255,.18),rgba(77,141,255,.05));border-color:var(--booked-b)} .today-strip .ts-item.accent b{color:var(--brand)} /* ===== Bewertungen / Testimonials ===== */ /* Laufschrift auf der Startseite (rechts -> links) */ .rev-marquee{margin:1.4rem auto 0;max-width:760px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .rev-marquee .rev-title{text-align:center;font-size:.8rem;color:var(--muted);margin-bottom:.7rem;font-weight:600} .rev-track{display:flex;gap:.8rem;width:max-content;animation:revscroll calc(var(--rev-n,4) * 9s) linear infinite} .rev-marquee:hover .rev-track{animation-play-state:paused} @keyframes revscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.rev-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}} .rev-card{flex:0 0 auto;width:240px;background:var(--card2);border:1px solid var(--line); border-radius:14px;padding:.8rem .9rem;box-shadow:var(--shadow)} .rev-stars{color:#f5b301;letter-spacing:1px;font-size:.95rem;line-height:1} .rev-card .rev-text{font-size:.86rem;color:var(--ink);margin:.45rem 0 .5rem;line-height:1.35; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .rev-who{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted);font-weight:600} .rev-pic{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid var(--line); display:inline-flex;align-items:center;justify-content:center;background:var(--card);font-size:.9rem} .rev-pic.ph{color:var(--muted)} /* Schüler-Karte */ .rev-pass{display:flex;gap:.6rem;align-items:flex-start;background:var(--good-bg);border:1px solid var(--good-b); border-radius:12px;padding:.7rem .8rem;margin:.2rem 0 .7rem;font-size:.9rem} .rev-pass span{color:var(--muted)} .rev-mine{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem} .rev-mine .rev-text,.rev-mod .rev-text{font-size:.9rem;color:var(--ink);line-height:1.4;margin-top:.3rem} .rev-reply{margin-top:.5rem;padding:.4rem .6rem;border-left:3px solid var(--brand);background:var(--card); border-radius:0 8px 8px 0;font-size:.85rem;color:var(--muted)} /* Sterne-Auswahl im Modal */ .rev-starpick{display:flex;gap:.2rem} .rev-star{background:none;border:none;font-size:1.9rem;line-height:1;color:var(--line);cursor:pointer;padding:0 .1rem} .rev-star.on{color:#f5b301} .rev-opts{display:flex;flex-direction:column;gap:.35rem} .rev-opt{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink)} /* Moderation (Fahrlehrer) */ .rev-mod{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;margin-bottom:.7rem;background:var(--card2)} .rev-mod.hidden-rev{opacity:.6} .rev-mod-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} /* ===== Bewertungen: Moderation (Fahrlehrer) – ausgebaut ===== */ .rev-head{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem} .rev-avg{text-align:center;min-width:110px} .rev-avg-num{font-size:2.4rem;font-weight:800;line-height:1;color:var(--ink)} .rev-avg-stars{color:#f5b301;letter-spacing:1px;font-size:1rem;margin:.15rem 0} .rev-dist{flex:1;min-width:180px} .rev-dist-row{display:flex;align-items:center;gap:.5rem;margin:.15rem 0} .rev-dist-lbl{font-size:.78rem;color:var(--muted);width:22px} .rev-dist-bar{flex:1;height:8px;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden} .rev-dist-bar span{display:block;height:100%;background:#f5b301;border-radius:6px} .rev-dist-c{font-size:.78rem;color:var(--muted);width:20px;text-align:right} .rev-toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.6rem 0} .rev-ftabs{display:flex;gap:.3rem;flex-wrap:wrap;flex:1} .rev-ftab{background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:20px; padding:.35rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer} .rev-ftab.active{background:var(--brand);border-color:var(--brand);color:#fff} .rev-mod.is-top{border-color:#f5b301;box-shadow:0 0 0 1px rgba(245,179,1,.35)} .rev-mod-who{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 .1rem} .rev-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.55rem} .tag.top{background:rgba(245,179,1,.18);color:#f5b301;border:1px solid rgba(245,179,1,.4)} /* Marquee-Zusätze */ .rev-card.feat{border-color:rgba(245,179,1,.5)} .rev-toptag{color:#f5b301;font-size:.7rem;font-weight:700} .rev-verif{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%; background:var(--good);color:#fff;font-size:.7rem;font-weight:800;margin-left:.15rem} /* Push-Schalter in den Mitteilungen */ .push-ctl{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;background:var(--card2);border:1px solid var(--line); border-radius:12px;padding:.6rem .7rem;margin:.2rem 0 .8rem} .push-ctl .hint{width:100%} /* Passwort-Anfragen (Dashboard) */ .resetreq{border:1px solid var(--brand);box-shadow:0 0 0 1px rgba(242,160,20,.25)} .rr-item{display:flex;align-items:center;gap:.6rem;justify-content:space-between;flex-wrap:wrap; padding:.55rem 0;border-top:1px solid var(--line)} .rr-item:first-of-type{border-top:none} /* Rechtliche Links auf der Startseite */ .legal-links{margin-top:.5rem;font-size:.82rem} .legal-links a{color:var(--muted);text-decoration:none} .legal-links a:hover{color:var(--brand);text-decoration:underline} /* Erst-Start-Fenster mit Nutzungsbedingungen & Datenschutz */ .legal-tabs{display:flex;gap:.5rem;margin:0 0 .6rem} .legal-tabs button{flex:1;padding:.5rem .55rem;border-radius:10px;border:1px solid var(--line); background:var(--card2);color:var(--ink);font-size:.84rem;font-weight:700;cursor:pointer} .legal-tabs button.active{background:var(--brand);color:#fff;border-color:var(--brand)} .legal-frame{width:100%;height:54vh;min-height:280px;border:1px solid var(--line);border-radius:12px; background:var(--card2);display:block} .legal-fallback{font-size:.78rem;color:var(--muted);margin-top:.5rem;text-align:center} .legal-fallback a{color:var(--brand);text-decoration:none} .legal-fallback a:hover{text-decoration:underline} /* Sprach-Werkzeuge (Aussehen + Sprache) unter der Anmeldung */ .auth-tools{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap} /* Sprachauswahl-Fenster */ .lang-list{display:flex;flex-direction:column;gap:.5rem} .lang-opt{display:flex;align-items:center;gap:.7rem;width:100%;padding:.75rem .9rem;border-radius:12px; border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:1rem;font-weight:600;cursor:pointer;text-align:start} .lang-opt.active{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--card2))} .lang-flag{font-size:1.35rem;line-height:1} .lang-name{flex:1} .lang-chk{color:var(--brand);font-weight:800} /* Rechts-nach-links (Arabisch): Grundausrichtung spiegeln */ [dir="rtl"] .lang-opt,[dir="rtl"] .field label,[dir="rtl"] .hint{text-align:right} [dir="rtl"] .ck-line{flex-direction:row-reverse} /* ===== Nachrichten / Chat ===== */ .msg-list{display:flex;flex-direction:column;gap:.45rem;max-height:52vh;overflow-y:auto;padding:.3rem 0 .5rem} .msg{max-width:82%;display:flex;flex-direction:column} .msg.me{align-self:flex-end;align-items:flex-end} .msg.them{align-self:flex-start;align-items:flex-start} .msg-b{padding:.5rem .7rem;border-radius:14px;font-size:.92rem;line-height:1.35;white-space:pre-wrap;word-break:break-word} .msg.me .msg-b{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-bottom-right-radius:5px} .msg.them .msg-b{background:var(--card2);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px} .msg-t{font-size:.7rem;color:var(--muted);margin-top:.15rem;padding:0 .25rem} .msg-compose{display:flex;gap:.5rem;align-items:flex-end;margin-top:.4rem} .msg-compose textarea{flex:1;resize:vertical;min-height:2.4rem} .convo-list{display:flex;flex-direction:column;gap:.4rem} .convo{width:100%;text-align:left;background:var(--card2);border:1px solid var(--line);border-radius:12px; padding:.6rem .75rem;cursor:pointer;color:var(--ink)} .convo.unread{border-color:var(--brand);box-shadow:0 0 0 1px rgba(242,160,20,.25)} .convo-top{display:flex;align-items:center;gap:.5rem} .convo-last{color:var(--muted);font-size:.85rem;margin-top:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ===== Bewertungs-Assistent ("Durchbewerten", geführt) ===== */ .rev-wiz{display:flex;flex-direction:column;gap:.2rem} .rev-wiz h3{margin:.1rem 0 .35rem} .rev-prog{height:7px;background:var(--card2);border-radius:99px;overflow:hidden;margin:.1rem 0 .35rem} .rev-prog-bar{height:100%;background:linear-gradient(90deg,var(--brand-dark),var(--brand));border-radius:99px;transition:width .3s ease} .rev-prog-tx{font-size:.78rem;color:var(--muted);margin-bottom:.5rem;text-align:right} /* Intro / Erklärungsrundgang */ .rev-intro{text-align:center;padding:.3rem 0 .2rem} .rev-intro-emoji{font-size:2.6rem;line-height:1;margin-bottom:.3rem} .rev-intro p{color:var(--muted);margin:.4rem 0} .rev-intro-why{font-size:.9rem} .rev-intro-list{list-style:none;padding:0;margin:.7rem auto;max-width:320px;text-align:left;display:flex;flex-direction:column;gap:.45rem} .rev-intro-list li{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem;font-size:.92rem} /* Kategorie-Frage */ .rev-catq{text-align:center;padding:.4rem 0 .2rem} .rev-cat-ic{font-size:2.7rem;line-height:1;margin-bottom:.2rem} .rev-cat-hint{color:var(--muted);font-size:.9rem;margin:.15rem 0 .7rem} .rev-bigstars{display:flex;justify-content:center;gap:.35rem;margin:.2rem 0} .rev-bigstar{font-size:2.5rem;line-height:1;background:none;border:none;cursor:pointer;color:var(--line); padding:.1rem .15rem;transition:transform .08s ease,color .12s ease;-webkit-tap-highlight-color:transparent} .rev-bigstar:hover{transform:scale(1.12)} .rev-bigstar:active{transform:scale(.94)} .rev-bigstar.on{color:var(--brand);text-shadow:0 0 10px rgba(242,160,20,.35)} .rev-bigstar:focus{outline:none} .rev-bigstar:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px} .rev-cat-val{margin-top:.55rem;font-size:.95rem;color:var(--ink);min-height:1.2em;font-weight:600} /* Schritte allgemein */ .rev-step{padding:.2rem 0} .rev-step h3{text-align:center} .rev-count{text-align:right;font-size:.78rem;color:var(--muted);margin-top:.25rem} /* Foto-Schritt */ .rev-photo-step{text-align:center} .rev-photo-prev{width:120px;height:120px;border-radius:50%;overflow:hidden;margin:.5rem auto;border:2px solid var(--line); display:flex;align-items:center;justify-content:center;background:var(--card2)} .rev-photo-prev img{width:100%;height:100%;object-fit:cover} .rev-photo-ph{font-size:3rem}.rev-photo-ph.sm{font-size:1.4rem} .rev-photo-btns{display:flex;gap:.5rem;justify-content:center;margin:.3rem 0} .rev-show-line,.ck-line{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-top:.5rem;font-size:.92rem;color:var(--ink)} /* Anzeige-Name Karten */ .rev-namecards{display:flex;flex-direction:column;gap:.5rem;margin-top:.3rem} .rev-namecard{text-align:left;background:var(--card2);border:2px solid var(--line);border-radius:14px; padding:.7rem .85rem;cursor:pointer;color:var(--ink);transition:border-color .12s ease,background .12s ease} .rev-namecard.on{border-color:var(--brand);background:rgba(242,160,20,.08)} .rev-nc-t{font-weight:700}.rev-nc-s{color:var(--muted);font-size:.88rem;margin-top:.1rem} /* Zusammenfassung */ .rev-summary{text-align:center} .rev-sum-head{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:.4rem 0} .rev-sum-stars{font-size:1.9rem;color:var(--brand);letter-spacing:2px} .rev-sum-name{display:flex;align-items:center;gap:.5rem;font-weight:600} .rev-sum-name img{width:34px;height:34px;border-radius:50%;object-fit:cover} .rev-sum-text{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.6rem .75rem; margin-top:.5rem;font-style:italic;color:var(--ink);text-align:left} /* Chips (Kategorie-Noten) */ .rev-sum-chips,.rev-mine-chips{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin:.4rem 0} .rev-mine-chips{justify-content:flex-start} .rev-chip{background:var(--card2);border:1px solid var(--line);border-radius:99px;padding:.2rem .55rem;font-size:.8rem;color:var(--muted)} .rev-chip b{color:var(--brand)} /* Fahrlehrer: Durchschnitt je Kategorie */ .rev-catavg{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem;margin:.4rem 0 .2rem} .rev-catavg-h{font-weight:700;font-size:.9rem;margin-bottom:.5rem} .rev-catavg-grid{display:flex;flex-direction:column;gap:.5rem} .rev-catavg-item{display:grid;grid-template-columns:1.4rem 1fr auto;grid-template-areas:"ic lb val" "ic bar bar"; align-items:center;column-gap:.5rem;row-gap:.2rem} .rev-catavg-item.empty{opacity:.5} .rev-ca-ic{grid-area:ic;font-size:1.1rem} .rev-ca-lb{grid-area:lb;font-size:.88rem} .rev-ca-val{grid-area:val;font-weight:700;color:var(--brand);font-size:.9rem} .rev-ca-bar{grid-area:bar;height:6px;background:var(--bg2);border-radius:99px;overflow:hidden} .rev-ca-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-dark),var(--brand));border-radius:99px} /* ===== Unterschrift nachgetragener Fahrstunden ===== */ .sign-banner{display:flex;align-items:center;gap:.7rem;background:linear-gradient(135deg,rgba(242,160,20,.16),rgba(242,160,20,.05)); border:1px solid rgba(242,160,20,.4);border-radius:14px;padding:.75rem .85rem;margin:.2rem 0 .8rem;font-size:1.4rem} .sign-banner div{flex:1;font-size:.9rem}.sign-banner strong{font-size:.95rem} .sign-banner span{color:var(--muted);font-size:.85rem} .sign-banner button{flex:0 0 auto;font-size:.85rem} .ml-tosign td{background:rgba(242,160,20,.06)} .ml-signcell{margin-top:.35rem} .sign-lesson{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.6rem .75rem;margin:.2rem 0 .7rem} .sign-note{color:var(--muted);font-style:italic;margin-top:.3rem;font-size:.9rem} /* „Fahrstunde abschließen": gläserne, animierte Schritte */ .mk-sub{color:var(--muted);font-size:.9rem;margin:.1rem 0 1rem} .mk-step{position:relative;border-radius:16px;padding:1rem 1.05rem;margin:0 0 .9rem; border:1px solid color-mix(in srgb,var(--sheen) 36%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--sheen) 28%,transparent),color-mix(in srgb,var(--sheen) 10%,transparent)); backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1); box-shadow:0 8px 26px rgba(var(--sh),.24),inset 0 1px 0 color-mix(in srgb,var(--sheen) 36%,transparent); opacity:0;transform:translateY(12px);animation:mkIn .5s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--i,0)*.08s)} @keyframes mkIn{to{opacity:1;transform:none}} .mk-step-h{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1rem;margin:0 0 .7rem;letter-spacing:-.01em} .mk-step-n{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-size:.82rem;font-weight:900;color:#1a1206;background:linear-gradient(135deg,#f6890d,#ffd24a);box-shadow:0 2px 8px rgba(242,160,26,.4)} .mk-more{margin-top:.6rem;border-top:1px solid color-mix(in srgb,var(--sheen) 36%,transparent);padding-top:.5rem} .mk-more summary{cursor:pointer;font-size:.85rem;color:var(--muted);font-weight:600} .isig-stored{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap} .isig-prev{height:66px;max-width:230px;object-fit:contain;background:#fff;border-radius:10px;padding:4px 8px;border:1px solid var(--line)} @media (prefers-reduced-motion:reduce){.mk-step{animation:none;opacity:1;transform:none}} .sign-adk{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.6rem .75rem;margin:.5rem 0} .sign-adk-h{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.4rem} .sign-adk-i{font-size:.9rem;line-height:1.55} .sign-fl{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.86rem;color:var(--good);margin:.5rem 0;font-weight:600} .sign-fl-img{height:40px;max-width:150px;object-fit:contain;background:#fff;border-radius:8px;padding:2px 6px;border:1px solid var(--line)} .sign-lb{display:block;font-size:.9rem;font-weight:600;margin:.2rem 0 .35rem} .sign-pad-wrap{position:relative;margin-bottom:.6rem} .sign-pad{width:100%;height:150px;background:#fff;border:2px dashed var(--line);border-radius:12px;touch-action:none;display:block;cursor:crosshair} .sign-clear{position:absolute;top:.4rem;right:.4rem} /* ===== fsmanager (abweichendes fsmanager-Datum) ===== */ /* Gold/marken-getönte Klappbox – hebt den fsmanager-Eintrag edel hervor. */ .lg-inv{margin:.5rem 0 .6rem;border:1px solid var(--line);border-color:color-mix(in srgb,var(--brand) 34%,var(--line)); border-radius:14px;padding:.65rem .85rem;background:var(--card2);background:color-mix(in srgb,var(--brand) 7%,var(--card2))} .lg-inv summary{cursor:pointer;font-weight:700;font-size:.9rem;list-style:none;display:flex;align-items:center;gap:.4rem;color:var(--ink)} .lg-inv summary::-webkit-details-marker{display:none} .lg-inv summary::after{content:"▾";margin-left:auto;color:var(--muted);transition:transform .2s var(--ease,ease)} .lg-inv[open] summary{margin-bottom:.65rem} .lg-inv[open] summary::after{transform:rotate(180deg)} .lg-inv .hint{color:var(--muted);color:color-mix(in srgb,var(--brand) 45%,var(--muted))} /* Minuten je fsmanager-Tag – Ampel je Tag (rot = über 495). */ .inv-days{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.8rem .85rem;margin-bottom:.9rem} .inv-days-h{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.55rem} .inv-day{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.9rem; font-variant-numeric:tabular-nums;padding:.42rem .6rem;border-radius:10px;margin-top:.35rem; background:color-mix(in srgb,var(--sheen) 12%,transparent);border:1px solid transparent} .inv-day.over{color:var(--bad);font-weight:700;background:var(--bad-bg); border-color:color-mix(in srgb,var(--bad) 42%,transparent)} .inv-legend{font-size:.76rem;color:var(--muted);margin-top:.55rem;line-height:1.5} .inv-list{display:flex;flex-direction:column;gap:.6rem} .inv-row{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.72rem .8rem; box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease,ease),box-shadow .2s var(--ease,ease)} .inv-row:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)} .inv-drove{font-size:.92rem;margin-bottom:.55rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-variant-numeric:tabular-nums} .inv-fields{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center} .inv-fields .inv-d{max-width:158px}.inv-fields .inv-t{max-width:96px} .inv-fields input{font-variant-numeric:tabular-nums} /* Rechnungsdatum: zwei Zeilen (Gefahren / Rechnung) + Schnell-Chips */ .inv-pair{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:.5rem} .inv-pair:last-of-type{margin-bottom:0} .inv-tag{flex:0 0 auto;font-size:.74rem;font-weight:800;letter-spacing:.02em;border-radius:8px;padding:.28rem .5rem;min-width:6.6em;text-align:center} .inv-tag.drove{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)} .inv-tag.bill{background:var(--good-bg);color:var(--good)} .inv-tag.ghost{background:var(--card);color:var(--muted);font-weight:700} .inv-dur{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums} .inv-gd{max-width:150px}.inv-gt{max-width:96px} .inv-cur{background:var(--good-bg);color:var(--good)} .inv-cur-none{font-size:.82rem;color:var(--muted)} .inv-chips{display:flex;flex-wrap:wrap;gap:.4rem} .inv-chip{background:var(--chip);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:.4rem .8rem;font-size:.85rem;font-weight:600} .inv-chip:hover{background:var(--surface)} .inv-chip.on{background:var(--brand);color:#fff;border-color:var(--brand)} .inv-chip.inv-custom-btn{color:var(--muted)} .inv-custom{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.5rem} .inv-custom .inv-d{max-width:158px}.inv-custom .inv-t{max-width:150px} .ml-inv{color:var(--brand);font-variant-numeric:tabular-nums} /* ===== Wiederherstellungs-Codes ===== */ .rec-codes{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:.6rem 0} .rec-codes code{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:.45rem .5rem; font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem;letter-spacing:.04em;text-align:center;color:var(--ink)} /* ===== Authenticator (Einstellungen) ===== */ .sec-auth{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;margin-top:.2rem;background:var(--card2)} .sec-auth-h{font-weight:700;font-size:.92rem;margin-bottom:.45rem} .au-key{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.3rem 0} .au-key code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:.06em; background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:.4rem .55rem;color:var(--ink)} a.btn-like{display:inline-block;background:var(--brand);color:#1a1205;font-weight:700;border-radius:12px; padding:.6rem 1rem;text-decoration:none;border:none} a.btn-like:hover{background:var(--brand-dark)} /* QR-Code im Authenticator-Fenster */ .au-qr{display:flex;justify-content:center;margin:.5rem auto} .au-qr svg{background:#fff;border-radius:12px;padding:10px;box-shadow:0 4px 18px rgba(var(--sh),.25);max-width:100%;height:auto} .au-manual{margin:.3rem 0}.au-manual summary{cursor:pointer;font-size:.88rem;color:var(--muted)} /* „Was habt ihr heute gemacht?" – Ausbildungskarte im Abschließen-Fenster */ .mk-curr{margin:.2rem 0 .6rem;border:1px solid var(--line);border-radius:12px;padding:.5rem .7rem;background:var(--card2)} .mk-curr summary{cursor:pointer;font-weight:600;font-size:.92rem} .mk-curr-list{max-height:300px;overflow:auto;margin-top:.3rem} .mk-sec{margin:.4rem 0} .mk-sec-t{font-size:.78rem;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.02em;margin:.3rem 0 .2rem} .mk-item{display:flex;align-items:flex-start;gap:.5rem;padding:.28rem .3rem;border-radius:8px;font-size:.9rem;cursor:pointer} .mk-item:hover{background:var(--card)} .mk-item.is-done{color:var(--good);opacity:.85} .mk-item input{margin-top:.15rem} .tc-item{display:flex;align-items:center;gap:.5rem} .tc-item>span{flex:1} .tc-date{font-size:.72rem;color:var(--good);font-weight:600;white-space:nowrap} /* Ausbildungskarte je Fahrstunde: Punkt + 3-Stufen-Stand */ .mk-item2{display:flex;align-items:center;gap:.5rem;padding:.28rem .3rem;border-radius:8px;font-size:.9rem} .mk-item2:hover{background:var(--card)} .mk-item2 .mk-lbl{flex:1;line-height:1.25} .mk-prev{display:block;font-style:normal;font-size:.72rem;color:var(--muted);margin-top:.05rem} .mk-seg{display:inline-flex;gap:.2rem;flex-shrink:0} .mk-seg button{width:34px;height:32px;padding:0;border:1px solid var(--line);background:var(--card2);border-radius:9px;font-size:1rem;line-height:1;opacity:.45;filter:grayscale(.5);cursor:pointer;transition:.12s} .mk-seg button:hover{opacity:.8;filter:none} .mk-seg button.on{opacity:1;filter:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-weak,rgba(255,140,0,.25)) inset;transform:scale(1.05)} /* ADK-Zusammenfassung (Häufigkeit + Stand) */ .adk-stats{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0} .adk-stat{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:.4rem .6rem;min-width:78px} .adk-stat b{display:block;font-size:1.15rem;line-height:1.1} .adk-stat span{font-size:.7rem;color:var(--muted)} .adk-need{background:var(--warn-bg,rgba(255,170,0,.12));border:1px solid var(--warn,rgba(255,170,0,.5));border-radius:12px;padding:.5rem .7rem;margin:.5rem 0} .adk-need .adk-need-t{font-weight:700;font-size:.86rem;margin-bottom:.25rem} .adk-need ul{margin:.2rem 0 0;padding-left:1.1rem;font-size:.86rem;line-height:1.5} .adk-freq{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:.3rem} .adk-freq td{padding:.24rem .3rem;border-bottom:1px solid var(--line);vertical-align:top} .adk-freq td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)} .adk-freq .st{white-space:nowrap;font-size:.78rem} .adk-lessadk{margin-top:.35rem} .adk-day{font-size:.76rem;color:var(--muted)} .badge.st-mehr{background:rgba(255,70,70,.16);color:#ff6b6b} .badge.st-ok{background:rgba(60,200,120,.16);color:#3ac878} .badge.st-geuebt{background:rgba(255,190,60,.16);color:#ffbe3c} .linkbtn{display:inline-block;margin-top:.25rem;padding:.15rem .1rem;background:none;border:none;color:var(--brand);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .linkbtn:hover{opacity:.8} .or-sep{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:.78rem;margin:.7rem 0 .5rem;gap:.6rem} .or-sep::before,.or-sep::after{content:'';flex:1;height:1px;background:var(--line)} .pk-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem .1rem;border-bottom:1px solid var(--line);font-size:.9rem} /* Sonderfahrt buchen */ .sf-book{margin-top:.45rem;width:100%;padding:.35rem .3rem;border:1px solid var(--tc,var(--brand));background:transparent;color:var(--tc,var(--brand));border-radius:9px;font-size:.78rem;font-weight:700;cursor:pointer;transition:.12s} .sf-book:hover{background:var(--tc,var(--brand));color:#fff} .sf-slots{margin:.4rem 0} .sf-list{display:flex;flex-direction:column;gap:.4rem} .sf-pick{text-align:left;justify-content:flex-start} .pc-actions{display:flex;gap:.5rem;flex-wrap:wrap} .pc-actions .pc-adk{flex:1;min-width:130px} /* Prüfungsreife-Check */ .er-verdict{background:var(--warn-bg);border:1px solid var(--warn);border-radius:12px;padding:.6rem .8rem;font-weight:600;font-size:.9rem;margin:.2rem 0 .6rem} .er-verdict.ok{background:var(--good-bg);border-color:var(--good);color:var(--good)} .er-list{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0} .er-line{display:flex;gap:.55rem;align-items:flex-start;padding:.5rem .6rem;border:1px solid var(--line);border-radius:11px;background:var(--card2);font-size:.9rem;font-weight:600} .er-line.ok{border-color:color-mix(in srgb,var(--good) 40%,transparent)} .er-line.todo{border-color:color-mix(in srgb,var(--warn) 40%,transparent)} .er-ic{font-size:1.05rem;line-height:1.2} .er-sub{font-size:.78rem;font-weight:400;color:var(--muted);margin-top:.15rem;line-height:1.4} /* Fahrlehrer-Gesamtübersicht */ .ov-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 .8rem} .ov-tile{flex:1;min-width:90px;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.5rem .7rem;text-align:center} .ov-tile b{display:block;font-size:1.35rem;line-height:1.1} .ov-tile span{font-size:.72rem;color:var(--muted)} .ov-tile.warn{border-color:rgba(255,70,70,.45)} .ov-tile.good{border-color:color-mix(in srgb,var(--good) 50%,transparent)} /* Übungs-Empfehlung im Abschließen-Modal */ .mk-recos:empty{display:none} .mk-recos{margin:.3rem 0 .5rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:12px;background:var(--card2)} .mk-recos-t{font-size:.82rem;font-weight:700;margin-bottom:.35rem} .mk-recos-list{display:flex;flex-wrap:wrap;gap:.35rem} .mk-reco{font:inherit;font-size:.78rem;font-weight:600;padding:.28rem .5rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:.12s} .mk-reco span{font-weight:400;color:var(--muted)} .mk-reco.red{border-color:rgba(255,70,70,.5);background:rgba(255,70,70,.1)} .mk-reco:hover{border-color:var(--brand)} .mk-item2.reco-flash{animation:reco-flash 1.6s ease} @keyframes reco-flash{0%,100%{background:transparent}20%,60%{background:var(--warn-bg)}} /* ========================================================================= EDEL-POLITUR · feine, themeübergreifende Verfeinerungen Nutzt die vorhandenen Farbtokens (kein Theme wird hart überschrieben). color-mix()/Glanz degradieren auf älteren Systemen sauber – Layout bleibt. ========================================================================= */ :root{ --ease:cubic-bezier(.22,.61,.36,1); --shadow-sm:0 1px 2px rgba(var(--sh),.26),0 4px 12px rgba(var(--sh),.20); } /* Helle Themes („Papier", „Buche", „Kreide"): warmes Papier, feine Kante, flacher Schatten – kein Leuchten. Die App setzt data-mode beim Umschalten (applyThemeVars in app.js). */ :root[data-mode="hell"]{ --scheme:light; --diamant:#1b9fc7; --diamant-dark:#14809f; --diamant-bg:rgba(27,159,199,.12); --sh:60,48,30; --sheen:rgba(60,48,30,.07); --word1:#d2660c; --word2:#e89a12; --shadow:0 1px 1px rgba(var(--sh),.05),0 3px 8px rgba(var(--sh),.07),0 14px 28px rgba(var(--sh),.06); --shadow-sm:0 1px 2px rgba(var(--sh),.06),0 2px 6px rgba(var(--sh),.05); } /* Auf Papier die grossen Schlagschatten zuruecknehmen – sonst wirkt alles wie ausgeschnitten und aufgeklebt. */ :root[data-mode="hell"] .modal{box-shadow:0 18px 50px rgba(var(--sh),.16)} :root[data-mode="hell"] .toast, :root[data-mode="hell"] .nh-toast{box-shadow:0 10px 30px rgba(var(--sh),.16)} :root[data-mode="hell"] .wk-block{box-shadow:0 1px 2px rgba(var(--sh),.10)} :root[data-mode="hell"] .edge-panel, :root[data-mode="hell"] .edge-x, :root[data-mode="hell"] .edge-handle{box-shadow:0 8px 26px rgba(var(--sh),.14)} /* Feineres Schrift-Rendering + ruhigere, präzisere Überschriften */ body{-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} h1,h2,h3,.greet-big,.nh-when,.auth h1{letter-spacing:-.015em} /* Karten: weiche Tiefe + sanftes Reagieren */ .card{box-shadow:var(--shadow); transition:box-shadow .28s var(--ease),transform .28s var(--ease),border-color .28s var(--ease)} /* Buttons: leises Anheben, sauberer Druck, zarter Marken-Schimmer */ button{transition:transform .12s var(--ease),background .18s var(--ease), box-shadow .2s var(--ease),filter .18s var(--ease)} button:not(.ghost):not(.sec):not(.danger):not(.linklike):not(.linkbtn):not(.iconbtn):not(.mk-reco){ box-shadow:var(--shadow-sm)} button:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.05)} button:not(:disabled):active{transform:translateY(0) scale(.98);filter:brightness(.97)} button:disabled{box-shadow:none;transform:none;filter:none} button.ghost,button.linklike,button.linkbtn{box-shadow:none} /* Eingaben: ruhiger, themegerechter Fokus-Ring (Fallback: bestehender Umriss) */ input,select,textarea{transition:border-color .18s var(--ease),box-shadow .18s var(--ease)} input:focus,select:focus,textarea:focus{ outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:1px; box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)} /* Slots: freie Zeiten mit feinem Glanz, sanftes Anheben */ .slot{transition:transform .16s var(--ease),box-shadow .2s var(--ease), border-color .2s var(--ease),background .2s var(--ease)} .slot.free:hover,.slot.booked:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .slot.free{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--good) 24%,transparent)} .slot .tag{letter-spacing:.05em} /* Erster Eindruck: zarter Lichthof hinter der Login-Karte, edleres Logo */ .auth-wrap{position:relative} .auth-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(58% 42% at 50% 20%, color-mix(in srgb,var(--brand) 20%,transparent),transparent 70%)} .auth{position:relative;z-index:1} .auth .logo-big{filter:drop-shadow(0 6px 20px color-mix(in srgb,var(--brand) 42%,transparent))} .tabs{box-shadow:inset 0 1px 2px rgba(var(--sh),.25)} .tabs button{transition:background .18s var(--ease),color .18s var(--ease)} /* Modal: sanftes Auf- und Einblenden statt hartem Erscheinen */ @keyframes fubu-bg-in{from{opacity:0}to{opacity:1}} @keyframes fubu-modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} .modal-bg{animation:fubu-bg-in .18s var(--ease) both} .modal{animation:fubu-modal-in .24s var(--ease) both;box-shadow:0 24px 70px rgba(var(--sh),.62)} /* Toast: weiches Einschweben */ @keyframes fubu-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}} .toast{animation:fubu-toast-in .22s var(--ease) both} /* Feinschliff: sanfteres Scrollen */ html{scroll-behavior:smooth} /* Lebendiges Logo: goldener Schimmer wandert sanft über den Schriftzug */ header .brand .brandname{ background:linear-gradient(100deg,#ef6a12 0%,#f5c518 34%,#fff4c6 50%,#f5c518 66%,#ef6a12 100%); background-size:230% 100%;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;animation:brand-sheen 7s var(--ease) infinite} @keyframes brand-sheen{0%,100%{background-position:0 0}50%{background-position:100% 0}} /* Lade-Reifen dreht sich */ .boot .tire{animation:tire-spin 1.1s linear infinite;display:inline-block} @keyframes tire-spin{to{transform:rotate(360deg)}} /* Freie Slots: dezenter Licht-Sweep zieht in Ruhe durch */ .slot.free{position:relative;overflow:hidden} .slot.free::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none; transform:skewX(-18deg); background:linear-gradient(115deg,transparent,color-mix(in srgb,var(--good) 16%,transparent),transparent); animation:slot-shine 6s var(--ease) infinite} @keyframes slot-shine{0%{left:-70%}16%{left:150%}100%{left:150%}} /* ---- Erfolgs-Moment nach Buchung ---- */ .celebrate{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden; display:flex;align-items:center;justify-content:center; background:radial-gradient(closest-side,rgba(var(--sh),.36),transparent 72%); animation:cel-bg .3s var(--ease) both} .celebrate.out{animation:cel-out .42s var(--ease) forwards} @keyframes cel-bg{from{opacity:0}to{opacity:1}} @keyframes cel-out{to{opacity:0}} .cel-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem; animation:cel-pop .5s var(--ease) both} @keyframes cel-pop{0%{transform:scale(.7);opacity:0}55%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}} .cel-check{width:96px;height:96px} .cel-ring{fill:none;stroke:color-mix(in srgb,var(--good) 82%,transparent);stroke-width:3;opacity:.9; stroke-dasharray:151;stroke-dashoffset:151;animation:cel-draw .6s var(--ease) .05s forwards} .cel-tick{fill:none;stroke:var(--good);stroke-width:4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:40;stroke-dashoffset:40;animation:cel-draw .34s var(--ease) .46s forwards; filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--good) 55%,transparent))} @keyframes cel-draw{to{stroke-dashoffset:0}} .cel-label{font-weight:800;font-size:1.15rem;color:var(--ink);text-shadow:0 2px 12px rgba(var(--sh),.55); opacity:0;transform:translateY(6px);animation:cel-lbl .32s var(--ease) .62s forwards} @keyframes cel-lbl{to{opacity:1;transform:none}} .cel-conf{position:absolute;inset:0;z-index:1;overflow:hidden} .cel-conf i{position:absolute;top:-6%;width:9px;height:14px;border-radius:2px;opacity:0; transform:rotate(var(--r));animation:cel-fall 1.5s var(--d,0s) linear forwards} @keyframes cel-fall{0%{opacity:0;top:-6%}12%{opacity:1}100%{opacity:0;top:108%;transform:rotate(calc(var(--r) + 380deg))}} .cel-car{position:absolute;bottom:15%;left:-16%;z-index:2;font-size:2.4rem; filter:drop-shadow(0 6px 10px rgba(var(--sh),.4));animation:cel-drive 1.45s var(--ease) forwards} @keyframes cel-drive{0%{left:-16%;opacity:0}12%{opacity:1}86%{opacity:1}100%{left:114%;opacity:0}} /* Wer reduzierte Bewegung wünscht, bekommt keine Animationen */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} html{scroll-behavior:auto} .slot.free::after,header .brand .brandname{animation:none} header .brand .brandname{background-position:0 0} } /* ===== Dienstplan-Feinschliff: freie Tage · Urlaub · kürzer ===== */ :root[data-mode="hell"]{ --info:#2f6f9f; --info-bg:rgba(47,111,159,.12); } /* Tag-Typ-Chips im Wochen-Kopf & Monat – semantisch gefärbt (amber/blau/grün) */ .wk-head .daytag,.m-tag{display:inline-flex;align-items:center;gap:.18rem;font-size:.62rem;font-weight:700; padding:.08rem .42rem;border-radius:20px;border:1px solid transparent;white-space:nowrap;line-height:1.6} .wk-head .daytag{margin-top:.2rem} .dt-vac{color:var(--good);background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 38%,transparent)} .dt-free{color:var(--info);background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 38%,transparent)} .dt-short{color:var(--warn);background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 38%,transparent)} /* Segment-Wahl: der aktive Typ trägt seine eigene Farbe (statt immer Gold) */ .seg button[data-t="vacation"].active{background:linear-gradient(180deg,var(--good),#2aa568);border-color:var(--good)} .seg button[data-t="free"].active{background:linear-gradient(180deg,var(--info),#3f7fd6);border-color:var(--info)} .seg button[data-t="short"].active{background:linear-gradient(180deg,var(--warn),#c9962a);border-color:var(--warn)} .seg button.active .seg-lb,.seg button.active .seg-sub{color:#161006} .seg button.active .seg-ic{filter:drop-shadow(0 1px 3px rgba(var(--sh),.28))} /* Frei-/Urlaubs-Fläche in der Wochenansicht: dezent getönt + zentriertes Label */ .wk-block.closed{display:flex;align-items:center;justify-content:center;gap:.25rem;font-weight:800;font-size:.8rem; text-align:center;color:var(--ink); background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--sheen) 20%,transparent),color-mix(in srgb,var(--sheen) 20%,transparent) 8px,transparent 8px,transparent 16px),var(--veil)} .wk-block.closed.dt-vac{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--good) 45%,transparent);color:var(--good)} .wk-block.closed.dt-free{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--info) 45%,transparent);color:var(--info)} /* Eingetragene-Tage-Liste: farbige linke Kante je Typ (statt einheitlich Gold) */ .bitem.ov-vac,.bitem.ov-free,.bitem.ov-short{background:var(--card2);border-color:var(--line)} .bitem.ov-vac{border-left:3px solid var(--good)} .bitem.ov-free{border-left:3px solid var(--info)} .bitem.ov-short{border-left:3px solid var(--warn)} /* ===== Präzise Verfügbarkeit: von–bis pro Wochentag (mehrere möglich) ===== */ .avail2{display:flex;flex-direction:column;gap:.45rem} .av2-day{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem} .av2-dh{font-weight:800;font-size:.85rem;margin-bottom:.45rem} .av2-none{font-weight:400;color:var(--muted);font-size:.8rem} .av2-win{display:flex;align-items:center;gap:.45rem;margin-bottom:.42rem;flex-wrap:wrap} .av2-t{flex:1;min-width:76px;font-variant-numeric:tabular-nums} .av2-dash{color:var(--muted);font-weight:700} .av2-mode{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--ink); border-radius:9px;padding:.4rem .6rem;font-size:.78rem;font-weight:700;box-shadow:none;white-space:nowrap} .av2-mode.pick{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 45%,transparent);color:var(--good)} .av2-place{flex:1 0 100%;font-size:.85rem} .av2-del{flex:0 0 auto;background:transparent;border:1px solid var(--line);color:var(--muted); border-radius:9px;padding:.4rem .58rem;box-shadow:none} .av2-del:hover{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)} .av2-add{background:transparent;color:var(--brand);border:1px dashed color-mix(in srgb,var(--brand) 45%,var(--line)); border-radius:9px;padding:.38rem .7rem;font-size:.82rem;font-weight:700;box-shadow:none} .av2-add:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)} /* ===== Selbst-Anmeldung (Schritt für Schritt) + Warte-Screen + Freischaltung ===== */ .sw-intro .sw-bullets{list-style:none;padding:0;margin:.2rem 0 .9rem;display:grid;gap:.4rem} .sw-intro .sw-bullets li{background:var(--card2,rgba(127,127,127,.08));border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;font-size:.92rem} .sw{position:relative} .sw-prog{display:flex;align-items:center;gap:.25rem;margin:.4rem 0 .9rem} .sw-prog .sw-dot{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; font-size:.8rem;font-weight:800;background:var(--card2,rgba(127,127,127,.12));color:var(--muted);border:1px solid var(--line)} .sw-prog .sw-dot.now{background:var(--brand);color:#fff;border-color:var(--brand)} .sw-prog .sw-dot.ok{background:var(--good-bg);color:var(--good);border-color:var(--good)} .sw-prog i{flex:1;height:2px;background:var(--line);border-radius:2px} .sw-nav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1rem} .sw-nav button{flex:1} .sw-avail{display:grid;gap:.5rem} .sw-day{border:1px solid var(--line);border-radius:11px;padding:.5rem .6rem;background:var(--card2,rgba(127,127,127,.05))} .sw-day-h{font-weight:800;font-size:.9rem;margin-bottom:.35rem} .sw-win{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem} .sw-win input[type=time]{flex:1;min-width:0} .sw-win span{color:var(--muted)} .sw-summary{display:grid;gap:.35rem;background:var(--card2,rgba(127,127,127,.08));border:1px solid var(--line); border-radius:11px;padding:.7rem .8rem;font-size:.93rem;line-height:1.4} .sw-done,.pending-card{max-width:100%} .pending-emoji{font-size:2.6rem;text-align:center;margin:.3rem 0 .1rem} .pending-card{margin-top:1rem} .pending-steps{display:grid;gap:.45rem;margin:1rem 0 .2rem} .pstep{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px; border:1px solid var(--line);background:var(--card2,rgba(127,127,127,.06));color:var(--muted);font-size:.92rem} .pstep span{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center; font-weight:800;font-size:.8rem;background:var(--line);color:var(--fg)} .pstep.now{border-color:var(--brand);color:var(--fg);background:color-mix(in srgb,var(--brand) 10%,transparent)} .pstep.now span{background:var(--brand);color:#fff} .pstep.ok{border-color:var(--good);color:var(--good)} .pstep.ok span{background:var(--good);color:#fff} /* Cockpit: Freischalt-Panel */ .signup-panel{border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:13px; padding:.8rem .9rem;margin-bottom:1rem;background:color-mix(in srgb,var(--brand) 7%,transparent)} .signup-h{font-weight:800;font-size:1.02rem;display:flex;align-items:center;gap:.5rem} .signup-card{border:1px solid var(--line);border-radius:11px;padding:.65rem .75rem;margin-top:.55rem;background:var(--card)} .signup-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;flex-wrap:wrap} .signup-name{font-weight:800;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap} .signup-body{margin:.4rem 0 .55rem;display:grid;gap:.2rem;font-size:.9rem;color:var(--fg)} .signup-actions{display:flex;gap:.5rem;flex-wrap:wrap} /* Buchung: „Erst Dauer wählen" (Chips über den Startzeiten) */ .dur-choose{margin:.2rem 0 .7rem} .dur-choose:empty{margin:0} .dc-label{font-size:.86rem;font-weight:700;color:var(--muted);margin:0 0 .35rem} .dc-chips{display:flex;gap:.45rem;flex-wrap:wrap} .dc-chip{border:1px solid var(--line);background:var(--card2,rgba(127,127,127,.06));color:var(--fg); border-radius:999px;padding:.42rem .9rem;font-weight:800;font-size:.92rem;box-shadow:none} .dc-chip.on{background:var(--brand);color:#fff;border-color:var(--brand)} /* ===== Live-Ansicht „Fahrlehrer unterwegs" – veredelt ===== */ .live-hero{position:relative;flex-wrap:wrap} .live-hero:not(.go){background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 20%,var(--card2)),var(--card2)); border-color:color-mix(in srgb,var(--brand) 40%,var(--line))} .lh-txt{flex:1 1 auto;min-width:0} .lh-ic.pulse{animation:lh-bob 1.6s ease-in-out infinite} @keyframes lh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .lh-eta{flex:0 0 auto;display:flex;align-items:baseline;gap:.15rem;line-height:1; padding:.1rem .55rem;border-radius:12px;background:color-mix(in srgb,var(--brand) 16%,transparent)} .lh-num{font-size:2.3rem;font-weight:900;color:var(--brand);letter-spacing:-1px} .lh-unit{font-size:.85rem;font-weight:800;color:var(--brand)} .lh-live{margin-left:auto;display:inline-flex;align-items:center;gap:.32rem;font-size:.72rem;font-weight:800; text-transform:uppercase;letter-spacing:.5px;color:var(--good);align-self:flex-start} .lh-dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 50%,transparent); animation:lh-live 1.3s ease-out infinite} @keyframes lh-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} .live-prog{display:flex;align-items:center;gap:.3rem;margin:0 0 .7rem} .live-prog i{flex:1;height:2px;border-radius:2px;background:var(--line)} .lp-step{display:flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;color:var(--muted); padding:.28rem .55rem;border-radius:999px;border:1px solid var(--line);background:var(--card2);white-space:nowrap} .lp-step span{font-size:.95rem} .lp-step.now{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); background:color-mix(in srgb,var(--brand) 12%,transparent)} .lp-step.done{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,var(--line))} @media(max-width:430px){.lp-step{font-size:.72rem;padding:.24rem .45rem}.lh-num{font-size:2rem}} /* Fehlerbuch-Editor: dezenter Auto-Speichern-Status */ .lp-saved{min-height:1.1em;font-size:.8rem;font-weight:700;color:var(--good);margin:.15rem 0 .2rem;transition:opacity .2s} /* Fehlerbuch: Übersichtskarte mit nummerierten Nadeln + Nummern in der Liste */ .fb-overview{height:clamp(240px,62vw,380px);margin:.2rem 0 .8rem} .lm-num{background:none;border:none} .pin-num{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px; border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.9rem;line-height:1; border:2px solid #fff;box-shadow:0 2px 5px rgba(var(--sh),.5)} .pin-num::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:0;height:0; border:6px solid transparent;border-top-color:#fff} .fb-num,.lp-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px; padding:0 .32rem;border-radius:999px;background:var(--brand);color:#fff;font-weight:800;font-size:.78rem} .fb-when{display:flex;align-items:center;gap:.4rem} /* „Sitzt jetzt!" – gemeisterte Fehler werden grün */ .pin-num.ok{background:var(--good)} .pin-num.ok::after{border-top-color:#fff} .fb-num.ok,.lp-num.ok{background:var(--good)} .fb-sit{color:var(--good);font-weight:800;font-size:.78rem} .fb-item.fb-done{opacity:.85} .fb-item.fb-done .fb-text{text-decoration:none} .lp-row.resolved{border-color:color-mix(in srgb,var(--good) 45%,var(--line))} /* Sauberer Hilfe-Knopf (statt rotem ❓-Emoji) + Hilfe-Menü */ .help-btn{font-weight:900;font-size:1rem;color:var(--brand);border:1.5px solid color-mix(in srgb,var(--brand) 55%,var(--line)); border-radius:50%;width:30px;height:30px;min-width:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;background:transparent} .help-btn:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)} .help-menu{display:grid;gap:.5rem;margin:.2rem 0 .6rem} .help-row{display:flex;align-items:center;gap:.7rem;width:100%;text-align:start;border:1px solid var(--line); background:var(--card2,rgba(127,127,127,.05));border-radius:12px;padding:.65rem .75rem;box-shadow:none} .help-row:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))} .hm-ic{font-size:1.5rem;flex:0 0 auto} .hm-tx{flex:1 1 auto;display:flex;flex-direction:column;line-height:1.25} .hm-tx span{color:var(--muted);font-size:.82rem} .hm-go{color:var(--muted);font-size:1.2rem;flex:0 0 auto} /* Prüfungs-Countdown (Schüler) + Reife-Ampel */ #exam-card .exam-head{display:flex;align-items:center;gap:.8rem} .exam-emoji{font-size:2.2rem;flex:0 0 auto} .exam-big{font-size:1.2rem;font-weight:800;color:var(--ink);line-height:1.15} .exam-head.soon .exam-big{color:var(--brand)} .exam-date{color:var(--muted);font-size:.88rem;text-transform:capitalize} .exam-amps{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem} .ex-amp{font-size:.82rem;font-weight:700;padding:.3rem .6rem;border-radius:999px;border:1px solid var(--line);background:var(--card2,rgba(127,127,127,.06))} .ex-amp.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,var(--line))} .ex-amp.todo{color:var(--muted)} .er-countdown{background:color-mix(in srgb,var(--brand) 12%,transparent);border:1px solid color-mix(in srgb,var(--brand) 40%,var(--line)); border-radius:10px;padding:.55rem .7rem;margin:.2rem 0 .6rem;font-size:.92rem} /* 40-Min-Länge nur als dezente Ausnahme */ .dur-chip.dur-exc{opacity:.75} /* Theorie-Lektionen (Schüler-Karte): 1–14 als Kacheln, besuchte grün */ .theo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:.3rem} .theo-grid span{display:flex;align-items:center;justify-content:center;height:36px;border-radius:9px;background:var(--chip);border:1px solid var(--line);font-weight:700;font-size:.85rem;color:var(--muted)} .theo-grid span.on{background:var(--good-bg);border-color:var(--good);color:var(--good)} /* ====== Führerschein-Antrag: Assistent (public/antrag.js) ====== */ .aw-progress{height:8px;background:var(--chip);border-radius:5px;overflow:hidden} .aw-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--word1),var(--word2));transition:width .4s ease} .aw-miss{background:var(--warn-bg);border-left:3px solid var(--warn);border-radius:8px;padding:.5rem .7rem;font-size:.85rem;margin-bottom:.6rem} .aw-wrap{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column} .aw-head{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 95%,transparent)} .aw-head .aw-title{font-weight:800} .aw-head .aw-x{background:var(--surface);color:var(--ink);padding:.35rem .7rem;box-shadow:none} .aw-head .aw-save{margin-left:auto;font-size:.8rem;color:var(--good)} .aw-steps{display:flex;gap:.3rem;overflow-x:auto;padding:.5rem 1rem;scrollbar-width:none} .aw-steps::-webkit-scrollbar{display:none} .aw-steps button{flex:none;background:var(--chip);color:var(--muted);border:1px solid var(--line);padding:.35rem .7rem;font-size:.8rem;border-radius:20px;box-shadow:none} .aw-steps button span{margin-right:.25rem} .aw-steps button.done{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)} .aw-steps button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700} .aw-body{flex:1;overflow:auto;padding:1.1rem 1rem 2rem;max-width:760px;width:100%;margin:0 auto} .aw-body h3{margin:.2rem 0 .3rem;font-size:1.15rem} .aw-lead{color:var(--muted);font-size:.9rem;margin:0 0 1rem} .aw-foot{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 95%,transparent)} .aw-foot .aw-count{margin:0 auto;font-size:.8rem;color:var(--muted)} .aw-row{display:flex;gap:.8rem;flex-wrap:wrap} .aw-row>*{flex:1;min-width:150px} .aw-f{display:block;margin-bottom:.8rem} .aw-f>span{display:block;font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:.25rem} .aw-f input,.aw-f select{width:100%;font-size:1rem;padding:.65rem .7rem} .aw-f em{display:block;font-size:.74rem;color:var(--muted);font-style:normal;margin-top:.2rem} .aw-f.req>span::after{content:''} .aw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem;margin-bottom:1rem} .aw-card{text-align:left;background:var(--card2);border:1px solid var(--line);color:var(--ink);padding:.75rem .9rem;border-radius:13px;font-size:.92rem;box-shadow:none} .aw-card.on{border-color:var(--brand);background:rgba(239,106,18,.14);font-weight:700} .aw-grp{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:.9rem 0 .4rem} .aw-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem} .aw-chip{text-align:left;background:var(--card2);border:1px solid var(--line);color:var(--ink);padding:.55rem .7rem;border-radius:12px;box-shadow:none} .aw-chip strong{display:block;font-size:1rem} .aw-chip span{display:block;font-size:.76rem;color:var(--muted)} .aw-chip em{display:block;font-size:.7rem;color:var(--muted);font-style:normal;margin-top:.15rem} .aw-chip.on{border-color:var(--brand);background:rgba(239,106,18,.16)} .aw-chip.on strong{color:#ffb066} .aw-note{background:var(--card2);border-left:3px solid var(--brand);border-radius:8px;padding:.6rem .8rem;font-size:.86rem;margin:.8rem 0;line-height:1.5} .aw-note.warn{border-left-color:var(--warn);background:var(--warn-bg)} .aw-warn{background:var(--bad-bg);border-left:3px solid var(--bad);border-radius:8px;padding:.5rem .7rem;font-size:.85rem;margin:.5rem 0} .aw-okbox{background:var(--good-bg);border-left:3px solid var(--good);border-radius:8px;padding:.6rem .8rem;font-size:.9rem;margin:.6rem 0} .aw-ok{color:var(--good);font-size:.8rem;font-weight:700} .aw-box{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.8rem;margin-bottom:.8rem} .aw-box.ok{border-color:color-mix(in srgb,var(--good) 45%,transparent)} .aw-boxhead{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap} .aw-del{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:.75rem;padding:.2rem .5rem;margin-left:auto;box-shadow:none} .aw-check{display:flex;gap:.5rem;align-items:flex-start;font-size:.88rem;margin:.6rem 0;line-height:1.45} .aw-check input{width:auto;margin-top:.15rem;flex:none} .aw-docs{display:flex;flex-direction:column;gap:.6rem} .aw-doc{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem} .aw-doc.done{border-color:color-mix(in srgb,var(--good) 45%,transparent)} .aw-doc.self{opacity:.75} .aw-doc-h{display:flex;gap:.6rem;align-items:flex-start} .aw-doc-ic{font-size:1.1rem} .aw-doc-h em{display:block;font-size:.78rem;color:var(--muted);font-style:normal;margin-top:.15rem;line-height:1.4} .aw-doc-a{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.6rem} .aw-up{display:inline-block;background:var(--surface);padding:.45rem .8rem;border-radius:11px;font-size:.85rem;cursor:pointer;font-weight:600} .aw-file{font-size:.8rem;color:var(--brand);text-decoration:none;background:var(--chip);padding:.3rem .55rem;border-radius:8px} .aw-tagme{font-size:.75rem;color:var(--good);font-weight:700} .aw-sum{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem;margin-bottom:1rem} .aw-sum div{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:.5rem .7rem} .aw-sum span{display:block;font-size:.72rem;color:var(--muted)} .aw-sign{background:#fff;border-radius:12px;height:130px;margin:.5rem 0} .aw-sign canvas{width:100%;height:100%;display:block;border-radius:12px;touch-action:none} .aw-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0} .aw-actions button{padding:.7rem 1.1rem} .aw-links{margin-top:1rem;font-size:.85rem} .aw-links summary{cursor:pointer;color:var(--muted)} .aw-links a{display:block;color:var(--brand);margin:.3rem 0;text-decoration:none} /* =========================================================================== Startseite: Kacheln statt endloser Rolle Oben steht nur, was jetzt zaehlt. Alles Weitere liegt hierunter als flache Kachel und klappt einzeln auf – wie ein Aktenordner, immer nur ein Fach. =========================================================================== */ .hm{margin:0 0 1rem} .hm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.55rem;margin-bottom:.55rem} .hm-tiles.hidden{display:none} .hm-tile{display:flex;align-items:center;gap:.6rem;min-height:56px;text-align:left;padding:.7rem .8rem; background:var(--card);border:1px solid var(--line);border-radius:13px;color:var(--ink); box-shadow:var(--shadow-sm);font-weight:600;transition:.18s var(--ease)} .hm-tile:hover{background:var(--card);border-color:var(--line-strong);transform:translateY(-1px)} .hm-tile .hm-ic{font-size:1.35rem;line-height:1;flex:none} .hm-tile .hm-tx{display:flex;flex-direction:column;min-width:0;gap:.1rem} /* Titel darf umbrechen – „Führerschein-Antrag" soll nicht abgeschnitten werden */ .hm-tile .hm-tx strong{font-size:.9rem;font-weight:700;line-height:1.2; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hm-tile .hm-tx span{font-size:.76rem;font-weight:500;color:var(--muted);line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Aufgeklappte Kachel: orange Kante, damit man sie sofort wiederfindet */ .hm-tile.on{background:color-mix(in srgb,var(--brand) 12%,var(--card)); border-color:color-mix(in srgb,var(--brand) 45%,transparent);box-shadow:none} .hm-tile.on .hm-tx span{color:var(--brand)} /* Nur die aufgeklappte Karte ist zu sehen */ .hm-cards>.card:not(.open){display:none} .hm-cards>.card.open{animation:tabIn .22s var(--ease) both} @media(max-width:560px){ .hm-tiles{grid-template-columns:repeat(2,1fr);gap:.45rem} .hm-tile{padding:.6rem .65rem} } /* Tagesgrenze beim Buchen: wie viel Ausbildungszeit am Tag noch übrig ist */ .tg-note{font-size:.85rem;color:var(--muted);background:var(--chip);border:1px solid var(--line); border-radius:11px;padding:.5rem .7rem;margin:0 0 .7rem;line-height:1.4} .tg-note.knapp{color:var(--warn);background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 38%,transparent)} .tg-note.voll{color:var(--bad);background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 40%,transparent)} .tg-note strong{color:inherit} .tg-ueber{color:var(--bad)} /* ---- Diamantblau als zweiter Akzent ---------------------------------- Orange ist die Farbe zum Handeln (Knöpfe, „jetzt buchen"). Diamantblau zeigt Fortschritt und Erreichtes – es soll glänzen, nicht rufen. */ .diamant{color:var(--diamant)} .aw-progress i,.bar i,.progress i{background:linear-gradient(90deg,var(--diamant-dark),var(--diamant))} .theo-grid span.on{background:var(--diamant-bg);border-color:color-mix(in srgb,var(--diamant) 50%,transparent);color:var(--diamant)} .pc-tile.done{background:var(--diamant-bg);border-color:color-mix(in srgb,var(--diamant) 45%,transparent)} .hm-tile.on{background:color-mix(in srgb,var(--diamant) 14%,var(--card)); border-color:color-mix(in srgb,var(--diamant) 50%,transparent)} .hm-tile.on .hm-tx span{color:var(--diamant)} .pill strong{color:var(--diamant)} /* ---- Kosten & Rechnung: erst die Summe, dann die Belege --------------- Drei Kacheln oben beantworten die einzige Frage, die wirklich zählt: was kostet das Ganze, was ist bezahlt/abgerechnet, was steht noch aus. */ .ko-summe{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.2rem 0 .7rem} .ko-k{background:var(--field);border:1px solid var(--line);border-radius:13px;padding:.6rem .7rem;text-align:center} .ko-k .ko-l{display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem} .ko-k strong{font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--diamant)} .ko-k.ok{border-color:color-mix(in srgb,var(--good) 40%,transparent);background:var(--good-bg)} .ko-k.ok strong{color:var(--good)} .ko-k.offen{border-color:color-mix(in srgb,var(--brand) 40%,transparent);background:var(--brand-bg,color-mix(in srgb,var(--brand) 14%,transparent))} .ko-k.offen strong{color:var(--brand)} .ko-h{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem; font-size:.92rem;margin:1rem 0 .4rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)} .ko-h span{font-variant-numeric:tabular-nums;color:var(--diamant);font-weight:800} @media(max-width:420px){.ko-summe{grid-template-columns:1fr 1fr}.ko-k:first-child{grid-column:1/-1}} /* ---- Zeit anfragen ---------------------------------------------------- Absichtlich schlicht: Tag, von, bis, Dauer – dieselbe Frage wie am Telefon, nur ohne Telefon. Darunter der Stand jeder Anfrage. */ .anf-form{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:.5rem;margin:.2rem 0 .5rem} .anf-form label,.anf-notiz{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--muted)} .anf-notiz{margin-bottom:.5rem} .anf-form input,.anf-form select,.anf-notiz input{width:100%} @media(max-width:560px){.anf-form{grid-template-columns:1fr 1fr}.anf-form label:first-child{grid-column:1/-1}} .anf-liste{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.7rem;display:flex;flex-direction:column;gap:.4rem} .anf-z{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .7rem;border-radius:12px; border:1px solid var(--line);background:var(--field)} .anf-z.warte{border-color:color-mix(in srgb,var(--warn) 32%,transparent);background:var(--warn-bg)} .anf-z.ok{border-color:color-mix(in srgb,var(--good) 35%,transparent);background:var(--good-bg)} .anf-z.vor{border-color:color-mix(in srgb,var(--diamant) 45%,transparent);background:var(--diamant-bg)} .anf-z.ab{opacity:.72} .anf-ic{font-size:1.05rem;line-height:1.3} .anf-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem} .anf-tx strong{font-size:.9rem} .anf-st,.anf-no,.anf-vor{font-size:.8rem;color:var(--muted)} .anf-z.vor .anf-vor{color:var(--diamant)} .anf-tun{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center} button.small{padding:.3rem .6rem;font-size:.78rem;border-radius:9px} /* Der Fahrlehrer vergibt seine Termine selbst: das muss oben im Buchen- Bereich stehen, sonst sucht der Fahrschüler vergeblich nach freien Zeiten. */ .fg-note{font-size:.85rem;background:var(--diamant-bg);color:var(--ink); border:1px solid color-mix(in srgb,var(--diamant) 40%,transparent); border-radius:11px;padding:.55rem .75rem;margin:0 0 .7rem;line-height:1.45} .fg-note strong{color:var(--diamant)} /* ---- Mein Kalender (Fahrlehrer) -------------------------------------- Die Wahl „offen buchbar" oder „ich vergebe die Termine" ist die wichtigste Einstellung auf der Seite – deshalb zwei große Karten mit Klartext, nicht ein Auswahlfeld mit zwei Wörtern. */ .mk-modi{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.3rem 0 .9rem} @media(max-width:620px){.mk-modi{grid-template-columns:1fr}} .mk-m{display:block;cursor:pointer;padding:.7rem .85rem;border-radius:14px; border:1px solid var(--line);background:var(--field);transition:border-color .15s,background .15s} .mk-m input{position:absolute;opacity:0;pointer-events:none} .mk-m.on{border-color:color-mix(in srgb,var(--brand) 55%,transparent);background:color-mix(in srgb,var(--brand) 12%,var(--card))} .mk-t{display:block;font-weight:800;font-size:.95rem;margin-bottom:.2rem} .mk-m.on .mk-t{color:var(--brand)} .mk-b{display:block;font-size:.8rem;color:var(--muted);line-height:1.45} .mk-zeiten{display:flex;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .5rem} .mk-zeiten label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--muted)} .mk-tage{font-size:.82rem;color:var(--muted);display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;margin-bottom:.3rem} .mk-wd{padding:.22rem .55rem;border-radius:999px;border:1px solid var(--line);background:var(--chip);cursor:pointer;font-size:.8rem} .mk-wd input{display:none} .mk-wd.on{background:var(--diamant-bg);border-color:color-mix(in srgb,var(--diamant) 45%,transparent);color:var(--diamant);font-weight:700} .mk-blass{opacity:.62} .mk-form{display:flex;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .5rem} .mk-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--muted)} .mk-tagwahl{font-size:.82rem;color:var(--muted);margin-bottom:.4rem} .mk-tg{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.3rem} .mk-d{padding:.22rem .5rem;border-radius:9px;border:1px solid var(--line);background:var(--chip);cursor:pointer;font-size:.76rem} .mk-d:has(input:checked){background:var(--diamant-bg);border-color:color-mix(in srgb,var(--diamant) 45%,transparent);color:var(--diamant);font-weight:700} .mk-d input{margin-right:.25rem} .mk-liste{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.6rem;display:flex;flex-direction:column;gap:.3rem} .mk-z{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:11px;background:var(--field);border:1px solid var(--line)} .mk-zt{font-size:.85rem;font-variant-numeric:tabular-nums} .mk-zw{flex:1;font-size:.78rem;color:var(--muted)} /* „Auf Anfrage": der Fahrlehrer vergibt die Termine selbst und hat für diesen Tag noch nichts freigegeben. Das ist kein ausgebuchter Tag – deshalb auch nicht rot, sondern in Diamantblau: hier lohnt sich die Frage. */ .bcal-day.freigabe{background:var(--diamant-bg);border-color:color-mix(in srgb,var(--diamant) 40%,transparent);color:var(--diamant)} .bcal-day.freigabe .bc-num{color:var(--diamant)} .bc-frg{font-size:.6rem;letter-spacing:.02em;color:var(--diamant);opacity:.9} .bcal-legend .lg.frg{background:var(--diamant)} /* Ein Schalter, der erklärt, was er tut – nicht nur ein Häkchen mit zwei Wörtern daneben. Alles am Kalender ist freiwillig: wer nichts anrührt, arbeitet genau wie vorher weiter. */ .mk-schalter{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .75rem;margin:.4rem 0 .2rem; border-radius:12px;border:1px solid var(--line);background:var(--field);cursor:pointer} .mk-schalter input{margin-top:.15rem;flex:none} .mk-schalter strong{display:block;font-size:.9rem} .mk-schalter em{display:block;font-style:normal;font-size:.8rem;color:var(--muted);line-height:1.45;margin-top:.15rem} /* ---- Assistent: „Was fehlt noch?" ------------------------------------ Fehlende Unterschriften sollen auffallen, ohne dass die App schreit. Rot pulst langsam – zweimal, dann ist Ruhe. Wer die Farbe nicht unterscheiden kann, liest dasselbe im Text. */ .as-banner{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;margin:0 0 .8rem; border-radius:14px;border:1px solid var(--line);background:var(--field)} .as-banner.gelb{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 42%,transparent)} .as-banner.rot{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 50%,transparent); animation:as-puls 2.2s ease-in-out 2} @keyframes as-puls{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--bad) 18%,transparent)}} @media(prefers-reduced-motion:reduce){.as-banner.rot{animation:none}} .as-b-ic{font-size:1.3rem;line-height:1} .as-b-tx{flex:1;min-width:0;display:flex;flex-direction:column} .as-b-tx strong{font-size:.95rem} .as-banner.rot .as-b-tx strong{color:var(--bad)} .as-banner.gelb .as-b-tx strong{color:var(--warn)} .as-b-tx span{font-size:.79rem;color:var(--muted)} .as-kopf{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--card); border:1px solid var(--line);border-left:5px solid var(--muted);border-radius:15px;padding:.85rem 1rem;margin:0 0 1rem} .as-kopf.gut{border-left-color:var(--good)} .as-kopf.gelb{border-left-color:var(--warn)} .as-kopf.rot{border-left-color:var(--bad)} .as-zahl{text-align:center;min-width:4.6rem;padding:.3rem .6rem;border-radius:13px;background:var(--field)} .as-zahl strong{display:block;font-size:1.8rem;line-height:1;font-variant-numeric:tabular-nums} .as-zahl span{font-size:.68rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase} .as-kopf.rot .as-zahl strong{color:var(--bad)} .as-kopf.gelb .as-zahl strong{color:var(--warn)} .as-kopf.gut .as-zahl strong{color:var(--good)} .as-lage{flex:1;min-width:12rem} .as-lage .as-t{font-weight:800;font-size:1rem} .as-karte h2{margin-top:0} .as-z{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .7rem;border-radius:12px; border:1px solid var(--line);background:var(--field);margin:.35rem 0} .as-z.gelb{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 32%,transparent)} .as-z.rot{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 42%,transparent)} .as-ic{font-size:1.05rem;line-height:1.35} .as-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem} .as-tx strong{font-size:.9rem} .as-wo{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums} .as-rat{font-size:.79rem;color:var(--muted);line-height:1.45} .as-z.rot .as-wo{color:var(--bad)} .as-tun{display:flex;align-items:center} /* ---- „Bei wem fahre ich?" -------------------------------------------- Sind alle Fahrschüler in einem Topf, ist das oft egal – deshalb ist „Egal, wer Zeit hat" die Vorgabe und zeigt die meisten Termine. Wer lieber bei einem bestimmten fährt, grenzt hier ein. */ .fl-wahl{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin:0 0 .7rem} .flw-l{font-size:.78rem;color:var(--muted);margin-right:.15rem} .flw{padding:.26rem .65rem;border-radius:999px;font-size:.8rem;font-weight:600; background:var(--chip);color:var(--muted);border:1px solid var(--line)} .flw em{font-style:normal;opacity:.7;font-size:.74rem} .flw.on{background:var(--diamant-bg);border-color:color-mix(in srgb,var(--diamant) 50%,transparent);color:var(--diamant)} .slot-fl{font-size:.75rem;color:var(--muted);margin-top:.1rem} .slot-fl.mehr{color:var(--diamant)} .anf-alle{font-size:.7rem;font-weight:600;padding:.08rem .4rem;border-radius:999px; background:var(--diamant-bg);color:var(--diamant);border:1px solid color-mix(in srgb,var(--diamant) 40%,transparent)} .mk-passt{align-self:flex-end;font-size:.8rem;color:var(--diamant);padding-bottom:.35rem} .mk-passt.leer{color:var(--bad)} /* ---- Übungsorte an der Ausbildungskarte ------------------------------- Ein Haken sagt „geübt", der Ort sagt „wo". Beim nächsten Mal sieht man, wo schon geübt wurde – und fährt bewusst woanders hin. */ .st-ort{font-size:.95rem} .st-ort.on{background:var(--diamant-bg);border-color:color-mix(in srgb,var(--diamant) 50%,transparent)} .mk-ort{display:inline-block;margin-inline-start:.4rem;font-size:.72rem;color:var(--diamant)} .ort-pop{position:fixed;inset:0;z-index:120;background:var(--veil,rgba(6,10,18,.72)); display:flex;align-items:center;justify-content:center;padding:1rem} .ort-card{background:var(--card);border:1px solid var(--line);border-radius:17px; padding:1rem 1.1rem;max-width:26rem;width:100%;max-height:88vh;overflow:auto} .ort-card h3{margin:0 0 .2rem} .ort-card input[type=text],.ort-card input:not([type]){width:100%} .ort-alt{margin:.3rem 0 .6rem;display:flex;gap:.3rem;flex-wrap:wrap;align-items:center} .ort-chip{padding:.2rem .55rem;border-radius:999px;font-size:.78rem;background:var(--chip); border:1px solid var(--line);color:var(--muted)} .ort-chip:hover{border-color:var(--diamant);color:var(--diamant)} /* ---- Zusammenfassung vor dem Unterschreiben -------------------------- Das Gespräch am Ende der Fahrstunde, schwarz auf weiß. Was hier nicht steht, steht auch nicht auf dem Nachweis. */ .mk-zus{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;margin-top:.4rem} .zus-kopf{border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:.6rem} .zus-t{font-size:1.05rem;font-weight:800} .zus-sub{font-size:.82rem;color:var(--muted);margin-top:.1rem} .zus-warn{background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent); border-radius:11px;padding:.5rem .7rem;margin-bottom:.6rem;font-size:.85rem;line-height:1.45} .zus-zeile{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0;font-size:.88rem} .zus-zeile span{color:var(--muted)} .zus-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:.88rem; margin:.9rem 0 .35rem;padding-bottom:.25rem;border-bottom:1px solid var(--line)} .zus-h span{font-weight:600;color:var(--muted);font-size:.78rem} .zus-sec{margin-bottom:.5rem} .zus-sec-t{font-size:.76rem;color:var(--muted);letter-spacing:.03em;margin:.35rem 0 .15rem} .zus-pt{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;font-size:.85rem;padding:.16rem 0} .zus-dot{flex:none} .zus-pt em{font-style:normal;color:var(--muted);font-size:.78rem} .zus-ort{font-size:.74rem;color:var(--diamant);margin-inline-start:auto} .zus-ort.warn{color:var(--warn)} .zus-fb{background:var(--field);border:1px solid var(--line);border-radius:11px; padding:.5rem .7rem;font-size:.86rem;line-height:1.5;white-space:pre-wrap} /* Vorlauf und Längen am Freigabe-Fenster */ .mk-vorlauf{margin:.5rem 0} .mk-vorlauf label{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:var(--muted);max-width:22rem} .mk-vorlauf .hint{display:block;margin-top:.25rem} .mk-laengen{font-size:.82rem;color:var(--muted);margin:.5rem 0} .mk-lg{display:flex;gap:.35rem;flex-wrap:wrap;margin:.3rem 0} .mk-l{padding:.24rem .6rem;border-radius:999px;border:1px solid var(--line);background:var(--chip); cursor:pointer;font-size:.8rem} .mk-l:has(input:checked){background:var(--diamant-bg);border-color:color-mix(in srgb,var(--diamant) 45%,transparent); color:var(--diamant);font-weight:700} .mk-l input{margin-right:.25rem} /* ---- Termin gedrückt halten und verschieben --------------------------- Auf dem Tablet der natürliche Griff: Finger drauf, kurz halten, und die freien Zeiten erscheinen. Man kann den Finger hinziehen und loslassen oder danach antippen – Ziehen über eine scrollende Liste hakt sonst. */ .bitem.ziehbar{touch-action:pan-y;cursor:grab} .bitem.zieht{outline:2px solid var(--brand);outline-offset:2px; background:color-mix(in srgb,var(--brand) 12%,var(--card));cursor:grabbing} .zz-leiste{position:fixed;left:0;right:0;bottom:0;z-index:140; background:var(--card);border-top:1px solid var(--line); box-shadow:0 -10px 30px var(--sh,rgba(0,0,0,.45)); padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0)); transform:translateY(110%);transition:transform .24s cubic-bezier(.2,.8,.3,1)} .zz-leiste.da{transform:translateY(0)} .zz-kopf{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem} .zz-kopf strong{font-size:.95rem} .zz-kopf span{font-size:.8rem;color:var(--muted)} .zz-x{margin-inline-start:auto;background:none;border:1px solid var(--line);color:var(--muted); border-radius:9px;padding:.2rem .6rem;font-size:.8rem;cursor:pointer} .zz-tage{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.5rem} .zz-tag{padding:.24rem .6rem;border-radius:999px;font-size:.8rem;background:var(--chip); border:1px solid var(--line);color:var(--muted)} .zz-tag.on{background:var(--diamant-bg);border-color:color-mix(in srgb,var(--diamant) 45%,transparent);color:var(--diamant);font-weight:700} .zz-ziele{display:flex;gap:.4rem;flex-wrap:wrap;max-height:34vh;overflow:auto} .zz-ziel{display:flex;flex-direction:column;align-items:center;gap:.05rem;min-width:5.2rem; padding:.45rem .6rem;border-radius:12px;background:var(--good-bg); border:1px solid color-mix(in srgb,var(--good) 38%,transparent);cursor:pointer} .zz-ziel strong{font-size:1rem;color:var(--good);font-variant-numeric:tabular-nums} .zz-ziel span{font-size:.72rem;color:var(--muted)} .zz-ziel.drueber{transform:scale(1.07);border-color:var(--brand);background:color-mix(in srgb,var(--brand) 18%,var(--card))} .zz-ziel.drueber strong{color:var(--brand)} @media(prefers-reduced-motion:reduce){.zz-leiste{transition:none}.zz-ziel.drueber{transform:none}} /* ---- Anmeldung: Geschlecht, Geburtsdatum-Drehrad, Freischaltcode ---------- Farben kommen ausschliesslich aus den Tokens (var(--…)) – feste Dunkelwerte wuerden den Hell-Modus zerlegen. */ .sw-foot{text-align:center;margin-top:.6rem} .sw-foot .linklike{font-size:.86rem;color:var(--muted)} .sw-resume{background:color-mix(in srgb,var(--info) 14%,var(--card));border:1px solid var(--info); border-radius:11px;padding:.55rem .7rem;font-size:.9rem;margin:0 0 .8rem} .sw-note{background:color-mix(in srgb,var(--good) 12%,var(--card));border:1px solid var(--good); border-radius:11px;padding:.6rem .75rem;font-size:.88rem;line-height:1.5;margin-top:.7rem} .sw-steps{margin:.6rem 0 .2rem;padding-left:1.2rem;display:grid;gap:.35rem;font-size:.92rem} /* Geschlecht: drei grosse Flaechen statt eines Klappmenues – auf dem Tablet mit dem Daumen zu treffen. */ .sw-gens{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .sw-gen{display:grid;gap:.15rem;justify-items:center;padding:.7rem .3rem;border-radius:13px; border:2px solid var(--line);background:var(--field);color:var(--ink);font-weight:700;font-size:.86rem;cursor:pointer} .sw-gen span{font-size:1.5rem;line-height:1} .sw-gen.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 16%,var(--card));color:var(--brand)} .sw-gen:focus-visible{outline:3px solid var(--brand);outline-offset:2px} /* Geburtsdatum als Drehrad: drei Rollen, die Mitte rastet ein. Deutlich angenehmer als 18 Jahre im Kalender zurueckzublaettern. */ .dr{position:relative;display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:.5rem; background:var(--field);border:1px solid var(--line);border-radius:14px;padding:.5rem} .dr-col{min-width:0} .dr-lab{text-align:center;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem} .dr-wheel{height:168px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none; -webkit-overflow-scrolling:touch;text-align:center;position:relative;z-index:1} .dr-wheel::-webkit-scrollbar{display:none} .dr-pad{height:63px} /* damit erster/letzter Wert die Mitte erreicht */ .dr-i{height:42px;line-height:42px;scroll-snap-align:center;font-size:1.02rem;color:var(--muted); border-radius:9px;cursor:pointer;transition:color .12s,transform .12s;font-variant-numeric:tabular-nums} .dr-i.on{color:var(--ink);font-weight:800;font-size:1.16rem;transform:scale(1.04)} .dr-mark{position:absolute;left:.5rem;right:.5rem;top:50%;height:44px;margin-top:-10px;border-radius:11px; border:2px solid var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);pointer-events:none;z-index:0} .dr-out{text-align:center;margin-top:.5rem;font-size:.95rem;color:var(--muted)} .dr-out b{color:var(--ink)} @media(prefers-reduced-motion:reduce){.dr-i{transition:none}} /* Freischaltcode: gross, mit Abstand zwischen den Zeichen – man tippt ihn ab. */ .code-in{text-align:center;font-size:1.4rem;letter-spacing:.22em;font-weight:800; font-family:ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase} .setpw{max-width:100%} /* ---- Antragsverfolgung, Kontrollblatt -------------------------------------- „Wo liegt mein Antrag?" ist die haeufigste Frage am Telefon. Hier beantwortet sie sich von selbst – wie eine Sendungsverfolgung. */ .weg{border:1px solid var(--line);border-radius:14px;padding:.8rem .85rem;margin:.8rem 0; background:var(--card2,rgba(127,127,127,.05))} .weg-h{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;font-weight:800;font-size:.98rem} .weg-z{font-size:.78rem;font-weight:600;color:var(--muted);white-space:nowrap} .weg-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:.55rem 0 .7rem} .weg-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--good)); transition:width .5s ease} .weg-quer{border-radius:11px;padding:.5rem .7rem;font-size:.9rem;margin-bottom:.6rem;line-height:1.5} .weg-quer.warn{background:color-mix(in srgb,var(--warn) 16%,var(--card));border:1px solid var(--warn)} .weg-quer.rot{background:color-mix(in srgb,var(--bad) 16%,var(--card));border:1px solid var(--bad)} .weg-ps{font-size:.88rem;color:var(--muted);margin-bottom:.5rem} .weg-liste{list-style:none;margin:0;padding:0;display:grid;gap:.1rem} /* Zugeklappt zeigen wir nur die aktuelle Station – sonst ist die Karte lang. */ .weg-liste.zu .weg-i:not(.jetzt){display:none} .weg-i{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;position:relative} .weg-i::before{content:'';position:absolute;left:12px;top:26px;bottom:-4px;width:2px;background:var(--line)} .weg-i:last-child::before{display:none} .weg-liste.zu .weg-i::before{display:none} .weg-p{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.85rem; border:2px solid var(--line);background:var(--card);position:relative;z-index:1} .weg-i.fertig .weg-p{background:var(--good);border-color:var(--good);color:#fff;font-weight:900} .weg-i.jetzt .weg-p{background:color-mix(in srgb,var(--brand) 20%,var(--card));border-color:var(--brand)} .weg-i.fertig::before{background:var(--good)} .weg-t{min-width:0;display:grid;gap:.1rem} .weg-t strong{font-size:.93rem;font-weight:700} .weg-i.offen .weg-t strong{color:var(--muted);font-weight:600} .weg-t em{font-style:normal;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums} .weg-x{font-size:.86rem;color:var(--muted);line-height:1.5;margin-top:.15rem} /* Kontrollblatt: der rote Knopf. Er sagt immer, WAS fehlt – ein roter Knopf ohne Grund macht nur Druck. */ .kb-rot{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;margin:.2rem 0 .8rem; border:2px solid var(--bad);border-radius:14px;padding:.7rem .8rem;cursor:pointer; background:color-mix(in srgb,var(--bad) 14%,var(--card));color:var(--ink)} .kb-rot .kb-sym{font-size:1.5rem;line-height:1} .kb-rot .kb-txt{flex:1;min-width:0;display:grid;gap:.1rem} .kb-rot .kb-txt strong{font-size:.95rem} .kb-rot .kb-txt em{font-style:normal;font-size:.82rem;color:var(--muted)} .kb-rot .kb-pfeil{font-size:1.4rem;color:var(--bad);font-weight:800} .kb-ok{border:1px solid var(--good);border-radius:12px;padding:.5rem .7rem;margin:.2rem 0 .8rem; background:color-mix(in srgb,var(--good) 12%,var(--card));font-size:.9rem;font-weight:600} .kb-oben{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start} .kb-bildbox{display:grid;gap:.4rem;justify-items:center;width:150px} .kb-bild{width:150px;height:190px;object-fit:cover;border-radius:10px;border:2px solid var(--line);background:var(--field)} .kb-bild.leer{display:grid;place-items:center;gap:.2rem;font-size:2rem;color:var(--muted); border-style:dashed;border-color:var(--bad)} .kb-bild.leer span{font-size:.76rem;font-weight:700;color:var(--bad)} .kb-regel{font-size:.74rem;text-align:center;line-height:1.4} .kb-felder{min-width:0} @media(max-width:560px){ .kb-oben{grid-template-columns:1fr} .kb-bildbox{width:100%;justify-items:stretch} .kb-bild{width:100%;max-width:220px;height:auto;aspect-ratio:35/45;justify-self:center} } /* ---- Benachrichtigungen anbieten ------------------------------------------ */ .pushask{max-width:100%} .push-list{list-style:none;margin:.7rem 0;padding:0;display:grid;gap:.4rem} .push-list li{background:var(--card2,rgba(127,127,127,.08));border:1px solid var(--line); border-radius:10px;padding:.5rem .7rem;font-size:.9rem} .push-ios{background:color-mix(in srgb,var(--info) 14%,var(--card));border:1px solid var(--info); border-radius:11px;padding:.6rem .75rem;font-size:.88rem;line-height:1.55;margin:.2rem 0 .3rem} /* ---- Meine Akte ----------------------------------------------------------- */ .ak h4.ak-h{margin:1.1rem 0 .4rem;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .ak h4.ak-h:first-of-type{margin-top:.3rem} .ak-grid{display:grid;gap:.15rem;border:1px solid var(--line);border-radius:12px;overflow:hidden} .ak-z{display:flex;justify-content:space-between;gap:.8rem;padding:.45rem .7rem;background:var(--card2,rgba(127,127,127,.05))} .ak-z span{color:var(--muted);font-size:.86rem} .ak-z strong{font-size:.9rem;text-align:right;min-width:0;overflow-wrap:anywhere} .ak-liste{display:grid;gap:.15rem;border:1px solid var(--line);border-radius:12px;overflow:hidden} .ak-i{display:flex;justify-content:space-between;gap:.8rem;padding:.45rem .7rem;background:var(--card2,rgba(127,127,127,.05));font-size:.88rem} .ak-i.col{flex-direction:column;gap:.1rem} .ak-i.muted{color:var(--muted);justify-content:center} .ak-i em{font-style:normal;color:var(--muted);font-size:.82rem;text-align:right;white-space:nowrap} .ak-i.col em{text-align:left;white-space:normal;line-height:1.45} @media(max-width:480px){ .ak-z,.ak-i{flex-direction:column;gap:.1rem} .ak-z strong,.ak-i em{text-align:left;white-space:normal} } /* ---------- Anerkennung (Ausbildungsvertrag, digital) ---------- */ /* Der Text kommt aus den Einstellungen und kann lang sein: eigener Rollbereich, damit die Knöpfe darunter erreichbar bleiben. Farben nur über Tokens – sonst bricht der Hell-Modus. */ .an-text{max-height:46vh;overflow:auto;background:var(--field);border:1px solid var(--line); border-radius:12px;padding:.8rem .9rem;font-size:.92rem;line-height:1.55;color:var(--ink); -webkit-overflow-scrolling:touch} .an-text p{margin:0 0 .6rem} .an-text p:last-child{margin-bottom:0} .an-done{background:var(--good-bg);color:var(--good);border-radius:12px;padding:.6rem .8rem; font-weight:700;margin:.6rem 0} /* Offen = es fehlt noch etwas. Dieselbe Sprache wie beim roten Kontrollblatt-Knopf. */ .hint.an-offen{color:var(--brand);font-weight:600}