/* =========================================================================
   ÜBER MICH

   -------------------------------------------------------------------------
   DIE EINE REGEL, DIE ALLES ANDERE ERKLÄRT

   Nie zweimal dasselbe Muster hintereinander.

   Text links und Foto rechts, danach Foto links und Text rechts: Das ist
   die Anordnung, die auf jeder zweiten Website steht. Nach dem dritten
   Wechsel liest niemand mehr. Deshalb wechseln sich hier ab:

     Hero mit weichen Flächen
     Zitat, schmal und zentriert
     Zeitleiste mit Linie in der Mitte
     Polaroidkarte neben Fließtext
     acht Kacheln nebeneinander
     versetzte Bildcollage
     senkrechter Zeitstrahl mit drei Bausteinen am Ende
     Kachelraster für die Nachweise

   -------------------------------------------------------------------------
   FARBRHYTHMUS

     Hero          Verlauf aus Creme und Pfirsich
     Zitat         Pfirsich
     Mein Weg      Weiß
     Warum         Pfirsich
     Freiheit      Creme
     Momente       Weiß
     Finanzweg     Pfirsich
     Qualifikation Weiß
     Kontakt       Creme
     Bewertungen   Weiß
     Abschluss     Dunkel

   -------------------------------------------------------------------------
   ANIMATIONEN

   Alles Bewegte ist Schmuck. Fällt JavaScript aus oder ist
   prefers-reduced-motion gesetzt, steht die Seite vollständig da: die
   Zeitleiste gefüllt, alle Karten sichtbar.
   ========================================================================= */


/* =========================================================================
   1 · HERO

   -------------------------------------------------------------------------
   WAS HIER VORHER FALSCH WAR

   Der erste Versuch hatte einen orangefarbenen Kreis links, eine zweite
   organische Form rechts unten und eine stark gebogene Bildform. Das
   waren dekorative Elemente, die nichts zur Aussage beitragen, und
   zusammen sah es aus wie eine Designübung.

   Jetzt trägt der Bereich sich über drei Dinge: einen sehr ruhigen
   Verlauf, eine leichte Unregelmäßigkeit am Bildrahmen und die
   Typografie. Kein einziges Element ist nur da, weil es hübsch ist.

   Text und Foto stehen enger beieinander als vorher, der Bereich ist
   flacher, und es gibt keine großen leeren Flächen mehr.
   ========================================================================= */

.um-hero {
  position: relative;
  isolation: isolate;
  /* Ein Verlauf, keine drei. Er läuft von warmem Creme oben links nach
     einem Hauch Pfirsich unten rechts, dorthin, wo das Foto sitzt. */
  background:
    radial-gradient(80% 70% at 82% 74%, rgba(255, 224, 202, 0.72), transparent 68%),
    linear-gradient(160deg, #FFFBF7 0%, var(--cream) 100%);
  padding: calc(var(--kopf-hoehe, 84px) + clamp(16px, 2.6vw, 40px)) 0 clamp(32px, 4vw, 64px);
  overflow: clip;
}

.umh-raster {
  position: relative;
  display: grid;
  /* Enger als vorher. Die schmalere Textspalte bringt Überschrift und
     Foto näher zusammen und nimmt dem Bereich die Weite. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 52px);
  max-width: 1080px;
  margin: 0 auto;
}

/* Ein sehr zurückhaltender warmer Schein hinter dem Foto. Er ersetzt die
   frühere Kreisgrafik: Er gibt dem Bild Tiefe, ohne selbst als Form
   erkennbar zu sein. */
.umh-schein {
  position: absolute;
  z-index: 0;
  right: -8%;
  top: 50%;
  width: min(58%, 520px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255, 154, 84, 0.16), rgba(255, 154, 84, 0) 70%);
  filter: blur(30px);
  pointer-events: none;
}

/* Die beiden dekorativen Formen sind entfernt. Die Elemente bleiben im
   Markup, damit der Aufbau nicht bei jeder Meinungsänderung umgebaut
   werden muss, sind aber ausgeschaltet. */
.umh-form { display: none; }

.umh-text {
  position: relative;
  z-index: 2;
  /* Nur noch eine leichte Überlappung. Vorher waren es zehn Prozent,
     dadurch lag Text auf dem Gesicht. */
  margin-right: clamp(-40px, -3vw, -16px);
}

.umh-text .eyebrow { margin-bottom: 12px; }

.umh-text h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--charcoal);
  margin: 0 0 16px;
}

.umh-claim {
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: clamp(1.14rem, 1rem + 0.75vw, 1.55rem);
  line-height: 1.34;
  color: var(--orange-dark);
  margin: 0 0 14px;
  max-width: 20ch;
  /* Eine feine orange Linie links. Der einzige grafische Akzent im
     Hero, und er markiert die Zeile, die die Seite trägt. */
  padding-left: 16px;
  border-left: 2px solid var(--orange);
}

.umh-zweite {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.92rem + 0.22vw, 1.04rem);
  line-height: 1.62;
  color: #5F4E42;
  margin: 0;
  max-width: 33ch;
}

.umh-bild {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 4 / 5;
  /* Ein ruhiger Rahmen mit einer einzigen Unregelmäßigkeit: Die obere
     linke Ecke ist deutlich runder als die übrigen. Das reicht, damit
     das Bild nicht wie ein Kasten wirkt, und ist weit entfernt von der
     Bogenform, die vorher da war. */
  border-radius: clamp(60px, 9vw, 130px) var(--r) var(--r) var(--r);
  overflow: hidden;
  box-shadow: 0 22px 54px rgba(90, 60, 35, 0.16);
}

.umh-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}


/* =========================================================================
   2 · DER AUFTAKT ALS ZITAT

   Schmal und zentriert. Als Absatz zwischen zwei großen Flächen wirkte
   der Satz verloren; als Zitat trägt er den Übergang in die Geschichte.
   ========================================================================= */

/* Pfirsich statt Weiß. Direkt darunter beginnt „Mein Weg" auf Weiß,
   und zwei weiße Flächen hintereinander sehen aus wie ein vergessener
   Trenner. Der Farbwechsel ersetzt hier einen Abstand. */
.um-auftakt-sec {
  background: var(--peach);
  padding: clamp(48px, 6vw, 88px) 0;
}

.um-auftakt {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.uma-zitat {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.024em;
  color: var(--charcoal);
  margin: 0 0 14px;
  border: 0;
  padding: 0;
}

.uma-quelle {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0;
}


/* =========================================================================
   3 · MEIN WEG

   Eine Zeitleiste mit Linie in der Mitte. Links und rechts wechseln sich
   Textkarten und Fotos ab, die Knoten sitzen auf der Linie.
   ========================================================================= */

.um-weg-sec {
  background: var(--white);
  padding: clamp(56px, 7vw, 104px) 0;
}

.um-weg { position: relative; }

/* --- Die mitlaufende Leiste oben --- */

.umw-leiste {
  position: sticky;
  top: calc(var(--kopf-hoehe, 84px) + 8px);
  z-index: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: start;
  gap: 0;
  margin: 0 0 clamp(36px, 4.5vw, 64px);
  padding: 14px 0 10px;
  background: linear-gradient(var(--white) 74%, rgba(255, 255, 255, 0));
}

.umw-schiene {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 21px;
  height: 2px;
  background: rgba(90, 60, 35, 0.16);
  border-radius: 2px;
}

/* OHNE JavaScript ist die Linie voll. Das ist der Ruhezustand, nicht der
   Fehlerzustand.

   Gesteuert wird das über die Variable --fortschritt mit Rückfallwert
   100 %, NICHT über eine Klasse. komponenten.mjs baut die Seite vorab in
   einem Test-DOM auf und schreibt das Ergebnis ins HTML. Eine Klasse,
   die JavaScript setzt, landete dabei fest im Quelltext, und der
   Rückfall wäre für immer ausgehebelt, ohne dass es jemand merkt. */
.umw-fortschritt {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fortschritt, 100%);
  background: var(--orange);
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.umw-marke {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warm-grey);
  min-height: 44px;   /* Tippfläche, auch wenn der Punkt kleiner aussieht */
  transition: color 0.22s ease;
}

.umwm-text {
  text-align: center;
  line-height: 1.25;
}

.umwm-punkt {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid rgba(90, 60, 35, 0.24);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.umw-marke.ist-aktiv { color: var(--orange-dark); }
.umw-marke.ist-aktiv .umwm-punkt {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.25);
}
.umw-marke:hover .umwm-punkt { border-color: var(--orange); }
.umw-marke:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 6px;
}

/* --- Die Stationen an der Mittellinie --- */

.umw-stationen {
  position: relative;
  display: grid;
  gap: clamp(44px, 6vw, 92px);
}

.umw-linie {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(rgba(255, 97, 0, 0.5), rgba(255, 97, 0, 0.14));
  border-radius: 2px;
}

.umw-station {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(52px, 7vw, 116px);
  align-items: center;
}

/* Der Knoten auf der Linie. */
.umws-knoten {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 15px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--white);
  border: 2px solid rgba(255, 97, 0, 0.45);
  transition: background 0.28s ease, transform 0.28s ease;
}
.umw-station.ist-dran .umws-knoten {
  background: var(--orange);
  border-color: var(--orange);
  transform: translateX(-50%) scale(1.2);
}

.umw-station.ist-links  .umws-text { grid-column: 1; }
.umw-station.ist-links  .umws-bild { grid-column: 2; }
.umw-station.ist-rechts .umws-text { grid-column: 2; }
.umw-station.ist-rechts .umws-bild { grid-column: 1; grid-row: 1; }

.umws-jahr {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-dark);
  background: var(--peach);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 14px;
}

.umws-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--charcoal);
  margin: 0 0 14px;
}

.umws-text p {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.92rem + 0.18vw, 1.02rem);
  line-height: 1.72;
  color: #5F4E42;
  margin: 0 0 12px;
}
.umws-text p:last-child { margin-bottom: 0; }

/* Bilder in drei Formaten. Immer dasselbe Seitenverhältnis wäre wieder
   ein Raster. */
.umws-bild {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.umws-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.umw-station.format-hoch  .umws-bild { aspect-ratio: 4 / 5; max-width: 340px; }
.umw-station.format-quer  .umws-bild { aspect-ratio: 4 / 3; }
.umw-station.format-klein .umws-bild { aspect-ratio: 1; max-width: 250px; }
.umw-station.ist-links.format-hoch  .umws-bild,
.umw-station.ist-links.format-klein .umws-bild { margin-right: auto; }
.umw-station.ist-rechts.format-hoch  .umws-bild,
.umw-station.ist-rechts.format-klein .umws-bild { margin-left: auto; }

/* --- Format 'story': das große Foto einer Station ---

   Zwei Stationen standen vorher im Format 'klein', also 250 Pixel und
   quadratisch. Neben vier Absätzen Text sah das aus wie ein Vorschaubild
   und daneben blieb viel leere Fläche.

   'story' ist knapp doppelt so breit, hochformatig und rückt an die
   Mittellinie heran, statt am äußeren Rand zu kleben. Der weiße Rand
   ist nicht Zierde: Beide Fotos haben helle Hintergründe, ein Zugsitz
   und eine helle Wand, und würden sonst auf dem weißen Untergrund der
   Sektion ausfransen. */
.umw-station.format-story .umws-bild {
  aspect-ratio: 4 / 5;
  max-width: 440px;
  background: var(--white);
  padding: 9px;
  border-radius: 20px;
  box-shadow: 0 26px 60px rgba(90, 60, 35, 0.2);
}
.umw-station.format-story .umws-bild img { border-radius: 12px; }

/* Heranrücken an die Mittellinie. Der Spalte gegenüber bleibt der
   Abstand erhalten, das Bild wandert nur in den Zwischenraum hinein.
   Der Knoten auf der Linie bleibt frei: Bei 116 Pixeln Zwischenraum
   sind es 58 pro Seite, das Bild nimmt davon höchstens 44. */
.umw-station.ist-links.format-story .umws-bild {
  margin-right: auto;
  margin-left: clamp(-44px, -3vw, -16px);
}
.umw-station.ist-rechts.format-story .umws-bild {
  margin-left: auto;
  margin-right: clamp(-44px, -3vw, -16px);
}

/* --- Ein Zitat innerhalb einer Station --- */

.umws-zitat {
  margin: 16px 0 0;
  padding: 0 0 0 16px;
  border: 0;
  border-left: 3px solid var(--orange);
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.22rem);
  line-height: 1.5;
  color: var(--orange-dark);
}

/* --- Die vier Fragen --- */

.umws-fragen {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.umws-fragen li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 13px 16px;
}

.umwsf-zeichen { font-size: 0.95rem; line-height: 1.5; }

.umwsf-text {
  font-family: var(--sans);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--charcoal);
}

.umws-schluss {
  margin-top: 18px !important;
  padding: 14px 18px;
  background: var(--peach);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--charcoal) !important;
}

/* --- Herz-Karten innerhalb einer Station --- */

.umws-karten {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.umws-karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.1);
  border-radius: var(--r-sm);
  padding: 13px 16px;
}

.umwsk-zeichen { font-size: 0.92rem; line-height: 1.55; }

.umwsk-text {
  font-family: var(--sans);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--charcoal);
}

.umws-verweis {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 97, 0, 0.35);
  padding-bottom: 2px;
}
.umws-verweis:hover { border-bottom-color: var(--orange); }

/* --- Die beiden besonderen Stationen --- */

/* Wo Nicola erzählt, was sie in der Branche gesehen hat. Bekommt eine
   Fläche, damit sie aus dem Erzählfluss heraussticht. */
.umw-station.ist-wichtig .umws-text {
  background: var(--cream);
  border-radius: var(--r);
  padding: clamp(22px, 3vw, 34px);
}

/* Der Wendepunkt. Dunkle Fläche über die ganze Breite: Hier kippt die
   Geschichte, und das darf man sehen. */
.umw-station.ist-wendepunkt {
  grid-template-columns: minmax(0, 1fr);
}
.umw-station.ist-wendepunkt .umws-text {
  grid-column: 1;
  background: var(--charcoal);
  border-radius: var(--r);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}
.umw-station.ist-wendepunkt .umws-jahr {
  background: rgba(255, 97, 0, 0.22);
  color: #FFD9BF;
}
.umw-station.ist-wendepunkt .umws-text h2 { color: var(--white); }
.umw-station.ist-wendepunkt .umws-text p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.umw-station.ist-wendepunkt .umws-knoten {
  background: var(--orange);
  border-color: var(--orange);
}

.umw-station.ist-ziel { grid-template-columns: minmax(0, 1fr); }
.umw-station.ist-ziel .umws-text { grid-column: 1; max-width: 46rem; }
.umw-station.ist-ziel .umws-text h2 { color: var(--orange-dark); }
.umw-station.ist-ziel .umws-karten {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin-top: 18px;
}


/* =========================================================================
   4 · WARUM ICH DAS HIER MACHE

   Text und daneben eine kleine, leicht gedrehte Polaroidkarte. Kein
   halbseitiges Foto: Der Abschnitt lebt vom Text.
   ========================================================================= */

.um-warum-sec {
  background: var(--peach);
  padding: clamp(56px, 7vw, 104px) 0;
}

.um-warum {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

/* Ohne Foto darf der Text die Breite nehmen, aber nicht die volle
   Zeilenlänge. Über 70 Zeichen wird Fließtext mühsam. */
.um-warum:not(:has(.umwa-polaroid)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
}

.umwa-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin: 0 0 20px;
}

.umwa-herz { font-size: 0.8em; vertical-align: baseline; }

.umwa-text p {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.28vw, 1.12rem);
  line-height: 1.75;
  color: #4E4038;
  margin: 0 0 14px;
  max-width: 48ch;
}
.umwa-text p:last-child { margin-bottom: 0; }

/* Hervorgehobene Wörter im Fließtext. Unterlegt statt fett: Fett würde
   in einem so langen Absatz wie eine Zwischenüberschrift wirken. */
.um-mark {
  background: linear-gradient(transparent 58%, rgba(255, 97, 0, 0.28) 58%);
  color: inherit;
  padding: 0 1px;
}

.umwa-polaroid {
  position: relative;
  background: var(--white);
  /* Unten nur so viel Rand wie oben. Den Platz für die Bildunterschrift
     macht die Unterschrift selbst, siehe .umwa-notiz. */
  padding: 12px 12px 14px;
  border-radius: 4px;
  box-shadow: 0 18px 44px rgba(90, 60, 35, 0.2);
  transform: rotate(-2.5deg);
  max-width: 320px;
  margin: 0 auto;
}

.umwa-bild {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
}
.umwa-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Die Bildunterschrift läuft im normalen Fluss, nicht absolut gesetzt.

   Absolut positioniert hing ihre Lesbarkeit an einer festen
   Innenabstandszahl weiter oben: Der Rahmen war 40 Pixel hoch, und
   sobald der Text zweizeilig wurde, stand die zweite Zeile unter dem
   weißen Rahmen im Nichts. Genau das wäre mit dem neuen, längeren Satz
   passiert. Im Fluss wächst der Rahmen mit. */
.umwa-notiz {
  display: block;
  margin-top: 12px;
  padding: 0 4px;
  text-align: center;
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--warm-grey);
}


/* =========================================================================
   5 · WAS FINANZIELLE FREIHEIT BEDEUTET
   ========================================================================= */

.umf-titel {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--charcoal);
  margin: 0 0 clamp(26px, 3.5vw, 42px);
  max-width: 24ch;
}

.umf-karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 14px;
}

.umf-karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.1);
  border-radius: var(--r-sm);
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(90, 60, 35, 0.04);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.umf-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(90, 60, 35, 0.1);
}

.umfk-zeichen { font-size: 1.35rem; line-height: 1.25; }

.umfk-text {
  font-family: var(--sans);
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--charcoal);
}


/* =========================================================================
   6 · MOMENTE ALS COLLAGE

   Versetzt, unterschiedlich groß, leicht überlappend. Eine Reihe gleich
   großer Kacheln wäre eine Galerie, und Galerien überblättert man.
   ========================================================================= */

.um-momente-sec {
  background: var(--white);
  padding: clamp(56px, 7vw, 104px) 0;
}

.umm-band {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: start;
}

/* Der Wischhinweis erscheint nur dort, wo es etwas zu wischen gibt.
   Am Rechner stehen alle Kacheln nebeneinander, da wäre er eine
   Falschaussage. */
.umm-wischhinweis { display: none; }

.umm-kachel {
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.umm-kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Je Bild einstellbar. Beim Café-Foto saß das Gesicht bei zentrierter
     Ausrichtung unter der Textblase. */
  object-position: var(--bildposition, center center);
  display: block;
}

.umm-kachel.ist-gross  { grid-column: 1 / 8;  aspect-ratio: 5 / 4; }
.umm-kachel.ist-klein  { grid-column: 9 / 13; aspect-ratio: 1;     margin-top: clamp(24px, 4vw, 56px); }
.umm-kachel.ist-mittel { grid-column: 5 / 12; aspect-ratio: 3 / 2; margin-top: clamp(-56px, -4vw, -20px); }

/* Die Textblase auf dem Bild. Der Verlauf darunter ist nicht Deko,
   sondern die Bedingung dafür, dass weiße Schrift auf einem hellen Foto
   lesbar bleibt. */
.umm-blase {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 52px 22px 20px;
  background: linear-gradient(rgba(45, 38, 32, 0), rgba(45, 38, 32, 0.82) 52%, rgba(45, 38, 32, 0.92));
  display: grid;
  gap: 5px;
}

.umm-ort {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFC9A3;
}

.umm-titel {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
}

.umm-text {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}


/* =========================================================================
   7 · MEIN EIGENER FINANZWEG
   ========================================================================= */

.um-geldweg-sec {
  background: var(--peach);
  padding: clamp(56px, 7vw, 104px) 0;
}

.umg-kopf { max-width: 44rem; margin: 0 0 clamp(28px, 3.5vw, 44px); }

.umg-kopf h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.25rem + 1.7vw, 2.5rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--charcoal);
  margin: 0;
}

.umg-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: start;
  gap: clamp(28px, 4vw, 60px);
}

.umg-stationen {
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(22px, 3vw, 36px);
  position: relative;
}

.umg-stationen::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(var(--orange), rgba(255, 97, 0, 0.2));
  border-radius: 2px;
}

.umg-station {
  position: relative;
  padding: 0 0 clamp(22px, 2.8vw, 32px);
}
.umg-station:last-child { padding-bottom: 0; }

.umg-station::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(22px, 3vw, 36px) + 1px);
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--peach);
  border: 2px solid var(--orange);
}

.umgs-marke {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 5px;
}

.umg-station h3,
.umg-heute h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--charcoal);
  margin: 0 0 7px;
}

.umg-station p {
  font-family: var(--sans);
  font-size: 0.93rem;
  line-height: 1.68;
  color: #5F4E42;
  margin: 0 0 8px;
}
.umg-station p:last-child { margin-bottom: 0; }

/* Der Satz, um den es in diesem Abschnitt geht. */
.umgs-zitat {
  margin: 12px 0 8px;
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--orange-dark);
}

.umgs-nachsatz { font-style: italic; }

.umg-bild {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 5;
  position: sticky;
  top: calc(var(--kopf-hoehe, 84px) + 24px);
}
.umg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Heute: die drei Bausteine --- */

.umg-heute {
  margin-top: clamp(32px, 4vw, 52px);
  background: var(--white);
  border-radius: var(--r);
  padding: clamp(24px, 3.5vw, 44px);
}

.umg-heute h3 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.umg-bausteine {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
}

.umg-baustein {
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 18px 14px;
}

.umgb-zeichen { font-size: 1.7rem; line-height: 1.1; }

.umgb-titel {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--charcoal);
}

.umgb-text {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--warm-grey);
}

.umg-heute p {
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.72;
  color: #5F4E42;
  margin: 0 0 12px;
  max-width: 58ch;
}

.umg-schluss {
  margin: 18px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid rgba(90, 60, 35, 0.14);
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.2rem) !important;
  color: var(--orange-dark) !important;
  max-width: 56ch;
}


/* =========================================================================
   8 · QUALIFIKATIONEN
   ========================================================================= */

.umq-titel {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.024em;
  color: var(--charcoal);
  margin: 0 0 clamp(24px, 3vw, 36px);
  max-width: 36ch;
}

.umq-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}

.umq-punkt {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}

.umqp-jahr {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-dark);
  padding-top: 2px;
}

.umqp-inhalt h3 {
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--charcoal);
  margin: 0 0 4px;
}

.umqp-inhalt p {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--warm-grey);
  margin: 0;
}

.umq-dok {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 97, 0, 0.3);
  padding-bottom: 1px;
}
.umq-dok:hover { border-bottom-color: var(--orange); }

.umq-register {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--warm-grey);
}


/* =========================================================================
   9 · SOCIAL PROOF
   ========================================================================= */

.um-proof { text-align: center; margin: 0 0 clamp(28px, 3.5vw, 44px); }

.ump-ueberleitung {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--charcoal);
  margin: 0 0 20px;
}

.ump-zahlen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 4vw, 48px);
}

.ump-kachel { display: grid; justify-items: center; gap: 2px; }

.umpz-wert {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--orange);
}

.umpz-label {
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--warm-grey);
}


/* =========================================================================
   10 · ABSCHLUSS
   ========================================================================= */

.um-abschluss {
  background: var(--charcoal);
  padding: clamp(56px, 7vw, 104px) 0;
}

.uma-inner { max-width: 44rem; margin: 0 auto; text-align: center; }

.uma-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.7rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--white);
  margin: 0 0 18px;
}

.umab-text,
.umab-text-zwei {
  font-family: var(--sans);
  font-size: clamp(0.98rem, 0.94rem + 0.28vw, 1.08rem);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto 12px;
  max-width: 48ch;
}

.umab-text-zwei { color: var(--white); font-weight: 600; margin-bottom: 26px; }

.umab-meta {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 16px 0 0;
}

.umab-beruhigung {
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 22px auto 0;
  max-width: 46ch;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}


/* =========================================================================
   11 · SCHMALE BILDSCHIRME

   Nicht „alles untereinander", sondern eigene Entscheidungen je
   Abschnitt.
   ========================================================================= */

@media (max-width: 1000px) {
  .um-warum { grid-template-columns: minmax(0, 1fr); }
  .umwa-polaroid { transform: rotate(-1.5deg); }
  .umg-inhalt { grid-template-columns: minmax(0, 1fr); }
  .umg-bild { position: static; max-width: 460px; }
}

@media (max-width: 900px) {
  .umh-raster { grid-template-columns: minmax(0, 1fr); }
  .umh-text { margin-right: 0; padding-right: 0; }

  /* --- Zeitleiste: Linie nach links, alles einspaltig --- */
  .umw-linie { left: 7px; transform: none; }
  .umw-station,
  .umw-station.ist-wendepunkt,
  .umw-station.ist-ziel {
    grid-template-columns: minmax(0, 1fr);
    padding-left: clamp(28px, 6vw, 40px);
    row-gap: 18px;
  }
  .umw-station .umws-text,
  .umw-station .umws-bild { grid-column: 1; }
  .umw-station.ist-rechts .umws-bild { grid-row: auto; }
  .umws-knoten { left: 7px; transform: translateX(-50%); }
  .umw-station.ist-dran .umws-knoten { transform: translateX(-50%) scale(1.2); }
  .umw-station.format-hoch .umws-bild,
  .umw-station.format-klein .umws-bild { max-width: none; }

  /* Einspaltig gibt es keinen Zwischenraum mehr, in den das Bild
     hineinragen könnte. Ohne diese Zeile stünde es links über den Rand
     hinaus und die Seite ließe sich waagerecht schieben. */
  .umw-station.format-story .umws-bild {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 7px;
  }

  /* --- Collage: aus dem 12-Spalten-Raster wird ein Wischband --- */
  .umm-wischhinweis {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--warm-grey);
  }
  .umm-wischhinweis span { color: var(--orange); font-size: 0.95rem; }

  .umm-band {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .umm-band::-webkit-scrollbar { display: none; }
  .umm-kachel,
  .umm-kachel.ist-gross,
  .umm-kachel.ist-klein,
  .umm-kachel.ist-mittel {
    grid-column: auto;
    aspect-ratio: 4 / 5;
    margin-top: 0;
    scroll-snap-align: center;
  }
  /* Am Rechner steuert die Inhaltsdatei den Ausschnitt je Kachel. Mobil
     ist jede Kachel 4:5 und damit genauso hoch wie der Zuschnitt der
     Datei. Ein Verschieben würde hier nur Rand abschneiden. */
  .umm-kachel img { object-position: center center; }

  /* Die Textblase auf einer schmalen Kachel: etwas weniger Vorlauf im
     Verlauf, dafür lesbarer Fließtext. */
  .umm-blase { padding: 44px 18px 18px; }
  .umm-text { font-size: 0.9rem; }
}

@media (max-width: 768px) {
  /* --- Hero: ein Screen, Gesicht im Fokus --- */
  .um-hero {
    padding-top: calc(var(--kopf-hoehe, 84px) + 16px);
    padding-bottom: 32px;
  }
  .umh-raster { position: relative; display: block; }
  .umh-schein { right: -20%; width: 90%; }
  .umh-form-eins { top: 3%; left: -8%; }
  .umh-form-zwei { display: none; }

  .umh-bild {
    aspect-ratio: 3 / 4;
    border-radius: var(--r);
    /* Auf dem Handy liegt der Text auf dem Bild. Ein auslaufender
       Bildrand würde die Schrift an genau dieser Stelle unlesbar machen,
       deshalb hier keine Maske. */
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow: 0 16px 40px rgba(90, 60, 35, 0.2);
  }
  .umh-bild img { object-position: center 18%; }

  .umh-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 64px 20px 22px;
    background: linear-gradient(rgba(45, 38, 32, 0), rgba(45, 38, 32, 0.82) 46%, rgba(45, 38, 32, 0.94));
    border-radius: 0 0 var(--r) var(--r);
  }
  .umh-text .eyebrow { color: rgba(255, 255, 255, 0.75); margin-bottom: 8px; }
  .umh-text h1 { color: var(--white); font-size: 2.5rem; margin-bottom: 10px; }
  .umh-claim { color: #FFD9BF; font-size: 1.08rem; margin-bottom: 8px; max-width: none; }
  .umh-zweite { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; max-width: none; }


  /* --- Stationsleiste wischbar --- */
  .umw-leiste {
    grid-auto-flow: column;
    grid-auto-columns: minmax(84px, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .umw-leiste::-webkit-scrollbar { display: none; }
  .umw-schiene { left: 42px; right: 42px; }
  .umw-marke { font-size: 0.6rem; letter-spacing: 0.03em; }

  .umf-karten { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .umf-karte { padding: 16px 18px; }
  .umq-liste { grid-template-columns: minmax(0, 1fr); }
  .umq-punkt { grid-template-columns: 76px minmax(0, 1fr); }
  .umm-band { grid-auto-columns: 84%; }
}

@media (max-width: 380px) {
  .umh-text h1 { font-size: 2.1rem; }
  .umh-text { padding: 52px 16px 18px; }
  .umq-punkt { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}


/* =========================================================================
   12 · WENIGER BEWEGUNG
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .umw-fortschritt,
  .umwm-punkt,
  .umws-knoten,
  .umf-karte { transition: none; }
  .umf-karte:hover { transform: none; }
}