/* Self-hosted Schriften (DSGVO: kein Aufruf von Google Fonts / keine IP-Übertragung an Google).
   Dateien liegen unter /fonts/ ; fehlen sie, greift der System-Font-Fallback. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/archivo-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-700.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/archivo-800.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/archivo-900.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2')}

/* ============================================================
   dachlast.de – Overland Design System
   Dunkles Outdoor-Theme, warmer Bernstein-Akzent.
   Definiert Tokens + Basis-Typografie + Header.
   Komponenten-Styles bleiben in den einzelnen Seiten.
   ============================================================ */

:root, :root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#10130E;
  --surface:#161A12;
  --card:#1E2319;
  --card2:#262C20;
  --line:rgba(236,235,221,.12);
  --line-soft:rgba(236,235,221,.07);
  --txt:#ECEAE0;
  --muted:#9DA08F;
  --accent:#E8993A;
  --accent2:#9CB87E;
  --on-accent:#10130E;
  --accent-weak:rgba(232,153,58,.14);
  --bg-accent:rgba(232,153,58,.14);
  --ok:#7FB36B;
  --warn:#E8B84B;
  --bad:#E5765B;
  --bg-bad:rgba(229,118,91,.12);
  --bg-warn:rgba(232,184,75,.10);
  --radius:14px;
}

/* Tag-Modus – warmes Papier, kräftigerer Bernstein für Kontrast */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F1EDE1;
  --surface:#FBF8EF;
  --card:#FFFFFF;
  --card2:#F3EFE3;
  --line:rgba(35,40,28,.14);
  --line-soft:rgba(35,40,28,.07);
  --txt:#23281C;
  --muted:#6B6F5C;
  --accent:#C06E17;
  --accent2:#5E7C3E;
  --on-accent:#FFF7EC;
  --accent-weak:rgba(192,110,23,.13);
  --bg-accent:rgba(192,110,23,.13);
  --ok:#4E8A3D;
  --warn:#B8891F;
  --bad:#C6512F;
  --bg-bad:rgba(198,81,47,.10);
  --bg-warn:rgba(184,137,31,.12);
}

/* Sanfter Wechsel zwischen Tag & Nacht */
html{transition:background-color .5s ease}
body, .site-header, .hcard, .planner, a.tool, .hstat, #fuelbox,
.eyebrow, .btn.ghost, .site-nav a{
  transition:background-color .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease;
}
@media (prefers-reduced-motion: reduce){
  html, body, .site-header, .hcard, .planner, a.tool, .hstat{transition:none !important}
}

*{box-sizing:border-box}
html{scrollbar-color:var(--line) transparent}
body{
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;letter-spacing:-.015em}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--on-accent)}

/* ============================================================
   Tag/Nacht-Umschalter
   ============================================================ */
.theme-toggle{
  position:relative;flex:0 0 auto;
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;
  background:var(--card);border:1px solid var(--line);color:var(--txt);
  transition:background .18s,border-color .18s,color .18s,transform .18s;
  overflow:hidden;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.theme-toggle:active{transform:translateY(0) scale(.94)}
.theme-toggle svg{width:19px;height:19px;position:absolute;
  transition:transform .45s cubic-bezier(.6,-.28,.4,1.5), opacity .3s ease}
.theme-toggle .i-sun{opacity:0;transform:rotate(-90deg) scale(.4)}
.theme-toggle .i-moon{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .theme-toggle .i-sun{opacity:1;transform:rotate(0) scale(1)}
:root[data-theme="light"] .theme-toggle .i-moon{opacity:0;transform:rotate(90deg) scale(.4)}

/* ============================================================
   Unified Site Header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:40;
  margin:-24px -24px 22px;
  padding:0 24px;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.hbar{
  max-width:1120px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 0;flex-wrap:wrap;
}
.site-header .brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.02em;
  color:var(--txt);text-decoration:none;
}
.site-header .brand b{color:var(--accent);font-weight:800}
.site-header .logo{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 78%, #fff 16%), var(--accent) 46%, color-mix(in srgb,var(--accent) 74%, #000 24%));
  color:var(--on-accent);flex:0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.18), 0 4px 12px color-mix(in srgb,var(--accent) 42%, transparent);
  transition:transform .25s cubic-bezier(.34,1.56,.5,1), box-shadow .25s ease;
}
.site-header .brand:hover .logo{transform:translateY(-1px) rotate(-4deg)}
.site-header .logo svg{width:19px;height:19px;display:block}
.site-header .navwrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.site-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.site-nav a{
  font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;
  padding:6px 11px;border-radius:8px;transition:color .15s,background .15s;
}
.site-nav a:hover{color:var(--txt);background:var(--card)}
.site-nav a.active{color:var(--accent);background:var(--accent-weak)}

/* Eingebettete Karte (index-iframe): Header & Brand ausblenden */
html.embed .site-header{display:none}
html.embed body{padding:16px}

@media(max-width:640px){
  .site-nav{gap:2px}
  .site-nav a{padding:5px 8px;font-size:13px}
}