/* ==========================================================================
   Trautwein x Pöppel — Kooperationsseite, Fassung 2026-08-21
   Alle Regeln auf .tw-wrap gescopt (Chatbot-Regel 1.3).
   Kein Reset mit Klasse+Attribut, kein !important, keine externen Requests.
   ========================================================================== */

.tw-wrap {
  /* --- Farbwelt: Systemvariablen zuerst, Fallback auf den System-Wert --- */
  --ci:        var(--color-primary, #d51030);
  --ci-dark:   var(--color-primary-dark, #b30d27);
  --ci-rgb:    213, 16, 48;

  --tw-gelb:   #f9dc06;
  --tw-tief:   #0f1319;
  --tw-tief-2: #191f28;
  --tw-tief-3: #232a35;

  --grund:     #ffffff;
  --ruhe:      #f4f5f7;
  --text:      #14171c;
  --text-2:    #5b636e;
  --text-hell: #ffffff;
  --text-hell-2: #a8b0bb;
  --linie:     #e4e7ec;
  --linie-dunkel: rgba(255, 255, 255, .14);

  --radius:    16px;
  --radius-gr: 24px;

  /* Rhythmus: eine einzige Abstandsskala für die ganze Seite.
     Bewusst straffer als der Twilio-Takt — dort trägt eine Seite mit weit
     weniger Sektionen die großen Pausen, hier entsteht daraus Leerlauf. */
  --takt:      clamp(3rem, 5vw, 5rem);
  --takt-halb: clamp(1.5rem, 2.5vw, 2.5rem);
  --spalte:    min(1180px, 100% - 3rem);

  /* Hoehe des klebenden Systemmenuebands ueber der Seite. Lokal steht dort
     nichts, im eingebauten Zustand rund 155 px. Jede Buehne, die am oberen
     Rand klebt, und jedes Sprungziel rechnet damit — sonst klebt der Inhalt
     hinter dem Band und ist um dessen Hoehe zu lang. Gemessen in main.js. */
  --band: 0px;

  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--grund);
  /* clip statt hidden — hidden bricht jedes position:sticky */
  overflow-x: clip;
}

.tw-wrap *,
.tw-wrap *::before,
.tw-wrap *::after { box-sizing: border-box; }

/* Jedes Sprungziel der Subnav haelt Abstand zum klebenden Menueband,
   sonst landet die Ueberschrift dahinter und wirkt abgeschnitten. */
.tw-wrap [id] { scroll-margin-top: calc(var(--band) + 1rem); }

.tw-wrap p,
.tw-wrap h1, .tw-wrap h2, .tw-wrap h3, .tw-wrap h4,
.tw-wrap ul, .tw-wrap ol, .tw-wrap figure, .tw-wrap blockquote {
  margin: 0;
  padding: 0;
}
.tw-wrap ul, .tw-wrap ol { list-style: none; }
.tw-wrap img { display: block; max-width: 100%; height: auto; }
.tw-wrap a { color: inherit; }

/* Neutralisierung gegen die globalen Elementregeln des Systems
   (main.css setzt h1–h6 grau + VERSALIEN, body auf font-weight 300) */
.tw-wrap h1, .tw-wrap h2, .tw-wrap h3, .tw-wrap h4 {
  color: inherit;
  text-transform: none;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   Typografie — die Ruhe entsteht aus wenigen, großen Sprüngen
   -------------------------------------------------------------------------- */
.tw-wrap .tw-display {
  font-size: clamp(2rem, 3.9vw, 3.35rem);
  line-height: 1.07;
  letter-spacing: -.03em;
}
.tw-wrap .tw-h2 {
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.028em;
}
.tw-wrap .tw-h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.tw-wrap .tw-lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 52ch;
}
.tw-wrap .tw-kicker {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ci);
  margin-bottom: 1.25rem;
}
.tw-wrap .tw-akzent { color: var(--ci); }
/* Die Farben teilen die Aussage auf: das Fahrzeug ist Trautweins Part (gelb),
   das Werkzeug unserer (CI-Rot). */
.tw-wrap .tw-akzent-tw { color: var(--tw-gelb); }

/* --------------------------------------------------------------------------
   Flächen & Raster
   -------------------------------------------------------------------------- */
.tw-wrap .tw-sektion {
  padding-block: var(--takt);
}
.tw-wrap .tw-sektion--ruhe { background: var(--ruhe); }
.tw-wrap .tw-sektion--tief {
  background: var(--tw-tief);
  color: var(--text-hell);
}
.tw-wrap .tw-sektion--tief .tw-lead,
.tw-wrap .tw-sektion--tief .tw-fliess { color: var(--text-hell-2); }
.tw-wrap .tw-sektion--tief .tw-kicker { color: var(--tw-gelb); }

.tw-wrap .tw-spalte {
  width: var(--spalte);
  margin-inline: auto;
}
.tw-wrap .tw-kopf { max-width: 52rem; margin-bottom: var(--takt-halb); }
/* Geteilter Kopf: Fliesstext links, Beleg rechts daneben. Spart Hoehe und
   fuellt den sonst leeren Platz rechts neben dem Text. */
.tw-wrap .tw-kopf--geteilt { max-width: none; }
/* Frueher stand der Bewertungskasten zwischen Ueberschrift und Fliesstext und
   hat den Abstand mitgebracht. Seit er daneben sitzt, fehlt er hier. */
.tw-wrap .tw-kopf--geteilt .tw-h2 { margin-bottom: 1.35rem; }
@media (min-width: 900px) {
  /* Die Ueberschrift laeuft ueber die volle Breite, erst darunter teilt sich
     die Zeile: Fliesstext links, Beleg rechts daneben. */
  .tw-wrap .tw-kopf-reihe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .tw-wrap .tw-kopf-reihe .tw-lead { max-width: 52rem; margin-bottom: 0; }
  /* in der geteilten Zeile traegt der Kasten die Abstaende nicht mehr selbst */
  .tw-wrap .tw-kopf-reihe .tw-bewertung { margin-top: 0; margin-bottom: 0; }
}
.tw-wrap .tw-fliess { color: var(--text-2); }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */
.tw-wrap .tw-knopf {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 2rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.tw-wrap .tw-knopf--voll {
  background: var(--ci);
  color: #fff;
}
.tw-wrap .tw-knopf--voll:hover { background: var(--ci-dark); }
.tw-wrap .tw-knopf--linie {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}
.tw-wrap .tw-knopf--linie:hover {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.tw-wrap .tw-sektion--tief .tw-knopf--linie:hover,
.tw-wrap .tw-hero .tw-knopf--linie:hover {
  background: #fff;
  border-color: #fff;
  color: var(--tw-tief);
}
.tw-wrap .tw-knopf--klar {
  padding-inline: 0;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  background: none;
}

/* --------------------------------------------------------------------------
   1 — Partnerleiste (kein Seiten-Chrome, sondern Inhalt)
   -------------------------------------------------------------------------- */
.tw-wrap .tw-brandbar {
  background: var(--tw-tief);
  color: var(--text-hell);
  border-bottom: 1px solid var(--linie-dunkel);
}
.tw-wrap .tw-brandbar-inner {
  width: var(--spalte);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  padding-block: 1.1rem;
  font-size: .9375rem;
  color: var(--text-hell-2);
}
.tw-wrap .tw-brandbar-logo { height: 26px; width: auto; }
.tw-wrap .tw-brandbar-x {
  color: var(--text-hell-2);
  font-size: 1.1rem;
  opacity: .6;
}
.tw-wrap .tw-brandbar-tel {
  margin-left: auto;
  color: var(--text-hell);
  font-weight: 600;
  text-decoration: none;
}
/* Auf schmalen Geräten würde die Nummer allein in eine zweite Zeile rutschen —
   dort trägt sie der Dauer-CTA am unteren Rand ohnehin */
@media (max-width: 599px) {
  .tw-wrap .tw-brandbar-tel { display: none; }
}

/* --------------------------------------------------------------------------
   2 — Hero
   -------------------------------------------------------------------------- */
/* Der Hero trägt das Bild vollflächig im Hintergrund und passt auf einen
   Bildschirm — inklusive Knöpfen und Faktenzeile. Kein Scrollen, um ihn zu lesen. */
.tw-wrap .tw-hero {
  position: relative;
  isolation: isolate;
  background: var(--tw-tief);
  color: var(--text-hell);
  min-height: min(100svh, 860px);
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.tw-wrap .tw-hero-grund {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.tw-wrap .tw-hero-grund img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Zwei Lagen: links dunkel genug für den Text, rechts das Bild sichtbar */
.tw-wrap .tw-hero-grund::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15,19,25,.94) 0%, rgba(15,19,25,.88) 38%, rgba(15,19,25,.45) 72%, rgba(15,19,25,.35) 100%),
    linear-gradient(to top, rgba(15,19,25,.75) 0%, rgba(15,19,25,0) 38%);
}
.tw-wrap .tw-hero-raster { max-width: 40rem; }
.tw-wrap .tw-hero .tw-lead { color: var(--text-hell-2); max-width: 40ch; }

/* Die beiden Marken direkt über der Schlagzeile */
.tw-wrap .tw-hero-marken {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}
.tw-wrap .tw-hero-marken img { height: 34px; width: auto; }
.tw-wrap .tw-hero-marken span {
  color: var(--text-hell-2);
  font-size: 1.05rem;
  opacity: .7;
}
.tw-wrap .tw-hero-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.75rem;
}
.tw-wrap .tw-hero-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie-dunkel);
  font-size: .9375rem;
  color: var(--text-hell-2);
}
.tw-wrap .tw-hero-fakt {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.tw-wrap .tw-hero-fakt strong { color: var(--text-hell); font-weight: 600; }

/* Auf schmalen Geräten muss der Hero-Knopf über der Falz bleiben —
   sonst sieht ihn nur, wer scrollt. Text und Abstände entsprechend straffen. */
@media (max-width: 599px) {
  .tw-wrap .tw-hero { min-height: 0; padding-block: 2.25rem 2.5rem; }
  .tw-wrap .tw-hero-marken { margin-bottom: 1.1rem; }
  .tw-wrap .tw-hero-marken img { height: 26px; }
  .tw-wrap .tw-hero .tw-lead {
    font-size: 1rem;
    line-height: 1.5;
  }
  .tw-wrap .tw-hero-aktionen { margin-top: 1.35rem; }
  .tw-wrap .tw-hero-aktionen .tw-knopf { width: 100%; justify-content: center; }
  .tw-wrap .tw-hero-fakten {
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    font-size: .875rem;
    gap: .4rem;
  }
}

/* --------------------------------------------------------------------------
   Icon-System — Inline-SVG, dreischichtig: weiche Fläche, Kontur, Vollton.
   Aus der Vorfassung übernommen, damit die Bildsprache erhalten bleibt.
   -------------------------------------------------------------------------- */
.tw-wrap .tw-ic svg { width: 100%; height: 100%; display: block; }
.tw-wrap .tw-ic .soft   { fill: rgba(var(--ci-rgb), .13); stroke: none; }
.tw-wrap .tw-ic .stroke { fill: none; stroke: var(--ci); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tw-wrap .tw-ic .fill   { fill: var(--ci); stroke: none; }
.tw-wrap .tw-sektion--tief .tw-ic .soft   { fill: rgba(255,255,255,.10); }
.tw-wrap .tw-sektion--tief .tw-ic .stroke { stroke: var(--tw-gelb); }
.tw-wrap .tw-sektion--tief .tw-ic .fill   { fill: var(--tw-gelb); }

/* --------------------------------------------------------------------------
   3 — Problem: Schrittfolge mit Ziffer, Icon und durchlaufender Linie
   -------------------------------------------------------------------------- */
.tw-wrap .tw-problem-raster {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: stretch;
}
@media (min-width: 900px) {
  .tw-wrap .tw-problem-raster { grid-template-columns: 1fr 1.05fr; }
}
.tw-wrap .tw-problem-bild {
  border-radius: var(--radius-gr);
  overflow: hidden;
  position: relative;
  /* Höhe folgt der Textspalte, damit rechts kein Leerraum entsteht */
  min-height: 22rem;
}
@media (max-width: 899px) {
  .tw-wrap .tw-problem-bild { aspect-ratio: 4 / 3; min-height: 0; }
}
.tw-wrap .tw-problem-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Die Bildaussage liegt als Text darüber, nicht im Bild — Generatoren
   scheitern an Schrift, und so bleibt die Aussage austauschbar. */
.tw-wrap .tw-problem-marke {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(15, 19, 25, .88);
  color: var(--text-hell);
  font-size: .9375rem;
  line-height: 1.45;
}
.tw-wrap .tw-problem-marke strong { display: block; color: var(--tw-gelb); margin-bottom: .15rem; }

.tw-wrap .tw-punkte {
  display: grid;
  gap: 0;
  /* verteilt die drei Punkte über die volle Höhe neben dem Bild */
  align-content: space-between;
  height: 100%;
}
.tw-wrap .tw-punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.25rem;
}
/* Der Abstand sitzt am Textabsatz, nicht am Punkt selbst — sonst endet die
   Verbindungslinie vor dem Abstand und bricht optisch ab */
.tw-wrap .tw-punkt:not(:last-child) p { padding-bottom: 1.9rem; }
/* Ziffernsäule mit durchlaufender Linie — führt das Auge von 01 nach 03 */
.tw-wrap .tw-punkt-saeule {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  align-self: stretch;
}
.tw-wrap .tw-punkt-nr {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ci);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.tw-wrap .tw-punkt-linie {
  flex: 1;
  width: 2px;
  background: var(--linie);
  border-radius: 1px;
}
.tw-wrap .tw-punkt:last-child .tw-punkt-linie { display: none; }
.tw-wrap .tw-punkt-kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.75rem;
}
.tw-wrap .tw-punkt-kopf .tw-ic { width: 1.6rem; height: 1.6rem; flex: none; }
.tw-wrap .tw-punkt h3 { margin: 0; }
.tw-wrap .tw-punkt p { margin-top: .5rem; }

/* --------------------------------------------------------------------------
   4 — Die Story: seitwärts gepinnte Etappenstrecke
   -------------------------------------------------------------------------- */
.tw-wrap .tw-story {
  background: var(--tw-tief);
  color: var(--text-hell);
}
.tw-wrap .tw-story-intro {
  width: var(--spalte);
  margin-inline: auto;
  padding-block: var(--takt) var(--takt-halb);
  max-width: 52rem;
}
.tw-wrap .tw-story-intro .tw-lead { color: var(--text-hell-2); }
.tw-wrap .tw-story-intro .tw-kicker { color: var(--tw-gelb); }

/* Die Bahn: ihre Höhe bestimmt, wie lange seitwärts gescrollt wird */
.tw-wrap .tw-story-bahn { position: relative; }
.tw-wrap .tw-story-buehne {
  position: sticky;
  top: var(--band);
  height: calc(100vh - var(--band));
  /* svh: auf Mobilgeraeten aendert die ein- und ausfahrende Adressleiste
     sonst staendig die Buehnenhoehe */
  height: calc(100svh - var(--band));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tw-tief);
}
/* Die Schiene ist zwei Bildschirme breit: Auftakt, dann Etappen.
   Sie wandert genau einmal um eine Bildschirmbreite — wie im Vorbild. */
.tw-wrap .tw-story-schiene {
  flex: 1;
  display: flex;
  width: 200vw;
  will-change: transform;
}
.tw-wrap .tw-story-auftakt,
.tw-wrap .tw-story-etappen {
  flex: 0 0 100vw;
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Die Etappen bleiben in der Spaltenbreite ... */
.tw-wrap .tw-story-etappen {
  padding-inline: max(1.5rem, calc((100vw - var(--spalte)) / 2));
}
/* ... der Auftakt nicht: sein Bild soll den Bildschirm fuellen und darf
   deshalb nicht am Spaltenpolster haengen. */
.tw-wrap .tw-story-auftakt {
  padding-inline: 0;
  align-items: center;
}

/* --- Auftakt: Titel wandert hoch, Bild schrumpft zum Band --- */
/* Der Titel sitzt IM Bild, vertikal zentriert — schrumpft das Bild,
   rueckt er dadurch von selbst in dessen Mitte (so macht es das Vorbild). */
.tw-wrap .tw-story-titel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .5rem;
  /* Weit links am Bildrand, nicht auf der Spaltenkante — sonst laeuft der
     Text ueber das Fahrzeug in der rechten Bildhaelfte. */
  /* Unten mehr Luft als oben: dadurch sitzt der Satz optisch etwas hoeher
     und die Unterlaenge des g wird im geschrumpften Band nicht angeschnitten. */
  padding: .35rem clamp(1.5rem, 4.5vw, 4.5rem) 1.1rem;
  text-align: left;
  color: var(--text-hell);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
  will-change: opacity;
}
.tw-wrap .tw-story-titel .tw-kicker { margin-bottom: 0; color: var(--tw-gelb); }
.tw-wrap .tw-story-titel-zeile {
  /* Grundgroesse; im Verlauf wird sie ueber --titel-skala mitgezogen,
     damit der Satz den schrumpfenden Bildraum weiter ausfuellt. */
  font-size: calc(clamp(1.9rem, 5.2vw, 5.4rem) * var(--titel-skala, 1));
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -.032em;
  transform-origin: left center;
}
@media (max-width: 899px) {
  .tw-wrap .tw-story-titel-zeile { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}
.tw-wrap .tw-story-bild {
  position: relative;
  overflow: hidden;
  align-self: center;
  width: 100%;
  will-change: height, width, border-radius;
}
/* Abdunkelung, damit der Titel auf dem Bild lesbar bleibt */
.tw-wrap .tw-story-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(15,19,25,.82) 0%, rgba(15,19,25,.55) 45%, rgba(15,19,25,.25) 100%),
    linear-gradient(180deg, rgba(15,19,25,.15), rgba(15,19,25,.35));
  opacity: var(--titel-deckung, 1);
}
.tw-wrap .tw-story-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* --- Etappen: liegen übereinander und blenden über --- */
.tw-wrap .tw-story-etappen { justify-content: flex-start; }
.tw-wrap .tw-etappen-buehne {
  position: relative;
  flex: 1;
  min-height: 0;
}
.tw-wrap .tw-etappe {
  position: absolute;
  inset: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  /* keine CSS-Transition: Deckkraft und Versatz werden pro Frame aus dem
     Scrollstand gesetzt, eine feste Dauer wuerde dagegenlaufen */
  will-change: opacity, transform;
}
.tw-wrap .tw-etappe.tw-sichtbar { opacity: 1; visibility: visible; }
@media (min-width: 900px) {
  .tw-wrap .tw-etappe { grid-template-columns: 1fr 1fr; }
}
.tw-wrap .tw-etappe-nr {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--tw-gelb);
  margin-bottom: 1rem;
}
.tw-wrap .tw-etappe h3 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  margin-bottom: 1.25rem;
}
.tw-wrap .tw-etappe p {
  color: var(--text-hell-2);
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  max-width: 40ch;
}
.tw-wrap .tw-etappe-marke {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.75rem;
  padding: .45rem 1rem;
  border: 1px solid var(--linie-dunkel);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-hell-2);
}
/* Wer die Etappe verantwortet, steht in dessen Hausfarbe:
   Trautwein gelb mit schwarzer Schrift, Pöppel rot mit weisser. */
.tw-wrap .tw-etappe-marke--tw {
  background: var(--tw-gelb);
  border-color: var(--tw-gelb);
  color: #000;
}
.tw-wrap .tw-etappe-marke--pp {
  background: var(--ci);
  border-color: var(--ci);
  color: #fff;
}
.tw-wrap .tw-etappe-bild {
  border-radius: var(--radius-gr);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--tw-tief-2);
  /* Trapez nach Svens Canva-Vorgabe: rechte Kante gerade, linke Kante
     schraeg nach innen (unten 15 % der Breite eingezogen), ALLE vier Ecken
     gerundet. Der Pfad wird in main.js aus der Elementgroesse berechnet —
     polygon() beherrscht keine Rundungen. Fallback bis dahin: */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
  will-change: transform;
}
.tw-wrap .tw-etappe > div { will-change: transform; }
.tw-wrap .tw-etappe-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Platzhalter für die fehlende Aufnahme — bewusst sichtbar */
.tw-wrap .tw-luecke {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  padding: 2rem;
  border: 2px dashed rgba(var(--ci-rgb), .55);
  background: var(--tw-tief-2);
  color: var(--text-hell-2);
  text-align: center;
  font-size: .9375rem;
  line-height: 1.6;
}
.tw-wrap .tw-luecke strong {
  display: block;
  color: var(--text-hell);
  font-size: 1.0625rem;
}
.tw-wrap .tw-luecke span { font-size: .8125rem; }

/* Fortschrittsleiste mit Rauten */
.tw-wrap .tw-fortschritt {
  position: relative;
  width: var(--spalte);
  margin-inline: auto;
  padding-bottom: clamp(2rem, 5vh, 4rem);
}
.tw-wrap .tw-fortschritt-linie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(clamp(2rem, 5vh, 4rem) + 19px);
  height: 1px;
  background: var(--linie-dunkel);
}
.tw-wrap .tw-fortschritt-fuell {
  position: absolute;
  left: 0;
  bottom: calc(clamp(2rem, 5vh, 4rem) + 19px);
  height: 1px;
  width: 0;
  background: var(--ci);
  transition: width .2s linear;
}
.tw-wrap .tw-fortschritt-punkte {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
}
.tw-wrap .tw-marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text-hell-2);
  cursor: pointer;
}
.tw-wrap .tw-marke-text {
  font-size: .875rem;
  font-weight: 500;
  transition: color .2s ease, font-weight .2s ease;
}
/* Trapez wie bei den Bildern: linke Kante schraeg eingezogen, Ecken gerundet.
   Statt der Raute traegt es jetzt das Icon der jeweiligen Etappe. */
.tw-wrap .tw-marke-form {
  width: 46px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid var(--linie-dunkel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.tw-wrap .tw-marke-form .tw-ic {
  width: 20px;
  height: 20px;
  margin-left: 4px;                 /* gleicht die Schraege optisch aus */
}
.tw-wrap .tw-marke-form .tw-ic .soft   { fill: rgba(255,255,255,.14); }
.tw-wrap .tw-marke-form .tw-ic .stroke { stroke: var(--text-hell-2); stroke-width: 1.7; }
.tw-wrap .tw-marke-form .tw-ic .fill   { fill: var(--text-hell-2); }

.tw-wrap .tw-marke[aria-current="true"] { color: var(--text-hell); }
.tw-wrap .tw-marke[aria-current="true"] .tw-marke-text { font-weight: 700; }
.tw-wrap .tw-marke[aria-current="true"] .tw-marke-form {
  background: var(--ci);
  border-color: var(--ci);
  transform: scale(1.12);
}
.tw-wrap .tw-marke[aria-current="true"] .tw-ic .stroke { stroke: #fff; }
.tw-wrap .tw-marke[aria-current="true"] .tw-ic .fill   { fill: #fff; }
.tw-wrap .tw-marke[aria-current="true"] .tw-ic .soft   { fill: rgba(255,255,255,.25); }

/* Ohne JS und auf schmalen Geräten: die Etappen laufen untereinander */
.tw-wrap .tw-story-bahn:not(.tw-aktiv) .tw-story-buehne {
  position: static;
  height: auto;
  overflow: visible;
}
.tw-wrap .tw-story-bahn:not(.tw-aktiv) .tw-story-schiene {
  display: block;
  transform: none;
}
.tw-wrap .tw-story-bahn:not(.tw-aktiv) .tw-etappe {
  flex: none;
  width: auto;
  padding-inline: 0;
  padding-block: var(--takt-halb);
  border-top: 1px solid var(--linie-dunkel);
}
.tw-wrap .tw-story-bahn:not(.tw-aktiv) .tw-story-schiene {
  width: var(--spalte);
  margin-inline: auto;
}
.tw-wrap .tw-story-bahn:not(.tw-aktiv) .tw-fortschritt { display: none; }

/* --------------------------------------------------------------------------
   5 — Kooperation: zwei Spezialisten
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Kooperation: schwarze Sektion mit Ueberschrift, darunter zwei randlose
   Boxen ueber die volle Breite. Vorlage: Svens Canva-Skizze.
   -------------------------------------------------------------------------- */
.tw-wrap .tw-koop {
  background: var(--tw-tief);
  color: var(--text-hell);
  padding-block: var(--takt) 0;
  overflow: hidden;
}
.tw-wrap .tw-koop-kopf { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.tw-wrap .tw-koop .tw-lead { color: var(--text-hell-2); }
.tw-wrap .tw-koop .tw-kicker { color: var(--ci); }

.tw-wrap .tw-duo {
  display: grid;
  gap: 0;
  align-items: stretch;
}
@media (min-width: 900px) {
  /* minmax(0,1fr) statt 1fr: sonst waechst eine Spalte ueber ihre
     Inhaltsbreite hinaus und die Boxen treffen sich nicht in der Mitte */
  .tw-wrap .tw-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* die rechte Box rueckt exakt um den Schraegenversatz nach links,
     dadurch schliessen die beiden Kanten fugenlos aneinander */
  .tw-wrap .tw-duo-box--pp { margin-left: -72px; }
}
.tw-wrap .tw-duo-box {
  position: relative;
  min-height: 22rem;
  padding-block: clamp(2rem, 3.5vw, 3.25rem);
  will-change: transform, opacity;
}
.tw-wrap .tw-duo-box--tw { background: var(--tw-gelb); color: #000; }
.tw-wrap .tw-duo-box--pp { background: #4a4d52; color: #fff; }

/* Der Text sitzt auf derselben Spaltenkante wie der Rest der Seite */
.tw-wrap .tw-duo-inhalt { max-width: 30rem; }
@media (min-width: 900px) {
  /* --spaltenkante wird in main.js aus der tatsaechlichen Spalte gemessen.
     Eine calc-Rechnung mit 100vw traefe daneben: sie zaehlt den Scrollbalken
     mit und ignoriert, dass die Box selbst schon versetzt sitzt. */
  .tw-wrap .tw-duo-box--tw .tw-duo-inhalt {
    margin-left: var(--spaltenkante, 2rem);
    margin-right: 4rem;
  }
  .tw-wrap .tw-duo-box--pp .tw-duo-inhalt {
    margin-left: 6.5rem;
    margin-right: var(--spaltenkante, 2rem);
  }
}
@media (max-width: 899px) {
  .tw-wrap .tw-duo-inhalt {
    max-width: none;
    margin-inline: max(1.5rem, calc((100vw - var(--spalte)) / 2));
  }
}

.tw-wrap .tw-duo-logo { height: 46px; width: auto; margin-bottom: 1.5rem; }
.tw-wrap .tw-duo-rolle {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.tw-wrap .tw-duo-box--tw .tw-duo-rolle { color: rgba(0,0,0,.6); }
.tw-wrap .tw-duo-box--pp .tw-duo-rolle { color: #ff5f70; }
.tw-wrap .tw-duo-box h3 { margin-bottom: 1.5rem; }
.tw-wrap .tw-duo-liste li {
  padding-left: 1.75rem;
  position: relative;
  margin-bottom: .85rem;
}
.tw-wrap .tw-duo-box--tw .tw-duo-liste li { color: #1a1a1a; }
.tw-wrap .tw-duo-box--pp .tw-duo-liste li { color: rgba(255,255,255,.92); }
.tw-wrap .tw-duo-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
}
.tw-wrap .tw-duo-box--tw .tw-duo-liste li::before { background: #000; }
.tw-wrap .tw-duo-box--pp .tw-duo-liste li::before { background: var(--ci); }

@media (min-width: 900px) {
  /* Versatz und Deckkraft kommen pro Frame aus main.js */
  .tw-wrap .tw-duo-box,
  .tw-wrap .tw-duo-ergebnis { opacity: 0; }
  /* das Band darf beim Hereinfahren nicht ueber den Rand hinausragen */
  .tw-wrap .tw-koop { overflow: hidden; }
}

/* Ergebnis-Band: vollflaechig, ohne Spaltenbegrenzung, faehrt beim
   Scrollen von unten herein (Steuerung in main.js). */
.tw-wrap .tw-duo-ergebnis {
  margin: 0;
  padding: clamp(1.75rem, 3.5vw, 3rem) max(1.5rem, calc((100vw - var(--spalte)) / 2));
  background: var(--ci);
  color: #fff;
  text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   6 — Bausteine: Grundpakete und Serviceleistungen als Karten
   -------------------------------------------------------------------------- */
.tw-wrap .tw-karten {
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2rem);
}
@media (min-width: 760px) {
  .tw-wrap .tw-karten--3 { grid-template-columns: repeat(3, 1fr); }
  .tw-wrap .tw-karten--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 620px) and (max-width: 759px) {
  .tw-wrap .tw-karten--3 { grid-template-columns: repeat(2, 1fr); }
}
.tw-wrap .tw-karte {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-gr);
  background: var(--grund);
  border: 1px solid var(--linie);
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
  transition: border-color .2s ease, transform .2s ease;
}
.tw-wrap button.tw-karte { cursor: pointer; }
.tw-wrap button.tw-karte:hover { border-color: var(--ci); }
.tw-wrap .tw-sektion--tief .tw-karte {
  background: var(--tw-tief-2);
  border-color: var(--linie-dunkel);
}
.tw-wrap .tw-karte-schild {
  /* flex:none — sonst staucht ein längerer Kartentext den Bildbereich,
     und die Bilder stehen nicht mehr auf einer Linie */
  flex: none;
  aspect-ratio: 16 / 10;
  background: var(--ruhe);
  display: grid;
  place-items: center;
  padding: 1.75rem;
  border-bottom: 1px solid var(--linie);
}
.tw-wrap .tw-sektion--tief .tw-karte-schild {
  background: var(--tw-tief-3);
  border-bottom-color: var(--linie-dunkel);
}
.tw-wrap .tw-karte-schild img { width: 100%; height: 100%; object-fit: cover; }
.tw-wrap .tw-karte-koerper {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}
/* --------------------------------------------------------------------------
   Grundpakete — Aufbau aus der Vorfassung übernommen: ohne Bild, Häkchenliste,
   die empfohlene Stufe mit rotem Rand und überlappendem Schild.
   -------------------------------------------------------------------------- */
.tw-wrap .tw-paket-raster {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.5rem);
  align-items: stretch;
}
@media (min-width: 860px) {
  .tw-wrap .tw-paket-raster { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 600px) and (max-width: 859px) {
  .tw-wrap .tw-paket-raster { grid-template-columns: repeat(2, 1fr); }
}
.tw-wrap .tw-paket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.6vw, 2.15rem) clamp(1.4rem, 2vw, 1.75rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
  background: var(--grund);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tw-wrap .tw-paket:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(20, 23, 28, .18);
}

/* --- Mouseover: eine schraege Flaeche laeuft von unten in die Karte.
   Die Schraege ist das Leitmotiv der Seite (Bilder, Kooperationsboxen,
   Zeitleiste), deshalb hier dieselbe Geste statt eines simplen Farbwechsels. */
.tw-wrap .tw-paket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ci);
  /* muss die Rundung der Karte uebernehmen, sonst stehen die scharfen
     Ecken der Flaeche ueber den abgerundeten Kartenecken */
  border-radius: inherit;
  /* geschlossen: die Flaeche liegt als Linie unter der Karte */
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path .5s cubic-bezier(.22,.61,.36,1);
}
.tw-wrap .tw-paket:hover::before,
.tw-wrap .tw-paket:focus-visible::before {
  /* offen: Oberkante nur leicht schraeg. Steiler geschnitten liefe die
     Kante mitten durch die Ueberschrift und die stuende halb auf Weiss. */
  clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
}
.tw-wrap .tw-paket--top::before { background: var(--ci-dark); }

/* Der Inhalt liegt ueber der Flaeche und dreht beim Hover die Farben um */
.tw-wrap .tw-paket > * { position: relative; z-index: 1; }
.tw-wrap .tw-paket h3,
.tw-wrap .tw-paket .tw-paket-wer,
.tw-wrap .tw-paket .tw-paket-liste li,
.tw-wrap .tw-paket .tw-paket-fuss,
.tw-wrap .tw-paket .tw-paket-cta {
  transition: color .3s ease .1s, background-color .3s ease .1s, border-color .3s ease .1s;
}
.tw-wrap .tw-paket:hover h3 { color: #fff; }
.tw-wrap .tw-paket:hover .tw-paket-wer { color: rgba(255,255,255,.85); }
.tw-wrap .tw-paket:hover .tw-paket-liste li { color: rgba(255,255,255,.95); }
.tw-wrap .tw-paket:hover .tw-paket-liste li::before { color: #fff; }
.tw-wrap .tw-paket:hover .tw-paket-fuss {
  color: rgba(255,255,255,.8);
  border-top-color: rgba(255,255,255,.3);
}
.tw-wrap .tw-paket:hover .tw-paket-cta {
  background: #fff;
  border-color: #fff;
  color: var(--ci);
}
.tw-wrap .tw-paket--top:hover .tw-paket-cta { color: var(--ci-dark); }
/* das Empfohlen-Schild bleibt lesbar, wenn die Flaeche darunter rot wird */
.tw-wrap .tw-paket--top:hover .tw-paket-schild {
  background: #fff;
  color: var(--ci-dark);
}

@media (prefers-reduced-motion: reduce) {
  .tw-wrap .tw-paket::before { transition: none; }
  .tw-wrap .tw-paket:hover { transform: none; }
}
.tw-wrap .tw-paket:focus-visible {
  outline: none;
  border-color: var(--ci);
  box-shadow: 0 0 0 3px rgba(var(--ci-rgb), .25);
}
/* Die empfohlene Stufe */
.tw-wrap .tw-paket--top { border: 2px solid var(--ci); }
.tw-wrap .tw-paket--top:hover { box-shadow: 0 20px 42px rgba(var(--ci-rgb), .2); }
.tw-wrap .tw-paket-schild {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem .9rem;
  border-radius: 20px;
  background: var(--ci);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tw-wrap .tw-paket h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: .35rem;
}
.tw-wrap .tw-paket-wer {
  color: var(--ci);
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 1.15rem;
}
.tw-wrap .tw-paket-liste {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 1.5rem;
  /* füllt den Rest — dadurch stehen Fußnote und Knopf über alle Karten
     hinweg auf einer Linie, ohne feste Höhen */
  flex: 1;
}
.tw-wrap .tw-paket-liste li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .96rem;
  color: var(--text-2);
}
.tw-wrap .tw-paket-liste li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--ci);
  font-weight: 800;
}
.tw-wrap .tw-paket-fuss {
  font-size: .84rem;
  color: #8a9096;
  border-top: 1px solid var(--linie);
  padding-top: 1rem;
}
.tw-wrap .tw-paket-cta {
  display: block;
  width: 100%;
  margin-top: 1.15rem;
  padding: .82rem;
  border: 1.5px solid var(--ci);
  border-radius: 9px;
  background: var(--grund);
  color: var(--ci);
  font-weight: 700;
  font-size: .98rem;
  text-align: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tw-wrap .tw-paket--top .tw-paket-cta { background: var(--ci); color: #fff; }
.tw-wrap .tw-paket--top:hover .tw-paket-cta {
  background: var(--ci-dark);
  border-color: var(--ci-dark);
}
.tw-wrap .tw-karte-koerper > .tw-knopf { align-self: flex-start; }
/* Fußnote und Knopf werden gemeinsam nach unten geschoben, damit sie über
   alle Karten hinweg auf einer Linie stehen */
.tw-wrap .tw-karte-fuss { margin-top: auto; }
.tw-wrap .tw-karte-liste li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
  color: var(--text-2);
  font-size: 1rem;
}
.tw-wrap .tw-sektion--tief .tw-karte-liste li { color: var(--text-hell-2); }
.tw-wrap .tw-karte-liste li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--ci);
}
.tw-wrap .tw-schild {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--ci);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: .6rem;
}
.tw-wrap .tw-karte-fuss {
  font-size: .9375rem;
  color: var(--text-2);
  padding-top: .25rem;
  border-top: 1px solid var(--linie);
}
.tw-wrap .tw-sektion--tief .tw-karte-fuss {
  color: var(--text-hell-2);
  border-top-color: var(--linie-dunkel);
}
.tw-wrap .tw-hinweis {
  margin-top: var(--takt-halb);
  font-size: .9375rem;
  color: var(--text-2);
}
.tw-wrap .tw-sektion--tief .tw-hinweis { color: var(--text-hell-2); }

/* --------------------------------------------------------------------------
   7 — Galerie
   -------------------------------------------------------------------------- */
.tw-wrap .tw-galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
@media (min-width: 760px) {
  .tw-wrap .tw-galerie { grid-template-columns: repeat(3, 1fr); }
}
.tw-wrap .tw-galerie-kachel {
  border: 0;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tw-tief-2);
  aspect-ratio: 4 / 3;
  cursor: pointer;
}
.tw-wrap .tw-galerie-kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.tw-wrap .tw-galerie-kachel:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   Bewertungs-Kachel — echte Google-Bewertungen von Trautwein
   -------------------------------------------------------------------------- */
.tw-wrap .tw-bewertung {
  margin-top: 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 1.15rem .7rem 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--linie-dunkel);
  margin-bottom: 1.1rem;
}
.tw-wrap .tw-bewertung-wert {
  color: var(--tw-gelb);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.tw-wrap .tw-bewertung-sterne {
  display: block;
  color: var(--tw-gelb);
  font-size: 1rem;
  letter-spacing: .12em;
  line-height: 1.2;
}
.tw-wrap .tw-bewertung-text {
  font-size: .875rem;
  color: var(--text-hell-2);
  line-height: 1.4;
}
.tw-wrap .tw-bewertung-text b { color: var(--text-hell); font-weight: 600; }

/* --------------------------------------------------------------------------
   Leistungsliste — bewusst ohne Kästen: Icon, Titel, Satz, feine Trennlinie
   -------------------------------------------------------------------------- */
.tw-wrap .tw-leistungen {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 4rem);
  border-top: 1px solid var(--linie);
}
@media (min-width: 760px) {
  .tw-wrap .tw-leistungen { grid-template-columns: 1fr 1fr; }
}
.tw-wrap .tw-leistung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linie);
}
.tw-wrap .tw-sektion--tief .tw-leistungen,
.tw-wrap .tw-sektion--tief .tw-leistung { border-color: var(--linie-dunkel); }
.tw-wrap .tw-leistung .tw-ic {
  width: 2rem;
  height: 2rem;
  grid-row: 1 / span 2;
  margin-top: .1rem;
}
.tw-wrap .tw-leistung h3 { margin-bottom: .35rem; }
.tw-wrap .tw-leistung p { color: var(--text-2); font-size: 1rem; }
.tw-wrap .tw-sektion--tief .tw-leistung p { color: var(--text-hell-2); }

/* --------------------------------------------------------------------------
   8 — Zahlen
   -------------------------------------------------------------------------- */
.tw-wrap .tw-zahlen {
  display: grid;
  gap: 1.25rem clamp(1.5rem, 2.5vw, 2.25rem);
}
@media (min-width: 560px) { .tw-wrap .tw-zahlen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tw-wrap .tw-zahlen { grid-template-columns: repeat(4, 1fr); } }
.tw-wrap .tw-zahl {
  padding-top: 1rem;
  border-top: 1px solid var(--linie-dunkel);
}
.tw-wrap .tw-zahl-wert {
  display: block;
  white-space: nowrap;
  /* Trautwein-Gelb: es ist deren Hausfarbe und diese Sektion gehoert ihnen */
  color: var(--tw-gelb);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: .35rem;
}
.tw-wrap .tw-zahl-text {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-hell-2);
}

/* Der Kopf der Service-Sektion steht dichter am Akkordeon */
.tw-wrap #management .tw-kopf { margin-bottom: 1.25rem; }

/* Diese Sektion traegt wenig Inhalt und darf enger stehen als der Grundtakt */
.tw-wrap .tw-sektion--eng { padding-block: clamp(2.25rem, 3.5vw, 3.5rem); }
.tw-wrap .tw-sektion--eng .tw-kopf { margin-bottom: 1.75rem; }

/* --------------------------------------------------------------------------
   9 — Band / Kontakt / FAQ
   -------------------------------------------------------------------------- */
.tw-wrap .tw-band {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) { .tw-wrap .tw-band { grid-template-columns: 1.1fr .9fr; } }

.tw-wrap .tw-kontakt-raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) { .tw-wrap .tw-kontakt-raster { grid-template-columns: 1fr 1fr; } }
.tw-wrap .tw-kontakt-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linie-dunkel);
  font-size: 1.0625rem;
}
.tw-wrap .tw-kontakt-zeile dt { color: var(--text-hell-2); min-width: 11rem; }
.tw-wrap .tw-kontakt-zeile dd { margin: 0; font-weight: 600; }

.tw-wrap .tw-faq-eintrag {
  border-bottom: 1px solid var(--linie);
}
.tw-wrap .tw-faq-frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.015em;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.tw-wrap .tw-faq-zeichen {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}
.tw-wrap .tw-faq-zeichen::before,
.tw-wrap .tw-faq-zeichen::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--ci);
  transition: transform .22s ease;
}
.tw-wrap .tw-faq-zeichen::after { transform: rotate(90deg); }
.tw-wrap .tw-faq-frage[aria-expanded="true"] .tw-faq-zeichen::after { transform: rotate(0deg); }
.tw-wrap .tw-faq-antwort {
  display: none;
  padding-bottom: 1.75rem;
  max-width: 62ch;
  color: var(--text-2);
}
.tw-wrap .tw-faq-eintrag.tw-offen .tw-faq-antwort { display: block; }

/* --------------------------------------------------------------------------
   10 — Formular im Dialog
   -------------------------------------------------------------------------- */
.tw-wrap .tw-dialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 19, 25, .72);
}
.tw-wrap .tw-dialog.tw-offen { display: flex; }
.tw-wrap .tw-dialog-blatt {
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  /* Der eigene Scrollbalken zieht Breite ab, die Kinder rechnen aber mit der
     vollen Breite — sonst entsteht ein zweiter Balken quer. clip statt hidden. */
  overflow-x: clip;
  scrollbar-gutter: stable;
  background: var(--grund);
  border-radius: var(--radius-gr);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.tw-wrap .tw-dialog-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
/* Ohne min-width:0 schrumpft der Titelblock nicht unter die Breite seines
   längsten Wortes — auf schmalen Geräten schiebt das den Schließen-Knopf raus.
   Silbentrennung statt harter Wortbruch: deutsche Komposita sonst mittendrin
   zerschnitten ("Grundausstatt|ung"). Greift über lang="de" am html-Element. */
.tw-wrap .tw-dialog-kopf > div {
  min-width: 0;
  hyphens: auto;
}
.tw-wrap .tw-dialog-kopf h2 { font-size: 1.25rem; }
.tw-wrap .tw-dialog-zu {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-2);
  cursor: pointer;
}
.tw-wrap .tw-feld { margin-bottom: 1.25rem; }
.tw-wrap .tw-feld label {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  margin-bottom: .45rem;
}
.tw-wrap .tw-feld input,
.tw-wrap .tw-feld select,
.tw-wrap .tw-feld textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--grund);
}
.tw-wrap .tw-feld input:focus-visible,
.tw-wrap .tw-feld select:focus-visible,
.tw-wrap .tw-feld textarea:focus-visible {
  outline: 2px solid var(--ci);
  outline-offset: 1px;
}
.tw-wrap .tw-feld textarea { min-height: 6.5rem; resize: vertical; }
.tw-wrap .tw-feld-paar { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .tw-wrap .tw-feld-paar { grid-template-columns: 1fr 1fr; } }
.tw-wrap .tw-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tw-wrap .tw-chip {
  padding: .5rem 1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
}
.tw-wrap .tw-chip[aria-pressed="true"] {
  background: var(--ci);
  border-color: var(--ci);
  color: #fff;
}
.tw-wrap .tw-schritt { display: none; }
.tw-wrap .tw-schritt.tw-aktiv { display: block; }
.tw-wrap .tw-dialog-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.tw-wrap .tw-meldung {
  display: none;
  padding: 1.25rem;
  border-radius: 10px;
  font-size: 1rem;
}
.tw-wrap .tw-meldung.tw-sichtbar { display: block; }
.tw-wrap .tw-meldung--ok { background: #eef7ec; color: #24571b; }
.tw-wrap .tw-meldung--fehler { background: #fdeceE; color: #8c0716; }

/* --------------------------------------------------------------------------
   11 — Lichtkasten
   -------------------------------------------------------------------------- */
.tw-wrap .tw-lichtkasten {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 19, 25, .94);
}
.tw-wrap .tw-lichtkasten.tw-offen { display: flex; }
.tw-wrap .tw-lichtkasten img {
  /* Die Trautwein-Fotos sind hochformatig — bei begrenzter Höhe bleibt das
     Bild sonst schmal. Deshalb wird die Höhe so weit wie möglich ausgereizt. */
  width: auto;
  height: auto;
  max-width: min(1400px, calc(100vw - 8rem));
  max-height: calc(100svh - 5.5rem);
  border-radius: var(--radius);
  object-fit: contain;
}
.tw-wrap .tw-lk-knopf {
  position: absolute;
  background: none;
  border: 1px solid var(--linie-dunkel);
  color: #fff;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.tw-wrap .tw-lk-zu { top: .75rem; right: .75rem; }
.tw-wrap .tw-lk-vor { left: .75rem; top: 50%; }
.tw-wrap .tw-lk-zurueck { right: .75rem; top: 50%; }
.tw-wrap .tw-lk-text {
  position: absolute;
  bottom: .9rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-hell-2);
  font-size: .9375rem;
  text-align: center;
  width: min(46rem, 90%);
}

/* --------------------------------------------------------------------------
   12 — Dauer-CTA auf schmalen Geräten
   -------------------------------------------------------------------------- */
.tw-wrap .tw-mobil-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: none;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(15, 19, 25, .96);
  border-top: 1px solid var(--linie-dunkel);
}
.tw-wrap .tw-mobil-cta .tw-knopf {
  width: 100%;
  justify-content: center;
}
@media (max-width: 899px) {
  .tw-wrap .tw-mobil-cta {
    display: block;
    transition: transform .22s ease, opacity .22s ease;
  }
  /* solange der Hero-Knopf sichtbar ist, bleibt das Band unten weg */
  .tw-wrap .tw-mobil-cta.tw-versteckt {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }
  .tw-wrap .tw-abschluss { padding-bottom: 6rem; }
}

/* --------------------------------------------------------------------------
   Rücksicht auf reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tw-wrap * {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
  .tw-wrap .tw-galerie-kachel:hover img { transform: none; }
}


/* --------------------------------------------------------------------------
   Seitliches Akkordeon — Aufbau von der Veredelungsseite übernommen:
   der Scrollfortschritt steuert flex-grow und die Variable --offen, die
   Reiter und Inhalt gegeneinander überblendet.
   -------------------------------------------------------------------------- */
.tw-wrap .tw-hacc-bahn { position: relative; height: 165vh; }
.tw-wrap .tw-hacc-buehne {
  position: sticky;
  /* etwas Luft unter dem Menueband, sonst stoesst das Akkordeon direkt an */
  top: calc(var(--band) + 1.75rem);
  /* Buehne knapper als der volle Bildschirm: bei 100svh stand ueber und
     unter dem Akkordeon je rund 200 px Leerraum, der als Loch zwischen
     Fliesstext und Inhalt wirkte. */
  min-height: min(calc(82svh - var(--band) - 1.75rem), 660px);
  display: flex;
  align-items: center;
}
.tw-wrap .tw-hacc {
  display: flex;
  gap: 12px;
  width: var(--spalte);
  height: min(540px, calc(82svh - 70px));
  margin-inline: auto;
}
.tw-wrap .tw-hacc-feld {
  position: relative;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 66px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--grund);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  will-change: flex-grow;
}
/* geschlossen: Ziffer und hochkant stehender Titel */
.tw-wrap .tw-hacc-reiter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 26px;
  gap: 22px;
  opacity: clamp(0, calc(1 - var(--offen, 0) * 1.8), 1);
  transition: opacity .15s linear;
}
.tw-wrap .tw-hacc-reiter .tw-hacc-nr { font-size: 1.35rem; font-weight: 700; color: var(--ci); line-height: 1; }
.tw-wrap .tw-hacc-reiter .tw-hacc-titel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--text);
}
/* geöffnet: Icon, Ziffer, Überschrift, Text */
.tw-wrap .tw-hacc-inhalt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(720px, 84vw);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: clamp(0, calc((var(--offen, 0) - .5) * 3), 1);
  transition: opacity .15s linear;
}
.tw-wrap .tw-hacc-inhalt .tw-ic { width: 3.25rem; height: 3.25rem; margin-bottom: 1.1rem; }
.tw-wrap .tw-hacc-inhalt .tw-hacc-nr {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--ci);
  line-height: 1;
  margin-bottom: .55rem;
}
.tw-wrap .tw-hacc-inhalt h3 {
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.06;
  margin-bottom: .9rem;
  max-width: 16ch;
}
.tw-wrap .tw-hacc-inhalt p {
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  color: var(--text-2);
  line-height: 1.5;
  max-width: 38ch;
}
/* die grosse blasse Ziffer im Hintergrund */
.tw-wrap .tw-hacc-schatten {
  position: absolute;
  right: clamp(1.25rem, 3.5vw, 3.4rem);
  bottom: clamp(-1.1rem, -1vw, -.15rem);
  font-size: clamp(150px, 22vw, 300px);
  font-weight: 700;
  line-height: .72;
  color: rgba(20, 23, 28, .045);
  pointer-events: none;
  user-select: none;
}

/* Auf schmalen Geräten gestapelt statt seitlich */
@media (max-width: 899px) {
  .tw-wrap .tw-hacc-bahn { height: auto; }
  .tw-wrap .tw-hacc-buehne { position: static; min-height: 0; display: block; }
  .tw-wrap .tw-hacc {
    flex-direction: column;
    width: auto;
    height: auto;
    gap: 14px;
  }
  .tw-wrap .tw-hacc-feld { flex: none; min-width: 0; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
  .tw-wrap .tw-hacc-reiter { display: none; }
  .tw-wrap .tw-hacc-inhalt {
    position: static;
    opacity: 1;
    width: auto;
    padding: 1.6rem 1.4rem;
  }
  .tw-wrap .tw-hacc-inhalt h3 { font-size: 1.35rem; max-width: none; }
  .tw-wrap .tw-hacc-schatten { display: none; }
}


/* --------------------------------------------------------------------------
   Flotten-Band mit Hintergrundbild, Text linksbuendig darauf
   -------------------------------------------------------------------------- */
.tw-wrap .tw-flotte {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(60svh, 520px);
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--tw-tief);
  color: var(--text-hell);
  overflow: hidden;
}
.tw-wrap .tw-flotte-grund { position: absolute; inset: 0; z-index: -2; }
.tw-wrap .tw-flotte-grund img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
/* von links abgedunkelt, damit der Text steht und die Fahrzeuge rechts frei bleiben */
.tw-wrap .tw-flotte-grund::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(15,19,25,.92) 0%, rgba(15,19,25,.80) 34%, rgba(15,19,25,.35) 62%, rgba(15,19,25,.20) 100%);
}
.tw-wrap .tw-flotte-inhalt { max-width: 34rem; }
.tw-wrap .tw-flotte-inhalt .tw-lead { color: var(--text-hell-2); margin-top: 1rem; }
@media (max-width: 899px) {
  .tw-wrap .tw-flotte-grund::after {
    background: linear-gradient(180deg, rgba(15,19,25,.88), rgba(15,19,25,.78));
  }
  .tw-wrap .tw-flotte-inhalt { max-width: none; }
}


/* --------------------------------------------------------------------------
   Grundpakete auf dunklem Grund: die Karten bleiben hell und stehen dadurch
   klar als Auswahl im Raum. Der rote Hover-Effekt wirkt darauf unveraendert.
   -------------------------------------------------------------------------- */
.tw-wrap #pakete .tw-hinweis { color: var(--text-hell-2); }
.tw-wrap #pakete .tw-paket {
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.tw-wrap #pakete .tw-paket:hover {
  box-shadow: 0 24px 52px rgba(0, 0, 0, .5);
}
/* die empfohlene Stufe behaelt ihren roten Rand als Auszeichnung */
.tw-wrap #pakete .tw-paket--top { border-color: var(--ci); }

/* Die Karten bleiben hell, ihre Schrift darf deshalb nicht die weisse
   Textfarbe der dunklen Sektion erben - sonst steht Weiss auf Weiss. */
.tw-wrap #pakete .tw-paket { color: var(--text); }
.tw-wrap #pakete .tw-paket h3 { color: var(--text); }
.tw-wrap #pakete .tw-paket .tw-paket-liste li { color: var(--text-2); }
.tw-wrap #pakete .tw-paket .tw-paket-fuss { color: #8a9096; }
/* im Hover-Zustand gelten wieder die hellen Farben auf rotem Grund */
.tw-wrap #pakete .tw-paket:hover h3 { color: #fff; }
.tw-wrap #pakete .tw-paket:hover .tw-paket-liste li { color: rgba(255,255,255,.95); }
.tw-wrap #pakete .tw-paket:hover .tw-paket-fuss { color: rgba(255,255,255,.8); }


/* --------------------------------------------------------------------------
   Optionaler Service auf dunklem Grund
   -------------------------------------------------------------------------- */
/* Der schwarze Schlagschatten der Akkordeon-Felder ist auf dunklem Grund
   unsichtbar. Stattdessen ein farbiger Schein plus feine helle Kante, damit
   die Felder wieder Tiefe bekommen. */
.tw-wrap #management .tw-hacc-feld {
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 18px 50px rgba(var(--ci-rgb), .28),
    0 2px 10px rgba(0, 0, 0, .5);
}
/* das geoeffnete Feld leuchtet staerker, damit die Auswahl ablesbar bleibt */
.tw-wrap #management .tw-hacc-feld:has(.tw-hacc-inhalt) {
  transition: box-shadow .3s ease;
}
.tw-wrap #management .tw-hacc-reiter .tw-hacc-titel { color: var(--text); }
.tw-wrap #management .tw-hinweis { color: var(--text-hell-2); }


/* --------------------------------------------------------------------------
   Ausbau-Beispiele auf dunklem Grund
   -------------------------------------------------------------------------- */
.tw-wrap #ausbauten .tw-hinweis { color: var(--text-hell-2); }
/* feine helle Kante, damit die Bilder nicht randlos im Schwarz versinken */
.tw-wrap #ausbauten .tw-galerie-kachel {
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.tw-wrap #ausbauten .tw-galerie-kachel:hover {
  border-color: rgba(var(--ci-rgb), .8);
  box-shadow: 0 16px 40px rgba(var(--ci-rgb), .3);
}


/* --------------------------------------------------------------------------
   FAQ auf dunklem Grund
   -------------------------------------------------------------------------- */
.tw-wrap #faq .tw-faq-eintrag { border-bottom-color: var(--linie-dunkel); }
.tw-wrap #faq .tw-faq-frage { color: var(--text-hell); }
.tw-wrap #faq .tw-faq-frage:hover { color: #fff; }
.tw-wrap #faq .tw-faq-antwort { color: var(--text-hell-2); }


/* --------------------------------------------------------------------------
   Erfahrungs-Band: zwei Gruendungsjahre, eine gemeinsame Summe.
   Traegt die Kooperationsidee in Zahlen: zwei Haeuser, ein Fahrzeug.
   -------------------------------------------------------------------------- */
.tw-wrap .tw-erfahrung {
  background: var(--tw-tief-2);
  color: var(--text-hell);
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  border-block: 1px solid var(--linie-dunkel);
}
.tw-wrap .tw-erfahrung-raster {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  text-align: center;
}
@media (min-width: 860px) {
  .tw-wrap .tw-erfahrung-raster { grid-template-columns: 1fr auto 1fr; }
  .tw-wrap .tw-erfahrung-haus--tw { text-align: right; }
  .tw-wrap .tw-erfahrung-haus--pp { text-align: left; }
}
.tw-wrap .tw-erfahrung-jahr {
  display: block;
  font-size: clamp(2.25rem, 4.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.tw-wrap .tw-erfahrung-haus--tw .tw-erfahrung-jahr { color: var(--tw-gelb); }
.tw-wrap .tw-erfahrung-haus--pp .tw-erfahrung-jahr { color: var(--ci); }
.tw-wrap .tw-erfahrung-wer {
  display: block;
  margin-top: .5rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tw-wrap .tw-erfahrung-dauer {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
  color: var(--text-hell-2);
}

.tw-wrap .tw-erfahrung-summe {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--radius-gr);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--linie-dunkel);
  max-width: 30rem;
  margin-inline: auto;
}
.tw-wrap .tw-erfahrung-plus {
  position: absolute;
  top: -.9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ci);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.tw-wrap .tw-erfahrung-zahl {
  display: block;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: .6rem;
}
.tw-wrap .tw-erfahrung-text {
  display: block;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text-hell-2);
}


/* --------------------------------------------------------------------------
   Kontaktbereich mit eingebettetem Formular
   -------------------------------------------------------------------------- */
.tw-wrap .tw-kontakt { padding-top: calc(var(--takt) * 1.6); }
.tw-wrap .tw-kontakt-daten { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.tw-wrap .tw-formular-karte {
  background: var(--grund);
  color: var(--text);
  border-radius: var(--radius-gr);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
}
.tw-wrap .tw-formular-karte h3 { color: var(--text); margin-bottom: .35rem; }
.tw-wrap .tw-formular-hinweis {
  font-size: .8125rem;
  color: var(--text-2);
  margin-bottom: 1.35rem;
}
.tw-wrap .tw-formular-karte .tw-knopf { width: 100%; justify-content: center; margin-top: .5rem; }
.tw-wrap .tw-formular-karte .tw-meldung { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Zweistufiges Formular
   Erst das Fahrzeug, dann die Kontaktdaten. In einem Zug war das Formular
   hoeher als der Bildschirm, sobald das System seine Sicherheitsfrage
   ergaenzt — der Absenden-Knopf lag dann unter der Kante.
   -------------------------------------------------------------------------- */
.tw-wrap .tw-schritte {
  display: flex;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
}
.tw-wrap .tw-schritt {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  padding-top: .6rem;
  border-top: 2px solid var(--linie);
  transition: color .2s, border-color .2s;
}
.tw-wrap .tw-schritt span {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--linie);
  color: var(--text-2);
  font-size: .75rem;
}
.tw-wrap .tw-schritt--hier { color: var(--ci); border-top-color: var(--ci); }
.tw-wrap .tw-schritt--hier span { background: var(--ci); color: #fff; }
.tw-wrap .tw-schritt--fertig { color: var(--text); border-top-color: var(--ci); }

.tw-wrap .tw-stufe { display: none; }
.tw-wrap .tw-stufe--hier { display: block; }
/* beim Stufenwechsel wird die Karte angesteuert - sie muss dabei unter dem
   Menueband bleiben */
.tw-wrap .tw-formular-karte { scroll-margin-top: calc(var(--band) + 1rem); }
@media (min-width: 600px) {
  .tw-wrap .tw-stufe-fuss { display: flex; gap: .75rem; align-items: center; }
  /* der Zurueck-Knopf bleibt schmal, senden traegt die Breite */
  .tw-wrap .tw-stufe-fuss .tw-knopf--linie { width: auto; flex: 0 0 auto; }
}

@media (min-width: 900px) {
  .tw-wrap .tw-kontakt .tw-kontakt-raster {
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}


/* Verweise auf Partner und Shop: sichtbar, aber ohne den Lesefluss zu stoeren */
.tw-wrap .tw-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(var(--ci-rgb), .55);
  text-underline-offset: .18em;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.tw-wrap .tw-link:hover { text-decoration-color: var(--ci); }
.tw-wrap .tw-sektion--tief .tw-link:hover { color: #fff; }


/* Kennzeichnung KI-erzeugter Abbildungen (EU-KI-VO Art. 50) */
.tw-wrap .tw-ki-hinweis {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie-dunkel);
  font-size: .8125rem;
  line-height: 1.5;
  max-width: 70ch;
}
.tw-wrap .tw-ki-hinweis strong { color: var(--text-hell); }