/**
 * Testsiegel-Badge (AP104 Track A)
 *
 * Portierung von test-seal-badge.component.scss (Angebotsseite V2, abgenommener Stand).
 * Die SCSS-Quelle war bereits flach (keine Variablen/Mixins/Verschachtelung). Das Siegel
 * selbst (.test-seal*) ist uebernommen, geaendert wurde dort nur `:host` →
 * `.testsiegel-badge-wrap`. Klassennamen bewusst identisch, damit Aenderungen zwischen
 * Angular und public-web uebertragbar bleiben.
 *
 * BEWUSST ABWEICHEND von der Angular-Quelle — jede Stelle ist unten einzeln begruendet:
 *   - Tooltip mittig statt rechtsbuendig
 *   - groessere Sterne in der compact-Variante
 *   - .test-seal__value-block mit fester Mindesthoehe (in der Quelle nicht vorhanden)
 *   - der komplette .tariff-card-slot-Block, den es auf der Angebotsseite nicht gibt
 */

.testsiegel-badge-wrap { position: relative; display: inline-block; }

/* Platzierung auf der Tarifkachel — uebernommen von der Angebotsseite (offer-v2-tarif-card):
   Das Siegel klebt oben rechts auf der Kartenecke und ragt leicht darueber hinaus. Es liegt
   deshalb AUSSERHALB der Karte (die hat overflow:hidden und wuerde Siegel + Tooltip
   abschneiden); der Slot spannt den Bezugsrahmen auf. */
/* min-width:0 ist Pflicht: Als Grid-Element haette der Slot sonst die Mindestbreite seines
   Inhalts, und die Karte koennte nicht schmaler werden als ihr breitester Inhalt. */
.tariff-card-slot { position: relative; display: flex; min-width: 0; }

/* Chip-Tooltips duerfen ueber den Kartenrand hinausragen.
   `.zg2-page .tariff-card` traegt overflow:hidden — noetig, damit das Badge als sauberer
   Top-Deckel an den runden Ecken abgeschnitten wird (zielgruppen.css). Dasselbe Clipping
   schneidet aber jeden Chip-Tooltip ab, der breiter ist als die Karte.
   Loesung ohne das Badge-Verhalten anzutasten: Das Clipping wandert vom Karten-Element auf
   den Badge selbst — er bekommt dieselben runden Ecken und beschneidet sich damit allein.
   Gilt nur fuer Karten in einem Slot (also die Empfehlungs-Kacheln), alles andere bleibt
   unveraendert. */
.tariff-card-slot .tariff-card { overflow: visible; }
.tariff-card-slot .tariff-card__badge { overflow: hidden; }
.tariff-card-slot > .tariff-card { flex: 1; min-width: 0; }
/* Mobil sitzt das Siegel tiefer als auf dem Desktop: Die Karten stehen untereinander,
   ein weit herausragendes Siegel wuerde in die Karte darueber ragen. */
.tariff-card-slot__seals {
  position: absolute; top: -6px; right: -8px; z-index: 5;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
  pointer-events: none;
}

/* Das Label rueckt nur so weit ein, wie es muss.
   Ein fester Freiraum rechts war falsch: Der Text ist viel schmaler als die Leiste, ein
   kurzes Label wie "Maximaler Schutz" wurde dadurch weit vom Siegel weggeschoben, obwohl
   es nie kollidiert haette.
   Loesung: zwei Platzhalter links und rechts vom Text. Beide gleich breit, also steht der
   Text mittig in der Leiste, solange er passt. Wird es eng, schrumpft NUR der linke — der
   rechte bleibt starr und haelt das Siegel frei. Der Text wandert damit exakt so weit nach
   links, wie noetig, und keinen Pixel weiter.
   Breite des rechten Platzhalters = was das Siegel vom Karteninhalt verdeckt: 110px bei
   Zoom 0,8 = 88px, davon 8px ausserhalb der Karte -> 80px, plus 12px Luft. */
.tariff-card-slot--with-seals .tariff-card__badge {
  display: flex; align-items: center; justify-content: center;
  padding-left: 0; padding-right: 0;
  /* Ohne nowrap schrumpft der Text im Flex-Layout mit und bricht um: Der Textblock ist
     standardmaessig schrumpfbar, und "Preis-Leistungs-Tipp" darf an seinen Bindestrichen
     umbrechen — er gibt also nach, statt den linken Platzhalter schrumpfen zu lassen.
     Mit nowrap ist seine Mindestbreite die volle Textbreite; nachgeben kann dann nur noch
     der linke Platzhalter, und genau das ist gewollt. */
  white-space: nowrap;
}
.tariff-card-slot--with-seals .tariff-card__badge::before,
.tariff-card-slot--with-seals .tariff-card__badge::after { content: ''; width: 92px; }
/* min-width:0 am linken Platzhalter ist der entscheidende Teil: Ohne ihn zaehlt seine
   Breite in die Mindestbreite der Leiste — und damit der ganzen Karte. Die Karten mit
   Siegel wurden dadurch breiter als die ohne, und mobil passten sie nicht mehr in den
   Bildschirm. Mit min-width:0 darf er bis auf 0 schrumpfen und erzeugt keinen Druck. */
.tariff-card-slot--with-seals .tariff-card__badge::before { flex: 0 1 auto; min-width: 0; }
.tariff-card-slot--with-seals .tariff-card__badge::after { flex: 0 0 auto; }

/* Das Logo liegt tiefer und wird nur vom unteren Teil des Siegels erreicht — hier reicht
   weniger. Kein Flex-Layout: Der Wrapper zentriert bewusst ueber line-height, weil
   viewBox-only-SVGs in einem Flex-Container auf Breite 0 kollabieren (s. tariff-card.css). */
.tariff-card-slot--with-seals .tariff-card__logo-wrapper { padding-right: 40px; }

/* Das Einruecken allein reicht nicht fuer breite Wortmarken. Das Logo steht mittig im
   eingerueckten Kasten — je breiter es ist, desto weiter ragt seine rechte Kante wieder
   nach rechts. Gemessen bei 48px Logo-Hoehe: uniVersa 229px, Concordia 258px, Nuernberger
   201px. Bei 3 Spalten (Kartenbreite 376px, Inhalt 316px) beginnt das Siegel 248px vom
   linken Inhaltsrand; die uniVersa-Wortmarke endet bei 255px und lag damit 7px darunter.
   Deckel bei 195px: die rechte Kante liegt dann bei 238px (Desktop) bzw. 227px (mobil) —
   in beiden Faellen mit Luft unter dem Siegel hindurch. Schmalere Logos bleiben
   unveraendert, der Deckel greift nur bei Wortmarken ueber 195px. */
.tariff-card-slot--with-seals .tariff-card__logo { max-width: 195px; }

/* In einer ausgerichteten Kartenreihe wuerde sonst dieselbe Marke zweimal in
   unterschiedlicher Groesse stehen — die Karte mit Siegel gedeckelt, die daneben nicht
   (Senioren-Seite: uniVersa Top 75 ohne Siegel neben uniVersa Top 90 mit Siegel).
   Deshalb gilt der Deckel fuer die ganze Reihe, sobald eine Karte darin ein Siegel traegt.
   Ohne :has()-Unterstuetzung faellt nur die Groessen-Harmonie weg, nicht der Schutz
   vor der Ueberdeckung — den traegt die Regel darueber. */
.tariff-cards--aligned:has(.tariff-card-slot--with-seals) .tariff-card__logo { max-width: 195px; }
.tariff-card-slot__seals > * { pointer-events: auto; }

/* Die Karte hebt sich beim Hover um 2px (tariff-card.css). Weil das Siegel jetzt AUSSERHALB
   der Karte liegt, wuerde es sonst stehenbleiben und die Karte unter ihm wegrutschen. Der Slot
   umschliesst beide, deshalb haengt die Bewegung hier am Slot-Hover — gleiche Distanz, gleiche
   Dauer wie die Karte, damit sie sich als ein Element bewegen. */
/* NUR auf Geraeten mit echtem Hover. Auf Touch-Geraeten bleibt ein :hover nach dem Tippen
   "kleben" — und ein transformierter Vorfahre macht aus `position: fixed` beim Tooltip eine
   Positionierung relativ zu DIESEM Element. Der Tooltip wurde dadurch auf die Breite des
   Siegel-Containers zusammengequetscht (gemessen: 64px) und sprang an die falsche Stelle. */
@media (hover: hover) and (pointer: fine) {
  .tariff-card-slot__seals { transition: transform 0.2s ease; }
  .tariff-card-slot:hover .tariff-card-slot__seals { transform: translateY(-2px); }
  /* Umgekehrt genauso: Wer das Siegel anfaehrt, hebt auch die Karte — sonst wandert das Siegel
     allein. Gilt nur, wo ein Slot existiert, die Karte selbst bleibt unveraendert. */
  .tariff-card-slot:hover > .tariff-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}
/* Zwei Siegel untereinander statt nebeneinander — spart Breite, damit sie auf schmalen
   Screens Logo und Tarifnamen nicht verdecken. */
.tariff-card-slot__seals--stacked { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; }

/* Desktop: Siegel sitzt weiter aussen auf der Kartenecke und darf etwas groesser sein. */
@media (min-width: 768px) {
  .tariff-card-slot__seals { top: -20px; right: -6px; }
  .tariff-card-slot__seals .test-seal--dense { zoom: 0.95; }

  /* Platz fuer das Siegel schaffen, statt es ueber Label und Logo zu legen: Beide sind
     zentriert, ein rechtsseitiges Padding schiebt ihren Inhalt nach links. Das wirkt fuer
     jede Logo-Breite gleich — kein fester Versatz, der bei langen Logos wieder kollidiert. */
  /* Desktop-Siegel ist groesser (Zoom 0,95 = 104px) und ragt 6px hinaus -> 98px verdeckt,
     plus dieselben 12px Luft. */
  .tariff-card-slot--with-seals .tariff-card__badge::before,
  .tariff-card-slot--with-seals .tariff-card__badge::after { width: 110px; }
  .tariff-card-slot--with-seals .tariff-card__logo-wrapper { padding-right: 35px; }

  /* Das Siegel reicht auf dem Desktop bis in die Zeile des Tarifnamens. Statt den Namen
     seitlich zu quetschen, ruecken wir ihn nach unten — er behaelt die volle Breite. */
  .tariff-card-slot--with-seals .tariff-card__title { margin-top: 14px; }
}

.test-seal, .test-seal * { font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
.test-seal {
  width: 210px; background: #fff; border: 2px solid #d15a44; border-radius: 8px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .13); text-align: center; padding-bottom: 15px; cursor: pointer;
}
.test-seal__top {
  position: relative; background: #c0392b; color: #fff; margin: -2px -2px 0;
  border-radius: 6px 6px 0 0; padding: 9px 8px 11px;
}
.test-seal__banner-inner { transform: translateY(5px); }
.test-seal__banner-word { font-size: 20px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
/* Kurze Banner-Woerter (Gut/Sehr gut/Exzellent/Testsieger) groesser fuer Lesbarkeit —
   „Hervorragend" bleibt auf Basisgroesse, es ist am Platz-Limit des Banners. */
.test-seal__banner-word--roomy { font-size: 22px; }
.test-seal__stars { color: #f0c94a; font-size: 13px; letter-spacing: 4px; margin-top: 5px; line-height: 1; }
/* bottom leicht angehoben (Banner um 2px überlappt, rot-auf-rot = unsichtbar), damit bei
   krummen Zoomstufen kein weißer Sub-Pixel-Spalt zwischen Banner und Dreieck aufblitzt. */
.test-seal__top::after {
  content: ''; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 0; height: 0; border-style: solid; border-width: 15px 105px 0 105px;
  border-color: #c0392b transparent transparent transparent;
}
/* Drei-Zonen-Aufbau: Banner oben und Fundstelle unten sitzen fix, der Wert dazwischen
   zentriert sich im verbleibenden Platz. Dadurch stehen Institutsname und Ausgabe bei allen
   Faellen auf derselben Hoehe, egal ob das Siegel eine Noten-Zeile oder ein Wort unter dem
   Wert zeigt. */
.test-seal { display: flex; flex-direction: column; }
.test-seal__body { padding: 26px 13px 0; flex: 1; display: flex; flex-direction: column; }
.test-seal__body--win { padding-top: 26px; }
/* flex:1 auf dem Wert-Block schiebt die Fundstelle von selbst nach unten — kein margin-top:auto
   noetig, das wuerde von den spaeteren Abstandsregeln ohnehin ueberschrieben. */
.test-seal__value-block { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.test-seal__note-lbl { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .08em; }
.test-seal__num { font-size: 50px; font-weight: 900; color: #178a4a; line-height: 1; -webkit-text-stroke: 0.7px #178a4a; }
.test-seal__sub-word { font-size: 24px; font-weight: 800; color: #178a4a; margin-top: 2px; text-transform: uppercase; }
/* AP104-Live-Check: Label 20 % kleiner, Institutsname 20 % groesser — die Institution
   (Stiftung Warentest/Handelsblatt) ist die Kernaussage, nicht das "getestet von". */
.test-seal__mini { font-size: 8px; color: #999; text-transform: uppercase; letter-spacing: .06em; }
.test-seal__tarif-name { font-size: 16px; font-weight: 800; color: #111; line-height: 1.15; margin-top: 11px; }
.test-seal__anb { font-size: 12.5px; font-weight: 700; color: #333; }
.test-seal__attrib { margin-top: 11px; padding-top: 10px; border-top: 1.5px dashed #cfcfcf; }
.test-seal__inst { font-size: 19px; font-weight: 700; color: #c0392b; line-height: 1.1; margin-top: 2px; }
.test-seal__source { font-size: 10px; color: #c0392b; margin-top: 3px; }
.test-seal__official { max-width: 210px; height: auto; cursor: pointer; }

/* Gedämpft (Design-Spec §3.5): kein Gold, gedeckter Banner, Note neutral */
.test-seal--damped { border-color: #b8bcc2; }
.test-seal--damped .test-seal__top { background: #8a8f98; }
.test-seal--damped .test-seal__top::after { border-color: #8a8f98 transparent transparent transparent; }
.test-seal--damped .test-seal__num { color: #333; -webkit-text-stroke: 0; }
.test-seal--damped .test-seal__inst,
.test-seal--damped .test-seal__source { color: #555; }

/* Tooltip */
.test-seal-tooltip__backdrop { position: fixed; inset: 0; z-index: 40; }
/* Abweichung zur Angebotsseite (dort rechtsbuendig): Auf der Tarifkachel ist das Siegel klein
   und sitzt mitten ueber der Karte — ein 300px breiter Tooltip haengt rechtsbuendig weit nach
   links weg. Deshalb hier mittig unter dem Siegel. */
.test-seal-tooltip {
  position: absolute; top: calc(100% + 10px); left: 50%; right: auto; transform: translateX(-50%);
  width: 300px; max-width: 84vw; z-index: 41;
  background: #fff; border-radius: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); overflow: hidden; text-align: left;
}
.test-seal-tooltip[hidden], .test-seal-tooltip__backdrop[hidden] { display: none; }
.test-seal-tooltip__head { background: #c0392b; color: #fff; padding: 11px 15px; display: flex; align-items: center; gap: 9px; }
.test-seal-tooltip__ic {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .2);
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}
.test-seal-tooltip__title { font-size: 14px; font-weight: 800; line-height: 1.1; }
.test-seal-tooltip__sub { font-size: 10.5px; opacity: .9; }
/* Tap-Ziel auf 44px gebracht (WCAG-Mindestmass) — als reines 16px-Zeichen war das X mobil
   kaum zu treffen. Negative Margins halten die Kopfzeile optisch unveraendert. */
.test-seal-tooltip__close {
  margin-left: auto; margin-top: -11px; margin-bottom: -11px; margin-right: -11px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; line-height: 1;
}
.test-seal-tooltip__body { padding: 14px 15px 4px; }
.test-seal-tooltip__body p { font-size: 13px; color: #333; line-height: 1.55; margin: 0 0 12px; }
.test-seal-tooltip__b { font-weight: 700; color: #111; }
.test-seal-tooltip__scale-title { font-size: 10.5px; color: #999; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.test-seal-tooltip__scale { list-style: none; margin: 0 0 12px; padding: 0; }
.test-seal-tooltip__scale li { font-size: 12.5px; color: #444; line-height: 1.9; display: flex; gap: 8px; }
.test-seal-tooltip__scale li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c9a227; margin-top: 8px; flex-shrink: 0; }
.test-seal-tooltip__foot { border-top: 1px solid #eee; padding: 9px 15px 13px; }
.test-seal-tooltip__src-lbl { font-size: 9.5px; color: #999; text-transform: uppercase; letter-spacing: .05em; }
.test-seal-tooltip__src-val { font-size: 12.5px; font-weight: 700; color: #333; margin-top: 2px; }

/* Kompakt (klein neben Logo/Tarifname, ~halbe Größe; Tarif/Anbieter-Block entfällt, da direkt
   daneben schon Logo + Tarifname stehen). Fundstelle (Institut + Ausgabe) bleibt sichtbar. */
/*
 * HOEHE: eine feste Zeile statt einer festen Gesamthoehe (geaendert 2026-08-20).
 *
 * Vorher stand hier `min-height: 155px` — die Hoehe des hoechsten Falls, eines
 * Testsieger-Siegels mit dem Notenwort UNTER der Zahl. Jedes andere Siegel braucht rund
 * 144px und wurde auf die 155 aufgeblasen; die Differenz hing als Leerraum unten drin und
 * liess die Siegel zu hoch wirken (Befund des Auftraggebers auf der Senioren-Seite).
 *
 * Dasselbe Muster wurde im Mail-Siegel gefunden und behoben: Branch
 * feat/AP-77-ap77l-messaging-verbesserungen, Commit 201a73229 — dort stand die Gesamthoehe
 * mit 182 von Hand in der Datei, waehrend die Summe der Teile 177 ergab. Die Loesung dort
 * ist die Vorlage fuer diese hier: nicht das Ganze auf ein Maximum zwingen, sondern der
 * WERT-ZEILE eine feste Hoehe geben und ihren Inhalt darin zentrieren. Dann endet sie
 * immer an derselben Stelle, die Fundstelle darunter beginnt zwangslaeufig gleich hoch,
 * und es entsteht kein Leerraum.
 *
 * Die 43px sind aus den Schriftgroessen der compact-Variante abgeleitet, nicht gemessen:
 * hoechster Fall = Testsieger, Zahl 27px (line-height 1) + Notenwort 12px x 1,2 = 14,4
 * + 1px Abstand = 42,4. Die anderen Faelle sind niedriger und werden zentriert:
 * "NOTE:" 7px x 1,2 = 8,4 + 27 = 35,4; Wort-Wert (Handelsblatt) 22px = 22.
 * Aendert sich eine dieser Schriftgroessen, muss die 43 mitwandern.
 *
 * `min-height` statt `height`: Waechst ein Inhalt wider Erwarten, wird er nicht
 * abgeschnitten, sondern das Siegel wird hoeher — sichtbar statt still kaputt.
 */
.test-seal--compact { width: 110px; border-width: 1px; border-radius: 6px; padding-bottom: 7px; box-shadow: 0 3px 9px rgba(0, 0, 0, .12); }
.test-seal--compact .test-seal__value-block { min-height: 43px; flex: 0 0 auto; }
.test-seal--compact .test-seal__top { margin: -1px -1px 0; padding: 5px 4px 6px; border-radius: 5px 5px 0 0; }
.test-seal--compact .test-seal__banner-inner { transform: translateY(3px); }
.test-seal--compact .test-seal__banner-word { font-size: 9.5px; letter-spacing: .01em; }
.test-seal--compact .test-seal__banner-word--roomy { font-size: 11px; }
/* Sterne groesser als im Angular-Original (8px): auf der Tarifkachel sind sie das Signal,
   das aus der Distanz noch wirkt. */
.test-seal--compact .test-seal__stars { font-size: 10.5px; letter-spacing: 2.5px; margin-top: 2px; }
/* Dreieck-Breite = halbe Siegelbreite (110px / 2), sonst reisst die Banner-Spitze ab. */
.test-seal--compact .test-seal__top::after { bottom: -7px; border-width: 8px 55px 0 55px; }
/* Gleiches Polster in beiden Faellen — der Hoehenausgleich passiert jetzt ueber die
   Zentrierung des Wert-Blocks, nicht mehr ueber unterschiedliche Abstaende. */
.test-seal--compact .test-seal__body { padding: 12px 2px 0; }
.test-seal--compact .test-seal__body--win { padding-top: 12px; }
.test-seal--compact .test-seal__note-lbl { font-size: 7px; letter-spacing: .05em; }
.test-seal--compact .test-seal__num { font-size: 27px; -webkit-text-stroke: 0.4px #178a4a; }
.test-seal--compact.test-seal--damped .test-seal__num { -webkit-text-stroke: 0; }
.test-seal--compact .test-seal__sub-word { font-size: 12px; margin-top: 1px; }
.test-seal--compact .test-seal__tarif-block { display: none; }
.test-seal--compact .test-seal__attrib { margin-top: 6px; padding-top: 5px; }
.test-seal--compact .test-seal__mini { font-size: 8px; }
.test-seal--compact .test-seal__inst { font-size: 11.5px; margin-top: 1px; }
.test-seal--compact .test-seal__source { font-size: 7.5px; margin-top: 1px; }

/* Wort-Wert (z.B. Handelsblatt „sehr gut"): der Riesen-Wert ist für kurze Noten gedacht →
   für ein Wort kleiner + einzeilig, damit es nicht umbricht. */
.test-seal__num--word { font-size: 20px; white-space: nowrap; }
.test-seal--compact .test-seal__num--word { font-size: 22px; -webkit-text-stroke: 0; }

/* Dichte Variante: mehrere Siegel auf einer Karte zusätzlich verkleinern. */
.test-seal--dense { zoom: 0.8; }

/* Mobil: Tooltip als fixes, fast bildschirmbreites Overlay (statt aus dem Rand herauslaufend). */
@media (max-width: 640px) {
  .test-seal-tooltip {
    position: fixed; top: 50%; left: 12px; right: 12px; transform: translateY(-50%);
    width: auto; max-width: none;
  }
}