/*
  Datei: server/pb_public/gemeinsam.css
  Zweck: Ergaenzungen zu gestaltung.css fuer alle Seiten, die im Bau gefunden wurden und (noch) nicht im
         Vertrag V5 bzw. im Skizzen-Block stehen. Wird nach gestaltung.css und vor der Seiten-CSS geladen.
  Zielgeraet: alle Browser der Mindestgeraete (iOS 14, Chrome 85, E12; Nutzer 16.10.2026).
  Eingaben: Variablen aus gestaltung.css (V5).
  Herkunft: Befunde des frischen Pruefers zur Mitglieder-Seite (15.10.2026, Nutzer: alle einarbeiten);
            an K gemeldet, damit V5 und die Skizzen nachgezogen werden.
  Belege: V5 Abschnitt 6 ("Fokus 3 px"), WCAG 2.4.7 (Fokus sichtbar); :focus-visible erst ab Chrome 86 und
          Safari 15.4 (Pruefer-Befund, Quelle fuer R offen, UNBELEGT).
  Flex-gap: `gap` in Flex-Behaeltern kennt Safari erst ab iOS 14.5 (Q-304, Q-305); @supports (gap) erkennt das nicht
          (Q-306). Auf iOS 14.0 bis 14.4 fehlen daher nur Abstaende (Ableitung); hingenommen, kein Umbau (Nutzer 19.10.2026).
*/

/* 1. Fokusrahmen auch auf Chrome 85 und iOS 14.0 bis 15.3: dort kennt der Browser :focus-visible nicht und
      ignoriert die Regel aus gestaltung.css. Rueckfall auf :focus; wo :focus-visible bekannt ist, bleibt der
      Rahmen bei Mausklick aus (wie bisher). */
:focus { outline: 3px solid var(--fokus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* 2. In Behaeltern mit overflow:hidden (Mengenfeld, Vorlieben-Leiste, Ja/Nein, aufklappbare Bereiche) wuerde
      der Rahmen aussen abgeschnitten; dort liegt er innen. */
.menge :focus, .wahl :focus, .janein :focus, details.bereich > summary:focus { outline-offset: -3px; }
.menge :focus:not(:focus-visible), .wahl :focus:not(:focus-visible), .janein :focus:not(:focus-visible),
details.bereich > summary:focus:not(:focus-visible) { outline: none; }

/* 3. Nur fuer Bildschirmleser: Ansage, was gerade gespeichert wurde (eine feste Live-Region je Seite). */
.nur-leser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 4. Rueckfrage in der Zeile (V5 "Rueckfragen in der Zeile, keine Browser-Dialoge"), z. B. ungewoehnlich grosse Menge. */
.zeile-status[data-s="frage"] { color: var(--warnung); }
.zeile-status[data-s="frage"] .knopf { min-height: var(--groesse-tippflaeche); margin: var(--a4) var(--a8) 0 0; }

/* 5. Anmeldeformular (js/anmelden.js) auf Bestell- und Admin-Seite; gleiche Werte wie mitglieder.css (Skizze). */
.feld { display: block; margin: 0 0 var(--a16); }
.feld > span { display: block; font: var(--typo-text-betont); margin-bottom: var(--a4); }
.pw-zeile { display: flex; gap: var(--a8); }
.pw-zeile .eingabe { flex: 1; min-width: 0; }
.pw-zeile .knopf { flex: none; }
.zentriert { text-align: center; }
.anmelde-rahmen { max-width: 28rem; margin: var(--a32) auto; }

/* 6. Verweise (Links) in Akzentfarbe statt Browser-Blau: Kontrast hell 6,4:1, dunkel 8,5:1 wie V5 Abschnitt 4 (akzent auf flaeche) */
a { color: var(--akzent); }