/* marcboehle.de — Stil-Brief „Nachtschicht": ../.agent/STIL-BRIEF.md */
@font-face { font-family:"General Sans"; src:url(fonts/general-sans.woff2) format("woff2"); font-weight:200 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url(fonts/geist-mono.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --bg:#0A0A0A; --fg:#EDEDE8; --muted:#8C8C86; --rule:rgba(237,237,232,.14);
  --sans:"General Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--bg); }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--fg); color:var(--bg); }
a { color:inherit; }
a:focus-visible { outline:1px solid var(--fg); outline-offset:4px; }
p { margin:0 0 1em; }
img { display:block; max-width:100%; }

.wrap { max-width:1360px; margin:0 auto; padding:0 clamp(16px, 3.5vw, 48px); }
.mono { font-family:var(--mono); font-size:.75rem; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; font-weight:400; }
.arr { display:inline-block; width:.72em; height:.72em; flex:none; transition:transform .3s var(--ease); }

/* Kopfzeile */
.top { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--rule); }
.top a { text-decoration:none; padding:10px 0; margin:-10px 0; }
.top a:hover { color:var(--muted); }
.top .mid { color:var(--muted); }
.top .clock { justify-self:end; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Einstieg: Linienfeld hinten, Headline links unten, Porträt rechts */
.hero { position:relative; overflow:hidden; }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.hero .wrap {
  position:relative; z-index:1; min-height:calc(100svh - 58px);
  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; align-items:end;
  padding-top:clamp(40px, 7vh, 88px); padding-bottom:clamp(32px, 6vh, 64px);
}
.hero .text { grid-column:1 / 9; grid-row:1; }
.hero figure { grid-column:9 / 13; grid-row:1; align-self:stretch; margin:0; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; }
.hero figure img { width:100%; height:auto; aspect-ratio:4 / 5; max-height:calc(100svh - 230px); object-fit:cover; object-position:50% 22%; filter:grayscale(1) contrast(1.06); }
.hero figcaption { display:flex; justify-content:space-between; color:var(--muted); }
.hero figcaption span { background:var(--bg); padding:2px 0; }
.hero h1 {
  margin:0 0 clamp(28px, 5vh, 44px);
  font-size:clamp(2.1rem, 5.8vw, 5.3rem); font-weight:600; line-height:.95; letter-spacing:-.042em;
}
.hero h1 span { display:block; }
.hero h1 .b { font-weight:300; color:#A6A6A0; }
.hero-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; padding-top:20px; border-top:1px solid var(--rule); }
.hero-foot .mono { margin:0; color:var(--muted); }

.pill {
  display:inline-flex; align-items:center; gap:16px; padding:19px 30px; border-radius:999px;
  background:var(--fg); color:var(--bg); text-decoration:none;
  font-size:1.0625rem; font-weight:500; letter-spacing:-.005em; outline:1px solid var(--fg); outline-offset:-1px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.pill:hover { background:var(--bg); color:var(--fg); }
.pill:hover .arr, .row:hover .arr, .big:hover .arr { transform:translate(3px, -3px); }

/* Abschnitte */
.sec { padding:clamp(64px, 10vw, 140px) 0; border-top:1px solid var(--rule); }
.label { margin:0 0 clamp(28px, 4vw, 48px); color:var(--muted); }
.label b { color:var(--fg); font-weight:400; }
.intro p:not(.label) { margin:0; max-width:24em; font-size:clamp(1.5rem, 3.1vw, 2.75rem); line-height:1.16; letter-spacing:-.025em; font-weight:500; }

/* Angebote als Zeilen */
.rows { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--rule); }
.row {
  position:relative; display:grid; grid-template-columns:3.5rem minmax(0, 1fr) minmax(0, 1.25fr) max-content; column-gap:clamp(16px, 2.5vw, 40px);
  padding:30px clamp(0px, 1vw, 16px); border-top:1px solid var(--rule);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.row:first-child { border-top:0; }
.row .no { padding-top:.7rem; color:var(--muted); }
.row h3 { margin:0; font-size:clamp(1.6rem, 2.6vw, 2.4rem); font-weight:500; line-height:1.05; letter-spacing:-.03em; }
.row h3 i { font-style:normal; font-weight:300; }
.row .desc { margin:0 0 14px; color:var(--muted); max-width:34em; transition:color .25s var(--ease); }
.row .price { margin:0; text-align:right; font-size:clamp(1.4rem, 2.2vw, 2rem); font-weight:500; letter-spacing:-.03em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.row .go { display:inline-flex; align-items:center; gap:8px; padding:12px 0; text-decoration:none; font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; }
.row .go::after { content:""; position:absolute; inset:0; }
.row:hover { background:var(--fg); color:var(--bg); }
.row:hover .no, .row:hover .desc { color:#55554F; }

/* Ablauf */
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(24px, 3vw, 48px); counter-reset:s; }
.steps li { counter-increment:s; padding-top:20px; border-top:1px solid var(--fg); font-size:1.125rem; line-height:1.45; }
.steps li::before { content:"0" counter(s); display:block; margin-bottom:28px; font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; color:var(--muted); }

/* Zwei Spalten */
.duo { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(40px, 6vw, 96px); }
.duo h2 { margin:0 0 24px; }
.duo p { margin:0; font-size:clamp(1.2rem, 1.7vw, 1.5rem); line-height:1.35; letter-spacing:-.015em; max-width:26em; }

/* Schluss */
.end { padding:clamp(72px, 12vw, 180px) 0 clamp(48px, 7vw, 96px); border-top:1px solid var(--rule); }
.big {
  display:inline-flex; align-items:baseline; flex-wrap:wrap; column-gap:.25em; text-decoration:none;
  font-size:clamp(2.4rem, 8.4vw, 8.5rem); font-weight:600; line-height:.95; letter-spacing:-.045em;
}
.big span { font-weight:300; color:var(--muted); transition:color .25s var(--ease); }
.big:hover span { color:var(--fg); }
.big .arr { width:.6em; height:.6em; align-self:center; }

.foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 32px; padding:12px 0 40px; border-top:1px solid var(--rule); color:var(--muted); }
.foot p { margin:0; }
.foot a { text-decoration:none; display:inline-block; padding:12px 0; }
.foot a:hover { color:var(--fg); }
.foot p + p { text-transform:none; letter-spacing:.02em; }

/* Unterseite (Impressum) */
.doc { padding:clamp(48px, 8vw, 112px) 0; max-width:46rem; }
.doc h1 { font-size:clamp(2.4rem, 6vw, 4.5rem); font-weight:600; line-height:.95; letter-spacing:-.04em; margin:0 0 32px; }
.doc h1.next { margin-top:96px; padding-top:48px; border-top:1px solid var(--rule); }
.doc h2 { font-family:var(--mono); font-weight:400; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:44px 0 12px; }
.doc p { color:#C9C9C3; }
.doc a { color:var(--fg); text-underline-offset:3px; }
.doc .back { margin-bottom:48px; }
.doc .back a { color:var(--muted); text-decoration:none; padding:10px 0; }
.doc .back a:hover { color:var(--fg); }
.doc .stand { margin-top:48px; color:var(--muted); }

/* Handy */
@media (max-width: 760px) {
  .top { grid-template-columns:1fr auto; }
  .top .mid { display:none; }
  .hero .wrap { grid-template-columns:minmax(0, 1fr); min-height:0; row-gap:28px; padding-top:20px; }
  .hero figure { grid-column:1; grid-row:1; }
  .hero figure img { aspect-ratio:6 / 5; max-height:none; object-position:50% 14%; }
  .hero .text { grid-column:1; grid-row:2; }
  .top a, .doc .back a { padding:12px 0; }
  .hero h1 { hyphens:auto; }
  .hero-foot { flex-direction:column-reverse; align-items:stretch; }
  .pill { justify-content:space-between; padding:18px 22px; font-size:1rem; white-space:nowrap; }
  .row { grid-template-columns:2.5rem minmax(0, 1fr); row-gap:12px; padding:26px 0; }
  .row .desc, .row .price, .row .side { grid-column:2; }
  .row .price { text-align:left; order:1; }
  .row .side { order:2; }
  .row:hover { background:transparent; color:inherit; }
  .row:hover .no, .row:hover .desc { color:var(--muted); }
  .steps, .duo { grid-template-columns:minmax(0, 1fr); }
  .steps li::before { margin-bottom:12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }