/* =============================================================================
   R&B PAY — RATGEBER (Blog-Bereich)
   Namespace .rbbl-* / #rbbl-  · Design wie der Rest: Lila #6027A6, Poppins.
   Alle Regeln haengen unter .rbbl-root, damit nichts in Header/Footer blutet.
   Falle 7: kein *{margin:0}-Reset hier, Zentrierung immer zwei-klassig.
   ========================================================================== */

.rbbl-root{ font-family:'Poppins',sans-serif; color:#0d0613; }
.rbbl-root *{ box-sizing:border-box; }
.rbbl-root img{ max-width:100%; height:auto; }
.rbbl-root a{ text-decoration:none; }

.rbbl-root .rbbl-wrap{ width:min(100%,1180px); margin-left:auto; margin-right:auto; }
.rbbl-root .rbbl-wrap--schmal{ width:min(100%,780px); }

/* ---------------------------------------------------------------- HERO ---- */
.rbbl-root .rbbl-hero{
  position:relative; overflow:hidden; background:#0d0613; color:#fff;
  padding:140px 22px 68px;
}
.rbbl-root .rbbl-hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.rbbl-root .rbbl-hero__bg span{ position:absolute; border-radius:999px; filter:blur(100px); }
.rbbl-root .rbbl-hero__bg span:nth-child(1){ top:-160px; right:-100px; width:500px; height:500px; background:#6027A6; opacity:.48; }
.rbbl-root .rbbl-hero__bg span:nth-child(2){ bottom:-200px; left:-130px; width:440px; height:440px; background:#4A148C; opacity:.44; }
.rbbl-root .rbbl-hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 50% 20%,#000,transparent 68%);
  -webkit-mask-image:radial-gradient(circle at 50% 20%,#000,transparent 68%);
}
.rbbl-root .rbbl-hero__inner{ position:relative; z-index:2; }
.rbbl-root .rbbl-hero--mitte .rbbl-hero__inner{ text-align:center; }

.rbbl-root .rbbl-badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  font-size:13px; font-weight:600; letter-spacing:.01em; color:#fff;
}
.rbbl-root .rbbl-badge__dot{ width:7px; height:7px; border-radius:999px; background:#a97ce0; flex:0 0 auto; }

.rbbl-root .rbbl-hero__title{
  margin:20px 0 0; color:#fff; font-weight:800; letter-spacing:-.045em;
  font-size:clamp(31px,4.4vw,58px); line-height:1.06;
}
.rbbl-root .rbbl-hero__text{
  margin:18px 0 0; max-width:640px; color:rgba(255,255,255,.78);
  font-size:clamp(15px,1.25vw,18px); line-height:1.65; font-weight:500;
}
.rbbl-root .rbbl-hero--mitte .rbbl-hero__text{ margin-left:auto; margin-right:auto; }

/* Faktenzeile unter der Ueberschrift (Ort: Kreis, Einwohner, PLZ …) */
.rbbl-root .rbbl-fakten{ display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 0; padding:0; list-style:none; }
.rbbl-root .rbbl-hero--mitte .rbbl-fakten{ justify-content:center; }
.rbbl-root .rbbl-fakten li{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:11px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  font-size:13px; font-weight:600; color:rgba(255,255,255,.9);
}
.rbbl-root .rbbl-fakten li svg{ width:15px; height:15px; opacity:.7; flex:0 0 auto; }

/* --------------------------------------------------------------- SUCHE ---- */
.rbbl-root .rbbl-suche{ position:relative; z-index:2; max-width:600px; margin:32px auto 0; }
.rbbl-root .rbbl-suche__box{
  display:flex; align-items:center; gap:12px; background:#fff; border-radius:18px;
  padding:6px 6px 6px 20px; box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.rbbl-root .rbbl-suche__ic{ width:22px; height:22px; color:#6027A6; flex:0 0 auto; }
.rbbl-root .rbbl-suche__input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:'Poppins',sans-serif; font-size:16px; font-weight:500; color:#0d0613; padding:14px 0;
}
.rbbl-root .rbbl-suche__input::placeholder{ color:rgba(0,0,0,.4); }
.rbbl-root .rbbl-suche__clear{
  flex:0 0 auto; width:46px; height:46px; border:0; border-radius:13px;
  background:#f6f3fb; color:#6027A6; cursor:pointer; display:none;
  align-items:center; justify-content:center; transition:background .18s ease;
}
.rbbl-root .rbbl-suche__clear.is-an{ display:flex; }
.rbbl-root .rbbl-suche__clear:hover{ background:#efe7f8; }
.rbbl-root .rbbl-suche__clear svg{ width:18px; height:18px; }
.rbbl-root .rbbl-suche__hinweis{ margin:12px 0 0; color:rgba(255,255,255,.6); font-size:13px; font-weight:500; text-align:center; }

/* ---------------------------------------------------------------- BODY ---- */
.rbbl-root .rbbl-body{ background:#fff; padding:44px 22px 88px; }
.rbbl-root .rbbl-body--soft{ background:#faf8fd; }

/* Kategorie-Schalter */
.rbbl-root .rbbl-kats{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:0 0 34px; }
.rbbl-root .rbbl-kat{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  border:1px solid rgba(96,39,166,.18); border-radius:999px; background:#fff;
  font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:600; color:#3b2b50;
  cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.rbbl-root .rbbl-kat:hover{ background:#f6f2fb; border-color:rgba(96,39,166,.34); }
.rbbl-root .rbbl-kat.is-an{ background:#6027A6; border-color:#6027A6; color:#fff; }
.rbbl-root .rbbl-kat__n{
  display:inline-block; min-width:22px; padding:1px 6px; border-radius:999px;
  background:rgba(96,39,166,.1); font-size:11.5px; font-weight:700; color:#6027A6; text-align:center;
}
.rbbl-root .rbbl-kat.is-an .rbbl-kat__n{ background:rgba(255,255,255,.22); color:#fff; }

/* Karten-Raster (eigener Name, damit es nicht mit Horizons .grid kollidiert) */
.rbbl-root .rbbl-karten{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); }
.rbbl-root .rbbl-karte{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid rgba(96,39,166,.13); border-radius:20px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.rbbl-root .rbbl-karte:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(96,39,166,.14); border-color:rgba(96,39,166,.28); }
.rbbl-root .rbbl-karte__bild{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:#efe7f8; }
.rbbl-root .rbbl-karte__grafik{ display:block; width:100%; aspect-ratio:16/10; }
.rbbl-root .rbbl-karte__inhalt{ display:flex; flex-direction:column; flex:1; padding:19px 20px 21px; }
.rbbl-root .rbbl-karte__kat{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#6027A6; }
.rbbl-root .rbbl-karte__titel{ margin:9px 0 0; font-size:17px; line-height:1.34; font-weight:700; color:#0d0613; }
.rbbl-root .rbbl-karte__text{ margin:10px 0 0; font-size:14px; line-height:1.6; font-weight:500; color:rgba(0,0,0,.62); }
.rbbl-root .rbbl-karte__mehr{ margin:16px 0 0; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:#6027A6; }
.rbbl-root .rbbl-karte__mehr svg{ width:15px; height:15px; transition:transform .18s ease; }
.rbbl-root .rbbl-karte:hover .rbbl-karte__mehr svg{ transform:translateX(3px); }
.rbbl-root .rbbl-karte.is-aus{ display:none; }

.rbbl-root .rbbl-leer{ margin:34px auto 0; max-width:420px; text-align:center; color:rgba(0,0,0,.55); font-size:15px; font-weight:500; }
.rbbl-root .rbbl-mehrknopf{ display:flex; justify-content:center; margin:30px 0 0; }
.rbbl-root .rbbl-mehrknopf button{
  padding:13px 26px; border-radius:14px; border:1px solid rgba(96,39,166,.24); background:#fff;
  font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:700; color:#6027A6; cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.rbbl-root .rbbl-mehrknopf button:hover{ background:#f6f2fb; border-color:#6027A6; }

/* -------------------------------------------------------- BEITRAGSTEXT ---- */
.rbbl-root .rbbl-artikel{ font-size:16.5px; line-height:1.78; font-weight:450; color:#241a30; }
.rbbl-root .rbbl-artikel > p{ margin:0 0 19px; }
.rbbl-root .rbbl-artikel h2{
  margin:44px 0 15px; font-size:clamp(22px,2.5vw,28px); line-height:1.26;
  font-weight:800; letter-spacing:-.028em; color:#0d0613;
}
.rbbl-root .rbbl-artikel h3{ margin:32px 0 11px; font-size:19px; line-height:1.34; font-weight:700; color:#0d0613; }
.rbbl-root .rbbl-artikel ul,.rbbl-root .rbbl-artikel ol{ margin:0 0 20px; padding-left:22px; }
.rbbl-root .rbbl-artikel li{ margin:0 0 9px; }
.rbbl-root .rbbl-artikel a{ color:#6027A6; font-weight:600; border-bottom:1px solid rgba(96,39,166,.3); }
.rbbl-root .rbbl-artikel a:hover{ border-bottom-color:#6027A6; }
.rbbl-root .rbbl-artikel strong{ font-weight:700; color:#0d0613; }

/* Beitragsbild mit Bildnachweis */
.rbbl-root .rbbl-figur{ margin:0 0 30px; }
.rbbl-root .rbbl-figur img{ display:block; width:100%; border-radius:18px; background:#efe7f8; }
.rbbl-root .rbbl-figur figcaption{
  margin:10px 2px 0; font-size:12px; line-height:1.75; font-weight:500; color:rgba(0,0,0,.48);
}
.rbbl-root .rbbl-figur figcaption a{ color:rgba(0,0,0,.62); border-bottom:1px solid rgba(0,0,0,.18); font-weight:500; }
.rbbl-root .rbbl-figur figcaption a:hover{ color:#6027A6; border-bottom-color:#6027A6; }

/* Infokasten */
.rbbl-root .rbbl-kasten{
  margin:0 0 26px; padding:22px 24px; border-radius:18px;
  background:#f7f3fc; border:1px solid rgba(96,39,166,.15);
}
.rbbl-root .rbbl-kasten__titel{
  margin:0 0 11px; display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:700; color:#4A148C;
}
.rbbl-root .rbbl-kasten__titel svg{ width:19px; height:19px; flex:0 0 auto; }
.rbbl-root .rbbl-kasten p:last-child,.rbbl-root .rbbl-kasten ul:last-child{ margin-bottom:0; }
.rbbl-root .rbbl-kasten p{ margin:0 0 12px; font-size:15px; line-height:1.7; }
.rbbl-root .rbbl-kasten ul{ margin:0 0 12px; padding-left:20px; font-size:15px; line-height:1.7; }
.rbbl-root .rbbl-kasten li{ margin:0 0 7px; }

/* Tarif-Karten */
.rbbl-root .rbbl-tarife{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:0 0 26px; }
.rbbl-root .rbbl-tarif{ padding:20px 21px; border-radius:17px; background:#fff; border:1px solid rgba(96,39,166,.16); }
.rbbl-root .rbbl-tarif--top{ border-color:#6027A6; box-shadow:0 12px 32px rgba(96,39,166,.13); }
.rbbl-root .rbbl-tarif__name{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6027A6; }
.rbbl-root .rbbl-tarif__wert{ margin:9px 0 0; font-size:26px; font-weight:800; letter-spacing:-.03em; color:#0d0613; }
.rbbl-root .rbbl-tarif__wert small{ font-size:14px; font-weight:600; color:rgba(0,0,0,.55); letter-spacing:0; }
.rbbl-root .rbbl-tarif__text{ margin:9px 0 0; font-size:13.5px; line-height:1.6; font-weight:500; color:rgba(0,0,0,.62); }

/* Nachbarorte / verwandte Beitraege */
.rbbl-root .rbbl-linkliste{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 8px; padding:0; list-style:none; }
.rbbl-root .rbbl-linkliste a{
  display:inline-flex; align-items:baseline; gap:7px; padding:9px 15px; border-radius:12px;
  background:#f7f3fc; border:1px solid rgba(96,39,166,.14);
  font-size:14px; font-weight:600; color:#3b2b50; transition:background .18s ease,border-color .18s ease;
}
.rbbl-root .rbbl-linkliste a:hover{ background:#efe7f8; border-color:rgba(96,39,166,.34); }
.rbbl-root .rbbl-linkliste .rbbl-km{ font-size:12px; font-weight:600; color:rgba(0,0,0,.42); }

/* Brotkrumen. Das Innenabstands-Polster ist kein Zierrat: ohne es sind die
   Links nur 20 px hoch und damit unter der Mindestgröße für Tippziele. */
.rbbl-root .rbbl-krumen{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px; margin:0 0 4px; font-size:13px; font-weight:600; }
.rbbl-root .rbbl-krumen a{ display:inline-flex; align-items:center; min-height:26px; padding:3px 2px; color:rgba(255,255,255,.62); }
.rbbl-root .rbbl-krumen a:hover{ color:#fff; }
.rbbl-root .rbbl-krumen span{ color:rgba(255,255,255,.34); }
.rbbl-root .rbbl-krumen em{ font-style:normal; color:rgba(255,255,255,.85); }

/* CTA am Ende */
.rbbl-root .rbbl-cta{
  margin:44px 0 0; padding:32px 30px; border-radius:22px; overflow:hidden; position:relative;
  background:linear-gradient(135deg,#6027A6,#4A148C); color:#fff;
}
.rbbl-root .rbbl-cta__titel{ margin:0; font-size:clamp(21px,2.4vw,26px); line-height:1.26; font-weight:800; letter-spacing:-.03em; color:#fff; }
.rbbl-root .rbbl-cta__text{ margin:12px 0 0; max-width:520px; font-size:15px; line-height:1.68; font-weight:500; color:rgba(255,255,255,.84); }
.rbbl-root .rbbl-cta__reihe{ display:flex; flex-wrap:wrap; gap:11px; margin:22px 0 0; }
.rbbl-root .rbbl-knopf{
  display:inline-flex; align-items:center; gap:9px; padding:14px 22px; border-radius:14px;
  background:#fff; color:#4A148C; font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:700;
  border:0; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease;
}
.rbbl-root .rbbl-knopf:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.24); }
.rbbl-root .rbbl-knopf svg{ width:17px; height:17px; }
.rbbl-root .rbbl-knopf--geist{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); }
.rbbl-root .rbbl-knopf--geist:hover{ background:rgba(255,255,255,.2); }

/* Abschnittsueberschrift im Body */
.rbbl-root .rbbl-h2{ margin:0 0 20px; font-size:clamp(21px,2.4vw,27px); line-height:1.26; font-weight:800; letter-spacing:-.03em; color:#0d0613; }
.rbbl-root .rbbl-h2--mitte{ text-align:center; }
.rbbl-root .rbbl-vor{ margin:0 auto 30px; max-width:560px; text-align:center; font-size:15.5px; line-height:1.68; font-weight:500; color:rgba(0,0,0,.62); }
.rbbl-root .rbbl-block{ margin:0 0 54px; }
.rbbl-root .rbbl-block:last-child{ margin-bottom:0; }

/* Orte-Verzeichnis (Hub) */
.rbbl-root .rbbl-kreise{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.rbbl-root .rbbl-kreis{ padding:21px 22px 23px; border-radius:19px; background:#fff; border:1px solid rgba(96,39,166,.13); }
.rbbl-root .rbbl-kreis__titel{ margin:0 0 4px; font-size:16px; font-weight:700; color:#0d0613; }
.rbbl-root .rbbl-kreis__titel a{ color:#0d0613; }
.rbbl-root .rbbl-kreis__titel a:hover{ color:#6027A6; }
.rbbl-root .rbbl-kreis__n{ margin:0 0 13px; font-size:12.5px; font-weight:600; color:rgba(0,0,0,.48); }
.rbbl-root .rbbl-kreis__orte{ display:flex; flex-wrap:wrap; gap:6px 10px; margin:0; padding:0; list-style:none; }
.rbbl-root .rbbl-kreis__orte a{ font-size:13.5px; font-weight:500; color:#5b4b70; }
.rbbl-root .rbbl-kreis__orte a:hover{ color:#6027A6; text-decoration:underline; }

/* Ortsliste auf der Kreisseite */
.rbbl-root .rbbl-orte{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
.rbbl-root .rbbl-ort{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 17px; border-radius:14px; background:#fff; border:1px solid rgba(96,39,166,.13);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.rbbl-root .rbbl-ort:hover{ background:#f7f3fc; border-color:rgba(96,39,166,.32); transform:translateY(-2px); }
.rbbl-root .rbbl-ort__name{ font-size:14.5px; font-weight:600; color:#0d0613; }
.rbbl-root .rbbl-ort__meta{ font-size:12px; font-weight:600; color:rgba(0,0,0,.42); white-space:nowrap; }

/* -------------------------------------------------------------- MOBIL -----
   Breakpoint 940 statt 900: GENAU dort wechselt der Header sein Verhalten.
   Auf dem Desktop schwebt er (die Section ist 0 hoch), deshalb braucht der Hero
   dort 140 px Vorlauf. Ab 940 px reserviert die Section 66 px eigenen Platz —
   die 140 bzw. 118 px kämen dann NOCH DAZU und schoben den Inhalt rund 180 px
   nach unten. Auf dem Handy braucht der Hero deshalb nur normalen Innenabstand.
   Zwischen 900 und 940 px galt vorher sogar der Desktop-Wert plus die 66 px. */
@media (max-width:940px){
  .rbbl-root .rbbl-hero{ padding:38px 16px 46px; }
  .rbbl-root .rbbl-body{ padding:34px 16px 66px; }
  .rbbl-root .rbbl-artikel{ font-size:16px; }
  .rbbl-root .rbbl-cta{ padding:26px 22px; }
  .rbbl-root .rbbl-kasten{ padding:19px 18px; }
  .rbbl-root .rbbl-karten{ grid-template-columns:1fr; }
  .rbbl-root .rbbl-artikel h2{ margin-top:36px; }
}
@media (max-width:420px){
  .rbbl-root .rbbl-knopf{ width:100%; justify-content:center; }
}