/* ============================================================
   Stadt Land Frau – Gemeinsames Design-System
   ------------------------------------------------------------
   Grundlage: das bestehende :root-Variablensystem der
   Mitgliederseite (assets/style.css). Die Tokens sind hier
   1:1 übernommen und werden von beiden Bereichen geladen:

     - Hauptseite (web/*)      -> lädt shared/design.css direkt
     - Mitgliederseite (Root)  -> assets/style.css lädt diese
       Datei zuerst und behält danach ihre eigenen
       Komponentenregeln (die Bestandsregeln überschreiben
       hier definierte Basiskomponenten und bleiben so exakt
       wie sie sind).

   Schriften (Lora + Inter) werden wie bisher per <link> im
   Header geladen – gleiche Google-Fonts-Quelle, keine neue.
   ============================================================ */

:root {
  /* Brand */
  --brand-orange:    #dd5513;
  --brand-pink:      #fee5e8;
  --brand-off-white: #fff8f5;
  --brand-blue:      #9fa5d3;
  --brand-dark-red:  #6f2a21;

  /* Semantische Farben (aus Design System) */
  --bg:              var(--brand-off-white);
  --surface:         #ffffff;
  --surface-alt:     #f3f3f5;
  --ink:             #6f2a21;   /* warmes Dunkelrot – Text & Überschriften wie auf der Hauptseite */
  --ink-soft:        #976a61;   /* gedämpftes Braun für Sekundärtext */
  --ink-faint:       #c2a9a3;
  --line:            rgba(0,0,0,0.1);
  --line-strong:     rgba(0,0,0,0.18);
  --accent:          var(--brand-orange);
  --accent-soft:     #fde8df;
  --accent-dark:     var(--brand-dark-red);
  --good:            #2d6a2b;
  --warn:            #7a4e10;
  --bad:             #d4183d;

  /* Radius */
  --radius:          0.375rem;   /* crispere Ecken wie im Breakdance-Theme der Hauptseite */
  --radius-lg:       1rem;
  --radius-pill:     999px;      /* abgerundete CTA-Buttons („Jetzt Mitglied werden") */

  /* Schatten */
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:       0 4px 20px rgba(0,0,0,0.08);

  /* Fonts */
  --font-serif:      'Lora', serif;
  --font-sans:       'Inter', sans-serif;

  /* Typoskala (Ratio 1.2) */
  --text-sm:         0.833rem;
  --text-base:       1rem;
  --text-md:         1.2rem;
  --text-lg:         1.44rem;
  --text-xl:         1.728rem;
  --text-2xl:        2.074rem;
}

/* ============================================================
   BASIS (Reset + Grundtypografie)
   Werteidentisch mit dem Bestand der Mitgliederseite. Für die
   Mitgliederseite sind diese Regeln harmlos, weil ihre eigene
   style.css danach lädt und dieselben Selektoren erneut setzt.
   Für die neue Hauptseite bilden sie die gemeinsame Grundlage.
   ============================================================ */

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

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* Sichtbarer Tastaturfokus (Barrierefreiheit-Grundniveau) */
:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

/* ============================================================
   BUTTONS (vereinheitlicht auf Mitglieder-Stil – überall Pills)
   ------------------------------------------------------------
   Primär:   gefüllt orange, weiße Schrift, Pill
   Sekundär: transparent, 1.5px Umriss in --ink, Pill
   Die alten 20px-Ecken der WordPress-Buttons entfallen.

   Hinweis: Die Mitglieder-style.css definiert .btn / .btn--primary
   erneut und überschreibt damit diese Basis – der Bestand bleibt
   unverändert. Für die neue Hauptseite gilt diese Pill-Definition.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 1.5rem;
  min-height: 44px;                 /* Touch-Ziel */
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { opacity: 0.85; }

/* Primär – einziger gefüllter Button */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

/* Sekundär – Umriss-Pill */
.btn--secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--secondary:hover {
  background: var(--ink);
  color: var(--brand-off-white);
}

/* Größen */
.btn--sm { padding: 0.45rem 1rem; min-height: 38px; font-size: 0.85rem; }
.btn--lg { padding: 0.85rem 2rem; font-size: 1rem; }

/* ============================================================
   LAYOUT-HILFEN
   ============================================================ */

.wrap {
  width: min(100% - 2.5rem, 1100px);
  margin-inline: auto;
}

/* ============================================================
   BEWEGUNG REDUZIEREN (Barrierefreiheit)
   ============================================================ */

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

/* ============================================================
   GEMEINSAMER HEADER  (shared/header.php)
   ------------------------------------------------------------
   Eigener .slf-Namensraum, damit keine Kollision mit den
   bestehenden .site-header / .public-header-Regeln der
   Mitgliederseite entsteht (unabhängig von der Ladereihenfolge).
   Mobile-first: Burger unter 768px, Zeilen-Nav ab 768px.
   ============================================================ */

.slf-body { min-height: 100vh; display: flex; flex-direction: column; }

/* „Zum Inhalt springen" – nur bei Tastaturfokus sichtbar */
.slf-skip {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}
.slf-skip:focus { left: 0.75rem; top: 0.75rem; }

.slf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.slf-header__inner {
  position: relative;
  width: min(100% - 2.5rem, 1100px);
  margin-inline: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.slf-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
}
.slf-brand:hover { text-decoration: none; }
.slf-brand__logo { height: 52px; width: auto; display: block; }
.slf-brand__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--brand-dark-red);
  line-height: 1;
}

/* Burger (nur mobil sichtbar) */
.slf-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 11px 9px;
  cursor: pointer;
  border-radius: var(--radius);
}
.slf-burger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
/* Burger -> X, wenn geöffnet */
.slf-nav-toggle:checked ~ .slf-burger .slf-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.slf-nav-toggle:checked ~ .slf-burger .slf-burger__bar:nth-child(2) { opacity: 0; }
.slf-nav-toggle:checked ~ .slf-burger .slf-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Navigation – mobil: Overlay-Panel unter dem Header */
.slf-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 0.5rem 1.25rem 1.25rem;
}
.slf-nav-toggle:checked ~ .slf-nav { display: flex; }

.slf-nav__link {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink-soft);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--line);
  transition: color .15s;
}
.slf-nav__link:hover,
.slf-nav__link.is-active { color: var(--ink); text-decoration: none; }

/* Header-Buttons in Größe an die Mitgliederseite angeglichen
   (.slf-nav .btn hat höhere Spezifität als das dortige .btn und gilt
   damit auf Haupt- UND Mitgliederseite gleich). */
.slf-nav .btn {
  padding: 0.55rem 1.1rem;
  min-height: 0;
  font-size: 0.88rem;
  font-weight: 500;
}
/* Login-Button eckig wie im Mitgliederbereich (überschreibt die Pill-Form) */
.slf-nav .btn--secondary { border-radius: var(--radius); }

/* ---- Admin-Variante: deutlich abgesetzte, dunkle Navigationsleiste ---- */
.slf-header--admin {
  background: var(--brand-dark-red);
  border-bottom-color: rgba(0, 0, 0, 0.25);
}
.slf-brand__admin {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--brand-off-white);
  white-space: nowrap;
}
.slf-header--admin .slf-burger__bar { background: var(--brand-off-white); }
@media (min-width: 768px) {
  /* Desktop: Nav-Links liegen auf der dunklen Leiste -> hell */
  .slf-header--admin .slf-nav__link { color: rgba(255, 248, 245, 0.82); }
  .slf-header--admin .slf-nav__link:hover,
  .slf-header--admin .slf-nav__link.is-active { color: #fff; }
}
/* Mobil öffnet die Nav als weißes Panel -> Links bleiben dunkel (Standard). */
/* Buttons im mobilen Panel volle Breite */
.slf-nav .btn { width: 100%; margin-top: 0.75rem; }
.slf-icon { flex-shrink: 0; }

/* Ab Tablet: Zeilen-Navigation, kein Burger */
@media (min-width: 768px) {
  .slf-burger { display: none; }
  .slf-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .slf-nav__link {
    font-size: 0.95rem;
    min-height: 0;
    padding: 0;
    border-bottom: none;
  }
  .slf-nav .btn { width: auto; margin-top: 0; }
}

/* Inhaltsbereich zwischen Header und Footer */
.slf-main { display: block; }
.slf-body > .slf-footer { margin-top: auto; }

/* ============================================================
   GEMEINSAMER FOOTER  (shared/footer.php)
   ============================================================ */

.slf-footer {
  background: var(--brand-dark-red);
  color: var(--brand-off-white);
  margin-top: 4rem;
}

.slf-footer__inner {
  width: min(100% - 2.5rem, 1100px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 0 2rem;
}

.slf-footer__logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--brand-off-white);
  text-decoration: none;
}
.slf-footer__logo {
  height: 56px;
  width: auto;
  display: block;
  /* weiße/negative Variante auf dem dunklen Footer (Logo ist einfarbig) */
  filter: brightness(0) invert(1);
}
.slf-footer__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
}
.slf-footer__tagline {
  margin: 0.8rem 0 0;
  color: rgba(255, 248, 245, 0.82);
  font-size: 0.9rem;
  line-height: 1.6;
}

.slf-footer__head {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 248, 245, 0.7);
  margin: 0 0 0.9rem;
}
.slf-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.slf-footer__list a {
  color: var(--brand-off-white);
  text-decoration: none;
  font-size: 0.95rem;
}
.slf-footer__list a:hover { text-decoration: underline; }

.slf-footer__bar { border-top: 1px solid rgba(255, 248, 245, 0.18); }
.slf-footer__bar small {
  display: block;
  width: min(100% - 2.5rem, 1100px);
  margin-inline: auto;
  padding: 1.2rem 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: rgba(255, 248, 245, 0.7);
}

@media (min-width: 768px) {
  .slf-footer__inner {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2.5rem;
  }
}