/* appoldt.de – gemeinsame Grundlage aller Seiten (Design-System „Industry“) */

/* Schriften lokal eingebunden (keine Anfragen an Google Fonts) */
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/barlow-400.woff2) format("woff2"); }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/barlow-500.woff2) format("woff2"); }
@font-face{ font-family:"Barlow"; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/barlow-700.woff2) format("woff2"); }
@font-face{ font-family:"Barlow Condensed"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/barlow-condensed-400.woff2) format("woff2"); }
@font-face{ font-family:"Barlow Condensed"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/barlow-condensed-600.woff2) format("woff2"); }

/* Design-Tokens */
:root{
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-100: #eef6ff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-neutral-100: #f5f5f8;
  --color-neutral-800: #424244;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --ink-accent: var(--color-accent-700);
  --accent-hover: var(--color-accent-600);
  --tag-accent-bg: var(--color-accent-100);
  --tag-accent-fg: var(--color-accent-800);
  --tag-neutral-bg: var(--color-neutral-100);
  --tag-neutral-fg: var(--color-neutral-800);

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;

  --gutter: clamp(20px, 5vw, 56px);
  --max: 1200px;
}

@media (prefers-color-scheme: dark){
  :root{
    --color-bg: #15171a;
    --color-surface: #1c1f22;
    --color-text: #e4e6e8;
    --color-accent: #86a9cc;
    --color-divider: color-mix(in srgb, #e4e6e8 18%, transparent);
    --ink-accent: var(--color-accent-300);
    --accent-hover: var(--color-accent-400);
    --tag-accent-bg: color-mix(in srgb, var(--color-accent) 18%, transparent);
    --tag-accent-fg: var(--color-accent-300);
    --tag-neutral-bg: color-mix(in srgb, var(--color-text) 10%, transparent);
    --tag-neutral-fg: var(--color-text);
  }
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
}

h1, h2, h3{
  font-family:var(--font-heading);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.015em;
  margin:0;
}

a{ color:var(--color-accent); text-decoration:none; text-underline-offset:3px; }
a:hover{ color:var(--accent-hover); }

:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
::selection{ background:color-mix(in srgb, var(--color-accent) 30%, transparent); }

[hidden]{ display:none !important; }

.mono{ font-family:var(--font-mono); }
.kicker{ font-family:var(--font-mono); font-size:12px; color:var(--ink-accent); }
.count{ font-family:var(--font-mono); font-size:12px; opacity:0.6; }

.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--gutter);
}

main{ flex:1; }

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--color-bg);
  border-bottom:1px solid var(--color-divider);
}
.site-header .container{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 28px;
  padding-block:18px;
}
.head-start{
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:20px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--color-text); }
.brand:hover{ color:var(--color-text); }
.brand-prompt{ font-family:var(--font-mono); font-weight:500; font-size:15px; color:var(--color-accent); }
.crumb-sep{ opacity:0.35; }
.crumb{ color:var(--ink-accent); }
.site-nav{ display:flex; flex-wrap:wrap; gap:24px; font-size:14px; }
.site-nav a{ color:var(--color-text); }
.site-nav a:hover{ color:var(--color-accent); }

section[id]{ scroll-margin-top:90px; }

/* Einstiegsbereich mit Rasterhintergrund */
.hero{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:24px 48px;
  padding:clamp(48px, 8vw, 88px) 0 clamp(32px, 5vw, 56px);
  background-image:
    linear-gradient(to bottom, transparent 40%, var(--color-bg)),
    linear-gradient(color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px);
  background-size:100% 100%, 32px 32px, 32px 32px;
  background-position:0 0, -1px -1px, -1px -1px;
}
.hero-title{ flex:2 1 420px; min-width:0; }
.hero-title .kicker{ font-size:13px; margin-bottom:16px; }
.hero h1{
  font-size:clamp(44px, 8vw, 80px);
  line-height:0.95;
  letter-spacing:-0.02em;
  overflow-wrap:break-word;
}
.lead{
  flex:1 1 260px;
  max-width:42ch;
  margin:0;
  font-size:17px;
  line-height:1.6;
  opacity:0.8;
  text-wrap:pretty;
}

/* Blueprint-Rahmen mit Registermarken */
.blueprint{
  position:relative;
  border:1px solid var(--color-divider);
}
.blueprint > .corner{
  position:absolute;
  width:11px;
  height:11px;
  color:color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before,
.blueprint > .corner::after{ content:""; position:absolute; background:currentColor; }
.blueprint > .corner::before{ left:5px; top:0; width:1px; height:100%; }
.blueprint > .corner::after{ top:5px; left:0; width:100%; height:1px; }
.blueprint > .corner.tl{ top:-6px; left:-6px; }
.blueprint > .corner.tr{ top:-6px; right:-6px; }
.blueprint > .corner.bl{ bottom:-6px; left:-6px; }
.blueprint > .corner.br{ bottom:-6px; right:-6px; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap:24px;
}

/* Abschnittsüberschrift mit Zähler */
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  padding:var(--space-2) calc(var(--space-3) * 1.2);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  color:var(--color-text);
  background:transparent;
  border:1px solid var(--color-divider);
  border-radius:0;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
}
.btn:hover{ color:var(--color-text); }
.btn-primary{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-bg); }
.btn-primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--color-bg); }
.btn-secondary:hover{ background:color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active{ background:color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost{ color:var(--color-accent); border-color:transparent; padding-inline:var(--space-1); }
.btn-ghost:hover{ color:var(--color-accent); background:color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active{ background:color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* Tags */
.tag{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  font-size:11px;
  letter-spacing:0.02em;
}
.tag-accent{ background:var(--tag-accent-bg); color:var(--tag-accent-fg); }
.tag-neutral{ background:var(--tag-neutral-bg); color:var(--tag-neutral-fg); }
.tag-outline{ border:1px solid var(--color-accent); color:var(--color-accent); }

/* Aufklapp-Pfeil */
.chev{ display:inline-block; color:var(--color-accent); transition:transform .15s; }

/* Footer */
.site-footer{ border-top:1px solid var(--color-divider); }
.site-footer .container{
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  padding-block:24px;
  font-family:var(--font-mono);
  font-size:12px;
}
.site-footer .copy{ margin-right:auto; opacity:0.7; }
.link-btn{
  font:inherit;
  padding:0;
  background:none;
  border:0;
  color:var(--color-text);
  opacity:0.7;
  cursor:pointer;
}
.link-btn:hover{ opacity:1; color:var(--color-accent); }