/* ============================================================
   OutfitTor — Stile der Seiten aus dem SEO-Paket (2026-09-06)

   WARUM eine zweite Datei und nicht style.css: die gewachsene style.css hat
   989 Zeilen und darf laut Hausregel 1000 nicht ueberschreiten. Hier stehen
   deshalb ausschliesslich die NEUEN Bausteine:
     - Skip-Link, Sprachumschalter, kompakte Fusszeile (alle Seiten)
     - Erklaerungs- und FAQ-Block der Startseite
     - Detailseite /outfit/<id>-<slug>
     - Uebersicht /outfits mit Filterlinks
     - Fehlerseite 404
     - Transparenzseite /reichweite
   style.css bleibt fuer den Bestand zustaendig; diese Datei wird DANACH
   geladen und darf deshalb einzelne Regeln ueberschreiben.

   Mobile First: die Grundregeln gelten fuer 360 px, Medienabfragen ergaenzen
   nach oben. Farben orientieren sich am Bestand (#007bff/#0275d8 Blau,
   #dee2e6 Rahmen, #f8f9fa Flaeche) und liegen als Variablen vor, damit
   functions/reichweite.js sie fuer die Kurven auslesen kann.
   ============================================================ */

:root {
    --of-blau:       #0275d8;
    --of-blau-dunkel:#095385;
    --of-rot:        #d9534f;
    --of-text:       #212529;
    --of-text-soft:  #6c757d;
    --of-rahmen:     #dee2e6;
    --of-flaeche:    #f8f9fa;

    /* Zwei Sonderfarben fuer Text AUF der hellgrauen Flaeche (#f8f9fa).
       Nachgemessen: #6c757d ergibt dort nur 4,45 : 1 und #0275d8 nur 4,39 : 1 —
       beides unter der Anforderung 4,5 : 1. Auf WEISS reichen die Normalfarben
       (4,69 bzw. 4,63), deshalb bleiben sie dort unveraendert.
         #5c636a auf #f8f9fa = 5,78 : 1
         #0269c2 auf #f8f9fa = 5,24 : 1 */
    --of-text-soft-flaeche: #5c636a;
    --of-blau-flaeche:      #0269c2;
}

/* ============================================================
   Skip-Link — erster fokussierbarer Punkt der Seite
   ============================================================ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--of-blau);
    color: #fff;
    border-radius: 0 0 6px 0;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    color: #fff;
}

/* ============================================================
   Sprachumschalter „DE | EN" (Kopf und Fuss)
   Flaggen-Emoji sind bewusst raus: eine Flagge steht fuer ein Land,
   nicht fuer eine Sprache — und Emoji gehoeren nicht in die Oberflaeche.
   ============================================================ */
.header-lang {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9em;
    flex-shrink: 0;
}
.lang-wahl,
.lang-aktiv {
    display: inline-block;
    min-width: 44px;            /* Tapflaeche >= 44 px */
    padding: 10px 6px;
    text-align: center;
    line-height: 1;
    text-decoration: none;
}
.lang-aktiv {
    font-weight: 700;
    color: var(--of-text);
}
.lang-wahl { color: var(--of-blau); }
/* Der Umschalter in der Fusszeile steht auf hellgrauem Grund */
.site-footer .lang-wahl { color: var(--of-blau-flaeche); }
.site-footer .lang-aktiv { color: var(--of-text); }
.lang-wahl:hover { text-decoration: underline; }
.lang-trenner { color: var(--of-rahmen); }

@media (max-width: 576px) {
    .header-lang { width: 100%; justify-content: center; }
}

/* ============================================================
   Kompakte Fusszeile (Betreiber-Wunsch: „nach ueblichen Internetstandards")
   Drei Zeilen: Marke — Links — Kleingedrucktes. Mobil einspaltig.
   ============================================================ */
.site-footer {
    margin-top: 40px;
    border-top: 1px solid var(--of-rahmen);
    background: var(--of-flaeche);
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 15px 24px;
    text-align: center;
}
.footer-marke {
    margin: 0 0 6px;
    color: var(--of-text);
    font-size: 0.95em;
}
.wortmarke { font-weight: 700; letter-spacing: 0.02em; }

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px 4px;
    margin: 0 0 8px;
}
.footer-links a {
    display: inline-block;
    padding: 11px 10px;         /* 44 px Tapflaeche in der Hoehe */
    color: var(--of-blau-flaeche);   /* auf hellgrauem Grund, siehe :root */
    font-size: 0.92em;
    text-decoration: none;
    line-height: 1.4;
}
.footer-links a:hover { text-decoration: underline; }
.footer-links .footer-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 4px;
}

.footer-klein {
    margin: 0;
    color: var(--of-text-soft-flaeche);   /* 5,78 : 1 auf #f8f9fa */
    font-size: 0.8em;
    line-height: 1.6;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Startseite: Erklaerung und FAQ unter dem Duell
   ============================================================ */
.startseite-text {
    max-width: 760px;
    margin: 30px auto 0;
    padding: 0 15px;
}
.startseite-text h2 {
    font-size: 1.35em;
    margin-top: 28px;
}
.startseite-text h3 {
    font-size: 1.05em;
    margin-top: 20px;
    color: var(--of-blau-dunkel);
}
.startseite-text p { line-height: 1.65; }
.vote-frage { font-size: 1.25em; font-weight: 600; margin: 0 0 12px; }

.startseite-wege {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 16px;
}
.startseite-wege a {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid var(--of-blau);
    border-radius: 6px;
    color: var(--of-blau);
    text-decoration: none;
}
.startseite-wege a:hover { background: var(--of-blau); color: #fff; }

.config-kopf { padding: 18px 15px 0; }
.config-kopf h1 { font-size: 1.5em; margin: 0 0 4px; }
.config-kopf p  { color: var(--of-text-soft); margin: 0; }

/* ============================================================
   Brotkrumen
   ============================================================ */
.brotkrumen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.85em;
    color: var(--of-text-soft);
    margin: 0 0 10px;
}
.brotkrumen a { color: var(--of-blau); text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.brotkrumen-hier { color: var(--of-text-soft); }

/* ============================================================
   Hinweiskasten (leere Listen, Platzhalter)
   ============================================================ */
.hinweis-box {
    background: var(--of-flaeche);
    border: 1px solid var(--of-rahmen);
    border-left: 4px solid var(--of-blau);
    border-radius: 6px;
    padding: 12px 14px;
    color: var(--of-text);
}

/* ============================================================
   Detailseite /outfit/<id>-<slug>
   ============================================================ */
.outfit-seite {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 15px 20px;
}
.outfit-kopf h1 {
    font-size: 1.5em;
    margin: 0 0 4px;
    overflow-wrap: anywhere;    /* lange Namen sprengen bei 360 px sonst die Zeile */
}
.outfit-nummer {
    color: var(--of-text-soft);
    font-size: 0.9em;
    margin: 0 0 14px;
}
/* „3 / 12" — steht nur da, wenn man aus dem Filter kommt (functions/main.js
   setzt den Text). Leer bleibt die Pille unsichtbar; ohne diese Regel zeigt
   die Bestandsregel .outfit-position aus style.css ein leeres graues Kaestchen. */
.outfit-position { color: var(--of-blau); }
.outfit-position:empty { display: none; }

/* Kopfzeile: mit dem sechsten Navigationspunkt („Alle Outfits") und dem
   Sprachumschalter reichen die 800 px aus style.css nicht mehr — die Leiste
   waere auf dem Desktop zweizeilig. */
@media (min-width: 992px) {
    .site-header { max-width: 1160px; }
}

.outfit-haupt {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.outfit-bild { margin: 0; }
.outfit-bild img {
    width: 100%;
    height: auto;               /* ohne dies wirkt die Pixelhoehe aus dem Attribut */
    max-width: 420px;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}
.outfit-bild figcaption {
    margin-top: 8px;
    text-align: center;
    font-size: 0.85em;
    color: var(--of-text-soft);
}
.outfit-spalte { display: flex; flex-direction: column; gap: 20px; }
.outfit-seite h2 { font-size: 1.2em; margin: 0 0 10px; }
.outfit-merkmale .outfit-attr-card { margin-bottom: 10px; }
.outfit-merkmale .outfit-attr-card-header {
    margin: 0;
    font-size: 1em;
}

.bilanz-liste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 0;
    margin: 0 0 14px;
}
.bilanz-liste li { color: var(--of-text-soft); font-size: 0.9em; }
.bilanz-zahl {
    display: block;
    font-size: 1.6em;
    font-weight: 700;
    color: var(--of-blau);
    line-height: 1.1;
}

/* Vorheriges / naechstes Outfit — echte Links, damit sie ohne JavaScript und
   fuer Crawler funktionieren. Die Pfeiltasten und das Wischen folgen ihnen. */
.outfit-nachbarn {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 24px 0 8px;
    border-top: 1px solid var(--of-rahmen);
    padding-top: 14px;
}
.outfit-nachbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--of-blau);
    border-radius: 6px;
    color: var(--of-blau);
    text-decoration: none;
    font-size: 0.9em;
}
.outfit-nachbar:hover { background: var(--of-blau); color: #fff; }
.outfit-nachbar .pfeil { font-size: 1.3em; line-height: 1; }
.outfit-nachbar-nach { margin-left: auto; }

@media (min-width: 900px) {
    .outfit-haupt { flex-direction: row; align-items: flex-start; }
    .outfit-bild  { flex: 0 0 42%; }
    .outfit-spalte { flex: 1; }
    .outfit-kopf h1 { font-size: 1.8em; }
}

/* ============================================================
   Raster aus Outfit-Karten (Uebersicht, „Aehnliche Outfits")
   ============================================================ */
.outfit-raster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* auch bei 360 px zwei Spalten */
    gap: 10px;
    margin: 0;
    padding: 0;
}
@media (min-width: 700px)  { .outfit-raster { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1000px) { .outfit-raster { grid-template-columns: repeat(4, 1fr); } }

.outfit-karte {
    background: #fff;
    border: 1px solid var(--of-rahmen);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}
.outfit-karte:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.outfit-karte-bild { display: block; }
.outfit-karte img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;        /* Seitenverhaeltnis der Bilddateien */
    object-fit: cover;
    display: block;
}
.outfit-karte-fuss {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85em;
}
.outfit-karte-name {
    color: var(--of-text);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.outfit-karte-name:hover { color: var(--of-blau); }
.outfit-karte-quelle { color: var(--of-text-soft); font-size: 0.9em; }
@media (max-width: 576px) {
    .outfit-karte-fuss { padding: 6px 8px; font-size: 0.78em; }
}

/* ============================================================
   Uebersicht /outfits
   ============================================================ */
.uebersicht {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 15px 20px;
}
.uebersicht-kopf h1 { font-size: 1.6em; margin: 0 0 6px; }
.uebersicht-kopf .lead { color: var(--of-text-soft); margin: 0 0 10px; }

/* Bootstraps .lead ist 1.25rem und liest sich neben einer 1.6em-Ueberschrift
   fast wie eine zweite Ueberschrift. Auf den neuen Seiten deshalb kleiner. */
.uebersicht-kopf .lead,
.rw-seite .lead,
.fehlerseite .lead { font-size: 1.02em; line-height: 1.6; }

.uebersicht-filter { margin: 14px 0 20px; }
.filterzeile { margin-bottom: 12px; }
.filterzeile-titel {
    font-size: 0.95em;
    color: var(--of-text-soft);
    margin: 0 0 6px;
    font-weight: 600;
}
.filterzeile-liste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0;
}
.filterchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--of-rahmen);
    border-radius: 20px;
    background: #fff;
    color: var(--of-text);
    text-decoration: none;
    font-size: 0.88em;
}
.filterchip:hover { border-color: var(--of-blau); color: var(--of-blau); }
.filterchip-zahl { color: var(--of-text-soft); font-size: 0.9em; }
.filterchip-aktiv {
    background: var(--of-blau);
    border-color: var(--of-blau);
    color: #fff;
}
.filterchip-aktiv:hover { background: var(--of-blau-dunkel); color: #fff; }
.filterchip-x { font-size: 1.1em; line-height: 1; }
.filter-zuruecksetzen { margin: 8px 0 0; font-size: 0.9em; }

.uebersicht-zahl {
    font-size: 1.05em;
    color: var(--of-text-soft);
    font-weight: 600;
    margin: 0 0 12px;
}

/* ============================================================
   Fehlerseite 404
   ============================================================ */
.fehlerseite {
    max-width: 760px;
    margin: 0 auto;
    padding: 30px 15px 40px;
}
.fehlerseite h1 { font-size: 1.6em; margin: 0 0 8px; }
.fehlerseite .lead { color: var(--of-text-soft); }
.fehler-adresse {
    background: var(--of-flaeche);
    border: 1px solid var(--of-rahmen);
    border-radius: 6px;
    padding: 8px 10px;
    overflow-wrap: anywhere;
    font-size: 0.9em;
}
.fehler-wege { list-style: none; padding: 0; margin: 16px 0 0; }
.fehler-wege li { margin-bottom: 4px; }
.fehler-wege a {
    display: inline-block;
    padding: 11px 4px;
    color: var(--of-blau);
    text-decoration: none;
}
.fehler-wege a:hover { text-decoration: underline; }

/* ============================================================
   Transparenzseite /reichweite
   ============================================================ */
.rw-seite {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 15px 30px;
}
.rw-seite h1 { font-size: 1.6em; margin: 0 0 8px; }
.rw-seite h2 { font-size: 1.25em; margin: 28px 0 8px; }
.rw-seite h3 { font-size: 1.05em; margin: 20px 0 6px; color: var(--of-blau-dunkel); }
.rw-seite .lead { color: var(--of-text); }
.rw-stand { color: var(--of-text-soft); font-size: 0.9em; }

.rw-kacheln {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* bei 360 px zwei Kacheln */
    gap: 10px;
}
@media (min-width: 700px)  { .rw-kacheln { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1000px) { .rw-kacheln { grid-template-columns: repeat(4, 1fr); } }

.rw-kachel {
    background: var(--of-flaeche);
    border: 1px solid var(--of-rahmen);
    border-radius: 8px;
    padding: 12px;
}
.rw-kachel h3 {
    margin: 4px 0 2px;
    font-size: 0.92em;
    color: var(--of-text);
}
.rw-kachel p {
    margin: 0;
    font-size: 0.8em;
    color: var(--of-text-soft-flaeche);   /* Kachel steht auf #f8f9fa */
}
.rw-zahl {
    display: block;
    font-size: 1.7em;
    font-weight: 700;
    color: var(--of-blau);
    line-height: 1.1;
}

/* Tabellen: eigener Scrollbereich, damit die Seite bei 360 px nicht waagerecht
   ueberlaeuft. */
.tabelle-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 12px;
}
.rw-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    min-width: 460px;
}
.rw-tabelle th,
.rw-tabelle td {
    padding: 7px 9px;
    border-bottom: 1px solid var(--of-rahmen);
    text-align: left;
    white-space: nowrap;
}
.rw-tabelle thead th {
    background: var(--of-flaeche);
    font-weight: 600;
    color: var(--of-text);
}
.rw-tabelle td code { font-size: 0.95em; color: var(--of-text); }
.rw-ja      { color: #28a745; }
.rw-offen   { color: var(--of-text-soft); }
.rw-kennung { color: var(--of-text-soft); }
.rw-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--of-flaeche);
    border: 1px solid var(--of-rahmen);
    font-size: 0.9em;
}

/* Kurven-Kaesten: feste Hoehe, weil Chart.js mit maintainAspectRatio:false
   arbeitet — ohne feste Hoehe waechst das Canvas bei jedem Resize weiter. */
.rw-chart-box {
    position: relative;
    height: 260px;
    max-width: 720px;
    padding: 6px;
    margin: 0 0 6px;
    border: 1px solid var(--of-rahmen);
    border-radius: 8px;
    background: #fff;
}
.rw-chart-box canvas { width: 100% !important; height: 100% !important; }
@media (min-width: 700px) { .rw-chart-box { height: 320px; } }

.rw-chart-hinweis {
    color: var(--of-text-soft);
    font-size: 0.85em;
    margin: 2px 0 8px;
}