/* loeschen.css — v0.6.84 (Cole) * * Die einheitliche Loesch-Rueckfrage. Eigene Datei, weil css/styles.css und * css/uebungen.css gerade gesperrt sind (Typografie-Arbeit laeuft dort). * * !! MUSS IN index.html EINGEBUNDEN WERDEN !! — eine Zeile im , neben den * bestehenden Stylesheets: * * Solange sie fehlt, ist das Fenster BEDIENBAR (die tragenden Masse setzt js/app.js * zusaetzlich inline: min-height/min-width = var(--tippflaeche, 48px) an beiden Knoepfen), * aber es sieht nackt aus. Bedienbar-ohne-Stylesheet war Absicht: ein Rueckfrage-Fenster, * das ohne CSS unbrauchbar waere, waere keine Absicherung, sondern eine neue Falle. * * DIE DREI DINGE, DIE HIER NICHT GESCHMACK SIND: * 1. Beide Knoepfe halten --tippflaeche (48 px, der Haus-Grundsatz). Finger, iPad. * 2. „Abbrechen" steht ZUERST und ist ruhig; „Loeschen" steht rechts und ist rot. * Vorgewaehlt wird der SICHERE (den Fokus setzt js/app.js) — die Eingabetaste * darf nie loeschen. * 3. Die Frage ist gross und traegt den TITEL des Gegenstands. Sie ist der Grund, * warum es dieses Fenster gibt: Beat soll SEHEN, ob er richtig gegriffen hat. * * Die Farben kommen aus den Haus-Variablen, wo es sie gibt; die Rueckfallwerte danach * halten die Datei fuer sich allein lauffaehig. */ .loeschfrage-dialog { border: none; border-radius: 14px; padding: 1.25rem 1.25rem 1rem; max-width: min(34rem, 92vw); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32); background: var(--flaeche, #fff); color: var(--text, #1c2733); } .loeschfrage-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } /* Die Frage. Gross genug, um sie im Vorbeigehen zu lesen — sie enthaelt den Titel. */ .loeschfrage__frage { margin: 0 0 0.6rem; font-size: 1.15rem; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; /* lange Dateinamen brechen, statt das Fenster zu sprengen */ } .loeschfrage__satz { margin: 0 0 0.5rem; font-size: 0.95rem; line-height: 1.45; color: var(--text-leise, #495a6b); } .loeschfrage__knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .loeschfrage__btn { min-height: var(--tippflaeche, 48px); min-width: var(--tippflaeche, 48px); padding: 0 1.1rem; font-size: 1rem; border-radius: 10px; cursor: pointer; } /* Der sichere Weg steht zuerst und bekommt den Platz — er ist der, den Beat in neun von * zehn Faellen will, wenn er ueberhaupt gefragt wird. */ .loeschfrage__abbrechen { flex: 1 1 12rem; background: var(--flaeche-2, #eef2f6); color: var(--text, #1c2733); border: 1px solid var(--rand, #c7d2dd); font-weight: 600; } .loeschfrage__abbrechen:focus-visible { outline: 3px solid var(--fokus, #2f6fd0); outline-offset: 2px; } /* Der gefaehrliche steht rechts, ist rot und ist NICHT vorgewaehlt. */ .loeschfrage__ja { flex: 0 1 10rem; background: var(--gefahr, #b3261e); color: #fff; border: 1px solid var(--gefahr, #b3261e); font-weight: 700; } .loeschfrage__ja:focus-visible { outline: 3px solid var(--fokus, #2f6fd0); outline-offset: 2px; } /* Schmales Geraet (Hochkant-iPad, Telefon): die Knoepfe untereinander, der sichere oben. * So liegt der gefaehrliche nie da, wo der Daumen beim Zugreifen zuerst ankommt. */ @media (max-width: 26rem) { .loeschfrage__knoepfe { flex-direction: column; } .loeschfrage__abbrechen, .loeschfrage__ja { flex: 1 1 auto; width: 100%; } }