/* VADER MAE — Stylesheet
   Dunkle Werkstatt mit Pixel-Terminal, CRT-Schimmer und Bernstein-Glühen. */

/* ─── Schriften ─────────────────────────────────────────────── */

@font-face {
  font-family: "Vollkorn";
  src: url("/fonts/Vollkorn-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vollkorn";
  src: url("/fonts/Vollkorn-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Vollkorn";
  src: url("/fonts/Vollkorn-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("/fonts/VT323-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ─── Reset, leicht ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding-left: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ─── Variablen ─────────────────────────────────────────────── */

:root {
  --bg:           #161310;
  --bg-tief:      #1F1A14;
  --linie:        #3A3128;
  --linie-stark:  #594B3C;
  --tinte:        #E8DCC3;
  --tinte-gedeckt:#A89A7E;
  --akzent:       #E5A158;
  --akzent-tief:  #FFB871;
  --akzent-dunkel:#8B5A2B;

  --serif: "Vollkorn", Georgia, "Iowan Old Style", "Apple Garamond", "Times New Roman", serif;
  --pixelfont: "VT323", ui-monospace, "SF Mono", "Cascadia Mono", "Fira Code", "Liberation Mono", monospace;

  --spalte: 38rem;
  --spalte-weit: 52rem;

  --glow-soft: 0 0 12px rgba(229, 161, 88, 0.35);
  --glow-strong: 0 0 24px rgba(229, 161, 88, 0.45);
}

:root { color-scheme: dark; }

/* ─── Grundgerüst ───────────────────────────────────────────── */

html { background: var(--bg); }

body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(229, 161, 88, 0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(229, 161, 88, 0.04), transparent 60%),
    var(--bg);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.55rem + 0.7vw, 1.1875rem);
  line-height: 1.65;
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  min-height: 100vh;
  position: relative;
}

/* CRT-Scanlines als feste, unklickbare Overlay-Schicht */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(0, 0, 0, 0.10) 3px,
      rgba(0, 0, 0, 0.10) 3px
    );
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* gepunkteter Pixel-Rand am Seitenkopf */
body::before {
  content: "";
  display: block;
  height: 3px;
  margin-inline: calc(-1 * clamp(1.25rem, 5vw, 3rem));
  background-image: linear-gradient(to right, var(--akzent-dunkel) 50%, transparent 50%);
  background-size: 6px 3px;
  background-repeat: repeat-x;
  opacity: 0.6;
}

/* ─── Hilfsmittel ───────────────────────────────────────────── */

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -10000px; top: 0;
  padding: .5rem .75rem;
  background: var(--akzent); color: var(--bg);
  text-decoration: none; font-family: var(--pixelfont);
  z-index: 9999;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ─── Kopf ──────────────────────────────────────────────────── */

.kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  max-width: var(--spalte-weit);
  margin-inline: auto;
}

.marke {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.92;
  color: var(--tinte);
  text-decoration: none;
  font-family: var(--pixelfont);
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem);
}
.marke__zeile { display: block; text-transform: uppercase; }
.marke__zeile + .marke__zeile { margin-top: 0.05em; }
.marke:hover { color: var(--akzent); text-shadow: var(--glow-soft); }

.kopf__nav {
  display: flex;
  gap: 1.5rem;
  padding-top: 0.5rem;
  font-family: var(--pixelfont);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}
.kopf__nav a {
  color: var(--tinte-gedeckt);
  text-decoration: none;
  transition: color 120ms ease, text-shadow 120ms ease;
}
.kopf__nav a::before { content: "› "; color: var(--akzent); }
.kopf__nav a:hover,
.kopf__nav a:focus-visible {
  color: var(--akzent);
  text-shadow: var(--glow-soft);
}

/* ─── Hauptbereich ─────────────────────────────────────────── */

main {
  max-width: var(--spalte);
  margin-inline: auto;
  padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 8vw, 6rem);
}

section + section {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px dashed var(--linie);
}

p { max-width: 38rem; }
p + p { margin-top: 1em; }

/* ─── Hero ─────────────────────────────────────────────────── */

.hero {
  text-align: left;
  padding-block: clamp(1rem, 3vw, 2.5rem) 0;
}

.hero__wortmarke {
  font-family: var(--pixelfont);
  font-weight: 400;
  font-size: clamp(4.5rem, 4rem + 8vw, 9rem);
  line-height: 0.88;
  letter-spacing: 0.02em;
  color: var(--tinte);
  text-shadow:
    0 0 18px rgba(229, 161, 88, 0.18),
    0 0 4px rgba(229, 161, 88, 0.35);
  margin-bottom: 0.4em;
  display: block;
}
.hero__wortmarke__zeile { display: block; }

.hero__untertitel {
  font-family: var(--pixelfont);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  color: var(--tinte-gedeckt);
  margin-bottom: 1.5em;
  letter-spacing: 0.02em;
}
.hero__caret { color: var(--akzent); }
.hero__cursor {
  display: inline-block;
  width: 0.6em;
  margin-left: 0.15em;
  color: var(--akzent);
  animation: blink 1.1s steps(2, start) infinite;
  vertical-align: -0.05em;
}
@media (prefers-reduced-motion: reduce) {
  .hero__cursor { animation: none; opacity: 0.7; }
}
@keyframes blink {
  to { opacity: 0; }
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin-bottom: 2.5em;
  font-family: var(--pixelfont);
  font-size: 1.05rem;
  color: var(--tinte-gedeckt);
}
.hero__chips li {
  border: 1px solid var(--linie-stark);
  padding: 0.05em 0.7em 0.15em;
  letter-spacing: 0.03em;
}
.hero__chips li::before { content: "› "; color: var(--akzent); }

.hero__lead {
  font-size: clamp(1.2rem, 0.85rem + 1vw, 1.45rem);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin-bottom: 1.25em;
  color: var(--tinte);
}

/* ─── Abschnitts-Titel ─────────────────────────────────────── */

.abschnitt__titel {
  font-family: var(--pixelfont);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 0.4em;
  color: var(--tinte);
  text-shadow: 0 0 8px rgba(229, 161, 88, 0.15);
}
.abschnitt__titel::before {
  content: "// ";
  color: var(--akzent);
  text-shadow: var(--glow-soft);
}

.abschnitt__vorwort {
  color: var(--tinte-gedeckt);
  font-style: italic;
  margin-bottom: 2.5em;
  max-width: 36rem;
}

/* ─── Werkstatt-Liste ─────────────────────────────────────── */

.vorhaben {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  counter-reset: vorhaben;
}

.vorhaben__eintrag {
  position: relative;
  counter-increment: vorhaben;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
  padding-left: 0;
}

.vorhaben__eintrag::before {
  content: "[" counter(vorhaben, decimal-leading-zero) "]";
  font-family: var(--pixelfont);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--akzent);
  text-shadow: var(--glow-soft);
  grid-column: 2;
  margin-bottom: 0.2em;
}

.vorhaben__icon {
  grid-row: 1 / span 3;
  grid-column: 1;
  width: 56px;
  height: 56px;
  color: var(--akzent);
  background: var(--bg-tief);
  padding: 8px;
  border: 1px solid var(--linie-stark);
  filter: drop-shadow(0 0 6px rgba(229, 161, 88, 0.15));
}

.vorhaben__titel {
  grid-column: 2;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 0.4em;
  color: var(--tinte);
}

.vorhaben__eintrag > p {
  grid-column: 2;
  color: var(--tinte);
  max-width: 36rem;
}

/* ─── Kontakt ──────────────────────────────────────────────── */

.kontakt__mail {
  margin-top: 1.25em;
  font-family: var(--pixelfont);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  letter-spacing: 0.03em;
}
.kontakt__mail a {
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 2px;
  color: var(--akzent);
  text-shadow: var(--glow-soft);
}
.kontakt__mail a::before { content: "› "; color: var(--tinte-gedeckt); text-shadow: none; }
.kontakt__mail a:hover,
.kontakt__mail a:focus-visible {
  color: var(--akzent-tief);
  border-bottom-color: var(--akzent);
  text-shadow: var(--glow-strong);
}
.kontakt__mail::after {
  content: "_";
  display: inline-block;
  margin-left: 0.25em;
  color: var(--akzent);
  text-shadow: var(--glow-soft);
  animation: blink 1.1s steps(2, start) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .kontakt__mail::after { animation: none; opacity: 0.6; }
}

/* ─── Links ────────────────────────────────────────────────── */

a {
  color: var(--akzent);
  text-decoration: underline;
  text-decoration-color: var(--linie-stark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 120ms ease, text-decoration-color 120ms ease, text-shadow 120ms ease;
}
a:hover,
a:focus-visible {
  color: var(--akzent-tief);
  text-decoration-color: var(--akzent);
  text-shadow: var(--glow-soft);
}
a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Fuß ──────────────────────────────────────────────────── */

.fuss {
  max-width: var(--spalte-weit);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
  border-top: 1px dashed var(--linie);
  color: var(--tinte-gedeckt);
  font-size: 0.9rem;
  line-height: 1.6;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "ich nav" "hinweis hinweis";
  row-gap: 1.25rem;
  column-gap: 2rem;
}
.fuss__ich { grid-area: ich; font-family: var(--pixelfont); font-size: 1.05rem; }
.fuss__nav { grid-area: nav; display: flex; gap: 1.25rem; font-family: var(--pixelfont); font-size: 1.05rem; }
.fuss__hinweis { grid-area: hinweis; max-width: 38rem; }
.fuss a {
  color: var(--tinte-gedeckt);
  text-decoration-color: var(--linie);
}
.fuss a:hover, .fuss a:focus-visible {
  color: var(--akzent);
  text-decoration-color: var(--akzent);
  text-shadow: var(--glow-soft);
}

/* ─── Rechtliche Seiten ────────────────────────────────────── */

.rechtliche {
  max-width: var(--spalte);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}
.rechtliche h1 {
  font-family: var(--pixelfont);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 0.6em;
  text-shadow: 0 0 8px rgba(229, 161, 88, 0.15);
}
.rechtliche h1::before { content: "// "; color: var(--akzent); text-shadow: var(--glow-soft); }
.rechtliche h2 {
  font-family: var(--pixelfont);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-top: 2em;
  margin-bottom: 0.4em;
  color: var(--akzent);
}
.rechtliche p, .rechtliche ul, .rechtliche ol { max-width: 38rem; }
.rechtliche ul, .rechtliche ol { padding-left: 1.2rem; margin-top: 0.5em; list-style: disc; }
.rechtliche li + li { margin-top: 0.25em; }
.rechtliche li::marker { color: var(--akzent); }

.rechtliche__zurueck {
  display: inline-block;
  margin-top: 2.5em;
  font-family: var(--pixelfont);
  font-size: 1.1rem;
  color: var(--tinte-gedeckt);
  text-decoration: none;
}
.rechtliche__zurueck:hover { color: var(--akzent); text-shadow: var(--glow-soft); }

/* ─── Bewegung ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .scanlines { opacity: 0.3; }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─── Selektion ────────────────────────────────────────────── */

::selection { background: var(--akzent); color: var(--bg); }

/* ─── Druck ─────────────────────────────────────────────────── */

@media print {
  body { background: white; color: black; padding: 0; }
  .kopf__nav, .fuss__nav, .skip, .scanlines, .hero__chips, .hero__cursor { display: none; }
  .kontakt__mail::after, .hero__wortmarke { text-shadow: none; }
  a { color: black; text-decoration: underline; }
  .abschnitt__titel::before, .rechtliche h1::before, .kopf__nav a::before { color: black; }
  section + section { border-top: 1px solid #ccc; }
  .vorhaben__icon { background: white; color: black; border-color: #ccc; }
}

/* ─── Schmale Bildschirme ──────────────────────────────────── */

@media (max-width: 30rem) {
  .kopf { flex-direction: column; gap: 1.25rem; }
  .kopf__nav { padding-top: 0; }
  .fuss {
    grid-template-columns: 1fr;
    grid-template-areas: "ich" "nav" "hinweis";
  }
  .fuss__nav { gap: 1rem; }
  .vorhaben__eintrag {
    grid-template-columns: 44px 1fr;
    gap: 0.5rem 0.9rem;
  }
  .vorhaben__icon { width: 44px; height: 44px; padding: 6px; }
  .hero__wortmarke { font-size: clamp(3.5rem, 16vw, 5rem); }
}