/* ==========================================================================
   GUT NaturForum — Marke und Theme-Anpassungen

   Kam bis 6.6.2 aus dem Customizer-Feld „Zusätzliches CSS". Siehe tokens.css
   für die Begründung des Umzugs.

   WARUM HIER NOCH `!important` STEHT
   Diese Datei überschreibt Astra. Das Theme liefert einen Teil seiner Regeln
   als eingebetteten Block aus, der nach den Plugin-Dateien im Kopf der Seite
   landet — dagegen kommt Reihenfolge allein nicht an. Die Kennzeichnungen
   bleiben deshalb vorerst genau dort stehen, wo sie vorher standen: Sie
   einzeln zu entfernen ist möglich, aber jede Entfernung muss am lebenden
   System nachgemessen werden. Das ist der nächste Schritt, nicht dieser.

   Bei den eigenen Bauteilen (.gut-*, .nf-*) steht bewusst KEIN `!important`,
   wo es nicht nötig ist.
   ========================================================================== */


/* ── Grundlage ───────────────────────────────────────────────────────────── */
html { scrollbar-gutter: stable; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
body, #page { background: var(--bg) !important; }
.ast-container, .entry-content, #content { background: transparent !important; }
a       { color: var(--gruen); }
a:hover { color: var(--dunkel); }


/* ── Kopfbereich ─────────────────────────────────────────────────────────── */
#masthead, .ast-primary-header-bar, .ast-desktop-header {
  background: var(--bg) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.ast-site-name-wrap { display: flex !important; flex-direction: column !important; }

#masthead .site-title,
#masthead .ast-site-name-wrap .site-title a,
#masthead .site-title a {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--dunkel) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

/* Untertitel neben dem Logo. Behält bewusst den hellen Akzentton: Er steht
   dicht am Logo und wirkt als Teil der Wortmarke, nicht als Beschriftung.   */
.site-description {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 11px !important;
  color: var(--gruen-hell) !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}

#masthead .main-navigation ul li a,
#masthead .main-navigation ul li.menu-item a,
#masthead .ast-primary-header-bar .menu-item a,
#masthead .ast-primary-header-bar .main-navigation a {
  color: var(--dunkel) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Vorher --gruen-hell: 2,4:1 auf dem cremefarbenen Kopfbereich. Ein
   Menüpunkt, der beim Überfahren schlechter lesbar wird als vorher, ist ein
   Fehler und keine Gestaltung.                                              */
#masthead .main-navigation ul li a:hover,
#masthead .ast-primary-header-bar .menu-item a:hover {
  color: var(--gruen-text) !important;
}


/* ── Untermenüs ──────────────────────────────────────────────────────────
   Aktuell hat kein Menüpunkt Unterpunkte, die Regeln greifen also nirgends.
   Sie bleiben trotzdem stehen: Sobald ein Unterpunkt angelegt wird, sitzt das
   Aussehen sofort. Sie zu entfernen spart nichts und kostet beim nächsten
   Menüpunkt einen Abend.                                                    */
.main-navigation ul ul,
.ast-primary-header-bar .main-navigation ul ul {
  background: var(--weiss) !important;
  border: 1px solid var(--gruen-mid) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 4px 20px rgba(44,74,30,0.1) !important;
  padding: 4px 0 !important;
}
.main-navigation ul ul li a,
.ast-primary-header-bar .main-navigation ul ul li a {
  color: var(--gruen) !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  border: none !important;
  background: transparent !important;
}
.main-navigation ul ul li a:hover,
.ast-primary-header-bar .main-navigation ul ul li a:hover {
  color: var(--dunkel) !important;
  background: var(--bg) !important;
}
.main-navigation ul ul li,
.ast-primary-header-bar .main-navigation ul ul li { border: none !important; }


/* ── Titel auch bei transparentem Kopfbereich sichtbar ───────────────────── */
body.ast-inherit-site-logo-transparent #masthead,
body.ast-inherit-site-logo-transparent .ast-primary-header-bar,
body.ast-inherit-site-logo-transparent .ast-desktop-header {
  background-color: var(--bg) !important;
  background: var(--bg) !important;
}
body.ast-inherit-site-logo-transparent .site-title a {
  color: var(--dunkel) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.ast-inherit-site-logo-transparent .site-description {
  color: var(--gruen-hell) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.ast-inherit-site-logo-transparent .ast-site-name-wrap {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ── Fußbereich ──────────────────────────────────────────────────────────── */
#colophon, footer   { background: var(--dunkel) !important; color: var(--gruen-mid) !important; }
#colophon a, footer a { color: var(--gruen-mid) !important; }
#colophon a:hover     { color: var(--bg) !important; }


/* ── Abstand zwischen Menüleiste und Inhalt ──────────────────────────────── */
.ast-container .site-content > .ast-container { margin-top: 0 !important; }
.entry-content { margin-top: 0 !important; }
/* Der große Kopfabstand gilt nur dort, wo die Animation steht — also auf den
   Such-Seiten, nicht auf der Startseite.                                     */
.entry-content:has(.gut-anim-wrap) { padding-top: 80px !important; }

/* Überschriften auf „Über uns" im selben Marken-Grün wie die Hero-Überschrift
   der Suche (4,55:1). Vorher standen sie auf --dunkel und damit bei 9,29:1 —
   dieselbe Härte, die auf der Startseite gestört hat.

   Erkannt wird die Seite an der Animation, nicht an einer Seiten-ID: Die
   Animation liegt seit dem 31.08. ausschließlich auf „Über uns" (Entscheidung
   Jonas), dieselbe Marke nutzt die Regel eine Zeile darüber schon. Eine
   page-id im Stylesheet wäre stiller Ballast, sobald die Seite einmal neu
   angelegt wird.

   --gruen-text, nicht --gruen: siehe die Begründung beim Hero weiter unten —
   der Theme-Block im Seiteninhalt biegt --gruen auf die Bereichsfarbe um. */
.entry-content:has(.gut-anim-wrap) :is(h1, h2, h3, h4) {
  color: var(--gruen-text, #5c7a3e) !important;
}


/* ── Suchmodus: Deko weg, Suchleiste rückt nach oben ─────────────────────── */
body.gut-searching .gut-anim-wrap,
body.gut-searching .nf-hero,
body.gut-searching .nf-stats { display: none !important; }
body.gut-searching .entry-content:has(.gut-anim-wrap) { padding-top: 40px !important; }

/* ── Produkt-Raster: Statistikzeile weg ──────────────────────────────────────
   Die Zeile "Anbieter N / Bundesland Hamburg" steht im SEITENINHALT von
   /einkaufen/, nicht im Plugin. Ueber dem Produkt-Raster ist sie in beiden
   Haelften falsch: gezaehlt werden Anbieter, gezeigt werden Produkte, und ein
   Produkt ist nicht ortsgebunden. In der Orte-Ansicht bleibt sie richtig und
   steht weiter da — deshalb ausblenden statt aus dem Seiteninhalt entfernen.
   Die Klasse setzt das Plugin am <body> (gut_produkt_ansicht_aktiv()).

   Das `!important` ist KEIN Reflex: Der Gegenspieler ist die Grundregel
   `.nf-stats { display: flex !important }` weiter unten in dieser Datei.
   Gegen ein !important gewinnt keine Spezifitaet — eine Fassung ohne das
   Schluesselwort stand in 6.24.1 in frontend.css und blieb wirkungslos.
   Die Regel steht hier und nicht dort, weil eine Ausnahme neben ihre
   Grundregel gehoert; sonst sucht der Naechste an zwei Stellen.              */
body.gut-ansicht-produkte .nf-stats { display: none !important; }


/* ── Animation über der Suche ────────────────────────────────────────────── */
.gut-anim-wrap {
  margin: 0 auto !important;   /* Abstand oben kommt von .entry-content */
  max-width: 580px !important;
  width: 100% !important;
  line-height: 0;              /* sonst steht Leerraum unter dem SVG */
}


/* ── Titelblock über der Suche ───────────────────────────────────────────── */
.nf-hero { text-align: center; padding: 34px 20px 24px !important; margin-top: 0 !important; }
.nf-hero h1 {
  font-family: 'Lora', serif !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  /* Marken-Grün statt --dunkel: das dunkle Grün stand mit 9,3:1 auf hellem
     Grund und wirkte hart. Dasselbe Grün wie der Suchen-Knopf, 4,55:1 — klar
     über der AA-Schwelle. Überschrift und Handlung sprechen eine Sprache.

     WARUM --gruen-text und nicht --gruen: Auf den Bereichsseiten liegt im
     SEITENINHALT ein <div class="gut-theme-page"> mit Inline-Variablen, das
     --gruen, --gruen-hell, --gruen-mid, --bg, --dunkel und --terra auf die
     Bereichsfarbe umbiegt. Alles darin erbt die Bereichsfarbe — auch diese
     Überschrift. Über --gruen lief die Einkaufen-Überschrift dadurch auf
     Sandgold #c69a2c mit 2,43:1 und fiel sogar unter die 3,0 für große
     Schrift. --gruen-text wird von diesem Block NICHT gesetzt und bleibt
     überall #5c7a3e.

     Damit ist es eine bewusste Entscheidung, keine Nebenwirkung: die
     Bereichsfarben bleiben den Bedienelementen vorbehalten, die Überschrift
     bleibt Marke — auf allen vier Bereichen gleich.
     !important, weil Astra über .entry-content :where(h1) dagegenhält. */
  color: var(--gruen-text, #5c7a3e) !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
}


/* ── Breiten ─────────────────────────────────────────────────────────────
   Die Suchmaske sitzt bündig mit dem Kopfbereich, alle Formularseiten auf
   derselben Lesebreite. Vorher nutzten diese Hüllen undefinierte Variablen
   und liefen dadurch über die volle Fensterbreite.                          */
.gut-reg-wrap,
.gut-dash-wrap,
.gut-zugang-wrap,
.gut-np-wrap {
  max-width: var(--gut-w-mid, 720px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}


/* ── Suchformular, Felder, Umkreis, Schaltflaeche, Kategorie-Schalter ────
   STEHEN NICHT MEHR HIER.

   Sie standen doppelt: hier mit fest eingetragenen Gruentoenen und
   `!important`, und in frontend.css mit den Rollen-Token. Gewonnen hat diese
   Datei — und damit war das Umfaerben je Suchbereich fuer genau diese
   Bauteile ausgehebelt.

   Sie leben jetzt ausschliesslich in frontend.css, mit denselben sichtbaren
   Werten, aber ueber die Rollen-Token ausgedrueckt. Wer daran etwas aendern
   will, aendert es dort — es gibt keine zweite Stelle mehr, die es
   ueberschreibt.

   Die Breite der Suchmaske (.gut-search-wrap) ist mitgewandert.             */


/* ── Anbieter-Zähler ─────────────────────────────────────────────────────── */
.nf-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 64px !important;
  max-width: 500px !important;
  margin: 48px auto 0 !important;
  padding-top: 36px !important;
  border-top: 1px solid var(--gruen-mid) !important;
}
.nf-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-align: center !important;
  width: 140px !important;
}
/* Vorher --gruen-hell: 11px Großbuchstaben bei 2,4:1 Kontrast — die am
   schlechtesten lesbare Stelle der ganzen Seite.                            */
.nf-stat-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gruen-text) !important;
  font-family: 'DM Sans', sans-serif !important;
}
.nf-stat-value {
  font-family: 'Lora', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--dunkel) !important;
  line-height: 1 !important;
}
.nf-stat-divider { width: 1px !important; height: 48px !important; background: var(--gruen-mid) !important; }


/* ── Auswahlkästchen ─────────────────────────────────────────────────────── */
input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--gruen-mid) !important;
  border-radius: 4px !important;
  background: var(--bg) !important;
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  outline: none !important;
}
input[type="checkbox"]:checked { background: var(--bg) !important; border-color: var(--gruen) !important; }
input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 3px !important;
  top: 0 !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid var(--gruen) !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
}
input[type="checkbox"]:focus {
  outline: none !important;
  border-color: var(--gruen-hell) !important;
  box-shadow: none !important;
}


/* ── Bildlaufleiste ──────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--gruen-mid); border-radius: 10px; }


/* ── Rechtstext-Seiten ───────────────────────────────────────────────────
   Impressum, Datenschutz, AGB. Diese Seiten werden ganz normal im Editor
   geschrieben, das Layout sitzt automatisch.

   Angesprochen werden sie über die Klasse `gut-rechtstext`, die das Plugin
   anhand des Seiten-Kürzels setzt (siehe gut-core.php). Vorher standen hier
   drei fest eingetragene Seitennummern — die stimmen genau so lange, bis
   jemand eine Seite neu anlegt. Die Nummern bleiben vorerst zusätzlich
   stehen; sie fliegen raus, sobald die Klasse am lebenden System geprüft
   ist.                                                                      */
.gut-rechtstext .entry-content,
.page-id-1058 .entry-content,
.page-id-833 .entry-content,
.page-id-8 .entry-content {
  max-width: var(--ast-container-width, 1200px);
  margin: 0 auto;
  padding: 40px 20px 90px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}
.gut-rechtstext .entry-content h1,
.page-id-1058 .entry-content h1,
.page-id-833 .entry-content h1,
.page-id-8 .entry-content h1 {
  font-family: 'Lora', serif; font-weight: 500; font-size: 32px;
  color: var(--dunkel); margin: 0 0 26px; line-height: 1.3;
}
.gut-rechtstext .entry-content h2,
.page-id-1058 .entry-content h2,
.page-id-833 .entry-content h2,
.page-id-8 .entry-content h2 {
  font-family: 'Lora', serif; font-weight: 500; font-size: 20px;
  color: var(--gruen); margin: 36px 0 10px; line-height: 1.35;
}
.gut-rechtstext .entry-content h3,
.page-id-1058 .entry-content h3,
.page-id-833 .entry-content h3,
.page-id-8 .entry-content h3 {
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--dunkel); margin: 24px 0 6px; text-transform: none;
}
.gut-rechtstext .entry-content p,
.page-id-1058 .entry-content p,
.page-id-833 .entry-content p,
.page-id-8 .entry-content p { margin: 0 0 14px; }
.gut-rechtstext .entry-content ul,
.page-id-1058 .entry-content ul,
.page-id-833 .entry-content ul,
.page-id-8 .entry-content ul { margin: 0 0 14px; padding-left: 22px; }
.gut-rechtstext .entry-content li,
.page-id-1058 .entry-content li,
.page-id-833 .entry-content li,
.page-id-8 .entry-content li { margin: 0 0 6px; }
.gut-rechtstext .entry-content a,
.page-id-1058 .entry-content a,
.page-id-833 .entry-content a,
.page-id-8 .entry-content a { color: var(--gruen); text-decoration: underline; }
.gut-rechtstext .entry-content a:hover,
.page-id-1058 .entry-content a:hover,
.page-id-833 .entry-content a:hover,
.page-id-8 .entry-content a:hover { color: var(--dunkel); }
.gut-rechtstext .entry-content strong,
.page-id-1058 .entry-content strong,
.page-id-833 .entry-content strong,
.page-id-8 .entry-content strong { color: var(--dunkel); font-weight: 600; }


/* ── Kleine Bildschirme ──────────────────────────────────────────────────── */
/* ── Anbieter-Zaehler auf schmalen Geraeten ──────────────────────────────
   ZWEI FEHLER, DIE HIER ZUSAMMENKAMEN

   1. Der Trennstrich sass nicht in der Mitte. Die beiden Bloecke waren auf
      Inhaltsbreite gesetzt — „657" ist 56px breit, „Hamburg" 100px. Die
      Gruppe als Ganzes war zwar zentriert, aber der Strich zwischen zwei
      unterschiedlich breiten Bloecken landet dort, wo die Textlaengen ihn
      hinschieben: auf einem 388px-Bildschirm 22px zu weit links.

      Zwei exakt gleich breite Spalten loesen das ohne Rechnerei. Der Strich
      sitzt garantiert mittig, und jedes Paar zentriert sich weiterhin in
      seiner eigenen Haelfte — die Zahl also unter ihrem Titel. Ein frueherer
      Versuch mit festen Breiten scheiterte daran, dass ein laengerer
      Bundeslandname („Mecklenburg-Vorpommern") nicht mehr hineinpasste;
      `flex: 1 1 0` teilt stattdessen den vorhandenen Platz.

   2. Die Trennlinie oben lief 35px breiter als die Suchmaske darueber und
      wirkte dadurch schief, obwohl sie mittig sass. Gleicher Seitenrand wie
      dort, damit beide Kanten uebereinanderliegen.

   Die Regeln standen bis 6.8.3 in frontend.css und mussten von dort gegen
   diese Datei ankaempfen. Sie stehen jetzt hier, direkt unter ihren
   Grundregeln.                                                              */
@media (max-width: 600px) {
  .nf-stats {
    gap: 24px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  .nf-stat {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .nf-stat-value { font-size: 23px !important; line-height: 1.25 !important; }
  .nf-stat-label { font-size: 10.5px !important; }
}

@media (max-width: 768px) {
  .nf-hero h1 { font-size: 26px !important; }
  /* .gut-row1 und .gut-ueber-filter stehen jetzt in frontend.css bei
     derselben Grenze — siehe dort. */
}

/* ══ Abstand Kopfbereich → Überschrift auf dem Handy ═════════════════════
   Zwischen Menü und Überschrift lagen 83 px leere Fläche, und zwar aus DREI
   Quellen, die sich aufaddierten:

     29 px  Astra am <article class="ast-article-single">
     20 px  unser `body .entry-content` (frontend.css, ab 600px)
     34 px  `.nf-hero` (oben in dieser Datei, Zeile mit padding: 34px 20px 24px)

   Auf dem Desktop ist das luftig, auf einem 412-px-Bildschirm war es ein
   Zehntel der Höhe, bevor überhaupt etwas zu lesen war. Jetzt zusammen 20 px.

   Warum die Regeln HIER stehen und nicht in frontend.css: `.nf-hero` oben
   trägt `padding: … !important`. Bei gleicher Spezifität entscheidet die
   Reihenfolge, und marke.css wird nach frontend.css geladen — eine Regel dort
   wäre wirkungslos geblieben (derselbe Fall wie 6.24.2).

   `:has(.nf-hero)` grenzt die beiden Theme-Behälter auf Seiten MIT Hero ein.
   Profilseiten und Rechtstexte behalten ihren bisherigen Abstand. Kennt ein
   älterer Browser `:has()` nicht, bleibt dort schlicht alles beim Alten. */
@media (max-width: 600px) {
  .ast-article-single:has(.nf-hero) { padding-top: 0 !important; }
  body .entry-content:has(.nf-hero) { padding-top: 6px !important; }
  .nf-hero { padding-top: 14px !important; }
}