/* =====================================================================
   Tarifvergleich – Basis aller Ansichten (Anbieter-Gruppen, Tarif-Finder,
   Anbieter-Kacheln). Farben, Typografie, Bausteine, Portal-Abgrenzung.
   Container-Queries: Der Vergleich richtet sich nach der Breite SEINER
   Spalte (Portal #content2 = 800 px, #content = 595 px), nicht nach dem Fenster.
   ===================================================================== */
#iptv-vergleich{
  container:iv / inline-size;
  overflow-wrap:anywhere; /* überlange Wörter/Internetadressen umbrechen statt die Seite seitlich aufzuweiten */
  --navy:#0f2a43; --navy-2:#1a3d63; --ink:#1f2f3d; --slate:#526273; --muted:#64748b;
  --line:#e2e8f0; --line-2:#eef2f6; --soft:#f6f8fb;
  --gold:#f2a516; --gold-2:#f7c948; --gold-soft:#fff9ec; --gold-line:#f1d48a; --gold-ink:#3d2600;
  /* Onlineaktion (Zeile „Onlineaktion: …“ in den Anbieterboxen und Top-Pick-Kacheln).
     >>> Zum Ausprobieren hier die Farben ändern. Schrift auf Hintergrund mind. 4,5:1 Kontrast. <<< */
  --aktion-bg:#80D6FF;      /* Hintergrund der Zeile */
  --aktion-rand:#5cc3f2;    /* feine Rahmenlinie */
  --aktion-text:#0f2a43;    /* Schrift (Navy, 9:1 auf #80D6FF) */
  --aktion-chip:#ffffff;    /* Hintergrund des Chips „gültig bis …“ */
  --aktion-countdown:#b3261e; /* Chip „noch X Tage“ (weiße Schrift, 6,5:1) */
  --blau:#1170d6; --blau-2:#0058b0; --link:#0a66c2;
  --ok:#12a15a; --no:#d64545;
  --r-gross:14px; --r:10px; --r-klein:6px;
  /* Innenrundung der Kacheln (Außenradius minus 1 px Rahmen). Die Kacheln haben bewusst KEIN overflow:hidden –
     das würde die Info-Tooltips [?] am Kachelrand abschneiden. Stattdessen runden die farbigen Kopf-/Fußteile selbst. */
  --r-innen:calc(var(--r-gross) - 1px);
  --schatten:0 1px 2px rgba(16,42,67,.06),0 6px 18px rgba(16,42,67,.08);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.45;color:var(--ink);text-align:left;
  margin:18px 0 28px
}
#iptv-vergleich *,#iptv-vergleich *::before,#iptv-vergleich *::after{box-sizing:border-box}
#iptv-vergleich :is(h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
#iptv-vergleich :is(ul,ol){list-style:none;padding:0}
#iptv-vergleich img{display:block;max-width:100%;height:auto}
#iptv-vergleich button{font:inherit;color:inherit}
#iptv-vergleich [hidden]{display:none!important}
#iptv-vergleich .iv-num{font-variant-numeric:tabular-nums}
#iptv-vergleich .iv-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
#iptv-vergleich :focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#iptv-vergleich [tabindex="-1"]:focus{outline:none}

/* Abgrenzung gegen globale Portal-Regeln (iptv.css): Überschriften-Schrift,
   Link-Größe/-Unterstreichung, Verdana-<b> in #content, Blocksatz */
#iptv-vergleich :is(h2,h3,h4,h5,h6){font-family:inherit;font-size:inherit;line-height:1.25}
#iptv-vergleich :is(b,strong){font-family:inherit;font-size:inherit;color:inherit;font-weight:700}
#iptv-vergleich a{font-size:inherit;text-decoration:none}
#iptv-vergleich p{text-align:left}
#iptv-vergleich .iv-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Eingeklappt (mit JavaScript); ohne JavaScript macht <noscript> alles sichtbar */
#iptv-vergleich .iv-zu{display:none!important}

/* Icons (SVG-Sprite) */
#iptv-vergleich .iv-i{width:16px;height:16px;flex:none;vertical-align:-3px}
#iptv-vergleich .iv-i-check{color:var(--ok)}
#iptv-vergleich .iv-i-cross{color:var(--no)}
#iptv-vergleich .iv-i-dash{color:#94a3b8}

/* Abschnittsköpfe */
#iptv-vergleich .iv-abschnitt{margin:0 0 32px}
#iptv-vergleich .iv-abschnitt:last-child{margin-bottom:0}
#iptv-vergleich .iv-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0 0 14px}
#iptv-vergleich .iv-h2{font-size:22px;line-height:1.2;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:10px}
#iptv-vergleich .iv-h2-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
#iptv-vergleich .iv-h2-ic .iv-i{width:18px;height:18px}
#iptv-vergleich .iv-h2-ic.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--gold-ink)}
#iptv-vergleich .iv-h2-ic.navy{background:var(--navy);color:#fff}
#iptv-vergleich .iv-kopf-sub{color:var(--slate);font-size:14px}
/* Zählzeile „27 Tarife von 9 Anbietern, Stand: …“ zwischen zwei Abschnitten.
   Der negative Rand verschmilzt mit den 32 px des Abschnitts darüber zu 20 px. */
#iptv-vergleich .iv-stand{text-align:center;color:var(--slate);font-size:14px;margin:0 0 30px}
#iptv-vergleich .iv-abschnitt + .iv-stand{margin-top:-12px}

/* Logo */
#iptv-vergleich .iv-logo{display:flex;align-items:center;justify-content:center;background:#fff;flex:none}
#iptv-vergleich .iv-logo img{width:100%;height:auto}
#iptv-vergleich .iv-logo-ph{font-weight:800;color:var(--navy);font-size:13px;text-align:center;padding:4px}

/* Sterne */
#iptv-vergleich .iv-sterne{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--slate);white-space:nowrap}
#iptv-vergleich .iv-sterne-bar{position:relative;display:inline-block;font-size:14px;letter-spacing:1px;line-height:1;color:#d5dde6}
#iptv-vergleich .iv-sterne-bar::before{content:"\2605\2605\2605\2605\2605"}
#iptv-vergleich .iv-sterne-bar>span{position:absolute;inset:0 auto 0 0;overflow:hidden;color:var(--gold);white-space:nowrap}
#iptv-vergleich .iv-sterne-bar>span::before{content:"\2605\2605\2605\2605\2605"}
#iptv-vergleich .iv-sterne b{color:var(--ink);font-weight:700}

/* Preis */
#iptv-vergleich .iv-preis{display:flex;flex-direction:column;line-height:1.1}
#iptv-vergleich .iv-preis-z{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
#iptv-vergleich .iv-preis-l{font-size:12.5px;color:var(--slate);margin-top:3px}

/* Button „zum Angebot“: Blau (Liste, Kontrast ≥ 4,8:1) und Grün-Verlauf (Top-Picks) */
#iptv-vergleich .iv-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:10px;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;color:#fff;white-space:nowrap;transition:background-color .15s ease,transform .15s ease;box-shadow:0 2px 6px rgba(15,42,67,.18)}
#iptv-vergleich .iv-cta:hover{transform:translateY(-1px);text-decoration:none;color:#fff}
#iptv-vergleich .iv-cta .iv-i{width:15px;height:15px;color:currentColor}
#iptv-vergleich .iv-cta-blau{background:linear-gradient(180deg,var(--blau),var(--blau-2))}
#iptv-vergleich .iv-cta-blau:hover{background:linear-gradient(180deg,#0a63c2,#004c99)}
#iptv-vergleich .iv-cta-gruen{background:linear-gradient(0deg,#245D00,#05E600);text-shadow:0 1px 2px rgba(0,0,0,.55)}
#iptv-vergleich .iv-cta-gruen:hover{background:linear-gradient(0deg,#1d4c00,#04c400)}

/* Tooltip [?] – Maus, Tastatur (Esc schließt) und Touch */
#iptv-vergleich .iv-tip-w{position:relative;display:inline-flex;vertical-align:middle;margin-left:4px}
#iptv-vergleich .iv-tip{position:relative;display:inline-grid;place-items:center;width:19px;height:19px;padding:0;border:0;border-radius:50%;background:#e3eaf1;color:#3c4d5e;font-size:11px;font-weight:800;line-height:1;cursor:help}
#iptv-vergleich .iv-tip::after{content:"";position:absolute;inset:-8px}
#iptv-vergleich .iv-tip:hover,#iptv-vergleich .iv-tip:focus-visible,#iptv-vergleich .iv-tip[aria-expanded="true"]{background:var(--navy);color:#fff}
#iptv-vergleich .iv-tip-box{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(calc(-50% + var(--dx,0px)));width:max-content;max-width:min(270px,80vw);background:var(--navy);color:#e8f0f8;font-size:12.5px;font-weight:400;line-height:1.5;padding:9px 12px;border-radius:9px;box-shadow:0 10px 24px rgba(15,42,67,.35);display:none;z-index:40;text-align:left;white-space:normal}
#iptv-vergleich .iv-tip-w.unten .iv-tip-box{bottom:auto;top:calc(100% + 10px)}
/* Verborgene Boxen mit display:none – sonst ragen sie am Handy über den Rand und die Seite scrollt seitlich */
#iptv-vergleich .iv-tip:hover+.iv-tip-box,#iptv-vergleich .iv-tip:focus-visible+.iv-tip-box,#iptv-vergleich .iv-tip[aria-expanded="true"]+.iv-tip-box{display:block}
#iptv-vergleich .iv-tip[data-zu]+.iv-tip-box{display:none}

/* Merkmale */
#iptv-vergleich .iv-merkmale{display:grid;gap:5px;font-size:14px}
#iptv-vergleich .iv-merkmale li{display:flex;align-items:center;gap:7px;min-width:0}
#iptv-vergleich .iv-merkmale li.nein{color:var(--muted)}
#iptv-vergleich .iv-merkmale strong{color:var(--ink)}
#iptv-vergleich .iv-mini{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px}
#iptv-vergleich .iv-mini li{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#iptv-vergleich .iv-mini li.nein{color:var(--muted)}
#iptv-vergleich .iv-mini .iv-i{width:15px;height:15px}

/* Streaming-Chips */
#iptv-vergleich .iv-stream{display:grid;gap:8px}
#iptv-vergleich .iv-stream-z{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
#iptv-vergleich .iv-stream-lab{font-size:13px;font-weight:700;color:var(--slate);min-width:76px}
#iptv-vergleich .iv-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
#iptv-vergleich .iv-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:#eaf0f6;color:#24384b;border:1px solid #dbe4ee;max-width:100%}
#iptv-vergleich .iv-chip.opt{background:#fff;border-style:dashed;color:var(--slate);font-weight:500}
#iptv-vergleich .iv-chip.opt b{color:var(--ink);font-weight:700}
/* Chip mit Logo statt Name: weißer Grund (Logos haben teils helle Flächen); Größe wie VERGLEICH_CHIP_LOGO_* in render.php */
#iptv-vergleich .iv-chip.logo{background:#fff;padding:4px 9px;gap:6px}
#iptv-vergleich .iv-chip.logo img{max-width:78px;max-height:18px;object-fit:contain}
#iptv-vergleich .iv-chip.leer{background:none;border-color:transparent;color:var(--muted);padding-left:0;font-weight:500}
#iptv-vergleich .iv-chip-mehr{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700;color:var(--navy);cursor:pointer}
#iptv-vergleich .iv-chip-mehr:hover{border-color:var(--navy)}

/* Onlineaktion (Bernstein) */
#iptv-vergleich .iv-aktion{display:flex;gap:10px;align-items:flex-start;background:var(--aktion-bg);border:1px solid var(--aktion-rand);color:var(--aktion-text);border-radius:var(--r);padding:8px 12px;font-size:13.5px;line-height:1.45}
#iptv-vergleich .iv-aktion-tag{flex:none;width:22px;height:22px;border-radius:6px;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font-weight:800;font-size:13px;margin-top:-1px}
#iptv-vergleich .iv-aktion strong{color:inherit}
#iptv-vergleich .iv-frist{display:inline-block;white-space:nowrap;font-weight:700;font-size:12px;color:var(--aktion-text);background:var(--aktion-chip);border-radius:999px;padding:1px 8px;margin-left:4px}
#iptv-vergleich .iv-frist.iv-countdown{color:#fff;background:var(--aktion-countdown)}

/* Hardware-Hinweis */
#iptv-vergleich .iv-hw{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate)}
#iptv-vergleich .iv-hw .iv-i{width:15px;height:15px;color:var(--slate)}

/* Top-Pick-Markierung in Listen */
#iptv-vergleich .iv-toptag{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:800;color:var(--gold-ink);background:linear-gradient(90deg,var(--gold-2),var(--gold));border-radius:999px;padding:1px 8px;white-space:nowrap;vertical-align:1px}

/* Sortierleiste als Reiter: Linie unten, aktiver Reiter mit Gold-Unterstrich
   (bewusst kein Farbblock – grenzt sich von den dunkelblauen Überschriften ab) */
#iptv-vergleich .iv-werkzeug{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;justify-content:space-between;margin:0 0 16px;border-bottom:2px solid var(--line)}
#iptv-vergleich .iv-sort{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end}
#iptv-vergleich .iv-sort-lab{font-size:13px;font-weight:700;color:var(--slate);padding:0 10px 11px 0;white-space:nowrap}
#iptv-vergleich .iv-sort button{border:0;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;background:none;color:var(--slate);font-size:14px;font-weight:600;padding:10px 16px;margin-bottom:-2px;cursor:pointer;min-height:44px;white-space:nowrap}
#iptv-vergleich .iv-sort button:hover{background:var(--soft);color:var(--ink)}
#iptv-vergleich .iv-sort button[aria-pressed="true"]{color:var(--navy);font-weight:800;border-bottom-color:var(--gold)}
#iptv-vergleich .iv-anzahl{font-size:13.5px;color:var(--slate)}
#iptv-vergleich .iv-pfeil:not(:empty){margin-left:4px}
#iptv-vergleich .iv-leer{padding:18px;border:2px dashed var(--line);border-radius:var(--r-gross);text-align:center;color:var(--slate)}

/* Details-Bereich (aufklappbar) */
#iptv-vergleich .iv-det-knopf{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--link);font-size:13.5px;font-weight:700;cursor:pointer;padding:6px 2px;min-height:32px;text-decoration:underline;text-decoration-color:#a9c8ec;text-underline-offset:3px}
#iptv-vergleich .iv-det-knopf:hover{text-decoration-color:var(--link)}
#iptv-vergleich .iv-det-knopf .iv-i{width:14px;height:14px;transition:transform .15s}
#iptv-vergleich .iv-det-knopf[aria-expanded="true"] .iv-i{transform:rotate(180deg)}
#iptv-vergleich .iv-det{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px 24px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
#iptv-vergleich .iv-det :is(h4,h5,h6){font-size:13.5px;font-weight:800;color:var(--navy);margin:0 0 8px}
#iptv-vergleich .iv-det p{font-size:13.5px;margin:0 0 6px}
#iptv-vergleich .iv-det .iv-stream-lab{min-width:0;width:100%}
@container iv (max-width:700px){#iptv-vergleich .iv-det{grid-template-columns:1fr}}

/* „Mehr anzeigen“ */
#iptv-vergleich .iv-mehr{display:flex;align-items:center;gap:6px;margin:18px auto 0;font-weight:700;color:var(--navy);background:#fff;border:2px solid var(--navy);border-radius:10px;padding:10px 22px;cursor:pointer;min-height:46px}
#iptv-vergleich .iv-mehr:hover{background:var(--navy);color:#fff}
#iptv-vergleich .iv-mehr span{font-weight:500}

/* Rechtlicher Hinweis */
#iptv-vergleich .iv-hinweis{margin-top:22px;font-size:12px;line-height:1.6;color:var(--slate)}

@media (prefers-reduced-motion:reduce){
  #iptv-vergleich *,#iptv-vergleich *::before,#iptv-vergleich *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}