/* Christoph 17 – Seitenstile (Proof of Concept)
   Farben, Schrift und Abstände kommen ausschließlich aus tokens.css.
   Zusätzliche Rollen für Bereiche, die in beiden Modi dunkel bleiben
   (Header, Hero, Footer, Nacht-Abschnitte), sind hier definiert. */

:root {
  --c17-chrome-bg: var(--c17-nacht);
  --c17-chrome-text: var(--c17-weiss);
  --c17-chrome-body: var(--c17-grau-200);
  --c17-chrome-muted: var(--c17-grau-400);
  --c17-chrome-label: var(--c17-grau-300);
  --c17-chrome-line: var(--c17-grau-700);
  --c17-chrome-accent: var(--c17-orange-60);
  --c17-chrome-focus: var(--c17-navy-hell);
  --c17-header-h: 84px;
  --c17-hero-split: 46%;
}
@media (max-width: 1100px) { :root { --c17-hero-split: 54%; } }
@media (max-width: 820px)  { :root { --c17-header-h: 64px; } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: var(--c17-radius); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--c17-header-h); }
body {
  margin: 0;
  background: var(--c17-bg);
  color: var(--c17-text);
  font-family: var(--c17-font-sans);
  font-size: var(--c17-body-size);
  line-height: var(--c17-body-lh);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c17-accent-text); text-underline-offset: 3px; }
a:hover { color: var(--c17-brand); }
:focus-visible { outline: 3px solid var(--c17-focus); outline-offset: 2px; }
.dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--c17-chrome-focus); }
h1, h2, h3 { font-family: var(--c17-font-condensed); text-transform: uppercase; font-style: normal; margin: 0; }
h1 { font-size: var(--c17-h1-size); line-height: var(--c17-h1-lh); font-weight: var(--c17-h1-weight); }
h2 { font-size: var(--c17-h2-size); line-height: var(--c17-h2-lh); font-weight: var(--c17-h2-weight); }
h3 { font-size: var(--c17-h3-size); line-height: var(--c17-h3-lh); font-weight: var(--c17-h3-weight); letter-spacing: 0.01em; }
p { margin: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--c17-space-16); top: -100px; z-index: 100;
  background: var(--c17-action); color: var(--c17-on-action); padding: var(--c17-space-12) var(--c17-space-16);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--c17-space-8); }

.wrap { max-width: var(--c17-content-max); margin: 0 auto; padding-left: var(--c17-gutter); padding-right: var(--c17-gutter); }
.section { padding: var(--c17-space-96) 0; }
.section--tight { padding: var(--c17-space-64) 0; }
.section--surface { background: var(--c17-surface); }
.dark { background: var(--c17-chrome-bg); color: var(--c17-chrome-text); }
.dark p, .dark li { color: var(--c17-chrome-body); }
.dark a:not(.btn) { color: var(--c17-chrome-accent); }
.stack { display: flex; flex-direction: column; gap: var(--c17-space-24); }
.split { display: flex; gap: var(--c17-space-64); align-items: center; }
.split--top { align-items: flex-start; }
.split > * { flex: 1 1 0; min-width: 0; }
.split > .split__media { flex: 0 1 440px; }
.measure { max-width: 560px; }
@media (max-width: 820px) {
  .section { padding: var(--c17-space-64) 0; }
  .section--tight { padding: var(--c17-space-48) 0; }
  .split { flex-direction: column; align-items: stretch; gap: var(--c17-space-32); }
  .split > .split__media { flex-basis: auto; }
}

/* ---------- Typo-Bausteine ---------- */
.label {
  font-family: var(--c17-font-mono); font-size: var(--c17-label-size); line-height: var(--c17-label-lh);
  font-weight: var(--c17-label-weight); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c17-text-muted);
}
.dark .label { color: var(--c17-chrome-muted); }
.lead { font-size: var(--c17-body-lg-size); line-height: var(--c17-body-lg-lh); }
.muted { color: var(--c17-text-muted); }
.small { font-size: var(--c17-small-size); line-height: var(--c17-small-lh); }
.accent-line { border-top: var(--c17-accent-line) solid var(--c17-brand); padding-top: var(--c17-space-12); align-self: flex-start; width: fit-content; }
.caption { margin-top: var(--c17-space-8); font-family: var(--c17-font-mono); font-size: 13px; line-height: 1.4; color: var(--c17-text-muted); }
.text-brand { color: var(--c17-brand); }
.more-link { font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 12px 22px; font: 600 16px/1.2 var(--c17-font-sans); text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
}
.btn--primary { background: var(--c17-action); color: var(--c17-on-action); }
.btn--primary:hover { background: var(--c17-action-hover); color: var(--c17-on-action); }
.btn--secondary { background: transparent; color: var(--c17-text); border-color: currentColor; }
.btn--secondary:hover { color: var(--c17-accent-text); }
.dark .btn--secondary { color: var(--c17-chrome-text); }
.dark .btn--secondary:hover { color: var(--c17-chrome-accent); }
.btn-row { display: flex; gap: var(--c17-space-12); flex-wrap: wrap; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c17-chrome-bg); color: var(--c17-chrome-text); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--c17-space-24); height: var(--c17-header-h); }
.logo-link { display: block; flex: none; }
.logo { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  color: var(--c17-chrome-text); text-decoration: none; font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 0;
}
.site-nav a:hover { color: var(--c17-chrome-accent); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--c17-brand); }
.header-tools { display: flex; align-items: center; gap: var(--c17-space-4); }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; background: transparent; color: var(--c17-chrome-text); cursor: pointer;
}
.icon-btn:hover { color: var(--c17-chrome-accent); }
.icon-btn svg { width: 22px; height: 22px; }
.theme-toggle .icon-sun { display: none; }
[data-effective-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-effective-theme="dark"] .theme-toggle .icon-moon { display: none; }
.menu-toggle { display: none; }
@media (max-width: 1060px) { .site-nav { gap: 18px; } .site-nav a { font-size: 14px; } }
@media (max-width: 820px) {
  .logo { height: 32px; }
  .menu-toggle { display: grid; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: var(--c17-header-h);
    flex-direction: column; align-items: stretch; gap: 0; background: var(--c17-chrome-bg);
    border-top: 1px solid var(--c17-chrome-line); padding: var(--c17-space-8) var(--c17-gutter) var(--c17-space-24);
    max-height: calc(100vh - var(--c17-header-h)); overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--c17-chrome-line); }
  .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--c17-brand); padding-left: 16px; }
}

/* ---------- Hero mit 12°-Schräge ----------
   Bildkante und oranger Streifen sind parallel: Versatz = Höhe × tan 12° (0,2126). */
.hero { position: relative; background: var(--c17-chrome-bg); color: var(--c17-chrome-text); overflow: hidden; --h: 640px; --stripe: 28px; height: var(--h); }
.hero--page { --h: 420px; --stripe: 24px; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(calc(var(--c17-hero-split) + var(--h) * 0.2126) 0, 100% 0, 100% 100%, var(--c17-hero-split) 100%);
}
.hero__cut {
  position: absolute; inset: 0; background: var(--c17-brand);
  clip-path: polygon(
    calc(var(--c17-hero-split) + var(--h) * 0.2126 - var(--stripe)) 0,
    calc(var(--c17-hero-split) + var(--h) * 0.2126) 0,
    var(--c17-hero-split) 100%,
    calc(var(--c17-hero-split) - var(--stripe)) 100%);
}
.hero__text {
  position: relative; height: 100%; width: calc(var(--c17-hero-split) - 2%);
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: var(--c17-space-48) var(--c17-space-48) var(--c17-space-48) max(var(--c17-gutter), calc((100vw - var(--c17-content-max)) / 2 + var(--c17-gutter)));
}
.hero--page .hero__text { gap: 18px; }
.hero__kicker { font-family: var(--c17-font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c17-chrome-label); }
.hero__title { font-size: clamp(56px, 6vw, 84px); line-height: 0.92; font-weight: 800; }
.hero--page .hero__title { font-size: clamp(48px, 5vw, 72px); }
.hero__lead { font-size: 20px; line-height: 1.5; color: var(--c17-chrome-body); max-width: 460px; }
.hero--page .hero__lead { font-size: 19px; max-width: 440px; }

/* Band ohne Bild (Shop, Gästebuch, Rechtliches) */
.page-band { background: var(--c17-chrome-bg); color: var(--c17-chrome-text); padding: var(--c17-space-64) 0 var(--c17-space-48); }
.page-band .wrap { display: flex; flex-direction: column; gap: 14px; }
.page-band__title { font-size: clamp(44px, 5vw, 72px); line-height: 0.92; font-weight: 800; }
.page-band p { font-size: 19px; color: var(--c17-chrome-body); max-width: 560px; }

@media (max-width: 820px) {
  /* Mobil: Bild oben, waagerechte 12°-Schräge über die volle Breite */
  .hero, .hero--page { height: auto; --cut: calc(100vw * 0.2126); --stripe: 14px; }
  .hero__media { position: relative; height: 300px; overflow: hidden; }
  .hero--page .hero__media { height: 260px; }
  .hero__img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
  .hero__cut {
    clip-path: polygon(0 calc(100% - var(--stripe)), 100% calc(100% - var(--cut) - var(--stripe)), 100% calc(100% - var(--cut)), 0 100%);
  }
  .hero__text { width: 100%; height: auto; padding: var(--c17-space-8) var(--c17-gutter) var(--c17-space-48); gap: var(--c17-space-16); }
  .hero__title { font-size: 56px; }
  .hero--page .hero__title { font-size: 44px; }
  .hero__lead, .hero--page .hero__lead { font-size: 17px; }
  .hero .btn-row { flex-direction: column; }
  .hero .btn { width: 100%; }
  .page-band { padding: var(--c17-space-48) 0 var(--c17-space-32); }
  .page-band p { font-size: 17px; }
}
@media (min-width: 821px) { .hero__media { display: contents; } }

/* ---------- Kennzahlen ---------- */
.stats { border-bottom: 1px solid var(--c17-line); }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat { padding: 28px 28px 24px; border-right: 1px solid var(--c17-line); }
.stat:last-child { border-right: 0; }
.stat--brand { background: var(--c17-brand); color: var(--c17-on-brand); border-right: 0; }
.stat__value { font-family: var(--c17-font-condensed); font-weight: 800; font-size: 60px; line-height: 0.9; }
.stat__label { margin-top: var(--c17-space-8); color: var(--c17-text-muted); }
.stat--brand .stat__label { color: var(--c17-on-brand); }
@media (max-width: 820px) {
  .stats .wrap { padding: 0; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 20px var(--c17-gutter); border-bottom: 1px solid var(--c17-line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat__value { font-size: 44px; }
}

/* ---------- Bilder ---------- */
.img-portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.img-tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.img-wide { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Karten ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; background: var(--c17-surface-raised); color: var(--c17-text); text-decoration: none; border: 1px solid var(--c17-line); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.card__body p { font-size: 16px; color: var(--c17-text-muted); }
a.card:hover { color: var(--c17-text); }
a.card:hover h3 { color: var(--c17-accent-text); }
@media (max-width: 820px) {
  .cards--teaser { grid-template-columns: 1fr; gap: 12px; }
  .cards--teaser .card { flex-direction: row; align-items: center; }
  .cards--teaser .card img { width: 120px; flex: none; }
  .cards--teaser .card__body p { display: none; }
}

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c17-line); border: 1px solid var(--c17-line); }
.tile { background: var(--c17-surface-raised); padding: var(--c17-space-24); display: flex; flex-direction: column; gap: 8px; }
.tile p { font-size: 16px; color: var(--c17-text-muted); }
.tile--brand { background: var(--c17-brand); color: var(--c17-on-brand); }
.tile--brand p { color: var(--c17-on-brand); }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.box { background: var(--c17-surface-raised); border-top: var(--c17-accent-line) solid var(--c17-brand); padding: 22px 28px 28px 22px; display: flex; flex-direction: column; gap: var(--c17-space-12); }
.box p { color: var(--c17-text-muted); font-size: 16px; }
.box__title { font-family: var(--c17-font-condensed); font-weight: 800; font-size: 28px; line-height: 1.1; text-transform: uppercase; }

/* ---------- Hinweis / Info ---------- */
.note { background: var(--c17-surface); box-shadow: inset 0 0 0 2px var(--c17-tint-line); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.info { background: var(--c17-info); color: var(--c17-on-info); padding: 22px 24px; }
.info a { color: var(--c17-on-info); }

/* ---------- Spendenbanner ---------- */
.banner { position: relative; overflow: hidden; }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(14 22 30 / 0) 30%, rgb(14 22 30 / .92) 70%); }
.banner .wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding-top: 120px; padding-bottom: 120px; }
.banner__text { max-width: 460px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 820px) {
  .banner__img { position: relative; height: 240px; }
  .banner::after { display: none; }
  .banner .wrap { padding-top: var(--c17-space-32); padding-bottom: var(--c17-space-48); }
  .banner .btn-row { flex-direction: column; }
  .banner .btn { width: 100%; }
}

/* ---------- Partner ---------- */
.partners { border-top: 1px solid var(--c17-line); padding: 56px 0; }
.partners__logos { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.partners__logos img { height: 52px; width: auto; background: var(--c17-weiss); padding: 8px; }

/* ---------- Kennzahl-Paar (Winde) ---------- */
.figures { display: flex; gap: var(--c17-space-16); flex-wrap: wrap; }
.figure { padding: 16px 22px; }
.figure--info { background: var(--c17-info); color: var(--c17-on-info); }
.figure--outline { box-shadow: inset 0 0 0 2px var(--c17-chrome-text); }
.figure__value { font-family: var(--c17-font-condensed); font-weight: 800; font-size: 44px; line-height: 1; }
.figure .label { color: inherit; font-size: 11px; }

/* ---------- Balkendiagramm Einsätze ---------- */
.chart { background: var(--c17-surface); padding: 28px; display: flex; flex-direction: column; gap: var(--c17-space-12); }
.chart__rows { display: grid; grid-template-columns: 56px 1fr 70px; gap: 10px 14px; align-items: center; font-family: var(--c17-font-mono); font-size: var(--c17-data-size); font-weight: 500; margin: 0; }
.chart__bar { height: 14px; background: var(--c17-brand); }
.chart__bar--current { background: var(--c17-info); }
.chart__bar--missing { background: transparent; border: 1px dashed var(--c17-text-muted); }
.chart__value { text-align: right; }
.chart__row--missing { color: var(--c17-text-muted); }
[data-effective-theme="dark"] .chart__bar--current { background: var(--c17-navy-hell); }

/* ---------- Datenliste ---------- */
.spec { margin: 0; display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.4fr); column-gap: var(--c17-space-24); }
.spec dt { font-family: var(--c17-font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c17-text-muted); padding: 14px 0; border-bottom: 1px solid var(--c17-line); }
.spec dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--c17-line); font-family: var(--c17-font-mono); font-size: 16px; font-weight: 500; }
@media (max-width: 820px) { .spec { grid-template-columns: 1fr; } .spec dt { border-bottom: 0; padding-bottom: 0; } }

.bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bullets li { display: flex; gap: 12px; align-items: baseline; }
.bullets li::before { content: ""; width: 10px; height: 10px; background: var(--c17-brand); flex: none; }

/* ---------- Team ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--c17-space-16); }
.person { margin: 0; }
.person img, .person__ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person__ph { background: var(--c17-surface); display: grid; place-items: center; font-family: var(--c17-font-mono); font-size: 12px; color: var(--c17-text-muted); }
.section--surface .person__ph { background: var(--c17-surface-raised); }
.person figcaption { padding-top: 8px; font-size: 15px; line-height: 1.4; }
.person figcaption b { font-weight: 600; display: block; }
.person figcaption span { color: var(--c17-text-muted); }
.split > .split__aside { flex: 0 1 380px; }

/* ---------- Zeitleiste ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl { display: grid; grid-template-columns: 160px 24px minmax(0, 1fr); column-gap: var(--c17-space-24); }
.tl__year { font-family: var(--c17-font-condensed); font-weight: 800; font-size: 40px; line-height: 1; text-align: right; }
.tl__year--muted { color: var(--c17-text-muted); }
.tl__year--now { color: var(--c17-accent-text); }
.tl__axis { position: relative; }
.tl__axis::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--c17-line); }
.tl:last-child .tl__axis::before { display: none; }
.tl__dot { position: relative; width: 24px; height: 24px; background: var(--c17-brand); }
.tl__dot--memorial { background: var(--c17-text); }
.tl__body { padding-bottom: var(--c17-space-48); }
.tl__body h3 { font-size: 28px; margin: 4px 0 6px; }
.tl__body p { max-width: 620px; }
.tl__date { font-family: var(--c17-font-mono); font-size: 13px; color: var(--c17-text-muted); }
.tl__body img { margin-top: var(--c17-space-16); max-width: 420px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 820px) {
  .tl { grid-template-columns: 64px 16px minmax(0, 1fr); column-gap: var(--c17-space-12); }
  .tl__year { font-size: 26px; }
  .tl__dot { width: 16px; height: 16px; }
  .tl__axis::before { left: 7px; }
  .tl__body h3 { font-size: 24px; }
}

/* ---------- Spenden ---------- */
.bank { background: var(--c17-chrome-bg); color: var(--c17-chrome-text); padding: 32px 36px; display: flex; flex-direction: column; gap: 6px; }
.bank .label { color: var(--c17-chrome-accent); }
[data-effective-theme="dark"] .bank { box-shadow: inset 0 0 0 1px var(--c17-chrome-line); }
.bank dl { margin: 0; }
.bank dt { font-family: var(--c17-font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c17-chrome-muted); padding-top: 14px; }
.bank dd { margin: 0; font-family: var(--c17-font-mono); font-size: 20px; font-weight: 500; color: var(--c17-chrome-text); }
.bank dd.bank__text { font-family: var(--c17-font-sans); font-size: 18px; font-weight: 400; }
.bank .btn { margin-top: 20px; align-self: flex-start; }
.copy-status { min-height: 1.5em; font-size: 15px; color: var(--c17-chrome-body); }
@media (max-width: 820px) { .bank { padding: 24px 20px; } .bank dd { font-size: 16px; } }

/* ---------- Shop ---------- */
.filters { display: flex; gap: var(--c17-space-8); flex-wrap: wrap; }
.filter { font: 600 15px/1.2 var(--c17-font-sans); min-height: 44px; padding: 10px 16px; border: 0; background: var(--c17-surface); color: var(--c17-text); cursor: pointer; }
.filter:hover { color: var(--c17-accent-text); }
.filter[aria-pressed="true"] { background: var(--c17-action); color: var(--c17-on-action); }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; list-style: none; margin: 0; padding: 0; }
.product { display: flex; flex-direction: column; gap: 10px; }
.product[hidden] { display: none; }
.product__ph { aspect-ratio: 1 / 1; background: var(--c17-surface); display: grid; place-items: center; font-family: var(--c17-font-mono); font-size: 12px; color: var(--c17-text-muted); }
.product__name { font-weight: 600; line-height: 1.3; }
.product__price { font-family: var(--c17-font-mono); font-size: var(--c17-data-size); font-weight: 500; }
@media (max-width: 820px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }

/* ---------- Gästebuch ---------- */
.gb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--c17-space-64); align-items: start; }
.gb-feature { border-left: var(--c17-accent-line) solid var(--c17-brand); padding: var(--c17-space-8) 0 var(--c17-space-8) var(--c17-space-24); display: flex; flex-direction: column; gap: var(--c17-space-12); }
.gb-feature blockquote { margin: 0; font-family: var(--c17-font-condensed); font-weight: 700; font-size: 34px; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; }
.gb-entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gb-entry { padding: var(--c17-space-32) 0; border-top: 1px solid var(--c17-line); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--c17-space-16); }
.gb-entry:last-child { border-bottom: 1px solid var(--c17-line); }
.gb-entry__initial { width: 56px; height: 56px; display: grid; place-items: center; background: var(--c17-surface); font-family: var(--c17-font-condensed); font-weight: 800; font-size: 28px; color: var(--c17-text); }
.gb-entry--thanks .gb-entry__initial { background: var(--c17-brand); color: var(--c17-on-brand); }
.gb-entry__head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin-bottom: var(--c17-space-8); }
.gb-entry__name { font-weight: 600; font-size: var(--c17-h4-size); }
.gb-entry__meta { font-family: var(--c17-font-mono); font-size: 13px; color: var(--c17-text-muted); }
.gb-entry__text p + p { margin-top: var(--c17-space-8); }
.gb-entry__reply { margin-top: var(--c17-space-16); background: var(--c17-surface); padding: var(--c17-space-16) var(--c17-space-16) var(--c17-space-16) 20px; border-left: 2px solid var(--c17-brand); font-size: var(--c17-small-size); }
.gb-entry__reply .label { display: block; margin-bottom: 4px; }
.pager { display: flex; gap: var(--c17-space-8); align-items: center; margin-top: var(--c17-space-32); flex-wrap: wrap; }
.pager a, .pager span { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0 12px; font-family: var(--c17-font-mono); font-weight: 500; text-decoration: none; border: 1px solid var(--c17-line); color: var(--c17-text); }
.pager [aria-current="page"] { background: var(--c17-action); color: var(--c17-on-action); border-color: var(--c17-action); }
.gb-aside { position: sticky; top: calc(var(--c17-header-h) + var(--c17-space-24)); display: flex; flex-direction: column; gap: var(--c17-space-24); }
.form-card { background: var(--c17-surface); padding: 28px; display: flex; flex-direction: column; gap: var(--c17-space-16); border-top: var(--c17-accent-line) solid var(--c17-brand); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; }
.field .hint { font-size: 14px; color: var(--c17-text-muted); }
.field input, .field textarea {
  font: 400 17px/1.5 var(--c17-font-sans); color: var(--c17-text); background: var(--c17-surface-raised);
  border: 1px solid var(--c17-grau-500); padding: 10px 12px; min-height: 44px; width: 100%;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--c17-focus); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c17-brand); }
.form-status { font-size: 15px; }
.form-status:empty { display: none; }
.form-status--ok { color: var(--c17-success-text); font-weight: 600; }
.form-status--error { color: var(--c17-danger-text); font-weight: 600; }
@media (max-width: 1000px) {
  .gb-layout { grid-template-columns: 1fr; gap: var(--c17-space-48); }
  .gb-aside { position: static; }
}
@media (max-width: 820px) {
  .gb-feature blockquote { font-size: 26px; }
  .gb-entry { grid-template-columns: 1fr; }
  .gb-entry__initial { display: none; }
  .form-card { padding: 20px; }
}

/* ---------- Rechtliches / Platzhalterseiten ---------- */
.prose { max-width: 720px; display: flex; flex-direction: column; gap: var(--c17-space-16); }
.prose h2 { margin-top: var(--c17-space-24); }
.placeholder { font-family: var(--c17-font-mono); font-size: 14px; color: var(--c17-text-muted); }

/* ---------- PoC-Kennzeichnung ---------- */
.poc-bar { background: var(--c17-warning); color: var(--c17-on-warning); font-family: var(--c17-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 6px var(--c17-gutter); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c17-chrome-bg); color: var(--c17-chrome-body); padding: var(--c17-space-64) 0 var(--c17-space-32); font-size: 15px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--c17-space-32); }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
.site-footer__col .label { color: var(--c17-chrome-muted); margin-bottom: 4px; }
.site-footer a { color: var(--c17-chrome-body); text-decoration: none; }
.site-footer a:hover { color: var(--c17-chrome-accent); text-decoration: underline; }
.site-footer a.footer-accent { color: var(--c17-chrome-accent); text-decoration: underline; }
.site-footer .logo { height: 40px; margin-bottom: 6px; align-self: flex-start; }
.site-footer__base { margin-top: var(--c17-space-48); padding-top: 20px; border-top: 1px solid var(--c17-chrome-line); font-family: var(--c17-font-mono); font-size: 12px; letter-spacing: .08em; color: var(--c17-chrome-muted); display: flex; justify-content: space-between; gap: var(--c17-space-16); flex-wrap: wrap; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .card, .filter, .site-nav a { transition: background-color .15s, color .15s; }
}