@import url('fonts.css');

/* ==========================================================================
   Feuerwehrkapelle Pfohren e.V. — Stylesheet
   Alle Werte stammen aus dem Design-Handoff (README + Prototyp).
   Grundcharakter: rechtwinklig, ohne Radien, ohne Schatten, ohne Bewegung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Farben */
  --ink:          #14181f;   /* Text, Kopfzeile, dunkle Sektionen */
  --ink-soft:     #232a35;   /* zweite dunkle Flaeche */
  --ink-field:    #1b212b;   /* Formularfelder auf dunklem Grund */
  --paper:        #e7e2d6;   /* Seitenhintergrund */
  --paper-warm:   #dad4c4;   /* zweite helle Flaeche, Fusszeile, Infokaesten */
  --paper-card:   #eae5da;   /* Kartenflaechen */
  --paper-field:  #f1ede2;   /* Formularfelder auf hellem Grund */
  --cream:        #f3efe4;   /* Text auf dunklem Grund */
  --brass:        #b08a4e;   /* Primaerakzent */
  --brass-light:  #cba86c;   /* Auszeichnungszeilen auf dunkel */
  --brass-bright: #e9c68d;   /* Auszeichnungszeilen ueber Fotos */
  --rust:         #9c3b2e;   /* Auszeichnungszeilen auf hell, Links */
  --moss:         #55624f;   /* dritter Akzent, sparsam */

  /* Linien und Rahmen */
  --line-15:  rgba(20, 24, 31, .15);
  --line-18:  rgba(20, 24, 31, .18);
  --line-20:  rgba(20, 24, 31, .2);
  --line-25:  rgba(20, 24, 31, .25);
  --line-d12: rgba(243, 239, 228, .12);
  --line-d14: rgba(243, 239, 228, .14);
  --line-d18: rgba(243, 239, 228, .18);
  --line-d25: rgba(243, 239, 228, .25);
  --line-d45: rgba(243, 239, 228, .45);

  /* Textabschwaechung auf dunkel */
  --cream-65: rgba(243, 239, 228, .65);
  --cream-78: rgba(243, 239, 228, .78);
  --cream-80: rgba(243, 239, 228, .8);
  --cream-82: rgba(243, 239, 228, .82);
  --cream-85: rgba(243, 239, 228, .85);

  /* Schriftfamilien */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Abstaende */
  --pad-section: clamp(56px, 7vw, 90px);
  --pad-head:    clamp(48px, 6vw, 80px);
  --pad-small:   clamp(40px, 5vw, 64px);
  --pad-x:       6%;
  --gap-col:     clamp(32px, 5vw, 64px);

  /* gestreifte Bildplatzhalter */
  --ph-light: repeating-linear-gradient(135deg, #d8d2c2 0 10px, #cec7b4 10px 20px);
  --ph-dark:  repeating-linear-gradient(135deg, #2b3341 0 10px, #242c39 10px 20px);
}

/* --------------------------------------------------------------------------
   2. Reset und Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  /* Bewusst KEIN overflow-x: hidden — das macht den Body zum Scroll-Container
     und nimmt der sticky Kopfzeile ihren Bezug (AENDERUNGEN.md). Gegen
     horizontales Scrollen helfen die min(100%, Npx)-Raster, nicht ein Deckel. */
}

a { color: var(--rust); text-decoration: none; }
a:hover { color: var(--brass); }

/* height:auto ist noetig, nicht kosmetisch: picture() schreibt width- und
   height-Attribute ins <img> (gegen Layoutspruenge). Diese Attribute wirken
   als CSS-Hoehe — ohne height:auto bleibt ein Bild auf seiner Pixelhoehe
   stehen und wird gestaucht, sobald die Breite kleiner wird oder ein
   aspect-ratio greifen soll. Alle Regeln, die eine feste Bildhoehe brauchen,
   setzen sie selbst und gewinnen ueber ihre hoehere Spezifitaet. */
img { max-width: 100%; height: auto; display: block; }

input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }

/* Sichtbarer Fokus fuer Tastaturbedienung — im Prototyp nicht gestaltet,
   fuer Barrierefreiheit aber noetig. Bewusst rechtwinklig. */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Sprungmarke fuer Screenreader und Tastatur */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; padding: 12px 18px;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   3. Sektionen und Flaechen
   -------------------------------------------------------------------------- */
.section       { padding: var(--pad-section) var(--pad-x); }
.section--sm   { padding: var(--pad-small) var(--pad-x); }
.section--mid  { padding: clamp(40px, 5vw, 72px) var(--pad-x); }

.on-ink      { background: var(--ink);        color: var(--cream); }
.on-ink-soft { background: var(--ink-soft);   color: var(--cream); }
.on-paper    { background: var(--paper);      color: var(--ink); }
.on-warm     { background: var(--paper-warm); color: var(--ink); }

.measure { max-width: 900px; }

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.05;
}
.h1 { font-weight: 600; font-size: clamp(32px, 5vw, 68px); max-width: 18ch; }
.h1--hero  { font-size: clamp(38px, 6.4vw, 92px); max-width: 14ch; }
.h1--legal { font-size: clamp(30px, 4.4vw, 58px); max-width: 20ch; }

.h2 { font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); max-width: 13ch; }
.h2--wide  { max-width: 22ch; }
.h2--mid   { font-size: clamp(26px, 3vw, 40px); max-width: 18ch; }
.h2--cta   { font-size: clamp(30px, 5vw, 64px); max-width: 16ch; margin: 0 auto; }
.h2--legal { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; max-width: none;
             margin-bottom: 14px; }

/* Weight 700, nicht 400: Im Prototyp setzen die <h3>-Elemente kein
   font-weight und rendern darum im Browser-Standard fett. Die Screenshots
   zeigen sie eindeutig fett — sie sind die verbindliche Referenz.
   (Das README nennt an dieser Stelle 400.) */
.h3     { font-weight: 700; font-size: 21px; line-height: 1.15; }
.h3--lg { font-size: 22px; }
.h3--sm { font-size: 19px; }

.lead { font-size: 18px; max-width: 48ch; margin-top: 20px; text-wrap: pretty; }
.lead--hero { max-width: 44ch; margin-top: 22px; }

.body-text { font-size: 16.5px; opacity: .85; text-wrap: pretty; }
.small-text { font-size: 15.5px; opacity: .8; }

.on-ink .lead, .on-ink-soft .lead, .page-head .lead { color: var(--cream-85); opacity: 1; }
.on-ink .body-text, .on-ink-soft .body-text { color: var(--cream-78); opacity: 1; }
.on-ink .small-text, .on-ink-soft .small-text { color: var(--cream-78); opacity: 1; }

/* --------------------------------------------------------------------------
   5. Auszeichnungszeile („Eyebrow")
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  /* 16px, einheitlich auf allen Seiten — es gibt keine Ausnahme mehr
     (AENDERUNGEN.md). Deshalb auch kein Modifikator dafuer. */
  font-size: 16px; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.eyebrow--center { justify-content: center; }

/* Traegt die Zeile ein Glyph, entfaellt der Punkt — sonst stuenden beide
   nebeneinander. Nur die Instagram-Zeile der Startseite nutzt das. */
.eyebrow--icon::before { content: none; }
.eyebrow .ig-glyph { flex: 0 0 auto; display: block; }

.eyebrow--light { color: var(--rust); }         /* auf hellem Grund */
.eyebrow--dark  { color: var(--brass-light); }  /* auf dunklem Grund */
.eyebrow--photo {                               /* ueber Fotos */
  color: var(--brass-bright);
  text-shadow: 0 1px 3px rgba(20, 24, 31, .9);
}
.eyebrow--moss  { color: var(--moss); }

.eyebrow a {
  color: inherit;
  border-bottom: 1px solid var(--brass); padding-bottom: 2px;
}
.eyebrow a:hover { color: var(--brass-light); }

/* --------------------------------------------------------------------------
   6. Notenlinien-Trenner
   -------------------------------------------------------------------------- */
.stave { position: relative; width: 100%; height: 44px; }
.stave__lines {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6px 0;
}
.stave__lines span { height: 1px; background: currentColor; opacity: .35; }
.stave__note {
  position: absolute; top: 50%; left: 6%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brass);
  /* der Ring stanzt den Punkt aus den Linien frei */
  box-shadow: 0 0 0 4px var(--stave-bg);
}
.stave--ink   { color: var(--cream); background: var(--ink);        --stave-bg: #14181f; }
.stave--paper { color: var(--ink);   background: var(--paper);      --stave-bg: #e7e2d6; }
.stave--warm  { color: var(--ink);   background: var(--paper-warm); --stave-bg: #dad4c4; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; font-size: 15px;
  padding: 18px 30px;
  border: 0; cursor: pointer;
  /* kein Radius, kein Schatten, kein Farbwechsel bei Hover */
}
.btn__arrow { font-family: var(--font-mono); }

.btn--primary       { background: var(--brass); color: var(--ink); }
.btn--primary:hover { color: var(--ink); }
.btn--secondary       { background: transparent; color: var(--cream);
                        border: 1px solid var(--line-d45); }
.btn--secondary:hover { color: var(--cream); }
/* Umriss-Variante fuer helle Flaechen — .btn--secondary ist auf dunklem Grund */
.btn--outline       { background: transparent; color: var(--ink);
                      border: 1px solid var(--line-25); }
.btn--outline:hover { color: var(--ink); }
.btn--md   { padding: 16px 28px; }
.btn--wide { padding: 18px 32px; }

.btn-link {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: inherit;
  border-bottom: 1px solid var(--brass); padding-bottom: 3px;
  width: fit-content;
}
.btn-link:hover { color: var(--brass-light); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --------------------------------------------------------------------------
   8. Raster — Standardmuster aus dem README
   min(100%, Npx) verhindert Overflow auf schmalen Screens
   -------------------------------------------------------------------------- */
.grid { display: grid; }
.grid--180 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.grid--190 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.grid--200 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.grid--220 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--340 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--440 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }

.gap-14 { gap: 14px; }
.gap-18 { gap: 18px; }
.gap-24 { gap: 24px; }
.gap-26 { gap: 26px; }
.gap-col { gap: var(--gap-col); }

/* Rasterlinien-Optik: 1px-Fugen statt Rahmen */
.grid--hairline { gap: 1px; }
.grid--hairline.on-light-lines { background: var(--line-18); }
.grid--hairline.on-dark-lines  { background: var(--line-d18); }

/* Zweispaltiger Bild-Text-Block */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.split__text {
  padding: var(--pad-section) var(--pad-x);
  display: flex; flex-direction: column; justify-content: center;
}
.split__media { min-height: 52vh; position: relative; overflow: hidden; }
.split__media--46 { min-height: 46vh; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   9. Seitenkopf
   -------------------------------------------------------------------------- */
.page-head {
  /* isolation: der innere z-index:2-Layer bleibt in der Sektion und bricht
     nicht ueber das Klappmenue der Kopfzeile aus (AENDERUNGEN.md). */
  isolation: isolate;
  position: relative;
  min-height: min(56vh, 520px);
  display: flex; align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
}
.page-head__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.page-head::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(20, 24, 31, .55) 0%,
    rgba(20, 24, 31, .6) 40%,
    rgba(20, 24, 31, .86) 100%);
}
.page-head__inner {
  position: relative; z-index: 2;
  padding: var(--pad-head) var(--pad-x);
  width: 100%;
}

/* Startseiten-Hero — abweichende Hoehe, Verlauf und Padding */
.page-head--hero { min-height: min(88vh, 780px); }
.page-head--hero::before {
  background: linear-gradient(180deg,
    rgba(20, 24, 31, .4) 0%,
    rgba(20, 24, 31, .42) 40%,
    rgba(20, 24, 31, .88) 100%);
}
.page-head--hero .page-head__inner { padding: 60px 5% 64px; }

/* Nachwuchs-CTA — zentriert, eigener Verlauf */
.page-head--cta {
  min-height: min(82vh, 720px);
  align-items: center; justify-content: center; text-align: center;
}
.page-head--cta::before {
  background: linear-gradient(180deg, rgba(20, 24, 31, .42), rgba(20, 24, 31, .9));
}
.page-head--cta .page-head__inner { padding: 80px 6%; }
.page-head--cta .lead { margin: 22px auto 0; max-width: 42ch; }
.page-head--cta .btn { margin-top: 38px; }

/* Rechtsseiten: dunkler Kopf ohne Foto */
.page-head--legal {
  background: var(--ink); color: var(--cream);
  min-height: 0; display: block;
  padding: clamp(56px, 7vw, 96px) var(--pad-x) clamp(44px, 5vw, 64px);
}

/* Kopf mit abweichendem Bildausschnitt */
/* --------------------------------------------------------------------------
   Bildausschnitt der Seitenköpfe

   Der Kopf ist auf dem Desktop ein sehr breiter Streifen (1920x520 = 3,7:1),
   die Fotos sind aber 1,5:1 bis 1,8:1. Vom Bild bleiben senkrecht also nur
   40 bis 48 Prozent übrig — bei head-jugend (Hochformat) sogar nur 19.
   Ohne Steuerung schneidet der Browser mittig, und die Gesichter liegen
   je nach Aufnahme darüber oder darunter.

   Der Prozentwert sagt, welcher Punkt des Bildes erhalten bleibt:
   0 % = oberer Rand, 100 % = unterer Rand.

   Auf schmalen Screens (Hochformat, ca. 0,8:1) dreht sich das um: dort
   bleibt die volle Höhe stehen und es wird seitlich beschnitten. Der
   senkrechte Wert ist dann wirkungslos, der waagerechte zählt.

   Umgekehrt gilt auf dem Desktop: die volle Breite ist ohnehin zu sehen,
   der waagerechte Wert wirkt dort also nicht. Beide Werte lassen sich
   deshalb unabhängig voneinander einstellen — der senkrechte für den
   Desktop, der waagerechte fürs Handy. Bei head-passiv und head-kontakt
   sitzt das Motiv rechts der Mitte, darum dort kein 50 %.
   -------------------------------------------------------------------------- */
.page-head__img--wer       { object-position: 50% 42%; }
.page-head__img--chronik   { object-position: 50% 10%; }  /* Köpfe weit oben */
.page-head__img--register  { object-position: 50% 62%; }
.page-head__img--jugend    { object-position: 50% 52%; }  /* nur 19 % sichtbar */
.page-head__img--vorstand  { object-position: 50%  8%; }  /* zwei Reihen, obere zuerst */
.page-head__img--termine   { object-position: 50%  5%; }
.page-head__img--mitglied  { object-position: 50% 55%; }
.page-head__img--passiv    { object-position: 65% 80%; }  /* Floß unten rechts */
.page-head__img--aktiv     { object-position: 50% 12%; }
.page-head__img--kontakt   { object-position: 58% 62%; }
.page-head__img--hero      { object-position: 50% 45%; }
.page-head__img--cta       { object-position: 50% 65%; }

/* --------------------------------------------------------------------------
   10. Zitatband
   -------------------------------------------------------------------------- */
.quote {
  background: var(--ink); color: var(--brass-light);
  padding: clamp(48px, 6vw, 64px) var(--pad-x);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing: .01em; text-align: center; line-height: 1.25;
}
.quote span { color: var(--cream); opacity: .5; }

/* --------------------------------------------------------------------------
   11. Bildplatzhalter (fehlendes Material vom Verein)
   -------------------------------------------------------------------------- */
/* Anfahrtskarte, Zwei-Klick-Loesung.
   Die Vorschauflaeche hat dieselbe Hoehe wie der spaetere iFrame, damit beim
   Nachladen nichts springt. */
.karte {
  border: 1px solid var(--line-20);
  background: var(--paper-card);
}
.karte iframe { width: 100%; height: 280px; border: 0; display: block; }
/* Gestreifte, zentrierte Vorschau wie in screenshots/11-kontakt.jpg */
.karte__vorschau {
  min-height: 240px; background: var(--ph-light);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 16px; padding: 34px 26px;
}
.karte__text { font-size: 15.5px; opacity: .85; max-width: 36ch; text-wrap: pretty; }
.karte__extern {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--rust); border-bottom: 1px solid var(--brass); padding-bottom: 2px;
}
.karte__hinweis {
  padding: 14px 16px; background: var(--paper-warm);
  border: 1px solid var(--line-20); border-top: 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; line-height: 1.8; opacity: .7;
}

/* Instagram-Kacheln: Rahmen mit hellem Passepartout und Handle darunter.
   Macht die Kacheln als fremde Inhalte lesbar (AENDERUNGEN.md, Überarbeitung 2).
   Die Optik gilt auch dann, wenn hier später ein Widget steht. */
.ig-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line-20); background: var(--paper-field);
  padding: 10px;
}
.ig-card__media { aspect-ratio: 1 / 1; overflow: hidden; }
.ig-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ig-card__handle {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); opacity: .6;
}
/* Der Platzhalter bringt sein eigenes Quadrat mit, braucht also kein
   zusätzliches .ig-card__media. */
.ig-card .ph--sq { width: 100%; }

/* Quellenangabe unter den Instagram-Kacheln — bewusst zurückhaltend */
.quelle {
  margin-top: 20px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; opacity: .55;
}
.quelle a { color: inherit; border-bottom: 1px solid var(--brass); padding-bottom: 1px; }
.quelle a:hover { color: var(--rust); }

/* Archivbild der Chronik.

   Der Entwurf verlangt ein vollbreites Bild. Die Aufnahme ist aber 4:3 und
   zeigt drei Reihen Musiker — ein flacher Streifen würde ihnen die Köpfe
   abschneiden. Das feste Verhältnis 2:1 lässt genau zwei Drittel der
   Bildhöhe stehen; `object-position` schiebt diesen Ausschnitt auf die
   Gruppe statt auf den Schnee davor.

   Unter 900px wird das Verhältnis aufgehoben: auf dem Handy wäre ein
   Ausschnitt sinnlos, dort ist das ganze Bild besser. */
.archiv { margin: 0; }
.archiv__img {
  width: 100%; height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 33%;
  display: block;
}
.archiv figcaption {
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .65;
}
@media (max-width: 900px) {
  .archiv__img { aspect-ratio: auto; height: auto; }
}

/* Ensemblekarte auf der Bläserjugend-Seite.
   Die Logos behalten ihre eigenen Farben — eigenstaendige Marken. */
.ensemble {
  background: var(--paper);
  border: 1px solid var(--line-18);
  padding: 34px 30px;
  display: flex; flex-direction: column;
}
.ensemble__logo {
  height: 140px; width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
  align-self: flex-start;
}
.ensemble .h3 { margin-top: 26px; font-size: 22px; }
.ensemble p { margin-top: 12px; font-size: 15.5px; opacity: .85; text-wrap: pretty; }

/* Bild mit Unterschrift — feste Bildhoehe wie im Entwurf, Text darunter */
.figure { margin: 0; }
.figure__media { width: 100%; height: 300px; object-fit: cover; }
.figure figcaption {
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .65;
}

.ph {
  background: var(--ph-light);
  display: flex; align-items: flex-end; padding: 16px;
}
.ph--dark { background: var(--ph-dark); }
.ph__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(20, 24, 31, .6); color: var(--cream);
  padding: 8px 12px;
}
/* Auf dunklem Grund bekommt die Beschriftung einen feinen Rahmen,
   sonst verschwindet sie im gestreiften Muster. */
.ph--dark .ph__label { border: 1px solid rgba(243, 239, 228, .3); }
.ph--sq { aspect-ratio: 1 / 1; padding: 12px; }
.ph--sq .ph__label { font-size: 10px; letter-spacing: .1em; padding: 6px 9px; }
.ph-note {
  margin-top: 20px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; opacity: .6;
}

/* --------------------------------------------------------------------------
   12. Kopfzeile
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 20px 5%;
  background: var(--ink); color: var(--cream);
  border-bottom: 1px solid var(--line-d12);
}
.brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .02em; font-size: 15px; text-transform: uppercase;
  color: var(--cream);
}
.brand:hover { color: var(--cream); }
/* freigestelltes Emblem — bewusst ohne weissen Kreis dahinter */
.brand img { width: 42px; height: 42px; object-fit: contain; flex: none; }

.nav {
  display: flex; align-items: center; gap: 30px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.nav a, .nav button { color: var(--cream); }
.nav__item { position: relative; padding: 10px 0; }
.nav__link {
  display: flex; align-items: center; gap: 7px;
  opacity: .85; background: none; border: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 0;
}
.nav__link:hover { color: var(--cream); }
.nav__caret { color: var(--brass-light); font-size: 9px; }
/* aktive Seite dezent markieren */
.nav__link[aria-current="page"],
.nav__item--active > .nav__link { opacity: 1; border-bottom: 1px solid var(--brass); }

.nav__cta {
  background: var(--brass); color: var(--ink);
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .06em; padding: 11px 18px;
}
.nav__cta:hover { color: var(--ink); }

.dropdown {
  position: absolute; z-index: 60; top: 100%; left: -18px;
  min-width: 230px;
  background: var(--ink-soft);
  border: 1px solid var(--line-d14);
  border-top: 2px solid var(--brass);
  padding: 10px 0;
  display: none; flex-direction: column;
}
.dropdown--wide { min-width: 280px; }
.nav__item--open .dropdown { display: flex; animation: fade 140ms ease-out; }
/* Hover oeffnet zusaetzlich rein ueber CSS. Noetig, weil nach einem
   Seitenwechsel kein Zeigerereignis mehr kommt, wenn der Zeiger schon
   ueber der Kopfzeile steht — das Menue bliebe sonst haengen. */
@media (hover: hover) {
  [data-dropdown]:hover .dropdown { display: flex; }
}
.dropdown a { padding: 11px 18px; opacity: .85; color: var(--cream); }
.dropdown a:hover { opacity: 1; color: var(--cream); }
.dropdown a[aria-current="page"] { opacity: 1; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Burger */
.burger {
  display: none; flex-direction: column; gap: 5px;
  padding: 10px; flex: none;
  background: none; border: 0; cursor: pointer;
}
.burger span { display: block; width: 26px; height: 1.5px; background: var(--cream); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 49;
  background: var(--ink); color: var(--cream);
  padding: 96px 8% 40px;
  overflow-y: auto;
  display: none;
}
.mobile-nav[data-open="true"] { display: block; animation: fade 140ms ease-out; }
.mobile-nav__list {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 22px; letter-spacing: .02em;
}
.mobile-nav__list a {
  color: var(--cream);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-d12);
  min-height: 44px;               /* Tippflaeche */
  display: flex; align-items: center;
}
.mobile-nav__list a.is-sub { font-size: 19px; padding: 12px 0; }
.mobile-nav__list a.is-deep {
  font-size: 16px; padding: 12px 0 12px 20px; opacity: .8;
}
.mobile-nav__group {
  font-family: var(--font-mono); font-size: 16px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-light); padding: 26px 0 10px;
}
/* der erste Gruppentitel steht direkt oben — kein Vorabstand noetig */
.mobile-nav__list > .mobile-nav__group:first-child { padding-top: 8px; }
.mobile-nav__close {
  margin-top: 34px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass-light);
  background: none; border: 0; cursor: pointer; padding: 0;
}

/* Umbruch bei 900px: Navigation weicht dem Burger */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
}
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   13. Fusszeile
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--paper-warm);
  padding: clamp(48px, 6vw, 70px) var(--pad-x) 40px;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 30px;
}
.site-footer__col { display: flex; flex-direction: column; gap: 9px; }
.site-footer__head {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rust); margin-bottom: 6px;
}
.site-footer__col a, .site-footer__col span { font-size: 15.5px; opacity: .8; }
.site-footer__col a { color: var(--ink); }
.site-footer__col a:hover { color: var(--brass); }
.site-footer__mail {
  border-bottom: 1px solid var(--brass); padding-bottom: 2px;
  align-self: flex-start; width: fit-content; max-width: 100%;
  white-space: nowrap; margin-top: 5px;
}
.site-footer__bottom {
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid var(--line-15);
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  opacity: .6;
}
.site-footer__legal { display: flex; gap: 18px; }
.site-footer__legal a { color: var(--ink); }

/* --------------------------------------------------------------------------
   14. Nummerierte Karten (Rasterlinien-Optik)
   -------------------------------------------------------------------------- */
.num-card { padding: 34px 28px; }
.num-card__num {
  font-family: var(--font-mono); font-size: 20px; letter-spacing: .14em;
  color: var(--brass-light); margin-bottom: 16px;
}
.num-card p { margin-top: 12px; font-size: 15.5px; text-wrap: pretty; }
.on-ink-soft .num-card { background: var(--ink-soft); }
.on-ink-soft .num-card p { color: var(--cream-78); }

/* Bläserjugend: Weg zum Instrument — grosse Messing-Ziffern auf hell */
.step-card { background: var(--paper); padding: 30px 26px; }
.step-card__num {
  font-family: var(--font-display); font-size: 38px; line-height: 1;
  color: var(--brass);
}
.step-card h3 { margin-top: 16px; }
.step-card p { margin-top: 10px; font-size: 15.5px; opacity: .85; text-wrap: pretty; }

/* Aktiv-Seite: Infokarten mit Rust-Label */
.info-card { background: var(--paper); padding: 32px 26px; }
.info-card__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust); margin-bottom: 14px;
}
.info-card p { margin-top: 10px; font-size: 15.5px; opacity: .85; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   15. Chronik-Zeitleiste
   Flex mit flex-wrap, damit die Zeile auf Telefonen sauber umbricht
   -------------------------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; }
.timeline__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px 40px;
  padding: 30px 0;
  border-top: 1px solid var(--line-18);
}
.timeline__row:last-child { border-bottom: 1px solid var(--line-18); }
.timeline__year {
  font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1; color: var(--rust);
  flex: 0 0 auto; min-width: 110px;
}
.timeline__body h3 { font-size: 20px; }
.timeline__body p {
  margin-top: 10px; max-width: 56ch; font-size: 16px; opacity: .85;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   16. Registerkarten
   -------------------------------------------------------------------------- */
.reg-card { border: 1px solid var(--line-18); background: var(--paper-card); }
.reg-card__media { height: 210px; position: relative; overflow: hidden; }
.reg-card__media img { width: 100%; height: 100%; object-fit: cover; }
.reg-card__body { padding: 24px 22px 28px; }
.reg-card__body p { margin-top: 10px; font-size: 15.5px; opacity: .85; text-wrap: pretty; }
/* Der zweite Absatz nimmt Bezug auf das Foto — etwas mehr Luft davor */
.reg-card__body p + p { margin-top: 14px; }

/* --------------------------------------------------------------------------
   17. Terminzeilen
   -------------------------------------------------------------------------- */
.termine { display: flex; flex-direction: column; }
.termin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px 30px; align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--line-18);
}
.termin__date { font-family: var(--font-display); font-size: 26px; line-height: 1; }
/* Uhrzeit auf 14px statt der 11px des Entwurfs: auf Wunsch des
   Auftraggebers (10.09.2026), die Zeile war zu klein zum Lesen. */
.termin__time {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: .12em;
  opacity: .65; margin-top: 6px;
}
.termin__title { font-size: 21px; }
.termin__text { margin-top: 6px; font-size: 15.5px; opacity: .8; }
.termin__place { font-size: 15.5px; opacity: .8; }
.termine__end { border-top: 1px solid var(--line-18); }
.termine__note {
  margin-top: 30px; font-size: 15.5px; opacity: .7; max-width: 52ch;
  text-wrap: pretty;
}

/* Kurzliste auf der Startseite */
.termin--compact {
  gap: 12px 30px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--line-15);
}
/* Datum und Uhrzeit auf 15px statt der 12px des Entwurfs, gleiche
   Entscheidung wie bei .termin__time (10.09.2026). */
.termin--compact .termin__meta {
  font-family: var(--font-mono); font-size: 15px; letter-spacing: .1em;
  color: var(--rust);
}
.termin--compact .termin__title {
  font-family: var(--font-display); text-transform: uppercase; font-size: 20px;
}
.termin--compact .termin__place { opacity: .75; }

/* Kopfzeile einer Sektion mit Textlink rechts */
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 20px; margin-bottom: 34px;
}

/* --------------------------------------------------------------------------
   18. CTA-Band
   -------------------------------------------------------------------------- */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px;
  padding: clamp(48px, 6vw, 72px) var(--pad-x);
}
.cta-band--sm { padding: clamp(40px, 5vw, 64px) var(--pad-x); gap: 22px; }
.cta-band h3 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; max-width: 24ch;
}
.cta-band--sm h3 { font-size: clamp(20px, 2.4vw, 28px); max-width: 26ch; }
.cta-band p {
  margin-top: 14px; max-width: 44ch; color: var(--cream-78); text-wrap: pretty;
}
.cta-band--sm p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   19. Ämterliste (Vorstandschaft)
   -------------------------------------------------------------------------- */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0 clamp(30px, 5vw, 70px);
}
.roster__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-18);
}
.roster__role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust);
  flex: 0 0 auto; min-width: 150px;
}
.roster__name {
  font-family: var(--font-display); text-transform: uppercase; font-size: 19px;
  flex: 1 1 auto; overflow-wrap: break-word;
}
.roster__note { margin-top: 34px; font-size: 16px; opacity: .8; max-width: 56ch; text-wrap: pretty; }

/* Infoband mit Moss-Labels */
.note-band__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--moss); margin-bottom: 12px;
}
.note-band p { font-size: 16px; opacity: .85; max-width: 40ch; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   20. Mitgliedschaftskarten
   -------------------------------------------------------------------------- */
.plan { border: 1px solid var(--line-20); display: flex; flex-direction: column; }
.plan--dark { background: var(--ink-soft); color: var(--cream); }
/* Kein .plan__media mehr — die Karten der Mitgliedschafts-Uebersicht
   beginnen ohne Bild direkt mit Label und Ueberschrift (AENDERUNGEN.md). */
.plan__body { padding: 30px 28px 34px; display: flex; flex-direction: column; flex: 1; }
.plan__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--moss);
}
.plan--dark .plan__label { color: var(--brass-light); }
.plan__body h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 700;   /* wie im Prototyp: kein font-weight gesetzt -> fett */
  font-size: clamp(24px, 2.6vw, 32px); margin-top: 14px; line-height: 1.1;
}
.plan__body > p { margin-top: 14px; font-size: 16px; opacity: .85; text-wrap: pretty; }
.plan--dark .plan__body > p { opacity: 1; color: var(--cream-80); }
.plan__list {
  display: flex; flex-direction: column; gap: 9px; margin-top: 22px;
  font-size: 15.5px; opacity: .85;
}
.plan--dark .plan__list { opacity: 1; color: var(--cream-80); }
.plan__body .btn { align-self: flex-start; margin-top: 30px; }

/* --------------------------------------------------------------------------
   21. Formulare
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 20px; }
.form--tight { gap: 18px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .7;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--paper-field);
  border: 1px solid var(--line-25);
  /* kein Radius */
}
.field textarea { resize: vertical; }
.field input[type="text"].is-iban {
  font-family: var(--font-mono); font-size: 15px;
}

/* Felder auf dunklem Grund */
.form--dark .field__label { opacity: 1; color: var(--cream-65); }
.form--dark .field input,
.form--dark .field select,
.form--dark .field textarea {
  background: var(--ink-field);
  border: 1px solid var(--line-d25);
  color: var(--cream);
}

/* Feldpaare */
.field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 20px;
}
.field-pair--140 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.field-pair--170 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 18px; }

/* Checkbox */
.check {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; opacity: .85;
}
.check input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
/* Link in der Checkbox-Zeile: liegt ausserhalb des <label>, damit ein Klick
   darauf die Checkbox nicht mitschaltet. */
.check__link { color: var(--rust); border-bottom: 1px solid var(--brass); padding-bottom: 1px; }
.check__link:hover { color: var(--rust); border-bottom-color: var(--rust); }

/* SEPA-Mandatskasten — heller Kasten vor den Checkboxen */
.mandat {
  border: 1px solid var(--line-25);
  background: #ece7dc;
  padding: 22px 20px;
}
.mandat__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust); margin-bottom: 12px;
}
.mandat p { font-size: 15px; opacity: .85; text-wrap: pretty; }
.mandat p + p { margin-top: 12px; }
.mandat__meta {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-18);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; line-height: 1.9; opacity: .7;
  overflow-wrap: anywhere;
}

/* Fehlermeldung direkt am Feld */
.field--error input, .field--error select, .field--error textarea,
.check--error input { border-color: var(--rust); }
.field__error, .check__error {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rust);
}
.form--dark .field__error, .form--dark .check__error { color: var(--brass-bright); }

/* Honeypot — für Menschen unsichtbar, für Bots ein Köder */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form .btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   22. Bestätigungs- und Fehlerkasten
   -------------------------------------------------------------------------- */
.notice {
  border: 1px solid var(--moss);
  background: #e2e0d0;
  padding: 34px 30px;
  margin-bottom: 24px;
}
.notice:focus { outline: 2px solid var(--brass); outline-offset: 2px; }
.notice__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--moss);
}
.notice h3 { font-size: 24px; margin-top: 14px; }
.notice p { margin-top: 12px; font-size: 16px; opacity: .85; max-width: 44ch; text-wrap: pretty; }
.notice--sm { padding: 30px 28px; }
.notice--sm h3 { font-size: 22px; margin-top: 12px; }
.notice--sm p { margin-top: 10px; font-size: 15.5px; max-width: 42ch; }

/* Bestätigung auf dunklem Grund */
.notice--dark {
  border: 1px solid var(--brass-light);
  background: transparent;
  padding: 30px 28px;
}
.notice--dark .notice__label { color: var(--brass-light); }
.notice--dark p { color: var(--cream-80); opacity: 1; max-width: 40ch; }

/* Fehlerkasten */
.notice--error { border-color: var(--rust); background: #e6dcd6; }
.notice--error .notice__label { color: var(--rust); }

/* --------------------------------------------------------------------------
   23. Infokästen (Aside)
   -------------------------------------------------------------------------- */
.aside-box { background: var(--paper-warm); padding: 34px 30px; }
.aside-box--sm { padding: 30px 28px; }
.aside-box__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rust); margin-bottom: 18px;
}
.aside-box__label--moss { color: var(--moss); }
.aside-box__list {
  display: flex; flex-direction: column; gap: 22px;
  font-size: 15.5px; opacity: .88;
}
.aside-box__list p { text-wrap: pretty; }
.aside-box__list strong {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  display: block; margin-bottom: 5px;
}
.aside-box__address {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line-20);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em;
  line-height: 1.9;
}
.aside-box p { font-size: 16px; opacity: .85; max-width: 40ch; text-wrap: pretty; }
.aside-box__mail {
  display: inline-block; margin-top: 18px;
  font-family: var(--font-display); text-transform: uppercase; font-size: 20px;
  color: var(--ink);
  border-bottom: 1px solid var(--brass); padding-bottom: 3px;
}
.aside-box__lines { font-size: 16px; line-height: 1.8; opacity: 1; max-width: none; }
.aside-box__meta {
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; opacity: .7;
}
.aside-box__split {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-20);
}
.aside-col { display: flex; flex-direction: column; gap: 24px; }

/* Kontaktzeile auf dunkel (Aktiv-Seite) */
.contact-lines {
  margin-top: 30px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  line-height: 2; color: rgba(243, 239, 228, .7);
}

/* --------------------------------------------------------------------------
   24. Rechtsseiten
   -------------------------------------------------------------------------- */
.legal { display: flex; flex-direction: column; gap: 36px; max-width: 900px; }
.legal__text { font-size: 16px; opacity: .85; max-width: 70ch; text-wrap: pretty; }