/* Platzhalter-Website (RUN_00). Tokens kommen aus tokens.css (Kopie von app/static/css/tokens.css). */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--txt);
  font: 400 17px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-ink); }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--s-6); }

/* Kopf */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font: 700 21px/1 var(--font-display); letter-spacing: -.02em; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand:hover { color: var(--ink); }
.top-note { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Startseite */
.hero { padding: 120px 0 112px; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s-5);
  font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }
h1 { margin: 0; max-width: 15ch; color: var(--ink);
  font: 700 clamp(44px, 7vw, 76px)/1.02 var(--font-display); letter-spacing: -.035em; }
.lead { margin: var(--s-6) 0 0; max-width: 34em; font-size: 20px; line-height: 1.55; color: var(--txt); }

.band { background: var(--ink); color: #C9CDD3; padding: 96px 0; }
.band h2 { margin: 0 0 var(--s-7); max-width: 22ch; color: #FFFFFF;
  font: 700 clamp(28px, 4vw, 40px)/1.1 var(--font-display); letter-spacing: -.025em; }
.band h2 em { font-style: normal; color: var(--signal); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .14); }
.steps li { padding: var(--s-5) var(--s-5) 0 0; }
.steps li + li { padding-left: var(--s-5); border-left: 1px solid rgba(255, 255, 255, .14); }
.steps .n { display: block; margin-bottom: var(--s-3); font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--signal); }
.steps b { display: block; margin-bottom: var(--s-2); color: #FFFFFF; font-weight: 600; }
.steps p { margin: 0; font-size: 16px; line-height: 1.55; }

/* Rechtstexte */
.legal { padding: 80px 0 96px; }
.legal h1 { font-size: clamp(28px, 7.2vw, 46px); max-width: none; margin-bottom: var(--s-6); hyphens: auto; overflow-wrap: break-word; }
.legal .doc { max-width: 72ch; }
.legal h2 { margin: var(--s-7) 0 var(--s-3); color: var(--ink); font: 600 20px/1.3 var(--font-ui); }
.legal h3 { margin: var(--s-5) 0 var(--s-2); color: var(--ink); font: 600 17px/1.4 var(--font-ui); }
.legal p, .legal ul { margin: 0 0 var(--s-4); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: var(--s-1); }
.legal code { font-family: var(--font-mono); font-size: .86em; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.legal .meta { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Platzhalter, die Daniel vor Go-live ausfüllt — sichtbar markiert */
.ph { background: #FBEFD9; color: var(--warn); padding: 0 4px; border-radius: 4px; font-family: var(--font-mono); font-size: .88em; }

/* Fuß */
.foot { margin-top: auto; border-top: 1px solid var(--line); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between;
  padding-top: var(--s-5); padding-bottom: var(--s-5); font-size: 14px; color: var(--muted); }
.foot nav { display: flex; gap: var(--s-5); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 760px) {
  .wrap { padding: 0 var(--s-4); }
  .top .wrap { height: 60px; }
  .top-note { display: none; }
  .hero { padding: 64px 0 72px; }
  .lead { font-size: 18px; margin-top: var(--s-5); }
  .band { padding: 64px 0; }
  .band h2 { margin-bottom: var(--s-6); }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: var(--s-5) 0; border-left: 0; }
  .steps li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
  .legal { padding: 48px 0 64px; }
}