/*
 * Barrierefreiheits-Plugin: Landing-Page (/plugin), Plugin-Dashboard (/konto/plugin)
 * und der „Durch Plugin lösen“-Vermerk im Prüfbericht.
 */

/* ---------- Hero-CTA ---------- */
.plugin-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-mittel);
    margin-top: var(--abstand-gross);
}
.plugin-hero__hinweis {
    margin-top: var(--abstand-mittel);
    color: var(--farbe-text-leise);
    font-size: 0.95rem;
}

/* ---------- Vorher / Nachher ---------- */
.score-vergleich {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--abstand-gross);
    margin: var(--abstand-gross) 0 var(--abstand-mittel);
}
.score-gauge {
    margin: 0;
    text-align: center;
    width: 200px;
    max-width: 45vw;
}
.score-gauge svg { width: 100%; height: auto; }
/* Kompakte, linksbündige Variante (z. B. Konto-Dashboard) – halbe Größe */
.score-vergleich--kompakt { justify-content: flex-start; gap: var(--abstand-mittel); margin: var(--abstand-mittel) 0; }
.score-vergleich--kompakt .score-gauge { width: 100px; max-width: 32vw; }
.score-vergleich--kompakt .score-gauge figcaption { font-size: 0.68rem; white-space: nowrap; }
.score-gauge__zahl { font-size: 42px; font-weight: 800; }
.score-gauge__einheit { font-size: 14px; fill: var(--farbe-text-leise); }
.score-gauge figcaption {
    margin-top: var(--abstand-klein);
    font-weight: 700;
    color: var(--farbe-text);
}
.score-vergleich__pfeil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--farbe-sekundaer);
}
.score-vergleich__plus {
    font-weight: 800;
    color: var(--farbe-erfolg);
    font-size: 1.1rem;
}
.score-vergleich__fuss {
    color: var(--farbe-text-leise);
    font-size: 0.95rem;
    text-align: center;
}

/* ---------- So funktioniert's ---------- */
.plugin-schritte {
    list-style: none;
    margin: var(--abstand-mittel) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--abstand-mittel);
}
.plugin-schritte li {
    display: flex;
    gap: var(--abstand-mittel);
    align-items: flex-start;
    background: var(--farbe-flaeche-gedaempft);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-mittel);
    padding: var(--abstand-mittel);
}
.plugin-schritte__nr {
    flex: 0 0 auto;
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--farbe-sekundaer);
    color: #fff; font-weight: 800;
}

/* ---------- Preise ---------- */
.preis-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--abstand-gross);
    margin-top: var(--abstand-mittel);
}
.preis-karte { position: relative; display: flex; flex-direction: column; }
.preis-karte--haupt { border: 2px solid var(--farbe-sekundaer); }
.preis-karte__tag {
    position: absolute; top: -0.75rem; left: var(--abstand-mittel);
    background: var(--farbe-sekundaer); color: #fff;
    font-size: 0.75rem; font-weight: 700; letter-spacing: .03em;
    padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
}
.preis-karte__tag--gruen { background: var(--farbe-erfolg); }
.preis-karte__titel { margin: 0.5rem 0 0; }
.preis-karte__preis { font-size: 2rem; font-weight: 800; color: var(--farbe-primaer); margin: 0.25rem 0 0.75rem; }
.preis-karte__preis span { font-size: 0.9rem; font-weight: 500; color: var(--farbe-text-leise); }
.preis-karte__liste { list-style: none; padding: 0; margin: 0 0 var(--abstand-mittel); flex: 1 1 auto; }
.preis-karte__liste li { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; }
.preis-karte__liste li::before {
    content: "✓"; position: absolute; left: 0; color: var(--farbe-erfolg); font-weight: 800;
}

/* ---------- Lösbar / nicht lösbar ---------- */
.pruefpunkt-liste { list-style: none; padding: 0; margin: var(--abstand-mittel) 0 0; }
.pruefpunkt-liste li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--farbe-rahmen);
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
}
.pruefpunkt-liste li:last-child { border-bottom: 0; }
.pruefpunkt-liste__haken { color: var(--farbe-erfolg); font-weight: 800; }
.pruefpunkt-liste__kreuz { color: var(--farbe-fehler); font-weight: 800; }
.pruefpunkt-liste__grund {
    flex-basis: 100%;
    color: var(--farbe-text-leise);
    font-size: 0.9rem;
    padding-left: 1.3rem;
}
.plugin-liste--ja { border-top: 4px solid var(--farbe-erfolg); }
.plugin-liste--nein { border-top: 4px solid var(--farbe-fehler); }
.plugin-liste__ehrlich {
    margin-top: var(--abstand-mittel);
    background: var(--farbe-warnung-flaeche);
    border-left: 4px solid var(--farbe-warnung);
    padding: var(--abstand-mittel);
    border-radius: var(--radius-klein);
}

/* ---------- FAQ ---------- */
.faq-eintrag {
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-mittel);
    margin-bottom: var(--abstand-klein);
    background: var(--farbe-flaeche);
}
.faq-eintrag > summary {
    cursor: pointer;
    padding: var(--abstand-mittel);
    font-weight: 700;
    color: var(--farbe-primaer);
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
}
.faq-eintrag > summary::-webkit-details-marker { display: none; }
.faq-eintrag > summary::after {
    content: "+"; position: absolute; right: var(--abstand-mittel); top: 50%;
    transform: translateY(-50%); font-size: 1.4rem; color: var(--farbe-sekundaer);
}
.faq-eintrag[open] > summary::after { content: "–"; }
.faq-eintrag > summary:focus-visible { outline: none; box-shadow: var(--fokus-ring); border-radius: var(--radius-mittel); }
.faq-eintrag__inhalt { padding: 0 var(--abstand-mittel) var(--abstand-mittel); }

/* ---------- Abschluss-CTA ---------- */
.plugin-cta { text-align: center; }
.plugin-cta .schaltflaeche { margin-top: var(--abstand-mittel); }

/* ---------- Plugin-Dashboard: Freischalt-Optionen ---------- */
.plugin-frei-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--abstand-gross);
    margin: var(--abstand-mittel) 0;
}
.plugin-frei-option {
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-mittel);
    padding: var(--abstand-mittel);
    background: var(--farbe-flaeche-gedaempft);
}
.plugin-frei-option__titel { margin: 0 0 0.25rem; }
.plugin-frei-option__preis { font-size: 1.5rem; font-weight: 800; color: var(--farbe-primaer); margin: 0 0 0.5rem; }
.plugin-frei-option__preis span { font-size: 0.85rem; font-weight: 500; color: var(--farbe-text-leise); }
.konto-plugin__mehr { margin-top: var(--abstand-gross); color: var(--farbe-text-leise); }

/* Kaufvoraussetzungen (verifizierte Domain-Mail + Firmendaten) */
.kauf-voraussetzungen { list-style: none; margin: 0 0 var(--abstand-mittel); padding: 0; font-size: 0.9rem; }
.kauf-voraussetzungen li { padding: 0.25rem 0; display: flex; align-items: baseline; gap: 0.5rem; }
.kauf-check { flex: 0 0 auto; width: 1.2rem; text-align: center; font-weight: 800; }
.kauf-check--ok { color: var(--farbe-erfolg); }
.kauf-check--offen { color: var(--farbe-text-leise); }
.kauf-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }

/* ---------- Bedienhilfen-Grafik + Live-Test ---------- */
.widget-funktionen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--abstand-mittel);
    margin: var(--abstand-mittel) 0;
}
.widget-funktion {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem;
    padding: var(--abstand-mittel) 0.6rem;
    background: var(--farbe-flaeche-gedaempft);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-mittel);
}
.widget-funktion__icon {
    width: 2.8rem; height: 2.8rem; border-radius: 50%;
    background: var(--farbe-sekundaer); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; font-weight: 700; line-height: 1;
}
.widget-funktion__name { font-weight: 700; color: var(--farbe-primaer); font-size: 0.95rem; }
.widget-funktion__text { font-size: 0.8rem; color: var(--farbe-text-leise); line-height: 1.3; }

.widget-test-cta {
    margin-top: var(--abstand-gross);
    padding: var(--abstand-gross);
    text-align: center;
    background: #e8f1fb;
    border: 1px solid #b9d6f2;
    border-radius: var(--radius-gross);
}
.widget-test-cta__titel { font-weight: 700; color: var(--farbe-primaer); margin: 0 0 var(--abstand-mittel); }
.widget-test-cta__hinweis { margin: 0.6rem 0 0; color: var(--farbe-text-leise); font-size: 0.9rem; min-height: 1.2em; }

/* ---------- Seite „Regionale Fachstellen“ ---------- */
.fachstelle-leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-mittel); }
.fachstelle-leistungen > li {
    padding: var(--abstand-mittel);
    background: var(--farbe-flaeche-gedaempft);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-mittel);
}
.fachstelle-leistungen h3 { margin: 0 0 0.35rem; color: var(--farbe-primaer); }
.fachstelle-leistungen p { margin: 0; }
.fachstelle-schritte { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; }
.fachstelle-gratis {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    margin: var(--abstand-mittel) 0 0;
    background: var(--farbe-erfolg-flaeche);
    border-left: 4px solid var(--farbe-erfolg);
    border-radius: var(--radius-klein);
    padding: var(--abstand-mittel);
}
.fachstelle-gratis__badge {
    background: var(--farbe-erfolg); color: #fff;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}

/* ---------- „empfohlen“-Kennzeichen (Einstellungen) ---------- */
.empfohlen-kennzeichen {
    display: inline-block; margin-left: 0.4rem; vertical-align: middle;
    background: var(--farbe-erfolg); color: #fff;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px;
}

/* ---------- „Von Menschenhand beheben lassen“ ---------- */
.plugin-menschenhand {
    margin-top: var(--abstand-mittel);
    padding-top: var(--abstand-mittel);
    border-top: 1px dashed var(--farbe-rahmen);
    text-align: center;
}
.plugin-menschenhand p { margin: 0 0 0.6rem; }
.plugin-menschenhand__zusatz { display: block; margin-top: 0.45rem; font-size: 0.85rem; color: var(--farbe-text-leise); }

/* ---------- „So funktioniert's“-Wapperl mit Hover-Lightbox ---------- */
.formularfeld__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.wapperl {
    position: relative;
    display: inline-flex; align-items: center;
    background: var(--farbe-sekundaer); color: #fff;
    font-size: 0.72rem; font-weight: 700; line-height: 1;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap; cursor: help;
}
.wapperl::before { content: "?"; margin-right: 0.35rem; font-weight: 800; opacity: 0.85; }
.wapperl:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.wapperl__lightbox {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
    /* auto statt fester Breite: .wapperl (der Badge) ist der Bezugsrahmen für diese
       absolute Positionierung und selbst sehr schmal – ohne min-width würde "auto"
       die Box auf Badge-Breite zusammenschrumpfen. max-width verhindert zusätzlich
       jeden Überlauf über den sichtbaren Bildschirmrand hinaus. */
    width: auto; min-width: 260px; max-width: min(320px, calc(100vw - 2rem));
    background: var(--farbe-flaeche); color: var(--farbe-text);
    border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-mittel);
    box-shadow: 0 12px 40px rgba(16, 42, 67, 0.3);
    padding: 14px 16px; text-align: left; font-weight: 400;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.wapperl:hover .wapperl__lightbox,
.wapperl:focus .wapperl__lightbox,
.wapperl:focus-within .wapperl__lightbox {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.wapperl__lightbox::before {
    content: ""; position: absolute; right: 18px; top: -7px; width: 12px; height: 12px;
    background: var(--farbe-flaeche); border-left: 1px solid var(--farbe-rahmen); border-top: 1px solid var(--farbe-rahmen);
    transform: rotate(45deg);
}
.wapperl__titel { display: block; color: var(--farbe-primaer); font-size: 0.95rem; margin-bottom: 0.6rem; }
.wapperl__schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.wapperl__schritte li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.85rem; line-height: 1.35; }
.wapperl__nr {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--farbe-sekundaer); color: #fff; font-weight: 700; font-size: 0.78rem;
    display: flex; align-items: center; justify-content: center;
}
.wapperl__text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }

/* ---------- Score-Vergleich (aktuell vs. mit Plugin) im Plugin-Dashboard ---------- */
.plugin-score-vergleich { margin-bottom: var(--abstand-mittel); }
.plugin-score-vergleich__titel { font-weight: 700; color: var(--farbe-primaer); margin-bottom: 0.25rem; }
.plugin-score-vergleich .score-vergleich { margin: 0.5rem 0; }
.plugin-score-vergleich__zeile { display: flex; align-items: center; gap: var(--abstand-mittel); flex-wrap: wrap; }
.plugin-score-vergleich__test { display: flex; flex-direction: column; gap: 0.3rem; margin-left: var(--abstand-gross); }
.widget-testen-hinweis { font-size: 0.8rem; color: var(--farbe-text-leise); max-width: 220px; min-height: 1.1em; }

/* ---------- Testphase (14 Tage kostenlos) ---------- */
.status-kennzeichen--warnung {
    background: var(--farbe-warnung-flaeche);
    color: var(--farbe-warnung);
}
.testphase-hinweis {
    margin: 0 0 var(--abstand-mittel);
    padding: var(--abstand-mittel);
    border-radius: var(--radius-mittel);
    border-left: 4px solid var(--farbe-warnung);
    background: var(--farbe-warnung-flaeche);
}
.testphase-hinweis--abgelaufen {
    border-left-color: var(--farbe-fehler);
    background: var(--farbe-fehler-flaeche);
}
.testphase-bestaetigen {
    margin-top: var(--abstand-mittel);
    padding-top: var(--abstand-mittel);
    border-top: 1px dashed var(--farbe-rahmen);
}
.testphase-bestaetigen__check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: var(--abstand-mittel);
    font-size: 0.9rem;
}
.testphase-bestaetigen__check input { margin-top: 0.2rem; }

/* Großes Banner oben im Dashboard, wenn eine Testphase abgelaufen ist (unerledigt) */
.testphase-grossbanner {
    margin-bottom: var(--abstand-gross);
    padding: var(--abstand-mittel) var(--abstand-gross);
    background: var(--farbe-fehler-flaeche);
    border: 1px solid var(--farbe-fehler);
    border-radius: var(--radius-mittel);
}
.testphase-grossbanner__titel { margin: 0 0 0.4rem; color: var(--farbe-fehler); }
.testphase-grossbanner ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }

/* ---------- Bewertungs-Lightbox (Textvorschlag) ---------- */
.bewertung-lightbox {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center; padding: var(--abstand-mittel);
}
.bewertung-lightbox[hidden] { display: none; }
.bewertung-lightbox__overlay { position: absolute; inset: 0; background: rgba(16, 42, 67, 0.55); }
.bewertung-lightbox__box {
    position: relative; z-index: 1; width: 100%; max-width: 520px;
    background: var(--farbe-flaeche); border-radius: var(--radius-gross);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); padding: var(--abstand-gross);
}
.bewertung-lightbox__x {
    position: absolute; top: 10px; right: 12px; border: none; background: transparent;
    font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--farbe-text-leise); padding: 4px 8px;
}
.bewertung-lightbox__x:hover { color: var(--farbe-text); }
.bewertung-lightbox__titel { margin: 0 1.5rem 0.75rem 0; color: var(--farbe-primaer); font-size: 1.1rem; }
.bewertung-lightbox__portal { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--farbe-text-leise); }
.bewertung-lightbox__text {
    width: 100%; border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-mittel);
    padding: 0.75rem; font: inherit; font-size: 0.95rem; line-height: 1.4; resize: vertical; background: var(--farbe-flaeche-gedaempft);
}
.bewertung-lightbox__meldung { margin: 0.5rem 0 0; min-height: 1.2em; color: var(--farbe-erfolg); font-weight: 600; font-size: 0.9rem; }
.bewertung-lightbox__aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-mittel); margin-top: var(--abstand-mittel); }

/* Ladeanimation + Sprüche, bis der Textvorschlag verfügbar ist */
.bewertung-lightbox__loader {
    display: flex; flex-direction: column; align-items: center; gap: var(--abstand-mittel);
    padding: var(--abstand-gross) var(--abstand-mittel);
    text-align: center; min-height: 150px; justify-content: center;
}
.bewertung-lightbox__loader[hidden] { display: none; }
.bewertung-lightbox__spinner {
    width: 42px; height: 42px; border-radius: 50%;
    border: 4px solid var(--farbe-rahmen); border-top-color: var(--farbe-sekundaer);
    animation: bfa-spin 0.8s linear infinite;
}
.bewertung-lightbox__spinner[hidden] { display: none; }
.bewertung-lightbox__spruch { margin: 0; color: var(--farbe-text-leise); font-size: 0.95rem; min-height: 2.6em; max-width: 34ch; }
@keyframes bfa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bewertung-lightbox__spinner { animation-duration: 2.4s; } }

/* ---------- „Durch Plugin lösen“-Vermerk im Bericht ---------- */
.plugin-hinweis {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    background: #e8f1fb;
    border: 1px solid #b9d6f2;
    border-radius: var(--radius-mittel);
    padding: 0.65rem var(--abstand-mittel);
    margin: 0 0 var(--abstand-mittel);
    font-size: 0.95rem;
}
.plugin-hinweis__badge {
    background: var(--farbe-sekundaer); color: #fff;
    font-weight: 700; font-size: 0.8rem;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.plugin-hinweis__link { font-weight: 700; white-space: nowrap; }

/* Auf Handybreite waren die Funktionsbeschreibungen mit 0.8rem (12,8 px) zu
   klein zum Lesen; die Hierarchie zur Bezeichnung darüber bleibt erhalten. */
@media (max-width: 640px) {
    .widget-funktion__name { font-size: 1rem; }
    .widget-funktion__text { font-size: 0.9rem; line-height: 1.4; }
    .plugin-menschenhand__zusatz { font-size: 0.9rem; }
}