/*
Theme Name: vr6-syncro Zeichnung
Template: twentytwentyfive
Description: Zweite Gestaltung fuer vr6syncro.de ("Zeichnung"): wie eine technische Konstruktionszeichnung — Tusche auf kuehlem Weiss, Masslinien, Schriftfeld in der Fusszeile, dunkel als Blaupause. Der Druck-Kalkulator rechnet schon auf der Startseite. Laeuft neben "vr6-syncro Design" und kann jederzeit zurueckgewechselt werden.
Version: 0.1.0
*/

/* ============================================================
   Schriften — als Dateien mitgeliefert (keine Anfrage an Google).
   Barlow (Text), Barlow Condensed (Ueberschriften), Red Hat Mono
   (Masse, Zahlen) — alle SIL Open Font License 1.1, bezogen ueber
   Fontsource. Die Schrift-SLUGS heissen weiter „geist" und
   „geist-mono" wie im bisherigen Theme, damit alles, was diese
   Namen anspricht, ohne Aenderung weiterlaeuft.
   ============================================================ */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("schriften/barlow-latin-400-normal.woff2") format("woff2");
  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: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("schriften/barlow-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("schriften/barlow-latin-500-normal.woff2") format("woff2");
  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: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("schriften/barlow-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("schriften/barlow-latin-600-normal.woff2") format("woff2");
  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: "Barlow";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("schriften/barlow-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
}
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("schriften/barlow-latin-400-italic.woff2") format("woff2");
  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: "Barlow";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("schriften/barlow-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("schriften/barlow-condensed-latin-500-normal.woff2") format("woff2");
  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: "Barlow Condensed";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("schriften/barlow-condensed-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("schriften/barlow-condensed-latin-600-normal.woff2") format("woff2");
  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: "Barlow Condensed";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("schriften/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;
}
@font-face {
  font-family: "Red Hat Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("schriften/red-hat-mono-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: "Red Hat Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("schriften/red-hat-mono-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, accent-strong, accent-text,
   sand, steel, surface-card …) — die Seiten in der Datenbank und
   bausteine.css sprechen diese Namen an. Neu: form-error (bausteine.css
   fragt danach, die alte Palette hatte ihn nicht) und --zn-raster
   (Rasterlinien im Hintergrund, nur Schmuck).

   Hell = Tusche auf Zeichenpapier, Akzent Petrol.
   Dunkel = Blaupause: helle Linien auf tiefem Blau.

   Kontraste (WCAG-Formel nachgerechnet, 24.09.2026):
   hell   ink/paper 16,4:1 · muted/paper 7,2:1 · muted/sand 6,5:1
          accent/paper 6,1:1 · accent-text/paper 6,7:1
          paper auf accent 6,1:1 · paper auf accent-strong 8,0:1
          input-border/paper 4,1:1 (Rahmen, verlangt 3:1)
   dunkel ink/paper 12,9:1 · muted/paper 7,9:1 · muted/sand 7,1:1
          accent/paper 8,6:1 · accent-text/paper 9,3:1
          paper auf accent 8,6:1 · paper auf accent-strong 10,5:1
          input-border/paper 6,1:1
   Knoepfe (theme.json: Flaeche accent, Schrift paper) also in beiden
   Welten ueber 6:1.
   ============================================================ */
:root {
  color-scheme: light;
  --wp--preset--color--ink: #0e1a22;
  --wp--preset--color--paper: #f5f7f8;
  --wp--preset--color--muted: #46555f;
  --wp--preset--color--line: #c5d0d7;
  --wp--preset--color--accent: #0a6870;
  --wp--preset--color--accent-strong: #08545b;
  --wp--preset--color--accent-text: #0a6168;
  --wp--preset--color--steel: #dde5e9;
  --wp--preset--color--sand: #e7edf0;
  --wp--preset--color--input-border: #6a7b86;
  --wp--preset--color--focus: #0a6168;
  --wp--preset--color--surface-card: #ffffff;
  --wp--preset--color--surface-card-strong: #eef3f5;
  --wp--preset--color--status-ok: #2f7a3a;
  --wp--preset--color--status-error: #b3261e;
  --wp--preset--color--status-warn: #8a6100;
  --wp--preset--color--text-error: #b00020;
  --wp--preset--color--text-error-print: #b00020;
  --wp--preset--color--border-error: #d6867b;
  --wp--preset--color--notice-warn-bg: #fbe9c8;
  --wp--preset--color--notice-warn-border: #b08040;
  --wp--preset--color--form-error: #b00020;
  --zn-raster: #dde5ea;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wp--preset--color--ink: #eaf2f8;
    --wp--preset--color--paper: #0f2a44;
    --wp--preset--color--muted: #a9c1d6;
    --wp--preset--color--line: #34597d;
    --wp--preset--color--accent: #7ed4dc;
    --wp--preset--color--accent-strong: #a9e5eb;
    --wp--preset--color--accent-text: #8edbe2;
    --wp--preset--color--steel: #16395c;
    --wp--preset--color--sand: #123150;
    --wp--preset--color--input-border: #8eaac4;
    --wp--preset--color--focus: #8edbe2;
    --wp--preset--color--surface-card: #12304f;
    --wp--preset--color--surface-card-strong: #173a5e;
    --wp--preset--color--status-ok: #7fd08a;
    --wp--preset--color--status-error: #ff8a80;
    --wp--preset--color--status-warn: #f2c46b;
    --wp--preset--color--text-error: #ff9a8f;
    --wp--preset--color--text-error-print: #ff9a8f;
    --wp--preset--color--border-error: #d6867b;
    --wp--preset--color--notice-warn-bg: #3a3217;
    --wp--preset--color--notice-warn-border: #c69356;
    --wp--preset--color--form-error: #ff9a8f;
    --zn-raster: #1a3b5c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wp--preset--color--ink: #eaf2f8;
  --wp--preset--color--paper: #0f2a44;
  --wp--preset--color--muted: #a9c1d6;
  --wp--preset--color--line: #34597d;
  --wp--preset--color--accent: #7ed4dc;
  --wp--preset--color--accent-strong: #a9e5eb;
  --wp--preset--color--accent-text: #8edbe2;
  --wp--preset--color--steel: #16395c;
  --wp--preset--color--sand: #123150;
  --wp--preset--color--input-border: #8eaac4;
  --wp--preset--color--focus: #8edbe2;
  --wp--preset--color--surface-card: #12304f;
  --wp--preset--color--surface-card-strong: #173a5e;
  --wp--preset--color--status-ok: #7fd08a;
  --wp--preset--color--status-error: #ff8a80;
  --wp--preset--color--status-warn: #f2c46b;
  --wp--preset--color--text-error: #ff9a8f;
  --wp--preset--color--text-error-print: #ff9a8f;
  --wp--preset--color--border-error: #d6867b;
  --wp--preset--color--notice-warn-bg: #3a3217;
  --wp--preset--color--notice-warn-border: #c69356;
  --wp--preset--color--form-error: #ff9a8f;
  --zn-raster: #1a3b5c;
}

/* Umschalter hell/dunkel — theme-umschalter.js setzt den Knopf neben
   die Navigation. */
.theme-toggle {
  align-items: center;
  align-self: center;
  background: none;
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  height: 40px;
  justify-content: center;
  line-height: 1;
  margin-left: .25rem;
  padding: 0;
  width: 40px;
}
.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; }