/* ============================================================================
   theascenders.de — gemeinsame Basis beider Teilbereiche
   ----------------------------------------------------------------------------
   Hier steht ausschliesslich, was auf der Kurs-Website UND im Shop gleich sein
   MUSS: Rasterbreiten, Fokusringe, Mindestgroessen fuer Beruehrung, Umbruch-
   punkte, Bewegungsreduktion.

   Bewusst NICHT hier: Farben, Schriften, Rundungen, Schatten. Die beiden
   Bildsprachen sind unterschiedlich gewollt — Navy/Cyan/Barlow gegen
   Stein/Gold/Cormorant — und das soll so bleiben. Vereinheitlicht wird nur,
   was strukturell ist und sonst doppelt gepflegt werden muesste.

   Einbinden VOR dem jeweiligen Design-Stylesheet, damit dieses gezielt
   ueberschreiben kann.
   ============================================================================ */

:root{
  /* Umbruchpunkte — als Referenz fuer beide Bereiche, damit dieselben
     Zahlen dieselben Namen tragen. Media Queries koennen keine Variablen
     lesen; die Werte stehen deshalb dokumentiert hier und literal dort. */
  --bp-klein:  620px;   /* Telefon quer bis kleines Tablet */
  --bp-mittel: 900px;   /* Tablet, ab hier mehrspaltig     */
  --bp-gross: 1080px;   /* Laptop                          */

  /* Rasterbreite: identisch auf beiden Seiten, damit der Wechsel zwischen
     Kurs und Shop nicht springt. */
  --wrap-max:  1200px;
  --wrap-rand: 1.25rem;

  /* Mindestgroesse fuer alles, was angetippt wird (WCAG 2.5.5 / 2.5.8). */
  --tap-min: 44px;

  /* Fokusring — muss auf beiden Grundfarben sichtbar sein, deshalb doppelt:
     heller Kern, dunkler Saum. Farbe setzt jeder Bereich selbst. */
  --fokus-breite: 3px;
  --fokus-abstand: 3px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  overflow-x: hidden;          /* kein seitliches Scrollen der Seite selbst */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg{
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Beruehrung ────────────────────────────────────────────────────────────
   Alles Interaktive erreicht 44x44 px. `min-height` allein genuegt nicht bei
   Elementen, die nur ein Icon enthalten — deshalb zusaetzlich min-width. */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
select,
summary{
  min-height: var(--tap-min);
}
button, [role="button"], input[type="button"], input[type="submit"]{
  min-width: var(--tap-min);
}
/* Textlinks im Fliesstext sind ausgenommen — dort waere eine erzwungene
   Mindesthoehe ein Layoutfehler, keine Verbesserung. */
a{ touch-action: manipulation; }

/* ── Tastaturbedienung ────────────────────────────────────────────────────
   Fokus wird nie entfernt, nur ersetzt. `:focus-visible` zeigt den Ring der
   Tastatur, nicht der Maus. */
:focus-visible{
  outline: var(--fokus-breite) solid var(--fokus-farbe, currentColor);
  outline-offset: var(--fokus-abstand);
}
:focus:not(:focus-visible){ outline: none; }

/* Sprunglink: ausserhalb des Bildes, bis er den Fokus bekommt. Farben und
   Rundung setzt der jeweilige Bereich. */
.skip{
  position: absolute;
  left: var(--wrap-rand);
  top: -6rem;
  z-index: 999;
  padding: .75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .18s cubic-bezier(.22,.61,.36,1);
}
.skip:focus{ top: var(--wrap-rand); }

/* Das Sprungziel bekommt nur den Fokus, damit die Tastatur dort weitergeht —
   ein Rahmen um den halben Bildschirm waere hier keine Hilfe, sondern Laerm. */
main[tabindex="-1"]:focus{ outline: none; }

/* Nur fuer Screenreader — sichtbar fuer Hilfsmittel, unsichtbar am Bildschirm. */
.vh{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Ueberlauf ────────────────────────────────────────────────────────────
   Breite Inhalte scrollen in ihrem eigenen Behaelter, nie die Seite. */
.scrollt-x{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table{ border-collapse: collapse; }

/* Zahlen in Spalten stehen untereinander. */
.zahlen-bündig{ font-variant-numeric: tabular-nums; }

/* ── Bewegung ─────────────────────────────────────────────────────────────
   Wer Bewegung reduziert haben will, bekommt keine. Gilt fuer beide Bereiche
   und ueberschreibt auch Animationen, die spaeter dazukommen. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Druck ────────────────────────────────────────────────────────────────
   Rechtstexte werden ausgedruckt. Dunkler Grund kostet dabei nur Toner. */
@media print{
  body{ background: #fff !important; color: #000 !important; }
  .skip, nav, footer{ display: none; }
  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: .85em; }
}