/* ============================================================
   PLATTFORM-KOMPONENTEN
   Zeitleiste (.pv-timeline) und Gegenueberstellung (.pv-compare).
   Bewusst eine eigene Datei: Beides braucht nur eine Handvoll Seiten,
   und style.css wird auf JEDER Seite geladen. Bedingt eingebunden in
   seo/thema.html und seo/lexikon_eintrag.html ueber die Marker-Klassen.
   Praefix "pv-" = Plattform-Vergleich.
   ============================================================ */

/* ---------- Gemeinsame Bausteine ---------- */

.pv-stand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-light);
    font-size: 0.82rem;
    line-height: 1.3;
}

.pv-stand::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}

/* ---------- Zwei Wege ("Tueren") ----------
   Steht weit oben. Wer nach der Marke sucht, muss die Plattform SOFORT
   erreichen koennen - ein Link, der erst in der Quellenliste auftaucht, ist
   fuer diesen Besucher kein Link. Daneben, gleichrangig, der eigene Weg. */

.pv-doors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}

.pv-door {
    display: block;
    padding: 1.15rem 1.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pv-door:hover,
.pv-door:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary);
}

.pv-door-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.3rem;
}

.pv-door-titel {
    display: block;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
}

/* Pfeil sitzt am Text, nicht am Kartenrand - so bleibt der Bezug erhalten,
   auch wenn die Karte breit wird. */
.pv-door-titel::after {
    content: " \2192";
    display: inline-block;
    transition: transform 0.2s ease;
}

.pv-door:hover .pv-door-titel::after {
    transform: translateX(3px);
}

.pv-door-sub {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.93rem;
    color: var(--text-light);
    line-height: 1.5;
}

.pv-door-eigen {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.07), var(--bg-card) 70%);
    border-color: rgba(37, 99, 235, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .pv-door,
    .pv-door-titel::after {
        transition: none;
    }

    .pv-door:hover {
        transform: none;
    }

    .pv-door:hover .pv-door-titel::after {
        transform: none;
    }
}

/* ---------- Store-Verweise ----------
   BEWUSST ohne die offiziellen Badges von Apple und Google. Die sind
   Markenzeichen mit eigenen Gestaltungsvorgaben, und hier verweist ein
   Dritter auf fremde Software - eigene, klar beschriftete Schaltflaechen
   sind rechtlich unbedenklich und passen zum uebrigen Seitenbild. */

.pv-stores-label {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: #475569;
}

.pv-stores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
    margin: 1.1rem 0 1.5rem;
}

.pv-store {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pv-store:hover,
.pv-store:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary);
}

.pv-store svg {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    fill: var(--text);
}

.pv-store-text {
    display: block;
    min-width: 0;
}

.pv-store-klein {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}

.pv-store-gross {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
    .pv-store {
        transition: none;
    }

    .pv-store:hover {
        transform: none;
    }
}

/* ---------- Zeitleiste ---------- */

.pv-timeline {
    margin: 1.75rem 0 2rem;
}

.pv-timeline ol {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Die Linie laeuft nur zwischen erstem und letztem Punkt, nicht darueber
   hinaus - sonst haengt sie oben und unten in der Luft. */
.pv-timeline ol::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.85rem;
    bottom: 0.85rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary), var(--border) 65%);
    border-radius: 2px;
}

.pv-item {
    position: relative;
    padding: 0 0 1.1rem 2.25rem;
}

.pv-item:last-child {
    padding-bottom: 0;
}

.pv-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    box-sizing: border-box;
    z-index: 1;
}

.pv-item-neu::before {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.pv-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pv-item-neu .pv-card {
    border-color: rgba(37, 99, 235, 0.35);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.05), var(--bg-card) 60%);
}

.pv-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.pv-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}

.pv-datum {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-light);
}

.pv-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* h3 in der Karte: kleiner als die normale H3 der Seite, sonst erschlaegt
   die Zeitleiste die Kapitelueberschriften darueber. */
.pv-timeline .pv-titel {
    font-size: 1.02rem;
    margin: 0 0 0.3rem;
    color: var(--text);
}

.pv-card p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ---------- Gegenueberstellung ---------- */

/* Der Umschlag scrollt, nicht die Seite. Auf dem Telefon bleiben die beiden
   Spalten damit NEBENEINANDER - gestapelt waere es kein Vergleich mehr,
   weil man die zwei Werte nie gleichzeitig sieht. Die Merkmalsspalte bleibt
   beim Wischen stehen, sonst weiss man nach zwei Zentimetern nicht mehr,
   welche Zeile man liest. */
.pv-compare-wrap {
    margin: 1.75rem 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.pv-compare {
    min-width: 33rem;   /* erzwingt das Nebeneinander statt Quetschen */
}

.pv-zeile {
    display: grid;
    grid-template-columns: 8.5rem minmax(11rem, 1fr) minmax(11rem, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
}

.pv-zeile:first-child {
    border-top: 0;
}

.pv-kopf {
    background: linear-gradient(180deg, #f1f5f9, var(--bg-card));
}

/* Die Kopfzelle der fixierten Spalte braucht denselben deckenden Ton wie die
   Kopfzeile, sonst blitzt beim Wischen der Verlauf durch. */
.pv-kopf .pv-merkmal {
    background-color: #f1f5f9;
    background-image: none;
}

.pv-wisch-hinweis {
    margin: 0 0 1.75rem;
    font-size: 0.85rem;
    color: var(--text-light);
    display: none;
}

.pv-wisch-hinweis::before {
    content: "\2194\FE0E";
    margin-right: 0.35rem;
}

.pv-kopf .pv-feld {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.pv-merkmal,
.pv-feld {
    padding: 0.8rem 1rem;
    min-width: 0;
    /* Deutsche Komposita sprengen sonst die Spalte: "geraeteuebergreifend"
       hat 18 Zeichen und passt in keine 7,5rem. Die Trennung greift, weil
       base.html lang="de" setzt; break-word ist der Notnagel fuer den Fall,
       dass ein Wort auch getrennt nicht passt. Beides gehoert hierher und
       nicht an die einzelne Zeile - die naechste lange Beschriftung kommt
       bestimmt. */
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Bleibt beim seitlichen Wischen stehen. Der Hintergrund MUSS deckend sein -
   eine halbtransparente Flaeche laesst die durchlaufenden Werte darunter
   durchscheinen. Deshalb der Verlauf auf die deckende Kartenfarbe statt
   rgba() allein. */
.pv-merkmal {
    position: sticky;
    left: 0;
    z-index: 2;
    font-weight: 600;
    color: var(--text);
    background-color: var(--bg-card);
    background-image: linear-gradient(rgba(148, 163, 184, 0.09), rgba(148, 163, 184, 0.09));
    border-right: 1px solid var(--border);
    /* Gleiche Schriftgroesse und Zeilenhoehe wie die Wertspalten, sonst
       sitzt das Merkmal eine Winzigkeit neben seiner eigenen Zeile. */
    font-size: 0.95rem;
    line-height: 1.45;
    /* KEIN Flex. Sobald hier zusaetzlicher Inline-Inhalt landet - ein
       Autolink zum Beispiel - wuerde Flex daraus zwei Elemente
       nebeneinander machen statt umbrechenden Text. Genau das hat die Zeile
       "Morsen lernen" zerlegt. */
    display: block;
}

/* Oben ausgerichtet, nicht mittig: Bei zweizeiligen Werten stuende das
   Haekchen sonst zwischen den Zeilen statt neben dem ersten Wort. */
.pv-feld {
    border-left: 1px solid var(--border);
    /* Nicht --text-light: das ergibt auf den getoenten Spalten nur 4,47:1
       bzw. 4,43:1 und liegt damit UNTER der WCAG-Grenze von 4,5 (gemessen
       mit app/colors.py). --text bringt 13,75:1. In einer Tabelle, die man
       Zeile fuer Zeile vergleicht, ist blasser Text ohnehin die falsche
       Sparsamkeit. */
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

/* Der Wert steckt in einem eigenen Span, damit die Zelle aus genau zwei
   Flex-Elementen besteht: Plaettchen und Text. Ohne den Span wuerde jeder
   zusaetzliche Inline-Inhalt im Text zu einem weiteren Element und die
   Zeile liefe auseinander. */
.pv-wert {
    min-width: 0;
}

/* Die eigene Spalte bekommt eine ruhige Tonung zur Orientierung - nicht
   mehr. Ein Vergleich, dessen Gestaltung schon das Ergebnis vorwegnimmt,
   liest sich als Werbung und verliert genau die Glaubwuerdigkeit, wegen
   der jemand eine Vergleichsseite ueberhaupt aufruft. */
.pv-feld-eigen {
    background: rgba(37, 99, 235, 0.045);
}

.pv-name {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.pv-traeger {
    display: block;
    font-size: 0.8rem;
    /* Dunkler als --text-light, aber leichter als die Werte darunter:
       7,12:1 auf der getoenten Spalte, bleibt also auch als Kleinschrift
       ueber der Grenze. */
    color: #475569;
    margin-top: 0.15rem;
}

.pv-ja,
.pv-nein {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    /* Mittet das Plaettchen in der ERSTEN Textzeile: (Zeilenhoehe 1,45 x
       0,95rem = 1,38rem, minus 1,15rem Plaettchen) / 2. */
    margin-top: 0.115rem;
}

.pv-ja {
    background: rgba(22, 163, 74, 0.13);
    color: var(--success);
}

.pv-nein {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-light);
}

/* ---------- Schmale Schirme ----------
   Die Spalten bleiben nebeneinander, der Umschlag scrollt. Frueher stapelte
   sich die Zeile hier untereinander - damit stand der Wert von 50ohm.de ueber
   dem von 12db und man konnte die beiden nie zugleich sehen. Genau das ist
   aber der Zweck eines Vergleichs. */
@media (max-width: 640px) {
    .pv-compare {
        min-width: 31rem;
    }

    .pv-zeile {
        grid-template-columns: 7.5rem minmax(10.5rem, 1fr) minmax(10.5rem, 1fr);
    }

    .pv-merkmal {
        font-size: 0.88rem;
        padding: 0.75rem 0.7rem;
    }

    .pv-feld {
        font-size: 0.88rem;
        padding: 0.75rem 0.7rem;
    }

    .pv-name {
        font-size: 0.98rem;
    }

    .pv-wisch-hinweis {
        display: block;
    }

    .pv-item {
        padding-left: 1.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pv-card {
        transition: none;
    }

    .pv-card:hover {
        transform: none;
    }
}