/* ==========================================================
   basis.css · GedankenRESET-LP
   Kanon v3.1 · Runde p.007 · 07.09.2026

   Ladereihenfolge: schriften.css -> tokens.css -> basis.css
   -> komponenten.css

   Hier stehen ausschliesslich var()-Verweise, keine Rohwerte.
   Ausnahmen sind Nullwerte, 100 %, auto und die zwei
   Umbruchpunkte in den Media-Praeambeln (Kanon 5.0 - Custom
   Properties wirken dort nicht).
   ========================================================== */

/* --- Grundlage ------------------------------------------- */

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

html{
  -webkit-text-size-adjust:100%;   /* Kanon 5.32: kein erzwungener Zoom */
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
}

body{
  margin:0;
  background:var(--farbe-creme);
  color:var(--farbe-marine);
  font-family:var(--schrift-sans);
  font-size:var(--grad-text);
  font-weight:400;
  line-height:var(--zeile-weit);
  -webkit-font-smoothing:antialiased;
}

img,svg,video{ max-width:100%; height:auto }

/* --- Typografie ------------------------------------------
   Playfair Display fuer H1 bis H3 und den Preis, Montserrat
   fuer alles Uebrige (Vorgabe v1.2). Die Familie kommt
   ausschliesslich aus dem Token (P-09). */

/* v1.5 G-01: Ueberschriften in Playfair Display 500, nicht 600 -
   bei diesen Graden wirkt der schwerere Schnitt gedrungen.
   Zeilenabstand 1.12 statt 1.2 aus demselben Grund.
   Versalabstand -0.015em fuer die grossen Grade. */
h1,h2,h3{
  font-family:var(--schrift-serif);
  font-weight:500;
  line-height:var(--zeile-eng);
  text-wrap:balance;
  margin:0 0 var(--sp-5);
}
h1{ font-size:var(--grad-h1); letter-spacing:-.015em }
h2{ font-size:var(--grad-h2); letter-spacing:-.015em }
h3{ font-size:var(--grad-h3) }

p,ul,ol{ margin:0 0 var(--sp-5) }
p{ max-width:var(--breite-lesen) }

.gr-klein{ font-size:var(--grad-klein); color:var(--farbe-grau) }
.gr-einleitung{ font-size:var(--grad-h3); max-width:var(--breite-lesen) }

strong,b{ font-weight:600 }

/* --- Verweise --------------------------------------------
   Gold-Text, nicht Gold: das gemessene Gold erreicht auf Creme
   2,60:1 und ist als Textfarbe unzulaessig (P-07). */

a{
  color:var(--farbe-gold-text);
  text-decoration-thickness:var(--hair);
  text-underline-offset:.2em;
}
@media (hover:hover){                       /* Kanon 5.20, Touchregel */
  a:hover{ color:var(--farbe-marine) }
}

/* --- Fokus, sichtbar --------------------------------------
   :focus-visible, NICHT :focus-within. Letzteres greift auch
   bei Fingerfokus und kostet auf Touchgeraeten einen zweiten
   Tipp. Marine auf Creme 12,93:1, auf Gold 4,98:1 - beide weit
   ueber den 3:1 aus WCAG 1.4.11. */

:focus-visible{
  outline:var(--hair) solid var(--farbe-marine);
  outline-width:3px;
  outline-offset:3px;
  border-radius:var(--radius-klein);
}
.auf-marine :focus-visible{ outline-color:var(--farbe-creme) }

/* --- Layout ----------------------------------------------- */

/* Huelle und Baender stehen in komponenten.css - hier standen
   sie ein zweites Mal, mit anderen Werten (--sp-5 statt --sp-6
   fuer den Seitenabstand, --sec-m statt --sektion-y fuer den
   vertikalen Rhythmus). Sichtbar war das nicht, weil
   komponenten.css spaeter geladen wird; eine geaenderte
   Ladereihenfolge haette den Seitenabstand der ganzen Seite
   umgestellt. A-01 verlangt EINEN Seitenabstand fuer alle drei
   Breiten, A-11 EINEN vertikalen Abstand - beide koennen nur
   an einer Stelle stehen. .gr-band--weit war nirgends benutzt
   und mit ihm der einzige Verbrauch von --sec-l, dem
   fuenfzehnten Abstandswert (zulaessig sind 14, Kanon 5.1). */

.auf-marine{
  background:var(--farbe-marine);
  color:var(--farbe-creme);
}
.auf-marine h1,.auf-marine h2,.auf-marine h3{ color:var(--farbe-creme) }
.auf-marine a{ color:var(--farbe-gold-hell) }
.auf-marine .gr-klein{ color:var(--farbe-beige) }

/* --- Zum Inhalt springen ---------------------------------- */

.gr-sprung{
  position:absolute;
  left:var(--sp-2); top:var(--sp-2);
  transform:translateY(-200%);
  z-index:10;
  background:var(--farbe-marine);
  color:var(--farbe-creme);
  padding:var(--sp-3) var(--sp-5);
  border-radius:var(--radius-klein);
  transition:transform var(--dur-1) ease;
}
.gr-sprung:focus-visible{ transform:translateY(0) }

/* --- Externe Links · Kanon 5.33 ---------------------------
   Screenreader-Text mit clip-path, NICHT display:none -
   letzteres entfernt den Text auch fuer Screenreader und damit
   genau die Information, um die es geht. Wortlaut und Technik
   aus 02-VORLAGEN/snippets/externe-links.css.

   Die sichtbare Pfeilmarkierung des Snippets gilt nur fuer
   Fliesstext. Auf dieser Seite fuehrt genau ein Link nach
   aussen, und das ist ein Knopf - dort wuerde der Pfeil die
   Flaeche stoeren; der Hinweis haengt am Element und greift
   trotzdem. */
.ey-sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0;
  /* Das Kitsnippet setzt hier zusaetzlich margin:-1px. Der Wert
     stammt aus der Zeit vor position:absolute und ist hier ohne
     Wirkung - ein absolut positioniertes Element steht nicht im
     Fluss, es kann nichts verschieben. Er ist aber der
     fuenfzehnte Abstandswert des Projekts, und zulaessig sind
     14 (Kanon 5.1). Weggelassen, gemeldet: das Kitsnippet faellt
     durch die Kitpruefung. */
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}