/* ==========================================================================
   xthias.de — Basis-Stylesheet
   Konzept: „Watt & Schiefer“ — siehe design/DESIGN.md
   Keine externen Ressourcen. Schriften lokal (OFL, siehe site/fonts/).
   ========================================================================== */

/* ---------- Schriften ---------------------------------------------------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* Farben — Kontraste in DESIGN.md */
  --c-watt: #E6E9E8;        /* heller Grund, kühles Grau (Winterstrand, Nebel) */
  --c-gischt: #F3F4F2;      /* hellere Fläche, Rechtsseiten / Karten */
  --c-schiefer: #1A2127;    /* Text auf hell, dunkler Grund */
  --c-priel: #4A5A63;       /* gedämpfter Text auf hell */
  --c-nebel: #9AA6AC;       /* gedämpfter Text auf dunkel */
  --c-linie: #C5CCCD;       /* Trennlinien auf hell (dekorativ, kein Text) */
  --c-linie-dunkel: #36424A;/* Trennlinien auf dunkel */
  --c-backstein: #9B3B2A;   /* Akzent auf hell: Links-Hover, Fokus, Platzhalter */
  --c-backstein-hell: #D9785F; /* Akzent auf dunkel (nur Fokus/Hover) */
  /* Warme Nachtfläche nur für „Wir sind Idealisten“ (Torf / Backstein bei Nacht) */
  --c-torf: #2A211E;        /* watt darauf 12,88:1, backstein-hell 5,10:1 */
  --c-sand: #B5A69E;        /* gedämpfter Text auf torf, 6,68:1 */
  --c-linie-torf: #4A3A34;  /* Linien auf torf (nur Deko) */

  /* Schriften */
  --ff-grotesk: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ff-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Typo-Skala (Basis 18 px, Verhältnis ~1,25) */
  --fs-meta: 0.875rem;                                   /* 14 px  */
  --fs-ui: 1rem;                                         /* 16 px  */
  --fs-body: 1.125rem;                                   /* 18 px  */
  --fs-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);     /* 20–24  */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);     /* 22–28  */
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);         /* 32–52  */
  --fs-quote: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);      /* 28–48  */
  --fs-display: clamp(5.5rem, 3rem + 17vw, 17rem);       /* Name im Hero */

  /* Abstände (8er-Raster) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Layout */
  --container: 75rem;           /* 1200 px */
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --measure: 36em;              /* Lesebreite Fließtext (~65 Zeichen) */
  --header-h: 3.5rem;

  --radius-ui: 2px;             /* nur Buttons; Fotos immer eckig */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-2));
}
body {
  min-height: 100vh;
  background: var(--c-watt);
  color: var(--c-schiefer);
  font-family: var(--ff-serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, iframe, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
#inhalt:focus { outline: none; }   /* Ziel des Skip-Links, kein Rahmen um <main> */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Typografie ---------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--ff-grotesk);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.2; }
p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: var(--s-2); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
}
.meta {
  font-family: var(--ff-grotesk);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-priel);
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness .15s var(--ease), color .15s var(--ease);
}
a:hover { text-decoration-thickness: 2px; color: var(--c-backstein); }

/* Fokus: immer sichtbar, Backstein auf hell, helles Backstein auf dunkel */
:focus-visible {
  outline: 3px solid var(--c-backstein);
  outline-offset: 3px;
}
.is-dark :focus-visible,
.site-header :focus-visible { outline-color: var(--c-backstein-hell); }   /* ≥ 3:1 auf schiefer */

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

.skip-link {
  position: absolute;
  left: var(--s-2); top: -100px;
  z-index: 100;
  padding: var(--s-1) var(--s-2);
  background: var(--c-gischt);
  color: var(--c-schiefer);
  font-family: var(--ff-grotesk);
  font-weight: 600;
}
.skip-link:focus { top: var(--s-1); }

/* ---------- Layout-Grundgerüst ------------------------------------------ */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section__head { margin-bottom: var(--s-5); }
.section__head h2 + p { margin-top: var(--s-2); }
.section--flush-top { padding-top: 0; }
.section--gischt { background: var(--c-gischt); }

/* Dunkle Flächen (Hero, Musik, Footer) */
.is-dark {
  background: var(--c-schiefer);
  color: var(--c-watt);
}
.is-dark .meta { color: var(--c-nebel); }
.is-dark a:hover { color: var(--c-backstein-hell); }

/* 12-Spalten-Raster ab 56rem; darunter einspaltig */
.grid { display: grid; gap: var(--s-4) var(--gutter); }
@media (min-width: 56rem) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---------- Header / Navigation ----------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-schiefer);
  color: var(--c-watt);
  border-bottom: 1px solid var(--c-linie-dunkel);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--header-h);
}
.wordmark {
  font-family: var(--ff-grotesk);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  flex-shrink: 0;
}
.site-nav { min-width: 0; }
.site-nav ul {
  display: flex;
  gap: calc(var(--s-3) - 0.5rem);   /* Links haben je 0,25rem Innenabstand */
  margin-inline: -0.25rem;          /* … der hier optisch ausgeglichen wird */
  list-style: none;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a {
  display: inline-block;
  padding: var(--s-1) 0.25rem;  /* Zielgröße >= 40 px Höhe; seitlich Luft für den Fokusrahmen */
  font-family: var(--ff-grotesk);
  font-size: var(--fs-ui);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: var(--c-watt);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--c-watt); border-bottom-color: var(--c-nebel); }
/* overflow-x der Liste schneidet außenliegende Rahmen ab → Fokusrahmen nach innen */
.site-nav a:focus-visible { outline-offset: -3px; }

/* Mobil: Wortmarke oben, Navigation als zweite Zeile (kein Burger, kein JS) */
@media (max-width: 39.99rem) {
  .site-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--s-1) 0;
  }
  /* Sechs Punkte passen ab 360 px ohne Scrollen, space-between verteilt den Rest.
     Bei noch schmaleren Geräten greift weiterhin das waagerechte Scrollen. */
  .site-nav ul { gap: 0; justify-content: space-between; }
  .site-nav a { font-size: 0.9375rem; }
  html { scroll-padding-top: 5.5rem; }  /* Header mobil ≈ 83 px + Luft */
}
@media (max-width: 23.99rem) {
  .site-nav a { font-size: 0.875rem; }
}

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  min-height: min(52rem, calc(100svh - var(--header-h)));
}
.hero__photo {
  grid-area: 1 / 1;
  position: relative;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
/* Abdunklung unten, damit der Name auf dem Foto lesbar bleibt (funktional) */
.hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  /* Mobil: Abdunklung von unten in festen Längen, damit der gesamte Textblock
     (ca. 19–21rem hoch) auch bei niedrigen Viewports auf ≥ 85 % Schiefer liegt –
     helle Stellen (Meer, Horizont) bleiben so ≥ 4,5:1. */
  background: linear-gradient(to top,
    rgba(26, 33, 39, .94) 0,
    rgba(26, 33, 39, .88) 20rem,
    rgba(26, 33, 39, 0) 28rem);
}
.hero__text {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 1;
  padding: var(--s-4) var(--gutter) var(--s-5);
}
.hero__name {
  font-family: var(--ff-grotesk);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.82;
  letter-spacing: -0.055em;
  margin-left: -0.04em;       /* optischer Randausgleich des „X“ */
  color: var(--c-watt);
}
/* „Das Projekt“ als kleine erste Zeile der h1 (Satzfall, keine Versalien) */
.hero__kicker {
  display: block;
  margin-bottom: 0.3em;
  margin-left: calc(0.04 * var(--fs-display));  /* hebt den Randausgleich der h1 wieder auf */
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hero__claim {
  margin-top: var(--s-3);
  font-size: var(--fs-lead);
  line-height: 1.4;
  max-width: 22em;
  color: var(--c-watt);
}
.hero__sub {
  margin-top: var(--s-1);
  font-family: var(--ff-grotesk);
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--c-nebel);      /* gedämpft; nebel/schiefer 6,53:1 */
}
/* Sammellink „Alle Lieder auf allen Plattformen“ (Wunsch Thias 27.10.2026, über der Liederliste):
   gut sichtbar, aber als ruhiger Textlink – keine Button-/Kachel-Optik (Leitlinie „nicht kommerziell“) */
.musik__links { margin-top: var(--s-2); }
.musik__links a {
  display: inline-block;
  padding-block: 0.5rem;          /* Trefferfläche ≥ 44 px */
  font-family: var(--ff-grotesk);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-watt);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--c-backstein-hell);
}
.musik__links a:hover { color: var(--c-backstein-hell); text-decoration-thickness: 3px; }

/* Desktop: Foto rechts, Name links und über die Foto-Kante hinaus */
@media (min-width: 56rem) {
  .hero__inner {
    /* Foto läuft rechts bis an den Viewport-Rand. Seine linke Kante liegt bei
       Container-Kante + ca. 77 % der Namensbreite (≈ 2,5 × Schriftgröße) – so ragt
       „Thias“ auf jeder Breite (900 … 1920 px) sichtbar über die Fotokante. */
    --hero-left: max(var(--gutter), (100% - var(--container)) / 2);
    grid-template-columns:
      minmax(0, calc(var(--hero-left) + 1.95 * var(--fs-display)))
      minmax(0, 1fr);
  }
  .hero__photo { grid-area: 1 / 2; max-height: 52rem; }
  .hero__photo img { object-position: 50% 45%; }
  .hero__photo::after {
    background:
      linear-gradient(to right, var(--c-schiefer) 0%, transparent 18%),
      linear-gradient(to bottom, transparent 60%, rgba(26, 33, 39, .7) 100%);
  }
  .hero__text {
    grid-area: 1 / 1 / 2 / 3;
    padding-bottom: var(--s-6);
    padding-left: var(--hero-left);
  }
}

/* Einziger orchestrierter Bewegungsmoment: Seitenaufbau Hero */
@media (prefers-reduced-motion: no-preference) {
  .hero__photo img { animation: hero-photo 1.2s var(--ease) both; }
  .hero__name { animation: hero-rise .9s .25s var(--ease) both; }
  .hero__claim { animation: hero-rise .9s .45s var(--ease) both; }
  .hero__sub { animation: hero-rise .9s .6s var(--ease) both; }
}
@keyframes hero-photo { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(0.25em); }
  to { opacity: 1; transform: none; }
}

/* ---------- Über / „Thias“ ----------------------------------------------- */
.about__photo { margin: 0; }
.about__photo img { width: 100%; max-width: 22.5rem; } /* Quelle 500 px */
.about__text > * + * { margin-top: var(--s-3); }
.about__text .lead { font-weight: 500; }
.about__body > * + * { margin-top: var(--s-2); }

.pullquote {
  margin-block: var(--s-6) 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-schiefer);
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 20em;
}
.pullquote p { max-width: none; }

/* Zweites Foto (Thias mit Hund): mobil nach dem Zitat, Desktop rechts neben dem Zitat
   – spiegelt die erste Zeile (Foto links, Text rechts) */
.about__photo--zwei { margin-top: var(--s-4); }
@media (min-width: 56rem) {
  .about__photo { grid-column: 1 / span 4; }
  .about__text { grid-column: 6 / span 7; }
  .pullquote { grid-column: 1 / span 7; align-self: center; }
  .about__photo--zwei { grid-column: 9 / span 4; margin-top: var(--s-6); justify-self: end; }
}

/* ---------- Musik / Videos ---------------------------------------------- */
.musik__intro > * + * { margin-top: var(--s-2); }
.musik__intro .musik__sub { margin-top: var(--s-3); font-weight: 500; }
.songs { list-style: none; padding: 0; }
.song {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-linie-dunkel);
}
.song:first-child { border-top: 0; padding-top: 0; }
.song__title { font-size: var(--fs-h3); }
.song__meta { margin-top: var(--s-1); }
.song__text { margin-top: var(--s-2); }
.song__text p { font-size: var(--fs-body); }
.song__credit { margin-top: var(--s-2); }   /* Mitwirkende, ruhig im Meta-Stil */
/* Kleines Zitat unter dem Kurztext (Sterntaler) */
.song__quote { margin: var(--s-2) 0 0; padding-left: var(--s-2); border-left: 1px solid var(--c-linie-dunkel); }
.song__quote blockquote { margin: 0; }
.song__quote blockquote p { font-size: var(--fs-body); }
.song__quote figcaption { margin-top: 0.25rem; font-family: var(--ff-grotesk); font-size: var(--fs-meta); font-weight: 500; color: var(--c-nebel); }
.song__yt { margin-top: var(--s-2); }
.song__yt a { font-family: var(--ff-grotesk); font-size: var(--fs-meta); font-weight: 500; color: var(--c-nebel); }
.song__yt a:hover { color: var(--c-backstein-hell); }

@media (min-width: 56rem) {
  .song { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .song .video { grid-column: 1 / span 7; }
  .song__body { grid-column: 8 / span 5; }
}

/* Song-Kopf mit Single-Artwork (alle Lieder) */
.song__head { display: flex; gap: var(--s-2); align-items: flex-start; }
.song__cover {
  flex: 0 0 auto;
  width: 5.5rem;                 /* mobil 88 px */
  margin: 0;
}
.song__cover img { width: 100%; height: auto; outline: 1px solid var(--c-linie-dunkel); outline-offset: -1px; }
@media (min-width: 56rem) {
  .song__head { flex-direction: column; gap: var(--s-3); }
  .song__cover { width: 9rem; }  /* 144 px, Quelle -klein 600 px */
}

/* Lied in Arbeit (noch kein Video): nur Cover + Titel, Kopf bleibt nebeneinander */
@media (min-width: 56rem) {
  .song--wip .song__body { grid-column: 1 / -1; }
  .song--wip .song__head { flex-direction: row; align-items: center; }
}

/* Abschluss der Songliste: ein ruhiger Satz mit Inline-Links (keine Kacheln, keine Buttons) */
.musik__outro {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-linie-dunkel);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* Video-Komponente: 2-Klick (poster → hinweis → iframe) ------------------ */
.video {
  position: relative;
  aspect-ratio: 11 / 5;             /* schneidet Letterbox-Balken der Vorschaubilder ab */
  background: var(--c-schiefer);
  overflow: hidden;
}
.video__poster {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.video__poster--crop { transform: scale(1.08); }   /* Sterntaler: Bildinhalt nur 960×412 */
.video__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* Ruhiges Play-Symbol: dunkle, halbtransparente Scheibe mit heller Linie –
   auf hellen wie dunklen Vorschaubildern erkennbar, ohne zu leuchten. */
.video__play-icon {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border: 2px solid var(--c-watt);
  background: rgba(26, 33, 39, .55);
  color: var(--c-watt);
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.video__play-icon svg { width: 1.125rem; height: 1.125rem; margin-left: 0.15rem; }
.video__play:hover .video__play-icon { transform: scale(1.05); background: rgba(26, 33, 39, .8); }
.video__play:focus-visible { outline-offset: -6px; }

.video__notice {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3);
  background: rgba(26, 33, 39, .9);
  color: var(--c-watt);
  font-family: var(--ff-grotesk);
  font-size: var(--fs-meta);
  line-height: 1.45;
}
.video__notice p { max-width: 34em; }
.video__actions { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }

.video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Zustände über data-state am .video */
.video[data-state="notice"] .video__play { display: none; }
.video[data-state="notice"] .video__poster { filter: grayscale(1) brightness(.6); }
.video[data-state="notice"] .video__notice { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .video[data-state="notice"] .video__notice { animation: hero-photo .2s var(--ease) both; }
}
.video[data-state="playing"] { aspect-ratio: 16 / 9; }   /* Player ohne seitliche Balken */
.video[data-state="playing"] .video__play,
.video[data-state="playing"] .video__poster,
.video[data-state="playing"] .video__notice { display: none; }

/* Mobil: Hinweis bekommt mehr Platz als 11:5 erlaubt und füllt die Fläche */
@media (max-width: 39.99rem) {
  .video[data-state="notice"] {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    min-height: 15rem;
  }
  .video[data-state="notice"] .video__poster { position: absolute; inset: 0; }
  .video[data-state="notice"] .video__notice { position: relative; flex: 1 1 auto; }
}

/* ---------- Buttons ------------------------------------------------------ */
/* Nur funktional (Video-Freigabe): Outline in Seitenfarben, keine gefüllte CTA-Fläche.
   „Video laden“ = .btn (Rand watt, 600), „Abbrechen“ = .btn--quiet (Rand nebel, 500). */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;              /* 44 px Touch-Ziel */
  padding: 0.5rem 1.125rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-ui);
  background: transparent;
  font-family: var(--ff-grotesk);
  font-size: var(--fs-ui);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { text-decoration: none; background: rgba(230, 233, 232, .12); }
.btn--quiet { border-color: var(--c-nebel); font-weight: 500; }
.btn--quiet:hover { border-color: var(--c-watt); }

/* ---------- Freunde ------------------------------------------------------ */
.freunde__photo { margin: var(--s-4) 0 0; max-width: 18rem; }
.freunde__photo img { width: 100%; }
.freunde__body > * + * { margin-top: var(--s-4); }
.crew__name { font-family: var(--ff-grotesk); font-weight: 600; }
.freunde__body .lead { font-weight: 500; }
.crew { max-width: var(--measure); border-top: 1px solid var(--c-linie); }
.crew__item {
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--c-linie);
}

/* Kleine Bildgruppe: Gruppenfoto volle Breite, darunter zwei Hochformate nebeneinander.
   Desktop: linke Spalte unter dem Hauptbild (füllt die Fläche neben der langen Liste),
   mobil/Tablet: nach dem Text. Keine Rahmen, keine Kacheln. */
.freunde__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); max-width: 32rem; }
.freunde__bild { margin: 0; min-width: 0; }
.freunde__bild--wide { grid-column: 1 / -1; }
.freunde__bild img { width: 100%; aspect-ratio: var(--ar, 1); object-fit: cover; background: var(--c-linie); }
.freunde__bild figcaption { margin-top: var(--s-1); }
@media (min-width: 56rem) {
  .freunde__grid { grid-template-rows: auto 1fr; }
  .freunde__head { grid-column: 1 / span 5; grid-row: 1; }
  .freunde__photo { max-width: 20rem; }
  .freunde__body { grid-column: 7 / span 6; grid-row: 1 / span 2; }
  .freunde__bilder { grid-column: 1 / span 5; grid-row: 2; align-self: start; max-width: 20rem; }
}

/* ---------- Live --------------------------------------------------------- */
/* Überschrift + Text oben (Sprungziel #live zeigt die Überschrift), darunter die
   Bildreihe mit .gallery__row/.gallery__item (gleiche Höhen) */
.live__photos { grid-column: 1 / -1; margin-top: var(--s-2); }
.live__text > * + * { margin-top: var(--s-3); }
@media (min-width: 56rem) {
  .live__text { grid-column: 1 / span 5; }
  .live__body { grid-column: 7 / span 6; align-self: end; }
}

/* ---------- Fotos / Galerie (justierte Reihen, kein Beschnitt) ----------- */
/* Jede Kachel bekommt ein Seitenverhältnis über eine ar-Klasse (keine style-Attribute, CSP).
   flex-grow = --ar → alle Bilder einer Reihe haben dieselbe Höhe und füllen die Breite. */
.ar-2-1  { --ar: 2; }        /* freunde-schnee 1080×540 */
.ar-3-2  { --ar: 1.5; }
.ar-4-3  { --ar: 1.3333; }
.ar-3-4  { --ar: 0.75; }
.ar-18-25 { --ar: 0.72; }     /* leuchtturm 1008×1400 */
.ar-7-8  { --ar: 0.8768; }    /* live-unicef 1039×1185 */
.ar-25-32 { --ar: 0.7814; }   /* mikrofon-sw 436×558 */
.ar-17-23 { --ar: 0.7385; }   /* portrait-sepia 370×501 */
.ar-5-8  { --ar: 0.625; }
.ar-43-70 { --ar: 0.6143; }   /* portrait-meer 860×1400 */
.ar-39-64 { --ar: 0.6094; }   /* fernsehturm 731×1200 */
.ar-9-16 { --ar: 0.5625; }

.gallery { display: grid; gap: var(--s-1); }
.gallery__row { display: flex; gap: var(--s-1); }
.gallery__item {
  flex: var(--ar, 1) 1 0%;
  aspect-ratio: var(--ar, 1);
  margin: 0;
  min-width: 0;
  background: var(--c-linie);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* Mobil: 2-Spalten-Raster. Hochformate paarweise (einheitlich 4:5 beschnitten),
   Querformate volle Breite (3:2). dense füllt Lücken auf. */
@media (max-width: 39.99rem) {
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .gallery__row { display: contents; }
  .gallery__item { aspect-ratio: 4 / 5; }
  .gallery__item--wide { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  /* Live-Bildreihe: eigenes 2-Spalten-Raster (liegt direkt im .grid der Sektion):
     die zwei Hochformate nebeneinander (4:5), das Querformat volle Breite */
  .live__photos.gallery__row { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
}

/* ---------- „Wir sind Idealisten“ -------------------------------------------
   Typografisches Statement auf warmer Nachtfläche (torf) – Schluss der Seite,
   danach folgt nur noch der schiefergraue Footer. */
.idealisten { background: var(--c-torf); }
.idealisten__title {
  font-size: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.idealisten__add {
  display: block;
  margin-top: 0.35em;
  font-family: var(--ff-serif);
  font-size: var(--fs-quote);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-sand);
}
.idealisten__body p { font-size: var(--fs-lead); line-height: 1.5; }
.idealisten__body p + p { margin-top: var(--s-3); }
.idealisten__mark {
  font-weight: 600;
  color: var(--c-watt);
}
.idealisten__gruss {
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-linie-torf);
  max-width: var(--measure);
}
.idealisten__gruss p { color: var(--c-watt); font-size: var(--fs-lead); }
.idealisten__gruss .idealisten__signatur {
  margin-top: var(--s-2);
  font-family: var(--ff-serif);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-watt);
}
.idealisten .grid { row-gap: var(--s-5); }
@media (min-width: 56rem) {
  .idealisten__title { grid-column: 1 / span 11; }
  .idealisten__body { grid-column: 6 / span 7; }
  .idealisten__gruss { grid-column: 6 / span 7; }
}

/* ---------- Footer ------------------------------------------------------- */
.site-footer {
  padding-block: var(--s-5);
  border-top: 1px solid var(--c-linie-dunkel);
  font-family: var(--ff-grotesk);
  font-size: var(--fs-meta);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); list-style: none; padding: 0; }
/* Rechte-Angaben: kleine, gedämpfte Zeile über die volle Breite (nebel/schiefer 6,53:1) */
.site-footer__rights {
  flex: 1 1 100%;
  max-width: none;
  color: var(--c-nebel);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.site-footer a { display: inline-block; padding-block: 0.75rem; }   /* Trefferfläche ≥ 44 px */
.site-footer a[aria-current="page"] { text-decoration-thickness: 2px; text-decoration-color: var(--c-backstein-hell); }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ----------------------- */
.legal { padding-block: var(--s-6) var(--section-y); background: var(--c-gischt); }
.legal__inner { max-width: calc(40rem + 2 * var(--gutter)); }
.legal h1 { font-size: var(--fs-h2); margin-bottom: var(--s-5); }
.legal h2 {
  font-size: var(--fs-h3);
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}
.legal h3 { font-size: var(--fs-body); margin-top: var(--s-3); margin-bottom: var(--s-1); }
.legal p, .legal li { font-size: var(--fs-ui); line-height: 1.65; }
.legal ul { padding-left: 1.25em; }
.legal li + li { margin-top: var(--s-1); }
.legal address { font-style: normal; font-size: var(--fs-ui); line-height: 1.65; }
.legal p + address, .legal address + p { margin-top: var(--s-2); }
.legal ul { margin-top: var(--s-2); }
.legal ul + p { margin-top: var(--s-2); }
.legal .meta { margin-top: var(--s-5); }
.legal a:hover { color: var(--c-backstein); }
.legal .back { margin-top: var(--s-6); font-family: var(--ff-grotesk); }

/* Platzhalter für fehlende Angaben — bewusst auffällig */
.offen {
  display: inline;
  padding: 0.05em 0.35em;
  background: #F6E3DE;               /* Backstein-Tönung, Kontrast zu --c-backstein 5,56:1 */
  color: var(--c-backstein);
  outline: 1px dashed var(--c-backstein);
  font-family: var(--ff-grotesk);
  font-weight: 600;
  font-size: 0.9em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Druck -------------------------------------------------------- */
@media print {
  .site-header, .video__play, .video__notice { display: none; }
  .is-dark { background: #fff; color: #000; }
}