@charset "UTF-8";
/*
Theme Name:  Xpert-Timer Blog
Theme URI:   https://blog.xperttimer.de/
Template:    fox
Author:      Xpert-Timer Software
Description: Child-Theme zu Fox. Zieht den Blog auf das Corporate Design des
             Unternehmensauftritts xperttimer.de. Aenderungen gehoeren hierher
             und NICHT in das Eltern-Theme — jede Fox-Aktualisierung
             ueberschreibt dort alles.
Version:     1.0.0
Text Domain: xpert-timer-blog
*/

/* ==========================================================================
   WARUM EIN CHILD-THEME UND NICHT „ZUSAETZLICHES CSS"

   Beides wirkt gleich. Der Unterschied liegt daneben:

   - Diese Datei liegt im Git des Unternehmensauftritts, neben site.css.
     Die Palette unten MUSS mit public/assets/css/site.css uebereinstimmen —
     das faellt nur auf, wenn beide im selben Verzeichnisbaum liegen.
   - „Zusaetzliches CSS" steht in der Datenbank. Es ist nicht versioniert,
     nicht durchsuchbar und beim Umzug des Blogs leicht zu verlieren.

   Eine Besonderheit von Fox, die man wissen muss: Fox bindet SEIN EIGENES
   style.css ueberhaupt NICHT ein. Es laedt sechzehn Dateien aus css56/ unter
   den Kennungen fox-style-1 bis fox-style-16. Deshalb wird diese Datei hier
   auch nicht von allein geladen — functions.php muss sie ausdruecklich
   anmelden. Ohne diesen Schritt bleibt das Child-Theme wirkungslos, ohne
   dass irgendetwas eine Fehlermeldung zeigt.
   ========================================================================== */


/* ==========================================================================
   1. SCHRIFT — Manrope, selbst ausgeliefert

   Fox laedt Manrope ueber fonts.googleapis.com. Dieselbe Schrift liegt auf
   dem Unternehmensauftritt seit laengerem lokal, genau um keine IP-Adresse
   mehr an Google zu uebertragen (siehe datenschutz.html). Der Blog war die
   letzte Stelle, an der das noch passierte.

   functions.php nimmt die Google-Einbindung (Kennung fox-google-fonts) aus
   der Warteschlange; die beiden Dateien hier treten an ihre Stelle. Es sind
   dieselben Dateien wie unter public/assets/fonts/.

   Der Familienname bleibt 'Manrope'. Dadurch gilt weiter, was in den
   Theme-Einstellungen von Fox als Schrift eingetragen ist
   (--font-body, --font-heading, --font-nav) — dort ist nichts zu aendern.

   Variable Font: eine Datei je Zeichensatz deckt 200 bis 800 ab.
   ========================================================================== */

/* latin-ext — europaeische Sonderzeichen (Č, Ł, Ő …) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin — Deutsch inkl. Umlaute und ß sowie Englisch */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   2. DIE PALETTE

   Diese Werte sind KOPIEN aus public/assets/css/site.css. Sie sind hier
   ausgeschrieben, weil der Blog eine eigene Domain ist und site.css nicht
   laedt. Wer die Palette dort aendert, muss hier nachziehen — es gibt keinen
   Mechanismus, der das erzwingt.

   Fox fuehrt genau ZWEI Akzentvariablen, und sie stehen nur ein einziges Mal
   fest verdrahtet: in :root von css56/common.css. Alle sechzehn
   Verwendungsstellen im Theme gehen ueber var(--accent-color). Deshalb
   genuegt hier das Ueberschreiben des Blocks — Knoepfe, Kategorie-Marken,
   Verweis-Hover in den Seitenleisten, die Schlagwortwolke und die Suche in
   der Fusszeile folgen von allein.

   Gleiche Spezifitaet wie Fox (:root gegen :root) heisst: die REIHENFOLGE
   entscheidet. Darum meldet functions.php diese Datei mit Prioritaet 9999 an.
   ========================================================================== */

:root {
  /* --- Akzent: das Rot des Auftritts ------------------------------------ */
  --accent-color: #DF3925;   /* war #db4a37 — Ziegelrot von Fox */
  --link-color:   #DF3925;   /* war #db4a36 */

  /* Fox kennt keine Hover-Variante des Akzents. Sie wird hier eingefuehrt
     und weiter unten von Hand angewandt. */
  --xt-primary-hover: #B80F1E;

  /* --- Schrift und Linien ---------------------------------------------- */
  --border-color: #D6D6D6;   /* war #c0c1c0 — entspricht --xt-border-strong */

  /* --- Eingabefelder ---------------------------------------------------- */
  --input-color: #15171B;          /* war #000 */
  --input-focus-color: #15171B;
  --input-border-radius: 4px;      /* war 1px */

  /* --- Knoepfe ---------------------------------------------------------- */
  /* Die Form ist das staerkste Merkmal des Auftritts: drei runde Ecken, die
     vierte unten links spitz. Fox setzt border-radius: var(…) als ganzen
     Wert ein, deshalb traegt die Variable hier alle vier Ecken. */
  --button-border-radius: 25px 25px 25px 0;
  --button-height: 44px;           /* war 48px */
  --button-padding: 28px;          /* wie der Auftritt */
}


/* ==========================================================================
   3. GRUNDTYPOGRAFIE

   Fox setzt die Textfarbe auf reines Schwarz. Der Auftritt benutzt
   --xt-text-primary #15171B: dasselbe optisch, aber nicht ganz so hart.
   ========================================================================== */

body {
  color: #15171B;
}


/* ==========================================================================
   4. KNOEPFE

   Zwei Dinge, die keine Variable hergibt:

   a) Fox schreibt Knopftext in GROSSBUCHSTABEN mit 12px. Der Auftritt nutzt
      15px, fett, in normaler Schreibweise. Grossbuchstaben kuerzen deutsche
      Woerter nicht — „JETZT HERUNTERLADEN" wird dadurch nur breiter und
      schlechter lesbar.

   b) Fox laesst den Grundknopf schwarz und faerbt ihn beim Ueberfahren rot.
      Der Auftritt macht es umgekehrt: Der Hauptknopf IST rot und wird beim
      Ueberfahren dunkler. Ein Knopf, der seine Farbe wechselt statt sie zu
      vertiefen, wirkt wie ein anderer Knopf.
   ========================================================================== */

input[type=submit],
button,
.btn56 {
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

/* Der Grundknopf: dunkel wie --xt-basic, nicht reines Schwarz. */
input[type=submit],
button,
.btn56 {
  background: #17232D;
}
input[type=submit]:hover,
button:hover,
.btn56:hover {
  background: #0D1A26;   /* --xt-basic-hover, nicht der Akzent */
}

/* Der Hauptknopf: rot, und beim Ueberfahren dunkleres Rot. */
.btn56--primary:hover {
  background-color: var(--xt-primary-hover);
}

/* --------------------------------------------------------------------------
   ZUM KONTRAST DES HAUPTKNOPFES — nachgerechnet, nicht geschaetzt

     Weiss auf #DF3925 (neu)   4,42:1
     Weiss auf #db4a37 (Fox)   4,16:1
     Weiss auf #B80F1E (Hover) 6,72:1
     Weiss auf #17232D         15,97:1

   Der Wechsel VERBESSERT den Kontrast also (4,16 -> 4,42), aber beide Werte
   liegen unter den 4,5:1, die fuer gewoehnlichen Text gefordert sind. Als
   grosse Schrift gelten 3,0:1 — gross heisst ab 14pt fett, also ab 18,66px.
   Der Knopftext hat 15px und faellt damit nicht darunter.

   Das ist KEINE Verschlechterung durch dieses Child-Theme, sondern dieselbe
   Lage wie auf dem Unternehmensauftritt: .btn--akzent in site.css (Z. 381)
   setzt ebenfalls Weiss auf --xt-primary bei 15px. Der Auftritt loest es dort,
   wo es um Text geht, ueber die Groesse — siehe die Notiz bei
   .benefit-card__head h3 (site.css Z. 1043): 19px/800 statt 18px, damit
   dieselben 4,42:1 als grosse Schrift bestehen.

   Fuer den Knopf gibt es nur drei Auswege, und alle drei sind Entscheidungen,
   nicht Technik:

     1. So lassen. Gleiches Bild wie der Auftritt, gleiche Schwaeche.
     2. Knopftext auf 19px/700. Besteht die Pruefung, macht die Knoepfe aber
        groesser als auf dem Auftritt — der Blog saehe anders aus.
     3. Hauptknopf auf #B80F1E. Besteht mit 6,72:1 deutlich, weicht dafuer
        sichtbar vom Rot des Auftritts ab.

   Hier steht 1, weil Uebereinstimmung mit dem Auftritt der Auftrag war. Wer
   das aendert, sollte es auf dem Auftritt mit aendern — sonst laufen die
   beiden auseinander, und dann ist nichts gewonnen.
   -------------------------------------------------------------------------- */