/* ─────────────────────────────────────────────────────────────
   Self-hosted Fonts – DSGVO-konform, kein Google-CDN-Request.
   Lizenzen: Open Font License (OFL) – Hanken Grotesk & Space Mono.

   Eingebundene Gewichte (nur tatsächlich genutzte):
     Hanken Grotesk 400 / 600 / 700 / 800
       → Body-Text, Buttons, Pin-Titel, Logo, Überschriften
     Space Mono 400 / 700
       → metaline / Datum-Chips (werden ab nächstem Slice genutzt)

   Dateipfade: public/assets/fonts/hanken-grotesk/*.woff2|woff
               public/assets/fonts/space-mono/*.woff2|woff

   Download (WOFF2+WOFF vorgepackt, direkt einsatzbereit):
     https://fontsource.org/fonts/hanken-grotesk  → "Download"
     https://fontsource.org/fonts/space-mono      → "Download"
   Oder via google-webfonts-helper (gwfh.mranftl.com/fonts):
     Schrift suchen → Gewichte 400/600/700/800 auswählen →
     "Modern Browsers" → ZIP mit WOFF2+WOFF herunterladen.
   Entpackte Dateien nach obigen Pfaden ablegen – fertig.
   ───────────────────────────────────────────────────────────── */

/* Hanken Grotesk – 400 Regular */
@font-face {
  font-family:  "Hanken Grotesk";
  font-weight:  400;
  font-style:   normal;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk/hanken-grotesk-400.woff2') format('woff2'),
       url('/assets/fonts/hanken-grotesk/hanken-grotesk-400.woff')  format('woff');
}
/* Hanken Grotesk – 600 SemiBold */
@font-face {
  font-family:  "Hanken Grotesk";
  font-weight:  600;
  font-style:   normal;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk/hanken-grotesk-600.woff2') format('woff2'),
       url('/assets/fonts/hanken-grotesk/hanken-grotesk-600.woff')  format('woff');
}
/* Hanken Grotesk – 700 Bold */
@font-face {
  font-family:  "Hanken Grotesk";
  font-weight:  700;
  font-style:   normal;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk/hanken-grotesk-700.woff2') format('woff2'),
       url('/assets/fonts/hanken-grotesk/hanken-grotesk-700.woff')  format('woff');
}
/* Hanken Grotesk – 800 ExtraBold */
@font-face {
  font-family:  "Hanken Grotesk";
  font-weight:  800;
  font-style:   normal;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk/hanken-grotesk-800.woff2') format('woff2'),
       url('/assets/fonts/hanken-grotesk/hanken-grotesk-800.woff')  format('woff');
}

/* Space Mono – 400 Regular */
@font-face {
  font-family:  "Space Mono";
  font-weight:  400;
  font-style:   normal;
  font-display: swap;
  src: url('/assets/fonts/space-mono/space-mono-400.woff2') format('woff2'),
       url('/assets/fonts/space-mono/space-mono-400.woff')  format('woff');
}
/* Space Mono – 700 Bold */
@font-face {
  font-family:  "Space Mono";
  font-weight:  700;
  font-style:   normal;
  font-display: swap;
  src: url('/assets/fonts/space-mono/space-mono-700.woff2') format('woff2'),
       url('/assets/fonts/space-mono/space-mono-700.woff')  format('woff');
}

/* ============================================================
   ht24-regio-board.css
   Drittes Portal-Layout "Regio Board" – vollständig isoliert.
   Kein geteilter Code mit ht24-pinterest.css oder custom.css.

   Scoping-Strategie:
   · Alle CSS-Custom-Properties stehen auf .rb-layout, NICHT auf :root
     → kein Leak in Default- oder Pinterest-Layout
   · Alle Klassen tragen rb- Präfix → kein Konflikt mit Bootstrap / Materialize
   · Globale Selektoren (* body html) werden NICHT gesetzt
   ============================================================ */

/* ── Scoped CSS-Variablen ── */
.rb-layout {
  --rb-blue:         #1773bb;
  --rb-blue-dark:    #135f9c;
  --rb-blue-util:    #1f86d0;
  --rb-green:        #84bd3f;
  --rb-green-btn:    #4f9b2e;
  --rb-green-btn-dk: #41841f;
  --rb-ink:          #1b2230;
  --rb-ink-soft:     #616c7c;
  --rb-line:         #e9ebef;
  --rb-bg:           #f5f6f8;
  --rb-card:         #ffffff;
  --rb-shadow-sm:    0 1px 2px rgba(20,30,50,.05), 0 1px 3px rgba(20,30,50,.06);
  --rb-shadow-lg:    0 12px 30px rgba(20,30,50,.14), 0 4px 10px rgba(20,30,50,.08);

  --rb-font: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --rb-mono: "Space Mono", "Courier New", monospace;

  /* Seiten-Akzentfarbe (überschreibbar per .rb-type-X am .rb-layout) */
  --rb-accent:       var(--rb-blue);
  --rb-accent-light: rgba(23,115,187,.09);

  /* Layout-Grundwerte */
  background:              var(--rb-bg);
  color:                   var(--rb-ink);
  font-family:             var(--rb-font);
  font-size:               15px;
  line-height:             1.45;
  -webkit-font-smoothing:  antialiased;
  min-height:              100vh;
}

/* Typspezifische Akzentfarben – je Seite über .rb-type-X am .rb-layout */
.rb-layout.rb-type-jobs   { --rb-accent: #8e44ad; --rb-accent-light: rgba(142,68,173,.09); }
.rb-layout.rb-type-event  { --rb-accent: #138a8a; --rb-accent-light: rgba( 19,138,138,.09); }
.rb-layout.rb-type-angebot{ --rb-accent: #b88520; --rb-accent-light: rgba(184,133, 32,.09); }
.rb-layout.rb-type-video  { --rb-accent: #c0392b; --rb-accent-light: rgba(192, 57, 43,.09); }
/* rb-type-news bleibt blau = Standardwert */

/* Box-sizing nur für rb-layout-Kinder, ohne globalen Reset */
.rb-layout *, .rb-layout *::before, .rb-layout *::after {
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

/* ── Container ── */
.rb-wrap {
  width:   100%;
  max-width: 2120px;
  margin:  0 auto;
  padding: 0 clamp(18px, 2.4vw, 52px);
}

/* ============================================================
   BODY-Override: nur aktiv wenn Layout geladen
   ============================================================ */
.rb-page-body {
  background: var(--rb-bg, #f5f6f8);
  margin:  0;
  padding: 0;
}

/* ============================================================
   UTILITY-BAND
   ============================================================ */
.rb-utilbar {
  background: -webkit-linear-gradient(left, var(--rb-blue-dark), var(--rb-blue-util));
  background:         linear-gradient(90deg, var(--rb-blue-dark), var(--rb-blue-util));
  color:     #eaf4fc;
  font-size: 12.5px;
}
.rb-util-inner {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: center;
          align-items: center;
  height: 34px;
  gap:    14px;
}
.rb-util-left {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  gap: 10px;
}
.rb-weather {
  background:    rgba(255,255,255,.16);
  padding:       3px 10px;
  border-radius: 999px;
  font-weight:   600;
}
.rb-util-right {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  gap: 10px;
}
.rb-util-sep {
  opacity: .40;
}
.rb-util-contact a {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  color:          inherit;
  text-decoration: none;
  opacity:        .92;
}
.rb-util-contact a:hover {
  opacity:        1;
  text-decoration: underline;
}
.rb-util-ic {
  font-style: normal;
  font-size:  13px;
  line-height: 1;
  opacity:    .80;
}

/* ── Region-Picker (Bundesland + Landkreis Dropdowns) ── */
.rb-region-pick {
  position: relative;
}
.rb-region-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
          align-items: center;
  gap: 5px;
  background:    rgba(255,255,255,.16);
  border:        none;
  color:         #fff;
  font:          inherit;
  font-size:     12.5px;
  font-weight:   700;
  padding:       4px 12px;
  border-radius: 999px;
  cursor:        pointer;
  white-space:   nowrap;
}
.rb-region-btn:hover {
  background: rgba(255,255,255,.28);
}
.rb-pick-caret {
  font-size: 8px;
  opacity: .70;
  line-height: 1;
}
.rb-region-menu {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  left:          0;
  z-index:       60;
  background:    #fff;
  border:        1px solid var(--rb-line);
  border-radius: 14px;
  box-shadow:    var(--rb-shadow-lg);
  padding:       8px;
  min-width:     190px;
  max-height:    360px;
  overflow:      auto;
}
.rb-region-menu.rb-open {
  display: block;
}
.rb-pick-head {
  font-size:      11px;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color:          var(--rb-ink-soft);
  padding:        6px 6px 3px;
}
.rb-region-menu button {
  display:     block;
  width:       100%;
  text-align:  left;
  border:      none;
  background:  none;
  padding:     9px 11px;
  border-radius: 9px;
  font-size:   13px;
  color:       var(--rb-ink);
  cursor:      pointer;
  white-space: nowrap;
}
.rb-region-menu button:hover {
  background: #eef0f3;
}
.rb-region-menu button.rb-pick-active {
  background: var(--rb-blue);
  color:      #fff;
}

/* ============================================================
   HEADER
   ============================================================ */
.rb-header {
  position:      sticky;
  top:           0;
  z-index:       40;
  background:    var(--rb-card);
  border-bottom: 1px solid var(--rb-line);
  box-shadow:    0 1px 0 rgba(20,30,50,.02);
}
.rb-header-inner {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  gap:    22px;
  height: 74px;
}

/* Logo */
.rb-logo-link {
  display:         block;
  -webkit-flex:    none;
          flex:    none;
  text-decoration: none;
  line-height:     0;
}
.rb-logo-img {
  display:    block;
  max-height: 60px;
  max-width:  200px;
  width:      auto;
  height:     auto;
}

/* Suchfeld (Platzhalter, disabled) */
.rb-searchbar {
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  gap:           10px;
  background:    #eef0f3;
  border:        1.5px solid transparent;
  border-radius: 999px;
  padding:       0 18px;
  height:        48px;
  cursor:        text;
  transition:    border-color .15s, background .15s;
}
.rb-searchbar:focus-within {
  background:    #fff;
  border-color:  var(--rb-accent);
}
.rb-search-ic {
  font-size: 21px;
  color:     var(--rb-ink-soft);
}
.rb-searchbar input {
  -webkit-flex: 1;
          flex: 1;
  border:      none;
  background:  none;
  outline:     none;
  font-size:   15px;
  color:       var(--rb-ink);
  font-family: var(--rb-font);
}

/* Header-Actions / Pinnwand-Button (Platzhalter, disabled) */
.rb-header-actions {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  gap:         10px;
  -webkit-flex: none;
          flex: none;
}
.rb-board-btn {
  -webkit-flex: none;
          flex: none;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  gap:           9px;
  background:    #fff;
  border:        1.5px solid var(--rb-line);
  border-radius: 999px;
  padding:       0 7px 0 16px;
  height:        46px;
  font-weight:   700;
  font-size:     14px;
  color:         var(--rb-ink);
  opacity:       .65;
  cursor:        not-allowed;
  font-family:   var(--rb-font);
}
.rb-board-heart {
  color:     var(--rb-green);
  font-size: 15px;
}
.rb-board-count {
  background:  var(--rb-green);
  color:       #fff;
  min-width:   26px;
  height:      26px;
  padding:     0 7px;
  border-radius: 999px;
  display: -webkit-inline-flex;
  display:         inline-flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  font-size:   13px;
  font-weight: 800;
}
@media (max-width: 1120px) {
  .rb-board-txt { display: none; }
  .rb-header-inner { gap: 12px; }
}
@media (max-width: 540px) {
  .rb-searchbar { display: none; }
  .rb-board-btn { display: none; }
}

/* ============================================================
   KATEGORIE-PILLS (Platzhalter, disabled)
   ============================================================ */
.rb-pills-wrap {
  overflow: hidden;
  padding: 2px 0;
}
.rb-pills {
  display: -webkit-flex;
  display: flex;
  gap:            9px;
  overflow-x:     auto;
  padding:        12px 0 14px;
  scrollbar-width: none;
}
.rb-pills::-webkit-scrollbar { display: none; }
.rb-pill {
  -webkit-flex: none;
          flex: none;
  padding:       9px 17px;
  border-radius: 999px;
  border:        1.5px solid var(--rb-line);
  background:    #fff;
  font-size:     14px;
  font-weight:   600;
  color:         var(--rb-ink-soft);
  white-space:   nowrap;
  cursor:        pointer;
  font-family:   var(--rb-font);
  -webkit-transition: border-color .16s, color .16s, background .16s;
          transition: border-color .16s, color .16s, background .16s;
}
.rb-pill:hover {
  border-color: var(--rb-accent);
  color:        var(--rb-accent);
}
.rb-pill--active {
  background:   var(--rb-accent);
  border-color: var(--rb-accent);
  color:        #fff;
  font-weight:  700;
}
.rb-pill--active:hover {
  background:   var(--rb-accent);
  border-color: var(--rb-accent);
  color:        #fff;
  opacity:      .88;
}

/* ============================================================
   HAUPTBEREICH
   ============================================================ */
.rb-main {
  padding-bottom: 40px;
  min-height:     40vh;
}

/* Abschnitts-Überschrift */
.rb-stripe {
  display:          -webkit-flex;
  display:          flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: flex-end;
          align-items: flex-end;
  gap:              16px;
  padding:          24px 0 16px;
}
.rb-stripe-title {
  margin:         0;
  font-size:      27px;
  font-weight:    800;
  letter-spacing: -.6px;
  color:          var(--rb-ink);
}
.rb-stripe-title::before {
  content:       "";
  display:       inline-block;
  width:         8px;
  height:        21px;
  border-radius: 3px;
  background:    var(--rb-blue);
  margin-right:  11px;
  vertical-align: middle;
  position:      relative;
  top:           -2px;
}
.rb-stripe-sub {
  margin:    4px 0 0;
  color:     var(--rb-ink-soft);
  font-size: 14.5px;
}
.rb-stripe-label {
  margin:      0 0 4px;
  font-size:   12px;
  font-weight: 400;
  font-style:  italic;
  color:       #555e6e;
}

/* ============================================================
   HEUTE-BAND  (.bento-strip-Stil aus der Vorlage — kein Kasten)
   ============================================================ */
.rb-heute {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  gap:           11px;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-bottom: 16px;
}
.rb-heute-live {
  display: -webkit-inline-flex;
  display:         inline-flex;
  -webkit-align-items: center;
          align-items: center;
  gap:            7px;
  font-size:      11.5px;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color:          var(--rb-blue);
}
.rb-heute-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--rb-green-btn);
  -webkit-flex: none;
          flex: none;
  -webkit-animation: rbHeutePulse 2s infinite;
          animation: rbHeutePulse 2s infinite;
}
@-webkit-keyframes rbHeutePulse {
  0%   { box-shadow: 0 0 0 0   rgba(132,189,63,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(132,189,63,0);  }
  100% { box-shadow: 0 0 0 0   rgba(132,189,63,0);  }
}
@keyframes rbHeutePulse {
  0%   { box-shadow: 0 0 0 0   rgba(132,189,63,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(132,189,63,0);  }
  100% { box-shadow: 0 0 0 0   rgba(132,189,63,0);  }
}
.rb-heute-date {
  font-size:      14px;
  font-weight:    800;
  color:          var(--rb-ink);
  letter-spacing: -.2px;
}
.rb-heute-chip {
  background:    #f1f4f7;
  color:         var(--rb-ink-soft);
  padding:       4px 11px;
  border-radius: 999px;
  font-size:     12px;
  font-weight:   600;
  white-space:   nowrap;
}
.rb-heute-next {
  margin-left:   auto;
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         var(--rb-ink-soft);
  font-size:     12.5px;
  white-space:   nowrap;
  max-width:     50%;
  overflow:      hidden;
  text-overflow: ellipsis;
  font-family:   var(--rb-font);
  -webkit-transition: color .15s;
          transition: color .15s;
}
.rb-heute-next strong {
  font-weight: 800;
  color:       var(--rb-ink);
}
.rb-heute-next:hover { color: var(--rb-blue); }
@media (max-width: 700px) { .rb-heute-next { margin-left: 0; max-width: 100%; } }

/* Wrapper: Heute-Band + Top-Themen gemeinsam ein-/ausblenden */
.rb-all-section { display: block; }

/* ============================================================
   BENTO — Top-Themen-Grid
   ============================================================ */
.rb-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows:  200px;
  gap:             14px;
  margin-bottom:   34px;
}
.rb-bento-card {
  position:            relative;
  border-radius:       18px;
  overflow:            hidden;
  background-size:     cover;
  background-position: center;
  background-color:    var(--rb-blue-dark);
  cursor:              pointer;
  display:             -webkit-flex;
  display:             flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  padding:             14px 16px;
  color:               #fff;
  text-decoration:     none;
  box-shadow:          var(--rb-shadow-sm);
  -webkit-transition:  box-shadow .18s, -webkit-transform .18s;
          transition:  box-shadow .18s, transform .18s;
}
.rb-bento-card::after {
  content:  "";
  position: absolute;
  top:      0;
  right:    0;
  bottom:   0;
  left:     0;
  background: -webkit-linear-gradient(top, rgba(0,0,0,.0) 30%, rgba(0,0,0,.68) 100%);
  background:         linear-gradient(to bottom, rgba(0,0,0,.0) 30%, rgba(0,0,0,.68) 100%);
  z-index:  0;
  pointer-events: none;
}
.rb-bento-card:hover {
  box-shadow:          var(--rb-shadow-lg);
  -webkit-transform:   translateY(-2px);
          transform:   translateY(-2px);
}
.rb-bento-big {
  grid-column: span 2;
  grid-row:    span 2;
  padding:     20px 22px;
}
.rb-bento-top {
  position: relative;
  z-index:  1;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  gap: 8px;
}
.rb-bento-cat {
  color:         #fff;
  font-size:     11px;
  font-weight:   800;
  padding:       4px 10px;
  border-radius: 999px;
  background:    rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.rb-bento-tx {
  position: relative;
  z-index:  1;
}
.rb-bento-kicker {
  display:        block;
  font-family:    var(--rb-mono);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity:        .9;
}
.rb-bento-htitle {
  margin:         6px 0 0;
  font-size:      clamp(22px, 2.1vw, 34px);
  font-weight:    800;
  line-height:    1.08;
  letter-spacing: -.6px;
  text-shadow:    0 2px 18px rgba(0,0,0,.45);
  max-width:      15ch;
}
.rb-bento-meta {
  display:    block;
  margin-top: 8px;
  font-size:  13px;
  opacity:    .92;
}
.rb-bento-title {
  margin:                0;
  font-size:             15.5px;
  font-weight:           800;
  line-height:           1.22;
  text-shadow:           0 1px 12px rgba(0,0,0,.5);
  display:               -webkit-box;
  -webkit-line-clamp:    3;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
}
@media (max-width: 840px) {
  .rb-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .rb-bento-big { grid-row: span 2; }
}
@media (max-width: 520px) {
  .rb-bento { grid-template-columns: 1fr; }
}

/* ============================================================
   MASONRY-GRID
   ============================================================ */
.rb-masonry {
  -webkit-column-count: 4;
          column-count: 4;
  -webkit-column-gap:   18px;
          column-gap:   18px;
  padding-bottom: 6px;
}
@media (min-width: 1560px) { .rb-masonry { -webkit-column-count: 5; column-count: 5; } }
@media (min-width: 1920px) { .rb-masonry { -webkit-column-count: 6; column-count: 6; } }
@media (max-width: 1180px) { .rb-masonry { -webkit-column-count: 3; column-count: 3; } }
@media (max-width:  780px) { .rb-masonry { -webkit-column-count: 2; column-count: 2; } }
@media (max-width:  480px) { .rb-masonry { -webkit-column-count: 1; column-count: 1; } }

/* ── Pin-Karte ── */
.rb-pin {
  -webkit-column-break-inside: avoid;
          break-inside:        avoid;
  margin:        0 0 18px;
  background:    var(--rb-card);
  border:        1px solid var(--rb-line);
  border-radius: 17px;
  overflow:      hidden;
  box-shadow:    var(--rb-shadow-sm);
  -webkit-transition: box-shadow .2s, -webkit-transform .2s, border-color .2s;
          transition: box-shadow .2s, transform .2s, border-color .2s;
  -webkit-animation: rb-popIn .45s cubic-bezier(.2,.7,.3,1);
          animation: rb-popIn .45s cubic-bezier(.2,.7,.3,1);
}
.rb-pin:nth-child(2)  { -webkit-animation-delay:.03s; animation-delay:.03s }
.rb-pin:nth-child(3)  { -webkit-animation-delay:.06s; animation-delay:.06s }
.rb-pin:nth-child(4)  { -webkit-animation-delay:.09s; animation-delay:.09s }
.rb-pin:nth-child(5)  { -webkit-animation-delay:.12s; animation-delay:.12s }
.rb-pin:nth-child(6)  { -webkit-animation-delay:.15s; animation-delay:.15s }
.rb-pin:nth-child(n+7){ -webkit-animation-delay:.18s; animation-delay:.18s }

.rb-pin:hover {
  box-shadow:         var(--rb-shadow-lg);
  -webkit-transform:  translateY(-3px);
          transform:  translateY(-3px);
  border-color:       #e0e3e8;
}
@-webkit-keyframes rb-popIn {
  from { -webkit-transform: translateY(16px); opacity: .7; }
  to   { -webkit-transform: none;             opacity: 1; }
}
@keyframes rb-popIn {
  from { transform: translateY(16px); opacity: .7; }
  to   { transform: none;             opacity: 1; }
}

/* Pin-Link: gesamte Karte klickbar */
.rb-pin-link {
  display:         block;
  text-decoration: none;
  color:           inherit;
}

/* ── Cover / Bild ── */
.rb-pin-media { position: relative; }

.rb-cover {
  position: relative;
  overflow: hidden;
  display:  block;
  width:    100%;
}

/* Seitenverhältnisse: padding-top Fallback + @supports-Override */
.rb-ratio-tall  { padding-top: 130%;   }
.rb-ratio-med   { padding-top: 77.5%;  }
.rb-ratio-short { padding-top: 58.75%; }

@supports (aspect-ratio: 1/1) {
  .rb-ratio-tall  { padding-top: 0; aspect-ratio: 4/5.2;  }
  .rb-ratio-med   { padding-top: 0; aspect-ratio: 4/3.1;  }
  .rb-ratio-short { padding-top: 0; aspect-ratio: 16/9.4; }
}

.rb-cover-photo {
  position:   absolute;
  top:        0;
  right:      0;
  bottom:     0;
  left:       0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  -webkit-transition: -webkit-transform .45s cubic-bezier(.2,.7,.3,1);
          transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.rb-pin:hover .rb-cover-photo {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
.rb-cover-placeholder {
  position:   absolute;
  top:        0;
  right:      0;
  bottom:     0;
  left:       0;
  background: -webkit-linear-gradient(135deg, #e8ecf2, #d4dae4);
  background:         linear-gradient(135deg, #e8ecf2, #d4dae4);
}

/* ── Pin-Info (Textbereich) ── */
.rb-pin-info {
  padding: 14px 15px 15px;
}

/* Kategorie-Badge */
.rb-pin-cat {
  display: -webkit-inline-flex;
  display:         inline-flex;
  -webkit-align-items: center;
          align-items: center;
  gap:           7px;
  color:         #fff;
  font-size:     12px;
  font-weight:   800;
  letter-spacing:.2px;
  padding:       4px 11px;
  border-radius: 999px;
  margin-bottom: 9px;
}
.rb-pin-cat::before {
  content:       "";
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    rgba(255,255,255,.9);
  display:       block;
  -webkit-flex: none;
          flex: none;
}
/* Farben pro Content-Typ */
.rb-pin-cat--news    { background: #1773bb; }
.rb-pin-cat--event   { background: #e67e22; }
.rb-pin-cat--produkt { background: #4f9b2e; }
.rb-pin-cat--job     { background: #8e44ad; }
.rb-pin-cat--galerie { background: #2980b9; }
.rb-pin-cat--videos  { background: #c0392b; }

.rb-pin-title {
  margin:         0;
  font-size:      16.5px;
  font-weight:    800;
  line-height:    1.26;
  letter-spacing: -.3px;
  color:          var(--rb-ink);
  display:        -webkit-box;
  -webkit-line-clamp:   2;
  -webkit-box-orient: vertical;
  overflow:       hidden;
}
.rb-pin-teaser {
  margin:      7px 0 0;
  font-size:   13.5px;
  color:       var(--rb-ink-soft);
  line-height: 1.5;
  display:     -webkit-box;
  -webkit-line-clamp:   2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}
.rb-pin-metaline {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap:        8px;
  margin-top: 11px;
  font-size:  12px;
  color:      var(--rb-ink-soft);
}

/* Leerzustand */
.rb-empty {
  text-align: center;
  padding:    70px 20px 90px;
  color:      var(--rb-ink-soft);
  font-size:  15px;
}

.rb-filter-empty {
  text-align:    center;
  padding:       40px 20px;
  color:         var(--rb-ink-soft);
  font-size:     14.5px;
  border:        1px dashed var(--rb-line);
  border-radius: var(--rb-rad);
  margin-bottom: 34px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.rb-footer {
  margin-top: 48px;
  background: #1b2330;
  color:      #9aa6b6;
  position:   relative;
  overflow:   hidden;
}
.rb-footer::before {
  content:    "";
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: -webkit-linear-gradient(left, var(--rb-blue), var(--rb-green));
  background:         linear-gradient(90deg, var(--rb-blue), var(--rb-green));
}

/* Newsletter-Band */
.rb-footer-news-band {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items:     center;
          align-items:     center;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap:           24px;
  padding:       28px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rb-fnews-tx strong {
  display:        block;
  color:          #fff;
  font-size:      22px;
  font-weight:    800;
  letter-spacing: -.4px;
}
.rb-fnews-tx span {
  display:    block;
  color:      #9aa6b6;
  font-size:  14px;
  margin-top: 4px;
}
.rb-fnews-form {
  display: -webkit-flex;
  display: flex;
  gap:           8px;
  background:    #131a24;
  border:        1.5px solid #2c3644;
  border-radius: 999px;
  padding:       6px 6px 6px 18px;
  -webkit-flex: 1;
          flex: 1;
  min-width:     280px;
  max-width:     460px;
  -webkit-transition: border-color .15s;
          transition: border-color .15s;
}
.rb-fnews-form:focus-within { border-color: var(--rb-blue); }
.rb-fnews-form input {
  -webkit-flex: 1;
          flex: 1;
  min-width:   0;
  border:      none;
  background:  none;
  color:       #fff;
  font-size:   14px;
  outline:     none;
  font-family: var(--rb-font);
}
.rb-fnews-form input::-webkit-input-placeholder { color: #7c8694; }
.rb-fnews-form input::-moz-placeholder          { color: #7c8694; }
.rb-fnews-form input::placeholder               { color: #7c8694; }
.rb-fnews-form button {
  background:    var(--rb-green-btn);
  color:         #fff;
  border:        none;
  border-radius: 999px;
  padding:       11px 22px;
  font-weight:   800;
  font-size:     14px;
  cursor:        pointer;
  white-space:   nowrap;
  font-family:   var(--rb-font);
  -webkit-transition: background .15s;
          transition: background .15s;
}
.rb-fnews-form button:hover { background: var(--rb-green-btn-dk); }

/* Footer-Spalten */
.rb-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:         40px;
  padding:     34px 0 16px;
  -webkit-align-items: start;
          align-items: start;
}
@media (max-width: 860px) { .rb-footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rb-footer-cols { grid-template-columns: 1fr;     } }

.rb-footer-logo {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
          align-items: baseline;
  gap:           8px;
  margin-bottom: 14px;
}
.rb-footer-logo-regio {
  font-size:      26px;
  font-weight:    800;
  color:          var(--rb-blue);
  letter-spacing: -.5px;
}
.rb-footer-logo-region {
  font-size:      12px;
  font-weight:    700;
  color:          var(--rb-green);
  letter-spacing: 3px;
}
.rb-footer-brand p {
  margin:     0 0 0;
  font-size:  13.5px;
  line-height:1.6;
  max-width:  330px;
  color:      #9aa6b6;
}

.rb-footer-col h4 {
  margin:         0 0 16px;
  color:          #fff;
  font-size:      12.5px;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .8px;
  display: -webkit-inline-flex;
  display:         inline-flex;
  -webkit-align-items: center;
          align-items: center;
  gap: 9px;
}
.rb-footer-col h4::before {
  content:       "";
  display:       block;
  width:         15px;
  height:        2px;
  border-radius: 2px;
  background:    var(--rb-green);
  -webkit-flex: none;
          flex: none;
}
.rb-footer-col a {
  display:         block;
  color:           #aeb6c2;
  text-decoration: none;
  font-size:       14px;
  padding:         5px 0;
  -webkit-transition: color .14s;
          transition: color .14s;
}
.rb-footer-col a:hover { color: #fff; }

/* Footer-Bottom */
.rb-footer-bottom {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap:           10px;
  padding:       18px 0;
  border-top:    1px solid rgba(255,255,255,.08);
  font-size:     12.5px;
  color:         #7c8694;
}

/* Footer-Wordmark: dekoratives Riesenschrift-Element (aus der Vorlage) */
.rb-footer-wordmark {
  font-size:      clamp(46px, 11vw, 168px);
  font-weight:    800;
  letter-spacing: -.05em;
  line-height:    .82;
  margin-top:     6px;
  white-space:    nowrap;
  overflow:       hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.rb-fw-a { color: rgba(127,184,230,.10); }
.rb-fw-b { color: rgba(132,189,63,.11);  }

/* Mobile Footer-Anpassungen */
@media (max-width: 520px) {
  .rb-footer-bottom    { -webkit-flex-direction: column; flex-direction: column; gap: 6px; text-align: center; }
  .rb-footer-news-band { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }
  .rb-fnews-form       { min-width: auto; width: 100%; max-width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rb-pin { -webkit-animation: none; animation: none; }
  .rb-pin, .rb-cover-photo { -webkit-transition: none; transition: none; }
}

/* ── Beliebte Themen (Stripe-Trending — rechts neben dem Stripe-Titel) ── */
.rb-stripe-trending {
  display:              -webkit-flex;
  display:              flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items:  flex-end;
          align-items:  flex-end;
  gap:                  9px;
  -webkit-flex-shrink:  0;
          flex-shrink:  0;
}
.rb-trend-label {
  font-size:      11px;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--rb-ink-soft);
}
.rb-trend-chips {
  display:         -webkit-flex;
  display:         flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap:             7px;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  max-width:       520px;
}
.rb-themen-pill {
  background:    var(--rb-card);
  border:        1px solid var(--rb-line);
  border-radius: 999px;
  padding:       6px 12px;
  font-size:     11px;
  font-weight:   700;
  font-family:   inherit;
  color:         var(--rb-ink-soft);
  cursor:        pointer;
  -webkit-transition: border-color .14s, color .14s, background .14s, -webkit-transform .14s;
          transition: border-color .14s, color .14s, background .14s, transform .14s;
}
.rb-themen-pill::before {
  content: "#";
}
.rb-themen-pill:hover {
  border-color: var(--rb-blue);
  color:        var(--rb-blue);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.rb-themen-pill--active {
  background:   var(--rb-blue);
  border-color: var(--rb-blue);
  color:        #fff;
}
@media (max-width: 760px) {
  .rb-stripe-trending { display: none; }
}

/* ── Tag-Filter-Ergebnis-Headline ─────────────────────────── */
.rb-tag-header {
  display:      -webkit-flex;
  display:      flex;
  -webkit-align-items: center;
          align-items: center;
  gap:          14px;
  padding:      18px 0 12px;
  border-bottom: 1px solid var(--rb-line);
  margin-bottom: 18px;
}
.rb-tag-headline {
  margin:      0;
  font-size:   20px;
  font-weight: 700;
  color:       var(--rb-ink);
  flex:        1;
}
.rb-tag-headline strong {
  color: var(--rb-blue);
}
.rb-tag-reset {
  display:         -webkit-inline-flex;
  display:         inline-flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  width:           28px;
  height:          28px;
  border:          1px solid var(--rb-line);
  border-radius:   50%;
  text-decoration: none;
  color:           var(--rb-ink-soft);
  font-size:       18px;
  line-height:     1;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  -webkit-transition: border-color .14s, color .14s;
          transition: border-color .14s, color .14s;
}
.rb-tag-reset:hover {
  border-color: var(--rb-blue);
  color:        var(--rb-blue);
}

/* ============================================================
   RECHTLICHE SEITEN (Impressum / Datenschutz / AGB)
   ============================================================ */
.rb-legal-page {
  max-width:   820px;
  padding:     32px 0 60px;
}
.rb-legal-header {
  display:         -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  gap:             14px;
  padding-bottom:  20px;
  border-bottom:   2px solid var(--rb-line);
  margin-bottom:   28px;
}
.rb-legal-title {
  margin:      0;
  font-size:   26px;
  font-weight: 800;
  color:       var(--rb-ink);
  -webkit-flex: 1;
          flex: 1;
}

/* Impressum: Firma + Anschrift */
.rb-impress-lead {
  font-size:      14px;
  color:          var(--rb-ink-soft);
  margin-bottom:  22px;
  padding-bottom: 16px;
  border-bottom:  1px solid var(--rb-line);
}
.rb-impress-lead strong {
  display:     block;
  font-size:   17px;
  font-weight: 700;
  color:       var(--rb-ink);
  margin-bottom: 4px;
}

/* Impressum: 2-spaltiges Kontakt-Grid */
.rb-impress-grid {
  display:  -webkit-flex;
  display:  flex;
  gap:      0 40px;
  margin-bottom: 28px;
}
.rb-impress-col {
  -webkit-flex: 1;
          flex: 1;
  min-width: 0;
}
@media (max-width: 560px) {
  .rb-impress-grid { -webkit-flex-direction: column; flex-direction: column; }
}
.rb-impress-row {
  display:       -webkit-flex;
  display:       flex;
  gap:           8px;
  padding:       9px 0;
  border-bottom: 1px solid var(--rb-line);
  font-size:     14px;
  color:         var(--rb-ink);
}
.rb-impress-row a { color: var(--rb-blue); text-decoration: none; }
.rb-impress-row a:hover { text-decoration: underline; }
.rb-impress-label {
  color:      var(--rb-ink-soft);
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  min-width:  120px;
}

/* Fließtext-Typografie für CMS-HTML */
.rb-legal-content h1,
.rb-legal-content h2,
.rb-legal-content h3,
.rb-legal-content h4 {
  font-weight: 700;
  margin:      1.4em 0 .45em;
  line-height: 1.25;
  color:       var(--rb-ink);
}
.rb-legal-content h1 { font-size: 20px; }
.rb-legal-content h2 { font-size: 17px; }
.rb-legal-content h3 { font-size: 15px; }
.rb-legal-content h4 { font-size: 14px; color: var(--rb-ink-soft); }
.rb-legal-content p  { margin: 0 0 .85em; line-height: 1.65; font-size: 14px; text-align: justify; }
.rb-legal-content div { font-family: var(--rb-font) !important; font-size: 14px !important;
  color: var(--rb-ink) !important; text-align: justify; line-height: 1.65; width: auto !important; }
.rb-legal-content ul,
.rb-legal-content ol { margin: 0 0 .85em 1.4em; padding: 0; }
.rb-legal-content li { margin-bottom: .35em; font-size: 14px; line-height: 1.6; }
.rb-legal-content a  { color: var(--rb-blue); text-decoration: none; }
.rb-legal-content a:hover { text-decoration: underline; }
.rb-legal-content strong { color: var(--rb-ink); }

/* Hinweisbox #disclaim (AGB): Inline-Styles überschreiben, rb-Stil */
#disclaim {
  font-family:    var(--rb-font) !important;
  font-size:      11px !important;
  font-weight:    700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color:          var(--rb-ink-soft) !important;
  background:     var(--rb-bg) !important;
  border-width:   0 0 0 3px !important;
  border-style:   solid !important;
  border-color:   var(--rb-blue) !important;
  padding:        8px 14px !important;
  width:          auto !important;
  margin-top:     24px;
  text-align:     left !important;
}
#disclaim + div {
  font-family: var(--rb-font) !important;
  font-size:   14px !important;
  color:       var(--rb-ink) !important;
  width:       auto !important;
  background:  var(--rb-bg) !important;
  border-left: 3px solid var(--rb-blue);
  padding:     14px 14px 14px 15px !important;
  line-height: 1.65 !important;
  text-align:  justify !important;
  margin-bottom: 16px;
}
#disclaim + div h3 { display: none !important; }
#disclaim + div * {
  font-family: var(--rb-font) !important;
  color:       var(--rb-ink) !important;
}

/* Rechtliche Seiten Navigation (Querlinks) */
.rb-legal-nav {
  display:    -webkit-flex;
  display:    flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap:        8px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--rb-line);
}
.rb-legal-nav-item {
  font-size:       13px;
  color:           var(--rb-ink-soft);
  text-decoration: none;
  padding:         5px 12px;
  border:          1px solid var(--rb-line);
  border-radius:   999px;
  -webkit-transition: border-color .14s, color .14s;
          transition: border-color .14s, color .14s;
}
.rb-legal-nav-item:hover,
.rb-legal-nav-item--active {
  border-color: var(--rb-blue);
  color:        var(--rb-blue);
}

/* ── Jobs-Unterseite ─────────────────────────────────────────── */
.rb-jobs-page {
  padding-bottom: 60px;
}

/* Radius-Umschalter */
.rb-jobs-radius {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  margin-bottom: 20px;
}
.rb-radius-btn {
  padding:       7px 18px;
  border-radius: 999px;
  border:        1.5px solid var(--rb-line);
  background:    transparent;
  font-size:     13px;
  font-weight:   600;
  color:         var(--rb-ink-soft);
  cursor:        pointer;
  -webkit-transition: border-color .14s, color .14s, background .14s;
          transition: border-color .14s, color .14s, background .14s;
}
.rb-radius-btn:hover {
  border-color: var(--rb-accent);
  color:        var(--rb-accent);
}
.rb-radius-btn--active {
  background:   var(--rb-accent);
  border-color: var(--rb-accent);
  color:        #fff;
}
.rb-radius-btn--active:hover {
  color:   #fff;
  opacity: .88;
}

/* Zweispaltiges Layout */
.rb-jobs-layout {
  display:     flex;
  gap:         28px;
  align-items: flex-start;
}
.rb-jobs-sidebar {
  width:       220px;
  flex-shrink: 0;
  position:    sticky;
  top:         16px;
}
.rb-jobs-main {
  flex:      1;
  min-width: 0;
}

/* Sidebar Kategorie-Liste */
.rb-jobs-kat-list {
  background:    var(--rb-card);
  border:        1px solid var(--rb-line);
  border-radius: 12px;
  padding:       8px;
  overflow:      hidden;
}
.rb-jobs-kat {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  width:          100%;
  padding:        8px 10px;
  border:         none;
  background:     none;
  border-radius:  8px;
  cursor:         pointer;
  text-align:     left;
  font-size:      13px;
  color:          var(--rb-ink);
  -webkit-transition: background .12s;
          transition: background .12s;
}
.rb-jobs-kat:hover:not(.rb-jobs-kat--zero):not(.rb-jobs-kat--active) {
  background: var(--rb-bg);
}
.rb-jobs-kat--active {
  background: var(--rb-accent);
  color:      #fff;
}
.rb-jobs-kat--active .rb-jobs-kat-cnt {
  background: rgba(255,255,255,.22);
  color:      #fff;
}
.rb-jobs-kat--zero {
  opacity: 0.38;
  cursor:  default;
}
.rb-jobs-kat-name {
  flex:        1;
  min-width:   0;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 6px;
}
.rb-jobs-kat-cnt {
  font-size:     11px;
  font-weight:   700;
  background:    var(--rb-bg);
  color:         var(--rb-ink-soft);
  padding:       2px 7px;
  border-radius: 999px;
  min-width:     22px;
  text-align:    center;
  flex-shrink:   0;
}

/* Job-Zeile (Karten-Stil nach Pin-Vorlage) */
.rb-job-row {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       14px 16px;
  margin-bottom: 10px;
  background:    var(--rb-card);
  border:        1px solid var(--rb-line);
  border-radius: 17px;
  box-shadow:    var(--rb-shadow-sm);
  -webkit-transition: box-shadow .2s, -webkit-transform .2s, border-color .2s;
          transition: box-shadow .2s, transform .2s, border-color .2s;
}
.rb-job-row:last-child {
  margin-bottom: 0;
}
.rb-job-row:hover {
  box-shadow:         var(--rb-shadow-lg);
  -webkit-transform:  translateY(-2px);
          transform:  translateY(-2px);
  border-color:       #e0e3e8;
}
.rb-job-thumb {
  flex-shrink: 0;
}
.rb-job-thumb img {
  width:         80px;
  height:        60px;
  object-fit:    cover;
  border-radius: 10px;
  display:       block;
  background:    var(--rb-bg);
}
.rb-job-info {
  flex:      1;
  min-width: 0;
}
.rb-job-title {
  display:         block;
  font-size:       14px;
  font-weight:     700;
  color:           var(--rb-ink);
  text-decoration: none;
  margin-bottom:   5px;
  overflow:        hidden;
  text-overflow:   ellipsis;
  white-space:     nowrap;
}
.rb-job-title:hover {
  color: var(--rb-accent);
}
.rb-job-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         5px;
  align-items: center;
}
.rb-job-badge {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--rb-accent);
  background:     var(--rb-accent-light);
  padding:        2px 8px;
  border-radius:  4px;
}
.rb-job-ort {
  font-size: 12px;
  color:     var(--rb-ink-soft);
}
.rb-job-ort::before {
  content:      "📍";
  margin-right: 2px;
  font-style:   normal;
}
.rb-job-katbadge {
  font-size:     11px;
  color:         var(--rb-ink-soft);
  background:    var(--rb-bg);
  border:        1px solid var(--rb-line);
  padding:       2px 8px;
  border-radius: 4px;
}
.rb-job-apply {
  flex-shrink:     0;
  margin-left:     auto;
  font-size:       13px;
  font-weight:     700;
  color:           var(--rb-accent);
  text-decoration: none;
  white-space:     nowrap;
  padding:         7px 14px;
  border:          1.5px solid var(--rb-accent);
  border-radius:   999px;
  -webkit-transition: background .14s, color .14s;
          transition: background .14s, color .14s;
}
.rb-job-apply:hover {
  background: var(--rb-accent);
  color:      #fff;
}

/* Responsive */
@media (max-width: 640px) {
  .rb-jobs-layout {
    flex-direction: column;
  }
  .rb-jobs-sidebar {
    width:    100%;
    position: static;
  }
  .rb-job-apply {
    display: none;
  }
  .rb-job-title {
    white-space: normal;
  }
}

/* ══════════════════════════════════════════════════════════════
   TERMINE-UNTERSEITE  (?type=event)
   ══════════════════════════════════════════════════════════════ */

/* ── Magazin / Kalender-Umschalter (Kapsel-Pillenform) ─────── */
.rb-event-switcher {
  display:        inline-flex;
  gap:            4px;
  background:     #eef0f3;
  border-radius:  999px;
  padding:        4px;
  margin-bottom:  20px;
}
.rb-ev-sw-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       7px 18px;
  border-radius: 999px;
  border:        none;
  background:    none;
  font-size:     13px;
  font-weight:   700;
  color:         var(--rb-ink-soft);
  cursor:        pointer;
  -webkit-transition: background .13s, color .13s, box-shadow .13s;
          transition: background .13s, color .13s, box-shadow .13s;
}
.rb-ev-sw-btn:hover { color: var(--rb-ink); }
.rb-ev-sw-btn--active {
  background:  #fff;
  color:       var(--rb-accent);
  box-shadow:  var(--rb-shadow-sm);
}
.rb-ev-sw-btn:disabled {
  opacity: .38;
  cursor:  not-allowed;
}

/* ── Kategorie-Pillen ─────────────────────────────────────── */
.rb-event-kats {
  display:       flex;
  flex-wrap:     wrap;
  gap:           7px;
  margin-bottom: 22px;
}
.rb-evt-kat {
  display:       inline-flex;
  align-items:   center;
  padding:       5px 13px;
  border-radius: 999px;
  border:        1.5px solid var(--kat-color, #bbb);
  color:         var(--kat-color, #888);
  background:    #fff;
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  -webkit-transition: background .13s, color .13s;
          transition: background .13s, color .13s;
}
.rb-evt-kat:hover    { background: var(--kat-color, #bbb); color: #fff; }
.rb-evt-kat--active  { background: var(--kat-color, #bbb); color: #fff; }

/* "Alle"-Pille: Seitenakzentfarbe */
.rb-evt-kat--all { --kat-color: var(--rb-accent); }

/* 19 Kategorie-Farben */
.rb-evt-kat--buehne-theater     { --kat-color: #8e44ad; }
.rb-evt-kat--gesundheit         { --kat-color: #27ae60; }
.rb-evt-kat--musik-konzerte     { --kat-color: #e74c3c; }
.rb-evt-kat--dies-das           { --kat-color: #7f8c8d; }
.rb-evt-kat--klassik            { --kat-color: #2980b9; }
.rb-evt-kat--vortraege-lesungen { --kat-color: #16a085; }
.rb-evt-kat--fuehrungen         { --kat-color: #d35400; }
.rb-evt-kat--ausstellungen      { --kat-color: #1abc9c; }
.rb-evt-kat--party-club         { --kat-color: #c0392b; }
.rb-evt-kat--sport-fitness      { --kat-color: #2471a3; }
.rb-evt-kat--kinder-familie     { --kat-color: #f39c12; }
.rb-evt-kat--maerkte-messen     { --kat-color: #e67e22; }
.rb-evt-kat--feiern-feste       { --kat-color: #e91e63; }
.rb-evt-kat--politik-verbaende  { --kat-color: #455a64; }
.rb-evt-kat--brauchtum          { --kat-color: #795548; }
.rb-evt-kat--wanderungen        { --kat-color: #388e3c; }
.rb-evt-kat--fasnacht           { --kat-color: #7b1fa2; }
.rb-evt-kat--senioren           { --kat-color: #546e7a; }
.rb-evt-kat--arbeit-beruf       { --kat-color: #1565c0; }

/* Kategorie-Badge auf Karten */
.rb-event-cat-badge {
  display:        inline-block;
  font-size:      10px;
  font-weight:    700;
  padding:        2px 7px;
  border-radius:  4px;
  background:     var(--kat-color, #bbb);
  color:          #fff;
  letter-spacing: .02em;
}

/* ── Datumsbadge (auf Bild, absolut) ─────────────────────── */
.rb-event-date-badge {
  position:      absolute;
  top:           10px;
  left:          10px;
  background:    rgba(255,255,255,.92);
  border-radius: 8px;
  padding:       5px 9px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  line-height:   1.1;
  box-shadow:    0 1px 4px rgba(0,0,0,.12);
  min-width:     36px;
  pointer-events: none;
}
.rb-event-date-day {
  font-size:   18px;
  font-weight: 800;
  color:       var(--rb-ink);
  line-height: 1;
}
.rb-event-date-mo {
  font-size:      10px;
  font-weight:    700;
  color:          var(--rb-accent);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── CSS-Platzhalter (kein Bild) ─────────────────────────── */
.rb-event-no-img {
  position:       absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:     linear-gradient(140deg, var(--rb-accent) 0%, rgba(230,126,34,.45) 100%);
  display:        flex;
  align-items:    center;
  justify-content: center;
}
.rb-event-no-img-icon {
  font-size: 2.8rem;
  opacity:   .35;
}

/* ── Hero: 2 große Kacheln ───────────────────────────────── */
.rb-event-hero {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px;
  margin-bottom:         20px;
}
.rb-event-hero-card {
  background:    var(--rb-card);
  border:        1px solid var(--rb-line);
  border-radius: 14px;
  overflow:      hidden;
  box-shadow:    var(--rb-shadow-sm);
  -webkit-transition: box-shadow .2s, -webkit-transform .2s;
          transition: box-shadow .2s, transform .2s;
}
.rb-event-hero-card:hover {
  box-shadow: var(--rb-shadow-lg);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.rb-event-hero-img-wrap {
  position:    relative;
  display:     block;
  overflow:    hidden;
  padding-top: 56.25%; /* 16:9 */
  background:  var(--rb-bg);
}
.rb-event-hero-img-wrap img {
  position:   absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  -webkit-transition: -webkit-transform .3s;
          transition: transform .3s;
}
.rb-event-hero-card:hover .rb-event-hero-img-wrap img {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
/* Kategorie-Badge: absolut auf Bild unten rechts */
.rb-event-hero-img-wrap .rb-event-cat-badge {
  position:      absolute;
  bottom:        10px;
  right:         10px;
  font-size:     11px;
  padding:       3px 9px;
  border-radius: 5px;
}
.rb-event-hero-body  { padding: 14px 16px 16px; }
.rb-event-hero-title {
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
  font-size:           16px;
  font-weight:         700;
  color:               var(--rb-ink);
  text-decoration:     none;
  line-height:         1.35;
  margin-bottom:       8px;
}
.rb-event-hero-title:hover { color: var(--rb-accent); }

/* ── Kleinere Karten (4er-Grid) ─────────────────────────── */
.rb-event-cards {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
  margin-bottom:         20px;
}
.rb-event-card {
  background:    var(--rb-card);
  border:        1px solid var(--rb-line);
  border-radius: 12px;
  overflow:      hidden;
  box-shadow:    var(--rb-shadow-sm);
  -webkit-transition: box-shadow .2s, -webkit-transform .2s;
          transition: box-shadow .2s, transform .2s;
}
.rb-event-card:hover {
  box-shadow: var(--rb-shadow-lg);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.rb-event-card-img-wrap {
  position:    relative;
  display:     block;
  overflow:    hidden;
  padding-top: 66.67%; /* 3:2 */
  background:  var(--rb-bg);
}
.rb-event-card-img-wrap img {
  position:   absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  -webkit-transition: -webkit-transform .3s;
          transition: transform .3s;
}
.rb-event-card:hover .rb-event-card-img-wrap img {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
.rb-event-card-body { padding: 10px 12px 12px; }
.rb-event-card-title {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  font-size:          13px;
  font-weight:        700;
  color:              var(--rb-ink);
  text-decoration:    none;
  line-height:        1.35;
  margin:             5px 0 5px;
}
.rb-event-card-title:hover { color: var(--rb-accent); }

/* ── Event-Meta (Ort + Uhrzeit) ─────────────────────────── */
.rb-event-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
  align-items: center;
  margin-top:  4px;
}
.rb-event-ort { font-size: 12px; color: var(--rb-ink-soft); }
.rb-event-ort::before  { content: "📍"; margin-right: 2px; }
.rb-event-time { font-size: 12px; color: var(--rb-ink-soft); }
.rb-event-time::before { content: "🕐"; margin-right: 2px; }

/* ── Weitere Termine (kompakte Listenzeilen) ─────────────── */
.rb-event-more-wrap {
  background:    var(--rb-card);
  border:        1px solid var(--rb-line);
  border-radius: 14px;
  overflow:      hidden;
  box-shadow:    var(--rb-shadow-sm);
  margin-bottom: 16px;
}
.rb-event-more-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 18px;
  border-bottom:   1px solid var(--rb-line);
  font-size:       13px;
  font-weight:     700;
  color:           var(--rb-ink);
}
.rb-event-more-cnt {
  font-size:     11px;
  font-weight:   700;
  background:    var(--rb-accent-light);
  color:         var(--rb-accent);
  padding:       2px 8px;
  border-radius: 999px;
}
.rb-event-more-row {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     12px 18px;
  border-bottom: 1px solid var(--rb-line);
  -webkit-transition: background .12s;
          transition: background .12s;
}
.rb-event-more-row:last-child { border-bottom: none; }
.rb-event-more-row:hover      { background: var(--rb-bg); }
.rb-event-more-date {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      38px;
  flex-shrink:    0;
  line-height:    1.1;
}
.rb-event-more-date .rb-event-date-day { font-size: 15px; font-weight: 800; }
.rb-event-more-date .rb-event-date-mo  { font-size:  9px; font-weight: 700; }
.rb-event-more-info { flex: 1; min-width: 0; }
.rb-event-more-title {
  display:       block;
  font-size:     13px;
  font-weight:   600;
  color:         var(--rb-ink);
  text-decoration: none;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.rb-event-more-title:hover { color: var(--rb-accent); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .rb-event-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rb-event-hero  { grid-template-columns: 1fr; }
  .rb-event-cards { grid-template-columns: 1fr 1fr; }
  .rb-event-more-row .rb-event-cat-badge { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   ANGEBOTE-UNTERSEITE  (?type=angebote)
   ══════════════════════════════════════════════════════════════ */

.rb-angebot-page { padding-bottom: 32px; }

/* ── Angebote: Controls-Wrapper (Branchen-Pillen + Suchfeld) ── */
.rb-angebote-controls {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    flex-start;
  gap:            16px;
  margin-bottom:  24px;
}

/* ── Branchen-Filterleiste ──────────────────────────────────── */
.rb-branche-filter {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  flex:      1 1 auto;
}
.rb-branche-fl {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  border:        1.5px solid var(--rb-line);
  background:    #fff;
  cursor:        pointer;
  padding:       8px 15px;
  border-radius: 999px;
  font-size:     13.5px;
  font-weight:   600;
  color:         var(--rb-ink-soft);
  -webkit-transition: border-color .15s, background .15s, color .15s;
          transition: border-color .15s, background .15s, color .15s;
}
.rb-branche-fl:hover {
  border-color: var(--rb-accent);
  color:        var(--rb-ink);
}
.rb-branche-fl--active {
  background:   var(--rb-accent);
  border-color: var(--rb-accent);
  color:        #fff;
}
.rb-branche-fl-n {
  background:    rgba(0,0,0,.08);
  border-radius: 999px;
  padding:       1px 8px;
  font-size:     12px;
  font-weight:   800;
}
.rb-branche-fl--active .rb-branche-fl-n { background: rgba(255,255,255,.28); }

/* ── Anbieter-Suchfeld ──────────────────────────────────────── */
.rb-anb-search-wrap {
  flex:       0 0 auto;
  min-width:  200px;
}
.rb-anb-search {
  display:       block;
  width:         100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border:        1.5px solid var(--rb-line);
  background:    #fff;
  border-radius: 999px;
  padding:       8px 18px;
  font-size:     13.5px;
  color:         var(--rb-ink);
  outline:       none;
  -webkit-transition: border-color .15s;
          transition: border-color .15s;
}
.rb-anb-search:focus {
  border-color: var(--rb-accent);
}
.rb-anb-search::-webkit-input-placeholder { color: var(--rb-ink-soft); }
.rb-anb-search::-moz-placeholder          { color: var(--rb-ink-soft); }
.rb-anb-search:-ms-input-placeholder      { color: var(--rb-ink-soft); }

/* ── Produkt-Grid ────────────────────────────────────────────── */
.rb-angebot-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap:                   22px;
}

/* ── Produkt-Karte ───────────────────────────────────────────── */
.rb-angebot-card {
  background:     #fff;
  border:         1px solid var(--rb-line);
  border-radius:  16px;
  overflow:       hidden;
  box-shadow:     var(--rb-shadow-sm);
  display:        flex;
  flex-direction: column;
  -webkit-transition: box-shadow .18s, transform .18s, border-color .18s;
          transition: box-shadow .18s, transform .18s, border-color .18s;
}
.rb-angebot-card:hover {
  box-shadow:    var(--rb-shadow-lg);
  transform:     translateY(-3px);
  border-color:  #e0e3e8;
}

/* ── Bild-Bereich (4:3 via padding-top) ─────────────────────── */
.rb-angebot-media {
  display:   block;
  position:  relative;
  overflow:  hidden;
  background: #f1f3f6;
  padding-top: 75%; /* 4:3 */
  text-decoration: none;
}
.rb-angebot-media img {
  position:   absolute;
  top:        0;
  left:       0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  -webkit-transition: transform .22s;
          transition: transform .22s;
}
.rb-angebot-card:hover .rb-angebot-media img { transform: scale(1.04); }

/* ── Kein-Bild-Platzhalter ───────────────────────────────────── */
.rb-angebot-no-img {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(135deg, var(--rb-accent) 0%, rgba(184,133,32,.35) 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.rb-angebot-no-img-icon {
  font-size:  42px;
  opacity:    .85;
  filter:     drop-shadow(0 2px 6px rgba(0,0,0,.2));
}

/* ── Karten-Body ─────────────────────────────────────────────── */
.rb-angebot-body {
  padding:        14px 16px 16px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  flex:           1;
}

.rb-angebot-title {
  margin:          0 0 2px;
  font-size:       15.5px;
  font-weight:     800;
  line-height:     1.25;
  letter-spacing:  -.2px;
  color:           var(--rb-ink);
  text-decoration: none;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
  -webkit-transition: color .14s;
          transition: color .14s;
}
.rb-angebot-title:hover { color: var(--rb-accent); }

.rb-angebot-by {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-size:       13.5px;
  font-weight:     700;
  color:           var(--rb-blue);
  text-decoration: none;
}
.rb-angebot-by:hover { text-decoration: underline; }

.rb-angebot-price {
  font-size:      17px;
  font-weight:    800;
  color:          var(--rb-accent);
  letter-spacing: -.3px;
  margin-top:     4px;
}

.rb-angebot-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin-top: 8px;
}
.rb-angebot-tag {
  display:       inline-flex;
  align-items:   center;
  background:    var(--rb-accent-light);
  color:         var(--rb-accent);
  padding:       3px 9px;
  border-radius: 7px;
  font-size:     11.5px;
  font-weight:   700;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rb-angebot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .rb-angebot-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   SUCHERGEBNISSE  (/suche/…)
   ══════════════════════════════════════════════════════════════ */

.rb-sr-page { padding-bottom: 32px; }

/* ── Sektions-Header ─────────────────────────────────────────── */
.rb-sr-section {
  margin-bottom: 32px;
}
.rb-sr-section-hd {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      0 0 14px;
}
.rb-sr-type-badge {
  background:    var(--rb-accent);
  color:         #fff;
  font-size:     12px;
  font-weight:   800;
  letter-spacing:.4px;
  text-transform: uppercase;
  padding:       3px 10px;
  border-radius: 6px;
}
.rb-sr-cnt {
  font-size:  13px;
  font-weight:700;
  color:      var(--rb-ink-soft);
}

/* ── Trefferliste ────────────────────────────────────────────── */
.rb-sr-list {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

/* ── Karte (horizontal) ─────────────────────────────────────── */
.rb-sr-card {
  display:       flex;
  gap:           16px;
  align-items:   flex-start;
  background:    #fff;
  border:        1px solid var(--rb-line);
  border-radius: 14px;
  padding:       14px;
  box-shadow:    var(--rb-shadow-sm);
  -webkit-transition: box-shadow .18s, border-color .18s;
          transition: box-shadow .18s, border-color .18s;
}
.rb-sr-card:hover {
  box-shadow:   var(--rb-shadow-lg);
  border-color: #e0e3e8;
}

/* ── Vorschaubild ────────────────────────────────────────────── */
.rb-sr-thumb {
  flex:          0 0 120px;
  width:         120px;
  height:        80px;
  border-radius: 9px;
  overflow:      hidden;
  background:    #f1f3f6;
  display:       block;
  position:      relative;
  text-decoration: none;
}
.rb-sr-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Kein-Bild-Platzhalter */
.rb-sr-no-img {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(135deg, var(--rb-accent) 0%, rgba(23,115,187,.35) 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.rb-sr-no-img-ic {
  font-size: 28px;
  opacity:   .85;
}

/* ── Karten-Inhalt ───────────────────────────────────────────── */
.rb-sr-body {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            5px;
}
.rb-sr-title {
  font-size:       15px;
  font-weight:     800;
  line-height:     1.25;
  color:           var(--rb-ink);
  text-decoration: none;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
  -webkit-transition: color .14s;
          transition: color .14s;
}
.rb-sr-title:hover { color: var(--rb-accent); }

.rb-sr-teaser {
  font-size:   13.5px;
  color:       var(--rb-ink-soft);
  line-height: 1.45;
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}
.rb-sr-more {
  font-size:   12.5px;
  font-weight: 700;
  color:       var(--rb-accent);
  margin-top:  2px;
}

/* ── Typ-Farbscoping pro Sektion ─────────────────────────────── */
.rb-sr-section--angebote { --rb-accent: #b88520; --rb-accent-light: rgba(184,133, 32,.09); }
.rb-sr-section--jobs     { --rb-accent: #8e44ad; --rb-accent-light: rgba(142, 68,173,.09); }
.rb-sr-section--videos   { --rb-accent: #c0392b; --rb-accent-light: rgba(192, 57, 43,.09); }
/* News + Themen + Firmen + Galerien: Standard-Blau, kein Override nötig */

/* ── Firmen-Karte ────────────────────────────────────────────── */
.rb-sr-firma-list {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   14px;
}
.rb-sr-card--firma {
  flex-direction: column;
  gap:            12px;
  align-items:    stretch;
}
.rb-sr-firma-logo {
  display:        block;
  width:          72px;
  height:         72px;
  border-radius:  10px;
  overflow:       hidden;
  background:     #f1f3f6;
  flex-shrink:    0;
  position:       relative;
  text-decoration: none;
}
.rb-sr-firma-logo img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
}

/* ── Adressblock ─────────────────────────────────────────────── */
.rb-sr-addr {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  font-style:     normal;
  margin:         0;
}
.rb-sr-addr-line {
  font-size:   12.5px;
  color:       var(--rb-ink-soft);
  display:     block;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.rb-sr-addr-link {
  color:           var(--rb-blue);
  text-decoration: none;
}
.rb-sr-addr-link:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 500px) {
  .rb-sr-thumb { flex: 0 0 80px; width: 80px; height: 56px; }
}

/* ── Suchergebnisse: Typ-Filter-Pillen ───────────────────────── */
.rb-sr-fl {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  padding:   12px 0 4px;
}
.rb-sr-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 15px;
  border:        1.5px solid var(--rb-border, #e3e7ed);
  border-radius: 999px;
  background:    #fff;
  color:         var(--rb-ink, #23262f);
  font-size:     13.5px;
  font-weight:   600;
  cursor:        pointer;
  transition:    border-color .15s, color .15s, background .15s;
  white-space:   nowrap;
}
.rb-sr-pill:hover {
  border-color: var(--rb-accent);
  color:        var(--rb-accent);
}
.rb-sr-pill--active {
  background:   var(--rb-accent);
  border-color: var(--rb-accent);
  color:        #fff;
}
.rb-sr-pill--active .rb-sr-pill-n {
  background: rgba(255,255,255,.28);
}
.rb-sr-pill-n {
  background:    rgba(0,0,0,.08);
  border-radius: 999px;
  padding:       1px 8px;
  font-size:     12px;
  font-weight:   800;
}

/* ══════════════════════════════════════════════════════════════
   NEWS-UNTERSEITE  (?type=news)
   ══════════════════════════════════════════════════════════════ */

.rb-news-page { padding-bottom: 32px; }

.rb-news-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap:                   22px;
  margin-top:            20px;
}

.rb-news-card {
  background:     #fff;
  border:         1px solid var(--rb-line);
  border-radius:  16px;
  overflow:       hidden;
  box-shadow:     var(--rb-shadow-sm);
  display:        flex;
  flex-direction: column;
  -webkit-transition: box-shadow .18s, transform .18s, border-color .18s;
          transition: box-shadow .18s, transform .18s, border-color .18s;
}
.rb-news-card:hover {
  box-shadow:   var(--rb-shadow-lg);
  transform:    translateY(-3px);
  border-color: #e0e3e8;
}

.rb-news-media {
  display:         block;
  position:        relative;
  overflow:        hidden;
  background:      #f1f3f6;
  padding-top:     64%; /* ~3:2, matches 148x95 thumbnail */
  text-decoration: none;
}
.rb-news-media img {
  position:   absolute;
  top:        0;
  left:       0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  -webkit-transition: transform .22s;
          transition: transform .22s;
}
.rb-news-card:hover .rb-news-media img { transform: scale(1.04); }

.rb-news-no-img {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(135deg, var(--rb-accent) 0%, rgba(23,115,187,.30) 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.rb-news-no-img-icon {
  font-size: 42px;
  opacity:   .85;
  filter:    drop-shadow(0 2px 6px rgba(0,0,0,.2));
}

.rb-news-body {
  padding:        14px 16px 16px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  flex:           1;
}

.rb-news-date {
  font-size:      12px;
  font-weight:    600;
  color:          var(--rb-muted, #8a919e);
  letter-spacing: .2px;
}

.rb-news-title {
  margin:          0 0 2px;
  font-size:       15.5px;
  font-weight:     800;
  line-height:     1.25;
  letter-spacing:  -.2px;
  color:           var(--rb-ink);
  text-decoration: none;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
  -webkit-transition: color .14s;
          transition: color .14s;
}
.rb-news-title:hover { color: var(--rb-accent); }

.rb-news-teaser {
  margin:      0;
  font-size:   13.5px;
  line-height: 1.45;
  color:       var(--rb-muted, #555);
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.rb-news-by {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-size:       13.5px;
  font-weight:     700;
  color:           var(--rb-blue);
  text-decoration: none;
  margin-top:      4px;
}
.rb-news-by:hover { text-decoration: underline; }

.rb-news-tags {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  margin-top: 8px;
}
.rb-news-tag {
  display:       inline-flex;
  align-items:   center;
  background:    rgba(23,115,187,.10);
  color:         var(--rb-accent);
  padding:       3px 9px;
  border-radius: 7px;
  font-size:     11.5px;
  font-weight:   700;
}

@media (max-width: 640px) {
  .rb-news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .rb-news-grid { grid-template-columns: 1fr; }
}

/* ── News-Tag-Pillen ─────────────────────────────────────────── */
.rb-news-kats {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  padding:   14px 0 6px;
}

.rb-news-kat {
  display:       inline-flex;
  align-items:   center;
  padding:       5px 13px;
  border-radius: 999px;
  border:        1.5px solid var(--nkat-color, #bbb);
  color:         var(--nkat-color, #888);
  background:    #fff;
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  -webkit-transition: background .13s, color .13s;
          transition: background .13s, color .13s;
}
.rb-news-kat:hover   { background: var(--nkat-color, #bbb); color: #fff; }
.rb-news-kat--active { background: var(--nkat-color, #bbb); color: #fff; }

.rb-news-kat--all    { --nkat-color: var(--rb-accent); }
.rb-news-kat--regio  { --nkat-color: var(--rb-accent); }
.rb-news-kat--normal { --nkat-color: #8a919e; }

/* ── rb-customer (Firmen-Block Partial) ──────────────────────────── */
.rb-customer {
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
  padding:       20px;
  margin-top:    24px;
  background:    #fff;
  border-radius: 14px;
  border:        1px solid var(--rb-line, #e8eaed);
  width:         100%;
  box-sizing:    border-box;
}
.rb-customer-logo-wrap {
  flex:          0 0 72px;
  width:         72px;
  height:        72px;
}
.rb-customer-logo {
  width:         72px;
  height:        72px;
  object-fit:    contain;
  border-radius: 8px;
  border:        1px solid var(--rb-line, #e8eaed);
  background:    #f5f6f8;
  display:       block;
}
.rb-customer-no-logo {
  border-radius: 8px;
  background:    var(--rb-accent, #1773bb);
  opacity:       .18;
}
.rb-customer-body {
  flex:          1 1 0;
  min-width:     0;
}
.rb-customer-name {
  font-size:     15px;
  font-weight:   700;
  line-height:   1.3;
  color:         var(--rb-ink, #1a2130);
}
.rb-customer-name a {
  color:         var(--rb-accent, #1773bb);
  text-decoration: none;
}
.rb-customer-name a:hover { text-decoration: underline; }
.rb-customer-desc {
  margin:        5px 0 0;
  font-size:     15px;
  color:         var(--rb-ink-soft, #6b7280);
  line-height:   1.55;
  display:       -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:      hidden;
}

/* ── rb-detail-outer (Artikel + Sidebar, 2-spaltig) ─────────────── */
.rb-detail-outer {
  max-width:     1260px;
  margin:        0 auto;
  padding:       0 16px 48px;
  display:       grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap:           24px;
  align-items:   start;
}
.rb-detail-main { min-width: 0; }
.rb-detail-outer .rb-detail-wrap {
  max-width:  none;
  margin:     0;
  padding-bottom: 0;
}
@media (max-width: 960px) {
  .rb-detail-outer { grid-template-columns: 1fr; }
}

/* ─── Sidebar ────────────────────────────────────────────────────── */
/* Header = rb-header-inner (74px) + pills row (72px) + border (1px) = 147px */
.rb-sidebar {
  position:      sticky;
  top:           163px;
  align-self:    start;
  max-height:    calc(100vh - 183px);
}
.rb-sidebar-inner {
  max-height:    calc(100vh - 183px);
  overflow-y:    auto;
  display:       flex;
  flex-direction: column;
  gap:           16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.12) transparent;
}
.rb-sidebar-inner::-webkit-scrollbar { width: 4px; }
.rb-sidebar-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 2px; }
.rb-sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.rb-sidebar-widget {
  background:    #fff;
  border:        1px solid var(--rb-line, #e8eaed);
  border-radius: 10px;
  padding:       16px;
}
.rb-sidebar-widget-title {
  margin:        0 0 12px;
  font-size:     12px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color:         var(--rb-ink-soft, #6b7280);
}
.rb-sidebar-card {
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
  text-decoration: none;
  color:         inherit;
  padding:       9px 0;
  border-top:    1px solid var(--rb-line, #e8eaed);
}
.rb-sidebar-card:first-of-type { border-top: none; padding-top: 0; }
.rb-sidebar-card:hover .rb-sidebar-card-title { color: var(--rb-accent, #1773bb); }
.rb-sidebar-card-img {
  flex:          0 0 72px;
  width:         72px;
  height:        54px;
  border-radius: 5px;
  overflow:      hidden;
  background:    #f1f3f6;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.rb-sidebar-card-img img {
  width:  100%; height: 100%; object-fit: cover; display: block;
}
.rb-sidebar-card-img.rb-no-img::before {
  content:       '\f03e';
  font-family:   FontAwesome;
  font-size:     20px;
  color:         var(--rb-accent, #1773bb);
  opacity:       .35;
}
.rb-sidebar-card-body  { flex: 1; min-width: 0; }
.rb-sidebar-card-title {
  font-size:     13px;
  font-weight:   600;
  color:         var(--rb-ink, #1a1d23);
  line-height:   1.35;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:      hidden;
  transition:    color .15s;
}
.rb-sidebar-card-type  { font-size: 11px; color: var(--rb-accent, #1773bb); margin-top: 3px; }
/* Wetter */
.rb-sidebar-weather { padding: 4px 0; }
.rb-sidebar-weather .rb-sidebar-widget-title { text-align: center; }
.rb-sidebar-weather-body  { display: flex; margin: 4px 0 0; }
.rb-sidebar-weather-left  { flex: 1; display: flex; flex-direction: column;
                            align-items: center; justify-content: center;
                            text-align: center; padding: 8px 6px; }
.rb-sidebar-weather-right { flex: 1; display: flex; align-items: center;
                            justify-content: center; padding: 6px;
                            border-left: 1px solid #eee; }
.rb-sidebar-weather-right img { display: block; }
.rb-sidebar-weather-temp  { font-size: 28px; font-weight: 700; color: var(--rb-ink, #1a1d23); line-height: 1; }
.rb-sidebar-weather-desc  { font-size: 12px; color: var(--rb-ink-soft, #6b7280); margin-top: 3px; text-transform: capitalize; }
.rb-sidebar-weather-meta  { display: flex; justify-content: center; align-items: center;
                            flex-wrap: nowrap; margin-top: 8px; }
.rb-sidebar-weather-pair  { display: flex; align-items: center; gap: 3px;
                            font-size: 11px; color: var(--rb-ink-soft, #6b7280);
                            white-space: nowrap; padding: 0 6px;
                            border-left: 1px solid #eee; }
.rb-sidebar-weather-pair:first-child { border-left: none; padding-left: 0; }
.rb-sidebar-weather-pair:last-child  { padding-right: 0; }
/* 3-Tage-Forecast */
.rb-forecast-row {
  display:         flex;
  justify-content: space-between;
  gap:             4px;
  margin-top:      14px;
  padding-top:     12px;
  border-top:      1px solid var(--rb-line, #e8eaed);
}
.rb-forecast-day          { flex: 1; text-align: center; min-width: 0; }
.rb-forecast-day-name     { font-size: 11px; font-weight: 700; text-transform: uppercase;
                            letter-spacing: .5px; color: var(--rb-ink-soft, #6b7280); }
.rb-forecast-day img      { display: block; width: 40px; height: 40px; margin: 2px auto; }
.rb-forecast-day-temp     { font-size: 11px; font-weight: 600; color: var(--rb-ink, #1a1d23);
                            white-space: nowrap; }
.rb-forecast-day-pop      { font-size: 10px; color: #4a9fd4; margin-top: 1px; }
/* TopLinks */
.rb-sidebar-toplinks      { list-style: none; margin: 0; padding: 0; }
.rb-sidebar-toplinks li   { border-top: 1px solid var(--rb-line, #e8eaed); }
.rb-sidebar-toplinks li:first-child { border-top: none; }
.rb-sidebar-toplinks a {
  display: block; padding: 7px 0;
  font-size: 13px; color: var(--rb-accent, #1773bb);
  text-decoration: none; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.rb-sidebar-toplinks a:hover { text-decoration: underline; }

/* ── Sidebar Video-Player ──────────────────────────────────────── */
.rb-sidebar-video-wrap {
  margin-bottom: 4px;
  overflow:      hidden;
  border-radius: 5px;
}
.rb-sidebar-video {
  display:       block;
  width:         100%;
  max-width:     100%;
  height:        auto;
  aspect-ratio:  16 / 9;
  object-fit:    cover;
  border-radius: 5px;
  background:    #111;
}
.rb-sidebar-video-title {
  margin:    6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color:     var(--rb-ink, #1a1d23);
  line-height: 1.3;
}

/* ── rb-detail (Job/Content Detailseite 2-spaltig) ──────────────── */
.rb-detail-wrap {
  max-width:     980px;
  margin:        0 auto;
  padding:       0 0 48px;
}
.rb-detail-grid {
  display:       grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  background:    #fff;
  border-radius: 16px;
  overflow:      hidden;
  border:        1px solid var(--rb-line, #e8eaed);
}
.rb-detail-media { background: #f1f3f6; }
.rb-detail-media img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  min-height:    420px;
  display:       block;
}
.rb-detail-no-img {
  min-height:    420px;
  background:    var(--rb-accent, #1773bb);
  opacity:       .12;
}
.rb-detail-side {
  padding:       28px 28px 24px;
  display:       flex;
  flex-direction: column;
  gap:           13px;
  overflow-y:    auto;
}
.rb-detail-type {
  font-size:     11.5px;
  font-weight:   800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color:         var(--rb-accent, #1773bb);
}
.rb-detail-title {
  margin:        0;
  font-size:     23px;
  font-weight:   800;
  line-height:   1.2;
  letter-spacing: -.4px;
  color:         var(--rb-ink, #1a2130);
}
.rb-detail-sub {
  font-size:     13.5px;
  color:         var(--rb-ink-soft, #6b7280);
  line-height:   1.4;
}
.rb-detail-desc {
  font-size:     15px;
  color:         #3c4654;
  line-height:   1.65;
}
.rb-detail-desc p      { margin: 0 0 .7em; }
.rb-detail-desc ul,
.rb-detail-desc ol     { margin: 0 0 .7em; padding-left: 1.4em; }
.rb-detail-meta {
  display:       flex;
  flex-direction: column;
  gap:           7px;
  padding:       12px 0;
  border-top:    1px solid var(--rb-line, #e8eaed);
  border-bottom: 1px solid var(--rb-line, #e8eaed);
}
.rb-detail-meta-row {
  display:       flex;
  align-items:   baseline;
  gap:           8px;
  font-size:     13.5px;
}
.rb-detail-meta-label {
  font-weight:   600;
  color:         var(--rb-ink, #1a2130);
  white-space:   nowrap;
  min-width:     64px;
}
.rb-detail-meta-val    { color: var(--rb-ink-soft, #6b7280); }
.rb-detail-meta-val a  { color: var(--rb-accent, #1773bb); text-decoration: none; }
.rb-detail-meta-val a:hover { text-decoration: underline; }
.rb-detail-tags {
  display:       flex;
  flex-wrap:     wrap;
  gap:           7px;
}
.rb-detail-tag {
  background:    #eef0f3;
  color:         #4a5563;
  padding:       5px 12px;
  border-radius: 999px;
  font-size:     12.5px;
  font-weight:   600;
}
.rb-detail-tag--regio {
  background:    var(--rb-accent, #1773bb);
  color:         #fff;
}
.rb-detail-share {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-top:    4px;
}
.rb-detail-share-label {
  font-size:     11.5px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:         var(--rb-ink-soft, #6b7280);
}
.rb-detail-share a {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  width:         34px;
  height:        34px;
  border-radius: 50%;
  background:    #eef0f3;
  color:         #4a5563;
  font-size:     15px;
  text-decoration: none;
  -webkit-transition: background .14s, color .14s;
          transition: background .14s, color .14s;
}
.rb-detail-share a:hover { background: var(--rb-accent, #1773bb); color: #fff; }
.rb-detail-customer-wrap {
  margin-top:    24px;
}
.rb-detail-by {
  font-size:     .62em;
  font-weight:   400;
  color:         var(--rb-ink-soft, #6b7280);
  margin-left:   .45em;
  white-space:   nowrap;
}
@media (max-width: 720px) {
  .rb-detail-grid          { grid-template-columns: 1fr; }
  .rb-detail-media img     { min-height: 260px; }
  .rb-detail-no-img        { min-height: 260px; }
  .rb-detail-side          { padding: 20px 16px 16px; }
  .rb-detail-by            { display: block; margin-left: 0; margin-top: 3px; }
}

/* ── News-Detail: Float-Layout (.rb-news-flow) ───────────────────────── */
.rb-news-flow {
  background:    #fff;
  border-radius: 16px;
  border:        1px solid var(--rb-line, #e8eaed);
  padding:       28px 28px 24px;
}
.rb-news-flow .rb-detail-type { display: block; margin-bottom: 6px; }
.rb-news-flow .rb-detail-title { margin-bottom: 16px; }
.rb-news-flow-media {
  float:         left;
  width:         46%;
  margin:        0 24px 16px 0;
  border-radius: 8px;
  overflow:      hidden;
}
.rb-news-flow-media .rb-carousel        { height: auto; }
.rb-news-flow-media .rb-carousel-hero   { min-height: 0; -webkit-box-flex: none; flex: none; }
.rb-news-flow-media .rb-carousel-hero img {
  height:     auto;
  object-fit: initial;
  min-height: 0;
}
.rb-news-flow-clear { clear: both; }
.rb-news-flow .rb-detail-tags  { margin-top: 16px; }
.rb-news-flow .rb-detail-share { margin-top: 12px; }
@media (max-width: 720px) {
  .rb-news-flow            { padding: 20px 16px 16px; }
  .rb-news-flow-media      { float: none; width: 100%; margin: 0 0 16px 0; }
}

/* ── produkt-detail-rb: Bild-Karussell ──────────────────────────────── */
.rb-carousel {
  display:        flex;
  flex-direction: column;
  height:         100%;
}
.rb-carousel-hero {
  -webkit-box-flex: 1;
          flex:     1 1 auto;
  overflow:         hidden;
  min-height:       360px;
  background:       #f1f3f6;
}
.rb-carousel-hero img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
  -webkit-transition: opacity .22s;
          transition: opacity .22s;
}
.rb-carousel-thumbs {
  display:     flex;
  gap:         6px;
  padding:     7px 8px;
  background:  #edf0f3;
  overflow-x:  auto;
  flex-shrink: 0;
}
.rb-carousel-thumb {
  -webkit-box-flex: 0;
          flex:     0 0 72px;
  height:           52px;
  cursor:           pointer;
  border:           2px solid transparent;
  border-radius:    5px;
  overflow:         hidden;
  background:       #d8dbe2;
  padding:          0;
}
.rb-carousel-thumb img {
  width:       100%;
  height:      100%;
  min-height:  0;
  object-fit:  cover;
  display:     block;
}
.rb-carousel-thumb--active {
  border-color: var(--rb-accent, #1773bb);
}

/* ── produkt-detail-rb: Preis-Block ─────────────────────────────────── */
.rb-price-block {
  display:       flex;
  align-items:   baseline;
  gap:           12px;
  padding:       13px 16px;
  background:    var(--rb-accent-light, rgba(23,115,187,.09));
  border-left:   3px solid var(--rb-accent, #1773bb);
  border-radius: 0 8px 8px 0;
}
.rb-price-new {
  font-size:   26px;
  font-weight: 800;
  color:       var(--rb-accent, #1773bb);
  line-height: 1;
}
.rb-price-old {
  font-size:       15px;
  font-weight:     400;
  color:           var(--rb-ink-soft, #6b7280);
  text-decoration: line-through;
}

/* ── event-detail-rb ────────────────────────────────────────────────── */
.rb-stripe-date {
  margin:      4px 0 0;
  font-size:   13px;
  font-weight: 600;
  color:       var(--rb-accent, #1773bb);
}
.rb-event-meta-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}
.rb-event-meta-box-title {
  margin:        0 0 8px;
  font-size:     12px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color:         var(--rb-ink-soft, #6b7280);
}
@media (max-width: 520px) {
  .rb-event-meta-grid { grid-template-columns: 1fr; }
}

/* ─── event-map ─────────────────────────────────────────────────────── */
.rb-event-map-wrap {
  margin-top: 20px;
}
#rb-event-map {
  width:  100%;
  height: 360px;
  border-radius: 6px;
  overflow: hidden;
}

/* ─── gallery-detail-rb ──────────────────────────────────────────────── */
.rb-layout .rb-gallery-wrap {
  padding-bottom: 40px;
}
.rb-layout .rb-gallery-desc {
  font-size:   15px;
  margin:      0 0 20px;
  max-width:   720px;
}
.rb-layout .rb-gallery-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   10px;
  margin-bottom:         32px;
}
.rb-layout .rb-gallery-item {
  border-radius: 10px;
  overflow:      hidden;
  background:    var(--rb-surface, #f3f4f6);
  aspect-ratio:  4 / 3;
}
.rb-layout .rb-gallery-item a {
  display: block;
  height:  100%;
}
.rb-layout .rb-gallery-item img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
  -webkit-transition: -webkit-transform .2s ease;
          transition:         transform .2s ease;
}
.rb-layout .rb-gallery-item:hover img {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
@media (max-width: 720px) {
  .rb-layout .rb-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
