/* Premium-Banner „Wetterfamilie“ — inc/wetterfamilie.php, Grafik aus wetterfamilie.js.
   Bleibt in beiden Themen dunkel. Orange nur als Fläche mit dunkler Schrift. */

.wf-platz { display: flex; justify-content: center; width: 100%; margin: 28px auto 8px; overflow: hidden; }
.ap-monetize .wf-platz { margin: 0 auto; }
.start-banner .wf-platz { margin: 0; }
.news-layout__sidebar .wf-platz { margin: 0 0 16px; }

.wf-banner {
  position: relative; display: block; flex: none; overflow: hidden; border-radius: 18px; isolation: isolate;
  color: #fff; text-decoration: none; background: linear-gradient(112deg, #062a3c, #0a415d 52%, #0e6288);
}
.wf-banner:hover { color: #fff; text-decoration: none; }
.wf-banner:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.wf-banner svg.wf-bild { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.wf-banner img.wf-mark { position: absolute; display: block; max-width: none; }
.wf-banner .wf-tm { position: absolute; font-size: 9px; line-height: 1; color: #fff; }
.wf-banner .wf-text { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-family: var(--font-sans); }
.wf-banner b { font-weight: 800; letter-spacing: -.01em; line-height: 1.14; text-wrap: balance; text-shadow: 0 1px 10px rgba(6, 42, 60, .55); }
.wf-banner .wf-satz { font-weight: 500; line-height: 1.28; color: #eaf7fc; text-wrap: pretty; text-shadow: 0 1px 8px rgba(6, 42, 60, .7); }
.wf-banner .wf-knopf { display: inline-block; background: #f4a932; color: #1a0d02; font-weight: 800; border-radius: 999px; white-space: nowrap; }

/* Handy */
.wf-streifen { width: 358px; height: 158px; }
.wf-streifen .wf-text { left: 16px; top: 14px; bottom: 14px; width: 232px; justify-content: center; }
.wf-streifen b { font-size: 20px; }
.wf-streifen .wf-satz { font-size: 13px; }
.wf-streifen .wf-knopf { font-size: 13px; padding: 6px 13px; margin-top: 3px; }

/* Kachel 300×250: Kasten auf der Startseite */
.wf-kachel { width: 300px; height: 250px; }
.wf-kachel .wf-text { left: 16px; top: 16px; right: 16px; }
.wf-kachel b { font-size: 22px; }
.wf-kachel .wf-satz { font-size: 13.5px; }
.wf-kachel .wf-knopf { position: absolute; left: 0; top: 162px; font-size: 13.5px; padding: 8px 15px; }

/* Breit */
.wf-breit { width: 728px; height: 120px; }
.wf-breit .wf-text { left: 22px; top: 0; bottom: 0; width: 366px; justify-content: center; gap: 4px; }
.wf-breit b { font-size: 22px; }
.wf-breit .wf-satz { font-size: 13.5px; }
.wf-breit .wf-knopf { position: absolute; left: 386px; top: 50%; transform: translateY(-50%); font-size: 14px; padding: 9px 16px; }