/* ============================================================ PERSONAL OS — DIE BAUSTEINE. Fassung v34 (24.08.2026) Hier steht die Oberflaeche als Material: Knoepfe, Flaechen, Zeilen, Felder, Anzeigen, Schale. Was eine BUEHNE ausmacht — das Blatt, die Achse, die Modulkarte, die Zeitlinsen —, steht in `buehnen.css`. Was sich BEWEGT, steht in `motion.css`. Was eine ZAHL ist, steht in `tokens.css`. Vier Blaetter, vier Fragen, keine Ueberschneidung. DAS PRINZIP: Alles ist aus DERSELBEN Flaeche gepresst. Ein Element ist entweder GEHOBEN (`--neo-auf`) oder GEDRUECKT (`--neo-ein`) — es gibt keinen dritten Zustand und keine vierte Farbe. Kein Kasten mit Rand, kein Glas im Inhalt, keine gefaerbte Platte. Wer hier eine Kante zeichnet, hat das Material nicht verstanden: Eine Kante trennt zwei Dinge, ein Relief formt eines. Herkunft: `Personal OS Design System/parts/*.css`, dort aus der App gespiegelt und in v5 auf Neomorphismus gebracht. Die Bewegung, die dort in den Regeln stand, ist beim Uebernehmen nach `motion.css` gewandert — sonst stuende sie an vier Orten. ============================================================ */ /* ============================================================ 0 · DER GRUND ============================================================ */ *,*::before,*::after{box-sizing:border-box} p,h1,h2,h3,h4,h5,h6,figure,fieldset,ul,ol{margin:0;padding:0} ul,ol{list-style:none} button,input,select,textarea{font:inherit;color:inherit;background:none;border:0} button{cursor:pointer;text-align:left} svg{display:block} img{max-width:100%;height:auto} html{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;overflow-x:clip} body{ margin:0; background:var(--grund); color:var(--tinte); font:var(--type-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; overscroll-behavior-y:none; } a{color:var(--akzent-schrift);text-decoration:underline; text-decoration-color:var(--linie-stark);text-underline-offset:3px} a:hover{color:var(--tinte);text-decoration-color:currentColor} ::selection{background:var(--tinte-hauch-stark);color:var(--tinte)} /* Der Fokusring ist nie weg. Wer ihn entfernt, macht die App fuer den unbedienbar, der keine Maus hat (Kodex Z3). */ :focus-visible{outline:2px solid var(--akzent-glueh);outline-offset:3px;border-radius:var(--radius-xs)} *{scrollbar-width:thin;scrollbar-color:var(--linie-stark) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--linie-stark);border-radius:var(--radius-pill); border:3px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:var(--tinte-fern);background-clip:padding-box} ::-webkit-scrollbar-corner{background:transparent} /* Die vier Helfer, die ueberall gelten. */ .lm-label{font:var(--type-label);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--tinte-fern)} .lm-num{font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-metric)} .lm-plate{background:var(--flaeche);border-radius:var(--radius-md);box-shadow:var(--neo-auf)} .lm-script{font:var(--type-script);color:var(--tinte)} [hidden]{display:none !important} .nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* ============================================================ 1 · KNOEPFE, FLAECHEN, ZEILEN — DIE BAUSTEINE ============================================================ */ /* ---------- Knöpfe ---------- Alle Knöpfe sind dasselbe Material. Die Primäraktion führt durch Schriftgewicht und — als einzige — die wandernde Chromkante drumherum (.lm-rand). Drücken = einsinken, nicht färben. */ .knopf{ display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3); min-height:var(--griff);padding:0 var(--space-6); font:var(--type-body-strong); border:0;border-radius:var(--radius-md); background:var(--flaeche);color:var(--tinte-still); box-shadow:var(--neo-auf); cursor:pointer;white-space:nowrap; } .knopf:hover:not(:disabled){color:var(--tinte)} .knopf:active:not(:disabled){box-shadow:var(--neo-ein)} .knopf:disabled{opacity:.42;cursor:not-allowed} .knopf-primary{color:var(--tinte)} .knopf-ghost{background:none;box-shadow:none} .knopf-ghost:hover:not(:disabled){background:var(--tinte-hauch)} .knopf-ghost:active:not(:disabled){box-shadow:var(--neo-ein);background:var(--flaeche)} .knopf-gefahr{color:var(--glut-schrift)} .knopf-sm{min-height:34px;padding:0 var(--space-5);font:var(--type-small-strong);border-radius:var(--radius-sm)} .knopf-lg{min-height:52px;padding:0 var(--space-7);font:var(--type-title);border-radius:var(--radius-lg)} .knopf-breit{width:100%} /* ---------- Die Chromkante um die EINE Primaeraktion je Buehne ---------- Ein Verlauf, der sich dreht, unter einem Knopf, der 1 px kleiner ist als sein Rahmen. Uebrig bleibt eine wandernde Haarlinie. Wo es WebGL gibt, legt `js/ds/effekte.js` zusaetzlich den Shader-Ring (`vendor/metallrand.js`) darueber — dasselbe Bild, nur aus echtem Licht statt aus einem Verlauf. Faellt der aus, traegt diese Kante allein (Kodex G1: der Rueckfall ist sichtbar, nicht nichts). */ .lm-rand{position:relative;display:inline-flex;isolation:isolate; border-radius:calc(var(--radius-md) + 1px);padding:1px;overflow:hidden} .lm-rand::before{content:"";position:absolute;left:50%;top:50%; width:160%;aspect-ratio:1;translate:-50% -50%;z-index:-1; background:var(--chrom-lauf)} .lm-rand>.knopf{width:100%;border-radius:var(--radius-md); box-shadow:inset 0 1px 0 var(--licht-innen)} .lm-rand>.knopf:active{box-shadow:var(--neo-ein)} .lm-rand.ist-breit{display:flex} .lm-rand.ist-breit>.knopf{flex:1} .ikon{ display:inline-grid;place-items:center;flex:none; width:var(--griff);height:var(--griff); background:var(--flaeche);border:0;border-radius:50%; color:var(--tinte-still);cursor:pointer; box-shadow:var(--neo-auf); } .ikon:hover{color:var(--tinte)} .ikon:active{box-shadow:var(--neo-ein)} .ikon:disabled{opacity:.4;cursor:not-allowed} .ikon-sm{width:40px;height:40px} .ikon-lg{width:50px;height:50px} .ikon-ghost{background:none;box-shadow:none} .ikon-ghost:hover{background:var(--tinte-hauch)} .ikon-ghost:active{background:var(--flaeche);box-shadow:var(--neo-ein)} .ikon-quiet{color:var(--tinte-fern)} .ikon[aria-pressed="true"]{box-shadow:var(--neo-ein);color:var(--tinte)} .knopfreihe{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center} .stillzeile{ background:none;border:0;padding:var(--space-3) 0; font:var(--type-small);color:var(--tinte-still);cursor:pointer; text-decoration:underline;text-decoration-color:var(--linie-stark); text-underline-offset:4px} .stillzeile:hover{color:var(--tinte);text-decoration-color:currentColor} .stillzeile.ist-gefahr{color:var(--glut-schrift)} /* ---------- Platten ---------- Die Platte ist eine gehobene Form aus dem Grundmaterial — kein Rand. ton="field" ist die GEDRÜCKTE Fassung (eine Mulde im Material). */ .platte{ background:var(--flaeche); border:0; border-radius:var(--radius-lg); padding:var(--gutter-card); box-shadow:var(--neo-auf); } .platte-blank{padding:0} .platte-field{box-shadow:var(--neo-ein);background:var(--flaeche)} .platte-raised,.platte-plate-hi{box-shadow:var(--neo-auf-tief)} .platte-klick{cursor:pointer} .platte-klick:active{box-shadow:var(--neo-ein)} /* DIE GERAHMTE PLATTE ist die eine, die jetzt zaehlt — sie traegt die Blende. Bis v33 war sie deshalb FLACH: Der Rahmen war das ganze Chrome, und eine Platte darunter waere ein zweiter Rahmen gewesen. Auf einem Relief ist das falsch herum. Flach heisst hier „liegt im Grund", und dann steht die wichtigste Flaeche der Buehne tiefer als die zweitwichtigste daneben. Sie ist jetzt die TIEFE gehobene Form — und weil es hoechstens eine je Buehne gibt, bleibt das eindeutig. */ .platte-rahmen{box-shadow:var(--neo-auf-tief);padding:var(--space-7) var(--space-8)} /* MIT UMBRUCH. Ohne ihn schob eine Reihe aus fuenf Kacheln (die Wochenzahlen der Reflexion) auf dem Handy 12 px aus dem Bild — und eine Reihe, die nicht umbrechen kann, tut das bei jedem neuen Element wieder. */ .reihe{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-start} .stapel{display:flex;flex-direction:column;gap:var(--space-5)} .seite,.blatt,.nah,.fokus{display:flex;flex-direction:column;gap:var(--space-7)} .stapel-weit{display:flex;flex-direction:column;gap:var(--space-7)} /* ---------- Zwei Spalten am Laptop ---------- DIE WERKBANK LINKS, DIE LAGE RECHTS. Das ist die Aufteilung, die jede Arbeitsbuehne dieser App braucht: Links wird geschoben, abgehakt, geschrieben; rechts steht, woran man sich dabei haelt — Zahlen, Fristen, was klemmt. Bis v33 stand beides untereinander, und am Laptop war die rechte Bildschirmhaelfte leer. 1,45 : 1 — links stehen Zeilen mit Griffen, die Breite brauchen; rechts Zahlen und kurze Zeilen. Gleiche Haelften saehen ordentlich aus und waeren fuer beide falsch. */ .spalten{display:flex;flex-direction:column;gap:var(--space-9)} .spalte-werk,.spalte-lage{display:flex;flex-direction:column;gap:var(--space-9);min-width:0} @media (min-width:1100px){ .spalten{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr); gap:var(--space-9);align-items:start} /* Rechts steht, was man ANSIEHT, waehrend man links arbeitet — also bleibt es stehen. */ .spalte-lage{position:sticky;top:calc(var(--kopf-hoehe) + var(--space-6))} } /* ---------- Abschnitte ---------- */ .abschnitt{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6)} .abschnitt-block .abschnitt{margin:0} .abschnitt-text{flex:none} .abschnitt-neben{margin-left:auto;color:var(--tinte-fern)} /* Der Denk-Orb neben "Aufträge dieser App", solange die Warteschlange schreibt — die einzige Stelle, an der `.abschnitt-neben` einen Knoten statt nur Text traegt (Kodex Z4: eine der zwei erlaubten Dauerbewegungen). */ .abschnitt-neben-schreibt{display:inline-flex;align-items:center;gap:var(--space-2)} .abschnitt-symbol{color:var(--tinte-fern);flex:none} .abschnitt-block{display:flex;flex-direction:column;gap:var(--space-5)} .abschnitt-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-top:var(--space-1)} .seiten-kopf{display:flex;flex-direction:column;gap:var(--space-2)} .seiten-eyebrow{color:var(--tinte-fern)} .seiten-titel{font:var(--type-display-m);letter-spacing:var(--tracking-display);margin:0} .seiten-titel-gross{font:var(--type-display-l)} .seiten-stand,.seiten-unter{font:var(--type-small);color:var(--tinte-still);margin:0} .seiten-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4); color:var(--tinte-fern)} .trenner{height:1px;background:var(--linie);border:0;margin:0} /* ---------- Der Stand und die Chips ---------- Kein Kasten: Ein Stand ist ein WERT, keine Flaeche. Das Relief traegt die Zeile, in der er steht; er selbst traegt nur seine Farbe. */ .stand{ display:inline-flex;align-items:center;gap:var(--space-3); min-height:20px;flex:none;white-space:nowrap; font:var(--type-small);letter-spacing:0;text-transform:none; color:var(--tinte-still); } .stand::before{ content:"";flex:none;width:7px;height:7px;border-radius:50%; background:var(--tinte-fern); /* Der Punkt sitzt IM Material: Lichtsaum oben, ein Hauch Schatten unten. */ box-shadow:inset 0 1px 0 var(--licht-innen), 0 1px 2px color-mix(in srgb,var(--grund) 70%,transparent); } .stand-info::before{background:var(--tinte-fern)} .stand-positive{color:var(--tinte)} .stand-positive::before{background:var(--moos)} .stand-highlight{color:var(--tinte)} .stand-highlight::before{background:var(--ocker)} .stand-critical{color:var(--glut-schrift)} .stand-critical::before{background:var(--glut)} .stand-accent{color:var(--tinte);font:var(--type-small-strong)} .stand-accent::before{background:var(--akzent-glueh)} /* Die EINE freistehende Fassung: Stand allein auf einer Platte, als Mulde. Hoechstens eine je Buehne. */ .stand-mulde{min-height:28px;padding:0 var(--space-5); border-radius:var(--radius-xs);background:var(--flaeche);box-shadow:var(--neo-ein)} /* Der Chip rastet: gewählt = eingedrückt, mit weißem Wort. */ .chip{ display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); /* 34 px hoch — aber nie schmaler als 44. „ET" als Modulfilter war 40 x 34 px und damit die eine Trefferflaeche, die der Waechter zu Recht anmahnte: Ein Chip mit zwei Buchstaben ist genauso oft gemeint wie einer mit zwanzig. */ min-height:34px;min-width:44px;padding:0 var(--space-5); font:var(--type-small); background:var(--flaeche);color:var(--tinte-still); border:0;border-radius:var(--radius-pill); box-shadow:var(--neo-auf); cursor:pointer;white-space:nowrap; } .chip:hover:not(.chip-an){color:var(--tinte)} .chip-an{box-shadow:var(--neo-ein);color:var(--tinte);font:var(--type-small-strong)} .chipreihe{display:flex;flex-wrap:wrap;gap:var(--space-3)} .chip-trenner{width:1px;height:20px;background:var(--linie-stark);flex:none;align-self:center} .filterzeile{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center} /* ---------- Die Werkzeugleiste ---------- Eine gedrückte Rille, in der das gewählte Werkzeug als erhabene Form sitzt und sein Wort trägt. */ .werkzeuge{ display:flex;align-items:center;gap:var(--space-2); padding:4px; background:var(--flaeche);border-radius:var(--radius-pill); border:0;box-shadow:var(--neo-ein); align-self:flex-start;max-width:100%; } .werkzeug{ display:flex;align-items:center;gap:0; min-height:40px;padding:0 var(--space-5); border:0;border-radius:var(--radius-pill); background:none;color:var(--tinte-still);cursor:pointer; font:var(--type-small);white-space:nowrap; } .werkzeug:hover{color:var(--tinte)} .werkzeug-glyph{display:grid;place-items:center;flex:none} .werkzeug-wort{display:block;overflow:hidden;max-width:0;opacity:0} .werkzeug.ist-gewaehlt{background:var(--flaeche);color:var(--tinte);box-shadow:var(--neo-auf)} .werkzeug.ist-gewaehlt .werkzeug-wort{max-width:12ch;opacity:1;padding-left:var(--space-3)} .werkzeuggruppe{display:flex;align-items:center;gap:2px;padding:4px; background:var(--flaeche);border-radius:var(--radius-pill);box-shadow:var(--neo-ein);max-width:100%} .werkzeuggruppe .werkzeug{min-height:32px;padding:0 var(--space-3)} .werkzeuggruppe .werkzeug:hover,.werkzeuggruppe .werkzeug:focus-visible{color:var(--tinte)} /* ---------- Zustände ---------- */ .leer{ display:flex;flex-direction:column;align-items:center;gap:var(--space-4); padding:var(--space-9) var(--space-6);text-align:center; border-radius:var(--radius-lg); background:var(--flaeche);box-shadow:var(--neo-ein); } .leer-symbol{color:var(--tinte-fern)} .leer-titel{font:var(--type-title);margin:0} .leer-text{font:var(--type-small);color:var(--tinte-still);margin:0;max-width:36ch;text-wrap:pretty} .leer-aktionen{display:flex;flex-direction:column;gap:var(--space-4);align-items:center;width:100%} .leer-fehler .leer-symbol{color:var(--glut-schrift)} .leer-fehler .leer-titel{color:var(--glut-schrift)} .leer-zeile{font:var(--type-small);color:var(--tinte-fern);margin:0;padding:var(--space-4) 0} .laedt{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--space-5);padding:var(--space-12) var(--space-6);color:var(--tinte-fern)} .laedt-text{font:var(--type-small)} /* ---------- Das Skelett ---------- Flache Flaechen in der Form des Inhalts — kein Relief, kein Neo-Kissen (26.08.2026, Paket J4): `--neo-ein` ist der Schatten einer gedrueckten Flaeche, mit der man etwas TUT. Ein Skelett zeigt nichts an, das sich druecken liesse, trug aber denselben Schatten — ein wulstiges Kissen, wo eine ruhige Flaeche nur noch nicht geladen hat. Jetzt traegt es den Ton der naechsthoeheren Flaeche und sonst nichts: keine Kante, kein Schatten. Weiterhin kein Schimmer, kein Puls — motion.css bekommt hier keinen Eintrag (Kodex Z4). Staffelung laeuft ueber die BREITE mehrerer Zeilen, nie ueber Opazitaet (eine transparente Flaeche sieht aus wie "deaktiviert", nicht wie "laedt"). */ .skelett-flaeche{display:flex;flex-direction:column;gap:var(--space-5)} .skelett{display:block;flex:none; background:var(--flaeche-hoch);border-radius:var(--radius-sm)} /* Textzeilen: drei Breiten im Wechsel statt einer einzelnen kuerzeren letzten Zeile — echter Fliesstext bricht nie auf dieselbe Kante. */ .skelett-text{height:var(--space-5);border-radius:var(--radius-pill);width:100%} .skelett-text+.skelett-text{margin-top:var(--space-4)} .skelett-text:nth-child(3n+2){width:86%} .skelett-text:nth-child(3n+3){width:70%} .skelett-text:last-child{width:54%} /* Zeile: die Form einer Listenzeile (Trefferhoehe), keine Karte. */ .skelett-zeile{height:calc(var(--griff) + var(--space-4));border-radius:var(--radius-sm)} /* Kachel und Karte: dieselbe flache Flaeche, nur die Rundung der jeweils echten Form (Kodex G3 — eine Mulde, mehrere Groessen). */ .skelett-kachel{height:calc(var(--griff) + var(--space-9));border-radius:var(--radius-md); flex:1;min-width:0} .skelett-karte{height:calc(var(--griff) * 3);border-radius:var(--radius-lg)} .skelett-liste{display:flex;flex-direction:column;gap:var(--space-3)} .skelett-reihe{display:flex;gap:var(--space-5)} /* ---------- Das Skelett des Starts ---------- Es steht dort, wo gleich die App steht: Ortsleiste links, Kopfzeile oben, Buehne in der Mitte mit ihren Massen. Vorher lagen hier zwei Karten-Mulden in der nackten Wurzel — randlos ueber den ganzen Schirm und oben an der Kante (`ds/skelett.js` sagt, warum das schlimmer ist als es aussieht). */ .skelett-start{display:flex;min-height:100dvh} .skelett-start-leiste{ flex:none;width:var(--orte-breite); display:flex;flex-direction:column;gap:var(--space-3); padding:calc(env(safe-area-inset-top) + var(--space-6)) var(--space-5) 0; border-right:var(--hairline); } .skelett-start-haupt{ flex:1;min-width:0; padding:calc(env(safe-area-inset-top) + var(--space-6)) var(--gutter-screen) var(--space-8); } .skelett-start-buehne{ max-width:1080px;margin-top:var(--space-8); display:flex;flex-direction:column;gap:var(--space-6); } .skelett-marke{height:32px;width:70%;border-radius:var(--radius-sm)} /* Die Momentgruppe ist eine Mulde mit drei Hoehen darin — hier als eine Flaeche, denn ein Skelett zeichnet die Form, nicht den Inhalt. */ .skelett-fach{height:calc(var(--moment-hoehe) * 3 + var(--space-4)); border-radius:var(--radius-xl);margin-top:var(--space-6)} .skelett-pfad{height:var(--space-6);width:min(320px,60%);border-radius:var(--radius-pill)} .skelett-titel{height:var(--space-8);width:min(280px,50%);border-radius:var(--radius-sm)} /* Unter 1100 px traegt der Start keine Leiste — dort hat die App auch keine offene. */ @media (max-width:1099px){ .skelett-start-leiste{display:none} } .fussnote{font:var(--type-caption);color:var(--tinte-fern);margin:0;text-wrap:pretty} .herkunft{font:var(--type-caption);color:var(--tinte-fern)} .befundzeile,.befundzeile-still{ display:block;width:100%;text-align:left; background:none;border:0;border-left:2px solid var(--glut); padding:var(--space-3) 0 var(--space-3) var(--space-5); font:var(--type-small);color:var(--glut-schrift);cursor:pointer; } .befundzeile{cursor:default} /* ---------- Metriken und Kacheln ---------- */ .metrik{font:var(--type-metric);letter-spacing:var(--tracking-metric)} .metrik-gross{font:var(--type-metric-xl)} .metrik-paar{display:inline-flex;align-items:baseline;gap:var(--space-2)} .metrik-einheit{font:var(--type-caption);color:var(--tinte-fern)} /* Die Zelle: eine flach gehobene Form im Bento. */ .kachel{ display:flex;flex-direction:column;gap:var(--space-1); flex:1;min-width:0;align-self:stretch; padding:var(--space-4) var(--space-6); border-radius:var(--radius-md); background:var(--flaeche); box-shadow:var(--neo-auf); } .kachel-label{color:var(--tinte-fern)} .kachel-wert{font:var(--type-metric);letter-spacing:var(--tracking-metric)} .kachel-unten{font:var(--type-caption);color:var(--tinte-fern)} .ton-critical{color:var(--glut-schrift)} .ton-caution,.ton-highlight{color:var(--ocker-schrift)} .ton-positive{color:var(--moos-schrift)} .notenkopf{display:flex;flex-direction:column;gap:var(--space-2)} .notenkopf-zahl{display:flex;align-items:baseline;gap:var(--space-4);margin:0;flex-wrap:wrap; font:var(--type-display-l);letter-spacing:var(--tracking-display)} .notenkopf-qualifier{font:var(--type-small);color:var(--tinte-still);letter-spacing:0} .notenkopf-fakten{font:var(--type-small);color:var(--tinte-still);margin:0} /* ---------- Listen und Zeilen ---------- */ .liste{display:flex;flex-direction:column;overflow:hidden} .liste>*+*{border-top:1px solid var(--linie)} .zeile{display:flex;align-items:center;gap:var(--space-4); min-height:52px;padding:var(--space-4) var(--gutter-card)} .zeile.ist-oeffenbar{cursor:pointer} .zeile.ist-oeffenbar:hover{background:var(--tinte-hauch)} .zeile.ist-oeffenbar:hover .zeile-chevron{transform:translateX(3px);color:var(--tinte-still)} .zeile-mitte{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .zeile-titel{font:var(--type-body);overflow-wrap:anywhere;min-width:0; display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-3);row-gap:2px} .zeile-titel>span:not(.zeile-kennung){flex:1 1 auto;min-width:0} .zeile-meta{font:var(--type-caption);color:var(--tinte-fern)} .zeile-kennung{flex:none;font:var(--type-caption);color:var(--tinte-fern);font-variant-numeric:tabular-nums} .zeile-griffe{display:flex;align-items:center;gap:var(--space-3);flex:none} .zeile-symbol,.zeile-chevron{color:var(--tinte-fern);flex:none} .zeile-befund{font:var(--type-caption);color:var(--glut-schrift)} .zeile.ist-erledigt .zeile-titel{color:var(--tinte-fern);text-decoration:line-through; text-decoration-color:var(--linie-stark)} .zeile.ist-atem{background:var(--tinte-hauch)} .zeile.ist-ausstehend{opacity:.6} .zeile.ist-markiert{background:var(--tinte-hauch-stark)} .zeile.ist-dran{background:var(--tinte-hauch)} button.zeile{width:100%;text-align:left;color:inherit} .posten-zeit{font:var(--type-small);color:var(--tinte-fern);flex:none;width:44px; font-variant-numeric:tabular-nums} .posten-symbol{color:var(--tinte-fern);flex:none} .posten-trenner .zeile-titel{color:var(--tinte-still)} /* ---------- Griffe in Zeilen ---------- Fläche 40×40, Zeichnung klein. Der Haken RASTET: die Mulde füllt sich mit Moos und drückt sich dabei ein. */ .hakengriff{ position:relative;flex:none;width:40px;height:40px;padding:0; display:grid;place-items:center;background:none;border:0;cursor:pointer; } .hakengriff::before{content:"";position:absolute; background:var(--flaeche);box-shadow:var(--neo-ein)} .hakengriff::before{width:26px;height:26px;border-radius:var(--radius-xs)} .hakengriff svg{position:relative;z-index:1} /* DER HAKEN IST IMMER ZU SEHEN, auch ungesetzt. Bis v34 war er `transparent` und erschien erst beim Ueberfahren — eine Mulde ohne Zeichnung, die aussah wie ein Loch im Material. Mit der Maus war das eine Entdeckung, mit dem Finger ein Raten (Kodex Z1: was man antippen kann, muss man sehen koennen). */ .hakengriff{color:var(--tinte-fern);opacity:.5} .hakengriff:hover,.hakengriff:focus-visible{color:var(--tinte-still);opacity:1} .hakengriff.ist-an{opacity:1} .hakengriff.ist-an::before{background:var(--moos);box-shadow:var(--neo-ein),inset 0 0 8px rgba(0,0,0,.25)} .hakengriff.ist-an{color:var(--auf-moos)} .uhrgriff{display:inline-flex;align-items:center;gap:var(--space-2); background:none;border:0;color:var(--tinte-still);cursor:pointer;font:var(--type-caption)} .uhrgriff-zeit{font-variant-numeric:tabular-nums} /* ---------- Der Popover ---------- */ .popover{ position:absolute;z-index:40;min-width:190px; /* Ohne Deckel wuchs die Blase mit dem laengsten Zeilentext — ein langer Modulname zog sie so breit, dass sie am Fensterrand klemmte, statt am Anker zu bleiben (`js/ds/flaechen.js popoverLinks()`). */ max-width:min(320px,calc(100vw - 16px)); background:var(--flaeche-hoch); border:0;border-radius:var(--radius-md); box-shadow:var(--neo-auf-tief); padding:var(--space-3); } /* ============================================================ 2 · ANZEIGEN — AMPELN, BALKEN, RINGE, TABELLEN, PROSA ============================================================ */ .ampel{position:relative;display:inline-grid;place-items:center;flex:none; width:24px;height:24px;color:var(--tinte-fern)} .ampel::before{content:"";position:absolute;width:24px;height:24px;border-radius:50%; background:var(--flaeche);box-shadow:var(--neo-ein)} button.ampel{cursor:pointer;width:40px;height:40px} button.ampel:hover::before{box-shadow:var(--neo-ein),inset 0 0 0 1px var(--linie-stark)} .ampel-gross{width:34px;height:34px} .ampel-gross::before{width:34px;height:34px} button.ampel.ampel-gross{width:44px;height:44px} .ampel-2::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%; background:linear-gradient(to right, var(--ocker) 0 50%, transparent 50% 100%)} .ampel-gross.ampel-2::after{width:24px;height:24px} /* Gruen ist die lauteste Farbe, die dieses System kennt, und die Ampel ist ein Zustand und keine Meldung. Sie traegt es deshalb gedaempft: eine gefuellte Mulde, kein Leuchtpunkt. */ .ampel-3::before{background:color-mix(in srgb,var(--moos) 76%,var(--flaeche)); box-shadow:var(--neo-ein)} .thema-ampel{display:inline-flex;align-items:center;gap:var(--space-3)} .thema-ampel-wort{font:var(--type-caption);color:var(--tinte-fern)} .ampelwahl{display:flex;flex-direction:column;gap:var(--space-1)} .ampelwahl-zeile{display:flex;align-items:center;gap:var(--space-4); min-height:42px;padding:0 var(--space-4); background:none;border:0;border-radius:var(--radius-xs); color:var(--tinte);cursor:pointer;text-align:left;font:var(--type-body)} .ampelwahl-zeile:hover{background:var(--tinte-hauch)} .ampelwahl-wort{flex:1} .balken{height:6px;border-radius:3px;background:var(--flaeche);box-shadow:var(--neo-ein);overflow:hidden} .balken>i,.balken-fuell{display:block;height:100%;border-radius:3px; background:linear-gradient(90deg,color-mix(in srgb,var(--akzent-glueh) 20%,transparent),color-mix(in srgb,var(--akzent-glueh) 85%,transparent))} .stufenbalken{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:2px} .stufenbalken-1{background:var(--tinte-hauch-stark)} .stufenbalken-2{background:var(--ocker)} .stufenbalken-3{background:var(--moos)} /* Der Ring: ein weicher Wulst, eine eingelassene Rille, ein dünner Chrombogen. Kein Chassis, keine Skala. */ .ring{position:relative;display:grid;place-items:center;flex:none} .ring-svg{transform:rotate(-90deg)} .ring-spur{fill:none;stroke:var(--senke)} .ring-wert{fill:none;stroke:var(--akzent-glueh);stroke-linecap:round} .ring-mitte{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px} .spark,.sparkline{display:block;width:100%;height:auto;overflow:visible} .spark path,.sparkline path{fill:none;stroke:var(--tinte-still);stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} .spark .flaeche,.sparkline .flaeche{fill:var(--tinte-hauch);stroke:none} .balkentage{position:relative;display:flex;align-items:flex-end;gap:3px;height:64px;width:100%} .balkentage-spalte{flex:1 1 0;min-width:0;height:100%;padding:0; display:flex;align-items:flex-end;background:none;border:0} button.balkentage-spalte{cursor:pointer} button.balkentage-spalte:hover .balkentage-stab{background:var(--akzent-glueh)} .balkentage-stab{flex:1;min-width:1px;border-radius:3px 3px 0 0;background:var(--tinte-still)} .balkentage-stab.ton-positive{background:var(--moos)} .balkentage-stab.ton-critical{background:var(--glut)} .balkentage-stab.ton-caution{background:var(--ocker)} .balkentage-luecke{flex:1;min-width:1px;height:100%;background:none; border:1px dashed var(--linie-stark);border-bottom:0;border-radius:3px 3px 0 0} .balkentage-ziel{position:absolute;left:0;right:0;border-top:1px dashed var(--linie-stark)} .wochenspur{display:flex;gap:var(--space-3);align-items:center} .wochenspur i{width:9px;height:9px;border-radius:50%;background:var(--flaeche);box-shadow:var(--neo-ein)} .wochenspur i.ist-da{background:var(--moos);box-shadow:none} .tabelle{width:100%;border-collapse:collapse;font:var(--type-small)} .tabelle th{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase; color:var(--tinte-fern);text-align:left;padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--linie-stark)} .tabelle td{padding:var(--space-4);border-bottom:1px solid var(--linie);vertical-align:top} .tabelle tr:last-child td{border-bottom:0} .tabelle .rechts,.tabelle-rahmen .rechts{text-align:right;font-variant-numeric:tabular-nums} .tabelle-rahmen{overflow-x:auto;border:0;border-radius:var(--radius-md); background:var(--flaeche);box-shadow:var(--neo-auf)} /* Eine Tabelle, in der GEGRIFFEN wird, richtet ihre Zellen mittig aus — sonst steht ein Knopf oben in der Zelle und der Titel daneben in der Mitte (Quellen-PDFs, `formulare/bibliothek.js`). */ .tabelle-rahmen[data-schluessel="quellpdf-tabelle"] td{vertical-align:middle} .quellpdf-titel{display:block;max-width:34ch;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .quellpdf-griffe{display:flex;align-items:center;gap:var(--space-2)} .prosa{display:flex;flex-direction:column;gap:var(--space-4)} .prosa-absatz{font:var(--type-body);color:var(--tinte-still);margin:0;max-width:66ch;text-wrap:pretty} .prosa-code{font-family:var(--font-mono);font-size:12.5px;padding:1px var(--space-2); background:var(--tinte-hauch);border-radius:var(--radius-xs);word-break:break-word} .prosa-zaun{margin:0;font-family:var(--font-mono);font-size:12.5px;line-height:1.6; padding:var(--space-4) var(--space-5);background:var(--flaeche);box-shadow:var(--neo-ein); border-radius:var(--radius-sm);overflow-x:auto;white-space:pre-wrap;word-break:break-word} .prosa-ueber{color:var(--tinte);margin:0} .prosa-ueber-1{font:var(--type-title)} .prosa-ueber-2{font:var(--type-subtitle)} .prosa-ueber-3,.prosa-ueber-4{font:var(--type-body-strong)} .prosa-liste{margin:0;padding-left:var(--space-6);font:var(--type-body);color:var(--tinte-still); max-width:66ch;display:flex;flex-direction:column;gap:var(--space-2)} ul.prosa-liste{list-style:disc} ol.prosa-liste{list-style:decimal} .prosa-linie{border:0;border-top:1px solid var(--linie);margin:var(--space-2) 0} .prosa-verweis{color:var(--tinte);text-decoration:underline; text-decoration-color:var(--linie-stark);text-underline-offset:2px} .prosa-verweis:hover{text-decoration-color:var(--tinte)} .prosa-zitat{border-left:2px solid var(--linie-stark);padding-left:var(--space-5); font:var(--type-blatt-notiz);color:var(--tinte-still);margin:0} .ausklapper{border:0;border-radius:var(--radius-md); background:var(--flaeche);box-shadow:var(--neo-auf);overflow:hidden} .ausklapper-kopf{display:flex;align-items:center;gap:var(--space-3);width:100%; padding:var(--space-5) var(--space-6);background:none;border:0;color:var(--tinte); cursor:pointer;font:var(--type-subtitle);text-align:left} .ausklapper-kopf svg{margin-left:auto;flex:none;color:var(--tinte-fern)} .ausklapper[open] .ausklapper-kopf svg{transform:rotate(180deg)} .ausklapper-koerper{padding:0 var(--space-6) var(--space-6)} .ausklapper-koerper[hidden]{display:none} .sessionzeile{display:flex;align-items:center;gap:var(--space-5); padding:var(--space-5) var(--space-6);background:var(--flaeche); border:0;border-radius:var(--radius-md);box-shadow:var(--neo-auf); color:var(--tinte);text-decoration:none} .sessionzeile:hover{color:var(--tinte)} .sessionzeile:active{box-shadow:var(--neo-ein)} .sessionzeile>svg{flex:none;color:var(--tinte-fern);order:3;margin-left:auto} .sessionzeile:hover>svg{transform:translate(2px,-2px);color:var(--tinte)} .sessionzeile-mitte{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .sessionzeile-text{font:var(--type-body-strong);color:var(--tinte)} .sessionzeile-satz{font:var(--type-caption);color:var(--tinte-fern); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .sessionzeile-marke{flex:none;display:grid;place-items:center;width:32px;height:32px; border-radius:50%;background:var(--flaeche);box-shadow:var(--neo-ein);color:var(--tinte-still)} /* ============================================================ 3 · FORMULARE — SHEETS, FELDER, SCHALTER, SUCHE ============================================================ */ /* ---------- Sheet ---------- */ /* DER SCHLEIER TRENNT, ODER ER IST KEINER. Er war eine blosse Faerbung, und der Inhalt dahinter blieb voll lesbar: Das Sheet lag AUF der Buehne, statt VOR ihr zu stehen. Wer ein Formular ausfuellt, soll nicht nebenbei den Tagesplan mitlesen — nicht weil es verboten waere, sondern weil das Auge es tut und dabei die Haelfte der Aufmerksamkeit verliert. Ein leichter Schliff dazu, und mehr braucht es nicht: Zwei Pixel Unschaerfe nehmen dem Hintergrund die Lesbarkeit und lassen ihm die Form — man sieht weiter, WO man ist, nur nicht mehr, was dort steht. */ .sheet-huelle{position:fixed;inset:0;z-index:50; display:flex;align-items:flex-end;justify-content:center; padding:0;background:var(--schleier); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .sheet-panel{position:relative;width:100%;max-width:560px;max-height:92dvh; display:flex;flex-direction:column; background:var(--flaeche);border:0; border-radius:var(--radius-xl) var(--radius-xl) 0 0; box-shadow:var(--schatten-sheet),inset 0 1px 0 var(--licht-innen)} .sheet-panel::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%); width:34px;height:4px;border-radius:2px;background:var(--linie-stark)} .sheet-kopf{padding:var(--space-8) var(--space-7) var(--space-4)} .sheet-titelzeile{display:flex;align-items:flex-start;gap:var(--space-5)} .sheet-titelzeile>div:first-child{flex:1;min-width:0} .sheet-eyebrow{display:block;color:var(--tinte-fern);margin-bottom:var(--space-2)} .sheet-titel{font:var(--type-title);margin:0;text-wrap:balance} /* `flex:0 1 auto` UND NICHT `flex:1`. Mit `flex:1` wuchs der Koerper auf die volle erlaubte Hoehe des Sheets, auch wenn er halb so viel Inhalt hatte — und schob die klebende Aktionsleiste an den unteren Rand. Uebrig blieb ein leeres Feld zwischen dem letzten Feld und „Sichern", bei „Tag umplanen" fuenfzig Pixel hoch. `0 1 auto` heisst: Nimm die Hoehe deines Inhalts, und SCHRUMPFE nur, wenn das Sheet an seine Hoechsthoehe stoesst. Genau dann faengt der Bildlauf an, und genau dann klebt die Leiste — vorher gibt es nichts zu kleben. */ .sheet-koerper{padding:0 var(--space-7) 0;overflow-y:auto;flex:0 1 auto; overscroll-behavior:contain} .sheet-text{font:var(--type-body);color:var(--tinte-still);margin:0;text-wrap:pretty} /* SIE KLEBT AM FUSS. Bis v34 stand sie am Ende des Fliesstexts, und in einem langen Formular hiess das: erst bis ganz nach unten scrollen, dann sichern. Bei „Thema bearbeiten" mit offenen Details waren das zwei Bildschirmhoehen. Jetzt steht sie immer da, wo sie hingehoert — und der Verlauf darueber sagt, dass darunter noch etwas weitergeht. */ .sheet-aktionen{ position:sticky;bottom:0;z-index:1; display:flex;gap:var(--space-4);justify-content:flex-end;flex-wrap:wrap; /* Am 26.08.2026 von 20/16/20 auf 12/12/16 gekuerzt: Die Leiste stand mit 56 px Luft ueber dem letzten Feld, und in einem kurzen Formular war das der groesste Block der ganzen Flaeche. Sie braucht Abstand, damit sie nicht am Text klebt — sie braucht keinen Absatz. */ margin-top:var(--space-5); padding:var(--space-5) 0 var(--space-6); background:linear-gradient(to bottom,transparent,var(--flaeche) var(--space-5)); } .sheet-aktionen .knopf,.sheet-aktionen .lm-rand{flex:1;min-width:130px} .sheet-aktionen-stapel{flex-direction:column-reverse} .sheet-aktionen-stapel .knopf{width:100%} /* DIE GEFAHRENAKTION GANZ LINKS, und `margin-right:auto` schiebt die beiden anderen nach rechts. Sie waechst NICHT mit (`flex:0 0 auto`): Eine Loeschzeile, die so breit ist wie „Sichern", sieht aus wie eine gleichrangige Wahl. */ .sheet-aktionen-gefahr{flex:0 0 auto;margin-right:auto; padding-inline:var(--space-3);white-space:nowrap} /* AUF DEM HANDY UNTER DIE BEIDEN, auf einer eigenen Zeile. Dort waechst jeder Knopf auf volle Breite und die Leiste bricht um; laege die Loeschzeile dann zwischen „Verwerfen" und „Sichern", stuende sie genau dort, wo der Daumen ohnehin liegt. `order` schiebt sie ans Ende, die volle Breite erzwingt den Umbruch davor. */ @media (max-width:899px){ .sheet-aktionen-gefahr{order:1;width:100%;margin-right:0; padding-block:var(--space-4);text-align:center} } /* DER ZWEITE SCHLEIER IST DUENNER ALS DER ERSTE (26.08.2026). `--schleier` liegt hier ein zweites Mal ueber dem, was die Huelle schon verschleiert hat: zweimal 66 % ergeben 88 %, und weil dem inneren die Unschaerfe fehlt, wurde das Panel als flache, deutlich dunklere Scheibe sichtbar — ein Rechteck mitten im Bild statt einer Tiefe dahinter. Was diese Ebene zu leisten hat, ist ein Schritt Abstand, nicht ein zweiter Vorhang. */ .sheet-rueckfrage{position:absolute;inset:0;z-index:2; display:grid;place-items:center;padding:var(--space-7); background:color-mix(in srgb,var(--schleier) 55%,transparent); border-radius:inherit} .sheet-rueckfrage-karte{background:var(--flaeche-hoch);border-radius:var(--radius-md); box-shadow:var(--neo-auf-tief);padding:var(--space-7); display:flex;flex-direction:column;gap:var(--space-3);max-width:380px} /* UND DIE KNOEPFE TRAGEN HIER KEINEN VERLAUF. Die Reihe benutzt dieselbe Klasse wie die Fussleiste eines Formulars, und die ist `sticky` mit einem Verlauf auf `--flaeche` — der sagt dort „darunter geht es weiter". In der Rueckfrage-Karte gibt es kein Darunter, und die Karte steht auf `--flaeche-hoch`: Der Verlauf malte eine FREMDE Farbe mit harter Kante hinter die zwei Knoepfe. Das war das schwarze Rechteck. */ .sheet-rueckfrage .sheet-aktionen{ position:static;background:none;margin-top:var(--space-4);padding:0} .sheet-rueckfrage-titel{font:var(--type-title);margin:0} .sheet-rueckfrage-text{font:var(--type-small);color:var(--tinte-still);margin:0} .blende-flug{position:fixed;inset:0;z-index:48; display:flex;align-items:flex-end;justify-content:center;background:var(--schleier)} .blende-panel{width:100%;max-width:520px; background:var(--flaeche);border:0; border-radius:var(--radius-xl) var(--radius-xl) 0 0; box-shadow:var(--schatten-sheet),inset 0 1px 0 var(--licht-innen); padding:var(--space-6) var(--space-6) var(--space-8); display:flex;flex-direction:column;gap:var(--space-3)} .blende-griff{width:34px;height:4px;border-radius:2px;background:var(--linie-stark); align-self:center;margin-bottom:var(--space-4)} /* ---------- Toast · Banner ---------- */ .toast-host{position:fixed;left:50%;transform:translateX(-50%); bottom:calc(var(--space-11) + env(safe-area-inset-bottom)); z-index:60;width:min(440px,calc(100vw - 32px));pointer-events:none} .toast{display:flex;align-items:center;gap:var(--space-4); padding:var(--space-5) var(--space-6); background:var(--flaeche-hoch);border:0;border-radius:var(--radius-md); box-shadow:var(--neo-auf-tief); font:var(--type-small);color:var(--tinte);pointer-events:auto} .toast svg{color:var(--moos-schrift);flex:none} .toast-text{flex:1;min-width:0;text-wrap:pretty} .toast-aktion{background:none;border:0;color:var(--tinte);cursor:pointer; font:var(--type-body-strong);text-decoration:underline;text-underline-offset:3px;flex:none} .banner{display:flex;align-items:center;gap:var(--space-4); padding:var(--space-4) var(--space-5); border:0;border-radius:var(--radius-sm); font:var(--type-small);background:var(--flaeche);box-shadow:var(--neo-ein)} .banner-symbol{flex:none;color:var(--tinte-still)} .banner-text{flex:1;min-width:0;text-wrap:pretty} .banner-aktion{background:none;border:0;color:inherit;cursor:pointer;flex:none; font:var(--type-body-strong);text-decoration:underline;text-underline-offset:3px} .banner-critical{color:var(--glut-schrift);box-shadow:var(--neo-ein),inset 0 0 14px var(--glut-hauch)} .banner-critical .banner-symbol{color:var(--glut-glueh)} .banner-caution{color:var(--ocker-schrift)} .banner-caution .banner-symbol{color:var(--ocker)} .banner-still{color:var(--tinte-still)} /* ---------- Felder ---------- Ein Feld ist eine Mulde. Fokus = die Mulde vertieft sich und der Rand fängt einen Hauch Licht — kein blauer Ring. */ .formular{display:flex;flex-direction:column;gap:var(--space-8)} .feld{display:flex;flex-direction:column;gap:var(--space-3)} /* OHNE DIESE ZEILE VERSCHWINDET NICHTS. `[hidden]{display:none}` steht im Stylesheet des BROWSERS, und jede Autorenregel mit `display` schlaegt es — unabhaengig von der Spezifitaet. Zwei Felder verlassen sich darauf und standen deshalb da, obwohl sie nicht gelten: „Name des neuen Oberthemas" bei jedem geoeffneten Themenformular und seit dem 26.08.2026 „Unter Kapitel" auch bei einem Arbeitsschritt (`formulare/struktur.js`). Gefunden beim Umbau des Kapitelformulars; der Waechter in `pruefen.test.js` sieht diese Schreibweise (`feld.knoten.hidden = …`) nicht, weil er nur nach `const x = el("div.klasse")` sucht. */ .feld[hidden]{display:none} /* Das Label wird gelesen, nicht ueberflogen — Satzschreibung statt Versalien, wie jeder andere Fliesstext im Formular. */ .feld-label{font:var(--type-small-strong);letter-spacing:0; text-transform:none;color:var(--tinte-still)} .feld-hinweis{font:var(--type-caption);color:var(--tinte-fern);text-wrap:pretty} .feld.hat-fehler .feld-label{color:var(--tinte-still)} .feld.hat-fehler .feld-hinweis{color:var(--glut-schrift)} .eingabe,.eingabe-flaeche,.eingabe-datum,.eingabe-suche{ width:100%;min-height:var(--griff); padding:var(--space-4) var(--space-5); font:var(--type-body);color:var(--tinte); background:var(--flaeche); border:0;border-radius:var(--radius-sm); box-shadow:var(--neo-ein); } .eingabe-flaeche{min-height:96px;resize:vertical;line-height:1.55} .eingabe::placeholder,.eingabe-flaeche::placeholder{color:var(--tinte-fern)} /* ---------- Die Uhrzeit ---------- Ein `input[type=time]` bringt eigene Innereien mit, und dafuer gab es bis zum 26.08.2026 keine einzige Regel — das Feld erbte `.eingabe` und sah darin aus wie ein Fremdkoerper: helle Systemschrift, ein Uhrsymbol in Browsergrau, und im Nachtlicht ein weisser Kasten. Die Ziffern bekommen Tabellenziffern, damit sie beim Tippen nicht springen, und das Uhrsymbol wird eingefaerbt statt versteckt: Es ist der Hinweis darauf, dass hier mehr geht als Tippen. */ .eingabe[type="time"]{ font-variant-numeric:tabular-nums; /* Sonst dehnt Safari das Feld auf seine eigene Vorstellung. */ min-width:0; } /* `--k` ist 1 in der Nacht und 0 am Tag (`tokens.css`). Das schwarze Browser-Symbol wird damit genau dort gekehrt, wo es sonst im Dunkeln verschwaende — ohne eine zweite Regel je Licht. */ .eingabe[type="time"]::-webkit-calendar-picker-indicator{ filter:invert(var(--k));opacity:.55;cursor:pointer;padding:0;margin:0} .eingabe[type="time"]:hover::-webkit-calendar-picker-indicator{opacity:1} .eingabe[type="time"]::-webkit-datetime-edit-fields-wrapper{padding:0} .eingabe[type="time"]::-webkit-datetime-edit-hour-field:focus, .eingabe[type="time"]::-webkit-datetime-edit-minute-field:focus{ background:var(--tinte-hauch-stark);color:var(--tinte);border-radius:3px;outline:none} /* Fokus macht tiefer, nie heller/groesser — und der Innenring ist jetzt wirklich zu sehen: `--akzent-hauch` (8 %) war auf der Mulde faktisch unsichtbar. `.auswahl-knopf` traegt denselben Ring, offen oder fokussiert — drei Tiefen im ganzen Formular (ruhend `--neo-ein`, aktiv `--neo-ein-tief`, Gruppe `--neo-auf`), keine vierte. */ .eingabe:focus,.eingabe-flaeche:focus,.eingabe-datum:focus,.eingabe-suche:focus, .auswahl[data-offen="ja"] .auswahl-knopf,.auswahl-knopf:focus-visible{ outline:none; box-shadow:var(--neo-ein-tief), inset 0 0 0 1px color-mix(in srgb,var(--akzent-glueh) 38%,transparent); } .eingabe-rahmen,.eingabe-rahmen-flaeche{position:relative;display:flex;align-items:center;gap:var(--space-3)} .eingabe-rahmen .eingabe{flex:1} .eingabe-symbol{position:absolute;left:var(--space-4);color:var(--tinte-fern);pointer-events:none} .eingabe-symbol~.eingabe{padding-left:calc(var(--space-5) + 20px)} .eingabe-datum{display:flex;align-items:center;gap:var(--space-3);text-align:left} .eingabe-datum .eingabe-symbol{position:static;flex:none} .eingabe-einheit{font:var(--type-small);color:var(--tinte-fern);flex:none} .eingabe-chevron{position:absolute;right:var(--space-4);color:var(--tinte-fern);pointer-events:none} /* TABELLENZIFFERN, WO EINE NUMMER STEHT (27.08.2026, `ds/feldtypen.js`). Eine ISBN in Proportionalziffern liest sich nicht als Nummer: Die Eins ist schmal, die Null breit, und beim Vergleich zweier Zeilen verrutschen die Stellen gegeneinander. `tabular-nums` gibt jeder Ziffer dieselbe Breite — derselbe Grund, aus dem `.numeric` unten steht. Die Klasse setzt der TYP, nicht die Aufrufstelle. */ .eingabe.ist-ziffern{font-variant-numeric:tabular-nums;letter-spacing:.01em} /* DER GRIFF IM RAHMEN — beim `url`- und `doi`-Feld. Er sitzt IN der Mulde und traegt deshalb kein eigenes Relief: Relief bezeichnet Ebenen, und der Griff liegt auf derselben wie das Feld. Was ihn abhebt, ist die Farbe beim Zeigen. AUS HEISST WIRKLICH AUS: Solange nichts oder etwas Falsches drinsteht, fuehrt er nirgendwohin — und ein Griff, der ins Leere fuehrt, ist schlimmer als keiner (Kodex G1). */ .eingabe-griff{position:absolute;right:var(--space-3);display:flex; align-items:center;justify-content:center; /* 32 px sichtbar, 44 mit dem Pseudoelement darunter — ein groesserer Knopf haette die Mulde gesprengt. HIER STAND „(Kodex Z2)" HINTER DER 44, und das war falsch zitiert: Z2 verlangt 24 x 24 px (WCAG 2.2 AA, `System/Kodex.md`). Die 44 sind Apples Empfehlung und stehen in diesem Repo nirgends. Sie sind nicht falsch, nur nicht gefordert — ein Kommentar, der eine Regel falsch zitiert, ist aber schlimmer als keiner: Der naechste richtet sich danach. */ width:32px;height:32px;border:0;border-radius:var(--radius-sm); background:none;color:var(--tinte-fern);cursor:pointer} .eingabe-griff::after{content:"";position:absolute;inset:-6px} .eingabe-griff:hover:not(:disabled){color:var(--tinte);background:var(--tinte-hauch)} .eingabe-griff:focus-visible{outline:2px solid var(--akzent-glueh);outline-offset:2px} .eingabe-griff:disabled{opacity:.35;cursor:default} .eingabe-griff~.eingabe,.eingabe-rahmen:has(.eingabe-griff) .eingabe{ padding-right:calc(var(--space-5) + 28px)} /* Der Fehler ist eine warme Mulde, keine rote Box: Sie gluet innen statt einen Ring zu ziehen. Das Label bleibt neutral (oben) — nur die Mulde und der Hinweis tragen die Warnung. */ .feld.hat-fehler .eingabe,.feld.hat-fehler .eingabe-flaeche, .feld.hat-fehler .auswahl-knopf{box-shadow:var(--neo-ein),inset 0 0 12px var(--glut-hauch)} .numeric{font-variant-numeric:tabular-nums} .feldgruppe{display:flex;flex-direction:column;gap:var(--space-5); padding:var(--space-6);background:var(--flaeche); border:0;border-radius:var(--radius-lg);box-shadow:var(--neo-auf)} .feldgruppe-titel{font:var(--type-subtitle);margin:0} .feldgruppe-hinweis{font:var(--type-caption);color:var(--tinte-fern);margin:0} .feldgruppe-innen{display:flex;flex-direction:column;gap:var(--space-5)} .gruppe{display:flex;flex-direction:column;gap:var(--space-5)} /* Die Unterschrift im Deckblatt: Label, Stand und Griff untereinander, mit derselben Luft wie ein Feld daneben. Der Griff steht LINKS und nicht breit — er ist ein Nebengriff, kein zweites Sichern. */ .deckblatt-unterschrift{display:flex;flex-direction:column; align-items:flex-start;gap:var(--space-3)} .deckblatt-unterschrift .fussnote{margin:0} /* Im Sheet traegt nur das Sheet — eine Platte auf der Platte waere ein zweiter Rahmen. Getrennt wird per Abstand und Haarlinie statt Flaeche. */ .sheet-koerper .feldgruppe{background:none;box-shadow:none;padding:0} /* EIN ABSTAND AUS EINER QUELLE (26.08.2026). Zwischen zwei Gruppen standen 61 px, und die kamen aus drei Toepfen: 12 px `gap` des `.stapel`, 24 px `margin-top` und 24 px `padding-top` dieser Regel. Innerhalb einer Gruppe waren es 16 px, zwischen Label und Feld 6 px — und wo ein Fremd-Wrapper dazwischenstand (`.formular-mass`, `.postenbereich`, ein `.stapel` im `.stapel`), griff die Regel gar nicht und es blieben 12. Dasselbe Formular hatte damit vier verschiedene Abstaende fuer dieselbe Sache: „viel zu viel White Space, an anderer Stelle zu eng". Der `gap` des `.stapel` traegt jetzt allein die Trennung, dazu kommt nur noch die Luft ueber der Linie. Macht 32 px, ueberall gleich. */ .sheet-koerper .feldgruppe+.feldgruppe{margin-top:0; padding-top:var(--space-7);border-top:1px solid var(--linie)} /* AUSSER DER DETAILGRUPPE, und die ist der Grund, warum diese Regel ueberhaupt eine Ausnahme braucht (26.08.2026). `.sheet-koerper .feldgruppe` (0-2-0) schlug `.feldgruppe-details` (0-1-0) unabhaengig von der Reihenfolge — die Kachel verlor im Formular ihren Grund, ihren Schatten und ihr Padding. Uebrig blieben ein Wort und ein 7-px-Pfeil in `--tinte-fern`, und darueber zog die Regel eine Haarlinie: Es sah aus wie ein Trenner, nicht wie etwas zum Aufklappen. Man fand es nur, wenn man wusste, dass es da ist. Sie IST eine Platte auf der Platte, und anders als eine gewoehnliche Feldgruppe darf sie das: Sie ist zusammengeklappt, und was man aufklappen kann, muss als Gegenstand zu erkennen sein. */ .sheet-koerper .feldgruppe-details{ background:var(--flaeche);box-shadow:var(--neo-auf); border-radius:var(--radius-lg);overflow:hidden} .sheet-koerper .feldgruppe+.feldgruppe-details{border-top:0;padding-top:0} /* Die Detailfelder standen doppelt eingerueckt — einmal von der Kachel, einmal von dieser Regel. Sie fluchten jetzt mit dem Rest des Formulars. */ .sheet-koerper .feldgruppe-details[open] .feldgruppe-innen{ padding:0 var(--space-6) var(--space-6)} /* ---------- Schalter, Haken, Stepper ---------- Der Schalter ist DER Schnapp des Systems: die Mulde, in der ein Silberknubbel in 160 ms einrastet. An = das Metall fängt Licht. */ .schalter{display:flex;align-items:center;gap:var(--space-5);cursor:pointer} /* EIN BEFUND AM SCHALTER (28.08.2026). Ein Schalter hat keine Mulde, die gluehen koennte — die Warnung traegt der Text, und die Zeile bekommt links eine Glutkante. Sie sitzt am WRAPPER und nicht am `