.ueber__auftakt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:center}
.ueber__copy{display:grid; gap:14px; max-width:60ch}
.ueber__copy .h2{margin:0}
.ueber__copy .lead{font-size:1.1rem; color:var(--navy-600); font-weight:500}
.ueber__copy p{margin:0; color:var(--ink-muted)}
.ueber__bild{margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-muted)}
.ueber__bild img{width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.ueber__bild--hoch img{aspect-ratio:4/5}
/* Volle Breite, damit die Seite wie die Live-Fassung von Bildern getragen wird */
.fotoband{margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-muted)}
.fotoband img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block}
.fotoband figcaption{padding:14px 4px 0; color:var(--ink-soft); font-size:.92rem}
/* Prozess mittig und gross - die drei schmalen Linienspalten waren zu mager */
.prozess{text-align:center}
.prozess .eyebrow{justify-content:center}
.prozess__titel{margin:6px auto 0; max-width:22ch}
.prozess__schritte{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,64px); margin-top:clamp(38px,4.5vw,64px)}
.prozess__schritte li{display:grid; gap:14px; justify-items:center; align-content:start}
.prozess__kreis{display:grid; place-items:center; width:76px; height:76px; border-radius:50%;
  background:var(--navy-900); color:var(--sun-500)}
.prozess__kreis i, .prozess__kreis svg{width:32px; height:32px}
.prozess__schritte h3{margin:0; font-size:1.28rem; font-weight:600; color:var(--navy-900)}
.prozess__schritte p{margin:0; max-width:34ch; color:var(--ink-muted); line-height:1.62}
/* Fassung 11.09.2026: Raster und warmer Schein statt einfarbigem Navy,
   grosse weisse Ziffern mit hochgestelltem Plus, gelber Strich vor dem Label. */
.zahlen{position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-xl);
  padding:clamp(30px,4vw,54px) clamp(26px,4vw,64px) clamp(34px,4.4vw,60px);
  background:var(--navy-950); color:var(--white)}
.zahlen::before{content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/100% 54px,
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/54px 100%}
.zahlen::after{content:""; position:absolute; z-index:-1; pointer-events:none;
  width:640px; height:360px; left:22%; top:-200px; transform:translateX(-50%);
  background:var(--glow-sun); opacity:.34}
.zahlen__kopf{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:12px; padding-bottom:20px; margin-bottom:clamp(26px,3vw,44px);
  border-bottom:1px solid rgba(255,255,255,.13)}
.zahlen__kopf .eyebrow{color:var(--sun-500)}
.zahlen__orte{margin:0; color:var(--navy-300); font-size:.95rem}
.zahlen__reihe{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,48px)}
.zahlen__reihe li{display:grid; gap:14px}
.zahl__wert{font-family:var(--font-display); font-size:clamp(3rem,6.4vw,5.2rem); font-weight:700;
  line-height:.92; letter-spacing:-.045em; color:var(--white)}
.zahl__wert sup{font-size:.32em; font-weight:700; vertical-align:super; margin-left:.06em;
  color:var(--navy-300)}
.zahl__lbl{display:flex; align-items:center; gap:12px; color:var(--white); font-weight:600; font-size:1rem}
.zahl__lbl::before{content:""; width:26px; height:2px; background:var(--sun-500); flex:0 0 26px}
/* Eigener Dreierschritt statt .steps: das ist ein Zeitstrahl fuer vier Stationen,
   mit drei Eintraegen bleibt eine Spalte leer und die Linie haengt in der Luft. */
.weg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.4vw,56px); margin-top:clamp(28px,3vw,44px)}
.weg li{display:grid; gap:12px; align-content:start; padding-top:22px; border-top:2px solid var(--navy-900)}
.weg__nr{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--navy-500)}
.weg h3{margin:0; font-size:1.2rem; font-weight:600; color:var(--navy-900)}
.weg p{margin:0; color:var(--ink-muted); line-height:1.6}
.ueber__versprechen{background:var(--bg-subtle)}
.ueber__promise{max-width:72ch}
.ueber__promise .h2{margin:6px 0 12px}
.ueber__promise p{color:var(--ink-muted); margin:0}
.ueber__mini{font-size:.92rem; color:var(--navy-500); margin:0}
/* Der Ablauf hat fuenf Schritte - auto-fit statt fester Spaltenzahl,
   sonst bleibt in jeder Reihe eine Luecke stehen. */
.weg--vier{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ueber__lead{max-width:70ch; margin:10px 0 0; color:var(--ink-muted)}
/* Bewusst keine Karten: das waere die vierte Kachelreihe der Seite.
   Eine Oberlinie je Eintrag reicht als Gliederung. */
.punkte{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,44px); margin-top:clamp(26px,3vw,40px)}
.punkte li{display:grid; gap:8px; align-content:start; padding-top:18px; border-top:1px solid var(--border)}
.punkte h3{margin:0; font-size:1.06rem; font-weight:600; color:var(--navy-900)}
.punkte p{margin:0; color:var(--ink-muted); line-height:1.6}
.orte{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px); margin-top:clamp(24px,3vw,38px)}
.orte li{display:grid; gap:8px; align-content:start; padding:22px 24px; border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--border)}
.orte h3{margin:0; font-size:1.1rem; font-weight:600; color:var(--navy-900)}
.orte p{margin:0; color:var(--ink-muted); line-height:1.6}
.orte__zeit{font-weight:600; color:var(--navy-700)}
.orte a{color:var(--navy-900); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:7px}
.orte a:hover{color:var(--navy-600)}
/* Ohne feste Groesse zeichnet Lucide das Symbol in Schriftgroesse des Elternteils
   und es wird riesig, sobald der Link umbricht */
.orte a i, .orte a svg{width:18px; height:18px; flex:0 0 18px}
.ueber__partner{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center}
.marken{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,26px); align-items:center}
.marken li{display:grid; place-items:center; padding:14px; border-radius:var(--r-md); background:var(--bg-subtle)}
.marken img{max-width:100%; height:34px; object-fit:contain; opacity:.78}
@media (max-width:1040px){ .weg--vier{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .ueber__auftakt{grid-template-columns:1fr}
  .ueber__auftakt--gedreht .ueber__bild{order:2}
  .zahlen__reihe{grid-template-columns:1fr; gap:20px}
  .weg, .weg--vier{grid-template-columns:1fr; gap:22px}
  .weg li{padding-top:16px}
  .prozess__schritte{grid-template-columns:1fr; gap:34px}
  .ueber__bild--hoch img{aspect-ratio:3/2}
  .punkte{grid-template-columns:1fr; gap:18px}
  .orte{grid-template-columns:1fr}
  .ueber__partner{grid-template-columns:1fr}
  .marken{grid-template-columns:repeat(3,minmax(0,1fr))}
}