@font-face{font-family:Fraunces;font-style:normal;font-weight:400 700;font-display:swap;src:url(/neu/assets/fonts/fraunces-400-700-normal.woff2) format(woff2);font-variation-settings:opsz 40}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/neu/assets/fonts/inter-400-700-normal.woff2) format(woff2)}
@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/neu/assets/fonts/ibmplexmono-400-normal.woff2) format(woff2)}
@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/neu/assets/fonts/ibmplexmono-500-normal.woff2) format(woff2)}

/* ZEHN X SYSTEM EDITIONS · Editorial-Ebene
   Eigenständige Produktwelt neben der Academy: Papier, Graphit, ein Signalblau. */

:root {
  --paper: #FAF8F5;
  --paper-raised: #FFFFFF;
  --ink: #14213D;
  --graphite: #5A5A5A;
  --mist: #8A8578;
  --line: #E5E0D8;
  --blue: #14213D;
  --blue-deep: #1B2A4A;
  --night: #14213D;      /* Dossier-/Evidenzflächen */
  --night-ink: #F3F0EA;
  --night-line: #2A3B5E;
  --ok: #2E6B4F;
  --warn: #8A6D2F;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --gold: #B08D57;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --measure: 62ch;
}

* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 1.4rem; }

/* ---------- Typo-Bausteine ---------- */

.eyebrow {
  font: 600 11.5px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.display {
  font-family: var(--serif);
  font-weight: 550;
  letter-spacing: -.012em;
  line-height: 1.04;
  text-wrap: balance;
}

h1.display { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2.display { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }

.lede { font-size: 1.15rem; line-height: 1.65; color: var(--graphite); max-width: var(--measure); }
p { max-width: var(--measure); }
.dim { color: var(--mist); }

.rule-accent { width: 128px; height: 3px; background: var(--blue); border: 0; margin: 1.6rem 0; }

/* ---------- Seiten-Rhythmus ---------- */

.band { padding: 5.2rem 0; border-top: 1px solid var(--line); }
.band:first-of-type { border-top: 0; }
.band-night { background: var(--night); color: var(--night-ink); border-top: 0; }
.band-night .lede, .band-night p { color: #B9BDC4; }

.sectionhead { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 2.6rem; }

/* ---------- Proof-Leiste ---------- */

.proofbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--line);
  background: var(--paper-raised);
}
.proofbar > div { padding: 1.15rem 1.3rem; border-left: 1px solid var(--line); }
.proofbar > div:first-child { border-left: 0; }
.proofbar b {
  display: block;
  font: 650 1.75rem/1.1 var(--sans);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.proofbar span { font: 500 11.5px/1.45 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mist); }

/* ---------- Fakten-Tabellen (Metadaten) ---------- */

.facts { border-top: 1px solid var(--line); font-size: .92rem; }
.facts > div { display: grid; grid-template-columns: 168px 1fr; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.facts dd { color: var(--graphite); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .78rem 1.5rem;
  font: 600 .92rem/1 var(--sans);
  text-decoration: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-blue { border-color: var(--blue); background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn[aria-disabled="true"] { border-color: var(--line); color: var(--mist); background: transparent; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: transparent; color: var(--mist); }

/* ---------- Evidenz-Terminal ---------- */

.evidence {
  background: var(--night);
  color: var(--night-ink);
  border: 1px solid var(--night-line);
  font: 13px/1.75 var(--mono);
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  white-space: pre;
}
.evidence .pass { color: #5CC98B; }
.evidence .cmd { color: #8FA6F5; }
.evidence .dim { color: #6E737B; }

/* ---------- Editions-Karten (Hub) ---------- */

.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }

.edcard {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.edcard .coverframe {
  padding: 2rem 2rem 0;
  background: linear-gradient(180deg, #ECE9E1, var(--paper-raised));
}
.edcard .coverframe img {
  display: block; width: 100%; max-width: 100%;
  border: 1px solid var(--line);
  box-shadow: 0 18px 34px -22px rgba(22, 24, 27, .38);
}
.edcard .body { padding: 1.7rem 2rem 2rem; display: flex; flex-direction: column; gap: 1.2rem; flex: 1; }
.edcard h3 { font: 700 1.45rem/1.15 var(--sans); letter-spacing: -.015em; }
.edcard .ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; }

.badge {
  display: inline-block;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .6rem;
  border: 1px solid var(--line);
  color: var(--graphite);
  background: var(--paper);
}
.badge-blue { border-color: var(--blue); color: var(--blue); background: transparent; }

/* ---------- Footer ---------- */

.ed-footer { border-top: 1px solid var(--line); padding: 2.6rem 0 3.4rem; font-size: .85rem; color: var(--mist); }
.ed-footer a { color: var(--graphite); }

@media (max-width: 640px) {
  .band { padding: 3.4rem 0; }
  .facts > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* --- Videoreihen ------------------------------------------------------- */
/* Die Folgen sind der freie Beweis, dass die Editionen real sind. Eine reine
   Linkliste wird dem nicht gerecht, deshalb Kacheln mit den echten
   Vorschaubildern aus der Produktion. Die Bilder liegen auf dem eigenen
   Server: kein YouTube-iframe, keine Anfrage an Google beim Seitenaufruf,
   kein zusaetzlicher Auftragsverarbeiter in den Datenschutzhinweisen. */
.vidseries{border-top:1px solid var(--line);padding-top:1.8rem;margin-top:2.6rem}
.vidseries:first-of-type{margin-top:1.4rem}
.vidtop{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.4rem;flex-wrap:wrap}
.vidtop h3{margin:.7rem 0 .4rem;font-size:1.3rem;letter-spacing:-.01em}
.vidtop p{margin:0;color:var(--graphite);max-width:58ch;font-size:.95rem}
.vidmeta{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  color:var(--graphite);white-space:nowrap}

.vidlist{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem 1.2rem}
.vidlist a{display:grid;gap:.55rem;text-decoration:none;color:var(--ink)}
.vidlist img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;border:1px solid var(--line);background:var(--paper-raised)}
.vidlist .meta{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;
  color:var(--graphite);text-transform:uppercase}
.vidlist .t{font-size:.95rem;line-height:1.35;font-weight:600;text-wrap:balance}
.vidlist a:hover .t{text-decoration:underline;text-underline-offset:3px}
.vidlist a:hover img{border-color:var(--ink)}
.vidlist a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

.vidactions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}

@media (max-width:520px){
  .vidlist{grid-template-columns:1fr 1fr;gap:1.1rem .9rem}
  .vidlist .t{font-size:.86rem}
}

/* --- Angekuendigte Edition ---------------------------------------------- */
/* Ohne Produkt kein Cover und kein Preis. Eine Cover-Attrappe in Buchhoehe
   erzeugt nur eine grosse leere Flaeche. Stattdessen ein breiter Streifen
   unter den echten Karten, mit der Editionsnummer als Marke. */
.edcard-soon{grid-column:1/-1;display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:2rem;align-items:start;padding:1.8rem 1.9rem}
.edcard-soon .body{padding:0}
/* Das Cover ist echt, das Produkt noch nicht. Deshalb zeigt der Streifen es
   klein und ohne Rahmenpathos, nicht in Kaufkarten-Groesse. */
.soonframe{margin:0;border:1px solid var(--line);overflow:hidden;
  box-shadow:0 1px 3px rgb(0 0 0 / .07)}
.soonframe img{display:block;width:100%;height:auto}
.facts-soon dt{min-width:9rem}
.soonnote{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--graphite)}
@media (max-width:760px){.edcard-soon{grid-template-columns:1fr;gap:.6rem}}

/* Die Videoreihe steht unter den Knoepfen, nicht als dritter Knopf: sie ist
   der freie Beweis, kein gleichrangiger Handlungsaufruf. */
.edplaylist{margin-top:.9rem;padding-top:.85rem;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--graphite)}
.edplaylist a{color:var(--ink);text-underline-offset:3px}

/* --- Kontaktformular ------------------------------------------------------ */
/* Eigener Endpunkt, kein Fremddienst. Das Formular soll wie ein Dokument
   wirken, nicht wie ein Web-Widget: klare Felder, sichtbare Beschriftung,
   kein Platzhalter als Ersatz fuer ein Label. */
.kform{display:grid;gap:1.5rem;border:1px solid var(--ink);
  background:var(--paper-raised);padding:2rem 2.1rem}
.kfeld{display:grid;gap:.45rem}
.kfeld label{font:600 .82rem/1.3 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}
.kfeld .opt{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--graphite)}
.kfeld input,.kfeld select,.kfeld textarea{
  font:400 1rem/1.55 var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:0;padding:.72rem .8rem;width:100%}
.kfeld textarea{resize:vertical;min-height:9rem}
.kfeld input:focus-visible,.kfeld select:focus-visible,.kfeld textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.kfeld input:user-invalid,.kfeld textarea:user-invalid{border-color:#A3282B}
.khinweis{font-size:.82rem;color:var(--graphite);margin:.1rem 0 0}
/* Fuer Menschen unerreichbar, aber nicht display:none: manche Bots
   ueberspringen ausgeblendete Felder gezielt. */
.khonig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kdatenschutz{font-size:.82rem;color:var(--graphite);margin:0;
  padding-top:1.1rem;border-top:1px solid var(--line)}
.kform button{justify-self:start}
.kmeldung{margin:0;font-size:.9rem;min-height:1.2em}
.kmeldung.warte{color:var(--graphite)}
.kmeldung.gut{color:#1D6B45;font-weight:600}
.kmeldung.schlecht{color:#A3282B;font-weight:600}
.kalternative{margin-top:1.4rem;font-size:.88rem;color:var(--graphite)}


/* Ein Bild pro Reihe statt Folgen-Katalog: ruhiger, fuehrt an einen Ort. */
.playlistkachel{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:1.4rem;
  align-items:center;margin-top:1.6rem;text-decoration:none;color:var(--ink)}
.playlistkachel img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  border:1px solid var(--line);object-fit:cover}
.playlistkachel:hover img{border-color:var(--ink)}
.pk-text{display:flex;flex-direction:column;gap:.4rem}
.pk-titel{font-weight:600;font-size:1.02rem}
.playlistkachel:hover .pk-titel{text-decoration:underline;text-underline-offset:3px}
.pk-meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--mist)}
.playlistkachel:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media (max-width:640px){.playlistkachel{grid-template-columns:1fr}}


/* ---------- Dark Mode ----------------------------------------------------- */
/* Light ist Standard. Dark wird ueber data-theme="dark" am <html> gesetzt,
   der Umschalter in der Kopfzeile merkt sich die Wahl in localStorage.
   Bewusst KEIN prefers-color-scheme-Automatismus: die helle Papierfassung
   ist die Hausfassung, Dark ist das Angebot. */
:root[data-theme="dark"] {
  --color-paper:      #0E1626;
  --color-surface:    #16223A;
  --color-ink:        #F3F0EA;
  --color-ink-soft:   #E3DED4;
  --color-accent:     #C9A46A;
  --color-text:       #E8E4DC;
  --color-text-muted: #A6AFC1;
  --color-line:       #263650;

  --paper: #0E1626;
  --paper-raised: #16223A;
  --ink: #F3F0EA;
  --graphite: #A6AFC1;
  --mist: #8792A8;
  --line: #263650;
  --blue: #C9A46A;
  --blue-deep: #D8B57E;
  --gold: #C9A46A;
  --night: #16223A;
  --night-ink: #F3F0EA;
  --night-line: #2E4062;
  --night-mist: #A6AFC1;
  --ok: #6FBF95;
  --warn: #D3B26A;

  --shadow-card: 0 1px 2px rgb(0 0 0 / .35);

  /* Bestandsnamen aus base.css */
  --bg: #0E1626;
  --surface: #16223A;
  --surface-alt: #1B2942;
  --text: #E8E4DC;
  --text2: #A6AFC1;
  --text3: #8792A8;
  --muted: #8792A8;
  --accent: #F3F0EA;
  --border: #263650;
  --border-subtle: #1F2D46;
  --violet: #C9A46A;
  --green: #6FBF95;
}

/* Der dunkle Primaerbutton braucht auf dunklem Grund die helle Fassung. */
:root[data-theme="dark"] .btn-blue,
:root[data-theme="dark"] .kopf .cta {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0E1626;
}
:root[data-theme="dark"] .btn-blue:hover,
:root[data-theme="dark"] .kopf .cta:hover {
  background: #D8B57E; border-color: #D8B57E; color: #0E1626;
}
:root[data-theme="dark"] .btn-hell { background: var(--color-accent); border-color: var(--color-accent); color: #0E1626; }
/* Beweisband und Fusszeile heben sich im Dunkeln nach OBEN ab. */
:root[data-theme="dark"] .beweisband,
:root[data-theme="dark"] footer.site { background: var(--color-surface); }
:root[data-theme="dark"] .hero h1 em { box-shadow: inset 0 -.14em 0 var(--color-accent); }
:root[data-theme="dark"] .edteaser img,
:root[data-theme="dark"] .playlistkachel img { opacity: .92; }

/* ---------- Umschalter ---------------------------------------------------- */
.themetoggle {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font: 400 var(--text-xs) var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem .7rem;
  cursor: pointer;
  line-height: 1;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.themetoggle:hover { border-color: var(--color-accent); color: var(--color-ink); }
.themetoggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 420px) { .themetoggle { display: none; } }

/* ---------- Seitenvorschau ---------------------------------------------- */
.vorschau{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1.2rem;margin-top:2rem}
.vorschau figure{margin:0}
.vorschau a{display:block;text-decoration:none;color:inherit}
.vorschau img{display:block;width:100%;height:auto;border:1px solid var(--line);
  background:var(--paper-raised);transition:border-color .18s var(--ease)}
.vorschau a:hover img{border-color:var(--blue)}
.vorschau figcaption{margin-top:.55rem;font:500 .72rem var(--mono);
  letter-spacing:.06em;color:var(--mist)}
.vorschau-hinweis{margin-top:1.4rem;font-size:.85rem;color:var(--mist);max-width:64ch}
@media (max-width:520px){.vorschau{grid-template-columns:1fr 1fr;gap:.9rem}}


/* Fliesstext-Links ohne eigene Klasse: im Hellen Navy, im Dunkeln Gold.
   Ohne diese Regel greift das Browser-Standardblau, das auf dunklem Grund
   praktisch unlesbar ist. */
a:not([class]) { color: var(--color-ink, #14213D); text-underline-offset: .18em; }
:root[data-theme="dark"] a:not([class]) { color: #C9A46A; }
:root[data-theme="dark"] a:not([class]):hover { color: #D8B57E; }