@charset "UTF-8";
/* =============================================================================
 * figgsch.scss — Design-System 2026.figgsch.com
 * -----------------------------------------------------------------------------
 * ZWECK
 *   Vollstaendige Ueberfuehrung aller Inline-Styles aus
 *   _design_export/Figgsch.dc.html in ein gegliedertes Klassen-System.
 *   Praefix durchgaengig `fg-`. Keine Fremd-Klassennamen, keine Filter-Trigger.
 *   Werte (Farben, Abstaende, Radien, Schatten, aspect-ratio, Transitions)
 *   sind 1:1 aus dem Export uebernommen — nicht gerundet, nicht "verbessert".
 *
 * NAMENSVERTRAG
 *   Massgeblich sind die Klassen des PHP-Layouts
 *   (inc/layout/head.php, header.php, footer.php, agegate.php,
 *    inc/views/404.php, inc/lib/seo.php). Dieses Stylesheet folgt ihnen.
 *   Klassen ohne Layout-Entsprechung (Karten, Grid, Stories, Filter, Tipps,
 *   Pagination, SEO-Block, Story-Viewer) bleiben unveraendert — die
 *   Seiten-Views werden dagegen gebaut.
 *
 * ABHAENGIGKEITEN
 *   - Google Fonts: Poppins 500/600/700/800, Inter 400/500/600/700 (display=swap)
 *     Einbindung im <head> via <link>, nicht via @import.
 *   - Kompilierung ueber public/style.php (scssphp), Cache in scss_cache/.
 *   - Verhalten/Zustandsklassen werden von assets/js/figgsch.js gesetzt
 *     (`.is-open`, `.is-active`, `.is-on`, `.is-hidden`, `.fg-head--shrunk`, …).
 *   - Kein Dark Mode (Logo benoetigt weissen Grund) — bewusst nicht implementiert.
 *
 * GLIEDERUNG
 *    1. Tokens
 *    2. Reset / Base
 *    3. Typografie
 *    4. Layout / Container
 *    5. Header + Navigation
 *    6. Dropdown-Panels (Regionen / Kategorien / Umkreis)
 *    7. Slot-Flaechen (Partnerbereiche)
 *    8. Stories
 *    9. Filterleiste
 *   10. Karten-Grid
 *   11. Karte — overlay + below
 *   12. Badges
 *   13. Tagestipp
 *   14. Pagination / Weitere laden
 *   15. SEO-Block
 *   16. Footer
 *   17. Story-Viewer
 *   18. Altersfreigabe
 *   19. Kruemelnavigation + Leerzustand
 *   20. Utilities
 *   22. Galerie + Lichtkasten          (detail.php, studio_detail.php)
 *   23. Detailseite                    (detail.php, studio_detail.php)
 *   24. Steckbrief / Anwesenheit / Kontaktkarte
 *   25. Bewertungen
 *   26. Formulare + Statusmeldungen    (detail.php, kontakt.php)
 *   27. Statische Seiten               (legal.php, faq.php, regeln.php, kontakt.php)
 *   28. Studios / Betriebe             (studios.php, studio_detail.php)
 *   29. Aehnliche Inserate + Fallbacks
 *   21. Media Queries                  (steht bewusst zuletzt)
 * ========================================================================== */
/* =============================================================================
 * 1. TOKENS
 * ========================================================================== */
/* Schriften selbst gehostet (vorher Google Fonts, renderblockierend).
   Inter ist eine variable Schrift: eine Datei deckt 400 bis 700 ab. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/poppins-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/poppins-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* Marke */
  --fg-pink: #FA1C7E;
  --fg-magenta: #D0076A; /* leicht dunkler: Text auf Rosa erreicht 4.5:1 */
  --fg-dark: #A30364;
  --fg-deep: #84045E;
  --fg-purple: #720063;
  --fg-rose: #FD6C9E;
  --fg-coral: #FE4F7E;
  --fg-blush: #FF9A95;
  /* Verlaeufe */
  --fg-grad: linear-gradient(135deg, #FD4D6A, #FB1282);
  --fg-grad-ring: linear-gradient(135deg, #FF9A95, #FA1C7E 55%, #720063);
  /* Flaechen */
  --fg-bg: #FFFFFF;
  --fg-soft: #FAF7FA;
  --fg-elev: #F4EFF4;
  /* Text + Linien */
  --fg-ink: #2A1E2E;
  --fg-mute: #6B5D71; /* 4.5:1 auch auf --fg-elev */
  --fg-line: #EBE2EB;
  --fg-tint: #FFF0F6;
  --fg-tint-line: #FAD6E6;
  /* Status */
  --fg-teal: #0B7D71; /* dunkler: weisse Schrift 4.5:1 */
  --fg-green: #1FA855;
  /* Schatten */
  --fg-shadow: 0 4px 16px rgb(132 4 94 / .07);
  --fg-shadow-hi: 0 12px 30px rgb(132 4 94 / .16);
  /* Mass */
  --fg-wrap: 1320px;
}

/* Interne SCSS-Variablen (nur fuer Breakpoints — Farben bleiben Custom Properties,
   damit sie zur Laufzeit inspizierbar/ueberschreibbar sind). */
/* Schriftstacks */
/* =============================================================================
 * 2. RESET / BASE
 * ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
.fg-root {
  scroll-behavior: smooth;
}

body,
.fg-body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fg-bg);
  color: var(--fg-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Scroll-Lock (Story-Viewer, Altersfreigabe, Off-Canvas-Filter) */
body.fg-locked {
  overflow: hidden;
  touch-action: none;
}

a {
  color: var(--fg-magenta);
  text-decoration: none;
}
a:hover {
  color: var(--fg-dark);
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
select,
textarea {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid #FD6C9E;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Skip-Link */
.fg-skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: var(--fg-pink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
}
.fg-skip:focus, .fg-skip:focus-visible {
  left: 12px;
  color: #fff;
}

/* Inhaltsbereich zwischen Kopf und Fuss */
.fg-main {
  display: block;
}

/* =============================================================================
 * 3. TYPOGRAFIE
 * ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

/* Hero / Seitenkopf */
.fg-hero {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 34px 20px 8px;
}

.fg-hero__title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 16ch;
  text-wrap: balance;
}

.fg-hero__lead {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--fg-mute);
  font-size: clamp(15px, 1.7vw, 18px);
  text-wrap: pretty;
}

/* Abschnitts-Ueberschrift gross (z. B. "Alle Inserate") */
.fg-h2 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
}

/* Ueberschrift innerhalb einer Karte (z. B. "Anwesenheit" in der Seitenspalte) */
.fg-h3 {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-ink);
}

/* Abschnitts-Ueberschrift klein/Eyebrow (z. B. "Aktuelle Stories") */
.fg-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  padding: 0 20px 12px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Zaehler in Klammern hinter der Ueberschrift */
.fg-count {
  font-size: 0.6em;
  font-weight: 500;
  color: var(--fg-mute);
}

/* =============================================================================
 * 4. LAYOUT / CONTAINER
 * ========================================================================== */
.fg-wrap {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* Sektion "Alle Inserate" */
.fg-listing {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 28px 20px 40px;
}

/* Kopfzeile der Listing-Sektion: Titel links, Filter-Button rechts */
.fg-listhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* =============================================================================
 * 5. HEADER + NAVIGATION
 * ========================================================================== */
.fg-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--fg-line);
  box-shadow: none;
  transition: box-shadow 0.2s;
}

/* Zustand scrollY > 40 — wird von initStickyHeader() gesetzt */
.fg-head--shrunk {
  box-shadow: 0 2px 14px rgba(132, 4, 94, 0.08);
}
.fg-head--shrunk .fg-head__logo {
  height: 32px;
}

.fg-head__inner {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
}

/* Die Marke darf als einziges Kopf-Element schrumpfen. min-width:0 hebt die
   Flex-Mindestbreite auf, object-fit haelt dabei das Seitenverhaeltnis —
   so entsteht auf schmalen Geraeten kein horizontaler Ueberlauf. */
.fg-head__brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  /* Antippflaeche 44px hoch — der Kopf ist ohnehin 64px hoch, das Logo
     bleibt vertikal zentriert. */
  min-height: 44px;
}

.fg-head__logo {
  height: 42px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  transition: height 0.2s;
}

/* --- Hauptnavigation ------------------------------------------------------ */
.fg-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}

.fg-nav__link {
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--fg-ink);
  font-weight: 500;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fg-nav__link:hover {
  background: var(--fg-soft);
  color: var(--fg-magenta);
}

/* --- Rechte Aktionsgruppe ------------------------------------------------- */
/* Die Aktionsgruppe behaelt ihre Breite — geschrumpft wird nur die Marke. */
.fg-head__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* --- Ortssuche mit Umkreis ------------------------------------------------ */
.fg-find {
  /* Anker fuer die absolut positionierte Vorschlagsliste */
  position: relative;
  display: flex;
  align-items: center;
  background: var(--fg-elev);
  border: 1px solid var(--fg-line);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
  gap: 6px;
}

/* Beschriftung bleibt fuer Screenreader erhalten, ist aber nicht sichtbar */
.fg-find__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fg-find__input {
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  width: 120px;
  color: var(--fg-ink);
}

.fg-find__go {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--fg-grad);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.fg-find__go svg {
  width: 18px;
  height: 18px;
}

/* Vorschlagsliste der Ortssuche (PLZ/Ort) — befuellt von figgsch.js.
   Gleiche Optik wie .fg-nav__panel, aber ohne Ein-/Ausblend-Transition:
   die Liste erscheint waehrend des Tippens und darf nicht nachziehen. */
.fg-find__suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(340px, 80vw);
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(132, 4, 94, 0.16);
  z-index: 120;
  padding: 6px;
}

.fg-find__suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--fg-ink);
  text-align: left;
}
.fg-find__suggest-item:hover, .fg-find__suggest-item.is-active {
  background: var(--fg-tint);
  color: var(--fg-magenta);
}

.fg-find__suggest-plz {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-mute);
}
.fg-find__suggest-item:hover .fg-find__suggest-plz, .fg-find__suggest-item.is-active .fg-find__suggest-plz {
  color: inherit;
}

/* --- Merkliste im Kopf ---------------------------------------------------- */
.fg-head__noted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  /* Mindest-Antippflaeche 44x44 (WCAG 2.5.5) */
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  color: var(--fg-ink);
  flex-shrink: 0;
}
.fg-head__noted:hover {
  background: var(--fg-soft);
  color: var(--fg-magenta);
}

.fg-head__noted-icon {
  font-size: 21px;
  line-height: 1;
  color: var(--fg-pink);
}

.fg-head__noted-count {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fg-grad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.fg-head__noted-count.is-on {
  display: inline-block;
}

/* Leere Merkliste — Zaehler bleibt aus (serverseitig und per JS gesetzt) */
.fg-head__noted-count--empty {
  display: none;
}

/* --- Konto-Links + CTA ---------------------------------------------------- */
.fg-head__link {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 15px;
  color: var(--fg-ink);
  padding: 9px 10px;
  min-height: 44px;
  white-space: nowrap;
}
.fg-head__link:hover {
  color: var(--fg-magenta);
}

.fg-head__link--signup {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg-magenta);
  border: 1px solid var(--fg-pink);
  padding: 8px 16px;
  border-radius: 999px;
}
.fg-head__link--signup:hover {
  background: var(--fg-tint);
}

/* Primaerer CTA "Inserieren" — pulsierend */
.fg-head__cta {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--fg-grad);
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(250, 28, 126, 0.35);
  animation: figgpulse 3.5s infinite;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
  flex-shrink: 0;
}
.fg-head__cta:hover {
  filter: brightness(0.94);
  color: #fff;
}

/* Burger — nur < 900px sichtbar (siehe Media Queries) */
.fg-head__burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--fg-elev);
  font-size: 24px;
  color: var(--fg-ink);
  place-items: center;
  flex-shrink: 0;
}

/* --- Mobiles Menu (Kategorie-Chips + Links unter dem Header) --------------- */
.fg-drawer {
  display: none;
  border-top: 1px solid var(--fg-line);
}
.fg-drawer[hidden] {
  display: none;
}
.fg-drawer.is-open {
  display: block;
}

.fg-drawer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
}

.fg-drawer__chip {
  padding: 8px 14px;
  background: var(--fg-elev);
  border-radius: 999px;
  color: var(--fg-ink);
  font-size: 14px;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.fg-drawer__chip:hover {
  background: var(--fg-tint);
  color: var(--fg-magenta);
}

.fg-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--fg-line);
}

.fg-drawer__link {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--fg-ink);
  font-weight: 500;
  font-size: 15px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.fg-drawer__link:hover {
  background: var(--fg-soft);
  color: var(--fg-magenta);
}

/* =============================================================================
 * 6. DROPDOWN-PANELS
 *    Regionen (440px), Kategorien (380px), Umkreis (min-width 130px).
 *    Keine nativen <select>. Pending-Auswahl bis "Anwenden".
 * ========================================================================== */
.fg-nav__drop {
  position: relative;
}

.fg-nav__trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  color: var(--fg-ink);
  background: transparent;
}
.fg-nav__trigger[aria-expanded=true] {
  color: var(--fg-magenta);
  background: var(--fg-soft);
}

.fg-nav__trigger-text {
  display: inline-block;
}

/* Carets und Lupe sind Inline-SVGs (stroke: currentColor) — Textglyphen
   wie ▾ und ⌕ fuellen ihre Em-Box kaum und wirkten winzig. */
.fg-nav__caret {
  display: inline-flex;
  align-items: center;
  opacity: 0.75;
}
.fg-nav__caret svg {
  width: 15px;
  height: 15px;
}

.fg-nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 380px;
  max-width: min(380px, 80vw);
  background: #fff;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(132, 4, 94, 0.16);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.fg-nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Breitenvariante Regionen */
.fg-nav__panel--region {
  width: 440px;
  max-width: min(440px, 80vw);
}

/* Kategorien behalten die Basisbreite */
.fg-nav__panel--category {
  width: 380px;
  max-width: min(380px, 80vw);
}

.fg-nav__scroll {
  max-height: 300px;
  overflow: auto;
  padding: 12px 14px;
}

.fg-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.fg-nav__opt {
  /* Flex statt Block: die Mindesthoehe von 44px (WCAG 2.5.5) bleibt so
     optisch mittig, ohne dass sich die Textposition verschiebt. */
  display: flex;
  align-items: center;
  text-align: left;
  padding: 8px 10px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  color: var(--fg-ink);
}
.fg-nav__opt:hover {
  background: var(--fg-soft);
}
.fg-nav__opt {
  /* Pending-Auswahl (noch nicht uebernommen) */
}
.fg-nav__opt.is-selected {
  border-color: var(--fg-tint-line);
  background: var(--fg-tint);
  color: var(--fg-magenta);
}

/* Serverseitig gesetzte, bereits aktive Auswahl */
.fg-nav__opt--on {
  border-color: var(--fg-tint-line);
  background: var(--fg-tint);
  color: var(--fg-magenta);
}

.fg-nav__foot {
  padding: 12px 14px;
  border-top: 1px solid var(--fg-line);
}

/* --- Mehrfachauswahl Regionen / Kategorien ---------------------------------
   Alle Einträge auf einen Blick (kein verstecktes Scrollen), jede Option als
   erkennbare Kachel mit Kästchen; gewählte Kacheln magenta mit Häkchen. */
.fg-nav__hint {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
}

.fg-nav__panel--region {
  width: 660px;
  max-width: min(660px, 92vw);
}

.fg-nav__panel--category {
  width: 460px;
  max-width: min(460px, 92vw);
}

.fg-nav__panel--region .fg-nav__scroll,
.fg-nav__panel--category .fg-nav__scroll {
  max-height: calc(100vh - 220px);
  padding: 10px 16px 14px;
}

.fg-nav__grid--multi {
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fg-nav__panel--region .fg-nav__grid--multi {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fg-nav__opt--check,
.fg-nav__opt--all {
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  background: var(--fg-soft);
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fg-nav__opt--check:hover,
.fg-nav__opt--all:hover {
  border-color: var(--fg-tint-line);
  background: #fff;
}
.fg-nav__opt--check.is-selected,
.fg-nav__opt--all.is-selected {
  border-color: var(--fg-pink);
  background: var(--fg-tint);
  color: var(--fg-dark);
  font-weight: 600;
}

.fg-nav__opt--all {
  grid-column: 1/-1;
  justify-content: center;
  font-weight: 600;
}

.fg-nav__box {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cdbfcf;
  border-radius: 5px;
  background: #fff;
  position: relative;
}
.is-selected > .fg-nav__box {
  border-color: var(--fg-magenta);
  background: var(--fg-magenta);
}
.is-selected > .fg-nav__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fg-nav__optlabel {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.25;
}

/* Im mobilen Menü etwas kompakter, damit lange Kantonsnamen in eine Zeile passen */
.fg-mnav__drop .fg-nav__opt--check {
  gap: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
}

.fg-nav__apply {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--fg-grad);
  padding: 11px;
  border-radius: 999px;
}
.fg-nav__apply:hover {
  filter: brightness(0.94);
}

/* --- Umkreis -------------------------------------------------------------- */
.fg-find__radius {
  position: relative;
}

.fg-find__radius-trigger {
  border: none;
  background: none;
  font-size: 13px;
  color: var(--fg-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fg-find__caret {
  display: inline-flex;
  align-items: center;
  opacity: 0.75;
}
.fg-find__caret svg {
  width: 13px;
  height: 13px;
}

.fg-find__radius-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 130px;
  background: #fff;
  border: 1px solid var(--fg-line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(132, 4, 94, 0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 130;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.fg-find__radius-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fg-find__radius-opt {
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  color: var(--fg-ink);
}
.fg-find__radius-opt:hover {
  background: var(--fg-soft);
}
.fg-find__radius-opt.is-selected {
  border-color: var(--fg-tint-line);
  background: var(--fg-tint);
  color: var(--fg-magenta);
}

.fg-find__radius-opt--on {
  border-color: var(--fg-tint-line);
  background: var(--fg-tint);
  color: var(--fg-magenta);
}

/* =============================================================================
 * 7. SLOT-FLAECHEN (Partnerbereiche)
 *    Neutral benannt — keine filterbaren Begriffe.
 * ========================================================================== */
/* Gemeinsames Grundverhalten aller Flaechen.
   Ein Platz ist ein Block ohne erzwungenes Seitenverhaeltnis: seine Hoehe
   ergibt sich aus dem ersten Motiv. Nur so bleibt jedes Werbemittel
   vollstaendig sichtbar. */
.fg-slot {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Ein Motiv innerhalb einer Flaeche. Das erste liegt im Fluss und gibt dem
   Platz seine Hoehe; die uebrigen liegen deckungsgleich darueber und werden
   per Deckkraft eingeblendet. Ohne JavaScript bleibt das erste Motiv sichtbar
   und anklickbar. */
.fg-slot__item {
  /* Bezugsrahmen fuer die Hintergrundebene (.fg-slot__bg). */
  position: relative;
  display: block;
  opacity: 0;
  pointer-events: none;
  /* Abgehendes Motiv: bleibt volle .5s sichtbar und verschwindet erst
     danach schlagartig — zu diesem Zeitpunkt liegt das neue bereits
     deckend darueber. Blendeten beide gleichzeitig, waeren sie in der
     Mitte je halbdurchsichtig und die weichgezeichnete Ebene blitzte
     durch. Genau das soll hier nicht passieren. */
  transition: opacity 0s ease 0.5s;
}
.fg-slot__item.is-current {
  opacity: 1;
  pointer-events: auto;
  /* Ankommendes Motiv liegt oben und blendet weich ein. */
  z-index: 3;
  transition: opacity 0.5s ease;
}
.fg-slot__item:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Deckungsgleich, aber niemals beschnitten. */
}
.fg-slot__item:not(:first-child) .fg-slot__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hintergrundebene — dasselbe Motiv, formatfuellend und weichgezeichnet.
   Weil das Motiv selbst nie beschnitten wird (object-fit: contain), bleibt je
   nach Verhaeltnis von Platz und Motiv oben/unten oder links/rechts Leerraum.
   Diese Ebene fuellt ihn mit den Farben des Motivs.

   transform: scale(1.15) vergroessert die Ebene ueber den Platz hinaus, damit
   der Weichzeichner an den Raendern nicht ausfranst — ohne die Vergroesserung
   wuerde blur() dort gegen Transparenz rechnen und einen hellen Saum ziehen.
   .fg-slot hat overflow:hidden und beschneidet den Ueberstand.

   Kein will-change: filter/transform. Die Ebene wird nie animiert (bewegt
   wird allein die Deckkraft des Elternelements), blur() erzwingt in Blink und
   WebKit ohnehin eine eigene Compositing-Ebene, und will-change wuerde diese
   Ebene fuer jeden Platz der Seite dauerhaft im Speicher halten. Bei rund
   einem Dutzend Plaetzen je Seite waere das reine Kosten ohne Gegenwert —
   gerade auf schwachen Geraeten. */
.fg-slot__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Sehr kraeftig: die Ebene soll als reine Farbflaeche gelesen werden.
     Bei schwaecherem Wert bleiben Schrift und Gesichter erkennbar und das
     Ganze wirkt wie ein Darstellungsfehler statt wie ein Hintergrund.
     Saettigung leicht angehoben, Helligkeit gedaempft, damit die Flaeche
     farbig traegt, ohne dem scharfen Motiv die Aufmerksamkeit zu nehmen. */
  filter: blur(64px) saturate(1.5) brightness(0.82);
  /* Die Vergroesserung muss zur Weichzeichnung passen, sonst franst der
     Rand aus und es entsteht ein heller Saum. */
  transform: scale(1.6);
  /* Erzwingt eine eigene Compositing-Ebene. Ohne das rendert Chrome den
     Weichzeichner auf manchen Geraeten gar nicht durch — die Ebene bleibt
     dann scharf und sieht wie ein Darstellungsfehler aus. */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Schleier zwischen Hintergrundebene und Motiv.
   Zweite Absicherung: sollte der Weichzeichner auf einem Geraet nicht
   durchrendern, bleibt die Flaeche trotzdem eine Farbflaeche und wird nie
   als zweites, scharfes Bild gelesen. Rein dekorativ.

   Sitzt bewusst am .fg-slot, nicht am .fg-slot__item: der Leerraum liegt
   ZWISCHEN beiden (das Item ist nur so hoch wie sein Motiv, der Platz kann
   hoeher sein). Ein Schleier am Item wuerde genau die Flaeche verfehlen,
   um die es geht. */
.fg-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Dezent gehalten: der eigentliche Weichzeichner auf .fg-slot__bg greift
     jetzt zuverlaessig, der Schleier ist nur noch Absicherung. Kein
     backdrop-filter mehr — er war doppelt gemoppelt und auf schwachen
     Geraeten teuer, weil er ueber jeden Platz eine eigene Ebene legt. */
  background: rgba(20, 2, 14, 0.16);
  pointer-events: none;
}

.fg-slot--empty::before {
  content: none;
}

/* Werbemittel werden nie beschnitten. Natuerliche Groesse, hoechstens nach
   unten skaliert — kein object-fit: cover, keine feste Hoehe.
   Liegt ueber der Hintergrundebene. */
.fg-slot__img {
  position: relative;
  /* Ueber dem Schleier (.fg-slot::before, z-index 1) — das Motiv selbst
     darf weder gedaempft noch weichgezeichnet werden. */
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Platzhalter tragen keine Motive und damit auch keine Hintergrundebene. */
.fg-slot--empty .fg-slot__bg {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .fg-slot__item {
    transition: none;
  }
}
.fg-slot__label {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.05em;
  text-align: center;
}

/* Unbelegte Flaeche — schraffierter Platzhalter (heller Grund).
   Nur hier gilt ein festes Seitenverhaeltnis: ohne Bild braucht die Flaeche
   eine Hoehe, damit das Raster nicht zusammenfaellt. */
.fg-slot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #E3B9D0;
  background: repeating-linear-gradient(135deg, #FBF3F8, #FBF3F8 13px, #F6E9F1 13px, #F6E9F1 26px);
}
.fg-slot--empty .fg-slot__label {
  font-size: 11px;
  color: #B07E9C;
}

/* Kopfleiste, magenta Grund */
.fg-slot-head {
  background: var(--fg-magenta);
  margin-top: 18px;
}

.fg-slot-head .fg-slot:not(.fg-slot--empty) {
  /* Kopfbanner aus lustgate.org haben das Format 18:7 (z. B. 360 x 140).
     Die Fläche reserviert ihre Höhe vor dem Laden des Bildes, sonst
     rutscht beim Eintreffen alles darunter nach unten (CLS). */
  aspect-ratio: 18/7;
}

.fg-slot-head__inner {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 22px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Einzelflaeche auf farbigem Grund.
   Rahmen und Grund kennzeichnen den unbelegten Zustand und gelten deshalb nur
   dort — eine belegte Flaeche zeigt allein ihr Bild. */
.fg-slot--light {
  border-radius: 10px;
  overflow: hidden;
}
.fg-slot--light.fg-slot--empty {
  aspect-ratio: 470/158;
  background: rgba(255, 255, 255, 0.1);
  border: 1px dashed rgba(255, 255, 255, 0.55);
}
.fg-slot--light .fg-slot__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.05em;
  text-align: center;
}

/* Einzelflaeche auf hellem Grund; schraffiert nur im unbelegten Zustand. */
.fg-slot--paper {
  border-radius: 12px;
  overflow: hidden;
}
.fg-slot--paper.fg-slot--empty {
  border: 1px dashed #E3B9D0;
  background: repeating-linear-gradient(135deg, #FBF3F8, #FBF3F8 13px, #F6E9F1 13px, #F6E9F1 26px);
}
.fg-slot--paper .fg-slot__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: #B07E9C;
  letter-spacing: 0.05em;
}

/* Einzelflaeche im Fussbereich (dunkler Grund) */
.fg-slot--foot {
  border-radius: 10px;
  overflow: hidden;
}
.fg-slot--foot.fg-slot--empty {
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.5);
}
.fg-slot--foot .fg-slot__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
}

/* Inline-Flaechen zwischen den Karten (2 Stueck, volle Gridbreite) */
.fg-slot-inline {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 12px 0;
  /* Nur der unbelegte Platz braucht ein Mass — belegte Flaechen richten sich
     nach ihrem Werbemittel. */
}
.fg-slot-inline .fg-slot--paper.fg-slot--empty {
  aspect-ratio: 900/300;
}

/* Abschluss-Sektion unter dem Grid */
.fg-slot-end {
  background: var(--fg-soft);
  border-top: 1px solid var(--fg-line);
}

.fg-slot-end__inner {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 26px 20px 30px;
}

.fg-slotgrid--end {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.fg-slotgrid--end .fg-slot--paper {
  border-radius: 10px;
}
.fg-slotgrid--end .fg-slot--paper.fg-slot--empty {
  aspect-ratio: 300/120;
  background: repeating-linear-gradient(135deg, #FBF3F8, #FBF3F8 12px, #F6E9F1 12px, #F6E9F1 24px);
}

/* Footer-Flaechen */
.fg-slotgrid--foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.fg-slotgrid--foot .fg-slot--foot.fg-slot--empty {
  aspect-ratio: 300/120;
}

/* Kleine Footer-Flaechenreihe */
.fg-slotgrid--mini {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.fg-slot--mini {
  width: 180px;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.fg-slot--mini.fg-slot--empty {
  height: 66px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.5);
}
.fg-slot--mini .fg-slot__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
}

/* Die Sichtbarkeit der Motive regelt .fg-slot__item weiter oben (Deckkraft
   statt display, damit der Wechsel weich laeuft und die Hoehe des Platzes
   konstant bleibt). */
/* Zusammengefalteter Platz.
   Auf schmalen Fenstern traegt eine Reihe weniger Plaetze als auf breiten. Der
   wegfallende Platz wird hier ausgeblendet — seine Motive sind zu diesem
   Zeitpunkt bereits in einen verbleibenden Platz umgehaengt (initSlotFold in
   assets/js/figgsch.js) und rotieren dort mit. Es geht also kein gebuchtes
   Motiv verloren, es wechselt nur den Platz.

   Bewusst `display: none` statt Deckkraft: der Platz soll keine Gitterzelle
   mehr belegen, sonst bliebe eine Luecke im Raster stehen. */
.fg-slot--folded {
  display: none;
}

/* --- Personalisierungs-Hinweis ------------------------------------------- */
.fg-perso {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.fg-perso__pill {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--fg-line);
  border-radius: 999px;
  padding: 9px 10px 9px 20px;
}

.fg-perso__text {
  font-size: 14px;
  color: var(--fg-mute);
}

.fg-perso__off {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-dark);
  background: var(--fg-tint);
  border: 1px solid var(--fg-tint-line);
  padding: 7px 14px;
  border-radius: 999px;
}
.fg-perso__off[hidden] {
  display: none;
}

/* =============================================================================
 * 8. STORIES
 * ========================================================================== */
.fg-stories {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 18px 0 6px;
}

/* Bezugsrahmen fuer die Pfeile */
.fg-stories__box {
  position: relative;
}

/* Grundzustand = gewoehnliche Scroll-Leiste. Diese Regeln stehen bewusst
 * nach dem Swiper-Stylesheet und ueberschreiben dessen `.swiper`-Vorgaben,
 * solange Swiper nicht laeuft. Erst mit `swiper-initialized` uebernimmt die
 * Bibliothek das Verschieben. So bleibt die Leiste ohne JavaScript — oder bei
 * ausgefallenem CDN — vollstaendig lesbar und bedienbar. */
.fg-stories__rail {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 20px 8px;
}

.fg-stories__rail:not(.swiper-initialized) {
  scroll-snap-type: x mandatory;
}

.fg-stories__rail.swiper-initialized {
  overflow: hidden;
}

.fg-stories__track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Mit Swiper uebernimmt `spaceBetween` den Abstand — sonst zaehlte er doppelt. */
.fg-stories__rail.swiper-initialized .fg-stories__track {
  gap: 0;
}

.fg-stories__cell {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  scroll-snap-align: start;
}

/* Pfeile: nur auf Zeigergeraeten, und erst wenn Swiper laeuft (bis dahin
 * tragen die Knoepfe `hidden`). Auf Touch genuegt das Wischen. */
.fg-stories__nav {
  display: none;
  position: absolute;
  top: 44px;
  z-index: 3;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fg-pink), var(--fg-purple));
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.fg-stories__nav:hover {
  transform: scale(1.08);
}
.fg-stories__nav:focus-visible {
  outline: 2px solid var(--fg-purple);
  outline-offset: 2px;
}
.fg-stories__nav {
  /* Swiper markiert das Ende der Leiste */
}
.fg-stories__nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.fg-stories__nav--prev {
  left: 2px;
}

.fg-stories__nav--next {
  right: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .fg-stories__nav:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg-stories__rail .swiper-wrapper {
    transition-duration: 0s !important;
  }
  .fg-stories__nav {
    transition: none;
  }
}
.fg-story {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 112px;
  text-decoration: none;
  color: inherit;
}

.fg-story__ring {
  display: block;
  position: relative;
  border-radius: 999px;
  padding: 4px;
  background: var(--fg-grad-ring);
}

/* Auffüller ohne eigene Story — bewusst kein Verlaufsring, sondern ein
 * dezenter einfarbiger Rand, damit der Unterschied auf einen Blick sichtbar
 * ist. Die Kennzeichnung „Neu" trägt die Aussage zusätzlich in Textform. */
.fg-story--new .fg-story__ring {
  background: #D8CCDA;
  padding: 3px;
}

/* Gesehene Story — grauer Ring */
.fg-story.is-seen .fg-story__ring {
  background: #D8CCDA;
}

.fg-story__inner {
  display: block;
  background: #fff;
  border-radius: 999px;
  padding: 3px;
}

.fg-story--new .fg-story__inner {
  padding: 2px;
}

/* Kennzeichnung unter dem Bild — „Story" bzw. „Neu" */
.fg-story__tag {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Dunkles Violett statt --fg-pink: Weiss auf --fg-pink erreicht bei dieser
 * Schriftgroesse nur 3.8:1 und damit nicht die geforderten 4.5:1. */
.fg-story__tag--live {
  background: var(--fg-purple);
  color: #fff;
}

.fg-story__tag--new {
  background: #fff;
  color: var(--fg-purple);
  border: 1px solid #D8CCDA;
}

.fg-story__img {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  display: block;
}

.fg-story__name {
  font-size: 13px;
  color: var(--fg-ink);
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================================
 * 9. FILTERLEISTE
 * ========================================================================== */
/* Mobiler Oeffner "⚙ Filter" — nur < 760px sichtbar */
.fg-filterbtn {
  display: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-ink);
  background: var(--fg-elev);
  border: 1px solid var(--fg-line);
  padding: 9px 16px;
  border-radius: 999px;
  min-height: 44px;
  align-items: center;
}

.fg-filterbar {
  padding: 2px 0 16px;
  border-bottom: 1px solid var(--fg-line);
}

.fg-filterctl {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

/* Toggle-Chip */
.fg-chip {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--fg-line);
  background: #fff;
  color: var(--fg-ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.fg-chip:hover {
  border-color: var(--fg-tint-line);
}
.fg-chip[aria-pressed=true] {
  border-color: var(--fg-pink);
  background: var(--fg-tint);
  color: var(--fg-magenta);
}

/* Trenner in der Filterleiste */
.fg-sep {
  width: 1px;
  height: 24px;
  background: var(--fg-line);
  margin: 0 3px;
}

/* Dropdown-Button in der Filterleiste (Pillform) */
.fg-fchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fg-line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--fg-ink);
  cursor: pointer;
  min-height: 44px;
}
.fg-fchip[aria-expanded=true] {
  border-color: var(--fg-pink);
}

/* --- Aktiv-Zeile ---------------------------------------------------------- */
.fg-active {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.fg-active.is-on {
  display: flex;
}

.fg-active__label {
  font-size: 13px;
  color: var(--fg-mute);
  align-self: center;
}

.fg-active__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-magenta);
  background: var(--fg-tint);
  border: 1px solid var(--fg-tint-line);
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
}

.fg-active__x {
  font-size: 14px;
  line-height: 1;
}

/* Verdunkelung hinter dem Off-Canvas-Filter (< 760px) */
.fg-scrim {
  position: fixed;
  inset: 0;
  z-index: 205;
  background: rgba(20, 2, 14, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.fg-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

/* =============================================================================
 * 10. KARTEN-GRID
 * ========================================================================== */
.fg-grid {
  display: grid;
  gap: 26px;
  margin-top: 24px;
  grid-template-columns: repeat(2, 1fr);
}

/* =============================================================================
 * 11. KARTE — overlay + below
 * ========================================================================== */
.fg-card {
  /* Bezugsrahmen fuer die Vollflaechen-Verlinkung (.fg-card__link::after)
     und fuer das absolut gesetzte Herz (.fg-fav). */
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  color: var(--fg-ink);
  transition: transform 0.2s, box-shadow 0.2s;
  background: #fff;
  border: 1px solid var(--fg-line);
  box-shadow: 0 4px 16px rgba(132, 4, 94, 0.07);
}
.fg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(132, 4, 94, 0.16);
  color: var(--fg-ink);
}
.fg-card:hover .fg-card__img {
  transform: scale(1.05);
}
.fg-card {
  /* Von initFilters()/initLoadMore() gesetzt */
}
.fg-card.is-hidden {
  display: none;
}

.fg-card__media {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* Das Bild fuellt die Medienflaeche vollstaendig aus.
   position:absolute statt height:100%, weil eine Prozenthoehe gegen eine
   nur ueber aspect-ratio bestimmte Elternhoehe nicht zuverlaessig aufloest.
   display:block entfernt zusaetzlich die Grundlinien-Luecke unter dem
   Inline-Bild — genau der weisse Streifen, der sonst bei .fg-card--tip
   zwischen Bild und Verlaufsrahmen sichtbar waere. */
.fg-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.3s;
}

.fg-card__badges {
  position: absolute;
  top: 9px;
  left: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: calc(100% - 52px);
}

/* Kartenlink — umschliesst den gesamten Karteninhalt.

   Frueher lag der Link nur um den Titeltext und spannte die Klickflaeche per
   ::after mit position:absolute; inset:0 auf. Ein absolut gesetztes Element
   bezieht sich jedoch auf den naechsten positionierten Vorfahren, und das ist
   in der Variante overlay .fg-card__overlay (position:absolute) — nicht die
   Karte. Gemessen: die Flaeche war 280.5x197.5px statt 291x387px, also genau
   der Overlay-Kasten am unteren Rand. Deshalb liess sich nur der untere Teil
   anklicken.

   Loesung ohne Pseudo-Element: der Link IST die Karte. Damit ist jeder Punkt
   getroffen, unabhaengig davon, welche Ebene darueber liegt, und der Fokusring
   umschliesst die Karte von selbst. Der Merken-Knopf steht ausserhalb des
   Links (siehe render.php) und bleibt eigenstaendig klickbar. */
.fg-card__link {
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.fg-card__link:hover {
  color: inherit;
}
.fg-card__link {
  /* Fokusring auf der ganzen Karte statt nur auf dem Textknoten */
}
.fg-card__link:focus-visible {
  outline: 3px solid #FD6C9E;
  outline-offset: -3px;
  border-radius: 14px;
}

/* Antippflaeche 44x44, sichtbarer Kreis unveraendert 34px:
   der Knopf ist transparent und traegt die Flaeche, das ::before zeichnet
   den Kreis an exakt derselben Stelle wie zuvor (8px vom Rand). */
.fg-fav {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: none;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.92);
  z-index: 2;
}
.fg-fav::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  z-index: -1;
}
.fg-fav[aria-pressed=true] {
  color: var(--fg-pink);
}

/* --- Variante overlay ----------------------------------------------------- */
.fg-card--overlay .fg-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px 15px 15px;
  background: linear-gradient(transparent, rgba(20, 2, 14, 0.35) 34%, rgba(20, 2, 14, 0.92));
}
.fg-card--overlay .fg-card__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.fg-card--overlay {
  /* Zeile 1: Name — prominent, genau eine Zeile. */
}
.fg-card--overlay .fg-card__name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  font-family: "Poppins", sans-serif;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fg-card--overlay {
  /* Zeile 2: Titel — sekundär, ebenfalls genau eine Zeile. */
}
.fg-card--overlay .fg-card__title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fg-card--overlay .fg-card__time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Variante below ------------------------------------------------------- */
.fg-card--below .fg-card__body {
  padding: 11px 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fg-card--below {
  /* Zeile 1: Name — prominent, genau eine Zeile. */
}
.fg-card--below .fg-card__name {
  font-size: 15px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fg-card--below {
  /* Zeile 2: Titel — sekundär, genau eine Zeile. */
}
.fg-card--below .fg-card__title {
  font-size: 13px;
  color: var(--fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fg-card--below .fg-card__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 1px;
}
.fg-card--below .fg-card__time {
  font-size: 12px;
  color: var(--fg-mute);
  margin-top: 2px;
}

.fg-tag {
  font-size: 11.5px;
  background: var(--fg-elev);
  color: var(--fg-ink);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Verlinkte Marken (Detailseite) sind Navigation und brauchen die volle
   Antippflaeche. Die nicht verlinkte Variante auf den Karten
   (<span class="fg-tag">) bleibt unveraendert klein. */
a.fg-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 2px 14px;
}

.fg-tag--muted {
  color: #5E5064;
}

/* =============================================================================
 * 12. BADGES
 * ========================================================================== */
.fg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

/* Icon nur zeigen, wenn es ein Zeichen trägt (Neu/Premium hatten früher keins);
   auf dem Desktop steht es vor dem Text. */
.fg-badge__icon {
  font-size: 11px;
  line-height: 1;
}

.fg-badge__icon:empty {
  display: none;
}

.fg-badge--tip {
  background: var(--fg-grad);
}

.fg-badge--new {
  background: var(--fg-grad);
}

.fg-badge--plus {
  background: var(--fg-purple);
}

.fg-badge--video {
  background: rgba(0, 0, 0, 0.6);
}

.fg-badge--check {
  background: var(--fg-teal);
}

/* =============================================================================
 * 13. TAGESTIPP
 *     Karte mit animiertem Verlaufsrahmen.
 * ========================================================================== */
/* Die Tagestipps sind keine eigene Sektion, sondern die ersten Karten des
   normalen Grids: gleiche Groesse, gleiches Format — nur mit Verlaufsrahmen
   und dem Badge "★ Tagestipp".

   Der 5px-Rahmen liegt dank box-sizing:border-box innerhalb der Spaltenbreite.
   Die Medienflaeche fuellt den Innenraum (flex:1), das Bild liegt absolut mit
   inset:0 darin — zwischen Rahmen und Bild bleibt kein weisser Rand, und die
   Zeilenhoehe des Grids haelt die Karte auf Nachbarhoehe. */
.fg-card--tip {
  border: 5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #FF9A95, #FA1C7E, #720063, #FA1C7E, #FF9A95) border-box;
  background-size: auto, 300% 100%;
  animation: figgborder 4s linear infinite;
  box-shadow: 0 10px 30px rgba(250, 28, 126, 0.22);
}
.fg-card--tip:hover {
  box-shadow: 0 10px 30px rgba(250, 28, 126, 0.22), 0 12px 30px rgba(132, 4, 94, 0.16);
}

/* =============================================================================
 * 14. PAGINATION / WEITERE LADEN
 * ========================================================================== */
.fg-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.fg-btn-more {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-magenta);
  border: 1.5px solid var(--fg-pink);
  padding: 12px 30px;
  border-radius: 999px;
  background: #fff;
}
.fg-btn-more:hover {
  background: var(--fg-tint);
}
.fg-btn-more[hidden] {
  display: none;
}

.fg-pager {
  display: flex;
  gap: 6px;
  align-items: center;
}

.fg-pager__item {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  color: var(--fg-ink);
  font-weight: 600;
  font-size: 14px;
}
.fg-pager__item:hover {
  border-color: var(--fg-pink);
  color: var(--fg-magenta);
}
.fg-pager__item[aria-current=page] {
  background: var(--fg-grad);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}

.fg-pager__nav {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  color: var(--fg-ink);
  font-size: 15px;
  padding: 0;
}
.fg-pager__nav:hover {
  border-color: var(--fg-pink);
  color: var(--fg-magenta);
}
.fg-pager__nav.is-disabled {
  color: var(--fg-mute);
  pointer-events: none;
}

.fg-pager__gap {
  color: var(--fg-mute);
  padding: 0 4px;
}

/* =============================================================================
 * 15. SEO-BLOCK
 * ========================================================================== */
.fg-seo {
  background: var(--fg-soft);
  border-top: 1px solid var(--fg-line);
}

.fg-seo__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 46px;
}

.fg-seo__title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  margin-bottom: 14px;
}

.fg-seo__text {
  color: var(--fg-mute);
  text-wrap: pretty;
  margin-bottom: 14px;
}

.fg-seo__more {
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}
.fg-seo__more.is-open {
  max-height: 400px;
}
.fg-seo__more p {
  color: var(--fg-mute);
  text-wrap: pretty;
}

.fg-seo__toggle {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-dark);
}

/* =============================================================================
 * 16. FOOTER
 * ========================================================================== */
.fg-foot {
  background: var(--fg-dark);
  color: #fff;
}

.fg-foot__inner {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 46px 20px 26px;
}

.fg-foot__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 30px 0;
  border: 0;
}

.fg-foot__rule--tight {
  margin: 26px 0;
}

/* Themen-Kacheln */
.fg-foot__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.fg-foot__tile {
  text-align: center;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.fg-foot__tile:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

/* Spalten */
.fg-foot__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 32px;
}

.fg-foot__col {
  min-width: 0;
}

.fg-foot__col--support {
  display: flex;
  flex-direction: column;
}

.fg-foot__h {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}

.fg-foot__links {
  display: flex;
  flex-direction: column;
  /* Die Eintraege bringen ihre Hoehe selbst mit; der frühere Abstand von 9px
     steckt jetzt in der 44px-Antippflaeche. */
  gap: 0;
  font-size: 14px;
  list-style: none;
}

/* Fuss-Navigation, kein Fliesstext — daher volle Antippflaeche. */
.fg-foot__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.82);
}
.fg-foot__link:hover {
  color: #fff;
}

/* Support-Kacheln */
.fg-foot__support {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  color: #fff;
}
.fg-foot__support:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.fg-foot__support--chat {
  /* dunkleres Grün: weisse Schrift erreicht so den Kontrast 4.5:1 */
  background: #13773B;
  margin-bottom: 10px;
}
.fg-foot__support--chat:hover {
  background: #106A34;
}
.fg-foot__support--chat .fg-foot__support-sub {
  color: #fff;
}
.fg-foot__support--chat .fg-foot__support-icon {
  background: rgba(255, 255, 255, 0.2);
  font-size: 16px;
}

.fg-foot__support--mail {
  background: rgba(255, 255, 255, 0.08);
}

.fg-foot__support-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}

.fg-foot__support-body {
  min-width: 0;
}

.fg-foot__support-title {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.fg-foot__support-sub {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

/* Fusszeile */
.fg-foot__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.fg-foot__seals {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}

.fg-seal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  padding: 7px 13px;
  border-radius: 999px;
}
.fg-seal .fg-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.fg-foot__social {
  display: flex;
  gap: 10px;
  list-style: none;
}

.fg-social {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.fg-social .fg-ico {
  width: 20px;
  height: 20px;
}
.fg-social:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.fg-foot__copy {
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  margin-top: 28px;
}

/* =============================================================================
 * 17. STORY-VIEWER
 * ========================================================================== */
.fg-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(12, 1, 9, 0.92);
  display: none;
  place-items: center;
}
.fg-viewer.is-open {
  display: grid;
  animation: figgin 0.2s ease;
}

.fg-viewer__card {
  position: relative;
  width: min(420px, 94vw);
  aspect-ratio: 9/16;
  max-height: 94vh;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  touch-action: pan-y;
}

.fg-viewer__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.fg-viewer__bars {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 3;
}

.fg-viewer__bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.fg-viewer__fill {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  transition: width 0.08s linear;
}

.fg-viewer__top {
  position: absolute;
  top: 24px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}

.fg-viewer__avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  border: 2px solid #fff;
  flex-shrink: 0;
}

.fg-viewer__id {
  flex: 1;
  min-width: 0;
}

.fg-viewer__name {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.fg-viewer__time {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.fg-viewer__close {
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.fg-viewer__prev,
.fg-viewer__next {
  position: absolute;
  top: 60px;
  bottom: 70px;
  z-index: 2;
  background: none;
}

.fg-viewer__prev {
  left: 0;
  width: 38%;
}

.fg-viewer__next {
  right: 0;
  width: 52%;
}

.fg-viewer__cta[hidden] {
  display: none;
}

.fg-viewer__cta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: var(--fg-grad);
  padding: 12px;
  border-radius: 999px;
  z-index: 3;
}
.fg-viewer__cta:hover {
  color: #fff;
  filter: brightness(0.94);
}

/* =============================================================================
 * 18. ALTERSFREIGABE (18+)
 * ========================================================================== */
.fg-agegate {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(20, 2, 14, 0.55);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
}
.fg-agegate[hidden], .fg-agegate.is-done {
  display: none;
}

.fg-agegate__card {
  background: #fff;
  border-radius: 20px;
  max-width: 420px;
  width: 100%;
  padding: 34px 30px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(132, 4, 94, 0.3);
  animation: figgin 0.25s ease;
}

.fg-agegate__logo {
  height: 36px;
  width: auto;
  display: block;
  margin: 0 auto 4px;
}

.fg-agegate__title {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-top: 12px;
}

.fg-agegate__text {
  color: var(--fg-mute);
  font-size: 15px;
  margin-top: 10px;
  text-wrap: pretty;
}

.fg-agegate__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.fg-agegate__form {
  display: block;
}

.fg-agegate__accept {
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: var(--fg-grad);
  padding: 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(250, 28, 126, 0.35);
}
.fg-agegate__accept:hover {
  filter: brightness(0.94);
}

.fg-agegate__leave {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg-mute);
  padding: 12px;
  border: 1px solid var(--fg-line);
  border-radius: 999px;
}
.fg-agegate__leave:hover {
  background: var(--fg-soft);
  color: var(--fg-mute);
}

.fg-agegate__note {
  font-size: 12px;
  color: #B0A4B4;
  margin-top: 16px;
}

/* =============================================================================
 * 19. KRUEMELNAVIGATION + LEERZUSTAND
 * ========================================================================== */
.fg-crumbs {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 14px 20px 0;
}

/* Im Seitenkopf liegt der Krümelpfad bereits im Innenabstand von
   fg-hero/fg-wrap — kein zweiter Einzug, sonst steht er versetzt zum Titel. */
.fg-hero .fg-crumbs,
.fg-wrap > .fg-crumbs {
  padding-left: 0;
  padding-right: 0;
}

.fg-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-size: 13px;
  color: var(--fg-mute);
}

.fg-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fg-crumbs__item + .fg-crumbs__item::before {
  content: "›";
  color: var(--fg-line);
}

/* Brotkrumen sind Navigation, kein Fliesstext — 44px Antippflaeche.
   Die Zeile bleibt optisch gleich, sie wird nur hoeher. */
.fg-crumbs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--fg-mute);
}
.fg-crumbs__link:hover {
  color: var(--fg-magenta);
}

.fg-crumbs__current {
  color: var(--fg-ink);
  font-weight: 600;
}

/* --- Leerzustand / Fehlerseite ------------------------------------------- */
.fg-empty {
  max-width: 620px;
  margin: 0 auto;
  padding: 60px 20px 70px;
  text-align: center;
}

.fg-empty__title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.fg-empty__text {
  margin-top: 14px;
  color: var(--fg-mute);
  text-wrap: pretty;
}

.fg-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.fg-empty__cta {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--fg-grad);
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(250, 28, 126, 0.35);
}
.fg-empty__cta:hover {
  filter: brightness(0.94);
  color: #fff;
}

.fg-empty__link {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg-magenta);
  border: 1px solid var(--fg-pink);
  padding: 11px 24px;
  border-radius: 999px;
}
.fg-empty__link:hover {
  background: var(--fg-tint);
}

/* =============================================================================
 * 20. UTILITIES
 * ========================================================================== */
/* Horizontaler Scroller ohne sichtbare Scrollbar */
.fg-hscroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.fg-hscroll::-webkit-scrollbar {
  display: none;
}

/* Nur fuer Screenreader */
.fg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Generische Sichtbarkeit */
.is-hidden {
  display: none !important;
}

/* Lazy-Bilder: Blur → Sharp */
.fg-lazy {
  filter: blur(12px);
  transform: scale(1.02);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.fg-lazy.is-loaded {
  filter: none;
  transform: none;
}

/* Sichtbarkeits-Helfer (ersetzen die data-hide/data-show-Attribute des Exports) */
.fg-hide-lt1100,
.fg-hide-lt900,
.fg-hide-lt760 {
  /* Standard: sichtbar — Abschaltung in den Media Queries */
}

.fg-show-lt900 {
  display: none;
}

.fg-show-lt760 {
  display: none;
}

/* =============================================================================
 * 22. GALERIE
 *     Verwendet auf inc/views/detail.php und inc/views/studio_detail.php.
 *
 *     ZWEI ZUSTAENDE
 *     Ohne JavaScript liegt im Dokument eine gewoehnliche Liste aller Medien —
 *     jedes Bild in einem Verweis auf die Vollaufloesung, das Video in einem
 *     Verweis auf die Videodatei. So bleibt die Galerie lesbar und crawlbar.
 *     Erst figgsch.js setzt `is-live` auf den Rahmen; ab da zeigt die Buehne
 *     nur noch das aktive Medium, und Pfeile, Zaehler sowie Vorschauleiste
 *     treten hinzu. Das Vergroessern uebernimmt dann lightgallery.
 * ========================================================================== */
.fg-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

/* Buehne: fester 3:4-Rahmen. Die Medien werden eingepasst (contain), damit
   Hochformat-Aufnahmen nicht beschnitten werden. */
.fg-gallery__stage {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--fg-line);
  background: var(--fg-elev);
  box-shadow: var(--fg-shadow);
  overflow: hidden;
}

.fg-gallery__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Betrieb mit Skript: nur das aktive Medium steht auf der Buehne. */
.fg-gallery.is-live .fg-gallery__list {
  display: block;
  gap: 0;
}

.fg-gallery.is-live .fg-gallery__slide {
  display: none;
}
.fg-gallery.is-live .fg-gallery__slide.is-active {
  display: block;
}

/* Buehne.
   Mobil bestimmt die Breite die Hoehe: 3:4, das Format der Bilder — es bleibt
   kein Rand, und die Flaeche steht relativ hoeher als auf dem Schreibtisch.
   Ab 768px gilt stattdessen eine feste Hoehe. Damit waechst die Flaeche auf
   grossen Schirmen nicht mehr mit dem Inhalt.

   Wichtig: gedeckelt wird ueber `height`, nicht ueber `max-height` bei
   gesetztem aspect-ratio — letzteres verkuerzt auch die Breite, der Rahmen
   rutscht dann schmal an den linken Rand der Buehne. Die Flaeche bleibt hier
   immer volle Breite, das Medium sitzt seitenverhaeltnistreu (contain) und
   mittig darin, den Rest fuellt die unscharfe Hintergrundebene.
   Beschnitten wird nichts. */
.fg-gallery__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.fg-gallery__frame:focus-visible {
  outline: 2px solid var(--fg-pink);
  outline-offset: -2px;
}

@media (min-width: 768px) {
  .fg-gallery__frame {
    aspect-ratio: auto;
    height: min(70vh, 640px);
  }
}
/* Hintergrundebene: dasselbe Motiv, formatfuellend und weichgezeichnet.
   Da die Medien vollstaendig gezeigt werden (object-fit: contain), bleibt bei
   Hochformat sonst Leerraum — diese Ebene fuellt ihn mit den Farben des
   Motivs selbst. Gleiche Quelle wie das scharfe Bild, also kein zusaetzlicher
   Abruf. Reine Dekoration: leeres alt, aria-hidden, kein Fokus. */
.fg-gallery__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(48px) saturate(1.4) brightness(0.82);
  transform: scale(1.2);
  pointer-events: none;
}

/* Das Medium sitzt mittig in der Flaeche und wird seitenverhaeltnistreu
   eingepasst — nie beschnitten, nie gequetscht. margin:auto zusaetzlich zur
   Flexbox-Zentrierung, damit die Mitte auch dann haelt, wenn ein Element aus
   dem Flexfluss faellt. Auf der Buehne steht auch beim Video nur ein Bild:
   sein Standbild. Abgespielt wird im Lichtkasten. */
.fg-gallery__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
  object-position: center;
}

/* Abspielsymbol ueber dem Standbild. Es ist reine Auszeichnung — angeklickt
   wird der Rahmen als Ganzes, wie bei jedem anderen Slide auch. */
.fg-gallery__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  padding-left: 4px;
  transition: background 0.2s, transform 0.2s;
}
.fg-gallery__frame:hover .fg-gallery__play {
  background: var(--fg-pink);
  transform: translate(-50%, -50%) scale(1.06);
}

/* Lichtkasten: Standbild und Video seitenverhaeltnistreu einpassen. Die
   Bibliothek setzt beide per !important auf 100% Breite und Hoehe der
   Videoflaeche; ohne contain wird ein Hochformat-Video darin gequetscht. */
.lg-outer .lg-video-cont .lg-object,
.lg-outer .lg-video-object,
.lg-outer .lg-video-poster {
  object-fit: contain;
  object-position: center;
}

/* Kennzeichnung oben links */
.fg-gallery__flag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--fg-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fg-gallery__flag--tip {
  top: 50px;
  background: var(--fg-purple);
}

/* Pfeile und Zaehler gibt es nur im Betrieb mit Skript. */
.fg-gallery__arrow,
.fg-gallery__count {
  display: none;
}

.fg-gallery.is-live .fg-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--fg-ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fg-gallery.is-live .fg-gallery__arrow:hover, .fg-gallery.is-live .fg-gallery__arrow:focus-visible {
  background: var(--fg-pink);
  color: #fff;
}
.fg-gallery.is-live .fg-gallery__arrow--prev {
  left: 10px;
}
.fg-gallery.is-live .fg-gallery__arrow--next {
  right: 10px;
}
.fg-gallery.is-live .fg-gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Vorschauleiste — horizontal scrollbar, Scrollbalken ausgeblendet
   (gleiche Mechanik wie .fg-hscroll). */
.fg-gallery__thumbs {
  display: flex;
  gap: 8px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 2px 2px 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.fg-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.fg-gallery__thumb {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.fg-gallery__thumb > a {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--fg-line);
  background: var(--fg-elev);
  transition: border-color 0.2s, transform 0.2s;
  /* Beruehrungsziel ≥ 44px in der Hoehe (Bild ist 96px hoch) */
  min-width: 44px;
  min-height: 44px;
}
.fg-gallery__thumb > a:hover {
  border-color: var(--fg-pink);
  transform: translateY(-2px);
}
.fg-gallery__thumb > a:focus-visible {
  border-color: var(--fg-pink);
}
.fg-gallery__thumb {
  /* Aktives Vorschaubild (wird von figgsch.js gesetzt) */
}
.fg-gallery__thumb.is-active > a,
.fg-gallery__thumb > a[aria-current=true] {
  border-color: var(--fg-pink);
  box-shadow: 0 0 0 2px var(--fg-tint-line);
}

.fg-gallery__thumb-img {
  display: block;
  width: 72px;
  height: 96px;
  object-fit: cover;
  object-position: center top;
}

/* Abspielsymbol auf dem Vorschaubild des Videos */
.fg-gallery__thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding-left: 2px;
  pointer-events: none;
}

/* =============================================================================
 * 23. DETAILSEITE (Inserat + Betrieb)
 * ========================================================================== */
.fg-detail {
  display: block;
  padding: 8px 0 48px;
}

.fg-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  margin-top: 18px;
}

.fg-detail__main {
  min-width: 0;
}

.fg-detail__aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fg-detail__head {
  margin-bottom: 26px;
}

.fg-detail__title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.fg-detail__meta {
  margin-top: 8px;
  color: var(--fg-mute);
  font-size: 15px;
}

.fg-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin-top: 14px;
  padding: 0;
}
.fg-detail__chips .fg-pref {
  padding-right: 12px;
}

.fg-detail__text {
  margin-bottom: 30px;
}
.fg-detail__text > p {
  margin-top: 12px;
  color: var(--fg-ink);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* --- Ab 900px zweispaltig, Seitenspalte bleibt beim Scrollen stehen -------- */
@media (min-width: 900px) {
  .fg-detail__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 36px;
    align-items: start;
  }
  .fg-detail__aside {
    position: sticky;
    top: 88px;
  }
}
/* =============================================================================
 * 24. STECKBRIEF / ANWESENHEIT / KONTAKTKARTE
 * ========================================================================== */
.fg-facts {
  margin-bottom: 30px;
}

.fg-facts__list {
  margin-top: 14px;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--fg-shadow);
}

.fg-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 12px;
  padding: 11px 16px;
}
.fg-facts__row + .fg-facts__row {
  border-top: 1px solid var(--fg-line);
}
.fg-facts__row:nth-child(odd) {
  background: var(--fg-soft);
}

.fg-facts__key {
  color: var(--fg-mute);
  font-size: 14px;
  font-weight: 500;
}

.fg-facts__val {
  color: var(--fg-ink);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* --- Anwesenheit ----------------------------------------------------------- */
.fg-presence {
  margin-bottom: 30px;
}

.fg-presence__list {
  margin-top: 14px;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.fg-presence__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: var(--fg-mute);
}

.fg-presence__item--on {
  background: var(--fg-tint);
  border-color: var(--fg-tint-line);
  color: var(--fg-magenta);
}

.fg-presence__day {
  font-weight: 700;
  color: var(--fg-ink);
}
.fg-presence__item--on .fg-presence__day {
  color: var(--fg-magenta);
}

.fg-presence__val {
  text-align: right;
  overflow-wrap: anywhere;
}

@media (min-width: 560px) {
  .fg-presence__list {
    grid-template-columns: 1fr 1fr;
  }
}
/* In der Seitenspalte steht wenig Breite zur Verfuegung: dort bleibt die
   Anwesenheit einspaltig, und die Bloecke fuehren keinen eigenen Aussenabstand
   mehr — den Abstand gibt die Profilkarte vor. */
.fg-pane .fg-presence,
.fg-pane .fg-prefs {
  margin-bottom: 0;
}
.fg-pane .fg-presence__list {
  grid-template-columns: 1fr;
  margin-top: 8px;
}
.fg-pane .fg-facts__list {
  margin-top: 0;
  box-shadow: none;
}

/* --- Kontaktkarte ---------------------------------------------------------- */
.fg-contactcard {
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--fg-shadow);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fg-contactcard__title {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.fg-contactcard__sub {
  color: var(--fg-mute);
  font-size: 14px;
  margin-top: -4px;
}

.fg-contactcard__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--fg-tint-line);
  background: var(--fg-tint);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: -0.01em;
  color: var(--fg-magenta);
  transition: background 0.2s, border-color 0.2s;
  overflow-wrap: anywhere;
}
.fg-contactcard__phone:hover, .fg-contactcard__phone:focus-visible {
  background: #fff;
  border-color: var(--fg-pink);
  color: var(--fg-dark);
}

.fg-contactcard__price {
  margin-top: -4px;
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-mute);
}

.fg-contactcard__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--fg-grad);
  box-shadow: 0 4px 16px rgba(250, 28, 126, 0.3);
  transition: filter 0.2s;
}
.fg-contactcard__link:hover, .fg-contactcard__link:focus-visible {
  filter: brightness(0.94);
  color: #fff;
}

/* Messenger-Variante */
.fg-contactcard__link--chat {
  background: var(--fg-green);
  box-shadow: 0 4px 16px rgba(31, 168, 85, 0.28);
}

/* --- Kopfleiste der Detailseite ------------------------------------------- */
.fg-detailbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--fg-line);
  margin-bottom: 4px;
}

.fg-detailbar__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
}

.fg-detailbar__id,
.fg-detailbar__date {
  font-size: 13px;
  color: var(--fg-mute);
}

.fg-detailbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--fg-tint-line);
  background: var(--fg-tint);
  color: var(--fg-magenta);
  font-weight: 700;
  font-size: 15px;
  overflow-wrap: anywhere;
  transition: background 0.2s, border-color 0.2s;
}
.fg-detailbar__phone:hover, .fg-detailbar__phone:focus-visible {
  background: #fff;
  border-color: var(--fg-pink);
  color: var(--fg-dark);
}

.fg-detailbar__price {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--fg-mute);
}

.fg-detailbar__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--fg-line);
  border-radius: 999px;
  background: #fff;
  color: var(--fg-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.fg-detailbar__note:hover, .fg-detailbar__note:focus-visible, .fg-detailbar__note[aria-pressed=true] {
  border-color: var(--fg-pink);
  color: var(--fg-magenta);
}

.fg-detailbar__browse {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fg-detailbar__step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  background: #fff;
  color: var(--fg-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.fg-detailbar__step:hover, .fg-detailbar__step:focus-visible {
  border-color: var(--fg-pink);
  color: var(--fg-magenta);
}
.fg-detailbar__step {
  /* Am Anfang bzw. Ende der Trefferliste: der Platz bleibt, der Verweis
     entfaellt — so springt die Leiste beim Blaettern nicht. */
}
.fg-detailbar__step.is-off {
  color: var(--fg-mute);
  opacity: 0.45;
  pointer-events: none;
}

.fg-detailbar__step--all {
  background: var(--fg-soft);
}

/* --- Profilkarte der Seitenspalte ----------------------------------------- */
.fg-profile {
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--fg-shadow);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fg-profile__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fg-profile__avatar {
  flex: 0 0 auto;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  padding: 2px;
  background: var(--fg-grad-ring);
}

/* Profilbild mit aktiver Story: drehender Verlaufsring + „Story"-Marke,
   Klick öffnet den Story-Viewer (initStories). */
.fg-profile__avatar--story {
  position: relative;
  padding: 3px;
  border: 0;
  cursor: pointer;
  background: none;
  isolation: isolate;
}
.fg-profile__avatar--story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: conic-gradient(from 0deg, #FF9A95, #FA1C7E, #720063, #FD6C9E, #FF9A95);
  animation: fg-story-spin 2.4s linear infinite;
}
.fg-profile__avatar--story:hover::before, .fg-profile__avatar--story:focus-visible::before {
  animation-duration: 1.2s;
}
.fg-profile__avatar--story:focus-visible {
  outline: 2px solid var(--fg-pink);
  outline-offset: 3px;
}

.fg-profile__story-tag {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--fg-grad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

@keyframes fg-story-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg-profile__avatar--story::before {
    animation: none;
  }
}
.fg-profile__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 2px solid #fff;
  object-fit: cover;
  object-position: center top;
}

.fg-profile__ident {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fg-profile__name {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fg-profile__seal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--fg-tint);
  border: 1px solid var(--fg-tint-line);
  color: var(--fg-magenta);
  font-size: 12px;
  font-weight: 700;
}

.fg-profile__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fg-profile__metaitem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--fg-mute);
  overflow-wrap: anywhere;
}

.fg-profile__metaicon {
  flex: 0 0 auto;
  line-height: 1.5;
}

/* --- Umschalter Kontakt / Steckbrief -------------------------------------- */
.fg-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--fg-soft);
  border: 1px solid var(--fg-line);
}

.fg-switch__btn {
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fg-mute);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fg-switch__btn.is-active {
  background: #fff;
  color: var(--fg-magenta);
  box-shadow: var(--fg-shadow);
}
.fg-switch__btn:hover:not(.is-active), .fg-switch__btn:focus-visible:not(.is-active) {
  color: var(--fg-ink);
}

.fg-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fg-pane[hidden] {
  display: none;
}

/* --- Aufklapper (Nachricht senden, Anzeige melden) ------------------------- */
.fg-fold {
  border: 1px solid var(--fg-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.fg-fold__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-ink);
  cursor: pointer;
  list-style: none;
  transition: background 0.2s, color 0.2s;
}
.fg-fold__head::-webkit-details-marker {
  display: none;
}
.fg-fold__head::after {
  content: "⌄";
  font-size: 16px;
  line-height: 1;
  color: var(--fg-mute);
  transition: transform 0.2s;
}
.fg-fold__head:hover, .fg-fold__head:focus-visible {
  background: var(--fg-tint);
  color: var(--fg-magenta);
}

.fg-fold[open] .fg-fold__head::after {
  transform: rotate(180deg);
}

.fg-fold__body {
  border-top: 1px solid var(--fg-line);
  padding: 4px;
}

/* Innerhalb des Aufklappers traegt der Rahmen schon Rand und Schatten. */
.fg-fold__body .fg-form {
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* --- Vorlieben / Angebote -------------------------------------------------- */
.fg-offers,
.fg-prefs {
  margin-bottom: 28px;
}

.fg-prefs {
  margin-bottom: 0;
}

.fg-offers .fg-h2 {
  margin-bottom: 14px;
}

/* Hauptspalte: gleiche Kästchen wie die Vorlieben rechts, mehr Spalten */
.fg-offers__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Vorlieben (Seitenspalte): kompakte Liste in zwei Spalten, jede Zeile mit
   grünem Haken. Ruhiger als freie Pillen, keine Lücken dazwischen. */
.fg-prefs .fg-h3 {
  margin-bottom: 14px;
}

.fg-prefs__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fg-pref {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--fg-line);
  border-radius: 8px;
  background: var(--fg-soft);
  color: var(--fg-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.fg-pref:hover, .fg-pref:focus-visible {
  border-color: var(--fg-green);
  background: #F1FAF4;
  color: var(--fg-ink);
}

.fg-pref__check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #13773B;
  color: #fff;
}
.fg-pref__check svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 400px) {
  .fg-pref {
    font-size: 12.5px;
    gap: 6px;
    padding: 6px 7px;
  }
}
.fg-pref--pink .fg-pref__check {
  background: var(--fg-grad);
}
.fg-pref--pink:hover, .fg-pref--pink:focus-visible {
  border-color: var(--fg-pink);
  background: var(--fg-tint);
}

.fg-pref__txt {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --- Teilen ---------------------------------------------------------------- */
.fg-share {
  border-top: 1px solid var(--fg-line);
  padding-top: 14px;
}

.fg-share__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-mute);
  margin-bottom: 8px;
}

/* Zwei gleich breite Spalten: 6 Knöpfe = 3 saubere Reihen */
.fg-share__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fg-share__list > li {
  min-width: 0;
}

.fg-share__btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--fg-line);
  border-radius: 12px;
  background: #fff;
  color: var(--fg-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.fg-share__btn .fg-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.fg-share__btn {
  /* Markenfarben nur am Icon, der Knopf bleibt ruhig */
}
.fg-share__btn--fb .fg-ico {
  color: #1877F2;
}
.fg-share__btn--x .fg-ico {
  color: #000;
}
.fg-share__btn--wa .fg-ico {
  color: #25D366;
}
.fg-share__btn--tg .fg-ico {
  color: #26A5E4;
}
.fg-share__btn--mail .fg-ico, .fg-share__btn--copy .fg-ico {
  color: var(--fg-magenta);
}
.fg-share__btn:hover, .fg-share__btn:focus-visible {
  border-color: var(--fg-pink);
  background: var(--fg-tint);
  color: var(--fg-ink);
}
.fg-share__btn.is-on {
  border-color: var(--fg-pink);
  background: var(--fg-pink);
  color: #fff;
}
.fg-share__btn.is-on .fg-ico {
  color: #fff;
}

.fg-share__txt {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Merken / Melden ------------------------------------------------------- */
.fg-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}

.fg-actions__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  white-space: nowrap;
  line-height: 1.2;
}
.fg-actions__btn .fg-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.fg-actions__btn {
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  background: var(--fg-soft);
  color: var(--fg-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.fg-actions__btn:hover, .fg-actions__btn:focus-visible, .fg-actions__btn[aria-pressed=true] {
  border-color: var(--fg-pink);
  color: var(--fg-magenta);
}
.fg-actions__btn {
  /* Gemerkt: Herz gefüllt */
}
.fg-actions__btn--fav[aria-pressed=true] .fg-ico {
  fill: currentColor;
}

/* --- Kenndaten-Kasten ------------------------------------------------------ */
.fg-idbox {
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: var(--fg-soft);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.fg-idbox__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.fg-idbox__key {
  font-size: 13px;
  color: var(--fg-mute);
}

.fg-idbox__val {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
 * 25. BEWERTUNGEN
 * ========================================================================== */
.fg-reviews {
  margin-bottom: 34px;
}

.fg-reviews__list {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.fg-reviews__empty {
  margin-top: 12px;
  color: var(--fg-mute);
  font-size: 15px;
  padding: 16px 18px;
  border: 1px dashed var(--fg-line);
  border-radius: 14px;
  background: var(--fg-soft);
}

.fg-review {
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--fg-shadow);
  padding: 14px 16px 16px;
}

.fg-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fg-review__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-ink);
}

.fg-review__stars {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #d4a000;
  white-space: nowrap;
}

.fg-review__title {
  margin-top: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--fg-ink);
}

.fg-review__text {
  margin-top: 6px;
  color: var(--fg-mute);
  font-size: 14.5px;
  line-height: 1.65;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* =============================================================================
 * 26. FORMULARE + STATUSMELDUNGEN
 * ========================================================================== */
.fg-form {
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--fg-shadow);
  padding: 18px;
  margin-top: 22px;
  /* Bezugsrahmen fuer das absolut ausgelagerte Honigtopf-Feld */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bewertungsformular steht unter der Bewertungsliste */
.fg-form--rating {
  background: var(--fg-soft);
}

/* Kontaktformular in der Seitenspalte */
.fg-form--contact {
  margin-top: 0;
}

/* Meldeformular — zurueckhaltender */
.fg-form--flag {
  margin-top: 0;
  box-shadow: none;
  background: var(--fg-soft);
}

/* Ganzseitiges Formular (Kontaktseite) */
.fg-form--wide {
  padding: 22px;
  max-width: 640px;
}

.fg-form__title {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--fg-ink);
}

.fg-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fg-form__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-ink);
}

.fg-form__input {
  width: 100%;
  min-height: 44px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  color: var(--fg-ink);
  background: #fff;
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fg-form__input::placeholder {
  color: var(--fg-mute);
}
.fg-form__input:hover {
  border-color: var(--fg-tint-line);
}
.fg-form__input:focus, .fg-form__input:focus-visible {
  outline: none;
  border-color: var(--fg-pink);
  box-shadow: 0 0 0 3px var(--fg-tint);
}
.fg-form__input:focus-visible {
  outline: 2px solid var(--fg-rose);
  outline-offset: 1px;
}

textarea.fg-form__input {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

select.fg-form__input {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%), linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%);
  background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.fg-form__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-mute);
  /* Links im Fliesstext nicht nur über die Farbe erkennbar */
}
.fg-form__note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Honigtopf: fuer Menschen und Screenreader unerreichbar, fuer Skripte sichtbar.
   display:none waere zu leicht erkennbar — deshalb Auslagerung aus dem Sichtfeld. */
.fg-form__trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Sende-Knopf der Formulare (Verlauf, wie die Kopf-CTA) */
.fg-btn-cta {
  align-self: flex-start;
  min-height: 44px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--fg-grad);
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(250, 28, 126, 0.3);
  transition: filter 0.2s, transform 0.2s;
}
.fg-btn-cta:hover {
  filter: brightness(0.94);
  color: #fff;
}
.fg-btn-cta:active {
  transform: translateY(1px);
}
.fg-btn-cta[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Statusmeldungen ------------------------------------------------------- */
.fg-note {
  border: 1px solid var(--fg-line);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--fg-soft);
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-ink);
  margin-bottom: 18px;
}

.fg-note--ok {
  border-color: var(--fg-green);
  background: rgba(31, 168, 85, 0.07);
  color: var(--fg-ink);
}

.fg-note--warn {
  border-color: var(--fg-pink);
  background: var(--fg-tint);
  color: var(--fg-dark);
}

/* =============================================================================
 * 27. STATISCHE SEITEN (Rechtstexte, FAQ, Regeln, Kontaktwege)
 * ========================================================================== */
.fg-legal {
  padding: 8px 20px 56px;
}

.fg-legal__inner {
  max-width: 820px;
  margin: 0 auto;
}

/* Fliesstext-Absatz ausserhalb des Fremd-HTML (FAQ, Regeln, Merkliste) */
.fg-copy {
  margin-top: 24px;
  color: var(--fg-mute);
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* --- Fremd-HTML aus lg_legal_content baendigen ---------------------------- */
.fg-legal__body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-ink);
  overflow-wrap: anywhere;
}
.fg-legal__body h2 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  margin: 30px 0 10px;
  text-wrap: balance;
}
.fg-legal__body h3 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  margin: 22px 0 8px;
}
.fg-legal__body p {
  margin: 0 0 14px;
  text-wrap: pretty;
}
.fg-legal__body ul,
.fg-legal__body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.fg-legal__body li {
  margin-bottom: 6px;
}
.fg-legal__body a {
  color: var(--fg-magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fg-legal__body a:hover {
  color: var(--fg-dark);
}
.fg-legal__body strong,
.fg-legal__body b {
  font-weight: 700;
  color: var(--fg-ink);
}
.fg-legal__body table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14.5px;
}
.fg-legal__body th,
.fg-legal__body td {
  border: 1px solid var(--fg-line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.fg-legal__body th {
  background: var(--fg-soft);
  font-weight: 700;
}
.fg-legal__body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.fg-legal__body hr {
  border: 0;
  border-top: 1px solid var(--fg-line);
  margin: 26px 0;
}
.fg-legal__body blockquote {
  margin: 0 0 16px;
  padding: 10px 16px;
  border-left: 4px solid var(--fg-tint-line);
  background: var(--fg-soft);
  border-radius: 0 10px 10px 0;
  color: var(--fg-mute);
}
.fg-legal__body {
  /* Erstes Element ohne Vorabstand */
}
.fg-legal__body > :first-child {
  margin-top: 0;
}

.fg-legal__missing {
  padding: 18px 20px;
  border: 1px dashed var(--fg-line);
  border-radius: 14px;
  background: var(--fg-soft);
  color: var(--fg-mute);
  font-size: 15px;
  line-height: 1.7;
}

/* --- Aufklapper (FAQ, native <details>) ------------------------------------ */
.fg-accordion {
  margin-bottom: 30px;
}
.fg-accordion > .fg-h2 {
  margin-bottom: 12px;
}

.fg-accordion__item {
  border: 1px solid var(--fg-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fg-accordion__item + .fg-accordion__item {
  margin-top: 8px;
}
.fg-accordion__item[open] {
  border-color: var(--fg-tint-line);
  box-shadow: var(--fg-shadow);
}

/* Frage als volle Zeile mit Winkel rechts */
.fg-accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--fg-ink);
  list-style: none;
  transition: background 0.2s, color 0.2s;
}
.fg-accordion__q::-webkit-details-marker {
  display: none;
}
.fg-accordion__q::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--fg-mute);
  border-bottom: 2px solid var(--fg-mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s, border-color 0.2s;
}
.fg-accordion__q:hover {
  background: var(--fg-tint);
  color: var(--fg-magenta);
}
.fg-accordion__q:hover::after {
  border-color: var(--fg-magenta);
}
.fg-accordion__item[open] > .fg-accordion__q::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--fg-magenta);
}

.fg-accordion__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.fg-accordion__a > p {
  padding: 0 16px 15px;
  color: var(--fg-mute);
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}
.fg-accordion__item[open] > .fg-accordion__a {
  max-height: 1400px;
}

/* --- Regeln ---------------------------------------------------------------- */
.fg-rules {
  list-style: none;
  counter-reset: fg-rule;
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.fg-rules__item {
  counter-increment: fg-rule;
  position: relative;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--fg-shadow);
  padding: 16px 18px 17px 60px;
}
.fg-rules__item::before {
  content: counter(fg-rule);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--fg-grad);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.fg-rules__title {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg-ink);
}

.fg-rules__text {
  margin-top: 6px;
  color: var(--fg-mute);
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* --- Weitere Kontaktwege --------------------------------------------------- */
.fg-contactlist {
  list-style: none;
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.fg-contactlist > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-ink);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.fg-contactlist > li > a:hover, .fg-contactlist > li > a:focus-visible {
  background: var(--fg-tint);
  border-color: var(--fg-tint-line);
  color: var(--fg-magenta);
}

/* =============================================================================
 * 28. STUDIOS / BETRIEBE
 * ========================================================================== */
.fg-studio {
  display: block;
  padding: 8px 0 48px;
}

.fg-studio__head {
  margin: 14px 0 4px;
}

.fg-studio__title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.fg-studio__address {
  margin-top: 8px;
  color: var(--fg-mute);
  font-size: 15px;
}

/* --- Oeffnungszeiten ------------------------------------------------------- */
.fg-hours {
  margin-bottom: 30px;
}

.fg-hours__list {
  margin-top: 14px;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--fg-shadow);
}

.fg-hours__row {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 16px;
  min-height: 44px;
  align-items: center;
}
.fg-hours__row + .fg-hours__row {
  border-top: 1px solid var(--fg-line);
}
.fg-hours__row:nth-child(odd) {
  background: var(--fg-soft);
}

.fg-hours__day {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-ink);
}

.fg-hours__span {
  font-size: 14px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

/* --- Lagekarte ------------------------------------------------------------- */
.fg-map {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 34px;
}

.fg-map__address {
  font-size: 15px;
  color: var(--fg-ink);
  overflow-wrap: anywhere;
}

.fg-map__route {
  align-self: flex-start;
}

/* Umgebungskarte: eigene Pins (statt Leaflet-Standardgrafik) und Popups */
.fg-pin {
  background: none;
  border: 0;
}

.fg-pin__dot {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) scale(0.82);
  background: var(--fg-magenta);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.fg-pin__dot::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: #FFFFFF;
}

.fg-pin--near .fg-pin__dot {
  background: var(--fg-mute);
}

/* Studios / Clubs in der Naehe */
.fg-pin--club .fg-pin__dot {
  background: var(--fg-purple);
}

.fg-pin__count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--fg-dark);
  color: #FFFFFF;
  font: 700 11px/18px Inter, sans-serif;
  text-align: center;
}

.fg-nearpop {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: Inter, sans-serif;
}

.fg-nearpop__img {
  flex: 0 0 64px;
  width: 64px;
  height: 86px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fg-elev);
}
.fg-nearpop__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fg-nearpop--wide .fg-nearpop__img {
  flex-basis: 96px;
  width: 96px;
  height: 64px;
}

.fg-nearpop__body {
  min-width: 0;
}

.fg-nearpop__name {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-ink);
}

.fg-nearpop__badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--fg-tint);
  color: var(--fg-magenta);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: middle;
}

.fg-nearpop__addr,
.fg-nearpop__dist {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--fg-mute);
}

.fg-nearpop__current {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-green);
}

.fg-nearpop__btn {
  display: inline-block;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--fg-magenta);
  color: #FFFFFF !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.fg-nearpop__btn:hover {
  background: var(--fg-dark);
}

.fg-nearlist {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--fg-line);
  font-family: Inter, sans-serif;
}
.fg-nearlist:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.fg-nearlist__title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--fg-ink);
}

.fg-nearlist__sub {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--fg-mute);
}

.fg-nearlist__scroll {
  max-height: 220px;
  overflow-y: auto;
}

.fg-nearlist__item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
}

.fg-nearlist__img {
  flex: 0 0 40px;
  width: 40px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--fg-elev);
}
.fg-nearlist__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Leaflet haengt sich in diesen Knoten. isolation haelt die Leaflet-Ebenen
   im eigenen Stapelkontext, damit sie nicht ueber den Kopfbereich wandern. */
.fg-map__canvas {
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--fg-line);
  background: var(--fg-elev);
  isolation: isolate;
  z-index: 0;
}

/* Sichtbar auch dann, wenn Leaflet nicht geladen wird — die Adresse bleibt
   ueber den Textlink erreichbar. */
.fg-map__fallback {
  font-size: 13.5px;
  color: var(--fg-mute);
}
.fg-map__fallback > a {
  color: var(--fg-magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fg-map__fallback > a:hover {
  color: var(--fg-dark);
}

/* =============================================================================
 * 29. AEHNLICHE INSERATE + FALLBACKS
 * ========================================================================== */
.fg-similar {
  margin-top: 8px;
  padding-top: 26px;
  border-top: 1px solid var(--fg-line);
}
.fg-similar > .fg-grid {
  margin-top: 16px;
}

/* <noscript>-Ersatz der Story-Leiste */
.fg-stories__fallback {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 14px;
}
.fg-stories__fallback > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--fg-line);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-ink);
}
.fg-stories__fallback > li > a:hover, .fg-stories__fallback > li > a:focus-visible {
  background: var(--fg-tint);
  border-color: var(--fg-tint-line);
  color: var(--fg-magenta);
}

/* =============================================================================
 * KEYFRAMES (exakt aus dem Design-Export)
 * ========================================================================== */
@keyframes figgpulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(250, 28, 126, 0.35);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(250, 28, 126, 0);
  }
}
@keyframes figgin {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes figgborder {
  0% {
    background-position: 0 0, 0% 50%;
  }
  100% {
    background-position: 0 0, 300% 50%;
  }
}
/* =============================================================================
 * 21. MEDIA QUERIES
 *     Reihenfolge: absteigende Breite fuer max-width, aufsteigend fuer min-width.
 * ========================================================================== */
/* --- ≥ 560px: 3 Spalten --------------------------------------------------- */
@media (min-width: 560px) {
  .fg-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* --- ≥ 901px: mobiles Menu bleibt geschlossen ----------------------------- */
@media (min-width: 901px) {
  .fg-drawer,
  .fg-drawer.is-open {
    display: none;
  }
}
/* --- ≥ 960px: 4 Spalten --------------------------------------------------- */
@media (min-width: 960px) {
  .fg-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* --- < 1100px: Suchfeld im Header aus ------------------------------------- */
@media (max-width: 1100px) {
  .fg-hide-lt1100 {
    display: none !important;
  }
  .fg-find {
    display: none;
  }
}
/* --- < 900px: Burger an, Hauptnavigation aus ------------------------------ */
@media (max-width: 900px) {
  .fg-hide-lt900 {
    display: none !important;
  }
  .fg-show-lt900 {
    display: grid !important;
  }
  .fg-head__burger {
    display: grid;
  }
  .fg-nav {
    display: none;
  }
  /* Zwischen 761px und 900px reicht der Platz rechts der Filterleiste nicht
     mehr fuer ein linksbuendiges 380px-Panel — es ragte auch im geschlossenen
     Zustand ueber den Ansichtsbereich hinaus (scrollWidth 993 statt 768).
     Rechtsbuendige Verankerung loest das an der Ursache. */
  .fg-filterbar .fg-nav__panel {
    left: auto;
    right: 0;
  }
}
/* --- < 820px: Fuss-Grids 2-spaltig ---------------------------------------- */
@media (max-width: 820px) {
  .fg-slotgrid--end,
  .fg-slotgrid--foot,
  .fg-foot__tiles,
  .fg-foot__cols {
    grid-template-columns: 1fr 1fr;
  }
}
/* --- < 768px: Kopfleiste auf zwei Plaetze --------------------------------
   Dieselbe Grenze wie beim Vorbild, wo der dritte Kopfplatz unterhalb der
   mittleren Grid-Stufe entfaellt. Die Zahl steht zusaetzlich im Faltplan
   (data-fg-fold, siehe slotFoldAttr() in inc/lib/render.php); beide Seiten
   muessen dieselbe nennen. */
@media (max-width: 768px) {
  .fg-slot-head__inner {
    grid-template-columns: 1fr 1fr;
  }
  /* Bis das Faltskript läuft, nur so viele Plätze zeigen, wie danach
     stehenbleiben. Sonst schrumpft die Leiste nachträglich (CLS). */
  .fg-slot-head__inner:not(.is-folded) > .fg-slot:nth-child(n+3) {
    display: none;
  }
}
/* --- < 760px: Filter hinter Button (Off-Canvas), Registrieren aus --------- */
@media (max-width: 760px) {
  .fg-hide-lt760 {
    display: none !important;
  }
  .fg-show-lt760 {
    display: inline-flex !important;
  }
  .fg-head__link--signup {
    display: none;
  }
  /* Ab hier traegt der Kopf nur noch Marke, Merkliste, CTA und Burger.
     Das Logo wird stufenweise kleiner, damit die Zeile ohne Umbruch und
     ohne horizontalen Ueberlauf auskommt. */
  .fg-head__logo,
  .fg-head--shrunk .fg-head__logo {
    height: 34px;
  }
  .fg-head__inner {
    gap: 10px;
  }
  .fg-filterbtn {
    display: inline-flex;
  }
  /* Off-Canvas-Panel von unten */
  .fg-filterbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 210;
    background: #fff;
    border-top: 1px solid var(--fg-line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(132, 4, 94, 0.18);
    padding: 20px 20px 24px;
    max-height: 82vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.28s ease;
  }
  .fg-filterbar.is-open {
    transform: translateY(0);
  }
  .fg-filterbar .fg-sep {
    display: none;
  }
  .fg-filterctl {
    gap: 10px;
  }
  /* Dropdown-Panels innerhalb des Off-Canvas fluid */
  .fg-filterbar .fg-nav__panel {
    width: 100%;
    max-width: 100%;
    left: 0;
  }
  .fg-nav__panel--region .fg-nav__grid--multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fg-slot-inline {
    grid-template-columns: 1fr;
  }
}
/* --- < 640px: Kopf-Slots 1-spaltig ---------------------------------------- */
@media (max-width: 640px) {
  .fg-slot-head__inner {
    grid-template-columns: 1fr;
  }
  .fg-slot-head__inner:not(.is-folded) > .fg-slot:nth-child(n+2) {
    display: none;
  }
}
/* --- < 560px: 2 Spalten (Basis greift bereits) ---------------------------- */
@media (max-width: 560px) {
  .fg-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Enger Abstand auf dem Handy — dadurch werden die Karten und ihre
       Bilder deutlich grösser. */
    gap: 8px;
  }
  /* Weniger seitlicher Rand um die Liste, mehr Platz fürs Bild. */
  .fg-listing {
    padding-left: 6px;
    padding-right: 6px;
  }
  /* Badges auf dem Handy nur als Icon — der Text würde zu viel Bild verdecken.
     Kompaktes, rundes Symbol in der jeweiligen Badge-Farbe. */
  .fg-card__badges .fg-badge {
    gap: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    justify-content: center;
    border-radius: 999px;
  }
  .fg-card__badges .fg-badge__text {
    display: none;
  }
  .fg-card__badges .fg-badge__icon {
    font-size: 12px;
  }
  /* Kompaktere Beschriftung im Bild: schmaleres Overlay-Polster und enge
     Zeilenabstände. */
  .fg-card--overlay .fg-card__overlay {
    padding: 28px 10px 9px;
  }
  .fg-card__cat {
    margin-bottom: 3px;
  }
  .fg-card--overlay .fg-card__name {
    font-size: 15px;
  }
  .fg-card--overlay .fg-card__title {
    margin-top: 1px;
    font-size: 12px;
  }
  .fg-card--overlay .fg-card__time {
    margin-top: 2px;
  }
  /* Variante below ebenfalls enger. */
  .fg-card--below .fg-card__body {
    padding: 8px 9px 10px;
    gap: 3px;
  }
}
/* --- < 520px: Fuss-Kacheln 2-spaltig -------------------------------------- */
@media (max-width: 520px) {
  .fg-foot__tiles {
    grid-template-columns: 1fr 1fr;
  }
}
/* --- < 480px: Slots 1-spaltig --------------------------------------------- */
@media (max-width: 480px) {
  .fg-slotgrid--end,
  .fg-slotgrid--foot,
  .fg-foot__cols {
    grid-template-columns: 1fr;
  }
  /* Fuss-Navigation mobil: zentrierte Titel, Links als Kacheln in zwei
     Spalten (gleiche Optik wie die Support-Kacheln). */
  .fg-foot__cols {
    gap: 26px;
  }
  .fg-foot__h {
    text-align: center;
    margin-bottom: 12px;
  }
  /* Siegel und Social-Icons mobil zentriert untereinander */
  .fg-foot__meta {
    flex-direction: column;
    justify-content: center;
  }
  .fg-foot__seals,
  .fg-foot__social {
    justify-content: center;
    padding: 0;
  }
  .fg-foot__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .fg-foot__links > li:last-child:nth-child(odd) {
    grid-column: span 2;
  }
  .fg-foot__link {
    justify-content: center;
    text-align: center;
    min-height: 46px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 500;
    line-height: 1.25;
  }
  .fg-foot__link:hover, .fg-foot__link:focus-visible {
    background: rgba(255, 255, 255, 0.16);
  }
  /* --- Kopfbereich bei 390px ---------------------------------------------
     Rechnung fuer 390px Ansichtsbreite:
       14 Rand + 138.6 Logo (26px hoch, Seitenverhaeltnis 1790:336)
       + 8 + 44 Merkliste + 8 + ~96 CTA + 8 + 44 Burger + 14 Rand ≈ 375px.
     Damit bleibt scrollWidth unter der Ansichtsbreite, ohne overflow-x. */
  .fg-head__inner {
    gap: 8px;
    padding: 0 14px;
  }
  .fg-head__logo,
  .fg-head--shrunk .fg-head__logo {
    height: 26px;
  }
  /* Merkliste als reines Symbol mit aufgesetztem Zaehler — die
     Antippflaeche bleibt vollstaendig bei 44x44. */
  .fg-head__noted {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
  }
  .fg-head__noted-count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
  }
  .fg-head__cta {
    font-size: 13px;
    padding: 10px 14px;
  }
  /* --- Story-Kreise auf schmalen Geraeten ---------------------------------
     Etwas kleiner als auf dem Desktop (96px), aber weiterhin deutlich groesser
     als der frühere Stand. Die Leiste scrollt waagerecht mit Einrastpunkten;
     sie ist durch `overflow-x` begrenzt und traegt daher nichts zur
     Seitenbreite bei. */
  .fg-story {
    width: 100px;
    gap: 10px;
  }
  .fg-story__img {
    width: 84px;
    height: 84px;
  }
  .fg-story__name {
    max-width: 98px;
  }
  .fg-stories__rail {
    padding-left: 14px;
    padding-right: 14px;
  }
  .fg-stories__track {
    gap: 14px;
  }
}
/* --- Unterseiten: enge Bildschirme ---------------------------------------- */
@media (max-width: 560px) {
  .fg-detail,
  .fg-studio {
    padding-bottom: 34px;
  }
  .fg-detail__grid {
    gap: 24px;
  }
  .fg-gallery__thumb-img {
    width: 58px;
    height: 78px;
  }
  /* Kopfleiste: Kenndaten oben, Blaetterleiste darunter ueber die volle
     Breite — sonst quetschen sich beide Gruppen auf 390px ineinander. */
  .fg-detailbar {
    flex-direction: column;
    align-items: stretch;
  }
  .fg-detailbar__browse {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .fg-detailbar__step {
    justify-content: center;
    padding: 8px 6px;
    font-size: 13px;
  }
  .fg-detailbar__phone {
    max-width: 100%;
  }
  .fg-share__btn {
    font-size: 12.5px;
    padding: 8px 10px;
  }
  .fg-facts__row,
  .fg-hours__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .fg-facts__val,
  .fg-hours__span {
    text-align: left;
  }
  .fg-legal {
    padding-bottom: 40px;
  }
  .fg-form,
  .fg-form--wide {
    padding: 15px;
  }
  .fg-btn-cta {
    align-self: stretch;
    text-align: center;
  }
  .fg-rules__item {
    padding: 14px 15px 15px 54px;
  }
  .fg-map__canvas {
    aspect-ratio: 4/3;
  }
}
/* --- Bewegungsreduktion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fg-head__cta,
  .fg-card--tip {
    animation: none !important;
  }
  /* Aufklapper ohne Hoehen-Uebergang, Winkel ohne Drehung */
  .fg-accordion__a {
    transition: none !important;
  }
  .fg-gallery__thumb > a:hover {
    transform: none;
  }
  .fg-lazy {
    filter: none;
    transform: none;
  }
}
/* --- Druck ---------------------------------------------------------------- */
@media print {
  .fg-head,
  .fg-slot-head,
  .fg-slot-end,
  .fg-slotgrid--foot,
  .fg-slotgrid--mini,
  .fg-viewer,
  .fg-agegate,
  .fg-filterbar,
  .fg-more,
  .fg-form,
  .fg-detailbar__browse,
  .fg-share,
  .fg-actions,
  .fg-gallery__thumbs {
    display: none !important;
  }
  .fg-detail__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .fg-detail__aside {
    position: static !important;
  }
  .fg-accordion__a {
    max-height: none !important;
  }
}
/* =============================================================================
 * Bannertausch (/bannertausch, Partnerbereich, Mini-Verwaltung)
 * ========================================================================== */
.fg-bt__msg {
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  background: var(--fg-soft);
  padding: 12px 16px;
  margin: 8px 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-ink);
}

.fg-bt__msg--ok {
  border-color: var(--fg-green);
  background: rgba(31, 168, 85, 0.07);
}

.fg-bt__msg--warn {
  border-color: var(--fg-pink);
  background: var(--fg-tint);
  color: var(--fg-dark);
}

/* Bannertausch: Inhalt auf derselben linken Kante wie Titel und Krümelpfad
   (fg-hero + fg-wrap), nicht als zentrierte Lesespalte. */
.fg-legal.fg-bt {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 8px 20px 56px;
}
.fg-legal.fg-bt > .fg-legal__inner {
  max-width: none;
  margin: 0;
  padding: 0 20px;
}

.fg-bt__steps,
.fg-bt .fg-copy,
.fg-bt__msg,
.fg-bt__hint {
  max-width: 860px;
}

.fg-bt__own {
  max-width: 1040px;
}

.fg-bt .fg-h2 {
  margin-top: 36px;
}

.fg-bt__steps {
  margin: 12px 0 8px;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg-ink);
}

.fg-bt__own {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.fg-bt__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--fg-shadow);
}

.fg-bt__preview {
  display: block;
  width: 180px;
  height: 90px;
  border-radius: 6px;
}

.fg-bt__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-mute);
}

textarea.fg-form__input.fg-bt__code {
  min-height: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: none;
  background: var(--fg-soft);
}

.fg-bt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fg-bt__actions .fg-btn-more,
.fg-bt__inline .fg-btn-more {
  padding: 8px 16px;
  font-size: 13.5px;
  cursor: pointer;
}

.fg-bt__hint {
  border: 1px solid var(--fg-tint-line);
  border-radius: 10px;
  background: var(--fg-tint);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-dark);
}

.fg-bt__partners {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.fg-bt__partners img {
  display: block;
  width: 180px;
  height: 90px;
  border-radius: 8px;
}

.fg-bt__status {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--fg-shadow);
}
.fg-bt__status > img {
  border-radius: 6px;
}

.fg-bt__facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  font-size: 14.5px;
  color: var(--fg-ink);
}
.fg-bt__facts dt {
  font-weight: 600;
  color: var(--fg-mute);
}
.fg-bt__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.fg-bt__state {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--fg-elev);
  color: var(--fg-ink);
}

.fg-bt__state--active {
  background: rgba(31, 168, 85, 0.12);
  color: #157a3d;
}

.fg-bt__state--missing,
.fg-bt__state--blocked {
  background: var(--fg-tint);
  color: var(--fg-dark);
}

.fg-bt__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.fg-bt__wide {
  max-width: 1200px;
  margin: 0 auto;
}

.fg-bt__tablewrap {
  overflow-x: auto;
  margin-top: 16px;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: #fff;
}

.fg-bt__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--fg-ink);
}
.fg-bt__table th,
.fg-bt__table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--fg-line);
}
.fg-bt__table th {
  background: var(--fg-soft);
  font-weight: 700;
}
.fg-bt__table tr:last-child td {
  border-bottom: 0;
}
.fg-bt__table td a {
  color: var(--fg-magenta);
  overflow-wrap: anywhere;
}
.fg-bt__table img {
  display: block;
  width: 180px;
  height: 90px;
  border-radius: 6px;
}
.fg-bt__table .fg-bt__inline {
  margin-top: 0;
  flex-direction: column;
}

@media (max-width: 600px) {
  .fg-bt__facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .fg-bt__facts dd {
    margin-bottom: 8px;
  }
}
/* Rückmeldung nach einem Formular (oben im Inhalt, alle Seiten) */
.fg-flash-wrap {
  max-width: var(--fg-wrap);
  margin: 0 auto;
  padding: 18px 40px 0;
}

.fg-flash {
  max-width: 860px;
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  background: var(--fg-soft);
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-ink);
}

.fg-flash--ok {
  border-color: var(--fg-green);
  background: rgba(31, 168, 85, 0.07);
}

.fg-flash--warn {
  border-color: var(--fg-pink);
  background: var(--fg-tint);
  color: var(--fg-dark);
}

@media (max-width: 600px) {
  .fg-flash-wrap {
    padding: 14px 20px 0;
  }
}
/* Werbefläche unten auf der Detailseite (detailBottom) */
.fg-detailslot {
  margin-top: 32px;
}

.fg-slot--wide {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--fg-elev);
}
.fg-slot--wide .fg-slot__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
}
.fg-slot--wide .fg-slot__bg {
  display: none;
}
.fg-slot--wide.fg-slot--empty {
  display: none;
}

/* Werbe-PopUp (popUp2) — ohne JS bleibt es unsichtbar */
.fg-pop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 6, 18, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.fg-pop.is-open {
  opacity: 1;
  visibility: visible;
}

.fg-pop__box {
  position: relative;
  width: 100%;
  max-width: 700px;
  transform: scale(0.85);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.fg-pop.is-open .fg-pop__box {
  transform: scale(1);
}

.fg-pop__link {
  display: block;
  line-height: 0;
}

.fg-pop__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.fg-pop__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font: 700 26px/40px Arial, sans-serif;
  cursor: pointer;
}
.fg-pop__close:hover {
  background: var(--fg-magenta);
}

.fg-pop-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .fg-pop,
  .fg-pop__box {
    transition: none;
  }
}
/* =============================================================================
 * Mobiles Menü (Off-Canvas von links) — ersetzt das frühere Schubfach
 * ========================================================================== */
.fg-mnav {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
}
.fg-mnav[hidden] {
  display: none;
}
.fg-mnav.is-open {
  visibility: visible;
  pointer-events: auto;
}

.fg-mnav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(42, 30, 46, 0.5);
  opacity: 0;
  transition: opacity 0.25s;
}
.fg-mnav.is-open .fg-mnav__scrim {
  opacity: 1;
}

.fg-mnav__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(380px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 28px;
  background: #fff;
  box-shadow: 12px 0 40px rgba(132, 4, 94, 0.18);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
}
.fg-mnav.is-open .fg-mnav__panel {
  transform: translateX(0);
}
.fg-mnav__panel {
  /* Abschnitte nie stauchen: das Panel scrollt, die Inhalte behalten ihre Höhe */
}
.fg-mnav__panel > * {
  flex-shrink: 0;
}

.fg-mnav-open,
.fg-mnav-open body {
  overflow: hidden;
}

.fg-mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fg-line);
}

.fg-mnav__brand img {
  display: block;
  height: 30px;
  width: auto;
}

.fg-mnav__close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--fg-elev);
  color: var(--fg-ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.fg-mnav__find {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: var(--fg-soft);
}

.fg-mnav__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-ink);
}

.fg-mnav__radius {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.fg-mnav__km {
  position: relative;
  cursor: pointer;
}
.fg-mnav__km input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.fg-mnav__km span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--fg-line);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-ink);
}
.fg-mnav__km input:checked + span {
  border-color: var(--fg-pink);
  background: var(--fg-tint);
  color: var(--fg-magenta);
}
.fg-mnav__km input:focus-visible + span {
  outline: 2px solid var(--fg-rose);
  outline-offset: 1px;
}

.fg-mnav__acc {
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.fg-mnav__acc[open] .fg-mnav__sum::after {
  transform: rotate(-135deg);
}

.fg-mnav__sum {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 15px;
  color: var(--fg-ink);
  cursor: pointer;
  list-style: none;
}
.fg-mnav__sum::-webkit-details-marker {
  display: none;
}
.fg-mnav__sum::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border: solid var(--fg-mute);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.fg-mnav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--fg-magenta);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.fg-mnav__count--fav {
  display: none;
}
.fg-mnav__count--fav.is-on {
  display: inline-flex;
}

.fg-mnav__drop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 12px 14px;
}

.fg-mnav__links {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  overflow: hidden;
}

.fg-mnav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 16px;
  color: var(--fg-ink);
  font-weight: 600;
  font-size: 15px;
}
.fg-mnav__link + .fg-mnav__link {
  border-top: 1px solid var(--fg-line);
}
.fg-mnav__link:hover {
  background: var(--fg-soft);
  color: var(--fg-magenta);
}

.fg-mnav__cta {
  display: flex;
  justify-content: center;
  min-height: 48px;
  align-items: center;
}

@media (min-width: 901px) {
  .fg-mnav {
    display: none;
  }
}
/* --- Mobile Feinschliff ------------------------------------------------------ */
/* Pagination: kleiner und umbrechend, nie breiter als der Bildschirm */
@media (max-width: 560px) {
  .fg-pager {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
  }
  .fg-pager__item,
  .fg-pager__nav {
    min-width: 38px;
    width: auto;
    height: 40px;
    padding: 0 4px;
    font-size: 13.5px;
  }
}
/* Partner-Reihe im Fuss: bis 320px zwei nebeneinander, darunter einer in
   voller Breite */
@media (max-width: 560px) {
  .fg-slotgrid--mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .fg-slot--mini {
    width: 100%;
  }
  .fg-slot--mini .fg-slot__img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 319px) {
  .fg-slotgrid--mini {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Detail-Kopfleiste mobil: Nummer + Datum klein oben, darunter Telefon und
   Merken in einer Zeile, darunter die Blätterleiste */
.fg-detailbar__meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 760px) {
  .fg-detailbar__facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .fg-detailbar__meta {
    grid-column: 1/-1;
    justify-content: space-between;
  }
  .fg-detailbar__phone {
    justify-content: center;
    min-width: 0;
    font-size: 14.5px;
  }
  .fg-detailbar__note {
    justify-content: center;
  }
}
/* Personalisierung: Schalter in eigener Zeile unter dem Hinweis */
.fg-perso__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

/* =============================================================================
 * Studio-Galerie: Vollbild ohne JavaScript (:target)
 * ========================================================================== */
.fg-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(12, 1, 9, 0.94);
  padding: 64px 16px 72px;
  align-items: center;
  justify-content: center;
}
.fg-lightbox:target {
  display: flex;
}

.fg-lightbox__img {
  max-width: min(1000px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.fg-lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
}
.fg-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.fg-lightbox__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  color: #fff;
  font-weight: 600;
}

.fg-lightbox__prev,
.fg-lightbox__next {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 28px;
  line-height: 1;
}
.fg-lightbox__prev:hover,
.fg-lightbox__next:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* =============================================================================
 * Mobile Kontaktleiste (Detailseite)
 * ========================================================================== */
.fg-cbar {
  display: none;
}

@media (max-width: 900px) {
  .fg-cbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -6px 24px rgba(132, 4, 94, 0.14);
    transform: translateY(110%);
    transition: transform 0.28s ease;
    backdrop-filter: blur(8px);
  }
  .fg-cbar.is-shown {
    transform: translateY(0);
  }
  .fg-cbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    padding: 8px 6px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
  }
  .fg-cbar__btn .fg-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .fg-cbar__btn:hover, .fg-cbar__btn:focus-visible {
    color: #fff;
    filter: brightness(0.95);
  }
  .fg-cbar__btn--call {
    background: var(--fg-grad);
  }
  .fg-cbar__btn--wa {
    background: #13773B;
  }
  .fg-cbar__btn--msg {
    background: #fff;
    color: var(--fg-ink);
    border: 1px solid var(--fg-line);
  }
  .fg-cbar__btn--msg:hover, .fg-cbar__btn--msg:focus-visible {
    color: var(--fg-magenta);
    border-color: var(--fg-pink);
  }
  /* Platz unten, damit die Leiste nichts dauerhaft verdeckt */
  .fg-body--detail {
    padding-bottom: 76px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg-cbar {
    transition: none;
  }
}