/* app.css — Feedback-PWA (DEV-364/365). Farb-/Typo-Variablen 1:1 aus backend/webapp/konto.html übernommen (verbindliche Referenz laut Auftrag) — eigene Werte hier wären eine zweite, auseinanderlaufende Quelle. Chip-Muster (radius 8px, aria-pressed) aus backend/website/feedback/ (bestehende Konvention im Projekt), keine Pillen-Badges/Mono-Kicker/Nummerierung. */ :root{ color-scheme: light; --tinte:#111111; --gruen:#1D6B3A; --braun3:#3A362E; --text2:#4A463E; --leise:#6B655C; --leise2:#8A8378; --rot-dunkel:#8F2E2E; --rot:#B23B3B; --sand:#D9D3C6; --linie:#E3DED3; --rosa:#E7C9BC; --gruen-bg:#E9F2EA; --papier2:#EFEBE1; --papier3:#EFECE5; --sand2:#F3EFE4; --papier:#F4F2ED; --rosa-bg:#FBF1EC; --weiss:#FFFFFF; } /* [Advisor-Fund, erster echter Testlauf] Mehrere Bausteine setzen display:flex/block auf einem Element, das per JS abwechselnd .hidden=true/false geschaltet wird (Composer-Reihe beim Mikrofon-Wechsel, Anhang-Leiste, "Jetzt an Stefan senden" …) — die eigene display-Regel hat in der Kaskade Vorrang vor der UA-Regel "[hidden]{display:none}" (gleiche Spezifität, kommt aber später), das Element blieb trotz hidden-Attribut sichtbar. Eine globale Vorrang-Regel statt N Einzelfixe.*/ [hidden]{display:none !important} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--papier);color:var(--tinte); font-family:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500; -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh; padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)} a{color:var(--tinte)} a:hover{color:var(--leise)} :focus-visible{outline:2px solid var(--tinte);outline-offset:2px} button,input,textarea{font-family:inherit} input::placeholder,textarea::placeholder{color:var(--leise2)} button{cursor:pointer} button[disabled]{cursor:not-allowed} /* [Design-QA] Vorher opacity:.45 auf Vordergrund UND Hintergrund zugleich — der wirksame Kontrast hing dadurch vom jeweiligen Seitenhintergrund ab und war nicht garantiert ≥4,5:1. Eigene, feste Farben je Zustand (getestet: --leise auf --papier2 ≈ 4,85:1) statt Transparenz. */ .btn-primary[disabled],.btn-secondary[disabled],.btn-danger[disabled],.composer-senden[disabled]{ opacity:1;background:var(--papier2);color:var(--leise);border-color:var(--papier2)} h1,h2,h3{margin:0} ul{margin:0;padding:0;list-style:none} @media (prefers-reduced-motion: no-preference){ .spinner{animation:fb-spin 1s linear infinite} .denkt-punkte span{animation:fb-punkt 1.2s ease-in-out infinite} .denkt-punkte span:nth-child(2){animation-delay:.2s} .denkt-punkte span:nth-child(3){animation-delay:.4s} } @keyframes fb-spin{to{transform:rotate(360deg)}} @keyframes fb-punkt{0%,80%,100%{opacity:.25}40%{opacity:1}} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Sprunglink "Zum Inhalt springen": unsichtbar, bis er per Tastatur den Fokus bekommt. */ a.sr-only:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;margin:0;clip:auto; padding:10px 14px;background:var(--tinte);color:var(--papier);border-radius:8px;z-index:20} /* Sprungmarken (ui.js sprungmarkeHtml, Anmeldeansichten): nur Fokusziel, kein sichtbarer Rahmen. */ [tabindex="-1"]:focus{outline:none} .stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px} .karte{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;padding:22px; width:100%;max-width:380px;box-shadow:0 1px 2px rgba(17,17,17,.15)} .h1{font-size:21px;font-weight:700;letter-spacing:-0.01em;margin:0 0 4px} .sub{font-size:14px;color:var(--leise);margin:0 0 18px;line-height:1.5} .label{display:block;font-size:12.5px;font-weight:600;color:var(--leise);margin:14px 0 6px} .eingabe{box-sizing:border-box;width:100%;min-height:46px;padding:0 14px;font-size:16px; color:var(--tinte);background:var(--weiss);border:1px solid var(--sand);border-radius:10px} .eingabe:focus-visible{outline:2px solid var(--tinte);outline-offset:1px} .btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:46px; padding:0 20px;border-radius:999px;background:var(--tinte);color:var(--papier);border:none; font-size:15px;font-weight:600} .btn-primary:hover:not([disabled]){background:var(--braun3)} .btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:46px; padding:0 20px;border-radius:999px;background:transparent;color:var(--tinte); border:1px solid var(--sand);font-size:15px;font-weight:600;text-decoration:none} .btn-secondary:hover:not([disabled]){background:var(--papier2)} .btn-danger{display:inline-flex;align-items:center;justify-content:center;min-height:46px; padding:0 20px;border-radius:999px;background:var(--rot);color:var(--weiss);border:none; font-size:15px;font-weight:600} .btn-danger:hover:not([disabled]){background:var(--rot-dunkel)} .btn-block{width:100%;margin-top:14px} /* [M4, Korrekturrunde] Sichtbar klein bleiben (passt neben Marke/Bubble/Fehlertext), Tipp-Fläche per unsichtbarem ::after trotzdem auf 44×44 — gleiche Technik wie .anhang-vorschau .entfernen oben. Deckt Abmelden UND die anderen .btn-klein-Knöpfe (Nochmal/Erneut senden/Abbrechen) ab. */ .btn-klein{min-height:36px;padding:0 14px;font-size:13.5px;position:relative} .btn-klein::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px; transform:translate(-50%,-50%)} .btn-text{background:none;border:none;padding:0;font-size:13.5px;color:var(--leise); text-decoration:underline;text-underline-offset:3px;min-height:44px} .fehler{font-size:13.5px;color:var(--rot);margin:10px 0 0;min-height:1px} .hinweis{font-size:13px;color:var(--leise);margin:10px 0 0;line-height:1.5} .warnbox{display:flex;gap:10px;align-items:flex-start;background:var(--rosa-bg); border:1px solid var(--rosa);color:var(--rot-dunkel);border-radius:10px;padding:12px 14px; font-size:13.5px;line-height:1.5} .sdk-fehler{align-items:center;justify-content:space-between;margin:12px 0 0} .sdk-fehler[hidden]{display:none} .sdk-laedt{text-align:center;margin:12px 0 0} .okbox{background:var(--gruen-bg);border:1px solid var(--gruen);color:var(--gruen); border-radius:10px;padding:12px 14px;font-size:13.5px;margin:10px 0} .oder{display:flex;align-items:center;gap:10px;margin:20px 0 6px} .oder span:first-child,.oder span:last-child{flex:1;height:1px;background:var(--linie)} .oder span:nth-child(2){font-size:12.5px;color:var(--leise)} /* [DEV-382] Rechtslinks (Datenschutz/Impressum): dezente Zeile, Textlinks mit 44 px Tastfläche. */ .rechtslinks{display:flex;justify-content:center;flex-wrap:wrap;column-gap:6px;margin:8px 0 0;font-size:13px} .rechtslinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--leise); text-decoration:underline;text-underline-offset:3px} .app-shell > .rechtslinks{margin:0;padding:0 16px calc(env(safe-area-inset-bottom) + 8px)} /* ---------- Layout: Kopfzeile + Liste ---------- */ .app-shell{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column} .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:calc(env(safe-area-inset-top) + 14px) 16px 14px;border-bottom:1px solid var(--linie); background:var(--weiss);position:sticky;top:0;z-index:5} .topbar .marke{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px} .topbar .marke img{height:22px;width:auto} .inhalt{flex:1;padding:18px 16px 32px} /* ---------- Owner-Umschalter Meine Meldungen / Eingang (DEV-368) ---------- */ .tab-umschalter{display:flex;gap:4px;background:var(--papier2);border-radius:999px;padding:3px} /* [M4, Korrekturrunde] 36→44px echte Höhe (kein ::after, die Pille selbst ist der ganze sichtbare Tab — eine unsichtbar vergrößerte Fläche würde hier nur in den Nachbar-Tab hineinragen). */ .tab-link{padding:6px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--leise); text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .tab-link[aria-current="page"]{background:var(--tinte);color:var(--papier)} .offline-banner{background:var(--rosa-bg);color:var(--rot-dunkel);border-bottom:1px solid var(--rosa); padding:9px 16px;font-size:13.5px;text-align:center} .offline-banner[hidden]{display:none} .ladezustand{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px 16px; color:var(--leise);font-size:14px;text-align:center} .spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--sand); border-top-color:var(--tinte)} .leerzustand{padding:60px 16px 20px;text-align:center;color:var(--leise)} .leerzustand h2{font-size:17px;color:var(--tinte);margin-bottom:8px} .fehlerzustand{padding:40px 16px;text-align:center} .fehlerzustand p{color:var(--rot-dunkel);margin:0 0 14px} .meldungsliste{display:flex;flex-direction:column;gap:2px} .meldungszeile{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left; background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:14px 16px; margin-bottom:8px} .meldungszeile:hover{background:var(--papier3)} .meldungszeile .punkt{flex:none;width:9px;height:9px;border-radius:50%;background:var(--rot); margin-top:6px;visibility:hidden} .meldungszeile[data-ungelesen="true"] .punkt{visibility:visible} .meldungszeile .zeileninhalt{flex:1;min-width:0} /* [Design-QA] Bis zu 2 Zeilen statt hart in einer Zeile abgeschnitten — das title-Attribut (per JS gesetzt) liefert den vollen Text zusätzlich als Tooltip, falls er auch dann noch kappt. */ .meldungszeile .titelzeile{font-size:15px;font-weight:600;color:var(--tinte); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .meldungszeile[data-ungelesen="true"] .titelzeile{font-weight:700} /* [M1, Korrekturrunde] Eigene Vorschauzeile NEBEN dem Titel (nicht statt ihm) — anders als der Titel bewusst EINZEILIG gekürzt, sie ist reiner Zusatzkontext, kein gleichrangiger zweiter Titel. */ /* display:block: das Element ist ein ; overflow und text-overflow wirken nur an Blockelementen, sonst lief die Zeile rechts aus der Karte heraus. */ .meldungszeile .vorschauzeile{display:block;font-size:13px;color:var(--leise);margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .meldungszeile .metazeile{font-size:12.5px;color:var(--leise);margin-top:4px; display:flex;gap:8px;flex-wrap:wrap} /* [W2] Knopf "Neue Meldung" in Meine Meldungen ist ein : display:block hob das inline-flex des Knopfs auf (Text klebte oben), der Link-Unterstrich blieb, und a:hover färbte den Text auf dunklem Grund grau. Flex zentriert wieder, min-height 46 px bleibt Tastziel. */ .fab-neu{display:flex;align-items:center;justify-content:center;width:100%;margin:0 0 18px; text-align:center;text-decoration:none} .fab-neu:hover{color:var(--papier)} /* ---------- Neue Meldung: Chips ---------- */ .chip-reihe{display:flex;flex-direction:column;gap:10px;margin:14px 0} .chip-kachel{display:block;width:100%;text-align:left;border-radius:10px; border:1px solid var(--sand);background:var(--weiss);padding:14px 16px;font-family:inherit} .chip-kachel[aria-pressed="true"]{border-color:var(--tinte);background:var(--tinte);color:var(--papier)} /* [Design-QA] Titel und Erklärtext standen ohne display:block nebeneinander in einer Zeile statt in eigenen Zeilen (beides , also standardmäßig inline). */ .chip-kachel .chip-titel{display:block;font-size:15px;font-weight:700;margin-bottom:4px} .chip-kachel .chip-text{font-size:13px;margin-top:4px;color:var(--leise);line-height:1.45} .chip-kachel[aria-pressed="true"] .chip-text{color:var(--sand2)} /* ---------- Chat ---------- */ .chat-shell{display:flex;flex-direction:column;min-height:100vh} .chat-kopf{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 12px 12px; border-bottom:1px solid var(--linie);background:var(--weiss);position:sticky;top:0;z-index:5} .chat-kopf .zurueck{background:none;border:none;padding:8px;min-height:44px;min-width:44px; display:flex;align-items:center;justify-content:center} .chat-kopf .titelblock{flex:1;min-width:0} /* [Design-QA] Bis zu 2 Zeilen statt hart abgeschnitten; .voll (Eingang-Detail, Owner-Sicht) hebt die Begrenzung ganz auf — dort soll IMMER der volle Titel stehen. */ .chat-kopf .titel{font-size:15.5px;font-weight:700; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .chat-kopf .titel.voll{-webkit-line-clamp:unset;overflow:visible;display:block} .chat-kopf .status{font-size:12.5px;color:var(--leise)} .chat-kopf .menuebtn{background:none;border:none;min-height:44px;min-width:44px;font-size:20px; color:var(--leise)} .chat-menue{position:absolute;right:12px;top:56px;background:var(--weiss);border:1px solid var(--linie); border-radius:10px;box-shadow:0 1px 2px rgba(17,17,17,.15);padding:6px;z-index:6;min-width:220px} .chat-menue button{display:block;width:100%;text-align:left;background:none;border:none; padding:10px 12px;font-size:14px;border-radius:8px;min-height:44px} .chat-menue button:hover{background:var(--papier2)} .chat-menue button.gefahr{color:var(--rot)} .abschluss-banner{background:var(--papier2);color:var(--text2);border-bottom:1px solid var(--linie); padding:10px 16px;font-size:13.5px;text-align:center} .nachrichten{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:12px} .bubble-reihe{display:flex;flex-direction:column;max-width:82%} .bubble-reihe.nutzer{align-self:flex-end;align-items:flex-end} .bubble-reihe.ki,.bubble-reihe.stefan{align-self:flex-start;align-items:flex-start} /* [DEV-389] Systemhinweis im Verlauf (absender "system"): zentriert, ohne Blase, bewusst leise. */ .system-hinweis{align-self:center;max-width:82%;margin:2px 0;text-align:center;font-size:12.5px; line-height:1.4;color:var(--leise)} .bubble-label{font-size:11.5px;font-weight:600;color:var(--leise);margin:0 4px 4px} .bubble{border-radius:14px;padding:10px 14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap; overflow-wrap:anywhere} .bubble-reihe.nutzer .bubble{background:var(--tinte);color:var(--papier);border-bottom-right-radius:4px} .bubble-reihe.ki .bubble{background:var(--papier2);color:var(--tinte);border-bottom-left-radius:4px} .bubble-reihe.stefan .bubble{background:var(--gruen-bg);color:var(--braun3);border-bottom-left-radius:4px} /* [K4, Korrekturrunde D4] Ein winziges Bild (z. B. 1×1-Testbild) rendert ohne Mindestgröße als kaum sichtbarer Punkt -- min-width/min-height heben es auf eine erkennbare Fläche, object-fit verhindert Verzerrung, der Papierton dahinter füllt den Rand bei nicht passendem Seitenverhältnis. */ .bubble img{max-width:100%;min-width:64px;min-height:48px;object-fit:contain; background:var(--papier2);border-radius:10px;display:block} .bubble video{max-width:100%;border-radius:10px;display:block} .bubble audio{width:min(260px,100%)} .bubble .dateilink{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:underline} .bubble .transkript{margin-top:8px;padding-top:8px;border-top:1px solid rgba(17,17,17,.12); font-size:13px;font-style:italic} .bubble .transkript-status{font-size:12.5px;color:var(--leise);margin-top:6px} /* [K3, Korrekturrunde D4] --leise (#6B655C) auf der dunklen Nutzer-Blase (--tinte, #111111) kommt nur auf ~3,3:1 -- WCAG AA verlangt 4,5:1 für normalen Text. --leise2 ist dieselbe gedeckte Palette, nur hell genug (~5,0:1 gegen #111111). Betrifft den "Nochmal"-Knopf (.btn-text), der als Teil von .transkript-status genau in dieser Blase sitzt. */ .bubble-reihe.nutzer .transkript-status, .bubble-reihe.nutzer .btn-text{color:var(--leise2)} /* [DEV-393] Antwortvorschläge der KI: Chip-Reihe unter der letzten KI-Nachricht. Bewusst flach (kein Schatten, keine Karte), 44 px hohe Tippfläche, Rand in --leise2 (~3,2:1 auf Papier), damit die Fläche als Knopf erkennbar bleibt, Text in --tinte. Umbrechend, lange Texte brechen im Chip um. */ .antwort-vorschlaege{display:flex;flex-wrap:wrap;gap:8px} .antwort-chip{min-height:44px;max-width:100%;padding:8px 16px;border-radius:10px; border:1px solid var(--leise2);background:var(--weiss);color:var(--tinte);font-size:14.5px; font-weight:600;line-height:1.35;text-align:left;overflow-wrap:anywhere} .antwort-chip:hover:not([disabled]){background:var(--papier2)} .antwort-chip[disabled]{background:var(--papier2);color:var(--leise);border-color:var(--sand)} .denken-zeile{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--leise);padding:0 4px} .denkt-punkte span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--leise); margin-right:3px} .ki-fehler-box{margin:0 4px;padding:12px 14px;border-radius:10px;background:var(--rosa-bg); border:1px solid var(--rosa);color:var(--rot-dunkel);font-size:13.5px} .ki-fehler-box button{margin-top:8px} .ki-fehler-grund{display:block;margin-top:8px;font-weight:600} /* [W3] Hinweis, wenn Warten länger als üblich dauert: neutral (kein Fehler), mit Ausweg darunter. */ .langsam-box{margin:0 4px;padding:12px 14px;border-radius:10px;background:var(--papier2); border:1px solid var(--linie);color:var(--text2);font-size:13.5px} .langsam-box .knopfreihe{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} .entwurfskarte{margin:4px 4px 4px;border:1px solid var(--linie);border-radius:14px; background:var(--weiss);padding:16px;box-shadow:0 1px 2px rgba(17,17,17,.15)} .entwurfskarte h3{font-size:15px;margin-bottom:10px} .entwurfsfeld{font-size:13.5px;margin-bottom:8px;line-height:1.5} .entwurfsfeld b{font-weight:600;color:var(--leise)} .entwurfskarte .knopfreihe{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .jetzt-senden{display:block;text-align:center;font-size:13px;color:var(--leise); background:none;border:none;padding:8px;width:100%;text-decoration:underline; text-underline-offset:3px;min-height:44px} .gesendet-hinweis{margin:0 4px 10px;padding:10px 14px;border-radius:10px;background:var(--gruen-bg); color:var(--gruen);font-size:13.5px} /* ---------- Anhänge (Vorschau vor dem Senden) ---------- */ .anhang-vorschau-liste{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px 0} .anhang-vorschau{position:relative;width:74px} .anhang-vorschau .kachel{width:74px;height:74px;border-radius:10px;overflow:hidden; background:var(--papier2);border:1px solid var(--linie);display:flex;align-items:center; justify-content:center;font-size:11px;color:var(--leise);text-align:center;padding:4px} .anhang-vorschau img{width:100%;height:100%;object-fit:cover} /* [Design-QA] Sichtbarer Kreis bleibt klein (überlappt sonst zu viel vom 74px-Vorschaubild) — die TIPP-Fläche wächst per unsichtbarem ::after auf 44×44, zentriert auf denselben Punkt. */ .anhang-vorschau .entfernen{position:absolute;top:-6px;right:-6px;width:22px;height:22px; border-radius:50%;background:var(--tinte);color:var(--papier);border:none;font-size:13px; line-height:1;display:flex;align-items:center;justify-content:center;min-height:auto} .anhang-vorschau .entfernen::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px; transform:translate(-50%,-50%)} .anhang-vorschau .fortschritt{height:4px;background:var(--sand);border-radius:2px;margin-top:5px; overflow:hidden} .anhang-vorschau .fortschritt > i{display:block;height:100%;background:var(--tinte);width:0%} .anhang-vorschau .fehlertext{font-size:10.5px;color:var(--rot);margin-top:3px;line-height:1.3} .anhang-vorschau .nochmal{font-size:10.5px;padding:2px 0;text-decoration:underline;min-height:auto} /* ---------- Composer ---------- */ .composer{border-top:1px solid var(--linie);background:var(--weiss); padding:10px 10px calc(env(safe-area-inset-bottom) + 10px)} .composer-reihe{display:flex;align-items:flex-end;gap:6px} /* [Design-QA] Tipp-Ziel ≥44×44 (vorher 42×42) — das sichtbare SVG-Icon bleibt in Originalgröße, nur die Fläche wächst minimal. */ .composer-btn{flex:none;width:44px;height:44px;border-radius:50%;border:none;background:none; display:flex;align-items:center;justify-content:center;color:var(--leise)} .composer-btn:hover{background:var(--papier2)} .composer textarea{flex:1;resize:none;max-height:120px;min-height:44px;border:1px solid var(--sand); border-radius:18px;padding:10px 14px;font-size:16px;line-height:1.4;font-family:inherit; color:var(--tinte);background:var(--weiss)} .composer-senden{flex:none;width:44px;height:44px;border-radius:50%;border:none;background:var(--tinte); color:var(--papier);display:flex;align-items:center;justify-content:center} /* [W3] --leise2 (#8A8378) auf Weiß kommt nur auf ~3,7:1, --leise (#6B655C) auf ~5,9:1 (WCAG AA: 4,5:1). */ .composer-hinweis{font-size:11.5px;color:var(--leise);margin:6px 4px 0} .mikro-hinweis{margin:0 4px 8px;padding:10px 44px 10px 12px;border-radius:10px;background:var(--rosa-bg); border:1px solid var(--rosa);color:var(--rot-dunkel);font-size:13px;position:relative} /* [Design-QA] Gleiche Technik wie .anhang-vorschau .entfernen — Tipp-Fläche 44×44, sichtbares "×" bleibt klein und passt weiter ohne Layoutsprung in die gepolsterte Box. */ .mikro-hinweis .schliessen{position:absolute;top:4px;right:4px;background:none;border:none; min-height:32px;min-width:32px;color:inherit} .mikro-hinweis .schliessen::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px; transform:translate(-50%,-50%)} .sende-fehler{margin:0 4px 8px;padding:10px 12px;border-radius:10px;background:var(--rosa-bg); border:1px solid var(--rosa);color:var(--rot-dunkel);font-size:13px;display:flex; align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} /* ---------- Aufnahme ---------- */ .aufnahme-box{padding:14px 16px;display:flex;flex-direction:column;align-items:center;gap:10px} .aufnahme-zeit{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums} .aufnahme-punkt{width:12px;height:12px;border-radius:50%;background:var(--rot)} .aufnahme-max{font-size:12.5px;color:var(--leise)} .aufnahme-knoepfe{display:flex;gap:10px;margin-top:6px} .knopfreihe-mitte{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} /* ---------- Nicht freigeschaltet ---------- */ .sperr-flaeche{padding:60px 20px;text-align:center;max-width:440px;margin:0 auto} .sperr-flaeche h1{font-size:19px;margin-bottom:10px} .sperr-flaeche p{color:var(--leise);line-height:1.6;margin-bottom:18px} /* [Design-QA] Fehlgeschlagenes