/* ==========================================================================
   GROWIT — WOHNUNGSGENOSSENSCHAFTEN, ZWEITE FASSUNG
   --------------------------------------------------------------------------
   Warum es diese Datei gibt.

   Die Seite lief auf drei verschiedenen Inhaltsbreiten gleichzeitig: 1200 px
   für die meisten Abschnitte, 1186 px für die Raster darin, 860 px an einer
   Stelle — und die Abschnittsköpfe waren zusätzlich auf 820 px gedeckelt.
   Vier Maße auf einer Seite liest niemand als Gestaltung, sondern als
   Unruhe. Genau das war gemeint mit „unsymmetrisch" und „in die Mitte
   gequetscht".

   Ab hier gilt: EIN Maß für Inhalt (--shell), EIN breiteres Maß für Bilder,
   Videos und Grafiken (.wg-rand). Mehr nicht. Fließtext behält davon
   unabhängig seine Lesebreite, denn eine Zeile mit 140 Zeichen ist keine
   Ausnutzung des Bildschirms, sondern eine Zumutung.

   Diese Datei wird NACH grund.css geladen. Sie fasst bewusst keinen
   Hintergrund an — der gehört weiterhin grund.css allein.
   Alles ist auf .wg gescoped und kann keine andere Seite erreichen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Die Maße
   -------------------------------------------------------------------------- */
.wg {
  /* Inhalt darf deutlich breiter laufen als die alten 1200 px */
  --shell: 1440px;
  /* Bilder, Videos und Grafiken gehen darüber hinaus bis fast an den Rand */
  --wg-rand: 1760px;
  /* Lesebreite für Fließtext — unabhängig von der Seitenbreite */
  --wg-lese: 68ch;

  --wg-tinte: #1B0A66;
  --wg-blau: #5271FF;
  --wg-eis: #0FB9CE;
}

/* Auf sehr breiten Monitoren darf beides mitwachsen. adapt.css setzt hier
   :root — dieselbe Spezifität, aber diese Datei lädt später. */
@media (min-width: 1660px) { .wg { --shell: 1500px; } }
@media (min-width: 2100px) { .wg { --shell: 1600px; --wg-rand: 1900px; } }

/* Der breite Behälter. Bewusst OHNE 100vw: mit sichtbarer Scrollleiste ist
   100vw breiter als der Inhaltsbereich, und dann steht alles um die halbe
   Leistenbreite verschoben. Ein Maximum plus mitwachsender Rand erreicht
   optisch dasselbe und kann nicht verrutschen. */
.wg .wg-rand {
  width: min(100% - var(--gutter) * 2, var(--wg-rand));
  margin-inline: auto;
}

/* Abschnittsköpfe: ein Maß für alle. Vorher 820 px hart, während die Raster
   darunter 1186 px breit waren — daher der eingeschnürte Eindruck. */
.wg .ldx-head {
  max-width: none;
  margin-inline: auto;
  margin-bottom: clamp(32px, 4.4vw, 60px);
  text-align: center;
}
.wg .ldx-head h2 {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
}
.wg .ldx-head p {
  max-width: var(--wg-lese);
  margin-inline: auto;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.7;
}
.wg .ldx-head .eyebrow { justify-content: center; }

/* Abschnitte bekommen mehr Luft — der Rhythmus war eng für diese Breite. */
.wg .lsec { padding-block: clamp(84px, 12vh, 152px); }
/* overflow:clip aus leistungen.css würde angeheftete Elemente abschneiden. */
.wg .lsec--offen { overflow: visible; }


/* --------------------------------------------------------------------------
   2 · Bewegung beim Scrollen
   Grundsatz: es wird ausschließlich transform und opacity bewegt. Alles
   andere (top, height, width) zwingt den Browser bei jedem Bild zu einem
   neuen Layout und ruckelt auf dem Telefon.
   -------------------------------------------------------------------------- */

/* Richtungs-Reveals, feiner gestuft als der Standard */
.wg .rv { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.wg .rv--auf { transform: translate3d(0, 42px, 0); }
.wg .rv--links { transform: translate3d(-46px, 0, 0); }
.wg .rv--rechts { transform: translate3d(46px, 0, 0); }
.wg .rv--zoom { transform: scale(.94); }
.wg .rv.in { opacity: 1; transform: none; }

/* Staffelung über eine Zählvariable, die im HTML gesetzt wird */
.wg [style*="--i"].rv { transition-delay: calc(var(--i) * .09s); }

/* Parallaxe: die Verschiebung setzt das Skript als --par (in Pixeln). */
.wg .par { will-change: transform; }
.wg .par > img,
.wg .par > .wg-par__bild {
  transform: translate3d(0, var(--par, 0px), 0) scale(1.14);
  transform-origin: center;
}

/* Eine Linie, die sich beim Scrollen füllt — die Fortschrittsanzeige des
   Abschnitts. --f kommt vom Skript und läuft von 0 bis 1. */
.wg .wg-linie {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgba(40, 15, 145, .1);
  overflow: hidden;
}
.wg .wg-linie::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--wg-blau);
  transform: scaleX(var(--f, 0));
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .wg .rv { opacity: 1; transform: none; transition: none; }
  .wg .par > img,
  .wg .par > .wg-par__bild { transform: none; }
}


/* ==========================================================================
   3 · DER FALL THALE — Vorher/Nachher, Probleme, Videos in EINEM Abschnitt

   Bisher standen die Verwandlung des Blocks und die Instagram-Beiträge in
   zwei Abschnitten mit vier anderen dazwischen. Inhaltlich sind sie aber
   ein einziges Erzeugnis: dieselbe Modernisierung, einmal als Bild und
   einmal als Bewegtbild, ausgespielt auf zwei Bühnen — Social Media und
   Projektseite. Also stehen sie jetzt zusammen und werden auch so erzählt.
   ========================================================================== */

.wg-fall { position: relative; }

/* --- Kopfzeile des Falls: Ort, Objekt, Leistung ------------------------- */
.wg-fall__akte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px clamp(18px, 2.4vw, 34px);
  margin-bottom: clamp(26px, 3.4vw, 40px);
}
.wg-fall__akte div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.wg-fall__akte dt,
.wg-fall__akte b {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wg-blau);
}
.wg-fall__akte span {
  font-size: .98rem;
  font-weight: 600;
  color: var(--navy);
}
.wg-fall__akte i {
  width: 1px;
  height: 30px;
  background: rgba(40, 15, 145, .14);
}
@media (max-width: 700px) {
  .wg-fall__akte i { display: none; }
  .wg-fall__akte { gap: 16px 24px; }
}

/* --- Die Bühne: gefasst statt randlos — ein Bild, kein Panorama --------- */
.wg-fall__buehne {
  margin-top: clamp(30px, 4vw, 52px);
  max-width: 1240px;
  margin-inline: auto;
}
.wg .wg-fall__buehne .ba__stage { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
@media (max-width: 1000px) { .wg .wg-fall__buehne .ba__stage { aspect-ratio: 16 / 10; } }
@media (max-width: 620px) { .wg .wg-fall__buehne .ba__stage { aspect-ratio: 4 / 3; } }

/* Die einmalige Wisch-Andeutung beim Hereinscrollen macht weiterhin woge.js.
   Hier wird sie bewusst nicht nachgebaut — zwei Skripte auf derselben
   Variablen --p würden gegeneinander laufen. */

/* --- Was daraus entsteht: zwei Bühnen ----------------------------------- */
.wg-buehnen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(40px, 5vw, 68px);
}
@media (max-width: 900px) { .wg-buehnen { grid-template-columns: 1fr; } }

.wg-buehne {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid rgba(40, 15, 145, .12);
  box-shadow: 0 30px 70px -50px rgba(40, 15, 145, .55);
}
.wg-buehne > * { position: relative; }
.wg-buehne__nr {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wg-blau);
}
.wg-buehne--projekt .wg-buehne__nr { color: var(--cyan-text, #0A6E7C); }
.wg-buehne h3 {
  margin: 12px 0 10px;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
}
.wg-buehne p {
  margin: 0;
  max-width: 52ch;
  font-size: .96rem;
  line-height: 1.72;
  color: var(--muted);
}

/* --- Problem gegen Lösung ---------------------------------------------- */
.wg-pl {
  margin-top: clamp(44px, 5.4vw, 76px);
  display: grid;
  gap: 1px;
  background: rgba(40, 15, 145, .12);
  border: 1px solid rgba(40, 15, 145, .12);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wg-pl__zeile {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  background: #fff;
}
.wg-pl__kopf {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background: #F6FBFF;
}
.wg-pl__kopf span {
  padding: 16px clamp(20px, 2.4vw, 32px);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wg-pl__kopf span:first-child { color: var(--muted); }
.wg-pl__kopf span:last-child { color: var(--wg-blau); }
.wg-pl__kopf i { width: clamp(40px, 5vw, 74px); }

.wg-pl__seite {
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wg-pl__seite b {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
}
.wg-pl__seite span {
  font-size: .92rem;
  line-height: 1.68;
  color: var(--muted);
}
.wg-pl__seite--problem b { color: #6A6F87; }

/* Der Pfeil in der Mitte — eine eigene Spalte, damit beide Seiten exakt
   gleich breit bleiben. Symmetrie entsteht hier durch das Raster, nicht
   durch Nachmessen. */
.wg-pl__pfeil {
  width: clamp(40px, 5vw, 74px);
  display: grid;
  place-items: center;
  background: rgba(82, 113, 255, .06);
  border-inline: 1px solid rgba(40, 15, 145, .08);
}
.wg-pl__pfeil svg {
  width: 20px;
  height: 20px;
  stroke: var(--wg-blau);
  fill: none;
  stroke-width: 2.2;
  transition: transform .5s var(--ease);
}
.wg-pl__zeile:hover .wg-pl__pfeil svg { transform: translateX(3px); }

@media (max-width: 860px) {
  .wg-pl__kopf { display: none; }
  .wg-pl__zeile { grid-template-columns: 1fr; }
  .wg-pl__pfeil {
    width: auto;
    height: 38px;
    border-inline: 0;
    border-block: 1px solid rgba(40, 15, 145, .08);
  }
  .wg-pl__pfeil svg { transform: rotate(90deg); }
  .wg-pl__zeile:hover .wg-pl__pfeil svg { transform: rotate(90deg) translateX(3px); }
  .wg-pl__seite--problem::before,
  .wg-pl__seite--loesung::before {
    content: "Problem";
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--light);
  }
  .wg-pl__seite--loesung::before { content: "Unsere Lösung"; color: var(--wg-blau); }
}

/* --- Die Wirkungskette als Grafik --------------------------------------- */
.wg-kette {
  margin-top: clamp(44px, 5.4vw, 76px);
  padding: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 40px);
  border-radius: var(--r-lg);
  background: #1B0A66;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 46px 100px -56px rgba(40, 15, 145, .8);
}
.wg-kette > * { position: relative; }
.wg-kette__kopf { text-align: center; margin-bottom: clamp(24px, 3vw, 38px); }
.wg-kette__kopf b {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8FF3FF;
}
.wg-kette__kopf h3 {
  margin: 12px auto 0;
  max-width: 24ch;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: #fff;
}
/* Die Kette ist bewusst KEIN SVG. In einem SVG mit fester viewBox schrumpft
   die Beschriftung auf einem 360-Pixel-Telefon auf gut vier Pixel — lesbar
   ist das nicht. Als Raster aus echtem Text skaliert jede Zeile normal mit
   und wird auf schmalen Geräten einfach senkrecht gestapelt. */
.wg-kette__reihe {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

/* Die Verbindungslinie liegt hinter den Punkten und läuft von links nach
   rechts durch — dieselbe Bewegung wie die Aussage selbst. */
.wg-kette__reihe::before,
.wg-kette__reihe::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
}
.wg-kette__reihe::before { background: rgba(255, 255, 255, .16); }
.wg-kette__reihe::after {
  background: #27E6FF;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2s var(--ease) .1s;
}
.wg-kette.in .wg-kette__reihe::after { transform: scaleX(1); }

.wg-kette__glied {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.wg-kette.in .wg-kette__glied { opacity: 1; transform: none; }
.wg-kette.in .wg-kette__glied:nth-child(1) { transition-delay: .2s; }
.wg-kette.in .wg-kette__glied:nth-child(2) { transition-delay: .6s; }
.wg-kette.in .wg-kette__glied:nth-child(3) { transition-delay: 1s; }
.wg-kette.in .wg-kette__glied:nth-child(4) { transition-delay: 1.4s; }
.wg-kette.in .wg-kette__glied:nth-child(5) { transition-delay: 1.8s; }

.wg-kette__punkt {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  background: #140A46;
  border: 1px solid rgba(255, 255, 255, .28);
}
.wg-kette__punkt svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wg-kette__glied--ziel .wg-kette__punkt {
  background: #143A66;
  border-color: #27E6FF;
}
.wg-kette__glied b {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.wg-kette__glied span {
  font-size: .82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .66);
  max-width: 18ch;
}

@media (max-width: 860px) {
  .wg-kette__reihe { grid-template-columns: 1fr; gap: 26px; }
  .wg-kette__reihe::before,
  .wg-kette__reihe::after {
    top: 28px;
    bottom: 28px;
    left: 28px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .wg-kette__reihe::after { transform: scaleY(0); transform-origin: top; }
  .wg-kette.in .wg-kette__reihe::after { transform: scaleY(1); }
  /* Raster statt Flex: so steht die Unterzeile sauber unter der Überschrift
     und nicht am linken Rand unter dem Punkt. */
  .wg-kette__glied {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    row-gap: 3px;
    align-items: start;
    text-align: left;
  }
  .wg-kette__punkt { margin-bottom: 0; grid-row: 1 / span 2; }
  .wg-kette__glied span { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-kette__reihe::after { transform: scaleX(1); transition: none; }
  .wg-kette__glied { opacity: 1; transform: none; transition: none; }
}

/* --- Die Videos --------------------------------------------------------- */
.wg-fall__videos { margin-top: clamp(44px, 5.4vw, 76px); }
.wg-fall__videos .ldx-head { margin-bottom: clamp(24px, 3vw, 38px); }

.wg .wg-reels {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  max-width: 1080px;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .wg .wg-reels { grid-template-columns: 1fr; max-width: 420px; }
}

/* --- Das Ergebnis: Mietverträge vor der Fertigstellung ------------------ */
.wg-ergebnis {
  margin-top: clamp(40px, 5vw, 68px);
  padding: clamp(28px, 3.4vw, 46px);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid rgba(40, 15, 145, .12);
  box-shadow: 0 34px 80px -56px rgba(40, 15, 145, .55);
  text-align: center;
}
.wg-ergebnis b {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wg-blau);
}
.wg-ergebnis p {
  margin: 14px auto 0;
  max-width: 56ch;
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--navy);
}
.wg-ergebnis p em {
  font-style: normal;
  color: #3348D9;
}
.wg-ergebnis small {
  display: block;
  margin: 16px auto 0;
  max-width: 62ch;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--light);
}

/* Der Zeitstrahl: er zeigt, dass die Verträge VOR der Fertigstellung kamen.
   Das ist die eigentliche Aussage — als Satz überliest man sie. */
.wg-zeit {
  margin: clamp(26px, 3.2vw, 40px) auto 0;
  max-width: 900px;
}
.wg-zeit__spur {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: rgba(40, 15, 145, .1);
}
.wg-zeit__lauf {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--wg-blau);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s var(--ease);
}
.wg-zeit.in .wg-zeit__lauf { transform: scaleX(1); }
.wg-zeit__marken {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
  gap: 8px;
}
.wg-zeit__marke {
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.wg-zeit.in .wg-zeit__marke { opacity: 1; transform: none; }
.wg-zeit.in .wg-zeit__marke:nth-child(1) { transition-delay: .25s; }
.wg-zeit.in .wg-zeit__marke:nth-child(2) { transition-delay: .75s; }
.wg-zeit.in .wg-zeit__marke:nth-child(3) { transition-delay: 1.25s; }
.wg-zeit.in .wg-zeit__marke:nth-child(4) { transition-delay: 1.7s; }
.wg-zeit__marke b {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
}
.wg-zeit__marke span {
  display: block;
  margin-top: 3px;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--muted);
}
.wg-zeit__marke--jetzt b { color: var(--royal-text, #3348D9); }
@media (max-width: 700px) {
  .wg-zeit__marken { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-zeit__lauf { transform: scaleX(1); transition: none; }
  .wg-zeit__marke { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   4 · Die übrigen Abschnitte auf das neue Maß bringen
   ========================================================================== */

/* Der Widerspruch: die Naht sitzt jetzt in einem breiteren Raster.
   ACHTUNG: woge.css bricht das Raster unter 900 px auf eine Spalte um.
   Diese Regel hier ist spezifischer und wuerde den Umbruch aufheben —
   deshalb steht sie in einer eigenen Bedingung. */
@media (min-width: 901px) {
  .wg .wg-riss { grid-template-columns: 1fr clamp(56px, 6vw, 96px) 1fr; }
}

/* Der Druckmesser bekommt gleich hohe Zellen und zählende Zahlen. */
.wg .wg-druck { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .wg .wg-druck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .wg .wg-druck { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Der Hero: zwei Spalten, Text links, gefasstes Bild rechts.
   Kein randloses Panorama mehr — das Bild ist ein Beleg, kein Hintergrund.
   -------------------------------------------------------------------------- */
.wg .ldx-hero .ldx-hero__inner { max-width: none; }
.wg .wg-held {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}
.wg .wg-held h1 {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.2rem, 4.8vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.07;
  color: var(--navy);
  hyphens: none;
}
.wg .wg-held .lead {
  margin-top: 18px;
  max-width: 54ch;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.7;
}
.wg .wg-held .ldx-hero__cta { margin-top: clamp(22px, 2.6vw, 32px); }
.wg .wg-held__ruck {
  margin: 12px 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--light, #8A93AE);
}
.wg .wg-held__fakten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
  margin: clamp(26px, 3.2vw, 40px) 0 0;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid rgba(40, 15, 145, .12);
}
.wg .wg-held__fakten div { min-width: 0; }
.wg .wg-held__fakten dt {
  font-size: clamp(1.3rem, 1.8vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.wg .wg-held__fakten dd {
  margin: 5px 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--muted, #59627F);
}
.wg .wg-held__quelle {
  margin: 12px 0 0;
  font-size: .7rem;
  color: var(--light, #8A93AE);
}
.wg .wg-held__bild {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(40, 15, 145, .12);
  box-shadow: 0 44px 96px -54px rgba(40, 15, 145, .6);
}
.wg .wg-held__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.wg .wg-held__bild figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px 16px;
}
.wg .wg-held__bild figcaption b {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
}
.wg .wg-held__bild figcaption span {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted, #59627F);
}
@media (max-width: 1000px) {
  .wg .wg-held { grid-template-columns: 1fr; gap: 36px; }
  .wg .wg-held__bild { max-width: 560px; }
}
@media (max-width: 620px) {
  .wg .wg-held__fakten { grid-template-columns: 1fr; gap: 14px; }
}

/* Der Abschluss unter dem Ergebnis: Handlung plus Rückversicherung. */
.wg .wg-abschluss {
  margin-top: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.wg .wg-abschluss span {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--light, #8A93AE);
}

/* Die Glas-Optik aus leistung-plus.css hat auf dieser Seite nichts
   verloren — die Kalender-Karte steht auf festem Weiß. */
.wg .lx-glass {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(40, 15, 145, .12);
  box-shadow: 0 30px 70px -50px rgba(40, 15, 145, .5);
}

/* Kennzahlen, die hochzählen, dürfen beim Zählen nicht die Breite ändern —
   sonst zappelt die ganze Zeile. Tabellenziffern haben feste Breite. */
.wg .wg-druck__wert,
.wg .wg-fakt b,
.wg .wg-zahl,
.wg .zaehl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ==========================================================================
   5 · Was das breitere Mass sonst noch braucht

   Die Raster stehen jetzt in .wg-rand statt in .shell. Zwei Dinge folgen
   daraus: sie duerfen nicht ins Uferlose laufen, und der Fliesstext in
   ihnen braucht eine eigene Obergrenze, sonst werden die Zeilen zu lang.
   ========================================================================== */

/* Zwei Hebel: zwei Karten sind auf 1760 px zu breit fuer eine Textspalte.
   Also bekommt das Paar ein eigenes, engeres Mass. */
.wg .wg-hebel { max-width: 1320px; margin-inline: auto; }
.wg .wg-hebel__karte > p,
.wg .wg-hebel__liste li { max-width: 54ch; }

/* Der Widerspruch darf breiter stehen, aber nicht auseinanderfallen. */
.wg .wg-riss { max-width: 1500px; margin-inline: auto; }

/* Der Druckmesser bleibt lesbar, wenn die Zellen nicht zu breit werden. */
.wg .wg-druck { max-width: 1560px; margin-inline: auto; }

/* Das Band unter dem Riss haelt ein eigenes, engeres Mass — sonst
   steht es verloren unter einer Zeichnung, die deutlich breiter laeuft. */
.wg .wg-festpreis { max-width: 1400px; margin-inline: auto; }

/* Die Fortschrittslinie in der dunklen Tafel braucht helle Farben,
   sonst verschwindet sie im Verlauf. */
.wg .wg-eins .wg-linie {
  max-width: 62ch;
  margin: clamp(26px, 3.2vw, 40px) auto 0;
  background: rgba(255, 255, 255, .18);
}
.wg .wg-eins .wg-linie::after {
  background: #27E6FF;
}

/* Die Quellenzeile sitzt unter einem breiten Raster — sie soll trotzdem
   in der Mitte stehen und nicht ueber die ganze Flaeche laufen. */
.wg .wg-quelle { max-width: 74ch; margin-inline: auto; text-align: center; }

/* Ablauf, verwandte Leistungen und CTA duerfen die Staffelung mitnehmen,
   ohne dass ihr Grundriss angefasst wird. */
.wg .proc-step { min-width: 0; }
.wg .ldx-related a { min-width: 0; }

/* Auf schmalen Geraeten hebt der Randcontainer die Innenabstaende der
   Sektion nicht auf — sonst kleben die Raster an der Kante. */
@media (max-width: 760px) {
  .wg .wg-hebel,
  .wg .wg-riss,
  .wg .wg-druck,
  .wg .wg-festpreis { max-width: none; }
}


/* ============================================================
   DER RISS — Plattenbau als Architektenzeichnung

   Regie: Ein warmes Blatt Papier auf kuehlem Grund. Alles, was
   gezeichnet ist, ist Tinte auf diesem Blatt. Farbe kommt erst
   ins Spiel, wenn jemand ein Geschoss auswaehlt — vorher waere
   sie nur Dekoration.

   Das Wackeln der Linien steckt in den Pfaddaten, nicht in einem
   Filter. Ein feTurbulence ueber ein Blatt dieser Groesse laesst
   den Browser bei jedem Hover neu rastern.
   ============================================================ */

.wg{
  --tinte:#1E2E68;
  --papier:#FCFBF7;
  --plan-akzent:#5271FF;
  --plan-eis:#0FB9CE;
}

/* --- Maß: der Riss bekommt mehr Platz als der Fließtext ---- */
.wg .wg-planrand{
  width:min(100% - clamp(20px,5vw,64px)*2, 1820px);
  margin-inline:auto;
}
@media (min-width:2100px){ .wg .wg-planrand{ width:min(100% - 128px, 2000px) } }

/* --- Doppelrand: Zeichenbrett, darin das Blatt ------------- */
.wg .wg-plan{
  position:relative;
  margin-top:clamp(28px,3.4vw,48px);
  padding:clamp(8px,.9vw,14px);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 40px 90px -60px rgba(30,46,104,.55);
  border:1px solid rgba(30,46,104,.09);
}
.wg .wg-plan__blatt{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--papier);
  border:1px solid rgba(30,46,104,.13);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.9);
}
.wg .wg-plan__svg{ display:block; width:100%; height:auto }

/* ============================================================
   Die Tinte
   ============================================================ */
.wg .wg-plan__svg path{ fill:none; stroke:var(--tinte); stroke-linecap:round; stroke-linejoin:round }
.wg .k1{ stroke-width:.55; opacity:.45 }
.wg .k2{ stroke-width:.9;  opacity:.72 }
.wg .k3{ stroke-width:1.5; opacity:.88 }
.wg .k4{ stroke-width:2.4; opacity:1 }
.wg .kr{ stroke-width:1.5; opacity:.34 }                                  /* Blattrand */
.wg .km{ stroke-width:.7;  opacity:.5 }                                   /* Bemaßung */
.wg .kf{ stroke-width:.8;  opacity:.34 }                                  /* Fugenschatten */
.wg .kg{ stroke-width:.8;  opacity:.36 }                                  /* Geländeschraffur */
.wg .kb{ stroke-width:.8;  opacity:.24 }                                  /* Baumkrone */
.wg .kh{ stroke-width:.7;  opacity:.5 }                                   /* Hinweislinie */
.wg .kd{ stroke-width:1;   opacity:.42; stroke-dasharray:7 5 }            /* verdeckte Kante */
.wg .ka{ stroke-width:.7;  opacity:.16; stroke-dasharray:16 4 2 4 }       /* Achsraster */

.wg .pl-papier{ fill:var(--papier) }
.wg .pl-gitter{ fill:url(#plGitter) }
.wg .pl-wand{ fill:#F3F1EA; opacity:.85 }
.wg .pl-sockel{ fill:#E8E5DB; opacity:.9 }
.wg .pl-korn{ fill:url(#plKorn); pointer-events:none }
.wg .pl-kopf{ fill:rgba(30,46,104,.035); stroke:rgba(30,46,104,.34); stroke-width:1.2 }
.wg .pl-kote{ fill:var(--tinte); opacity:.55 }
.wg .pl-massbalken{ fill:var(--tinte); opacity:.62 }
.wg .pl-kopfkreis{ fill:none; stroke:var(--tinte); stroke-width:.9; opacity:.72 }
.wg .pl-achse-k{ fill:var(--papier); stroke:var(--tinte); stroke-width:.9; opacity:.5 }

/* --- Beschriftung ----------------------------------------- */
.wg .wg-plan__svg text{
  font-family:'Poppins',system-ui,sans-serif; fill:var(--tinte);
  user-select:none; pointer-events:none;
}
.wg .pl-kopf-t1{ font-size:12.5px; font-weight:700; letter-spacing:.13em }
.wg .pl-kopf-t2{ font-size:14px;   font-weight:600; letter-spacing:.05em }
.wg .pl-kopf-t3{ font-size:10px;   font-weight:500; letter-spacing:.16em; opacity:.7 }
.wg .pl-achse-t{ font-size:12px;   font-weight:700; text-anchor:middle; opacity:.62 }
.wg .pl-mass-t{  font-size:10.5px; font-weight:500; letter-spacing:.09em; text-anchor:middle; opacity:.68 }
.wg .pl-kote-t{  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-anchor:end; opacity:.72 }
.wg .pl-mini{    font-size:9.5px;  font-weight:500; letter-spacing:.1em;  opacity:.5 }
.wg .pl-nr{      font-size:9px;    font-weight:700; text-anchor:middle;   opacity:.7 }
.wg .pl-etikett{ font-size:11px;   font-weight:700; letter-spacing:.15em; opacity:.34 }

/* Anmerkungen liegen mitten im Bauwerk — sie brauchen einen
   Ausschnitt im Untergrund, sonst laufen sie in die Linien. */
.wg .pl-anm,.wg .pl-anm-e,.wg .pl-anm-mitte{
  font-size:9.5px; font-weight:600; letter-spacing:.13em; opacity:.66;
  paint-order:stroke fill; stroke:var(--papier); stroke-width:3.4; stroke-linejoin:round;
}
.wg .pl-anm-e{ text-anchor:end }
.wg .pl-anm-mitte{ text-anchor:middle }

/* ============================================================
   Die Geschosse — anklickbar
   ============================================================ */
.wg .et{ cursor:pointer }
.wg .et__hit{ fill:transparent }
.wg .et__glanz{
  fill:var(--plan-akzent); opacity:0; pointer-events:none;
  transition:opacity .5s cubic-bezier(.32,.72,0,1);
}
.wg .et:hover .et__glanz{ opacity:.05 }
.wg .et.is-on .et__glanz{ opacity:.1 }

.wg .et__rahmen{
  fill:none; stroke:var(--plan-eis); stroke-width:1.6; stroke-dasharray:10 7;
  opacity:0; pointer-events:none;
  transition:opacity .4s cubic-bezier(.32,.72,0,1);
}
.wg .et.is-on .et__rahmen{ opacity:1; animation:pl-ameisen 9s linear infinite }
.wg .et:focus-visible{ outline:none }
.wg .et:focus-visible .et__rahmen{ opacity:1; stroke-width:2.2 }
@keyframes pl-ameisen{ to{ stroke-dashoffset:-170 } }

.wg .et__marke circle{
  fill:var(--papier); stroke:var(--tinte); stroke-width:1.3; opacity:.42;
  transition:opacity .4s,fill .4s,stroke .4s;
}
.wg .et__marke{
  transform-box:fill-box; transform-origin:center;
  transition:transform .5s cubic-bezier(.32,.72,0,1);
}
.wg .et__nr{ font-size:12px; font-weight:700; text-anchor:middle; letter-spacing:.02em; transition:fill .4s }
.wg .et:hover .et__marke circle{ opacity:.75 }
.wg .et.is-on .et__marke{ transform:scale(1.14) }
.wg .et.is-on .et__marke circle{ fill:var(--plan-akzent); stroke:var(--plan-akzent); opacity:1 }
.wg .et.is-on .et__nr{ fill:#fff }

/* Sobald gewaehlt ist, treten die uebrigen Geschosse zurueck.
   Nur opacity — das kostet keinen Umbruch. */
.wg .pl-etagen .et{ transition:opacity .5s cubic-bezier(.32,.72,0,1) }
.wg .wg-plan.gewaehlt .pl-etagen .et:not(.is-on){ opacity:.42 }
.wg .wg-plan.gewaehlt .pl-etagen .et:not(.is-on):hover{ opacity:.78 }

/* ============================================================
   Die Hinweislinie und die Notiz
   ============================================================ */
.wg .wg-plan__fahne{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.wg .wg-plan__fahne path{ fill:none; stroke:var(--plan-akzent); stroke-width:1.4; opacity:.8 }
.wg .wg-plan__fahne circle{ fill:var(--plan-akzent) }

.wg .wg-note{
  position:absolute; left:var(--nx,73.5%); top:var(--ny,50%);
  width:var(--nw,24%);
  background:rgba(255,255,255,.97);
  border:1px solid rgba(30,46,104,.16);
  border-radius:18px;
  box-shadow:0 26px 60px -34px rgba(30,46,104,.6);
  padding:clamp(14px,1.15vw,20px);
  transform-origin:left center;
}
.wg .wg-note__inhalt{ animation:pl-plopp .5s cubic-bezier(.32,1.4,.4,1) both }
@keyframes pl-plopp{
  from{ opacity:0; transform:translateX(-10px) scale(.94) }
  to  { opacity:1; transform:none }
}
.wg .wg-note__ort{
  display:block; font-size:.6rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--plan-akzent); margin-bottom:5px;
}
.wg .wg-note h3{
  margin:0 0 8px; font-size:clamp(.98rem,1.05vw,1.2rem); font-weight:700;
  letter-spacing:-.02em; color:var(--navy,#280F91); line-height:1.2;
}
.wg .wg-note p{
  margin:0; font-size:clamp(.72rem,.72vw,.83rem); line-height:1.62;
  color:var(--muted,#59627F);
}
.wg .wg-note ul{
  list-style:none; margin:12px 0 0; padding:12px 0 0;
  border-top:1px solid rgba(30,46,104,.1);
}
.wg .wg-note li{ display:block; padding:6px 0 }
.wg .wg-note li + li{ border-top:1px solid rgba(30,46,104,.07) }
.wg .wg-note li b{
  display:block; font-size:.9rem; font-weight:800; letter-spacing:-.02em;
  color:var(--plan-akzent); line-height:1.2;
}
.wg .wg-note li span{
  display:block; margin-top:2px; font-size:.68rem; line-height:1.55;
  color:var(--muted,#59627F);
}
.wg .wg-note__fuss{
  margin-top:10px; padding-top:9px; border-top:1px solid rgba(30,46,104,.1);
  font-size:.6rem; line-height:1.5; color:var(--light,#8A93AE);
}

/* ============================================================
   Die Legende — zweiter Weg, und auf dem Telefon der einzige
   ============================================================ */
.wg .wg-plan__legende{
  list-style:none; margin:clamp(16px,1.8vw,26px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  border:1px solid rgba(30,46,104,.12); border-radius:18px; overflow:hidden;
  background:rgba(30,46,104,.12);
}
.wg .wg-plan__legende button{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:12px 14px; border:0; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.7); font:inherit; color:var(--muted,#59627F);
  font-size:.76rem; letter-spacing:.01em;
  transition:background .4s cubic-bezier(.32,.72,0,1),color .4s;
}
.wg .wg-plan__legende button i{
  flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:.6rem; font-weight:700; letter-spacing:0;
  background:rgba(30,46,104,.07); color:var(--tinte);
  transition:background .4s,color .4s;
}
.wg .wg-plan__legende button:hover{ background:#fff; color:var(--navy,#280F91) }
.wg .wg-plan__legende button[aria-pressed="true"]{ background:#fff; color:var(--navy,#280F91); font-weight:600 }
.wg .wg-plan__legende button[aria-pressed="true"] i{ background:var(--plan-akzent); color:#fff }

.wg .wg-plan__fuss{
  margin-top:14px; text-align:center; font-size:.74rem; color:var(--light,#8A93AE);
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.wg .wg-plan__fuss svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2 }

/* ============================================================
   Enger wird es unter 1080 px: die Notiz verlaesst das Blatt
   ============================================================ */
@media (max-width:1080px){
  .wg .wg-plan__fahne{ display:none }
  .wg .wg-note{
    position:static; width:auto; margin-top:14px;
    box-shadow:0 20px 44px -34px rgba(30,46,104,.5);
  }
  .wg .wg-note h3{ font-size:1.15rem }
  .wg .wg-note p{ font-size:.86rem }
  .wg .wg-note li b{ font-size:1rem }
  .wg .wg-note li span{ font-size:.78rem }
  .wg .wg-note__fuss{ font-size:.66rem }
}

@media (prefers-reduced-motion:reduce){
  .wg .et.is-on .et__rahmen{ animation:none }
  .wg .wg-note__inhalt{ animation:none }
}

/* Schadensbild und Verschmutzung — die Zeichnung ist eine
   Bestandsaufnahme, kein Verkaufsprospekt. */
.wg .kz{ stroke-width:.9; opacity:.55 }
.wg .ks{ stroke-width:1.4; opacity:.1 }


/* ============================================================
   Der Riss muss auf einen Bildschirm passen

   Ein Plan, den man nur in zwei Teilen sehen kann, ist keiner mehr.
   Das Blatt hat ein festes Seitenverhaeltnis (1240:860 = 1,442).
   Also wird nicht die Hoehe gedeckelt — das ginge bei einem SVG mit
   fester Ratio ohnehin nicht sauber — sondern die Breite so weit
   begrenzt, dass die daraus folgende Hoehe auf den Schirm passt.

   Erst ab 1081 px. Darunter steht die Notiz unter dem Blatt, und die
   Bildschirmhoehe waere das falsche Mass: auf dem Telefon im Hochformat
   wuerde der Riss dann auf Briefmarkengroesse schrumpfen.

   Diese Regeln stehen bewusst am Dateiende — sie muessen die
   margin-Kurzschreibweisen weiter oben ueberschreiben koennen.
   ============================================================ */
@media (min-width: 1081px) {
  .wg .wg-plan,
  .wg .wg-plan__legende,
  .wg .wg-plan__fuss { max-width: calc(84vh * 1.442); margin-inline: auto; }
}

/* ------------------------------------------------------------
   Der Riss auf dem Telefon

   Auf 375 px waere das Blatt 317 px breit und damit 220 px hoch.
   In 220 px Hoehe passen sieben Geschosse, zwei Massketten und
   sechzig Beschriftungen — lesbar ist davon nichts. Ein Bauplan
   verkleinert sich nicht auf Telefonbreite; man faehrt ihn ab.

   Also bekommt die Zeichnung unterhalb von 1080 px ein
   Mindestmass und laeuft waagerecht. Die Notiz bleibt davon
   unberuehrt: sie steht als eigener Block darunter, sonst wuerde
   sie mitfahren und beim Lesen verschwinden.
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .wg .wg-plan__rolle {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    border-radius: inherit;
  }
  .wg .wg-plan__svg { min-width: 860px; }
  /* Ein Hauch Schatten an der rechten Kante sagt: hier geht es weiter. */
  .wg .wg-plan__blatt::after {
    content: "";
    position: absolute;
    top: 0; right: 0; width: 34px; height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(252,251,247,0), rgba(252,251,247,.92));
  }
}
@media (max-width: 1080px) and (max-width: 640px) {
  .wg .wg-plan__svg { min-width: 760px; }
}

/* Die Notiz liegt ueber dem Kantenschatten — sonst zieht der graue
   Verlauf am rechten Rand ueber die letzten Zeichen jeder Zeile. */
@media (max-width: 1080px) {
  .wg .wg-note {
    /* relativ statt statisch, damit die Notiz ueber dem Kantenschatten
       liegt — dann muessen aber left und top der Fassung fuer breite
       Schirme ausdruecklich zurueckgenommen werden, sonst schiebt sich
       die Karte um 73,5 % nach rechts aus dem Blatt. */
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    margin: 14px clamp(10px, 3vw, 16px) clamp(10px, 3vw, 16px);
  }
}

/* ------------------------------------------------------------
   Legende: die Trennlinien kommen von den Feldern, nicht vom Grund

   Vorher lag ein dunkler Ton unter dem Raster, und die 1-px-Luecken
   liessen ihn als Linie durch. Elegant — solange die Zahl der Felder
   zur Zahl der Spalten passt. Bei sieben Bauteilen tut sie das fast
   nie, und die leere Zelle stand dann als grauer Block da.

   Jetzt ist der Grund hell, und jedes Feld wirft seine eigene Linie
   nach rechts und nach unten. Wo kein Feld ist, ist auch keine Linie.
   ------------------------------------------------------------ */
.wg .wg-plan__legende {
  background: rgba(255, 255, 255, .55);
}
.wg .wg-plan__legende button {
  box-shadow: 1px 0 0 rgba(30, 46, 104, .12), 0 1px 0 rgba(30, 46, 104, .12);
}

/* ============================================================
   Der Roteintrag

   Eine Bestandsaufnahme hinterlaesst Spuren auf dem Blatt: der
   Pruefer kringelt die Stelle ein, um die es geht, und setzt
   seinen Haken. Die Wolken liegen in den Geschossgruppen und
   zeichnen sich erst, wenn das Bauteil gewaehlt ist — ueber
   stroke-dashoffset auf pathLength="1", reine Transform-/
   Strichanimation, kein Umbruch.
   ============================================================ */
.wg{ --plan-rot:#C2452D }

/* kx muss die pauschale Tintenregel (.wg .wg-plan__svg path)
   schlagen — darum mit dem Blatt in der Kette. */
.wg .wg-plan__svg .kx{ stroke:var(--plan-rot); stroke-width:1.6; opacity:.78 }
.wg .wg-plan__svg .kp{ stroke-width:.6; opacity:.06 }   /* Bleistift-Vorzeichnung */

/* Nichts davon faengt Klicks — die Geschossflaechen liegen darunter. */
.wg .pl-vorzeichnung, .wg .pl-detail, .wg .pl-staffage, .wg .pl-stempel{ pointer-events:none }

.wg .et__rot path{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .35s cubic-bezier(.32,.72,0,1);
}
.wg .et.is-on .et__rot path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .8s cubic-bezier(.32,.72,0,1) .3s;
}
/* der Haken kommt, wenn die Wolke geschlossen ist */
.wg .et.is-on .et__rot path + path{ transition-delay:1s; transition-duration:.3s }

.wg .pl-stempel .kx{ stroke-width:1.9; opacity:.62 }
.wg .wg-plan__svg .pl-stempel-t1{
  fill:var(--plan-rot); font-size:13px; font-weight:700;
  letter-spacing:.14em; text-anchor:middle; opacity:.66;
}
.wg .wg-plan__svg .pl-stempel-t2{
  fill:var(--plan-rot); font-size:8.5px; font-weight:600;
  letter-spacing:.2em; text-anchor:middle; opacity:.55;
}

/* ============================================================
   Die Eroeffnung: der Riss zeichnet sich selbst

   plan.js setzt beim Hereinscrollen einmalig pathLength="1" und
   laesst die Striche gruppenweise laufen. Solange die Klasse
   .zeichnet am SVG haengt, warten Schrift und Fuellungen — eine
   Zeichnung beginnt mit Linien, nicht mit Beschriftung.
   Nur opacity, nichts, was Layout kostet.
   ============================================================ */
.wg .wg-plan__svg.zeichnet text,
.wg .wg-plan__svg.zeichnet rect,
.wg .wg-plan__svg.zeichnet circle,
.wg .wg-plan__svg.zeichnet .pl-kote{ opacity:0 !important }

/* Diese Elemente haben noch keine eigene Uebergangsregel —
   sie blenden weich ein, sobald .zeichnet faellt. Bei den
   Texten bleibt der fill-Uebergang der Marken erhalten. */
.wg .wg-plan__svg text{ transition:opacity .9s cubic-bezier(.32,.72,0,1), fill .4s }
.wg .wg-plan__svg .pl-achse-k,
.wg .wg-plan__svg .pl-wand,
.wg .wg-plan__svg .pl-korn,
.wg .wg-plan__svg .pl-gitter,
.wg .wg-plan__svg .pl-kote,
.wg .wg-plan__svg .pl-massbalken{ transition:opacity .9s cubic-bezier(.32,.72,0,1) }

/* Bis zur ersten Wahl ist die Notiz leer — eine leere weisse
   Pille auf dem Blatt waere waehrend der Eroeffnung zu sehen. */
.wg .wg-note:empty{ visibility:hidden }

@media (prefers-reduced-motion:reduce){
  .wg .et__rot path{ transition:none }
  .wg .wg-plan__svg text,
  .wg .wg-plan__svg .pl-achse-k,
  .wg .wg-plan__svg .pl-wand,
  .wg .wg-plan__svg .pl-korn,
  .wg .wg-plan__svg .pl-gitter,
  .wg .wg-plan__svg .pl-kote,
  .wg .wg-plan__svg .pl-massbalken{ transition:none }
}

/* ============================================================
   Das Blatt ist die Seite

   Der Zustand-Abschnitt liegt nicht mehr als Karte auf der Seite:
   der ganze Abschnitt wird zum Zeichenblatt. Der Papierton kommt
   ueber data-bg aus dem Hintergrund-Morph, das Karoraster laeuft
   als Pseudo-Element ueber die volle Breite und blendet an den
   Abschnittskanten weich aus. Papier und Raster aus dem SVG treten
   ab — sonst laegen zwei Raster in zwei Massstaeben uebereinander,
   und die Naht zwischen Blattkarte und Seitengrund fiele auf.
   ============================================================ */
.wg .lsec--blatt{ position:relative }
.wg .lsec--blatt::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  rgba(42,58,107,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(42,58,107,.05) 0 1px, transparent 1px 26px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
  mask-image:linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
}
/* Kopf, Zeichnung und Legende liegen ueber dem Raster. */
.wg .lsec--blatt > *{ position:relative }

/* Der Rahmen um das Blatt faellt: die Zeichnung liegt direkt auf
   dem Papier der Seite. Der handgezeichnete Blattrand im SVG (kr)
   uebernimmt die Kante. */
.wg .lsec--blatt .wg-plan{ padding:0; background:none; border:0; box-shadow:none }
.wg .lsec--blatt .wg-plan__blatt{ background:none; border:0; box-shadow:none }
.wg .lsec--blatt .pl-papier{ fill:none }
.wg .lsec--blatt .pl-gitter{ display:none }

/* Die Legende steht als Werkzeugleiste auf dem Blatt — heller
   Grund bleibt, damit die Felder bedienbar aussehen. */
.wg .lsec--blatt .wg-plan__legende{ background:rgba(255,255,255,.4) }


/* ==========================================================================
   5 · WoGe v2
   Hero als Buehnenbild: das modernisierte Haus steht hinter dem Text,
   nicht neben ihm. Dunkle Flaeche, helle Schrift, Fakten unten.
   ========================================================================== */
.wg .wg-buehnenbild{ position:relative; overflow:hidden; background:#150A52; }
.wg .wg-buehnenbild__bild{ position:absolute; inset:0; }
.wg .wg-buehnenbild__bild img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
}
/* Abdunklung von links, damit die Schrift traegt und rechts Haus bleibt */
.wg .wg-buehnenbild__bild::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(78deg,
    rgba(13,7,53,.96) 0%, rgba(13,7,53,.88) 38%,
    rgba(13,7,53,.62) 68%, rgba(13,7,53,.34) 100%);
}
/* Schmale Schirme: Text laeuft ueber die volle Breite, also gleichmaessiger abdunkeln */
@media (max-width:900px){
  .wg .wg-buehnenbild__bild::after{
    background:linear-gradient(180deg,
      rgba(13,7,53,.94) 0%, rgba(13,7,53,.88) 55%,
      rgba(13,7,53,.7) 100%);
  }
}
.wg .wg-buehnenbild .shell{ position:relative; z-index:1; }
.wg .wg-buehnenbild{ padding-bottom:clamp(64px,8vh,110px); }

.wg .wg-held--dunkel{ grid-template-columns:minmax(0,1fr); }
.wg .wg-held--dunkel .wg-held__text{ max-width:820px; }
.wg .wg-held--dunkel .crumbs a{ color:rgba(255,255,255,.6); }
.wg .wg-held--dunkel .crumbs span{ color:rgba(255,255,255,.35); }
.wg .wg-held--dunkel .crumbs b{ color:#fff; }
.wg .wg-held--dunkel .eyebrow{ color:#8FF3FF; }
.wg .wg-held--dunkel h1{
  color:#fff; max-width:16ch;
  font-size:clamp(2.2rem, 4.8vw, 3.9rem);
}
.wg .wg-held--dunkel .lead{ color:rgba(255,255,255,.88); max-width:58ch; }
.wg .wg-held--dunkel .lead--zwei{ margin-top:14px; color:rgba(255,255,255,.72); }
.wg .wg-held--dunkel .link-arrow{ color:#fff; }
.wg .wg-held--dunkel .link-arrow svg{ stroke:#8FF3FF; }
.wg .wg-held--dunkel .wg-held__ruck{ color:rgba(255,255,255,.52); }
.wg .wg-held--dunkel .wg-held__fakten{ border-top-color:rgba(255,255,255,.22); }
.wg .wg-held--dunkel .wg-held__fakten dt{ color:#fff; }
.wg .wg-held--dunkel .wg-held__fakten dd{ color:rgba(255,255,255,.68); }
.wg .wg-held--dunkel .wg-held__quelle{ color:rgba(255,255,255,.42); }

/* --------------------------------------------------------------------------
   Der Widerspruch, jetzt auf weisser Flaeche: die linke Seite bleibt
   frisch und klar, die rechte wirkt wie vergilbtes Papier — das alte
   Bild sieht auch so aus, wie es ist: alt.
   -------------------------------------------------------------------------- */
.wg .wg-riss__seite--ruf{
  background:#F7F5EF;
  border-color:rgba(89,98,127,.2);
  box-shadow:0 26px 60px -50px rgba(35,35,48,.55);
}
.wg .wg-riss__seite--ruf h3{ color:#59627F; }
.wg .wg-riss__seite--ruf .wg-label{ color:#8A93AE; }

/* Die Naht traegt jetzt einen Stempel statt einer Textzeile */
.wg .wg-riss__naht b{
  border:1.5px dashed rgba(82,113,255,.5);
  border-radius:12px;
  background:#fff;
  padding:18px 7px;
  transform:rotate(-4deg);
}
@media (max-width:900px){
  .wg .wg-riss__naht b{ transform:rotate(-2deg); padding:8px 18px; }
}

/* Zellen halten ihre Hoehe, bis Instagram geladen hat (kein Springen) */
.wg .wg-reels__cell{ min-height:480px; background:#F3F6FC; }

/* Hinweis unter den direkt eingebetteten Instagram-Beitraegen */
.wg .wg-reels__hinweis{
  margin:16px auto 0; max-width:620px; text-align:center;
  font-size:.76rem; line-height:1.6; color:var(--light,#8A93AE);
}
.wg .wg-reels__hinweis a{ color:inherit; text-decoration:underline; }

@media (max-width:620px){
  .wg .wg-held--dunkel h1{ font-size:clamp(2rem,8.6vw,2.5rem); }
}