/* cf-labs — schwarz auf weiss wie das Logo, ein Akzent: die Markierung im Editor. */

:root {
  --papier: #ffffff;
  --flaeche: #f4f5f7;
  --tinte: #0b0b0c;
  --grau: #585b61;
  --linie: #e1e3e7;
  --markierung: #ffe45c;
  --auf-markierung: #0b0b0c;
  --ok: #1d7a46;
  --arbeit: #8a5a00;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0e0f11;
    --flaeche: #17191c;
    --tinte: #f1f1ee;
    --grau: #a2a5ac;
    --linie: #2a2d32;
    --markierung: #ffe45c;
    --auf-markierung: #0b0b0c;
    --ok: #5fcf8e;
    --arbeit: #e7b04a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --papier: #0e0f11;
  --flaeche: #17191c;
  --tinte: #f1f1ee;
  --grau: #a2a5ac;
  --linie: #2a2d32;
  --markierung: #ffe45c;
  --auf-markierung: #0b0b0c;
  --ok: #5fcf8e;
  --arbeit: #e7b04a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 17px/1.6 var(--sans);
}

::selection { background: var(--markierung); color: var(--auf-markierung); }

a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--markierung);
  outline-offset: 2px;
}

.spalte { max-width: 960px; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { font-family: var(--mono); line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; }

.marke {
  display: inline;
  background: var(--markierung);
  color: var(--auf-markierung);
  padding: 0 .15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── Kopf ─────────────────────────────────────────────── */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0;
}
.kopf a.name {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; font-family: var(--mono); font-weight: 700;
}
.logo { width: 40px; height: 40px; display: block; color: var(--tinte); }
.kopf nav { display: flex; gap: 20px; font-size: .95rem; }
.kopf nav a { text-decoration: none; color: var(--grau); }
.kopf nav a:hover { color: var(--tinte); }
.kopf nav a.sprache {
  font: 600 .8rem/1 var(--mono); letter-spacing: .04em;
  border: 1px solid var(--linie); border-radius: 4px; padding: 5px 7px; color: var(--tinte);
}

/* ── Einstieg ─────────────────────────────────────────── */
.einstieg {
  display: grid; grid-template-columns: auto 1fr; gap: 40px;
  align-items: center; padding: 48px 0 64px;
  border-bottom: 1px solid var(--linie);
}
.einstieg .logo-gross { width: 168px; height: 168px; display: block; color: var(--tinte); }
.einstieg h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.02em; }
.cursor::after {
  content: "▍"; margin-left: .05em; color: var(--tinte);
  animation: blinken 1.1s steps(1) infinite;
}
@keyframes blinken { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } }
.einstieg p { max-width: 60ch; color: var(--grau); margin: 20px 0 0; font-size: 1.1rem; }
.einstieg p strong { color: var(--tinte); font-weight: 600; }

/* ── Abschnitte ───────────────────────────────────────── */
section { padding: 56px 0; border-bottom: 1px solid var(--linie); }
section > .spalte > h2 { margin-bottom: 8px; }
.untertitel { color: var(--grau); margin: 0 0 28px; max-width: 60ch; }

/* Projekte: eine Liste, kein Kartenraster — jedes Projekt eine Zeile im Verzeichnis. */
.projekte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.projekt {
  display: grid; grid-template-columns: 14rem 1fr; gap: 8px 32px;
  padding: 24px 0; border-top: 1px solid var(--linie);
}
.projekt:first-child { border-top: 0; }
.projekt .kennung { font-family: var(--mono); }
.projekt .kennung h3 { font-size: 1.2rem; }
.projekt .art { color: var(--grau); font-size: .9rem; margin-top: 4px; }
.projekt p { margin: 0; max-width: 62ch; }
.projekt .technik { font-family: var(--mono); font-size: .85rem; color: var(--grau); margin-top: 10px; }
.projekt .links { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }

.stand {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 .78rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  margin-top: 10px;
}
.stand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stand.live { color: var(--ok); }
.stand.arbeit { color: var(--arbeit); }

/* So arbeiten wir — eine echte Reihenfolge, deshalb nummeriert. */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; }
.ablauf li::before {
  content: counter(schritt, decimal-leading-zero);
  display: block; font: 700 .85rem/1 var(--mono); color: var(--grau); margin-bottom: 10px;
}
.ablauf h3 { margin-bottom: 6px; }
.ablauf p { margin: 0; color: var(--grau); }

/* Unterstützen */
.kaffee {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--tinte); color: var(--papier);
  font: 600 1rem/1 var(--mono); text-decoration: none;
  padding: 14px 20px; border-radius: 6px;
}
.kaffee:hover { background: var(--markierung); color: var(--auf-markierung); }

/* Kontakt */
form.kontakt { display: grid; gap: 16px; max-width: 560px; }
form.kontakt label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
form.kontakt input, form.kontakt textarea {
  font: inherit; color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 6px; padding: 12px;
  width: 100%;
}
form.kontakt textarea { min-height: 160px; resize: vertical; }
form.kontakt .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.kontakt button {
  justify-self: start; font: 600 1rem/1 var(--mono);
  background: var(--tinte); color: var(--papier);
  border: 0; border-radius: 6px; padding: 14px 20px; cursor: pointer;
}
form.kontakt button[disabled] { opacity: .5; cursor: progress; }
.hinweis { color: var(--grau); font-size: .9rem; margin: 0; }
.rueckmeldung { margin: 0; font-weight: 600; min-height: 1.6em; }
.rueckmeldung.gut { color: var(--ok); }
.rueckmeldung.schlecht { color: #c2352b; }

/* Fuss */
.fuss { padding: 32px 0 48px; color: var(--grau); font-size: .9rem; }
.fuss .spalte { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
.fuss nav { display: flex; gap: 20px; }

/* Rechtstexte */
.rechtstext { padding: 32px 0 56px; }
.rechtstext h1 { font-size: 2rem; margin: 16px 0 8px; }
.rechtstext h2 { font-size: 1.15rem; margin: 32px 0 8px; }
.rechtstext p, .rechtstext li { max-width: 68ch; }
.rechtstext address { font-style: normal; }

/* Schmal */
@media (max-width: 720px) {
  .einstieg { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 48px; }
  .einstieg .logo-gross { width: 112px; height: 112px; }
  .projekt { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; gap: 24px; }
  .kopf nav { gap: 14px; font-size: .9rem; }
}