/* ============================================================
 * main.css — Förderverein Elsterschloss-Gymnasium e.V.
 * Mobile-First. Klassennamen nach BEM-light.
 * ============================================================ */

/* --- 1. Custom Properties ---------------------------------- */

:root {
  --color-bg: #D96846;
  --color-bg-content: #FFFFFF;
  --color-bg-dark: #2F3022;
  --color-menu: #D96846;
  --color-menu-selected: #2F3022;
  --color-text: #000000;
  --color-text-light: #FFFFFF;
  --color-border: #DADADA;

  --font-sans: 'Helvetica', 'Arial', sans-serif;
  --content-max-width: 65em;
  --menu-width: 12em;
  --sticky-bar-height: 48px;
}

/* --- 2. Reset / Base --------------------------------------- */

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

html { font-family: var(--font-sans); font-size: 100%; line-height: 1.35; }
body { margin: 0; background: var(--color-bg-content); color: var(--color-text); }

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

/* address: HTML5-Default ist italic; Original-Anschrift war komplett fett, nicht kursiv. */
address {
  font-style: normal;
  font-weight: bold;
  padding-bottom: 1em;
}

/* dezente Trennlinie wie im Original (style.css: hr 1px #DADADA, width 66%) */
hr {
  border: 0;
  border-top: 1px solid #DADADA;
  height: 1px;
  width: 66%;
  margin: 0.3em auto 1em;
}

/* --- 3. Typografie ----------------------------------------- */

h1, h2, h3 { margin: 0; }
h1, h2 { font-weight: normal; }
h3 {
  font-size: 1em;
  font-weight: bold;
  padding: 0.7em 0;
}
/* Italic-Variante: gleiche Größe, italic statt bold, nur padding unten */
h3.subheading-italic {
  font-weight: normal;
  font-style: italic;
  padding-top: 0;
}
/* Plain-Variante: regulär (nicht fett), nur padding unten */
h3.subheading-plain {
  font-weight: normal;
  padding-top: 0;
  line-height: 1.8;
}
p { margin: 0; padding-bottom: 0.7em; }
ul { margin: 0; padding-left: 2.5em; padding-bottom: 0.7em; }
li { padding-bottom: 0.25em; }

a { color: var(--color-text); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-bg); outline-offset: 2px; }

/* --- 4. Layout --------------------------------------------- */

.site-wrapper {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.layout {
  margin: 1em;
}

.layout-content {
  padding: 0 1em;
}

.page-header {
  margin: 1em;
  background: var(--color-bg);
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.page-title {
  color: var(--color-text-light);
  font-size: clamp(2em, 8vw, 4.3em);
  letter-spacing: 0.04em;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  transition: font-size 0.2s ease;
}

.page-footer {
  margin: 1em;
  padding: 1em 0;
  text-align: center;
  font-size: 0.875em;
}

/* --- 5. Komponenten ---------------------------------------- */

/* 5.1 Burger-Button (nur Mobile sichtbar) */
.burger {
  display: none;
  background: transparent;
  border: 0;
  color: var(--color-text-light);
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.burger-icon,
.burger-icon::before,
.burger-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 24px;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%);
}
.burger-icon { top: 50%; transform: translate(-50%, -50%); }
.burger-icon::before { top: -7px; }
.burger-icon::after  { top:  7px; }

/* 5.3 Menü */
.layout-nav { padding-left: 0.5em; padding-right: 1em; }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list li { padding: 0 0 1em 0; }
.menu-link {
  font-size: 1.5em;
  color: var(--color-menu);
  text-decoration: none;
  display: block;
}
.menu-link:hover { text-decoration: underline; }

/* Aktiver Menüpunkt — nur Farbumschaltung per data-page (wie Original, kein Bold) */
body[data-page="willkommen"]     .menu-link[data-nav="willkommen"],
body[data-page="verein"]         .menu-link[data-nav="verein"],
body[data-page="projekte"]       .menu-link[data-nav="projekte"],
body[data-page="unterstuetzung"] .menu-link[data-nav="unterstuetzung"],
body[data-page="impressum"]      .menu-link[data-nav="impressum"] {
  color: var(--color-menu-selected);
}

/* 5.4 Akzent-Boxen (ehemals .paragraph_style_box) */
.accent-box {
  background: var(--color-bg);
  color: var(--color-text-light);
  font-size: 1em;
  font-weight: normal;
  padding: 0.7em;
  margin: 0.5em 0;
  line-height: 1.1875;
}
.accent-box a { color: var(--color-text-light); }

.accent-box--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  font-weight: bold;
  padding: 0.7em;
  margin: 0.5em 0;
}
.accent-box--dark a { color: var(--color-text-light); }

/* 5.4b Plain Heading (ehemals .paragraph_style_bold) — Ausnahme für Nachruf-Seite:
   fetter schwarzer Text ohne orange Box. */
h2.heading-plain {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.1875;
  margin: 0;
  padding: 0.7em 0;
  background: transparent;
  color: var(--color-text);
}

/* 5.4c Inline-Bilder — überschreibt globalen img-Reset display:block,
   damit mehrere Bilder in einem Absatz nebeneinander stehen
   (z. B. Symbol-Reihe Nachruf, Sponsoren-Logos Kunstobjekt). */
.images-inline img {
  display: inline-block;
  vertical-align: middle;
}

/* 5.4d Icon-Reihe — drei gleich hohe Symbole, immer in einer Zeile,
   schrumpfen proportional bei schmalen Viewports (z. B. Nachruf-Seite). */
.icon-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
}
.icon-row img {
  display: block;
  height: clamp(4em, 26vw, 10em);
  width: auto;
}

/* 5.4e Sponsor-Reihe — zwei Logos nebeneinander, zentriert.
   Auf Mobile breiter, um den schmalen Platz besser zu nutzen. */
.sponsor-row { text-align: center; }
.sponsor-row img { display: inline-block; vertical-align: middle; }
.sponsor-row a:nth-child(1) img { width: 36%; }
.sponsor-row a:nth-child(2) img { width: 24%; }

@media (max-width: 768px) {
  .sponsor-row a:nth-child(1) img { width: 56%; }
  .sponsor-row a:nth-child(2) img { width: 38%; }
}

/* 5.5 Note */
.note {
  border: 2px solid var(--color-bg);
  padding: 0.5em;
  margin: 1em 0;
}
.note a { color: var(--color-bg); }

/* Horizontale Variante: Label links, Inhalt rechts (z. B. PEN-Box) */
.note--horizontal {
  display: flex;
  align-items: center;
  gap: 1em;
}
.note--horizontal .note__label { flex: 0 0 auto; font-weight: bold; }
.note--horizontal .note__body  { flex: 1; }
.note--horizontal .note__body > p:last-child { padding-bottom: 0; }

/* 5.6 Image-Row (ehemals .table_cell-Konstrukte) */
.image-row {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  margin-bottom: 1em;
}
.image-row__image { flex: 0 0 auto; }
.image-row__image img { margin-inline: auto; }
.image-row__text  { flex: 1; }

/* Modifier: 40/60-Aufteilung statt content-bound (Default).
   Greift nur auf Desktop — Mobile bleibt bei Default-Column-Layout. */
@media (min-width: 769px) {
  .image-row--40-60 .image-row__text  { flex: 0 0 40%; }
  .image-row--40-60 .image-row__image { flex: 0 0 60%; }
}

/* Thumbnail-Höhen für Inline-Bilder (kleine Vorschau-Bilder, Verlinkungen). */
.thumb-7em  { height: 7em;  width: auto; }
.thumb-10em { height: 10em; width: auto; }

/* Mobile: QR-Code oben, Text darunter über volle Breite. */
@media (max-width: 768px) {
  .image-row {
    flex-direction: column;
    align-items: stretch;
  }
  .image-row__image { order: -1; }
}

/* 5.6b Bio-Frame (z. B. Lebensdaten mit Schriftzug auf thilokoch.html) */
.bio-frame {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--color-bg);
  margin: 1em 0;
}
.bio-frame__cell {
  padding: 0.5em;
}
.bio-frame__cell p { margin: 0; padding: 0; text-align: center; }
.bio-frame__cell img { display: block; max-width: 200px; width: 100%; height: auto; margin: 0 auto; }
.bio-frame__cell--image {
  border-top:    2px solid var(--color-bg);
  border-bottom: 2px solid var(--color-bg);
}

@media (min-width: 769px) {
  .bio-frame { flex-direction: row; align-items: center; }
  .bio-frame__cell { flex: 1; }
  .bio-frame__cell--image {
    border-top:    none;
    border-bottom: none;
    border-left:  2px solid var(--color-bg);
    border-right: 2px solid var(--color-bg);
  }
}

/* 5.7 Hero-Bild */
.hero-image {
  display: block;
  margin: 0;
  padding-bottom: 0.7em;
}
.hero-image img { width: 100%; height: auto; }

/* 5.8 Figure mit Caption (Bild ~90% breit, Caption darunter, links) */
figure { margin: 0; }
.figure-pic {
  width: 90%;
  margin: 0 auto 1em;
}
.figure-pic img { display: block; width: 100%; height: auto; }
.figure-pic figcaption {
  font-size: 0.8125em;
  line-height: 1.23;
  padding-top: 0.3em;
  text-align: left;
}

/* --- 6. Utilities ------------------------------------------ */

.visually-hidden {
  position: absolute;
  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;
  top: -40px; left: 0;
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  padding: 0.5em 1em;
  z-index: 200;
}
.skip-link:focus { top: 0; }

.text-center { text-align: center; }
.text-small  { font-size: 0.8125em; line-height: 1.23; }
/* etwas luftiger in tabellarischen Quellen-Listen (thilokoch, kunstobjekt_*) */
.text-small td { line-height: 1.5; padding-bottom: 0.15em; }

/* Sichtbarkeits-Helfer pro Viewport-Größe */
.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: block; }
  .desktop-only { display: none; }
}

/* Click-to-Copy-Button (Spendenbereich Unterstützung) */
.copy-btn {
  display: inline-block;
  vertical-align: baseline;
  font: inherit;
  font-size: 0.8em;
  color: var(--color-bg);
  background: transparent;
  border: 1px solid var(--color-bg);
  border-radius: 0.25em;
  padding: 0.05em 0.55em;
  margin-left: 0.3em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.copy-btn:hover,
.copy-btn:focus-visible {
  background: var(--color-bg);
  color: var(--color-text-light);
}
.copy-btn.is-copied {
  background: var(--color-bg);
  color: var(--color-text-light);
  border-color: var(--color-bg);
}

/* Spenden-Hinweis und CTA-Button für Banking-App-Link (mobile-only) */
.donate-tip {
  font-size: 0.85em;
  margin-top: 0.7em;
  margin-bottom: 0.3em;
}
.donate-cta {
  display: inline-block;
  background: var(--color-bg);
  color: var(--color-text-light);
  text-decoration: none;
  padding: 0.55em 1em;
  border-radius: 0.3em;
  font-weight: bold;
}
.donate-cta:hover,
.donate-cta:focus-visible {
  background: var(--color-bg-dark);
}
.donate-cta__note {
  display: inline-block;
  margin-top: 0.3em;
  font-size: 0.8em;
  color: var(--color-text);
  opacity: 0.7;
}

/* --- 7. Mobile-Verhalten (≤ 768 px) ------------------------ */

@media (max-width: 768px) {
  /* Page-Header sticky am oberen Bildrand */
  .page-header {
    position: sticky;
    top: 0;
    margin: 0;
    z-index: 100;
    transition: padding 0.2s ease;
  }
  .page-header.shrink {
    padding: 0.2em 1em;
  }
  .page-header.shrink .page-title {
    font-size: 1.2em;
  }

  /* Burger nur auf Mobile sichtbar */
  .burger { display: block; }

  /* Menü standardmäßig versteckt; .layout-nav-Wrapper bleibt im DOM */
  .layout-nav { display: contents; }
  #main-nav { display: none; }

  #main-nav.main-nav--open {
    display: block;
    position: fixed;
    /* top wird in main.js dynamisch auf die untere Kante des Page-Headers gesetzt */
    top: 0;
    left: 0; right: 0;
    background: var(--color-bg-content);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    padding: 1em;
    z-index: 90;
  }
  #main-nav.main-nav--open .menu-list { padding: 0; }
  #main-nav.main-nav--open .menu-list li { padding: 0; }
  #main-nav.main-nav--open .menu-link {
    padding: 0.75em 0.5em;
    border-bottom: 1px solid var(--color-border);
    min-height: 44px;
  }
}

/* --- 8. Desktop-Layout (≥ 769 px) -------------------------- */

@media (min-width: 769px) {
  .layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
  }
  /* Inhalt: kein horizontales Padding auf Desktop — Abstände kommen aus Grid-Gap und .layout-nav-Padding */
  .layout-content { padding: 0; }
  .menu-list li { padding: 0 0 0.8em 0; }
}

/* --- 8.5 Hohe-Kontrast-Präferenz ---------------------------
   Greift, wenn der Nutzer im Betriebssystem „Kontrast erhöhen"
   aktiviert hat (Win/macOS/iOS/Android). Standardansicht bleibt
   unverändert; nur diese Nutzergruppe bekommt die WCAG-AA-Variante. */

@media (prefers-contrast: more) {
  .accent-box {
    font-weight: bold;
    font-size: 1.25em;
  }
  .note a {
    color: var(--color-text);
  }
}

/* --- 9. Druck ---------------------------------------------- */

@media print {
  .layout-nav, .skip-link, .burger { display: none !important; }
  .layout { display: block; }
  body, .page-header, .accent-box, .accent-box--dark {
    background: transparent !important;
    color: #000 !important;
  }
  .accent-box {
    border-left: 3px solid #000;
    padding-left: 0.5em;
    font-weight: bold;
  }
  .page-title { font-size: 2em; }
  a[href^="http"]:not([href*="elsterschloss.de"])::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
  .accent-box, .image-row { break-inside: avoid; }
  .hero-image img { max-width: 12cm; height: auto; }
}