/* ===========================================================
   Journalwolf: gemeinsame Stildatei für die Unterseiten
   (Craft-Look, passend zur Startseite). Selbst gehostete
   Schriften, kein externer Aufruf. Relative Pfade (Docroot =
   landing/), funktioniert lokal und bei sauberen URLs.
   =========================================================== */

@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Space Mono';src:url('fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('fonts/space-mono-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#0b0d10; --bg-soft:#12161c; --card:#141a21; --line:#26303c;
  --text:#e9eef5; --muted:#94a3b6; --gold:#e0a94a; --gold-bright:#f4c66a;
  --maxw:820px;
  --f-display:'Space Grotesk',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url('assets/web/texture.webp') center/1200px repeat;
  opacity:.05; mix-blend-mode:screen;
}
a{color:var(--gold-bright); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* ---------- Topbar ---------- */
header{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:rgba(11,13,16,.72); border-bottom:1px solid rgba(38,48,60,.6)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px;
  max-width:1120px; margin:0 auto; padding:0 22px}
.brand{display:flex; align-items:center; gap:12px}
.brand .mark{width:34px; height:34px; border-radius:50%; object-fit:cover; display:block}
.brand a{color:var(--text); font-family:var(--f-display); font-weight:700; font-size:1.18rem; letter-spacing:-.01em}
.brand a:hover{text-decoration:none}
.nav > a{font-family:var(--f-mono); font-size:.82rem; color:var(--muted)}
.nav > a:hover{color:var(--text); text-decoration:none}

/* ---------- Inhalt ---------- */
main{padding:56px 0 28px}
h1{font-family:var(--f-display); font-weight:700; font-size:clamp(1.9rem,4vw,2.6rem);
  line-height:1.1; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance}
h2{font-family:var(--f-display); font-weight:700; font-size:1.35rem; letter-spacing:-.01em;
  margin:42px 0 14px; border-top:1px solid var(--line); padding-top:28px}
h3{font-family:var(--f-display); font-weight:700; font-size:1.08rem; margin:24px 0 8px}
p{margin:0 0 15px}
ol,ul{margin:0 0 15px; padding-left:22px}
li{margin:0 0 8px}
li::marker{color:var(--gold)}
strong{color:#fff; font-weight:600}
em{color:var(--text)}
.lead{color:var(--muted); font-size:1.08rem; max-width:70ch}

/* Karten / Adressblöcke */
.card{background:var(--card); border:1px solid var(--line); border-radius:0; padding:20px 22px; margin:0 0 16px}
.card.gold{border-color:rgba(224,169,74,.4); border-left:2px solid var(--gold); position:relative}
.addr{background:var(--bg-soft); border:1px solid var(--line); border-radius:0; padding:18px 20px; margin:8px 0 16px}
.addr p{margin:0}

/* Code */
code{background:var(--bg-soft); border:1px solid var(--line); border-radius:0;
  padding:1px 6px; font-family:var(--f-mono); font-size:.86em; color:var(--gold-bright)}

/* Datenfluss-Diagramm */
.flow{display:flex; gap:0; align-items:stretch; flex-wrap:wrap; margin:18px 0 6px}
.flow .node{flex:1 1 180px; background:var(--card); border:1px solid var(--line); border-radius:0;
  padding:16px 16px; min-width:170px}
.flow .node h4{font-family:var(--f-display); font-weight:700; margin:0 0 6px; font-size:.98rem; color:var(--gold-bright)}
.flow .node p{margin:0; font-size:.88rem; color:var(--muted)}
.flow .arrow{flex:none; display:flex; align-items:center; color:var(--gold);
  font-family:var(--f-mono); font-size:1.5rem; padding:0 14px}
@media (max-width:700px){
  .flow{flex-direction:column}
  .flow .arrow{transform:rotate(90deg); justify-content:center; padding:12px 0}
}

/* Tabellen */
.tblwrap{overflow-x:auto; margin:0 0 16px}
table{border-collapse:collapse; width:100%; font-size:.95rem}
th,td{border:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top}
th{background:var(--bg-soft); color:var(--gold-bright); font-family:var(--f-mono);
  font-weight:700; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap}
td:first-child{color:#fff}

hr{border:0; border-top:1px solid var(--line); margin:36px 0}
.stand{color:var(--muted); font-family:var(--f-mono); font-size:.85rem; font-style:normal}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:34px 0; color:var(--muted); font-size:.9rem; margin-top:52px}
.foot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--text)}
.foot > div:last-child{font-family:var(--f-mono); font-size:.82rem}