:root {
  --site-max-width: 1120px;
  --content-max-width: 900px;
  --gutter: 1.25rem;
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --radius-sm: 0.35rem;
  --radius-md: 0.6rem;
  --border-width: 1px;
  --border-strong-width: 2px;

  /* später design-tool-fähig */
  --color-page-bg: #f6f4ef;
  --color-surface: #ffffff;
  --color-surface-muted: #f0ede6;
  --color-text: #1f1f1c;
  --color-text-muted: #5a554b;
  --color-heading: #171612;
  --color-border: #c6b9a2;
  --color-border-strong: #9f8d70;
  --color-link: #3f5f80;
  --color-link-hover: #213f5a;
  --color-button-bg: #e8dcc8;
  --color-button-text: #1f1f1c;
  --color-button-border: #9f8d70;
  --color-accent-surface: #f8f2e7;
  --color-footer-bg: #e9e1d3;

  --font-body: Georgia, "Times New Roman", serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-ui: Arial, Helvetica, sans-serif;

  --font-size-body: 1.0625rem;
  --font-size-small: 0.95rem;
  --font-size-kicker: 0.86rem;
  --font-size-h1: clamp(2.1rem, 4vw, 3.35rem);
  --font-size-h2: clamp(1.5rem, 2.8vw, 2.15rem);
  --font-size-h3: clamp(1.2rem, 2vw, 1.55rem);
  --font-size-h4: 1.05rem;
  --line-height-body: 1.7;
  --line-height-tight: 1.25;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p, ul, ol { margin: 0 0 var(--space-3); }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  color: var(--color-heading);
  font-family: var(--font-heading);
  line-height: var(--line-height-tight);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

.site-shell {
  min-height: 100vh;
}

.level-1--hero,
.level-1--page,
.level-1--footer,
.page,
.archive,
.background,
.external-status-page {
  width: min(var(--site-max-width), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.level-1-stack > * + *,
.background-stack > * + *,
.episode-grid > * + * {
  margin-top: var(--space-4);
}

.level-1--frame,
.level-2--panel,
.level-3--content,
.intro-card,
.info-panel,
.episode-card,
.external-status-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.level-2--panel,
.intro-card,
.info-panel,
.episode-card,
.external-status-card {
  padding: var(--space-4);
}

.hero {
  padding: var(--space-5) 0 var(--space-4);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.95fr);
  gap: var(--space-5);
  align-items: start;
}

.hero__copy {
  min-width: 0;
}

.hero__kicker,
.subpage-hero__kicker,
.external-status-kicker {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--font-size-kicker);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__subtitle-lines,
.hero__actions,
.subpage-hero__subtitle {
  margin-top: var(--space-3);
}

.hero__subtitle-line,
.subpage-hero__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-lead);
}

.hero__subtitle-line + .hero__subtitle-line {
  margin-top: var(--space-1);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__media {
  margin: 0;
  background: var(--color-surface);
  border: var(--border-strong-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.hero__image {
  width: 100%;
  border-radius: calc(var(--radius-md) - 0.15rem);
}

.hero__note {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.subpage-hero {
  padding: var(--space-4) 0 var(--space-3);
}

.subpage-hero__inner {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.subpage-hero__title {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-h2);
}

.page {
  padding-bottom: var(--space-5);
}

.page--start {
  padding-top: var(--space-2);
}

.page--subpage {
  padding-top: var(--space-2);
}

.start-flow > * + * {
  margin-top: var(--space-4);
}

.start-flow__card,
.intro-card--full {
  width: 100%;
}

.intro,
.archive,
.background {
  margin-top: var(--space-4);
}

.intro-lead {
  font-size: var(--font-size-lead);
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-3);
}

.section-head--subpage {
  margin-bottom: var(--space-4);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.6rem;
  padding: 0.65rem 1rem;
  border: var(--border-width) solid var(--color-button-border);
  border-radius: var(--radius-sm);
  background: var(--color-button-bg);
  color: var(--color-button-text);
  font-family: var(--font-ui);
  font-size: var(--font-size-ui);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-heading);
}

.button--primary {
  background: var(--color-accent-surface);
}

.back-top {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
}

.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.jump-nav__item {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
}

.bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.bio-card h4,
.info-panel h3,
.episode-card h3 {
  margin-bottom: var(--space-2);
}

.section__text + .section__text {
  margin-top: var(--space-4);
}

.info-panel__back {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

.episode-card__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.episode-card__nr,
.episode-card__date,
.search-count {
  margin: 0;
}

.episode-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.site-footer {
  padding: var(--space-5) 0 var(--space-6);
}

.site-footer__inner {
  background: var(--color-footer-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  text-align: center;
}

.external-status-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5) 0;
}

.external-status-card {
  max-width: 760px;
}

.external-status-note,
.external-status-code,
.external-status-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.external-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.external-status-meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__media {
    order: -1;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 0.85rem;
    --space-4: 1.15rem;
    --space-5: 1.65rem;
  }

  body {
    font-size: 1rem;
  }

  .level-2--panel,
  .intro-card,
  .info-panel,
  .episode-card,
  .external-status-card,
  .subpage-hero__inner {
    padding: var(--space-3);
  }

  .site-footer__inner,
  .episode-card__top,
  .section-head {
    display: block;
  }

  .episode-card__date {
    margin-top: var(--space-1);
  }
}

/* --- Korrektur: Autoren-Biografien auf Hintergrundseite einspaltig --- */
.bios,
.background .bios,
.background-bios,
.authors,
.author-list {
    display: block !important;
    width: 100% !important;
}

.bios > *,
.background .bios > *,
.background-bios > *,
.authors > *,
.author-list > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}

/* Sicherheitsnetz für versehentlich mehrspaltige Darstellung */
.bios [class*="col"],
.background .bios [class*="col"],
.authors [class*="col"],
.author-list [class*="col"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* --- Korrektur: Buttons immer ohne Unterstreichung --- */
a.button,
.button,
button,
input[type="button"],
input[type="submit"] {
    text-decoration: none !important;
}

a.button:hover,
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.button:focus,
.button:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
    text-decoration: none !important;
}

/* Falls Buttons als normale Links mit Button-Klasse gerendert werden */
a[class*="button"],
a[class*="btn"] {
    text-decoration: none !important;
}

/* --- Korrektur: alle aktionsartigen Links als einheitliche Buttons darstellen --- */
a.button,
a.button:link,
a.button:visited,
a.button:hover,
a.button:focus,
a.button:active,
.jump-nav__item,
.jump-nav__item:link,
.jump-nav__item:visited,
.jump-nav__item:hover,
.jump-nav__item:focus,
.jump-nav__item:active,
.back-top,
.back-top:link,
.back-top:visited,
.back-top:hover,
.back-top:focus,
.back-top:active,
.hero__actions a,
.hero__actions a:link,
.hero__actions a:visited,
.hero__actions a:hover,
.hero__actions a:focus,
.hero__actions a:active,
.episode-card__actions a,
.episode-card__actions a:link,
.episode-card__actions a:visited,
.episode-card__actions a:hover,
.episode-card__actions a:focus,
.episode-card__actions a:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    min-height: 2.6rem !important;
    padding: 0.65rem 1rem !important;
    border: var(--border-width) solid var(--color-button-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-button-bg) !important;
    color: var(--color-button-text) !important;
    font-family: var(--font-ui) !important;
    font-size: var(--font-size-ui) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-underline-offset: 0 !important;
    box-sizing: border-box !important;
}

a.button:hover,
a.button:focus,
.jump-nav__item:hover,
.jump-nav__item:focus,
.back-top:hover,
.back-top:focus,
.hero__actions a:hover,
.hero__actions a:focus,
.episode-card__actions a:hover,
.episode-card__actions a:focus {
    background: var(--color-surface-muted) !important;
    color: var(--color-heading) !important;
    text-decoration: none !important;
}

/* Footer-Links bewusst keine Buttons, aber ohne Unterstreichung beim Button-Look-Mix */
.site-footer a {
    text-decoration: none;
}

/* --- Hintergrundseite: exakte Korrektur nach echtem HTML --- */

/* Alle Hauptbereiche der Hintergrundseite auf dieselbe nutzbare Breite bringen */
.page-hintergrund .intro,
.page-hintergrund .background {
    width: min(100%, var(--content-max)) !important;
    max-width: var(--content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Falls in der background-Section direkte Karten/Artikel/Sektionen liegen */
.page-hintergrund .background > article,
.page-hintergrund .background > section,
.page-hintergrund .background > .level-1,
.page-hintergrund .background > .level-2,
.page-hintergrund .background > .level-1--frame,
.page-hintergrund .background > .level-2--panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Jump-Navigation: echte Klassen aus dem Screenshot */
.page-hintergrund .jump-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}

.page-hintergrund .jump-nav__item,
.page-hintergrund .jump-nav__item:link,
.page-hintergrund .jump-nav__item:visited,
.page-hintergrund .jump-nav__item:hover,
.page-hintergrund .jump-nav__item:focus,
.page-hintergrund .jump-nav__item:active,
.page-hintergrund .jump-nav__item--callout,
.page-hintergrund .jump-nav__item--callout:link,
.page-hintergrund .jump-nav__item--callout:visited,
.page-hintergrund .jump-nav__item--callout:hover,
.page-hintergrund .jump-nav__item--callout:focus,
.page-hintergrund .jump-nav__item--callout:active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 3.25rem !important;
    margin: 0 !important;
    padding: 0.7rem 1rem !important;
    text-align: center !important;
    white-space: normal !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* Der Callout-Button soll nicht aus dem Raster ausbrechen */
.page-hintergrund .jump-nav__item--callout {
    grid-column: auto !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .page-hintergrund .jump-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .page-hintergrund .jump-nav {
        grid-template-columns: 1fr !important;
    }
}

/* --- Autorenbereich: einspaltig untereinander --- */
#autoren,
#autoren * {
    display: block !important;
    width: 100% !important;
}

#autoren > * {
    margin-bottom: 2rem !important;
}

/* Sicherheitsnetz gegen Grid/Flex/Spalten */
#autoren [class*="col"],
#autoren [class*="grid"],
#autoren [class*="flex"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- Archivseite: Folgenliste exakt 2-spaltig (minimaler Eingriff) --- */
.episode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
    .episode-grid {
        grid-template-columns: 1fr !important;
    }
}



/* === Archiv: nur Gesamtbreite korrigieren === */
#archiv {
    width: min(100%, var(--content-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Indexseite: linker oberer Rahmen im Hero-Bereich --- */
.hero__copy {
  background: var(--color-surface);
  border: var(--border-strong-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}


/* === nkavm Design-Anbindung: sichtbare Grundbindung === */
body {
  background: var(--color-page-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-body) !important;
}

p, li, blockquote, dd, dt, .intro p, .intro-card p, .background p, .background li,
.archive p, .archive li, .service-page p, .service-page li {
  font-family: var(--font-body) !important;
  font-size: var(--font-size-body) !important;
  color: var(--color-text) !important;
}

h1, .hero__title, .page-title {
  font-family: var(--font-heading) !important;
  font-size: var(--font-size-h1) !important;
  color: var(--color-heading) !important;
}

h2, .section-title, .intro-card h2, .background h2, .archive h2, .service-page h1 {
  font-family: var(--font-heading) !important;
  font-size: var(--font-size-h2) !important;
  color: var(--color-heading) !important;
}

a {
  color: var(--color-link) !important;
}

a.button,
.jump-nav__item,
.hero__actions a,
.episode-card__actions a {
  background: var(--color-button-bg) !important;
  color: var(--color-button-text) !important;
  border-color: var(--color-button-border) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--font-size-ui) !important;
}



/* === NKAVM DEBUG: sichtbarer Seitenhintergrund strikt über Design-Variable === */
html,
body {
  background: var(--color-page-bg) !important;
}

.site-shell,
.page-shell,
main,
.page-main {
  background: transparent !important;
}


/* === nkavm Font-Bindung: harte Frontend-Anbindung === */
html,
body,
body p,
body li,
body blockquote,
body dd,
body dt,
body td,
body th,
body figcaption,
body label,
body input,
body textarea,
body select,
body button {
  font-family: var(--font-body) !important;
}

button,
input,
select,
textarea,
.jump-nav__item,
.hero__actions a,
.episode-card__actions a,
.hero__kicker,
.subpage-hero__kicker,
.external-status-kicker,
.site-footer,
.back-top {
  font-family: var(--font-ui) !important;
}

h1,
h2,
h3,
h4,
.hero h1,
.subpage-hero__title,
.intro-card h2,
.background h2,
.archive h2,
.service-page h1 {
  font-family: var(--font-heading) !important;
}