/* Grundlagen: Reset, Typo-Rollen, Fokus, Skip-Link, Layout-Hilfen, Reveal.
 * Reihenfolge der Stylesheets: fonts -> tokens -> base -> components -> sections.
 */

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

/* `hidden` steuert die Sichtbarkeit (Formular, Lightbox). Regeln, die spaeter
 * `display` setzen, sind mit :not([hidden]) abgesichert - deshalb kommt hier
 * kein !important zum Einsatz. */
[hidden] { display: none; }

html {
  /* Sanftes Scrollen macht nav.js, damit prefers-reduced-motion greift. */
  -webkit-text-size-adjust: 100%;
  /* Platz fuer den Scrollbalken bleibt reserviert: sonst springt die Seite
     um dessen Breite, sobald Overlay oder Lightbox overflow:hidden setzen. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ink-000);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: 0;
  /* Raleway setzt Ziffern sonst als Mediaevalziffern (2026 wie "2o26"). */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Scroll-Sperren der JS-Module (nav.js, gallery.js). */
body.is-nav-open,
body.is-lightbox-open { overflow: hidden; }

/* ------------------------------------------------------------------ Typo */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-1);
  text-transform: uppercase;
  margin: 0;
  /* Kein text-wrap: balance - bei zwei Woertern erzeugt es genau die
     Ein-Wort-Zeilen ("MEHR" / "ALS" / "MUSIK."). */
  text-wrap: pretty;
  overflow-wrap: normal;
  hyphens: auto;
}

/* Korrektur 2026-09-20: `anywhere` zerlegt Woerter ohne Trennstrich
   ("ANTWOR / TEN.") und war als Mobil-Notnagel gedacht - also nur dort. */
@media (max-width: 599.98px) {
  h1, h2, h3, h4 { overflow-wrap: anywhere; }
}

/* Gloock in Versalien wie die Referenz: dicht gesetzt, keine Sperrung.
   Gloock hat nur den Schnitt 400. */
h1 { font-weight: 400; font-size: var(--fs-h1); line-height: 1; letter-spacing: 0; }
h2 { font-weight: 400; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: 0; }
h3 { font-weight: 400; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: 0; }

p {
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
  text-wrap: pretty;
  hyphens: auto;
}

p:last-child { margin-bottom: 0; }

a { color: inherit; }

img { max-width: 100%; }

ul, ol { margin: 0; padding: 0; }

/* Rollen aus der Type-Scale (2.2) */

.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-1);
  max-width: 44ch;
}

.intro {
  font-weight: 400;
  font-size: var(--fs-intro);
  line-height: 1.65;
  max-width: 52ch;
}

.meta {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--text-3);
}

/* ----------------------------------------------------------------- Fokus */

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Ueber Fotos ist der Ring weiss und braucht einen dunklen Hof, sonst
 * verliert er auf hellen Bildstellen (Tokens im dunklen Kontext). */
.on-photo :focus-visible { box-shadow: 0 0 0 5px var(--focus-halo); }

/* ------------------------------------------------------------- Skip-Link */

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-120%);
  margin: var(--s-2);
  padding: var(--s-3) var(--s-6);
  background: var(--ink-200);
  border: var(--line-accent);
  border-radius: var(--r-xs);
  color: var(--text-1);
  font-weight: 500;
  font-size: var(--fs-btn);
  line-height: 1;
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus { transform: none; }

/* Nur fuer Screenreader, z.B. das Label der Telefon-Vorwahl. */
.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;
}

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

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container-wide {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Fixierte Leiste: Sprungziele brauchen Luft nach oben (10). */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }

.section--alt { background: var(--ink-100); }

/* Zum Farbton eine Haarlinie oben und unten: die Abschnitte trennen sich auch
   auf hellen oder warm eingestellten Bildschirmen sichtbar. Die letzte
   Sektion stoesst an den dunklen Footer und braucht unten keine. */
.section--alt { border-block: var(--line); }
main > .section--alt:last-child { border-bottom: 0; }

.grid-12 { display: grid; gap: var(--gap-lg); }

@media (min-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(12, 1fr); }
}

/* ---------------------------------------------------------------- Reveal */

/* Startzustand nur mit JavaScript - ohne JS sind alle Inhalte sichtbar. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity var(--dur-reveal) var(--ease-soft),
    transform var(--dur-reveal) var(--ease-soft);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}