/*
 * Werbegrafik der Conve GmbH im Schneeball-Alarm (Wochenpreis-Sponsor, je Wertungswoche ein Thema).
 * Baustein: sfc_schneeball_partner_anzeige($woche, 'gross'|'kompakt', [tv, vorab, hell, nur_knopf]).
 *
 * Eigenständig: keine Seiten-Variablen, keine externen Ressourcen, Schrift = die der Seite.
 * Alle Klassen mit Vorsilbe .cv-anz, damit Website, Spiel und Rangliste sich nicht in die Quere kommen.
 * Ohne Container-Queries (ältere Fernseher/Browser) gilt die schmale Anordnung – überall lesbar;
 * keine Verläufe mit Doppel-Stopps, der Markenstreifen besteht aus vier Elementen.
 *
 * Kontrast (WCAG, dunkel gegen die hellste Stelle des Verlaufs #005275): Weiß 8,5:1 · #E3F3FD 7,5:1 · #C8E8FB 6,7:1 ·
 * #84CDE8 4,8:1 · Knopf #03374F auf Weiß 12,6:1, auf #C8E8FB 9,9:1.
 * Hell (auf Weiß): #03263A 15,6:1 · #36515F 8,4:1 · #006E96 5,7:1 · Knopf Weiß auf #007DA9 4,7:1, auf #005F82 7,1:1.
 * Klickfläche: das ::after des Knopfs deckt die ganze Anzeige ab (eckig – die Rundung macht overflow:hidden).
 */
.cv-anz {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  container-type: inline-size; container-name: cvanz;
  color: #fff; font-family: inherit; font-weight: 400; line-height: 1.4; text-align: left;
  letter-spacing: normal; text-transform: none; -webkit-user-select: auto; user-select: auto;
  background-color: #03263A;
  background-image: linear-gradient(135deg, #03263A 0%, #04324C 52%, #005275 100%);
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(3, 38, 58, .26), inset 0 0 0 1px rgba(200, 232, 251, .16);
  -webkit-tap-highlight-color: transparent;
}
.cv-anz *, .cv-anz *::before, .cv-anz *::after { box-sizing: border-box; }
.cv-anz p, .cv-anz h3 { margin: 0; padding: 0; border: 0; background: none; }
.cv-anz svg { display: block; }
.cv-anz b { font-weight: 800; }

/* Markenstreifen in den vier Logofarben = Wochenanzeige (Segment der Woche voll, die anderen gedimmt) */
.cv-anz__streifen { display: block; height: 6px; font-size: 0; line-height: 0; white-space: nowrap; }
.cv-anz__streifen i { display: inline-block; width: 25%; height: 100%; vertical-align: top; }
.cv-anz__streifen i:nth-child(1) { background: #007DA9; }
.cv-anz__streifen i:nth-child(2) { background: #009BCC; }
.cv-anz__streifen i:nth-child(3) { background: #84CDE8; }
.cv-anz__streifen i:nth-child(4) { background: #C8E8FB; }
.cv-anz__streifen--woche i:nth-child(n) { background: #1E4459; }
.cv-anz__streifen--woche i.cv-anz__an:nth-child(1) { background: #007DA9; }
.cv-anz__streifen--woche i.cv-anz__an:nth-child(2) { background: #009BCC; }
.cv-anz__streifen--woche i.cv-anz__an:nth-child(3) { background: #84CDE8; }
.cv-anz__streifen--woche i.cv-anz__an:nth-child(4) { background: #C8E8FB; }

/* Dekor: Schneeflocken (dezent, hinter dem Inhalt, neben der Illustration – nie auf Text) */
.cv-anz__deko { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }
.cv-anz__flocke { position: absolute; width: 18px; height: 18px; color: #fff; opacity: .3; }
.cv-anz__flocke--1 { top: 22%; left: 8%; width: 15px; height: 15px; }
.cv-anz__flocke--2 { top: 29%; right: 8%; width: 22px; height: 22px; opacity: .22; }
.cv-anz__flocke--3 { top: 31%; left: 19%; width: 11px; height: 11px; opacity: .22; }
.cv-anz .cv-anz__flocke--4 { display: none; }
.cv-anz__nb { white-space: nowrap; }

/* Logo, Claim, Kennzeichnung */
.cv-anz__logo { display: block; flex: none; color: #fff; line-height: 0; }
.cv-anz__logo svg { width: 100%; height: auto; }
.cv-anz__claim { display: block; color: #C8E8FB; font-weight: 800; font-size: 13.5px; line-height: 1.25; letter-spacing: .01em; }
.cv-anz__kennung { display: inline-block; flex: none; color: #fff; background: rgba(3, 38, 58, .72);
  border: 1px solid rgba(200, 232, 251, .5); border-radius: 999px; padding: 2px 9px 3px;
  font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }

/* Knopf: der eigentliche Link. Sein ::after legt sich über die ganze Anzeige (ganze Fläche klickbar, auch Ecken). */
.cv-anz__knopf { display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 22px; border-radius: 999px; border: 0;
  background: #fff; color: #03374F !important; text-decoration: none !important;
  font-family: inherit; font-weight: 800; font-size: 16.5px; line-height: 1.2; text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25); cursor: pointer; transition: background-color .15s ease; }
.cv-anz__knopf::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 0; }
.cv-anz--nur-knopf .cv-anz__knopf::after { display: none; }
.cv-anz__knopf .cv-anz__pfeil { width: 20px; height: 20px; margin-left: 10px; flex: none; transition: transform .15s ease; }
.cv-anz--link:hover .cv-anz__knopf, .cv-anz__knopf:hover { background: #C8E8FB; }
.cv-anz--link:hover .cv-anz__pfeil, .cv-anz__knopf:hover .cv-anz__pfeil { transform: translateX(3px); }
.cv-anz__knopf:focus { outline: none; }
.cv-anz__knopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cv-anz:has(.cv-anz__knopf:focus-visible) { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #007DA9, 0 14px 32px rgba(3, 38, 58, .26); }
.cv-anz--link { cursor: pointer; }

/* Fernseher: kein Link, die Adresse steht als schlichter Text da (kein Rahmen, sieht nicht wie ein Knopf aus) */
.cv-anz__adresse { color: #fff; font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: .01em; }

/* Illustration: Conve-Ring mit Wochenmotiv, dahinter ein Schimmer */
.cv-anz__bild { position: relative; line-height: 0; }
.cv-anz__bild::before { content: ""; position: absolute; top: 4%; right: 4%; bottom: 4%; left: 4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 155, 204, .45) 0%, rgba(0, 155, 204, 0) 70%); }
.cv-anz__bild svg { width: 100%; height: auto; }

/* Sponsor-Satz und Adresse: kurz am Handy, lang auf breiten Flächen */
.cv-anz__lang, .cv-anz__adr-lang { display: none; }

/* ============================ GROSS ============================ */
.cv-anz--gross .cv-anz__rahmen { padding: 16px 18px 0; }
.cv-anz--gross .cv-anz__kopf { display: flex; align-items: flex-start; justify-content: space-between; }
.cv-anz--gross .cv-anz__marke { display: block; min-width: 0; margin-right: 12px; }
.cv-anz--gross .cv-anz__logo { width: 150px; margin: 2px 0 7px; }
.cv-anz--gross .cv-anz__inhalt { display: flex; flex-direction: column; padding: 2px 0 18px; }
.cv-anz--gross .cv-anz__bild { order: -1; align-self: center; width: 40%; max-width: 134px; margin: 0 0 8px; }
.cv-anz--gross .cv-anz__thema { color: #84CDE8; font-weight: 800; font-size: 12.5px; line-height: 1.3; letter-spacing: .08em;
  text-transform: uppercase; margin: 0 0 6px; }
.cv-anz--gross .cv-anz__titel { color: #fff; font-weight: 800; font-size: 29px; line-height: 1.08; letter-spacing: -.01em;
  margin: 0 0 10px; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
.cv-anz--gross .cv-anz__nutzen { color: #E3F3FD; font-size: 16.5px; line-height: 1.45; margin: 0 0 16px; max-width: 32em; text-wrap: pretty; }
.cv-anz--gross .cv-anz__knopf { display: flex; width: 100%; }
.cv-anz--gross .cv-anz__fuss { border-top: 1px solid rgba(200, 232, 251, .24); padding: 10px 0 13px;
  color: #C8E8FB; font-size: 13.5px; line-height: 1.35; }
.cv-anz--gross .cv-anz__preis { display: flex; align-items: center; margin: 2px 0; }
.cv-anz--gross .cv-anz__firma { display: block; margin: 3px 0 2px; }
.cv-anz__preis { font-weight: 800; }
.cv-anz__preis svg { width: 18px; height: 18px; margin-right: 7px; flex: none; color: #84CDE8; }
.cv-anz__firma b { color: #fff; white-space: nowrap; }

@container cvanz (min-width: 640px) {
  .cv-anz--gross .cv-anz__rahmen { padding: 20px 32px 0; }
  .cv-anz--gross .cv-anz__marke { display: flex; align-items: center; }
  .cv-anz--gross .cv-anz__logo { width: 200px; margin: 0 18px 0 0; }
  .cv-anz--gross .cv-anz__claim { padding-left: 18px; border-left: 2px solid rgba(200, 232, 251, .35); font-size: 15px; }
  .cv-anz--gross .cv-anz__inhalt { display: grid; grid-template-columns: minmax(0, 1fr) 34%; align-items: center;
    column-gap: 28px; padding: 12px 0 20px; }
  .cv-anz--gross .cv-anz__bild { order: 0; grid-column: 2; grid-row: 1; width: 100%; max-width: 290px; justify-self: center; margin: 0; }
  .cv-anz--gross .cv-anz__text { grid-column: 1; grid-row: 1; }
  .cv-anz--gross .cv-anz__thema { font-size: 13.5px; margin-bottom: 8px; }
  .cv-anz--gross .cv-anz__titel { font-size: clamp(32px, 5.2cqi, 46px); }
  .cv-anz--gross .cv-anz__nutzen { font-size: 18px; margin-bottom: 20px; }
  .cv-anz--gross .cv-anz__knopf { display: inline-flex; width: auto; min-height: 54px; padding: 0 28px; font-size: 17.5px; }
  .cv-anz--gross .cv-anz__adresse { font-size: 26px; }
  .cv-anz--gross .cv-anz__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    column-gap: 24px; font-size: 14px; padding: 12px 0 14px; }
  .cv-anz--gross .cv-anz__kurz { display: none; }
  .cv-anz--gross .cv-anz__lang { display: inline; }
  .cv-anz--gross .cv-anz__flocke--1 { top: 27%; left: auto; right: 3.5%; }
  .cv-anz--gross .cv-anz__flocke--2 { top: auto; bottom: 27%; right: 36%; width: 18px; height: 18px; }
  .cv-anz--gross .cv-anz__flocke--3 { top: auto; left: auto; bottom: 31%; right: 3%; width: 13px; height: 13px; }
  .cv-anz--gross .cv-anz__flocke--4 { display: block; top: 50%; left: auto; right: 34%; width: 12px; height: 12px; opacity: .2; }
}
/* Breite Fläche (PC): volle Adresse im Fuß */
@container cvanz (min-width: 980px) {
  .cv-anz--gross .cv-anz__adr-kurz { display: none; }
  .cv-anz--gross .cv-anz__adr-lang { display: inline; }
}

/* =========================== KOMPAKT =========================== */
/* Streifen (z. B. Rangliste, Startseiten-Kasten, Spiel-Start); am Handy rund 80 px hoch. */
.cv-anz--kompakt { border-radius: 16px; box-shadow: 0 6px 18px rgba(3, 38, 58, .22), inset 0 0 0 1px rgba(200, 232, 251, .2); }
.cv-anz--kompakt .cv-anz__streifen { height: 4px; }
.cv-anz--kompakt .cv-anz__rahmen { display: flex; align-items: center; min-height: 70px; padding: 9px 10px 10px 12px; }
.cv-anz--kompakt .cv-anz__marke { flex: none; display: flex; flex-direction: column; align-items: flex-start; margin-right: 11px;
  padding-right: 11px; border-right: 1px solid rgba(200, 232, 251, .3); }
.cv-anz--kompakt .cv-anz__logo { width: 80px; margin: 1px 0 6px; }
.cv-anz--kompakt .cv-anz__kennung { font-size: 9.5px; padding: 1px 7px 2px; }
.cv-anz--kompakt .cv-anz__bild { display: none; }
.cv-anz--kompakt .cv-anz__text { flex: 1 1 auto; min-width: 0; }
.cv-anz--kompakt .cv-anz__thema { color: #84CDE8; font-weight: 800; font-size: 10.5px; line-height: 1.25; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 2px; }
.cv-anz--kompakt .cv-anz__titel { color: #fff; font-weight: 800; font-size: 15px; line-height: 1.18; margin: 0;
  overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
.cv-anz--kompakt .cv-anz__unter { color: #C8E8FB; font-size: 12.5px; font-weight: 800; line-height: 1.25; margin: 3px 0 0; }
.cv-anz--kompakt .cv-anz__knopf { flex: none; width: 44px; min-height: 44px; height: 44px; padding: 0; margin-left: 10px; border-radius: 50%; }
.cv-anz--kompakt .cv-anz__knopf .cv-anz__pfeil { margin: 0; }
.cv-anz--kompakt .cv-anz__knopftext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cv-anz--kompakt .cv-anz__adresse { flex: none; margin-left: 10px; font-size: 14px; }
/* Flocken in den Ecken beim Knopf, nie auf dem Text */
.cv-anz--kompakt .cv-anz__flocke--1 { top: 9px; left: auto; right: 9px; width: 12px; height: 12px; }
.cv-anz--kompakt .cv-anz__flocke--2, .cv-anz--kompakt .cv-anz__flocke--4 { display: none; }
.cv-anz--kompakt .cv-anz__flocke--3 { top: auto; left: auto; bottom: 6px; right: 13px; width: 10px; height: 10px; }

/* Sehr schmal (kleine Handys, Kasten mit Rand): Logo und Schrift etwas kleiner, damit nichts umbricht */
@container cvanz (max-width: 359px) {
  .cv-anz--kompakt .cv-anz__rahmen { padding: 8px 8px 9px 10px; }
  .cv-anz--kompakt .cv-anz__marke { margin-right: 9px; padding-right: 9px; }
  .cv-anz--kompakt .cv-anz__logo { width: 68px; }
  .cv-anz--kompakt .cv-anz__titel { font-size: 14.5px; }
  .cv-anz--kompakt .cv-anz__unter { font-size: 12px; }
  .cv-anz--kompakt .cv-anz__thema { font-size: 10px; letter-spacing: .05em; }
  .cv-anz--kompakt .cv-anz__knopf { margin-left: 8px; }
}
/* Ganz schmal (unter 260 px, z. B. rechte Spalte in Mein Konto bei 900–1100 px): Logo und „Anzeige“ oben in einer Zeile,
   darunter Text und Knopf – sonst bleiben dem Titel neben Logo-Spalte und Knopf nur 40–80 px und er bricht mitten im Wort */
@container cvanz (max-width: 259px) {
  .cv-anz--kompakt .cv-anz__rahmen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 6px; }
  .cv-anz--kompakt .cv-anz__marke { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; margin: 0;
    padding: 0 0 6px; border-right: 0; border-bottom: 1px solid rgba(200, 232, 251, .3); }
  .cv-anz--hell.cv-anz--kompakt .cv-anz__marke { border-bottom-color: #C8E8FB; }
  .cv-anz--kompakt .cv-anz__logo { margin: 0; }
  .cv-anz--kompakt .cv-anz__knopf { margin-left: 0; }
}

@container cvanz (min-width: 520px) {
  .cv-anz--kompakt .cv-anz__rahmen { padding: 10px 14px 11px 16px; }
  .cv-anz--kompakt .cv-anz__logo { width: 100px; }
  .cv-anz--kompakt .cv-anz__bild { display: block; flex: none; width: 64px; margin-right: 12px; }
  .cv-anz--kompakt .cv-anz__titel { font-size: 17px; }
  .cv-anz--kompakt .cv-anz__unter { font-size: 13px; }
  .cv-anz--kompakt .cv-anz__knopf { width: auto; height: auto; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; margin-left: 14px; }
  .cv-anz--kompakt .cv-anz__knopftext { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cv-anz--kompakt .cv-anz__knopf .cv-anz__pfeil { margin-left: 8px; width: 18px; height: 18px; }
  .cv-anz--kompakt .cv-anz__adresse { font-size: 16px; }
  .cv-anz--kompakt .cv-anz__flocke--1 { top: 7px; right: 12px; }
  .cv-anz--kompakt .cv-anz__flocke--3 { bottom: 5px; right: 24px; }
}
/* Breiter Streifen (PC): der lange Sponsor-Satz mit Andis Preis-Satz (09.11.) passt erst ab 920 px in eine Zeile; darunter die kurze Fassung */
@container cvanz (min-width: 920px) {
  .cv-anz--kompakt .cv-anz__kurz { display: none; }
  .cv-anz--kompakt .cv-anz__lang { display: inline; }
}

/* ============================= HELL ============================ */
/* Weiße Fläche mit Farblogo (convelogo-2018-01: Buchstaben schwarz) – für dunkle Untergründe und das Spiel. */
.cv-anz--hell { color: #03263A; background-color: #fff; background-image: none;
  box-shadow: 0 6px 18px rgba(3, 38, 58, .14), inset 0 0 0 1px #C8E8FB; }
.cv-anz--hell .cv-anz__logo { color: #000; }
.cv-anz--hell .cv-anz__claim { color: #36515F; }
.cv-anz--hell .cv-anz__kennung { color: #03374F; background: #EEF8FE; border-color: #84CDE8; }
.cv-anz--hell .cv-anz__marke { border-right-color: #C8E8FB; }
.cv-anz--hell .cv-anz__thema { color: #006E96; }
.cv-anz--hell .cv-anz__titel { color: #03263A; }
.cv-anz--hell .cv-anz__unter, .cv-anz--hell .cv-anz__nutzen, .cv-anz--hell .cv-anz__fuss { color: #36515F; }
.cv-anz--hell .cv-anz__firma b, .cv-anz--hell .cv-anz__adresse { color: #03263A; }
.cv-anz--hell .cv-anz__knopf { background: #007DA9; color: #fff !important; box-shadow: 0 4px 12px rgba(0, 125, 169, .28); }
.cv-anz--hell.cv-anz--link:hover .cv-anz__knopf, .cv-anz--hell .cv-anz__knopf:hover { background: #005F82; }
.cv-anz--hell .cv-anz__knopf:focus-visible { outline-color: #007DA9; }
.cv-anz--hell .cv-anz__flocke { color: #84CDE8; opacity: .55; }
.cv-anz--hell .cv-anz__bild { background: #04324C; border-radius: 14px; }
.cv-anz--hell .cv-anz__bild::before { display: none; }
.cv-anz--hell .cv-anz__streifen--woche i:nth-child(n) { background: #E3F1F8; }
.cv-anz--hell .cv-anz__streifen--woche i.cv-anz__an:nth-child(1) { background: #007DA9; }
.cv-anz--hell .cv-anz__streifen--woche i.cv-anz__an:nth-child(2) { background: #009BCC; }
.cv-anz--hell .cv-anz__streifen--woche i.cv-anz__an:nth-child(3) { background: #84CDE8; }
.cv-anz--hell .cv-anz__streifen--woche i.cv-anz__an:nth-child(4) { background: #84CDE8; }

/* Ohne Container-Queries, aber breiter Bildschirm: große Anzeige trotzdem zweispaltig */
@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .cv-anz--gross .cv-anz__rahmen { padding: 20px 32px 0; }
    .cv-anz--gross .cv-anz__logo { width: 200px; }
    .cv-anz--gross .cv-anz__inhalt { flex-direction: row; align-items: center; }
    .cv-anz--gross .cv-anz__text { flex: 1 1 auto; margin-right: 28px; }
    .cv-anz--gross .cv-anz__bild { order: 1; width: 280px; max-width: none; flex: none; margin: 0; }
    .cv-anz--gross .cv-anz__titel { font-size: 42px; }
    .cv-anz--gross .cv-anz__knopf { display: inline-flex; width: auto; }
    .cv-anz--gross .cv-anz__adresse { font-size: 26px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cv-anz__knopf, .cv-anz__pfeil { transition: none; }
  .cv-anz--link:hover .cv-anz__pfeil, .cv-anz__knopf:hover .cv-anz__pfeil { transform: none; }
}
@media (forced-colors: active) {
  .cv-anz { border: 2px solid CanvasText; }
  .cv-anz__knopf { border: 2px solid ButtonText; }
}