/*
 * Anlehnung an wirsindwoar.de.
 *
 * Bewusst wenige, gezielte Regeln: Farben und Schrift kommen aus der
 * Panel-Konfiguration in AdminPanelProvider.php, hier steht nur, was sich dort
 * nicht ausdrücken lässt. Kein eigenes Tailwind-Theme, damit das Projekt ohne
 * Node-Build-Schritt auskommt und in einem halben Jahr noch baubar ist.
 *
 * Farben der Marke:
 *   #fcf9f6  warmes Off-White  (Hintergrund)
 *   #2a2a2a  warmes Fast-Schwarz (Text, Bedienelemente)
 *   #e24f60  Koralle           (ausschließlich Alarme)
 *   #e9c998  Sand              (Akzent)
 */

:root {
    --woar-bg: #fcf9f6;
    --woar-surface: #ffffff;
    --woar-ink: #2a2a2a;
    --woar-sand: #e9c998;
    --woar-coral: #e24f60;
    --woar-line: #ece5dd;
}

/* Warmer Hintergrund statt des kühlen Grau der Voreinstellung. */
.fi-body {
    background-color: var(--woar-bg);
}

.fi-main-sidebar {
    background-color: var(--woar-surface);
    border-inline-end: 1px solid var(--woar-line);
}

/* Überschriften etwas kräftiger und enger — die Website nutzt dafür Museo,
   das hier lizenzbedingt nicht vorliegt. Inter mit 800 kommt am nächsten. */
.fi-header-heading,
.fi-section-header-heading {
    font-weight: 800;
    letter-spacing: -0.021em;
}

/* Zahlen in Tabellen mit fester Zeichenbreite: Antwortzeiten und Daten stehen
   dann sauber untereinander und sind auf einen Blick vergleichbar. */
.fi-ta-table {
    font-variant-numeric: tabular-nums;
}

.fi-ta-header-cell {
    letter-spacing: 0.01em;
}

/* Sand als ruhiger Akzent unter der Kopfzeile der Tabelle. */
.fi-ta-header-cell {
    border-bottom-color: var(--woar-line);
}

.fi-badge {
    font-weight: 600;
    letter-spacing: 0.005em;
}

/* Dunkelmodus: warmes Schwarz statt Blaugrau, damit es zur Marke passt. */
.dark .fi-body {
    background-color: #1a1a1a;
}

.dark .fi-main-sidebar {
    background-color: #232323;
    border-inline-end-color: #333030;
}

/* --------------------------------------------------------------------------
 * Auswertung: Kennzahlen und Ranglisten.
 *
 * Eigene Regeln statt Tailwind-Klassen, weil das Panel bewusst ohne
 * Node-Build-Schritt auskommt — beliebige Utility-Klassen wären hier nicht
 * verlässlich vorhanden.
 *
 * Gestalterisch geht es um eine Sache: Zahlen sollen sich vergleichen lassen,
 * ohne dass man sie liest. Deshalb rechtsbündig, gleiche Ziffernbreite, und
 * ein Balken, der die Größenverhältnisse zeigt.
 * ------------------------------------------------------------------------ */

.woar-kpis {
    display: grid;
    /* Keine Medienabfrage: Die schaut auf die Fensterbreite, nicht auf den
       Platz, den diese Reihe tatsächlich hat. Steht sie in einer halb so
       breiten Spalte, erzwingt sie trotzdem vier Kacheln — und die
       Beschriftungen überlappen. auto-fit rechnet mit dem echten Platz. */
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.woar-kpi {
    border: 1px solid var(--woar-line, #e7e0d8);
    border-radius: 0.75rem;
    padding: 1rem 1.125rem 0.875rem;
    background: var(--woar-surface, #fff);
    /* Sand als ruhige Kante links — hebt die Kacheln vom Rest ab, ohne
       Koralle zu verbrauchen. Die bleibt den Alarmen vorbehalten. */
    border-inline-start: 3px solid var(--woar-sand, #e9c998);
}

.woar-kpi--leer {
    border-inline-start-color: var(--woar-line, #e7e0d8);
}

.woar-kpi__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    font-weight: 600;
}

.woar-kpi__wert {
    margin-top: 0.25rem;
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--woar-ink, #2a2a2a);
}

.woar-kpi__wert--leer {
    font-size: 1.125rem;
    font-weight: 400;
    opacity: 0.5;
}

.woar-kpi__vergleich {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.woar-kpi__trend {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--woar-ink, #2a2a2a);
}

.woar-kpi__ohne {
    opacity: 0.5;
}

.woar-liste {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.woar-liste td {
    padding: 0.3rem 0;
    vertical-align: middle;
    border-bottom: 1px solid var(--woar-line, #e7e0d8);
}

.woar-liste tr:last-child td {
    border-bottom: 0;
}

.woar-liste__pfad {
    max-width: 0;
    width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: 0.75rem;
}

.woar-liste__balken {
    width: 6rem;
    padding-inline: 0.75rem 1rem;
}

.woar-liste__balken span {
    display: block;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--woar-sand, #e9c998);
    min-width: 2px;
}

.woar-liste__zahl {
    min-width: 3ch;
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 500;
}

.woar-leer {
    font-size: 0.875rem;
    opacity: 0.6;
}

.dark .woar-kpi {
    background: #232323;
    border-color: #333030;
    border-inline-start-color: var(--woar-sand, #e9c998);
}

.dark .woar-kpi--leer {
    border-inline-start-color: #333030;
}

.dark .woar-kpi__trend {
    color: #f5f2ee;
}

.dark .woar-kpi__wert {
    color: #f5f2ee;
}

.dark .woar-liste td {
    border-bottom-color: #333030;
}

/* --------------------------------------------------------------------------
 * Einrichtungs-Prüfung.
 *
 * Vier Zustände, unterschieden über die Kante links: erledigt, fehlt,
 * Warnung, von Hand zu prüfen. Koralle nur beim echten Fehlen — sie ist
 * für Alarme reserviert, und genau das ist ein fehlendes Ziel.
 * ------------------------------------------------------------------------ */

.woar-pruefung {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.woar-pruefung__punkt {
    border: 1px solid var(--woar-line, #e7e0d8);
    border-inline-start: 3px solid var(--woar-line, #e7e0d8);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--woar-surface, #fff);
}

.woar-pruefung__punkt--ok {
    border-inline-start-color: #3f9142;
}

.woar-pruefung__punkt--fehlt {
    border-inline-start-color: var(--woar-coral, #e24f60);
}

.woar-pruefung__punkt--warnung {
    border-inline-start-color: var(--woar-sand, #e9c998);
}

.woar-pruefung__kopf {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.woar-pruefung__marke {
    font-weight: 700;
    width: 1rem;
    text-align: center;
    flex: none;
}

.woar-pruefung__punkt--ok .woar-pruefung__marke {
    color: #3f9142;
}

.woar-pruefung__punkt--fehlt .woar-pruefung__marke {
    color: var(--woar-coral, #e24f60);
}

.woar-pruefung__titel {
    font-weight: 600;
}

.woar-pruefung__befund {
    margin-top: 0.125rem;
    padding-inline-start: 1.5rem;
    font-size: 0.875rem;
}

.woar-pruefung__massnahme {
    margin-top: 0.25rem;
    padding-inline-start: 1.5rem;
    font-size: 0.8125rem;
    opacity: 0.7;
}

.dark .woar-pruefung__punkt {
    background: #232323;
    border-color: #333030;
}

/* --------------------------------------------------------------------------
 * Der Trichter.
 *
 * Die Balken sind der Punkt: Ein Geschäftsführer soll in fünf Sekunden
 * sehen, wo die Leute verschwinden — ohne eine Zahl zu lesen.
 * ------------------------------------------------------------------------ */

.woar-trichter {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woar-trichter__stufe {
    padding: 0.5rem 0 0.75rem;
    border-bottom: 1px solid var(--woar-line, #e7e0d8);
}

.woar-trichter__stufe:last-child {
    border-bottom: 0;
}

.woar-trichter__zeile {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.woar-trichter__wert {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: end;
    color: var(--woar-ink, #2a2a2a);
}

.woar-trichter__wert--klein {
    font-size: 1.125rem;
}

.woar-trichter__titel {
    font-weight: 500;
}

.woar-trichter__balken {
    margin-top: 0.375rem;
    margin-inline-start: 5.25rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--woar-line, #e7e0d8);
    overflow: hidden;
}

.woar-trichter__balken span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--woar-sand, #e9c998);
}

.woar-trichter__verlust,
.woar-trichter__grund {
    margin-top: 0.25rem;
    margin-inline-start: 5.25rem;
    font-size: 0.8125rem;
    opacity: 0.65;
}

.woar-trichter__stufe--fehlt .woar-trichter__wert {
    opacity: 0.35;
}

.woar-trichter__nebenweg {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--woar-line, #e7e0d8);
}

.woar-trichter__nebenweg-titel {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.woar-hinweis {
    border-inline-start: 3px solid var(--woar-sand, #e9c998);
    background: rgba(233, 201, 152, 0.14);
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.875rem;
}

.dark .woar-trichter__wert {
    color: #f5f2ee;
}

.dark .woar-trichter__stufe,
.dark .woar-trichter__nebenweg {
    border-color: #333030;
}

/* --------------------------------------------------------------------------
 * Befunde, Verlustzonen, Seiteninventar.
 * ------------------------------------------------------------------------ */

.woar-befunde {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.625rem;
}

.woar-befund {
    border: 1px solid var(--woar-line, #e7e0d8);
    border-inline-start: 3px solid var(--woar-sand, #e9c998);
    border-radius: 0.5rem;
    padding: 0.75rem 0.875rem;
    background: var(--woar-surface, #fff);
}

.woar-befund--kritisch {
    border-inline-start-color: var(--woar-coral, #e24f60);
}

.woar-befund__kopf {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.woar-befund__code {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    opacity: 0.55;
    /* Traegt jetzt den Bereichsnamen statt eines Kuerzels wie "F1". */
    min-width: 9rem;
    white-space: nowrap;
}

.woar-befund__seite {
    font-weight: 400;
    opacity: 0.6;
    margin-left: 0.4rem;
}

.woar-befund__titel {
    font-weight: 600;
    flex: 1;
}

.woar-befund__prio {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: 0.7;
}

.woar-befund__text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

.woar-befund__massnahme {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    opacity: 0.8;
}

.woar-befund__fuss {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    opacity: 0.55;
}

.woar-befunde__summe,
.woar-befunde__zurueck {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    opacity: 0.65;
}

.woar-zonen {
    display: grid;
    gap: 0.75rem;
}

.woar-zone {
    border-inline-start: 3px solid var(--woar-line, #e7e0d8);
    padding-inline-start: 0.875rem;
}

.woar-zone__titel {
    font-weight: 600;
    font-size: 0.875rem;
}

.woar-zone__zahlen {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    margin-top: 0.125rem;
}

.woar-zone__hinweis {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    opacity: 0.65;
}

.woar-zone__ursachen {
    margin: 0.375rem 0 0;
    padding-inline-start: 1.125rem;
    font-size: 0.8125rem;
}

.woar-zone__ursachen li {
    margin-bottom: 0.25rem;
}

.woar-inventar {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.woar-inventar th {
    text-align: start;
    font-weight: 600;
    opacity: 0.6;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--woar-line, #e7e0d8);
    white-space: nowrap;
}

.woar-inventar td {
    padding: 0.3rem 0.5rem 0.3rem 0;
    border-bottom: 1px solid var(--woar-line, #e7e0d8);
}

.woar-inventar__zahl {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-inline-end: 0.75rem;
}

.woar-inventar__pfad {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woar-inventar__regeln {
    font-size: 0.6875rem;
    opacity: 0.5;
    margin-inline-start: 0.375rem;
}

.woar-empfehlung {
    font-weight: 600;
}

.woar-empfehlung--löschen {
    color: var(--woar-coral, #e24f60);
}

.woar-empfehlung--verlinken {
    color: var(--woar-amber, #c98a20);
}

.dark .woar-befund {
    background: #232323;
    border-color: #333030;
}

.dark .woar-inventar th,
.dark .woar-inventar td,
.dark .woar-zone {
    border-color: #333030;
}

/* Anleitung je Prüfpunkt — zugeklappt, damit die Liste überschaubar bleibt. */

.woar-anleitung {
    margin-top: 0.5rem;
    margin-inline-start: 1.5rem;
    font-size: 0.8125rem;
}

.woar-anleitung > summary {
    cursor: pointer;
    font-weight: 600;
    opacity: 0.75;
}

.woar-anleitung ol {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.25rem;
}

.woar-anleitung li {
    margin-bottom: 0.375rem;
}

.woar-anleitung code {
    display: block;
    margin-top: 0.125rem;
    padding: 0.375rem 0.5rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    overflow-x: auto;
    white-space: pre;
}

.dark .woar-anleitung code {
    background: rgba(255, 255, 255, 0.07);
}

/* Zwischenüberschrift in der Einrichtungs-Prüfung. */

.woar-pruefung__gruppe {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    opacity: 0.45;
    margin-top: 0.5rem;
}

.woar-pruefung__gruppe:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Schlüsselseiten — warum eine Seite nicht funktioniert.

   Der Lesetiefe-Balken ist das Stück, für das es die ganze Clarity-Anbindung
   gibt: Die Füllung ist, wie weit im Schnitt gelesen wird, die Marken sitzen
   dort, wo Kontakt, Formular und Anfrage-Knopf stehen. Eine rote Marke rechts
   der Füllung heißt: Das Element wird nie gesehen.
   --------------------------------------------------------------------------- */
.woar-seite {
    border: 1px solid var(--woar-linie, #e5e7eb);
    border-radius: .75rem;
    padding: .9rem 1rem;
    margin-bottom: .75rem;
}
.woar-seite__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.woar-seite__pfad { font-weight: 700; }
.woar-seite__rolle {
    font-size: .75rem;
    color: var(--woar-gedaempft, #6b7280);
    margin-left: .5rem;
}
.woar-urteil {
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.woar-urteil--gut { background: #e8f3ec; color: #2f6b45; }
.woar-urteil--schwach { background: #fcf3e2; color: #8a6415; }
.woar-urteil--schlecht { background: #fbeaec; color: #a3303f; }
.woar-seite__zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    margin: .5rem 0 .25rem;
    font-size: .8rem;
    color: var(--woar-gedaempft, #6b7280);
}
.woar-seite__zahlen b { font-variant-numeric: tabular-nums; }
.woar-lesetiefe {
    position: relative;
    height: 1.25rem;
    margin: .6rem 0 .2rem;
    background: var(--woar-flaeche, #f3f4f6);
    border-radius: .25rem;
}
.woar-lesetiefe__gelesen {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--woar-akzent, #e9c998);
    border-radius: .25rem 0 0 .25rem;
}
.woar-lesetiefe__marke {
    position: absolute;
    top: -.2rem;
    bottom: -.2rem;
    width: 2px;
    background: #3a3a3a;
}
.woar-lesetiefe__marke--aus { background: #a3303f; }
.woar-lesetiefe__legende {
    font-size: .72rem;
    color: var(--woar-gedaempft, #6b7280);
    margin: 0 0 .35rem;
}
.woar-grund {
    margin-top: .6rem;
    padding-left: .75rem;
    border-left: 2px solid var(--woar-akzent, #e9c998);
    font-size: .85rem;
}
.woar-grund__titel { font-weight: 700; }
.woar-grund__tun { margin-top: .2rem; }
.woar-grund__stufe {
    margin-top: .2rem;
    font-size: .72rem;
    color: var(--woar-gedaempft, #6b7280);
}

/* Kurzfassung: der Kasten ganz oben in der Auswertung. */
.woar-kurz__lage {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.woar-kurz__hebel {
    border-left: 3px solid var(--woar-coral, #e24f60);
    padding: 0.6rem 0 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
}

.woar-kurz__marke {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

.woar-kurz__titel {
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.woar-kurz__tun {
    margin-top: 0.35rem;
}

.woar-kurz__fuss {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

.woar-kurz__danach ol {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

.woar-kurz__summe {
    font-size: 0.85rem;
    opacity: 0.75;
    margin: 0.75rem 0 0;
}

.woar-kurz__vorher {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: -0.4rem 0 0.75rem;
}

/* Landingpages der Anzeigen */
.woar-lp__bilder {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0;
    align-items: flex-start;
}

.woar-lp__bild {
    margin: 0;
}

.woar-lp__bild img,
.woar-lp__leer {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    display: block;
}

.woar-lp__bild--mobile img,
.woar-lp__bild--mobile .woar-lp__leer {
    width: 200px;
    max-width: 100%;
}

.woar-lp__bild--desktop img,
.woar-lp__bild--desktop .woar-lp__leer {
    width: 420px;
    max-width: 100%;
}

.woar-lp__leer {
    padding: 1.5rem 0.75rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

.woar-lp__bild figcaption {
    font-size: 0.75rem;
    opacity: 0.65;
    margin-top: 0.3rem;
}

.woar-lp__titel {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
    margin: 0.9rem 0 0.3rem;
}

.woar-lp__liste {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
    /* Filament setzt Listen zurueck; ohne das stehen die Punkte ohne Punkt da. */
    list-style: disc;
}

.woar-lp__liste--luecken {
    opacity: 0.8;
}

.woar-einschaetzung {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid rgb(99 102 241 / 0.6);
    background: rgb(99 102 241 / 0.05);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.woar-einschaetzung__kopf {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.woar-einschaetzung__kopf span {
    font-weight: 400;
    opacity: 0.7;
}

.woar-einschaetzung__gesamt {
    margin: 0 0 0.6rem;
}

.woar-einschaetzung__punkt {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.woar-einschaetzung__urteile {
    flex: 0 0 6.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.woar-einschaetzung__urteil {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.1rem 0;
    height: fit-content;
}

.woar-einschaetzung__urteil--gut { background: rgb(34 197 94 / 0.15); }
.woar-einschaetzung__urteil--mittel { background: rgb(234 179 8 / 0.2); }
.woar-einschaetzung__urteil--schwach { background: rgb(239 68 68 / 0.18); }

.woar-einschaetzung__beleg {
    display: block;
    font-style: italic;
    opacity: 0.75;
    margin-top: 0.2rem;
}

.woar-streifen {
    margin-top: 0.75rem;
}

.woar-streifen summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
}

.woar-streifen__bilder {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
}

.woar-streifen__titel {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.woar-streifen__bilder.woar-streifen__bilder--desktop figure {
    flex: 0 0 16rem;
}

.woar-streifen__bilder figure {
    flex: 0 0 9rem;
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.9;
}

.woar-streifen__bilder img {
    width: 100%;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 0.375rem;
}

.woar-tabelle {
    border-collapse: collapse;
    font-size: 0.875rem;
}

.woar-tabelle th {
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.1);
}

.woar-tabelle td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgb(0 0 0 / 0.05);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * Seitenprüfung (Chancen → "Seite prüfen")
 *
 * Farben wie im übrigen Panel: Korallenrot nur für Wichtiges, Sand für
 * Mittleres, Grün für "passt". Alles über Variablen, damit der dunkle Modus
 * nur die Variablen tauschen muss.
 * ------------------------------------------------------------------ */
.woar-audit {
    --wa-ink: #2a2a2a;
    --wa-mut: #6b6560;
    --wa-line: #ece5dd;
    --wa-soft: #faf6f1;
    --wa-card: #ffffff;
    --wa-bad: #e24f60;
    --wa-bad-bg: #fdecee;
    --wa-warn: #9a6b12;
    --wa-warn-bg: #fbf1dc;
    --wa-ok: #15803d;
    --wa-ok-bg: #e7f5ec;
    --wa-hint: #8a8580;
    --wa-hint-bg: #f1ede8;
    display: grid;
    gap: 1rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--wa-ink);
}

.dark .woar-audit {
    --wa-ink: #f2efeb;
    --wa-mut: #a8a29c;
    --wa-line: #3a3733;
    --wa-soft: #262421;
    --wa-card: #1f1d1b;
    --wa-bad: #ef6b5c;
    --wa-bad-bg: #3b2224;
    --wa-warn: #e9c998;
    --wa-warn-bg: #3a3122;
    --wa-ok: #4cc38a;
    --wa-ok-bg: #1d3328;
    --wa-hint: #a8a29c;
    --wa-hint-bg: #2c2a27;
}

.woar-audit .wa-h {
    margin: .5rem 0 -.25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wa-mut);
}

.woar-audit .wa-head { display: grid; gap: .5rem; }
.woar-audit .wa-url { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--wa-ink); }
.woar-audit .wa-url:hover { text-decoration: underline; }
.woar-audit .wa-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.woar-audit .wa-chip {
    padding: .1rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--wa-line);
    background: var(--wa-soft);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.woar-audit .wa-chip-ok { background: var(--wa-ok-bg); border-color: transparent; color: var(--wa-ok); }
.woar-audit .wa-chip-bad { background: var(--wa-bad-bg); border-color: transparent; color: var(--wa-bad); }
.woar-audit .wa-chip-soft { background: transparent; color: var(--wa-mut); font-weight: 500; }

/* Kennzahlen */
.woar-audit .wa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.woar-audit .wa-stat {
    display: grid;
    gap: .1rem;
    padding: .6rem .8rem;
    border: 1px solid var(--wa-line);
    border-radius: .75rem;
    background: var(--wa-soft);
}
.woar-audit .wa-stat span { font-size: .7rem; color: var(--wa-mut); }
.woar-audit .wa-stat strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.woar-audit .wa-stat-hl { background: var(--wa-ok-bg); border-color: transparent; }
.woar-audit .wa-stat-hl strong { color: var(--wa-ok); }

/* Überblick mit Ampel */
.woar-audit .wa-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; }
.woar-audit .wa-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: .75rem;
    border: 1px solid var(--wa-line);
    background: var(--wa-card);
}
.woar-audit .wa-check-text { display: grid; min-width: 0; line-height: 1.25; }
.woar-audit .wa-check-text strong { font-size: .82rem; }
.woar-audit .wa-check-text small { color: var(--wa-mut); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.woar-audit .wa-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    background: var(--wa-hint-bg);
    color: var(--wa-hint);
}
.woar-audit .wa-ok .wa-ico { background: var(--wa-ok-bg); color: var(--wa-ok); }
.woar-audit .wa-warn .wa-ico { background: var(--wa-warn-bg); color: var(--wa-warn); }
.woar-audit .wa-bad .wa-ico { background: var(--wa-bad-bg); color: var(--wa-bad); }
.woar-audit .wa-bad { border-color: color-mix(in srgb, var(--wa-bad) 40%, var(--wa-line)); }
.woar-audit .wa-warn { border-color: color-mix(in srgb, var(--wa-warn) 35%, var(--wa-line)); }

/* Vorschau des Suchtreffers */
.woar-audit .wa-serp {
    display: grid;
    gap: .25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--wa-line);
    border-radius: .75rem;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}
.dark .woar-audit .wa-serp { background: #202124; }
.woar-audit .wa-serp-site { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: #202124; }
.dark .woar-audit .wa-serp-site { color: #bdc1c6; }
.woar-audit .wa-serp-fav {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: #f1f3f4;
    font-size: .75rem;
    font-weight: 700;
    color: #5f6368;
}
.dark .woar-audit .wa-serp-fav { background: #303134; color: #9aa0a6; }
.woar-audit .wa-serp-host { display: block; font-size: .85rem; line-height: 1.1; }
.woar-audit .wa-serp-crumbs { display: block; font-size: .72rem; color: #5f6368; }
.dark .woar-audit .wa-serp-crumbs { color: #9aa0a6; }
.woar-audit .wa-serp-title { font-size: 1.25rem; line-height: 1.3; color: #1a0dab; }
.dark .woar-audit .wa-serp-title { color: #8ab4f8; }
.woar-audit .wa-serp-desc { font-size: .88rem; line-height: 1.55; color: #4d5156; }
.dark .woar-audit .wa-serp-desc { color: #bdc1c6; }
.woar-audit .wa-serp-desc b { font-weight: 700; color: #202124; }
.dark .woar-audit .wa-serp-desc b { color: #e8eaed; }

.woar-audit .wa-note { margin: 0; font-size: .75rem; color: var(--wa-mut); }
.woar-audit .wa-foot { padding-top: .5rem; border-top: 1px solid var(--wa-line); }

/* Prioritäten */
.woar-audit .wa-card {
    display: grid;
    gap: .35rem;
    padding: .85rem 1rem;
    border: 1px solid var(--wa-line);
    border-left-width: 4px;
    border-radius: .75rem;
    background: var(--wa-card);
}
.woar-audit .wa-card-high { border-left-color: var(--wa-bad); }
.woar-audit .wa-card-medium { border-left-color: var(--wa-warn); }
.woar-audit .wa-card-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.woar-audit .wa-card-head strong { flex: 1; min-width: 12rem; }
.woar-audit .wa-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--wa-ink);
    color: var(--wa-card);
    font-size: .75rem;
    font-weight: 800;
}
.woar-audit .wa-detail { margin: 0; color: var(--wa-mut); }
.woar-audit .wa-action {
    margin-top: .25rem;
    padding: .55rem .75rem;
    border-radius: .6rem;
    background: var(--wa-soft);
    border: 1px dashed var(--wa-line);
}
.woar-audit .wa-action span {
    display: block;
    margin-bottom: .1rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--wa-ok);
}

.woar-audit .wa-badge {
    flex: none;
    padding: .05rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.woar-audit .wa-badge-high { background: var(--wa-bad-bg); color: var(--wa-bad); }
.woar-audit .wa-badge-medium { background: var(--wa-warn-bg); color: var(--wa-warn); }
.woar-audit .wa-badge-low { background: var(--wa-hint-bg); color: var(--wa-hint); }

/* Eingeklappte Hinweise */
.woar-audit .wa-more { border: 1px solid var(--wa-line); border-radius: .75rem; background: var(--wa-card); }
.woar-audit .wa-more summary { cursor: pointer; padding: .7rem 1rem; font-weight: 700; }
.woar-audit .wa-more[open] summary { border-bottom: 1px solid var(--wa-line); }
.woar-audit .wa-row { display: grid; gap: .2rem; padding: .7rem 1rem; }
.woar-audit .wa-row + .wa-row { border-top: 1px solid var(--wa-line); }
.woar-audit .wa-row-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.woar-audit .wa-passed { display: flex; flex-wrap: wrap; gap: .4rem; }
.woar-audit .wa-pill {
    padding: .15rem .65rem;
    border-radius: 999px;
    background: var(--wa-ok-bg);
    color: var(--wa-ok);
    font-size: .78rem;
    font-weight: 600;
}

.woar-audit .wa-alert { padding: .8rem 1rem; border-radius: .75rem; }
.woar-audit .wa-alert-bad { background: var(--wa-bad-bg); color: var(--wa-ink); border: 1px solid color-mix(in srgb, var(--wa-bad) 40%, transparent); }
.woar-audit .wa-alert-ok { background: var(--wa-ok-bg); color: var(--wa-ink); }

/* Auftrag für Claude Code kopieren */
.woar-audit .wa-h-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.woar-audit .wa-copy {
    cursor: pointer;
    border: 1px solid var(--wa-line);
    background: var(--wa-card);
    color: var(--wa-ink);
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    transition: background .15s, border-color .15s;
}
.woar-audit .wa-copy:hover { background: var(--wa-soft); border-color: var(--wa-mut); }
.woar-audit .wa-copy-small { margin-top: .75rem; font-size: .75rem; padding: .25rem .7rem; }
.dark .woar-audit .wa-copy { background: transparent; color: inherit; }

/* Ähnliche Suchanfragen */
.woar-audit .wa-related { display: grid; gap: .5rem; }
.woar-audit .wa-rel-row {
    display: grid;
    gap: .25rem;
    padding: .65rem .85rem;
    border: 1px solid var(--wa-line);
    border-radius: .75rem;
    background: var(--wa-card);
}
.woar-audit .wa-rel-row small { color: var(--wa-mut); }
.woar-audit .wa-rel-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }

/* Auftragstext ansehen */
.woar-audit .wa-task {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    line-height: 1.5;
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    border: 1px solid var(--wa-line);
    border-radius: .75rem;
    background: var(--wa-soft);
    max-height: 22rem;
    overflow: auto;
}

/* Auswahl-Tabelle: Suchanfragen aus der Search Console */
.woar-audit.wa-picker { gap: .6rem; }
.woar-audit .wa-picker-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.woar-audit .wa-picker-search {
    flex: 1;
    max-width: 22rem;
    padding: .4rem .75rem;
    border: 1px solid var(--wa-line);
    border-radius: .6rem;
    background: var(--wa-card);
    color: inherit;
    font-size: .85rem;
}
.woar-audit .wa-picker-count { color: var(--wa-mut); font-size: .85rem; }
.woar-audit .wa-picker-scroll { max-height: 24rem; overflow: auto; border: 1px solid var(--wa-line); border-radius: .75rem; background: var(--wa-card); }
.woar-audit .wa-picker-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.woar-audit .wa-picker-table th {
    position: sticky;
    top: 0;
    background: var(--wa-soft);
    text-align: left;
    padding: .5rem .75rem;
    font-weight: 600;
    border-bottom: 1px solid var(--wa-line);
    white-space: nowrap;
}
.woar-audit .wa-picker-table th button { font: inherit; font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
.woar-audit .wa-picker-table td { padding: .45rem .75rem; border-bottom: 1px solid var(--wa-line); }
.woar-audit .wa-picker-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.woar-audit .wa-picker-table tbody tr { cursor: pointer; }
.woar-audit .wa-picker-table tbody tr:hover { background: var(--wa-soft); }
.woar-audit .wa-picker-table tbody tr.is-selected { background: var(--wa-ok-bg); }

.woar-audit .wa-picker-table .wa-weak { color: var(--wa-hint); }

.woar-audit .wa-picker-table tbody tr.is-locked { cursor: default; opacity: .65; }
.woar-audit .wa-picker-table tbody tr.is-locked:hover { background: transparent; }
.woar-audit .wa-picker-table .wa-chip { margin-left: .4rem; }
.woar-audit .wa-picker-hide { color: var(--wa-mut); font-size: .85rem; white-space: nowrap; }

/* Kennzeichnung von Knöpfen, die Geld kosten */
.woar-cost {
    display: inline-block;
    margin-left: .2em;
    padding: 0 .32em;
    font-size: .66em;
    font-weight: 700;
    line-height: 1.55;
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: .65;
    vertical-align: .12em;
}

/* Kopierknöpfe nur so breit wie ihr Text, auch in Karten, die ihre Kinder strecken */
.woar-audit .wa-copy { justify-self: start; width: fit-content; }

/* Rückfrage vor einem Knopf, der Geld kostet */
.woar-audit .wa-copy-wrap { position: relative; display: inline-block; }
.woar-audit .wa-confirm {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 30;
    width: min(26rem, 85vw);
    padding: .8rem .95rem;
    background: var(--wa-card);
    border: 1px solid var(--wa-line);
    border-radius: .8rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
    color: var(--wa-ink);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}
.woar-audit .wa-copy-wrap--small .wa-confirm { left: 0; right: auto; }
.woar-audit .wa-confirm p { margin: 0 0 .65rem; }
.woar-audit .wa-confirm-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.woar-audit .wa-copy-quiet { border-color: transparent; background: transparent; color: var(--wa-mut); }

/* Kostenstand in der Navigation */
.woar-cost-status {
    margin: 1rem .75rem .5rem;
    padding: .75rem .85rem;
    border: 1px solid var(--wa-line, #ece5dd);
    border-radius: .8rem;
    background: var(--wa-soft, #faf6f1);
    font-size: .8rem;
    line-height: 1.4;
}
.dark .woar-cost-status { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.woar-cost-status--loading { color: #8a8580; }
.woar-cost-status__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; opacity: .75; }
.woar-cost-status__head button { cursor: pointer; background: none; border: 0; color: inherit; font-size: .95rem; line-height: 1; }
.woar-cost-status dl { margin: 0; display: grid; gap: .25rem; }
.woar-cost-status dl > div { display: flex; justify-content: space-between; gap: .5rem; }
.woar-cost-status dt { opacity: .7; }
.woar-cost-status dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.woar-cost-status dd.is-low { color: #e24f60; }
.woar-cost-status__warn { margin: .5rem 0 0; color: #e24f60; font-weight: 600; }

.woar-cost-status__link { display: block; margin: -.25rem .75rem .75rem; text-align: right; font-size: .75rem; color: inherit; opacity: .7; text-decoration: underline; text-underline-offset: 2px; }
.woar-cost-status__link:hover { opacity: 1; }

/* --- Schaltzentrale: Startseite und leere Abteilungsseiten ------------- */

.woar-kacheln {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.woar-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--woar-surface);
    border: 1px solid var(--woar-line);
    border-radius: 0.75rem;
    color: var(--woar-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woar-kachel:hover {
    border-color: var(--woar-sand);
    box-shadow: 0 2px 10px rgb(42 42 42 / 0.06);
}

.woar-kachel__kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.woar-kachel__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.woar-kachel__titel {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.021em;
}

.woar-kachel__text {
    font-size: 0.9rem;
    opacity: 0.75;
}

.woar-kachel__liste {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--woar-line);
    font-size: 0.85rem;
}

.woar-kachel__liste-titel {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.5;
}

.woar-kachel__zeile {
    display: flex;
    justify-content: space-between;
}

.woar-kachel__wert {
    opacity: 0.4;
}

.woar-platzhalter {
    max-width: 40rem;
    padding: 1.5rem;
    background: var(--woar-surface);
    border: 1px dashed var(--woar-line);
    border-radius: 0.75rem;
}

.woar-platzhalter__text {
    font-size: 1rem;
}

.woar-platzhalter__hinweis {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    opacity: 0.55;
}