/* =========================================================
   FA Blog Kit - Stufe 1
   Brand Kit FABRAND2026 auf den Blog-Namespace .fa-page

   Wird ueber fa-blog-kit-switch.php ausgeliefert, nur bei ?fakit=1.
   Laedt als letztes Stylesheet, ueberschreibt also style.css des
   Child-Themes, ohne sie zu aendern.

   Stand: 30.08.2026
   In dieser Stufe NICHT enthalten (brauchen eine Entscheidung):
   Verlaeufe, dunkle Invert-Sektion, die Seitenvarianten
   traktor/vanlife/boot, Typo-Raster, Abstandsleiter, Breakpoints.
   ========================================================= */


/* ---------------------------------------------------------
   1. Schriften

   Die WOFF2 liegen bereits auf derselben Domain, im Shop-Template.
   Kein zweiter Upload noetig, kein CORS - gleiche Herkunft.
   Gewichtsspanne beginnt bei 400: die Variable Fonts haben echte
   Leichtschnitte, und das Theme setzt an mehreren Stellen duenne
   Gewichte, die mit einer echten Schrift hauchduenn wuerden.
   --------------------------------------------------------- */

@font-face {
    font-family: 'Archivo Narrow';
    src: url('/templates/FABRAND2026/fonts/brand/archivo-narrow-latin.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo Narrow';
    src: url('/templates/FABRAND2026/fonts/brand/archivo-narrow-latin-ext.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/templates/FABRAND2026/fonts/brand/plex-sans-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/templates/FABRAND2026/fonts/brand/plex-sans-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/templates/FABRAND2026/fonts/brand/plex-mono-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/templates/FABRAND2026/fonts/brand/plex-mono-500-latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------------------------------------------------------
   2. Tokens

   Die zwoelf Blog-Variablen bekommen Kit-Werte. Damit ziehen
   alle Regeln mit, die ueber var() gehen - rund 63 Zeilen in
   style.css. Die hartkodierten Stellen kommen in Abschnitt 4.
   --------------------------------------------------------- */

:root {
    /* Kit-Palette, damit sie in den Regeln unten benannt werden kann */
    --kit-bg:        #FFFFFF;
    --kit-surf:      #F7F5F3;
    --kit-fg:        #232125;
    --kit-mut:       #626262;
    --kit-line:      #DDDAD6;
    --kit-line-2:    #B8B7B8;
    --kit-acc:       #A2601F;
    --kit-acc-ink:   #FFFFFF;
    --kit-acc-deep:  #C4672F;
    --kit-acc-soft:  #D67E29;
    --kit-brand:     #3B6443;
    --kit-brand-dark:#3A5940;
    --kit-olive:     #8EAC41;
    --kit-lime:      #B6C939;
    --kit-lime-soft: #DCE189;
    --kit-neg:       #A32C1E;

    --kit-display: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
    --kit-body:    'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
    --kit-mono:    'IBM Plex Mono', Consolas, ui-monospace, monospace;
}

.fa-page {
    /* Blog-Variablen auf Kit umstellen */
    --fa-text:    var(--kit-fg);
    --fa-heading: var(--kit-fg);
    --fa-muted:   var(--kit-mut);
    --fa-border:  var(--kit-line);
    --fa-bg:      var(--kit-bg);
    --fa-soft:    var(--kit-surf);
    --fa-accent:  var(--kit-acc);

    /* Flaechen-Hover. Als TEXTfarbe ist dieser Ton zu schwach (3,94:1) -
       der Text-Hover wird in Abschnitt 5 gesondert gesetzt. */
    --fa-accent-hover: var(--kit-acc-deep);

    --fa-radius: 14px;
    --fa-shadow: 0 1px 2px rgba(35,33,37,.06), 0 2px 8px rgba(35,33,37,.06);
}


/* ---------------------------------------------------------
   3. Schriftrollen

   Bewusst kein Sternselektor: der wuerde Icon-Elemente treffen.
   Gemessen wurde zwar keine FontAwesome-Nutzung innerhalb von
   .fa-page, aber die Icon-Schrift des Themes wird ausgenommen,
   damit aus einem Symbol kein leeres Kaestchen wird.
   --------------------------------------------------------- */

.fa-page {
    font-family: var(--kit-body) !important;
}

.fa-page h1,
.fa-page h2,
.fa-page h3,
.fa-page h4,
.fa-page h5,
.fa-page h6,
.fa-page .fa-h1,
.fa-page .fa-h2,
.fa-page .fa-step__title,
.fa-page .fa-author-card__name,
.fa-page details.fa-faq__item summary,
.fa-page th {
    font-family: var(--kit-display) !important;
}

/* Icons behalten ihre eigene Schrift. */
.fa-page i,
.fa-page [class^="wd-icon"],
.fa-page [class*=" wd-icon"],
.fa-page [class^="woodmart-font"],
.fa-page [class*=" woodmart-font"] {
    font-family: inherit;
}

/* Gewicht 800 kennt keine der beiden Familien - IBM Plex Sans
   endet bei 700, und das Kit erlaubt fuer die Displayschrift
   ohnehin nur 600 und 700. */
.fa-page .fa-step__nr,
.fa-page .fa-step__title,
.fa-page details.fa-faq__item summary,
.fa-page .fa-quote,
.fa-page .fa-hero-quote,
.fa-page .fa-hero-badge,
.fa-page .fa-checklist li::before,
.fa-page .fa-selected-text,
.fa-page .fa-spruchbtn {
    font-weight: 700 !important;
}

/* Masse, Belegnummern und Farbnummern in Mono mit gleicher
   Ziffernbreite - Kit-Pflicht, im Blog bisher nirgends gesetzt. */
.fa-page .fa-mono,
.fa-page .fa-table td.fa-mono {
    font-family: var(--kit-mono) !important;
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------
   4. Die drei Orangetoene zusammenfuehren

   Der Blog fuehrt parallel #f49b2a (Token), #ff6a00 (roh) und
   #e07b39 (Vanlife). Wer nur das Token tauscht, faerbt die
   Haelfte um und laesst Schatten, Tints und Rahmen auf dem
   Altton stehen. Genau der Fehler aus dem Shop.
   --------------------------------------------------------- */

/* Button: Schatten hing auf #ff6a00, waehrend die Flaeche am Token hing. */
.fa-page .fa-cta,
.fa-page .fa-btn {
    background: var(--kit-acc) !important;
    color: var(--kit-acc-ink) !important;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(35,33,37,.06), 0 2px 8px rgba(35,33,37,.06) !important;
}

/* Hover: die Flaeche bleibt, weil weisser Text auf --acc-deep nur
   3,94:1 erreicht. Die Rueckmeldung kommt ueber Anhebung und Schatten. */
.fa-page .fa-cta:hover,
.fa-page .fa-btn:hover {
    background: var(--kit-acc) !important;
    box-shadow: 0 12px 28px rgba(35,33,37,.10) !important;
}

/* Kicker: Text und Flaeche wollten dieselbe Farbe aus zwei Quellen.
   Der Orange-Tint ergibt mit Orange-Text nur 4,36:1 - deshalb
   Flaeche auf --surf, damit sind es 4,57:1. */
.fa-page .fa-kicker {
    color: var(--kit-acc) !important;
    background: var(--kit-surf) !important;
    border-color: var(--kit-line) !important;
}

/* Schrittnummer und Markierungsbalken. */
.fa-page .fa-step__nr {
    color: var(--kit-acc) !important;
    border-color: var(--kit-line) !important;
    box-shadow: none !important;
}
.fa-page .fa-step::before {
    background: var(--kit-acc) !important;
}

.fa-page .fa-bullet,
.fa-page .fa-tip::before {
    background: var(--kit-acc) !important;
}

.fa-page details.fa-faq__item summary::after {
    color: var(--kit-acc) !important;
}

.fa-page .fa-author-card__avatar {
    border-color: var(--kit-acc) !important;
}

/* Pflichtfeldstern und Formularknopf standen auf #ff6a00 - 2,87:1. */
.fa-page .fa-req {
    color: var(--kit-acc) !important;
}
.fa-page .fa-cf7-btn {
    background: var(--kit-acc) !important;
    color: var(--kit-acc-ink) !important;
}
.fa-page .fa-cf7-btn:hover {
    background: var(--kit-acc) !important;
}

/* Fokusring des Formulars hing ebenfalls am alten Orange. */
.fa-page .fa-cf7-card input:focus,
.fa-page .fa-cf7-card select:focus,
.fa-page .fa-cf7-card textarea:focus,
.fa-page .fa-input:focus {
    border-color: var(--kit-acc) !important;
    box-shadow: 0 0 0 3px rgba(162,96,31,.20) !important;
    outline: none;
}


/* ---------------------------------------------------------
   5. Kontrast-Nacharbeiten

   Zehn Paare fallen schon im Ist-Zustand durch, acht davon hart.
   Die schwerste Stelle sind die Fliesstext-Links: Orange auf Weiss
   ergab 2,19:1.
   --------------------------------------------------------- */

/* Fliesstext-Links: 2,19:1 -> 4,97:1 */
.fa-page a:not(.fa-cta):not(.fa-btn) {
    color: var(--kit-acc) !important;
    text-decoration-color: rgba(162,96,31,.45) !important;
}

/* Link-Hover: --acc-deep waere als Textfarbe 3,94:1 und ist im Kit
   ausdruecklich als "kein Text" markiert. Deshalb das Markengruen,
   das 7,83:1 erreicht. */
.fa-page a:not(.fa-cta):not(.fa-btn):hover {
    color: var(--kit-brand-dark) !important;
    text-decoration-color: var(--kit-brand-dark) !important;
}

/* Eingabefelder: ein Rahmen, der Bedeutung traegt, braucht 3,0:1.
   --line schafft 1,39:1 und ist damit fuer Formularfelder zu schwach. */
.fa-page .fa-input,
.fa-page .fa-cf7-card input,
.fa-page .fa-cf7-card select,
.fa-page .fa-cf7-card textarea {
    border-color: var(--kit-mut) !important;
}

/* Abgeschalteter Knopf: opacity .55 ergab 2,21:1 bei weisser Schrift. */
.fa-page .fa-btn--disabled,
.fa-page .fa-btn--disabled:hover {
    opacity: 1 !important;
    background: var(--kit-surf) !important;
    color: var(--kit-mut) !important;
    border: 1px solid var(--kit-line-2) !important;
    box-shadow: none !important;
}

/* Sekundaerknopf: Kit schreibt fuer den Rahmen --line-2 vor. */
.fa-page .fa-btn--ghost {
    color: var(--kit-fg) !important;
    border-color: var(--kit-line-2) !important;
}

/* Zustands-Etiketten. Das Kit kennt keine Statusfarbe fuer "gut" -
   Gruen ist Markenfarbe, nicht Ampel. Alle drei bekommen dieselbe
   ruhige Flaeche; die Unterscheidung traegt der Text.
   Die Orange-Tints ergaben 4,25:1, das Statusgruen 4,47:1. */
.fa-page .fa-material-tag,
.fa-page .fa-material-tag--ideal,
.fa-page .fa-material-tag--gut,
.fa-page .fa-material-tag--special {
    background: var(--kit-surf) !important;
    color: var(--kit-fg) !important;
    border: 1px solid var(--kit-line) !important;
}

/* Fehlerzustand: Bootstrap-Rot durch die Kit-Fehlerfarbe ersetzen. */
.fa-page .wpcf7-not-valid,
.fa-page .fa-cf7-card .wpcf7-not-valid {
    border-color: var(--kit-neg) !important;
}
.fa-page .wpcf7-not-valid-tip {
    color: var(--kit-neg) !important;
}


/* ---------------------------------------------------------
   6. Lesebreite

   Der Fliesstext hatte bisher gar keine Begrenzung und lief ueber
   die volle Containerbreite. Das Kit setzt 68 Zeichen.
   Absaetze in Karten, Tabellen und Rasterzellen bleiben ausgenommen,
   sonst bricht das Layout dort.
   --------------------------------------------------------- */

.fa-page .fa-section > .fa-wrap > p,
.fa-page .fa-section > .fa-wrap > ul,
.fa-page .fa-section > .fa-wrap > ol {
    max-width: 68ch;
}

.fa-page .fa-hero p {
    max-width: 68ch;
}


/* ---------------------------------------------------------
   7. Formen

   Radien auf die Kit-Werte: 10 fuer Bedienelemente, 14 fuer Karten.
   999px (Pillen) ist bereits Kit-konform und bleibt.
   --------------------------------------------------------- */

.fa-page .fa-box,
.fa-page .fa-step,
.fa-page .fa-tip,
.fa-page details.fa-faq__item,
.fa-page .fa-highlights li,
.fa-page .fa-table-wrap {
    border-radius: 14px;
}

.fa-page .fa-cta,
.fa-page .fa-btn,
.fa-page .fa-input,
.fa-page .fa-media-tag,
.fa-page .fa-hero-badge {
    border-radius: 10px;
}


/* ---------------------------------------------------------
   8. Verlaeufe entfernen

   Das Kit verbietet Verlaeufe, Glas, Glow und 3D. Im Blog stecken
   26 Verlaufsdeklarationen, dazu zwei Dauer-Animationen, die einen
   Verlauf 26 Sekunden lang hin- und herschieben.
   Ersetzt wird jeweils durch den ruhigsten Ton des bisherigen
   Verlaufs, damit sich die Helligkeit der Flaeche kaum aendert.
   --------------------------------------------------------- */

/* Hero-Hintergrund: war ein sehr blasses Grau mit Dauerbewegung. */
.fa-page .fa-section.fa-hero--gradient {
    background: var(--kit-surf) !important;
    background-size: auto !important;
    animation: none !important;
}

/* Ablaufschritt. */
.fa-page .fa-step {
    background: var(--kit-bg) !important;
    border-color: var(--kit-line) !important;
    box-shadow: 0 1px 2px rgba(35,33,37,.06), 0 2px 8px rgba(35,33,37,.06) !important;
}

/* Hero-Karte: kraeftiges Beige-Braun. Wird zur ruhigen Flaeche;
   wo ein Bild drinsteckt, deckt es die Flaeche ohnehin ab. */
.fa-page .fa-hero-card {
    background: var(--kit-surf) !important;
    box-shadow: 0 12px 28px rgba(35,33,37,.10) !important;
}

/* Bildunterlagen. Das Kit erlaubt dunkle Flaechen fuer Bildunterlagen
   ausdruecklich - aber #0f172a ist ein Blauton und faellt unters
   Blau-Verbot. Deshalb der neutrale Kit-Dunkelton. */
.fa-page .fa-hero-card--photo,
.fa-page--traktor .fa-card__media {
    background: #2B292E !important;
}

/* Traktor: zwei Radialverlaufs-Ebenen ueber dem Hero. */
.fa-page--traktor .fa-hero--gradient::before,
.fa-page--traktor .fa-hero--gradient::after {
    background: none !important;
    content: none !important;
}

/* Vanlife: Hero mit Verlauf plus zwei Radialverlaufs-Ebenen,
   ebenfalls mit Dauerbewegung. */
.fa-page--vanlife .fa-hero--vanlife {
    background: var(--kit-surf) !important;
    background-size: auto !important;
    animation: none !important;
}
.fa-page--vanlife .fa-hero--vanlife::before,
.fa-page--vanlife .fa-hero--vanlife::after,
.fa-page--vanlife .fa-section--trail::before {
    background: none !important;
    content: none !important;
}

/* Verlaufs-Buttons in beiden Varianten. */
.fa-page--traktor .fa-btn--primary,
.fa-page--traktor .fa-btn--primary:hover,
.fa-page--vanlife .fa-btn--primary,
.fa-page--vanlife .fa-btn--primary:hover {
    background: var(--kit-acc) !important;
    color: var(--kit-acc-ink) !important;
}

/* Restliche Flaechenverlaeufe. */
.fa-page--traktor .fa-card__content,
.fa-page--boot .fa-material-card__header,
.fa-page--vanlife .fa-spruchbtn {
    background: var(--kit-bg) !important;
}


/* ---------------------------------------------------------
   9. Dunkle Sektion Kit-konform

   Der bisherige Ton #1f2a36 ist ein Blauton. Das Kit hat einen
   eigenen Dunkelton und klare Regeln fuer Text darauf.

   Wichtiger Bestandsfehler, der dabei mit aufgeraeumt wird:
   .fa-section--invert .fa-highlights li setzt --fa-heading als
   Textfarbe - also einen dunklen Ton auf dunklem Grund. Das war
   schon vorher praktisch unlesbar und faellt beim Token-Tausch
   nur staerker auf.
   --------------------------------------------------------- */

.fa-page .fa-section--invert,
.fa-page--vanlife .fa-section--invert {
    background: #2B292E !important;
    color: var(--kit-bg) !important;
}

.fa-page .fa-section--invert h1,
.fa-page .fa-section--invert h2,
.fa-page .fa-section--invert h3,
.fa-page .fa-section--invert p,
.fa-page .fa-section--invert li,
.fa-page .fa-section--invert strong,
.fa-page .fa-section--invert .fa-tip p,
.fa-page .fa-section--invert .fa-tip strong {
    color: var(--kit-bg) !important;
}

/* Die Merkmalskacheln behalten in der dunklen Sektion eine weisse
   Flaeche - .fa-highlights wird transparent gesetzt, die li darin
   aber nicht. Wer dort pauschal weissen Text setzt, schreibt weiss
   auf weiss. Deshalb bekommen die Kacheln dieselbe durchscheinende
   Flaeche wie .fa-box und .fa-step eine Zeile darueber. */
.fa-page .fa-section--invert .fa-highlights li {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(221,218,214,.28) !important;
    color: var(--kit-bg) !important;
}

/* Links auf dunklem Grund: --acc erreicht dort nur 2,90:1.
   Das Kit sieht dafuer den helleren Orangeton vor (4,71:1).
   Die beiden :not() muessen mit, sonst schlaegt die allgemeine
   Linkregel aus Abschnitt 5 diese hier - die kommt mit ihren
   zwei :not() auf eine hoehere Spezifitaet. */
.fa-page .fa-section--invert a:not(.fa-cta):not(.fa-btn),
.fa-page .fa-section--invert .fa-highlights a:not(.fa-cta):not(.fa-btn) {
    color: var(--kit-acc-soft) !important;
    text-decoration-color: var(--kit-acc-soft) !important;
}
.fa-page .fa-section--invert a:not(.fa-cta):not(.fa-btn):hover,
.fa-page .fa-section--invert .fa-highlights a:not(.fa-cta):not(.fa-btn):hover {
    color: var(--kit-lime) !important;
    text-decoration-color: var(--kit-lime) !important;
}

/* Knopf auf dunklem Grund: die bisherige Kombination war dunkler
   Text auf Orange (3,21:1). Weisser Text auf --acc ergibt 4,97:1
   und ist dieselbe Kombination wie ueberall sonst. */
.fa-page .fa-section--invert .fa-btn,
.fa-page .fa-section--invert .fa-cta,
.fa-page .fa-section--invert .fa-btn:hover,
.fa-page .fa-section--invert .fa-cta:hover {
    background: var(--kit-acc) !important;
    color: var(--kit-acc-ink) !important;
    box-shadow: none !important;
}

/* Sekundaerknopf auf dunklem Grund. */
.fa-page .fa-section--invert .fa-btn.fa-btn--ghost {
    color: var(--kit-bg) !important;
    border-color: var(--kit-line) !important;
}

/* Trenner und Kanten im dunklen Bereich. */
.fa-page .fa-section--invert .fa-box,
.fa-page .fa-section--invert .fa-step,
.fa-page .fa-section--invert .fa-tip,
.fa-page .fa-section--invert .fa-table,
.fa-page .fa-section--invert .fa-table th,
.fa-page .fa-section--invert .fa-table td {
    border-color: rgba(221,218,214,.28) !important;
}


/* ---------------------------------------------------------
   10. Seitenvarianten auf eine Palette bringen

   traktor, vanlife und boot hatten eigene Farbwelten. Nach
   Kit-Logik gibt es nur eine. Das Petrol der Vanlife-Seite faellt
   ausserdem unters Blau-Verbot und wird zum Markengruen.
   --------------------------------------------------------- */

.fa-page--vanlife,
.fa-page--traktor,
.fa-page--boot {
    --fa-text:    var(--kit-fg);
    --fa-heading: var(--kit-fg);
    --fa-muted:   var(--kit-mut);
    --fa-border:  var(--kit-line);
    --fa-bg:      var(--kit-bg);
    --fa-soft:    var(--kit-surf);
    --fa-accent:  var(--kit-acc);
    --fa-accent-hover: var(--kit-acc-deep);
    --fa-accent-2: var(--kit-brand);
}

/* Die Vanlife-Seite deklariert Manrope und Fraunces. Beide werden
   nirgends geladen - gemessen ueber alle 217 Seiten, kein einziger
   Treffer. Die Regel greift also ins Leere und faellt auf eine
   Systemschrift zurueck. Hier bekommt sie die Kit-Schriften. */
.fa-page--vanlife {
    font-family: var(--kit-body) !important;
}
.fa-page--vanlife h1,
.fa-page--vanlife h2,
.fa-page--vanlife h3 {
    font-family: var(--kit-display) !important;
}

/* Petrolreste, die als Rahmen und Kanten hartkodiert sind. */
.fa-page--vanlife .fa-spruchbtn,
.fa-page--vanlife .fa-input,
.fa-page--vanlife .fa-checklist li::before {
    border-color: var(--kit-line-2) !important;
}
.fa-page--vanlife .fa-checklist li::before,
.fa-page--vanlife .fa-steps-simple li::before {
    color: var(--kit-brand) !important;
}


/* ---------------------------------------------------------
   11. Nacharbeiten aus der Messung

   Drei Stellen, an denen die Regeln oben zu weit griffen. Alle drei
   sind beim Durchlauf ueber die 25 Seiten aufgefallen, nicht beim
   Schreiben - eigene !important-Regeln schlagen spezifischere
   Bestandsregeln, und das faellt erst am gerenderten Ergebnis auf.
   --------------------------------------------------------- */

/* (a) Der Sekundaerknopf traegt beide Klassen, .fa-btn und
   .fa-btn--ghost. Die Flaechenregel in Abschnitt 4 hat ihn deshalb
   mit eingefaerbt - orange Flaeche, aber weiterhin dunkler Text,
   3,21:1 auf 10 Seiten. Er bleibt transparent. */
.fa-page .fa-btn--ghost,
.fa-page .fa-btn--ghost:hover,
.fa-page .fa-cta.fa-btn--ghost {
    background: transparent !important;
    color: var(--kit-fg) !important;
    border: 1px solid var(--kit-line-2) !important;
    box-shadow: none !important;
}
.fa-page .fa-hero-card .fa-btn--ghost {
    background: var(--kit-bg) !important;
}
.fa-page .fa-section--invert .fa-btn--ghost {
    background: transparent !important;
    color: var(--kit-bg) !important;
    border-color: var(--kit-line) !important;
}

/* (b) Die Verlaufsentfernung setzt .fa-step auf Weiss. In der dunklen
   Sektion hat der Schritt aber eine durchscheinende Flaeche - sonst
   steht heller Text auf weissem Grund. */
.fa-page .fa-section--invert .fa-step,
.fa-page .fa-section--invert .fa-box {
    background: rgba(255,255,255,.06) !important;
}
.fa-page .fa-section--invert .fa-step__nr {
    background: rgba(255,255,255,.14) !important;
    color: var(--kit-bg) !important;
    border-color: rgba(221,218,214,.32) !important;
}
.fa-page .fa-section--invert .fa-step__title,
.fa-page .fa-section--invert .fa-step p {
    color: var(--kit-bg) !important;
}

/* (c) Der Kicker hat in Abschnitt 4 eine helle Flaeche bekommen.
   In der dunklen Sektion faellt der helle Text darauf zusammen. */
.fa-page .fa-section--invert .fa-kicker {
    background: rgba(255,255,255,.10) !important;
    color: var(--kit-bg) !important;
    border-color: rgba(221,218,214,.28) !important;
}


/* ---------------------------------------------------------
   12. Eine Inline-Flaeche aus dem Beitragstext

   Auf drei Seiten steht im Text eine Box mit
   style="background:#f0f5e6" - ein blasses Gruen, das nicht zur
   Palette gehoert. Links darauf erreichen 4,47:1 und liegen damit
   knapp unter der Grenze.

   Bewusst eng gefasst: nur diese eine Farbe. Inline-Hintergruende
   pauschal zu ueberschreiben waere gefaehrlich - im Shop tragen
   genau solche Inline-Styles die Folienfarben, und eine zu breite
   Regel haette dort die Farbauswahl zerstoert.

   Das hier ist ein Pflaster. Sauber waere, die Box im Beitrag auf
   eine Klasse umzustellen, statt die Farbe in den Text zu schreiben.
   --------------------------------------------------------- */

.fa-page [style*="f0f5e6"],
.fa-page [style*="F0F5E6"] {
    background: var(--kit-surf) !important;
    border: 1px solid var(--kit-line) !important;
}


/* ---------------------------------------------------------
   12b. Bilder mit Bildunterschrift

   Die Regeln dafuer stehen in der lokalen style.css des Child-Themes,
   sind aber nie auf den Server gekommen: die ausgelieferte Fassung ist
   um genau diesen Block kuerzer. Live gilt deshalb der Browser-Standard
   `figure { margin: 1em 40px }` - Bilder mit Unterschrift ruecken ein,
   die Unterschrift selbst ist unformatiert.

   Betroffen sind ausgerechnet die KI-Kennzeichnungen nach Art. 50 KI-VO,
   die als <figcaption> gesetzt werden.

   Hier mit Kit-Werten nachgezogen, damit es ohne Datei-Upload wirkt.
   --------------------------------------------------------- */

.fa-page figure {
    margin: 0;
}
.fa-page figure + figure,
.fa-page figure + * {
    margin-top: 16px;
}
.fa-page figure img {
    width: 100%;
}
.fa-page figcaption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--kit-mut) !important;
}


/* ---------------------------------------------------------
   13. Schriften ausserhalb der Beitraege - der Rahmen

   Bis hierhin galt alles nur innerhalb von .fa-page, also auf
   25 von 217 Seiten. Der Rahmen - Kopf, Navigation, Fusszeile,
   Archive, Shop-Strecke - laeuft weiter auf Lato und Poppins,
   und die kommen von Google.

   Diese Regeln setzen die Schriftrollen fuer den ganzen Blog.
   Sie gehoeren zusammen mit dem Abmelden des Google-Stylesheets
   im Mu-Plugin: nur abmelden hiesse Arial, nur umstellen hiesse,
   dass Google weiterhin angefragt wird.

   Bewusst ueber Vererbung statt Sternselektor. Icon-Schriften
   haben eigene font-family-Regeln auf ihren Elementen; die werden
   von einer geerbten Regel nicht geschlagen. Ein * mit !important
   wuerde aus jedem Symbol ein leeres Kaestchen machen - genau der
   Fehler, der im Shop einmal das Zahnrad zerlegt hat.
   --------------------------------------------------------- */

body,
button,
input,
select,
textarea,
.widget,
.wd-nav,
.menu-item,
.wd-entry-content {
    font-family: var(--kit-body) !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wd-entry-title,
.title,
.widget-title,
.woodmart-title-container,
.wd-nav-mobile > li > a {
    font-family: var(--kit-display) !important;
}

/* Links erben die Schrift ihrer Umgebung. Damit bekommt ein Link in
   einer Ueberschrift die Displayschrift und einer im Fliesstext die
   Brotschrift - ohne dass jeder Fall einzeln aufgezaehlt werden muss.
   Loest zugleich die Navigation, die von .wd-nav erbt. */
a {
    font-family: inherit !important;
}

/* Reste, die eigene Regeln mitbringen und deshalb nicht erben. */
.woodmart-nav-link,
.nav-link-text,
.wd-tools-text,
.elementor-image-box-description,
.elementor-widget-text-editor,
.elementor-text-editor {
    font-family: var(--kit-body) !important;
}

.elementor-heading-title,
.elementor-image-box-title {
    font-family: var(--kit-display) !important;
}

/* Preise in Mono mit gleicher Ziffernbreite. Das Kit schreibt das
   fuer Masse, Belegnummern, Farbnummern und Preise vor - im Blog
   laeuft darueber der WooCommerce-Teil mit den Bannerprodukten.
   Untereinanderstehende Betraege fluchten dadurch. */
.woocommerce-Price-amount,
.woocommerce-Price-currencySymbol,
.wd-cart-subtotal,
.price bdi,
.amount bdi {
    font-family: var(--kit-mono) !important;
    font-variant-numeric: tabular-nums;
}

/* Icons behalten ihre Schrift. Die Aufzaehlung deckt die drei
   Icon-Schriften ab, die auf dem Blog wirklich geladen werden:
   woodmart-font, eicons (Elementor) und dashicons. */
[class*="wd-icon"],
[class*="woodmart-font"],
[class^="eicon"],
[class*=" eicon"],
[class^="dashicons"],
[class*=" dashicons"],
.wd-tools-icon,
.wd-icon {
    font-family: inherit !important;
}
[class*="wd-icon"]::before,
[class*="woodmart-font"]::before,
.wd-tools-icon::before,
.wd-icon::before {
    font-family: 'woodmart-font' !important;
}
[class^="eicon"]::before,
[class*=" eicon"]::before {
    font-family: 'eicons' !important;
}
[class^="dashicons"]::before,
[class*=" dashicons"]::before {
    font-family: 'dashicons' !important;
}


/* ---------------------------------------------------------
   14. Rahmenfarben

   WoodMart und Elementor bringen beide ein eigenes Farbsystem als
   CSS-Variablen mit. Das ist der saubere Hebel: eine Handvoll
   Variablen statt zwanzig Selektoren, und alles was daran haengt
   zieht mit.

   Zwei Toene muessen ohnehin weg:
   --wd-primary-color war #83b735, ein Gruen, das als Handlungsfarbe
   eingesetzt wird - im Kit ist Orange die Handlungsfarbe und Gruen
   die Markenfarbe, nicht umgekehrt.
   --e-global-color-primary war #6E80E4, ein Blau. Blau steht auf
   der Verbotsliste.

   Nebenbei repariert: --wd-text-color stand auf #777777 und
   erreicht auf Weiss 4,48:1 - knapp unter der Grenze. Mit --mut
   sind es 6,10:1.
   --------------------------------------------------------- */

:root,
body {
    /* WoodMart */
    --wd-primary-color:          var(--kit-acc);
    --btn-accented-bgcolor:      var(--kit-acc);
    --btn-accented-bgcolor-hover: var(--kit-acc);
    --btn-accented-color:        var(--kit-acc-ink);
    --btn-accented-color-hover:  var(--kit-acc-ink);
    --btn-default-color:         var(--kit-fg);
    --btn-default-color-hover:   var(--kit-fg);
    --btn-default-bgcolor:       var(--kit-surf);
    --btn-default-bgcolor-hover: var(--kit-line);
    --wd-title-color:            var(--kit-fg);
    --wd-entities-title-color:   var(--kit-fg);
    --wd-widget-title-color:     var(--kit-fg);
    --wd-text-color:             var(--kit-mut);
    --wd-link-color:             var(--kit-acc);
    --wd-link-color-hover:       var(--kit-brand-dark);

    /* Meldungen. Das Kit kennt keine Ampelfarben - fuer "erledigt"
       steht deshalb die Markenfarbe, nicht ein fremdes Signalgruen. */
    --notices-success-bg:        var(--kit-brand);
    --notices-warning-bg:        var(--kit-acc-soft);

    /* Graustufen auf die Kit-Toene */
    --color-gray-900: var(--kit-fg);
    --color-gray-800: var(--kit-fg);
    --color-gray-700: var(--kit-mut);
    --color-gray-600: var(--kit-mut);
    --color-gray-500: var(--kit-mut);
    /* 400 und 300 nicht auf --line-2: die beiden tragen im Theme auch
       Text (Lieferzeiten, Zusatzangaben), und --line-2 kommt als
       Textfarbe nur auf 2,0:1. --mut ist der sichere Wert. */
    --color-gray-400: var(--kit-mut);
    --color-gray-300: var(--kit-mut);
    --bgcolor-gray-100: var(--kit-surf);

    /* Elementor-Globalfarben */
    --e-global-color-primary:   var(--kit-acc);
    --e-global-color-secondary: var(--kit-mut);
    --e-global-color-text:      var(--kit-fg);
    --e-global-color-accent:    var(--kit-brand);
    --e-global-color-baa7d00:   var(--kit-brand);
    --e-global-color-e4ceb96:   var(--kit-mut);
    --e-global-color-abf9107:   var(--kit-fg);
    --e-global-color-e0162e1:   var(--kit-fg);
    --e-global-color-df44ad5:   var(--kit-line);
    --e-global-color-adc92b6:   var(--kit-surf);
    --e-global-color-fd3aa6b:   var(--kit-acc-soft);
}


/* ---------------------------------------------------------
   15. Was nicht ueber die Variablen laeuft

   Drei Stellen tragen ihre Farbe hartkodiert und werden vom
   Variablentausch oben nicht erreicht.
   --------------------------------------------------------- */

/* Die obere Leiste im Kopf hatte ein Gruen als Flaeche, das nicht
   an --wd-primary-color haengt. Als Markenleiste bekommt sie das
   Markengruen - weisser Text darauf ergibt 6,80:1.
   Vorher stand dort der Theme-Grauton auf dem Gruen: 2,2:1. Das
   war schon vor dem Kit unlesbar. */
.whb-top-bar,
.whb-top-bar .whb-column {
    background-color: var(--kit-brand) !important;
}
.whb-top-bar,
.whb-top-bar a,
.whb-top-bar span,
.whb-top-bar p,
.whb-top-bar .color-white,
.whb-top-bar .wd-tools-text {
    color: var(--kit-bg) !important;
}
.whb-top-bar a:hover {
    color: var(--kit-lime) !important;
}

/* Elementor faerbt einzelne Ueberschriften und Links ueber
   Widget-Einstellungen ein, nicht ueber die Globalfarbe. Dort
   steckte das Blau. */
.elementor-image-box-title,
.elementor-heading-title {
    color: var(--kit-fg) !important;
}

/* Beschreibungstext in Elementor-Kacheln stand auf #7A7A7A und
   kam damit auf 4,29:1 - knapp unter der Grenze. Die Globalfarbe
   greift hier nicht, Elementor schreibt den Wert ins Widget. */
.elementor-image-box-description {
    color: var(--kit-mut) !important;
}

/* Links in Elementor-Textbausteinen. Bewusst eng gefasst statt auf
   .elementor-widget-container: eine Regel mit drei :not() kommt auf
   Spezifitaet (0,4,1) und schlaegt damit die Etikett-Regel weiter
   unten - dann steht oranger Text auf oranger Flaeche. */
.elementor-widget-text-editor a,
.elementor-text-editor a {
    color: var(--kit-acc) !important;
}
.elementor-button {
    background-color: var(--kit-acc) !important;
    color: var(--kit-acc-ink) !important;
}

/* Kategorie-Etikett und Warenkorbzaehler trugen ebenfalls das
   Theme-Gruen als Flaeche. */
.wd-post-cat a,
.wd-post-cat.wd-style-with-bg a,
.wd-cart-number,
.wd-tools-count {
    background-color: var(--kit-acc) !important;
    color: var(--kit-acc-ink) !important;
}

/* WooCommerce-Meldungen. Die Flaechenfarbe allein reicht nicht -
   das Theme setzt weissen Text darauf, und --acc-soft ist im Kit
   ausdruecklich "nur Flaeche" (3,05:1). Deshalb hier beides.

   Ohne Kit standen dort: Erfolg weiss auf #459647 = 3,68:1 und
   Hinweis weiss auf #E0B252 = 1,97:1. */
.woocommerce-message,
.woocommerce-message a,
.woocommerce-message .button {
    background-color: var(--kit-brand) !important;
    color: var(--kit-bg) !important;
}
.woocommerce-info,
.woocommerce-info a,
.woocommerce-info li {
    background-color: var(--kit-acc-soft) !important;
    color: var(--kit-fg) !important;
}
.woocommerce-error,
.woocommerce-error li,
.woocommerce-error a {
    background-color: var(--kit-neg) !important;
    color: var(--kit-bg) !important;
}

/* Untermenue-Links standen auf #838383 und damit auf 3,79:1. */
.woodmart-nav-link,
.wd-sub-menu a,
.wd-sub-menu .nav-link-text {
    color: var(--kit-fg) !important;
}
.woodmart-nav-link:hover,
.wd-sub-menu a:hover {
    color: var(--kit-acc) !important;
}