/* ===========================================================================
   basis.css - Globale Grundlagen Mahadevi Yoga

   Setzt ausschliesslich robuste Grundlagen: Box-Modell, Grundfarben,
   Grundtypografie, zugaengliche Links, Tastaturfokus, neutrale
   Formularelemente, reduzierte Bewegung, Hilfsklassen.

   KEINE Komponenten. Kopfbereich, Navigation, Hero, Stundenplan,
   Angebotszeilen, Kontaktformular, Fussbereich und Animationen entstehen
   in spaeteren Phasen.

   Setzt tokens.css voraus. Keine externen URLs, keine @import-Anweisungen.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Box-Modell und Grundverhalten
   ------------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Kein festes font-size, damit die Browsereinstellung des Besuchers
     wirksam bleibt. Alle rem-Werte richten sich danach. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Sanftes Scrollen nur, wenn keine reduzierte Bewegung gewuenscht ist. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background-color: var(--grund-seite);
  color: var(--text-haupt);
  font-family: var(--schrift-grund);
  font-size: var(--groesse-fliesstext);
  font-weight: var(--staerke-normal);
  line-height: var(--zeilenhoehe-fliesstext);
  letter-spacing: var(--laufweite-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   2. Grundtypografie
   ------------------------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--abstand-s);
  font-family: var(--schrift-titel);
  font-weight: var(--staerke-leicht);
  line-height: var(--zeilenhoehe-titel);
  letter-spacing: var(--laufweite-titel);
  text-wrap: balance;
}

h1 {
  font-size: var(--groesse-titel-1);
  line-height: var(--zeilenhoehe-schlagzeile);
  letter-spacing: var(--laufweite-schlagzeile);
}

h2 {
  font-size: var(--groesse-titel-2);
}

h3 {
  font-size: var(--groesse-titel-3);
}

h4 {
  font-size: var(--groesse-titel-4);
}

h5,
h6 {
  font-size: var(--groesse-gross);
}

p,
ul,
ol,
dl,
blockquote,
figure,
table {
  margin: 0 0 var(--abstand-s);
}

/* Letztes Element eines Blocks setzt keinen Abstand nach unten. */
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
figure:last-child,
table:last-child {
  margin-bottom: 0;
}

/* Lesbare Zeilenlaenge fuer Fliesstext. */
p {
  max-width: var(--breite-lesetext);
  text-wrap: pretty;
}

small {
  font-size: var(--groesse-fein);
}

strong,
b {
  font-weight: var(--staerke-mittel);
}

/* Zahlen in Zeitangaben und Tabellen sollen untereinander stehen. */
time,
td,
th {
  font-variant-numeric: tabular-nums;
}

blockquote {
  font-family: var(--schrift-titel);
  font-size: var(--groesse-gross);
  font-style: italic;
  font-weight: var(--staerke-leicht);
}

hr {
  height: 0;
  margin: var(--abstand-l) 0;
  border: 0;
  border-top: var(--rahmen-duenn) solid var(--linie-dezent);
}

::selection {
  background-color: var(--auswahl-grund);
  color: var(--auswahl-text);
}

/* ---------------------------------------------------------------------------
   3. Links
   Unterstreichung als zweites Merkmal neben der Farbe, damit Links nicht
   allein ueber Farbe erkennbar sind.
   ------------------------------------------------------------------------ */
a {
  color: var(--text-haupt);
  text-decoration: underline;
  text-decoration-thickness: var(--rahmen-duenn);
  text-underline-offset: 0.18em;
  transition: color var(--dauer-kurz) var(--kurve-standard);
}

a:hover {
  color: var(--akzent-primaer);
  text-decoration-thickness: var(--rahmen-stark);
}

/* Hover und Tastaturfokus sollen dasselbe Signal geben. */
a:focus-visible {
  color: var(--akzent-primaer);
}

a:active {
  color: var(--akzent-primaer-tief);
}

/* E-Mail-Adressen duerfen umbrechen.
   "info@mahadeviyoga.ch" enthaelt keine Stelle, an der ein Browser von
   sich aus trennen wuerde. Bei hochgesetzter Schriftgroesse ragte die
   Adresse deshalb aus dem Bild - in P10 auf der Impressumsseite gemessen.
   "anywhere" statt "break-word": nur so wird die Adresse auch bei der
   Breitenberechnung des Kastens beruecksichtigt, statt ihn zu sprengen.
   Bei genuegend Platz aendert sich nichts. */
a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* Telefonnummern bleiben in einer Zeile.
   "079 703 98 17" enthaelt drei Leerzeichen, an denen der Browser
   umbrechen darf. Eine ueber zwei Zeilen verteilte Nummer laesst sich
   schlecht ablesen und noch schlechter abtippen. In P10 nachgemessen: bis
   hinunter zu 281 Pixeln bricht sie derzeit nirgends um - aber das ist
   Zufall und haengt an der Laenge des Textes daneben. Diese Regel macht es
   zur Zusage. */
a[href^="tel:"] {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   4. Tastaturfokus
   Sichtbar auf jedem Untergrund. Der Ring ist eine Formaenderung, nicht nur
   eine Farbaenderung, und erfuellt damit auch die Anforderung, dass Fokus
   nicht ausschliesslich ueber Farbe erkennbar sein darf.
   ------------------------------------------------------------------------ */
:focus-visible {
  outline: var(--fokus-ring-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-ring-abstand);
}

/* Auf dunklen Flaechen kehrt sich die Ringfarbe um. */
.auf-dunklem-grund :focus-visible {
  outline-color: var(--fokus-farbe-invers);
}

/* Maus- und Touchbedienung bekommen keinen Ring, Tastaturbedienung schon.
   Browser ohne :focus-visible behalten den Standardring. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------------------------------
   5. Medien
   ------------------------------------------------------------------------ */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

svg {
  fill: currentcolor;
}

/* ---------------------------------------------------------------------------
   6. Formularelemente in neutraler Grundform
   Bewusst zurueckhaltend: nur Vererbung, Mindestgroessen und ein sichtbarer
   Rahmen. Die eigentliche Gestaltung folgt mit dem Kontaktformular in P7.
   ------------------------------------------------------------------------ */
button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
  min-height: var(--touchziel-min);
  min-width: var(--touchziel-min);
  padding: var(--abstand-2xs) var(--abstand-s);
  border: var(--rahmen-duenn) solid var(--linie-bedienelement);
  border-radius: var(--radius-keiner);
  background-color: transparent;
  cursor: pointer;
}

input,
select,
textarea {
  min-height: var(--touchziel-min);
  padding: var(--abstand-2xs) var(--abstand-xs);
  border: var(--rahmen-duenn) solid var(--linie-bedienelement);
  border-radius: var(--radius-keiner);
  background-color: var(--grund-seite);
}

textarea {
  resize: vertical;
}

/* Kontrollkaestchen und Auswahlknoepfe behalten ihre Systemdarstellung,
   brauchen aber ein ausreichend grosses Klickziel im umgebenden Label. */
[type="checkbox"],
[type="radio"] {
  min-height: auto;
  min-width: auto;
  padding: 0;
  accent-color: var(--akzent-primaer);
}

label {
  display: inline-block;
  min-height: var(--touchziel-min);
}

fieldset {
  margin: 0 0 var(--abstand-s);
  padding: var(--abstand-s);
  border: var(--rahmen-duenn) solid var(--linie-bedienelement);
}

legend {
  padding: 0 var(--abstand-2xs);
}

::placeholder {
  color: var(--text-gedaempft);
  opacity: 1; /* Firefox senkt die Deckkraft sonst eigenmaechtig. */
}

/* Pflichtfelder und Fehler nie allein ueber Farbe kennzeichnen. Die Farbe
   ist hier nur die Verstaerkung eines zusaetzlichen Textmerkmals. */
[aria-invalid="true"] {
  border-color: var(--zustand-fehler);
  border-width: var(--rahmen-stark);
}

/* ---------------------------------------------------------------------------
   7. Hilfsklassen
   ------------------------------------------------------------------------ */

/* Nur fuer Screenreader sichtbar.
   Bewusst KEINE globale Regel, die Inhalte fuer spaetere Animationen
   versteckt. Inhalte bleiben ohne JavaScript vollstaendig sichtbar. */
.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link: aus dem Blickfeld, bis er den Tastaturfokus erhaelt. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--ebene-skiplink);
  display: inline-block;
  min-height: var(--touchziel-min);
  padding: var(--abstand-xs) var(--abstand-s);
  background-color: var(--grund-invers);
  color: var(--text-auf-invers);
  text-decoration: underline;
  transform: translateY(-120%);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--fokus-farbe-invers);
}

/* Zielbereich eines Sprunglinks soll nach dem Sprung fokussierbar sein,
   ohne dauerhaft einen Rahmen zu zeigen. */
[tabindex="-1"]:focus {
  outline: none;
}

/* Inhaltsbreite */
.inhaltsbreite {
  width: 100%;
  max-width: var(--breite-inhalt-max);
  margin-inline: auto;
  padding-inline: var(--seitenrand);
}

/* ---------------------------------------------------------------------------
   8. Reduzierte Bewegung
   tokens.css setzt bereits die Dauer-Tokens herab. Diese Regel sichert
   zusaetzlich alles ab, was Bewegung nicht ueber die Tokens bezieht.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   9. Druck
   ------------------------------------------------------------------------ */
@media print {
  body {
    background-color: #fff;
    color: #000;
  }

  .skip-link {
    display: none;
  }
}