/* Anmelde-, Registrierungs- und Kontoseiten. */
.zugang {
    max-width: 460px;
    margin-inline: auto;
}

.zugang__titel {
    text-align: center;
    margin-bottom: 0.4rem;
}

.zugang__untertitel {
    text-align: center;
    color: var(--farbe-text-leise);
    margin-bottom: var(--abstand-gross);
}

.zugang__wechsel {
    text-align: center;
    margin-top: var(--abstand-mittel);
    color: var(--farbe-text-leise);
}

/* Reiter-Navigation im Profil (Meine Prüfungen / Einstellungen). */
.reiter-navigation {
    display: flex;
    gap: 0.3rem;
    border-bottom: 2px solid var(--farbe-rahmen);
    margin-bottom: var(--abstand-gross);
    flex-wrap: wrap;
}

.reiter {
    padding: 0.7rem 1.3rem;
    text-decoration: none;
    font-weight: 700;
    color: var(--farbe-text-leise);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}

.reiter:hover {
    color: var(--farbe-primaer);
    background: var(--farbe-flaeche-gedaempft);
}

.reiter--aktiv,
.reiter--aktiv:hover {
    color: var(--farbe-primaer);
    border-bottom-color: var(--farbe-sekundaer);
    background: transparent;
}

.reiter__zaehler {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--farbe-neutral-flaeche);
    color: var(--farbe-text-leise);
    font-size: 0.75rem;
    font-weight: 700;
}

.reiter--aktiv .reiter__zaehler {
    background: var(--farbe-sekundaer);
    color: var(--farbe-text-invers);
}

/* Konto-Übersicht */
.konto-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-mittel);
    flex-wrap: wrap;
    margin-bottom: var(--abstand-gross);
}

.test-historie {
    display: grid;
    gap: var(--abstand-mittel);
}

.historie-eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-mittel);
    flex-wrap: wrap;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rahmen);
    border-left: 5px solid var(--farbe-sekundaer);
    border-radius: var(--radius-mittel);
    padding: var(--abstand-mittel) var(--abstand-gross);
}

/* Rot markierter Eintrag: Siegel wurde auf der Kundenseite manipuliert. */
.historie-eintrag--manipuliert {
    border-color: var(--farbe-fehler);
    border-left-color: var(--farbe-fehler);
    background: var(--farbe-fehler-flaeche);
}

.historie-eintrag--manipuliert .historie-eintrag__domain {
    color: var(--farbe-fehler);
}

.historie-eintrag__domain {
    font-weight: 700;
    color: var(--farbe-primaer);
    font-size: 1.1rem;
}

.historie-eintrag__meta {
    font-size: 0.85rem;
    color: var(--farbe-text-leise);
}

.historie-eintrag__punkte {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--farbe-primaer);
}

.historie-eintrag__rechts {
    text-align: right;
}

.historie-eintrag__aktionen {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55rem;
}

.historie-eintrag__aktionen form {
    margin: 0;
}

.historie-eintrag__aktionen form,
.historie-eintrag__aktionen a,
.historie-eintrag__aktionen button {
    display: inline-flex;
    align-items: center;
}

.leerhinweis {
    text-align: center;
    color: var(--farbe-text-leise);
    padding: var(--abstand-xgross) var(--abstand-mittel);
}

/* Hinweis im Dashboard: Prüfbericht noch nicht für Suchmaschinen freigegeben. */
.index-hinweis {
    margin-top: 0.5rem;
    max-width: 52ch;
}

.index-hinweis__text {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--farbe-text-leise);
    line-height: 1.45;
}

.index-hinweis__text a {
    font-weight: 700;
    white-space: nowrap;
}

/* Leaderboard-Filter & Pagination im Adminbereich. */
.leaderboard-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--abstand-mittel);
    align-items: end;
}

.leaderboard-filter .formularfeld {
    margin-bottom: 0;
}

.leaderboard-filter__aktionen {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.datentabelle thead th a,
.datentabelle thead th a:visited {
    color: var(--farbe-text-invers);
    text-decoration: none;
    white-space: nowrap;
}

.datentabelle thead th a:hover,
.datentabelle thead th a:focus-visible {
    color: var(--farbe-text-invers);
    text-decoration: underline;
}

.leaderboard-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-mittel);
    margin-top: var(--abstand-mittel);
}

.leaderboard-pagination__info {
    color: var(--farbe-text-leise);
    font-size: 0.9rem;
}

/* Fachstellen-Abdeckungsübersicht (feste Städteliste) */
.pruefstellen-abdeckung {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
    margin: var(--abstand-mittel) 0 var(--abstand-gross);
}

.abdeckung-stadt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-mittel);
    border: 1px solid var(--farbe-rahmen);
    background: var(--farbe-flaeche);
    font-size: 0.88rem;
}

.abdeckung-stadt__name {
    font-weight: 600;
    color: var(--farbe-text);
}

.abdeckung-stadt--frei {
    background: var(--farbe-flaeche-gedaempft);
}

.abdeckung-stadt--frei .abdeckung-stadt__name {
    color: var(--farbe-text-leise);
}

.abdeckung-stadt__icons {
    display: flex;
    gap: 0.25rem;
}

.abdeckung-stadt__frei-link {
    font-size: 0.78rem;
    color: var(--farbe-link);
    text-decoration: none;
    white-space: nowrap;
}

.abdeckung-stadt__frei-link:hover {
    text-decoration: underline;
}

/* Anbieter-Icon (L / W / A / sonstige) */
.anbieter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--farbe-text-invers);
    flex: 0 0 auto;
}

.anbieter-icon--l { background: #1f7a34; }
.anbieter-icon--w { background: #7a3fc2; }
.anbieter-icon--a { background: var(--farbe-primaer); }
.anbieter-icon--sonstige { background: var(--farbe-text-leise); }

/* Fachstellen-Formular: Bearbeiten-Modus-Hinweis */
.pruefstellen-formular__modus {
    font-size: 0.85rem;
    color: var(--farbe-sekundaer-dunkel);
    font-weight: 700;
    margin-bottom: 0.6rem;
}

/* Leaderboard: Checkbox-Spalte und Mailversand-Aktionsleiste */
.datentabelle td.leaderboard-checkbox,
.datentabelle th.leaderboard-checkbox {
    width: 2.4rem;
    text-align: center;
}

.leaderboard-mail-aktionen {
    display: flex;
    align-items: center;
    gap: var(--abstand-mittel);
    flex-wrap: wrap;
    margin-top: var(--abstand-gross);
    padding-top: var(--abstand-mittel);
    border-top: 1px solid var(--farbe-rahmen);
}

.leaderboard-mail-aktionen__info {
    color: var(--farbe-text-leise);
    font-size: 0.88rem;
}

/* Bestenliste: Vermerk-Badges für Mailversand (Ziffer) und Klick (Haken). */
.mail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    margin-left: 0.3rem;
    border-radius: 999px;
    background: var(--farbe-sekundaer);
    color: var(--farbe-text-invers);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

.mail-badge--klick {
    background: var(--farbe-erfolg);
}

/* Massenprüfung: Statusbadges der Warteschlangen-Einträge */
.batch-status {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.batch-status--offen  { background: var(--farbe-warnung-flaeche); color: var(--farbe-warnung); }
.batch-status--laeuft { background: var(--farbe-sekundaer);       color: var(--farbe-text-invers); }
.batch-status--fertig { background: var(--farbe-erfolg-flaeche);  color: var(--farbe-erfolg); }
.batch-status--fehler { background: var(--farbe-fehler-flaeche);  color: var(--farbe-fehler); }

/* Bestenliste: Zähler-Vermerk für erzeugte Gratulationsbriefe (Brieficon + Anzahl). */
.brief-badge {
    background: var(--farbe-warnung, #9a6400);
    min-width: auto;
    padding: 0 0.4rem;
}

/* Bestenliste: Marker für aktive Bewertungsaktion. */
.plugin-badge {
    background: var(--farbe-sekundaer, #0069b4);
    min-width: auto;
    padding: 0 0.4rem;
}

/* Bewertungsaktion: Plugin-Angebotsbox im Nutzer-Dashboard. */
.plugin-angebot {
    border: 2px solid var(--farbe-sekundaer, #0069b4);
    background: linear-gradient(180deg, var(--farbe-sekundaer-flaeche, #eaf3fb), #fff 60%);
    margin-bottom: var(--abstand-gross);
}
.plugin-angebot--frei {
    border-color: var(--farbe-erfolg, #1f7a34);
    background: var(--farbe-erfolg-flaeche, #e7f4ea);
}
.plugin-angebot__kopf {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.plugin-angebot__preis-alt {
    text-decoration: line-through;
    color: var(--farbe-text-leise, #888);
    font-weight: 600;
}
.plugin-angebot__preis-neu {
    color: var(--farbe-erfolg, #1f7a34);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.plugin-angebot__titel { margin: 0 0 0.6rem; }
.plugin-angebot__gegenleistung { font-weight: 600; }
.plugin-angebot__schritte { margin: 1rem 0; }
.plugin-angebot__form { margin-top: 0.5rem; }
.plugin-angebot__code {
    background: #0e1b2a;
    color: #d8e6f5;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin: 0.5rem 0;
}
.plugin-angebot__code pre { margin: 0; }
.plugin-angebot__code code { color: inherit; background: none; }
.plugin-angebot__code-wrap { position: relative; }
.plugin-angebot__code--gesperrt {
    filter: blur(3px);
    opacity: 0.55;
    user-select: none;
}
.plugin-angebot__schloss {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0e1b2a;
    font-weight: 700;
}
.plugin-angebot__kauf { margin-top: 1rem; font-size: 0.95rem; }

/* ---------- Auswahl der Widget-Größe (Konto-Einstellungen) ---------- */
.widget-groesse {
    border: none;
    margin: var(--abstand-mittel) 0 0;
    padding: var(--abstand-mittel) 0 0;
    border-top: 1px solid var(--farbe-rahmen);
}
.widget-groesse legend { padding: 0; }
.widget-groesse__auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-mittel);
    margin-top: var(--abstand-mittel);
}
.widget-groesse__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 210px;
    padding: var(--abstand-mittel);
    border: 2px solid var(--farbe-rahmen);
    border-radius: var(--radius-mittel);
    background: var(--farbe-flaeche-gedaempft);
    cursor: pointer;
}
.widget-groesse__option:has(input:checked) {
    border-color: var(--farbe-primaer);
    background: var(--farbe-flaeche);
}
.widget-groesse__option:has(input:focus-visible) {
    outline: 3px solid var(--farbe-fokus, #ffd400);
    outline-offset: 2px;
}
.widget-groesse__punkt {
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--farbe-primaer);
}
.widget-groesse__text { display: flex; flex-direction: column; gap: 0.15rem; }
.widget-groesse__text span { font-size: 0.82rem; color: var(--farbe-text-leise); line-height: 1.35; }