/*
Theme Name: BFG Theme
Theme URI: https://besterfreundgesucht.de
Author: besterfreundgesucht.de
Description: Eigenes Theme fuer besterfreundgesucht.de - Freunde finden, gemeinsam etwas erleben.
Version: 0.2.0+060bda4
Text Domain: bfg-theme
Requires Plugins: buddypress, bbpress, bfg-core
*/

:root {
  /* Maennlich/erwachsen/bodenstaendig statt Dating-Optik: gedeckte Waldtoene + Rost-Akzent,
     keine Rosatoene, keine durchgehend abgerundeten "Social-Media-Pillen". */
  --bfg-green: #2f5d4f;
  --bfg-green-dark: #182d24;
  --bfg-green-light: #e6ece7;
  --bfg-accent: #b35a2e;
  --bfg-accent-dark: #93491f;
  --bfg-cream: #f2efe7;
  --bfg-white: #ffffff;
  --bfg-text: #22231f;
  --bfg-text-light: #5a5b53;
  --bfg-border: #d9d3c4;
  --bfg-radius: 10px;
  --bfg-radius-small: 6px;
  --bfg-shadow: 0 2px 10px rgba(24, 45, 36, 0.08);
  --bfg-max-width: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bfg-cream);
  color: var(--bfg-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  font-size: 16px;
}
img { max-width: 100%; height: auto; }
a { color: var(--bfg-green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; color: var(--bfg-green-dark); margin: 0 0 .5em; }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; }
.bfg-container { max-width: var(--bfg-max-width); margin: 0 auto; padding: 0 20px; }

/* ---------- Header / Navigation ---------- */
.bfg-site-header {
  background: var(--bfg-white);
  border-bottom: 1px solid var(--bfg-border);
  position: sticky; top: 0; z-index: 50;
}
.bfg-header-inner { display: flex; flex-wrap: wrap; row-gap: 10px; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; max-width: var(--bfg-max-width); margin: 0 auto; }
.bfg-logo { font-weight: 700; font-size: 1.25rem; color: var(--bfg-green-dark); }
.bfg-logo span { color: var(--bfg-accent); }
.bfg-nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--bfg-green-dark); }
/* QA-Retest BFG-QA-107 (Retest): .bfg-header-actions liegt jetzt INNERHALB von .bfg-main-nav
   (ein einziges Markup statt zweier gegenlaeufig ein-/ausgeblendeter Kopien - siehe header.php). */
.bfg-main-nav { display: flex; align-items: center; gap: 24px; }
.bfg-main-nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.bfg-main-nav a { color: var(--bfg-text); font-weight: 500; }
.bfg-main-nav a:hover { color: var(--bfg-green); text-decoration: none; }
.bfg-header-actions { display: flex; gap: 10px; align-items: center; }

/* Mobil: EINE kompakte Kopfzeile (Logo + Menue-Button); Konto-Aktionen wandern ins aufklappbare
   Menue, damit der klebende Header nicht zweizeilig wird und Inhalt verdeckt. */
@media (max-width: 820px) {
  .bfg-header-inner { flex-wrap: wrap; padding: 8px 16px; }
  .bfg-logo { font-size: 1.1rem; }
  .bfg-nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .bfg-main-nav { display: none; width: 100%; order: 3; max-height: calc(100vh - 60px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; }
  .bfg-main-nav.is-open { display: flex; }
  .bfg-main-nav ul { flex-direction: column; gap: 0; padding: 6px 0 10px; }
  .bfg-main-nav a { display: block; padding: 12px 4px; min-height: 44px; border-top: 1px solid var(--bfg-border); }
  .bfg-main-nav .bfg-header-actions { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 4px 16px; }
}

/* ---------- Buttons / Forms ---------- */
.bfg-btn {
  display: inline-block; min-height: 44px; padding: 11px 22px; border-radius: var(--bfg-radius-small); font-weight: 700;
  letter-spacing: .01em; border: 2px solid transparent; cursor: pointer; font-size: .95rem; text-decoration: none;
}
.bfg-btn-wide { display: block; width: 100%; text-align: center; margin-top: 6px; }
.bfg-btn-primary { background: var(--bfg-accent); color: #fff; }
.bfg-btn-primary:hover { background: var(--bfg-accent-dark); text-decoration: none; }
.bfg-btn-secondary { background: var(--bfg-green); color: #fff; }
.bfg-btn-secondary:hover { background: var(--bfg-green-dark); text-decoration: none; }
.bfg-btn-ghost { background: transparent; border-color: var(--bfg-border); color: var(--bfg-text); }
.bfg-btn-ghost:hover { border-color: var(--bfg-green); color: var(--bfg-green); text-decoration: none; }
.bfg-btn-small { padding: 10px 14px; font-size: .9rem; min-height: 44px; }
.bfg-input, select.bfg-input, textarea.bfg-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--bfg-border); border-radius: var(--bfg-radius-small);
  font-size: 1rem; font-family: inherit; background: #fff;
}
.bfg-form label { display: block; margin-bottom: 14px; font-weight: 600; }
.bfg-form-row { display: flex; gap: 16px; }
.bfg-form-row > label { flex: 1; }
.bfg-fieldset { border: 1px solid var(--bfg-border); border-radius: var(--bfg-radius-small); padding: 12px 16px; margin-bottom: 16px; }
.bfg-fieldset legend { font-weight: 700; color: var(--bfg-green-dark); padding: 0 6px; }
.bfg-interest-group { margin-bottom: 10px; }
.bfg-checkbox { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; margin: 2px 14px 2px 0; }
.bfg-checkbox input[type=checkbox] { width: 20px; height: 20px; flex: none; }
/* Mindestens 16px in allen Eingabefeldern - darunter zoomt iOS Safari beim Antippen. */
.bfg-input-small { width: auto; max-width: 100%; padding: 10px 12px; font-size: 1rem; min-height: 44px; }
.bfg-form-error { background: #fbeae5; border: 1px solid #d98b6f; color: #7a2c12; border-radius: var(--bfg-radius-small); padding: 12px 16px; margin-bottom: 16px; }
/* QA-Retest (BFG-QA-106/110-Retest): garantiert sichtbares Banner unabhaengig von der Zielseite. */
.bfg-notice-banner { padding: 10px 20px; }
.bfg-notice-banner p { margin: 10px auto; max-width: var(--bfg-max-width); }
.bfg-form-success { background: var(--bfg-green-light); border: 1px solid #9fb8ab; color: var(--bfg-green-dark); border-radius: var(--bfg-radius-small); padding: 12px 16px; margin-bottom: 16px; }
/* QA-Retest BFG-QA-118: feldnahe Fehlermeldungen direkt unter dem jeweiligen Eingabefeld. */
.bfg-field-error { color: #7a2c12; font-size: 0.9rem; margin: 2px 0 10px; }
.bfg-input[aria-invalid="true"] { border-color: #d98b6f; }
.bfg-auth-page { display: flex; justify-content: center; }
.bfg-auth-card { background: #fff; border-radius: var(--bfg-radius); box-shadow: var(--bfg-shadow); padding: 32px; max-width: 420px; width: 100%; }
.bfg-auth-card h1 { margin-bottom: 6px; }
.bfg-account-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
@media (max-width: 480px) { .bfg-account-links { grid-template-columns: 1fr; } }
.bfg-inline-form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; max-width: 100%; }
.bfg-rsvp-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bfg-report-form, .bfg-block-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }

/* Sichtbarer Tastaturfokus (nur bei Tastaturbedienung, :focus-visible). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .bfg-btn:focus-visible {
  outline: 3px solid var(--bfg-accent); outline-offset: 2px;
}
.bfg-note { color: var(--bfg-text-light); font-size: .88rem; }

/* ---------- Cards ---------- */
.bfg-card { background: var(--bfg-white); border-radius: var(--bfg-radius); box-shadow: var(--bfg-shadow); padding: 20px; margin-bottom: 16px; }
.bfg-result-card { display: flex; gap: 16px; background: #fff; border-radius: var(--bfg-radius); box-shadow: var(--bfg-shadow); padding: 18px; margin-bottom: 14px; }
/* QA-Fix responsive-image-crops: vorher nur border-radius ohne width/height/object-fit - in
   Kombination mit dem globalen "img { height: auto }" (Zeile 40) konnte die Avatarflaeche je
   nach verfuegbarem Platz schmaler als hoch werden und Platzhalter wie echte Fotos gestreckt
   wirken lassen. Feste quadratische Box + object-fit:cover verhindert das unabhaengig von der
   tatsaechlichen get_avatar()-Groesse, flex-shrink:0 verhindert ein Stauchen im Flex-Layout. */
.bfg-result-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.bfg-result-info h3 { margin-bottom: 2px; }
.bfg-profile-meta { color: var(--bfg-text-light); margin: 2px 0; }
.bfg-shared-inline { color: var(--bfg-green-dark); }
.bfg-badge { display: inline-block; background: var(--bfg-green-light); color: var(--bfg-green-dark); padding: 4px 12px; border-radius: var(--bfg-radius-small); font-size: .85rem; font-weight: 600; }
.bfg-badge-going { background: var(--bfg-accent); color: #fff; }

/* ---------- Hero / Homepage ---------- */
.bfg-hero {
  position: relative; color: #fff; padding: 72px 20px; text-align: left; overflow: hidden;
  background: var(--bfg-green-dark);
}
/* QA-Fix hero-bildbreite: auf sehr breiten Bildschirmen zog sich das Bild bisher ueber die
   komplette Browserbreite (.bfg-hero-bg war inset:0 relativ zur voll breiten .bfg-hero-Sektion)
   - bei einem 3:2-Foto bedeutet das bei cover einen immer staerkeren vertikalen Zoom, je breiter
   der Viewport wird. Eigener Breitendeckel: 1440px statt des schmaleren Text-Spaltenwerts
   (--bfg-max-width, 1120px) - der Hero darf als grossflaechiges Bildelement bewusst breiter
   wirken als die Textspalte, 1440px ist zugleich knapp oberhalb des letzten "voll breit"-
   Testpunkts (1440px) und faengt erst bei 1920/2560px tatsaechlich sichtbar an zu begrenzen.
   "left:50%; transform:translateX(-50%)" zentriert die Box unabhaengig von max-width exakt
   auf der Sektionsmitte; width:100% sorgt dafuer, dass unterhalb von 1440px weiterhin die volle
   verfuegbare Breite genutzt wird (Mobil/Tablet unveraendert). Das ::after-Overlay (inset:0,
   s.u.) bezieht sich auf dieselbe begrenzte Box und endet damit automatisch sauber mit dem
   Bildbereich - der sichtbare Rand links/rechts zeigt den dunkelgruenen .bfg-hero-Hintergrund. */
.bfg-hero-bg { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1440px; z-index: 0; }
.bfg-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.bfg-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(24,45,36,.93) 0%, rgba(24,45,36,.78) 45%, rgba(24,45,36,.45) 100%);
}
.bfg-hero-inner { position: relative; z-index: 1; max-width: var(--bfg-max-width); margin: 0 auto; }
.bfg-hero h1 { color: #fff; font-size: 2.5rem; line-height: 1.3; margin-bottom: .3em; max-width: 680px; }
.bfg-hero p.bfg-tagline { font-size: 1.2rem; opacity: .95; margin-bottom: 1.8em; max-width: 560px; }
.bfg-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.bfg-hero-paths { display: flex; gap: 20px; flex-wrap: wrap; max-width: 820px; }
.bfg-hero-path { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: calc(var(--bfg-radius) + 4px); padding: 26px; flex: 1; min-width: 230px; text-align: left; }
.bfg-hero-path h2 { color: #fff; font-size: 1.25rem; }
.bfg-hero-path p { opacity: .92; margin-bottom: 14px; }
@media (min-width: 1000px) {
  /* 420-460px Korridor (zurueckgenommen von vorher 430-480px): jetzt, da die Bildbreite selbst
     bei 1440px gedeckelt ist (s.o.), soll auch die Hoehe nicht weiter unbegrenzt mitwachsen -
     32vw erreicht die 460px-Decke bei ca. 1437px Breite, also fast genau am Breitendeckel: bis
     dahin steigt die Hoehe leicht an, danach bleiben Bild UND Hoehe gemeinsam konstant, statt
     getrennt in unterschiedlichem Tempo zu wachsen. Tablet (<1000px) und Mobil behalten bewusst
     ihre eigene, kompakte Inhaltshoehe. */
  .bfg-hero { min-height: clamp(420px, 32vw, 460px); }
}
@media (max-width: 767px) {
  /* QA-Fix mobiler-hero-geometrie: .bfg-hero-bg wurde bislang per bottom:0 auf die GESAMTE, rein
     inhaltsgetriebene Hero-Hoehe gestreckt - H1 + Untertext + Haupt-CTAs + zwei gestapelte
     Auswahlkarten ergaben in der Browser-QA ca. 930-1035px. Bei nur 320-430px Breite entstand
     daraus eine extrem schmale, sehr hohe Flaeche; object-fit:cover musste das 3:2-Foto rechnerisch
     auf nur noch ca. 25% seiner Breite zusammenzoomen - die Wandergruppe zerfiel dadurch optisch in
     einzelne ueberdimensionierte Personen. Loesung ohne neues Markup: eigener, auf 320px FEST
     begrenzter Bildbereich nur fuer H1/Untertext/Haupt-CTAs; die beiden Auswahlkarten
     (.bfg-hero-paths) liegen darunter bereits auf dem vorhandenen dunkelgruenen .bfg-hero-
     Hintergrund (kein Foto mehr dahinter - der Abschnitt ist ohnehin laenger als die Bildflaeche,
     kein zusaetzlicher Container noetig). */
  .bfg-hero { padding: 48px 16px; text-align: center; }
  .bfg-hero-bg { bottom: auto; height: 320px; }
  /* Weicher Uebergang statt harter Kante am unteren Bildrand: zusaetzlicher vertikaler
     Abblend-Layer in derselben Farbe wie der Hero-Hintergrund (var(--bfg-green-dark)) - dadurch
     nahtlos, unabhaengig von den tatsaechlichen Bildfarben an dieser Stelle. */
  .bfg-hero-bg::after {
    background:
      linear-gradient(100deg, rgba(24,45,36,.93) 0%, rgba(24,45,36,.78) 45%, rgba(24,45,36,.45) 100%),
      linear-gradient(to bottom, rgba(24,45,36,0) 70%, var(--bfg-green-dark) 100%);
  }
  /* Bei 320-430px Breite UND jetzt nur noch 320px Hoehe (statt vorher bis zu ~1035px) bleibt der
     Beschnitt rein horizontal und nachgerechnet moderat (ca. 65-90% der Bildbreite bleiben je
     nach Viewport sichtbar) - die ganze Gruppe bleibt erkennbar, eine mittige Position reicht. */
  .bfg-hero-bg img { object-position: center; }
  .bfg-hero-inner { display: flex; flex-direction: column; align-items: center; }
  /* Die neue dreisaetzige H1 ("Zusammen was erleben. Zusammen was schaffen. Freunde finden.")
     ist laenger als der vorherige Einzelsatz - clamp() skaliert bei 320-390px Breite leicht
     herunter (Testpunkte s. QA-Auftrag), ab ca. 430px greift bereits wieder die alte 1.7rem-
     Obergrenze, sodass sich am 430/768px-Erscheinungsbild nichts aendert. */
  .bfg-hero h1 { max-width: 100%; font-size: clamp(1.45rem, 5.5vw, 1.7rem); }
  .bfg-hero p.bfg-tagline { max-width: 100%; }
  .bfg-hero-ctas { justify-content: center; }
  .bfg-hero-paths { justify-content: center; margin-top: 20px; }
}
/* ---------- Startseiten-Teaser (Kommende Aktivitaeten / Ideen fuer Unternehmungen) ----------
   QA-Fix teaser-layout-querformat: die vorherige seitliche Full-Height-Bildspalte ab 1000px
   (Bild links/rechts ueber die volle Kartenhoehe) erzwang bei Querformatfotos (16:9 bzw. 3:2)
   faktisch einen Hochformat-Ausschnitt - object-fit:cover musste dafuer extrem seitlich
   beschneiden, Personen/Bildkomposition gingen verloren. Jetzt EIN einheitliches Kartenschema
   auf allen Breiten: Bild oben in voller Kartenbreite (3:2 - passt exakt auf das "Ideen"-Foto,
   beim "Aktivitaeten"-Foto, real ca. 16:9, nur ein moderater, rein horizontaler Beschnitt noetig
   -> keine Koepfe gefaehrdet), Text darunter. Keine Spiegelung/Breakpoint-Sonderlogik mehr noetig. */
.bfg-teaser-section { background: var(--bfg-green-light); border-radius: calc(var(--bfg-radius) + 6px); padding: 36px clamp(16px, 4vw, 40px); margin: 4px 0 8px; }
.bfg-teaser-question { font-size: 1.3rem; font-weight: 700; max-width: 640px; margin: 0 0 8px; color: var(--bfg-green-dark); }
.bfg-teaser-lead { font-size: 1.05rem; max-width: 640px; margin: 0 0 24px; color: var(--bfg-text-light); }
.bfg-teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
/* Etwas wärmerer, weicherer Kartenkörper statt reinem Weiss auf hartem Rahmen - traegt zur
   "menschlicheren" Wirkung bei, ohne die Lesbarkeit/den Kontrast zu verschlechtern. */
.bfg-teaser-card { background: #fffdf8; border-radius: calc(var(--bfg-radius) + 10px); box-shadow: 0 14px 34px rgba(24, 45, 36, 0.09); overflow: hidden; display: flex; flex-direction: column; }
.bfg-teaser-image-frame { width: 100%; aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--bfg-green-light), #dfe6e1); flex-shrink: 0; }
.bfg-teaser-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bfg-teaser-body { padding: 32px; display: flex; flex-direction: column; flex: 1 1 auto; }
.bfg-teaser-kicker { color: var(--bfg-accent); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
.bfg-teaser-body h2 { margin-bottom: 10px; }
.bfg-teaser-body p { flex: 1 1 auto; line-height: 1.6; }
/* Textlink mit Pfeil statt eines weiteren vollflaechigen Buttons - ruhiger, weniger "Boxen
   uebereinander". Trotzdem 44px Tritt-/Klickflaeche fuer mobile Bedienbarkeit. */
.bfg-teaser-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 14px; font-weight: 700; color: var(--bfg-green-dark); align-self: flex-start; }
.bfg-teaser-cta span { transition: transform .15s ease; }
.bfg-teaser-cta:hover { color: var(--bfg-accent); text-decoration: none; }
.bfg-teaser-cta:hover span { transform: translateX(3px); }
/* Persistenter Zweitlink "Eigene Aktivitaet anbieten" (immer sichtbar, nicht nur im Leerzustand) -
   bewusst dezenter als die primaere CTA, damit die Karte weiterhin primaer zum Entdecken einlaedt. */
.bfg-teaser-cta-secondary { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: .92rem; font-weight: 600; color: var(--bfg-text-light); align-self: flex-start; }
.bfg-teaser-cta-secondary:hover { color: var(--bfg-accent); text-decoration: none; }
@media (max-width: 600px) {
  .bfg-teaser-section { padding: 24px 16px; border-radius: var(--bfg-radius); }
  .bfg-teaser-grid { grid-template-columns: 1fr; }
  .bfg-teaser-question { font-size: 1.15rem; }
  .bfg-teaser-lead { font-size: 1rem; }
}

/* ---------- Startseite: Themenuebersicht (breitere Interessen) ---------- */
.bfg-topics-section { padding-top: 12px; }
.bfg-topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 4px; }
.bfg-topic-chip {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  background: var(--bfg-white); border: 1px solid var(--bfg-border); border-radius: var(--bfg-radius);
  padding: 14px 16px; color: var(--bfg-text); font-weight: 600; box-shadow: var(--bfg-shadow);
  transition: border-color .15s ease, color .15s ease;
}
.bfg-topic-chip:hover { border-color: var(--bfg-accent); color: var(--bfg-accent); text-decoration: none; }
.bfg-topic-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.bfg-topic-label { font-size: .95rem; }
@media (max-width: 600px) {
  .bfg-topics-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bfg-topic-chip { padding: 12px; gap: 8px; }
  .bfg-topic-label { font-size: .88rem; }
}
@media (max-width: 430px) {
  /* Zweispaltig wird bei 320-390px fuer die laengeren Labels ("Motorrad- & Oldtimertouren") zu
     eng - einspaltig bleibt bei allen acht Themen zuverlaessig lesbar. */
  .bfg-topics-grid { grid-template-columns: 1fr; }
}

.bfg-section { padding: 40px 0; }
.bfg-section-nearby { padding-top: 28px; }
.bfg-section h2 { margin-bottom: 18px; }
.bfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
/* Dezente Angleichung nur fuer die Gruppenkarten (kein Eingriff in das sitetweite .bfg-card,
   das auch Profil-/Aktivitaetskarten u.a. nutzt) - weichere Rundung, ruhigerer Schatten, mehr Luft. */
.bfg-section-groups .bfg-card { border-radius: calc(var(--bfg-radius) + 4px); box-shadow: 0 10px 24px rgba(24, 45, 36, 0.08); padding: 22px; }
.bfg-section-groups h3 { margin-bottom: 4px; }

/* ---------- Onboarding ---------- */
.bfg-onboarding-banner { background: var(--bfg-green-light); border-bottom: 1px solid var(--bfg-border); }
.bfg-onboarding-inner { max-width: var(--bfg-max-width); margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.bfg-onboarding-steps { display: flex; gap: 16px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.bfg-onboarding-steps .bfg-step-done a { text-decoration: line-through; color: var(--bfg-text-light); }

/* ---------- Activity / Idea ---------- */
.bfg-activity-meta { color: var(--bfg-text-light); margin-bottom: 14px; }
.bfg-activity-meta strong { color: var(--bfg-text); }
/* QA-Retest BFG-QA-115: Teilnehmerliste ("Dabei:") auf der Aktivitaetsseite. */
.bfg-participant-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; padding: 0; }
.bfg-participant-list li a { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--bfg-text); }
.bfg-participant-list img.avatar { border-radius: 50%; width: 28px; height: 28px; object-fit: cover; flex-shrink: 0; }
.bfg-safety-notice { background: #fff8ee; border: 1px solid #f0d9b5; border-radius: var(--bfg-radius-small); padding: 14px 16px; margin-top: 20px; font-size: .92rem; }
.bfg-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.bfg-filter-bar a, .bfg-filter-bar select { background: #fff; border: 1px solid var(--bfg-border); border-radius: var(--bfg-radius-small); padding: 10px 16px; min-height: 44px; font-size: 1rem; color: var(--bfg-text); }
.bfg-filter-bar a { display: inline-flex; align-items: center; }
.bfg-filter-form { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) {
  .bfg-filter-bar > a { flex: 1 1 auto; justify-content: center; }
  .bfg-filter-form, .bfg-filter-form select { width: 100%; }
}
.bfg-filter-bar a.is-active { background: var(--bfg-green); color: #fff; border-color: var(--bfg-green); }

/* ---------- Profile view ---------- */
.bfg-profile-header { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.bfg-profile-header img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
/* QA-Retest BFG-QA-117: Flex-Kinder haben ohne min-width:0 eine implizite Mindestbreite nach
   ihrem Inhalt - bei schmalen Bildschirmen (375px) konnte das Region/Alter-Feld dadurch ueber
   den Kartenrand hinausragen statt umzubrechen. */
.bfg-profile-header > div { min-width: 0; flex: 1 1 200px; }
.bfg-profile-header h1, .bfg-profile-meta { overflow-wrap: break-word; word-break: break-word; }
.bfg-profile-section { margin-bottom: 16px; }
.bfg-profile-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.bfg-shared-interests { background: var(--bfg-green-light); border-radius: var(--bfg-radius-small); padding: 12px 16px; margin-bottom: 16px; }

/* ---------- Footer ---------- */
.bfg-site-footer { background: var(--bfg-green-dark); color: #fff; padding: 30px 20px; margin-top: 40px; font-size: .9rem; }
.bfg-site-footer a { color: #cfe6da; }
.bfg-footer-inner { max-width: var(--bfg-max-width); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- BuddyPress / bbPress Integrationsschicht (CSS-only in dieser Phase) ---------- */
#buddypress, #bbpress-forums {
  max-width: var(--bfg-max-width); margin: 20px auto; padding: 0 20px; font-family: inherit;
}
#buddypress .standard-form input[type=text], #buddypress .standard-form input[type=email],
#buddypress .standard-form input[type=password], #buddypress .standard-form textarea, #buddypress .standard-form select,
#bbpress-forums input[type=text], #bbpress-forums textarea {
  border: 1px solid var(--bfg-border); border-radius: var(--bfg-radius-small); padding: 10px 12px; font-family: inherit; font-size: 16px;
}
#buddypress a.button, #buddypress button, #buddypress input[type=submit],
#bbpress-forums button, #bbpress-forums input[type=submit], #bbpress-forums a.button {
  background: var(--bfg-green); color: #fff; border: none; border-radius: var(--bfg-radius-small); padding: 8px 18px; cursor: pointer; font-weight: 600;
}
#buddypress a.button:hover, #buddypress button:hover { background: var(--bfg-green-dark); }
#buddypress div.item-list-tabs ul, #bbpress-forums ul.forum-stats { background: transparent; }
#buddypress #item-header, #buddypress .item-list-tabs { background: #fff; border-radius: var(--bfg-radius); }
#whats-new-form, div.message, #buddypress .activity-list, #bbpress-forums #bbp-forums {
  background: #fff; border-radius: var(--bfg-radius); box-shadow: var(--bfg-shadow); padding: 16px; margin-bottom: 16px;
}

/* QA-Retest BFG-QA-108: Avatare, Untermenues und Listen/Tabellen von BuddyPress/bbPress wirkten
   durch die Standardwerte "technisch"/fremd (grossformatige quadratische Standard-Avatare,
   schmucklose Tab-/Listen-Typografie, nackte Tabellenoptik). Rein optische Anpassung ueber CSS,
   keine Template-/Core-Aenderung - BuddyPress/bbPress bleiben technisch unveraendert. */
#buddypress img.avatar, #bbpress-forums img.avatar, #buddypress .avatar {
  border-radius: 50%; object-fit: cover;
}
#buddypress #item-header-avatar img.avatar { max-width: 90px; max-height: 90px; }
#buddypress .item-list .item-avatar img.avatar, #buddypress .item-list .avatar { max-width: 56px; max-height: 56px; }
#bbpress-forums .bbp-author-avatar img.avatar { max-width: 40px; max-height: 40px; }

#buddypress div.item-list-tabs ul li a, #bbpress-forums .bbp-forum-info { font-family: inherit; }
#buddypress div.item-list-tabs ul li a {
  color: var(--bfg-text); font-weight: 600; padding: 10px 16px; border-radius: var(--bfg-radius-small) var(--bfg-radius-small) 0 0;
}
#buddypress div.item-list-tabs ul li.selected a, #buddypress div.item-list-tabs ul li.current a {
  color: var(--bfg-green-dark); border-bottom: 3px solid var(--bfg-green);
}

#buddypress .item-list, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-replies {
  list-style: none; margin: 0; padding: 0;
}
#buddypress .item-list > li, #bbpress-forums ul.bbp-topics > li, #bbpress-forums ul.bbp-forums > li {
  background: #fff; border-radius: var(--bfg-radius-small); box-shadow: var(--bfg-shadow); padding: 14px 16px; margin-bottom: 10px; border: none;
}
#bbpress-forums .bbp-topics-front .bbp-topic-title, #bbpress-forums .bbp-forum-title { font-weight: 600; }
#bbpress-forums .bbp-topics-front, #bbpress-forums .bbp-forums-front { background: transparent; border: none; }

/* ---------- Mitgliedersuche: kompakte Filter (QA-Befund 22.10.2026, Layout-Nachbesserung
   22.10.2026) ----------
   Interessenkatalog ist von 11 auf 23 gewachsen (einheitlicher Katalog mit Aktivitaeten/Ideen).
   Erste Fassung nutzte CSS-Mehrspalten-Flow (column-width) - auf breiten Bildschirmen entstanden
   dadurch ungebremst 5-6 schmale Spalten, in denen lange Bezeichnungen wie "Autos & Motorräder"
   mitten im Wort umbrachen (QA-Befund Browser-Abnahmetest). Jetzt festes CSS-Grid mit klar
   definierten Stufen (1/2/3 Spalten) statt automatischem Spaltenfluss - nie mehr als 3 Spalten,
   auch nicht auf sehr breiten Bildschirmen. Kontaktart/Verfuegbarkeit stehen zusaetzlich in
   <details> (siehe template-freunde-finden.php), damit der Suchen-Button auf dem Smartphone
   frueher erreichbar ist. */
.bfg-checkbox-columns { display: grid; grid-template-columns: 1fr; gap: 4px 20px; margin-top: 4px; }
.bfg-checkbox-columns .bfg-checkbox { margin: 0; width: 100%; white-space: nowrap; }
.bfg-filter-details { border: 1px solid var(--bfg-border); border-radius: var(--bfg-radius-small); padding: 10px 16px; margin-bottom: 16px; }
.bfg-filter-details summary { cursor: pointer; font-weight: 700; color: var(--bfg-green-dark); padding: 4px 0; min-height: 44px; display: flex; align-items: center; }
.bfg-filter-details[open] summary { margin-bottom: 6px; }

/* Tablet: 2 Spalten, sobald ausreichend Platz vorhanden ist. */
@media (min-width: 600px) {
  .bfg-checkbox-columns { grid-template-columns: repeat(2, 1fr); }
}
/* Breiter Desktop: 3 Spalten - fest gedeckelt, keine weitere Stufe darueber. */
@media (min-width: 1024px) {
  .bfg-checkbox-columns { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .bfg-form-row { flex-direction: column; }
  .bfg-auth-card { padding: 20px 16px; }
  .bfg-container { padding: 0 16px; }
  .bfg-checkbox-columns .bfg-checkbox { white-space: normal; }
  .bfg-fieldset,
  .bfg-filter-details { padding: 8px 12px; margin-bottom: 10px; }
  /* QA-Retest BFG-QA-203 (Retest-Befund): bbPress' eigene 480px-Regel setzt fuer Forum-/
     Themenlisten feste Prozentbreiten (siehe bbpress.css) - bei 375px reicht das nicht, Autor
     und letzter Beitrag wirkten weiterhin abgeschnitten. Jede "Spalte" wird hier stattdessen
     eine eigene volle Zeile (ID-Praefix fuer hoehere Spezifitaet als bbPress' eigene Regeln). */
  #bbpress-forums ul.forum-titles,
  #bbpress-forums li.bbp-header,
  #bbpress-forums li.bbp-body > ul.bbp-forums,
  #bbpress-forums li.bbp-body > ul.bbp-topics {
    display: block;
  }
  #bbpress-forums li.bbp-forum-info,
  #bbpress-forums li.bbp-topic-title,
  #bbpress-forums li.bbp-forum-topic-count,
  #bbpress-forums li.bbp-forum-reply-count,
  #bbpress-forums li.bbp-topic-voice-count,
  #bbpress-forums li.bbp-topic-reply-count,
  #bbpress-forums li.bbp-forum-freshness,
  #bbpress-forums li.bbp-topic-freshness {
    display: block; width: 100%; float: none; box-sizing: border-box;
  }
  /* QA-Retest BFG-QA-117: klarer, abgegrenzter horizontaler Scroll-Container statt die ganze
     Seite zu verbreitern (table als Block mit eigenem Overflow, nicht der umgebende Inhalt). */
}
/* QA-Retest BFG-QA-117 (Retest-Befund): expliziter Wrapper-Container statt display:block direkt
   auf <table> - zuverlässiger über verschiedene (auch eingebettete) Browser hinweg. Nicht nur
   mobil: die Tabelle kann prinzipiell auf jeder Breite zu breit werden (viele Spalten/lange
   Inhalte), der Container greift daher ohne eigene @media-Bindung. */
.bfg-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bfg-table-scroll table { width: max-content; min-width: 100%; }

/* ---------- SEO-Landingpages (template-landingpage.php), Breadcrumbs, Teilen ---------- */
.bfg-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 12px auto 0; padding: 0; font-size: .9rem; color: var(--bfg-text-light); }
.bfg-breadcrumbs li + li::before { content: "›"; margin-right: 4px; }
.bfg-breadcrumbs a { color: var(--bfg-text-light); }
.bfg-landing-hero { margin-top: 12px; }
.bfg-landing-hero .bfg-tagline { font-size: 1.15rem; max-width: 640px; }
.bfg-landing-hero .bfg-tagline p { margin: 0 0 .6em; }
.bfg-landing-claim { max-width: 640px; opacity: .95; }
.bfg-btn-on-dark { border-color: #fff; color: #fff; }
.bfg-plain-list { list-style: none; padding: 0; margin: 0; }
.bfg-filter-bar.bfg-plain-list li a { display: inline-flex; }
.bfg-link-list li { margin-bottom: 6px; }
.bfg-landing-steps { padding-left: 20px; }
.bfg-landing-steps li { margin-bottom: 8px; }
.bfg-empty-state p:last-child { margin-bottom: 0; }
.bfg-share { margin-top: 16px; }
.bfg-share-fallback a { word-break: break-all; }
.bfg-footer-regions { margin-top: 6px; font-size: .9rem; }
.bfg-footer-regions span { opacity: .85; }

/* QA-Retest BFG-QA-201: lange deutsche Komposita in Ueberschriften (z.B. "Nutzungsbedingungen",
   "Datenschutzerklärung") wurden mobil rechts abgeschnitten. Silbentrennung (lang="de") und
   als letzte Absicherung Umbruch an beliebiger Stelle; mobil etwas kleinere Hauptueberschrift.
   Tabellen in Seiteninhalten: Scroll-Container kommt aus BFG_Legal_Pages::wrap_content_tables(). */
h1, h2, h3, .bfg-card { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.bfg-card td, .bfg-card th { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; vertical-align: top; }
.bfg-card .bfg-table-scroll table { border-collapse: collapse; }
.bfg-card .bfg-table-scroll td, .bfg-card .bfg-table-scroll th { padding: 6px 10px; border-bottom: 1px solid var(--bfg-border); text-align: left; max-width: 22em; }
@media (max-width: 600px) {
  h1 { font-size: 1.6rem; }
}

/* QA-Retest BFG-QA-111: Antwortformular einer gesperrten Unterhaltung sichtbar deaktiviert. */
#buddypress .send-reply.bfg-reply-disabled { opacity: .55; pointer-events: none; }

/* Profilbild/Titelbild im Profil-Vervollstaendigen-Workflow und in der BFG-Profilansicht
   (Einstiege in die nativen BuddyPress-Seiten, keine eigene Upload-Oberflaeche). */
.bfg-profile-media { margin-bottom: 20px; }
.bfg-profile-media h2 { margin-top: 0; }
.bfg-profile-media-grid { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.bfg-profile-media-item { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.bfg-profile-media-item .bfg-note { max-width: 100%; overflow-wrap: anywhere; }
.bfg-profile-media-item .bfg-note { margin: 0; }
.bfg-avatar-preview { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; }
/* min-width: 0 noetig: aspect-ratio + min-height erzwingt sonst ueber die automatische Mindestgroesse
   64px x 1300/225 = ca. 370px Breite (horizontaler Ueberlauf auf Smartphones, BFG-QA-303). */
.bfg-cover-preview { width: 100%; min-width: 0; max-width: 100%; aspect-ratio: 1300 / 225; min-height: 64px; border-radius: var(--bfg-radius-small); overflow: hidden; background: #e8ece9; }
.bfg-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bfg-cover-placeholder { display: flex; align-items: center; justify-content: center; color: #5f6b64; background: linear-gradient(135deg, #e8ece9, #dfe6e1); font-size: .9rem; }
.bfg-profile-cover { margin: -8px -8px 16px; border-radius: var(--bfg-radius-small); overflow: hidden; aspect-ratio: 1300 / 225; background: #e8ece9; }
.bfg-profile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .bfg-profile-media-grid { grid-template-columns: 1fr; } }

/* Aktivitaeten: Tourlink, Rueckblick, Erlebnisgalerie (V1 ohne Likes/Kommentare). */
.bfg-route-link a { font-weight: 600; }
.bfg-activity-recap { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e3e7e4; }
.bfg-recap-text { margin-bottom: 16px; }
.bfg-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 0 0 16px; }
.bfg-photo { display: flex; flex-direction: column; gap: 6px; }
/* QA-Fix responsive-image-crops: Galerie/Detailansicht soll deutlich weniger croppen als die
   Kartenvorschauen - die Kachel behaelt ein festes Seitenverhaeltnis fuer ein ruhiges Raster,
   aber object-fit:contain zeigt das Foto vollstaendig (auch Hochformat), statt es wie eine
   Vorschaukarte zu beschneiden. Der Link fuehrt zusaetzlich zum unbeschnittenen Originalfoto. */
.bfg-photo a { width: 100%; aspect-ratio: 4 / 3; background: var(--bfg-green-light); border-radius: var(--bfg-radius-small); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bfg-photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.bfg-photo-report summary, .bfg-activity-extras summary { cursor: pointer; font-size: .9rem; }
.bfg-photo-upload input[type="file"] { max-width: 100%; }

/* Anzeigename (Teil der Karte "Dein Auftritt in der Community") */
.bfg-display-name-form { margin-bottom: 20px; }
.bfg-display-name-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bfg-display-name-row .bfg-input { flex: 1 1 220px; max-width: 360px; }
.bfg-profile-media h3 { margin: 16px 0 4px; }
.bfg-display-name-missing { background: #fff6e0; border-left: 4px solid #d99a00; padding: 8px 12px; border-radius: var(--bfg-radius-small); margin: 0 0 12px; }