/* ============================================================
   goldenroom yoga | Base
   Reset, Grundtypografie, A11y-Helfer. Keine Komponenten hier.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--cream);
  scroll-behavior: smooth;
  /* Zentraler Hebel für "alles nochmal ein, zwei Nummern größer"
     (13.09.2026 auf Wunsch: "kann man nicht so leicht lesen") – die
     ganze Seite arbeitet konsequent mit rem statt px (siehe restliche
     Datei/tokens.css), ein höherer Root-Wert skaliert dadurch Fließtext,
     Beschriftungen, Überschriften UND die meisten Abstände gleichmäßig
     mit, ohne jede einzelne Font-Size-Deklaration einzeln anfassen zu
     müssen. Layout-Fixgrößen in px (--logo-size, --container-max,
     Burger-Maße) bleiben davon unberührt. */
  font-size: 108%;
}

/* MOBILE-POLISH (20.09.2026, auf Wunsch: "Schriftgrößen deutlich
   reduzieren... generell zu große Content-Schrift"): die 108% oben sind
   ein expliziter Desktop-Wunsch ("kann man nicht so leicht lesen",
   13.09.2026) und bleiben dort unangetastet – auf schmalen Screens
   summierte sich derselbe Faktor aber über JEDE rem-basierte
   Schriftgröße UND viele rem-basierte Abstände hinweg (praktisch die
   ganze Seite rechnet in rem, siehe Kommentar oben), wodurch z.B. die
   H1 im Hero real bei ~45px statt den zugrunde liegenden 41.6px (2.6rem)
   landete. Ein einziger Hebel an derselben Stelle wie oben (statt Dutzende
   einzelne clamp()-Werte anzufassen) skaliert alles wieder auf die reine
   100%-Basis zurück – betrifft automatisch auch Section-Abstände,
   Karten-Innenabstände etc., die ebenfalls in rem stehen. Bewusst nicht
   unter 100%: die Basisgrößen selbst (z.B. --step-titel, body
   font-size:1.1875rem) sind unverändert die vor der 108%-Erhöhung
   bereits als "großzügig genug" empfundenen Werte. */
@media (max-width: 700px) {
  html { font-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  /* --graubraun statt --ink: die aus dem Flyer gemessene Fließtext-
     Farbe (~4,6:1 auf --cream, siehe tokens.css). Überschriften nutzen
     eigene Farben je Ebene, siehe h1–h4-Regeln unten. */
  color: var(--graubraun);
  background: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  /* Fließtext-Größe unverändert übernommen (war schon vorher großzügig
     bemessen, siehe Original-Site) – Karla (QUALITY-VARIANTE, siehe
     fonts/fonts.css) hat anders als Bebas Neue einen echten
     Kleinbuchstaben-Schnitt, dadurch werden aus denselben Absätzen jetzt
     lesbare Zeilen statt einer Reihe optischer Versalien. */
  font-size: 1.1875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-align: center; /* Website-Texte sind grundsätzlich mittig ausgerichtet, nicht linksbündig */
  overflow-x: clip; /* Sicherheitsnetz für Vollbild-Bleed-Elemente (z.B. .yoga-band),
                        die bewusst über 100vw breiter als der Viewport ohne
                        Scrollbar sein können. Nur die X-Achse – die Y-Achse bleibt
                        unangetastet, damit die view()-Timelines (siehe
                        .parallax-duo/.format-detail__accent) weiterhin den
                        Dokument-Scroller als Root nutzen. */
}

/* Headlines in Instrument Serif (23.09.2026, 2. Runde: war kurz Oswald,
   auf Wunsch "für die Überschriften diese alte Schriftart, die etwas
   geschwungener ist" wieder zurück – --font-body/Oswald bleibt für
   Fließtext/Buttons/Nav, siehe tokens.css), normale Groß-/
   Kleinschreibung wie im Markup. Kein text-transform:uppercase – die
   Texte stehen im Markup bereits in normaler Groß-/Kleinschreibung
   ("Was ist der goldenroom?" etc.), dadurch ändert sich am HTML nichts.
   Nur EIN Schnitt (400) bei Instrument Serif – h1/h2 setzen bewusst
   font-weight:400 statt sich auf Vererbung zu verlassen, damit der
   Browser nie ein fettes Gewicht synthetisiert (bei Serifen deutlich
   unsauberer als bei einer Grotesk). Jede Ebene behält ihre eigene
   Farbe/Art aus der Palette (tokens.css). */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
}

/* h1: Seitentitel (Hero, page-intro__title) – Gold, leicht negativer
   Zeichenabstand (typisch für große Serifen-Headlines, positiver
   Abstand wirkt bei einer Serife nur locker/unruhig). */
h1 {
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--gold-700);
}

/* h2: Section-Überschriften, die häufigste Ebene – bleibt Gold wie h1
   (auf Wunsch, siehe Chat: "Überschriften immer Gold"). font-weight:400
   – Instrument Serif hat keinen echten Fett-Schnitt, die Größe
   (--step-titel) allein trägt die Präsenz. */
h2 {
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--gold-700);
}

/* h3: kleinere Karten-Überschriften – Kursiv statt Fett als
   Unterscheidungsmerkmal, dunkles Espresso statt Gold oder Graubraun.
   Aktuell nirgends im Markup verwendet (die einzige Stelle, die
   "Für wen"-Karten auf index.html, wurde am 12.09.2026 entfernt), aber
   für zukünftigen Content schon als eigene Ebene definiert. */
h3 {
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--espresso);
}

/* h4: aktuell nirgends im Markup verwendet, aber für zukünftigen
   Content schon als eigene Ebene definiert (weder Gold noch Espresso,
   damit sie sich von h2/h3 unterscheidet). */
h4 {
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--taupe-dark);
}

/* Rahmen um Fotos (13.09.2026) am 14.09.2026 wieder entfernt, im Zug
   des großen Umbaus "wie die Hero-Section" (die Hero-Fotos hatten von
   Anfang an nie einen Rahmen) – randlose Fotos wirken ruhiger und
   hochwertiger, ein hartes Gold-Rechteck um jedes Bild passte nicht
   mehr zur neuen, zurückhaltenderen Bildsprache. Die Ausnahmeliste in
   components.css (Logos, Wasserzeichen, Deko-Bilder) ist dadurch
   überflüssig geworden, aber bewusst nicht gelöscht (falls der Rahmen
   für einzelne Bilder doch mal zurückkommen soll). */
img {
  max-width: 100%;
  display: block;
}

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

/* Utility-Label-Stil: Eyebrows, Bildunterschriften, Meta-Zeilen –
   kurze Labels wie Buttons/Headlines: Bebas Neue (synthetisiert fett)
   + Großbuchstaben. Komplett ausgeblendet seit 11.09.2026 auf Wunsch
   ("Zwischenüberschriften weg") – das Gold, das hier vorher stand,
   sitzt jetzt stattdessen auf den h1/h2-Überschriften selbst (siehe
   oben). Regel bewusst nicht gelöscht, nur ausgeblendet: betrifft u.a.
   auch .hero__kicker (Name + Rolle im Hero) und .mobile-menu__eyebrow
   ("Menü"-Label im aufklappenden Menü), die dadurch ebenfalls
   verschwinden – bei Bedarf einzeln wieder sichtbar machen. */
.eyebrow {
  display: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}