/* Sichtbarer Tastaturfokus und Sprungmarke für alle Seiten der Website (Zugänglichkeit, 01.10.2026), seit Aufgabe 450
   Teil 6 mit dem Ring der App aus werte.css: --focus-width in --ring mit --focus-offset Abstand. Dunkle Bänder tragen
   die Klasse auf-nacht, darin ist --ring weiß. Höhere Spezifität als die Komponentenregeln, die den Fokus nur durch
   eine Hintergrundfarbe zeigten. */
html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); }
.sprungmarke { position: fixed; left: 12px; top: -80px; z-index: 100000; padding: 12px 18px; border-radius: var(--radius-field); background: var(--nacht); color: var(--nacht-foreground); font: 640 16px/1.25 var(--font-sans); letter-spacing: -.012em; text-decoration: none; box-shadow: 0 8px 24px rgb(0 0 0 / .35); transition: top .15s ease; }
html body a.sprungmarke:focus { top: 12px; outline: var(--focus-width) solid var(--nacht-ring); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { .sprungmarke { transition: none; } }
[tabindex="-1"]:focus { outline: none; }

/* Berührflächen mindestens 44 px (Abschlussprüfung 01.10.2026); höhere Spezifität als die Komponentenregeln */
html body footer a, html body .fuss a { display: inline-flex; align-items: center; min-height: 44px; }
/* Sicherheitsnetz gegen sehr spezifische Komponentenregeln (Preisumschalter, Formularfelder) */
html body [data-takt], html body .takt button { min-height: 46px !important; }
html body .feld input:not([type=checkbox]):not([type=radio]):not([type=range]), html body .feld select { min-height: 46px; }

/* Aufgabe 1097: Tippziele mindestens 44 × 44 px auf Touch-Geräten (WCAG 2.5.5 „at least 44 by 44 CSS pixels“, web.dev
   „use additional padding to bring the tap target size up“). Nur bei grobem Zeiger, mit Maus bleibt alles wie bisher.
   Wo Nachbarn darüber oder darunter stehen, wächst das Ziel wirklich (min-height). Wo nichts daneben steht, wächst nur die
   Tippfläche: Polster nach außen, gleich großer Gegenrand, das Bild bleibt gleich. */
@media (pointer: coarse) {
  html body :is(footer, .fuss) a, html body .u-fuss .u-spalte a, html body .fuss .fuss-spalte a { min-height: 44px; min-width: 44px; }
  html body .kv-bestaetigung { min-height: 44px; }
  html body .a-weg a, html body .h-sprung a, html body .vergleich-wahl button, html body .kv-filter button,
  html body :is(.k26-chip, .k26-nehmen, .k26-suche, .k26-wahl) { min-height: 44px; }
  html body header :is(.marke, .start-seite-marke), html body .leistung-weiter { padding-block: 10px; margin-block: -10px; }
  /* Am Handy stehen Anrufen und Chat untereinander (kopf.css, 3 px Luft): die Zusatzfläche geht nach außen, sonst überlappen sich die Tippflächen */
  html body .kv-anrufen a { padding-block: 18px 5px; margin-block: -18px -5px; }
  html body .kv-schreiben button { padding-block: 5px 18px; margin-block: -5px -18px; }
  html body .i-sprung a { min-height: 44px; }
  html body .kopf-nav a { padding: 10px 8px; margin: -10px -8px; }
  html body .kopf.u-kopf .u-nav a { padding-inline: 8px; margin-inline: -8px; }   /* Lücke mindestens 16 px (unterseite.css) */
  html body .a-weg a { padding-inline: 5px; margin-inline: -5px; }
  html body #datenschutz .ds-kopf .ds-links a, html body .ds-links a { padding: 10px 7px; margin: -10px -7px; }
  html body .a-inhalt a { padding-block: 12px; }
  html body .a-lupe { top: -7px; bottom: -7px; }   /* flache Bilder (31 px): die Lupe deckt das Bild und je 7 px darüber und darunter */
  html body .a-lupe svg { bottom: 17px; }        /* das Zeichen bleibt 10 px über der Bildkante */
  html body .regler input { height: 44px; margin-block: -8px; }   /* Spur bleibt das 4-px-Band in der Mitte (kunde/gestaltung.css) */
}
