/* ═══════════════════════════════════════════════════════════════════════════ WBK-Design-System — KOPIE vom 27.09.2026 aus ../DESIGN/wbk.css Kopiert, nicht eingebunden. So steht es in README.md: Bausteine aus anderen WBK-Projekten werden kopiert — kein gemeinsamer Code, keine Abhaengigkeit in irgendeine Richtung. Wenn sich das Design-System aendert, wird diese Datei bewusst nachgezogen, statt dass eine Aenderung anderswo hier unbemerkt durchschlaegt. Die Regeln dazu stehen in DESIGN/wbk-design.md: flach und ruhig, Farbe hat Bedeutung, Handy zuerst, Rueckmeldung bei jeder Aktion, alles auf Deutsch. ═══════════════════════════════════════════════════════════════════════════ */ /* WBK-Design · gemeinsames Stylesheet Grundgerüst nach Mintlify (flach, feine Linien, Pillen), Farblogik und Bedienregeln aus Wahlmodul und Kalender. Regeln und Begründungen: wbk-design.md */ /* ---------- 1. Werte ---------- */ :root{ /* Flächen */ --grund:#ffffff; --flaeche:#f7f7f7; --flaeche-leise:#fafafa; --linie:#e5e5e5; --linie-leise:#ededed; /* Text */ --text:#0a0a0a; --text-2:#3a3a3c; --text-grau:#5a5a5c; --text-leise:#767676; /* Schulgrün: Hauptaktion, an, erledigt */ --akzent:#4dba38; --akzent-dunkel:#3a9c28; --akzent-text:#2a7d1e; --akzent-flaeche:rgba(77,186,56,.14); --akzent-rand:rgba(77,186,56,.4); /* Orange: jetzt dran, ungespeichert, Warnung */ --dran:#ff9500; --dran-dunkel:#f08800; --warn-text:#a35200; --warn-flaeche:rgba(255,149,0,.14); --warn-rand:rgba(255,149,0,.4); /* Rot: löschen, Fehler */ --gefahr:#d32f2f; --gefahr-text:#c0392b; --gefahr-flaeche:rgba(255,59,48,.10); --gefahr-rand:rgba(255,59,48,.35); /* Blau: Info, freiwillig */ --info-text:#0a5bd0; --info-flaeche:rgba(0,122,255,.10); --info-rand:rgba(0,122,255,.3); /* Text auf Grün und Orange ist dunkel (Weiß hätte zu wenig Kontrast) */ --auf-akzent:#0a0a0a; --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-voll:9999px; --a-1:4px; --a-2:8px; --a-3:12px; --a-4:16px; --a-5:20px; --a-6:24px; --a-7:32px; --a-8:40px; --a-9:64px; --schatten-1:0 1px 2px rgba(0,0,0,.04); --schatten-2:0 4px 12px rgba(0,0,0,.08); --schatten-3:0 24px 48px -8px rgba(0,0,0,.18); --fokus:0 0 0 3px rgba(77,186,56,.35); --schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --schrift-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --kopf-h:56px; color-scheme:light; } /* Dunkel: folgt dem System, per data-theme="light|dark" am übersteuerbar */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --grund:#0a0a0a; --flaeche:#151515; --flaeche-leise:#101010; --linie:#2a2a2a; --linie-leise:#1f1f1f; --text:#f5f5f5; --text-2:#d4d4d4; --text-grau:#a8a8aa; --text-leise:#8a8a8a; --akzent-text:#5ecc4a; --warn-text:#ffb340; --gefahr-text:#ff8a80; --info-text:#6cb0ff; --akzent-flaeche:rgba(77,186,56,.18); --warn-flaeche:rgba(255,149,0,.18); --gefahr-flaeche:rgba(255,59,48,.18); --info-flaeche:rgba(0,122,255,.2); --schatten-1:0 1px 2px rgba(0,0,0,.4); --schatten-2:0 4px 12px rgba(0,0,0,.5); --schatten-3:0 24px 48px -8px rgba(0,0,0,.7); color-scheme:dark; } } :root[data-theme="dark"]{ --grund:#0a0a0a; --flaeche:#151515; --flaeche-leise:#101010; --linie:#2a2a2a; --linie-leise:#1f1f1f; --text:#f5f5f5; --text-2:#d4d4d4; --text-grau:#a8a8aa; --text-leise:#8a8a8a; --akzent-text:#5ecc4a; --warn-text:#ffb340; --gefahr-text:#ff8a80; --info-text:#6cb0ff; --akzent-flaeche:rgba(77,186,56,.18); --warn-flaeche:rgba(255,149,0,.18); --gefahr-flaeche:rgba(255,59,48,.18); --info-flaeche:rgba(0,122,255,.2); --schatten-1:0 1px 2px rgba(0,0,0,.4); --schatten-2:0 4px 12px rgba(0,0,0,.5); --schatten-3:0 24px 48px -8px rgba(0,0,0,.7); color-scheme:dark; } /* ---------- 2. Grundlage ---------- */ *,*::before,*::after{ box-sizing:border-box; min-width:0; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--grund); color:var(--text); font-family:var(--schrift); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; /* nie horizontales Scrollen */ } h1,h2,h3,h4{ margin:0; font-weight:600; color:var(--text); } h1{ font-size:clamp(28px,5vw,36px); line-height:1.2; letter-spacing:-.5px; } h2{ font-size:22px; line-height:1.3; } h3{ font-size:18px; line-height:1.4; } h4{ font-size:16px; line-height:1.4; } p{ margin:0; } a{ color:var(--akzent-text); text-underline-offset:2px; } button,input,select,textarea{ font-family:inherit; } code,.mono{ font-family:var(--schrift-mono); font-size:13px; } code{ background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-xs); padding:1px 6px; color:var(--text-2); } .klein{ font-size:14px; } .grau{ color:var(--text-grau); } .kennzeile{ font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-grau); } :focus-visible{ outline:2px solid var(--akzent-text); outline-offset:2px; } ::selection{ background:rgba(77,186,56,.28); } /* ---------- 3. Schalter ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 20px; border:1px solid transparent; border-radius:var(--r-voll); font-size:14px; font-weight:500; line-height:1.3; color:var(--text); background:transparent; cursor:pointer; text-decoration:none; white-space:nowrap; -webkit-tap-highlight-color:transparent; transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s; } .btn:active{ transform:scale(.97); } .btn svg{ width:16px; height:16px; flex:none; } .btn-sm{ min-height:32px; padding:5px 14px; font-size:13px; } .btn-lg{ min-height:48px; padding:13px 26px; font-size:16px; } .btn-block{ width:100%; } .btn-primaer{ background:var(--akzent); color:var(--auf-akzent); } .btn-primaer:hover{ background:var(--akzent-dunkel); } /* Nächster Schritt = orange + sanftes Aufleuchten (kein Wabbeln) */ .btn-dran{ background:var(--dran); color:var(--auf-akzent); font-weight:600; animation:dran-leuchten 1.9s ease-in-out infinite; } .btn-dran:hover{ background:var(--dran-dunkel); } @keyframes dran-leuchten{ 0%,100%{ box-shadow:0 2px 8px rgba(255,149,0,.3); } 50%{ box-shadow:0 4px 20px rgba(255,149,0,.7); } } .btn-sekundaer{ background:var(--grund); border-color:var(--linie); } .btn-sekundaer:hover{ background:var(--flaeche); } .btn-still{ border-radius:var(--r-md); padding:8px 12px; } .btn-still:hover{ background:var(--flaeche); } .btn-erledigt{ background:var(--akzent-flaeche); color:var(--akzent-text); } .btn-erledigt:hover{ background:rgba(77,186,56,.24); } .btn-info{ background:var(--info-flaeche); color:var(--info-text); } /* Sanftes Aufleuchten wie bei .btn-dran, für jeden farbigen Schalter zuschaltbar: lenkt den Blick auf den Abschluss („Fertig & schließen"). Höchstens ein leuchtender Schalter je Ansicht. */ .btn-leuchtet{ --leucht:77,186,56; animation:leuchten 1.9s ease-in-out infinite; } .btn-info.btn-leuchtet{ --leucht:0,122,255; } .btn-gefahr.btn-leuchtet,.btn-gefahr-voll.btn-leuchtet{ --leucht:255,59,48; } @keyframes leuchten{ 0%,100%{ box-shadow:0 2px 8px rgba(var(--leucht),.25); } 50%{ box-shadow:0 4px 20px rgba(var(--leucht),.6); } } /* Löschen = getönt. Vollflächig rot nur im Bestätigungsdialog. */ .btn-gefahr{ background:var(--gefahr-flaeche); color:var(--gefahr-text); } .btn-gefahr:hover{ background:rgba(255,59,48,.2); } .btn-gefahr-voll{ background:var(--gefahr); color:#fff; } .btn-gefahr-voll:hover{ background:#b92626; } .btn-rund{ width:32px; min-height:32px; padding:0; background:var(--grund); border-color:var(--linie); } .btn-rund:hover{ background:var(--flaeche); } .btn:disabled,.btn[aria-disabled="true"]{ background:var(--linie); border-color:transparent; color:var(--text-leise); cursor:not-allowed; animation:none; box-shadow:none; transform:none; } /* Speicher-Zustände */ .btn.ist-ungespeichert{ animation:ungespeichert 1.6s ease-in-out infinite; } @keyframes ungespeichert{ 0%,100%{ box-shadow:0 0 0 2px rgba(255,149,0,.45); } 50%{ box-shadow:0 0 0 6px rgba(255,149,0,.12); } } .btn.ist-gespeichert{ background:var(--akzent-flaeche); color:var(--akzent-text); pointer-events:none; animation:gespeichert .22s ease-out; } @keyframes gespeichert{ 35%{ transform:scale(1.06); } } .btn.laedt{ pointer-events:none; opacity:.8; } .btn.laedt::before{ content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:drehen .8s linear infinite; } @keyframes drehen{ to{ transform:rotate(360deg); } } .btn-zeile{ display:flex; flex-wrap:wrap; gap:var(--a-2); align-items:center; } /* Kippschalter, eine Größe: 44×26, an = Grün */ .schalter{ position:relative; display:inline-block; width:44px; height:26px; flex:none; } .schalter input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; } .schalter span{ position:absolute; inset:0; border-radius:var(--r-voll); background:var(--linie); transition:background .2s; pointer-events:none; } .schalter span::before{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; } .schalter input:checked + span{ background:var(--akzent); } .schalter input:checked + span::before{ transform:translateX(18px); } .schalter input:focus-visible + span{ box-shadow:var(--fokus); } .schalter input:disabled + span{ opacity:.5; } /* Segment-Auswahl: grauer Träger, weißes aktives Segment */ .segment{ display:inline-flex; align-self:flex-start; max-width:100%; gap:2px; padding:4px; background:var(--flaeche); border:1px solid var(--linie-leise); border-radius:var(--r-voll); } .segment button{ border:0; background:transparent; color:var(--text-grau); font-size:14px; font-weight:500; padding:6px 16px; min-height:32px; border-radius:var(--r-voll); cursor:pointer; transition:background .15s,color .15s; } .segment button[aria-pressed="true"]{ background:var(--grund); color:var(--text); box-shadow:var(--schatten-1), 0 0 0 .5px rgba(0,0,0,.08); } /* Filter-Chips mit Zähler: aktiv = Tinte, nicht Grün (Grün bleibt für Aktionen) */ .chip{ display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 14px; border:1px solid var(--linie); border-radius:var(--r-voll); background:var(--grund); color:var(--text-grau); font-size:14px; font-weight:500; cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .chip:hover{ border-color:var(--text-leise); } .chip[aria-pressed="true"]{ background:var(--text); border-color:var(--text); color:var(--grund); } .chip b{ font-weight:600; font-size:12px; opacity:.7; } /* Reiter mit Unterstrich */ .reiter{ display:flex; gap:var(--a-1); border-bottom:1px solid var(--linie); overflow-x:auto; } .reiter button{ border:0; background:none; padding:12px 16px; font-size:14px; font-weight:500; color:var(--text-grau); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; white-space:nowrap; } .reiter button[aria-selected="true"]{ color:var(--text); border-bottom-color:var(--text); } /* ---------- 4. Felder ---------- */ .feld{ display:flex; flex-direction:column; gap:6px; } .feld-label{ font-size:14px; font-weight:500; color:var(--text); } .feld-hilfe{ font-size:13px; color:var(--text-grau); } .feld-fehler{ font-size:13px; color:var(--gefahr-text); font-weight:500; } /* Alle Feldtypen, nicht nur Text. Browser-Standardlook ist ein Fehler. */ .eingabe,.feld input:not([type=checkbox]):not([type=radio]):not([type=range]),.feld select,.feld textarea{ width:100%; min-height:40px; padding:9px 12px; font-size:16px; color:var(--text); background:var(--grund); border:1px solid var(--linie); border-radius:var(--r-md); outline:none; transition:border-color .15s, box-shadow .15s; } .feld textarea,textarea.eingabe{ min-height:96px; resize:vertical; line-height:1.5; } .eingabe::placeholder,.feld input::placeholder,.feld textarea::placeholder{ color:var(--text-leise); } .eingabe:hover,.feld input:hover,.feld select:hover,.feld textarea:hover{ border-color:var(--text-leise); } .eingabe:focus,.feld input:focus,.feld select:focus,.feld textarea:focus{ border-color:var(--akzent-text); box-shadow:var(--fokus); } .feld.ist-fehler input,.feld.ist-fehler select,.feld.ist-fehler textarea{ border-color:var(--gefahr-text); } /* Geändert, noch nicht gespeichert */ .feld.ist-geaendert input,.feld.ist-geaendert select,.feld.ist-geaendert textarea{ border-color:var(--dran); } .feld.ist-geaendert .feld-label::after{ content:" ●"; color:var(--dran); font-size:.8em; } input[type=checkbox],input[type=radio]{ accent-color:var(--akzent); width:18px; height:18px; } .feld-raster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--a-4); } /* Einstellungs-Zeilen: Label links, Bedienelement rechts */ .zeilen{ border:1px solid var(--linie); border-radius:var(--r-lg); overflow:hidden; background:var(--grund); } .zeile{ display:flex; align-items:center; gap:var(--a-4); min-height:52px; padding:10px var(--a-4); border-bottom:1px solid var(--linie-leise); } .zeile:last-child{ border-bottom:0; } .zeile > :first-child{ flex:1; } .zeile b{ display:block; font-size:14px; font-weight:500; } .zeile small{ display:block; font-size:13px; color:var(--text-grau); } /* ---------- 5. Hinweise ---------- */ .hinweis{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; padding:12px 16px; border:1px solid var(--linie); border-radius:var(--r-lg); background:var(--flaeche); color:var(--text-2); font-size:14px; line-height:1.5; } .hinweis > div{ flex:1 1 200px; } .hinweis > svg{ width:18px; height:18px; flex:none; margin-top:1px; } .hinweis b{ font-weight:600; } .hinweis-ok{ background:var(--akzent-flaeche); border-color:var(--akzent-rand); color:var(--akzent-text); } .hinweis-warn{ background:var(--warn-flaeche); border-color:var(--warn-rand); color:var(--warn-text); } .hinweis-info{ background:var(--info-flaeche); border-color:var(--info-rand); color:var(--info-text); } .hinweis-fehler{ background:var(--gefahr-flaeche); border-color:var(--gefahr-rand); color:var(--gefahr-text); } .hinweis-dringend{ border-width:2px; font-weight:500; } /* 2 px Rand = dringend */ .hinweis .btn{ margin-left:auto; flex:none; } .hinweis-leise{ display:flex; gap:8px; font-size:13px; color:var(--text-grau); } .hinweis-leise svg{ width:16px; height:16px; flex:none; opacity:.7; margin-top:2px; } /* Status-Marken: eckig in Tabellen, rund auf Karten */ .marke{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-sm); font-size:12px; font-weight:600; line-height:1.5; background:var(--flaeche); color:var(--text-grau); white-space:nowrap; } .marke-rund{ border-radius:var(--r-voll); padding:2px 10px; } .marke-ok{ background:var(--akzent-flaeche); color:var(--akzent-text); } .marke-warn{ background:var(--warn-flaeche); color:var(--warn-text); } .marke-gefahr{ background:var(--gefahr-flaeche); color:var(--gefahr-text); } .marke-info{ background:var(--info-flaeche); color:var(--info-text); } .marke-voll{ background:var(--akzent); color:var(--auf-akzent); } /* Leerzustand: nennt den nächsten Schritt */ .leer{ display:flex; flex-direction:column; align-items:center; gap:var(--a-2); padding:var(--a-8) var(--a-5); text-align:center; color:var(--text-grau); border:1px dashed var(--linie); border-radius:var(--r-lg); } .leer > svg{ width:40px; height:40px; opacity:.35; } .leer b{ font-size:16px; font-weight:600; color:var(--text); } .leer p{ font-size:14px; max-width:42ch; } .leer .btn{ margin-top:var(--a-2); } /* Fortschritt */ .fortschritt{ height:6px; border-radius:var(--r-voll); background:var(--linie); overflow:hidden; } .fortschritt i{ display:block; height:100%; border-radius:inherit; background:var(--akzent); } /* Toasts: oben rechts, Erfolg 3,5 s, Fehler 6 s, „lädt" bleibt */ .toasts{ position:fixed; top:calc(var(--kopf-h) + 12px); right:16px; z-index:3000; display:flex; flex-direction:column; gap:8px; pointer-events:none; } .toast{ pointer-events:auto; display:flex; gap:10px; align-items:flex-start; min-width:280px; max-width:420px; padding:12px 14px; border-radius:var(--r-lg); border:1px solid var(--linie); background:var(--grund); color:var(--text); box-shadow:var(--schatten-2); font-size:14px; line-height:1.4; animation:toast-ein .18s ease-out; transition:opacity .25s; } .toast svg{ width:18px; height:18px; flex:none; margin-top:1px; } .toast-ok svg{ color:var(--akzent-text); } .toast-fehler svg{ color:var(--gefahr-text); } .toast-info svg{ color:var(--info-text); } .toast-fehler{ border-color:var(--gefahr-rand); } .toast button{ margin-left:auto; border:0; background:none; color:var(--text-leise); font-size:18px; line-height:1; cursor:pointer; padding:0 2px; } .toast.geht{ opacity:0; } @keyframes toast-ein{ from{ transform:translateX(20px); opacity:0; } } @media (max-width:480px){ .toasts{ left:12px; right:12px; } .toast{ min-width:0; max-width:none; } } /* ---------- 6. Karten ---------- */ .karte{ background:var(--grund); border:1px solid var(--linie); border-radius:var(--r-lg); padding:var(--a-6); } .karte-flaeche{ background:var(--flaeche); border-color:transparent; } .karte-kopf{ display:flex; align-items:flex-start; gap:var(--a-3); margin-bottom:var(--a-4); } .karte-kopf > :first-child{ flex:1; } .karte-fuss{ display:flex; flex-wrap:wrap; gap:var(--a-2); margin-top:var(--a-5); padding-top:var(--a-4); border-top:1px solid var(--linie-leise); } .karten-raster{ display:grid; gap:var(--a-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); } /* Große Auswahlkarte statt winziger Radioknöpfe */ .karte-wahl{ position:relative; display:block; cursor:pointer; transition:border-color .15s, box-shadow .15s; } .karte-wahl input{ position:absolute; opacity:0; } .karte-wahl:hover{ border-color:var(--text-leise); } .karte-wahl:has(input:checked){ border-color:var(--akzent); box-shadow:0 0 0 1px var(--akzent), 0 8px 24px rgba(77,186,56,.1); } .karte-wahl:has(input:focus-visible){ box-shadow:var(--fokus); } .karte-wahl:has(input:checked)::after{ content:"✓"; position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; background:var(--akzent); color:var(--auf-akzent); font-size:13px; font-weight:700; display:grid; place-items:center; } /* Fach-Kacheln */ .faecher{ display:grid; gap:clamp(14px,3vw,24px); grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); } .fach{ display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; } .fach img{ width:100%; max-width:104px; height:auto; aspect-ratio:1; display:block; transition:transform .18s ease, filter .18s ease; } .fach:hover img{ transform:translateY(-4px); filter:drop-shadow(0 12px 16px rgba(0,0,0,.18)); } .fach span{ font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-grau); text-align:center; } /* ---------- 7. Tabellen ---------- */ .tabelle{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--linie); border-radius:var(--r-md); overflow:hidden; font-size:14px; } .tabelle th{ text-align:left; padding:10px var(--a-4); font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-grau); background:var(--flaeche-leise); border-bottom:1px solid var(--linie); } .tabelle td{ padding:12px var(--a-4); border-bottom:1px solid var(--linie-leise); vertical-align:middle; } .tabelle tr:last-child td{ border-bottom:0; } .tabelle tbody tr:hover td{ background:var(--flaeche-leise); } .tabelle .akt{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; } /* Schmal: jede Tabelle wird zur Kartenliste. Kein Quer-Scrollen. */ @media (max-width:640px){ .tabelle,.tabelle tbody,.tabelle tr,.tabelle td{ display:block; width:100%; } .tabelle{ border:0; border-radius:0; overflow:visible; } .tabelle thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .tabelle tr{ border:1px solid var(--linie); border-radius:var(--r-lg); padding:10px 14px; margin-bottom:12px; } .tabelle td{ display:flex; justify-content:space-between; gap:var(--a-4); padding:6px 0; border:0; text-align:right; } .tabelle td::before{ content:attr(data-label); font-size:13px; color:var(--text-grau); text-align:left; flex:none; } .tabelle td:first-child{ font-size:16px; font-weight:600; text-align:left; padding-bottom:8px; } .tabelle td:first-child::before{ content:none; } .tabelle td:empty{ display:none; } .tabelle tbody tr:hover td{ background:none; } .tabelle .akt{ justify-content:flex-start; } } /* ---------- 8. Dialog und Speicherleiste ---------- */ .dialog-huelle{ position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:var(--a-4); background:rgba(0,0,0,.4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .dialog-huelle.offen{ display:flex; } .dialog{ width:min(480px,100%); max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; background:var(--grund); border:1px solid var(--linie); border-radius:var(--r-xl); box-shadow:var(--schatten-3); padding:var(--a-6); animation:dialog-ein .2s cubic-bezier(.25,.46,.45,.94); } .dialog h3{ margin-bottom:var(--a-2); } .dialog-fuss{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--a-2); margin-top:var(--a-6); } @keyframes dialog-ein{ from{ transform:scale(.96); opacity:0; } } body.dialog-offen{ overflow:hidden; } @media (max-width:640px){ /* schmal: Blatt von unten */ .dialog-huelle{ align-items:flex-end; padding:0; } .dialog{ width:100%; max-height:90dvh; border-radius:20px 20px 0 0; border-bottom:0; padding-bottom:calc(var(--a-6) + env(safe-area-inset-bottom)); animation-name:blatt-ein; } .dialog::before{ content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--linie); margin:-8px auto 16px; } .dialog-fuss .btn{ flex:1; } } @keyframes blatt-ein{ from{ transform:translateY(100%); } } /* „Ungespeicherte Änderungen": fährt von unten ein, bricht auf dem Handy um */ .speicherleiste{ position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); z-index:1500; width:min(92vw,560px); display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 16px; background:var(--grund); border:1px solid var(--linie); border-radius:var(--r-xl); box-shadow:var(--schatten-3); transform:translate(-50%,160%); transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .2s; } .speicherleiste.sichtbar{ transform:translate(-50%,0); } .speicherleiste .punkt{ width:10px; height:10px; border-radius:50%; background:var(--dran); flex:none; animation:punkt 1.4s infinite; } .speicherleiste p{ flex:1; font-size:14px; font-weight:500; } .speicherleiste.ist-gespeichert{ border-color:var(--akzent-rand); } .speicherleiste.ist-gespeichert .punkt{ background:var(--akzent); animation:none; } @keyframes punkt{ 50%{ opacity:.35; } } @media (max-width:560px){ .speicherleiste p{ flex-basis:calc(100% - 24px); } .speicherleiste .btn{ flex:1; } } /* ---------- 9. Seitengerüst ---------- */ .kopf{ position:sticky; top:0; z-index:100; height:var(--kopf-h); background:color-mix(in srgb,var(--grund) 88%,transparent); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--linie-leise); } .kopf-innen{ height:100%; max-width:1280px; margin:0 auto; padding:0 var(--a-6); display:flex; align-items:center; gap:var(--a-4); } .kopf-logo{ display:flex; align-items:center; gap:var(--a-3); text-decoration:none; color:var(--text); font-weight:600; font-size:15px; } .kopf-logo img{ height:26px; width:auto; display:block; } .kopf-logo span{ padding-left:var(--a-3); border-left:1px solid var(--linie); color:var(--text-grau); font-weight:500; } .kopf .frei{ flex:1; } .rahmen{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:240px minmax(0,1fr); } .seitenleiste{ position:sticky; top:var(--kopf-h); align-self:start; height:calc(100dvh - var(--kopf-h)); overflow-y:auto; padding:var(--a-5) var(--a-3); border-right:1px solid var(--linie-leise); } .nav-titel{ padding:var(--a-4) var(--a-4) var(--a-2); font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-grau); } .nav-punkt{ display:block; padding:7px var(--a-4); border-radius:var(--r-sm); font-size:14px; color:var(--text-grau); text-decoration:none; } .nav-punkt:hover{ color:var(--text); } .nav-punkt.aktiv{ background:var(--flaeche); color:var(--text); font-weight:500; } .inhalt{ padding:var(--a-8) var(--a-7) 140px; max-width:920px; } .abschnitt{ padding-bottom:var(--a-9); scroll-margin-top:calc(var(--kopf-h) + 24px); } .abschnitt > h2{ margin-bottom:var(--a-2); } .abschnitt > h2 + p{ color:var(--text-grau); margin-bottom:var(--a-6); max-width:68ch; } .stapel{ display:flex; flex-direction:column; gap:var(--a-4); } @media (max-width:1023px){ .rahmen{ grid-template-columns:minmax(0,1fr); } .seitenleiste{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--linie-leise); display:flex; flex-wrap:wrap; gap:4px; padding:var(--a-3) var(--a-4); } .nav-titel{ display:none; } .nav-punkt{ padding:6px 12px; border:1px solid var(--linie); border-radius:var(--r-voll); } } @media (max-width:767px){ .kopf-innen{ padding:0 var(--a-4); } .kopf-logo span{ display:none; } .inhalt{ padding:var(--a-6) var(--a-4) 140px; } } /* Touch: alles Tippbare mindestens 44 px */ @media (pointer:coarse){ .btn,.chip,.eingabe,.feld input:not([type=checkbox]):not([type=radio]):not([type=range]),.feld select{ min-height:44px; } .btn-rund{ width:44px; } .segment button{ min-height:40px; } .nav-punkt{ padding-top:11px; padding-bottom:11px; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .btn-dran{ box-shadow:0 3px 14px rgba(255,149,0,.5); } .btn-leuchtet{ box-shadow:0 3px 14px rgba(var(--leucht),.4); } } /* ---------- 10. Druck ---------- */ @media print{ *,*::before,*::after{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; } body{ background:#fff; color:#000; font-size:10.5pt; } .kopf,.seitenleiste,.speicherleiste,.toasts,.dialog-huelle,.nicht-drucken{ display:none !important; } .rahmen{ display:block; } .inhalt{ padding:0; max-width:none; } .karte,.muster,.tabelle{ box-shadow:none; border-color:#ccc; } tr,.karte{ break-inside:avoid; } h2,h3{ break-after:avoid; } }