/* ============================================================================= DIALOG — Schranke, Ansprache, Akte. DREI GESTALTUNGSENTSCHEIDUNGEN, die keine Geschmacksfragen sind: 1 JA UND NEIN SIND GLEICH. Gleiche Groesse, gleiche Betonung, gleiche Reihenfolge im Fokusweg. Kein Farbtrick, kein Schatten, kein "empfohlen". Ein Nein, das schwerer zu treffen ist als das Ja, ist kein Nein. 2 DIE ANSPRACHE STEHT UNTEN, NICHT IN DER MITTE. Sie unterbricht das Lesen nicht und verdeckt keinen Inhalt. Was mitten ins Bild springt, wird weggeklickt, bevor es gelesen wurde — der Ueberfall kostet die Antwort. 3 DER SCHALTER TRAEGT SEINEN ZUSTAND ALS FORM. Gefuellt heisst an, leer heisst aus, und aria-checked sagt dasselbe noch einmal fuer die Sprachausgabe. In Graustufen bleibt beides erkennbar (R28d). Bewegung nur, wenn der Nutzer sie zulaesst (R28c) — eine Einblendung, die jemandem Uebelkeit macht, ist keine Ansprache, sondern ein Uebergriff. ============================================================================= */ :root{ --d-breit:34rem; --d-rand:var(--zz-s-5); } /* ------------------------------------------------------------- Schranke --- */ .dschranke{ position:fixed; inset:0; z-index:100; display:grid; place-items:end center; padding:var(--zz-s-4); background:rgba(0,0,0,.6); overflow-y:auto; } .dschranke-in{ inline-size:min(100%,var(--d-breit)); max-block-size:90svh; overflow-y:auto; background:var(--f-grund); color:var(--zz-ink); border:1.5px solid var(--f-linie-stark); padding:var(--d-rand); } .dh{ font-family:var(--zz-display); font-weight:400; letter-spacing:-.02em; font-size:clamp(1.4rem,4vw,1.9rem); line-height:1.1; margin:0; color:var(--zz-ink); text-wrap:balance; } .dp{ margin:var(--zz-s-3) 0 0; color:var(--zz-ink-dim); font-size:var(--f-klein); line-height:1.6; text-wrap:pretty; } .dfein{ margin:var(--zz-s-4) 0 0; color:var(--zz-ink-dim); font-size:var(--f-klein); text-wrap:pretty; } .dgruppen{ display:grid; gap:var(--zz-s-4); margin:var(--zz-s-5) 0 0; padding-block:var(--zz-s-4); border-block:1px solid var(--f-linie); } .dgruppe{ display:grid; gap:var(--zz-s-2); } .dgw,.dgb{ font-size:var(--f-klein); color:var(--zz-ink-dim); text-wrap:pretty; } .dgb{ padding-inline-start:var(--zz-s-3); border-inline-start:2px solid var(--f-linie); } /* Schalter: Zustand als FORM, nicht als Farbe. */ .dschalter{ display:flex; align-items:center; gap:var(--zz-s-3); min-block-size:44px; inline-size:100%; padding:0; text-align:start; background:none; border:0; color:var(--zz-ink); cursor:pointer; font:inherit; font-size:1rem; } .dschalter[disabled]{ cursor:default; color:var(--zz-ink-dim); } .dschalter-form{ inline-size:2.75rem; block-size:1.5rem; flex:0 0 auto; border:1.5px solid currentColor; border-radius:var(--zz-r-pill); position:relative; } .dschalter-form::after{ content:""; position:absolute; inset-block:2px; inset-inline-start:2px; inline-size:1.1rem; border-radius:50%; border:1.5px solid currentColor; transition:inset-inline-start var(--zz-t-fast) var(--zz-ease); } .dschalter[aria-checked="true"] .dschalter-form::after{ inset-inline-start:calc(100% - 1.35rem); background:currentColor; } .dgt{ font-size:1rem; } /* Knoepfe: alle gleich. Das ist die Regel, nicht der Stil. */ .dknoepfe{ display:flex; flex-wrap:wrap; gap:var(--zz-s-3); margin:var(--zz-s-5) 0 0; } .dknopf{ flex:1 1 9rem; min-block-size:44px; padding:var(--zz-s-3) var(--zz-s-4); background:none; color:var(--zz-ink); border:1.5px solid var(--zz-ink); border-radius:var(--zz-r-pill); font:inherit; font-size:var(--f-klein); white-space:nowrap; cursor:pointer; } .dknopf.dklein{ flex:0 0 auto; } /* ------------------------------------------------------------ Ansprache --- Unten, ueber die volle Breite auf dem Telefon, als Karte am Rand ab 720 px. Nie in der Mitte: was den Inhalt verdeckt, wird weggeklickt statt gelesen. */ .dansprache{ position:fixed; inset-block-end:0; inset-inline:0; z-index:90; padding:var(--zz-s-3); } .dansprache-in{ position:relative; inline-size:min(100%,var(--d-breit)); margin-inline:auto; background:var(--f-grund); color:var(--zz-ink); border:1.5px solid var(--f-linie-stark); padding:var(--d-rand); } .dgabe{ margin:0; font-family:var(--zz-display); font-weight:400; font-size:clamp(1.05rem,2.4vw,1.3rem); line-height:1.3; color:var(--zz-ink); text-wrap:pretty; } .dfrage{ margin:var(--zz-s-4) 0 0; font-size:1rem; color:var(--zz-ink); text-wrap:pretty; } .dantworten{ display:flex; flex-wrap:wrap; gap:var(--zz-s-3); margin:var(--zz-s-4) 0 0; } .dantworten .dknopf{ flex:0 1 auto; } .ddank{ margin:0; font-size:var(--f-klein); color:var(--zz-ink-dim); text-wrap:pretty; } .dzu{ position:absolute; inset-block-start:var(--zz-s-2); inset-inline-end:var(--zz-s-2); min-block-size:44px; min-inline-size:44px; padding:var(--zz-s-2) var(--zz-s-3); background:none; border:0; color:var(--zz-ink-dim); font:inherit; font-size:var(--f-klein); cursor:pointer; } @media (min-width:720px){ .dansprache{ inset-inline-start:auto; inline-size:min(100%,calc(var(--d-breit) + 2rem)); padding:var(--zz-s-5); } } /* ----------------------------------------------------------------- Akte --- */ .dakte{ margin:var(--zz-s-5) 0 0; padding:0; list-style:none; display:grid; gap:var(--zz-s-4); } .dakte li{ display:grid; gap:var(--zz-s-2); padding-block-start:var(--zz-s-4); border-block-start:1px solid var(--f-linie); } .dakte li:first-child{ border-block-start:0; padding-block-start:0; } .dakte b{ font-weight:400; font-size:var(--f-klein); color:var(--zz-ink-dim); } .dwert{ font-family:var(--zz-display); font-size:1.25rem; color:var(--zz-ink); } .dherk{ font-size:var(--f-klein); color:var(--zz-ink-dim); text-wrap:pretty; } /* Der Knopf zur Akte steht auf jeder Seite an derselben Stelle (R70). */ .dakteknopf{ background:none; border:0; padding:var(--zz-s-2) 0; min-block-size:24px; color:var(--zz-ink-dim); font:inherit; font-size:var(--f-klein); text-decoration:underline; cursor:pointer; } @media (prefers-reduced-motion:reduce){ .dschalter-form::after{ transition-duration:.01ms; } }