/* Radio Rheinland – Empfehlung karnevalradio.de auf der Startseite.
   Die Farbleiste übernimmt die Buchstabenfarben des Karneval-Radio-Logos. */
.rr-karneval {
  --kr-purple: #7b2a84; --kr-blue: #0b6fc4; --kr-red: #d81e2c; --kr-yellow: #f4a800;
  --kr-green: #1e9e4b; --kr-pink: #e5157f; --kr-orange: #f07318; --kr-teal: #009aa5;
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 40px;
  margin: 8px 0 44px; padding: 34px 44px 34px 28px; overflow: hidden;
  background: #15212c; border: 1px solid #354b5d; border-radius: 18px;
}
.rr-karneval::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: linear-gradient(90deg,
    var(--kr-purple) 0 12.5%, var(--kr-blue) 0 25%, var(--kr-red) 0 37.5%, var(--kr-yellow) 0 50%,
    var(--kr-green) 0 62.5%, var(--kr-pink) 0 75%, var(--kr-orange) 0 87.5%, var(--kr-teal) 0);
}
.rr-karneval__logo { display: block; justify-self: center; width: 100%; max-width: 400px; }
.rr-karneval__logo img { display: block; width: 100%; height: auto; transform: rotate(-4deg); transition: transform .3s ease; }
.rr-karneval__logo:hover img { transform: rotate(0deg) scale(1.03); }
.rr-karneval__copy { max-width: 600px; }
html body .site-main .rr-karneval .section-kicker { color: #ff7ab8 !important; }
.rr-karneval h2 { margin: 10px 0 14px; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.rr-karneval p { margin: 0 0 24px; font-size: 16px; line-height: 1.7; color: #b8c7d3; }
html body .site-main .rr-karneval p strong { color: #eef3f7; }
html body .rr-karneval .rr-karneval__cta { background: #c8106c !important; border: 1px solid #c8106c !important; color: #fff !important; }
html body .rr-karneval .rr-karneval__cta:hover { background: #e5157f !important; border-color: #e5157f !important; }
html body .rr-karneval .rr-karneval__cta:focus-visible { outline: 2px solid #f4a800; outline-offset: 4px; }
@media (max-width: 860px) {
  .rr-karneval { grid-template-columns: 1fr; gap: 18px; padding: 34px 22px 26px; margin-bottom: 32px; text-align: left; }
  .rr-karneval__logo { max-width: 300px; }
  .rr-karneval .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rr-karneval__logo img { transition: none; } }