/* ==========================================================================
   RGN Marketing — Sektionen
   ========================================================================== */

/* --- Kopfzeile mit Mega-Menü -------------------------------------------- */
.kopf{
  position:fixed;inset:0 0 auto;z-index:80;
  transition:background .35s var(--fed-weich),border-color .35s var(--fed-weich),
             backdrop-filter .35s var(--fed-weich);
  border-bottom:1px solid transparent;
}
.kopf.ist-fest,.kopf.ist-offen{background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--li-soft)}
/* static, damit das Panel an .kopf hängt und volle Bildschirmbreite bekommt */
.kopf__in{position:static;display:flex;align-items:center;gap:1.25rem;height:84px}
.kopf__logo{display:flex;align-items:center;flex-shrink:0}
.kopf__logo img{height:44px;width:auto}
.kopf__nav{margin-left:auto}
.mm{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}
.mm__li{position:static}
.kopf__link{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.55rem .8rem;border-radius:8px;font-size:.9375rem;font-weight:500;color:var(--tx);
  background:none;border:0;cursor:pointer;font-family:inherit;
  transition:background .2s var(--fed-kurz),color .2s var(--fed-kurz);
}
.kopf__link:hover{background:var(--papier-2)}
.mm__pfeil{transition:transform .3s var(--fed-kurz)}
.mm__toggle[aria-expanded="true"] .mm__pfeil{transform:rotate(180deg)}

/* Panel über die volle Bildschirmbreite, Inhalt auf Satzbreite zentriert */
.mm__panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--papier);border-top:1px solid var(--li-soft);
  border-bottom:1px solid var(--li);
  box-shadow:0 30px 80px -30px rgba(14,17,19,.28);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--fed-kurz),transform .16s var(--fed-kurz),visibility 0s .16s;
}
.mm__li--drop.ist-auf .mm__panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mm__innen{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr) 300px;
  gap:clamp(1.25rem,2.4vw,2.5rem);padding-block:40px;align-items:start}
.mm__spalte{min-width:0}
.mm__liste{display:flex;flex-direction:column;gap:.1rem}
/* Beiträge, die es noch nicht gibt: sichtbar, aber erkennbar noch nicht da —
   kein Link, gedämpft, mit Hinweiszeile darunter. */
.mm__news--bald{display:block;cursor:default;opacity:.62}
.mm__news--bald b{color:var(--tx)}
.mm__bald{display:block;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--li-soft);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-mut)}
.mm__kopf{display:block;margin-bottom:1rem;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx)}
.mm__punkt{display:flex;align-items:flex-start;gap:.75rem;padding:.7rem .8rem;
  border-radius:var(--r-sm);transition:background .2s var(--fed-kurz),padding-left .2s var(--fed-kurz)}
.mm__punkt:hover{background:var(--papier-2);padding-left:1.4rem}
.mm__icon{flex-shrink:0;color:var(--graphit)}
.mm__icon svg{width:40px;height:40px;display:block}
.mm__txt{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.mm__txt b{font-size:.9375rem;font-weight:600;letter-spacing:-.012em}
.mm__txt i{font-style:normal;font-size:.8125rem;line-height:1.35;color:var(--tx-mut)}

.mm__karte{display:flex;flex-direction:column;gap:.5rem;padding:20px;
  background:var(--ink);color:var(--tx-inv);border-radius:var(--r-card)}
.mm__karte img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 22%;
  border-radius:var(--r-sm);margin-bottom:.35rem}
.mm__karte b{font-size:1rem;font-weight:600;letter-spacing:-.014em}
.mm__karte span{font-size:.8125rem;line-height:1.45;color:var(--tx-inv-mut)}
.mm__karte em{display:inline-flex;align-items:center;gap:.35rem;margin-top:.2rem;
  font-style:normal;font-size:.8125rem;font-weight:600}
.mm__karte:hover em svg{transform:translateX(3px)}
.mm__karte em svg{transition:transform .3s var(--fed-kurz)}

/* Telefon und CTA */
.kopf__tel{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .7rem;
  border-radius:8px;font-size:.9375rem;font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  transition:background .2s var(--fed-kurz)}
.kopf__tel:hover{background:var(--papier-2)}
.kopf__cta{flex-shrink:0;white-space:nowrap}
.btn__flieger{transition:transform .3s var(--fed-kurz)}
.btn:hover .btn__flieger{transform:translate(3px,-3px)}

/* Mobile Knöpfe */
.kopf__ico{display:none;width:42px;height:42px;border-radius:var(--r-btn);
  border:1px solid var(--li);align-items:center;justify-content:center;flex-shrink:0}
.kopf__burger{display:none;width:42px;height:42px;border:1px solid var(--li);
  border-radius:var(--r-btn);background:transparent;cursor:pointer;align-items:center;
  justify-content:center;flex-shrink:0}
.kopf__burger span{display:block;width:17px;height:1.5px;background:var(--tx);position:relative}
.kopf__burger span::before,.kopf__burger span::after{content:"";position:absolute;left:0;
  width:17px;height:1.5px;background:var(--tx)}
.kopf__burger span::before{top:-5px}.kopf__burger span::after{top:5px}

/* --- Mobiles Overlay ----------------------------------------------------- */
.ovl{position:fixed;inset:0;z-index:90;background:var(--papier);
  display:flex;flex-direction:column;overflow-y:auto}
.ovl[hidden]{display:none}
.ovl__kopf{display:flex;align-items:center;justify-content:space-between;
  height:84px;flex-shrink:0}
.ovl__kopf img{height:44px;width:auto}
.ovl__zu{width:42px;height:42px;border:1px solid var(--li);border-radius:var(--r-btn);
  background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--tx)}
.ovl__nav{flex:1;padding-block:1rem;display:flex;flex-direction:column;gap:.1rem}
.ovl__link{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:.85rem 0;border-bottom:1px solid var(--li-soft);
  font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--tx);
  background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;font-family:inherit;
  text-align:left}
.ovl__akk-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.ovl__akk-toggle svg{transition:transform .3s var(--fed-kurz)}
.ovl__akk-inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s var(--fed-kurz)}
.ovl__akk-inhalt > div{overflow:hidden;min-height:0}
.ovl__akk.ist-auf .ovl__akk-inhalt{grid-template-rows:1fr}
.ovl__akk-inhalt a{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;
  font-size:.9375rem;font-weight:500;color:var(--tx-mut)}
.ovl__akk-inhalt a svg{width:28px;height:28px;flex-shrink:0;color:var(--graphit)}
.ovl__fuss{padding-block:1.25rem 2rem;display:flex;flex-direction:column;gap:.9rem;
  border-top:1px solid var(--li-soft);flex-shrink:0}
.ovl__fuss .btn{width:100%}
.ovl__tel{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:1rem;font-weight:600;color:var(--tx)}

@media (max-width:1180px){
  .kopf__tel span{display:none}
  .kopf__tel{padding:.55rem}
}
@media (max-width:1040px){
  .kopf__nav,.kopf__tel,.kopf__cta{display:none}
  .kopf__ico,.kopf__burger{display:inline-flex}
  .kopf__in{gap:.5rem}
  .kopf__logo{margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
  .mm__panel{transition:none}
  .ovl__akk-inhalt{transition:none}
}

/* --- Hero ---------------------------------------------------------------- */
.hero .kicker i{font-style:normal;margin-inline:.28rem;opacity:.5}

.hero{position:relative;padding-block:clamp(104px,13vw,148px) clamp(56px,7vw,88px);
  background:var(--papier);overflow:clip}
/* Das Raster sitzt über der Bühne, der Text steht auf ruhiger Fläche */
.hero.raster::before{mask-image:radial-gradient(ellipse 62% 78% at 72% 46%,#000 26%,transparent 76%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:center}
/* width:100% ist Pflicht: container-type:inline-size löst die Breite vom Inhalt,
   in einer Flex-Spalte kollabiert sie sonst auf 0 und cqi liefert Null. */
.hero__txt{max-width:42rem;width:100%;container-type:inline-size}
.hero .hero__h2{margin-bottom:1.1rem}
/* Der Kicker steht jetzt IN der H1 — so trägt die Überschrift das Keyword ganz
   vorn, ohne dass sich optisch etwas ändert. Er muss seine eigene Schrift und
   sein eigenes Gewicht mitbringen, sonst erbt er den H1-Grad. */
.hero__kicker{display:block;margin-bottom:.9rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.75rem;font-weight:500;font-stretch:100%;letter-spacing:.08em;line-height:1.4;
  text-transform:none}
/* Die Spaltenbreite schwankt stark (672 px Desktop, 350 px Handy). Ein clamp()
   am Viewport trifft das nie — deshalb cqi, gemessen an der Textspalte selbst.
   Bei font-stretch 76 % braucht eine Versalzeile rund das 0,55-fache des
   Schriftgrades je Zeichen. */
.hero .hero__h2 .zeile1{display:block;white-space:nowrap;font-size:clamp(1.1rem,6.85cqi,3rem)}
/* Mobil trägt die kürzere zweite Zeile mehr Grad — die erste muss kleiner
   bleiben, damit sie einzeilig passt. Ab Desktop sind beide gleich groß. */
.hero .hero__h2 .zeile2{display:block;color:var(--tx-mut);font-size:clamp(1.3rem,8.3cqi,3.5rem)}
@media (min-width:1041px){
  .hero .hero__h2 .zeile2{font-size:clamp(1.1rem,6.85cqi,3rem)}
}
.hero__lead{font-size:.9375rem;line-height:1.6;color:var(--tx-mut);max-width:31rem;margin-bottom:1.5rem}
.hero__bullets{margin-bottom:1.9rem;max-width:33rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.2rem}

/* Siegel-Leiste unter dem Hero-Text */
.trustband{display:flex;flex-direction:column;align-items:center;
  width:fit-content;max-width:100%;padding-top:1.5rem;border-top:1px solid var(--li-soft)}
.trustband__label{display:block;margin-top:.9rem;text-align:center;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tx-mut)}
.siegel{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  justify-content:flex-start;gap:clamp(.85rem,1.7vw,1.3rem);flex-wrap:wrap}
.siegel__it{display:flex;align-items:center}
.siegel__it img{height:72px;width:auto}
.siegel__it--partner img{height:78px}
.siegel__it--pe img{height:78px;border-radius:6px}
.siegel__it--ihk img{height:62px}
/* Auf dem Desktop steht das Trustindex-Siegel hinten, hinter der IHK.
   Mobil bleibt es vorn — dort führt der Bewertungsschnitt die Leiste an. */
@media (min-width:1041px){ .siegel__it--ti{order:1} }

/* Trustindex-Badge, dem Original nachgebaut */
.ti{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem .6rem .7rem;
  background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(14,17,19,.1),0 6px 18px rgba(14,17,19,.07);
  font-family:'Roboto','Helvetica Neue',Arial,system-ui,sans-serif}
.ti__g{width:34px;height:34px;flex-shrink:0;padding-right:.75rem;
  border-right:1px solid #E4E6E8;box-sizing:content-box}
.ti__txt{display:flex;flex-direction:column;gap:.05rem;line-height:1.2}
.ti__kopf{display:flex;align-items:center;gap:.35rem}
.ti__sterne{display:inline-flex;gap:1px}
.ti__sterne svg{width:13px;height:12.4px;fill:#FBBC04}
.ti__kopf b{font-size:.875rem;font-weight:700;color:#111;letter-spacing:-.01em}
.ti__titel{font-size:.875rem;font-weight:700;color:#111;letter-spacing:-.012em;white-space:nowrap}
.ti__quelle{display:inline-flex;align-items:center;gap:.2rem;
  font-size:.75rem;color:#3C4043;white-space:nowrap}
.ti__quelle svg{width:11px;height:11px;color:#5F6368;opacity:.75}

/* --- Die Bühne (M1 Kommandozentrale) ------------------------------------- */
.buehne{
  position:relative;perspective:1500px;perspective-origin:50% 42%;
  min-height:clamp(400px,50vw,720px);
}

/* inset:0 statt height:100% — sonst ist der Container 0 hoch und %-Positionen greifen nicht */
.buehne__inner{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .9s var(--fed-weich)}
.bk{                                   /* Bühnen-Karte */
  position:absolute;background:var(--papier);border:1px solid var(--li);
  border-radius:var(--r-card);box-shadow:var(--sh-3);overflow:hidden;
  transform-style:preserve-3d;will-change:transform;
}
.bk__kopf{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--li-soft);background:var(--papier)}
.bk__titel{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tx-mut)}
.bk__live{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;color:var(--tx-mut);
  letter-spacing:.05em;text-transform:uppercase}
.bk__punkt{width:6px;height:6px;border-radius:var(--r-pill);background:var(--live);
  box-shadow:0 0 0 0 rgba(47,191,113,.5);animation:puls 2.6s var(--fed-weich) infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(47,191,113,.45)}70%{box-shadow:0 0 0 7px rgba(47,191,113,0)}
  100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}
.bk__zeitraum{margin-left:auto;padding:.12rem .45rem;border:1px solid var(--li);
  border-radius:var(--r-pill);font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  color:var(--tx-mut);letter-spacing:.03em;white-space:nowrap}
.bk__body{padding:.9rem}

/* Karte 1 — Ads-Dashboard (Hauptkarte) */
.bk--ads{left:0;top:23%;width:min(66%,395px);--z:52px;z-index:3}
.bk--ads{--kachel-h:58px}

/* ---- Google-Ads-Übersicht, dem Konto nachgebaut ---------------------- */
.gads{padding:0}

/* Kennzahlen-Kacheln: aktive Metriken farbig gefüllt, wie im Konto */
.gads__kacheln{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--li)}
.gads__k{display:flex;flex-direction:column;justify-content:center;gap:.28rem;
  padding:.8rem .7rem .85rem;min-width:0;border-right:1px solid var(--li-soft)}
.gads__k:last-child{border-right:0}
.gads__k-name{display:flex;align-items:center;gap:.22rem;font-size:.625rem;color:var(--tx-mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em}
.gads__k-wert{font-size:1.1875rem;font-weight:400;line-height:1.15;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gads__pfeil{width:0;height:0;flex-shrink:0;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.75}
.gads__k--klick{background:var(--g-blau);border-right-color:transparent}
.gads__k--kpc{background:#F9AB00;border-right-color:transparent}
.gads__k--conv{background:var(--g-rot);border-right-color:transparent}
.gads__k--klick .gads__k-name,.gads__k--klick .gads__k-wert,
.gads__k--conv .gads__k-name,.gads__k--conv .gads__k-wert{color:#fff}
.gads__k--kpc .gads__k-name,.gads__k--kpc .gads__k-wert{color:#fff}
.gads__k--klick .gads__k-name,.gads__k--conv .gads__k-name{opacity:.92}
.gads__k--kpc .gads__k-name{opacity:.85}

/* Graph mit zwei Achsen */
.gads__chart{display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;
  gap:.4rem;padding:.7rem .7rem .3rem}
.gads__achse{display:flex;flex-direction:column;justify-content:space-between;
  font-size:.5625rem;color:var(--tx-mut);font-variant-numeric:tabular-nums;line-height:1}
.gads__achse--l{text-align:right}
.gads__achse i{font-style:normal}
.gads__plot{position:relative;height:110px;min-width:0}
.gads__plot svg{width:100%;height:100%;display:block;overflow:visible}
.gads__grid line{stroke:var(--li-soft);stroke-width:1}
.gads__mark{fill:var(--g-rot);opacity:0}
.laeuft .gads__mark{animation:gadsMark .8s var(--fed-weich) 1.7s forwards}
@keyframes gadsMark{to{opacity:.08}}
/* KEIN vector-effect:non-scaling-stroke — es misst das Strichmuster im Bildschirm-Space,
   die Pfadlänge kommt aber aus dem User-Space. Die Linie erscheint sonst von rechts. */
.gads__linie{fill:none;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.gads__linie--klick{stroke:var(--g-blau)}
.gads__linie--conv{stroke:var(--g-rot)}
.gads__linie--kpc{stroke:#F9AB00}
.laeuft .gads__linie{animation:zeichnen 2.2s cubic-bezier(.4,0,.15,1) .4s forwards}
.laeuft .gads__linie--conv{animation-delay:.62s}
.laeuft .gads__linie--kpc{animation-delay:.84s}
@keyframes zeichnen{to{stroke-dashoffset:0}}
/* Achsen-Marker wie im Konto: Metrikfarbe hinterlegt, gestrichelt unterstrichen */
.gads__marker{position:absolute;bottom:1px;padding:.08rem .32rem;
  font-size:.5625rem;font-weight:500;white-space:nowrap;opacity:0;border-radius:2px}
.gads__marker--conv{left:34%;color:#C5221F;background:rgba(234,67,53,.12);
  border-bottom:1px dashed rgba(234,67,53,.55)}
.laeuft .gads__marker--conv{animation:einblenden .5s var(--fed-weich) 2.5s forwards}
@keyframes einblenden{to{opacity:1}}

.gads__datum{display:flex;justify-content:space-between;padding:0 .7rem .7rem;
  font-size:.5625rem;color:var(--tx-mut)}

/* Karte 2 — SERP-Treffer */
.bk--serp{right:0;top:0;width:min(52%,300px);--z:0px;z-index:2}
.serp__url{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem}
.serp__fav{width:18px;height:18px;border-radius:var(--r-pill);border:1px solid var(--li);
  display:grid;place-items:center;flex-shrink:0;background:#fff}
.serp__fav svg{width:11px;height:11px}
.serp__pfad{font-size:.6875rem;color:var(--tx-mut);line-height:1.3}
.serp__titel{font-size:.9375rem;font-weight:400;color:var(--g-blau);line-height:1.3;margin-bottom:.3rem;
  letter-spacing:-.012em}
.serp__text{font-size:.75rem;color:var(--tx-mut);line-height:1.45}
/* Wie in der echten Anzeige: fett, klein, über der URL-Zeile — kein Badge */
.serp__gesponsert{display:block;margin-bottom:.3rem;font-size:.75rem;font-weight:700;
  color:#202124;letter-spacing:-.005em}

/* Karte 3 — Anfragen-Ticker */
.bk--feed{right:3%;bottom:0;width:min(53%,320px);--z:26px;z-index:4}
.feed{padding:.15rem .9rem .55rem}

.feed__zaehler{display:inline-block;font-variant-numeric:tabular-nums}

/* Der Slot wächst auf, wenn die neue Anfrage eintrifft */
.feed__slot{display:grid;grid-template-rows:0fr;transition:none}
.feed__inner{overflow:hidden;min-height:0}
.laeuft .feed__slot{animation:slotAuf .62s var(--fed-weich) 2.15s forwards}
@keyframes slotAuf{to{grid-template-rows:1fr}}

.feed__zeile{display:flex;align-items:center;gap:.55rem;padding:.42rem 0;
  border-bottom:1px solid var(--li-soft);opacity:0;transform:translateY(6px)}
.feed__zeile:last-child{border-bottom:0}
.laeuft .feed__zeile{animation:feedRein .6s var(--fed-weich) var(--d,0s) forwards}
.laeuft .feed__slot .feed__zeile{animation:feedNeu .7s var(--fed-weich) 2.25s forwards}
.laeuft .feed__zeile:nth-of-type(1){animation-delay:1.0s}
.laeuft .feed__zeile:nth-of-type(2){animation-delay:1.3s}
.laeuft .feed__zeile:nth-of-type(3){animation-delay:1.6s}
@keyframes feedRein{to{opacity:1;transform:none}}
/* Neue Anfrage: kommt herein und blitzt einmal kurz auf */
@keyframes feedNeu{
  0%{opacity:0;transform:translateY(-8px);background:rgba(47,191,113,.16)}
  55%{opacity:1;transform:none;background:rgba(47,191,113,.16)}
  100%{opacity:1;transform:none;background:transparent}
}

.feed__av{width:25px;height:25px;border-radius:var(--r-pill);background:var(--papier-2);
  border:1px solid var(--li-soft);display:grid;place-items:center;flex-shrink:0;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;font-weight:500;
  color:var(--tx-mut);letter-spacing:.02em}
.feed__zeile--neu .feed__av{background:#fff;border-color:rgba(47,191,113,.45);color:#1d8a4e}

.feed__txt{min-width:0;flex:1}
.feed__txt b{display:block;font-size:.75rem;font-weight:500;line-height:1.3;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed__quelle{display:flex;align-items:center;gap:.25rem;margin-top:.06rem;
  font-size:.625rem;color:var(--tx-mut);white-space:nowrap}
.feed__ic{width:9px;height:9px;flex-shrink:0;opacity:.8}

.feed__zeit{display:flex;align-items:center;gap:.25rem;flex-shrink:0;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;color:var(--tx-mut)}
.feed__zeile--neu .feed__zeit{color:#1d8a4e}
.feed__neu-punkt{width:5px;height:5px;border-radius:var(--r-pill);background:var(--live);
  box-shadow:0 0 0 0 rgba(47,191,113,.5);animation:puls 2.6s var(--fed-weich) infinite}

/* Bühne: Einlauf-Staffelung */
.bk{opacity:0;transform:translateZ(var(--z,0)) translateY(22px) rotateX(6deg) rotateY(-5deg)}
.laeuft .bk{animation:bkRein 1s var(--fed-weich) forwards}
.laeuft .bk--ads{animation-delay:.15s}
.laeuft .bk--serp{animation-delay:.42s}
.laeuft .bk--feed{animation-delay:.68s}
@keyframes bkRein{to{opacity:1;transform:translateZ(var(--z,0)) translateY(0) rotateX(0) rotateY(0)}}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width:1040px){
  /* display:contents löst Bühne und Inner auf — die Karten werden direkte
     Flex-Kinder und lassen sich frei zwischen den Text sortieren */
  .hero__grid{display:flex;flex-direction:column;gap:1.6rem}
  /* Unter den Siegeln folgt gleich die nächste Sektion mit eigenem Innenabstand
     — der volle Hero-Fuß von 56 px kommt da obendrauf und reißt ein Loch. */
  .hero{padding-block-end:clamp(1.2rem,4vw,1.8rem)}
  .hero__txt{max-width:none;order:1}
  .hero.raster::before{mask-image:radial-gradient(ellipse 86% 46% at 50% 62%,#000 20%,transparent 74%)}
  .buehne,.buehne__inner{display:contents}
  .bk{position:static;width:100%;box-shadow:var(--sh-2);transform:none}
  /* Mobil führt das Konto-Dashboard, die Anzeige und der Anfragen-Feed
     entfallen — darunter sollen die Siegel wirken, nicht ein Kartenstapel. */
  .bk--ads{order:0}
  .bk--serp,.bk--feed{display:none}
  /* Alle vier Siegel in EINER Reihe und so groß, wie die Zeile es hergibt: Sie
     brechen aus dem Seitenrand aus und teilen die volle Bildschirmbreite unter
     sich auf. Der flex-grow-Wert ist das Seitenverhältnis des jeweiligen Bildes
     — nur dann sind am Ende alle vier GLEICH HOCH und füllen zusammen exakt die
     Zeile. Mit gleichem grow für alle wären sie gleich breit und verschieden
     hoch, was wie ein Versehen aussieht. */
  .trustband{width:auto;align-self:stretch;
    margin-inline:calc((var(--gut) - 8px) * -1)}
  .siegel{flex-wrap:wrap;justify-content:center;align-items:flex-end;
    gap:clamp(.35rem,1.8vw,.7rem)}
  .siegel__it{flex:var(--ar,1) 1 0;min-width:0}
  .siegel__it--partner{--ar:1.043}   /* 73 × 70   */
  .siegel__it--pe{--ar:1}            /* 447 × 447 */
  .siegel__it--ihk{--ar:1.277}       /* 235 × 184 */
  /* Die Bewertungs-Karte der Ads-Seite ist Text, kein Siegel — sie bekommt eine
     eigene Zeile. Ohne das quetscht sie die vier Siegel zusammen. Sie MUSS nach
     .siegel__it stehen: gleiche Spezifität, es gewinnt die spätere Regel. */
  .siegel__it--ti{flex:1 0 100%;justify-content:center;margin-bottom:.3rem}
  .siegel__it img,
  .siegel__it--partner img,
  .siegel__it--pe img,
  .siegel__it--ihk img{width:100%;height:auto}
}
/* Zwischen Handy und Tablet würde die volle Breite 138 px hohe Siegel ergeben —
   dort wieder auf ein festes Maß, mittig. */
@media (min-width:561px) and (max-width:720px){
  .trustband{margin-inline:0;align-self:center}
  .siegel{justify-content:center}
  .siegel__it{flex:0 0 auto}
  .siegel__it img,
  .siegel__it--partner img,
  .siegel__it--pe img,
  .siegel__it--ihk img{width:auto;height:clamp(60px,9vw,80px)}
}
@media (max-width:880px){
  .kopf__nav{display:none}
  .kopf__burger{display:flex}
}
@media (max-width:560px){
  /* Beide Knöpfe gleich breit — nebeneinander ist bei diesen Texten zu eng */
  .hero__cta{display:grid;grid-template-columns:1fr;gap:.6rem}
  .hero__cta .btn{width:100%}
  .trustband{gap:1rem 1.25rem}
  .trustband__tr{display:none}
}

/* ==========================================================================
   Sektion: Wo das Budget verbrennt
   ========================================================================== */
.leck{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem)}
.leck__k{display:flex;flex-direction:column;gap:.85rem}
.leck__k h3{margin-top:.15rem}
.leck__bild{height:152px;border-radius:var(--r-sm);background:#0B0E10;
  border:1px solid var(--li-inv-soft);padding:.85rem;overflow:hidden;position:relative}

/* --- 1 Suchanfragen: die falschen fallen zurück -------------------------- */
.sq{display:flex;flex-direction:column;gap:.3rem;height:100%;justify-content:center}
.sq__z{display:flex;align-items:center;gap:.5rem;padding:.28rem .45rem;border-radius:6px;
  font-size:.6875rem;line-height:1.2;transition:none}
.sq__z span{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq__z i{margin-left:auto;padding-left:.6rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;font-style:normal;font-variant-numeric:tabular-nums;flex-shrink:0}
.sq__z--aus{color:var(--tx-inv-mut);opacity:1}
.sq__z--gut{color:#fff;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* Die unpassenden Anfragen werden nacheinander durchgestrichen */
.sq__z--aus span{position:relative}
.sq__z--aus span::after{content:"";position:absolute;left:0;top:50%;height:1px;width:0;
  background:currentColor;opacity:.75}
.laeuft .sq__z--aus span::after{animation:streichen .5s var(--fed-weich) var(--d,.35s) forwards}
@keyframes streichen{to{width:100%}}
.laeuft .sq__z--aus{animation:verblassen .5s var(--fed-weich) var(--d,.5s) forwards}
@keyframes verblassen{to{opacity:.42}}

/* --- 2 Zielseite: der Zeiger sucht --------------------------------------- */
.zs{position:relative;height:100%;display:grid;place-items:center}
.zs__seite{position:relative;width:152px;padding:10px;border-radius:8px;
  background:#14181B;border:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:5px}
.zs__nav{display:flex;gap:4px;margin-bottom:2px}
.zs__nav i{height:5px;flex:1;border-radius:2px;background:rgba(255,255,255,.22)}
.zs__blk{height:11px;border-radius:3px;background:rgba(255,255,255,.1)}
.zs__blk--halb{width:56%}
.zs__label{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-style:normal;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;color:var(--tx-inv-mut);
  letter-spacing:.04em;text-transform:uppercase}
.zs__cursor{position:absolute;width:10px;height:10px;border-radius:var(--r-pill);
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16);opacity:0}
.laeuft .zs__cursor{animation:suchen 4.2s var(--fed-weich) .5s infinite}
@keyframes suchen{
  0%{opacity:0;transform:translate(-30px,-34px)}
  10%{opacity:1;transform:translate(-30px,-34px)}
  32%{transform:translate(26px,-8px)}
  54%{transform:translate(-18px,14px)}
  76%{transform:translate(30px,32px)}
  92%{opacity:1;transform:translate(-2px,-2px)}
  100%{opacity:0;transform:translate(-2px,-2px)}
}

/* --- 3 Tracking: das Signal bricht ab ------------------------------------ */
.tr{height:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;position:relative}
.tr__box{padding:.45rem .7rem;border-radius:7px;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;white-space:nowrap}
.tr__weg{width:112px;height:24px;flex-shrink:0;overflow:visible}
.tr__linie{stroke:rgba(255,255,255,.5);stroke-width:1.5;fill:none}
.tr__linie--r{stroke:rgba(255,255,255,.18)}
.tr__luecke{stroke:rgba(255,255,255,.2);stroke-width:1.5;fill:none;stroke-dasharray:2 4}
.tr__punkt{fill:#fff;opacity:0}
.laeuft .tr__punkt{animation:signal 3.4s var(--fed-weich) .6s infinite}
@keyframes signal{
  0%{opacity:0;transform:translateX(0)}
  8%{opacity:1;transform:translateX(0)}
  40%{opacity:1;transform:translateX(56px)}
  52%{opacity:0;transform:translateX(62px)}
  100%{opacity:0;transform:translateX(62px)}
}
.tr__label{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-style:normal;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;color:var(--tx-inv-mut);
  letter-spacing:.03em}

@media (max-width:900px){
  .leck{grid-template-columns:1fr;gap:1rem}
  .leck__bild{height:138px}
}

/* ==========================================================================
   Sektion: Wie wir eine Kampagne aufbauen
   ========================================================================== */
.strecke{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem)}
.strecke + .strecke{border-top:1px solid var(--li-soft)}
.strecke--dreh .strecke__txt{order:2}
.strecke__txt{max-width:34rem}
.strecke__nr{display:inline-block;margin-bottom:.8rem;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.8125rem;font-weight:500;
  color:var(--tx);letter-spacing:.02em;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  text-decoration-color:var(--graphit)}
.strecke__txt h3{margin-bottom:.8rem}
.strecke__txt .t-body{color:var(--tx-mut);margin-bottom:1.1rem}
.strecke__txt .check-list li{font-size:.9375rem}

/* Gemeinsamer Rahmen aller Oberflächen in dieser Strecke */
.ui-karte{background:var(--papier);border:1px solid var(--li);border-radius:var(--r-card);
  box-shadow:var(--sh-2);overflow:hidden}
.ui-karte__kopf{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--li-soft)}
.ui-karte__titel{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;font-weight:500;
  color:var(--tx-mut);letter-spacing:.03em}
.ui-karte__chip{margin-left:auto;padding:.14rem .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}
.ui-karte__chip--live{display:inline-flex;align-items:center;gap:.35rem;border-color:rgba(47,191,113,.4)}

/* --- 01 Keyword-Planer --------------------------------------------------- */
.kw{padding:.3rem .9rem .5rem}
.kw__z{display:flex;align-items:center;gap:.6rem;padding:.42rem 0;
  border-bottom:1px solid var(--li-soft);font-size:.8125rem;
  opacity:0;transform:translateY(6px)}
.kw__z:last-child{border-bottom:0}
.kw__z span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw__z i,.kw__z b{font-family:'Geist Mono',ui-monospace,monospace;font-size:.75rem;font-style:normal;
  font-weight:500;font-variant-numeric:tabular-nums;flex-shrink:0;text-align:right}
.kw__z i{width:56px;color:var(--tx-mut)}
.kw__z b{width:56px}
.kw__kopf{font-size:.625rem;color:var(--tx-mut);text-transform:uppercase;letter-spacing:.05em}
.kw__kopf i,.kw__kopf b{font-size:.625rem;color:var(--tx-mut);font-weight:500}
.laeuft .kw__z{animation:feedRein .55s var(--fed-weich) forwards}
.laeuft .kw__z:nth-child(1){animation-delay:.15s}
.laeuft .kw__z:nth-child(2){animation-delay:.35s}
.laeuft .kw__z:nth-child(3){animation-delay:.5s}
.laeuft .kw__z:nth-child(4){animation-delay:.65s}
.laeuft .kw__z:nth-child(5){animation-delay:.8s}
.kw__neg{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:.7rem .9rem;border-top:1px solid var(--li-soft);background:var(--papier-2)}
.kw__neg-label{font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  color:var(--tx-mut);letter-spacing:.04em;margin-right:.15rem}
.kw__neg em{font-style:normal;padding:.16rem .45rem;border-radius:var(--r-pill);
  background:var(--papier);border:1px solid var(--li);font-size:.6875rem;color:var(--tx-mut);
  font-family:'Geist Mono',ui-monospace,monospace;opacity:0;transform:scale(.9)}
.laeuft .kw__neg em{animation:chipRein .45s var(--fed-weich) forwards}
.laeuft .kw__neg em:nth-of-type(1){animation-delay:1.0s}
.laeuft .kw__neg em:nth-of-type(2){animation-delay:1.12s}
.laeuft .kw__neg em:nth-of-type(3){animation-delay:1.24s}
.laeuft .kw__neg em:nth-of-type(4){animation-delay:1.36s}
@keyframes chipRein{to{opacity:1;transform:none}}

/* --- 02 Struktur-Baum ---------------------------------------------------- */
.baum{padding:.9rem}
.baum__wurzel{padding:.5rem .7rem;border-radius:var(--r-btn);background:var(--ink);color:#fff;
  font-size:.8125rem;font-weight:500;margin-bottom:.6rem}
.baum__ast{position:relative;display:flex;align-items:center;gap:.6rem;
  margin-left:1.1rem;padding:.5rem .7rem;border:1px solid var(--li);border-radius:var(--r-btn);
  margin-bottom:.45rem;background:var(--papier);
  opacity:0;transform:translateX(-8px)}
.baum__ast:last-child{margin-bottom:0}
.baum__ast::before{content:"";position:absolute;left:-1.1rem;top:50%;width:.75rem;height:1px;
  background:var(--li)}
.baum__ast::after{content:"";position:absolute;left:-1.1rem;bottom:50%;width:1px;height:100vh;
  background:var(--li);z-index:-1}
.baum__ast:first-of-type::after{height:1.1rem}
.baum__name{flex:1;font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.baum__kw{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;color:var(--tx-mut);
  flex-shrink:0}
.laeuft .baum__ast{animation:astRein .55s var(--fed-weich) var(--d,.3s) forwards}
@keyframes astRein{to{opacity:1;transform:none}}

/* --- 03 Anzeige schreiben ------------------------------------------------ */
.az{padding:.9rem}
.az__feld{display:block;margin-bottom:.7rem;position:relative}
.az__label{display:block;margin-bottom:.25rem;font-size:.625rem;color:var(--tx-mut);
  font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:.03em}
.az__eingabe{display:flex;align-items:center;min-height:34px;padding:.35rem .55rem;
  border:1px solid var(--li);border-radius:var(--r-btn);background:var(--papier-2);
  font-size:.8125rem;overflow:hidden;white-space:nowrap}
.az__tippen{font-weight:400}
.az__tippen::after{content:attr(data-tippen);display:inline-block;overflow:hidden;
  white-space:nowrap;max-width:0;vertical-align:bottom}
.laeuft .az__tippen::after{animation:tippen 1.1s steps(24,end) .45s forwards}
.laeuft .az__tippen--2::after{animation:tippen 1.3s steps(30,end) 1.75s forwards}
@keyframes tippen{to{max-width:32ch}}
.az__caret{width:1.5px;height:15px;background:var(--tx);margin-left:1px;opacity:0}
.laeuft .az__caret{animation:blinken .9s steps(2,end) .45s 2,verschwinden .01s 1.6s forwards}
.laeuft .az__caret--2{animation:blinken .9s steps(2,end) 1.75s 2,verschwinden .01s 3.1s forwards}
@keyframes blinken{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes verschwinden{to{opacity:0}}
.az__zaehler{position:absolute;right:.55rem;bottom:.55rem;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;color:var(--tx-mut);
  background:var(--papier-2);padding-left:.3rem}
.az__vorschau{margin-top:.9rem;padding:.7rem .8rem;border:1px solid var(--li);
  border-radius:var(--r-sm);background:var(--papier);opacity:0}
.laeuft .az__vorschau{animation:feedRein .6s var(--fed-weich) 3.2s forwards}
.az__gesponsert{display:block;font-size:.6875rem;font-weight:700;color:#202124;margin-bottom:.15rem}
.az__titel{display:block;font-size:.8125rem;color:var(--g-blau);line-height:1.3}
.az__url{display:block;font-size:.6875rem;color:var(--tx-mut);margin-top:.1rem}

/* --- 04 Conversion-Aktionen ---------------------------------------------- */
.cv{padding:.3rem .9rem .9rem}
.cv__z{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;
  border-bottom:1px solid var(--li-soft);font-size:.8125rem;opacity:0;transform:translateY(6px)}
.cv__name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv__wert{display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.8125rem;font-weight:500;
  font-variant-numeric:tabular-nums}
.cv__hk{width:14px;height:14px;background:var(--live);
  -webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat}
.laeuft .cv__z{animation:feedRein .55s var(--fed-weich) var(--d,.3s) forwards}
.cv__summe{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--li);font-size:.8125rem}
.cv__summe b{font-family:'Geist Mono',ui-monospace,monospace;font-size:1.125rem;font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .strecke{grid-template-columns:1fr;gap:1.75rem;padding-block:2.25rem}
  .strecke--dreh .strecke__txt{order:0}
  .strecke__txt{max-width:none}
}

/* ==========================================================================
   Nachgebaute Google-Oberflächen (Struktur und Farben aus echten Konto-Ansichten)
   ========================================================================== */
.gui{font-family:var(--g-font);color:var(--g-tx);
  background:#fff;border:1px solid var(--g-rand);border-radius:10px;overflow:hidden;
  box-shadow:var(--sh-2);font-size:12px;line-height:1.35;letter-spacing:0}
.gui b{font-weight:500}

/* Suchleiste */
.gui__suche{display:flex;align-items:center;gap:.55rem;padding:.7rem .85rem;
  background:var(--g-flaeche);border-bottom:1px solid var(--g-rand-soft)}
.gui__lupe{width:15px;height:15px;color:var(--g-tx-mut);flex-shrink:0}
.gui__suche span{color:var(--g-tx);font-size:11.5px;line-height:1.35}

/* Filterzeile */
.gui__filter{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:.6rem .85rem;border-bottom:1px solid var(--g-rand-soft)}
.gui__fchip{padding:.2rem .5rem;border:1px solid var(--g-rand);border-radius:100px;
  font-size:11px;color:var(--g-tx-mut);white-space:nowrap}
.gui__ideen{margin-left:auto;font-size:11px;color:var(--g-tx-mut);white-space:nowrap}
.gui__ideen b{color:var(--g-tx)}

/* Tabelle */
.gui__tab{padding-bottom:.1rem}
.gui__tr{display:grid;grid-template-columns:minmax(0,1.5fr) 96px 60px 74px 92px;
  align-items:center;gap:.5rem;padding:.5rem .85rem;
  border-bottom:1px solid var(--g-rand-soft);
  opacity:0;transform:translateY(5px)}
.gui__tr--kopf{font-size:10.5px;color:var(--g-tx-mut);line-height:1.25;
  align-items:end;background:#fff;opacity:1;transform:none;padding-bottom:.4rem}
.gui__gruppe{padding:.4rem .85rem;background:var(--g-flaeche);
  border-bottom:1px solid var(--g-rand-soft);font-size:10.5px;color:var(--g-tx-mut)}
.gui__c1{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gui__c2{display:flex;align-items:center;justify-content:flex-end;gap:.4rem}
.gui__c2 b{font-variant-numeric:tabular-nums}
.gui__c3,.gui__c5{text-align:right;font-variant-numeric:tabular-nums;color:var(--g-tx)}
.gui__c3--auf{color:#137333}
.gui__c4{display:flex;align-items:center;gap:.3rem;color:var(--g-tx)}
.gui__wb{width:6px;height:6px;border-radius:100px;background:var(--g-rot);flex-shrink:0;opacity:.85}
.gui__c5{font-size:11px;white-space:nowrap}
.gui__tr--kopf .gui__c2,.gui__tr--kopf .gui__c3,.gui__tr--kopf .gui__c5{text-align:right;display:block}
.gui__tr--kopf .gui__c4{display:block}

/* Sparkline wie im Planer */
.spark{width:52px;height:17px;flex-shrink:0;overflow:visible}
.spark__l{fill:none;stroke:var(--g-blau);stroke-width:1.3}
.spark__f{fill:var(--g-blau);opacity:.14}

/* Zeilen laufen nacheinander ein */
.laeuft .gui__tr{animation:feedRein .5s var(--fed-weich) var(--d,0s) forwards}

/* Negativliste */
.gui__neg{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:.65rem .85rem;background:var(--g-flaeche);border-top:1px solid var(--g-rand-soft)}
.gui__neg-label{font-size:10.5px;color:var(--g-tx-mut);margin-right:.1rem}
.gui__neg em{font-style:normal;padding:.15rem .45rem;border-radius:100px;background:#fff;
  border:1px solid var(--g-rand);font-size:11px;color:var(--g-tx-mut);
  opacity:0;transform:scale(.92)}
.laeuft .gui__neg em{animation:chipRein .4s var(--fed-weich) var(--d,1s) forwards}

@media (max-width:900px){
  .gui__tr{grid-template-columns:minmax(0,1.3fr) 84px 56px}
  .gui__c4,.gui__c5{display:none}
  .gui__tr--kopf .gui__c4,.gui__tr--kopf .gui__c5{display:none}
}

/* --- Kampagnen-/Anzeigengruppen-Ansicht --------------------------------- */
.gui__leiste{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;
  border-bottom:1px solid var(--g-rand-soft);background:var(--g-flaeche)}
.gui__kampagne{color:var(--g-blau);font-size:11.5px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gui__status{display:inline-flex;align-items:center;gap:.3rem;margin-left:auto;
  font-size:11px;color:var(--g-tx-mut);white-space:nowrap}
.gui__status i{width:7px;height:7px;border-radius:100px;background:var(--g-gruen)}

.gui__tab--ag .gui__tr{grid-template-columns:minmax(0,1.5fr) 58px 56px 48px 52px}
.gui__a1{min-width:0;display:flex;align-items:center;gap:.45rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gui__a2,.gui__a3,.gui__a4,.gui__a5{text-align:right;font-variant-numeric:tabular-nums}
.gui__pkt{width:7px;height:7px;border-radius:100px;background:#BDC1C6;flex-shrink:0}
.gui__pkt--an{background:var(--g-gruen)}
.gui__tr--aus{color:var(--g-tx-mut)}
.gui__tr--summe{background:var(--g-flaeche);border-bottom:0;font-weight:500;
  border-top:1px solid var(--g-rand)}
.gui__tab--ag .gui__tr--kopf{color:var(--g-tx-mut)}
.gui__tab--ag .gui__tr--kopf span{text-align:right}
.gui__tab--ag .gui__tr--kopf .gui__a1{text-align:left}

@media (max-width:900px){
  .gui__tab--ag .gui__tr{grid-template-columns:minmax(0,1.3fr) 52px 46px}
  .gui__a3,.gui__a5{display:none}
}

/* --- Anzeigen-Editor mit Handy-Vorschau ---------------------------------- */
.gui--editor{font-size:11.5px}
.gui__effekt{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;
  background:var(--g-blau-soft);border-bottom:1px solid var(--g-rand-soft)}
.gui__ring{width:22px;height:22px;border-radius:100px;flex-shrink:0;
  border:3px solid var(--g-blau);border-right-color:transparent;transform:rotate(-45deg)}
.laeuft .gui__ring{animation:ringVoll .9s var(--fed-weich) .6s forwards}
@keyframes ringVoll{to{border-right-color:var(--g-blau);transform:rotate(315deg)}}
.gui__effekt-txt{font-size:11px;color:var(--g-tx);line-height:1.3}

.gui__editor{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:.75rem;padding:.8rem .85rem}
.gui__spalte{min-width:0;display:flex;flex-direction:column;gap:.4rem}
.gui__feldlabel{font-size:10.5px;color:var(--g-tx-mut)}
.gui__feldlabel em{font-style:normal;color:var(--g-tx)}
.gui__feld{position:relative}
.gui__eingabe{display:flex;align-items:center;min-height:30px;padding:.3rem 2.9rem .3rem .5rem;
  border:1px solid var(--g-rand);border-radius:4px;background:#fff;
  font-size:11.5px;white-space:nowrap;overflow:hidden}
.gui__zaehl{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--g-tx-mut);font-variant-numeric:tabular-nums}
.tp::after{content:attr(data-tp);display:inline-block;overflow:hidden;white-space:nowrap;
  max-width:0;vertical-align:bottom}
.laeuft .tp::after{animation:tipp21 1.0s steps(21,end) .5s forwards}
.laeuft .tp--2::after{animation:tipp29 1.2s steps(29,end) 1.75s forwards}
.laeuft .tp--3::after{animation:tipp30 1.2s steps(30,end) 3.0s forwards}
@keyframes tipp21{to{max-width:21ch}}
@keyframes tipp29{to{max-width:29ch}}
@keyframes tipp30{to{max-width:30ch}}
.tp-caret{width:1.5px;height:13px;background:var(--g-tx);margin-left:1px;opacity:0}
.laeuft .tp-caret{animation:blinken .8s steps(2,end) .5s 2,verschwinden .01s 1.6s forwards}
.laeuft .tp-caret--2{animation:blinken .8s steps(2,end) 1.75s 2,verschwinden .01s 3.0s forwards}
.laeuft .tp-caret--3{animation:blinken .8s steps(2,end) 3.0s 2,verschwinden .01s 4.3s forwards}
.gui__hinweis{margin-top:.35rem;font-size:10.5px;color:var(--g-tx-mut)}
.gui__kwhk{display:flex;align-items:center;gap:.35rem;font-size:11px;color:#137333;
  opacity:0;transform:translateY(4px)}
.gui__hk{width:12px;height:12px;background:#137333;flex-shrink:0;
  -webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat}
.laeuft .gui__kwhk{animation:feedRein .5s var(--fed-weich) var(--d,4.3s) forwards}

/* Handy-Vorschau */
.handy{display:flex;justify-content:center}
.handy__rahmen{width:100%;border:1.5px solid var(--g-rand);border-radius:14px;overflow:hidden;
  background:#fff;padding:.4rem .35rem .3rem}
.handy__kopf{display:flex;align-items:center;gap:.3rem;padding:0 .15rem .35rem}
.handy__burger{display:flex;flex-direction:column;gap:2px}
.handy__burger i{width:9px;height:1.2px;background:#5F6368;display:block}
.handy__g{margin-inline:auto;font-size:12px;font-weight:500;letter-spacing:-.3px}
.handy__avatar{width:9px;height:9px;border-radius:100px;background:#DADCE0}
.handy__suchfeld{height:17px;border:1px solid var(--g-rand);border-radius:100px;
  display:flex;align-items:center;padding-inline:.35rem;margin-bottom:.4rem}
.handy__suchfeld svg{width:9px;height:9px;color:var(--g-tx-mut)}
.handy__anzeige{padding:.4rem .35rem;border-radius:6px;opacity:0}
.laeuft .handy__anzeige{animation:feedRein .6s var(--fed-weich) 4.5s forwards}
.handy__quelle{display:flex;align-items:center;gap:.3rem;margin-bottom:.25rem}
.handy__fav{width:12px;height:12px;border-radius:100px;border:1px solid var(--g-rand);flex-shrink:0}
.handy__url{font-size:8px;line-height:1.25;color:var(--g-tx-mut)}
.handy__url b{color:var(--g-tx);font-weight:400}
.handy__titel{display:block;font-size:11px;line-height:1.25;color:#1a0dab;margin-bottom:.2rem}
.handy__text{display:block;font-size:8px;line-height:1.3;color:var(--g-tx-mut)}
.handy__links{display:flex;gap:.25rem;margin-top:.3rem;flex-wrap:wrap}
.handy__links em{font-style:normal;font-size:7.5px;color:var(--g-blau);
  border:1px solid var(--g-rand);border-radius:100px;padding:.05rem .25rem}
.handy__anruf{display:flex;align-items:center;gap:.25rem;margin-top:.35rem;padding-top:.3rem;
  border-top:1px solid var(--g-rand-soft);font-size:8px;color:var(--g-blau)}
.handy__anruf svg{width:8px;height:8px}
.handy__rest{display:flex;flex-direction:column;gap:3px;padding:.4rem .35rem 0}
.handy__rest span{height:4px;border-radius:2px;background:#F1F3F4}
.handy__rest span:nth-child(2){width:75%}
.handy__rest span:nth-child(3){width:55%}

@media (max-width:900px){
  .gui__editor{grid-template-columns:minmax(0,1fr) 118px;gap:.5rem}
}

/* --- Zielvorhaben / Conversion-Aktionen ---------------------------------- */
.gui__ziel{display:flex;align-items:center;gap:.9rem;padding:.75rem .85rem;
  border-bottom:1px solid var(--g-rand);flex-wrap:wrap}
.gui__ziel-icon{width:22px;height:22px;color:var(--g-tx-mut);flex-shrink:0}
.gui__ziel-icon svg{width:100%;height:100%}
.gui__ziel-name{display:flex;flex-direction:column;gap:.12rem;font-size:13px;font-weight:500;
  padding-right:.9rem;border-right:1px solid var(--g-rand-soft)}
.gui__ziel-name em,.gui__ziel-sp em{font-style:normal;font-size:9.5px;font-weight:400;
  color:var(--g-tx-mut)}
.gui__ziel-name em{background:var(--g-flaeche);align-self:flex-start;padding:.05rem .3rem;
  border-radius:3px}
.gui__ziel-sp{display:flex;flex-direction:column;gap:.12rem;font-size:11.5px}
.gui__aktiv{display:inline-flex;align-items:center;gap:.25rem;font-weight:400;color:var(--g-tx)}
.gui__hk--gruen{background:var(--g-gruen);width:13px;height:13px}

.gui__tab--cv .gui__tr{grid-template-columns:minmax(0,1.4fr) 82px 58px 52px}
.gui__v1{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--g-blau)}
.gui__v2{color:var(--g-tx-mut);font-size:11px}
.gui__v3{text-align:right;font-variant-numeric:tabular-nums}
.gui__v4{text-align:right}
.gui__badge{display:inline-block;padding:.1rem .35rem;border-radius:3px;font-weight:400;
  background:var(--g-gruen-soft);color:#137333;font-size:10px}
.gui__tab--cv .gui__tr--kopf span{color:var(--g-tx-mut)}
.gui__tab--cv .gui__tr--kopf .gui__v1{color:var(--g-tx-mut)}
.gui__tab--cv .gui__tr--summe .gui__v1{color:var(--g-tx)}
.gui__fuss{padding:.5rem .85rem;text-align:right;font-size:10.5px;color:var(--g-tx-mut);
  border-top:1px solid var(--g-rand-soft)}

@media (max-width:900px){
  .gui__tab--cv .gui__tr{grid-template-columns:minmax(0,1.3fr) 54px 50px}
  .gui__v2{display:none}
  .gui__ziel{gap:.7rem}
}

.gui__feldlabel--2{margin-top:.3rem}
/* Mehrzeiliger Text lässt sich nicht sauber tippen — hier blendet die Zeile ein */
.gui__eingabe--lang{min-height:38px;white-space:normal;line-height:1.3;
  padding-right:3.2rem;align-items:flex-start}
.tp--4::after{content:attr(data-tp);max-width:none;opacity:0;animation:none!important}
.laeuft .tp--4::after{animation:einblenden .5s var(--fed-weich) 4.5s forwards!important}
.handy__fav{display:grid;place-items:center;border:0}
.handy__fav svg{width:11px;height:11px}

/* ==========================================================================
   Sektion: Preise
   ========================================================================== */
.preise{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem);
  align-items:start}
.preis{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.2vw,1.9rem);box-shadow:var(--sh-1)}
.preis--top{background:var(--ink);color:var(--tx-inv);border-color:var(--ink);
  box-shadow:var(--sh-3);overflow:hidden;
  /* Das Band sitzt über der Oberkante der Nachbarkarten — dadurch bleibt der
     Karteninhalt auf einer Linie, wie im Muster. */
  margin-top:-2.5rem;
  padding-top:calc(clamp(1.4rem,2.2vw,1.9rem) + 2.5rem)}

/* Band über der hervorgehobenen Karte (Muster NordVPN): volle Kartenbreite,
   weiß auf Ink, damit es die stärkste Karte auch optisch anführt. */
.preis__band{position:absolute;top:0;left:0;right:0;height:2.5rem;
  display:grid;place-items:center;background:#fff;color:var(--ink);
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

/* Name links, Ersparnis rechts */
.preis__kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:.75rem;margin-bottom:.4rem}
.preis__kopf .preis__name{margin-bottom:0}
.preis__spar{flex:0 0 auto;display:inline-flex;align-items:flex-start;
  padding:.3rem .6rem;border-radius:var(--r-pill);
  background:rgba(216,58,42,.09);color:#B8352A;
  font-size:.75rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.preis__spar i{font-style:normal;font-size:.6875rem;line-height:1;margin-left:.08em}
.preis--top .preis__spar{background:rgba(255,107,94,.16);color:#FFA79D}

.preis__name{display:block;font-size:1.0625rem;font-weight:500;letter-spacing:-.022em;
  margin-bottom:.4rem}
.preis__fuer{font-size:.875rem;line-height:1.5;color:var(--tx-mut);margin-bottom:1.2rem;
  min-height:3.9em}
.preis--top .preis__fuer{color:var(--tx-inv-mut)}
.preis__zahl{display:flex;flex-direction:column;gap:.15rem;margin-bottom:1.2rem}
.preis__zahl b{font-size:clamp(2.35rem,3.2vw,2.8rem);font-weight:800;font-stretch:82%;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.preis__zahl span{font-size:.8125rem;color:var(--tx-mut)}
.preis--top .preis__zahl span{color:var(--tx-inv-mut)}
.preis__btn{width:100%;margin-top:1.4rem}
.preis__liste{margin-bottom:1.1rem}
.preis__liste li{font-size:.875rem;padding-left:1.6rem}
.preis__liste li::before{width:15px;height:15px;top:.24em}
.preis__hinweis{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--li-soft);
  font-size:.75rem;color:var(--tx-mut)}
.preis--top .preis__hinweis{border-top-color:var(--li-inv-soft);color:var(--tx-inv-mut)}
.preis__hinweis--rechnen b{color:var(--tx);font-weight:500}

.preise__fuss{max-width:44rem;margin:clamp(2rem,3.5vw,2.75rem) auto 0;text-align:center}
.preise__fuss .t-sm{color:var(--tx-mut)}

@media (max-width:960px){
  .preise{grid-template-columns:1fr;gap:1.5rem}
  .preis__fuer{min-height:0}
  .preis--top{order:-1;margin-top:0}
}

/* --- Sektionsköpfe mobil ------------------------------------------------- */
@media (max-width:640px){
  /* Der harte Umbruch der Desktop-Fassung erzwingt mobil eine dritte Zeile —
     ohne ihn verteilt text-wrap:balance auf zwei. Das Leerzeichen davor im HTML
     hält die Wortgrenze, sonst kleben die Wörter zusammen. */
  .sec__kopf h2 br,.strecke__txt h3 br{display:none}
  /* Überschrift muss den Fließtext deutlich schlagen: vorher standen 22 px
     gegen 16 px, das liest sich wie zwei Absätze statt Kopf und Text. */
  .t-d2{font-size:clamp(1.75rem,8vw,2.25rem)}
  .sec__kopf h2 + .t-lead{margin-top:.95rem}
  .sec__kopf .t-lead{font-size:.9375rem;line-height:1.62}
}

/* --- Preiskarten: Ergänzungen nach der STARTERSET-Vorlage ----------------- */
/* Vergleichspreis: der Strich trägt das Signal, die Schrift bleibt monochrom */
.preis__vorher{display:inline-flex;align-items:baseline;gap:.35rem;
  font-size:1.0625rem;color:var(--tx-mut);margin-bottom:.35rem}
.preis__vorher s{font-size:1.25rem;font-weight:700;font-stretch:82%;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:#D93025;color:var(--tx)}
/* Sternchen hochgestellt an den Preis — im Flex-Container über align-self,
   vertical-align greift dort nicht */
.preis__vorher i{align-self:flex-start;margin-left:-.2rem;margin-top:.1rem;
  font-style:normal;font-size:.8125rem;font-weight:600;color:var(--tx-mut);line-height:1}
.preis--top .preis__vorher{color:var(--tx-inv-mut)}
.preis--top .preis__vorher s{color:#fff;text-decoration-color:#FF6B5E}
.preis--top .preis__vorher i{color:var(--tx-inv-mut)}

/* Fußnote zum Vergleichspreis */
.preise__note{max-width:44rem;margin:1.3rem auto 0;text-align:center;
  font-size:.8125rem;color:var(--tx-mut)}
/* Deutlich sichtbarer Block statt blasser Kleinschrift — wie die Balken in der PDF */
.preis__block{display:block;margin-bottom:.9rem;padding:.5rem .7rem;
  background:var(--papier-2);border-radius:var(--r-btn);
  font-size:.8125rem;font-weight:500;letter-spacing:-.008em;color:var(--tx)}
.preis--top .preis__block{background:rgba(255,255,255,.11);color:#fff}
.preis__liste li b{font-weight:700}
.preis__wenn{margin-top:auto;padding-top:1rem;border-top:1px solid var(--li-soft)}
.preis__liste{margin-bottom:1.1rem}
.preis--top .preis__wenn{border-top-color:var(--li-inv-soft)}
.preis__wenn-titel{display:block;margin-bottom:.6rem;font-size:.8125rem;font-weight:500}
.preis__liste--klein li{font-size:.8125rem;color:var(--tx-mut)}
.preis--top .preis__liste--klein li{color:var(--tx-inv-mut)}
.preis__liste--klein li::before{width:13px;height:13px;top:.26em}

.preis__zusatz{font-style:normal;font-weight:500;font-stretch:100%;
  font-size:.8125rem;color:var(--tx-mut);text-transform:none;letter-spacing:-.008em}
.preis--top .preis__zusatz{color:var(--tx-inv-mut)}

/* Neuigkeiten-Spalte im Mega-Menü */
.mm__news{display:flex;flex-direction:column;gap:.1rem;padding:.6rem .8rem;
  border-radius:var(--r-sm);transition:background .2s var(--fed-kurz),padding-left .2s var(--fed-kurz)}
.mm__news:hover{background:var(--papier-2);padding-left:1.4rem}
.mm__news em{font-style:normal;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;color:var(--tx-mut);letter-spacing:.02em}
.mm__news b{font-size:.875rem;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.mm__news i{font-style:normal;font-size:.75rem;line-height:1.35;color:var(--tx-mut)}
.mm__alle{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;padding:.4rem .8rem;
  font-size:.8125rem;font-weight:600;color:var(--tx)}
.mm__alle svg{transition:transform .3s var(--fed-kurz)}
.mm__alle:hover svg{transform:translateX(3px)}

/* Fußnoten der Preissektion klein und zurückgenommen */
.preise__note{font-size:.6875rem}
.preise__fuss .t-sm{font-size:.75rem;line-height:1.55}

/* ==========================================================================
   Sektion: Der Unterschied — Gegenüberstellung Zeile für Zeile
   ========================================================================== */
.gg{position:relative;display:grid;
  grid-template-columns:minmax(140px,.7fr) minmax(0,1.15fr) minmax(0,1.15fr);
  border:1px solid var(--li-inv-soft);border-radius:var(--r-lg);overflow:hidden}

/* Unsere Spalte trägt eine eigene Fläche über alle Zeilen */
.gg::before{content:"";position:absolute;top:0;bottom:0;
  left:calc((100% - 140px) * 0); /* Fallback, echte Position unten per grid-column */
  pointer-events:none}
.gg__kopf,.gg__zeile{display:grid;grid-column:1 / -1;
  grid-template-columns:subgrid;align-items:center}
.gg__kopf{border-bottom:1px solid var(--li-inv)}
.gg__zeile{border-bottom:1px solid var(--li-inv-soft);opacity:0;transform:translateY(8px)}
.gg__zeile:last-child{border-bottom:0}
.laeuft .gg__zeile{animation:feedRein .55s var(--fed-weich) var(--d,0s) forwards}

.gg__thema,.gg__wir,.gg__die{padding:clamp(.9rem,1.6vw,1.25rem) clamp(.9rem,1.6vw,1.4rem)}
.gg__thema{font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:var(--tx-inv-mut)}
.gg__kopf .gg__thema{padding-block:1.1rem}

/* Hervorgehobene Spalte */
.gg__wir{position:relative;display:flex;align-items:flex-start;gap:.7rem;
  background:rgba(255,255,255,.06);font-size:.9375rem;line-height:1.5;color:#fff;
  box-shadow:inset 1px 0 0 var(--li-inv),inset -1px 0 0 var(--li-inv)}
.gg__kopf .gg__wir{padding-block:1rem;background:rgba(255,255,255,.1)}
.gg__kopf .gg__wir img{height:26px;width:auto;align-self:flex-start}

.gg__die{display:flex;align-items:flex-start;gap:.7rem;
  font-size:.9375rem;line-height:1.5;color:var(--tx-inv-mut)}
.gg__kopf .gg__die{padding-block:1rem;font-size:.8125rem;font-weight:600;color:var(--tx-inv-mut)}

.gg__ja,.gg__nein{width:18px;height:18px;flex-shrink:0;margin-top:.16em;
  border-radius:var(--r-pill);display:grid;place-items:center}
.gg__ja{background:rgba(47,191,113,.18)}
.gg__ja::before{content:"";width:11px;height:11px;background:var(--live);
  -webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat}
.gg__nein{background:rgba(255,255,255,.06)}
.gg__nein::before{content:"";width:9px;height:1.5px;background:var(--tx-inv-mut);opacity:.8}

/* Lichtstreifen fährt einmal durch die eigene Spalte */
.gg__leuchte{position:absolute;top:0;bottom:0;grid-column:2;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent);
  opacity:0;transform:translateY(-100%)}
.laeuft .gg__leuchte{animation:ggScan 1.6s var(--fed-weich) .5s forwards}
@keyframes ggScan{
  0%{opacity:0;transform:translateY(-100%)}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;transform:translateY(100%)}
}

.gg__fuss{display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  max-width:40rem;margin:clamp(2rem,3.5vw,3rem) auto 0;text-align:center}
.gg__fuss .t-sm{color:var(--tx-inv-mut)}

@media (max-width:860px){
  /* Mobil: je Thema ein Block, unsere Antwort zuerst. Die Kopfzeile fällt weg,
     deshalb trägt JEDE Antwort ihre eigene Beschriftung — sonst weiß niemand,
     wer hier was macht. Die Beschriftung ist ein eigenes Flex-Kind (order:-1,
     volle Breite) und sitzt dadurch über Haken und Text. */
  .gg{grid-template-columns:1fr;border-radius:var(--r-card)}
  .gg__kopf{display:none}
  .gg__kopf,.gg__zeile{grid-template-columns:1fr}
  .gg__zeile{padding-top:.5rem;padding-bottom:.9rem}
  .gg__zeile + .gg__zeile{border-top:1px solid var(--li-inv-soft)}
  .gg__thema{padding-bottom:.5rem;font-size:.8125rem;font-weight:600;
    text-transform:none;letter-spacing:-.01em;color:#fff}

  /* Als Raster statt Flex: Haken in Spalte 1, Text in Spalte 2, die
     Beschriftung über beiden. Mit flex-wrap wäre der Text unter den Haken
     gerutscht, weil er als anonymes Flex-Kind seine volle Breite beansprucht. */
  .gg__wir,.gg__die{display:grid;grid-template-columns:auto 1fr;
    gap:.1rem .6rem;align-items:start}
  .gg__wir::before,.gg__die::before{
    grid-column:1 / -1;margin-bottom:.35rem;
    font-family:'Geist Mono',ui-monospace,monospace;
    font-size:.625rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
  .gg__wir::before{content:"RGN Marketing";color:#fff}
  .gg__die::before{content:"Andere Agenturen";color:var(--tx-inv-mut)}

  .gg__wir{box-shadow:none;border-radius:var(--r-sm);margin:0 .9rem .55rem;
    background:rgba(255,255,255,.09)}
  .gg__die{padding-top:0}
  .gg__leuchte{display:none}
}

/* ==========================================================================
   Sektion: Drei Kennzahlen (Karten mit eigener Visualisierung)
   ========================================================================== */
.zk__kopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(1.5rem,3vw,2.5rem);margin-bottom:clamp(1.75rem,3vw,2.5rem);flex-wrap:nowrap}
.zk__kopf > div{flex:1 1 auto;min-width:0;max-width:38rem}
.zk__btn{flex:0 0 auto;align-self:flex-end;white-space:nowrap}

.zk{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem)}
.zk__k{display:flex;flex-direction:column;background:var(--ink);color:var(--tx-inv);
  border-radius:var(--r-lg);padding:clamp(1.4rem,2.2vw,1.9rem);overflow:hidden}
.zk__bild{height:150px;margin-bottom:clamp(1.5rem,2.5vw,2.25rem);
  display:flex;align-items:flex-end;justify-content:center}
.zk__zahl{display:block;margin-bottom:.7rem;font-size:clamp(2.4rem,3.4vw,3rem);
  font-weight:800;font-stretch:82%;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.zk__txt{font-size:.875rem;line-height:1.55;color:var(--tx-inv-mut);margin:0}

/* 1 Balken */
.zkbalken{display:flex;align-items:flex-end;gap:5px;height:100%;width:100%}
.zkbalken i{flex:1;border-radius:3px 3px 0 0;background:rgba(255,255,255,.22);
  height:0;transition:none}
.laeuft .zkbalken i{animation:zkWachs .7s var(--fed-weich) var(--d,0s) forwards}
@keyframes zkWachs{to{height:var(--h)}}
.zkbalken i:last-child{background:linear-gradient(180deg,var(--akz),var(--akz-tief));
  box-shadow:0 0 26px rgba(76,141,255,.45)}

/* 2 Ablaufplan bis zum Kampagnenstart */
.zkplan{width:100%;display:grid;gap:clamp(7px,1.1vw,11px);align-content:center}
.zkplan > div{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;
  opacity:0;transform:translateY(6px)}
.laeuft .zkplan > div{animation:feedRein .5s var(--fed-weich) var(--d,0s) forwards}
.zkplan em{font-style:normal;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.5625rem;letter-spacing:.02em;color:var(--tx-inv-mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zkplan span{position:relative;display:block;height:12px;border-radius:4px;
  background:rgba(255,255,255,.07)}
.zkplan i{position:absolute;top:0;bottom:0;border-radius:4px;
  left:calc(var(--von) * 100%);width:calc((var(--bis) - var(--von)) * 100%);
  background:rgba(255,255,255,.32);
  transform:scaleX(0);transform-origin:left}
.laeuft .zkplan i{animation:zkPlan .55s var(--fed-weich) calc(var(--d,0s) + .1s) forwards}
@keyframes zkPlan{to{transform:scaleX(1)}}
.zkplan__live em{color:#fff;font-weight:500}
.zkplan__live i{background:linear-gradient(90deg,var(--akz-tief),var(--akz));
  box-shadow:0 0 20px rgba(76,141,255,.55)}
.laeuft .zkplan__live span::after{content:"";position:absolute;inset:-3px;
  border-radius:6px;border:1px solid var(--akz-linie);opacity:0;
  animation:zkPlanPuls 2.6s var(--fed-weich) 1.9s infinite}
@keyframes zkPlanPuls{0%,100%{opacity:0}45%{opacity:1}}

/* 3 Erfahrung: Treppe aufs Podest, die oberste Stufe in der Akzentfarbe */
.zkpodest{display:flex;align-items:flex-end;gap:clamp(9px,1.6vw,14px);
  width:100%;align-self:stretch}
.zkpodest i{position:relative;flex:1;height:0;border-radius:9px 9px 0 0;
  background:rgba(255,255,255,.1);display:flex;justify-content:center;overflow:hidden}
.laeuft .zkpodest i{animation:zkStufe .65s var(--fed-weich) var(--d,0s) forwards}
@keyframes zkStufe{to{height:var(--h)}}
.zkpodest b{margin-top:.6rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.8125rem;font-weight:500;color:var(--tx-inv-mut);opacity:0}
.laeuft .zkpodest b{animation:einblenden .4s var(--fed-weich)
  calc(var(--d,0s) + .45s) forwards}
.zkpodest i.zkpodest__eins{background:linear-gradient(180deg,var(--akz),var(--akz-tief));
  box-shadow:0 0 30px rgba(76,141,255,.5)}
.zkpodest__eins b{color:#fff;font-weight:600}
.laeuft .zkpodest i.zkpodest__eins{animation:zkStufe .65s var(--fed-weich) var(--d,0s) forwards,
  zkPodestPuls 2.8s var(--fed-weich) 2.2s infinite}
@keyframes zkPodestPuls{
  0%,100%{box-shadow:0 0 30px rgba(76,141,255,.45)}
  50%{box-shadow:0 0 44px rgba(76,141,255,.8)}
}

@media (max-width:900px){
  .zk{grid-template-columns:1fr;gap:1rem}
  .zk__bild{height:128px}
  .zk__kopf{align-items:flex-start;flex-wrap:wrap}
  .zk__btn{align-self:flex-start}
}

/* ══ NACHWEISE ═══════════════════════════════════════════════════════════
   Raster nach dem Muster, das Florian gezeigt hat: ruhige helle Sektion,
   Karten unterschiedlicher Höhe, eine dunkle Karte als Anker. Die Belege
   selbst (Badge, Zertifikat, Sterne) sind der Inhalt — nicht Dekoration. */
.nw{display:grid;gap:clamp(.85rem,1.4vw,1.25rem);
    grid-template-columns:1.06fr 1fr 1fr}

.nw__k{display:flex;flex-direction:column;gap:clamp(1.1rem,1.8vw,1.5rem);
  background:var(--papier);border:1px solid var(--li);border-radius:var(--r-lg);
  padding:clamp(1.25rem,2vw,1.7rem);box-shadow:var(--sh-1);
  transition:box-shadow .4s var(--fed-weich),transform .4s var(--fed-weich),
             border-color .4s var(--fed-weich)}
.nw__k:hover{box-shadow:var(--sh-2);transform:translateY(-3px);
  border-color:rgba(42,48,51,.22)}

/* Reihe 1: drei gleich hohe Siegelkarten. Reihe 2: Bewertungen über zwei
   Spalten, ProvenExpert in der dritten. Keine Karte ist zwei Reihen hoch —
   sonst wird die Sektion zu wuchtig. */
.nw__k--dunkel{background:var(--ink);color:var(--tx-inv);border-color:transparent}
.nw__k--dunkel:hover{border-color:transparent;
  box-shadow:0 2px 4px rgba(14,17,19,.08),0 28px 60px rgba(14,17,19,.18)}
.nw__k--dunkel .nw__quelle{color:var(--tx-inv-mut)}
.nw__k--dunkel .nw__txt p{color:var(--tx-inv-mut)}
.nw__k--dunkel .check-list li{font-size:.875rem}
.nw__k--dunkel .check-list li::before{background:#fff}

/* Siegelfläche */
.nw__marke{display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--papier-2);padding:clamp(1.1rem,2vw,1.5rem)}
.nw__marke img{display:block;height:auto}
.nw__marke--partner{background:rgba(255,255,255,.05);
  border:1px solid var(--li-inv-soft)}
.nw__marke--partner img{width:clamp(96px,10vw,118px)}
.nw__k--siegel .nw__marke img{width:clamp(84px,9vw,104px)}
.nw__marke--dok{padding:0;overflow:hidden;background:#fff;border:1px solid var(--li)}
.nw__marke--dok img{width:100%}
.nw__marke--ihk{background:#fff;border:1px solid var(--li)}
.nw__marke--ihk img{width:clamp(124px,13vw,160px)}
/* ProvenExpert: beide Auszeichnungen nebeneinander über dem Text */
.nw__pe{display:flex;gap:clamp(.5rem,1vw,.75rem)}
.nw__pe img{display:block;width:calc(50% - .375rem);height:auto;
  border-radius:var(--r-btn)}

/* Bewertungs-Karte über zwei Spalten: Siegel links, Text rechts */
.nw__k--quer{grid-column:span 2;flex-direction:row;align-items:center;
  gap:clamp(1.25rem,2.6vw,2.2rem)}
.nw__k--quer .nw__txt{flex:1 1 auto;min-width:0}
.nw__pf{flex:0 0 auto;width:clamp(210px,22vw,278px);display:grid;gap:.7rem}
.nw__pf1{display:block;width:100%;height:auto;border-radius:var(--r-sm);
  border:1px solid var(--li)}

/* Trustpilot-Siegel nachgebaut — Logo, Sternkacheln, Wert */
.tp{display:flex;align-items:center;gap:.55rem;
  padding:.6rem .75rem;border:1px solid var(--li);border-radius:var(--r-sm);
  background:var(--papier)}
.tp__logo{display:block;width:clamp(72px,7.6vw,88px);height:auto;flex:0 0 auto}
.tp__sterne{display:inline-flex;gap:2px;flex:0 0 auto}
.tp__sterne i{position:relative;width:17px;height:17px;border-radius:2px;
  background:#00B67A}
.tp__sterne i[style]{background:linear-gradient(90deg,#00B67A var(--f),#DCDCE6 var(--f))}
.tp__sterne i::after{content:"";position:absolute;inset:2px;background:#fff;
  -webkit-mask:var(--stern) center/contain no-repeat;
  mask:var(--stern) center/contain no-repeat}
.tp__wert{font-size:.8125rem;font-weight:700;letter-spacing:-.01em;color:#191919;
  white-space:nowrap}

/* Textteil */
.nw__txt{display:flex;flex-direction:column}
.nw__quelle{display:block;margin-bottom:.5rem;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.75rem;font-weight:500;letter-spacing:.01em;color:var(--tx-mut)}
.nw__titel{font-size:clamp(1.0625rem,.95rem + .35vw,1.1875rem);line-height:1.28;
  font-weight:700;letter-spacing:-.025em;margin:0 0 .6rem}
.nw__txt p{font-size:.875rem;line-height:1.6;color:var(--tx-mut);margin:0}
.nw__liste{margin-top:clamp(1.1rem,2vw,1.4rem)}

/* Bewertungsfläche */
.nw__wert{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  background:var(--papier-2);border-radius:var(--r-sm);
  padding:clamp(1.3rem,2.2vw,1.8rem)}
.nw__werti{display:flex;align-items:center;gap:clamp(.85rem,1.6vw,1.15rem)}
.nw__werti > div{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.nw__g{width:clamp(34px,3.6vw,44px);height:clamp(34px,3.6vw,44px);flex:0 0 auto}
.nw__tiquelle{font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.6875rem;color:var(--tx-mut);letter-spacing:.01em}
.nw__zahl{font-weight:800;font-stretch:82%;letter-spacing:-.03em;line-height:.92;
  font-size:clamp(2.4rem,2rem + 1.6vw,3.1rem);font-variant-numeric:tabular-nums}
.nw__zahl--klein{font-size:clamp(1.3rem,1.1rem + .5vw,1.6rem);line-height:1}
.nw__sterne{display:inline-flex;gap:3px;color:#F6BB06}
.nw__sterne svg{width:19px;height:18px;opacity:0;transform:scale(.55) rotate(-14deg)}
.laeuft .nw__sterne svg{animation:sternPop .5s var(--fed-weich) var(--d,0s) forwards}
@keyframes sternPop{to{opacity:1;transform:none}}

/* Trustindex-Zeile */
.nw__ti{display:flex;align-items:center;gap:.6rem}
.nw__tisiegel{display:inline-flex;align-items:center;gap:.45rem;margin-top:.35rem;
  background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:.44rem .95rem;font-size:.8125rem;font-weight:600;letter-spacing:-.012em}
.nw__tisiegel::before{content:"";width:14px;height:14px;background:#fff;
  -webkit-mask:var(--haken) center/contain no-repeat;mask:var(--haken) center/contain no-repeat}

@media (max-width:1040px){
  .nw{grid-template-columns:1fr 1fr}
  .nw__k--hoch,.nw__k--hoch2{grid-row:auto;grid-column:auto}
  .nw__k--quer{grid-column:span 2}
  .nw__k--hoch{grid-row:auto;grid-column:1 / -1;flex-direction:row;align-items:center;
    gap:clamp(1.5rem,3vw,2.5rem)}
  .nw__k--hoch .nw__marke{flex:0 0 auto}
  .nw__k--hoch .nw__txt{flex:1 1 auto}
}
@media (max-width:680px){
  .nw{grid-template-columns:1fr}
  .nw__k--skillshop{display:none}   /* mobil eine Karte weniger, sonst zu lang */
  .nw__k--quer{grid-column:span 1;flex-direction:column;align-items:stretch}
  .nw__pf{width:100%}
  .nw__marke--partner{padding:1.4rem}
}

/* Beleg-Link in einer Nachweis-Karte */
.nw__link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-size:.8125rem;font-weight:600;letter-spacing:-.01em;
  color:var(--tx);text-decoration:none;
  border-bottom:1px solid var(--li);padding-bottom:2px;align-self:flex-start;
  transition:border-color .3s var(--fed-weich),gap .3s var(--fed-weich)}
.nw__link svg{width:14px;height:14px}
.nw__link:hover{border-color:var(--graphit);gap:.65rem}

/* ══ FAQ ═════════════════════════════════════════════════════════════════ */
.faq{max-width:52rem;margin-inline:auto;display:grid;gap:.6rem}
.faq__p{background:var(--papier);border:1px solid var(--li);border-radius:var(--r-card);
  box-shadow:var(--sh-1);overflow:hidden;transition:border-color .3s var(--fed-weich)}
.faq__p[open]{border-color:rgba(42,48,51,.22);box-shadow:var(--sh-2)}
.faq__p summary{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:clamp(1rem,1.8vw,1.3rem) clamp(1.1rem,2vw,1.5rem);cursor:pointer;list-style:none;
  font-size:clamp(.9375rem,.88rem + .2vw,1.0625rem);font-weight:600;letter-spacing:-.02em;
  color:var(--tx)}
.faq__p summary::-webkit-details-marker{display:none}
.faq__p summary i{position:relative;flex:0 0 auto;width:20px;height:20px}
.faq__p summary i::before,.faq__p summary i::after{content:"";position:absolute;
  top:50%;left:50%;width:13px;height:1.6px;border-radius:2px;background:var(--graphit);
  transform:translate(-50%,-50%);transition:transform .3s var(--fed-weich)}
.faq__p summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__p[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{padding:0 clamp(1.1rem,2vw,1.5rem) clamp(1.1rem,2vw,1.4rem)}
.faq__a p{font-size:.9375rem;line-height:1.65;color:var(--tx-mut);margin:0;max-width:44rem}

/* ══ KONTAKT ═════════════════════════════════════════════════════════════ */
/* Vollbild-Split: links das Teamfoto mit Überschrift und Siegeln, rechts das
   Formular auf Tiefschwarz. Felder ohne Kasten — nur eine Linie. */
.kvc-sek{background:var(--ink);position:relative;isolation:isolate}
.kvc{display:grid;grid-template-columns:1fr 1fr;min-height:660px}

.kvc__bild{position:relative;overflow:hidden}
/* Nur das Hintergrundbild, nicht die Siegel im Aufsatz */
.kvc__bild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kvc__schleier{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,17,19,.32) 0%,rgba(14,17,19,.9) 78%)}
.kvc__auf{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(1.8rem,4vw,3.2rem);color:#fff}
.kvc__auf h2{margin:0}
.kvc__auf p{margin:1rem 0 0;font-size:1rem;line-height:1.65;color:rgba(255,255,255,.76);
  max-width:36ch}
/* Die Siegel liegen als weiße Marken direkt auf dem Foto — farbige Logos auf
   einem Bild tragen nicht, die dunklen Anteile verschwinden. */
.kvc__siegel{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.1rem,2.6vw,2rem);
  margin-top:clamp(1.6rem,3vw,2.3rem);padding-top:clamp(1.3rem,2.4vw,1.8rem);
  border-top:1px solid rgba(255,255,255,.18)}
.kvc__siegel img{display:block;width:auto;opacity:.94}
.kvc__siegel img[src$="google-partner-weiss.svg"]{height:clamp(52px,5vw,64px)}
.kvc__siegel img[src$="ausbildungsbetrieb-weiss.webp"]{height:clamp(46px,4.4vw,58px)}
.kvc__siegel img[src$="sterne-weiss.webp"]{height:clamp(40px,3.8vw,50px)}

.kvc__form{background:var(--ink);color:var(--tx-inv);
  padding:clamp(1.8rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center}
.kvc__kicker{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.kvc__titel{margin:.6rem 0 0;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);font-weight:700;
  letter-spacing:-.03em;color:#fff}
.kvc__unter{margin:.5rem 0 clamp(1.4rem,2.6vw,2rem);font-size:.875rem;line-height:1.6;
  color:rgba(255,255,255,.62)}

.kvf{display:grid;gap:1.15rem}
.kvf__reihe{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.kvf__knopf{width:100%;justify-content:center;margin-top:.3rem}
.kvf__status{margin:0;font-size:.8125rem;line-height:1.5;min-height:1.2em}
.kvf__status[data-art="ok"]{color:#7BD6A0;font-weight:500}
.kvf__status[data-art="fehler"]{color:#FF9A8E}

/* Feld ohne Kasten: eine Linie, die Beschriftung wandert beim Tippen nach oben */
.kvc__feld{position:relative;display:block}
.kvc__feld input,.kvc__feld textarea{
  width:100%;font:inherit;font-size:.9375rem;color:#fff;background:transparent;
  border:0;border-bottom:1px solid rgba(255,255,255,.24);border-radius:0;
  padding:1.35rem 0 .5rem;transition:border-color .2s var(--e-ui)}
.kvc__feld textarea{resize:vertical;min-height:4.2rem;line-height:1.55}
.kvc__feld input:focus,.kvc__feld textarea:focus{outline:none;border-bottom-color:#fff}
.kvc__feld input:user-invalid,.kvc__feld textarea:user-invalid{border-bottom-color:#FF9A8E}
.kvc__feld > span{position:absolute;left:0;top:1.35rem;font-size:.9375rem;
  color:rgba(255,255,255,.55);pointer-events:none;
  transition:transform .2s var(--e-ui),font-size .2s var(--e-ui);transform-origin:0 0}
.kvc__feld input:focus + span,.kvc__feld input:not(:placeholder-shown) + span,
.kvc__feld textarea:focus + span,.kvc__feld textarea:not(:placeholder-shown) + span{
  transform:translateY(-1.3rem);font-size:.6875rem;letter-spacing:.04em;
  text-transform:uppercase}

.kvc__haken{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;
  font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.62);margin-top:.3rem}
.kvc__haken input{width:17px;height:17px;margin:.12rem 0 0;accent-color:#fff}
.kvc__haken a{color:#fff;text-underline-offset:2px}

.kvc__direkt{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.1rem;
  font-size:.8125rem;color:rgba(255,255,255,.62)}
.kvc__direkt a{display:inline-flex;align-items:center;gap:.45rem;color:#fff;
  text-decoration:none;font-weight:600}
.kvc__direkt a:hover{text-decoration:underline;text-underline-offset:3px}
.kvc__direkt svg{width:14px;height:14px;fill:currentColor}

.kvc-sek.ist-gesendet .kvf{display:none}

@media (max-width:980px){
  .kvc{grid-template-columns:1fr;min-height:0}
  .kvc__bild{min-height:380px}
}
@media (max-width:560px){
  .kvf__reihe{grid-template-columns:1fr}
}

/* ══ MONATSBERICHT ═══════════════════════════════════════════════════════ */
.br{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(2rem,4vw,3.5rem);
  align-items:center}
.br__txt .t-lead{margin-top:1.05rem}
.br__liste{margin-top:clamp(1.4rem,2.4vw,1.8rem)}
.br__btn{margin-top:clamp(1.5rem,2.6vw,2rem)}

.br__blatt{background:var(--papier);border:1px solid var(--li);border-radius:var(--r-lg);
  padding:clamp(1.25rem,2.2vw,1.7rem);box-shadow:var(--sh-3);display:grid;gap:1rem}
.br__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--li-soft)}
.br__marke{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-stretch:76%;
  text-transform:uppercase;letter-spacing:.01em;font-size:1rem;line-height:1;color:var(--ink)}
.br__marke i{display:block;font-style:normal;font-size:.4375rem;letter-spacing:.24em;
  font-weight:500;color:var(--tx-mut);margin-top:.15em}
.br__monat{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;
  color:var(--tx-mut)}

.br__kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.br__kpi > div{background:var(--papier-2);border-radius:var(--r-sm);padding:.8rem .9rem;
  opacity:0;transform:translateY(8px)}
.laeuft .br__kpi > div{animation:feedRein .5s var(--fed-weich) var(--d,0s) forwards}
.br__kpi b{display:block;font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);font-weight:800;
  font-stretch:82%;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.br__kpi em{display:block;font-style:normal;font-size:.6875rem;color:var(--tx-mut);
  margin-top:.3rem}

.br__label{font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
.br__zeilen{display:grid;gap:.5rem}
.br__zeilen > div{display:grid;grid-template-columns:1fr 34% auto;align-items:center;
  gap:.7rem;opacity:0}
.laeuft .br__zeilen > div{animation:einblenden .45s var(--fed-weich) var(--d,0s) forwards}
.br__kw{font-size:.8125rem;color:var(--tx);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.br__bar{display:block;height:7px;border-radius:4px;background:var(--papier-3);overflow:hidden}
.br__bar i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--ink);
  transform:scaleX(0);transform-origin:left}
.laeuft .br__bar i{animation:zkPlan .6s var(--fed-weich) calc(var(--d,0s) + .1s) forwards}
.br__n{font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:1.5em;
  text-align:right}
.br__aus .br__kw,.br__aus .br__n{color:var(--tx-mut)}
.br__aus .br__bar i{background:#D8564A}

.br__notiz{background:var(--ink);color:var(--tx-inv);border-radius:var(--r-sm);
  padding:.9rem 1rem;opacity:0;transform:translateY(8px)}
.laeuft .br__notiz{animation:feedRein .55s var(--fed-weich) 1.7s forwards}
.br__nk{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-inv-mut);margin-bottom:.4rem}
.br__notiz p{margin:0;font-size:.8125rem;line-height:1.55;color:#fff}

/* ══ TEAM ════════════════════════════════════════════════════════════════ */
/* Inhalt links, Teamfoto rechts */
.tm{display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(2rem,4vw,3.5rem);
  align-items:center}
.tm__txt .t-lead{margin-top:1.05rem}
/* Die Aufzählung klebte auf dem Handy am Knopf darunter. */
.tm__txt .hero__cta{margin-top:clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem)}

/* Erfahrungszahlen als schmales Band unter dem Text */
.tm__zahlen{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--li);border-bottom:1px solid var(--li);
  margin-top:clamp(1.5rem,2.8vw,2rem)}
.tm__zahlen > div{padding:clamp(1rem,1.8vw,1.35rem) clamp(.4rem,1.2vw,1rem);
  opacity:0;transform:translateY(8px)}
.tm__zahlen > div:first-child{padding-left:0}
.tm__zahlen > div + div{border-left:1px solid var(--li)}
.laeuft .tm__zahlen > div{animation:feedRein .55s var(--fed-weich) var(--d,0s) forwards}
.tm__zahlen b{display:block;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem);font-weight:800;
  font-stretch:82%;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tm__zahlen em{display:block;font-style:normal;font-size:.8125rem;line-height:1.4;
  color:var(--tx-mut);margin-top:.45rem}

.tm__wege{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.2rem,2.2vw,1.6rem)}
.tm__wege .btn svg{fill:currentColor}

.tm__bild{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2)}
.tm__bild img{display:block;width:100%;height:auto}

@media (max-width:900px){
  .br{grid-template-columns:1fr}
  /* Flo, 19.09.2026: Auf dem Handy zuerst lesen, warum es diesen Bericht gibt —
     das Blatt kommt danach. Vorher zog order:-1 die Grafik nach oben. */
  .br__blatt{order:0;margin-top:clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)}
  .br__zeilen > div{grid-template-columns:1fr 28% auto}
  .tm{grid-template-columns:1fr}
  .tm__bild{order:-1}
}
@media (max-width:560px){
  .tm__zahlen{grid-template-columns:1fr}
  .tm__zahlen > div{padding-left:0}
  .tm__zahlen > div + div{border-left:0;border-top:1px solid var(--li)}
}

/* ══ REFERENZEN ══════════════════════════════════════════════════════════
   Seit die Startseite dieselbe Sektion zeigt, liegt sie hier statt in
   webdesign.css — sonst fehlt der Startseite der Laptop-Rahmen. */
/* Acht Kundenseiten auf einer Bühne — umgeschaltet über die Namen darüber.
   Eine Seite groß zeigen schlägt acht Seiten klein nebeneinander. */
.rf{margin-top:clamp(2rem,3.6vw,3rem)}
.rf__reiter{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
  margin-bottom:clamp(1.8rem,3.2vw,2.6rem)}
.rf__r{border:1px solid var(--li);background:transparent;cursor:pointer;font:inherit;
  padding:.5rem .85rem;border-radius:var(--r-pill,999px);
  font-size:.8125rem;font-weight:500;color:var(--tx-mut);letter-spacing:-.01em;
  transition:border-color .2s var(--e-ui),color .2s var(--e-ui),background .2s var(--e-ui)}
.rf__r:not(.rf__r--an):hover{border-color:var(--graphit);color:var(--tx)}
.rf__r--an{background:var(--ink);border-color:var(--ink);color:#fff}

.rf__p{display:grid;grid-template-columns:1.32fr 1fr;
  gap:clamp(1.6rem,3.4vw,3rem);align-items:center}
.rf__p[hidden]{display:none}
/* Beim Umschalten kommt die neue Seite kurz von unten — sonst wirkt der Wechsel
   wie ein Bildfehler. */
.rf__p:not([hidden]){animation:rfRein .45s var(--fed-weich)}
@keyframes rfRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rf__txt{display:flex;flex-direction:column;align-items:flex-start}
.rf__txt .ref__n{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem)}
.rf__txt .ref__x{margin-top:.7rem;font-size:.9375rem}
.rf__txt .ref__l{margin-top:1.1rem;padding-top:0}

/* Laptop mit der echten Seite, Handy davor */
.ref__ger{position:relative;padding:0 0 clamp(2.4rem,4.4vw,3.4rem) clamp(2.2rem,4vw,3.2rem)}
.ref__lap{display:block;background:var(--ink);border-radius:11px;padding:7px 7px 0;
  box-shadow:var(--sh-2)}
.ref__bar{display:flex;align-items:center;gap:4px;padding:0 2px 6px}
.ref__bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.ref__bar em{margin-left:7px;flex:1;background:rgba(255,255,255,.08);border-radius:4px;
  padding:2px 8px;font-style:normal;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.5625rem;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ref__lap img{display:block;width:100%;height:auto;border-radius:3px 3px 0 0;
  aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.ref__handy{position:absolute;left:0;bottom:0;width:clamp(76px,9vw,116px);
  background:var(--ink);border-radius:14px;padding:4px;box-shadow:var(--sh-3)}
/* Echte Geräte sind deutlich schlanker als 9:16 — 9:19,5 sieht nach Handy aus */
.ref__handy img{display:block;width:100%;height:auto;border-radius:11px;
  aspect-ratio:9/19.5;object-fit:cover;object-position:50% 0}

.ref__art{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
.ref__n{display:block;margin-top:.4rem;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  font-weight:700;letter-spacing:-.03em}
.ref__x{margin:.5rem 0 0;font-size:.875rem;line-height:1.6;color:var(--tx-mut)}
.ref__l{margin-top:auto;padding-top:.9rem;font-size:.8125rem;font-weight:600;
  color:var(--tx);text-decoration:none;align-self:flex-start}
.ref__l::after{content:" ↗";display:inline-block;opacity:.5;
  transition:transform .2s var(--e-ui),opacity .2s var(--e-ui)}
.ref__l:hover::after{opacity:1;transform:translate(2px,-2px)}
.ref__l:hover{text-decoration:underline;text-underline-offset:4px}

.ref__fuss{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(2.2rem,4vw,3.2rem);
  padding-top:clamp(1.8rem,3.2vw,2.6rem);border-top:1px solid var(--li);text-align:center}
.ref__fuss p{margin:0;max-width:34rem;font-size:.9375rem;line-height:1.65;color:var(--tx-mut)}

@media (max-width:900px){
  .rf__p{grid-template-columns:1fr;gap:1.4rem}
  .rf__reiter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);scroll-snap-type:x proximity;
    /* ohne scroll-padding rastet der erste Reiter bei scrollLeft 20 ein —
       dann greift „ist-anfang" nie und der linke Pfeil steht immer da. */
    scroll-padding-inline:var(--gut)}
  .rf__reiter::-webkit-scrollbar{display:none}
  .rf__r{flex:0 0 auto;scroll-snap-align:start}
}
/* Florian, 19.09.2026: „immer nur ein dazwischen und dann kann man nach links
   und nach rechts scrollen" — bei zwei sichtbaren Reitern verdecken die Pfeile
   den Nachbarn und man liest nur Wortfetzen. Unter 720 px steht deshalb genau
   ein Reiter im Bild, mit Platz an beiden Enden für die Pfeile. */
@media (max-width:720px){
  .rf__reiter{gap:0;scroll-snap-type:x mandatory}
  .rf__r{flex:0 0 100%;text-align:center;padding-inline:3.1rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;scroll-snap-align:center}
}
@media (max-width:560px){
  .ref__ger{padding-left:2.6rem}
  .ref__handy{width:78px}
  .ref__fuss .btn{width:100%;justify-content:center}
}

/* Der Rahmen nur bei Tastaturbedienung — nach einem Mausklick blieb sonst ein
   Kasten um den zuletzt geklickten Reiter stehen. */
.rf__r:focus{outline:none}
.rf__r:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ══ SCHRITT-LISTE ═══════════════════════════════════════════════════════
   Ursprünglich für den Webdesign-Ablauf gebaut, seit der Unternehmensprofil-
   Seite auf zwei Seiten im Einsatz — deshalb hier statt in webdesign.css.
   Senkrechte Strecke statt vier gleicher Karten: Nummer links an einer Schiene,
   Text in der Mitte, die Miniatur rechts. */
.st{position:relative;list-style:none;margin:clamp(2.2rem,4vw,3.2rem) 0 0;padding:0;
  display:grid;gap:clamp(1.1rem,2.2vw,1.8rem);max-width:60rem;margin-inline:auto}
.st__schiene{position:absolute;left:calc(clamp(44px,5vw,58px) / 2);top:18px;bottom:26px;
  width:2px;background:rgba(255,255,255,.14);border-radius:2px}
.st__schiene i{position:absolute;inset:0;border-radius:2px;background:rgba(255,255,255,.55);
  transform:scaleY(0);transform-origin:50% 0}
.laeuft .st__schiene i{animation:stFuell 1.8s var(--fed-weich) .4s forwards}
@keyframes stFuell{to{transform:scaleY(1)}}
.st__punkt{position:absolute;left:50%;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16);opacity:0}
.laeuft .st__punkt{animation:stFahrt 1.8s var(--fed-weich) .4s forwards}
@keyframes stFahrt{0%{top:0;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}

.st__s{position:relative;display:grid;
  grid-template-columns:clamp(44px,5vw,58px) minmax(0,1fr) clamp(150px,19vw,230px);
  gap:clamp(1rem,2.4vw,2rem);align-items:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);padding:clamp(1.1rem,2vw,1.5rem);
  opacity:0;transform:translateY(10px);transition:border-color .25s var(--e-ui)}
/* Nicht `.laeuft .st__s`, sondern `.st__s.laeuft`: Jeder Schritt trägt sein
   eigenes data-szene und startet, wenn ER zu sehen ist — nicht schon, wenn
   die Sektion mit dem oberen Rand hereinrutscht. */
.st__s.laeuft{animation:feedRein .6s var(--fed-weich) var(--d,0s) forwards;
  animation-delay:calc(.5s + var(--d,0s))}
.st__s:hover{border-color:rgba(255,255,255,.26)}
.st__s--live{background:var(--ink-2);border-color:rgba(255,255,255,.28)}
.st__nr{display:grid;place-items:center;width:clamp(44px,5vw,58px);
  height:clamp(44px,5vw,58px);border-radius:50%;
  background:var(--ink);border:2px solid rgba(255,255,255,.22);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.875rem;font-weight:600;
  color:#fff;margin-left:calc(-1 * clamp(1.1rem,2vw,1.5rem) - 1px);z-index:1}
.st__s--live .st__nr{background:#fff;color:var(--ink);border-color:#fff}
.st__z{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx-inv-mut)}
.st__t{display:block;margin-top:.35rem;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  font-weight:700;letter-spacing:-.03em;color:#fff}
.st__txt p{margin:.45rem 0 0;font-size:.875rem;line-height:1.6;color:var(--tx-inv-mut)}
.st__bild{position:relative;height:96px;border-radius:12px;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.st__s--live .st__bild{background:rgba(255,255,255,.07)}

/* Mobil bleibt die Schiene, aber die dritte Spalte fällt weg: Bei 350 px blieben
   für den Text sonst rund 40 px — jedes Wort eine eigene Zeile. Die Miniatur
   rutscht als volle Breite unter den Text. */
@media (max-width:760px){
  .st{gap:.85rem}
  .st__schiene{left:calc(clamp(38px,11vw,46px) / 2);top:14px;bottom:20px}
  .st__s{grid-template-columns:clamp(38px,11vw,46px) minmax(0,1fr);
    gap:.5rem .85rem;align-items:start;padding:1.05rem 1.1rem 1.1rem}
  .st__nr{width:clamp(38px,11vw,46px);height:clamp(38px,11vw,46px);font-size:.75rem;
    margin-left:calc(-1 * 1.1rem - 1px)}
  .st__txt{grid-column:2}
  .st__bild{grid-column:1 / -1;height:clamp(104px,30vw,128px);margin-top:.35rem}
}

.st__fuss{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(2rem,3.6vw,2.8rem);text-align:center}
.st__fuss p{margin:0;max-width:30rem;font-size:.875rem;line-height:1.65;
  color:var(--tx-inv-mut)}

/* ══ BEWERTUNGEN ═════════════════════════════════════════════════════════
   Zentrierter Kopf, zwei Portale, eine Bahn die von allein läuft. Die Sterne
   tragen die Farbe ihres Portals — eine Bewertungskarte, die anders aussieht
   als das Original, wirkt gebaut. */
.bw__kopf{max-width:44rem;margin-inline:auto;text-align:center}
.bw__kopf .t-lead{margin-top:1.05rem;margin-inline:auto;color:var(--tx-inv-mut)}

.bw__tabs{display:flex;justify-content:center;gap:.25rem;width:fit-content;
  margin:clamp(1.7rem,3.2vw,2.5rem) auto 0;padding:.3rem;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)}
.bw__tab{display:flex;align-items:center;gap:.55rem;border:0;cursor:pointer;font:inherit;
  padding:.62rem 1rem;border-radius:10px;background:transparent;color:var(--tx-inv-mut);
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  transition:background .2s var(--e-ui),color .2s var(--e-ui)}
/* :hover ist spezifischer als die Zustandsklasse — ohne :not() färbt der
   Zeiger, der nach dem Klick auf dem Reiter stehen bleibt, die Schrift des
   aktiven weißen Reiters weiß. Der Reiter wirkt dann leer. */
.bw__tab:not(.bw__tab--an):hover{color:#fff}
.bw__tab--an{background:#fff;color:var(--ink)}
.bw__tab .bw__g{width:18px;height:18px;flex:0 0 auto}
/* Das Trustpilot-Logo liegt in beiden Originalfassungen vor: dunkler Schriftzug
   für den aktiven weißen Reiter, weißer für den ruhenden auf Dunkel.
   .bw__tp img ist spezifischer als .bw__tp--d — ohne den Elternteil im Selektor
   blieben beide sichtbar und stapelten sich. */
.bw__tp{display:block;flex:0 0 auto;height:18px}
.bw__tp img{display:block;height:18px;width:auto}
.bw__tp .bw__tp--d{display:none}
.bw__tab--an .bw__tp--d{display:block}
.bw__tab--an .bw__tp--h{display:none}
.bw__tab-txt--nurlesen{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.bw__tab-z{display:flex;align-items:center;gap:.3rem;
  padding-left:.6rem;margin-left:.15rem;border-left:1px solid currentColor;
  font-size:.9375rem;font-weight:600;letter-spacing:-.02em;opacity:.7}
.bw__tab-z i{font-style:normal;opacity:.5}

/* --- Die Bahn: läuft von allein, Rand blendet in die Sektionsfarbe --------- */
.bw__panel{margin-top:clamp(1.5rem,2.8vw,2.2rem)}
.bw__panel[hidden]{display:none}
.bw__bahn{position:relative;overflow:hidden;padding-block:3px}
.bw__bahn::before,.bw__bahn::after{content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:clamp(56px,13vw,190px);pointer-events:none}
.bw__bahn::before{left:0;background:linear-gradient(to right,var(--ink) 20%,transparent)}
.bw__bahn::after{right:0;background:linear-gradient(to left,var(--ink) 20%,transparent)}

/* Die Spur trägt jede Karte zweimal. Der Weg ist genau eine Garnitur — deshalb
   liegt der Abstand als margin AN der Karte und nicht als gap an der Spur:
   mit gap wäre die halbe Spurbreite um einen halben Abstand daneben und die
   Naht würde bei jedem Durchlauf sichtbar springen. */
.bw__spur{display:flex;width:max-content;
  animation:bwLauf calc(var(--n,12) * 6s) linear infinite}
.bw__bahn:hover .bw__spur{animation-play-state:paused}
@keyframes bwLauf{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.bw__k{flex:0 0 clamp(290px,25vw,390px);margin-right:clamp(.9rem,1.5vw,1.15rem);
  display:flex;flex-direction:column;
  background:#fff;color:var(--ink);border-radius:var(--r-card);
  padding:1.15rem 1.25rem 1.1rem;box-shadow:var(--sh-2)}
.bw__k-oben{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.bw__st{display:flex;gap:2px}
.bw__st svg{width:15px;height:14px;fill:#FBBC05}
/* Trustpilot-Karten tragen Trustpilots Grün — die Sternfarbe ist bei beiden
   Portalen Teil des Wiedererkennens. */
.bw__k--tp .bw__st svg{fill:#00b67a}
.bw__vq{display:flex;align-items:center;gap:.35rem;flex:0 0 auto;
  font-size:.75rem;font-weight:500;color:var(--tx-mut)}
.bw__vq .bw__g,.bw__vq .bw__tps{width:14px;height:14px}
/* Der Text bestimmt die Kartenhöhe. Zwei Bewertungen sind über 800 Zeichen
   lang — ohne Deckel zieht eine davon die ganze Bahn auf. */
.bw__t{margin:.85rem 0 1.1rem;font-size:.875rem;line-height:1.6;color:var(--tx-2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.bw__k-fuss{display:flex;align-items:center;gap:.6rem;margin-top:auto;
  padding-top:.9rem;border-top:1px solid var(--li-soft)}
.bw__av{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;
  border-radius:50%;background:var(--papier-2);border:1px solid var(--li-soft);
  font-size:.8125rem;font-weight:700;color:var(--graphit)}
.bw__wer{display:flex;flex-direction:column;min-width:0}
.bw__name{font-size:.875rem;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw__datum{font-size:.75rem;color:var(--tx-mut)}

/* --- Prüfzeile unter der Bahn -------------------------------------------- */
.bw__meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.45rem 1.3rem;margin:clamp(1.3rem,2.4vw,1.9rem) auto 0;max-width:50rem;
  text-align:center}
.bw__pruef{font-size:.8125rem;line-height:1.55;color:var(--tx-inv-mut)}
.bw__link{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;
  font-size:.8125rem;font-weight:600;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.bw__link:hover{border-bottom-color:#fff}
.bw__link svg{transition:transform .2s var(--e-ui)}
.bw__link:hover svg{transform:translateX(3px)}

/* Mobil bleiben beide Logos sichtbar — daran erkennt man das Portal schneller
   als am Namen. Dafür rücken Abstände und Zahlen enger zusammen. */
@media (max-width:720px){
  .bw__tabs{width:100%;gap:.15rem;padding:.25rem}
  .bw__tab{flex:1 1 0;justify-content:center;gap:.4rem;padding:.6rem .35rem;font-size:.8125rem}
  .bw__tab .bw__g{width:16px;height:16px}
  .bw__tp,.bw__tp img{height:15px}
  .bw__tab-z{gap:.22rem;padding-left:.4rem;margin-left:.05rem;font-size:.8125rem}
  .bw__k{flex-basis:min(78vw,300px);margin-right:.75rem;padding:1rem 1.05rem}
  .bw__t{-webkit-line-clamp:8}
}
/* Erst unter 360 px stehen die beiden Reiter untereinander — so passt Logo,
   Name und Wert in jede Zeile, statt dass eins davon wegfällt. Bei 390 px
   (gemessen: 139 px Inhalt auf 170 px Platz) passen sie nebeneinander. */
@media (max-width:359px){
  .bw__tabs{flex-direction:column;gap:.2rem}
  .bw__tab{padding:.55rem .7rem}
}
/* Wer Bewegung abbestellt hat, bekommt eine Bahn zum Selberwischen. */
@media (prefers-reduced-motion:reduce){
  .bw__spur{animation:none;width:auto;overflow-x:auto;scroll-snap-type:x proximity}
  .bw__k{scroll-snap-align:start}
  .bw__bahn{overflow:visible}
}

/* ══ WOMIT WIR ARBEITEN — schmale Leiste mit Systemen und Werkzeugen ═════
   Bewusst KEIN Laufband wie bei den Kundenlogos: die Leiste steht still, ist
   flacher und trägt zu jedem Zeichen den Namen. Es sind fremde Marken —
   deshalb einfarbig, klein und ohne jede Partner-Andeutung. */
.wmw{padding-block:clamp(1.5rem,2.8vw,2.3rem);background:var(--papier-2);
  border-block:1px solid var(--li-soft)}
.wmw__kopf{margin:0 0 clamp(1rem,1.8vw,1.4rem);text-align:center;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut)}
.wmw__reihe{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.1rem,2.6vw,2.4rem);margin:0;padding:0;list-style:none}
.wmw__m{display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .25s var(--e-ui)}
.wmw__m:hover{transform:translateY(-2px)}
.wmw__m img{display:block;width:auto;height:clamp(18px,2vw,23px);flex:0 0 auto}
.wmw__m span{font-size:.8125rem;font-weight:600;letter-spacing:-.012em;color:var(--tx)}
@media (max-width:620px){
  .wmw__reihe{gap:.85rem 1.3rem}
  .wmw__m{gap:.4rem}
  .wmw__m span{font-size:.75rem}
  .wmw__m img{height:17px}
}

/* ══ FUSSZEILE — auf ALLEN Seiten, deshalb hier und nicht in start.css ══
   Lag vorher in start.css; die vier Unterseiten laden die nicht und hatten
   dadurch einen komplett ungestalteten Fuß. */
/* ══ FUSSZEILE ═══════════════════════════════════════════════════════════ */
.fz{background:var(--ink);color:var(--tx-inv);padding-block:clamp(2.6rem,5vw,4rem) 0}
.fz__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(1.8rem,3.6vw,3.4rem)}
.fz__logo{display:block;height:34px;width:auto;margin-bottom:1rem}
.fz__marke p{margin:0;max-width:26rem;font-size:.875rem;line-height:1.65;
  color:var(--tx-inv-mut)}
/* Siegel im Fuß: der Fuß ist dunkel, die Urkunden sind weiße Bilder —
   deshalb sitzt jedes auf einer eigenen hellen Kachel. */
.fz__siegel{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;
  margin:1.25rem 0 0;padding:0;list-style:none}
/* Keine weiße Kachel mehr: die Siegel stehen selbst auf dem dunklen Fuß.
   Die beiden ProvenExpert-Urkunden und das IHK-Siegel bringen ihren hellen
   Grund mit — der gehört zur Urkunde und wird nicht verändert. */
.fz__siegel li{display:flex;align-items:center}
.fz__siegel img{display:block;width:auto;height:46px;border-radius:6px}
.fz__siegel li:first-child img{height:52px}
.fz__nav,.fz__kontakt{display:grid;gap:.5rem;align-content:start}
.fz__nav b,.fz__kontakt b{font-size:.8125rem;font-weight:700;letter-spacing:-.01em;
  margin-bottom:.2rem}
.fz__nav a,.fz__kontakt a{font-size:.875rem;color:var(--tx-inv-mut);text-decoration:none}
.fz__nav a:hover,.fz__kontakt a:hover{color:#fff;text-decoration:underline;
  text-underline-offset:4px}
.fz__kontakt address{margin-top:.4rem;font-style:normal;font-size:.8125rem;line-height:1.6;
  color:var(--tx-inv-mut)}
.fz__unten{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:.8rem;margin-top:clamp(2rem,4vw,3rem);padding-block:1.2rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.75rem;color:var(--tx-inv-mut)}
@media (max-width:760px){
  .fz__grid{grid-template-columns:1fr}
}
/* ══ FUSSZEILE — Social ══════════════════════════════════════════════════ */
.fz__sozial{display:flex;gap:1rem;margin-top:.7rem}
.fz__sozial a{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem}
.fz__sozial svg{width:17px;height:17px;flex:0 0 auto}

/* ══ VIDEOS AUS DEM KANAL — auf mehreren Seiten, deshalb hier ═══════════
   Lag zuerst in ads.css. Seit die Sektion auch auf der Unternehmensprofil-
   und der SEO-Seite steht, gehört sie in die geteilte Datei. */
/* ══ VIDEOS AUS DEM KANAL — Endlos-Schiene ══════════════════════════════
   Drei Karten gleichzeitig sichtbar, die Schiene läuft im Kreis: die Karten
   stehen zweimal in der Spur, und wenn der Zeiger über das Original hinaus
   ist, springt er ohne Übergang um eine volle Runde zurück. */
.vk__kanaele{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  margin-top:clamp(1.2rem,2.4vw,1.7rem)}
.vk__kanaele .btn{gap:.5rem}

.vk{position:relative;max-width:1000px;margin:clamp(2rem,4vw,3rem) auto 0;
  --sicht:3;--luecke:20px}
.vk__bahn{overflow:hidden;margin-inline:calc(var(--luecke) * -0.5);
  padding-inline:calc(var(--luecke) * 0.5);
  /* die Kanten weich auslaufen lassen, damit die nächste Karte angedeutet ist */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.vk__spur{display:flex;gap:var(--luecke);will-change:transform;
  transition:transform .55s var(--fed-weich)}
.vk__spur.ohne-weg{transition:none}

/* Florian, 19.09.2026: „die sollen auch von links nach rechts einfach ganz
   normal scrollbar sein". Unter 900 px wird die Bahn deshalb zum echten
   Scroll-Bereich — mit Schwung, Fangpunkten und ohne sichtbare Leiste. Das
   Transform-Karussell bleibt am Rechner, wo es mit den Pfeilen bedient wird. */
@media (max-width:900px){
  .vk__bahn{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
    scroll-padding-inline:calc(var(--luecke) * 0.5)}
  .vk__bahn::-webkit-scrollbar{display:none}
  .vk__spur{transform:none !important;transition:none}
  .vk__k{scroll-snap-align:center}
}
.vk__k{flex:0 0 calc((100% - (var(--sicht) - 1) * var(--luecke)) / var(--sicht));
  min-width:0;display:flex;flex-direction:column;gap:.85rem}

.vk__media{position:relative;aspect-ratio:9/16;border-radius:var(--r-card);
  overflow:hidden;background:var(--ink);isolation:isolate;
  box-shadow:0 22px 44px -22px rgba(14,17,19,.45)}
.vk__poster,.vk__vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.vk__vid{opacity:0;transition:opacity .3s var(--e-ui)}
.vk__media.laeuft-ab .vk__vid{opacity:1}
.vk__media.laeuft-ab .vk__poster{opacity:0}
.vk__poster{transition:opacity .3s var(--e-ui),transform .5s var(--fed-weich)}
.vk__k:hover .vk__poster{transform:scale(1.03)}

.vk__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;width:62px;height:62px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:transform .25s var(--fed-weich),background .2s var(--e-ui),opacity .25s var(--e-ui)}
.vk__play svg{width:24px;height:24px;margin-left:3px}
.vk__play:hover{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.vk__media.laeuft-ab .vk__play{opacity:0;pointer-events:none}
.vk__dauer{position:absolute;right:.7rem;bottom:.7rem;z-index:2;
  padding:.2rem .5rem;border-radius:var(--r-btn);background:rgba(14,17,19,.72);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;color:#fff;
  transition:opacity .25s var(--e-ui)}
.vk__media.laeuft-ab .vk__dauer{opacity:0}

.vk__bu{margin:0;font-size:.875rem;line-height:1.5;color:var(--tx-2)}
.vk__bu b{display:block;margin-bottom:.15rem;font-size:.9375rem;font-weight:700;
  letter-spacing:-.015em;color:var(--tx)}

.vk__pfeil{position:absolute;top:38%;z-index:3;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--li);
  background:var(--papier);color:var(--tx);cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(14,17,19,.35);
  transition:background .2s var(--e-ui),border-color .2s var(--e-ui),transform .2s var(--e-ui)}
.vk__pfeil svg{width:19px;height:19px}
.vk__pfeil:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.vk__pfeil--zurueck{left:calc(var(--luecke) * -0.5 - 23px)}
.vk__pfeil--vor{right:calc(var(--luecke) * -0.5 - 23px)}

@media (max-width:1120px){
  .vk__pfeil--zurueck{left:6px}
  .vk__pfeil--vor{right:6px}
}
@media (max-width:900px){ .vk{--sicht:2;--luecke:16px} }
@media (max-width:620px){
  .vk{--sicht:1.18;--luecke:12px}
  .vk__bahn{-webkit-mask-image:none;mask-image:none}
  .vk__play{width:54px;height:54px}
  .vk__pfeil{top:auto;bottom:-62px;width:42px;height:42px}
  .vk__pfeil--zurueck{left:calc(50% - 48px)}
  .vk__pfeil--vor{right:calc(50% - 48px)}
  .vk{margin-bottom:4.6rem}
}
@media (prefers-reduced-motion:reduce){ .vk__spur{transition:none} }

/* ══ GETEILTE KLEINTEILE — auf mehr als einer Seite, deshalb hier ═════════
   Lagen vorher in profil.css; die GEO-Seite lädt die nicht. */
/* Statt einer Zahl steht in der Karte ein Wort — das braucht einen kleineren
   Grad, sonst bricht es über drei Zeilen. */
.zk__zahl--wort{font-size:clamp(1.5rem,2.1vw,1.9rem);letter-spacing:-.035em}
/* Ein Wort bekommt einen Strich, der sich beim Sichtwerden zieht. */
.u-ums{position:relative;display:inline-block}
.u-ums::after{content:"";position:absolute;left:0;right:0;bottom:.06em;
  height:clamp(3px,.09em,7px);border-radius:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%}
.laeuft .u-ums::after{animation:auNach .6s var(--fed-weich) .45s forwards}
@keyframes auNach{to{transform:scaleX(1)}}

/* ══ STANDORTE „Leitstand" ═══════════════════════════════════════════════
   Übernommen von RGN Entrümpelung & Umzug (Bauart vom 19.09.2026) und auf
   diese Farbwelt gesetzt. Karte + Register nach Region, eigenes SVG, kein
   Kartendienst und damit keine Einwilligung nötig.

   WICHTIG — so entstehen die Stadtseiten:
   Eine Stadt OHNE eigene Seite steht als <button data-url="…"> in der Liste.
   Sie zeigt die Nadel auf der Karte, ist aber KEIN Link — es gibt also keine
   toten Verweise. Sobald die Stadtseite gebaut ist, wird aus dem <button>
   ein <a href="…"> mit derselben Adresse. Mehr ist nicht zu tun.

   Die Brücke der Gestaltungs-Token: der Baustein kommt aus einer Seite mit
   anderen Namen. Statt 40 Ersetzungen im Regelwerk werden die alten Namen
   hier einmal auf unsere gelegt. */
.so{
  --accent:var(--akz); --accent-dk:var(--akz-tief); --accent-sf:var(--akz-soft);
  --muted:var(--tx-mut); --muted-2:var(--tx-mut); --line:var(--li);
  --t:.28s; --t-fast:.18s; --e-out:var(--fed-weich); --e-spring:var(--fed);
}
.so{padding-block:clamp(3.5rem,3rem + 4vw,6.5rem)}
.so__kopf{max-width:46rem;margin-bottom:clamp(1.8rem,1rem + 2.4vw,3rem)}
.so__kopf .t-lead{margin-top:.9rem}

/* --- 49. Standorte „Leitstand“ (19.09.2026) --------------------------------
   Karte + Register nach Region, ersetzt die alte .ort-Sektion. Quelle und
   Labor: rgn-standorte-sektionen/ (Linux-Rechner). Nur opacity/transform. */
.so-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.so1__tel{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--ink)}
.so1__tel svg{width:15px;height:15px;color:var(--accent)}
.so1__tel:hover{color:var(--accent)}
/* --- 0. Gemeinsame Karte ------------------------------------------------- */
.so-karte{position:relative;width:100%;aspect-ratio:1000/1339.6;user-select:none;-webkit-user-select:none}
.so-karte > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.so-land path{fill:var(--papier-3);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;transition:fill var(--t) var(--e-out)}
.so-pins{position:absolute;inset:0}

.so-pin{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;padding:0;border:0;
  background:none;display:grid;place-items:center;cursor:pointer;z-index:1;
  transition:opacity var(--t) var(--e-out)}
.so-pin i{display:block;width:11px;height:11px;border-radius:50%;background:#fff;
  border:2.5px solid var(--accent);box-shadow:0 1px 2px rgba(17,24,32,.2);
  transition:transform var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out)}
.so-pin--hq{z-index:2}
.so-pin--hq i{width:16px;height:16px;background:var(--accent);border:3px solid #fff;
  box-shadow:0 0 0 1.5px var(--accent),0 3px 8px rgba(76,141,255,.35)}
.so-pin:hover,.so-pin:focus-visible,.so-pin.is-an{z-index:3}
.so-pin:hover i,.so-pin:focus-visible i,.so-pin.is-an i{transform:scale(1.5);background:var(--accent);border-color:#fff}
.so-pin:focus-visible{outline:none}
.so-pin:focus-visible i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.so-pin.is-weg{opacity:.16;pointer-events:none}

/* Name nur beim Überfahren, mittig über der Nadel (Florian, GMH 15.09.2026) */
.so-tip{position:absolute;left:0;top:0;z-index:6;display:flex;flex-direction:column;align-items:center;
  transform:translate(-50%,calc(-100% - 15px));padding:.4rem .7rem .45rem;border-radius:8px;
  background:var(--ink);color:#fff;white-space:nowrap;line-height:1.2;pointer-events:none;
  box-shadow:0 6px 18px rgba(17,24,32,.18);opacity:0;transition:opacity var(--t-fast) var(--e-out)}
.so-tip b{font-size:.8125rem;font-weight:600;letter-spacing:-.005em}
.so-tip small{margin-top:.18rem;font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.so-tip small:empty{display:none}
.so-tip::after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;margin-left:-4.5px;
  background:var(--ink);transform:rotate(45deg);border-radius:2px}
.so-tip--unten{transform:translate(-50%,15px)}
.so-tip--unten::after{bottom:auto;top:-4px}
.so-tip.is-an{opacity:1}

.so-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#fff;
  border:2.5px solid var(--accent);vertical-align:-1px;flex:none}
.so-dot--hq{background:var(--accent)}

@keyframes so-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==========================================================================
   1 · LEITSTAND — Karte + Register nach Region
   ========================================================================== */
.so1__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.so1__buehne{position:relative}
.so1__karte{max-width:480px;margin-inline:auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect}
.so1__karte .so-land path.is-region{fill:#DCE9FF}
.so1__karte .so-land path.is-vorschau{fill:#EDF3FF}
.so1__karte.is-fern .so-pin:not(.so-pin--hq) i{transform:scale(.82)}
.so1__karte.is-fern .so-pin:not(.so-pin--hq):hover i,.so1__karte.is-fern .so-pin.is-an i{transform:scale(1.4)}
.so1__legende{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.9rem;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2)}
.so1__legende span{display:inline-flex;align-items:center;gap:.5rem}

.so1__reg{min-width:0}
.so1__suche{display:flex;align-items:center;gap:.65rem;padding:0 .6rem 0 1.05rem;height:3.25rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  transition:border-color var(--t) var(--e-out),box-shadow var(--t) var(--e-out)}
.so1__suche:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-sf)}
.so1__suche > svg{width:16px;height:16px;color:var(--accent);flex:none}
.so1__suche input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  font-size:.9375rem;color:var(--ink);-webkit-appearance:none;appearance:none}
.so1__suche input::placeholder{color:var(--muted-2)}
.so1__suche input::-webkit-search-cancel-button{-webkit-appearance:none}
.so1__suche em{flex:none;min-width:2.1rem;padding:.2rem .5rem;border-radius:var(--r-pill);
  background:var(--accent-sf);color:var(--accent-dk);font-style:normal;text-align:center;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;font-weight:500}

/* Tabs mit Routen-Linie als Indikator (Strich + Punkt, Signatur-Motiv) */
.so1__tabs{position:relative;display:flex;gap:.1rem;margin-top:1.1rem;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.so1__tabs::-webkit-scrollbar{display:none}
.so1__tab{flex:none;display:flex;align-items:baseline;gap:.45rem;padding:.85rem .75rem .9rem;border:0;
  background:none;cursor:pointer;font-family:'Geist Mono',ui-monospace,monospace;font-size:.75rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  transition:color var(--t) var(--e-out)}
.so1__tab:first-child{padding-left:.15rem}
.so1__tab em{font-style:normal;font-size:.6875rem;color:var(--muted-2);transition:color var(--t) var(--e-out)}
.so1__tab:hover{color:var(--ink)}
.so1__tab[aria-selected="true"]{color:var(--ink)}
.so1__tab[aria-selected="true"] em{color:var(--accent)}
.so1__tab:focus-visible{outline-offset:-3px}
.so1__tabstrich{position:absolute;left:0;bottom:-1px;width:100px;height:2px;background:var(--accent);
  transform-origin:0 50%;transform:translateX(var(--x,0)) scaleX(var(--s,.4));pointer-events:none;
  transition:transform .5s var(--e-spring),opacity var(--t) var(--e-out)}
.so1__tabpunkt{position:absolute;left:0;bottom:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:var(--accent);transform:translateX(var(--e,40px));pointer-events:none;
  transition:transform .5s var(--e-spring),opacity var(--t) var(--e-out)}
.so1__tabs.is-leer .so1__tabstrich,.so1__tabs.is-leer .so1__tabpunkt{opacity:0}

.so1__panels{display:grid;margin-top:.25rem}
.so1__panel{grid-area:1/1;min-width:0}
.so-js .so1__panel[hidden]{display:block;visibility:hidden;pointer-events:none}
.so-js .so1__panel:not([hidden]){animation:so-ein .38s var(--e-out)}

.so1__regionen li + li{border-top:1px solid var(--line)}
.so1__reg-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;
  grid-template-areas:"name zahl pfeil" "orte zahl pfeil";column-gap:1.25rem;align-items:center;
  width:100%;padding:.95rem .15rem;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
.so1__reg-name{grid-area:name;font-size:1.0625rem;font-weight:600;color:var(--ink);line-height:1.3}
.so1__reg-orte{grid-area:orte;margin-top:.15rem;font-size:.875rem;line-height:1.45;color:var(--muted)}
.so1__reg-zahl{grid-area:zahl;min-width:2.2ch;text-align:right;font-stretch:76%;font-size:2.5rem;font-weight:800;
  line-height:1;letter-spacing:0;color:transparent;-webkit-text-stroke:1.2px var(--muted-2);
  transition:color var(--t) var(--e-out),-webkit-text-stroke-color var(--t) var(--e-out)}
.so1__reg-zeile > svg{grid-area:pfeil;width:16px;height:16px;color:var(--accent);opacity:.35;
  transition:transform var(--t) var(--e-out),opacity var(--t) var(--e-out)}
.so1__reg-zeile:hover .so1__reg-zahl,.so1__reg-zeile:focus-visible .so1__reg-zahl{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.so1__reg-zeile:hover > svg,.so1__reg-zeile:focus-visible > svg{opacity:1;transform:translateX(3px)}

.so1__pkopf{display:flex;flex-direction:column;gap:.1rem;padding:1rem 0 .7rem}
.so1__pkopf b{font-stretch:76%;font-weight:700;font-size:1.3125rem;line-height:1.1;letter-spacing:.005em;
  text-transform:uppercase;color:var(--ink)}
.so1__pkopf span{font-size:.8125rem;line-height:1.45;color:var(--muted-2)}
.so1__liste{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1.75rem}
.so1__liste li{border-top:1px solid var(--line)}
.so1__ort{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.3rem .15rem;
  font-size:.9375rem;color:var(--ink-2);transition:color var(--t-fast) var(--e-out)}
.so1__ort span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so1__ort small{flex:none;font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.so1__ort em{flex:none;margin-left:auto;font-style:normal;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;letter-spacing:.08em;color:var(--muted-2);transition:opacity var(--t-fast) var(--e-out)}
.so1__ort svg{flex:none;width:14px;height:14px;margin-left:-14px;color:var(--accent);opacity:0;
  transform:translateX(-4px);transition:opacity var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out)}
.so1__ort:hover,.so1__ort:focus-visible,.so1__ort.is-an{color:var(--ink)}
.so1__ort:hover em,.so1__ort:focus-visible em,.so1__ort.is-an em{opacity:0}
.so1__ort:hover svg,.so1__ort:focus-visible svg,.so1__ort.is-an svg{opacity:1;transform:none}
.so1__ort--hq span{font-weight:600;color:var(--ink)}
.so1__leer{padding:.9rem 0;font-size:.9375rem;color:var(--muted)}
.so1__leer a{color:var(--accent);font-weight:600}

.so1__fuss{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.5rem;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted)}
.so1__fuss .tlink{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.45rem}
.so1__fuss .tlink svg{width:15px;height:15px;color:var(--accent)}

@media (max-width:900px){
  .so1__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .so1__karte{max-width:420px}
  .so-js .so1__karte{aspect-ratio:1/1}
  /* Einspaltig springt unter den Tabs nichts — die Liste darf ihre eigene Höhe haben */
  .so-js .so1__panel[hidden]{display:none}
}
@media (max-width:420px){
  .so1__liste{column-gap:1rem}
  .so1__ort{font-size:.875rem}
  .so1__reg-zahl{font-size:1.625rem}
}
@media (prefers-reduced-motion:reduce){
  .so-js .so1__panel:not([hidden]){animation:none}
  .so1__tabstrich,.so1__tabpunkt{transition:none}
}

/* Sprechblase: beim Überfahren die schmale Vorschau, erst der KLICK macht sie
   zur Karte mit Telefonnummer und Textlink — und erst dann nimmt sie Klicks an.
   Sonst verschwindet sie beim Wegziehen der Maus, bevor man den Link erreicht. */
.so-tip__mehr{display:none}
.so-tip.is-fest{pointer-events:auto;padding:.7rem .85rem .75rem;border-radius:11px;
  box-shadow:0 14px 34px -10px rgba(17,24,32,.45)}
.so-tip.is-fest b{font-size:1rem}
.so-tip.is-fest small{margin-top:.22rem}
.so-tip.is-fest .so-tip__mehr{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;
  width:100%;margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.16)}
.so-tip__tel{display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.875rem;font-weight:600;color:#fff;white-space:nowrap}
.so-tip__tel svg{width:14px;height:14px;flex:none;color:var(--accent)}
.so-tip__tel:hover{color:var(--accent)}
.so-tip__go{display:flex;align-items:center;justify-content:center;gap:.35rem;
  padding:.5rem .7rem;border-radius:8px;background:var(--accent);color:#fff;
  font-size:.8125rem;font-weight:600;white-space:nowrap;
  transition:background var(--t-fast) var(--e-out)}
.so-tip__go:hover{background:var(--accent-dk);color:#fff}
.so-tip__go svg{width:13px;height:13px;flex:none}
.so-tip__zu{position:absolute;top:.25rem;right:.35rem;display:none;border:0;background:none;
  color:rgba(255,255,255,.55);font-size:1rem;line-height:1;cursor:pointer;padding:.15rem .25rem}
.so-tip.is-fest .so-tip__zu{display:block}
.so-tip__zu:hover{color:#fff}
/* Auf dem Handy haelt der Finger nichts offen — dort ist die feste Karte
   der Normalfall und darf breiter werden. */
@media (max-width:900px){
  .so-tip.is-fest{min-width:164px}
}

/* Städte ohne eigene Seite sind <button>, nicht <a>. Der Knopf muss aussehen
   wie die Zeile daneben — ohne diesen Reset zeichnet der Browser seinen
   grauen Kasten mit Rahmen. */
.so1__ort--kein{width:100%;margin:0;border:0;background:none;font:inherit;
  color:var(--ink-2);text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.so1__ort--kein:hover em,
.so1__ort--kein:focus-visible em,
.so1__ort--kein.is-an em{opacity:1}
/* Blase: Stadt ohne Seite bekommt nur die Telefonnummer, keinen Textlink */
.so-tip__go[hidden]{display:none}

/* Die Agentur-Seite hat keinen globalen Listen-Reset — die beiden Register-
   listen brauchen ihn deshalb selbst, sonst stehen Aufzählungspunkte davor. */
.so1__liste,.so1__regionen{list-style:none;margin:0;padding:0}

/* ══ ANFRAGE AM HANDY ════════════════════════════════════════════════════
   Übernommen von RGN Entrümpelung & Umzug (Abschnitt 39/39b) und auf diese
   Farbwelt gesetzt. Zeigt den Ablauf einer echten Anfrage statt einer Liste
   aus Schritten. Der Verlauf im Handy ist ein BEISPIEL, keine Zusage.

   Token-Brücke wie beim Leitstand: der Baustein kommt aus einer Seite mit
   anderen Variablennamen — die werden hier einmal auf unsere gelegt statt
   im ganzen Regelwerk ersetzt. Die WhatsApp-Farben bleiben, wie sie sind:
   der Wiedererkennungswert ist der halbe Sinn der Sektion. */
.wa{
  --line:var(--li); --line-2:var(--li-soft);
  --muted:var(--tx-mut); --muted-2:var(--tx-mut);
  --accent:var(--akz); --accent-dk:var(--akz-tief);
  --t:.28s; --e-out:var(--fed-weich); --e-spring:var(--fed);
}
/* --- 39. WhatsApp-Angebot: Handy-Mockup + Copy -------------------------- */
.wa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
@media (max-width:940px){.wa{grid-template-columns:1fr;gap:2.75rem}}

.wa__stage{position:relative;display:flex;justify-content:center;padding-block:1rem}
.phone{
  position:relative;width:min(100%,344px);border-radius:38px;background:#fff;
  border:1px solid var(--line);padding:9px;
  box-shadow:0 2px 6px rgba(17,24,32,.04),0 28px 60px rgba(17,24,32,.10);
}
.phone__in{border-radius:30px;overflow:hidden;background:#F3F1EC;display:flex;flex-direction:column}
.phone__notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:5px;background:var(--line);z-index:3}

.chat__head{display:flex;align-items:center;gap:.6rem;padding:1.5rem .9rem .7rem;background:#fff;border-bottom:1px solid var(--line-2)}
.chat__av{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;overflow:hidden}
.chat__av img{width:100%;height:100%;object-fit:cover}
.chat__head b{display:block;font-size:.8125rem;font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:-.012em}
.chat__head span{display:block;font-size:.6875rem;color:#22A45D}
.chat__head svg{width:15px;height:15px;margin-left:auto;color:var(--muted-2)}

/* Feste Hoehe: das Handy bleibt kompakt, aeltere Nachrichten schieben sich
   nach oben aus dem Bild — wie in einem echten Verlauf. */
/* Fensterhoehe fest, der Verlauf darunter wandert nach oben. Kein scrollTop —
   ein Element mit overflow:hidden laesst sich nicht programmatisch scrollen. */
.chat__body{background:#F3F1EC;height:clamp(290px,29vw,384px);overflow:hidden}
.chat__flow{padding:.85rem .8rem 1rem;display:grid;gap:.5rem;align-content:start;
  transition:transform .55s var(--e-spring);will-change:transform}
.msg{max-width:84%;padding:.55rem .7rem;border-radius:12px;font-size:.75rem;line-height:1.45;position:relative;
  opacity:0;transform:translateY(8px)}
/* Staffel: jede Blase startet 0,4 s nach der vorigen */
/* Der Verlauf baut sich Nachricht fuer Nachricht von oben auf. Erst wenn das
   Fenster voll ist, schieben sich die aelteren Blasen nach oben aus dem Bild —
   wie in einem echten Chat. Ohne JS fehlt .is-schritt und alles steht sofort. */
.wa__stage.is-schritt .msg{display:none}
.wa__stage.is-schritt .msg.is-da{display:block;animation:blaseAuf .5s var(--e-spring) forwards}

.wa__stage.is-in .chat__status,
.wa__stage.is-in .wa__preis{
  animation:blaseAuf .5s var(--e-spring) forwards;
  animation-delay:calc(.3s + var(--i,0) * .75s);
}
@keyframes blaseAuf{to{opacity:1;transform:none}}
.msg time{display:block;margin-top:.2rem;font-size:.5625rem;color:var(--muted-2);text-align:right}
.msg--in{justify-self:start;background:#fff;color:var(--ink-2);border-top-left-radius:3px;box-shadow:0 1px 1px rgba(17,24,32,.05)}
.msg--out{justify-self:end;background:#DCF8C6;color:#12291B;border-top-right-radius:3px;box-shadow:0 1px 1px rgba(17,24,32,.05)}
.msg--out time{color:#4F7A5C}
.msg--out time::after{content:" ✓✓";color:#34B7F1;letter-spacing:-.06em}

.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:172px;border-radius:8px;overflow:hidden}
.fotos img{width:100%;height:56px;object-fit:cover;display:block}
.fotos__mehr{position:relative;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:600;height:56px}
.msg--foto{padding:.35rem .35rem .3rem;max-width:none;width:max-content}

.chat__status{
  display:flex;align-items:center;gap:.65rem;margin:.2rem .8rem .1rem;padding:.7rem .8rem;
  border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  opacity:0;transform:translateY(8px);
}
.chat__haken{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;
  background:#22A45D;color:#fff}
.chat__haken svg{width:14px;height:14px}
.chat__status b{display:block;font-size:.75rem;font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.3}
.chat__status > span > span{display:block;margin-top:1px;font-size:.6875rem;color:var(--muted)}

.chat__foot{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem .85rem;background:#F3F1EC}
.chat__bar{flex:1;height:30px;border-radius:15px;background:#fff;box-shadow:0 1px 1px rgba(17,24,32,.05)}
.chat__send{width:30px;height:30px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none;color:#fff}
.chat__send svg{width:14px;height:14px}


.wa__copy .checks{margin-top:1.4rem}
.wa__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.btn--wa{background:#25D366;color:#fff}
.btn--wa:hover{background:#1FAE55}
@media (max-width:520px){.wa__cta .btn{width:100%}}

/* --- 39b. Preiskarte am Handy (haengt am .phone, nicht an der Spalte) ---- */
.wa__preis{
  opacity:0;transform:translateY(8px);
  /* haengt an der unteren Ecke, damit keine Nachricht verdeckt wird */
  position:absolute;right:clamp(-46px,-3vw,-16px);bottom:-18px;z-index:5;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:1rem 1.2rem;
  box-shadow:0 4px 10px rgba(17,24,32,.06),0 24px 46px rgba(17,24,32,.18);
}
.wa__preis b{display:block;font-size:1.875rem;font-weight:600;letter-spacing:-.035em;color:var(--ink);line-height:1}
.wa__preis span{display:flex;align-items:center;gap:.4rem;margin-top:.35rem;font-size:.8125rem;font-weight:500;color:var(--muted);white-space:nowrap}
.wa__preis span svg{width:14px;height:14px;color:#1E7A3C;flex:none}
@media (max-width:520px){
  .wa__preis{right:-6px;bottom:-14px;padding:.8rem 1rem}
  .wa__preis b{font-size:1.5rem}
  .wa__preis span{font-size:.75rem}
}
/* Unter 360 px ragte die Preiskarte 3 px ueber den Fensterrand — das war
   der letzte waagerechte Ueberlauf der Startseite. Sie schliesst jetzt
   buendig mit dem Handy ab. */
@media (max-width:360px){.wa__preis{right:0}.wa__preis span{white-space:normal}}

/* Die Sektion steht bei uns auf dunklem Grund — Überschrift und Fließtext
   daneben erben die helle Schrift aus .s-dark, das Handy bleibt hell. */
/* In der Quelle wird .is-in gesetzt, sobald die Sektion ins Bild kommt — die
   Staffelung .3s + i*.75s läuft dort parallel zum Verlauf. Bei uns setzt das
   Skript .is-in erst, wenn die letzte Nachricht steht; die alte Staffelung
   würde sich dann ein zweites Mal aufaddieren (Statuszeile nach 13 s). */
.wa__stage.is-in .chat__status{animation-delay:.1s}
.wa__stage.is-in .wa__preis{animation-delay:.45s}
/* Florian, 19.09.2026: helle Sektion statt dunkler — dann braucht das Handy
   aber einen echten Rahmen, sonst verschwimmt das weiße Gehäuse im weißen
   Hintergrund und man sieht gar kein Gerät mehr. */
/* Der Fließtext klebte an der Überschrift (gemessen: 0 px) — die Copy-Spalte
   der Handy-Sektion hatte nie den Rhythmus bekommen, den .sec__kopf hat. */
.wa__copy h2{margin-bottom:0}
.wa__copy .t-lead{margin-top:clamp(.85rem, .6rem + .6vw, 1.15rem)}
.wa__copy .check-list{margin-top:clamp(1.2rem, 1rem + .8vw, 1.6rem)}

/* Die Handy-Sektion folgt auf eine gleich helle Sektion. Unten 72 px Polster
   plus oben 72 px ergeben auf dem Handy ein Loch von fast anderthalb Fingern
   zwischen Knopf und Gerät — oben deshalb etwas weniger. */
#anfrage{padding-top:clamp(3.25rem, 1.9rem + 5.6vw, 6.5rem)}

#anfrage .phone{background:#14181B;border:0;padding:10px;
  box-shadow:0 2px 6px rgba(17,24,32,.10),0 30px 64px -18px rgba(17,24,32,.32)}
#anfrage .phone__notch{background:#39424A}
#anfrage .wa__preis{border-color:var(--li)}

/* ── Pfeile an der Referenz-Reiterleiste ────────────────────────────────
   Florian, 19.09.2026: „manchmal checken die Leute nicht, dass man das noch
   durchscrollen kann". Die Pfeile liegen halbtransparent über den Enden der
   Bahn, erscheinen NUR wenn wirklich etwas zu scrollen ist und der jeweilige
   verschwindet, sobald man am Ende angekommen ist. */
.rf__bahn .rf__reiter{margin-bottom:0}
/* Vorher hing der Abstand an „.rf__bahn + *" — das trifft nur das ERSTE
   Panel, die anderen acht sind keine direkten Geschwister der Bahn. Die
   erste Referenz stand dadurch 29 px tiefer als alle anderen. Der Abstand
   gehört an die Bahn selbst, dann gilt er für alle gleich. */
.rf__bahn{position:relative;margin-bottom:clamp(1rem, .7rem + 1.2vw, 1.7rem)}
.rf__pf{
  position:absolute;top:50%;z-index:3;display:none;place-items:center;
  width:38px;height:38px;margin-top:-19px;padding:0;border-radius:50%;
  border:1px solid var(--li);background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--tx);cursor:pointer;
  box-shadow:0 2px 10px rgba(14,17,19,.10);
  transition:opacity .25s var(--fed-kurz),background .25s var(--fed-kurz),
             border-color .25s var(--fed-kurz),transform .25s var(--fed-kurz)}
.rf__pf--l{left:-4px}
.rf__pf--r{right:-4px}
.rf__bahn.hat-bahn .rf__pf{display:grid}
.rf__pf:hover{background:#fff;border-color:var(--graphit);transform:scale(1.06)}
.rf__pf:active{transform:scale(.96)}
.rf__bahn.ist-anfang .rf__pf--l,
.rf__bahn.ist-ende .rf__pf--r{opacity:0;pointer-events:none}
/* Auf dunklem Grund dreht sich die Blende um */
.s-dark .rf__pf{background:rgba(25,29,32,.72);border-color:var(--li-inv);color:var(--tx-inv)}
.s-dark .rf__pf:hover{background:var(--ink-2);border-color:var(--tx-inv-mut)}

/* ══ AKTIONS-POP-UP ══════════════════════════════════════════════════════
   Aufbau nach dem RGN-Standard: links Bild mit Pille und Rabatt-Aufkleber,
   rechts Kicker, Überschrift, zwei Sätze, Felder, DSGVO-Haken, breiter Knopf,
   Vertrauenszeile. Mobil gestapelt, Bild flach obendrauf. */
.pop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(1rem,4vw,2.5rem)}
.pop[hidden]{display:none}
.pop__schleier{position:absolute;inset:0;background:rgba(12,14,16,.66);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .26s var(--fed-kurz)}
.pop.ist-da .pop__schleier{opacity:1}
.pop__karte{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  width:min(880px,100%);max-height:min(88vh,760px);overflow:auto;
  background:var(--papier);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .26s var(--fed-kurz),transform .32s var(--fed-weich)}
.pop.ist-da .pop__karte{opacity:1;transform:none}
.pop__zu{position:absolute;top:.7rem;right:.7rem;z-index:3;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--li);
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--tx);cursor:pointer;transition:background .2s var(--fed-kurz)}
.pop__zu:hover{background:#fff;border-color:var(--graphit)}
   /* Hochformat: Gesicht im Ausschnitt halten */
.pop__pille{position:absolute;top:1rem;left:1rem;padding:.32rem .7rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx)}
/* ── Die Szene in der linken Spalte ────────────────────────────────────
   Flo, 19.09.2026: kein Foto, sondern „ein Mix aus Google Ads, Webdesign,
   SEO … die Suchergebnisse aus einer anderen Perspektive". Deshalb die
   Trefferseite in den Raum gekippt, davor die Zahlen aus dem Werbekonto und
   die Website. Komplett aus CSS — scharf auf jedem Bildschirm, kein Byte
   Ladezeit, und jederzeit textlich änderbar. */
.pop__buehne{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 20% 0%, #23282C 0%, var(--ink) 62%);
  perspective:1000px;min-height:330px}
/* dasselbe Raster wie in den dunklen Sektionen, nur leiser */
.pop__buehne::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--li-inv-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--li-inv-soft) 1px,transparent 1px);
  background-size:38px 38px}
.pop__buehne .pop__pille{z-index:4}

.pob{position:absolute;inset:0;transform-style:preserve-3d}
.pob__serp{
  position:absolute;left:9%;top:15%;width:72%;
  transform:rotateY(-21deg) rotateX(9deg) rotate(1.5deg);
  transform-origin:50% 50%;
  background:#fff;border-radius:12px;padding:.7rem .75rem .8rem;
  font-family:var(--g-font);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.72),0 2px 6px rgba(0,0,0,.3)}
.pob__kopf{margin-bottom:.45rem}
.pob__g{display:inline-flex;font-weight:600;font-size:.9375rem;letter-spacing:-.04em}
.pob__g i{font-style:normal}
.pob__g i:nth-child(1){color:#4285F4}.pob__g i:nth-child(2){color:#EA4335}
.pob__g i:nth-child(3){color:#FBBC04}.pob__g i:nth-child(4){color:#4285F4}
.pob__g i:nth-child(5){color:#34A853}.pob__g i:nth-child(6){color:#EA4335}
.pob__feld{display:flex;align-items:center;gap:.35rem;padding:.3rem .5rem;
  border:1px solid var(--g-rand);border-radius:999px;color:var(--g-tx-mut);font-size:.5rem}
.pob__feld svg{width:9px;height:9px;flex:none}
.pob__tabs{display:flex;gap:.6rem;margin:.45rem 0 .1rem;padding-bottom:.28rem;
  border-bottom:1px solid var(--g-rand-soft);font-size:.4375rem;color:var(--g-tx-mut)}
.pob__tabs b{color:var(--g-blau);font-weight:500;position:relative}
.pob__tabs b::after{content:"";position:absolute;left:0;right:0;bottom:-.29rem;height:1.5px;background:var(--g-blau)}
.pob__e{padding:.4rem 0;border-bottom:1px solid var(--g-rand-soft)}
.pob__e:last-child{border-bottom:0}
.pob__e--blass{opacity:.45}
.pob__tag{display:inline-block;margin-right:.3rem;padding:0 .2rem;border:1px solid var(--g-tx);
  border-radius:2px;font-size:.375rem;font-weight:700;color:var(--g-tx);vertical-align:1px}
.pob__url{font-size:.4375rem;color:var(--g-tx-mut)}
.pob__t{margin:.12rem 0 .08rem;font-size:.5625rem;line-height:1.25;color:#1A0DAB;font-weight:400}
.pob__e--ad .pob__t{color:#1A0DAB}
.pob__x{margin:0;font-size:.4375rem;line-height:1.35;color:var(--g-tx-mut)}
.pob__map{position:relative;height:34px;margin:.35rem 0;border-radius:6px;overflow:hidden;
  background:linear-gradient(135deg,#E8F0E4 0%,#DCE9F5 55%,#EAEAE4 100%)}
.pob__ml{position:absolute;height:2px;background:#fff;opacity:.85}
.pob__ml:nth-of-type(1){left:-10%;top:40%;width:130%;transform:rotate(-9deg)}
.pob__ml:nth-of-type(2){left:-10%;top:72%;width:130%;transform:rotate(6deg)}
.pob__pin{position:absolute;left:50%;top:38%;z-index:1;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50% 50% 50% 0;background:#EA4335;transform:rotate(-45deg);
  box-shadow:0 1px 3px rgba(0,0,0,.35)}

/* Die beiden Karten schweben vor der Trefferseite: links das Google-Ads-
   Dashboard, wie es der Kunde im Konto sieht, rechts unten ein Handy mit der
   fertigen Seite. Damit stehen alle drei Leistungen in einem Bild. */
.pob__ads,.pob__web{position:absolute;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.28)}

/* — Google Ads — */
.pob__ads{right:3%;top:4%;width:48%;background:#fff;border-radius:9px;padding:.42rem .45rem .3rem;
  transform:rotateY(-21deg) rotateX(9deg) translateZ(40px);font-family:var(--g-font)}
.pob__kopfz{display:flex;align-items:baseline;gap:.3rem;padding:0 .1rem .3rem}
.pob__kopfz b{font-size:.5rem;font-weight:500;color:var(--g-tx)}
.pob__kopfz i{font-style:normal;font-size:.4rem;color:var(--g-tx-mut)}
.pob__kacheln{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pob__ka{display:block;padding:.22rem .3rem;border-radius:3px;background:var(--g-flaeche);
  border:1px solid var(--g-rand-soft)}
.pob__ka i{display:block;font-style:normal;font-size:.3125rem;color:var(--g-tx-mut);line-height:1.3}
.pob__ka b{display:block;margin-top:.05rem;font-size:.5rem;font-weight:500;color:var(--g-tx);line-height:1.15}
.pob__ka--blau{background:#1A73E8;border-color:#1A73E8}
.pob__ka--gelb{background:#FBBC04;border-color:#FBBC04}
.pob__ka--rot{background:#EA4335;border-color:#EA4335}
.pob__ka--blau i,.pob__ka--rot i{color:rgba(255,255,255,.8)}
.pob__ka--blau b,.pob__ka--rot b{color:#fff}
.pob__ka--gelb i{color:rgba(32,33,36,.65)}
.pob__ka--gelb b{color:#202124}
.pob__kurve{display:block;width:100%;height:18px;margin-top:.22rem}

/* — Webdesign: Handy mit der fertigen Seite — */
.pob__web{left:9%;bottom:5%;width:27%;aspect-ratio:9/17;
  background:#12161A;border-radius:11px;padding:6px 4px 5px;
  transform:rotateY(-21deg) rotateX(9deg) translateZ(56px);overflow:hidden}
.pob__wnotch{position:absolute;left:50%;top:3px;width:26%;height:2.5px;margin-left:-13%;
  border-radius:3px;background:#39424A}
.pob__web > :not(.pob__wnotch){position:relative;display:block;margin-inline:2px}
.pob__wkopf{display:flex!important;align-items:center;justify-content:space-between;
  padding:.18rem .2rem;border-radius:3px 3px 0 0;background:#fff}
.pob__wkopf i{width:26%;height:3px;border-radius:2px;background:var(--graphit)}
.pob__wkopf b{width:9px;height:2px;border-radius:2px;background:var(--tx-mut);box-shadow:0 3px 0 var(--tx-mut),0 -3px 0 var(--tx-mut)}
.pob__whero{padding:.3rem .25rem .35rem;background:linear-gradient(160deg,#1C2126,#2D363C);text-align:center}
.pob__whero i{display:block;font-style:normal;font-size:.3125rem;font-weight:700;color:#fff;line-height:1.25}
.pob__whero em{display:block;margin-top:.08rem;font-style:normal;font-size:.25rem;color:rgba(255,255,255,.66)}
.pob__whero s{display:inline-block;margin-top:.22rem;padding:.1rem .28rem;border-radius:2px;
  background:#2FBF71;color:#fff;font-size:.25rem;font-weight:700;text-decoration:none}
.pob__wz{height:2.5px;margin-top:3px;border-radius:2px;background:#fff;opacity:.9}
.pob__wz--kurz{width:56%}

@media (prefers-reduced-motion:no-preference){
  .pob__serp,.pob__ads,.pob__web{transition:transform .5s var(--fed-weich)}
  .pop.ist-da .pob__serp{transform:rotateY(-18deg) rotateX(7deg) rotate(1.2deg)}
  .pop.ist-da .pob__ads{transform:rotateY(-18deg) rotateX(7deg) translateZ(46px)}
  .pop.ist-da .pob__web{transform:rotateY(-18deg) rotateX(7deg) translateZ(62px)}
}
.pop__txt{padding:clamp(1.5rem,1rem + 2vw,2.3rem)}
.pop__txt h2{margin:.55rem 0 .7rem;font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem);line-height:1.15}
.pop__txt > p{margin:0 0 1.2rem;font-size:.9375rem;line-height:1.6;color:var(--tx-mut)}
.pop__txt > p b{color:var(--tx)}
/* Die Felder kommen aus der dunklen Kontakt-Sektion: weiße Schrift, weiße
   Linien. Im hellen Pop-up sind sie damit unsichtbar — hier auf hell drehen. */
.pop__form .kvc__feld input{color:var(--tx);border-bottom-color:var(--li)}
.pop__form .kvc__feld input:focus{border-bottom-color:var(--ink)}
.pop__form .kvc__feld input:user-invalid{border-bottom-color:#C4402F}
.pop__form .kvc__feld > span{color:var(--tx-mut)}
.pop__form .kvf__status{margin:.1rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--tx-mut)}
.pop__form .kvf__status[data-art="fehler"]{color:#C4402F}
.pop__form .kvf__status[data-art="ok"]{color:var(--live)}
/* Zwei Wege statt Formular: der erste klappt das Formular auf, der zweite
   wählt direkt. Der Anruf-Knopf ist bewusst der ruhige von beiden. */
.pop__wege{display:grid;gap:.6rem;margin-top:.3rem}
.pop__wege .btn{width:100%;justify-content:center}
.pop__anruf{border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  font-weight:600;transition:background .2s var(--fed-kurz),color .2s var(--fed-kurz)}
.pop__anruf:hover{background:var(--ink);color:#fff}
.pop__anruf svg{flex:none}
.pop__form[hidden]{display:none}
.pop__form{display:grid;gap:.7rem}
.pop__ok{display:flex;align-items:flex-start;gap:.6rem;font-size:.8125rem;line-height:1.5;
  color:var(--tx-mut)}
.pop__ok input{margin-top:.15rem;width:16px;height:16px;flex:none;accent-color:var(--ink)}
.pop__ok a{color:var(--tx);text-decoration:underline;text-underline-offset:2px}
.pop__knopf{width:100%;justify-content:center;margin-top:.3rem}
.pop__fuss{margin:.2rem 0 0;font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut);text-align:center}

@media (max-width:720px){
  .pop__karte{grid-template-columns:minmax(0,1fr)}
  .pop__txt{padding-top:1.6rem}
  /* Auf dem Handy ist die Bühne flach — die Szene wird als GANZES kleiner
     gerechnet, statt einzelne Karten zu verschieben. So bleiben die Abstände
     zueinander gleich und nichts wird abgeschnitten. */
  .pop__buehne{min-height:210px}
  .pob{transform:scale(.58);transform-origin:50% 50%}
}
@media (prefers-reduced-motion:reduce){
  .pop__schleier,.pop__karte{transition:none}
  .pop__karte{transform:none}
}

/* ══ WOHIN DEIN GELD LÄUFT ═══════════════════════════════════════════════
   Flo hat unter fünf Entwürfen diesen gewählt (19.09.2026). Der Gedanke:
   nicht behaupten, dass es bei uns besser läuft, sondern an einem Band
   zeigen, wie viel vom selben Budget unten ankommt. Die Abschnitte wachsen
   erst, wenn die Sektion ins Bild kommt — das macht die Aussage zur Bewegung.
   ACHTUNG: Die Prozentwerte sind eine Beispielrechnung, keine Zusage. Die
   Zeile darunter sagt das auch — sie darf nicht verschwinden. */
.gf{margin-top:clamp(2rem,3.4vw,3rem)}
.gf__reihe{display:grid;grid-template-columns:var(--spalte,190px) minmax(0,1fr);
  gap:clamp(1rem,2vw,1.6rem);align-items:center;padding-block:clamp(.9rem,1.8vw,1.4rem)}
.gf__reihe + .gf__reihe{border-top:1px solid var(--li)}
.gf__wer{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-mut)}
.gf__wer b{display:block;margin-top:.25rem;font-family:inherit;font-size:1.125rem;font-weight:700;
  letter-spacing:-.02em;color:var(--tx);text-transform:none;font-family:'Archivo',system-ui,-apple-system,sans-serif}
.gf__wer em{display:block;margin-top:.1rem;font-style:normal;font-size:.625rem;letter-spacing:.1em;
  color:var(--tx-mut)}
.gf__band{position:relative;display:flex;height:64px;border-radius:var(--r-btn);overflow:hidden;
  border:1px solid var(--li);background:var(--papier-2)}
/* Die Abschnitte wachsen erst, wenn die Sektion ins Bild kommt — vorher liegt
   das Band leer da. Animiert wird flex-basis, nicht width: sonst springt der
   Text beim Umbruch. */
.gf__t{flex:0 0 0%;min-width:0;display:grid;place-items:center;text-align:center;padding:.3rem;
  font-size:.6875rem;line-height:1.2;overflow:hidden;white-space:nowrap;
  transition:flex-basis .9s var(--fed-weich)}
.laeuft .gf__t{flex-basis:var(--w)}
.gf__t b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.gf__t i{font-style:normal;opacity:.78}
.gf__t--weg{color:var(--tx-mut);
  background:repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(42,48,51,.10) 5px,rgba(42,48,51,.10) 6px)}
.gf__t--halb{background:var(--papier-3);color:var(--tx-mut)}
.gf__t--gut{background:var(--ink);color:#fff;position:relative}
.gf__t--gut::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:rgba(255,255,255,.22)}
.gf__t + .gf__t{box-shadow:-1px 0 0 var(--li)}
.gf__note{margin:.55rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--tx-mut)}

/* Der Sprung von oben nach unten: eine Linie, die zeigt, wo der wirksame
   Teil vorher endete. */
.gf__fazit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1rem,2.4vw,2.4rem);
  align-items:center;margin-top:clamp(1.4rem,2.6vw,2rem);padding:clamp(1.1rem,2vw,1.6rem);
  border-radius:var(--r-card);background:var(--ink);color:#fff}
.gf__fazit p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--tx-inv-mut);max-width:52ch}
.gf__fazit p b{color:#fff;font-weight:600}
.gf__gross{text-align:right;white-space:nowrap}
.gf__gross b{display:block;font-family:'Archivo',system-ui,-apple-system,sans-serif;font-stretch:76%;font-weight:800;
  font-size:clamp(2rem,1.4rem + 2.2vw,3rem);line-height:1;letter-spacing:-.03em}
.gf__gross span{display:block;margin-top:.3rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-inv-mut)}
.gf__hinweis{margin:.9rem 0 0;font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut)}
@media (max-width:820px){
  .gf{--spalte:0px}
  .gf__reihe{grid-template-columns:minmax(0,1fr);gap:.6rem}
  /* Die Budget-Zeile steht hier über dem Band, nicht daneben — also mittig. */
  .gf__wer{text-align:center}
  .gf__band{height:72px}
  /* 9 % sind auf 340 px nur 31 px breit: Die Zahl war nicht zu lesen. Ein
     Mindestmaß für die schmalen Anteile, der große Block gibt es her. */
  .laeuft .gf__t{min-width:min(21%, 80px)}
  .laeuft .gf__t--gut{flex-shrink:1;min-width:0}
  .gf__t{font-size:.625rem}
  .gf__t b{font-size:.875rem}
  .gf__fazit{grid-template-columns:minmax(0,1fr)}
  .gf__gross{text-align:left}
}

.gf__kauf{margin-top:clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);padding-top:clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border-top:1px solid var(--li)}
.gf__fk{margin:0 0 .9rem;font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut)}
.gf__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 2rem}
@media (max-width:760px){.gf__liste{grid-template-columns:minmax(0,1fr)}}

/* ══ VIER SCHICHTEN ══════════════════════════════════════════════════════
   Flo hat unter fünf Entwürfen diesen gewählt (19.09.2026). Die Aussage:
   Design allein bringt nichts — erst Design, Text, Technik und Local SEO
   übereinander ergeben eine Seite, die gefunden wird und Aufträge bringt.
   Der Stapel fährt beim Überfahren auseinander; ohne Maus (Handy) steht er
   fest, die Aussage trägt auch ohne die Bewegung. */
.sch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.6rem,4.8vw,5.25rem);align-items:center;margin-top:clamp(2rem,3.4vw,3rem)}
.sch__stapel{position:relative;perspective:1500px;height:clamp(300px, 23rem + 9vw, 600px)}
.sch__l{position:absolute;left:50%;top:50%;width:min(89%,500px);height:282px;margin:-141px 0 0 -44.5%;
  border-radius:14px;border:1px solid var(--graphit);background:#fff;
  box-shadow:0 18px 34px -14px rgba(14,17,19,.45),0 2px 6px rgba(14,17,19,.12);
  padding:.7rem .8rem;overflow:hidden;
  /* Ausgangslage: alle vier liegen flach aufeinander und sind noch unsichtbar.
     Erst wenn die Sektion ins Bild kommt, fahren sie gestaffelt auseinander —
     das ist die Aussage der Sektion als Bewegung. */
  opacity:0;--z:0px;
  transform:rotateX(56deg) rotateZ(-40deg) translateZ(var(--z)) translateY(30px);
  transition:transform .85s var(--fed-weich),opacity .5s var(--fed-weich)}
.laeuft .sch__l{opacity:1;transform:rotateX(56deg) rotateZ(-40deg) translateZ(var(--z))}
.laeuft .sch__l:nth-child(1){--z:0px;transition-delay:.06s}
.laeuft .sch__l:nth-child(2){--z:70px;transition-delay:.20s}
.laeuft .sch__l:nth-child(3){--z:140px;transition-delay:.34s}
.laeuft .sch__l:nth-child(4){--z:210px;transition-delay:.48s}
/* Das Aufklappen per Maus steht NACH dem Einlaufen — gleiche Gewichtung,
   die spätere Regel gewinnt. Auf dem Handy bliebe :hover nach einem Tipp
   hängen, deshalb nur mit echtem Zeiger. */
@media (hover:hover) and (pointer:fine){
  .sch__stapel:hover .sch__l{transition-delay:0s}
  .sch__stapel:hover .sch__l:nth-child(2){--z:82px}
  .sch__stapel:hover .sch__l:nth-child(3){--z:164px}
  .sch__stapel:hover .sch__l:nth-child(4){--z:246px}
}
@media (prefers-reduced-motion:reduce){
  .sch__l{opacity:1;transform:rotateX(56deg) rotateZ(-40deg) translateZ(var(--z));transition:none}
  .sch__l:nth-child(2){--z:63px}
  .sch__l:nth-child(3){--z:126px}
  .sch__l:nth-child(4){--z:189px}
}

/* Diese Regeln hatte mein Animations-Eingriff mitgelöscht: die Beschriftung
   auf den Schichten, ihr Inhalt, die Liste rechts und die Handy-Maße. Ohne
   sie stand die Liste als nackte Aufzählung da und der Stapel lief über den
   Text. Wiederhergestellt am 19.09.2026. */
.sch__mk{position:absolute;right:.9rem;top:.8rem;padding:.16rem .55rem;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}

.sch__fazit{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:var(--r-card);background:var(--ink);
  color:#fff;font-size:.9375rem;line-height:1.6}
.sch__fazit b{font-weight:600}
/* Der kurze Weg direkt aus dem Fazit heraus — am Rechner steht die
   Anfrage-Sektion ohnehin einen Wisch entfernt, auf dem Handy nicht. */
.sch__wa{display:none}

/* ── Inhalt auf den Schichten ───────────────────────────────────────── */
/* Der Knackpunkt: In der Isometrie verdeckt jede Karte die obere rechte
   Hälfte der darunterliegenden. Inhalt oben links ist also unsichtbar. Er
   gehört in den Streifen, der frei bleibt — unten links. Nur die oberste
   Karte ist ganz zu sehen und darf ihre Fläche voll nutzen. */
.sch .sch__l{padding:0}
.sch .si{position:absolute;left:.9rem;bottom:.85rem;width:66%;
  font-size:.6875rem;line-height:1.4;color:var(--tx-mut)}
.sch .si b{display:block;font-family:'Archivo',sans-serif;font-stretch:76%;font-weight:800;
  text-transform:uppercase;font-size:.9375rem;line-height:1.05;color:var(--tx);margin-bottom:.25rem}
.sch .si__knopf{display:inline-block;margin-top:.4rem;padding:.16rem .45rem;border-radius:4px;
  background:#2FBF71;color:#fff;font-size:.5938rem;font-weight:700}
.sch .si__code{position:absolute;left:.9rem;bottom:.85rem;width:72%;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.5938rem;line-height:1.6;color:#5C6569}
.sch .si__code em{font-style:normal;color:#4C8DFF}
/* Die Karte füllt ihre Schicht ganz — dadurch trägt auch der sichtbare
   Streifen unten links Kartenfläche statt Weiß. */
.sch .si__karte{position:absolute;inset:0;border-radius:13px;
  background:linear-gradient(135deg,#E8F0E4,#DCE9F5 60%,#EAEAE4);overflow:hidden}
.sch .si__karte i{position:absolute;left:22%;bottom:22%;width:10px;height:10px;
  border-radius:50% 50% 50% 0;background:#EA4335;transform:rotate(-45deg);
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sch .si__karte s{position:absolute;left:-10%;bottom:34%;width:130%;height:2px;background:#fff;
  transform:rotate(-8deg);text-decoration:none}
.sch .si__karte s:nth-of-type(2){bottom:12%;transform:rotate(5deg)}
/* Oberste Karte: sie ist vollständig sichtbar und zeigt die fertige Seite. */
/* Auch das Schild gehört in den freien Streifen — oben rechts liegt es unter
   der nächsten Karte und war nicht zu lesen. */
.sch .sch__mk{top:auto;right:auto;left:.65rem;bottom:.55rem}
.sch .si,.sch .si__code{bottom:2.6rem}
.sch .sch__l:nth-child(4) .sch__mk{top:.65rem;right:.75rem;left:auto;bottom:auto}
.sch .sch__l:nth-child(4) .si{left:.8rem;right:.8rem;top:.7rem;bottom:auto;width:auto}
.sch .sch__l:nth-child(4) .si b{font-size:1.125rem}

/* ── Die vier Punkte als Karten ─────────────────────────────────────── */
.schk{display:grid;gap:.8rem;margin:0;padding:0;list-style:none}
.schk li{padding:clamp(.9rem,1.8vw,1.2rem);border:1px solid var(--li);border-radius:var(--r-sm);
  background:#fff;box-shadow:var(--sh-1)}
.schk .schk__k{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.schk .schk__p{padding:.14rem .5rem;border-radius:var(--r-pill);border:1px solid var(--li);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.5938rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-mut)}
.schk .schk__z{margin-left:auto;font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.06em;color:var(--tx-mut);text-align:right}
.schk li .schk__p .schk__pkt{display:inline-block;width:7px;height:7px;flex:none;
  border-radius:50%;margin-right:.4rem}
.schk .schk__p{display:inline-flex;align-items:center}
.schk b{display:block;font-size:1.0625rem;letter-spacing:-.018em;line-height:1.3}
.schk span.schk__t{display:block;margin-top:.25rem;font-size:.875rem;line-height:1.55;color:var(--tx-mut)}

@media (max-width:920px){
  .sch{grid-template-columns:minmax(0,1fr)}
  /* Der gekippte Stapel ist höher als seine Kiste und sitzt darin zu weit
     oben — eigene Maße und ein Versatz nach unten, statt ihn abzuschneiden. */
  .sch__stapel{height:340px}
  .sch__l{width:min(74%,260px);height:148px;margin:-74px 0 0 -37%;top:calc(50% + 30px)}
  /* Die Karten sind hier halb so gross wie am Rechner — mit den Desktop-
     Abstaenden faehrt der Stapel oben aus seiner Kiste heraus und legt sich
     ueber die Lead-Zeile. Eigene, halbierte Staffelung. */
  .sch__l:nth-child(2),.laeuft .sch__l:nth-child(2){--z:44px}
  .sch__l:nth-child(3),.laeuft .sch__l:nth-child(3){--z:88px}
  .sch__l:nth-child(4),.laeuft .sch__l:nth-child(4){--z:132px}
  .schk li{padding:.9rem}
  .sch__wa{display:flex;align-items:center;justify-content:center;gap:.5rem;
    margin-top:1rem;padding:.8rem 1rem;border-radius:var(--r-pill);
    background:#fff;color:var(--ink);font-size:.875rem;font-weight:600;
    letter-spacing:-.01em;white-space:nowrap}
  .sch__wa svg{width:16px;height:16px;flex:none;color:#2FBF71}
}

/* ── Die Design-Schicht als kleine fertige Seite ─────────────────────────
   Flo, 19.09.2026: „damit das so aussieht, als wäre da wirklich ein Design".
   Deshalb hier keine Platzhalterbalken, sondern Kopfzeile, Hero mit zwei
   Wegen, drei Leistungskacheln mit Preis und die Bewertungszeile. */
.sch .sd{position:absolute;inset:0;display:flex;flex-direction:column;
  border-radius:13px;overflow:hidden;background:#fff}
.sch .sd__kopf{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;
  border-bottom:1px solid var(--li);font-size:.5312rem;color:var(--tx-mut)}
.sch .sd__logo{width:20px;height:10px;border-radius:2px;background:var(--graphit);flex:none}
.sch .sd__kopf u{text-decoration:none}
.sch .sd__cta{margin-left:auto;padding:.14rem .45rem;border-radius:4px;background:var(--ink);
  color:#fff;text-decoration:none;font-weight:700}
.sch .sd__hero{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  padding:.8rem .85rem;background:linear-gradient(145deg,#1B2126,#333E45);color:#fff}
.sch .sd__hero b{display:block;font-family:'Archivo',sans-serif;font-stretch:76%;font-weight:800;
  text-transform:uppercase;font-size:.9375rem;line-height:1.02;letter-spacing:-.01em}
.sch .sd__hero em{display:block;margin-top:.25rem;font-style:normal;font-size:.5312rem;
  color:rgba(255,255,255,.7)}
.sch .sd__wege{display:flex;gap:.3rem;margin-top:.5rem}
.sch .sd__wege s{text-decoration:none;padding:.2rem .5rem;border-radius:4px;font-size:.5312rem;font-weight:700}
.sch .sd__gruen{background:#2FBF71;color:#fff}
.sch .sd__rand{border:1px solid rgba(255,255,255,.4);color:#fff}
.sch .sd__kacheln{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--li)}
.sch .sd__k{background:#fff;padding:.35rem .4rem}
.sch .sd__k b{display:block;font-size:.5312rem;letter-spacing:-.01em;color:var(--tx)}
.sch .sd__k em{display:block;margin-top:.1rem;font-style:normal;font-size:.5rem;color:var(--tx-mut)}
.sch .sd__sterne{flex:0 0 auto;padding:.4rem .7rem;background:var(--papier-2);
  border-top:1px solid var(--li);font-size:.5312rem;color:#E8A13A;letter-spacing:.06em}
.sch .sd__sterne em{font-style:normal;color:var(--tx-mut);letter-spacing:0}
/* Auf der Design-Schicht sitzt das Schild über der Seite, nicht darunter */
.sch .sch__l:nth-child(4) .sch__mk{z-index:2}

/* ══════════════════════════════════════════════════════════════════════════
   ÜBER UNS — eigene Bausteine (19.09.2026)
   Alles hier gehört nur zu /ueber-uns. Reihenfolge wie auf der Seite.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: Teamfoto auf gekippter Bühne, gerahmt von den zwei Logo-Klammern */
.hero--ueber .hero__grid{align-items:center}
.ub{position:relative;padding:clamp(14px,2.2vw,26px)}
.ub__buehne{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-3);transform:perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transform-origin:left center;transition:transform .9s var(--fed-weich)}
.laeuft .ub__buehne{transform:perspective(1400px) rotateY(-4deg) rotateX(1deg)}
.ub__buehne img{display:block;width:100%;height:auto}
/* die beiden L-Klammern aus dem Logo */
.ub__kl{position:absolute;width:clamp(44px,5.6vw,74px);height:clamp(44px,5.6vw,74px);
  border:3px solid var(--graphit);pointer-events:none;opacity:0;transition:opacity .6s var(--fed-weich) .25s}
.laeuft .ub__kl{opacity:1}
.ub__kl--tl{top:0;left:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.ub__kl--br{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 6px 0}
/* zwei nachprüfbare Belege, die über der Bühne schweben */
.ub__beleg{position:absolute;display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:.6rem;padding:.6rem .85rem;border-radius:var(--r-sm);background:var(--papier);
  border:1px solid var(--li);box-shadow:var(--sh-2);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--fed-weich),transform .5s var(--fed-weich)}
.laeuft .ub__beleg{opacity:1;transform:none}
.laeuft .ub__beleg--a{transition-delay:.42s}
.laeuft .ub__beleg--b{transition-delay:.56s}
.ub__beleg img{width:30px;height:auto;grid-row:span 2}
.ub__beleg b{font-size:.8125rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ub__beleg i{font-style:normal;font-size:.6875rem;color:var(--tx-mut);line-height:1.2}
.ub__beleg--a{left:clamp(-6px,-.6vw,0px);bottom:clamp(12%,14%,16%)}
.ub__beleg--b{right:clamp(-8px,-.8vw,0px);top:clamp(9%,10%,12%)}
.ub__sterne{grid-row:span 2;align-self:center;color:#E8A13A;font-size:.75rem;letter-spacing:.06em}
@media (max-width:1000px){
  .ub__buehne,.laeuft .ub__buehne{transform:none}
  .ub__beleg--a{left:0;bottom:8%}
  .ub__beleg--b{right:0;top:6%}
}
@media (max-width:520px){
  /* Ohne die Zusatzzeile bleibt eine Zeile übrig: Logo und Wort mittig zueinander,
     und das Siegel darf etwas größer sein. */
  .ub__beleg i{display:none}
  .ub__beleg{align-items:center}
  .ub__beleg img{grid-row:auto;align-self:center;width:42px}
  .ub__beleg b{align-self:center}
  .ub__sterne{grid-row:auto;align-self:center}
}

/* ── Haltung: vier Karten, jede mit einem gebauten Beweisstück ──────────── */
.hlt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem);
  margin-top:clamp(2rem,3.4vw,3rem)}
.hlt__k{display:flex;flex-direction:column;padding:clamp(1.1rem,1.8vw,1.5rem)}
.hlt__bild{height:118px;margin-bottom:1.1rem;border-radius:var(--r-sm);background:var(--papier-2);
  border:1px solid var(--li-soft);display:grid;place-items:center;overflow:hidden;padding:.8rem}
.hlt__t{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;
  margin-bottom:.45rem}
.hlt__x{margin:0;font-size:.875rem;line-height:1.6;color:var(--tx-mut)}

/* Beweisstück 1 — Preiszeilen */
.hp{display:flex;flex-direction:column;gap:.3rem;width:100%;font-size:.6875rem}
.hp__z{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.34rem .5rem;border-radius:6px;background:var(--papier);border:1px solid var(--li-soft)}
.hp__z i{font-style:normal;color:var(--tx-mut)}
.hp__z b{font-weight:700;font-variant-numeric:tabular-nums}
.hp__z--aus{opacity:.45;text-decoration:line-through}
/* Beweisstück 2 — Monatsbericht */
.hb{width:100%;padding:.55rem .6rem;border-radius:8px;background:var(--papier);
  border:1px solid var(--li-soft);font-size:.6875rem}
.hb__kopf{display:block;font-family:'Geist Mono',ui-monospace,monospace;font-size:.5625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mut);margin-bottom:.35rem}
.hb__z{display:flex;justify-content:space-between;gap:.5rem}
.hb__z i{font-style:normal;color:var(--tx-mut)}
.hb__z b{font-weight:700;font-variant-numeric:tabular-nums}
.hb__bal{display:flex;flex-direction:column;gap:3px;margin-top:.45rem}
.hb__bal i{display:block;height:4px;border-radius:2px;background:var(--ink);width:var(--w)}
.hb__bal i:nth-child(2){opacity:.6}
.hb__bal i:nth-child(3){opacity:.34}
/* Beweisstück 3 — Anruf */
.ha{display:flex;flex-direction:column;align-items:center;gap:.6rem;width:100%}
.ha__welle{display:flex;align-items:center;gap:3px;height:30px}
.ha__welle i{display:block;width:3px;border-radius:2px;background:var(--live);height:34%;
  animation:haWelle 1.25s ease-in-out infinite}
.ha__welle i:nth-child(2){animation-delay:.1s}.ha__welle i:nth-child(3){animation-delay:.2s}
.ha__welle i:nth-child(4){animation-delay:.3s}.ha__welle i:nth-child(5){animation-delay:.4s}
.ha__welle i:nth-child(6){animation-delay:.5s}.ha__welle i:nth-child(7){animation-delay:.6s}
@keyframes haWelle{0%,100%{height:30%}50%{height:100%}}
.ha__txt{width:100%;text-align:center;padding:.42rem .7rem;border-radius:var(--r-pill);background:var(--papier);
  border:1px solid var(--li-soft);font-size:.6875rem;color:var(--tx)}
/* Beweisstück 4 — Übergabe */
.hs{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;justify-content:space-between;width:100%}
.hs__karte{flex:1 1 0;min-width:0;text-align:center;padding:.42rem .4rem;border-radius:6px;background:var(--papier);
  border:1px solid var(--li-soft);font-size:.625rem}
.hs__karte i{font-style:normal;color:var(--tx-mut)}
.hs__pfeil{font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;font-weight:700;
  letter-spacing:.06em;color:var(--ink)}
@media (max-width:1000px){ .hlt{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .hlt{grid-template-columns:minmax(0,1fr)}
  /* Einspaltig ist die Kachel breit genug, aber die feste Höhe schnitt das
     Beweisstück unten ab. Hier wächst sie mit dem Inhalt. */
  .hlt__bild{height:auto;min-height:104px;padding:1rem}
}

/* ── Zahlenband (dunkel) ───────────────────────────────────────────────── */
.ubz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.8rem);
  margin-top:clamp(2rem,3.4vw,2.8rem)}
.ubz__k{padding:clamp(1.1rem,1.8vw,1.5rem) 0;border-top:1px solid var(--li-inv);
  opacity:0;transform:translateY(10px)}
.laeuft .ubz__k{animation:feedRein .55s var(--fed-weich) var(--d,0s) forwards}
.ubz__zahl{display:block;font-family:'Archivo',system-ui,-apple-system,sans-serif;font-stretch:76%;
  font-weight:800;font-size:clamp(2.4rem,1.8rem + 2.6vw,3.6rem);line-height:1;letter-spacing:-.03em;
  color:var(--tx-inv);font-variant-numeric:tabular-nums}
.ubz__t{display:block;margin-top:.5rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-inv-mut)}
.ubz__x{margin:.7rem 0 0;font-size:.875rem;line-height:1.6;color:var(--tx-inv-mut);max-width:26ch}
.ubz__fuss{margin:clamp(1.6rem,2.6vw,2.2rem) 0 0;font-size:.8125rem;line-height:1.6;
  color:var(--tx-inv-mut);max-width:62ch}
@media (max-width:900px){ .ubz{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ubz{grid-template-columns:minmax(0,1fr)} .ubz__x{max-width:none} }

/* ── Inhaber ───────────────────────────────────────────────────────────── */
.inh{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.8rem,4vw,3.6rem);align-items:center}
.inh__bild{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.inh__bild img{display:block;width:100%;height:auto}
.inh__schild{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.15rem .95rem;
  background:linear-gradient(to top,rgba(14,17,19,.86),rgba(14,17,19,0));color:#fff}
.inh__schild b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.02em}
.inh__schild i{display:block;margin-top:.15rem;font-style:normal;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.inh__zitat{margin:1.2rem 0 0;padding-left:clamp(1rem,1.6vw,1.4rem);
  border-left:3px solid var(--graphit)}
.inh__zitat p{margin:0;font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.7;color:var(--tx)}
.inh__zitat p + p{margin-top:.9rem}
.inh__liste{margin-top:1.5rem}
.inh__cta{margin-top:1.7rem;margin-bottom:0}
@media (max-width:900px){
  .inh{grid-template-columns:minmax(0,1fr)}
  .inh__bild{max-width:420px}
}

/* ── Ausbildungsbetrieb ────────────────────────────────────────────────── */
/* H2 und Lead kleben sonst aneinander — dieselbe Regel wie in der Handy-Sektion. */
.azb__txt h2,.ort__txt h2{margin-bottom:0}
.azb__txt .t-lead,.ort__txt .t-lead{margin-top:clamp(.85rem, .6rem + .6vw, 1.15rem)}
.azb{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.6rem,3.4vw,3rem);align-items:center}
.azb__liste{margin-top:1.4rem}
.azb__bild{display:grid;place-items:center}
.azb__rahmen{position:relative;display:grid;place-items:center;width:min(100%,300px);
  aspect-ratio:1;border-radius:var(--r-lg);background:var(--papier-2);
  border:1px solid var(--li);box-shadow:var(--sh-1)}
.azb__rahmen::before{content:"";position:absolute;inset:14px;border:1px dashed var(--li);
  border-radius:calc(var(--r-lg) - 8px)}
.azb__rahmen img{position:relative;width:min(62%,180px);height:auto}
@media (max-width:820px){
  .azb{grid-template-columns:minmax(0,1fr)}
  .azb__rahmen{width:min(100%,240px)}
}

/* ── Leistungskacheln mit Link ─────────────────────────────────────────── */
.ums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem);
  margin-top:clamp(2rem,3.4vw,3rem)}
.ums__k{display:flex;flex-direction:column;padding:clamp(1.2rem,2vw,1.7rem);
  text-decoration:none;color:inherit;
  transition:transform .4s var(--fed-weich),box-shadow .4s var(--fed-weich)}
.ums__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:var(--papier-2);border:1px solid var(--li-soft);margin-bottom:1rem}
.ums__ico svg{width:22px;height:22px;color:var(--ink)}
.ums__t{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;
  margin-bottom:.45rem}
.ums__x{display:block;font-size:.875rem;line-height:1.6;color:var(--tx-mut)}
.ums__mehr{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-size:.8125rem;font-weight:600;color:var(--ink)}
.ums__mehr i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--papier-3);transition:transform .35s var(--fed-weich)}
.ums__mehr i svg{width:13px;height:13px}
@media (hover:hover) and (pointer:fine){
  .ums__k:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
  .ums__k:hover .ums__mehr i{transform:translateX(3px)}
}
@media (max-width:760px){ .ums{grid-template-columns:minmax(0,1fr)} }

/* ── Standort ──────────────────────────────────────────────────────────── */
.ort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,3.6vw,3.4rem);align-items:center}
.ort__liste{margin-top:1.4rem}
.ort__adresse{margin-top:1.5rem;font-style:normal;font-size:.875rem;line-height:1.8;
  color:var(--tx-mut)}
.ort__adresse a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--li)}
.ort__bild{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.ort__bild img{display:block;width:100%;height:auto}
.ort__schild{position:absolute;left:1rem;bottom:1rem;padding:.6rem .9rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);box-shadow:var(--sh-1)}
.ort__schild b{display:block;font-size:.9375rem;font-weight:700;letter-spacing:-.02em}
.ort__schild i{display:block;margin-top:.1rem;font-style:normal;font-size:.6875rem;color:var(--tx-mut)}
@media (max-width:860px){ .ort{grid-template-columns:minmax(0,1fr)} }

/* ══════════════════════════════════════════════════════════════════════════
   RECHTSTEXTE — Impressum und Datenschutz (19.09.2026)
   Lesbarkeit vor Gestaltung: eine Spalte, ~70 Zeichen, klare Hierarchie.
   ══════════════════════════════════════════════════════════════════════════ */
.rt{padding-top:clamp(7rem, 5rem + 7vw, 10rem)}
.rt__wrap{max-width:52rem}
.rt__kopf{margin-bottom:clamp(2rem, 1.4rem + 2.4vw, 3rem)}
.rt__kopf h1{margin-top:.6rem}
.rt__txt{font-size:.9375rem;line-height:1.75;color:var(--tx)}
.rt__txt h2{margin:clamp(2.2rem, 1.6rem + 2.2vw, 3rem) 0 .8rem;
  font-family:'Archivo',system-ui,-apple-system,sans-serif;font-stretch:76%;font-weight:800;
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem);letter-spacing:-.02em;line-height:1.25}
.rt__txt h3{margin:1.8rem 0 .5rem;font-size:1rem;font-weight:700;letter-spacing:-.015em}
.rt__txt p{margin:0 0 1rem;max-width:68ch}
.rt__txt ul{margin:0 0 1.2rem;padding-left:1.15rem;max-width:68ch}
.rt__txt li{margin-bottom:.35rem}
.rt__txt a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--li)}
.rt__txt a:hover{border-bottom-color:var(--ink)}
.rt__txt strong{font-weight:700}
/* Der Kasten oben auf der Datenschutzseite: die Kernaussage vor dem Kleingedruckten */
.rt__kasten{margin:0 0 2.2rem;padding:clamp(1.1rem, .9rem + .9vw, 1.6rem);
  border-radius:var(--r-card);background:var(--papier-2);border:1px solid var(--li)}
.rt__kasten b{display:block;margin-bottom:.5rem;font-size:1rem;letter-spacing:-.015em}
.rt__kasten p{margin:0;color:var(--tx-mut)}

/* Rechtslinks in der Fußzeile */
.fz__recht{display:flex;gap:1.1rem;flex-wrap:wrap}
.fz__recht a{color:inherit;text-decoration:none;opacity:.8}
.fz__recht a:hover{opacity:1;text-decoration:underline}
@media (max-width:640px){
  .fz__unten{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   RATGEBER — Übersicht (.rk/.bl) und Beitrag (.bp) · 19.09.2026
   Aufbau wie bei RGN Entrümpelung & Umzug, Anmutung wie der Rest dieser Seite.
   ══════════════════════════════════════════════════════════════════════════ */
.rk{padding-top:clamp(7rem, 5rem + 7vw, 10rem);padding-bottom:clamp(2rem, 1.4rem + 2vw, 3rem)}
.rk__wrap{max-width:52rem}
.rk__pfad{display:flex;align-items:center;gap:.55rem;margin-bottom:clamp(1.4rem, 1rem + 1.4vw, 2rem);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;letter-spacing:.08em;
  color:var(--tx-mut);flex-wrap:wrap}
.rk__pfad a{color:var(--tx-mut);text-decoration:none;border-bottom:1px solid var(--li)}
.rk__pfad a:hover{color:var(--tx)}
.rk__pfad b{color:var(--tx);font-weight:500}
.rk__kopf h1{margin:.6rem 0 0}
.rk__kopf .t-lead{margin-top:clamp(.85rem, .6rem + .6vw, 1.15rem)}

/* Beitragskarten */
.bl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.bl__k{display:flex;flex-direction:column;padding:clamp(1.2rem,2vw,1.7rem)}
.bl__kat{display:inline-flex;align-self:flex-start;padding:.24rem .6rem;margin-bottom:.9rem;
  border-radius:var(--r-pill);background:var(--papier-2);border:1px solid var(--li-soft);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-mut)}
.bl__t{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;
  margin-bottom:.5rem}
.bl__x{margin:0;font-size:.875rem;line-height:1.6;color:var(--tx-mut)}
.bl__bald{margin-top:auto;padding-top:1rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut);opacity:.75}
.bl__k--bald{opacity:.72}
a.bl__k{text-decoration:none;color:inherit;
  transition:transform .4s var(--fed-weich),box-shadow .4s var(--fed-weich)}
@media (hover:hover) and (pointer:fine){ a.bl__k:hover{transform:translateY(-3px);box-shadow:var(--sh-3)} }
.bl__hinweis{margin-top:clamp(1.8rem,3vw,2.6rem);padding:clamp(1.1rem,.9rem + .9vw,1.6rem);
  border-radius:var(--r-card);background:var(--papier);border:1px solid var(--li);max-width:56rem}
.bl__hinweis b{display:block;margin-bottom:.45rem;font-size:1rem;letter-spacing:-.015em}
.bl__hinweis p{margin:0;font-size:.9375rem;line-height:1.7;color:var(--tx-mut)}
.bl__hinweis a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--li)}
@media (max-width:920px){ .bl{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .bl{grid-template-columns:minmax(0,1fr)} }

/* Einzelner Beitrag */
.bp{padding-top:clamp(7rem, 5rem + 7vw, 10rem)}
.bp__wrap{max-width:70rem}
.bp__kopf,.bp__autor{max-width:46rem}
.bp__kopf h1{margin:.6rem 0 0}
.bp__lead{margin:clamp(.9rem,.7rem + .7vw,1.3rem) 0 0;font-size:1.0625rem;line-height:1.7;
  color:var(--tx-mut)}
.bp__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1.4rem;padding-top:1.1rem;
  border-top:1px solid var(--li);font-size:.8125rem;color:var(--tx-mut)}
.bp__meta b{color:var(--tx);font-weight:600}
.bp__inhalt--alt{margin:clamp(2rem,1.6rem + 1.6vw,2.8rem) 0 0;padding:clamp(1.1rem,.9rem + .8vw,1.5rem);
  border-radius:var(--r-card);background:var(--papier-2);border:1px solid var(--li-soft)}
.bp__inhalt b{display:block;margin-bottom:.6rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mut)}
.bp__inhalt ol{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem}
.bp__inhalt a{color:var(--tx);text-decoration:none;font-size:.9375rem;
  border-bottom:1px solid var(--li)}
.bp__inhalt a:hover{border-bottom-color:var(--ink)}

.bp__txt{margin-top:clamp(2rem,1.6rem + 1.8vw,3rem);font-size:1rem;line-height:1.8;color:var(--tx)}
.bp__txt h2{margin:clamp(2.4rem,1.8rem + 2.4vw,3.4rem) 0 .9rem;
  font-family:'Archivo',system-ui,-apple-system,sans-serif;font-stretch:76%;font-weight:800;
  font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);letter-spacing:-.022em;line-height:1.2}
.bp__txt h3{margin:2rem 0 .6rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.015em}
.bp__txt p{margin:0 0 1.15rem}
.bp__txt a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--graphit)}
.bp__txt .check-list{margin:0 0 1.4rem}
.bp__kasten{margin:1.6rem 0;padding:clamp(1.1rem,.9rem + .8vw,1.5rem);border-radius:var(--r-card);
  background:var(--ink);color:var(--tx-inv)}
.bp__kasten b{display:block;margin-bottom:.45rem;font-size:.9375rem}
.bp__kasten p{margin:0;color:var(--tx-inv-mut);font-size:.9375rem;line-height:1.7}
.bp__tab{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.9375rem}
.bp__tab th,.bp__tab td{padding:.7rem .8rem;border-bottom:1px solid var(--li);text-align:left}
.bp__tab th{font-family:'Geist Mono',ui-monospace,monospace;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-mut);border-bottom-color:var(--graphit)}
.bp__quelle{font-size:.8125rem;color:var(--tx-mut)}
.bp__bild{margin:1.8rem 0}
.bp__bild img{display:block;width:100%;height:auto;border-radius:var(--r-card)}
.bp__bild figcaption{margin-top:.6rem;font-size:.8125rem;color:var(--tx-mut)}
.bp__zitat{margin:1.8rem 0;padding-left:clamp(1rem,.8rem + .8vw,1.4rem);
  border-left:3px solid var(--graphit)}
.bp__zitat p{margin:0;font-size:1.125rem;line-height:1.7;letter-spacing:-.01em}
.bp__autor{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.2rem;align-items:center;
  margin-top:clamp(2.4rem,2rem + 2vw,3.4rem);padding-top:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);
  border-top:1px solid var(--li)}
.bp__autor img{width:96px;height:96px;object-fit:cover;object-position:center 20%;
  border-radius:var(--r-card)}
.bp__autor b{display:block;font-size:1rem;letter-spacing:-.015em}
.bp__autor span{display:block;margin:.3rem 0 .5rem;font-size:.875rem;line-height:1.6;color:var(--tx-mut)}
.bp__autor a{font-size:.8125rem;font-weight:600;color:var(--tx);text-decoration:none;
  border-bottom:1px solid var(--li)}
@media (max-width:560px){
  .bp__autor{grid-template-columns:72px minmax(0,1fr);gap:1rem}
  .bp__autor img{width:72px;height:72px}
}
/* Spaltenkopf und Fußzeile der Beiträge-Spalte als Links */
.mm__kopf--link{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:inherit}
.mm__kopf--link svg{opacity:.55;transition:transform .3s var(--fed-weich)}
.mm__kopf--link:hover svg{transform:translateX(3px);opacity:1}
.mm__bald--link{text-decoration:none;color:var(--tx-mut);transition:color .25s var(--fed-weich)}
.mm__bald--link:hover{color:var(--tx)}

/* ── Beitrag zweispaltig: Text und mitlaufende Seitenspalte ──────────────
   Aufbau wie im Ratgeber von RGN Entrümpelung & Umzug (.art/.art__side),
   Maße auf 80/20 gezogen. Auf dem Handy einspaltig, Inhalt zuerst. */
.bp__grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,23%,300px);
  gap:clamp(1.8rem,3.4vw,3.4rem);align-items:start;margin-top:clamp(2rem,1.6rem + 1.8vw,3rem)}
.bp__haupt{min-width:0}
.bp__haupt .bp__txt{margin-top:0;max-width:44rem}
.bp__side{position:sticky;top:calc(var(--kopf-h,76px) + 1.2rem);display:grid;gap:1rem;
  align-content:start}
.bp__toc{padding:clamp(1rem,.85rem + .7vw,1.3rem);border-radius:var(--r-card);
  background:var(--papier-2);border:1px solid var(--li-soft)}
.bp__toc b{display:block;margin-bottom:.6rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut)}
.bp__toc ol{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.45rem}
.bp__toc a{color:var(--tx);text-decoration:none;font-size:.875rem;line-height:1.4;
  border-bottom:1px solid transparent}
.bp__toc a:hover{border-bottom-color:var(--graphit)}
.bp__cta{padding:clamp(1.1rem,.9rem + .8vw,1.5rem);border-radius:var(--r-card);
  background:var(--ink);color:var(--tx-inv)}
.bp__cta b{display:block;margin-bottom:.45rem;font-size:1rem;letter-spacing:-.015em}
.bp__cta p{margin:0 0 1rem;font-size:.875rem;line-height:1.6;color:var(--tx-inv-mut)}
.bp__cta .btn{width:100%;justify-content:center}
.bp__tel{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.7rem;
  font-size:.875rem;font-weight:600;color:var(--tx-inv);text-decoration:none;opacity:.9}
.bp__tel:hover{opacity:1}
.bp__tel svg{fill:currentColor}
@media (max-width:920px){
  .bp__grid{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  /* Seitenspalte auflösen: Inhaltsverzeichnis nach oben, Anfrage-Kasten ans Ende */
  .bp__side{display:contents}
  .bp__toc{order:-1;position:static;margin-bottom:.4rem}
  .bp__cta{order:2}
  .bp__haupt{order:1}
}
/* Beitragsbild in der Karte und im Artikelkopf */
.bl__bild{margin:calc(clamp(1.2rem,2vw,1.7rem) * -1) calc(clamp(1.2rem,2vw,1.7rem) * -1) 1.1rem;
  border-radius:var(--r-card) var(--r-card) 0 0;overflow:hidden;background:var(--papier-2)}
.bl__bild img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.bp__hero{margin:clamp(1.4rem,1.1rem + 1.2vw,2rem) 0 0;border-radius:var(--r-lg);overflow:hidden}
.bp__hero img{display:block;width:100%;height:auto}

/* ══════════════════════════════════════════════════════════════════════════
   STADTSEITE — eigene Bausteine (19.09.2026)
   .vo  Was vor Ort anders ist · .lsm Local-SEO-Doppelpack · .uml Einzugsgebiet
   ══════════════════════════════════════════════════════════════════════════ */
.vo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.4rem);
  margin-top:clamp(2rem,3.4vw,3rem)}
.vo__k{padding:clamp(1.2rem,2vw,1.8rem)}
.vo__nr{display:block;margin-bottom:.8rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.6875rem;letter-spacing:.14em;color:var(--tx-mut)}
.vo__t{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;
  margin-bottom:.5rem}
.vo__x{margin:0;font-size:.9375rem;line-height:1.7;color:var(--tx-mut)}
.vo__x a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--li)}
@media (max-width:760px){ .vo{grid-template-columns:minmax(0,1fr)} }

.lsm{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.8rem,3.6vw,3.4rem);align-items:center}
.lsm__txt h2{margin-bottom:0}
.lsm__txt .t-lead{margin-top:clamp(.85rem,.6rem + .6vw,1.15rem)}
.lsm__liste{margin-top:1.4rem}
.lsm__hin{margin:1.4rem 0 0;font-size:.9375rem;line-height:1.7;color:var(--tx-mut)}
.lsm__hin a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--li)}
.lsm__box{padding:clamp(1.2rem,1rem + 1vw,1.8rem);border-radius:var(--r-card);
  background:var(--ink);color:var(--tx-inv)}
.lsm__kopf{display:block;margin-bottom:1rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-inv-mut)}
.lsm__kw{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lsm__kw li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid var(--li-inv-soft);font-size:.9375rem}
.lsm__kw li:last-child{border-bottom:0}
.lsm__kw b{font-weight:500;color:var(--tx-inv)}
.lsm__kw span{font-family:'Geist Mono',ui-monospace,monospace;font-size:.875rem;
  font-variant-numeric:tabular-nums;color:var(--tx-inv-mut)}
.lsm__quelle{margin:1rem 0 0;font-size:.75rem;line-height:1.6;color:var(--tx-inv-mut)}
@media (max-width:900px){ .lsm{grid-template-columns:minmax(0,1fr)} }

.uml{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);
  margin-top:clamp(2rem,3.4vw,2.8rem)}
.uml__sp{padding:clamp(1.1rem,.9rem + .9vw,1.6rem);border-radius:var(--r-card);
  background:var(--papier);border:1px solid var(--li)}
.uml__sp b{display:block;margin-bottom:.6rem;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut)}
.uml__sp p{margin:0;font-size:.9375rem;line-height:1.9;color:var(--tx)}
.uml__sp--cta{background:var(--papier-2)}
.uml__sp--cta p{color:var(--tx-mut);line-height:1.7}
.uml__sp--cta .btn{margin-top:1rem}
@media (max-width:860px){ .uml{grid-template-columns:minmax(0,1fr)} }
/* Ort mit fertiger Stadtseite: als Link erkennbar, gleiche Optik wie die Knöpfe */
a.so1__ort{display:flex;text-decoration:none;color:inherit}
a.so1__ort em{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--li)}
a.so1__ort:hover em{text-decoration-color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════════════
   VERWEISE IM FLIESSTEXT (19.09.2026)
   Nur dort, wo wirklich Text steht — Menü, Fußzeile, Knöpfe und Kartenlinks
   behalten ihre eigene Behandlung.
   ══════════════════════════════════════════════════════════════════════════ */
.faq__a a, .bp__txt a, .rt__txt a, .bl__hinweis a,
.t-lead a, .hero__lead a, .bp__lead a,
.vo__x a, .wo3__x a, .wo3__fuss a, .vt__x a, .lsm__hin a, .uml__sp p a,
.sch__fazit a:not(.sch__wa), .schk__t a, .inh__zitat a, .ubz__x a,
.preis__fuer a, .pk__satz a, .gf__note a, .kap__liste a,
.tm__txt .t-lead a, .ort__txt .t-lead a, .azb__txt .t-lead a{
  color:var(--link);
  border-bottom:0;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
  text-decoration-color:rgba(36,86,214,.42);
  transition:text-decoration-color var(--t) var(--fed-weich), color var(--t) var(--fed-weich);
}
.faq__a a:hover, .bp__txt a:hover, .rt__txt a:hover, .bl__hinweis a:hover,
.t-lead a:hover, .hero__lead a:hover, .bp__lead a:hover,
.vo__x a:hover, .wo3__x a:hover, .wo3__fuss a:hover, .vt__x a:hover, .lsm__hin a:hover, .uml__sp p a:hover,
.sch__fazit a:not(.sch__wa):hover, .schk__t a:hover, .inh__zitat a:hover, .ubz__x a:hover,
.preis__fuer a:hover, .pk__satz a:hover, .gf__note a:hover, .kap__liste a:hover,
.tm__txt .t-lead a:hover, .ort__txt .t-lead a:hover, .azb__txt .t-lead a:hover{
  text-decoration-color:var(--link);
}
/* Auf dunklen Sektionen die helle Fassung */
.s-dark .faq__a a, .s-dark .t-lead a, .s-dark .wo3__x a, .s-dark .wo3__fuss a, .s-dark .ubz__x a,
.s-dark .bp__txt a, .s-dark .gf__note a, .bp__kasten a, .lsm__box a{
  color:var(--link-inv);
  text-decoration-color:rgba(143,182,255,.45);
}
.s-dark .faq__a a:hover, .s-dark .t-lead a:hover, .s-dark .wo3__x a:hover, .s-dark .wo3__fuss a:hover,
.s-dark .ubz__x a:hover, .s-dark .bp__txt a:hover, .s-dark .gf__note a:hover,
.bp__kasten a:hover, .lsm__box a:hover{ text-decoration-color:var(--link-inv) }


/* ══════════════════════════════════════════════════════════════════════════
   BLOG — Beitragsbild als Band  ·  angelegt 20.09.2026
   Angleichung an den Ratgeber von RGN Entrümpelung & Umzug (.artband):
   Das Beitragsbild steht randlos über dem Artikelkopf, nicht mehr zwischen
   Einleitung und Autorenzeile.

   Anhängen an: assets/css/style.css  (ans Ende, nach dem .bp__-Block)
   ══════════════════════════════════════════════════════════════════════════ */

/* Die Kopfzeile ist position:fixed und 84 px hoch (.kopf__in{height:84px}).
   Bisher stand hier nur ein Fallback von 76 px in .bp__side — der echte Wert
   gehört an eine Stelle, damit Band und Seitenspalte dieselbe Zahl benutzen. */
:root{ --kopf-h:84px }

/* Das Band steht VOR <article class="sec">, nicht darin: innerhalb der Sektion
   läge es im padding-block von --sec-y und wäre nicht randlos.
   margin-top schiebt es unter die fixierte Kopfzeile. Bewusst nicht bis unter
   den Kopf durchgezogen: RGN Marketing hat — anders als E&U — kein inverses
   Logo, ein dunkles Foto unter der transparenten Leiste würde es schlucken. */
.bp__band{
  width:100%;
  /* <figure> bringt margin:1em 40px vom Browser mit; ohne figure-Reset ragt
     das Band 40 px ueber den rechten Rand (scrollWidth 1480 bei 1440). */
  margin:var(--kopf-h,84px) 0 0;
  overflow:hidden;
  background:var(--papier-3);
  aspect-ratio:16/9;
  max-height:clamp(260px,26vw,440px);
}
.bp__band img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
}

/* Nach einem Bildband wäre die volle Sektionshöhe eine zweite Lücke nach
   einer, die schon da ist. */
.bp__band + .sec{ padding-top:clamp(2rem,1.6rem + 1.6vw,3rem) }

/* Ohne Band (Beitrag ohne Bild) bleibt der normale Sektionsabstand stehen. */

@media (max-width:640px){
  /* Auf dem Handy trägt ein flaches Band nichts mehr — lieber etwas höher,
     damit das Motiv erkennbar bleibt. */
  .bp__band{ max-height:clamp(200px,52vw,300px) }
}

/* .bp__hero bleibt bestehen: Bilder MITTEN im Beitrag laufen weiter darüber. */