/* ============================================================
   OutfitTor — BS3-Optik erhalten
   ============================================================
   Diese Datei wird auf der OEFFENTLICHEN Seite zwischen
   vendor/bootstrap-5.3/bootstrap.min.css und style.css geladen.

   WARUM ES SIE GIBT
   Die oeffentliche Seite lief bis 2026-09-06 auf Bootstrap 3.3.7 und benutzt
   davon genau drei Bausteine (.btn/.btn-primary/.btn-danger, .text-center,
   .lead). Alles andere kam aus Bootstraps Grundschrift und dessen Reboot —
   und genau die unterscheidet sich zwischen 3.3.7 und 5.3.3 erheblich
   (14 px vs. 16 px Grundschrift, 1.42857 vs. 1.5 Zeilenhoehe, unterstrichene
   Links, andere Ueberschriftengroessen, anderes <hr>, anderes <code>).

   Betreiber-Bedingung des Umstiegs: die Seite darf sich fuer Besucher
   OPTISCH NICHT VERAENDERN. Deshalb bildet diese Datei die BS3-Werte
   explizit nach, statt das Design umzubauen. Jede Regel traegt den Vermerk
   „BS3-Optik erhalten" und den Grund.

   WANN SIE WEG KANN
   Sobald das Frontend bewusst auf die BS5-Typografie umgestellt wird
   (eigenes Paket). Dann faellt diese Datei ersatzlos weg; style.css und
   seiten.css muessen dafuer neu abgenommen werden.

   Eigene Datei und nicht in style.css, weil style.css mit 989 Zeilen die
   Hausgrenze von 1000 (CLAUDE.md, 6) fast erreicht hat.
   ============================================================ */

/* ===== CI-Variablen — nicht aendern, Quelle: zentrale CLAUDE.md, 7 =====
   Nur die Variablen, KEINE Farbregeln: die Seite behaelt ihre gewachsenen
   Farben (#337ab7, #007bff, #d9534f). Der Block steht hier, damit kuenftige
   Bausteine dieselben Namen benutzen koennen wie der Admin (admin.css). */
:root{
  --ci-blau:#3768B4; --ci-blau-hover:#2C5493; --ci-blau-hell:#E8EFF9;
  --ci-dunkelblau:#095385; --ci-weiss:#FFFFFF; --ci-hellgrau:#F8F9FA;
  --ci-grau-rahmen:#DEE2E6; --ci-text:#444444;
  --ci-rot:#DC3545; --ci-gruen:#28A745;
}

/* ============================================================
   1. Wurzel und Grundschrift
   ============================================================ */

/* BS3-Optik erhalten: BS3 setzt html auf 10 px. Davon haengt jedes rem im
   Projekt ab (z. B. seiten.css „.lead 1.25rem"). BS5 laesst html beim
   Browser-Standard 16 px — ohne diese Zeile waeren alle rem-Werte 60 %
   groesser. Angenehmer Nebeneffekt: BS5s Reboot-Abstaende (1rem) fallen
   damit auf 10 px und treffen genau die BS3-Werte. */
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* BS3-Optik erhalten: Grundschrift. BS5 haette system-ui/16 px/1.5/#212529 —
   das vergroessert JEDEN Text der Seite und verschiebt jedes em-Mass in
   style.css und seiten.css. */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

/* ============================================================
   2. Links
   ============================================================ */

/* BS3-Optik erhalten: BS5 unterstreicht JEDEN Link und faerbt ihn #0d6efd.
   Die Seite lebt von untersteichungsfreien Links (Navigation, Karten,
   Fusszeile, Detailseite). */
a {
    color: #337ab7;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline;
}
a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

/* ============================================================
   3. Ueberschriften und Fliesstext
   ============================================================ */

/* BS3-Optik erhalten: BS5 rechnet h1–h4 mit vw-Anteilen (RFS) — die
   Schriftgroesse haenge dann an der Fensterbreite. BS3 hat feste Groessen,
   Gewicht 500 und Zeilenhoehe 1.1. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; }
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

/* BS3-Optik erhalten: Absatzabstand (BS5: margin-bottom 1rem — bei 10 px
   Wurzel derselbe Wert, die Zeile steht der Vollstaendigkeit halber hier). */
p { margin: 0 0 10px; }

/* BS3-Optik erhalten: BS3 .lead ist 16 px (ab 768 px 21 px), BS5 1.25rem.
   seiten.css verkleinert .lead auf drei Seiten ohnehin auf 1.02em — die
   Grundgroesse zaehlt trotzdem, weil em darauf aufbaut. */
.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}
@media (min-width: 768px) { .lead { font-size: 21px; } }

/* BS3-Optik erhalten: BS3 85 %, BS5 .875em. Betrifft die Urheberzeilen
   unter jeder Outfit-Karte. */
small, .small { font-size: 85%; }

/* BS3-Optik erhalten: BS5 setzt „bolder", BS3 fest 700. */
b, strong { font-weight: 700; }

/* BS3-Optik erhalten: BS5 setzt ol/ul auf padding-left 2rem, BS3 laesst den
   Browser-Standard (40 px) stehen. Betrifft die Aufzaehlungen in Erklaerung,
   FAQ und Reichweite. */
ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px;
}
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }

/* BS3-Optik erhalten: BS5 gibt <figure> unten 1rem Abstand, BS3 keinen. */
figure { margin: 0; }

/* ============================================================
   4. Trennlinie
   ============================================================ */

/* BS3-Optik erhalten: BS5 zeichnet <hr> als currentColor mit opacity .25
   (also grau-schwarz und halbtransparent), BS3 als 1 px #eee. Die Fusszeile
   steht auf jeder Seite und traegt genau so eine Linie. */
hr {
    height: 0;
    box-sizing: content-box;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    color: inherit;
    opacity: 1;
}

/* ============================================================
   5. Tabellen und Formularbeschriftungen
   ============================================================ */

/* BS3-Optik erhalten: BS5 erbt die Ausrichtung der Kopfzelle vom Elternteil
   (text-align: -webkit-match-parent) — in einer zentrierten Karte waeren die
   Tabellenkoepfe der Reichweite-Seite dann mittig statt links. */
th { text-align: left; }

/* BS3-Optik erhalten: BS5 kennt keine Grundregel fuer <label>; BS3 macht es
   fett und blockartig. Die Filterkaestchen des Konfigurators haengen daran. */
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* BS3-Optik erhalten: BS3 (normalize 3.0) vererbt Farbe UND Schrift an
   Formularelemente, BS5 nur Familie, Groesse und Zeilenhoehe. Chrome zeichnet
   ein natives Kaestchen in der geerbten `color` — ohne diese Zeile bekommen
   die 60 Filterkaestchen einen schwarzen statt eines #333-Rahmens. */
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

/* BS3-Optik erhalten: BS3 setzt Kaestchen und Radios 4 px tiefer und nimmt
   ihnen die geerbte Zeilenhoehe; BS5 laesst beides beim Reboot-Wert. Das
   verschiebt jedes Kaestchen im Konfigurator um 4 px nach oben. */
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    margin: 4px 0 0;
    line-height: normal;
}

/* ============================================================
   6. <code>
   ============================================================ */

/* BS3-Optik erhalten: BS3 gibt <code> einen rosa Kasten mit rotem Text,
   BS5 nur pinke Schrift ohne Flaeche. Auf /reichweite steht „robots.txt"
   viermal als <code>. */
code, kbd, pre, samp {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    word-wrap: normal;
}

/* ============================================================
   7. Schaltflaechen
   ============================================================ */

/* BS3-Optik erhalten: BS5 .btn ist 1rem gross, hat .375rem/.75rem Innenrand
   und .375rem Ecken; BS3 14 px, 6/12 px und 4 px. Die Navigation im Kopf
   besteht aus sechs solchen Knoepfen. */
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
/* BS3-Optik erhalten: BS3 nimmt einem Knopf beim Ueberfahren ausdruecklich
   die Unterstreichung. Ohne diese Zeile bekaemen die sechs
   Navigationsknoepfe beim Hover einen Unterstrich (BS5 unterstreicht Links). */
.btn:hover,
.btn:focus,
.btn.focus {
    color: #333;
    text-decoration: none;
}
.btn:focus,
.btn:focus-visible {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    box-shadow: none;
}
.btn:active,
.btn.active {
    background-image: none;
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

/* BS3-Optik erhalten: BS5-Blau ist #0d6efd, BS3-Blau #337ab7 — der Ton der
   Navigationsknoepfe. Gleiches fuer Rot (#dc3545 vs. #d9534f). */
.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}