/* ==========================================================================
   snorley – gemeinsame Design-Token und Barrierefreiheits-Grundregeln
   --------------------------------------------------------------------------
   Wird VOR dem jeweiligen Seiten-CSS eingebunden. Die bestehenden :root-Blöcke
   in den Seiten bleiben bestehen und behalten den Vorrang – hier stehen nur
   Zusatz-Token und Regeln, die überall gelten sollen.

   Farbwerte nach WCAG 2.2 AA gerechnet (Text 4.5:1, Bedienelemente 3:1):
     --accent      #C2410C  5.18:1 mit #fff
     --accent-700  #93300A  7.87:1 mit #fff
     --accent-soft #FB7A52  nur Dekoration, nie Text oder Bedienelementrand
     --err         #B23A1B  5.98:1 auf Weiß
     --ok          #14603A  6.40:1 auf #DDF0E7
     --field       #767F8B  4.05:1 auf Weiß, 3.64:1 auf --sky
   ========================================================================== */

:root{
  --accent-soft:#FB7A52;   /* alter Orangeton, nur noch für Flächen ohne Textbezug */
  --field:#767F8B;         /* Rahmen von Eingabefeldern und nicht gewählten Kacheln */
  --err:#B23A1B;           /* Pflichtfeld-Sternchen, Sterne, Fehlertexte */
  --header-h:70px;
  --sticky-cta-h:72px;
}

/* --- Fokusindikator ------------------------------------------------------
   Doppelter Ring: weiß innen, dunkelblau außen. Dadurch trägt er sowohl auf
   hellen als auch auf dunklen Flächen (je 9.6:1) – der bisherige einfarbige
   Ring war auf --brand-deep nur 2.46:1.                                     */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible{
  outline:3px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px #16457E;
  border-radius:8px;
}

/* --- Sprunglink ---------------------------------------------------------- */
.skip{position:absolute;left:14px;top:-60px;background:#16457E;color:#fff;
  padding:11px 18px;border-radius:10px;z-index:1000;transition:top .2s;text-decoration:none}
.skip:focus{top:14px}

/* --- Nur für Screenreader ------------------------------------------------ */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Sticky-Verdeckung (SC 2.4.11) --------------------------------------
   Sorgt dafür, dass ein angesprungenes oder fokussiertes Element nicht unter
   dem klebenden Kopf oder der klebenden Bestellleiste verschwindet.         */
html{
  scroll-padding-top:calc(var(--header-h, 70px) + 12px);
  scroll-padding-bottom:calc(var(--sticky-cta-h, 72px) + 12px);
}

/* --- Windows-Kontrastmodus ----------------------------------------------- */
@media (forced-colors: active){
  .btn, .btn-primary, .btn-ghost, button, input, select, textarea{
    border:1px solid ButtonBorder;
  }
  input, select, textarea{ border-color:CanvasText; }
  :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible{
    outline:3px solid Highlight;
    box-shadow:none;
  }
  .skip{border:1px solid CanvasText}
}

/* Links im Fließtext brauchen ein nicht-farbliches Merkmal (SC 1.4.1);
   Farbabstand zum Fließtext beträgt nur 1.12:1. Reine Navigation bleibt ohne. */
footer.site p a, .afoot p a, table.orders a, .legal p a, .note a,
.legal address a, .awrap p a{text-decoration:underline}

/* === Sprachauswahl =========================================================
   Die Regeln stehen NICHT mehr hier, sondern in einem <style>-Block auf
   jeder Seite selbst (Namensraum snlang-). Grund: fehlt oder veraltet
   diese Datei, sah der Umschalter vorher entstellt aus - die Grafiken
   wuchsen ohne Regeln auf 300 x 150 Pixel an. Ein Baustein, der seine
   Gestaltung selbst mitbringt, kann das nicht.                         */

/* Lange Wörter dürfen umbrechen (WCAG 1.4.10 Reflow). Ohne diese Regel sprengt
   allein „Geschäftsbedingungen" bei 320 px die Zeile und die ganze Seite muss
   waagerecht geschoben werden. hyphens:auto trennt sinnvoll, weil jede Seite
   ein lang-Attribut trägt. */
h1,h2,h3,h4,h5,h6,p,li,dt,dd,th,td,figcaption,summary,label,address{
  overflow-wrap:break-word;
}
h1,h2,h3{hyphens:auto}

/* Zielgröße (WCAG 2.5.5 AAA, 2.5.8 AA): Bedienelemente mindestens 44 x 44 px.
   Die Verweise in der Fußzeile waren 25 px hoch – für Menschen, die eine Maus
   nicht ruhig führen oder mit dem Finger zielen, zu wenig. Die Schrift bleibt
   unverändert, nur die Trefferfläche wächst. */
footer.site nav.legal a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px}
/* min-* statt padding: die Startseiten setzen ihr eigenes padding im Seitenkopf,
   das würde eine reine padding-Regel hier wieder aushebeln. */
.burger{min-width:44px;min-height:44px}
header.site .nav > a{display:inline-flex;align-items:center;min-height:44px}