/* ══ TASTATUR UND FOKUS ══════════════════════════════════════════════
   Aus dem Prototyp V3 übernommen (Abschnitt „TASTATUR UND FOKUS (AP 10)“,
   Zeilen 5541–5732). Wer mit der Tastatur geht, sieht an Knoepfen,
   Schiebern und Raedern EINEN ruhigen Rahmen der App: 2 Punkte, 3 Punkte
   Abstand, schwarz auf hellem Grund, weiss auf dunklem (die schwarzen
   Kreise) und auf Rot (Promptfeld, Rueckseiten) - die Farbe steht in
   --fokus, die Masse in --fokus-breite und --fokus-abstand. Zwei Punkte,
   nicht anderthalb: Chrome und Safari runden einen Rahmen von 1,5 Punkten
   auf einen ab, Firefox zeichnet ihn bei 150 % mit zwei Geraetepunkten.
   Den Ring des Browsers gibt es nirgends mehr: er sah in jedem Browser
   anders aus.
   Der Rahmen steht nur, solange mit Tab gegangen wird: `html.tastatur`
   setzt die Tab-Taste, jeder Zeigerdruck nimmt es wieder (ui/keyboard.js).
   Gefragt wird darum nach :focus unter html.tastatur, nicht nach
   :focus-visible: den Fokus setzt in den Raeumen der Helfer selbst, und
   Firefox hielt einen Fokus aus dem Skript nie fuer sichtbar.
   Eingabefelder bekommen keinen Rahmen: dort steht die Schreibmarke.
   Die Regeln fuer Teile, die erst spaeter kommen (Kontaktbogen als
   Flaeche, Editor, Druckfenster, Abotafel), kommen mit ihnen. */
:root {
  --fokus: var(--black);
  --fokus-breite: 2px;
  --fokus-abstand: 3px;
  --fokus-spalt: 2px;
}
#lg-wrap,
#zl-wrap,
#ab-tafel,
#chip-prompt,
.hist-back,
.mat-back,
.cv-back,
.cv-dl.hell,
.cv-marker.hell,
.cv-edit.hell {
  --fokus: var(--white);
}
:focus,
:focus-visible {
  outline: none;
}
html.tastatur :focus {
  outline: var(--fokus-breite) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
}
html.tastatur
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):focus,
html.tastatur textarea:focus,
html.tastatur .lg-f select:focus {
  outline: none;
}
/* Schieber: der Ring liegt am Griff, mit einem weissen Spalt davor, damit
   er sich von der schwarzen Bahn loest. Je Engine eine Regel - eine
   unbekannte Pseudoklasse in der Liste naehme sonst alle mit. */
html.tastatur input[type='range']:focus {
  outline: none;
}
html.tastatur #annot-brush-size:focus::-webkit-slider-thumb,
html.tastatur #dfenster .df-mass:focus::-webkit-slider-thumb {
  box-shadow:
    0 0 0 var(--fokus-spalt) var(--white),
    0 0 0 calc(var(--fokus-spalt) + var(--fokus-breite)) var(--fokus);
}
html.tastatur #annot-brush-size:focus::-moz-range-thumb,
html.tastatur #dfenster .df-mass:focus::-moz-range-thumb {
  box-shadow:
    0 0 0 var(--fokus-spalt) var(--white),
    0 0 0 calc(var(--fokus-spalt) + var(--fokus-breite)) var(--fokus);
}
/* Die Kopfleiste: Kreditzahl und Sprachkuerzel tragen ihren Abstand zum
   Nachbarn als Innenabstand (12 rechts bzw. 14 links) - ein Rahmen um
   den ganzen Knopf stuende schief neben der Schrift. Er liegt hier um die
   Schrift allein. */
#credit-display,
#lang-btn {
  position: relative;
}
html.tastatur #credit-display:focus,
html.tastatur #lang-btn:focus {
  outline: none;
}
html.tastatur #credit-display:focus::after,
html.tastatur #lang-btn:focus::after {
  content: '';
  position: absolute;
  pointer-events: none;
  outline: var(--fokus-breite) solid var(--fokus);
}
html.tastatur #credit-display:focus::after {
  top: calc(-1 * var(--fokus-abstand));
  bottom: calc(-1 * var(--fokus-abstand));
  left: calc(-1 * var(--fokus-abstand));
  right: calc(12px - var(--fokus-abstand));
}
html.tastatur #lang-btn:focus::after {
  top: calc(2px - var(--fokus-abstand));
  bottom: calc(2px - var(--fokus-abstand));
  left: calc(14px - var(--fokus-abstand));
  right: calc(-1 * var(--fokus-abstand));
}
/* Die Miniaturen: der Rahmen dicht am Bild, und das Bild steht voll wie
   unter dem Zeiger. Die Zahlenmatrix: dicht an der Ziffer. */
html.tastatur .hist-front:focus {
  outline-offset: 1px;
}
html.tastatur .hist-item:focus-within {
  opacity: 1;
}
/* Die Miniaturen stehen nicht auf einer Linie: jede ist um bis zu 3 Punkte
   gehoben oder gesenkt (history-strip.js renderHistory). Eine gehobene
   steht nur 1 Punkt unter der Kante, an der die Leiste abschneidet — ihr
   Rahmen verlor dort die obere Seite, und die erste Miniatur die linke.
   Solange Tab geht, reicht der Rollkasten darum um --hist-luft weiter
   hinauf und nach links; ein ebenso großer negativer bzw. kleinerer Rand
   hält ihn und die Bilder, wo sie waren — es bewegt sich nichts (V3). */
html.tastatur .hist-scroll {
  --hist-luft: 4px;
  padding-top: calc(var(--hist-polster) + var(--hist-luft));
  margin-top: calc(-1 * var(--hist-luft));
  padding-left: var(--hist-luft);
  margin-left: calc(var(--hist-einzug) - var(--hist-luft));
}
html.tastatur .batch-cell:focus {
  outline-offset: calc(1.5px - var(--fokus-breite));
}
/* Die Karten der Historie: die Flaeche ueber dem Bild ist der Knopf fuer
   das Vollbild; die Vorderseite schneidet alles ab, was ueber sie
   hinaussteht - der Rahmen liegt darum innen, doppelt (weiss, dann
   schwarz), damit er auf hellen wie dunklen Bildern steht. */
html.tastatur .cv-overlay:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 var(--fokus-breite) var(--white),
    inset 0 0 0 calc(2 * var(--fokus-breite)) var(--black);
}
/* Ebenso die leeren Materialplaetze - nur sie sind ein Tab-Ziel. Der
   Rahmen liegt innen, auf einer eigenen Schicht ueber der Karte. */
html.tastatur .mat-slot:not(.has-img):focus {
  outline: none;
}
html.tastatur .mat-slot:not(.has-img):focus::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 var(--fokus-breite) var(--white),
    inset 0 0 0 calc(2 * var(--fokus-breite)) var(--black);
}
/* Die Spalten der Tafel: der Rahmen innen, wie am Kopf. Ebenso der
   Rollkasten einer Inhaltsseite - ausserhalb schnitte ihn das Bildfeld ab. */
html.tastatur #ab-tafel .ab-tf-wahl:focus,
html.tastatur #content-view:focus {
  outline-offset: -5px;
}

/* AUFDECKEN. Was die Maus erst beim Ueberfahren zeigt, zeigt die Tastatur,
   sobald der Fokus darin steht - ohne Blende, so schnell wie der Rahmen. */
html.tastatur .cv-thumb:focus-within .cv-dl,
html.tastatur .cv-thumb:focus-within .cv-marker,
html.tastatur .cv-thumb:focus-within .cv-edit,
html.tastatur #dfenster .df-bild:focus-within .df-bild-marke {
  opacity: 1;
  transition: none;
}

/* RUECKSEITEN. Was abgewandt ist, nimmt keinen Fokus: unsichtbar auf
   halber Wende (0,22 s von 0,44 s), wenn die Karte hochkant steht. Zu
   sehen war die abgewandte Seite nie (backface-visibility). */
.hist-front {
  transition: visibility 0s 0.22s;
}
.hist-item.flipped .hist-front {
  visibility: hidden;
}
.hist-back {
  visibility: hidden;
  transition: visibility 0s 0.22s;
}
.hist-item.flipped .hist-back {
  visibility: visible;
}

/* TREFFERFLAECHEN (Audit bedienung-09). Die Zeichen bleiben so klein, wie
   sie gezeichnet sind; was die Hand trifft, waechst unsichtbar auf 24
   Punkte (WCAG 2.5.8) - nach aussen oder bis zur Mitte der Luecke, nie
   ueber einen Nachbarn.
   Rueckseite der Miniatur: Eimer 14 Punkte, 3 vom Rand, das Kopierzeichen
   4 Punkte daneben. Die Grenze liegt in der Mitte der Luecke. */
.hist-back {
  container-type: inline-size;
}
.hist-del::before,
.hist-kopie::before {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
}
.hist-del::before {
  right: -8px;
  left: -2px;
}
.hist-kopie::before {
  right: -2px;
  left: calc(-1 * min(8px, 100cqw - 35px));
}
/* Die Zeichen der Karten: 22 Punkte mit 28 Punkten Teilung - 24 passen
   mit Luft. */
.cv-dl::before,
.cv-marker::before,
.cv-edit::before,
.cv-del::before,
.cv-kopie::before {
  content: '';
  position: absolute;
  inset: -1px;
}
/* Das Druckfenster: die Sterne im Kopf der Bilderspalte (10 Punkte, 4
   Luft) wie die im Bogen; das Zurücknehmen (17) und die Marke auf der
   Karte (18) stehen frei. */
#dfenster .df-bib-sterne button,
#dfenster .df-werkzeuge .df-zurueck {
  position: relative;
}
#dfenster .df-bib-sterne button::before {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -2px;
  right: -2px;
}
#dfenster .df-werkzeuge .df-zurueck::before {
  content: '';
  position: absolute;
  inset: -3.5px;
}
#dfenster .df-bild .df-bild-marke::before {
  content: '';
  position: absolute;
  inset: -2.5px;
}
/* Das Promptfeld: zwei Zeichen zu 15 Punkten, 9 dazwischen. */
#chip-prompt .cp-knopf {
  position: relative;
}
#chip-prompt .cp-knopf::before {
  content: '';
  position: absolute;
  inset: -4.5px;
}
/* Im Ziffernschritt „andere Adresse“ und „erneut senden“: mit 14 Luft
   waechst jede auf 24 und mehr. Die Haken der Kreise: die ganze Zeile
   nimmt den Klick (label), sie bekommt oben und unten 3 Punkte dazu. Die
   Verweise darin (AGB, Datenschutz) liegen UEBER dieser Flaeche - sonst
   fing sie ihren Klick, setzte den Haken, und die AGB oeffneten sich
   nicht. */
#lg-acts button {
  position: relative;
}
#lg-acts button::before {
  content: '';
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: 0;
  right: 0;
}
.lg-check {
  position: relative;
}
.lg-check::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -3px;
  bottom: -3px;
}
.lg-check a {
  position: relative;
}

/* DIE AUSWAHLFARBE. Markiert wird nur in Eingabefeldern. Auf dem weissen
   Grund ein ruhiges Grau, das die Schrift stehen laesst. */
::selection {
  background: rgba(0, 0, 0, 0.14);
}