/* TheFoodGuide Blog Sections
   Alles unter .fgbs gescoped, damit Illdy/Elementor nichts zerschießt —
   und umgekehrt. Eigenes Mini-Grid (Bootstrap-4-Namensschema), da Illdy
   nur Bootstrap 3 lädt (kein col-12, keine offset-md-*-Klassen). */

.fgbs {
  /* Foodguide-CI (aus dem Header der Seite gezogen):
     Koralle #F5A895 · Pink #EF88B3 · Limette #CCD613 · Rot #E73B51 · Bg #FFF3F3 */
  --fgbs-accent: #e73b51;
  --fgbs-accent-soft: #f5a895;
  --fgbs-text: inherit;
  --fgbs-box-bg: #ffffff;        /* Seitenhintergrund ist rosé — Boxen weiß */
  --fgbs-radius: 6px;
  --fgbs-gutter: 30px;
  --fgbs-section-space: 48px;
  color: var(--fgbs-text);
}

/* ---------- Grid ---------- */

.fgbs .container {
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--fgbs-gutter) / 2);
  padding-right: calc(var(--fgbs-gutter) / 2);
}

.fgbs .container-fluid {
  width: 100%;
  padding-left: calc(var(--fgbs-gutter) / 2);
  padding-right: calc(var(--fgbs-gutter) / 2);
}

.fgbs .containerNoPadding {
  padding-left: 0;
  padding-right: 0;
}

.fgbs .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--fgbs-gutter) / -2);
  margin-right: calc(var(--fgbs-gutter) / -2);
}

.fgbs .row > [class*="col-"] {
  position: relative;
  width: 100%;
  padding-left: calc(var(--fgbs-gutter) / 2);
  padding-right: calc(var(--fgbs-gutter) / 2);
  float: none;
}

.fgbs .col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
  .fgbs .col-md-3  { flex: 0 0 25%;       max-width: 25%; }
  .fgbs .col-md-4  { flex: 0 0 33.3333%;  max-width: 33.3333%; }
  .fgbs .col-md-5  { flex: 0 0 41.6667%;  max-width: 41.6667%; }
  .fgbs .col-md-6  { flex: 0 0 50%;       max-width: 50%; }
  .fgbs .col-md-10 { flex: 0 0 83.3333%;  max-width: 83.3333%; }
  .fgbs .offset-md-1 { margin-left: 8.3333%; }
}

@media (min-width: 992px) {
  .fgbs .col-lg-8  { flex: 0 0 66.6667%;  max-width: 66.6667%; }
  .fgbs .offset-lg-2 { margin-left: 16.6667%; }
}

.fgbs .justify-content-center { justify-content: center; }
.fgbs .textaligncenter { text-align: center; }

/* ---------- Basis ---------- */

.fgbs .fgbsSection {
  margin: var(--fgbs-section-space) 0;
  scroll-margin-top: 120px; /* Platz für Sticky-Header beim Anker-Scroll */
}

.fgbs img {
  max-width: 100%;
  height: auto;
  display: block;
}

.fgbs .introText { margin-bottom: 32px; }

/* Überschriften in Sektionsinhalten (WYSIWYG): Theme liefert bis zu 60px+,
   hier auf Blog-Maß gebracht — Hierarchie unterhalb der H1 (28/40px) */
.fgbs .fgbsSection h2 { font-size: 24px; line-height: 1.3; }
.fgbs .fgbsSection h3 { font-size: 20px; line-height: 1.35; }
.fgbs .fgbsSection h4 { font-size: 18px; line-height: 1.4; }

@media (min-width: 768px) {
  .fgbs .fgbsSection h2 { font-size: 30px; }
  .fgbs .fgbsSection h3 { font-size: 24px; }
  .fgbs .fgbsSection h4 { font-size: 20px; }
}

/* ---------- Textblock ---------- */

.fgbs .textblockBox {
  padding: 25px;
  border-radius: var(--fgbs-radius);
}

/* ---------- Bilder ---------- */

.fgbs .imageWrap img,
.fgbs .bildTextKombiImage img {
  width: 100%;
  border-radius: var(--fgbs-radius);
}

.fgbs .containerNoPadding .imageWrap img { border-radius: 0; }

.fgbs .twoImagesSection .imageCol { margin-bottom: var(--fgbs-gutter); }
@media (min-width: 768px) {
  .fgbs .twoImagesSection .imageCol { margin-bottom: 0; }
}

/* ---------- Video ---------- */

.fgbs .videoSection video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--fgbs-radius);
}

.fgbs .containerNoPadding video { border-radius: 0; }

/* ---------- Bildergalerie-Reihe (Swiper) ---------- */

.fgbs .bildergalerieReihe { padding: 16px 0; }

.fgbs .fgbsGallerySwiper { position: relative; }

.fgbs .fgbsGallerySwiper .galleryTile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--fgbs-radius);
}

.fgbs .fgbsGallerySwiper .galleryTile { aspect-ratio: 3 / 2; }
.fgbs .fgbsGallerySwiper.formatSquare .galleryTile { aspect-ratio: 1 / 1; }

/* ---------- Zitat ---------- */

.fgbs .zitatCard {
  margin: 0;
  padding: 32px 40px;
  background: var(--fgbs-box-bg);
  border-radius: var(--fgbs-radius);
  text-align: center;
  position: relative;
}

.fgbs .zitatCard::before {
  content: "\201C";
  display: block;
  font-size: 64px;
  line-height: 1;
  color: var(--fgbs-accent);
  font-family: Georgia, serif;
}

.fgbs .zitatFoto img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
}

.fgbs .zitatCard blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
}

.fgbs .zitatCard figcaption { margin-top: 20px; }

.fgbs .zitatGeber {
  display: block;
  font-weight: 700;
}

.fgbs .zitatPosition {
  display: block;
  font-size: 14px;
  opacity: 0.7;
}

/* ---------- FAQs / Accordions ---------- */

.fgbs .singleAccordion {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.fgbs .accordionHeadline {
  cursor: pointer;
  position: relative;
  padding: 16px 40px 16px 0;
}

.fgbs .accordionHeadline h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
}

.fgbs .accordionHeadline::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--fgbs-accent);
  transition: transform 0.2s ease;
}

.fgbs .singleAccordion.opened .accordionHeadline::after {
  transform: translateY(-50%) rotate(45deg);
}

.fgbs .accordionContent {
  display: none;
  padding: 0 0 20px;
}

.fgbs .singleAccordion.opened .accordionContent { display: block; }

/* ---------- Zahlen / Fakten ---------- */

.fgbs .zahlenUndFakten { padding: 24px 0; }

.fgbs .singleZahlUndFakt {
  text-align: center;
  margin-bottom: 24px;
}

.fgbs .singleZahlUndFakt .zahl {
  display: block;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fgbs-accent);
}

.fgbs .singleZahlUndFakt .fakt {
  display: block;
  margin-top: 8px;
}

/* ---------- Imageslider mit Box ---------- */

.fgbs .fgbsBoxSwiper { position: relative; }

.fgbs .fgbsBoxSwiper .slideInner {
  position: relative;
  padding-bottom: 16px;
}

.fgbs .fgbsBoxSwiper .slideImage img {
  width: 100%;
  border-radius: var(--fgbs-radius);
}

.fgbs .fgbsBoxSwiper .textBildTextWrap {
  background: #fff;
  border-radius: var(--fgbs-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 24px;
  margin: -48px 16px 0;
  position: relative;
}

@media (min-width: 768px) {
  .fgbs .fgbsBoxSwiper .textBildTextWrap {
    max-width: 45%;
    margin: 0;
    position: absolute;
    left: 32px;
    bottom: 32px;
  }
  .fgbs .fgbsBoxSwiper .slideInner.boxRight .textBildTextWrap {
    left: auto;
    right: 32px;
  }
}

.fgbs .fgbsBoxSwiper .textBildTextWrap h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.fgbs .swiper-pagination { position: static; margin-top: 12px; }

/* ---------- Bild-Text Kombi ---------- */

.fgbs .bildTextKombi { padding: 16px 0; }

.fgbs .bildTextKombi .textCol {
  display: flex;
  align-items: center;
}

.fgbs .bildTextKombi .bildTextKombiText { padding: 24px 0; }

@media (min-width: 768px) {
  .fgbs .bildTextKombi .bildTextKombiText { padding: 0 0 0 16px; }
}

/* ---------- Inhaltsverzeichnis ---------- */

/* Teil des Artikel-Headers: liegt direkt auf der Intro-Box (kein eigener
   Hintergrund); Einträge mit Unterstrich-Marker in der Akzentfarbe */
.fgbs .inhaltsverzeichnis {
  padding: 0;
  margin: 28px 0 12px;
  text-align: left;
}

.fgbs .inhaltsverzeichnisTitel {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 16px;
}

.fgbs .inhaltsverzeichnis ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

.fgbs .inhaltsverzeichnis li { margin-bottom: 12px; }
.fgbs .inhaltsverzeichnis li:last-child { margin-bottom: 0; }

.fgbs .inhaltsverzeichnis a {
  color: inherit;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s all ease;
  background: linear-gradient(180deg, transparent, transparent 70%, var(--fgbs-accent) 0, var(--fgbs-accent));
}

.fgbs .inhaltsverzeichnis a:hover {
  background: linear-gradient(180deg, transparent, transparent 70%, #f5a895 0, #f5a895);
}

/* ---------- Swiper Navigation ---------- */

.fgbs .swiper-button-prev,
.fgbs .swiper-button-next {
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.fgbs .swiper-button-prev::after,
.fgbs .swiper-button-next::after {
  font-size: 16px;
  font-weight: 700;
}

.fgbs .swiper-pagination-bullet-active { background: var(--fgbs-accent); }

/* ==========================================================
   Blog-Seitenlayout (Single + Archiv) — nach BonBon-Magazin
   ========================================================== */

/* ---------- Hero ---------- */

/* Falls der Seiten-Header fixed ist: Offset über die Variable setzen */
.fgbs.fgbsBlogPost { padding-top: var(--fgbs-header-offset, 0px); }

.fgbs .fgbsHero {
  height: 45vh;
  background-size: cover;
  background-position: center;
  padding: 0;
  /* Luft zwischen Header und Hero wie bei BonBon (dort 90px via Page-Padding) */
  margin-top: 60px;
}

@media (min-width: 768px)  { .fgbs .fgbsHero { height: 50vh; margin-top: 90px; } }
@media (min-width: 1200px) {
  .fgbs .fgbsHero {
    height: 55vh;
    /* Parallax wie bei BonBon: Bild steht fest, Seite scrollt drüber */
    background-attachment: fixed;
  }
}

/* ---------- Intro-Box (überlappt den Hero) ---------- */

.fgbs .fgbsBlogIntro { padding: 16px 0 0; }

.fgbs .fgbsBlogIntro.hasHero { margin-top: -20vh; }

@media (min-width: 768px) {
  .fgbs .fgbsBlogIntro.hasHero { margin-top: -30vh; }
}

.fgbs .blogBreadcrumb {
  padding-bottom: 10px;
  font-size: 16px; /* 16px wie beim BonBon-Original */
}

.fgbs .fgbsBlogIntro.hasHero .blogBreadcrumb {
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
}

.fgbs .blogBreadcrumb a {
  color: var(--fgbs-accent);
  text-decoration: none;
}

.fgbs .blogBreadcrumb a:hover { text-decoration: underline; }

.fgbs .blogIntroBox {
  padding: 24px 12px 12px;
  background: #fff;
}

@media (min-width: 768px) {
  .fgbs .blogIntroBox { padding: 36px 40px 12px; }
}

.fgbs .blogIntroBox h1 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .fgbs .blogIntroBox h1 { font-size: 40px; }
}

.fgbs .blogMeta {
  font-size: 16px;
}

.fgbs .blogMeta .metaDate { opacity: 0.75; }

/* ---------- Teaser-Karten ---------- */

.fgbs .singlePostTeaser {
  transition: 0.3s transform ease;
  margin-bottom: 30px;
  position: relative;
}

.fgbs .singlePostTeaser:hover { transform: scale(1.01); }

.fgbs .singlePostTeaser .teaserImage {
  aspect-ratio: 3 / 2;
  background: var(--fgbs-box-bg);
  border-radius: var(--fgbs-radius);
  overflow: hidden;
}

.fgbs .singlePostTeaser .teaserImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fgbs .singlePostTeaser .singlePostContent {
  width: 90%;
  margin-left: 5%;
  transform: translateY(-20px);
  padding: 12px 18px;
  background: #fff;
  border-radius: var(--fgbs-radius);
}

.fgbs .singlePostTeaser .metaDate {
  font-size: 14px;
  display: inline-block;
  opacity: 0.75;
}

.fgbs .singlePostTeaser a { text-decoration: none; color: inherit; }

.fgbs .singlePostTeaser .postHeadline {
  font-size: 22px;
  line-height: 1.3;
  margin: 4px 0 10px;
}

.fgbs .singlePostTeaser .intro { font-size: 15px; }

@media (min-width: 768px) {
  .fgbs .singlePostTeaser .singlePostContent {
    transform: none;
    width: 100%;
    margin: 0;
    background: transparent;
    padding: 15px 0;
  }
}

/* ---------- Ähnliche Beiträge ---------- */

.fgbs .fgbsRelatedPosts {
  background: var(--fgbs-box-bg);
  padding: 48px 0;
  margin-top: 32px;
}

.fgbs .relatedHeadline {
  margin: 0 0 32px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fgbs .fgbsRelatedPosts .singlePostContent { background: transparent; }

/* ---------- Archiv ---------- */

.fgbs .fgbsBlogArchiveHeader { padding: 48px 0 16px; }

.fgbs .fgbsBlogArchiveHeader h1 {
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 16px;
}

@media (min-width: 768px) {
  .fgbs .fgbsBlogArchiveHeader h1 { font-size: 40px; }
}
.fgbs .fgbsBlogArchiveGrid { padding-bottom: 48px; }
.fgbs .fgbsPagination { padding-top: 16px; }

/* ---------- Kategorie-Chips ---------- */

.fgbs .categories {
  display: inline-block;
  margin-left: 10px;
}

.fgbs .singleCat {
  display: inline-block;
  background: #fff3f3;
  color: var(--fgbs-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  margin-right: 6px;
  line-height: 1;
  transition: 0.3s all ease;
  vertical-align: 1px;
}

.fgbs .singleCat:hover {
  background: var(--fgbs-accent);
  color: #fff;
}

/* Chips auf Teaser-Karten (weißer/rosé Hintergrund): Rahmen statt Fläche */
.fgbs .singlePostTeaser .categories {
  display: block;
  margin: 6px 0 0;
}

.fgbs .archiveDescription {
  max-width: 640px;
  margin: 12px auto 0;
  opacity: 0.8;
}

/* ---------- Magazin-Übersicht: Hero-Teaser + Flying-Boxen (BonBon-Stil) ---------- */

.fgbs .archiveCategories { margin: 8px 0 32px; }
.fgbs .archiveCategories .singleCat { margin: 0 4px 8px; }

.fgbs .singleCat.active,
.fgbs .singleCat.active:hover {
  background: var(--fgbs-accent);
  color: #fff;
}

/* Neuester Beitrag: Bild links, weiße Textbox rechts überlappend */
@media (min-width: 768px) {
  .fgbs .heroBlogTeaser { margin-bottom: 48px; }

  .fgbs .heroBlogTeaser .singlePostTeaser { position: relative; }
  .fgbs .heroBlogTeaser .singlePostTeaser:hover { transform: none; }

  .fgbs .heroBlogTeaser .teaserImage {
    width: 80%;
    aspect-ratio: 16 / 9;
  }

  .fgbs .heroBlogTeaser .singlePostContent {
    width: 45%;
    max-width: 500px;
    background: #fff;
    padding: 25px 35px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    border-radius: var(--fgbs-radius);
  }

  .fgbs .heroBlogTeaser .postHeadline { font-size: 28px; }

  /* Beiträge 2-3: Textbox liegt auf der Bildunterkante */
  .fgbs .teaserContentFlyingBelow .singlePostTeaser { margin-bottom: 24px; }

  .fgbs .teaserContentFlyingBelow .teaserImage { width: 100%; }

  .fgbs .teaserContentFlyingBelow .singlePostContent {
    background: #fff;
    position: relative;
    transform: translateY(-60px);
    width: 90%;
    margin: 0 auto -60px;
    padding: 25px 30px;
    border-radius: var(--fgbs-radius);
  }
}

/* ---------- Bildnachweis ---------- */

.fgbs .bildnachweis {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.55;
  text-align: right;
  margin-top: 6px;
  padding: 0 2px;
}

/* Bild-Text Kombi: Bild wahlweise rechts (nur Desktop, mobil bleibt Bild oben) */
@media (min-width: 768px) {
  .fgbs .bildTextKombi .row.bildRechts { flex-direction: row-reverse; }
  .fgbs .bildTextKombi .row.bildRechts .bildTextKombiText { padding: 0 16px 0 0; }
}

/* ---------- Anzeige-Kennzeichnung ---------- */

.fgbs .fgbsHero,
.fgbs .singlePostTeaser .teaserImage { position: relative; }

.fgbs .adBadge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  background: rgba(20, 20, 20, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  pointer-events: none;
}

/* Fallback ohne Titelbild: Label als normale Zeile über der Intro-Box */
.fgbs .adBadgeStatic {
  position: static;
  display: inline-block;
  margin-top: 90px;
}

/* ==========================================================
   Restaurants — dezent, klassisch, viel Weiß, feine Linien.
   Aufbau nach BonBon-Partnerseiten: Inhalt links, Gutschein rechts.
   ========================================================== */

@media (min-width: 992px) {
  .fgbs .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

.fgbs .restaurantSeite { margin-top: 32px; }

.fgbs .restaurantCard {
  background: var(--fgbs-box-bg);
  border-radius: var(--fgbs-radius);
  padding: 36px 24px;
}
@media (min-width: 992px) {
  .fgbs .restaurantCard { padding: 48px 40px; }
}

.fgbs .restaurantKopf h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 4px;
}
@media (min-width: 768px) {
  .fgbs .restaurantKopf h1 { font-size: 36px; }
}

.fgbs .restaurantSubline {
  font-size: 17px;
  opacity: 0.7;
  margin: 0 0 14px;
}

.fgbs .restaurantTags { margin-bottom: 18px; }

.fgbs .restaurantTag {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 6px 6px 0;
  opacity: 0.85;
}

.fgbs .restaurantBeschreibung {
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0 0 8px;
}

.fgbs .infoLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 14px 0 4px;
}
.fgbs .infoLabel:first-child { margin-top: 0; }

.fgbs .restaurantStandorte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 24px;
  padding-top: 20px;
}

.fgbs .restaurantStandorte p {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.6;
}

.fgbs .restaurantBilder {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 24px;
  padding-top: 24px;
}
.fgbs .restaurantBilder .imageCol { margin-bottom: var(--fgbs-gutter); }
.fgbs .restaurantBilder .imageCol:last-child { margin-bottom: 0; }

/* ---- Rechte Spalte: Gutschein + Kontakt ---- */

.fgbs .restaurantSeitenleiste { margin-top: 32px; }
@media (min-width: 992px) {
  .fgbs .restaurantSeitenleiste {
    margin-top: 0;
    position: sticky;
    top: 120px;
    padding-left: 8px;
  }
}

.fgbs .gutscheinCard {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--fgbs-radius);
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 24px;
}

.fgbs .gutscheinTitel {
  font-size: 17px;
  line-height: 1.4;
  margin: 0;
}

.fgbs .gutscheinUntertitel {
  font-size: 14px;
  opacity: 0.7;
  margin: 2px 0 16px;
}

.fgbs .gutscheinBild {
  display: block;
  max-width: 190px;
  margin: 0 auto 18px;
}
.fgbs .gutscheinBild img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.fgbs .gutscheinInfos {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
}
.fgbs .gutscheinInfos li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.fgbs .gutscheinInfos li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--fgbs-accent);
  font-weight: 700;
}

.fgbs .kontaktCard {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--fgbs-radius);
  padding: 20px;
}

.fgbs .restaurantLinks {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.fgbs .restaurantLinks li { margin-bottom: 6px; }
.fgbs .restaurantLinks a {
  color: var(--fgbs-accent);
  text-decoration: none;
  font-size: 15px;
}
.fgbs .restaurantLinks a:hover { text-decoration: underline; }

.fgbs .restaurantButton {
  display: block;
  text-align: center;
  border: 1.5px solid var(--fgbs-accent);
  color: var(--fgbs-accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: 999px;
  transition: 0.25s all ease;
}
.fgbs .restaurantButton:hover { background: var(--fgbs-accent); color: #fff; }
.fgbs .restaurantButton.bonbon { background: var(--fgbs-accent); color: #fff; border-color: var(--fgbs-accent); }
.fgbs .restaurantButton.bonbon:hover { opacity: 0.88; }

/* ---- Teaser-Karten in Magazin-Artikeln ---- */

.fgbs .partnerBadge {
  display: inline-block;
  border: 1px solid var(--fgbs-accent);
  color: var(--fgbs-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.fgbs .partnerBadge.klein {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.fgbs .restaurantTeaser .restaurantKarte {
  background: var(--fgbs-box-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--fgbs-radius);
  overflow: hidden;
  margin-bottom: var(--fgbs-gutter);
  transition: 0.25s transform ease, 0.25s box-shadow ease;
}
.fgbs .restaurantTeaser .restaurantKarte:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
}

.fgbs .restaurantKarteLink { text-decoration: none; color: inherit; display: block; }

.fgbs .restaurantKarte .teaserImage {
  aspect-ratio: 3 / 2;
  position: relative;
  background: #f3eded;
}
.fgbs .restaurantKarte .teaserImage img {
  width: 100%; height: 100%; object-fit: cover;
}

.fgbs .restaurantKarteInhalt { padding: 18px 20px 20px; }
.fgbs .restaurantKarteInhalt h3 { margin: 0 0 2px; font-size: 20px; }
.fgbs .restaurantKarteInhalt .restaurantSubline { font-size: 14px; margin: 0 0 10px; }
.fgbs .restaurantKarteInhalt .restaurantTags { margin-bottom: 10px; }
.fgbs .restaurantKarteInhalt .restaurantTag { font-size: 11px; padding: 3px 8px; }

.fgbs .mehrLink {
  color: var(--fgbs-accent);
  font-size: 14px;
  font-weight: 700;
}

/* ---- Standort-Karte (MapLibre-Widget) ---- */

.fgbs .restaurantMap {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 24px;
  padding-top: 20px;
}

.fgbs .restaurantMap .bonbon-locations-map {
  margin-top: 8px;
  border-radius: var(--fgbs-radius);
}