/* ═══════════════════════════════════════════════════════════════════════════ * Farben an EINER Stelle · Grundlage fuer den Dunkelmodus * ═══════════════════════════════════════════════════════════════════════════ * * Bis zum 18.08.2026 standen in dieser Datei 280 fest eingetragene Farben an * 280 Stellen, gegen 15 Verwendungen von var(--…). Ein Dunkelmodus ist so * nicht zu bauen: man muesste 280 Stellen finden und jede einzeln umstellen, * und die eine, die man uebersieht, faellt niemandem auf. * * ── Warum jede Farbe ihr EIGENES Merkmal bekommt ───────────────────────── * * Der naheliegende Weg waere gewesen, die 168 verschiedenen Farbwerte auf ein * Dutzend zusammenzufassen. Das haette den HELLEN Modus veraendert — an * hundert Stellen ein wenig, und niemand haette sagen koennen, wo. * * Deshalb: jede Farbe behaelt im hellen Modus GENAU ihren Wert. Die Umstellung * ist eine reine Umbenennung; das Bild bleibt Pixel fuer Pixel dasselbe, und * genau das ist nachgemessen worden (npm run optik, Vorher-Nachher). * * Zusammengefasst wird erst im DUNKLEN Modus — dort gibt es kein Vorher, das * man verletzen koennte. * * ── Die vier Rollen ────────────────────────────────────────────────────── * * --c-tNN Schrift 73 Werte * --c-fNN Flaeche 55 Werte * --c-lNN Linie 34 Werte * --c-aNN Akzent 6 Werte * * Die Rolle stammt nicht aus einer Vermutung, sondern aus der Eigenschaft, in * der die Farbe im Stilblatt tatsaechlich am haeufigsten steht. * * WER EINE FARBE AENDERT, aendert sie hier — und sieht sofort, ob sie auch * einen Dunkelwert braucht. Das ist der ganze Zweck. */ :root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;color:var(--c-t01);background:var(--c-f01);--ink:var(--c-t01);--muted:var(--c-t02);--line:var(--c-l01);--surface:var(--c-f55);--surface-soft:var(--c-f02);--teal:var(--c-a01);--teal-dark:var(--c-a02);--mint:var(--c-f03);--amber:var(--c-a03);--brand-compass:var(--c-a04);--brand-gold:var(--c-a05);--brand-logo-surface:var(--c-f04);--red:var(--c-a06);--shadow:0 18px 55px rgba(24,49,58,.09)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,var(--c-f05) 0%,var(--c-f06) 46%,var(--c-f07) 100%)}button,input,select,textarea{font:inherit}.test-banner{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:8px;padding:3px 14px;background:var(--c-f08);color:var(--c-t03);font-size:10px;font-weight:600;letter-spacing:.06em;text-align:center;min-height:22px}.pulse-dot{width:5px;height:5px;border-radius:50%;background:var(--c-f09);box-shadow:0 0 0 3px rgba(86,214,175,.14);flex:0 0 5px}.app-layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 22px)}.sidebar{background:rgba(12,56,66,.96);color:white;padding:24px 18px;display:flex;flex-direction:column;gap:24px;position:sticky;top:22px;height:calc(100vh - 22px);overflow-y:auto;overscroll-behavior:contain}.brand-block{display:flex;gap:12px;align-items:center}.brand-block strong,.brand-block span{display:block}.brand-block strong{font-family:Georgia,serif;font-size:21px;letter-spacing:.01em}.brand-block span{font-size:12px;opacity:.66;margin-top:3px}.brand-logo-frame{width:48px;height:48px;flex:0 0 48px;border-radius:15px;background:var(--brand-logo-surface);display:grid;place-items:center;padding:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),0 7px 18px rgba(3,25,31,.18)}.brand-logo{display:block;width:100%;height:100%;object-fit:contain}.brand-copy{min-width:0}.mobile-brand{display:none}.nav-list{display:grid;gap:7px}.nav-group{display:grid;gap:5px}.nav-group[hidden]{display:none}.nav-group+.nav-group{margin-top:15px}.nav-group-title{margin:0 0 4px 13px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(207,226,222,.46)}.nav-item{border:0;background:transparent;color:var(--c-t04);border-radius:11px;padding:9px 13px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;font-size:14.5px;letter-spacing:.005em;transition:background .12s ease,color .12s ease}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.12);color:white}/* Die Nummern 01-14 sind am 18.08.2026 aus dem Menue verschwunden — sie waren das Merkmal, das die Oberflaeche am staerksten nach Werkzeug aussehen liess. Die Regel bleibt fuer den Fall stehen, dass spaeter Sinnbilder an dieselbe Stelle kommen. */ .nav-glyph:empty{display:none} .nav-glyph{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.08);font-size:10px;font-weight:800}.sidebar-note{margin-top:auto;border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:13px;background:rgba(255,255,255,.055)}.sidebar-note strong{font-size:12px;text-transform:uppercase;letter-spacing:.07em}.sidebar-note p{font-size:12px;line-height:1.5;color:var(--c-t05);margin:.45rem 0 0}.main-content{padding:24px 30px 50px;max-width:1480px;width:100%;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:10px;font-weight:800;color:var(--c-t06);margin:0 0 6px}.context-path{font-size:14px;font-weight:700;color:var(--c-t07)}.primary-button,.secondary-button,.ghost-button,.danger-button,.icon-button{border-radius:12px;padding:10px 15px;font-weight:750;cursor:pointer;border:1px solid transparent}.primary-button{background:linear-gradient(135deg,var(--c-f10),var(--c-f11));color:white;box-shadow:0 8px 20px rgba(14,129,114,.2)}.secondary-button{background:var(--c-f12);color:var(--c-t08);border-color:var(--c-l02)}.ghost-button{background:transparent;color:inherit;border-color:currentColor;opacity:.9}.danger-button{background:var(--c-f13);color:var(--c-t09);border-color:var(--c-l03)}.icon-button{background:transparent;color:var(--c-t10);font-size:24px;padding:3px 8px}.context-panel,.panel{background:rgba(255,255,255,.93);border:1px solid rgba(210,226,221,.95);box-shadow:var(--shadow);border-radius:22px}.context-panel{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;padding:22px 24px;margin-bottom:18px}.context-panel h1{font-family:Georgia,serif;font-size:30px;margin:0;color:var(--c-t11)}.context-panel p{margin:8px 0 0;color:var(--muted);font-size:14px}.context-controls{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px;min-width:min(650px,60%)}label{display:grid;gap:6px;font-size:12px;font-weight:750;color:var(--c-t12)}select,input,textarea{width:100%;border:1px solid var(--c-l04);border-radius:12px;background:white;color:var(--c-t01);padding:10px 11px;outline:none}select:focus,input:focus,textarea:focus{border-color:var(--c-l05);box-shadow:0 0 0 4px rgba(57,161,143,.12)}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}.metric{background:rgba(255,255,255,.93);border:1px solid var(--line);border-radius:19px;padding:17px 18px;box-shadow:0 12px 30px rgba(24,49,58,.06)}.metric span{font-size:11px;text-transform:uppercase;letter-spacing:.075em;font-weight:750;color:var(--c-t06)}.metric strong{display:block;font-family:Georgia,serif;font-size:29px;margin-top:7px;color:var(--c-t13)}.metric small{display:block;color:var(--c-t14);margin-top:3px}.content-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.75fr);gap:18px;margin-bottom:18px}.panel{padding:21px;margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:15px}.panel h2{margin:0;font-family:Georgia,serif;font-size:22px;color:var(--c-t15)}.status-chip{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;background:var(--c-f12);color:var(--c-t16);font-size:11px;font-weight:800}.status-chip.neutral{background:var(--c-f14);color:var(--c-t17)}.status-chip.allow{background:var(--c-f15);color:var(--c-t18)}.status-chip.deny{background:var(--c-f16);color:var(--c-t19)}.work-list,.role-list{display:grid;gap:10px}.work-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--c-l06);border-radius:15px;padding:12px 13px;background:var(--c-f17)}.work-type{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;background:var(--c-f18);color:var(--c-t20);font-size:10px;font-weight:850}.work-main strong,.work-main span{display:block}.work-main strong{font-size:14px}.work-main span{color:var(--c-t21);font-size:12px;margin-top:3px}.class-chip{font-size:10px;font-weight:850;border-radius:999px;padding:5px 8px;background:var(--c-f19);color:var(--c-t22)}.class-chip.sensitive{background:var(--c-f20);color:var(--c-t23)}.role-card{border-left:3px solid var(--c-l07);background:var(--c-f21);border-radius:0 13px 13px 0;padding:10px 12px}.role-card strong,.role-card span{display:block}.role-card strong{font-size:13px}.role-card span{font-size:11px;color:var(--c-t24);margin-top:3px}.security-note{margin-top:15px;padding:12px;border-radius:14px;background:var(--c-a04);color:var(--c-t25)}.security-note strong,.security-note span{display:block}.security-note strong{font-size:12px}.security-note span{font-size:11px;margin-top:4px;opacity:.8}.action-row{display:grid;grid-template-columns:minmax(200px,1.5fr) minmax(180px,.8fr) auto auto;gap:10px;align-items:end}.result-box{margin:15px 0 0;background:var(--c-f22);color:var(--c-t26);border-radius:15px;padding:15px;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.audit-summary{display:flex;gap:18px;flex-wrap:wrap;color:var(--c-t27);font-size:13px}.audit-summary strong{color:var(--c-t28)}.skeleton{height:62px;border-radius:14px;background:linear-gradient(90deg,var(--c-f23),var(--c-f24),var(--c-f23));background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{to{background-position:-200% 0}}.create-dialog{border:0;border-radius:24px;padding:0;box-shadow:0 30px 90px rgba(14,40,48,.28);max-width:680px;width:calc(100% - 28px)}.create-dialog::backdrop{background:rgba(7,32,39,.48);backdrop-filter:blur(4px)}.dialog-shell{padding:22px;display:grid;gap:15px}.dialog-head{display:flex;justify-content:space-between}.dialog-head h2{font-family:Georgia,serif;font-size:27px;margin:0}.segmented{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;background:var(--c-f23);border-radius:13px}.segment{border:0;background:transparent;border-radius:10px;padding:9px;color:var(--c-t29);font-weight:700;cursor:pointer}.segment.active{background:white;color:var(--c-t30);box-shadow:0 3px 10px rgba(25,55,62,.08)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.dialog-note{background:var(--c-f25);border:1px solid var(--c-l08);border-radius:13px;padding:11px;color:var(--c-t31);font-size:12px;line-height:1.5}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.compact-panel{margin-bottom:0}@media(max-width:1050px){.app-layout{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding:20px 11px}.brand-copy{display:none}.nav-item,.nav-item.active{justify-content:flex-start;font-size:12px}.sidebar-note{display:none}.context-panel{align-items:stretch;flex-direction:column}.context-controls{min-width:0;width:100%}.metric-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.test-banner{font-size:9px}.app-layout{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:70px;z-index:25;padding:8px 10px;display:block}.brand-block,.sidebar-note,#reset{display:none}.nav-list{grid-template-columns:repeat(4,1fr);gap:4px}.nav-item,.nav-item.active{font-size:10px;display:grid;justify-items:center;gap:3px;padding:6px 4px}.nav-glyph{width:25px;height:25px}.main-content{padding:17px 13px 92px}.topbar{align-items:flex-start;display:grid;grid-template-columns:minmax(0,1fr) auto}.mobile-brand{display:flex;grid-column:1/-1;align-items:center;gap:8px;color:var(--teal-dark);font-family:Georgia,serif;font-weight:800;font-size:17px}.mobile-brand img{width:30px;height:30px;flex:0 0 30px;object-fit:contain;display:block}.topbar-context{min-width:0}.topbar .primary-button{padding:9px 12px}.context-panel{padding:18px}.context-panel h1{font-size:25px}.context-controls{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.action-row{grid-template-columns:1fr 1fr}.action-row button{width:100%}.form-grid{grid-template-columns:1fr}.panel{padding:17px}.work-item{grid-template-columns:auto 1fr}.work-item .class-chip{grid-column:2}}@media(max-width:430px){.metric-grid{grid-template-columns:1fr 1fr}.metric{padding:14px}.metric strong{font-size:24px}.action-row{grid-template-columns:1fr}.context-path{max-width:230px}.test-banner{padding:7px 8px}} .finance-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.finance-toolbar label{min-width:210px}.finance-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:14px}.finance-metric{border:1px solid var(--c-l09);border-radius:15px;padding:14px;background:var(--c-f26)}.finance-metric span,.finance-metric strong,.finance-metric small{display:block}.finance-metric span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--c-t32);font-weight:750}.finance-metric strong{font-family:Georgia,serif;font-size:24px;color:var(--c-t13);margin-top:6px}.finance-metric small{font-size:10px;color:var(--c-t33);margin-top:5px;line-height:1.4}.finance-lineage{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--c-t02)}.finance-lineage span{background:var(--c-f27);border-radius:999px;padding:6px 9px}@media(max-width:720px){.nav-list{grid-template-columns:repeat(5,1fr)}.finance-metrics{grid-template-columns:1fr}.finance-toolbar{display:grid;grid-template-columns:1fr}.finance-toolbar label,.finance-toolbar button{width:100%}} /* AC01 Action Center / Task Rail */ .ac-shell{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px;margin:18px 0} .ac-shell>*{flex:1 1 320px;min-width:0} .ac-main,.task-rail{min-width:0}.compact-filter{display:grid;gap:5px;font-size:.78rem;color:var(--muted)} .compact-filter select{min-width:150px}.projection-note{margin:-4px 0 14px;color:var(--muted);font-size:.88rem} .action-card-list,.task-rail-list{display:grid;gap:10px}.action-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-strong,var(--c-f55))} .action-card:focus-within{outline:2px solid currentColor;outline-offset:2px}.action-need{font-size:.72rem;font-weight:750;padding:5px 8px;border-radius:999px;background:var(--surface-soft,var(--c-f28));white-space:nowrap}.action-main{min-width:0;display:grid;gap:3px}.action-main strong{overflow-wrap:anywhere;white-space:normal}.action-main span{font-size:.8rem;color:var(--muted)} .quick-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.quick-action{border:1px solid var(--line);background:transparent;border-radius:9px;padding:7px 9px;font:inherit;font-size:.78rem;cursor:pointer}.quick-action:hover,.quick-action:focus-visible{background:var(--surface-soft,var(--c-f28))} .task-rail .action-card{grid-template-columns:minmax(0,1fr);gap:7px}.task-rail .quick-actions{justify-content:flex-start}.task-rail .action-need{justify-self:start}.task-rail-list .dialog-note{margin:0} @media (max-width:900px){.ac-shell>*{flex:1 1 100%}.action-card{grid-template-columns:auto minmax(0,1fr)}.quick-actions{grid-column:1/-1;justify-content:flex-start}} @media (max-width:600px){.ac-shell{margin:12px 0;gap:12px}.action-card{grid-template-columns:1fr}.action-need{justify-self:start}.quick-actions{grid-column:auto}.compact-filter{width:100%}.compact-filter select{width:100%}.panel-head{align-items:flex-start;flex-wrap:wrap}} .children-workspace{scroll-margin-top:48px}.children-workspace[hidden]{display:none}.children-hero p{color:var(--muted);margin:.45rem 0 0}.children-metrics{margin:16px 0 0}.children-layout{display:grid;grid-template-columns:minmax(300px,.7fr) minmax(0,1.7fr);gap:18px}.children-list-panel{align-self:start;position:sticky;top:58px}.plan-list{display:grid;gap:9px}.plan-card{border:1px solid var(--c-l09);background:var(--c-f29);border-radius:15px;padding:12px;cursor:pointer;text-align:left;width:100%;color:inherit}.plan-card:hover,.plan-card.active{border-color:var(--c-l10);background:var(--c-f30)}.plan-card strong,.plan-card span,.plan-card small{display:block}.plan-card span{color:var(--c-t34);font-size:12px;margin-top:3px}.plan-card small{color:var(--c-t35);font-size:10px;margin-top:6px}.children-editor-panel form{display:grid;gap:13px}.planner-fieldset{border:1px solid var(--c-l11);border-radius:15px;padding:12px;margin:0}.planner-fieldset legend{font-size:12px;font-weight:800;color:var(--c-t36);padding:0 6px}.field-help{font-size:11px;color:var(--c-t37);margin:0 0 8px}.data-boundary-note{border-left:4px solid var(--c-l12);background:var(--c-f31);border-radius:0 12px 12px 0;padding:11px 12px;font-size:12px;color:var(--c-t38)}.editor-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.findings-list{display:grid;gap:9px;margin-top:14px}.finding{border:1px solid var(--c-l13);border-radius:13px;padding:10px 12px;background:var(--c-f32)}.finding strong,.finding span{display:block}.finding strong{font-size:13px}.finding span{font-size:11px;color:var(--c-t39);margin-top:3px}.finding.important{border-color:var(--c-l14);background:var(--c-f33)}.finding.blocking{border-color:var(--c-l15);background:var(--c-f34)}.children-empty-state{padding:15px;border:1px dashed var(--c-l04);border-radius:14px;color:var(--c-t40);text-align:center}.children-editor-panel textarea{resize:vertical}.children-editor-panel [hidden]{display:none!important} @media(max-width:1050px){.children-layout{grid-template-columns:1fr}.children-list-panel{position:static}.children-metrics{grid-template-columns:repeat(4,1fr)}} @media(max-width:720px){.nav-list{grid-template-columns:repeat(6,1fr)}.children-metrics{grid-template-columns:repeat(2,1fr)}.editor-actions{display:grid;grid-template-columns:1fr 1fr}.editor-actions button{width:100%}} @media(max-width:430px){.editor-actions{grid-template-columns:1fr}.children-metrics{grid-template-columns:1fr 1fr}.children-editor-panel .form-grid{grid-template-columns:1fr}} /* International UX & Localization V0.1 */ html{font-size:16px} html[data-display-scale="COMPACT"]{font-size:14px} html[data-display-scale="STANDARD"]{font-size:16px} html[data-display-scale="LARGE"]{font-size:18px} html[data-display-scale="VERY_LARGE"]{font-size:20px} html[data-display-scale="COMPACT"] button, html[data-display-scale="COMPACT"] input, html[data-display-scale="COMPACT"] select, html[data-display-scale="COMPACT"] textarea{padding-block:8px} html[data-display-scale="LARGE"] button, html[data-display-scale="LARGE"] input, html[data-display-scale="LARGE"] select, html[data-display-scale="LARGE"] textarea{padding-block:12px;min-height:44px} html[data-display-scale="VERY_LARGE"] button, html[data-display-scale="VERY_LARGE"] input, html[data-display-scale="VERY_LARGE"] select, html[data-display-scale="VERY_LARGE"] textarea{padding-block:14px;min-height:48px} html[data-display-scale="LARGE"] .panel, html[data-display-scale="LARGE"] .context-panel{padding:24px} html[data-display-scale="VERY_LARGE"] .panel, html[data-display-scale="VERY_LARGE"] .context-panel{padding:27px} html[data-display-scale="VERY_LARGE"] .app-layout{grid-template-columns:minmax(220px,285px) minmax(0,1fr)} .nav-item,.primary-button,.secondary-button,.ghost-button,.danger-button,label,.dialog-note,.projection-note{overflow-wrap:anywhere} .context-controls{grid-template-columns:repeat(3,minmax(140px,1fr));min-width:min(760px,68%)} @media(max-width:1200px){.context-controls{grid-template-columns:repeat(2,minmax(150px,1fr));min-width:min(620px,62%)}} @media(max-width:1050px){.context-controls{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;width:100%}} @media(max-width:720px){.context-controls{grid-template-columns:1fr}.nav-list{grid-template-columns:repeat(6,1fr)}} @media(max-width:430px){html[data-display-scale="VERY_LARGE"]{font-size:18px}} /* Real-use recovery delta V0.1 */ .finance-recovery{margin-top:18px;padding-top:16px;border-top:1px solid var(--line,var(--c-l09))} .finance-recovery h3{margin:.1rem 0 0;font-size:1.12rem}.recovery-state{border:1px solid var(--c-l09);border-radius:14px;padding:12px 14px;background:var(--c-f26);display:grid;gap:4px}.recovery-state strong,.recovery-state span{display:block}.recovery-state span{font-size:.85rem;color:var(--muted,var(--c-t02));line-height:1.45}.recovery-state[data-state="REAUTH_REQUIRED"],.recovery-state[data-state="STATE_CHANGED"]{background:var(--c-f33);border-color:var(--c-l14)}.recovery-state[data-state="PERMISSION_CHANGED"],.recovery-state[data-state="ABORT_REQUIRED"],.recovery-state[data-state="TECHNICAL_FAILURE"]{background:var(--c-f34);border-color:var(--c-l15)}.recovery-state[data-state="READY_TO_EXECUTE"],.recovery-state[data-state="RELEASED"],.recovery-state[data-state="CONTINUE"]{background:var(--c-f30);border-color:var(--c-l16)}.finance-prepared-summary{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.finance-prepared-summary span{background:var(--c-f27);border-radius:999px;padding:6px 9px;font-size:.78rem;color:var(--c-t41)}.recovery-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.recovery-actions button:disabled{opacity:.48;cursor:not-allowed}.recovery-actions button:focus-visible{outline:2px solid currentColor;outline-offset:2px}@media(max-width:720px){.recovery-actions{display:grid;grid-template-columns:1fr}.recovery-actions button{width:100%}.finance-prepared-summary{display:grid;grid-template-columns:1fr}} /* F12 Real-Use UI/Edit Delta V0.1 */ .f12-workspace[hidden]{display:none}.f12-hero p{color:var(--muted);margin:.45rem 0 0}.f12-layout{display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.45fr);gap:18px}.f12-list-panel{align-self:start;position:sticky;top:58px}.f12-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:var(--c-f23);border-radius:13px;margin-bottom:12px}.f12-tab{border:0;background:transparent;border-radius:10px;padding:9px 10px;color:var(--c-t29);font-weight:750;cursor:pointer;min-width:0;overflow-wrap:anywhere}.f12-tab.active{background:var(--c-f55);color:var(--c-t30);box-shadow:0 3px 10px rgba(25,55,62,.08)}.f12-record-list{display:grid;gap:9px}.f12-record-card{border:1px solid var(--c-l09);background:var(--c-f29);border-radius:15px;padding:12px;cursor:pointer;text-align:left;width:100%;color:inherit;overflow-wrap:anywhere}.f12-record-card:hover,.f12-record-card.active{border-color:var(--c-l10);background:var(--c-f30)}.f12-record-card strong,.f12-record-card span,.f12-record-card small{display:block}.f12-record-card span{color:var(--c-t27);font-size:12px;margin-top:4px}.f12-record-card small{color:var(--c-t42);font-size:10px;margin-top:6px;line-height:1.4}.f12-empty-state{padding:16px;border:1px dashed var(--c-l04);border-radius:14px;color:var(--c-t40);display:grid;gap:5px}.f12-empty-state strong{color:var(--c-t07)}.f12-detail{display:grid;gap:14px}.f12-detail dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.f12-detail dl>div{border:1px solid var(--c-l06);border-radius:13px;padding:11px 12px;background:var(--c-f29);min-width:0}.f12-detail dt{font-size:10px;text-transform:uppercase;letter-spacing:.065em;color:var(--c-t21);font-weight:800}.f12-detail dd{margin:5px 0 0;font-weight:700;overflow-wrap:anywhere}.f12-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--c-t02);font-size:11px}.f12-meta span{background:var(--c-f27);border-radius:999px;padding:6px 9px}.f12-detail-panel .dialog-note{margin-top:8px}#f12EditDialog #f12AssetFields,#f12EditDialog #f12PropertyFields{display:grid;gap:12px}#f12EditDialog [hidden]{display:none!important}#f12FormMessage{background:var(--c-f34);border-color:var(--c-l15);color:var(--c-t43)} @media(max-width:1050px){.f12-layout{grid-template-columns:1fr}.f12-list-panel{position:static}} @media(max-width:720px){.sidebar{height:78px;overflow:hidden}.nav-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(76px,1fr);grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:3px}.nav-item,.nav-item.active{scroll-snap-align:start;min-width:76px;font-size:9px;line-height:1.1}.f12-layout{gap:12px}.f12-detail dl{grid-template-columns:1fr}.f12-tabs{grid-template-columns:1fr 1fr}.f12-hero .panel-head{align-items:stretch}.f12-hero .primary-button{width:100%}} @media(max-width:430px){.f12-tabs{grid-template-columns:1fr}.f12-record-card{padding:11px}.f12-detail-panel .panel-head{display:grid;grid-template-columns:1fr}.f12-detail-panel .panel-head button{width:100%}} /* PO Real-Use Recovery / Surface Separation V0.1 */ .surface[hidden]{display:none!important}.topbar-actions,.panel-actions,.recovery-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.subtle-status{font-size:12px;color:var(--c-t29)}.subtle-status.allow{color:var(--c-t18)}.subtle-status.deny{color:var(--c-t19)}.test-only-button{font-size:12px;color:var(--c-t29)}.diagnostics-panel{margin:18px 0;border:1px dashed var(--c-l17);border-radius:18px;background:rgba(245,249,248,.92);overflow:hidden}.diagnostics-panel>summary{cursor:pointer;padding:14px 17px;display:flex;gap:10px;align-items:baseline;font-weight:800;color:var(--c-t44)}.diagnostics-panel>summary small{font-weight:500;color:var(--c-t06)}.diagnostics-grid{padding:0 14px 14px}.diagnostics-grid .panel{box-shadow:none}.security-user-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.security-user-card{border:1px solid var(--c-l09);background:var(--c-f24);border-radius:16px;padding:15px}.security-user-card strong,.security-user-card span{display:block}.security-user-card strong{margin-bottom:7px}.security-user-card span{font-size:13px;color:var(--c-t45);line-height:1.45}.calendar-list{display:grid;gap:10px}.calendar-item{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--c-l09);border-radius:15px;padding:14px;background:var(--c-f29)}.calendar-item strong,.calendar-item span{display:block}.calendar-item div>span{font-size:12px;color:var(--c-t14);margin-top:4px}.children-quick-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0}.planning-shortcut,.planning-create-option{border:1px solid var(--c-l18);background:var(--c-f35);border-radius:16px;padding:15px;text-align:left;color:var(--c-t15);cursor:pointer}.planning-shortcut:hover,.planning-create-option:hover{border-color:var(--c-l19);background:var(--c-f36)}.planning-shortcut strong,.planning-shortcut span{display:block}.planning-shortcut span{font-size:12px;color:var(--c-t46);margin-top:5px;line-height:1.4}.children-resume{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--c-l20);background:var(--c-f36);border-radius:17px;padding:14px 16px;margin:0 0 15px}.children-resume span,.children-resume strong,.children-resume small{display:block}.children-resume span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-t47);font-weight:800}.children-resume strong{margin-top:4px}.children-resume small{color:var(--c-t14);margin-top:3px}.create-group{display:grid;gap:9px}.planning-create-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.planning-create-option{text-align:center;font-weight:800}.advanced-test-options{border-top:1px solid var(--c-l06);padding-top:10px;color:var(--c-t24)}.advanced-test-options summary{cursor:pointer;font-size:12px;font-weight:700}.user-note{border-color:rgba(159,222,208,.25)} @media(min-width:1500px){.main-content{max-width:1760px;padding-left:38px;padding-right:38px}.content-grid{grid-template-columns:minmax(0,1.65fr) minmax(330px,.65fr)}.children-layout,.f12-layout{grid-template-columns:minmax(360px,.72fr) minmax(0,1.7fr)}.children-quick-start{grid-template-columns:repeat(3,minmax(260px,1fr))}.security-user-grid{grid-template-columns:repeat(3,1fr)}} html[data-display-scale="COMPACT"] .main-content{padding-top:16px}html[data-display-scale="COMPACT"] .panel{padding:15px;margin-bottom:12px}html[data-display-scale="COMPACT"] .context-panel{padding:16px 18px;margin-bottom:12px}html[data-display-scale="COMPACT"] .metric-grid{gap:8px;margin-bottom:12px}html[data-display-scale="COMPACT"] .metric{padding:11px 13px}html[data-display-scale="COMPACT"] .work-list,html[data-display-scale="COMPACT"] .role-list,html[data-display-scale="COMPACT"] .action-card-list{gap:6px}html[data-display-scale="COMPACT"] .work-item{padding:8px 10px}html[data-display-scale="STANDARD"] .panel{padding:21px}html[data-display-scale="LARGE"]{font-size:17px}html[data-display-scale="VERY_LARGE"]{font-size:19px} @media(max-width:900px){.security-user-grid{grid-template-columns:1fr}.children-quick-start{grid-template-columns:1fr}.planning-create-grid{grid-template-columns:1fr}.topbar-actions{justify-content:flex-end}} @media(max-width:720px){.topbar-actions{gap:6px}.topbar-actions .ghost-button{padding:8px 9px}.children-resume{align-items:stretch;flex-direction:column}.children-resume button{width:100%}.calendar-item{align-items:flex-start;flex-direction:column}.diagnostics-panel{margin-bottom:90px}} .runtime-version{font-variant-numeric:tabular-nums;font-weight:850;letter-spacing:.03em;color:var(--c-f55)}.runtime-identity{position:relative}.runtime-identity summary{cursor:pointer;font-size:10px;font-weight:800;text-decoration:underline;text-underline-offset:2px}.runtime-identity[open]{z-index:60}.runtime-identity[open]::before{content:"";position:absolute;inset:18px auto auto -12px;width:380px;max-width:80vw;height:128px;background:var(--c-f37);border:1px solid rgba(255,255,255,.18);border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.25)}.runtime-identity>div{display:none}.runtime-identity[open]>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;position:relative;top:15px;left:0;width:350px;max-width:76vw;padding:3px 8px;font-size:10px;line-height:1.35}.runtime-identity code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-t26)}.runtime-identity span{color:var(--c-t48)}@media(max-width:720px){.test-banner{flex-wrap:wrap}.runtime-identity[open]::before{left:auto;right:-8px;width:min(360px,86vw)}.runtime-identity[open]>div{left:auto;right:0;width:min(330px,82vw)}} /* Schreibwerkstatt / isolated React editor island */ .writing-workspace{display:block}.writing-panel{min-height:620px}.schreibwerkstatt-shell{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:18px}.schreibwerkstatt-documents,.schreibwerkstatt-editor{min-width:0}.editor-pane-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.editor-document-list{display:grid;gap:8px;max-height:610px;overflow:auto;padding-right:4px}.editor-document-card{display:grid;gap:4px;text-align:left;border:1px solid var(--border,var(--c-l21));background:var(--c-f55);border-radius:12px;padding:12px;cursor:pointer}.editor-document-card.active{outline:2px solid var(--c-l22);border-color:transparent}.editor-document-card span,.editor-document-card small{color:var(--c-t49);font-size:.82rem}.gfi-editor-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;border:1px solid var(--c-l23);border-bottom:0;border-radius:14px 14px 0 0;padding:9px;background:var(--c-f38)}.editor-toolbar-spacer{flex:1}.editor-tool{border:1px solid var(--c-l24);background:var(--c-f55);border-radius:8px;padding:7px 10px;cursor:pointer}.editor-tool.active{background:var(--c-f39);border-color:var(--c-l22)}.gfi-editor-frame{border:1px solid var(--c-l23);border-radius:0 0 14px 14px;background:var(--c-f55);min-height:390px}.gfi-tiptap-prosemirror{min-height:390px;padding:22px;outline:none;line-height:1.6}.gfi-tiptap-prosemirror h1,.gfi-tiptap-prosemirror h2,.gfi-tiptap-prosemirror h3{font-family:Georgia,serif}.gfi-tiptap-prosemirror blockquote{border-left:3px solid var(--c-l25);margin-left:0;padding-left:14px;color:var(--c-t50)}.gfi-reference-node{display:block;border:1px solid var(--c-l26);background:var(--c-f40);border-radius:9px;padding:8px 10px;margin:8px 0;color:var(--c-t51);font-size:.9rem}.editor-boundary-note,.editor-empty-state{margin-top:12px;padding:12px;border-radius:10px;background:var(--c-f41);color:var(--c-t52);font-size:.9rem}.editor-empty-state{display:grid;gap:5px;min-height:180px;place-content:center;text-align:center}.status-chip.success{background:var(--c-f42);color:var(--c-t53)}.status-chip.danger{background:var(--c-f43);color:var(--c-t54)}@media(max-width:900px){.schreibwerkstatt-shell{grid-template-columns:1fr}.editor-document-list{max-height:230px}.gfi-tiptap-prosemirror{min-height:330px;padding:16px}} /* 0.9.0 Visible Dashboard & PO Real-Use Slice */ .visible-dashboard{display:grid;gap:16px}.visible-dashboard .panel-head{align-items:flex-start}.dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.dashboard-card{border:1px solid var(--c-l27);border-radius:18px;background:var(--c-f55);padding:17px;min-width:0}.dashboard-card>span,.dashboard-card>strong{display:block}.dashboard-card>span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--c-t55);font-weight:800;margin-bottom:8px}.dashboard-work{display:grid;gap:7px}.dashboard-work span{font-size:12px;color:var(--c-t56);line-height:1.4}.dashboard-work button{justify-self:start;margin-top:5px}.dashboard-quick-actions,.context-create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dashboard-action{border:1px solid var(--c-l28);border-radius:14px;background:var(--c-f35);color:var(--c-t15);padding:13px;text-align:left;cursor:pointer;min-width:0}.dashboard-action:hover{border-color:var(--c-l19);background:var(--c-f40)}.dashboard-action strong,.dashboard-action span{display:block}.dashboard-action span{font-size:11px;color:var(--c-t57);margin-top:5px;line-height:1.35}.capability-note{display:grid;gap:4px;border:1px solid var(--c-l29);background:var(--c-f44);border-radius:14px;padding:12px;margin-top:14px}.capability-note span{font-size:12px;color:var(--c-t58)}.create-context-summary{display:grid;gap:4px;padding:11px 13px;border-radius:13px;background:var(--c-f45)}.create-context-summary span{font-size:12px;color:var(--c-t59)}.context-create-grid.secondary{grid-template-columns:repeat(3,minmax(0,1fr))}.create-primitive-form{display:grid;gap:12px;border-top:1px solid var(--c-l06);padding-top:13px}.work-object-shell{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border:1px solid var(--c-l30);background:var(--c-f46);border-radius:18px;padding:15px 17px;margin-bottom:12px}.work-object-identity,.work-object-meta{display:grid;gap:4px;min-width:0}.work-object-identity>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-t60);font-weight:850}.work-object-identity strong{font-size:1.15rem;overflow-wrap:anywhere}.work-object-identity small,.work-object-meta span{color:var(--c-t61);font-size:11px;line-height:1.4}.work-object-meta{text-align:right}.work-object-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin}.work-object-tab{border:1px solid var(--c-l31);background:var(--c-f55);border-radius:999px;padding:8px 13px;white-space:nowrap;cursor:pointer;color:var(--c-t62);font-weight:750}.work-object-tab.active{background:var(--c-f47);color:var(--c-f55);border-color:var(--c-f47)}.work-section{display:none}.work-section.active{display:block}.children-composition{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.composition-card{display:grid;gap:7px;border:1px solid var(--c-l32);border-radius:15px;background:var(--c-f29);padding:13px;min-width:0}.composition-card span{font-size:11px;color:var(--c-t63);line-height:1.4}.composition-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}.file-upload-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.file-upload-button input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}.surface[data-surfaces="overview"]{scroll-margin-top:12px} @media(max-width:1050px){.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.children-composition{grid-template-columns:1fr 1fr}} @media(max-width:900px){.dashboard-grid{grid-template-columns:1fr 1fr}.work-object-shell{display:grid}.work-object-meta{text-align:left}.children-composition{grid-template-columns:1fr}.context-create-grid,.context-create-grid.secondary{grid-template-columns:1fr 1fr}} @media(max-width:720px){.visible-dashboard{gap:12px}.dashboard-grid{grid-template-columns:1fr}.dashboard-card{padding:14px}.dashboard-quick-actions,.context-create-grid,.context-create-grid.secondary{grid-template-columns:1fr}.work-object-shell{padding:13px}.work-object-tabs{margin-inline:-4px;padding-inline:4px}.work-object-tab{padding:8px 11px}.children-composition{grid-template-columns:1fr}.composition-actions>*{flex:1 1 100%}.main-content[data-mobile-priority="today"] .dashboard-card{padding:13px}} @media(max-width:430px){.dashboard-card{border-radius:14px}.work-object-identity strong{font-size:1rem}.work-object-meta span{font-size:10px}.work-object-tab{font-size:12px}.visible-dashboard .panel-head{display:grid;grid-template-columns:1fr}.visible-dashboard .panel-head .primary-button{width:100%}} /* ===== Visible Product Real-Use Slice A V0.1 ===== */ /* Meine Arbeit – eigenständige Surface */ .my-work-resume{margin-bottom:16px} .my-work-groups{display:grid;gap:18px} .my-work-group h3{margin:0 0 9px;font-family:Georgia,serif;font-size:16px;color:var(--c-t64)} .my-work-group .dialog-note{margin:0} .work-item.overdue{border-color:var(--c-l15);background:var(--c-f48)} .work-item.overdue .work-type{background:var(--c-f49);color:var(--c-t65)} .work-item .secondary-button{white-space:nowrap} /* Kinderstunde – fachlicher Ablauf */ .lesson-flow{border:1px solid var(--c-l11);border-radius:15px;padding:13px;margin-bottom:13px;background:var(--c-f29)} .lesson-flow[hidden]{display:none} .flow-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px} .flow-head strong{font-family:Georgia,serif;font-size:16px;color:var(--c-t64)} .flow-head span{font-size:12px;color:var(--c-t34)} .flow-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .flow-step{border:1px dashed var(--c-l04);border-radius:12px;padding:10px;background:var(--c-f55);min-width:0} .flow-step.filled{border-style:solid;border-color:var(--c-l10);background:var(--c-f30)} .flow-step strong{display:block;font-size:12px;color:var(--c-t64);overflow-wrap:anywhere} .flow-step span{display:block;font-size:11px;color:var(--c-t66);margin-top:4px} /* F-06 Referenzstatus */ .ref-status{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--c-t34)} .ref-status[data-state="OK"]{color:var(--c-t67)} .ref-status[data-state="HINT"]{color:var(--c-t68)} /* Tablet: Ablauf zweizeilig, Gruppen weiterhin voll arbeitsfähig */ @media(max-width:1050px){ .flow-steps{grid-template-columns:repeat(3,minmax(0,1fr))} .my-work-groups{gap:16px} } /* Smartphone: Priorität = Was ist offen / Weiterarbeiten. Karten statt Raster. */ @media(max-width:720px){ .flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .my-work-group h3{font-size:15px} .work-item{grid-template-columns:auto minmax(0,1fr)} .work-item .secondary-button{grid-column:1/-1;width:100%;margin-top:8px} .my-work-resume .dashboard-work{width:100%} } @media(max-width:430px){ .flow-steps{grid-template-columns:1fr} .lesson-flow{padding:11px} } /* Accessibility: sichtbarer Fokus für neu ergänzte interaktive Elemente */ .work-item .secondary-button:focus-visible, .my-work-resume button:focus-visible{outline:3px solid var(--c-a01);outline-offset:2px} /* Gruppenarbeit (PO-Auftrag 15.08.2026): Arbeitsbereiche benennen und ihre Fachaufgaben auswaehlen. Der Zustand steht in Farbe UND Form UND Wort — ein Haken allein reicht nicht (LotseDesign). Beruehrflaechen 44px. */ .bereichswahl-knopf{margin-top:8px;width:100%;font-size:12px;padding:9px 10px;min-height:44px;color:var(--c-t69);border-color:rgba(255,255,255,.3)} .bereichswahl-knopf:hover{background:rgba(255,255,255,.12);color:var(--c-f55)} .bereichswahl-knopf[hidden]{display:none!important} .gruppe-neu{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end} .gruppe-neu .primary-button{min-height:44px;white-space:nowrap} .gruppen-liste{display:grid;gap:12px;max-height:52vh;overflow:auto} .gruppe-karte{border:1px solid var(--c-l09);border-radius:17px;padding:14px;background:var(--c-f29);display:grid;gap:11px} .gruppe-karte.stamm{background:var(--c-f50);border-style:dashed} /* Archiviert heisst „wird nicht mehr angeboten", nicht „geloescht". Die Karte tritt deshalb zurueck, verschwindet aber nicht und bleibt voll bedienbar — sonst waere das Wiederinbetriebnehmen nicht erreichbar. */ .gruppe-karte.archiviert{border-style:dashed;opacity:.72} .gruppe-karte.archiviert .gruppe-rolle{font-style:italic} /* ── Die Kennzeichnung der archivierten Flaeche (PO-Entscheidung Z-1) ────── * * Wortlaut aus der Entscheidung: „Archivierter Arbeitsbereich – nur lesen". * Der Streifen steht ueber allen Ansichten, nicht in einer einzelnen, und er * ist keine Meldung, die man wegklickt: er beschreibt einen Zustand, der * bleibt, solange man in dieser Flaeche steht. */ .bereich-archiv{margin:0;padding:9px 16px;background:var(--c-f50,#f5f2ea); border-bottom:1px solid var(--c-l09,#d9d3c6);font-size:14px;font-weight:600;letter-spacing:.01em} .bereich-archiv::before{content:'';display:inline-block;width:9px;height:9px;margin-right:9px; border:2px dashed currentColor;border-radius:50%;vertical-align:middle;opacity:.8} /* Der zweite Satz (PO-Entscheidung 2 vom 20.08.2026) steht kleiner daneben — die Kennzeichnung bleibt der Hauptsatz, die Auskunft ist der Zusatz. */ .bereich-archiv small{font-weight:400;opacity:.8;margin-left:10px} @media (max-width:640px){.bereich-archiv small{display:block;margin:3px 0 0 18px}} /* Die Flaeche selbst tritt zurueck — erkennbar, aber nicht unlesbar. Es ist ausdruecklich KEINE Zutrittssperre: das Lesen bleibt der Zweck. */ body[data-bereich-archiviert="1"] .context-panel{opacity:.92} @media (max-width:640px){.bereich-archiv{padding:8px 12px;font-size:13px}} /* Das Team des Bereichs (PO-Addendum 20.08.2026 A). */ .gruppe-team{margin:0;display:grid;gap:6px;font-size:13px} .gruppe-team-knopf{justify-self:start;min-height:36px;padding:0 10px;border-radius:var(--r1,10px); border:1px dashed var(--c-l09);background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600} .gruppe-team-knopf:hover{border-style:solid} .gruppe-team-liste{display:grid;gap:3px} .gruppe-team-namen{font-weight:600} .gruppe-team-liste small{color:var(--c-t02,#555);font-size:12px;line-height:1.4} .gruppe-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end} .gruppe-kopf label{gap:5px} .gruppe-kopf input{min-height:44px} .gruppe-kopf .secondary-button{min-height:44px;white-space:nowrap} .gruppe-rolle{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--c-t06)} .bausteine-gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .baustein-wahl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--c-l09);border-radius:13px;padding:10px 11px;background:var(--c-f55);cursor:pointer;min-height:44px;font-weight:600;color:var(--c-t07)} .baustein-wahl:hover{border-color:var(--c-l10)} .baustein-wahl input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--c-a01)} .baustein-wahl strong{display:block;font-size:13px;color:var(--c-t15)} .baustein-wahl small{display:block;font-size:11px;color:var(--c-t14);margin-top:3px;line-height:1.45;font-weight:500} /* Gewaehlt: Farbe (gruen), Form (linker Balken) und Wort ("gewaehlt") — drei Traeger, damit der Zustand auch ohne Farbsehen erkennbar bleibt. */ .baustein-wahl.gewaehlt{border-color:var(--c-l19);background:var(--c-f30);border-left:4px solid var(--c-a01)} .baustein-wahl .zustandswort{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--c-t06);margin-top:5px} .baustein-wahl.gewaehlt .zustandswort{color:var(--c-t08)} .gruppe-status{font-size:12px;color:var(--c-t29);min-height:18px} .gruppe-status.allow{color:var(--c-t18)} .gruppe-status.deny{color:var(--c-t19)} .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} @media(max-width:720px){.bausteine-gitter{grid-template-columns:1fr}.gruppe-kopf,.gruppe-neu{grid-template-columns:1fr}.gruppen-liste{max-height:none}} @media(prefers-reduced-motion:reduce){.baustein-wahl{transition:none}} /* ═══════════════════════════════════════════════════════════════════════════ * E-4 · Was ein Daumen trifft * ═══════════════════════════════════════════════════════════════════════════ * * Gemessen am 17.08.2026 mit einem echten Browser in drei Geräteklassen: * die Navigationsknöpfe waren in Ordnung (44 px), fast alles andere nicht. * Eingabefelder 36 px, Knöpfe 38 px, Filterauswahl 34 px, die Dateiauswahl * 22 px. Nichts davon ist kaputt — es fühlt sich fummelig an, und wer im * Gruppenraum mit einer Hand das Tablet hält, trifft daneben. * * 44 x 44 Punkte ist Apples eigener Mindestwert und der Grund, warum eine * Anwendung sich auf dem Telefon richtig oder falsch anfühlt. * * PO-ENTSCHEIDUNG 17.08.2026 (E-4): NUR auf Zeigegeräten, die grob sind — * also Finger, nicht Maus. `pointer: coarse` fragt genau das ab. Der Desktop * bleibt dadurch Zeichen für Zeichen so, wie er heute ist; das war die * Bedingung der Entscheidung. * * Warum `min-height` und nicht `height`: was schon hoch genug ist, soll nicht * schrumpfen. Und warum zusätzlich Innenabstand: ein Knopf, der nur durch eine * Mindesthöhe auf 44 px kommt, hat seine Beschriftung oben kleben. */ @media (pointer: coarse) { button, [role="button"], .primary-button, .secondary-button, .ghost-button, .danger-button, input, select, textarea { min-height: 44px; } /* Ein mehrzeiliges Feld braucht Platz zum Schreiben, keine Mindesthöhe eines Knopfes. */ textarea { min-height: 88px; } button, [role="button"], .primary-button, .secondary-button, .ghost-button, .danger-button { padding-top: 11px; padding-bottom: 11px; } select, input { padding-top: 11px; padding-bottom: 11px; } /* Die Dateiauswahl des Browsers lässt sich nicht umbenennen und ist mit 22 px die flachste Stelle der ganzen Oberfläche. Sie hat bereits einen eigenen Knopf davor (A-40); das Feld selbst bleibt für Tastatur und Vorlesehilfen erreichbar und bekommt hier dieselbe Höhe. */ input[type="file"] { min-height: 44px; padding-top: 11px; padding-bottom: 11px; } /* Die Zählmarken im Menü sind keine eigenen Ziele — der Knopf um sie herum ist es. Ohne diese Zeile würden sie den Knopf unnötig aufblähen. */ .nav-glyph { min-height: 0; } } /* Diese Regeln stehen bewusst in styles.css und nicht in lotse.css: die Anmeldeseite lädt nur diese Datei. Sie ist der erste Bildschirm, den jemand auf dem Telefon sieht — dort waren Anmeldename, Passwort und „Weiter" mit 36 bis 40 px die flachsten Stellen des ganzen Weges hinein. */ /* ── Aus dem