/* ============================================================
   Ligaportal Sportwetten — Redesign 08.10.2026
   ------------------------------------------------------------
   Wird NACH main.css geladen (functions.php, Handle lpsw-redesign).
   Enthaelt nur die neuen Komponenten des Redesigns; main.css bleibt
   fuer alles Bestehende zustaendig. Rueckbau = Datei austauschen.

   Inhalt:
     1. Buttons v2 (.lpsw-btn2)
     2. Hero v2 (.lpsw-hero2) — Vergleichsseite
     3. Sprungleiste (.lpsw-jump)
     4. Snippet-Raster + Testsieger-Kasten (Ueberschreibungen)
     5. Werkzeugleiste (.lpsw-tools)
     6. Anbieterkarte v2 (.lpsw-anbieter)
     7. Tabellenansicht (.lpsw-tabelle)
     8. Sticky-CTA Handy (.lpsw-mcta)
     9. Testbericht-Kopf (.lpsw-tbhead) und Ratgeber-Angleichung
    10. Media Queries

   Farbwerte sind die CI-Variablen aus main.css (--lp-*). Zwei neue Toene
   fuer Noten: Gruen (Spitzenwert) und Bernstein (Schwaeche). Beide sind
   auf Weiss >= 4.5:1 als Text und werden auf der Karte zusaetzlich immer
   von der Zahl begleitet — Farbe ist Verstaerkung, nie Traeger der Info.
   ============================================================ */

:root {
  --lp2-ink:       #14213d;
  --lp2-muted:     #5b6b85;
  --lp2-line:      #e3e8f0;
  --lp2-bg:        #f4f6fa;
  --lp2-blau-xd:   #082a4d;
  --lp2-gruen:     #0f8a5f;
  --lp2-gruen-l:   #e6f6ef;
  --lp2-amber:     #b8690c;
  --lp2-orange-d:  #cf7208;
  --lp2-radius:    16px;
  --lp2-shadow:    0 14px 30px -18px rgba(0, 60, 107, 0.35);
}

.lpsw-v2 * { box-sizing: border-box; }

.lpsw-ic {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.15em;
}

/* ============================================================
   1. Buttons v2
   ============================================================ */

.lpsw-btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-family: var(--lp-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.lpsw-btn2:active { transform: translateY(1px); }

body.lpsw-theme .lpsw-btn2--orange,
.lpsw-btn2--orange { background: var(--lp-orange); color: #fff; }
body.lpsw-theme .lpsw-btn2--orange:hover,
.lpsw-btn2--orange:hover { background: var(--lp2-orange-d); color: #fff; }

body.lpsw-theme .lpsw-btn2--outline,
.lpsw-btn2--outline { background: #fff; color: var(--lp-blau); border-color: var(--lp2-line); }
body.lpsw-theme .lpsw-btn2--outline:hover,
.lpsw-btn2--outline:hover { border-color: var(--lp-blau); color: var(--lp-blau-dark); }

body.lpsw-theme .lpsw-btn2--ghost,
.lpsw-btn2--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
body.lpsw-theme .lpsw-btn2--ghost:hover,
.lpsw-btn2--ghost:hover { border-color: #fff; color: #fff; }

.lpsw-btn2--klein { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* ============================================================
   2. Hero v2 — Vergleichsseite
   ------------------------------------------------------------
   Flaches Dunkelblau statt Stadionfoto. Das Foto hat seit 22.09. drei
   Nachjustierungen am Verlauf gebraucht, damit der Text ueber den
   Flutlichtkegeln lesbar bleibt (siehe main.css, Abschnitt 7). Die flache
   Flaeche hat das Problem nicht: H1 auf #082a4d ist 15:1, die Subline
   (#cdd8ea) 10:1. Ein weicher radialer Lichtfleck rechts oben gibt Tiefe,
   ohne den Kontrast irgendwo unter 7:1 zu druecken.
   ============================================================ */

.lpsw-hero2 {
  position: relative;
  overflow: hidden;
  /* 08.10.2026, 09:16: Niki will das Stadionfoto behalten (Entscheidung 1 von 3).
     Verlauf identisch mit .lpsw-hero in main.css (0.56/0.52), der dort gegen
     das hellste Prozent des Fotos nachgerechnet ist. Dazu derselbe Textschatten. */
  background: linear-gradient(135deg, rgba(7, 20, 38, 0.56), rgba(2, 34, 62, 0.52)),
              url('../img/hero-bg.webp') center/cover no-repeat;
  color: #fff;
}
.lpsw-hero2__grid {
  position: relative;
  text-shadow: 0 1px 10px rgba(2, 10, 22, 0.55);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 56px;
}
.lpsw-hero2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #ffb75c;
}
.lpsw-hero2__eyebrow i { display: inline-block; width: 22px; height: 2px; background: #ffb75c; }

body.lpsw-theme .lpsw-hero2 h1 {
  margin: 14px 0 16px;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: #fff;
  max-width: 24ch;
  text-wrap: balance;
}
.lpsw-hero2 .lpsw-hero__zeile2 { display: block; }
.lpsw-hero2__jahr { font-style: normal; display: inline-block; background: var(--lp-orange); color: #fff; padding: 0 12px; border-radius: 6px; text-shadow: none; }

body.lpsw-theme .lpsw-hero2__sub {
  margin: 0 0 26px;
  max-width: 560px;
  font-size: 17.5px;
  line-height: 1.55;
  color: #cdd8ea;
}
.lpsw-hero2__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Der Textschatten des Heros gehoert auf Fliesstext ueber dem Foto, nicht auf
   Buttons: dort wirkt er wie ein unsauberer Schlagschatten (Niki, 08.10.). */
.lpsw-hero2 .lpsw-btn2 { text-shadow: none; }

body.lpsw-theme .lpsw-hero2__byline { margin: 22px 0 0; font-size: 13px; color: #9fb0c9; }
body.lpsw-theme .lpsw-hero2__byline a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.lpsw-hero2__trust {
  list-style: none;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13.5px;
  color: #cdd8ea;
}
.lpsw-hero2__trust li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.lpsw-hero2__trust .lpsw-ic { color: #5fd39c; font-size: 16px; }

.lpsw-hero2__zahlen {
  text-shadow: none;
  background: #fff;
  color: var(--lp2-ink);
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
body.lpsw-theme .lpsw-hero2__zahlen-titel {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lp-blau);
}
.lpsw-hero2__zahlen-liste { list-style: none; margin: 0; padding: 0; }
.lpsw-hero2__zahlen-liste li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lp2-line);
  margin: 0;
}
.lpsw-hero2__zahlen-liste li:last-child { border-bottom: 0; }
.lpsw-hero2__zahl {
  font-family: var(--lp-font-headline);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--lp-blau);
  flex: 0 0 72px;
  width: 72px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lpsw-hero2__zahl-text { font-size: 15px; color: #2a3a55; }
.lpsw-hero2__zahl-text small { display: block; font-size: 12.5px; color: var(--lp2-muted); margin-top: 2px; }
body.lpsw-theme .lpsw-hero2__zahlen-fuss { margin: 14px 0 0; font-size: 12.5px; color: var(--lp2-muted); }

/* ============================================================
   3. Sprungleiste
   ------------------------------------------------------------
   Klebt unter dem Site-Header (64px). z-index unter dem Header (100),
   ueber der Werkzeugleiste.
   ============================================================ */

.lpsw-jump {
  position: sticky;
  top: 64px;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--lp2-line);
}
.lpsw-jump .lpsw-container {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lpsw-jump .lpsw-container::-webkit-scrollbar { display: none; }
body.lpsw-theme .lpsw-jump a {
  white-space: nowrap;
  padding: 14px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #2a3a55;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
body.lpsw-theme .lpsw-jump a:hover { color: var(--lp-blau); text-decoration: none; }
body.lpsw-theme .lpsw-jump a.is-on { color: var(--lp-blau); border-color: var(--lp-orange); }

/* Anker nicht hinter Header + Leiste verschwinden lassen. */
.lpsw-v2 [id] { scroll-margin-top: 130px; }

/* ============================================================
   4. Snippet-Raster + Testsieger-Kasten
   ------------------------------------------------------------
   Ueberschreibt .lpsw-snippet-list aus main.css: zweispaltiges Raster,
   Slogan einzeilig gekuerzt. Der volle Satz steht im DOM (Google, Reader,
   Screenreader lesen ihn komplett), nur die Anzeige schneidet ab.
   ============================================================ */

.lpsw-snippet--v2 {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.lpsw-snippet--v2 .lpsw-snippet-answer {
  background: #eaf2fb;
  border-left: 4px solid var(--lp-blau);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
}
.lpsw-snippet-list--v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Spaltenweise fuellen: 1-5 links, 6-10 rechts (Niki, 08.10.2026). Die
     Zeilenzahl kommt als --lpsw-rang-zeilen aus dem Template (ceil(n/2)),
     damit es auch bei 9 oder 12 Anbietern stimmt. DOM-Reihenfolge bleibt 1-n. */
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--lpsw-rang-zeilen, 5), auto);
  gap: 10px 16px;
}
.lpsw-snippet-list--v2 > li {
  display: grid;
  grid-template-columns: 26px 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
}
.lpsw-snippet-list--v2 > li::before {
  content: counter(lpsw-rang);
  font-family: var(--lp-font-headline);
  font-weight: 700;
  font-size: 15px;
  color: var(--lp2-muted);
  text-align: center;
}
.lpsw-snippet-list--v2 .lpsw-snippet-list__logo {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.lpsw-snippet-list--v2 .lpsw-snippet-list__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
/* Tabellenansicht: gleiche Logik, Rundung am Bild statt Rahmen. */
.lpsw-tabelle__logo { border: 0; border-radius: 0; }
.lpsw-tabelle__logo img { border-radius: 8px; }
.lpsw-snippet-list--v2 .lpsw-snippet-list__text {
  min-width: 0;
  font-size: 13.5px;
  color: var(--lp2-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lpsw-snippet-list--v2 .lpsw-snippet-list__text strong { color: var(--lp2-ink); font-size: 15px; }
.lpsw-snippet-list__chip {
  font-family: var(--lp-font-headline);
  font-weight: 700;
  font-size: 15px;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--lp2-gruen-l);
  color: var(--lp2-gruen);
}

.lpsw-sieger--v2 {
  background: #fff;
  border: 2px solid var(--lp-blau);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 40px -24px rgba(0, 60, 107, 0.4);
  text-align: left;
}
body.lpsw-theme .lpsw-sieger--v2 .lpsw-sieger__badge {
  display: inline-block;
  margin: 0 0 14px;
  background: var(--lp-orange);
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.lpsw-sieger__kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
/* Kein Rahmen um das Logo (Niki, 08.10.): Das Bild selbst bekommt runde Ecken. */
.lpsw-sieger--v2 .lpsw-sieger__logo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0;
  flex: none;
}
.lpsw-sieger--v2 .lpsw-sieger__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
body.lpsw-theme .lpsw-sieger--v2 .lpsw-sieger__name {
  margin: 0 0 2px;
  font-family: var(--lp-font-headline);
  font-weight: 700;
  font-size: 22px;
  color: var(--lp2-ink);
}
body.lpsw-theme .lpsw-sieger--v2 .lpsw-sieger__score {
  margin: 0 0 8px;
  font-family: var(--lp-font-headline);
  font-weight: 700;
  font-size: 16px;
  color: var(--lp2-muted);
}
body.lpsw-theme .lpsw-sieger--v2 .lpsw-sieger__score span { font-size: 44px; font-weight: 900; color: var(--lp-blau); line-height: 1; }
body.lpsw-theme .lpsw-sieger--v2 .lpsw-sieger__slogan { margin: 0 0 16px; font-size: 14px; color: #2a3a55; }
.lpsw-sieger__aktionen { display: flex; gap: 10px; }
.lpsw-sieger__aktionen .lpsw-btn2 { white-space: nowrap; }
.lpsw-sieger__aktionen .lpsw-btn2--orange { flex: 1; }
body.lpsw-theme .lpsw-sieger--v2 .lpsw-sieger__hinweis { margin: 12px 0 0; font-size: 11.5px; color: var(--lp2-muted); }

/* ============================================================
   5. Werkzeugleiste
   ============================================================ */

/* Werkzeugleiste, kompakt (08.10.): eine Zeile am Desktop, flache Chips im
   Stil der Karten-Merkmale, aktive Chips in Tinte statt Blau. */
.lpsw-tools {
  background: #fff;
  border: 1px solid var(--lp2-line);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 18px;
}
.lpsw-tools__zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.lpsw-tools__zeile--rechts { justify-content: flex-start; }
.lpsw-tools__titel,
.lpsw-tools__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--lp2-muted);
  margin-right: 2px;
}
.lpsw-tools__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lpsw-tools__chip {
  border: 0;
  background: #f3f6fb;
  border-radius: 8px;
  padding: 0 11px;
  min-height: 32px;
  font-family: var(--lp-font-body);
  font-size: 13px;
  font-weight: 700;
  color: #2a3a55;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.lpsw-tools__chip:hover { background: #e3e8f0; color: var(--lp2-ink); }
.lpsw-tools__chip[aria-pressed="true"] { background: var(--lp2-ink); color: #fff; }
.lpsw-tools__reset {
  border: 0;
  background: none;
  font-family: var(--lp-font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lp-blau);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 4px;
}
body.lpsw-theme .lpsw-tools__ergebnis { margin: 0 8px 0 0; order: 9; font-size: 12.5px; color: var(--lp2-muted); white-space: nowrap; }
.lpsw-tools__select {
  min-height: 32px;
  border: 1px solid var(--lp2-line);
  border-radius: 8px;
  padding: 0 8px;
  font-family: var(--lp-font-body);
  font-size: 13px;
  font-weight: 700;
  color: #2a3a55;
  background: #fff;
}
.lpsw-tools__ansicht { display: inline-flex; background: #f3f6fb; border-radius: 8px; padding: 2px; }
.lpsw-tools__ansicht button {
  border: 0;
  background: transparent;
  padding: 0 11px;
  min-height: 28px;
  border-radius: 6px;
  font-family: var(--lp-font-body);
  font-weight: 700;
  font-size: 13px;
  color: #2a3a55;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lpsw-tools__ansicht button .lpsw-ic { font-size: 14px; }
.lpsw-tools__ansicht button.is-on { background: var(--lp2-ink); color: #fff; }

/* ============================================================
   6. Anbieterkarte v2
   ------------------------------------------------------------
   Sechs Spalten: Rang | Logo | Info | Noten | Gesamt | Bonus+CTA.
   Unter 1024px: Noten rutschen unter die Info, unter 760px: Handy-Layout
   (Logo, Name, Note in einer Zeile; Balken; ein Button).
   ============================================================ */

.lpsw-karten[hidden],
.lpsw-tabelle[hidden],
.lpsw-anbieter[hidden],
.lpsw-tools[hidden],
.lpsw-tools [hidden],
.lpsw-mcta[hidden],
.lpsw-tabelle tr[hidden] { display: none !important; }

/* ---------- Anbieter-Karte v3 (08.10.2026): Hero | Redaktion | Entscheidung ---------- */
body.lpsw-fullwidth .lpsw-anbieter,
.lpsw-anbieter {
  position: relative;
  background: #fff;
  border: 1px solid var(--lp2-line);
  border-radius: 22px;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  grid-template-areas: "hero info cta" "details details details";
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.lpsw-anbieter:hover { box-shadow: var(--lp2-shadow); border-color: #c9d6e6; }
body.lpsw-fullwidth .lpsw-anbieter--top,
.lpsw-anbieter--top { border: 2px solid var(--lp-orange); }

/* Zone 1: Hero */
.lpsw-anbieter__hero {
  grid-area: hero;
  background: #f3f6fb;
  border-right: 1px solid var(--lp2-line);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lpsw-anbieter__kopf { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.lpsw-anbieter__rang {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--lp2-ink);
  color: #fff;
  font-family: var(--lp-font-headline);
  font-weight: 900;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lpsw-anbieter--top .lpsw-anbieter__rang { background: var(--lp-orange); }
/* Nach Umsortierung zeigt die Ziffer weiter den Rang im Gesamtranking,
   deshalb mit Praefix, damit das keiner als Platz in der Liste liest. */
.lpsw-karten.is-umsortiert .lpsw-anbieter__rang { width: auto; padding: 0 10px; font-size: 13px; }
.lpsw-karten.is-umsortiert .lpsw-anbieter__rang::before { content: "Platz "; margin-right: 4px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.lpsw-anbieter__badge {
  font-family: var(--lp-font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e9eef6;
  color: var(--lp-blau);
}
.lpsw-anbieter__badge--top { background: var(--lp-orange); color: #fff; }

.lpsw-anbieter__logo {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
/* Kein Rahmen, kein Kasten: Das Logo steht direkt auf der hellen Flaeche.
   multiply blendet weisse Pixel der PNG-Dateien in den Hintergrund, damit
   keine weissen Kloetze stehen. */
.lpsw-anbieter__logo picture { display: contents; }
.lpsw-anbieter__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; border-radius: 16px; }

.lpsw-anbieter__gesamt { display: flex; align-items: center; gap: 14px; }
.lpsw-anbieter__ring { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.lpsw-anbieter__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lpsw-anbieter__ring-track { fill: none; stroke: #dde3ec; stroke-width: 10; }
.lpsw-anbieter__ring-fill { fill: none; stroke: var(--lp-blau); stroke-width: 10; stroke-linecap: round; }
.lpsw-anbieter--top .lpsw-anbieter__ring-fill { stroke: var(--lp-orange); }
.lpsw-anbieter__score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.lpsw-anbieter__score-big { font-family: var(--lp-font-headline); font-weight: 900; font-size: 30px; color: var(--lp-blau); }
.lpsw-anbieter__score-max { font-size: 11px; font-weight: 700; color: var(--lp2-muted); margin-top: 3px; }
.lpsw-anbieter__platz { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--lp2-muted); }
.lpsw-anbieter__platz strong { font-family: var(--lp-font-headline); font-size: 17px; color: var(--lp2-ink); line-height: 1.1; }
.lpsw-anbieter__platz-text { line-height: 1.3; }

.lpsw-anbieter__merkmale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.lpsw-anbieter__merkmale li {
  margin: 0;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--lp2-gruen-l);
  color: #1e6b3a;
  line-height: 1.5;
}
.lpsw-anbieter__merkmale li.is-nein { background: #fff; color: #8d9bb0; text-decoration: line-through; }

body.lpsw-theme .lpsw-anbieter__lizenz {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.4;
}
.lpsw-anbieter__lizenz--at { background: var(--lp2-gruen-l); color: var(--lp2-gruen); }
.lpsw-anbieter__lizenz--eu { background: #e9eef6; color: #2a3a55; }
.lpsw-anbieter__lizenz .lpsw-ic { font-size: 13px; }
.lpsw-anbieter__lizenz--kurz { margin: 0 !important; }

/* Zone 2: Redaktion */
.lpsw-anbieter__info { grid-area: info; min-width: 0; padding: 24px 26px 20px; display: flex; flex-direction: column; gap: 12px; }
body.lpsw-theme .lpsw-anbieter__name { margin: 0; font-size: 30px; line-height: 1.05; }
body.lpsw-theme .lpsw-anbieter__slogan { margin: 0; font-size: 15.5px; font-weight: 400; line-height: 1.5; color: #2a3a55; }



/* Von uns geprueft: vier Kennzahlen */
.lpsw-anbieter__mess { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.lpsw-anbieter__mess-titel { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-blau); }
.lpsw-anbieter__mess-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lpsw-anbieter__kennzahl { border: 1px solid var(--lp2-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lpsw-anbieter__kennzahl-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7a90; }
.lpsw-anbieter__kennzahl b { font-size: 16px; color: var(--lp2-ink); }
.lpsw-anbieter__kennzahl small { font-size: 11.5px; color: #8a95a6; line-height: 1.3; }

/* Zone 3: Entscheidung */
.lpsw-anbieter__cta { grid-area: cta; background: var(--lp2-ink); color: #fff; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.lpsw-anbieter__noten-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lpsw-anbieter__noten-titel { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9fb4d6; }
.lpsw-anbieter__noten-legende { font-size: 10.5px; color: #9fb4d6; display: inline-flex; align-items: center; gap: 5px; }
.lpsw-anbieter__noten-legende i { display: inline-block; width: 2px; height: 11px; background: #fff; }
.lpsw-anbieter__noten { display: grid; gap: 9px; }
.lpsw-anbieter__note { display: grid; grid-template-columns: 84px minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: 12.5px; color: #c9d4e6; }
.lpsw-anbieter__note-label { display: flex; flex-direction: column; line-height: 1.1; }
.lpsw-anbieter__note-label small { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7ad39a; margin-top: 2px; }
.lpsw-anbieter__note-track { position: relative; height: 7px; background: #2f3b50; border-radius: 999px; display: block; }
.lpsw-anbieter__note-fill { display: block; height: 100%; background: #6f9ee8; border-radius: 999px; }
.lpsw-anbieter__note-fill.is-hoch { background: #7ad39a; }
.lpsw-anbieter__note-fill.is-tief { background: #f0a24a; }
.lpsw-anbieter__note-avg { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; transform: translateX(-1px); }
.lpsw-anbieter__note-wert { color: #fff; font-size: 12.5px; text-align: right; }

.lpsw-anbieter__bonus { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 3px; }
.lpsw-anbieter__bonus-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lp-blau); font-weight: 700; }
.lpsw-anbieter__bonus-value { display: block; font-family: var(--lp-font-headline); font-weight: 900; font-size: 22px; line-height: 1.05; color: var(--lp2-orange-d); }
.lpsw-anbieter__bonus-terms { display: block; font-size: 12px; line-height: 1.35; color: var(--lp2-muted); }
.lpsw-anbieter__bonus-terms .lpsw-card__flagge { vertical-align: -0.1em; margin-right: 6px; height: 0.85em; }
.lpsw-anbieter__bonus-terms .lpsw-card__flagge svg { width: 1.3em; height: 0.85em; display: block; }
.lpsw-anbieter__cta .lpsw-btn2 { min-height: 48px; font-size: 16px; width: 100%; margin-top: 14px; }
body.lpsw-theme .lpsw-anbieter__cta-link { font-size: 13.5px; font-weight: 700; text-align: center; color: #c9d4e6; }
body.lpsw-theme .lpsw-anbieter__cta-link:hover { color: #fff; }
body.lpsw-theme .lpsw-anbieter__hinweis { margin: auto 0 0; font-size: 11px; line-height: 1.4; color: #8a9bb8; text-align: center; }

/* Zone 4: Aufklapper (natives details, kein JS) */
.lpsw-anbieter__details { grid-area: details; border-top: 1px solid var(--lp2-line); background: #fbfcfe; }
.lpsw-anbieter__details-summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lp-blau);
}
.lpsw-anbieter__details-summary::-webkit-details-marker { display: none; }
.lpsw-anbieter__details-summary:hover { background: #f3f6fb; }
.lpsw-anbieter__details-summary:focus-visible { outline: 2px solid var(--lp-blau); outline-offset: -2px; }
.lpsw-anbieter__details-icon { width: 9px; height: 9px; border-right: 2px solid var(--lp2-muted); border-bottom: 2px solid var(--lp2-muted); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform 0.15s ease; }
.lpsw-anbieter__details[open] .lpsw-anbieter__details-icon { transform: rotate(-135deg); margin-top: 4px; }
.lpsw-anbieter__details-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px; gap: 16px; padding: 4px 24px 22px; background: #fff; border-top: 1px solid var(--lp2-line); padding-top: 20px; }
.lpsw-anbieter__pro,
.lpsw-anbieter__contra,
.lpsw-anbieter__rechnung { border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.4; }
.lpsw-anbieter__pro { background: #e9f6ec; }
.lpsw-anbieter__contra { background: #fbeaea; }
.lpsw-anbieter__rechnung { background: #f3f6fb; font-size: 13.5px; }
.lpsw-anbieter__pc-titel { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; color: var(--lp-blau); }
.lpsw-anbieter__pro .lpsw-anbieter__pc-titel { color: #1e6b3a; }
.lpsw-anbieter__contra .lpsw-anbieter__pc-titel { color: #a3332f; }
body.lpsw-theme .lpsw-anbieter__pro ul,
body.lpsw-theme .lpsw-anbieter__contra ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.lpsw-theme .lpsw-anbieter__pro li,
body.lpsw-theme .lpsw-anbieter__contra li { margin: 0; padding-left: 18px; position: relative; }
.lpsw-anbieter__pro li::before { content: "\2713"; position: absolute; left: 0; color: #1e6b3a; font-weight: 700; }
.lpsw-anbieter__contra li::before { content: "\2013"; position: absolute; left: 0; color: #a3332f; font-weight: 700; }
body.lpsw-theme .lpsw-anbieter__rechnung dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; }
body.lpsw-theme .lpsw-anbieter__rechnung dt { color: var(--lp2-muted); font-weight: 400; }
body.lpsw-theme .lpsw-anbieter__rechnung dd { margin: 0; font-weight: 700; }
body.lpsw-theme .lpsw-anbieter__rechnung dd:nth-of-type(4) { font-weight: 400; }
.lpsw-anbieter__rechnung-feld { color: #1e6b3a; }

/* ============================================================
   7. Tabellenansicht
   ============================================================ */

.lpsw-tabelle {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--lp2-line);
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}
.lpsw-tabelle__table { border-collapse: collapse; width: 100%; min-width: 960px; font-size: 13px; margin: 0; }
/* Button-Spalte klebt rechts, damit "Besuchen" auch beim Scrollen sichtbar bleibt. */
.lpsw-tabelle__table .lpsw-tabelle__aktion,
.lpsw-tabelle__table thead th:last-child { position: sticky; right: 0; background: #fff; box-shadow: -8px 0 12px -10px rgba(0, 0, 0, 0.25); z-index: 2; }
.lpsw-tabelle__table thead th:last-child { z-index: 3; background: #f8fafc; }
.lpsw-tabelle__table tbody tr:hover .lpsw-tabelle__aktion { background: #f8fafc; }
.lpsw-tabelle__bonus { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpsw-tabelle__table th,
.lpsw-tabelle__table td { padding: 10px 8px; border-bottom: 1px solid var(--lp2-line); vertical-align: middle; text-align: left; }
.lpsw-tabelle__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lp2-muted);
  white-space: nowrap;
}
.lpsw-tabelle__table tbody tr:last-child th,
.lpsw-tabelle__table tbody tr:last-child td { border-bottom: 0; }
.lpsw-tabelle__table tbody tr:hover { background: #f8fafc; }
.lpsw-tabelle__rang { color: var(--lp2-muted); font-weight: 700; }
.lpsw-tabelle__anbieter { font-weight: 700; }
body.lpsw-theme .lpsw-tabelle__anbieter a { display: inline-flex; align-items: center; gap: 10px; color: var(--lp2-ink); white-space: nowrap; }
.lpsw-tabelle__logo { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--lp2-line); overflow: hidden; display: grid; place-items: center; }
.lpsw-tabelle__logo img { width: 100%; height: 100%; object-fit: contain; }
.lpsw-tabelle__gesamt {
  font-family: var(--lp-font-headline);
  font-weight: 700;
  font-size: 15px;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--lp2-gruen-l);
  color: var(--lp2-gruen);
}
.lpsw-tabelle__note { font-variant-numeric: tabular-nums; }
.lpsw-tabelle__note.is-hoch { color: var(--lp2-gruen); font-weight: 700; }
.lpsw-tabelle__note.is-tief { color: var(--lp2-amber); font-weight: 700; }
.lpsw-tabelle__table td.is-ja { color: var(--lp2-gruen); font-weight: 700; }
.lpsw-tabelle__table td.is-nein { color: #b8c2d0; }
.lpsw-tabelle__bonus { font-weight: 700; color: var(--lp2-orange-d); white-space: nowrap; }

/* ============================================================
   8. Sticky-CTA am Handy
   ============================================================ */

.lpsw-mcta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid var(--lp2-line);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
  align-items: center;
  box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, 0.3);
}
.lpsw-mcta__text { flex: 1; font-size: 12.5px; color: var(--lp2-muted); line-height: 1.3; }
.lpsw-mcta__text b { display: block; color: var(--lp2-ink); font-size: 14px; }
.lpsw-mcta__btn { min-height: 42px; padding: 0 16px; font-size: 13.5px; }

/* ============================================================
   9. Testbericht-Kopf und Ratgeber — Angleichung
   ------------------------------------------------------------
   Die Testberichte und der Ratgeber-Hero behalten ihr Markup. Hier nur die
   Stellen, an denen die Seiten sichtbar aus einer anderen Zeit wirkten:
   Lizenz-Badge und Noten-Balken bekommen dieselbe Optik wie die Karte.
   ============================================================ */

/* Ratgeber- und Testbericht-Hero behalten Stadionfoto und Verlauf aus
   main.css (Entscheidung Niki 08.10.2026). Hier nur Lesbarkeit der Byline
   und die neue Eckdaten-Leiste. */
body.lpsw-theme .lpsw-tb-hero__byline { color: #9fb0c9; }
body.lpsw-theme .lpsw-tb-hero__byline a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
body.lpsw-theme .lpsw-tb-hero__sub { color: #cdd8ea; }

.lpsw-tb-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.lpsw-tb-hero__facts > div { margin: 0; min-width: 0; }
.lpsw-tb-hero__facts dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9fb0c9;
  margin: 0 0 3px;
}
.lpsw-tb-hero__facts dd {
  margin: 0;
  font-family: var(--lp-font-headline);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
}
.lpsw-tb-hero__facts .lpsw-anbieter__lizenz { font-family: var(--lp-font-body); font-size: 12.5px; }
.lpsw-tb-hero__facts .lpsw-anbieter__lizenz--eu { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Bewertungsbalken im Testbericht: flache Farbe statt Verlauf, Schwellen
   wie auf der Karte. main.css setzt den Verlauf auf .lpsw-tb__rating-fill;
   diese Regeln stehen spaeter und haben dieselbe Spezifitaet (+1 Klasse). */
body.lpsw-theme .lpsw-tb__rating-fill { background: var(--lp-blau); }
body.lpsw-theme .lpsw-tb__rating-fill.is-hoch { background: var(--lp2-gruen); }
body.lpsw-theme .lpsw-tb__rating-fill.is-tief,
body.lpsw-theme .lpsw-tb__rating-fill.lpsw-bar--low { background: #d98a18; }
body.lpsw-theme .lpsw-tb__rating-fill.lpsw-bar--low:not(.is-tief) { background: var(--lp-blau); }

/* ============================================================
   10. Media Queries
   ============================================================ */

@media (max-width: 1024px) {
  .lpsw-hero2__grid { grid-template-columns: 1fr; gap: 32px; }
  .lpsw-hero2__zahlen { max-width: 520px; }

  /* Tablet: Hero + Redaktion nebeneinander, Entscheidung darunter in voller Breite. */
  body.lpsw-fullwidth .lpsw-anbieter,
  .lpsw-anbieter {
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-areas: "hero info" "cta cta" "details details";
  }
  .lpsw-anbieter__hero { border-bottom: 1px solid var(--lp2-line); }
  .lpsw-anbieter__details-inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lpsw-anbieter__rechnung { grid-column: 1 / -1; }
  .lpsw-anbieter__cta { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "kopf ." "noten btn" "noten link" "hinweis hinweis"; gap: 10px 22px; align-items: start; }
  .lpsw-anbieter__noten-kopf { grid-area: kopf; }
  .lpsw-anbieter__noten { grid-area: noten; }
  .lpsw-anbieter__cta .lpsw-btn2 { grid-area: btn; align-self: start; margin-top: 0; }
  body.lpsw-theme .lpsw-anbieter__cta-link { grid-area: link; }
  body.lpsw-theme .lpsw-anbieter__hinweis { grid-area: hinweis; margin: 0; }
}

@media (min-width: 1000px) {
  .lpsw-snippet--v2 { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .lpsw-sieger--v2 { position: sticky; top: 126px; }
  .lpsw-tools { position: sticky; top: 112px; z-index: 50; }
}

@media (max-width: 760px) {
  .lpsw-hero2__grid { padding-top: 40px; padding-bottom: 36px; }
  body.lpsw-theme .lpsw-hero2 h1 { max-width: none; }
  .lpsw-hero2__actions .lpsw-btn2 { flex: 1 1 100%; }
  .lpsw-hero2__trust { gap: 8px; }
  .lpsw-hero2__trust li { width: 100%; }
  .lpsw-hero2__zahlen { padding: 20px; }
  .lpsw-hero2__zahl { font-size: 32px; flex-basis: 58px; width: 58px; }

  .lpsw-jump { top: 56px; }
  .lpsw-v2 [id] { scroll-margin-top: 110px; }

  .lpsw-snippet-list--v2 { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .lpsw-sieger__aktionen { flex-wrap: wrap; }
  .lpsw-sieger__aktionen .lpsw-btn2 { flex: 1 1 100%; }

  .lpsw-tools { padding: 10px 12px; }
  .lpsw-tools__zeile--rechts { width: 100%; }
  .lpsw-tools__select { flex: 1; }

  /* Handy: die drei Zonen stapeln. Hero wird zur Kopfzeile (Logo, Rang,
     Ring), Redaktion und Entscheidung folgen in voller Breite. */
  body.lpsw-fullwidth .lpsw-anbieter,
  .lpsw-anbieter {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "info" "cta" "details";
    border-radius: 16px;
    margin-bottom: 14px;
  }
  .lpsw-anbieter__hero {
    border-right: 0;
    border-bottom: 1px solid var(--lp2-line);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "kopf kopf" "logo gesamt" "merkmale merkmale" "lizenz lizenz";
    gap: 10px 12px;
    align-items: center;
  }
  .lpsw-anbieter__kopf { grid-area: kopf; min-height: 0; }
  .lpsw-anbieter__logo { grid-area: logo; height: 84px; }
  .lpsw-anbieter__gesamt { grid-area: gesamt; gap: 10px; }
  .lpsw-anbieter__ring { width: 84px; height: 84px; }
  .lpsw-anbieter__score-big { font-size: 25px; }
  .lpsw-anbieter__platz strong { font-size: 15px; }
  .lpsw-anbieter__merkmale { grid-area: merkmale; }
  body.lpsw-theme .lpsw-anbieter__lizenz { grid-area: lizenz; justify-self: start; }
  .lpsw-anbieter__info { padding: 16px; gap: 10px; }
  body.lpsw-theme .lpsw-anbieter__name { font-size: 24px; }
  body.lpsw-theme .lpsw-anbieter__slogan { font-size: 14.5px; }
  .lpsw-anbieter__mess-grid { gap: 6px; }
  .lpsw-anbieter__kennzahl { padding: 8px 10px; }
  .lpsw-anbieter__kennzahl b { font-size: 14px; }
  .lpsw-anbieter__details-summary { padding: 11px 16px; }
  .lpsw-anbieter__details-inhalt { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px 16px; }
  .lpsw-anbieter__pro, .lpsw-anbieter__contra, .lpsw-anbieter__rechnung { padding: 12px 14px; font-size: 13px; }
  .lpsw-anbieter__cta { display: flex; align-items: stretch; padding: 16px; gap: 10px; }
  .lpsw-anbieter__cta .lpsw-btn2 { margin-top: 4px; }
  body.lpsw-theme .lpsw-anbieter__hinweis { margin-top: 4px; }
  .lpsw-anbieter__noten { gap: 7px; }
  .lpsw-anbieter__note { grid-template-columns: 80px minmax(0, 1fr) 28px; }
  .lpsw-anbieter__bonus-value { font-size: 20px; }
  .lpsw-anbieter__cta .lpsw-btn2 { width: 100%; }

  .lpsw-mcta { display: flex; }
  /* Platz fuer die Sticky-Leiste, damit der Footer nicht darunter verschwindet. */
  body.lpsw-theme .lpsw-main--vergleich { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .lpsw-btn2, .lpsw-anbieter, .lpsw-tools__chip { transition: none; }
}

/* Screenreader-Text: GeneratePress liefert die Klasse, main.css nicht. Hier
   als Sicherung, falls das Elternthema sie einmal nicht mehr ausliefert. */
.lpsw-v2 .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Lesespalte fuer den Fliesstext des Hubs (Wunsch Tom, 09.10.2026)
   Der Content-Bereich unter der Anbieterliste lief ueber die volle
   Containerbreite (1300px = rund 180 Zeichen je Zeile). Fuer Lesetext
   ist das zu breit. Jetzt 1040px, zentriert — entspricht rund 10 %
   Rand links und rechts gegenueber dem Hero/Anbieter-Raster. Hero,
   Sprungleiste, Anbieterliste und Tabelle bleiben auf 1300px.
   --------------------------------------------------------------- */
.lpsw-v2 .lpsw-content .lpsw-container { max-width: 1040px; }
.lpsw-v2 .lpsw-content p,
.lpsw-v2 .lpsw-content li { line-height: 1.7; }