/*
Theme Name:   eigengrund-child
Theme URI:    https://eigengrund.space
Description:  Child Theme für eigengrund.space
Author:       Malte & Sandra
Author URI:   https://eigengrund.space
Template:     kadence
Version:      1.0.0
Text Domain:  eigengrund-child
*/

/* ============================================================
   EIGENGRUND DESIGN TOKENS
   Alle gestalterischen Entscheidungen an einer einzigen Stelle.
   Farbe ändern? Hier. Abstand ändern? Hier. Schrift ändern? Hier.
   ============================================================ */

:root {

  /* ── FARBEN: TAG-MODUS ── */
  --eg-bg:              #F7F0E6;   /* Seitenhintergrund warm Creme */
  --eg-bg-card:         #FDF9F5;   /* Karten */
  --eg-bg-input:        #FFFFFF;   /* Eingabefelder */
  --eg-bg-hint:         rgba(212,149,106,.09);  /* Hinweis-Boxen */
  --eg-bg-example:      #F0EBE3;   /* Beispiel-Boxen */
  --eg-bg-disc:         rgba(30,27,20,.04);     /* Disclaimer */
  --eg-bg-success:      rgba(212,149,106,.09);  /* Erfolgs-Meldung */
  --eg-bg-section:      #F0E8D8;   /* Abschnitt-Hintergrund */

  /* ── TEXT ── */
  --eg-text:            #1E1B14;   /* Haupttext */
  --eg-text-muted:      rgba(30,27,20,.82);   /* Fließtext, Labels */
  --eg-text-faint:      rgba(30,27,20,.75);   /* Sublabels, Hinweise */

  /* ── AKZENTFARBEN ── */
  --eg-accent:          #8B4513;   /* Dunkel-Braun: Links, Tags, Akzente */
  --eg-amber:           #D4956A;   /* Amber: Buttons, Hover, Regeln */
  --eg-amber-hover:     #C17050;   /* Amber dunkler: Hover-Zustand */

  /* ── RAHMEN ── */
  --eg-border:          rgba(30,27,20,.10);   /* Sehr dezent */
  --eg-border-mid:      rgba(30,27,20,.20);   /* Mittel */
  --eg-border-input:    rgba(30,27,20,.22);   /* Eingabefelder */
  --eg-border-focus:    #D4956A;              /* Fokus-Ring: Amber */

  /* ── BUTTONS ── */
  --eg-btn-bg:          #1E1B14;   /* Primär-Button Hintergrund */
  --eg-btn-txt:         #F7F0E6;   /* Primär-Button Text */
  --eg-btn-ghost-bg:    transparent;
  --eg-btn-ghost-txt:   #1E1B14;

  /* ── NAVIGATION ── */
  --eg-nav-bg:          rgba(247,240,230,.96);
  --eg-nav-height:      64px;

  /* ── TAGS & BADGES ── */
  --eg-tag-c:           #8B4513;
  --eg-tag-b:           rgba(139,69,19,.25);
  --eg-badge-member-bg: rgba(212,149,106,.15);
  --eg-badge-member-c:  #8B4513;
  --eg-badge-premium-bg:rgba(139,69,19,.12);
  --eg-badge-premium-c: #8B4513;

  /* ── FORMULAR-ELEMENTE ── */
  --eg-step-bg:         rgba(212,149,106,.18);
  --eg-step-c:          #8B4513;
  --eg-rule:            #D4956A;

  /* ── MODAL ── */
  --eg-modal-bg:        rgba(20,16,10,.58);

  /* ── SCHRIFTEN ── */
  --eg-font-serif:      'Cormorant Garamond', serif;
  --eg-font-sans:       'Lato', sans-serif;

  /* ── ABSTÄNDE ── */
  --eg-space-xs:        .5rem;
  --eg-space-sm:        1rem;
  --eg-space-md:        1.5rem;
  --eg-space-lg:        2.5rem;
  --eg-space-xl:        4rem;

  /* ── RADIEN ── */
  --eg-radius-sm:       2px;
  --eg-radius-md:       4px;

  /* ── ÜBERGÄNGE ── */
  --eg-transition:      .2s ease;
  --eg-transition-slow: .5s ease;

  /* ── ANIMATIONEN: BUTTONS ──
     Hier Buttons dynamischer machen:
     z.B. translateY(-3px) für stärkeres Anheben */
  --eg-btn-hover-lift:  translateY(-1px);
  --eg-btn-shadow:      0 4px 14px rgba(212,149,106,.25);
}

/* ── NACHT-MODUS ── */
body.eg-dark {
  --eg-bg:              #16120C;
  --eg-bg-card:         #1E180F;
  --eg-bg-input:        #231C11;
  --eg-bg-hint:         rgba(212,149,106,.07);
  --eg-bg-example:      rgba(237,229,213,.03);
  --eg-bg-disc:         rgba(237,229,213,.04);
  --eg-bg-success:      rgba(212,149,106,.08);
  --eg-bg-section:      #1A140C;

  --eg-text:            #EDE5D5;
  --eg-text-muted:      rgba(237,229,213,.82);
  --eg-text-faint:      rgba(237,229,213,.62);

  --eg-accent:          #D4956A;
  --eg-amber:           #D4956A;
  --eg-amber-hover:     #E8A87A;

  --eg-border:          rgba(237,229,213,.08);
  --eg-border-mid:      rgba(237,229,213,.16);
  --eg-border-input:    rgba(237,229,213,.22);
  --eg-border-focus:    #D4956A;

  --eg-btn-bg:          #D4956A;
  --eg-btn-txt:         #16120C;
  --eg-btn-ghost-txt:   #EDE5D5;

  --eg-nav-bg:          rgba(22,18,12,.97);

  --eg-tag-c:           #D4956A;
  --eg-tag-b:           rgba(212,149,106,.28);
  --eg-badge-member-bg: rgba(212,149,106,.15);
  --eg-badge-member-c:  #D4956A;
  --eg-badge-premium-bg:rgba(212,149,106,.12);
  --eg-badge-premium-c: #D4956A;

  --eg-step-bg:         rgba(212,149,106,.13);
  --eg-step-c:          #D4956A;
  --eg-rule:            #6B3D1A;

  --eg-modal-bg:        rgba(8,6,3,.75);
  --eg-btn-shadow:      0 4px 14px rgba(212,149,106,.15);
}

/* ============================================================
   BASIS
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--eg-font-sans);
  font-weight: 400;
  background-color: var(--eg-bg);
  color: var(--eg-text);
  transition: background-color var(--eg-transition-slow),
              color var(--eg-transition-slow);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAFIE
   ============================================================ */

.eg-h1 {
  font-family: var(--eg-font-serif);
  font-weight: 300;
  font-size: clamp(34px, 5.5vw, 68px);
  line-height: 1.08;
  color: var(--eg-text);
  transition: color var(--eg-transition-slow);
}
.eg-h1 em { font-style: italic; color: var(--eg-accent); }

.eg-h2 {
  font-family: var(--eg-font-serif);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  color: var(--eg-text);
  transition: color var(--eg-transition-slow);
}
.eg-h2 em { font-style: italic; color: var(--eg-accent); }

.eg-h3 {
  font-family: var(--eg-font-serif);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.3;
  color: var(--eg-text);
}

.eg-lead {
  font-family: var(--eg-font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.7;
  color: var(--eg-text-muted);
  transition: color var(--eg-transition-slow);
}

.eg-body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--eg-text-muted);
  transition: color var(--eg-transition-slow);
}

.eg-small {
  font-size: 13px;
  line-height: 1.7;
  color: var(--eg-text-faint);
  font-weight: 300;
}

.eg-label {
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--eg-text-faint);
  font-weight: 400;
}

/* Dekorations-Linie unter Überschriften */
.eg-rule {
  width: 36px;
  height: .5px;
  background: var(--eg-rule);
  margin: 1rem 0 1.25rem;
  transition: background var(--eg-transition-slow);
}

/* Pull-Quote */
.eg-quote {
  border-left: 2px solid var(--eg-amber);
  padding: 1rem 0 1rem 1.5rem;
  margin: 2rem 0;
  transition: border-color var(--eg-transition-slow);
}
.eg-quote p {
  font-family: var(--eg-font-serif);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.65;
  color: var(--eg-text-muted);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.eg-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--eg-lg, 2.5rem);
  height: var(--eg-nav-height);
  border-bottom: .5px solid var(--eg-border);
  background: var(--eg-nav-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--eg-transition-slow),
              border-color var(--eg-transition-slow);
}

.eg-logo {
  font-family: var(--eg-font-serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--eg-text);
  text-decoration: none;
  transition: color var(--eg-transition-slow);
}
.eg-logo em { font-style: italic; color: var(--eg-accent); }

.eg-nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eg-nav-links a {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eg-text-muted);
  text-decoration: none;
  font-weight: 300;
  transition: color var(--eg-transition);
}
.eg-nav-links a:hover { color: var(--eg-text); }

.eg-nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ── DAY/NIGHT TOGGLE ── */
.eg-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
}
.eg-toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: .5px solid var(--eg-border-mid);
  background: var(--eg-bg-card);
  position: relative;
  transition: background var(--eg-transition),
              border-color var(--eg-transition-slow);
  flex-shrink: 0;
}
body.eg-dark .eg-toggle-track {
  background: rgba(212,149,106,.18);
  border-color: rgba(212,149,106,.35);
}
.eg-toggle-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--eg-text-muted);
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  transition: transform .3s ease, background .3s;
}
body.eg-dark .eg-toggle-thumb {
  transform: translateX(16px);
  background: var(--eg-amber);
}
.eg-toggle-icon { font-size: 13px; line-height: 1; }
.eg-toggle-lbl {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eg-text-faint);
  min-width: 36px;
  transition: color var(--eg-transition-slow);
}

/* ============================================================
   BUTTONS
   Alle Button-Varianten an einem Ort.
   Icon hinzufügen: .eg-btn--icon
   Animierter Hover: --eg-btn-hover-lift oben ändern
   ============================================================ */

.eg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--eg-font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 1.75rem;
  border-radius: var(--eg-radius-sm);
  border: none;
  cursor: pointer;
  min-height: 44px; /* Touch-Target */
  transition: transform var(--eg-transition),
              box-shadow var(--eg-transition),
              background var(--eg-transition-slow),
              color var(--eg-transition-slow),
              opacity var(--eg-transition);
}
.eg-btn:hover {
  transform: var(--eg-btn-hover-lift);
  box-shadow: var(--eg-btn-shadow);
}
.eg-btn:active { transform: scale(.98); }

/* Primär: dunkel gefüllt */
.eg-btn--primary {
  background: var(--eg-btn-bg);
  color: var(--eg-btn-txt);
}
.eg-btn--primary:hover { opacity: .88; }

/* Ghost: umrandet */
.eg-btn--ghost {
  background: transparent;
  color: var(--eg-btn-ghost-txt);
  border: .5px solid var(--eg-border-mid);
}
.eg-btn--ghost:hover { background: var(--eg-bg-disc); }

/* Amber */
.eg-btn--amber {
  background: var(--eg-amber);
  color: #fff;
}
body.eg-dark .eg-btn--amber { color: #16120C; }

/* Klein */
.eg-btn--sm {
  font-size: 11px;
  padding: .55rem 1.1rem;
  min-height: 36px;
}

/* Icon vor dem Text */
.eg-btn .eg-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

/* ============================================================
   BADGES & TAGS
   Kleine Kennzeichner – Thema, Mitglied, Premium, Status
   ============================================================ */

.eg-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eg-tag-c);
  border: .5px solid var(--eg-tag-b);
  padding: .28rem .7rem;
  border-radius: var(--eg-radius-sm);
  font-weight: 300;
  transition: color var(--eg-transition-slow),
              border-color var(--eg-transition-slow);
}

/* 🔒 Mitglieder-Badge (kostenlos) */
.eg-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: var(--eg-radius-sm);
  font-weight: 300;
  border: .5px solid transparent;
  transition: all var(--eg-transition-slow);
}
.eg-badge--member {
  background: var(--eg-badge-member-bg);
  color: var(--eg-badge-member-c);
  border-color: var(--eg-tag-b);
}
/* 👑 Premium-Badge (bezahlt) */
.eg-badge--premium {
  background: var(--eg-badge-premium-bg);
  color: var(--eg-badge-premium-c);
  border-color: var(--eg-tag-b);
}
/* Inline-Icons für Badges (SVG als data-URI) */
.eg-badge--member::before  { content: '🔒'; font-size: 10px; }
.eg-badge--premium::before { content: '✦';  font-size: 9px; font-style: normal; }

/* ============================================================
   KARTEN
   ============================================================ */

.eg-card {
  background: var(--eg-bg-card);
  border: .5px solid var(--eg-border);
  border-radius: var(--eg-radius-sm);
  padding: 1.5rem;
  transition: background var(--eg-transition-slow),
              border-color var(--eg-transition-slow);
}
.eg-card:hover { background: var(--eg-bg-disc); }

.eg-card--hint {
  background: var(--eg-bg-hint);
  border-color: var(--eg-tag-b);
}

.eg-card--accent {
  border-left: 2px solid var(--eg-amber);
  background: var(--eg-bg-hint);
  border-color: var(--eg-tag-b);
}

/* ============================================================
   THEMEN-KARTE (Startseite Grid)
   ============================================================ */

.eg-thema-card {
  background: var(--eg-bg-card);
  padding: 1.75rem 1.5rem;
  cursor: pointer;
  transition: background var(--eg-transition);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  text-decoration: none;
}
.eg-thema-card:hover { background: var(--eg-bg-disc); }

.eg-thema-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--eg-badge-member-bg);
  color: var(--eg-accent);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--eg-transition-slow),
              color var(--eg-transition-slow);
}
.eg-thema-title {
  font-family: var(--eg-font-serif);
  font-weight: 400;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.35;
  color: var(--eg-text);
  transition: color var(--eg-transition-slow);
}
.eg-thema-title em { font-style: italic; color: var(--eg-accent); }
.eg-thema-arrow { color: var(--eg-amber); margin-top: auto; font-size: 14px; }

/* Grid für Themen-Karten */
.eg-themen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: .5px solid var(--eg-border);
  background: var(--eg-border);
  border-radius: var(--eg-radius-sm);
  overflow: hidden;
  transition: border-color var(--eg-transition-slow),
              background var(--eg-transition-slow);
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.eg-sidebar-card {
  background: var(--eg-bg-card);
  border: .5px solid var(--eg-border);
  padding: 1.35rem;
  border-radius: var(--eg-radius-sm);
  margin-bottom: 1.25rem;
  transition: background var(--eg-transition-slow),
              border-color var(--eg-transition-slow);
}
.eg-sidebar-card--accent {
  background: var(--eg-bg-hint);
  border-color: var(--eg-tag-b);
}

/* ============================================================
   FORMULAR-ELEMENTE
   ============================================================ */

.eg-input,
.eg-textarea,
.eg-select {
  width: 100%;
  font-family: var(--eg-font-sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--eg-text);
  background: var(--eg-bg-input);
  border: .5px solid var(--eg-border-input);
  border-radius: var(--eg-radius-sm);
  padding: .8rem 1rem;
  outline: none;
  transition: border-color var(--eg-transition),
              background var(--eg-transition-slow),
              color var(--eg-transition-slow);
  -webkit-appearance: none;
}
.eg-input::placeholder,
.eg-textarea::placeholder { color: var(--eg-text-faint); }
.eg-input:focus,
.eg-textarea:focus,
.eg-select:focus { border-color: var(--eg-border-focus); }
.eg-textarea { resize: vertical; line-height: 1.75; }

/* Checkbox */
.eg-check-wrap {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1.1rem;
  cursor: pointer;
}
.eg-check {
  width: 18px;
  height: 18px;
  border: .5px solid var(--eg-border-input);
  border-radius: var(--eg-radius-sm);
  background: var(--eg-bg-input);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--eg-transition),
              border-color var(--eg-transition);
}
.eg-check.checked {
  background: var(--eg-amber);
  border-color: var(--eg-amber);
}
.eg-check-tick {
  color: #fff;
  font-size: 11px;
  display: none;
  font-style: normal;
}
.eg-check.checked .eg-check-tick { display: block; }
.eg-check-label {
  font-size: 13px;
  line-height: 1.7;
  color: var(--eg-text-muted);
}

/* Schritt-Nummer */
.eg-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--eg-step-bg);
  color: var(--eg-step-c);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--eg-transition-slow),
              color var(--eg-transition-slow);
}

/* ============================================================
   MODAL
   ============================================================ */

.eg-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--eg-modal-bg);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.eg-modal-overlay.open { display: flex; }

.eg-modal {
  background: var(--eg-bg-card);
  border: .5px solid var(--eg-border-mid);
  border-radius: var(--eg-radius-sm);
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 2.25rem;
  position: relative;
  transition: background var(--eg-transition-slow),
              border-color var(--eg-transition-slow);
}
.eg-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: .5px solid var(--eg-border-mid);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eg-text-faint);
  font-size: 15px;
  font-family: var(--eg-font-sans);
  transition: color var(--eg-transition);
}
.eg-modal-close:hover { color: var(--eg-text); }

/* ============================================================
   AUDIO PLAYER (Impuls-Buttons)
   ============================================================ */

.eg-audio-pill {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  background: var(--eg-bg-card);
  border: .5px solid var(--eg-border);
  padding: .75rem 1.25rem;
  border-radius: var(--eg-radius-sm);
  cursor: pointer;
  transition: background var(--eg-transition-slow),
              border-color var(--eg-transition-slow);
}
.eg-audio-pill:hover { border-color: var(--eg-amber); }

.eg-audio-play {
  width: 32px;
  height: 32px;
  background: var(--eg-amber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--eg-transition-slow);
}
.eg-audio-play svg { display: block; }

.eg-audio-text { font-size: 13px; color: var(--eg-text-muted); line-height: 1.5; }
.eg-audio-text strong {
  font-weight: 400;
  color: var(--eg-text);
  font-size: 14px;
  display: block;
}

/* ============================================================
   STILLES ARCHIV
   ============================================================ */

.eg-archiv-entry {
  background: var(--eg-bg-disc);
  border: .5px solid var(--eg-border);
  border-radius: var(--eg-radius-sm);
  padding: 2rem 2.25rem;
  max-width: 640px;
  transition: background var(--eg-transition-slow),
              border-color var(--eg-transition-slow);
}
.eg-archiv-text {
  font-family: var(--eg-font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.85;
  color: var(--eg-text-muted);
}

/* ============================================================
   DISCLAIMER / HINWEIS-BOX
   ============================================================ */

.eg-disclaimer {
  background: var(--eg-bg-disc);
  border: .5px solid var(--eg-border);
  border-radius: var(--eg-radius-sm);
  padding: 1.1rem 1.4rem;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--eg-text-faint);
  transition: background var(--eg-transition-slow),
              border-color var(--eg-transition-slow),
              color var(--eg-transition-slow);
}
.eg-disclaimer strong {
  font-weight: 400;
  color: var(--eg-text-muted);
}

/* ============================================================
   LAYOUT-HELPER
   ============================================================ */

.eg-container {
  max-width: 1100px;
  padding-left: var(--eg-space-lg);
  padding-right: var(--eg-space-lg);
}

.eg-layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 4rem;
}

/* ============================================================
   FOOTER
   ============================================================ */

.eg-footer {
  border-top: .5px solid var(--eg-border);
  padding: 1.75rem var(--eg-space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  transition: border-color var(--eg-transition-slow);
}
.eg-footer-logo {
  font-family: var(--eg-font-serif);
  font-weight: 400;
  font-size: 15px;
  color: var(--eg-text-faint);
  text-decoration: none;
}
.eg-footer-logo em { font-style: italic; }
.eg-footer-links { display: flex; gap: 1.25rem; }
.eg-footer-links a {
  font-size: 11px;
  color: var(--eg-text-faint);
  text-decoration: none;
  font-weight: 300;
  transition: color var(--eg-transition);
}
.eg-footer-links a:hover { color: var(--eg-text-muted); }
.eg-footer-disc {
  font-size: 11px;
  color: var(--eg-text-faint);
  line-height: 1.7;
  max-width: 380px;
  font-weight: 300;
}

/* ============================================================
   HONEYPOT (Anti-Spam)
   ============================================================ */

.eg-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .eg-layout-sidebar { grid-template-columns: 1fr; }
  .eg-themen-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  :root {
    --eg-space-lg: 1.25rem;
    --eg-space-xl: 2.5rem;
  }

  .eg-nav { padding: 0 1.25rem; }
  .eg-nav-links { display: none; } /* Mobile-Nav: Kadence-eigenes Hamburger-Menü aktiv */
  .eg-toggle-lbl { display: none; }

  .eg-themen-grid { grid-template-columns: 1fr; }

  .eg-btn { width: 100%; }

  .eg-footer {
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .eg-modal { padding: 1.5rem; }
}

/* ============================================================
   KADENCE GLOBAL OVERRIDES
   Überschreibt Kadence-Defaults mit eigengrund-Design.
   Farben, Schriften, Buttons – alles an einer Stelle.
   ============================================================ */

/* ── KADENCE GLOBALE FARBPALETTE ──
   Überschreibt die Customizer-Farben per CSS.
   Palette 1 = Amber (Akzent), Palette 3 = Dunkel (Text),
   Palette 8 = Creme (Hintergrund), Palette 9 = Weiß
   ── */
:root {
  --global-palette1:    #D4956A;  /* Amber – Hauptakzent */
  --global-palette2:    #8B4513;  /* Dunkelbraun – Links, Tags */
  --global-palette3:    #1E1B14;  /* Fast-Schwarz – Haupttext */
  --global-palette4:    #3A3428;  /* Dunkelbraun – Hover */
  --global-palette5:    #6B6456;  /* Gedimmter Text */
  --global-palette6:    #9A8E82;  /* Sehr gedimmter Text */
  --global-palette7:    #F0E8D8;  /* Heller Abschnitt */
  --global-palette8:    #F7F0E6;  /* Creme – Seitenhintergrund */
  --global-palette9:    #FFFFFF;  /* Weiß – Karten */
}

/* ── SEITENHINTERGRUND ── */
body {
  background-color: #F7F0E6;
  color: #1E1B14;
}

/* ── TYPOGRAFIE: BASIS-SCHRIFT ── */
body,
p,
.entry-content p,
.wp-block-paragraph {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.9;
  color: var(--eg-text-muted);
}

/* ── TYPOGRAFIE: ÜBERSCHRIFTEN ── */
h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading,
.kadence-advanced-heading {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  color: #1E1B14;
  line-height: 1.15;
}

h1, .wp-block-heading.is-style-h1 {
  font-size: clamp(34px, 5vw, 62px);
  font-style: italic;
}
h2 { font-size: clamp(24px, 3.5vw, 38px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h4 { font-size: clamp(17px, 2vw, 22px); }

/* Italic-Akzent in Überschriften */
h1 em, h2 em, h3 em,
.wp-block-heading em {
  font-style: italic;
  color: #8B4513;
}

/* ── LINKS ── */
a {
  color: #8B4513;
  text-decoration: none;
  transition: color .2s;
}
a:hover { color: #D4956A; }

/* ── BUTTONS ── */
/* Buttons: Basis via Customizer → Zusätzliches CSS */
/* Varianten die im Customizer nicht abgedeckt sind: */
.wp-block-button.is-style-amber .wp-block-button__link {
  background: #D4956A !important;
  color: #1E1B14 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: #1E1B14 !important;
  border: .5px solid rgba(30,27,20,.2) !important;
}

/* ── KADENCE NAVIGATION ── */
/* Position und Sticky: via Kadence Customizer → Header → Oben gehaltener Header */
/* Hintergrund Startseite transparent: via Customizer → Zusätzliches CSS */
.site-header,
#masthead {
  background: rgba(247,240,230,.96) !important;
  border-bottom: .5px solid rgba(30,27,20,.1) !important;
  backdrop-filter: blur(10px) !important;
  transition: background-color .4s ease, border-color .4s ease !important;
}

/* ── KADENCE SECTION / ROW BLÖCKE ── */
.kt-row-column-wrap,
.wp-block-kadence-rowlayout {
  font-family: 'Lato', sans-serif;
}

/* ── KADENCE INFOBOX / KARTEN ── */
.kt-blocks-info-box-link-wrap,
.kb-info-box {
  border: .5px solid var(--eg-border) !important;
  border-radius: var(--eg-radius-sm) !important;
  background: var(--global-palette9) !important;
  transition: background var(--eg-transition);
}
.kt-blocks-info-box-link-wrap:hover {
  background: var(--global-palette7) !important;
  border-color: var(--eg-tag-b) !important;
}

/* ── KADENCE DIVIDER / TRENNLINIE ── */
.kt-divider,
.wp-block-kadence-spacer hr {
  border-color: #D4956A !important;
  opacity: 1 !important;
}

/* wp-block-separator: via Customizer */

/* ── GUTENBERG BLÖCKE ── */

/* Absatz */
.wp-block-paragraph {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(30,27,20,.82);
}

/* Zitat / Pull-Quote */
.wp-block-quote,
.wp-block-pullquote {
  border-left: 2px solid #D4956A !important;
  padding-left: 1.5rem !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: clamp(17px, 2.2vw, 21px) !important;
  color: rgba(30,27,20,.75) !important;
}
.wp-block-quote p,
.wp-block-pullquote p {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Trennlinie */
.wp-block-separator {
  border-color: #D4956A !important;
  max-width: 36px !important;
  border-width: .5px !important;
  margin: 1.25rem 0 !important;
}

/* Bild */
.wp-block-image img {
  border-radius: 2px;
}

/* Liste */
.wp-block-list,
ul.wp-block-list,
ol.wp-block-list {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(30,27,20,.82);
  padding-left: 1.5rem;
}

/* Spalten */
.wp-block-columns {
  gap: 2rem;
}

/* Karte / Gruppe */
.wp-block-group.is-style-card {
  background: var(--global-palette9);
  border: .5px solid var(--eg-border);
  border-radius: 2px;
  padding: 1.5rem;
}

/* ── SEITENBREITE ── */
/* Alle Inhalte auf Seiten (nicht Startseite) auf 720px zentrieren */
/* Gilt für alle Kinder inkl. wp:html Blöcke mit Tags + Trennlinien */
.page:not(.page-template-page-startseite) .entry-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/* Reset: einzelne Kinder brauchen kein eigenes max-width mehr */
.page:not(.page-template-page-startseite) .entry-content > * {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/* Ausnahmen: volle Breite behalten */
.alignfull,
.alignwide,
.alignfull > .wp-block-group__inner-container {
  max-width: 100% !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

/* ── KADENCE NAVIGATION OVERRIDES ── */
.main-navigation a,
.kadence-navigation a,
header .menu a {
  font-family: var(--eg-font-sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 300;
  color: rgba(30,27,20,.65);
}
.main-navigation a:hover,
.kadence-navigation a:hover {
  color: var(--eg-text);
}
.main-navigation .sub-menu,
.kadence-navigation .sub-menu {
  background: var(--eg-bg);
  border: .5px solid var(--eg-border);
  box-shadow: 0 4px 16px rgba(30,27,20,.08);
}
.main-navigation .sub-menu a,
.kadence-navigation .sub-menu a {
  color: var(--eg-text-muted);
}
.main-navigation .sub-menu a:hover,
.kadence-navigation .sub-menu a:hover {
  color: var(--eg-text);
  background: var(--eg-bg-disc);
}
.main-navigation a[href*="mitgliederbereich"],
.main-navigation a[href*="anmelden"],
.kadence-navigation a[href*="mitgliederbereich"],
.kadence-navigation a[href*="anmelden"] {
  color: var(--eg-accent);
  border: .5px solid var(--eg-tag-b);
  padding: .3rem .85rem;
  border-radius: var(--eg-radius-sm);
  transition: background var(--eg-transition);
}
.main-navigation a[href*="mitgliederbereich"]:hover,
.kadence-navigation a[href*="anmelden"]:hover {
  background: rgba(139,69,19,.06);
}

/* ── STARTSEITE: PADDING & HEADER ── */
body {
  padding-top: 0;
}
body.page-template-page-startseite .site-header,
body.page-template-page-startseite #masthead {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
}

/* ── FLIESSTEXT ── */
.entry-content,
.entry-content p,
.wp-block-paragraph {
  text-align: left;
}

/* ── ZEILENHÖHE ── */
body, p, .entry-content p {
  line-height: 1.9;
}
h1, h2, h3, h4 {
  line-height: 1.2;
}

/* ── FAQ FRAGEN ── */
.eg-faq__frage-text {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--eg-font-serif);
  font-weight: 300;
  font-style: normal;
  font-size: 17px;
  line-height: 1.5;
  color: var(--eg-text);
}

/* ── FOOTER ── */
.site-footer,
#colophon {
  border-top: .5px solid rgba(30,27,20,.1) !important;
  background: #F7F0E6 !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 11px !important;
  color: rgba(30,27,20,.5) !important;
  font-weight: 300 !important;
}

/* ── NACHT-MODUS ── */
body.eg-dark {
  background-color: #16120C !important;
  color: #EDE5D5 !important;
}
body.eg-dark h1,
body.eg-dark h2,
body.eg-dark h3,
body.eg-dark h4 {
  color: #EDE5D5 !important;
}
body.eg-dark p,
body.eg-dark .wp-block-paragraph {
  color: rgba(237,229,213,.82) !important;
}
body.eg-dark .site-header,
body.eg-dark #masthead {
  background: rgba(22,18,12,.97) !important;
}
body.eg-dark .wp-block-button__link,
body.eg-dark .kb-button {
  background: #D4956A !important;
  color: #16120C !important;
}
body.eg-dark a { color: #D4956A !important; }
body.eg-dark .site-footer,
body.eg-dark #colophon {
  background: #16120C !important;
  color: rgba(237,229,213,.5) !important;
}

/* ── ERFAHRUNGSBERICHTE STARTSEITE ── */
.eg-start-eb-section {
  padding: 0 2.5rem 3rem;
  background: var(--eg-bg);
}
.eg-start-eb-section > div:first-child,
.eg-start-eb-section h2,
.eg-start-eb-section > div > a,
.eg-start-eb-section > p {
  display: none;
}
.eg-start-eb-section > div[style*="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: rgba(30,27,20,.08);
  border: .5px solid rgba(30,27,20,.08);
  border-radius: var(--eg-radius-sm);
  overflow: hidden;
}
.eg-start-eb-section > div[style*="grid"] > div {
  background: var(--global-palette9) !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  transition: background var(--eg-transition-slow) !important;
}
.eg-start-eb-section > div[style*="grid"] > div:hover {
  background: var(--global-palette7) !important;
}
/* Person-Label (Vorname · Alter) */
.eg-start-eb-section > div[style*="grid"] > div > div:first-child {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(30,27,20,.50);
  font-family: 'Lato', sans-serif;
}
/* Abschlusssatz */
.eg-start-eb-section > div[style*="grid"] > div > div:nth-child(2) {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(15px,1.8vw,17px);
  line-height: 1.6;
  color: rgba(30,27,20,.75);
}
/* Links: Bericht lesen / Kostenlos anmelden */
.eg-start-eb-section > div[style*="grid"] > div > a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8B4513;
  text-decoration: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 680px) {
  body, p { font-size: 16px; }
  h1 { font-size: clamp(30px, 8vw, 48px); }
  h2 { font-size: clamp(22px, 5vw, 30px); }
  .wp-block-columns { flex-direction: column; }
}
@media (max-width: 640px) {
  .eg-start-eb-section > div[style*="grid"] {
    grid-template-columns: 1fr;
  }
}

.eg-rp-frage-label {
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 1.4rem !important;
}

/* ═══════════════════════════════════════
   EIGENGRUND KARTEN-SYSTEM v2
   .eg-card          – Basis
   .eg-card--link    – anklickbar mit Hover
   .eg-card--text    – Textbox ohne Hover
   .eg-card--nav     – Navigationsliste
   Farben über Palette-Variablen gesteuert.
   palette9 = Weiß (Karten)
   palette8 = Creme (Hintergrund)
   palette7 = Heller Abschnitt (Hover)
   palette2 = Dunkelbraun (Akzent/Border Hover)
   palette1 = Amber (Pfeile, Links Hover)
═══════════════════════════════════════ */

.eg-card {
  background: var(--global-palette9);
  border: .5px solid var(--eg-border);
  padding: 1.5rem 1.4rem;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.eg-card--link {
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: background var(--eg-transition), border-color var(--eg-transition);
  cursor: pointer;
}
.eg-card--link:hover {
  background: var(--global-palette7);
  border-color: var(--eg-tag-b);
  text-decoration: none;
  color: inherit;
}

.eg-card--text {
  padding: 1.75rem;
  cursor: default;
}

.eg-card--nav {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  transition: background var(--eg-transition), border-color var(--eg-transition);
  cursor: pointer;
}
.eg-card--nav:hover {
  background: var(--global-palette7);
  border-color: var(--eg-tag-b);
  text-decoration: none;
  color: inherit;
}

.eg-card__title {
  font-family: var(--eg-font-serif);
  font-weight: 300;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.3;
  color: var(--eg-text);
  margin: 0 0 .5rem;
}

.eg-card__label {
  font-family: var(--eg-font-sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--global-palette5);
  margin: 0 0 1rem;
  display: block;
}

.eg-card__text {
  font-family: var(--eg-font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--global-palette5);
  margin: 0 0 1.25rem;
}

.eg-card__link {
  font-family: var(--eg-font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--eg-accent);
  text-decoration: none;
  display: block;
  margin-top: auto;
}
.eg-card__link:hover { color: var(--eg-amber); }

.eg-card__meta {
  font-family: var(--eg-font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--eg-accent);
  text-decoration: none;
  display: block;
  margin-bottom: .75rem;
}
.eg-card__meta:hover { color: var(--eg-amber); }

.eg-card__arrow {
  color: var(--eg-amber);
  font-size: 14px;
  line-height: 1.6;
  flex-shrink: 0;
}

.eg-card--nav .eg-card__title {
  font-family: var(--eg-font-sans);
  font-size: 15px;
  font-weight: 400;
  margin-bottom: .2rem;
}
.eg-card--nav .eg-card__text {
  font-size: 13px;
  margin: 0;
}