/* ============================================================
   taktischer-waehlen.de
   Projektspezifische Ebene über dem TWA-Broadsheet-Basisblatt
   (assets/twa-base.css). Nur was diese Seite zusätzlich braucht:
   Masthead ohne Navigation, PLZ-Formular, Argumente-Band,
   Ergebnis-Bühne und die PARTEI-Marke.
   ============================================================ */

/* Die drei Haus-Kurven stehen in twa-base.css (--ease-out, --ease-stamp,
   --ease-mask). Diese hier kommt dazu, weil die Basis sie nicht kennt: ein
   Eintritt mit bewusst trägem Start – die Marke soll sich herausschälen,
   nicht aufpoppen. Nur dafür verwenden. */
:root {
  --ease-emerge: cubic-bezier(.33, 0, .2, 1);
}

/* ============================================================
   MASTHEAD (ohne Navigation – kein Burger, dafür der Trägerhinweis)
   ============================================================ */
.site-head .masthead { border-bottom: 0; padding-bottom: .9rem; }

.masthead--tw {
  align-items: center;
  gap: 1rem 2rem;
}
/* Das Basisblatt stellt den Masthead unter 820px auf Spalte um – das war für
   die alte Kopfzeile mit Meta-Block gedacht. Hier stehen nur Wortmarke und
   Siegel, die passen auch auf 320px nebeneinander, und das Siegel gehört
   oben rechts. Also Zeile erzwingen. */
@media (max-width: 820px) {
  .masthead--tw {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}
.wordmark--tw {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 4.4vw, 2.1rem);
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinte);
  display: inline-flex;
  align-items: baseline;
  /* Flex schluckt den reinen Leerzeichen-Textknoten zwischen den beiden
     Spans – der steht im HTML nur, damit Kopieren und Screenreader nicht
     „TaktischerWählen" als ein Wort bekommen. Sichtbar trennt das Gap. */
  gap: .3em;
}
.wordmark--tw .wm-2 { color: var(--rot); }

/* Kopf rechts: nur das Siegel. Der Trägerhinweis steht als Zeile darunter. */
.masthead-siegel { display: block; flex: 0 0 auto; line-height: 0; }
.masthead-siegel img { width: clamp(48px, 7vw, 64px); height: auto; display: block; }

/* Trägerzeile unter dem Masthead – sie ersetzt die Menüleiste. */
.traeger-strip {
  border-top: var(--hair);
  border-bottom: var(--rule);
  background: var(--papier-2);
}
.traeger-strip p { margin: 0; padding: .5rem 0; text-align: center; }
.traeger-strip a {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--grau);
  text-decoration: none;
  display: inline-block;
  padding: .3rem 0;
  transition: color 160ms var(--ease-stamp);
}
/* nowrap: sonst bricht die Zeile mitten im Stiftungsnamen um. */
.traeger-strip b { color: var(--tinte); font-weight: 700; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .traeger-strip a:hover, .traeger-strip a:hover b { color: var(--rot); }
}

/* Fußzeilen-Variante: Siegel und Text nebeneinander. */
.traeger {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--grau);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  padding: .35rem 0;
  transition: color 160ms var(--ease-stamp);
}
.traeger .traeger-seal { flex: 0 0 auto; width: 46px; height: 46px; display: block; }
.traeger b { color: var(--tinte); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .traeger:hover { color: var(--rot); }
  .traeger:hover b { color: var(--rot); }
}
.traeger--foot { max-width: 24rem; }
.traeger--foot .traeger-seal { width: 58px; height: 58px; }
/* .foot-col a setzt display:block und würde den Flex-Aufbau des
   Trägerhinweises platt machen – hier gewinnt die spezifischere Regel. */
.foot-col a.traeger { display: inline-flex; padding: .4rem 0; }

/* ============================================================
   HERO
   ============================================================ */
.hero--tw { padding: clamp(2.4rem, 8vw, 5rem) 0 clamp(1.6rem, 4vw, 2.6rem); text-align: center; }
.hero--tw h1 {
  font-family: var(--font-display);
  font-weight: 700;
  /* Untergrenze 2.1rem: Bei 2.3rem umbrach „Sachsen-Anhalt –" auf 320px in
     eine dritte Zeile. Der vw-Anteil steigt im Ausgleich, damit übliche
     Telefonbreiten nicht kleiner werden als vorher. */
  font-size: clamp(2.1rem, 9.5vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}
/* Unter „aber taktischer." steht ein Strich wie im Original (dort
   background-size 100% .2em auf Position 0 88%). Anders als dort läuft er beim
   ersten Erscheinen von links nach rechts auf.

   Warum background-size und nicht ein transformiertes Pseudoelement: Die Zeile
   bricht auf schmalen Schirmen um. Ein absolut gesetztes ::after träfe nur ein
   Zeilenfragment; der Gradient wird dank box-decoration-break für jedes
   Fragment neu gezeichnet. Kostet dafür Paint statt Compositing – bei einer
   einzelnen Überschrift einmal pro Seitenaufruf ist das zu verschmerzen. */
.hero--tw h1 .unterstrichen {
  /* echter Kursivschnitt (selbst gehostet, siehe webfonts.css), keine vom
     Browser schräg gestellte Aufrechte – bei einer fetten Grotesk in dieser
     Größe ist der Unterschied deutlich sichtbar. */
  font-style: italic;
  background-image: linear-gradient(var(--rot), var(--rot));
  background-repeat: no-repeat;
  /* 88% wie im Original: Der rote Balken schiebt sich über die Grundlinie und
     läuft hinter den Buchstaben durch – als Hintergrund liegt er ohnehin
     darunter. Genau das ist der Effekt der Vorlage. */
  background-position: 0 88%;
  background-size: 100% .2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Ohne JS steht der Strich einfach da. Mit JS startet er leer … */
.js .hero--tw h1 .unterstrichen { background-size: 0% .2em; }
/* … und läuft nach der Titel-Einblendung auf, in der Sweep-Kurve des
   Basisblatts (dort für den Marker-Sweep der Broadsheet-Titel verwendet). */
.js .hero--tw h1.is-in .unterstrichen {
  background-size: 100% .2em;
  transition: background-size 760ms cubic-bezier(.85, 0, .15, 1) 420ms;
}

.hero-lead {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--tinte-soft);
  max-width: 44rem;
  margin: 1.4rem auto 0;
  text-wrap: pretty;
}
/* ============================================================
   PLZ-FORMULAR
   ============================================================ */
/* Im Hero trug früher der Absatz „Finden Sie heraus …“ den Abstand zum Feld.
   Der ist raus (Hero-Budget), der Abstand muss deshalb am Formular hängen –
   und größer sein als die Lücke Titel/Fließtext, weil hier Aussage von
   Bedienung getrennt wird. Im Band regelt das der .prompt-Absatz selbst. */
.hero--tw .plz-form { margin-top: clamp(1.8rem, 4.5vw, 2.4rem); }

.plz-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 auto;
  max-width: 30rem;
}
.plz-form input[type="text"] {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-align: center;
  padding: .75rem .8rem;
  min-height: 48px;
  color: var(--tinte);
  background: #faf3e2;
  border: 2px solid var(--tinte);
  border-radius: 0;
  appearance: none;
  transition: border-color 160ms var(--ease-stamp);
}
/* Fünfte Ziffer quittieren: Rückmeldung, dass die Eingabe vollständig ist,
   noch bevor geklickt wird. Farbe statt Bewegung – das Feld springt nicht. */
.plz-form input[type="text"].is-complete { border-color: var(--rot); }
/* Knopf sitzt bündig am Feld – das negative Margin schluckt die doppelte
   Kante. Bricht die Zeile um, bleibt das Feld trotzdem rundum geschlossen. */
.plz-form .btn--primary { margin-left: -2px; }
@media (max-width: 480px) {
  .plz-form { flex-direction: column; align-items: stretch; }
  /* In der Spalte wirkt flex-basis auf die HÖHE – sonst wird das Feld 12rem hoch. */
  .plz-form input[type="text"] { flex: 0 0 auto; }
  .plz-form .btn--primary { margin-left: 0; margin-top: -2px; justify-content: center; }
}
.plz-form input[type="text"]::placeholder {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--grau);
  text-transform: uppercase;
}
.plz-form input[type="text"]:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: -3px;
}
.plz-form .btn--primary {
  flex: 0 0 auto;
  min-height: 48px;
  border-width: 2px;
  gap: .5rem;
  /* box-shadow muss mit in die Liste: Diese Regel überschreibt die Basis
     (twa-base.css), und ohne ihn springt der harte Schlagschatten, während
     der Knopf gleitet – als einziger .btn--primary der Seite. */
  transition:
    transform 140ms var(--ease-stamp),
    box-shadow 140ms var(--ease-stamp),
    background 140ms var(--ease-stamp);
}
.plz-form .btn--primary svg { width: 18px; height: 18px; }
.plz-form .btn--primary:active { transform: translateY(1px); }

.plz-hint {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grau);
  margin: .7rem 0 0;
  text-align: center;
}

/* Fehlermeldung – Systemlook, kein Toast */
.plz-error {
  max-width: 34rem;
  margin: 1.1rem auto 0;
  border: 2px solid var(--rot);
  border-left-width: 6px;
  background: var(--papier-2);
  padding: .85rem 1rem;
  text-align: left;
  /* Keyframes statt Transition: Die Box behält ihr hidden-Attribut, weil
     role="alert" es zum Ansagen braucht. display:none setzt eine Keyframe-
     Animation sauber zurück, sie spielt also bei jeder neuen Falscheingabe. */
  animation: err-in 160ms var(--ease-out) both;
}
@keyframes err-in {
  from { opacity: 0; transform: translateY(-4px); }
}
.plz-error[hidden] { display: none; }
.plz-error .err-head {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rot);
  margin: 0 0 .3rem;
}
.plz-error p:last-child { margin: 0; font-size: .95rem; line-height: 1.5; }

/* dunkle Variante im invertierten Band */
.band--invert .plz-form input[type="text"] {
  background: #241f18;
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.band--invert .plz-form input[type="text"]::placeholder { color: var(--on-dark-soft); }
.band--invert .plz-form input[type="text"].is-complete { border-color: var(--rot-hell); }
.band--invert .plz-form .btn--primary {
  background: var(--on-dark);
  color: var(--tinte);
  border-color: var(--on-dark);
}
@media (hover: hover) and (pointer: fine) {
  .band--invert .plz-form .btn--primary:hover { background: var(--rot-hell); border-color: var(--rot-hell); }
}
.band--invert .plz-hint { color: var(--on-dark-soft); }
.band--invert .plz-error { background: #241f18; border-color: var(--rot-hell); }
.band--invert .plz-error .err-head { color: var(--rot-hell); }

/* ============================================================
   ERGEBNIS-BÜHNE
   ============================================================ */
.result {
  border-top: var(--rule);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.8rem, 5vw, 3rem) 0 clamp(2.4rem, 7vw, 4.5rem);
  text-align: center;
  scroll-margin-top: 1.5rem;
  /* Beim Zurücksetzen verblasst die Bühne, bevor das Layout zusammenfällt.
     Beim Erscheinen deckt der scrollIntoView den Sprung ab – beim
     Verschwinden gibt es nichts, was ihn abfangen würde. */
  transition: opacity 200ms var(--ease-out);
}
.result.is-leaving { opacity: 0; }
.result[hidden] { display: none; }

.result-meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rot);
  margin: 0 0 1.4rem;
}
.result-meta .muted { color: var(--grau); }

/* Auswertungs-Log (die „Analyse“) */
.result-log {
  list-style: none;
  margin: 0 auto 1.8rem;
  padding: 0;
  max-width: 32rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--grau);
}
.result-log li {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.result-log li.is-in { opacity: 1; transform: none; }
.result-log li::before {
  content: "›";
  color: var(--rot);
  font-weight: 700;
  flex: 0 0 auto;
}
.result-log li .tick { margin-left: auto; color: var(--rot); font-weight: 700; }

.result-verdict {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.9vw, 1.7rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  max-width: 40rem;
  margin: 0 auto;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.result-verdict.is-in { opacity: 1; transform: none; }
.result-verdict .rot { color: var(--rot); }

/* ---------- die PARTEI-Marke: langsames Einblenden ---------- */
.mark-stage {
  margin: clamp(2rem, 6vw, 3.4rem) auto 0;
  max-width: 32rem;
  opacity: 0;
  transform: scale(.965);
  filter: blur(6px);
  transition:
    opacity 3200ms var(--ease-emerge),
    transform 3600ms var(--ease-out),
    filter 2600ms var(--ease-emerge);
  /* filter gehört nicht in will-change: Ein Blur-Radius muss ohnehin je Frame
     neu gerastert werden, die Voranmeldung hält nur die Ebene länger vor. */
  will-change: opacity, transform;
}
.mark-stage.is-in { opacity: 1; transform: none; filter: blur(0); }

/* Das offizielle Logo wird nicht umgefärbt – es steht auf einer weißen
   Platte, weil seine Weiß-Konturen sonst auf dem Papierton aufblitzen. */
.partei-plate {
  background: #fff;
  border: 2px solid var(--tinte);
  padding: clamp(1.3rem, 4.5vw, 2.2rem) clamp(1.2rem, 4.5vw, 2.2rem);
}
.partei-plate img {
  display: block;
  width: 100%;
  height: auto;
}

.mark-caption {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 1rem auto 0;
  max-width: 34rem;
}

.result-again {
  margin: clamp(1.8rem, 5vw, 2.6rem) auto 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.result-again button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--tinte);
  color: var(--tinte);
  font: inherit;
  cursor: pointer;
  padding: .45rem .1rem;
  min-height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  .result-again button:hover { color: var(--rot); border-color: var(--rot); }
}

/* Reduced Motion heißt „weniger und sanfter", nicht „gar nichts": Farb- und
   Opazitätswechsel erklären den Zustand, ohne etwas zu bewegen – die dürfen
   bleiben. Das Basisblatt schaltet mit `* { transition: none !important }`
   (twa-base.css) aber pauschal alles ab. Da `*` die Spezifität 0-0-0 hat,
   gewinnt hier jeder Klassenselektor mit !important. Der saubere Ort wäre die
   Basis – die bleibt aber bewusst wortgleiche Kopie, siehe README. */
@media (prefers-reduced-motion: reduce) {
  /* Bewegung raus … */
  .mark-stage,
  .result-verdict,
  .result-log li { transform: none !important; filter: none !important; }

  /* … Opazität bleibt, sanft. */
  .mark-stage { transition: opacity 200ms var(--ease-out) !important; }
  .result-verdict,
  .result-log li { transition: opacity 160ms var(--ease-out) !important; }

  /* Farbfeedback bleibt ebenfalls – es bewegt nichts. */
  .traeger,
  .ds-toc a,
  .foot-col a,
  .result-again button,
  .plz-form input[type="text"],
  .plz-form .btn--primary {
    transition:
      color 160ms var(--ease-stamp),
      background-color 160ms var(--ease-stamp),
      border-color 160ms var(--ease-stamp) !important;
  }
}

/* ============================================================
   ARGUMENTE-BAND (invertiert – das TWA-Pendant zur Primärfarbfläche)
   ============================================================ */
.band--invert {
  background: var(--tinte);
  color: var(--on-dark);
  border-top: 3px solid var(--rot);
  border-bottom: 3px solid var(--rot);
  padding: clamp(2.4rem, 7vw, 4rem) 0;
  position: relative;
  z-index: 2;
}
.band--invert h2.h,
.band--invert h3.h { color: var(--on-dark); }
.band--invert .section-label { color: var(--rot-hell); }
.band--invert p { color: var(--on-dark-soft); }
.band--invert .band-head { text-align: center; margin-bottom: clamp(1.4rem, 4vw, 2.4rem); }
.band--invert .band-head h2.h { font-size: clamp(1.8rem, 5.2vw, 3rem); margin-bottom: .5rem; }
.band--invert .band-head .deck {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--on-dark-soft);
  margin: 0;
}

.arg {
  display: grid;
  grid-template-columns: clamp(88px, 14vw, 132px) minmax(0, 1fr);
  gap: clamp(1.2rem, 3.5vw, 2.4rem);
  align-items: start;
  padding: clamp(1.4rem, 4vw, 2.2rem) 0;
  border-top: 1px solid rgba(243, 234, 214, .22);
  max-width: 56rem;
  margin: 0 auto;
}
.arg:first-of-type { border-top: 0; }
/* Ziffer statt Piktogramm: Zeitungen nummerieren ihre Argumente, sie
   bebildern sie nicht – und selbstgezeichnete Icon-Pfade spart es auch. */
/* Die selbst gezeichneten Icons bleiben: Das Original bebildert genau diese
   drei Argumente, das Nachzeichnen ist Teil der Persiflage. Nicht gegen
   Bibliotheks-Icons tauschen, auch wenn ein Audit das vorschlägt. */
.arg-icon { width: 100%; height: auto; display: block; color: var(--rot-hell); }

/* Gespiegelte Zeile: Icon rechts. Die Vorlage wechselt links/rechts/links,
   drei gleiche Zeilen wären monotoner als das Original. */
.arg.arg--gespiegelt { grid-template-columns: minmax(0, 1fr) clamp(88px, 14vw, 132px); }
.arg.arg--gespiegelt > .arg-icon { grid-column: 2; grid-row: 1; }
.arg.arg--gespiegelt > div { grid-column: 1; grid-row: 1; }

.arg h3.h {
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  text-transform: uppercase;
  letter-spacing: -.015em;
  margin-bottom: .6rem;
}
.arg p { margin: 0 0 .9rem; line-height: 1.6; }
.arg p:last-child { margin-bottom: 0; }
/* --grau käme auf Tinte nur auf 2,5:1 – im invertierten Band muss die
   Fußnote die helle Papierfarbe tragen. */
.arg .fussnote {
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--on-dark-soft);
  border-left: 2px solid var(--rot-hell);
  padding-left: .7rem;
  margin-top: 1rem;
}

.band-cta { text-align: center; padding-top: clamp(2rem, 5vw, 3rem); }
.band-cta .prompt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: var(--on-dark);
  max-width: 38rem;
  margin: 0 auto 1.2rem;
  text-wrap: balance;
}

@media (max-width: 620px) {
  .arg, .arg.arg--gespiegelt { grid-template-columns: 1fr; gap: .9rem; }
  .arg.arg--gespiegelt > .arg-icon,
  .arg.arg--gespiegelt > div { grid-column: 1; grid-row: auto; }
  .arg-icon { max-width: 84px; }
}

/* ============================================================
   MITMACH-ABSCHNITT
   ============================================================ */
.mitmach { padding: clamp(2.4rem, 6vw, 3.6rem) 0 clamp(1.6rem, 4vw, 2.4rem); }
.mitmach .measure { max-width: 42rem; }
.mitmach ul.ticks { margin: 1.2rem 0 1.6rem; }

/* ============================================================
   RECHTLICHES (datenschutz.html)
   ============================================================ */
.ds-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  padding: 1rem 0 1.2rem;
  border-bottom: var(--hair);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ds-toc a {
  text-decoration: none;
  color: var(--tinte);
  padding: .35rem .15rem;
  border-bottom: 1px solid transparent;
}
.ds-toc a .rot { color: var(--rot); }
@media (hover: hover) and (pointer: fine) {
  .ds-toc a:hover { color: var(--rot); border-color: var(--rot); }
}
.prose h2.h { margin-top: 2.2rem; }
.prose h2.h:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: 0 0 .4rem; }

/* ============================================================
   FOOTER-ANPASSUNG
   ============================================================ */
.foot-top--tw { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 820px) { .foot-top--tw { grid-template-columns: 1fr; } }

/* Kein Sticky-Header: diese Seite hat keine Navigation, die kleben müsste.
   (Basisblatt setzt position:sticky für die TWA-Hauptnavigation.) */
.site-head { position: static; }
html { scroll-padding-top: 1.5rem; }

/* Ergebnisbühne bekommt beim Absenden programmatisch den Fokus (Screenreader
   landen auf der Überschrift). Kein Ring für den reinen Programmfokus –
   Tastaturfokus über :focus-visible bleibt sichtbar. */
.result:focus { outline: none; }
.result:focus-visible { outline: 3px solid var(--rot); outline-offset: 4px; }

/* ============================================================
   KLEINSCHREIBUNG DER LANDINGPAGE

   Das Basisblatt setzt h1/h2.h/h3.h in Versalien – so sieht die Stiftung aus.
   Die Vorlage taktisch-waehlen.de schreibt ihre Überschriften aber gemischt,
   und die Ähnlichkeit zur Vorlage wiegt hier schwerer als die Hausschrift-
   Konvention. Gilt nur für die Landingpage; Datenschutz und Fehlerseite
   bleiben im Haus-Look.
   ============================================================ */
.band--invert h2.h,
.band--invert h3.h,
.mitmach h2.h { text-transform: none; }
.wordmark--tw { text-transform: none; }