/*
Theme Name: diefamiliekramer Design
Template: twentytwentyfive
Description: Gestaltung der frueheren Astro-Site, uebertragen nach WordPress.
Version: 1.0.0
*/

/* ============================================================
   Schriften — als Dateien mitgeliefert, damit die Schriftverwaltung
   von WordPress nicht angefasst werden muss (variable Schriften
   machen dort bekannt Aerger).
   ============================================================ */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schriften/inter-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: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schriften/inter-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: "Source Serif 4 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schriften/source-serif-4-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: "Source Serif 4 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schriften/source-serif-4-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
}

/* ============================================================
   Farben. Die Werte stammen 1:1 aus der Astro-Fassung.

   HINWEIS ZUR FARBTREUE: Einige Toene waren im Original in OKLCH
   angegeben und liegen ausserhalb des darstellbaren sRGB-Raums.
   Ihre Hex-Entsprechung ist eine NAEHERUNG, keine Kopie. Betroffen
   sind ausschliesslich Akzent- und Flaechentoene, kein Fliesstext.
   ============================================================ */
/* diefamiliekramer: hell als Grundzustand, folgt der Systemeinstellung, Handschalter sticht. */
:root {
  color-scheme: light;
    --wp--preset--color--ink: #3f3729;
    --wp--preset--color--paper: #fffbee;
    --wp--preset--color--muted: #6a5f4e;
    --wp--preset--color--line: #efe7d6;
    --wp--preset--color--accent: #d0b285;
    --wp--preset--color--accent-strong: #bb8f58;
    --wp--preset--color--accent-text: #865812;
    --wp--preset--color--sand: #fcf3dd;
    --wp--preset--color--input-border: #968a78;
    --wp--preset--color--focus: #9a6500;
    --wp--preset--color--form-error: #b30018;
    --wp--preset--color--notice-warn-bg: #ffe2b4;
    --wp--preset--color--notice-warn-border: #c69356;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
      --wp--preset--color--ink: #ebe4d6;
      --wp--preset--color--paper: #19120b;
      --wp--preset--color--muted: #aba397;
      --wp--preset--color--line: #322d26;
      --wp--preset--color--accent: #443520;
      --wp--preset--color--accent-strong: #5e492e;
      --wp--preset--color--accent-text: #deb77a;
      --wp--preset--color--sand: #241e16;
      --wp--preset--color--input-border: #7b705e;
      --wp--preset--color--focus: #d0a260;
      --wp--preset--color--form-error: #b20019;
      --wp--preset--color--notice-warn-bg: #ffe3bb;
      --wp--preset--color--notice-warn-border: #c69356;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
    --wp--preset--color--ink: #ebe4d6;
    --wp--preset--color--paper: #19120b;
    --wp--preset--color--muted: #aba397;
    --wp--preset--color--line: #322d26;
    --wp--preset--color--accent: #443520;
    --wp--preset--color--accent-strong: #5e492e;
    --wp--preset--color--accent-text: #deb77a;
    --wp--preset--color--sand: #241e16;
    --wp--preset--color--input-border: #7b705e;
    --wp--preset--color--focus: #d0a260;
    --wp--preset--color--form-error: #b20019;
    --wp--preset--color--notice-warn-bg: #ffe3bb;
    --wp--preset--color--notice-warn-border: #c69356;
}

/* Umschalter im Kopfbereich */
.theme-toggle {
  background: none;
  border: 1px solid var(--wp--preset--color--input-border, currentColor);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: .5rem .7rem;
}
.theme-toggle:hover { background: var(--wp--preset--color--line, rgba(0,0,0,.06)); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--focus, currentColor);
  outline-offset: 2px;
}
.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; }

/* Welches Symbol der Knopf zeigt — auch ohne Klick des Besuchers.

   Wer die Seite zum ersten Mal aufruft, hat NICHTS gespeichert; am Dokument
   steht dann kein data-theme. Steht der Rechner auf dunkel, wird die Seite
   trotzdem dunkel gezeichnet — ueber die Regel @media (prefers-color-scheme)
   weiter oben. Die Symbol-Umschaltung darueber fragt aber nach
   [data-theme="dark"] und greift in genau diesem Fall NICHT: die Seite ist
   dunkel, der Knopf zeigt das Sonnen-Symbol fuer "es ist gerade hell".
   Gemessen am ausgelieferten style.css am 28.08.2026, auf allen drei Seiten.

   Deshalb hier dieselbe Umschaltung noch einmal unter der Systemeinstellung,
   und zwar nur, solange der Besucher nicht ausdruecklich "hell" gewaehlt hat. */
@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; }
}


/* Der Knopf sitzt in derselben Zeile wie die Navigation. */
.theme-toggle {
  align-self: center;
  flex: 0 0 auto;
  margin-left: .75rem;
}

/* ============================================================
   TASTATUR-FOKUS — sichtbar machen

   Twenty Twenty-Five setzt fuer alles innerhalb der Seite
   `outline-width: 2px; outline-style: solid` — aber KEINE
   `outline-color`. Damit passiert zweierlei auf einmal:
   der Browser behaelt seine helle Standard-Ringfarbe, UND sein
   eigener, an die Farbwelt angepasster Ring (outline-style: auto)
   wird abgeschaltet. In der dunklen Ansicht steht dann ein fast
   schwarzer Rahmen auf fast schwarzem Grund.

   Nachgemessen am 28.08.2026 an den tatsaechlich gezeichneten
   Bildpunkten: Ring rgb(16,16,16) auf Untergrund rgb(15,9,4)
   = Kontrast 1,05:1. Vorgeschrieben sind 3:1 (WCAG 1.4.11).
   Wer die Seite mit der Tastatur bedient, sah also nicht, wo er
   gerade steht.

   Deshalb wird die Rahmenfarbe hier ausdruecklich gesetzt — auf
   die Fokusfarbe der Palette, die in beiden Ansichten traegt.
   Die Schaltflaechen sind eigens genannt, weil WordPress ihnen
   eine eigene Fokusfarbe zuweist, die unsere sonst ueberschreibt.
   ============================================================ */
: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;
}

/* Lange Adressen und Befehle in den Rechtstexten duerfen umbrechen.
   Ohne das schiebt ein einziges langes Wort die ganze Seite breiter
   als das Fenster — auf dem Handy muss man dann seitlich scrollen,
   um den Text zu lesen (gemessen 28.08.2026 bei 390 px). */
code, kbd, samp, pre {
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre { overflow-x: auto; }