/*
Theme Name: diefamiliekramer Hausbuch
Template: twentytwentyfive
Description: Zweite Gestaltung fuer diefamiliekramer.de ("Hausbuch"): warmes Papier, Fraunces fuer Ueberschriften, eine Startseite, die zeigt, was es wirklich gibt. Laeuft neben "diefamiliekramer Design" und kann jederzeit zurueckgewechselt werden.
Version: 0.1.0
*/

/* ============================================================
   Schriften — als Dateien mitgeliefert (keine Anfrage an Google).
   Fraunces und Instrument Sans stehen unter der SIL Open Font
   License 1.1; bezogen ueber das Fontsource-Paket.
   ============================================================ */
@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schriften/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2212;
}
@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schriften/fraunces-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
}
@font-face {
  font-family: "Instrument Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("schriften/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2212;
}
@font-face {
  font-family: "Instrument Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("schriften/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
}

/* ============================================================
   Farben. Die NAMEN sind dieselben wie im bisherigen Theme
   (ink, paper, muted, line, accent …) — die Seiteninhalte in der
   Datenbank sprechen diese Namen an. Nur die Werte sind neu.
   Dadurch sehen auch Kontakt, Rezepte, Mitglieder usw. nach dem
   Wechsel sofort stimmig aus, ohne dass ein Inhalt angefasst wird.

   Neu dazu: flaeche (Karten), salbei (Rubrik-Zeilen),
   auf-akzent (Schrift auf Akzentflaeche).

   Kontraste (WCAG-Formel nachgerechnet, 23.09.2026):
   hell   ink/paper 14,0:1 · muted/paper 5,6:1 · accent-text/paper 5,9:1
          auf-akzent auf accent 6,0:1 · input-border/paper 3,5:1
   dunkel ink/paper 14,6:1 · muted/paper 7,7:1 · accent-text/paper 8,2:1
          auf-akzent auf accent 6,9:1 · input-border/paper 4,2:1
   ============================================================ */
:root {
  color-scheme: light;
    --wp--preset--color--ink: #2b2118;
    --wp--preset--color--paper: #f6f1e7;
    --wp--preset--color--muted: #6b5d4f;
    --wp--preset--color--line: #ddd2bf;
    --wp--preset--color--accent: #a63e24;
    --wp--preset--color--accent-strong: #7e2e1a;
    --wp--preset--color--accent-text: #a13c23;
    --wp--preset--color--sand: #efe7d8;
    --wp--preset--color--flaeche: #fffcf6;
    --wp--preset--color--salbei: #55654a;
    --wp--preset--color--auf-akzent: #fff8f0;
    --wp--preset--color--input-border: #8e7f6a;
    --wp--preset--color--focus: #a13c23;
    --wp--preset--color--form-error: #b30018;
    --wp--preset--color--notice-warn-bg: #f8e3c4;
    --wp--preset--color--notice-warn-border: #c69356;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
      --wp--preset--color--ink: #efe7d8;
      --wp--preset--color--paper: #1a1611;
      --wp--preset--color--muted: #b5a895;
      --wp--preset--color--line: #3a3128;
      --wp--preset--color--accent: #e08a6a;
      --wp--preset--color--accent-strong: #f0a585;
      --wp--preset--color--accent-text: #ee9a74;
      --wp--preset--color--sand: #231d17;
      --wp--preset--color--flaeche: #221c16;
      --wp--preset--color--salbei: #a3b893;
      --wp--preset--color--auf-akzent: #1a1611;
      --wp--preset--color--input-border: #85786a;
      --wp--preset--color--focus: #ee9a74;
      --wp--preset--color--form-error: #ff7b7b;
      --wp--preset--color--notice-warn-bg: #3a2c17;
      --wp--preset--color--notice-warn-border: #c69356;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
    --wp--preset--color--ink: #efe7d8;
    --wp--preset--color--paper: #1a1611;
    --wp--preset--color--muted: #b5a895;
    --wp--preset--color--line: #3a3128;
    --wp--preset--color--accent: #e08a6a;
    --wp--preset--color--accent-strong: #f0a585;
    --wp--preset--color--accent-text: #ee9a74;
    --wp--preset--color--sand: #231d17;
    --wp--preset--color--flaeche: #221c16;
    --wp--preset--color--salbei: #a3b893;
    --wp--preset--color--auf-akzent: #1a1611;
    --wp--preset--color--input-border: #85786a;
    --wp--preset--color--focus: #ee9a74;
    --wp--preset--color--form-error: #ff7b7b;
    --wp--preset--color--notice-warn-bg: #3a2c17;
    --wp--preset--color--notice-warn-border: #c69356;
}

/* Umschalter hell/dunkel — der Knopf wird von theme-umschalter.js
   neben die Navigation gesetzt. */
.theme-toggle {
  align-items: center;
  align-self: center;
  background: none;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  height: 44px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 44px;
}
.theme-toggle:hover { background: var(--wp--preset--color--sand); }
.theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle .icon-hell { display: none; }
/* Dieselbe Bedingung wie die dunkle Palette oben — sonst zeigt der Knopf
   bei dunkler SYSTEMeinstellung das falsche Symbol (Falle vom 28.08.2026). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .icon-hell { display: none; }
}

/* Tastatur-Fokus sichtbar machen: Das Eltern-Theme setzt einen Rahmen
   ohne Farbe — in der dunklen Ansicht war er unsichtbar (28.08.2026). */
:where(.wp-site-blocks :focus-visible),
:root :where(.wp-element-button:focus-visible),
:root :where(.wp-block-button__link:focus-visible) {
  outline: 2px solid var(--wp--preset--color--focus);
  outline-offset: 2px;
}

code, kbd, samp, pre {
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre { overflow-x: auto; }