/* ===========================================================================
   Pixel WG — Redaktionelle Bausteine  v1.0
   Setzt pixel-wg-tokens.css und pixel-wg-components.css voraus.
   Enthält keine einzige rohe Farbe und keinen Verlauf als Fläche.

   Warum es diese Datei gibt: Die Bausteine in pixel-wg-components.css sind
   kleinteilig (Knopf, Karte, Etikett). Für lange Seiten fehlten die großen
   Formen. Wer sie nicht hat, baut jeden Abschnitt als abgerundete Karte, und
   dann sieht eine Seite aus wie die nächste.

   Leitgedanke, direkt aus den Projektregeln: nicht alles ist eine Karte.
   Diese Bausteine grenzen mit Linien und Kanten ab, nicht mit Kästen.
   Eine Kategoriefarbe markiert eine Kante, sie füllt nie eine große Fläche.
   =========================================================================== */

/* --- Abschnittsrahmen ---------------------------------------------------- */
.pwg-section { padding-block: var(--s-9); }
.pwg-section--tight { padding-block: var(--s-8); }

.pwg-section__head { max-width: var(--w-text); margin-bottom: var(--s-6); }
.pwg-section__head p { color: var(--text-dim); }

/* Große Seitenüberschrift. .pwg-title aus den Bausteinen setzt Schnitt und
   Versalien, hier kommt nur die Größe für lange Seiten dazu. */
.pwg-display {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
}

/* --- Aufmacher mit Bild -------------------------------------------------- */
/* Der Text liegt über dem Foto, deshalb zwingend .pwg-overlay darunter.
   Die abdunkelnde Fläche ist der einzige erlaubte Verlauf: sie rettet den
   Kontrast und ist keine Gestaltung. */
.pwg-hero {
  position: relative;
  min-height: min(78vh, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.pwg-hero__media { position: absolute; inset: 0; }
.pwg-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pwg-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--w-page);
  margin-inline: auto;
  padding: var(--s-9) var(--s-4) var(--s-8);
}
.pwg-hero__inner h1 { margin-block: var(--s-3) var(--s-4); }
.pwg-hero__lead { font-size: 1.125rem; color: var(--text); max-width: 56ch; }
.pwg-hero__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.pwg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* --- Streifen: drei Aussagen nebeneinander, ohne Kästen ------------------ */
.pwg-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--border);
  margin-top: var(--s-6);
}
.pwg-strip__item {
  padding: var(--s-5);
  border-right: 1px solid var(--border);
  border-top: 3px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: background var(--d-base) var(--e-out);
}
.pwg-strip__item:last-child { border-right: 0; }
.pwg-strip__item:hover { background: var(--surface-2); }
.pwg-strip__item--mark { border-top-color: var(--c-wg); }
.pwg-strip__num {
  font-family: var(--f-label); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-dim);
}
.pwg-strip__big {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: var(--lh-head);
  letter-spacing: -0.02em;
}
.pwg-strip__item p { color: var(--text-dim); margin: 0; max-width: 42ch; }

/* --- Zweispalter: Bild links, Text rechts -------------------------------- */
.pwg-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: stretch; }
.pwg-split__visual {
  position: relative; overflow: hidden;
  min-height: 420px;
  border-left: 3px solid var(--c-wg);
}
.pwg-split__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pwg-split__label { position: absolute; z-index: 2; left: var(--s-5); bottom: var(--s-5); }
.pwg-split__label strong {
  display: block;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: var(--lh-tight);
}
.pwg-split__label span {
  display: block; margin-top: var(--s-1);
  font-family: var(--f-label); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-dim);
}
.pwg-split__panel {
  border-left: 1px solid var(--border);
  padding-left: var(--s-6);
  display: flex; flex-direction: column; justify-content: center;
}

/* --- Punkteliste mit Trennlinien ----------------------------------------- */
.pwg-points { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.pwg-points li {
  display: flex; gap: var(--s-3);
  padding-block: var(--s-4);
  border-top: 1px solid var(--border);
}
.pwg-points li::before {
  content: ""; flex: none;
  width: var(--s-2); height: var(--s-2); margin-top: 0.55em;
  background: var(--c-wg); border-radius: var(--r-pixel);
}
.pwg-points strong { display: block; font-family: var(--f-display); }
.pwg-points span { color: var(--text-dim); }

/* --- Gegenüberstellung: was wir wollen, was nicht ------------------------ */
/* Die Bedeutung hängt nie an der Farbe allein. Vor jeder Zeile steht ein
   Zeichen, und das Wort selbst sagt schon, worum es geht. */
.pwg-ledger {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--s-7);
  border-top: 1px solid var(--border);
  margin-top: var(--s-6);
}
.pwg-ledger__item { padding-block: var(--s-4); border-bottom: 1px solid var(--border); }
.pwg-ledger__item strong {
  display: flex; gap: var(--s-2);
  font-family: var(--f-ui); font-weight: 700; font-size: 1.0625rem;
}
.pwg-ledger__item span { display: block; color: var(--text-dim); font-size: var(--t-small); }
.pwg-ledger__item--yes strong { color: var(--c-wg); }
.pwg-ledger__item--no  strong { color: var(--c-live); }

/* --- Aussagenband -------------------------------------------------------- */
.pwg-band {
  padding-block: var(--s-9);
  border-block: 1px solid var(--border);
  background: var(--surface);
}
.pwg-band p {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.75rem, 4.4vw, 3rem);
  line-height: var(--lh-head); letter-spacing: -0.03em;
  max-width: 22ch; margin: 0;
}
.pwg-band em { font-style: normal; color: var(--brand); }

/* --- Fragen und Antworten ------------------------------------------------ */
/* Bewusst <details>: funktioniert ohne JavaScript, mit Tastatur und mit
   Vorlesesoftware, und der Browser kümmert sich um den Zustand. */
.pwg-faq { max-width: 900px; border-top: 1px solid var(--border); margin-top: var(--s-6); }
.pwg-faq details { border-bottom: 1px solid var(--border); }
.pwg-faq summary {
  cursor: pointer; list-style: none;
  min-height: var(--tap);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-4);
  font-family: var(--f-ui); font-weight: 700;
}
.pwg-faq summary::-webkit-details-marker { display: none; }
.pwg-faq summary::after {
  content: "+"; flex: none;
  font-family: var(--f-mono); font-size: 1.25rem; color: var(--text-dim);
}
.pwg-faq details[open] summary::after { content: "\2212"; }
.pwg-faq p { color: var(--text-dim); margin: 0 0 var(--s-4); }

/* --- Laufband ------------------------------------------------------------ */
/* Nur Schmuck, deshalb aria-hidden im HTML und keine Information darin. */
.pwg-marquee {
  overflow: hidden; white-space: nowrap;
  border-block: 1px solid var(--border);
  background: var(--surface);
  padding-block: var(--s-4);
}
.pwg-marquee__track { display: flex; width: max-content; will-change: transform; }
.pwg-marquee__line {
  display: flex; align-items: center; gap: var(--s-5); padding-right: var(--s-5);
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.25rem, 2.8vw, 2rem);
  letter-spacing: -0.02em; text-transform: uppercase;
}
.pwg-marquee__line i {
  font-style: normal; color: var(--text-muted);
  font-size: 0.6em; font-family: var(--f-mono);
}

/* --- Abschlussaufruf ----------------------------------------------------- */
.pwg-cta {
  border-top: 3px solid var(--brand);
  background: var(--surface);
  padding: var(--s-8) var(--s-6);
}
.pwg-cta h2 { margin-bottom: var(--s-3); }

/* ===========================================================================
   Formular in Schritten
   Ein langes Formular schreckt ab. In fünf Abschnitten mit Fortschrittsanzeige
   füllen es deutlich mehr Leute aus.
   =========================================================================== */
.pwg-progress { display: flex; gap: var(--s-1); margin-block: var(--s-5); }
.pwg-progress__dot {
  height: var(--s-1); flex: 1;
  background: var(--surface-2); border-radius: var(--r-pill);
  transition: background var(--d-base) var(--e-out);
}
.pwg-progress__dot.is-done { background: var(--brand); }

.pwg-step { display: none; }
.pwg-step.is-active { display: block; }
.pwg-step__head { margin-bottom: var(--s-5); }
.pwg-step__head h2 { margin-block: var(--s-2); }
.pwg-step__head p { color: var(--text-dim); margin: 0; }

.pwg-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-6);
}
.pwg-form-card > .pwg-field { margin-bottom: var(--s-6); }
.pwg-form-card > .pwg-field:last-child { margin-bottom: 0; }
.pwg-field textarea { min-height: 7rem; resize: vertical; }
.pwg-field input:focus-visible,
.pwg-field textarea:focus-visible { border-color: var(--brand); }
.pwg-legend {
  font-family: var(--f-ui); font-size: var(--t-small); font-weight: 500; color: var(--text);
}

/* Auswahlfelder: Das echte Feld bleibt bedienbar und wird nur optisch ersetzt.
   Der Fokus MUSS sichtbar sein, sonst weiß niemand mit Tastatur, wo er steht.
   Die Auswahl hängt nicht an der Farbe allein, die Kante links markiert sie. */
.pwg-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.pwg-opts--one { grid-template-columns: 1fr; }
.pwg-opt { position: relative; }
/* Das echte Feld liegt unsichtbar über der Beschriftung. Die Feldregeln aus
   pixel-wg-components.css werden hier zurückgenommen, sonst bekäme das
   versteckte Feld Rahmen, Polster und Mindesthöhe eines Eingabefelds. */
.pwg-opt input {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
  min-height: 0; padding: 0; border: 0; background: transparent;
}
.pwg-opt label {
  display: flex; align-items: center;
  min-height: var(--tap); padding: var(--s-3) var(--s-4);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong); border-left: 3px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--f-ui); font-size: var(--t-small);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.pwg-opt input:hover + label { border-color: var(--brand-hover); }
.pwg-opt input:checked + label {
  border-color: var(--brand); border-left-color: var(--brand);
  background: var(--brand-soft); font-weight: 700;
}
.pwg-opt input:focus-visible + label {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

.pwg-form-actions {
  display: flex; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-5);
}

.pwg-alert {
  border: 1px solid var(--c-live); border-left: 3px solid var(--c-live);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--text);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.pwg-note {
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--r-btn);
  background: var(--surface);
  padding: var(--s-4);
  margin-top: var(--s-5);
}
.pwg-note p:last-child { margin-bottom: 0; }

.pwg-done { text-align: center; padding-block: var(--s-8); }
.pwg-done p { margin-inline: auto; color: var(--text-dim); }

/* --- Handy --------------------------------------------------------------- */
@media (max-width: 860px) {
  .pwg-section { padding-block: var(--s-8); }
  .pwg-strip { grid-template-columns: 1fr; }
  .pwg-strip__item { border-right: 0; border-bottom: 1px solid var(--border); }
  .pwg-strip__item:last-child { border-bottom: 0; }
  .pwg-split { grid-template-columns: 1fr; gap: var(--s-5); }
  .pwg-split__visual { min-height: 260px; }
  .pwg-split__panel { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--s-5); }
  .pwg-ledger { grid-template-columns: 1fr; column-gap: 0; }
  .pwg-opts { grid-template-columns: 1fr; }
  .pwg-hero { min-height: 70vh; }
  .pwg-hero__inner { padding-block: var(--s-8) var(--s-7); }
  .pwg-cta { padding: var(--s-6) var(--s-5); }
}