/* ============================================================================
   FS-PAGES — Unterseiten auf EIN Format (Sitzung SEITEN, 20.08.2026)
   ----------------------------------------------------------------------------
   Zustaendigkeit dieser Datei: Rechtstexte + Infoseiten (.link-content),
   Kontaktformular, Login/Registrierung/Passwort/Newsletter-Formulare,
   Seitentitel, Breadcrumb. NICHT hier: Header, Footer, Menue, Banner,
   Startseite, Blog, Produktkarten, Warenkorb, Checkout.

   Ladereihenfolge (template.xml): ... fs-blog.css -> fs-pages.css (LETZTE
   Datei — bei gleicher Spezifitaet gewinnt sie gegen alles davor. Deshalb
   ist enges Scoping hier doppelt wichtig, Hinweis FOOTER 20.08.).

   ZWEI TRAGENDE SCOPES — NICHT "AUFRAEUMEN":
   1. Der #content-Praefix vor form[action$="/Newsletter"] ist TRAGEND:
      das Footer-Newsletter-Formular postet auf DIESELBE Route, liegt aber
      ausserhalb von #content. Faellt der Praefix weg, greifen diese Regeln
      auf den Footer durch (nachgemessen von FOOTER, 20.08.).
   2. #content:not(:has(#fs-geschmacksfinder)) = "nicht die Startseite".
      Die Startseite hat ebenfalls einen div.container.link-content (OPC-
      Inhalt + SEO-Text, h1 inklusive). Der Finder-Anker existiert nur dort
      (page/index.tpl) und ist der etablierte Startseiten-Marker
      (Fund MENUE, Muster BANNER/Abschnitt H).

   REGELN (wie fs-redesign.css):
   - Kein Link, kein Markup, keine Ueberschriftenebene wird angefasst — nur CSS.
   - Kantig: border-radius 0. Keine Pillen, keine Glow-Effekte.
   - Aktive/Fokus-Zustaende NIE nur ueber Farbe (Yunus ist farbenblind):
     immer zusaetzlich Linie, Form oder Outline.
   - Display-Schrift "FS Display" = Anton, NUR Gewicht 400 (Entscheidung
     Yunus 20.08., A/B-Vergleich; andere Gewichte werden matschig gefettet).
     Fliesstext-Token "FS Body" = DM Sans variable.
   - Formular-Regeln greifen NUR in den benannten Formularen — nie global
     auf .form-control (Warenkorb/Checkout bleiben beim Theme-Stil).
   - Floating-Labels (label-slide): Padding der Felder NICHT veraendern,
     die Label-Mechanik des Themes haengt daran. Nur Farben/Kanten/Schrift.
   ============================================================================ */

/* Farbwelt = das VERBINDLICHE Farbsystem (Yunus, 20.08. abends, via KONTAKT/
   Kaufprozess-Sitzung; Referenz fs-katalog.css): Flaechen #f6f5f3, Kanten
   #d9d9de, Haarlinien #e4e4e7, Koepfe #111114, CTA #c90f88/#830779, Deko
   #E5169F. Die frueheren Toene #e9e6ec/#d9d5de/#3a3640 sowie das alte Grau
   6f6a77 hatten einen Lila-Stich (Blau-Kanal > Rot-Kanal) und sind verbannt. */
#content {
    --fsp-text:       #111114;
    --fsp-text-weich: #3d3d42;
    --fsp-grau:       #6b6b70;
    --fsp-linie:      #e4e4e7;
    --fsp-rand:       #d9d9de;   /* Feldrahmen, etwas kraeftiger als Hairline */
    --fsp-akzent:     #e5169f;   /* Deko + Fokus-Signal (wie fs-katalog-Selects) */
    --fsp-akzent-dkl: #c90f88;   /* CTA/Hover/Links, kontrastsicher (5,37:1, F26) */
}

/* ============================================================================
   P1 — SEITENTITEL: ein Format fuer alle Unterseiten
   Die Titel sitzen je Seitentyp woanders — hier bewusst ENUMERIERT statt
   pauschal ".link-content h1" (das traefe die Startseiten-SEO-H1):
     .index-heading-wrapper h1  = AGB, Widerruf, Batterie, Zahlarten, Versand
     #content > .container > h1 = Newsletter, News
     h1.h2                      = Registrieren, Vergleichsliste
     .title.h2                  = Kontakt (die Seite hat kein h1)
     .link-content > div > h1   = Impressum
     #data-privacy h1           = Datenschutzerklaerung
     #account .main-wrapper-max > h1 = Mein Konto
   Anton ("FS Display", 400), Versalien, kurzer Magenta-Unterstrich.
   ============================================================================ */

#content .index-heading-wrapper h1,
#content > .container > h1,
#content h1.h2,
#content .title.h2,
#content:not(:has(#fs-geschmacksfinder)) .link-content > div > h1,
#content #data-privacy h1,
#content #account .main-wrapper-max > h1 {
    font-family: "FS Display", "FS Text", sans-serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 400;
    letter-spacing: .015em;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--fsp-text);
    margin: 6px 0 18px;
    padding-bottom: 14px;
    position: relative;
}

/* Der Unterstrich ist ein ::after, kein border — so bleibt er kurz (56px)
   und wirkt als Marke, nicht als Trennlinie ueber die volle Breite. */
#content .index-heading-wrapper h1::after,
#content > .container > h1::after,
#content h1.h2::after,
#content .title.h2::after,
#content:not(:has(#fs-geschmacksfinder)) .link-content > div > h1::after,
#content #data-privacy h1::after,
#content #account .main-wrapper-max > h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    background: var(--fsp-akzent);
}

/* Mein Konto ist die einzige ZENTRIERTE Ueberschrift (Theme zentriert
   #account) — dort muss auch der Strich mittig sitzen, sonst klebt er
   verloren am linken Containerrand. */
#content #account .main-wrapper-max > h1::after {
    left: 50%;
    margin-left: -28px;
}

/* ============================================================================
   P2 — LESETYPOGRAFIE: Rechtstexte + Infoseiten (.link-content)
   AGB/Datenschutz sind lange Fliesstexte (p, b, li, h2/h3). Ziel: ruhige,
   lesbare Seite im gleichen Schriftbild wie der Rest des Redesigns (DM Sans
   via "FS Body"). KEINE Breiten-/Layouteingriffe — FAQ, Wir-ueber-uns und
   der Nikotin-Rechner bringen eigenes div-Markup mit, das strukturell
   unangetastet bleibt. Startseite per Guard ausgenommen (s. Kopf, Punkt 2).
   ============================================================================ */

#content:not(:has(#fs-geschmacksfinder)) .link-content {
    font-family: "FS Body", "FS Text", sans-serif;
    color: var(--fsp-text-weich);
}

#content:not(:has(#fs-geschmacksfinder)) .link-content p,
#content:not(:has(#fs-geschmacksfinder)) .link-content li {
    line-height: 1.65;
}

#content:not(:has(#fs-geschmacksfinder)) .link-content p {
    margin-bottom: 1.05rem;
}

#content:not(:has(#fs-geschmacksfinder)) .link-content ul,
#content:not(:has(#fs-geschmacksfinder)) .link-content ol {
    margin-bottom: 1.05rem;
    padding-left: 1.35rem;
}

#content:not(:has(#fs-geschmacksfinder)) .link-content li { margin-bottom: .3rem; }

#content:not(:has(#fs-geschmacksfinder)) .link-content b,
#content:not(:has(#fs-geschmacksfinder)) .link-content strong {
    font-weight: 700;
    color: var(--fsp-text);
}

/* Zwischenueberschriften: DM Sans, kraeftig, klar gestuft — bewusst NICHT
   die Display-Schrift, damit der Seitentitel die einzige laute Stimme bleibt. */
#content:not(:has(#fs-geschmacksfinder)) .link-content h2 {
    font-family: "FS Body", "FS Text", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--fsp-text);
    margin: 2.2rem 0 .8rem;
}

#content:not(:has(#fs-geschmacksfinder)) .link-content h3 {
    font-family: "FS Body", "FS Text", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--fsp-text);
    margin: 1.8rem 0 .6rem;
}

/* Links im Fliesstext: Magenta UND Unterstreichung (nie nur Farbe) */
#content:not(:has(#fs-geschmacksfinder)) .link-content p a,
#content:not(:has(#fs-geschmacksfinder)) .link-content li a {
    color: var(--fsp-akzent-dkl);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#content:not(:has(#fs-geschmacksfinder)) .link-content p a:hover,
#content:not(:has(#fs-geschmacksfinder)) .link-content li a:hover {
    color: var(--fsp-text);
    text-decoration-thickness: 2px;
}

/* Tabellen (Versand-/Zahlartenuebersichten): Hairlines statt Boxen */
#content:not(:has(#fs-geschmacksfinder)) .link-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2rem;
}

#content:not(:has(#fs-geschmacksfinder)) .link-content table th,
#content:not(:has(#fs-geschmacksfinder)) .link-content table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--fsp-linie);
    text-align: left;
    vertical-align: top;
}

#content:not(:has(#fs-geschmacksfinder)) .link-content table th {
    font-weight: 700;
    color: var(--fsp-text);
    border-bottom: 2px solid var(--fsp-text);
}

#content:not(:has(#fs-geschmacksfinder)) .link-content hr {
    border: 0;
    border-top: 1px solid var(--fsp-linie);
    margin: 2rem 0;
}

/* Datenschutzerklaerung liegt in einem Bootstrap-.well (grauer Kasten mit
   Rundung) — auf Redesign-Linie bringen: weiss, kantig, ohne Kastenoptik. */
#content #data-privacy.well {
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: "FS Body", "FS Text", sans-serif;
    color: var(--fsp-text-weich);
}

#content #data-privacy h2 {
    font-family: "FS Body", "FS Text", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--fsp-text);
    margin: 2.2rem 0 .8rem;
}

#content #data-privacy p { line-height: 1.65; }

/* ============================================================================
   P3 — FORMULAR-GRUNDSTIL (gescopte Formulare, kantig)
   Gilt NUR in: Kontakt, Login, Registrierung, Passwort-vergessen, Newsletter-
   Seite. Bewusst NICHT global — Warenkorb/Checkout bleiben beim Theme-Stil.
   Der #content-Praefix ist TRAGEND (siehe Kopf, Punkt 1).
   ============================================================================ */

#content .contact-form .form-control,
#content .login-form .form-control,
#content .register-form .form-control,
#content form[action$="/Passwort-vergessen"] .form-control,
#content form[action$="/Newsletter"] .form-control {
    border-radius: 0;
    border: 1px solid var(--fsp-rand);
    background: #ffffff;
    color: var(--fsp-text);
    font-family: "FS Body", "FS Text", sans-serif;
    box-shadow: none;
    transition: border-color .15s ease;
}

/* Fokus: schwarze Kante (Form-Signal) + dezente Magenta-Aussenlinie (Farbe) */
#content .contact-form .form-control:focus,
#content .login-form .form-control:focus,
#content .register-form .form-control:focus,
#content form[action$="/Passwort-vergessen"] .form-control:focus,
#content form[action$="/Newsletter"] .form-control:focus {
    border-color: var(--fsp-text);
    outline: 2px solid var(--fsp-akzent);
    outline-offset: 1px;
    box-shadow: none;
}

/* Labels (Floating-Labels des Themes): leiser, gesperrt, DM Sans */
#content .contact-form .col-form-label,
#content .login-form .col-form-label,
#content .register-form .col-form-label,
#content form[action$="/Passwort-vergessen"] .col-form-label,
#content form[action$="/Newsletter"] .col-form-label {
    font-family: "FS Body", "FS Text", sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fsp-grau);
}

/* Nachricht-Feld: genug Raum zum Schreiben */
#content .contact-form textarea.form-control { min-height: 170px; }

/* Trennlinie im Kontaktformular */
#content .contact-form hr.contact-form-hr {
    border: 0;
    border-top: 1px solid var(--fsp-linie);
    margin: 1.4rem 0;
}

/* Fieldset-Legenden (Registrierung): gleiche Stimme wie die P2-h2 */
#content .register-form legend,
#content .register-form h2 {
    font-family: "FS Body", "FS Text", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--fsp-text);
    border-bottom: 1px solid var(--fsp-linie);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

/* Buttons in den gescopten Formularen: schwarz, kantig, gesperrte Versalien.
   Hover/Fokus: Magenta UND sichtbare Outline (nie nur Farbe). */
#content .contact-form .btn-primary,
#content .login-form .btn-primary,
#content .register-form .btn-primary,
#content form[action$="/Passwort-vergessen"] .btn-primary,
#content form[action$="/Newsletter"] .btn-primary {
    border-radius: 0;
    background: var(--fsp-text);
    border: 1px solid var(--fsp-text);
    color: #ffffff;
    font-family: "FS Body", "FS Text", sans-serif;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: .7rem;
    padding-bottom: .7rem;
}

#content .contact-form .btn-primary:hover,
#content .login-form .btn-primary:hover,
#content .register-form .btn-primary:hover,
#content form[action$="/Passwort-vergessen"] .btn-primary:hover,
#content form[action$="/Newsletter"] .btn-primary:hover {
    background: var(--fsp-akzent-dkl);
    border-color: var(--fsp-akzent-dkl);
    color: #ffffff;
}

#content .contact-form .btn-primary:focus-visible,
#content .login-form .btn-primary:focus-visible,
#content .register-form .btn-primary:focus-visible,
#content form[action$="/Passwort-vergessen"] .btn-primary:focus-visible,
#content form[action$="/Newsletter"] .btn-primary:focus-visible {
    outline: 2px solid var(--fsp-akzent);
    outline-offset: 2px;
}

/* Sekundaere Knoepfe (z. B. "Registrieren" auf der Login-Seite): Outline-Stil */
#content .login-form .btn-secondary,
#content .register-wrapper .btn-secondary {
    border-radius: 0;
    background: #ffffff;
    border: 1px solid var(--fsp-text);
    color: var(--fsp-text);
    font-family: "FS Body", "FS Text", sans-serif;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#content .login-form .btn-secondary:hover,
#content .register-wrapper .btn-secondary:hover {
    background: var(--fsp-text);
    color: #ffffff;
}

/* ============================================================================
   P4 — KONTAKTSEITE: leere Spalte aufloesen, Formular mittig
   Ist-Zustand: 6/6-Grid, linke Spalte ist LEER (nur Whitespace) — das Formular
   haengt rechts im Nichts. CSS-only-Loesung: die leere Spalte wird nur dann
   ausgeblendet, wenn sie wirklich keine Elemente enthaelt (:not(:has(*))) —
   pflegt jemand spaeter Kontaktdaten ein, erscheinen sie automatisch wieder.
   Die Formularspalte wird dann mittig begrenzt (lesbare Breite).
   ============================================================================ */

#content .row:has(> .col form.contact-form) > .col:first-child:not(:has(*)) {
    display: none;
}

/* ACHTUNG Selektor-Falle: :has() darf NICHT in :has() verschachtelt werden
   (".row:has(.col:not(:has(*)))" ist ungueltig und wird verworfen). Deshalb
   Geschwister-Logik: die Formularspalte direkt HINTER der leeren Spalte. */
#content .row > .col:first-child:not(:has(*)) + .col:has(form.contact-form) {
    flex: 0 0 auto;
    width: min(680px, 100%);
    margin-inline: auto;
}

/* ============================================================================
   P5 — BREADCRUMB: leise Wegmarke im gleichen Schriftbild, ueberall
   Nur Typografie/Farbe — Position, Abstaende und Markup bleiben beim Theme.
   (Von HEADER freigegeben, 20.08.)
   ============================================================================ */

.breadcrumb-wrapper .breadcrumb {
    font-family: "FS Body", "FS Text", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.breadcrumb-wrapper .breadcrumb .breadcrumb-link,
.breadcrumb-wrapper .breadcrumb .breadcrumb-item {
    color: #6b6b70;
}

.breadcrumb-wrapper .breadcrumb .breadcrumb-link:hover {
    color: #111114;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.breadcrumb-wrapper .breadcrumb .breadcrumb-item.active {
    color: #111114;
}

/* P5a — BREADCRUMB MOBIL: 12px statt 11px und 3px vom Header geloest
   (Freigabe Yunus 30.08., Variante A nach Vorher/Nachher-Vergleich) */
@media (max-width: 767.98px) {
    .breadcrumb-wrapper {
        margin-top: 3px;
    }
    .breadcrumb-wrapper .breadcrumb {
        font-size: 12px;
    }
}

/* Bewegung nur, wenn der Nutzer sie zulaesst */
@media (prefers-reduced-motion: reduce) {
    #content .contact-form .form-control,
    #content .login-form .form-control,
    #content .register-form .form-control { transition: none; }
}