/* ==========================================================================
   RGN Marketing · Suchmaschinenoptimierung
   Eigene Bauteile dieser Seite. Design-Token und Grundraster kommen aus
   design.css, die geteilten Sektionen aus style.css.
   ========================================================================== */

/* ══ HERO — die Suchergebnisseite, die aufsteigt ═════════════════════════ */
.hero--seo .kicker{display:block;margin-bottom:.9rem}
/* Eigene Grade nur für diese Seite — die Ads-Seite behält ihre Hero-Größen.
   Beide Zeilen gleich groß, zeile1 steht auf nowrap und muss einzeilig passen. */
.hero--seo .hero__h2 .zeile1,.hero--seo .hero__h2 .zeile2{font-size:clamp(1.2rem,7.4cqi,3.3rem)}
.hero--seo.raster::before{
  mask-image:radial-gradient(ellipse 60% 74% at 74% 48%,#000 24%,transparent 74%)}

.sb{position:relative;display:flex;justify-content:flex-start}

/* Die nachgebaute Trefferliste. Google-Farben sind hier erlaubt (A3):
   innerhalb einer nachgebauten Produkt-Oberfläche. */
.serp{position:relative;width:min(92%,400px);margin-right:auto;background:#fff;
  border:1px solid var(--li);border-radius:var(--r-card);box-shadow:var(--sh-3);
  overflow:hidden}
.serp__leiste{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.85rem 1rem;border-bottom:1px solid var(--li-soft)}
.serp__g{width:18px;height:18px;flex:0 0 auto}
.serp__feld{flex:1 1 auto;min-width:0;background:var(--papier-2);
  border:1px solid var(--g-rand,var(--li));border-radius:var(--r-pill);
  padding:.4rem .85rem;font-size:13px;color:var(--g-tx,#202124);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp__treffer{flex:1 0 100%;font-size:11px;color:var(--g-tx-mut,#70757a)}

.serp__leib{padding:.9rem 1rem 1.1rem}

/* Fünf Plätze. Jede Zeile trägt ihren Abstand von oben je Phase als Pixelwert —
   CSS kann `order` nicht animieren, und die eigene Zeile ist höher als die
   anderen, deshalb reicht Platznummer × Zeilenhöhe nicht. */
.serp__org{position:relative;height:296px}
.serp__t{position:absolute;left:0;right:0;top:0;height:52px;
  display:grid;grid-template-columns:22px 1fr;gap:.6rem;align-items:center;
  transform:translateY(var(--p1))}
.laeuft .serp__t{animation:serpRutsch 7s var(--fed-weich) 1.1s infinite}
/* Jede Zeile trägt drei Platznummern übereinander — eine je Phase. Sonst
   stünde beim Aufstieg zweimal die 1 untereinander. */
.serp__nr{position:relative;display:block;height:1.4em;text-align:center;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.75rem;color:var(--tx-mut)}

/* Platzhalter-Zeilen: bewusst ohne Namen und ohne erfundene Wettbewerber */
.serp__zeug{display:grid;gap:7px}
.serp__zeug i{display:block;height:7px;border-radius:4px;background:var(--papier-3)}
.serp__zeug i:first-child{width:62%}
.serp__zeug i:last-child{width:88%;height:5px;opacity:.7}

/* Der eigene Treffer trägt als einziger echten Inhalt */
.serp__t--du{height:88px;align-items:start;padding:.55rem .7rem;
  border-radius:12px;background:var(--papier-2);box-shadow:inset 0 0 0 1px var(--li-soft)}
.serp__inhalt{display:block;min-width:0}
.serp__t-t{display:block;font-size:14px;font-weight:400;line-height:1.3;color:#1A0DAB}
.serp__t-u{display:block;font-style:normal;font-size:11.5px;color:var(--g-tx-mut,#70757a);
  margin-top:2px}
/* Die eigene Zeile hat eine feste Höhe (die Plätze rechnen damit) — der
   Beschreibungstext wird deshalb auf zwei Zeilen begrenzt. */
.serp__t-x{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:4px;font-size:11.5px;line-height:1.5;
  color:var(--g-tx-mut,#70757a)}

.serp__p{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.serp__p--a{opacity:1}   /* Ruhezustand, falls die Szene nie startet */
/* Der eigene Treffer trägt seine Nummer kräftiger */
.serp__nr--du .serp__p{font-size:.8125rem;font-weight:700;color:var(--tx)}
.laeuft .serp__p--a{animation:serpZahlA 7s steps(1,end) 1.1s infinite}
.laeuft .serp__p--b{animation:serpZahlB 7s steps(1,end) 1.1s infinite}
.laeuft .serp__p--c{animation:serpZahlC 7s steps(1,end) 1.1s infinite}

@keyframes serpRutsch{
  0%,16%   {transform:translateY(var(--p1))}
  30%,52%  {transform:translateY(var(--p2))}
  66%,100% {transform:translateY(var(--p3))}
}
@keyframes serpZahlA{0%,16%{opacity:1} 17%,100%{opacity:0}}
@keyframes serpZahlB{0%,29%{opacity:0} 30%,52%{opacity:1} 53%,100%{opacity:0}}
@keyframes serpZahlC{0%,65%{opacity:0} 66%,100%{opacity:1}}

/* Search Console, der Leistungsansicht nachgebaut. Die Kachelfarben sind die
   des Originals — erlaubt nach A3, weil es eine Produkt-Oberfläche ist. */
.gsc{position:absolute;right:-2%;bottom:-20%;width:min(70%,280px);
  background:#fff;border:1px solid var(--li);border-radius:var(--r-card);
  box-shadow:var(--sh-3);overflow:hidden}
.gsc__kopf{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;
  border-bottom:1px solid var(--li-soft)}
.gsc__titel{font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx-mut)}
.gsc__zeit{margin-left:auto;font-size:.5625rem;color:var(--tx-mut);white-space:nowrap}

.gsc__kacheln{display:grid;grid-template-columns:1.15fr 1.25fr 1fr;
  border-bottom:1px solid var(--g-rand,#DADCE0)}
.gsc__k{padding:.5rem .55rem .55rem;min-width:0;border-right:1px solid var(--g-rand-soft,#E8EAED)}
.gsc__k:last-child{border-right:0}
.gsc__k--klick{background:#4285F4;border-right-color:rgba(255,255,255,.3)}
.gsc__k--imp{background:#5E35B1;border-right-color:rgba(255,255,255,.3)}
.gsc__k-n{display:flex;align-items:center;gap:.25rem;font-size:.5rem;line-height:1.2;
  color:var(--g-tx-mut,#5F6368);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsc__k--klick .gsc__k-n,.gsc__k--imp .gsc__k-n{color:rgba(255,255,255,.92)}
/* Das Häkchen-Kästchen der aktiven Metrik, wie im Original */
.gsc__hk{width:7px;height:7px;border:1px solid currentColor;border-radius:1px;
  flex:0 0 auto;position:relative}
.gsc__k--klick .gsc__hk,.gsc__k--imp .gsc__hk{background:currentColor}
.gsc__hk--leer{opacity:.6}
.gsc__k-w{display:block;margin-top:.2rem;font-size:.9375rem;font-weight:400;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.gsc__k:not(.gsc__k--klick):not(.gsc__k--imp) .gsc__k-w{color:var(--g-tx,#202124)}
.gsc__k-w--grau{color:var(--g-tx-mut,#5F6368)}

.gsc__plot{position:relative;display:grid;grid-template-columns:auto 1fr auto;
  align-items:stretch;gap:.3rem;padding:.6rem .55rem .35rem}
.gsc__achse{display:flex;flex-direction:column;justify-content:space-between;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.4375rem;
  color:var(--g-tx-mut,#5F6368)}
.gsc__achse--l{color:#4285F4} .gsc__achse--r{color:#5E35B1;text-align:right}
.gsc__achse i{font-style:normal}
.gsc__chart{display:block;width:100%;height:clamp(58px,7vw,76px)}
.gsc__gitter line{stroke:var(--g-rand-soft,#E8EAED);stroke-width:1}
.gsc__linie{stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.gsc__linie--klick{stroke:#4285F4}
.gsc__linie--imp{stroke:#5E35B1}
.laeuft .gsc__linie--imp{animation:zeichnen 2s var(--fed-weich) .7s forwards}
.laeuft .gsc__linie--klick{animation:zeichnen 2s var(--fed-weich) .95s forwards}
.gsc__tage{display:flex;justify-content:space-between;padding:0 .55rem .6rem;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.4375rem;
  color:var(--g-tx-mut,#5F6368)}

@media (prefers-reduced-motion:reduce){
  .laeuft .serp__t{animation:none;transform:translateY(var(--p3))}
  .laeuft .serp__p--a,.laeuft .serp__p--b{animation:none;opacity:0}
  .laeuft .serp__p--c{animation:none;opacity:1}
}
/* Mobil führt die Überschrift, die Trefferliste kommt darunter. Der Satellit
   stellt sich sonst als Flex-Geschwister neben die Karte — deshalb Spalte. */
@media (max-width:1040px){
  .hero--seo .sb{display:contents}
  .hero--seo .gsc{position:static;order:0;width:100%;margin:0 0 1.7rem}
  /* Mobil trägt die Search Console den Hero allein. Die Trefferliste entfällt —
     sie sagt dasselbe ein zweites Mal und kostet einen halben Bildschirm. */
  .hero--seo .serp{display:none}
}

/* ══ MIETE ODER EIGENTUM ═════════════════════════════════════════════════ */
.mi{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(2rem,4vw,3.5rem);
  align-items:center}
.mi__txt .t-lead{color:var(--tx-inv-mut);margin-top:1.05rem}
.mi__karten{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;
  margin-top:clamp(1.6rem,2.8vw,2.2rem)}
.mi__k{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm);padding:.95rem 1rem 1.05rem;
  opacity:0;transform:translateY(8px)}
.laeuft .mi__k{animation:feedRein .55s var(--fed-weich) var(--d,0s) forwards}
.mi__k--seo{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.09)}
.mi__k-n{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tx-inv-mut)}
.mi__k-t{display:block;margin-top:.5rem;font-size:.9375rem;font-weight:700;
  letter-spacing:-.02em;color:#fff}
.mi__k em{display:block;font-style:normal;margin-top:.35rem;font-size:.8125rem;line-height:1.55;
  color:var(--tx-inv-mut)}
.mi__bild{margin:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:clamp(1.1rem,2.2vw,1.6rem)}
.mi__legende{display:flex;flex-wrap:wrap;gap:1.1rem;margin-bottom:1rem}
.mi__l{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;
  color:var(--tx-inv-mut)}
.mi__l i{width:16px;height:2px;border-radius:2px;background:rgba(255,255,255,.45)}
.mi__l--seo i{background:#fff;height:3px}
.mi__plot{position:relative}
.mi__plot svg{display:block;width:100%;height:clamp(150px,20vw,210px)}
.mi__gitter line{stroke:rgba(255,255,255,.1);stroke-width:1}
.mi__linie{stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.mi__linie--ads{stroke:rgba(255,255,255,.4);stroke-width:2;stroke-dasharray:var(--len)}
.mi__linie--seo{stroke:#fff;stroke-width:3}
.laeuft .mi__linie--ads{animation:zeichnen 1.5s var(--fed-weich) .35s forwards}
.laeuft .mi__linie--seo{animation:zeichnen 2.4s var(--fed-weich) .9s forwards}
/* Der Abbruch bekommt die einzige Signalfarbe der Sektion */
.mi__stop{position:absolute;left:64%;top:4%;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.6875rem;color:#FF9A8E;opacity:0}
.mi__stop i{width:7px;height:7px;border-radius:50%;background:#FF9A8E;flex:0 0 auto}
.laeuft .mi__stop{animation:feedRein .5s var(--fed-weich) 1.7s forwards}
.mi__achse{display:flex;justify-content:space-between;margin-top:.7rem;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.05em;
  color:rgba(255,255,255,.45)}
.mi__hin{margin:.9rem 0 0;font-size:.6875rem;line-height:1.5;color:rgba(255,255,255,.45)}

/* ══ VIER FLÄCHEN ════════════════════════════════════════════════════════
   Jede Kachel zeigt eine Miniatur der Oberfläche, die im zugehörigen Kapitel
   in groß kommt. Das verbindet Übersicht und Strecke und sieht nach Produkt
   aus statt nach Dekoration. */
.fl{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.5vw,1.15rem);
  margin-top:clamp(2rem,4vw,3rem)}
.fl__k{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--li);border-radius:var(--r-card);
  padding:clamp(.9rem,1.6vw,1.15rem);box-shadow:var(--sh-1);
  opacity:0;transform:translateY(10px);
  transition:border-color .22s var(--e-ui),box-shadow .22s var(--e-ui),
             transform .22s var(--e-ui)}
.laeuft .fl__k{animation:feedRein .6s var(--fed-weich) var(--d,0s) forwards}
.fl__k:hover{border-color:var(--graphit);box-shadow:var(--sh-2)}
.laeuft .fl__k:hover{transform:translateY(-3px)}

/* Die Bildfläche ist ein eigenes Fenster mit Innenkante und weichem Licht */
.fl__bild{position:relative;height:108px;margin-bottom:clamp(.9rem,1.7vw,1.2rem);
  border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#FBFBFC 0%,var(--papier-2) 100%);
  box-shadow:inset 0 0 0 1px var(--li-soft)}
.fm{position:absolute;inset:0;display:grid;place-content:center}

.fl__nr{font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.09em;color:var(--tx-mut)}
.fl__t{margin-top:.4rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.03em}
.fl__x{display:block;font-style:normal;margin-top:.45rem;font-size:.8125rem;line-height:1.6;
  color:var(--tx-mut)}
.fl__mehr{margin-top:auto;padding-top:1rem;font-size:.8125rem;font-weight:600;
  letter-spacing:-.01em}
.fl__mehr::after{content:" →";display:inline-block;opacity:.5;
  transition:transform .2s var(--e-ui),opacity .2s var(--e-ui)}
.fl__k:hover .fl__mehr::after{opacity:1;transform:translateX(3px)}

/* --- 01 Prüfwert und drei erledigte Zeilen ----------------------------- */
.fm--tech{grid-auto-flow:column;align-items:center;gap:.85rem;place-content:center}
.fmr{position:relative;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;
  background:conic-gradient(var(--ink) calc(var(--f,0) * 1%),var(--papier-3) 0)}
.laeuft .fmr{animation:cwvFuellen 1.4s var(--fed-weich) .6s forwards}
.fmr::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.fmr b{position:relative;z-index:1;font-size:.875rem;font-weight:700;letter-spacing:-.03em}
.fmz{display:grid;gap:.34rem}
.fmz i{display:flex;align-items:center;gap:.4rem;font-style:normal;font-size:.625rem;
  color:var(--tx-mut);white-space:nowrap}
.fmz s{width:12px;height:12px;border-radius:50%;background:var(--ink);flex:0 0 auto;
  position:relative;transform:scale(0)}
.fmz s::after{content:"";position:absolute;left:3px;top:5.5px;width:4px;height:1.5px;
  background:#fff;border-radius:1px;transform:rotate(45deg);
  box-shadow:2.6px -2.2px 0 0 #fff,3.6px -3.6px 0 0 #fff}
.laeuft .fmz s{animation:fmHaken .4s var(--fed-weich) forwards}
.laeuft .fmz i:nth-child(1) s{animation-delay:.75s}
.laeuft .fmz i:nth-child(2) s{animation-delay:.95s}
.laeuft .fmz i:nth-child(3) s{animation-delay:1.15s}
@keyframes fmHaken{to{transform:scale(1)}}

/* --- 02 Miniatur der Seitenstruktur ------------------------------------ */
.fm--silo{position:absolute;inset:0;display:block}
.fm--silo svg{position:absolute;left:50%;top:50%;width:132px;height:74px;
  margin:-37px 0 0 -66px;fill:none;stroke:rgba(42,48,51,.28);stroke-width:1.2}
.fms{position:absolute;left:50%;font-style:normal;font-size:.5625rem;line-height:1;
  padding:.3rem .45rem;border-radius:5px;background:#fff;border:1px solid var(--li);
  color:var(--tx-mut);white-space:nowrap;transform:translateX(-50%) scale(.85);opacity:0}
.laeuft .fms{animation:fmPop .45s var(--fed-weich) forwards}
@keyframes fmPop{to{opacity:1;transform:translateX(-50%) scale(1)}}
.fms--hub{top:calc(50% - 44px);background:var(--ink);border-color:var(--ink);color:#fff;
  font-weight:600;animation-delay:.5s}
.fms--a{top:calc(50% + 14px);margin-left:-44px;animation-delay:.72s}
.fms--b{top:calc(50% + 14px);animation-delay:.84s}
.fms--c{top:calc(50% + 14px);margin-left:44px;animation-delay:.96s}

/* --- 03 Miniatur des Rasterscans --------------------------------------- */
.fl__bild--karte{background:#E9F0EA}
.fm--karte{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);
  place-items:center;padding:.9rem 1.1rem;gap:.3rem}
.fmk__grund{position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 0 30%,#fff 30% 31.6%,transparent 31.6%),
    linear-gradient(90deg,transparent 0 68%,#fff 68% 69.4%,transparent 69.4%),
    linear-gradient(0deg,transparent 0 38%,#fff 38% 40%,transparent 40%),
    linear-gradient(0deg,transparent 0 76%,#fff 76% 77.6%,transparent 77.6%)}
.fmk{position:relative;display:grid;place-items:center;width:19px;height:19px;
  border-radius:50%;font-style:normal;font-size:.5rem;font-weight:700;color:#fff;
  font-family:'Geist Mono',ui-monospace,monospace;
  box-shadow:0 1px 2px rgba(16,20,30,.25);transform:scale(0)}
.fmk--g{background:#17A97F} .fmk--o{background:#F2A93B}
.laeuft .fmk{animation:fmHaken .4s var(--fed-weich) forwards}
.laeuft .fmk:nth-child(2){animation-delay:.50s} .laeuft .fmk:nth-child(3){animation-delay:.54s}
.laeuft .fmk:nth-child(4){animation-delay:.58s} .laeuft .fmk:nth-child(5){animation-delay:.62s}
.laeuft .fmk:nth-child(6){animation-delay:.66s} .laeuft .fmk:nth-child(7){animation-delay:.70s}
.laeuft .fmk:nth-child(8){animation-delay:.74s} .laeuft .fmk:nth-child(9){animation-delay:.78s}
.laeuft .fmk:nth-child(10){animation-delay:.82s} .laeuft .fmk:nth-child(11){animation-delay:.86s}
.laeuft .fmk:nth-child(12){animation-delay:.90s} .laeuft .fmk:nth-child(13){animation-delay:.94s}
.laeuft .fmk:nth-child(14){animation-delay:.98s} .laeuft .fmk:nth-child(15){animation-delay:1.02s}
.laeuft .fmk:nth-child(16){animation-delay:1.06s} .laeuft .fmk:nth-child(17){animation-delay:1.10s}

/* --- 04 Miniatur der Link-Leiter --------------------------------------- */
.fm--leiter{display:grid;gap:.42rem;width:min(76%,132px);place-content:stretch}
.fml{display:grid;grid-template-columns:14px 1fr;align-items:center;gap:.4rem}
.fml s{display:grid;place-items:center;width:14px;height:14px;border-radius:4px;
  background:var(--papier-3);text-decoration:none;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.5rem;color:var(--tx-mut)}
.fml--top s{background:var(--ink);color:#fff}
.fml u{display:block;height:4px;border-radius:2px;background:var(--papier-3);
  position:relative;overflow:hidden}
.fml u::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.laeuft .fml u::after{animation:auNach .7s var(--fed-weich) forwards}
.laeuft .fml:nth-child(1) u::after{animation-delay:.55s}
.laeuft .fml:nth-child(2) u::after{animation-delay:.72s}
.laeuft .fml:nth-child(3) u::after{animation-delay:.89s}
.laeuft .fml:nth-child(4) u::after{animation-delay:1.06s}

@media (max-width:980px){
  .mi{grid-template-columns:1fr}
  .fl{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .mi__karten{grid-template-columns:1fr}
  .fl{grid-template-columns:1fr}
}

/* ══ DIE STRECKE — vier Kapitel, abwechselnd Text/Oberfläche ═════════════ */
.kap__grid{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(2rem,4.5vw,4rem);
  align-items:center}
/* Jedes zweite Kapitel dreht die Seiten */
.kap--dreh .kap__txt{order:2}
.kap--dreh .kap__ui{order:1}
.kap__nr{display:block;margin-bottom:.9rem;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx-mut)}
.kap__txt .t-lead{margin-top:1.05rem}
.kap__liste{margin-top:clamp(1.4rem,2.4vw,1.9rem)}
.kap__satz{margin:clamp(1.3rem,2.4vw,1.8rem) 0 0;font-size:.875rem;line-height:1.65;
  color:var(--tx-mut);padding-left:.9rem;border-left:2px solid var(--li)}
.kap__hin{margin:.8rem 0 0;font-size:.6875rem;line-height:1.5;color:var(--tx-mut);
  text-align:right}

/* Gemeinsamer Rahmen aller nachgebauten Oberflächen dieser Seite */
.au,.si,.lo,.ao{background:#fff;border:1px solid var(--li);border-radius:var(--r-card);
  box-shadow:var(--sh-2);overflow:hidden}
.au__kopf,.si__kopf,.lo__kopf,.ao__kopf{display:flex;align-items:center;gap:.6rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--li-soft);background:var(--papier)}
.au__titel,.si__titel,.lo__titel,.ao__titel{font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.6875rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx-mut)}
.au__zahl,.si__zahl,.lo__zahl,.ao__zahl{margin-left:auto;padding:.12rem .5rem;
  border:1px solid var(--li);border-radius:var(--r-pill);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;color:var(--tx-mut);
  white-space:nowrap}

/* --- 01 Technische Prüfung --------------------------------------------- */
.au__leib{padding:1rem 1.1rem;display:grid;gap:.85rem}
.au__zeile{display:grid;grid-template-columns:1fr 34% auto;gap:.8rem;align-items:center}
.au__n{font-size:.8125rem;color:var(--tx);min-width:0}
.au__bar{position:relative;height:7px;border-radius:4px;background:var(--papier-3);
  overflow:hidden}
/* Der Befund steht als heller Balken, die Behebung fährt darüber */
.au__vor{position:absolute;inset:0;width:var(--v);border-radius:4px;background:#E2B4AE}
.au__nach{position:absolute;inset:0;width:var(--v);border-radius:4px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%}
.laeuft .au__nach{animation:auNach 1s var(--fed-weich) forwards}
.au__zeile:nth-child(1) .au__nach{animation-delay:.5s}
.au__zeile:nth-child(2) .au__nach{animation-delay:.72s}
.au__zeile:nth-child(3) .au__nach{animation-delay:.94s}
.au__zeile:nth-child(4) .au__nach{animation-delay:1.16s}
@keyframes auNach{to{transform:scaleX(1)}}
.au__w{display:flex;align-items:center;gap:.35rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.75rem;white-space:nowrap}
.au__alt{color:var(--tx-mut);text-decoration:line-through;text-decoration-thickness:1px}
.au__w i{font-style:normal;color:var(--tx-mut);opacity:.6}
.au__neu{color:var(--tx);font-weight:700}

/* Core Web Vitals als drei Ringe */
.au__fuss{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  padding:1rem 1.1rem 1.15rem;border-top:1px solid var(--li-soft);background:var(--papier)}
.cwv{display:flex;align-items:center;gap:.6rem;min-width:0}
.cwv__ring{position:relative;display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--ink) calc(var(--f,0) * 1%),var(--papier-3) 0)}
.laeuft .cwv__ring{animation:cwvFuellen 1.3s var(--fed-weich) .9s forwards}
@property --f{syntax:'<number>';inherits:false;initial-value:0}
@keyframes cwvFuellen{to{--f:var(--p)}}
.cwv__ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.cwv__ring b{position:relative;z-index:1;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.5625rem;letter-spacing:.03em;color:var(--tx)}
.cwv em{font-style:normal;font-size:.6875rem;line-height:1.35;color:var(--tx-mut);min-width:0}
.cwv em b{display:block;font-size:.8125rem;color:var(--tx);margin-top:1px}

/* --- 02 Struktur ------------------------------------------------------- */
.si__baum{position:relative;height:210px;padding:0}
.si__linien{position:absolute;inset:0;width:100%;height:100%}
.si__w{fill:none;stroke:rgba(42,48,51,.3);stroke-width:1.5;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.laeuft .si__w{animation:zeichnen 1s var(--fed-weich) forwards}
.laeuft .si__w:nth-child(1){animation-delay:.55s} .laeuft .si__w:nth-child(2){animation-delay:.68s}
.laeuft .si__w:nth-child(3){animation-delay:.81s} .laeuft .si__w:nth-child(4){animation-delay:.94s}
.laeuft .si__w:nth-child(5){animation-delay:1.12s} .laeuft .si__w:nth-child(6){animation-delay:1.25s}
/* Eigene Keyframes statt feedRein: dessen `transform:none` am Ende löscht die
   Zentrierung translate(-50%) — die Knoten springen dann um ihre halbe Breite
   nach rechts, der Hub steht schief und der rechte Kasten läuft an den Rand. */
.si__n{position:absolute;transform:translate(-50%,6px);white-space:nowrap;
  font-size:.6875rem;line-height:1;padding:.42rem .6rem;border-radius:8px;
  background:var(--papier-2);border:1px solid var(--li);color:var(--tx);
  opacity:0}
.laeuft .si__n{animation:siRein .45s var(--fed-weich) forwards}
@keyframes siRein{to{opacity:1;transform:translate(-50%,0)}}
.si__n--hub{left:50%;top:22px;background:var(--ink);color:#fff;border-color:var(--ink);
  font-weight:600;padding:.5rem .8rem;animation-delay:.35s}
.si__n--o1{left:16.2%;top:92px;animation-delay:.8s}
.si__n--o2{left:38.7%;top:92px;animation-delay:.93s}
.si__n--o3{left:61.2%;top:92px;animation-delay:1.06s}
.si__n--o4{left:83.7%;top:92px;animation-delay:1.19s}
/* Zwei Zeilen erlaubt und Breite gedeckelt — einzeilig lief der rechte Kasten
   über den Kartenrand hinaus und wurde abgeschnitten. */
.si__n--r1,.si__n--r2{max-width:34%;white-space:normal;text-align:center;
  line-height:1.35;top:162px}
.si__n--r1{left:28%;animation-delay:1.37s}
.si__n--r2{left:72%;animation-delay:1.5s}
.laeuft .si__n--hub{animation-delay:.35s}

.si__fuss{padding:1rem 1.1rem 1.15rem;border-top:1px solid var(--li-soft);
  background:var(--papier)}
.si__f-k{display:block;margin-bottom:.6rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.5625rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-mut)}
.si__k{display:flex;flex-wrap:wrap;gap:.35rem}
.si__k span{display:inline-block;padding:.3rem .65rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--li);font-size:.75rem;color:var(--tx-mut);
  opacity:0;transform:translateY(6px)}
.laeuft .si__k span{animation:feedRein .45s var(--fed-weich) var(--d,0s) forwards;
  animation-delay:calc(1.6s + var(--d,0s))}

@media (max-width:980px){
  .kap__grid{grid-template-columns:1fr}
  .kap--dreh .kap__txt,.kap--dreh .kap__ui{order:0}
  .kap__hin{text-align:left}
}
@media (max-width:560px){
  .au__zeile{grid-template-columns:1fr auto;row-gap:.4rem}
  .au__bar{grid-column:1/-1;order:3}
  .au__fuss{grid-template-columns:1fr}
  .si__n{font-size:.625rem;padding:.35rem .45rem}
}

/* --- 03 Rasterscan, dem Map-Rank-Tracker nachgebaut --------------------- */
/* Farbe ist hier erlaubt (A3): eine nachgebaute Produkt-Oberfläche. Die
   Stufen entsprechen der üblichen Lesart — Top 3 grün bis 20+ grau. */
.mrt{background:#fff;border:1px solid var(--li);border-radius:var(--r-card);
  box-shadow:var(--sh-2);overflow:hidden}
.mrt--gut{--mrt-gut:#17A97F}
.mrt__kopf{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
  border-bottom:1px solid var(--li-soft);background:var(--papier)}
.mrt__titel{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-mut)}
.mrt__datum{margin-left:auto;padding:.12rem .5rem;border:1px solid var(--li);
  border-radius:var(--r-pill);font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;color:var(--tx-mut);white-space:nowrap}

/* Kennzahlenleiste über der Karte */
.mrt__werte{display:grid;grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid var(--li-soft)}
.mrt__w{padding:.6rem .5rem .65rem;min-width:0}
.mrt__w + .mrt__w{border-left:1px solid var(--li-soft)}
.mrt__w em{display:flex;align-items:center;gap:.28rem;font-style:normal;font-size:.5625rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tx-mut);white-space:nowrap}
.mrt__w b{position:relative;display:block;height:1.35em;margin-top:.25rem;
  font-size:.9375rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mrt__vz,.mrt__nz{position:absolute;left:0;top:0}
.mrt__nz{opacity:0;color:var(--tx)}
.mrt__vz{color:var(--tx-mut)}
.kap__ui.laeuft .mrt__vz{animation:mrtWeg .4s var(--fed-weich) 1.5s forwards}
.kap__ui.laeuft .mrt__nz{animation:mrtDa .4s var(--fed-weich) 1.5s forwards}
@keyframes mrtWeg{to{opacity:0;transform:translateY(-6px)}}
@keyframes mrtDa{from{transform:translateY(6px)}to{opacity:1;transform:none}}
.mrt__d{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.mrt__d--gut{background:#17A97F} .mrt__d--mittel{background:#F2A93B}
.mrt__d--schwach{background:#E2564A} .mrt__d--aus{background:#C2C8C4}

/* Der Kartengrund */
.mrt__karte{position:relative;aspect-ratio:5/3.6;overflow:hidden}
.mrt__grund{position:absolute;inset:0;width:100%;height:100%}

/* Die Messpunkte: vorher/nachher übereinander, sie kippen nacheinander */
.mrt__p{position:absolute;transform:translate(-50%,-50%);
  width:clamp(26px,4.4cqw,34px);aspect-ratio:1}
.mrt__v,.mrt__n{position:absolute;inset:0;display:grid;place-items:center;
  border-radius:50%;color:#fff;font-size:.6875rem;font-weight:700;
  font-family:'Geist Mono',ui-monospace,monospace;
  box-shadow:0 1px 3px rgba(16,20,30,.28)}
.mrt__n{opacity:0;transform:scale(.7)}
.kap__ui.laeuft .mrt__v{animation:mrtWeg .35s var(--fed-weich) var(--d,0s) forwards}
.kap__ui.laeuft .mrt__n{animation:mrtPin .45s var(--fed-weich) var(--d,0s) forwards}
@keyframes mrtPin{to{opacity:1;transform:none}}
.mrt__v--gut,.mrt__n--gut{background:#17A97F}
.mrt__v--mittel,.mrt__n--mittel{background:#F2A93B}
.mrt__v--schwach,.mrt__n--schwach{background:#E2564A}
.mrt__v--aus,.mrt__n--aus{background:#C2C8C4;font-size:.625rem}
/* Der eigene Standort sitzt als roter Punkt unter dem mittleren Messpunkt */
.mrt__standort{position:absolute;left:50%;top:50%;width:15px;height:15px;
  margin:-16px 0 0 -7px;border-radius:50%;background:#E2564A;
  box-shadow:0 0 0 0 rgba(226,86,74,.45)}
.kap__ui.laeuft .mrt__standort{animation:lokPuls 2.8s var(--fed-weich) 1.2s infinite}

.mrt__fuss{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.7rem 1rem .75rem;border-top:1px solid var(--li-soft);background:var(--papier)}
.mrt__legende{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  font-size:.625rem;color:var(--tx-mut)}
.mrt__legende .mrt__d{margin-left:.5rem}
.mrt__legende .mrt__d:first-child{margin-left:0}
.mrt__stand{display:flex;align-items:center;gap:.4rem;margin-left:auto;
  font-size:.625rem;color:var(--tx-mut)}
.mrt__stand i{width:6px;height:6px;border-radius:50%;background:var(--live)}

/* --- 04 Link-Leiter ----------------------------------------------------- */
.ao__leiter{list-style:none;margin:0;padding:1rem 1.1rem;display:grid;gap:.6rem}
.ao__st{position:relative;display:grid;grid-template-columns:24px 1fr;gap:.7rem;
  align-items:center;padding-bottom:.55rem;
  opacity:0;transform:translateX(-8px)}
.laeuft .ao__st{animation:aoRein .5s var(--fed-weich) var(--d,0s) forwards}
@keyframes aoRein{to{opacity:1;transform:none}}
.ao__s{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:var(--papier-2);border:1px solid var(--li);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;color:var(--tx-mut)}
.ao__st--top .ao__s{background:var(--ink);border-color:var(--ink);color:#fff}
.ao__n{font-size:.8125rem;color:var(--tx)}
.ao__b{position:absolute;left:31px;right:0;bottom:0;height:3px;border-radius:2px;
  background:var(--papier-3);overflow:hidden}
.ao__b::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.laeuft .ao__b::after{animation:auNach .8s var(--fed-weich) forwards;
  animation-delay:calc(var(--d,0s) + .15s)}

.ao__fuss{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.95rem 1.1rem 1.05rem;border-top:1px solid var(--li-soft);background:var(--papier)}
.ao__f-k{font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tx-mut)}
.ao__f-w{font-size:1.25rem;font-weight:800;font-stretch:82%;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.ao__chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-left:auto}
.ao__chips i{font-style:normal;padding:.24rem .55rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--li);font-size:.6875rem;color:var(--tx-mut);
  opacity:0;transform:translateY(5px)}
.laeuft .ao__chips i{animation:feedRein .4s var(--fed-weich) forwards;
  animation-delay:calc(1.5s + var(--d,0s))}

@media (max-width:560px){
  .lo__knoepfe{margin-left:0;width:100%}
  .ao__chips{margin-left:0;width:100%}
}

/* ══ FAHRPLAN ════════════════════════════════════════════════════════════ */
.ze{position:relative;list-style:none;margin:clamp(2.2rem,4vw,3.2rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
/* Die Achse zeichnet sich einmal durch, bevor die Punkte kommen */
/* Kein overflow:hidden — die Linie ist 1 px hoch und würde den mitfahrenden
   Punkt auf ebendiese 1 px beschneiden. Die Füllung braucht es nicht. */
.ze__linie{position:absolute;left:6px;right:6px;top:7px;height:1px;
  background:rgba(255,255,255,.16)}
.ze__linie i{position:absolute;inset:0;border-radius:1px;background:rgba(255,255,255,.6);
  transform:scaleX(0);transform-origin:0 50%}
.laeuft .ze__linie i{animation:auNach 1.6s var(--fed-weich) .3s forwards}
/* Ein Punkt fährt auf der Spitze der Linie mit und erreicht nacheinander die
   Stationen — dieselbe Dauer und Kurve wie die Linie, sonst läuft er davon. */
.ze__laeufer{position:absolute;top:50%;left:0;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.16);opacity:0}
.laeuft .ze__laeufer{animation:zeFahrt 1.6s var(--fed-weich) .3s forwards}
@keyframes zeFahrt{
  0%{left:0;opacity:0} 10%{opacity:1} 82%{opacity:1} 100%{left:100%;opacity:0}
}
/* Jede Station bekommt einen Ring, wenn der Punkt dort vorbeikommt */
.ze__pkt::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);opacity:0;transform:scale(.4)}
.laeuft .ze__pkt::after{animation:zeRing .85s var(--fed-weich) forwards}
.laeuft .ze__p:nth-of-type(1) .ze__pkt::after{animation-delay:.34s}
.laeuft .ze__p:nth-of-type(2) .ze__pkt::after{animation-delay:.73s}
.laeuft .ze__p:nth-of-type(3) .ze__pkt::after{animation-delay:1.12s}
.laeuft .ze__p:nth-of-type(4) .ze__pkt::after{animation-delay:1.5s}
@keyframes zeRing{
  0%{opacity:0;transform:scale(.4)} 35%{opacity:1} 100%{opacity:0;transform:scale(1.9)}
}
.ze__p{position:relative;padding-top:2.1rem;opacity:0;transform:translateY(10px)}
.laeuft .ze__p{animation:feedRein .6s var(--fed-weich) var(--d,0s) forwards;
  animation-delay:calc(.6s + var(--d,0s))}
.ze__pkt{position:absolute;left:0;top:2px;width:13px;height:13px;border-radius:50%;
  background:var(--ink-2);border:2px solid rgba(255,255,255,.4)}
.ze__p--jetzt .ze__pkt{background:#fff;border-color:#fff}
.ze__z{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tx-inv-mut)}
.ze__t{display:block;margin-top:.5rem;font-size:1.0625rem;font-weight:700;
  letter-spacing:-.03em;color:#fff}
.ze__p em{display:block;font-style:normal;margin-top:.5rem;font-size:.8125rem;line-height:1.6;
  color:var(--tx-inv-mut)}

/* ══ MONATSBERICHT ═══════════════════════════════════════════════════════ */
.bl{background:#fff;border:1px solid var(--li);border-radius:var(--r-card);
  box-shadow:var(--sh-2);overflow:hidden}
.bl__kopf{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--li-soft)}
.bl__marke{font-size:.8125rem;font-weight:700;letter-spacing:-.02em}
.bl__mon{margin-left:auto;font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx-mut)}
.bl__zahlen{display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--li-soft)}
.bl__zahlen > div{padding:.95rem 1.1rem}
.bl__zahlen > div + div{border-left:1px solid var(--li-soft)}
.bl__zahlen b{display:block;font-size:1.375rem;font-weight:800;font-stretch:82%;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.bl__zahlen em{display:block;font-style:normal;margin-top:.35rem;font-size:.6875rem;
  line-height:1.35;color:var(--tx-mut)}

.bl__tab{display:grid;grid-template-columns:1fr auto auto 46px;
  gap:.1rem .7rem;padding:.9rem 1.1rem;align-items:center}
.bl__th{font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx-mut);padding-bottom:.35rem;
  border-bottom:1px solid var(--li-soft);margin-bottom:.35rem}
.bl__td{font-size:.8125rem;color:var(--tx);padding:.32rem 0}
.bl__td--z{font-family:'Geist Mono',ui-monospace,monospace;color:var(--tx-mut);
  text-align:center}
.bl__td--z b{color:var(--tx);font-weight:700}
.bl__pf{font-family:'Geist Mono',ui-monospace,monospace;font-size:.75rem;text-align:right}
.bl__pf--auf{color:#1E8A4C}
.bl__pf--ab{color:#B8352A}

.bl__fuss{padding:.95rem 1.1rem 1.1rem;border-top:1px solid var(--li-soft);
  background:var(--ink);color:var(--tx-inv)}
.bl__fuss b{display:block;font-size:.8125rem;font-weight:700;color:#fff}
.bl__fuss ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.4rem}
.bl__fuss li{position:relative;padding-left:1.1rem;font-size:.75rem;line-height:1.5;
  color:var(--tx-inv-mut)}
.bl__fuss li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;
  border-radius:50%;background:rgba(255,255,255,.55)}

@media (max-width:980px){
  .ze{grid-template-columns:1fr 1fr}
  .ze__linie{display:none}
}
@media (max-width:560px){
  .ze{grid-template-columns:1fr}
  /* Die drei Kennzahlen bleiben auch auf dem Handy nebeneinander — gestapelt
     füllen sie eine halbe Bildschirmhöhe, ohne mehr zu sagen. */
  .bl__zahlen > div{padding:.75rem .55rem .8rem}
  .bl__zahlen b{font-size:1.0625rem}
  .bl__zahlen em{font-size:.625rem;margin-top:.3rem}
}

/* ══ PAKETE ══════════════════════════════════════════════════════════════ */
/* stretch statt start: sonst sind die Karten unterschiedlich hoch und die
   beiden Knöpfe stehen versetzt, obwohl beide unten sitzen. */
.pk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem);
  align-items:stretch;margin-top:clamp(2rem,4vw,3rem);max-width:56rem;margin-inline:auto}
.pk__k{position:relative;display:flex;flex-direction:column;
  background:var(--papier);border:1px solid var(--li);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,2rem);box-shadow:var(--sh-1);
  opacity:0;transform:translateY(10px)}
.laeuft .pk__k{animation:feedRein .6s var(--fed-weich) var(--d,0s) forwards}
.pk__k--top{background:var(--ink);color:var(--tx-inv);border-color:var(--ink);
  box-shadow:var(--sh-3)}
.pk__band{position:absolute;left:0;right:0;top:0;padding:.45rem;text-align:center;
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:rgba(255,255,255,.1);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;letter-spacing:.09em;
  text-transform:uppercase;color:#fff}
.pk__k--top .pk__kopf{margin-top:1.4rem}
.pk__kopf{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.pk__n{font-size:1.25rem;font-weight:800;font-stretch:82%;letter-spacing:-.03em}
.pk__art{margin-left:auto;font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx-mut)}
.pk__k--top .pk__art{color:var(--tx-inv-mut)}
.pk__preis{margin-top:clamp(1rem,2vw,1.4rem);padding-bottom:clamp(1rem,2vw,1.4rem);
  border-bottom:1px solid var(--li)}
.pk__k--top .pk__preis{border-color:rgba(255,255,255,.18)}
/* Solange die Zahl nicht freigegeben ist, steht hier keine erfundene */
.pk__offen{display:block;font-size:1.5rem;font-weight:800;font-stretch:82%;
  letter-spacing:-.03em;line-height:1}
.pk__preis em{display:block;font-style:normal;margin-top:.45rem;font-size:.75rem;
  color:var(--tx-mut)}
.pk__k--top .pk__preis em{color:var(--tx-inv-mut)}
.pk__satz{margin:clamp(1rem,2vw,1.4rem) 0 0;font-size:.875rem;line-height:1.65;
  color:var(--tx-mut)}
.pk__k--top .pk__satz{color:var(--tx-inv-mut)}
.pk__liste{margin-top:clamp(1.1rem,2vw,1.5rem)}
.pk__k--top .pk__liste li{color:#fff}
.pk__k--top .pk__liste li::before{background:#fff}
/* margin-block-start IST margin-top und hätte das margin-top:auto überschrieben —
   dann steht der Knopf direkt unter der Liste statt am Kartenboden, und die
   beiden Karten bekommen versetzte Knöpfe. Abstand kommt deshalb von der Liste. */
.pk__liste{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.pk__btn{margin-top:auto;width:100%;justify-content:center}
.pk__k--top .btn--pri{background:#fff;color:var(--ink)}
.pk__k--top .btn--pri:hover{background:var(--papier-2)}
.pk__fuss{max-width:46rem;margin:clamp(1.6rem,3vw,2.2rem) auto 0;text-align:center;
  font-size:.8125rem;line-height:1.65;color:var(--tx-mut)}

@media (max-width:760px){
  .pk{grid-template-columns:1fr}
}

/* Sechs Kennzahlen nebeneinander überlappen auf dem Handy — zwei Reihen à drei */
@media (max-width:620px){
  .mrt__werte{grid-template-columns:repeat(3,1fr)}
  .mrt__w:nth-child(3n+1){border-left:0}
  .mrt__w:nth-child(n+4){border-top:1px solid var(--li-soft)}
}

/* ══ HANDLUNGSAUFFORDERUNGEN ═════════════════════════════════════════════ */
/* Knopf am Ende eines Kapiteltextes */
.kap__btn{align-self:flex-start;margin-top:clamp(1.3rem,2.4vw,1.8rem)}

/* Der CTA-Kasten in der Sektionsmitte */
.cta{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--ink);color:var(--tx-inv);box-shadow:var(--sh-3);
  padding:clamp(1.8rem,4vw,3.2rem);isolation:isolate}
/* Stadt bei Nacht — dasselbe Motiv, um das sich der Rasterscan dreht */
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 58%;z-index:-2}
/* Von links nach rechts abdunkeln: der Text steht links und muss tragen */
.cta__schleier{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(14,17,19,.97) 0%,rgba(14,17,19,.93) 38%,
      rgba(14,17,19,.72) 62%,rgba(14,17,19,.55) 100%),
    linear-gradient(0deg,rgba(14,17,19,.55) 0%,rgba(14,17,19,.15) 55%)}
.cta__raster{position:absolute;inset:0;pointer-events:none;opacity:.35;z-index:-1;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 90% at 78% 30%,#000 10%,transparent 72%)}
.cta__in{position:relative;max-width:44rem}
.cta .kicker{display:block;margin-bottom:.9rem;color:var(--tx-inv-mut)}
.cta h2{margin:0}
.cta__x{margin:1.05rem 0 0;font-size:1rem;line-height:1.65;color:var(--tx-inv-mut)}
.cta__knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.5rem,2.8vw,2.1rem)}
.cta__knoepfe .btn--pri{background:#fff;color:var(--ink)}
.cta__knoepfe .btn--pri:hover{background:var(--papier-2)}
.cta__knoepfe .btn svg{fill:currentColor}
.cta__auf{margin:clamp(1.3rem,2.4vw,1.8rem) 0 0;padding-top:clamp(1.2rem,2.2vw,1.6rem);
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.875rem;line-height:1.65;color:var(--tx-inv-mut)}
.cta__auf a{color:#fff;font-weight:600;text-underline-offset:3px}

/* Querverweis auf die anderen Leistungen */
.ups{margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--li)}
.ups__k{display:block;text-align:center;margin-bottom:clamp(1.1rem,2vw,1.5rem);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-mut)}
.ups__r{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.5vw,1.15rem);
  max-width:56rem;margin-inline:auto}
/* Je Leistung ein eigenes Motiv, abgedunkelt — der Text muss darauf tragen */
.ups__l{position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:var(--tx-inv);
  background:var(--ink);border:1px solid var(--ink);border-radius:var(--r-card);
  padding:clamp(1.2rem,2.2vw,1.5rem);min-height:186px;box-shadow:var(--sh-2);
  transition:transform .22s var(--e-ui),box-shadow .22s var(--e-ui)}
.ups__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .5s var(--fed-weich)}
.ups__schleier{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,17,19,.72) 0%,rgba(14,17,19,.86) 55%,
    rgba(14,17,19,.94) 100%)}
.ups__l:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.ups__l:hover .ups__bg{transform:scale(1.05)}
.ups__l b{font-size:.9375rem;font-weight:700;letter-spacing:-.02em;color:#fff}
.ups__l em{display:block;font-style:normal;margin-top:.4rem;font-size:.8125rem;line-height:1.55;
  color:rgba(255,255,255,.76)}
.ups__l i{display:block;font-style:normal;margin-top:auto;padding-top:.9rem;
  font-size:.8125rem;font-weight:600;color:#fff}
.ups__l i::after{content:" →";display:inline-block;opacity:.5;
  transition:transform .2s var(--e-ui),opacity .2s var(--e-ui)}
.ups__l:hover i::after{opacity:1;transform:translateX(3px)}

@media (max-width:760px){
  .ups__r{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cta__knoepfe{display:grid;grid-template-columns:1fr}
  .cta__knoepfe .btn,.kap__btn{width:100%;justify-content:center}
}