/* ==========================================================================
   Herdfeuer — gemeinsames Design-System für unsere privaten Webseiten
   Referenz & Entstehungsgeschichte: siehe Artifact
   https://claude.ai/code/artifact/4ec39dfd-e245-4e60-ab11-632cfc76b1d3

   Einbinden:
   1. Diese Datei UND den Ordner fonts/ nebeneinander auf den Server legen
      (fonts/ muss immer direkt neben herdfeuer.css liegen)
   2. Diese Datei laden (z.B. <link rel="stylesheet" href="/herdfeuer.css">)
   3. Klassen wie .btn, .card, .tag, .notice, .formular verwenden
   ========================================================================== */

/* --- Schriften ---------------------------------------------------------------
   Selbst ausgeliefert (keine Verbindung zu Google): Fraunces, Karla und
   JetBrains Mono als Variable Fonts im Ordner fonts/ neben dieser Datei,
   je ein Zeichensatz "latin" (inkl. ä ö ü ß) und "latin-ext". Der Browser lädt
   nur die Dateien, deren Zeichen auf der Seite tatsächlich vorkommen.
   Lizenz: SIL Open Font License 1.1, siehe fonts/OFL-*.txt (muss mitkopiert werden).
----------------------------------------------------------------------------- */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:450 700; font-display:swap;
  src:url("fonts/fraunces-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:450 700; font-display:swap;
  src:url("fonts/fraunces-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;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/jetbrains-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/jetbrains-mono-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;
}
@font-face{
  font-family:"Karla"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/karla-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Karla"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/karla-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;
}

:root{
  --paper:#F6EEDF;
  --surface:#FFFBF3;
  --surface-2:#EFE3CE;
  --ink:#362A1E;
  --ink-muted:#7A6A57;
  --line:#DDCBAE;
  --pine:#2B6358;
  --pine-ink:#F6EEDF;
  --honey:#D98F2B;
  --honey-ink:#362A1E;
  --good:#4C7A3E;
  --warn:#A6541C;
  --bad:#B4432E;
  --shadow: 0 1px 2px rgba(54,42,30,.06), 0 8px 24px -12px rgba(54,42,30,.18);
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 18px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --fs-xs: 13px; --fs-sm: 15px; --fs-base: 17px; --fs-lg: 21px;
  --fs-xl: 26px; --fs-2xl: 33px; --fs-3xl: 42px; --fs-4xl: 56px;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* System-Dark-Mode, nur solange niemand aktiv umgeschaltet hat */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#241C14; --surface:#2E241A; --surface-2:#3A2E20;
    --ink:#F1E6D3; --ink-muted:#B5A48C; --line:#4A3B29;
    --pine:#52A896; --pine-ink:#16211D;
    --honey:#E8AC4E; --honey-ink:#241C14;
    --good:#7CB86A; --warn:#D98A3D; --bad:#E0705C;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}

/* Manueller Umschalter überstimmt das System (siehe herdfeuer.js) */
:root[data-theme="dark"]{
  --paper:#241C14; --surface:#2E241A; --surface-2:#3A2E20;
  --ink:#F1E6D3; --ink-muted:#B5A48C; --line:#4A3B29;
  --pine:#52A896; --pine-ink:#16211D;
  --honey:#E8AC4E; --honey-ink:#241C14;
  --good:#7CB86A; --warn:#D98A3D; --bad:#E0705C;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

/* --- Basis --------------------------------------------------------------- */
*{ box-sizing:border-box; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--honey); color:var(--honey-ink); }
a{ color:var(--pine); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--pine);
  outline-offset:2px;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  text-wrap:balance;
  color:var(--ink);
  margin:0 0 var(--sp-3);
}
.kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

/* --- Buttons --------------------------------------------------------------- */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-sm);
  padding:10px 20px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{ background:var(--pine); color:var(--pine-ink); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-secondary:hover{ border-color:var(--pine); }
.btn-ghost{ background:transparent; color:var(--pine); }

/* --- Tags ------------------------------------------------------------------ */
.tag{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.03em;
  padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink);
  display:inline-block;
}
.tag-honey{ background:var(--honey); color:var(--honey-ink); }

/* --- Karte ------------------------------------------------------------------ */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:var(--shadow); overflow:hidden; padding:var(--sp-5);
}

/* --- Hinweise --------------------------------------------------------------- */
.notice{
  display:flex; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--radius-m);
  border:1px solid var(--line); background:var(--surface);
}
.notice-dot{ width:10px; height:10px; border-radius:50%; margin-top:6px; flex:none; }
.notice-good .notice-dot{ background:var(--good); }
.notice-warn .notice-dot{ background:var(--warn); }
.notice-bad .notice-dot{ background:var(--bad); }
.notice h5{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-sm); margin:0 0 2px; }
.notice p{ font-size:var(--fs-sm); color:var(--ink-muted); margin:0; }

/* --- Formular ---------------------------------------------------------------- */
form.formular{
  display:grid; gap:var(--sp-4); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:var(--sp-6); box-shadow:var(--shadow);
}
.field{ display:grid; gap:6px; }
.field label{ font-size:var(--fs-sm); font-weight:600; }
.field input, .field textarea{
  font-family:var(--font-body); font-size:var(--fs-base); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:10px 12px; width:100%;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-muted); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:640px){ .two-col{ grid-template-columns:1fr; } }

/* --- Theme-Switch (System / Hell / Dunkel) ----------------------------------
   Passende Markup-Vorlage + Logik: siehe herdfeuer.js
----------------------------------------------------------------------------- */
.theme-switch{
  position:relative; display:inline-flex;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:3px; box-shadow:var(--shadow); flex:none;
}
.theme-switch .switch-thumb{
  position:absolute; top:3px; bottom:3px; left:3px;
  width:calc((100% - 6px)/3);
  background:var(--pine); border-radius:999px;
  transform:translateX(calc(var(--idx, 0) * 100%));
  pointer-events:none;
}
.theme-switch button{
  position:relative; z-index:1; width:38px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; border-radius:999px; cursor:pointer;
  color:var(--ink-muted);
}
.theme-switch button svg{ width:16px; height:16px; }
.theme-switch button[aria-pressed="true"]{ color:var(--pine-ink); }
.theme-switch button:hover:not([aria-pressed="true"]){ color:var(--ink); }
@media (prefers-reduced-motion:no-preference){
  .theme-switch .switch-thumb{ transition: transform .22s ease; }
}