/* habitat.css – gemeinsamer Look für joerg.oyen.de (Startseite, ABC, …)
   GitHub-Stil im Blaupausen-Raster. Tagsüber hell/kontrastreich (per Skript im <head>), sonst Blaupause.
   Stand 2026-10-10 · Quelle: daily-web/entwurf */

:root{
  --bg:#ffffff; --bg-subtle:#f6f8fa; --fg:#0d1117; --muted:#3d444d; --line:#9aa4ae; --line-soft:#d1d9e0;
  --accent:#0550ae; --accent-soft:rgba(5,80,174,.08); --accent-fg:#ffffff;
  --grid:rgba(9,105,218,.06); --grid-major:rgba(9,105,218,.10);
  --now:#b35900; --hatch:rgba(61,68,77,.28);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b2a4a; --bg-subtle:#0e3157; --fg:#e8f0f8; --muted:#9db4cc; --line:rgba(232,240,248,.28); --line-soft:rgba(232,240,248,.14);
    --accent:#8cc8ff; --accent-soft:rgba(140,200,255,.12); --accent-fg:#0b2a4a;
    --grid:rgba(255,255,255,.045); --grid-major:rgba(255,255,255,.08);
    --now:#ffb86b; --hatch:rgba(232,240,248,.16);
  }
}
:root[data-theme="dark"]{
  --bg:#0b2a4a; --bg-subtle:#0e3157; --fg:#e8f0f8; --muted:#9db4cc; --line:rgba(232,240,248,.28); --line-soft:rgba(232,240,248,.14);
  --accent:#8cc8ff; --accent-soft:rgba(140,200,255,.12); --accent-fg:#0b2a4a;
  --grid:rgba(255,255,255,.045); --grid-major:rgba(255,255,255,.08);
  --now:#ffb86b; --hatch:rgba(232,240,248,.16);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--fg); font:15px/1.55 var(--sans);
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1012px;margin:0 auto;padding:0 16px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}

/* Kopf */
.top{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(2px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.crumb{font-family:var(--mono);font-size:14px}
.crumb b{font-weight:600}
.crumb span{color:var(--muted);margin:0 6px}
.label{display:inline-block;font:12px/18px var(--mono);padding:0 8px;border:1px solid var(--line);border-radius:2em;color:var(--muted);white-space:nowrap}
.label.accent{color:var(--accent);border-color:var(--accent)}

header.intro{padding:40px 0 24px}
header.intro h1{font-size:32px;line-height:1.2;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
header.intro p{margin:0;max-width:62ch;color:var(--muted);font-size:16px}

/* Box im GitHub-Stil */
.box{border:1px solid var(--line);border-radius:6px;background:var(--bg);margin-bottom:24px;overflow:hidden}
.box-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 16px;background:var(--bg-subtle);border-bottom:1px solid var(--line)}
.box-head h2{margin:0;font-size:14px;font-weight:600}
.box-body{padding:16px}

footer{padding:24px 0 48px;font:12px/1.8 var(--mono);color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--muted)} footer a:hover{color:var(--accent)}
.thema{font:12px var(--mono);background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);padding:2px 8px;cursor:pointer}


/* Navigation in der Kopfzeile */
.nav{display:flex;gap:4px;flex-wrap:wrap;font:13px/1 var(--mono)}
.nav a{color:var(--muted);padding:6px 8px;border-radius:6px}
.nav a:hover{color:var(--accent);background:var(--accent-soft);text-decoration:none}
.nav a[aria-current="page"]{color:var(--fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:720px){
  header.intro{padding:28px 0 16px}
  header.intro h1{font-size:26px}
}