/* ════════════════════════════════════════════════════════════
   mps.agency – Startseite 2026
   ════════════════════════════════════════════════════════════ */

/* ── Schriftart mps.agency ─────────────────────────────────────────────────
   WOFF zuerst, TTF nur als Rückfall für sehr alte Browser. Beide Fassungen
   sind auf den gebrauchten Zeichenumfang verkleinert: Die Originale trugen
   2522 Glyphen mit sich – darunter ein vollständiger koreanischer Zeichensatz –
   und wogen 740 KB je Schnitt. Jetzt sind es 14 KB (siehe
   werkzeuge/schriften-verkleinern.py, Originale in schrift-originale/).

   font-display: block statt swap. Der Unterschied ist genau das, was vorher
   störte: Mit „swap" zeigt der Browser sofort die Ersatzschrift und tauscht
   sie beim Eintreffen aus – der Text zittert bei jedem Seitenwechsel. Mit
   „block" bleibt der Text für maximal drei Sekunden unsichtbar und erscheint
   dann direkt richtig. Bei 14 KB und Vorladen (siehe includes/header.php)
   dauert das wenige Millisekunden; ein Umschalten sieht niemand mehr.
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'mps.agency';
  src: url('../fonts/mps.agency-Light.woff') format('woff'),
       url('../fonts/mps.agency-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'mps.agency';
  src: url('../fonts/mps.agency-Medium.woff') format('woff'),
       url('../fonts/mps.agency-Medium.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'mps.agency';
  src: url('../fonts/mps.agency-Bold.woff') format('woff'),
       url('../fonts/mps.agency-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: block;
}

/* ── Design-Tokens ── */
:root {
  /* Seitenränder des Layouts. Links bewusst breiter als rechts – Kopf,
     Brotkrume, Fuß, Mega-Menü und die Scroll-Maus richten sich daran aus, wer
     einen Wert ändert, ändert alle fünf gemeinsam.

     Rechts wird die Breite des Scrollbalkens abgezogen: (100vw - 100%) ist
     genau diese Breite, weil 100vw das Fenster samt Balken meint und 100 % nur
     den sichtbaren Inhaltsbereich. Ohne den Abzug rutscht der Inhalt nach
     links, sobald ein klassischer Scrollbalken erscheint, und der rechte
     Abstand fällt je Seite unterschiedlich aus. Mit dem Abzug bleibt der
     sichtbare Abstand zum Fensterrand gleich – mit Balken wie ohne. */
  --rand-links: clamp(3rem, 12vw, 260px);
  --rand-rechts: clamp(2.5rem, calc(7% - (100vw - 100%)), 160px);

  --dark: #0e1215;
  --dark-2: #0a0d10;
  --navy: #1e1b2c;
  --ink: #1d2333;
  --purple: #8b2fd6;
  --violet: #6a5cf0;
  --blue: #4da3e6;
  --indigo: #5a56ef;
  --grad: linear-gradient(93deg, #a21ccb 0%, #7b5ce4 45%, #4da3e6 100%);
  --grad-soft: linear-gradient(120deg, #7d55e6 0%, #5f7ce8 55%, #4aa7e0 100%);
  /* Dunkler Basis-Verlauf: nie ganz schwarz (wie body.website der aktuellen Seite) */
  --grad-dark: linear-gradient(-146deg, #050505 0%, #17121b 39%, #19292c 100%);
  --light: #f2eeeb;
  --radius: 14px;
  --font: 'mps.agency', 'Segoe UI', system-ui, sans-serif;
}

/* clip statt hidden: verhindert horizontales Scrollen, ohne position:sticky (Header) zu brechen.
   NUR auf html – auf body würde body selbst zum Scroll-Container und window.scroll* brechen. */
html { overflow-x: clip; }

body {
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  /* Nie ganz schwarz: dezenter Farbverlauf als Basis. */
  background: #0e0f14;
}
/* Der Verlauf liegt auf einem viewport-festen Pseudo-Element statt auf
   background-attachment:fixed – Letzteres ignoriert iPhone-Safari seit jeher
   (der Verlauf wurde dort über die GESAMTE Seitenhöhe gestreckt, sichtbar
   blieb nur Schwarz). Optisch identisch zum bisherigen Desktop-Verhalten. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(-146deg, #050505 0%, #17121b 39%, #19292c 100%);
}

/* ── Bildmaße im Markup: WICHTIG, nicht entfernen ─────────────────────────
   Fast alle <img> tragen width und height mit den echten Pixelmaßen der
   Datei. Der Browser kennt damit das Seitenverhältnis, BEVOR das Bild da ist,
   und hält den Platz frei – ohne die Angaben rutscht der Inhalt darunter nach
   unten, sobald ein Bild eintrifft.

   Diese Regel gehört zwingend dazu: Die Attribute wirken wie CSS-Angaben mit
   Spezifität 0. Steht im Stylesheet nur eine Seite (etwa „width: 26px" für ein
   Icon), würde die andere Seite aus dem Attribut übernommen – das Icon wäre
   26 × 512 px hoch statt 26 × 26. Mit „auto" gewinnt hier das Stylesheet, die
   Attribute liefern nur noch das Verhältnis. Jede Klasse im Stylesheet ist
   spezifischer als diese Regel und behält deshalb das letzte Wort.
   Gemessen: ohne diese Regel wichen 621 Bilder ab, mit ihr keines. */
img { width: auto; height: auto; }

/* Galaxis-Basis hinter allen Elementen – wandert beim Scrollen
   von rechts nach links (endloser Parallax, siehe main.js) */
.galaxy-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('../img/galaxy.webp');
  background-repeat: repeat-x;
  background-size: auto 100vh;
  background-position: var(--galaxy-x, 0px) top;
  will-change: background-position;
}
/* Leichter Schleier, damit Inhalte lesbar bleiben und der Verlauf durchschimmert */
.galaxy-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(-146deg, rgba(5,5,5,.78) 0%, rgba(23,18,27,.72) 39%, rgba(25,41,44,.66) 100%);
}
strong, b { font-weight: 700; }
.fw-medium { font-weight: 400; }
a { text-decoration: none; }

h1,h2,h3,h4,h5 { font-weight: 700; letter-spacing: .2px; }
.h-display { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; color: var(--ink); }
.h-sub { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; }
.text-muted-2 { color: #4c5468; }
.text-muted-3 { color: #9aa1b2; }
.text-purple { color: #8a15c9; }
.grad-text {
  background: linear-gradient(90deg, #8b5cf6, #4da3e6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Buttons ── */
.btn-grad, .btn-outline, .btn-dark-solid, .btn-outline-dark, .btn-indigo, .btn-checkstart {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 400; border-radius: 9px; padding: .78rem 1.6rem;
  transition: transform .25s, box-shadow .25s, background .25s;
  border: 0; cursor: pointer; font-size: .98rem;
}
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 8px 26px rgba(122, 60, 220, .35); }
.btn-grad:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(122, 60, 220, .5); }
.btn-outline { border: 1px solid rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.btn-dark-solid { background: #23252e; color: #fff; border-radius: 6px; }
.btn-dark-solid:hover { background: #000; color: #fff; }
.btn-outline-dark { border: 1px solid #23252e; color: #23252e; border-radius: 6px; background: #fff; }
.btn-outline-dark:hover { background: #23252e; color: #fff; }
.btn-indigo { background: var(--indigo); color: #fff; border-radius: 26px; }
.btn-indigo:hover { background: #4643d8; color: #fff; }

/* Einheitlicher Tag-Style: #262626 deckend, ~24px hoch, Radius 30, weiß */
.pill-dark {
  display: inline-flex; align-items: center;
  background: #35353c; color: #dfe2e8; font-weight: 400;
  padding: .42rem .9rem .26rem; border-radius: 30px; font-size: .75rem;
  line-height: 1; letter-spacing: .6px; text-transform: uppercase;
}
.order-hint { color: #fff; font-size: .82rem; display: flex; align-items: center; gap: .35rem; }

/* ── Icons ── */
.ico, .ico-inline { width: 15px; height: 15px; }
img[src$='.svg'].ico-blue { filter: invert(55%) sepia(60%) saturate(1600%) hue-rotate(180deg); }

/* ════════════════ TOPBAR ════════════════ */
.topbar {
  /* Verlauf in Viewport-Größe statt attachment:fixed – iPhone ignoriert fixed
     und malte hier eine abweichende Fläche. Topbar/Header sitzen immer an der
     Viewport-Oberkante, damit ist dieses Rezept pixelgleich zum alten Desktop-Bild. */
  background: var(--grad-dark); background-size: 100vw 100vh; color: #cfd4da;
  padding: .65rem 0; font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative; z-index: 1050;
}
/* Auf dem Smartphone entfällt die Leiste über dem Logo komplett – Telefon,
   Socials und Sprachauswahl stehen dort im Burger-Menü. Ab Tablet (768 px)
   erscheint die vollständige Leiste wieder, ihre Einzelteile blenden sich wie
   gehabt nach Platz zu (Telefonblock ab 768, Standort ab 992). */
@media (max-width: 767.98px) {
  .topbar { display: none; }
}
.topbar-maps { color: #6db1e8; font-size: .78rem; }
.topbar-maps:hover { color: #9ccdf2; }
.topbar-phone .ico-phone { width: 22px; height: 22px; filter: invert(1); opacity: .9; }
.phone-number { color: #fff; font-weight: 400; font-size: .95rem; }
.phone-number:hover { color: #9ccdf2; }
.phone-status { color: #35c96b; font-size: .74rem; }
.status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #35c96b; margin-right: 2px;
  animation: pulse 1.8s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.lang-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  color: #e8eaee; font-size: .8rem; border-radius: 9px; padding: .4rem 1rem;
}
.flag-de {
  width: 17px; height: 17px; border-radius: 50%; display: inline-block;
  background: linear-gradient(180deg, #000 33%, #dd0000 33% 66%, #ffce00 66%);
}
.topbar-socials { gap: .45rem; }
/* .nav-quick (Anrufen/WhatsApp neben dem Burger, nur Smartphone) benutzt
   bewusst dieselbe Bauart – ein eigener Pillenstil daneben sah aus wie von
   einer anderen Seite. */
.topbar-socials a, .footer-socials a, .nav-quick {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.3); border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.topbar-socials a img, .footer-socials a img, .nav-quick img { width: 14px; height: 14px; filter: invert(1); }
.topbar-socials a:hover, .footer-socials a:hover, .nav-quick:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ════════════════ NAVIGATION ════════════════ */
.site-header {
  /* Oben im Dokument: der ursprüngliche dunkle Verlauf (passend zum Above-the-Fold).
     Mit .scrolled (= Header sitzt fest) wird er transparent und gibt die
     Glas-Ebene (::before) samt Liquid-Unterkante (::after) frei. */
  background: var(--grad-dark); background-size: 100vw 100vh;
  padding: 1.1rem 0;
  position: sticky; top: 0; z-index: 1040;
  transition: box-shadow .3s;
}
.site-header.scrolled { background: transparent; }
/* Liquid Dark Glass als ::before-Ebene — NICHT auf dem Header selbst:
   backdrop-filter auf dem Header würde als Backdrop-Root den Blur des
   Mega-Menüs (Kind-Element) aushebeln */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 12, 20, .55);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  backdrop-filter: blur(26px) saturate(1.35);
  opacity: 0;
  transition: opacity .3s;
}
.site-header.scrolled::before { opacity: 1; }
/* feine Liquid-Glass-Unterkante – erscheint erst, wenn der Header festsitzt */
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 0%, rgba(139,92,246,.4) 25%,
    rgba(255,255,255,.12) 50%, rgba(77,195,247,.35) 75%,
    rgba(255,255,255,.05) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.site-header.scrolled::after { opacity: 1; }
.site-header.scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.brand {
  font-size: 1.9rem; font-weight: 400; color: #fff; letter-spacing: .5px;
}
.brand:hover { color: #fff; }
.main-nav { gap: 1.55rem; }
.nav-item {
  color: #e8eaee; font-weight: 400; font-size: .95rem; letter-spacing: .4px;
  position: relative; padding: .35rem 0;
}
.nav-item:hover, .nav-item.active { color: #7f6bf6; }
.nav-badge { position: relative; }
.nav-badge::after {
  content: attr(data-badge);
  position: absolute; top: -7px; right: -13px;
  background: #e63946; color: #fff; font-size: .6rem; font-weight: 700;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.btn-cta {
  background: var(--grad-soft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 20px rgba(90, 110, 230, .35);
}

.nav-burger {
  background: transparent; border: 0; width: 40px; height: 34px;
  display: inline-flex; flex-direction: column; justify-content: space-between; padding: 6px 4px;
}
.nav-burger span { height: 2px; background: #fff; border-radius: 2px; display: block; }
/* Burger schon unter 1440 px, nicht erst unter Bootstraps xl-Grenze (1200):
   Zwischen 1200 und ~1430 px bricht „Erfolgsgespräch vereinbaren“ neben der
   vollen Navigation in die zweite Zeile (gemessen: einzeilig bei 1440,
   zweizeilig bei 1420). Das !important ist nötig, weil Bootstraps d-xl-*
   selbst mit !important arbeitet – gleiche Spezifität, diese Datei lädt
   später und gewinnt. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .main-nav { display: none !important; }
  .nav-burger { display: inline-flex !important; }
}

/* Mega-Menü */
/* Nur Desktop: Der Auslöser (DIGITAL. mit Hover) existiert erst ab xl – unter
   1200 px übernimmt das Burger-Menü. Ohne dieses display:none bleibt das
   unsichtbare Menü im Layout und sein breitestes Kind (Domain-Formular)
   erzeugt unter 330 px einen horizontalen Scrollbalken (gemessen: 9 px). */
@media (max-width: 1199px) { .mega-menu { display: none; } }
.mega-menu {
  position: absolute; top: 100%;
  left: max(1rem, calc(var(--rand-links) - 2.6rem));
  right: max(1rem, calc(var(--rand-rechts) - 2.6rem));
  background: rgba(13, 12, 20, .55);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  backdrop-filter: blur(26px) saturate(1.35);
  border: 0;
  border-radius: 14px;
  margin: 0;
  padding: 2.4rem 2.6rem 2.2rem;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .28s, transform .28s, visibility .28s;
  box-shadow: 0 40px 80px rgba(0,0,0,.6);
}
/* Liquid-Glass-Rand: schimmernder Verlaufs-Ring */
.mega-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(125deg,
    rgba(255,255,255,.55) 0%, rgba(139,92,246,.45) 22%,
    rgba(255,255,255,.07) 46%, rgba(77,195,247,.4) 72%,
    rgba(255,255,255,.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.mega-menu .container-xl {
  margin: 0; width: 100%; max-width: none; padding: 0;
}
.mega-menu.open { opacity: 1; visibility: visible; transform: translateY(4px); }
.mega-head { color: #fff; font-weight: 700; font-size: 1.02rem; margin-bottom: .7rem; }
.mega-menu a:not(.mega-card) {
  display: block; color: #cfd4da; padding: .28rem 0; font-size: .95rem;
}
.mega-menu a:not(.mega-card):hover { color: #7f6bf6; }
.mega-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; min-height: 240px; border-radius: 14px; padding: 1.1rem;
  background-size: cover; background-position: center; overflow: hidden;
}
.mega-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(120, 40, 200, .55), rgba(20, 18, 40, .82));
}
.mega-card > * { position: relative; }
.mega-card-title { color: #fff; font-size: 1.5rem; font-weight: 400; margin-top: auto; }
.mega-card-ext { position: absolute; right: 1rem; top: 1.1rem; width: 26px; filter: invert(1); }
.mega-pioneer { color: #fff; font-size: 1.7rem; font-weight: 700; margin: 0; }
.mega-pioneer-sub { color: #b9bfcb; font-size: .92rem; margin-top: .5rem; }
.mega-domain { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.4rem; }
.mega-domain-label { color: #fff; font-weight: 400; margin-bottom: .5rem; }
.domain-form { display: flex; background: #fff; border-radius: 10px; padding: .35rem; }
.domain-form input {
  flex: 1; border: 0; outline: 0; padding: .55rem .9rem; font-family: var(--font); font-size: .95rem;
}
.domain-form .btn-grad { padding: .55rem 1.2rem; box-shadow: none; }

/* Mobile Menü. Unter der Navigation: Telefonnummer, Social-Profile und
   Sprachauswahl – die Topbar zeigt unter 1200 px nur die Schnellaktionen. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 2000; background: rgba(10, 10, 16, .98);
  display: flex; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .3s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
/* margin: auto statt Flex-Zentrierung: Wird der Inhalt höher als der
   Bildschirm, bleibt er scrollbar – zentrierter Flex schnitte oben ab. */
.mobile-menu-innen {
  margin: auto; padding: 3.5rem 1.5rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.3rem;
  text-align: center;
}
.mobile-menu-schliessen {
  position: fixed; top: .9rem; right: .9rem; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06);
  display: grid; place-items: center;
}
.mobile-menu-schliessen img { width: 16px; height: 16px; filter: invert(1); }
.mobile-menu nav { gap: 1rem; text-align: center; }
.mobile-menu nav a { color: #fff; font-size: 1.3rem; font-weight: 400; }
.mobile-menu nav a.active { color: #7f6bf6; }

.mm-kontakt {
  margin-top: .4rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  min-width: min(74vw, 300px);
}
.mm-phone {
  display: inline-flex; align-items: center; gap: .6rem;
  color: #fff; font-size: 1.05rem;
}
.mm-phone:hover { color: #9ccdf2; }
.mm-phone img { width: 20px; height: 20px; filter: invert(1); opacity: .9; }
.mm-status { margin: .3rem 0 0; font-size: .78rem; }

.mm-socials { display: flex; justify-content: center; }
.mobile-menu .lang-pill { margin-top: .2rem; }

/* ════════════════ HERO ════════════════ */
/* Freifläche rechts: Fenster in der Breite des früheren Balkens,
   das durch alle Ebenen hindurch den Galaxis-Parallax zeigt */
body::after {
  content: ''; position: fixed; top: 0; right: 0; bottom: 0; width: 16px;
  background-image: url('../img/galaxy.webp');
  background-attachment: fixed;
  background-repeat: repeat-x;
  background-size: auto 100vh;
  background-position: var(--galaxy-x, 0px) top;
  z-index: 3000; pointer-events: none;
}
/* Weg, sobald das Burger-Menü erscheint (unter 1440 px, siehe .nav-burger):
   Der Streifen gehört zur Desktop-Ansicht mit voller Navigation. */
@media (max-width: 1439.98px) {
  body::after { display: none; }
}

.hero {
  background: var(--grad-dark) fixed;
  color: #fff;
  position: relative;
  padding: 2.2rem 0 0;
  overflow: hidden;
}
.hero-bgwords {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: .4rem; padding-left: .5rem;
  pointer-events: none; user-select: none;
}
.hero-bgwords span {
  font-weight: 700;
  font-size: clamp(3rem, 7.5vw, 6.2rem);
  line-height: .95;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.055);
  white-space: nowrap;
}
.hero .container-xl { z-index: 2; }

.hero-content { padding-bottom: 1rem; }
.hero-quote { margin-bottom: .8rem; }
.hero-kicker {
  font-weight: 400; font-size: 1.35rem; margin-bottom: 1.3rem;
  background: linear-gradient(90deg, #9d4ee8 0%, #6f97e8 55%, #4dc3f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
.hero-title { font-size: clamp(1.5rem, 2.05vw, 2.15rem); line-height: 1.38; }
.hero-title .fw-light { font-weight: 300; }
@media (min-width: 1200px) { .nowrap-xl { white-space: nowrap; } }
.hero-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.5rem 0 1.8rem; }
/* Tag-Pillen: <a> wenn eine passende Seite existiert (includes/tags.php),
   sonst <span> – beide sehen gleich aus, Links heben sich beim Zeigen ab. */
.hero-tags span, .hero-tags a {
  display: inline-flex; align-items: center;
  background: #35353c; border-radius: 30px;
  font-size: .75rem; letter-spacing: .6px; text-transform: uppercase;
  padding: .42rem .9rem .26rem; color: #dfe2e8; line-height: 1; font-weight: 400;
}
.hero-tags a { transition: background .2s, color .2s; }
.hero-tags a:hover { background: #4a4a55; color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-partnerbadges {
  margin-top: 1.7rem; display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(.8rem, 1.2vw, 1.4rem);
}
/* OMR-Badges: 1:1 die Original-SVG-Dateien */
.hero-partnerbadges .hb-omr { height: clamp(68px, 6.4vw, 90px); width: auto; }
.hero-partnerbadges .hb-google { height: clamp(54px, 5vw, 70px); width: auto; display: block; }
.hero-partnerbadges .hb-ts { height: clamp(52px, 4.8vw, 66px); width: auto; }

.hero-visual { position: relative; }
.hero-hashtag {
  position: absolute; left: clamp(-44px, -2.3vw, -24px); bottom: 40px; z-index: 3;
  font-weight: 700; font-size: clamp(2.2rem, 2.9vw, 3.4rem);
  background: linear-gradient(0deg, #a21ccb 0%, #7b5ce4 50%, #4dc3f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.hero-image-wrap {
  position: relative;
  padding-left: clamp(70px, 7.5vw, 118px);
  display: flex; justify-content: flex-end;
}
.hero-woman {
  width: 100%; border-radius: 18px 18px 0 0; display: block;
  height: clamp(400px, 56vh, 620px);
  object-fit: cover; object-position: 72% center;
}
.hero-phone {
  position: absolute; left: 0; bottom: -14px; z-index: 2;
  width: clamp(165px, 11.5vw, 222px);
  border-radius: clamp(26px, 2.2vw, 36px);
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
.hero-phone video {
  position: absolute; inset: 1.6% 3.4%; width: 93.2%; height: 96.8%;
  object-fit: cover; border-radius: 11%/5.5%;
}
.hero-phone-frame { position: relative; width: 100%; }
.hero-tuev {
  position: absolute; right: -8px; bottom: 30px; z-index: 3;
  width: clamp(170px, 12.5vw, 240px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}

.hero-trust { text-align: center; padding: 1.3rem 0 .6rem; }
.trust-line { font-size: 1.05rem; color: #e6e9ee; margin-bottom: .2rem; }
.trust-stars { color: #f5b301; font-size: .95rem; }
.trust-stars a { color: #b9bfcb; font-size: .8rem; text-decoration: underline; }

/* Logo-Marquee */
.logo-marquee {
  overflow: hidden; position: relative; padding: 1.1rem 0 2rem;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex; align-items: center; gap: 4.5rem; width: max-content;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-track img {
  height: 52px; width: auto; max-width: 190px; object-fit: contain;
  filter: grayscale(1) brightness(4) contrast(.7); opacity: .55;
  transition: opacity .25s, filter .25s;
}
.logo-track img:hover { opacity: 1; filter: grayscale(0) brightness(1); }
/* Zentriert über margin-left, NICHT über translateX(-50%): Die floaty-
   Animation setzt transform auf translateY und überschreibt damit jedes
   translateX – die Maus stand dadurch um ihre halbe Breite (11px) zu weit
   rechts. Bei geänderter Icon-Breite den Wert mitziehen. */
.hero-mouse {
  position: absolute; bottom: 14px; left: 50%; margin-left: -11px;
  opacity: .55; animation: floaty 2.6s infinite;
  transition: opacity .35s;
}
/* Sobald gescrollt wird, hat der Hinweis seinen Zweck erfüllt – main.js
   setzt die Klasse ab 30 px Scrollweg (alle Seiten, alle Bildschirmgrößen). */
.hero-mouse.ist-verborgen { opacity: 0; pointer-events: none; }
.hero-mouse img { width: 22px; filter: invert(1); }

/* Smartphone: beide Hero-Knöpfe nebeneinander. Gemessen bei 375 px:
   Standardgröße ergibt 195,6 + 178,3 + 16 = 390 px bei 338 px Platz – erst ab
   dieser Verkleinerung passen beide in eine Zeile, auch auf 360-px-Geräten.
   Nur die Skalierung der Knöpfe, sonst nichts (Kundenvorgabe 13.08.2026). */
@media (max-width: 575.98px) {
  .hero-actions { gap: .5rem; }
  .hero-actions .btn-grad, .hero-actions .btn-outline {
    padding: .6rem .7rem; font-size: .84rem;
  }
}

/* Kompakte Hero-Stufe für niedrige Bildschirme (Laptops):
   Trust-Zeile + Scroll-Indikator bleiben above the fold */
@media (min-width: 992px) and (max-height: 840px) {
  .hero { padding-top: 1.1rem; }
  .hero-quote { width: 40px; margin-bottom: .5rem; }
  .hero-kicker { font-size: 1.15rem; margin-bottom: .9rem; }
  .hero-title { font-size: clamp(1.4rem, 1.85vw, 1.9rem); }
  .hero-tags { margin: 1.1rem 0 1.3rem; }
  .hero-actions .btn-grad, .hero-actions .btn-outline { padding: .62rem 1.3rem; }
  .hero-partnerbadges { margin-top: 1.1rem; }
  .hero-partnerbadges .hb-omr { height: 66px; }
  .hero-partnerbadges .hb-google { height: 52px; }
  .hero-partnerbadges .hb-ts { height: 42px; }
  .hero-woman { height: clamp(360px, 52vh, 520px); }
  .hero-phone { width: clamp(160px, 11.5vw, 215px); bottom: -6px; }
  .hero-tuev { width: clamp(150px, 11vw, 200px); }
  .hero-hashtag { font-size: clamp(2rem, 2.5vw, 2.8rem); }
  .hero-trust { padding: .8rem 0 .3rem; }
  .logo-marquee { padding: .6rem 0 1.5rem; }
  .logo-track img, .logo-duo img { height: 42px; }
  .hero-mouse { bottom: 6px; }
}

/* Sehr niedrige Bildschirme: noch kompakter, damit Scroll-Indikator sichtbar bleibt */
@media (min-width: 992px) and (max-height: 768px) {
  .hero { padding-top: .4rem; }
  .hero-quote { width: 30px; margin-bottom: .3rem; }
  .hero-kicker { font-size: 1rem; margin-bottom: .6rem; }
  .hero-title { font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
  .hero-tags { margin: .8rem 0 1rem; }
  .hero-tags span, .hero-tags a { font-size: .68rem; }
  .hero-actions .btn-grad, .hero-actions .btn-outline { padding: .5rem 1.1rem; font-size: .88rem; }
  .hero-partnerbadges { margin-top: .8rem; }
  .hero-partnerbadges .hb-omr { height: 52px; }
  .hero-partnerbadges .hb-google { height: 42px; }
  .hero-partnerbadges .hb-ts { height: 34px; }
  .hero-woman { height: clamp(280px, 44vh, 420px); }
  .hero-phone { width: clamp(130px, 9.5vw, 175px); }
  .hero-tuev { width: clamp(120px, 9vw, 160px); }
  .hero-hashtag { font-size: clamp(1.6rem, 2vw, 2.2rem); }
  .hero-trust { padding: .5rem 0 .1rem; }
  .trust-line { font-size: .9rem; }
  .logo-marquee { padding: .4rem 0 1.1rem; }
  .logo-track img, .logo-duo img { height: 34px; }
  .hero-mouse { bottom: 4px; }
}

/* ════════════════ SYSTEM / FUNNEL ════════════════ */
.section-system { padding: 10rem 0 4rem; background: #fff; }
/* Headline-Größe so, dass die Zeilen wie im Layout umbrechen */
.system-headline { font-size: clamp(1.55rem, 2.05vw, 2.05rem); font-weight: 400; }
/* Die Markierung setzt ihre Schriftfarbe selbst, statt sie zu erben: Der
   Fliederhintergrund ist immer hell, geerbtes Weiß ergäbe 1,3:1. Mit --ink
   sind es 12:1 – unabhängig davon, wie die Überschrift ihre Farbe bekommt
   (.text-white, ein Abschnitts-Override oder gar nichts). */
mark.mark-purple, .handwritten-line mark, .quote-highlight mark {
  background: #ecdcf9; color: var(--ink); padding: .05em .18em; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.feature-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.feature-list li { display: flex; gap: 1.1rem; align-items: flex-start; font-weight: 400; }
.fl-icon {
  flex: 0 0 46px; height: 42px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.fl-icon::before {
  content: ''; position: absolute; left: -2px; top: 12px;
  width: 28px; height: 24px; border-radius: 12px; background: #e4d6f8;
}
.fl-icon img { position: relative; width: 30px; height: 30px; margin-left: 12px; }

.funnel-wrap { position: relative; text-align: center; padding: 3.5rem 0 1rem; }
.funnel-svg { width: min(330px, 70%); }
.funnel-avatars { position: absolute; top: 0; left: 50%; transform: translateX(-54%); width: 340px; height: 200px; z-index: 2; }
.funnel-avatars img {
  position: absolute; width: 62px; height: 62px; border-radius: 50%;
  animation: floaty 4s ease-in-out infinite; animation-delay: var(--d);
  will-change: transform;
}
.funnel-avatars img:nth-child(1) { left: 52px; top: 22px; }
.funnel-avatars img:nth-child(2) { left: 140px; top: 0; }
.funnel-avatars img:nth-child(3) { left: 226px; top: 26px; }
.funnel-avatars img:nth-child(4) { left: 122px; top: 66px; }
.funnel-avatars img:nth-child(5) { left: 42px; top: 96px; }
.funnel-avatars img:nth-child(6) { left: 204px; top: 92px; }
.funnel-avatars img:nth-child(7) { left: 128px; top: 138px; }
.funnel-labels {
  list-style: none; margin: 0; padding: 0;
  position: absolute; right: 0; top: 16%; height: 64%;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: right; font-weight: 400; color: #2a3040;
}
.funnel-result { margin-top: .8rem; display: flex; align-items: center; justify-content: center; gap: .8rem; color: #2a3040; }
.handwritten {
  font-family: 'Bradley Hand', 'Segoe Print', cursive;
  font-size: 1.35rem; letter-spacing: .5px;
}
.funnel-customer {
  width: 74px; height: 74px; border-radius: 50%;
  /* rollt von links an seine Position, sobald der Pfeil sichtbar wird */
  transform: translateX(-90px) rotate(-220deg);
  transition: transform 1.1s cubic-bezier(.34, 1.3, .5, 1);
}
.funnel-result.rolled .funnel-customer { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .funnel-customer { transform: none; transition: none; }
}

/* ════════════════ ONLINE-CHECK ════════════════ */
.section-check { padding: 3rem 0 5.5rem; border-bottom: 1px solid #e9e9ef; background: #fff; }
.handwritten-line { font-family: 'Bradley Hand', 'Segoe Print', cursive; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; }
.check-features { font-size: 1.15rem; color: #2a3040; }
.check-form { max-width: 1350px; margin: 2.6rem auto 0; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; }
.check-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; gap: 1.6rem;
}
.check-grid input {
  border: 1px solid #d6d9e2; border-radius: 8px; padding: 1rem 1.2rem;
  font-family: var(--font); font-size: 1rem; outline: 0; transition: border-color .2s, box-shadow .2s;
}
.check-grid input:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(90, 86, 239, .12); }
.btn-checkstart {
  position: relative;
  background: var(--indigo); color: #fff; flex-direction: column; gap: 0; line-height: 1.25;
  box-shadow: 0 10px 30px rgba(90, 86, 239, .35);
}
.btn-checkstart:hover { background: #4a46e0; transform: translateY(-2px); }
.btn-checkstart small { font-weight: 300; font-size: .8rem; opacity: .85; }
.check-note { color: #3d4457; margin-top: 1.6rem; font-size: 1.02rem; }
.form-feedback { margin: 1rem 0 0; text-align: center; font-weight: 400; min-height: 1.4em; }
.form-feedback.ok { color: #1d9e50; }
.form-feedback.err { color: #d43c3c; }

/* ════════════════ LEISTUNGEN / DARK ════════════════ */
.section-services { background: var(--grad-dark) fixed; padding: 5.5rem 0 4rem; color: #fff; }
.services-hint { color: #b9bfcb; font-size: .95rem; text-align: right; margin: 0; }
.slider-outer { position: relative; margin-top: 2rem; padding-right: 130px; }
.card-slider {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
  /* Luft für Hover-Lift + Glow, ohne das Layout zu verschieben */
  padding: 30px 0 44px;
  margin: -30px 0 -44px;
  /* Übergang ins Schwarz am rechten Rand: signalisiert "hier geht's weiter" */
  mask-image: linear-gradient(90deg, #000 78%, rgba(0,0,0,.25) 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 78%, rgba(0,0,0,.25) 94%, transparent 100%);
}
.card-slider::-webkit-scrollbar { display: none; }

.service-card {
  position: relative;
  flex: 0 0 300px; min-height: 420px; border-radius: 16px; padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(90, 170, 240, .75), transparent 55%),
    linear-gradient(160deg, #b13be0 0%, #7b52e0 55%, #4a8fe0 100%);
  transition: transform .3s, box-shadow .3s;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(120, 70, 220, .4); }
.service-card .pill-dark { position: absolute; top: 1.2rem; left: 1.2rem; }
.service-card-title { color: #fff; font-size: 1.75rem; font-weight: 400; }

.product-card {
  flex: 0 0 300px; min-height: 380px; border-radius: 16px; padding: 1.3rem;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
  background-size: cover; background-position: center; overflow: hidden;
}
.product-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(90, 60, 190, .35) 0%, rgba(20, 16, 40, .78) 100%);
  transition: background .3s;
}
.product-card:hover::before { background: linear-gradient(200deg, rgba(120, 60, 220, .5), rgba(20, 16, 40, .85)); }
.product-card > * { position: relative; }
.product-card .pill-dark { position: absolute; top: 1.2rem; left: 1.2rem; }
.product-ext { position: absolute !important; top: 1.3rem; right: 1.2rem; width: 28px; filter: invert(1); }
.product-card-title { color: #fff; font-size: 1.7rem; font-weight: 400; margin-top: auto; }
.product-card, .service-card { scroll-snap-align: start; }

.slider-nav {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
}
.slider-arrow {
  background: transparent; border: 0; color: #fff; padding: .4rem;
  transition: transform .25s, color .25s;
}
.slider-arrow:hover { transform: translateX(6px); color: #9d7bf5; }
.slider-label { color: #fff; font-weight: 700; font-size: 1.4rem; text-decoration: underline; text-underline-offset: 6px; }
/* Seit 15.08.2026 ein Link auf die Gesamtübersicht (leistungen.php) –
   vorher ein <span> ohne Ziel. Gleiche Einfärbung wie der Pfeil daneben. */
.slider-label:hover { color: #9d7bf5; }

/* Passen alle Karten nebeneinander auf den Schirm, setzt main.js diese Klasse:
   dann entfällt die Navigation samt reserviertem Platz – und der Maskenverlauf
   am rechten Rand, der ja nur "hier geht es weiter" signalisieren soll. */
.slider-outer--passt { padding-right: 0; }
.slider-outer--passt .slider-nav { display: none; }
.slider-outer--passt .card-slider { mask-image: none; -webkit-mask-image: none; }

/* Cases */
.cases-head { margin: 5rem 0 2.5rem; }
.case-row {
  position: relative; min-height: 640px; margin-top: 2px;
  display: flex; align-items: flex-end;
  background: #0b0d11; overflow: hidden;
}
/* Bild in voller Breite, exakt wie im Layout */
.case-row::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--case-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform .6s ease;
}
.case-row:hover::after { transform: scale(1.02); }
/* Abdunklung wie im Layout: links stärker für den Text, rechts moderat */
.case-row::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8, 10, 14, .62) 0%, rgba(8, 10, 14, .42) 45%, rgba(8, 10, 14, .3) 100%);
}
.case-row .container-xl { position: relative; z-index: 2; }
.case-row .container-xl { position: relative; }
.case-row-content { max-width: 640px; padding: 3.2rem 0; }
.case-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.case-tags span, .case-tags a {
  display: inline-flex; align-items: center;
  background: #35353c; color: #dfe2e8; border-radius: 30px;
  font-size: .75rem; letter-spacing: .6px; text-transform: uppercase;
  padding: .42rem .9rem .26rem; line-height: 1; font-weight: 400;
}
.case-tags a { transition: background .2s, color .2s; }
.case-tags a:hover { background: #4a4a55; color: #fff; }
.case-row-content h4, .case-card h4 { color: #fff; font-size: 1.65rem; margin-bottom: .7rem; }
.case-row-content p, .case-card p { color: #c3c9d4; max-width: 620px; }
.case-links { display: flex; gap: 2.2rem; margin-top: 1.6rem; }
.case-links a { color: #fff; font-weight: 400; }
.case-links a:hover { color: #9d7bf5; }
.case-links img { width: 13px; margin-left: .3rem; filter: invert(1); }

.case-grid { margin-top: 4.5rem; }
.case-card {
  background: #232630; border-radius: 16px; padding: 1.8rem; height: 100%;
  transition: transform .3s, box-shadow .3s;
}
.case-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0,0,0,.5); }
.case-card-media {
  background: #695a71; border-radius: 14px; padding: 1.6rem; margin-bottom: 1.6rem;
  overflow: hidden;
}
.case-card-media img {
  width: 100%; height: 320px; object-fit: cover; object-position: top center;
  border-radius: 6px; display: block;
}

/* ════════════════ ZITAT ════════════════ */
.section-quote { background: #fff; padding: 6.5rem 0; }
@media (min-width: 1200px) {
  /* Großzügiger Abstand zwischen Text links und Video rechts.
     Erst ab 1200 px: darunter hat .container-xl nur die schmale
     Bootstrap-Polsterung, und die negativen Zeilenränder von 7rem
     würden die Seite seitlich überstehen lassen. */
  .section-quote .row { --bs-gutter-x: 7rem; }
}
.quote-kicker { color: #9aa1b2; margin-bottom: 1.6rem; }
/* Gemeinsamer Stil für Sektions-Headlines auf hellen Flächen (Referenz: Marc-Mathieu-Zitat) */
.quote-headline, .section-headline { font-size: clamp(1.55rem, 2.05vw, 2.05rem); font-weight: 400; color: var(--ink); line-height: 1.4; }
.hashtag-pill {
  display: inline-block; background: #f0f1f5; color: #3d4457;
  font-size: .8rem; letter-spacing: 1px; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 4px; margin-top: 1.4rem;
}
.video-facade {
  position: relative; border-radius: 12px; overflow: hidden; cursor: pointer;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.video-facade img { width: 100%; display: block; }
.video-facade video { width: 100%; display: block; }
.play-btn {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.92);
  transition: transform .25s;
}
.play-btn::after {
  content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
  border-left: 20px solid #16181e; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.video-facade:hover .play-btn { transform: scale(1.1); }
/* Optik gem. Entwurf: kompakter Text, Autor mit rundem Bild, Button links darunter */
.quote-highlight { font-size: .98rem; line-height: 1.75; }
.quote-author { display: flex; align-items: center; gap: .9rem; margin-top: 1.9rem; }
.quote-author img { width: 60px; height: 60px; object-fit: contain; }
.quote-author strong { font-size: 1.05rem; color: #1d2333; }
.quote-author span { font-size: .88rem; color: #5b6373; }
.quote-cta { margin-top: 1.9rem; }

/* ════════════════ BADGES (durchlaufender Trust-Slider) ════════════════ */
.section-badges {
  background: var(--light); padding: 3.2rem 0; position: relative;
  display: flex; align-items: center; overflow: hidden;
}
.badges-marquee {
  width: 100%; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.badges-track {
  display: flex; width: max-content;
  animation: marquee-right 42s linear infinite;
}
.badges-marquee:hover .badges-track { animation-play-state: paused; }
/* von links nach rechts */
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.badges-set { display: flex; align-items: center; gap: 4.5rem; padding-right: 4.5rem; }
.badges-set img { height: 92px; width: auto; object-fit: contain; }
.badges-set .bm-dap { height: 42px; }
@media (prefers-reduced-motion: reduce) { .badges-track { animation: none; } }

/* ════════════════ TV-SENDER ════════════════ */
.section-sender { background: var(--navy); color: #fff; padding: 6rem 0; position: relative; overflow: hidden; }
/* Kein harter Absatz zwischen zwei Schwarztönen: Der Abschnitt trägt zusätzlich
   denselben fixierten Verlauf wie das Personally-Modul darüber. Weil beide
   Ebenen viewportbezogen sind, stimmt die Farbe an der Nahtstelle bei jeder
   Scrollposition überein; das Navy des Sendermoduls blendet erst darüber ein.
   Nur auf atv-banner-grosskunden.php – auf index.php und atv-banner-kmu.php
   steht ein helles bzw. anderes Modul darüber. */
.section-sender--fluss {
  background:
    linear-gradient(to bottom, rgba(30,27,44,0) 0, var(--navy) 260px),
    var(--grad-dark) fixed;
}
.hero-bgwords--sub span { -webkit-text-stroke-color: rgba(255,255,255,.045); }
.sender-text { color: #d4d7e2; max-width: 1050px; margin: 1.4rem auto; font-size: 1.08rem; }
.sender-grid {
  /* minmax(0,1fr) statt 1fr – PFLICHT, auch in den Media-Queries unten:
     1fr heißt minmax(auto,1fr), und iPhone-WebKit setzt als auto-Minimum
     die natürliche Breite der Logo-Bilder. Die Spalten wurden dadurch auf
     dem iPhone breiter als der Bildschirm (Karte 3 unsichtbar rechts
     draußen); Chrome schrumpft die Bilder stillschweigend mit. */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem;
  max-width: 1300px; margin: 3.4rem auto 0;
}
.sender-card {
  background: #fff; border-radius: 10px; aspect-ratio: 3/2;
  position: relative;
  transition: transform .25s;
}
.sender-card:hover { transform: scale(1.05); }
/* Logo absolut einpassen: Hochformat-Logos (TELE 5, Deluxe Music …) bekamen
   sonst volle Kartenbreite und wuchsen ÜBER die 3/2-Karte hinaus – die Karte
   wuchs zirkulär mit (aspect-ratio ist nur ein Wunschmaß, der Inhalt gewinnt).
   Absolute Kinder können ihre Box nicht aufpumpen; object-fit passt jedes
   Logo-Format in die einheitliche Karte ein. */
.sender-card img {
  position: absolute; inset: 1rem;
  width: calc(100% - 2rem); height: calc(100% - 2rem);
  object-fit: contain;
}

/* ════════════════ FÜR MACHER ════════════════ */
.section-macher { padding: 6.5rem 0; background: #fff; }
.macher-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px; border-radius: 14px; overflow: hidden; padding: 1.8rem;
  background-size: cover; background-position: center;
}
.macher-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(185deg, rgba(10, 12, 18, 0) 40%, rgba(10, 12, 18, .78) 78%);
  transition: background .3s;
}
.macher-card:hover::before { background: linear-gradient(185deg, rgba(10,12,18,.15) 30%, rgba(10,12,18,.85)); }
.macher-title {
  position: relative; color: #fff; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 700;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
/* „Mehr erfahren“ erscheint erst beim Hover, der Titel rutscht dabei nach oben
   (Kundenwunsch 09.08.2026). Umgesetzt über die Höhe des Mehr-erfahren-Blocks:
   Im Ruhezustand ist er auf 0 zusammengeschoben, beim Hover wächst er auf seine
   Eigenhöhe – dadurch wandert der darüberliegende Titel exakt um diesen Betrag
   nach oben, ohne dass irgendwo ein Pixelwert doppelt gepflegt werden muss.
   Ausgelöst wird es auch bei :focus-visible, damit die Karte per Tastatur
   dasselbe zeigt. */
.macher-more {
  position: relative; color: #d9dde3; font-size: .9rem;
  display: flex; align-items: center; gap: .4rem;
  height: 0; margin-top: 0; opacity: 0; overflow: hidden;
  transform: translateY(6px);
  transition: height .3s ease, margin-top .3s ease, opacity .3s ease, transform .3s ease;
}
.macher-card:hover .macher-more,
.macher-card:focus-visible .macher-more {
  height: 1.4em; margin-top: .5rem; opacity: 1; transform: translateY(0);
}
/* Ohne Bewegungswunsch nur ein- und ausblenden, nicht schieben. */
@media (prefers-reduced-motion: reduce) {
  .macher-more { transition: opacity .2s ease; transform: none; }
  .macher-card:hover .macher-more,
  .macher-card:focus-visible .macher-more { transform: none; }
}
/* Auf Touch-Geräten gibt es kein Hover – dort bliebe „Mehr erfahren“ sonst
   dauerhaft unsichtbar. Deshalb dort von Anfang an eingeblendet. */
@media (hover: none) {
  .macher-more { height: 1.4em; margin-top: .5rem; opacity: 1; transform: none; }
}
.macher-more img { width: 12px; filter: invert(1); flex: 0 0 auto; }

/* ════════════════ VERGLEICH ════════════════ */
.section-vergleich { padding: 2rem 0 6.5rem; background: #fff; }
.vergleich-sub { letter-spacing: 2px; text-transform: uppercase; color: #3d4457; margin-top: 1rem; }
/* Überarbeitet 09.08.2026: Das Hellblau #cfe0f0 kam nirgends sonst im
   Designsystem vor (Überrest aus dem Entwurf) – jetzt der Systemton der hellen
   Panels. Die mps-Karte trug einen Verlauf, der nach hinten in ein helles Blau
   lief; weiße Schrift erreichte dort nur 3,2:1 und die grünen Häkchen 1,9:1.
   Das Blau ist deshalb tiefer gesetzt und der radiale Blauschleier entfallen –
   gemessen jetzt 6,7:1 für Text und 3,9:1 für die Häkchen. */
.vergleich-card {
  background: #f1f2f4; border: 1px solid #e6e8f0;
  border-radius: 14px; padding: 2.2rem; height: 100%;
}
.vergleich-card h3 { font-size: 1.7rem; margin-bottom: 1.5rem; }
.vergleich-card--mps {
  background: linear-gradient(150deg, #8a15c9 0%, #6b34c9 45%, #2f56b8 100%);
  border-color: transparent; color: #fff;
}
/* Kriterien-Zeile über jedem Punkt: dieselbe Reihenfolge in allen drei Karten,
   damit der Vergleich zeilenweise lesbar ist statt als drei getrennte Listen. */
.vergleich-krit {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  /* #6b7280 ergab auf #f1f2f4 nur 4,32:1 – bei 11 px Schrift zu wenig. */
  color: #5f6675; margin-bottom: .2rem;
}
.vergleich-card--mps .vergleich-krit { color: #d9c8ff; }
.x-list, .check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.x-list li, .check-list li { padding-left: 2rem; position: relative; font-weight: 400; }
.x-list li::before, .check-list li::before { position: absolute; left: 0; top: 1.05rem; font-weight: 700; }
.x-list li::before { content: '✕'; color: #c62f2f; }
.check-list li::before { content: '✓'; color: #4be08a; }
/* Der Abschluss nutzt .cms-fazit / .cms-fazit-link von premium-website.php.
   Die eigene Fassung war ein Duplikat mit inline-block + margin-top – dadurch
   saß der Link in der letzten Textzeile 10 px tiefer als der Text daneben und
   sah abgesetzt aus. Die Hausklasse stellt ihn per display:table auf eine
   eigene, zentrierte Zeile. */

/* ════════════════ ZIELE ════════════════ */
.section-ziele { background: var(--light); padding: 6rem 0; }
.ziele-accordion .accordion-item {
  border: 0; border-radius: 10px !important; margin-bottom: 1.3rem;
  box-shadow: 0 6px 22px rgba(20, 24, 40, .06); overflow: hidden;
}
.ziele-accordion .accordion-button {
  font-family: var(--font); font-weight: 700; font-size: 1.08rem; color: var(--ink);
  padding: 1.35rem 1.5rem; background: #fff; box-shadow: none;
}
.ziele-accordion .accordion-button:not(.collapsed) { color: var(--purple); }
.ziele-accordion .accordion-body { font-size: 1rem; color: #3d4457; }

.arrow-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.arrow-list li { padding-left: 2rem; position: relative; font-size: 1.05rem; }
.arrow-list li::before {
  content: '→'; position: absolute; left: 0; color: var(--indigo); font-weight: 700;
}
.ziele-note { margin-top: .8rem; font-size: .88rem; color: #3d4457; }

/* ════════════════ SPACE ════════════════ */
.section-space {
  background: transparent;
  position: relative; padding: 6.5rem 0; color: #fff;
  /* Die Zeile im Inneren läuft mit g-5 um 12 px über die Container-Polsterung
     hinaus und machte das Dokument breiter als das Fenster. clip fängt das an
     der Abschnittskante ab; die Pfeile bleiben sichtbar, sie liegen innerhalb. */
  overflow-x: clip;
}
.section-space .container-xl { position: relative; }
.space-card {
  background: rgba(13, 12, 20, .55);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: clamp(1.6rem, 4vw, 3.2rem); margin-top: 3rem;
  box-shadow: 0 40px 90px rgba(0, 0, 30, .5);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.space-quote { font-size: clamp(1.5rem, 2.7vw, 2.15rem); font-weight: 700; line-height: 1.4; text-align: center; }
.space-quote-author { text-align: center; color: #c9cde4; font-size: .95rem; margin: 1rem 0 2rem; }
.space-video { max-width: 600px; margin: 0 auto; }
.space-text p { color: #dcdff0; }
.space-link { color: #4dc3f7; font-weight: 700; }
.space-quote-icon { opacity: .9; }

/* ════════════════ REVIEWS ════════════════ */
.section-reviews { padding: 6.5rem 0; background: #fff; }
.reviews-slider-wrap { position: relative; margin-top: 3.5rem; }
.reviews-slider {
  display: flex; gap: 1.1rem; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; padding: 0 max(2vw, calc((100vw - 1600px) / 2));
}
.reviews-slider::-webkit-scrollbar { display: none; }
/* Bewertungs-Karten: modern, weich gerundet, passend zur Farbwelt */
.review-card {
  flex: 0 0 380px; color: #fff; padding: 1.8rem;
  background: linear-gradient(160deg, #191b23 0%, #101116 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 18px;
  display: flex; flex-direction: column; min-height: 300px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.review-card:hover {
  transform: translateY(-6px);
  border-color: rgba(150, 110, 240, .5);
  box-shadow: 0 22px 46px rgba(90, 50, 180, .18);
}
.review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.review-author { font-size: 1.08rem; }
.review-stars { color: #f5b301; font-size: 1.05rem; letter-spacing: 2.5px; margin-top: .25rem; }
.review-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #fff; }
.review-text { margin-top: 1.1rem; color: #c9cdd8; font-size: .95rem; line-height: 1.7; }
.review-foot { margin-top: auto; padding-top: 1.1rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.07); }
.review-hint { color: #7d8494; font-size: .76rem; }
.review-hint:hover { color: #b9bfcb; }
.review-foot .g-logo { width: 26px; height: 26px; }
.reviews-arrow {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(13, 12, 20, .55);
  border: 1px solid rgba(139, 92, 246, .65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.reviews-arrow:hover {
  background: rgba(139, 92, 246, .35);
  border-color: #b9a3ff;
  box-shadow: 0 0 18px rgba(139, 92, 246, .4);
}
.reviews-btns { margin-top: 3rem; display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }

/* ════════════════ BLICKFELD ════════════════ */
.section-blickfeld {
  background: var(--grad-dark) fixed; padding: 7rem 0; color: #cfd4da;
  position: relative; overflow: hidden;
}
.blickfeld-box { padding: 0; }
.blickfeld-box h2 { line-height: 1.25; }
.blickfeld-box p { color: #c3c9d4; max-width: 560px; }
/* Tablets rechtsbündig, direkt am Galaxis-Balken – immer vollständig sichtbar */
.blickfeld-media {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  max-width: 44vw; max-height: calc(100% - 70px);
  width: auto; height: auto; z-index: 1;
}
@media (min-width: 992px) {
  .section-blickfeld { min-height: 780px; display: flex; align-items: center; }
  .section-blickfeld .container-xl { width: 100%; }
}

/* ════════════════ PERSONALLY ════════════════ */
.section-personally { background: var(--grad-dark) fixed; padding: 6.5rem 0; color: #fff; }
.marcel-wrap { position: relative; display: inline-block; }
.marcel-img { width: min(490px, 96%); }
/* Zertifikate: beide gleich groß, das Google-Badge liegt vorn und überlappt
   das Meta-Badge leicht. Die 20-px-Verschiebung nach unten schafft Luft zum
   Gesicht; „+10 weitere“ und der Name rücken entsprechend mit. */
.marcel-badge-google {
  position: absolute; bottom: calc(13% - 20px); left: calc(38% + 20px); width: 23%;
  border-radius: 50%; background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.45); z-index: 2;
}
/* Meta-Overlay liegt exakt auf dem im Foto eingedruckten Badge */
.marcel-badge-meta {
  position: absolute; bottom: calc(13% - 20px); left: 62%; width: 23%;
  border-radius: 50%; background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.45); z-index: 1;
}
/* "+10 weitere" zentriert unter den beiden Badges */
.marcel-more {
  position: absolute; bottom: calc(4.5% - 20px); left: 61.5%; transform: translateX(-50%); z-index: 3;
  font-size: 1.15rem; color: #fff; white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.marcel-name { font-weight: 700; font-size: 1.25rem; margin-top: 2.7rem; }
.marcel-link { color: #cfd4da; text-decoration: underline; text-underline-offset: 4px; font-size: .92rem; }
.marcel-link:hover { color: #fff; }
/* Ohne Box, gem. Entwurf: Kicker in Cyan, große Headline, Fließtext */
.personally-kicker { color: #4dc3f7; font-size: clamp(1.25rem, 1.8vw, 1.7rem); font-weight: 300; margin-bottom: 2.2rem; }
.personally-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; }
.personally-text { color: #d4d7e0; margin-top: 1.5rem; max-width: 720px; line-height: 1.75; }

/* Fließtext in Weiß statt Hellgrau – Zusatzklasse, genutzt auf
   premium-website.php, social-media.php und atv-banner-grosskunden.php.
   Die Badge-Anordnung gilt inzwischen für alle Seiten mit diesem Modul
   und steht deshalb oben in den Grundregeln. */
.pw-personally .personally-text { color: #fff; }
.btn-whatsapp .ico-inline { filter: invert(1); width: 18px; height: 18px; }
.phone-block { margin-left: .8rem; }
.phone-number-lg { color: #fff; font-weight: 400; font-size: 1.15rem; }

/* ════════════════ NEWSROOM ════════════════ */
.section-newsroom { padding: 6.5rem 0; background: #fff; }
.news-kicker { letter-spacing: 3px; text-transform: uppercase; color: #6b7280; font-size: .8rem; }
.news-title { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; color: #1b2337; }
.news-card { height: 100%; display: flex; flex-direction: column; }
.news-media { position: relative; border-radius: 10px; overflow: hidden; }
.news-media img { width: 100%; aspect-ratio: 16/10.5; object-fit: cover; transition: transform .4s; }
.news-card:hover .news-media img { transform: scale(1.05); }
.news-cats { position: absolute; top: 1rem; left: 1rem; display: flex; gap: .5rem; }
.news-cats span {
  background: rgba(255,255,255,.92); color: #1b2337; font-size: .78rem; font-weight: 400;
  padding: .3rem .8rem; border-radius: 5px;
}
.news-card h3 { font-size: 1.28rem; margin: 1.2rem 0; line-height: 1.45; color: #1b2337; }
.news-author { display: flex; gap: .8rem; align-items: center; margin-top: auto; }
.news-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.news-author strong { font-size: .92rem; color: #1b2337; }
.news-author span { font-size: .8rem; color: #6b7280; }

/* ════════════════ FOOTER ════════════════ */
.site-footer {
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(160, 20, 130, .55), transparent 60%),
    linear-gradient(100deg, #8f0e96 0%, #6d3fd1 45%, #2f9ad6 100%);
  color: #fff; padding: 5.5rem 0 2rem; position: relative;
  display: flex;
}
.site-footer .container-xl { display: flex; flex-direction: column; flex: 1; }
@media (min-width: 992px) {
  /* Footer füllt genau das Browserfenster – vollständig sichtbar, nie höher */
  .site-footer { min-height: 100svh; }
  .footer-bottom { margin-top: auto; }
}
.footer-siegel { position: absolute; right: 12px; top: -20px; width: 132px; }
.footer-headline { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; }
.footer-subline {
  /* octin-spraypaint kommt von Adobe Fonts und lädt erst nach Einwilligung
     (includes/header.php). Ersatz ist deshalb die Hausschrift – gesperrt sieht
     die Zeile dadurch gewollt aus statt kaputt; „Courier New" tat das nicht. */
  font-family: 'octin-spraypaint', var(--font); text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 2rem); letter-spacing: 2px; margin-top: .6rem;
}
.footer-links-main { padding-top: 1rem; }
.footer-links-main a {
  color: #fff; font-size: 1.7rem; font-weight: 400;
  text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px;
}
.footer-top { margin-bottom: 7rem; }
/* Zwei Standorte nebeneinander, ab Tablet zweispaltig */
.footer-standorte { display: grid; gap: 1.6rem 2.5rem; }
@media (min-width: 576px) {
  .footer-standorte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-address { line-height: 1.9; margin: 0; }
.footer-address a { color: #fff; }
.footer-socials { display: flex; gap: .6rem; justify-content: flex-start; }
.text-lg-end .footer-socials { justify-content: flex-end; }
.footer-claim { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 400; }
/* Drei Spalten: Copyright links, Zusatzmenü mittig, Rechtliches rechts.
   Die äußeren beiden gleich breit (1fr), damit die Mitte wirklich mittig
   steht und nicht zur längeren Seite kippt. */
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.25); margin-top: 3rem; padding-top: 1.4rem;
  font-size: .9rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem 1.5rem;
}
.footer-legal a { color: #fff; }
.footer-legal a:hover { text-decoration: underline; }
/* Trenner im CSS statt als „|" im Markup – Vorlesewerkzeuge lesen ihn dann
   nicht mit. Er hängt als ::after am VORHERGEHENDEN Eintrag, nicht als
   ::before am nächsten: Sonst steht der Strich nach einem Zeilenumbruch
   allein am Zeilenanfang („| Cookie-Einstellungen"). So endet die Zeile
   mit dem Strich, was den Fortgang richtig anzeigt. Das negative
   margin-right zieht ihn dicht an sein Wort heran, ohne die Lücke zum
   nächsten Eintrag zu verändern. */
.footer-legal-extra, .footer-legal-recht { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.footer-legal-extra > *:not(:last-child)::after,
.footer-legal-recht > *:not(:last-child)::after {
  content: '|'; color: rgba(255,255,255,.4); margin-left: .9rem; margin-right: -.45rem;
}
.footer-legal-extra { justify-content: center; }
.footer-legal-recht { justify-content: flex-end; }

@media (max-width: 991.98px) {
  /* Telefon und Tablet: die drei Gruppen untereinander, jede in eigener
     Zeile und linksbündig – nebeneinander brachen sie ineinander. */
  .footer-legal {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: .9rem;
  }
  .footer-legal-extra, .footer-legal-recht { justify-content: flex-start; }
}

/* ════════════════ AGENTUR-SEITE ════════════════ */
.agentur-hero { padding: 5rem 0 3rem; min-height: 62vh; display: flex; align-items: center; }
.agentur-hero .hero-kicker { justify-content: center; }
.agentur-title {
  font-size: clamp(1.5rem, 2.3vw, 2.3rem); line-height: 1.45; color: #fff;
  max-width: 1250px; margin: 1rem auto 0;
}
.agentur-sub { color: #c3c9d4; max-width: 1100px; margin: 1.6rem auto 0; }
.agentur-trust {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 2.2rem; color: #e6e9ee; font-size: .85rem; text-align: left;
}

.agentur-banner {
  position: relative; min-height: 827px; display: flex; align-items: flex-end;
  padding-bottom: 5.5rem;
  background-image: var(--banner-img); background-size: cover; background-position: center;
}
.agentur-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 14, .35), rgba(8, 10, 14, .05) 60%);
}
.agentur-banner .container-xl { position: relative; }
.agentur-banner h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.4; }

/* Journey / Timeline */
.section-journey { background: transparent; padding: 6.5rem 0 5rem; }
.section-journey .section-headline { color: #fff; }
.section-journey .journey-sub { color: #c3c9d4; font-weight: 400; }
.journey-sub { font-weight: 700; color: #1b2337; margin-top: .4rem; max-width: 720px; }
.journey-row { margin-top: 3.5rem; }
.journey-entry { border-left: 4px solid #e2e5ee; padding-left: 2.2rem; }
.journey-entry.active { border-left-color: #5a3fe8; }
.journey-year { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 700; color: #c7ccd9; line-height: 1; }
.journey-entry.active .journey-year { color: #5a3fe8; }
.journey-entry h3 { font-size: 1.5rem; color: #1b2337; margin: 1rem 0 .8rem; }
.journey-text { color: #4c5468; max-width: 500px; }
.journey-img { width: 100%; border-radius: 12px; aspect-ratio: 16/9.5; object-fit: cover; }

/* Yes we can */
.section-yeswecan { background: var(--grad-dark) fixed; color: #fff; padding: 7rem 0; overflow: hidden; }
.yes-kicker { color: #9d7bf5; font-size: 1.5rem; margin-bottom: 1.6rem; }
.yes-title { font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1.35; max-width: 820px; }
.yes-text { color: #c3c9d4; margin-top: 1.8rem; max-width: 760px; }
.yes-circles { position: relative; height: 790px; }
.yes-circle {
  position: absolute; border-radius: 50%; padding: 2px;
  background: linear-gradient(135deg, #8b3fd6, #4dc3f7);
  animation: floaty 5.5s ease-in-out infinite;
}
.yes-circle > span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%; background: #101318;
}
.yes-circle img { width: 38%; filter: invert(.75) sepia(.3) saturate(3) hue-rotate(200deg); }
/* Positionen in px (Design-Raster 620px), Containerhöhe 790px, damit yc-6 nicht abgeschnitten wird */
.yc-1 { width: 190px; height: 190px; left: 42%; top: 0; }
.yc-2 { width: 230px; height: 230px; left: 2%; top: 136px; animation-delay: .7s; }
.yc-3 { width: 120px; height: 120px; left: 55%; top: 205px; animation-delay: 1.2s; }
.yc-4 { width: 220px; height: 220px; left: 0; top: 384px; animation-delay: .4s; }
.yc-5 { width: 175px; height: 175px; left: 42%; top: 360px; animation-delay: 1.6s; }
.yc-6 { width: 200px; height: 200px; left: 20%; top: 589px; animation-delay: 1s; }
@media (max-width: 991.98px) { .yes-circles { display: none; } }

/* Team */
.section-team { color: #fff; }
.team-panel { background: var(--grad-dark) fixed; padding: 4.5rem 0; border-top: 1px solid rgba(255,255,255,.05); }
.team-panel--alt { background: rgba(14, 12, 20, .92); }
.team-img { width: min(460px, 92%); }
.team-img--photo { border-radius: 0; }
.team-kicker { color: #4dc3f7; font-size: 1.25rem; margin-bottom: 1.2rem; }
.team-title { font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.3; }
.team-text { color: #c3c9d4; margin-top: 1.4rem; max-width: 700px; }
/* Rechtsbündige Team-Panels: Textblock an der rechten Fluchtlinie ausrichten */
@media (min-width: 992px) { .text-lg-end .team-text { margin-left: auto; } }
.team-contact { margin-top: 1.8rem; color: #7d8494; }
.team-contact a { color: #9aa1b2; }
.team-contact a:hover { color: #fff; }
.team-contact span { color: #5a3fe8; margin: 0 .6rem; }

/* Office-Bild */
.agentur-office {
  min-height: 560px; background-image: var(--banner-img);
  background-size: cover; background-position: center;
}

/* Franklin-Zitat + Karriere-CTA */
.section-franklin { background: var(--grad-dark) fixed; color: #fff; padding: 6.5rem 0 0; }
.franklin-author {
  margin: 1.6rem 0 1.2rem; font-size: 1.3rem;
  background: linear-gradient(90deg, #9d4ee8, #4dc3f7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
.franklin-quote { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.5; max-width: 1250px; }
.franklin-cta { margin-top: 5rem; padding: 2.2rem 0; background: transparent; border-top: 1px solid rgba(255,255,255,.08); }
.franklin-cta p { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 700; color: #fff; }

/* Marken-Universum */
.section-brands { background: rgba(10, 12, 16, .55); color: #fff; padding: 4.5rem 0; }
.brands-head { font-weight: 700; margin-bottom: 3rem; }
.brands-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 4rem); }
.brands-row img { height: 74px; width: auto; }
.brands-divider { width: 1px; height: 64px; background: rgba(255,255,255,.25); }
.brand-word { font-size: 2rem; font-weight: 400; color: #fff; }
.brand-word--space { font-weight: 300; letter-spacing: 1px; }
.brand-word--space strong { font-weight: 700; }
@media (max-width: 767.98px) { .brands-divider { display: none; } }

/* Zahlen */
.section-numbers { background: #fff; padding: 6.5rem 0; }
.num-card {
  background: #f6f7f9; border: 1px solid #eceef3; border-radius: 12px;
  padding: 1.8rem; height: 100%;
}
.num-card--big { display: flex; flex-direction: column; }
.num-card--big .num-value { font-size: clamp(4rem, 8vw, 7.5rem); margin-top: auto; }
.num-icon { width: 34px; height: 34px; opacity: .35; margin-bottom: 2.2rem; }
.num-value { font-size: 2.2rem; font-weight: 700; color: #5a3fe8; line-height: 1.1; margin-bottom: .6rem; }
.num-card h3 { font-size: 1.15rem; color: #1b2337; margin-bottom: .6rem; }
.num-text { color: #6b7280; font-size: .92rem; margin: 0; }

/* Partner-Marken */
.section-partnerbrands { background: #f6f7f9; padding: 5.5rem 0; }
.section-partnerbrands .journey-sub { font-weight: 400; max-width: 820px; }
.partnerbrands-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 2rem; margin-top: 3.5rem;
}
.partnerbrands-row span { font-size: 1.45rem; font-weight: 700; color: #1b2337; }
.partnerbrands-row .pb-serif { font-family: Georgia, serif; }

/* ════════════════ STRATEGIE-SEITE ════════════════ */
.strategie-banner {
  position: relative; min-height: 515px; display: flex; align-items: flex-start;
  background-image: var(--banner-img); background-size: cover; background-position: center;
  padding-top: 1rem;
}
.strategie-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 14, .55), rgba(8, 10, 14, .1) 55%);
}
/* Helles Motiv (z. B. Content Creation, Account Betreuung): Der seitliche
   Verlauf allein bringt die weiße Headline dort nur auf 1,6:1 und die
   darüberliegende globale Breadcrumb sogar nur auf 1,3:1. Deshalb zusätzlich
   ein Verlauf von unten (Headline) und ein schmales Band oben (Breadcrumb) –
   beides gemessen über der jeweils hellsten Stelle des Motivs. */
.strategie-banner--hell::before {
  background:
    linear-gradient(0deg, rgba(8, 10, 14, .80) 0, rgba(8, 10, 14, .62) 20%,
                          rgba(8, 10, 14, .46) 38%, rgba(8, 10, 14, .15) 62%,
                          rgba(8, 10, 14, 0) 88%),
    linear-gradient(180deg, rgba(8, 10, 14, .68) 0, rgba(8, 10, 14, .62) 40px,
                            rgba(8, 10, 14, 0) 100px),
    linear-gradient(90deg, rgba(8, 10, 14, .55), rgba(8, 10, 14, .1) 55%);
}
.strategie-banner .container-xl { position: relative; }
.breadcrumb-line { color: #d9dde3; font-size: .9rem; }
.breadcrumb-line a { color: #d9dde3; }
.breadcrumb-line .bc-active { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb-line span { margin: 0 .3rem; }
.strategie-hero-title {
  color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.35;
  margin-top: 20.4rem; /* Abstand zum unteren Bildrand = Abstand Bild → "Strategie statt Standard." */
}

.strategie-intro { background: #fff; padding: 4rem 0 5rem; }
.intro-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--ink);
  border-bottom: 3px solid var(--ink); border-image: linear-gradient(90deg, var(--ink) 28px, transparent 28px) 1;
  display: inline-block; padding-bottom: .5rem;
}
.link-purple { color: #8a15c9; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.link-purple:hover { color: #6d0fa3; }
.experte-card { margin-top: -300px; position: relative; z-index: 3; }
.experte-img { width: min(420px, 90%); }
.experte-name { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: 1rem 0 0; }
.experte-role { font-size: 1.25rem; color: #2a3040; margin-bottom: 1.2rem; }
.experte-phone { margin-top: 1.2rem; }
.experte-phone a { color: var(--ink); font-weight: 400; font-size: 1.05rem; }
@media (max-width: 991.98px) { .experte-card { margin-top: 0; } }

/* Raketen-Video */
.strategie-video { background: #000; padding: 0; }
.video-stage { position: relative; max-width: 1700px; margin: 0 auto; }
.video-stage video { width: 100%; max-height: 720px; object-fit: cover; display: block; }
.video-stage p {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: clamp(1.3rem, 2.3vw, 2rem); margin: 0; text-align: center;
  padding: 0 1.5rem; text-shadow: 0 2px 18px rgba(0,0,0,.65); pointer-events: none;
}
.video-stage p strong { margin-left: .45em; }

/* Strategie-Karten */
.section-strategien { background: #fff; padding: 6.5rem 0 6rem; }
.strategie-card {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 270px; border-radius: 10px; padding: 1.6rem;
  background: linear-gradient(45deg, #8f10ad 0%, #7b53d4 55%, #4d9de0 100%);
  transition: transform .3s, box-shadow .3s;
}
.strategie-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(120, 40, 190, .35); }
.strategie-card-title { color: #fff; font-size: clamp(1.35rem, 1.8vw, 1.75rem); font-weight: 400; }
.strategie-card-more { display: flex; align-items: center; gap: .6rem; color: #fff; font-size: .95rem; }
.strategie-card-more img { width: 26px; filter: invert(1); }

/* Crossmedia */
.section-crossmedia { background: var(--grad-dark) fixed; color: #fff; padding: 6rem 0; }
.crossmedia-title { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 1.2rem 0 1.4rem; }
.crossmedia-text { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.6; max-width: 620px; margin-bottom: 2rem; }
.crossmedia-logos { display: block; margin-top: 3.5rem; max-width: 440px; width: 80%; }
.crossmedia-logo-row { display: flex; align-items: center; gap: 2.6rem; margin-top: 3.5rem; }
/* gleiche Breite statt gleicher Höhe – die Logos haben unterschiedliche Proportionen */
.crossmedia-logo-row img { width: 112px; height: auto; }
.crossmedia-browser { width: 100%; border-radius: 10px; }

/* Erste Schritte */
.section-schritte { background: #fff; padding: 6rem 0; }
.schritt-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 300px; border-radius: 12px; padding: 1.8rem;
  background: #e4e6ea; overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.schritt-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20, 24, 40, .12); }
.schritt-card--grad { background: linear-gradient(45deg, #8f10ad 0%, #7b53d4 55%, #4d9de0 100%); }
.schritt-title { font-size: 1.75rem; font-weight: 400; color: #1d2333; margin-bottom: .8rem; }
.schritt-card--grad .schritt-title { color: #fff; }
.schritt-text { color: #3d4457; max-width: 400px; }
.schritt-more { display: flex; align-items: center; gap: .6rem; margin-top: auto; color: #1d2333; font-weight: 400; }
.schritt-card--grad .schritt-more { color: #fff; }
.schritt-more img { width: 26px; }
.schritt-more img:not(.ico-dark) { filter: invert(1); }
.schritt-pdf {
  position: absolute; right: 1.2rem; bottom: 1rem; width: 120px; opacity: .25;
  transform: translateY(18%);
}
.schritt-caption { margin-top: 1rem; color: #1d2333; }
.schritt-caption span { color: #9aa1b2; }

/* Design thinking */
.section-designthinking {
  background: var(--grad-dark) fixed; color: #fff; padding: 7rem 0;
  position: relative; overflow: hidden;
}
.yes-circles--compact { height: 595px; }
.yes-circles--compact .yc-1 { width: 150px; height: 150px; left: 38%; top: 0; }
.yes-circles--compact .yc-2 { width: 200px; height: 200px; left: 4%; top: 67px; }
.yes-circles--compact .yc-3 { width: 115px; height: 115px; left: 48%; top: 168px; }
.yes-circles--compact .yc-4 { width: 175px; height: 175px; left: 0; top: 258px; }
.yes-circles--compact .yc-5 { width: 165px; height: 165px; left: 37%; top: 308px; }
.yes-circles--compact .yc-6 { width: 145px; height: 145px; left: 12%; top: 448px; }

/* Guiding Steps */
.section-steps { background: #f4f5f7; padding: 6.5rem 0; }
.guide-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2.2rem; }
.guide-steps li { display: flex; gap: 1.3rem; position: relative; }
.step-num {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: #d8dbe2; color: #6b7280; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.guide-steps li.active .step-num { background: #5a3fe8; color: #fff; }
.guide-steps li.active::before {
  content: ''; position: absolute; left: 21px; top: 52px; bottom: -30px;
  width: 3px; background: #5a3fe8; border-radius: 2px;
}
.guide-steps h3 { font-size: 1.3rem; color: #1b2337; margin: .5rem 0 .6rem; }
.guide-steps p { color: #4c5468; max-width: 480px; margin: 0; }
.steps-collage { width: 100%; border-radius: 14px; }

/* ════════════════ DIGITAL-SEITE ════════════════ */
.digital-hero { padding: 4rem 0 3.5rem; }
/* Einleitungstext unter der Hero-Headline in der leichten Schnittstärke:
   400 rendert im Hausfont den MEDIUM-Schnitt, 300 den Regular/Light.
   Kundenwunsch 07.08.2026 – gilt für alle Seiten mit diesem Kopfbereich. */
.digital-hero-sub { color: #fff; font-weight: 300; margin-top: 1.4rem; max-width: 640px; }
.digital-hero .hero-partnerbadges { margin-top: 2rem; }
.hb-shopify { height: clamp(34px, 3vw, 44px); width: auto; }
.digital-hero-visual { position: relative; max-width: 620px; margin: 0 auto; }
.digital-hero-img { width: 100%; border-radius: 16px; display: block; }
/* Freigestellte Hero-Grafik: kein Rahmen, kein Radius – die Karten sind Teil des Bildes */
.digital-hero-grafik { width: 100%; height: auto; display: block; }
/* Cards liegen exakt über den im Foto eingedruckten Karten (mit Puffer) */
.float-card {
  position: absolute; background: #fff; border-radius: 14px; padding: 1rem 1.2rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .35); color: #1b2337; font-size: .9rem;
  display: flex; flex-direction: column; justify-content: center;
}
.float-card--customers { top: 31.5%; right: -8%; width: 47%; height: 19.5%; }
.float-card--customers .fc-up { color: #22a35c; font-weight: 700; }
.fc-bar { display: block; height: 8px; border-radius: 4px; background: #e4e6ee; margin-top: .55rem; }
.float-card--dynamics { top: 52%; left: -9%; width: 50%; height: 31%; }
.fc-green { color: #22a35c; font-weight: 700; }
.fc-chart { display: flex; align-items: flex-end; gap: 8px; flex: 1; min-height: 60px; }
.fc-chart i {
  width: 9px; height: var(--h); border-radius: 5px;
  background: linear-gradient(180deg, #7b5ce4, #5a3fe8);
}
.fc-chart i:nth-child(odd) { opacity: .55; }
@media (max-width: 991.98px) {
  .float-card--customers { right: 2%; }
  .float-card--dynamics { left: 2%; }
}

/* Partner / KI */
.section-digitalpartner {
  /* Leiterbahn-Grafik: 1480×592 bei 1920er-Fenster (= 77.06vw, skaliert responsiv),
     rechtsbündig, 50px unter die Sektionskante geschoben */
  background: var(--light) url('../img/digital/circuit-bg.webp') right bottom -50px / 77.06vw auto no-repeat;
  padding: 6rem 0;
}
.digital-ai { width: min(420px, 85%); }
.partner-card {
  background: #fff; border-radius: 12px; padding: 1.8rem; height: 100%;
  box-shadow: 0 10px 30px rgba(20, 24, 40, .06);
}
.partner-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #7b3fd9, #4d9de0);
  margin-bottom: 1.4rem;
}
.partner-card-icon img { width: 30px; filter: invert(1); }
.partner-card h3 { font-size: 1.3rem; color: #1d2333; margin-bottom: .9rem; }
.partner-card p { color: #4c5468; font-size: .95rem; margin: 0; }

.digital-banner { min-height: 460px; align-items: center; padding-bottom: 0; }

/* Flaggschiff + Referenzen-Marquee */
.section-flaggschiff { background: #fff; padding: 6rem 0 4rem; }
.refs-marquee { overflow: hidden; display: flex; flex-direction: column; gap: 1.2rem; }
.refs-track {
  display: flex; gap: 1.2rem; width: max-content;
  animation: marquee 60s linear infinite;
}
.refs-track--reverse { animation: marquee-right 60s linear infinite; }
.refs-marquee:hover .refs-track { animation-play-state: paused; }
.refs-track img { height: clamp(180px, 16vw, 300px); width: auto; border-radius: 8px; }
.trust-line-dark { color: #2a3040; font-size: 1rem; }

/* Hosting */
.section-hosting { background: #fff; padding: 3rem 0 6rem; }
/* Premium-Seite: mehr Luft zum Referenzen-Marquee darüber */
.pw-hosting { padding-top: 7rem; }
.pw-badge { width: 100%; max-width: 260px; height: auto; }
.hosting-body { border-left: 3px solid #e2e5ee; padding-left: 2rem; }
.hosting-form {
  display: flex; margin-top: 2.2rem; max-width: 1350px;
  border: 1px solid #d6d9e2; border-radius: 10px; padding: .5rem; background: #fff;
}
.hosting-form input {
  flex: 1; border: 0; outline: 0; padding: .8rem 1.2rem;
  font-family: var(--font); font-size: 1.15rem; color: #1d2333;
}
.hosting-form .btn-grad { box-shadow: none; }

/* Real Results */
.section-results { background: #fff; padding: 6rem 0 3rem; }
.results-panel { background: #f4f5f7; border-radius: 16px; overflow: hidden; margin-top: 2.5rem; }
.results-content { padding: clamp(1.8rem, 3.5vw, 3.2rem); display: flex; flex-direction: column; height: 100%; }
.results-sub { color: #4c5468; margin: .4rem 0 2rem; }
.results-quote { font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 700; color: #1b2337; line-height: 1.4; margin-bottom: 2.4rem; }
.results-content .quote-author img { width: 48px; height: 48px; }
.results-link { color: #5a3fe8; font-weight: 700; }
.results-photo { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }
.partnerbrands-row--center { justify-content: center; gap: clamp(2rem, 6vw, 6rem); margin-top: 3rem; }
.partnerbrands-row--center span { color: #6b7280; }

/* Work Stats */
.section-workstats { background: #fff; padding: 4rem 0 6.5rem; }
.section-workstats .news-kicker { color: #1b2337; font-weight: 700; letter-spacing: 2px; }
.workstat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 14px; background: #fff;
  box-shadow: 0 10px 30px rgba(20, 24, 40, .12); margin-bottom: 1.8rem;
}
.workstat-icon img { width: 28px; opacity: .85; }
.workstat .num-value { font-size: clamp(2.6rem, 4.6vw, 4rem); margin-bottom: .9rem; }
.workstat h3 { font-size: 1.15rem; color: #1b2337; margin-bottom: .7rem; }
.workstat .num-text { max-width: 400px; }

/* Referenz-Videos (Digital. Mutig. Anders.) */
.section-refvideos { background: #17131f; padding: 6rem 0; color: #fff; }
.refvideo-card {
  background: #201b2a; border: 1px solid rgba(255,255,255,.05); border-radius: 14px;
  padding: clamp(1.6rem, 3.4vw, 3rem); margin-top: 2.8rem;
}
.refvideo-quote { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 700; line-height: 1.4; text-align: right; }
.refvideo-author { text-align: right; color: #b9bfcb; font-size: .85rem; letter-spacing: 1.5px; text-transform: uppercase; margin: 1rem 0 1.8rem; }
.refvideo-text p { color: #d4d7e0; font-size: .98rem; }
.refvideo-cta { color: #e05252; font-weight: 700; margin: 1.6rem 0; }
.section-refvideos .btn-dark-solid { background: #2c2637; }
.section-refvideos .btn-dark-solid:hover { background: #3a3348; }

/* ════════════════ BRANDING-SEITE ════════════════ */
.branding-hero {
  position: relative; min-height: 780px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-dark) fixed; overflow: hidden; padding: 3rem 0;
}
.branding-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--banner-img);
  background-size: cover; background-position: center;
  opacity: .85;
}
/* Hero-Video: füllt den Header per object-fit cover.
   scale(1.45): das Video hat EINGEBACKENE Letterbox-Balken (Inhalt nur ~74 % der Höhe,
   Balken je ~13 % oben/unten) – der Zoom schiebt sie garantiert aus dem sichtbaren Bereich */
.branding-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.45);
  opacity: .85;
}
/* dunkles Overlay über dem Hero-Video für besseren Schrift-Kontrast */
.branding-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, .55);
  z-index: 1;
  pointer-events: none;
}
.branding-hero .hero-bgwords { z-index: 1; }
.branding-hero .container-xl { position: relative; z-index: 2; }
.branding-hero-title { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.45; }
.branding-hero-sub { color: #d9dde3; margin: 1.6rem auto 0; max-width: 1250px; }

.branding-intro { background: #fff; padding: 7rem 0; }
/* Höhere weiße Fläche mit optisch zentriertem Inhalt. Grid statt Flex, weil
   .container-xl als Flex-Element seine prozentualen Ränder verlöre und
   schrumpfen würde – Grid-Elemente füllen die Inline-Achse. */
@media (min-width: 992px) {
  .branding-intro { min-height: 44rem; display: grid; align-content: center; }
}
/* Einspaltig bleibt es beim alten, knapperen Innenabstand – die höhere Fläche
   ist für die Zweispalten-Ansicht gedacht, auf dem Telefon wäre sie nur Leere. */
@media (max-width: 991.98px) {
  .branding-intro { padding: 5.5rem 0; }
}
.branding-intro-title { font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.45; color: var(--ink); }
.branding-collage { width: 100%; display: block; }
/* Video-Fassade neben „Branding muss sexy sein“ – Maße wie im Zitat-Modul.
   .video-facade bringt Radius, Schatten und Abspielknopf schon mit. */
.marke-video.video-facade { aspect-ratio: 16 / 9; overflow: hidden; }
/* Vorschaubild UND Video füllen den Rahmen vollständig. Beim Video steht in
   .video-facade nur width: 100% – die Höhe ergibt sich dann aus dem
   Seitenverhältnis, und wenn ein Browser dabei anders rundet als bei
   aspect-ratio, bleibt unten ein heller Streifen des Kartengrunds stehen.
   Mit height: 100% und object-fit: cover kann das nicht passieren. */
.marke-video.video-facade img,
.marke-video.video-facade video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.branding-slider { padding: 5rem 0 4.5rem; }

/* Branding-Cases */
.branding-cases { background: var(--grad-dark) fixed; padding: 5.5rem 0 0; }
.branding-cases .container-xl:first-child { margin-bottom: 2.5rem; }
.branding-cases-cta { padding: 3.5rem 0 4.5rem; }

/* Pechtel-Case */
.section-pechtelcase { background: #fff; padding: 6.5rem 0; }
.pechtel-grid { width: min(760px, 100%); }

/* ════════════════ CASES-SEITE ════════════════ */
.cases-hero {
  background: var(--grad-dark) fixed; color: #fff;
  position: relative; overflow: hidden; padding: 5rem 0 4rem;
}
.cases-hero-title { font-size: clamp(1.6rem, 2.7vw, 2.45rem); line-height: 1.45; color: #fff; }
.cases-hero-sub { color: #c3c9d4; margin-top: 1.6rem; }
.logo-wall {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2.5rem; align-items: center; justify-items: center;
  margin-top: 3.5rem;
}
.logo-wall img {
  max-width: 150px; max-height: 105px; width: auto; height: auto;
  object-fit: contain; opacity: .92; transition: opacity .25s, transform .25s;
}
.logo-wall img:hover { opacity: 1; transform: scale(1.06); }

/* Header-Link für Cases */
.branding-cases .case-grid { margin-top: 3.5rem; }

/* ════════════════ NEWS-SEITE ════════════════ */
.section-newspage { background: #fff; padding: 2.5rem 0 6rem; }
/* Design-Crops haben eigenes Seitenverhältnis – nicht zusätzlich beschneiden */
.section-newspage .news-media img { aspect-ratio: auto; }
.breadcrumb-light { color: #9aa1b2; font-size: .88rem; }
.breadcrumb-light a { color: #9aa1b2; }
.breadcrumb-light strong { color: #1b2337; font-weight: 400; }
.breadcrumb-light span { margin: 0 .35rem; }
.section-newspage h1 { margin: 1.5rem 0 2.5rem; }

/* Featured */
.featured-post { position: relative; background: #f4f5f7; border-radius: 14px; }
.featured-img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 14px 0 0 14px; display: block; }
.featured-body { padding: clamp(1.8rem, 3.5vw, 3.4rem); display: flex; flex-direction: column; height: 100%; }
.news-cat-pill {
  display: inline-block; background: #fff; color: #1b2337; font-size: .78rem; font-weight: 400;
  padding: .3rem .8rem; border-radius: 6px; box-shadow: 0 2px 8px rgba(20,24,40,.08);
  width: fit-content;
}
.featured-body h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 1.4rem 0 1rem; }
.featured-body h2 a { color: #1b2337; }
.featured-body h2 a:hover { color: #5a3fe8; }
.featured-body p { color: #4c5468; }
.featured-body .news-author { margin-top: auto; padding-top: 1.5rem; }
.featured-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: #fff; color: #1b2337; box-shadow: 0 8px 22px rgba(20,24,40,.18);
  transition: transform .2s;
}
.featured-arrow:hover { transform: translateY(-50%) scale(1.1); }
.featured-arrow--prev { left: -22px; }
.featured-arrow--next { right: -22px; }
.featured-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.4rem; }
.featured-dots span { width: 8px; height: 8px; border-radius: 50%; background: #d3d7e0; }
.featured-dots span.active { background: #1b2337; }

/* Sidebar */
.sidebar-head { letter-spacing: 2px; text-transform: uppercase; color: #6b7280; font-size: .8rem; font-weight: 400; }
.trending-list { display: flex; flex-direction: column; }
.trending-item {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0;
  border-bottom: 1px solid #e9ebf0;
}
.trending-item img { width: 92px; height: 82px; object-fit: cover; border-radius: 8px; flex: 0 0 92px; }
.trending-item strong { display: block; color: #1b2337; font-size: .98rem; line-height: 1.4; }
.trending-item:hover strong { color: #5a3fe8; }
.trending-item span { color: #6b7280; font-size: .8rem; }
.cat-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.cat-pill {
  background: #f0f1f5; color: #1b2337; font-size: .82rem; font-weight: 400;
  padding: .4rem .9rem; border-radius: 6px;
}
.cat-pill:hover { background: #5a3fe8; color: #fff; }
.newsletter-box { background: #f4f5f7; border-radius: 14px; padding: 1.8rem; }
.newsletter-box h3 { font-size: 1.3rem; color: #1b2337; }
.newsletter-box p { color: #4c5468; font-size: .9rem; margin: .8rem 0 1.2rem; }
.newsletter-form { display: flex; background: #fff; border-radius: 30px; padding: .35rem; }
.newsletter-form input {
  flex: 1; border: 0; outline: 0; padding: .5rem 1rem; min-width: 0;
  font-family: var(--font); font-size: .92rem;
}
.newsletter-form .btn-indigo { padding: .55rem 1.3rem; }
.sponsored-ad { position: relative; display: block; border-radius: 14px; overflow: hidden; max-width: 300px; }
.sponsored-ad img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.sponsored-ad::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(185deg, transparent 45%, rgba(10, 12, 18, .8));
}
.sponsored-flash {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.sponsored-text {
  position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 2;
  color: #fff; font-weight: 700; font-size: 1.15rem; line-height: 1.4;
}

/* CTA-Banner */
/* Banner ohne eigenen Hintergrund: hier scheint der Galaxis-Parallax durch */
.news-cta {
  position: relative; min-height: 560px; display: flex; align-items: center;
  background: transparent; color: #fff;
}
.news-cta .container-xl { position: relative; }
.news-cta-pill {
  display: inline-block; background: rgba(255,255,255,.92); color: #1b2337;
  font-size: .78rem; font-weight: 400; padding: .35rem .9rem; border-radius: 20px;
}
.news-cta h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); max-width: 820px; margin: 1.4rem auto 1rem; }
.news-cta p { color: #e2e5ec; margin-bottom: 1.8rem; }
.news-cta-social {
  display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 2.2rem;
  font-size: .78rem; text-align: left; color: #e2e5ec;
}
.news-cta-social img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; margin-right: -10px; }
.news-cta-social span { margin-left: 1.4rem; }
@media (max-width: 991.98px) {
  .featured-img { border-radius: 14px 14px 0 0; }
  .featured-arrow--prev { left: 8px; }
  .featured-arrow--next { right: 8px; }
}

/* ════════════════ KONTAKT-SEITE ════════════════ */
.section-kontakt { background: var(--grad-dark) fixed; padding: 3rem 0 5rem; color: #fff; }
/* Ohne eigenen Kasten: der Verlauf und die Galaxie des Abschnitts bleiben sichtbar */
.kontakt-panel { padding: 1.5rem 0 0; }
.kontakt-kicker { color: #4dc3f7; font-size: 1.2rem; }
.kontakt-title { font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.35; margin: 1.4rem 0; }
.kontakt-text { color: #c3c9d4; max-width: 760px; }
.kontakt-text + .kontakt-text { margin-top: 1rem; }

/* Was im Erstgespräch passiert – Fakten statt Versprechen */
.kontakt-ablauf { margin: 2.2rem 0 0; max-width: 760px; }
.kontakt-ablauf-titel {
  font-size: .74rem; letter-spacing: 2px; text-transform: uppercase;
  color: #8b90a0; font-weight: 700; margin: 0 0 1rem;
}
.kontakt-ablauf ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.kontakt-ablauf li { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; align-items: start; }
.kontakt-ablauf li::before {
  content: counter(schritt); counter-increment: schritt;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-size: .78rem; font-weight: 700;
}
.kontakt-ablauf ol { counter-reset: schritt; }
.kontakt-ablauf b { display: block; color: #fff; font-size: .98rem; font-weight: 700; }
.kontakt-ablauf span { color: #c3c9d4; font-size: .92rem; line-height: 1.6; }
.kontakt-zusage {
  margin: 1.8rem 0 0; padding-left: 1rem; border-left: 2px solid #5a3fe8;
  color: #c3c9d4; font-size: .92rem; line-height: 1.7; max-width: 760px;
}
.kontakt-zusage strong { color: #fff; }
.kontakt-live { display: block; margin-top: .5rem; }

.kontakt-actions { margin-top: 2.5rem; max-width: 760px; }
.btn-kontakt-termin { display: flex; width: 100%; font-size: 1.02rem; }
.kontakt-oder { text-align: center; margin: 1rem 0; color: #c3c9d4; }
.btn-kontakt-form {
  display: block; width: 100%; background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.45); border-radius: 9px; padding: .78rem 1.6rem;
  font-family: var(--font); font-weight: 400; font-size: .98rem;
  transition: background .25s, border-color .25s;
}
.btn-kontakt-form:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* Formular */
.kontakt-form { margin-top: 2.5rem; max-width: 780px; }
.kontakt-form label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .45rem; color: #fff; }
.kontakt-form input:not([type=checkbox]), .kontakt-form textarea {
  width: 100%; background: rgba(255,255,255,.04); border: 0; outline: 0;
  border-bottom: 1px solid #7b5ce4; border-radius: 4px 4px 0 0;
  color: #fff; padding: .55rem .7rem; font-family: var(--font); font-size: .95rem;
  transition: border-color .2s, background .2s;
}
.kontakt-form input:focus, .kontakt-form textarea:focus {
  border-bottom-color: #4dc3f7; background: rgba(255,255,255,.08);
}
.kontakt-check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 300 !important; font-size: .82rem !important; color: #c3c9d4; }
.kontakt-check input { margin-top: .2rem; }
.kontakt-check a { color: #c3c9d4; text-decoration: underline; }
.btn-kontakt-send {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px; padding: .7rem 2.2rem; font-family: var(--font); font-weight: 400;
  transition: background .25s;
}
.btn-kontakt-send:hover { background: rgba(255,255,255,.1); }

/* Marcel-Karte */
.kontakt-marcel { width: min(400px, 88%); }
.kontakt-role { color: #d9dde3; font-size: 1.15rem; margin-bottom: 1rem; }
.kontakt-phone { margin-top: 1.4rem; }
.kontakt-phone a { color: #fff; font-weight: 400; font-size: 1.05rem; }

/* Maps */
.kontakt-map iframe { display: block; }

/* ════════════════ PREMIUM-WEBSITE-SEITE ════════════════ */
.btn-sorgenfrei {
  display: inline-block; background: #17141f; color: #fff;
  border: 1px solid #3a2f55; outline: 2px solid #17141f; outline-offset: 4px;
  border-radius: 6px; padding: .85rem 2rem; font-weight: 400;
  transition: border-color .25s, transform .25s;
}
.btn-sorgenfrei:hover { color: #fff; border-color: #9d7bf5; transform: translateY(-2px); }
.intro-video-link {
  background: transparent; border: 0; color: #fff; font-family: var(--font);
  font-size: .95rem; display: inline-flex; align-items: center; gap: .5rem;
}
.intro-video-link:hover { color: #9d7bf5; }

.section-aushaengeschild { background: #fff; padding: 6rem 0; }
.partner-card--soft { background: #f6f3f1; box-shadow: none; }

/* Das Video wechselt zwischen hellen und dunklen Einstellungen – ein
   flächiger Schleier zusätzlich zum Verlauf von links hält die Schrift
   durchgehend lesbar. */
.pw-banner::before {
  background:
    linear-gradient(90deg, rgba(8, 10, 14, .55), rgba(8, 10, 14, .18) 65%),
    rgba(8, 10, 14, .3);
}

/* ── Premium-Banner: Feature-Karten ragen ins Video ──────────────────
   Das macht den Übergang lebendiger und nimmt der linken Spalte den
   Leerraum unter dem Text. Erst ab dem Zweispalter, darunter würden
   die Karten die Überschrift verdecken. */
@media (min-width: 992px) {
  .pw-banner { padding-bottom: 16rem; }
  /* Die Überschrift läuft über die volle Breite – sie steht ohnehin über den
     Karten, nicht neben ihnen. */
  .pw-banner h2 { max-width: none; }
  .pw-features { margin-top: -12.75rem; position: relative; z-index: 2; }
  .pw-features .partner-card--soft {
    background: #fff;
    box-shadow: 0 18px 40px rgba(12, 14, 22, .18);
  }
  /* Die Kacheln stehen in der schmaleren Spalte – etwas kompakter, damit
     Überschriften wie „High Performance“ einzeilig bleiben. */
  .pw-features .partner-card { padding: 1.5rem; }
  .pw-features .partner-card-icon { width: 54px; height: 54px; margin-bottom: 1.1rem; }
  .pw-features .partner-card-icon img { width: 26px; }
  .pw-features .partner-card h3 { font-size: 1.12rem; margin-bottom: .7rem; }
  .pw-features .partner-card p { font-size: .9rem; }
  /* Luft zwischen dem Text links und den Kacheln. Als Innenabstand der
     Textspalte, nicht als Raster-Abstand – sonst entstünde durch die
     negativen Zeilenränder seitlicher Überstand. */
  .section-aushaengeschild .col-lg-7 { padding-right: 36px; }
}

.section-pwrefs { background: #f4f5f7; padding: 3.5rem 0; }

/* Produkt-Badge */
.produkt-badge {
  display: inline-flex; flex-direction: column; gap: .2rem;
  background: #0d0b12; border-radius: 10px; padding: 1.3rem 1.8rem;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #a21ccb, #4da3e6) 1;
}
.produkt-badge .pb-brand { color: #fff; font-size: 1.6rem; font-weight: 400; }
.produkt-badge .pb-name { color: #d9dde3; font-size: 1.05rem; font-weight: 300; }

/* Slots */
/* ── Projektplätze ────────────────────────────────────────────────────
   Hausschrift, Hausfarben, gleiche Kartenoptik wie die übrigen Module. */
.section-slots { background: #f4f5f7; padding: 6rem 0; }
.slots-text { color: #4c5468; max-width: 640px; margin-top: 1.2rem; }
.slots-stand {
  background: #fff; border: 1.5px solid #e2e5ee; border-radius: 16px; padding: 1.6rem;
}
.slots-stand-zahl {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; color: var(--ink); margin: 0;
}
.slots-stand-text { color: #6b7280; font-size: .9rem; line-height: 1.6; margin: .4rem 0 1.3rem; }
.slots-stand .btn-grad { border: 0; }

.slot-card {
  position: relative; height: 100%; min-height: 190px;
  border: 1.5px solid #e2e5ee; border-radius: 14px; background: #fff;
  padding: 1rem 1.1rem; display: flex; flex-direction: column;
  color: #8b90a0;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.slot-card:hover { transform: translateY(-4px); border-color: #cfd4e2; box-shadow: 0 14px 30px rgba(20, 24, 40, .1); }
.slot-nr {
  font-size: .74rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}
.slot-logo {
  position: absolute; inset: 0; margin: auto; max-width: 68%; max-height: 38%;
  object-fit: contain; opacity: .85;
}
.slot-status {
  margin-top: auto; align-self: flex-start;
  border: 1px solid #dfe2e9; border-radius: 20px; padding: .22rem .8rem;
  font-size: .74rem; letter-spacing: .5px;
}
/* Freier Platz: Hausverlauf statt Fremdblau.
   Kein Rahmen – ein transparenter Rahmen ließ den Verlauf darunter
   durchscheinen und erzeugte an den runden Ecken sichtbare Nähte.
   Der Innenabstand gleicht die fehlende Rahmenstärke aus. */
.slot-card--free {
  background: var(--grad); border: 0; color: #fff;
  padding: calc(1rem + 1.5px) calc(1.1rem + 1.5px);
  box-shadow: 0 14px 32px rgba(122, 60, 220, .28);
}
.slot-card--free:hover {
  border-color: transparent;
  box-shadow: 0 20px 44px rgba(122, 60, 220, .45);
}
.slot-frei-text {
  margin: auto 0; text-align: center; color: #fff; font-weight: 700; font-size: 1.05rem;
}
.slot-aktionen { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin-top: auto; }
.slot-cta {
  display: inline-block; background: #fff; color: #4a2ad0; font-weight: 700;
  border-radius: 20px; padding: .34rem 1rem; font-size: .8rem; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.slot-card--free:hover .slot-cta { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.slot-cta:hover { color: #4a2ad0; }
.slot-shop {
  color: rgba(255, 255, 255, .85); font-size: .72rem; text-decoration: underline;
  text-align: center; line-height: 1.35;
}
.slot-shop:hover { color: #fff; }

.pw-webentwickler { overflow: visible; }
/* Fließtext in Weiß statt Hellgrau – die Startseite behält ihr Grau */
.pw-webentwickler .blickfeld-box p { color: #fff; }
.pw-webentwickler .blickfeld-box .btn-grad { border: 0; }

/* CMS-Vergleich */
.section-cmsvergleich { background: var(--light); padding: 6.5rem 0; }
.cms-intro {
  max-width: 780px; margin: 1.6rem auto 0; text-align: center;
  color: #5a6070; font-size: 1.05rem; line-height: 1.75;
}
.cms-intro strong { color: var(--ink); font-weight: 700; }

.cms-card {
  background: #fff; border: 1.5px solid #e2e5ee; border-radius: 14px;
  padding: clamp(1.8rem, 3vw, 2.6rem); height: 100%;
}
/* Die eigene Spalte trägt die Hausfarbe – sie ist die Empfehlung. */
.cms-card--eigen {
  background: linear-gradient(180deg, #f7f5ff 0%, #fff 60%);
  border-color: #d5cdfa; box-shadow: 0 18px 44px rgba(90, 63, 232, .1);
}
.cms-label {
  letter-spacing: 3px; text-transform: uppercase; font-size: .74rem;
  font-weight: 700; color: #8b90a0; margin: 0 0 .5rem;
}
.cms-label--eigen { color: #5a3fe8; }
.cms-card h3 {
  font-size: clamp(1.3rem, 1.9vw, 1.65rem); font-weight: 700;
  color: var(--ink); margin: 0; line-height: 1.3;
}

.cms-liste { list-style: none; padding: 0; margin: 0; }
.cms-liste li {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .85rem 0; border-top: 1px solid #eef0f4;
  color: #4a5061; font-size: .96rem; line-height: 1.55;
}
.cms-liste li:first-child { border-top: 0; padding-top: 0; }
.cms-liste li::before {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  margin-top: .05rem;
}
.cms-liste--minus li::before { content: '–'; background: #eef0f4; color: #6b7280; }
.cms-liste--plus  li::before { content: '✓'; background: #ece7ff; color: #5a3fe8; }
.cms-card--eigen .cms-liste li { border-top-color: #ece9f8; color: #3d4457; }

.cms-fazit {
  max-width: 880px; margin: 3rem auto 0; text-align: center;
  color: #5a6070; font-size: .98rem; line-height: 1.75;
}
.cms-fazit strong { color: var(--ink); }
.cms-fazit-link {
  display: table; margin: .9rem auto 0; color: #5a3fe8;
  font-weight: 700; text-decoration: none; border-bottom: 1.5px solid transparent;
  transition: border-color .2s ease;
}
.cms-fazit-link:hover { color: #5a3fe8; border-bottom-color: #5a3fe8; }

/* Technik-Karten */
.section-technik { background: var(--grad-dark) fixed; padding: 7rem 0; }
/* Alle Karten teilen sich eine Grid-Zelle → die Box ist so hoch wie die längste
   und springt beim Blättern nicht */
.technik-slider { position: relative; display: grid; }
/* Karten liegen auf dem Hausdunkel – nur eine feine Kante trennt sie */
.technik-card {
  grid-area: 1 / 1;
  visibility: hidden; opacity: 0; transition: opacity .4s ease;
  background: rgba(255, 255, 255, .035); color: #cfd4da; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  padding: clamp(1.8rem, 3.5vw, 3.2rem);
}
.technik-card.active { visibility: visible; opacity: 1; }

.technik-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: #fff; color: var(--ink); font-size: 1.2rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  cursor: pointer; z-index: 3; transition: transform .2s, box-shadow .2s;
}
.technik-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 30px rgba(0, 0, 0, .42); }
.technik-arrow--prev { left: -24px; }
.technik-arrow--next { right: -24px; }

.technik-dots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin: 2.6rem 0 1.8rem;
}
.technik-dot {
  border: 1px solid rgba(255, 255, 255, .14); background: transparent;
  color: #8b90a0; border-radius: 999px; padding: .55rem 1.15rem;
  font-family: var(--font); font-size: .88rem; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.technik-dot span { font-weight: 700; margin-right: .35rem; }
.technik-dot em { font-style: normal; }
.technik-dot:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
/* background-origin: sonst zeichnet der Verlauf im transparenten Randstreifen
   seine Wiederholung – links wird dann ein blauer Strich sichtbar. */
.technik-dot.active {
  background: var(--grad); background-origin: border-box;
  border-color: transparent; color: #fff;
}
/* Laufende Nummer als Anker – gleiche Verlaufslogik wie die Buttons.
   line-height 1 und keine Laufweite, sonst sitzt die Zahl minimal außermittig. */
.technik-nr {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--grad); color: #fff;
  font-weight: 700; font-size: .95rem; letter-spacing: 0; line-height: 1;
  box-shadow: 0 8px 20px rgba(122, 60, 220, .32);
}
.technik-card .news-kicker { margin-bottom: .2rem; color: #8b90a0; }
.technik-title {
  font-size: clamp(1.45rem, 2.3vw, 1.95rem); font-weight: 700;
  color: #fff; margin: 0; line-height: 1.28;
}
.technik-card > .row > div > p { line-height: 1.75; }

.tech-checks { list-style: none; padding: 0; margin: 1.9rem 0 0; display: flex; flex-direction: column; gap: 0; }
.tech-checks li {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .95rem 0; border-top: 1px solid rgba(255, 255, 255, .08);
}
.tech-checks li:first-child { border-top: 0; }
.tech-checks li::before {
  content: '✓'; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  background: rgba(122, 60, 220, .3); color: #c3b1ff; margin-top: .1rem;
}
.tech-checks strong { display: block; color: #fff; font-size: .98rem; }
.tech-checks span { display: block; font-size: .9rem; line-height: 1.55; }

.technik-bild { position: relative; }
.technik-illu { width: 100%; height: auto; display: block; }

/* Mobil sind die Karten hoch – mittig sitzende Pfeile lägen mitten im Text.
   Sie rücken deshalb als Paar unter die Karte, in einen reservierten Streifen. */
@media (max-width: 991.98px) {
  .technik-slider { padding-bottom: 90px; }
  .technik-arrow {
    top: auto; bottom: 20px; transform: none;
    width: 42px; height: 42px; font-size: 1.05rem;
  }
  .technik-arrow:hover { transform: scale(1.08); }
  .technik-arrow--prev { left: 50%; margin-left: -50px; }
  .technik-arrow--next { right: 50%; margin-right: -50px; }
  .technik-dots { gap: .5rem; margin: 2.2rem 0 1.4rem; }
  .technik-dot { font-size: .85rem; padding: .5rem 1rem; }
  .technik-dot em { display: none; }
  .technik-dot span { margin-right: 0; }
}

/* Realisierte Websites */
.section-realisiert { background: var(--grad-dark) fixed; padding: 6.5rem 0; }
.projekt-img { width: 100%; border-radius: 10px; }
.projekt-kicker { color: #9aa1b2; letter-spacing: 2px; text-transform: uppercase; font-size: .78rem; margin: 1.4rem 0 .4rem; }
.projekt-titel { color: #fff; font-size: 1.35rem; margin-bottom: 1rem; }
/* Das SVG hat kein fill und ein hochformatiges viewBox (384×512): invert macht
   den Pfeil weiß, height:auto verhindert das Stauchen im quadratischen Rahmen. */
.projekt-pfeil {
  width: 11px; height: auto; filter: invert(1); opacity: .75;
  transition: transform .2s ease, opacity .2s ease;
}
.btn-outline:hover .projekt-pfeil { opacity: 1; transform: translate(2px, -2px); }
.btn-showcase {
  display: inline-block; border: 1px solid rgba(255,255,255,.5); border-radius: 4px;
  padding: .9rem 2.4rem; color: #fff; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; line-height: 1.4;
}
.btn-showcase small { display: block; font-weight: 300; text-transform: none; letter-spacing: 0; }
.btn-showcase:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Fakten – gleiche Kartenoptik wie der Technik-Slider, damit beide Module
   auf dem Hausdunkel zusammengehören */
.section-fakten { background: var(--grad-dark) fixed; padding: 6.5rem 0; color: #fff; }
.fakt {
  height: 100%; padding: 2rem 1.8rem;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; transition: background .25s, border-color .25s;
}
.fakt:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.fakt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #7b3fd9, #4d9de0);
  margin-bottom: 1.3rem;
}
.fakt-icon img { width: 27px; height: 27px; filter: invert(1); }
.fakt h3 { font-size: 1.18rem; color: #fff; margin: 0 0 .6rem; }
.fakt p { color: #b9bfcb; font-size: .95rem; line-height: 1.65; margin: 0; }

/* FAQ */
.section-pwfaq { background: var(--light); padding: 5rem 0 6.5rem; }
/* Die linke Spalte bleibt stehen, während man die langen Antworten liest */
@media (min-width: 992px) {
  .pwfaq-seite { position: sticky; top: 110px; }
}
.section-pwfaq .accordion-button { align-items: flex-start; gap: .8rem; padding-right: 3.2rem; }
.faq-symbol { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.4; }

.faq-intro { color: #4c5468; font-size: 1rem; line-height: 1.7; margin-bottom: 1.2rem; }
.section-pwfaq .accordion-body > p:last-child { margin-bottom: 0; }

.faq-checks, .ablauf-checks { list-style: none; padding: 0; margin: 0; }
.faq-checks li, .ablauf-checks li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .8rem 0; border-top: 1px solid #eef0f4;
}
.faq-checks li:first-child, .ablauf-checks li:first-child { border-top: 0; padding-top: 0; }
.faq-checks li::before, .ablauf-checks li::before {
  content: '✓'; width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: .76rem; font-weight: 700;
  background: #ece7ff; color: #5a3fe8; margin-top: .12rem;
}
.faq-checks strong, .ablauf-checks strong { display: block; color: var(--ink); font-size: .95rem; }
.faq-checks span, .ablauf-checks span { display: block; color: #4c5468; font-size: .9rem; line-height: 1.6; }

.faq-gruppe {
  font-size: .95rem; font-weight: 700; color: var(--ink);
  margin: 1.7rem 0 .6rem; padding-left: 1.9rem; position: relative;
}
.faq-gruppe:first-child { margin-top: 0; }
.faq-gruppe::before {
  content: '✓'; position: absolute; left: 0; top: -.1rem;
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: .76rem;
  background: #ece7ff; color: #5a3fe8;
}
.faq-striche { list-style: none; padding: 0 0 0 1.9rem; margin: 0; }
.faq-striche li {
  position: relative; padding-left: 1rem; margin-bottom: .35rem;
  color: #4c5468; font-size: .9rem; line-height: 1.6;
}
.faq-striche li::before { content: '–'; position: absolute; left: 0; color: #a5abb8; }

.faq-aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

.faq-branchen { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2.2rem; }
.faq-branchen li {
  break-inside: avoid; padding: .7rem 0; border-top: 1px solid #eef0f4;
}
.faq-branchen strong { display: block; color: var(--ink); font-size: .93rem; }
.faq-branchen span { display: block; color: #4c5468; font-size: .87rem; line-height: 1.55; }
@media (max-width: 767.98px) {
  .faq-branchen { columns: 1; }
}

/* ════════════════ ABLAUF IN DREI SCHRITTEN ════════════════ */
.section-ablauf { background: #fff; padding: 6.5rem 0; }
.ablauf-intro {
  max-width: 760px; margin: 1.6rem auto 0; text-align: center;
  color: #4c5468; font-size: 1.05rem; line-height: 1.75;
}
.ablauf-accordion { max-width: 940px; margin: 3rem auto 0; }
.ablauf-accordion .accordion-item {
  background: #fff; border: 1.5px solid #e2e5ee; border-radius: 14px !important;
  margin-bottom: 1.1rem; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
/* Der offene Schritt hebt sich über Rahmenfarbe und Schatten hervor */
.ablauf-accordion .accordion-item:has(.accordion-collapse.show) {
  border-color: #d5cdfa; box-shadow: 0 18px 44px rgba(90, 63, 232, .1);
}
.ablauf-accordion .accordion-button {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.4rem 3.4rem 1.4rem 1.5rem;
  background: #fff; box-shadow: none; font-family: var(--font);
}
.ablauf-accordion .accordion-button::after { position: absolute; right: 1.5rem; }
.ablauf-nr {
  display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 50%; background: var(--grad); background-origin: border-box;
  color: #fff; font-weight: 700; font-size: .98rem; line-height: 1;
  box-shadow: 0 8px 22px rgba(122, 60, 220, .28);
}
.ablauf-kopf { display: block; }
.ablauf-kicker {
  display: block; letter-spacing: 3px; text-transform: uppercase;
  font-size: .72rem; font-weight: 700; color: #8b90a0; margin-bottom: .25rem;
}
.ablauf-titel {
  display: block; font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700; color: var(--ink); line-height: 1.35;
}
.ablauf-accordion .accordion-button:not(.collapsed) .ablauf-titel { color: #5a3fe8; }
.ablauf-accordion .accordion-body { padding: .2rem 1.5rem 1.8rem 5.6rem; }
.ablauf-lead { color: #4c5468; margin: 0 0 1.3rem; line-height: 1.7; }
@media (max-width: 575.98px) {
  .ablauf-accordion .accordion-body { padding-left: 1.5rem; }
}
.ablauf-ergebnis {
  margin: 1.5rem 0 0; padding: 1.1rem 1.3rem;
  background: #f7f5ff; border-left: 3px solid #5a3fe8; border-radius: 0 10px 10px 0;
  color: #4c5468; font-size: .95rem; line-height: 1.7;
}
.ablauf-ergebnis strong { color: #5a3fe8; }
.section-ablauf .ziele-note { margin-top: 1rem; }
.section-ablauf .text-center { margin-top: 2.6rem; }
@media (max-width: 575.98px) {
  .ablauf-accordion .accordion-button { gap: .9rem; padding: 1.2rem 3rem 1.2rem 1.2rem; }
  .ablauf-nr { width: 40px; height: 40px; flex-basis: 40px; font-size: .9rem; }
}

/* Abschluss-CTA */
.section-pwcta { background: #f2eeeb; padding: 0 0 6rem; }
.pwcta-panel {
  background: #1e1c28; border-radius: 16px; color: #fff;
  padding: clamp(2rem, 4vw, 4rem);
}
.pwcta-marcel { width: min(410px, 80%); border-radius: 50%; margin-bottom: 2rem; }
.pwcta-panel h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.pwcta-underline { border-bottom: 4px solid #5a3fe8; }
.pwcta-text { color: #b9bfcb; max-width: 820px; margin: 1.4rem auto 0; }
.pwcta-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem; margin-top: 1.8rem; font-size: .92rem; }
.btn-white {
  display: inline-block; background: #fff; color: #1d2333; font-weight: 400;
  border-radius: 6px; padding: .85rem 1.8rem; transition: transform .25s;
}
.btn-white:hover { transform: translateY(-2px); color: #1d2333; }
.pw-audience { border-radius: 14px; padding: clamp(1.8rem, 3vw, 2.6rem); text-align: center; height: 100%; }
.pw-audience--white { background: #fff; color: #4c5468; }
.pw-audience--dark { background: #1e1c28; color: #b9bfcb; }
.pw-audience h3 { font-size: 1.4rem; margin-bottom: 1rem; color: #1d2333; }
.pw-audience--dark h3 { color: #fff; }

/* Fullscreen-Video-Overlay */
.video-overlay {
  position: fixed; inset: 0; z-index: 4000; background: rgba(0, 0, 0, .92);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.video-overlay video { max-width: 100%; max-height: 90vh; }
.video-overlay-close {
  position: absolute; top: 1.2rem; right: 1.6rem; background: transparent;
  border: 0; color: #fff; font-size: 2.2rem; line-height: 1;
}

/* ════════════════ SOCIAL-MEDIA-SEITE ════════════════ */
.social-hero-visual { position: relative; max-width: 520px; margin: 0 auto; padding: 0 6rem 0 7rem; }
.social-hero-phone { width: 100%; border-radius: 28px; display: block; }
.sf-card {
  display: flex; flex-direction: column; gap: .15rem;
  width: 190px; padding: .9rem 1.1rem; font-size: .82rem;
}
.sf-card .sf-spark { width: 100%; height: 26px; }
.sf-card .sf-value { font-size: 1.45rem; font-weight: 700; color: #111; }
.sf-card .sf-up { color: #22a35c; font-size: .78rem; }
.sf-card--1 { top: 4%; left: -4%; }
.sf-card--2 { top: 24%; right: -9%; width: 200px; }
.sf-card--3 { top: 52%; left: -8%; }
.social-hero-meta {
  position: absolute; right: -2%; bottom: 2%; width: 150px;
  border-radius: 50%; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.45);
}

/* Gen-Z */
/* Das Motiv trägt den ganzen Abschnitt: obere Bildhälfte ist freie Fläche für
   den Text, unten läuft die Kachelreihe. Das Bild sitzt immer in voller Breite
   am unteren Rand (background-size: 100% auto) – ist der Abschnitt niedriger
   als das quadratische Bild, fällt oben also der leere Teil weg. Genau das
   passiert auf dem Desktop. Auf schmalen Bildschirmen wird der Text so hoch,
   dass der Abschnitt das Bild vollständig fasst; die Fläche darüber deckt
   background-color in der Farbe des Bildoberrands ab – nahtlos. */
.section-genz {
  background: #946fe7 url('../img/social/genz-anspruch.webp') no-repeat center bottom;
  background-size: 100% auto;
  color: #fff; padding: 5.5rem 0 0; text-align: center;
}
/* Freiraum für die Kachelreihe: sie belegt die unteren ~35,5 % der Bildhöhe,
   und die Bildhöhe entspricht bei voller Breite der Fensterbreite. Der feste
   Zuschlag hält den Abstand zum Text auf jeder Breite gleich – ein reiner
   vw-Wert wird auf dem Smartphone zu knapp. */
.genz-inhalt { padding-bottom: calc(35.5vw + 4rem); }
.genz-title { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: 2rem; }
.genz-text { max-width: 1250px; margin: 0 auto 1.6rem; }

/* Ergebnisse */
.section-smresults { background: #fff; padding: 6.5rem 0; }
.smresults-title { font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.45; color: var(--ink); }
.smresult-img { width: 100%; border-radius: 22px; display: block; }

/* Insights-Belege: drei Hochformate nebeneinander, die Mitte startet tiefer.
   Die Verschiebung beim Scrollen übernimmt das [data-parallax]-System in
   main.js (erst ab 992 px aktiv). */
.smresults-phones {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem; align-items: start; margin-top: 3rem;
}
.smphone { margin: 0; }
.smphone--tief { margin-top: 4.5rem; }

/* Smartphone: Wisch-Karussell. Die Nachbarn schauen bewusst herein, damit
   erkennbar ist, dass es weitergeht. */
@media (max-width: 767.98px) {
  .smresults-phones {
    display: flex; grid-template-columns: none;
    gap: 1rem; margin-top: 2rem;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Rand des Containers als Wischfläche mitnutzen */
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
  }
  .smresults-phones::-webkit-scrollbar { display: none; }
  .smphone { flex: 0 0 66%; scroll-snap-align: center; }
  .smphone--tief { margin-top: 0; }
}

/* Kundengeschichten */
.section-stories { background: #f0eeec; padding: 6.5rem 0; }
.story-img { width: 100%; border-radius: 8px; }
.story-name { font-size: 1.25rem; color: #1d2333; margin: 1.2rem 0 .7rem; }
.story-text { color: #4c5468; font-size: .92rem; }

/* Kundengeschichten als YouTube-Shorts im Hochformat, aufgemacht wie der
   YouTube-Player: Titelzeile, Kanal mit Abo-Knopf, rotes Abspielzeichen.
   Sichtbar ist zunächst nur das lokal liegende Standbild – das iframe kommt
   erst mit dem Klick. */
.stories-shorts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 330px));
  gap: 2.6rem; justify-content: center; margin-top: 3.2rem;
}
.story-short { margin: 0; }
.yt-short { aspect-ratio: 9 / 16; border-radius: 14px; background: #000; }
.yt-short-bild { width: 100%; height: 100%; object-fit: cover; }
.yt-short iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Kopfzeile */
/* Der Schleier bleibt hinter Titel und Kanalzeile bewusst kräftig und läuft
   erst darunter aus: In beiden Standbildern liegen dort helle Stellen
   (Lichterkette, Fensterlamellen) – gemessen sonst nur 1,6:1 zur weißen
   Schrift, so 4,9:1. */
.yt-short-kopf {
  position: absolute; top: 0; left: 0; right: 0; padding: .7rem .8rem 2.8rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .8) 68%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
}
.yt-short-titel {
  margin: 0 2rem .55rem 0; font-size: .82rem; line-height: 1.35; font-weight: 400;
  /* Wie im Player: nach zwei Zeilen abgeschnitten. Die Mindesthöhe von zwei
     Zeilen hält die Kanalzeile immer unter dem Teilen-Symbol – sonst liefen
     „Abonnieren" und das Symbol bei kurzen Titeln übereinander. */
  min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-short-teilen {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; color: #fff; text-decoration: none;
  transition: background .2s;
}
.yt-short-teilen:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.yt-short-kanal { display: flex; align-items: center; gap: .45rem; }
/* Kanalbild vom eigenen YouTube-Profil, lokal ausgeliefert */
.yt-short-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
  object-fit: cover; display: block;
}
.yt-short-name {
  font-size: .74rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yt-short-abo {
  z-index: 3; flex: 0 0 auto; margin-left: auto;
  font-size: .68rem; line-height: 1; color: #0f0f0f; text-decoration: none;
  background: #fff; border-radius: 30px; padding: .38rem .68rem;
  transition: background .2s;
}
.yt-short-abo:hover { background: #d9d9d9; color: #0f0f0f; }

/* Rotes Abspielzeichen in der Mitte */
.yt-short-play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 68px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .25s;
}
.yt-short-play svg { width: 100%; height: 100%; display: block; }
.yt-play-flaeche { fill: #212121; fill-opacity: .8; transition: fill .2s, fill-opacity .2s; }
.yt-short:hover .yt-play-flaeche,
.yt-short-play:focus-visible .yt-play-flaeche { fill: #f00; fill-opacity: 1; }
.yt-short:hover .yt-short-play { transform: scale(1.06); }
.yt-short-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 10px; }

.yt-short.laeuft { cursor: default; }
.yt-short.laeuft .yt-short-play,
.yt-short.laeuft .yt-short-kopf { display: none; }

.story-link {
  display: inline-block; margin-top: .4rem; font-size: .88rem;
  color: var(--indigo); text-decoration: none; border-bottom: 1px solid rgba(90, 86, 239, .35);
}
.story-link:hover { color: var(--purple); border-bottom-color: var(--purple); }
.stories-hinweis { text-align: center; font-size: .78rem; color: #6b7280; margin: 2.8rem 0 0; }

@media (max-width: 575.98px) {
  .stories-shorts { grid-template-columns: minmax(0, 330px); gap: 2.2rem; }
}

/* Creatives-Grid */
/* Gleicher Hintergrund wie das Ansprechpartner-Modul darüber, damit die beiden
   Abschnitte als eine Fläche wirken.
   Der Innenabstand unten ist Pflicht: ohne ihn fällt der Außenabstand der
   letzten .container-xl aus dem Abschnitt heraus (margin-collapsing) und
   öffnet dort einen Streifen, in dem der Seitenhintergrund durchscheint. */
.section-creatives { background: var(--grad-dark) fixed; padding: 5.5rem 0 1.5rem; }
.section-creatives .container-xl { margin-bottom: 2.5rem; }
.creatives-grid { width: 100%; display: block; }

/* ── Social Wall ──────────────────────────────────────────────
   Mehrspaltiger Textfluss statt Raster: Die Karten sind je nach Bildformat
   und Textlänge unterschiedlich hoch und sollen genau so versetzt stehen. */
.social-wall { columns: 4; column-gap: 1.4rem; }
.sw-karte {
  break-inside: avoid; margin: 0 0 1.4rem;
  background: #17161d; border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; overflow: hidden;
}
.sw-bild { position: relative; display: block; }
.sw-bild img { width: 100%; height: auto; display: block; }
/* Abspielzeichen für Reels und Videos */
.sw-video {
  position: absolute; inset: 0; margin: auto; width: 48px; height: 48px;
  border-radius: 50%; background: rgba(0, 0, 0, .55);
  border: 2px solid rgba(255, 255, 255, .85);
}
.sw-video::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 19px;
  border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
/* Reel in der Kachel: liegt als Datei auf unserem Server, startet beim
   Überfahren stumm und in der Schleife. Ein Klick hält es an, der Link
   unten rechts führt zum Beitrag im Netzwerk. */
.sw-clip { cursor: pointer; overflow: hidden; }
.sw-clip video { width: 100%; height: auto; display: block; }
.sw-clip .sw-video { transition: opacity .25s, transform .25s; }
.sw-clip.laeuft .sw-video { opacity: 0; transform: scale(.9); }
.sw-clip-link {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  font-size: .68rem; letter-spacing: .3px; color: #fff; text-decoration: none;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 30px; padding: .28rem .7rem; backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s, background .2s;
}
.sw-clip:hover .sw-clip-link,
.sw-clip:focus-within .sw-clip-link { opacity: 1; }
.sw-clip-link:hover { background: rgba(139, 47, 214, .85); color: #fff; }
/* Berührungsgeräte: kein Hover – der Link bleibt sichtbar. */
@media (hover: none) {
  .sw-clip-link { opacity: 1; }
}
.sw-body { padding: 1.1rem 1.2rem 1rem; }
.sw-text { color: #e2e5ec; font-size: .95rem; line-height: 1.55; margin: 0; }
.sw-mehr { display: inline-block; margin-top: .4rem; color: #9d7bf5; font-size: .9rem; }
.sw-mehr:hover { color: #b79bf8; }
.sw-kopf { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.sw-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.sw-konto { flex: 1; color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.3; min-width: 0; }
.sw-konto small { display: block; color: #8b90a0; font-weight: 400; font-size: .8rem; }
.sw-netz { width: 20px; height: 20px; flex: 0 0 20px; filter: invert(1); opacity: .85; }
.sw-zahlen {
  display: flex; align-items: center; gap: 1.1rem; margin-top: .9rem;
  padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .08);
  color: #8b90a0; font-size: .85rem;
}
.sw-zahlen a { margin-left: auto; color: #fff; font-weight: 700; }
.sw-zahlen a:hover { color: #9d7bf5; }
.sw-hinweis { color: #8b90a0; font-size: .85rem; margin: 1.4rem 0 0; text-align: center; }
@media (max-width: 1199.98px) { .social-wall { columns: 3; } }
@media (max-width: 767.98px)  { .social-wall { columns: 2; } }
@media (max-width: 479.98px)  { .social-wall { columns: 1; } }

/* Erstberatung */
.section-erstberatung { background: #fff; padding: 6.5rem 0; }
.calendly-embed { margin-top: 3rem; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 44px rgba(20,24,40,.1); }

/* Meeting-Banner */
.social-banner {
  position: relative; min-height: 620px; display: flex; align-items: flex-end;
  background-image: var(--banner-img); background-size: cover; background-position: center top;
  padding-bottom: 3.5rem;
}
.social-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,10,14,.1) 55%, rgba(8,10,14,.55));
}
.social-banner .container-xl { position: relative; }
.social-banner h2 { color: #fff; font-size: clamp(1.25rem, 2.1vw, 1.9rem); line-height: 1.5; }

/* ════════════════ SHOPIFY-SEITE ════════════════ */
.tuev-bubble {
  position: absolute; top: -4%; left: -6%; z-index: 3; width: 165px; text-align: center;
}
.tuev-bubble span {
  display: block; background: #fff; color: #1d2333; border-radius: 10px;
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: .5rem .7rem; margin-bottom: .5rem; position: relative;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.tuev-bubble span::after {
  content: ''; position: absolute; left: 28px; bottom: -7px;
  border: 8px solid transparent; border-top-color: #fff; border-bottom: 0;
}
.tuev-bubble img { width: 120px; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
/* Shopify-Logo als Abschluss der Vertrauenszeile im Hero */
.hero-shopify-logo { display: block; width: 132px; height: auto; margin-top: 1.8rem; opacity: .9; }
.shopify-hero-logo {
  position: absolute; right: 6%; bottom: 4%; width: 150px; z-index: 3;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}

.section-shopimpressionen { background: #0b0a0e; padding: 4.5rem 0 5rem; }
/* Außen fast quadratisch, mittig eine schmale Hochkant-Spalte.
   Die Zeilenhöhe geben die beiden äußeren Kacheln vor, die mittlere
   streckt sich darauf – so sind alle drei exakt gleich hoch. */
.shopimp-galerie {
  display: grid; grid-template-columns: 1fr .62fr 1fr; gap: clamp(1rem, 1.6vw, 1.5rem);
}
.shopimp-kachel { position: relative; margin: 0; overflow: hidden; border-radius: 12px; }
.shopimp-kachel:not(.shopimp-kachel--hoch) { aspect-ratio: 5 / 4; }
/* Das Bild der Mittelkachel liegt absolut – im Fluss würde es die Zeilenhöhe
   vorgeben und wäre höher als die beiden äußeren Kacheln. */
.shopimp-kachel--hoch .shopimp-img { position: absolute; inset: 0; }
.shopimp-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Überlagerung beim Zeigen: Logo mittig, darunter der Link */
.shopimp-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; gap: 1.1rem; padding: 1.5rem;
  background: rgba(8, 8, 12, .78); color: #fff; text-align: center;
  opacity: 0; transition: opacity .3s ease;
}
.shopimp-kachel:hover .shopimp-overlay,
.shopimp-overlay:focus-visible { opacity: 1; }
.shopimp-logo { width: min(190px, 72%); height: auto; margin: 0 auto; }
.shopimp-name { font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 700; color: #fff; }
.shopimp-link {
  font-weight: 700; font-size: .95rem; color: #fff; justify-self: center;
  border-bottom: 1.5px solid rgba(255, 255, 255, .55); padding-bottom: 2px;
  transition: border-color .2s;
}
.shopimp-overlay:hover .shopimp-link { border-bottom-color: #fff; }
/* Ohne Zeigegerät gibt es kein Hover – dort dauerhaft, aber dezenter */
@media (hover: none) {
  .shopimp-overlay { opacity: 1; background: rgba(8, 8, 12, .45); }
}
@media (max-width: 767.98px) {
  .shopimp-galerie { grid-template-columns: 1fr; }
  .shopimp-kachel--hoch { aspect-ratio: 3 / 4; }
}
.shop-trust-line { color: #b06be8; }

/* Rudelheld-Case */
.section-rudelheld { background: #fff; padding: 6.5rem 0; }
.rudelheld-logo { width: min(430px, 80%); margin-bottom: 2rem; }
.rudelheld-quote {
  color: #8a15c9; font-size: 1.15rem; line-height: 1.7;
  border-left: 2px solid #c9a7e8; padding-left: 1.4rem;
}
/* Die Grafik füllt die volle Layoutbreite und ist freigestellt. */
.rudelheld-buehne { position: relative; }
.rudelheld-referenz { width: 100%; height: auto; display: block; }
/* Ab dem Zweispalter sitzen Logo und Zitat in der freien Ecke der Grafik.
   Ausgemessen am Alphakanal: frei sind die linken 32,2 % der Breite und
   die oberen 53 % der Höhe – darunter beginnt die Auswertungsfläche. */
@media (min-width: 992px) {
  .rudelheld-text {
    position: absolute; left: 0; top: 0; width: 32%; height: 53%;
    display: flex; flex-direction: column; justify-content: center;
    padding-right: 1.2rem;
  }
  .rudelheld-text .rudelheld-logo { width: min(300px, 92%); margin-bottom: 1.2rem; }
  .rudelheld-text .rudelheld-quote {
    font-size: clamp(.84rem, 1.02vw, 1.05rem); line-height: 1.6;
    padding-left: 1.1rem; margin: 0;
  }
}
@media (max-width: 991.98px) {
  .rudelheld-referenz { margin-top: 2rem; }
}

/* Ziel: Nur die Erdkugel mit Punkten und Polygonen, kein sichtbarer Rahmen.
   Der Videohintergrund ist nicht weiß, sondern hellblau (RGB 199/226/235) –
   ein reines "Multiplizieren" hätte diesen Ton als Rechteck stehen lassen.
   Der Filter zieht den Weißpunkt hoch, bis der Hintergrund exakt Weiß ist
   (nachgerechnet: 199/226/235 → 255/255/255), während die Kugel dunkel
   bleibt (19/80/108 → 0/67/113). "Multiplizieren" löscht das Weiß dann
   restlos. Screen wäre hier falsch: auf weißer Fläche ergibt Screen immer
   Weiß, das Video wäre unsichtbar. */
.hosting-globe {
  width: min(560px, 100%); height: auto; display: block; margin: 0 auto;
  /* contrast 1.6 statt 1.45: Die dunkelsten Bereiche der Kugel gehen damit
     auf 166 statt 178 – die Zeichnung tritt deutlicher hervor. brightness
     leicht zurück, damit der Rand trotzdem exakt bei 255 landet, und
     saturate für kräftigeres Blau. */
  filter: contrast(1.6) brightness(1.1) saturate(1.35);
  mix-blend-mode: multiply;
}
/* Etwas mehr Platz für die Kugel, ohne die Textspalte zu beschneiden.
   Erst ab 1200 px: darunter hat .container-xl nur die schmale
   Bootstrap-Polsterung, das Überstehen würde die Seite breiter machen. */
@media (min-width: 1200px) {
  .hosting-globe { width: calc(100% + 4vw); max-width: none; margin-right: -4vw; }
}

/* ════════════════ ORBIT.ONE-SEITE ════════════════ */
/* Höhe = sichtbares Fenster minus alles, was darüber steht (Topbar, Header,
   Brotkrumen). --hero-oben setzt main.js und misst dabei den echten Abstand;
   ohne JS greift der Fallback und der Hero ist genau fensterhoch.
   svh statt vh, damit die Adressleiste auf dem Handy nichts abschneidet. */
.orbit-hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - var(--hero-oben, 0px));
  display: grid; align-items: center;
  background: #030304; color: #fff; text-align: center;
  padding: clamp(3rem, 8vh, 7rem) 0 clamp(3.5rem, 9vh, 7rem);
}
.orbit-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Schwarzes Overlay: oben und unten kräftiger, damit Header und
   Scroll-Hinweis stehen, in der Mitte etwas durchlässiger fürs Bild */
.orbit-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.88) 100%);
}
.orbit-hero > .container-xl { position: relative; z-index: 2; }
.orbit-hero .hero-mouse { z-index: 2; bottom: 30px; }
/* Größe, Zeilenabstand und Schnitt wie .agentur-title auf der Agentur-Seite.
   Ohne max-width, damit die Zeilen die volle Containerbreite nutzen dürfen. */
.orbit-hero-title {
  font-size: clamp(1.5rem, 2.3vw, 2.3rem); line-height: 1.45;
  max-width: none; margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.orbit-hero-sub {
  color: #fff; margin: 1.6rem auto 0; max-width: 760px; font-size: 1.08rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
@media (max-width: 991.98px) {
  .orbit-hero { min-height: calc(92svh - var(--hero-oben, 0px)); }
}
/* Kein Autoplay-Zappeln, wenn Bewegung reduziert werden soll */
@media (prefers-reduced-motion: reduce) {
  .orbit-hero-video { display: none; }
}

/* Bildschirmfüllend wie der Hero. Der sticky Header liegt darüber, deshalb
   oben etwas mehr Polsterung, damit die Headline nicht darunter rutscht. */
.orbit-space {
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; align-items: stretch;
  background: #030304; color: #fff;
  padding: clamp(6rem, 12vh, 8.5rem) 0 clamp(3rem, 7vh, 5rem);
}
.orbit-space::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('../img/orbit/space-astronaut.webp') center center / cover no-repeat;
}
/* Nur leicht abdunkeln – das Motiv ist links ohnehin fast schwarz */
.orbit-space::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.25) 100%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 66%, rgba(0,0,0,.6) 100%);
}
/* Text oben, Prüfzeichen und Claim unten – wie in der Vorlage */
.orbit-space > .container-xl {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(2.5rem, 7vh, 5rem);
}
.orbit-space-text h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.mark-willkommen { background: #7b2ce0; color: #fff; padding: .05em .25em; border-radius: 4px; }
.orbit-space-text { max-width: none; }
/* Schriftgrößen 1:1 aus der Layoutvorlage: 23,5 px bei 1767 px Fensterbreite */
.orbit-space-text p {
  color: #fff; font-size: clamp(1.05rem, 1.33vw, 1.47rem); line-height: 1.5;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
.orbit-space-text p.mt-4 { margin-top: 2rem !important; }
.orbit-space-text p + p { margin-top: 1.5em; }

.orbit-space-fuss {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.orbit-tuev { width: clamp(190px, 15vw, 268px); height: auto; flex: 0 0 auto; }
.orbit-space-claim {
  text-align: right; color: #fff; margin: 0;
  font-size: clamp(1.05rem, 1.33vw, 1.47rem); line-height: 1.5;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
@media (max-width: 767.98px) {
  .orbit-space-claim { text-align: left; }
  .orbit-space-fuss { flex-direction: column; align-items: flex-start; }
  /* Hochformat schneidet das breite Bild stark an – Ausschnitt auf den
     Astronauten schieben, sonst bleibt nur schwarzer Raum übrig. */
  .orbit-space::before { background-position: 66% center; }
  .orbit-space::after {
    background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.78) 100%);
  }
}

/* Beide Vollbild-Abschnitte rasten beim Scrollen ein.
   proximity statt mandatory: greift in der Nähe, sperrt aber nichts. */
html:has(.orbit-space) { scroll-snap-type: y proximity; }
/* Nur der zweite Abschnitt ist Rastpunkt. Der Hero bewusst nicht: Sein
   Rastpunkt läge 156 px unter dem Seitenanfang (Topbar, Header, Brotkrumen),
   und der Browser würde die Seite schon beim Laden dorthin ziehen – ohne
   dass jemand gescrollt hat. */
.orbit-space, .orbit-zitat, .orbit-unternehmer, .orbit-methode, .orbit-warum {
  scroll-snap-align: start; scroll-snap-stop: always;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.orbit-space) { scroll-snap-type: none; }
}

/* Marcel-Zitat – bildschirmfüllend, Zitat rechts über der Wand */
.orbit-zitat {
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; align-items: center;
  background: #e9e9e7;
}
.orbit-zitat-bild { position: absolute; inset: 0; z-index: 0; }
.orbit-zitat-bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 42% center;
  display: block; transform: scale(1.005); transform-origin: 42% 50%;
}
/* Langsames Heranfahren, sobald der Abschnitt im Bild ist – läuft 5 s
   und bleibt danach stehen (forwards). */
.orbit-zitat-bild.visible img { animation: zitatZoom 5s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes zitatZoom {
  from { transform: scale(1.005); }
  to   { transform: scale(1.075); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-zitat-bild.visible img { animation: none; }
}
/* width:100% – als Flex-Kind würde der Container sonst auf Inhaltsbreite
   schrumpfen und margin-left:auto könnte das Zitat nicht nach rechts schieben. */
.orbit-zitat > .container-xl { position: relative; z-index: 2; width: 100%; }
.orbit-zitat-body { margin: 0 0 0 auto; max-width: 620px; padding: 0; }
.orbit-zitat-marke { width: 64px; height: auto; margin-bottom: 1.4rem; }
.orbit-zitat-text {
  font-style: italic; font-size: clamp(1.05rem, 1.35vw, 1.32rem); line-height: 1.75;
  color: #2a3040; margin: 0;
}
.orbit-zitat-author { font-style: italic; color: #4c5468; text-align: right; margin: 2rem 0 0; }
@media (max-width: 991.98px) {
  /* Hochformat: Gesicht bleibt im Bild, Text bekommt einen hellen Schleier */
  .orbit-zitat-bild img { object-position: 44% 22%; }
  .orbit-zitat-body {
    max-width: none; background: rgba(255, 255, 255, .82);
    padding: clamp(1.5rem, 5vw, 2.4rem); border-radius: 14px;
    backdrop-filter: blur(2px);
  }
}

/* Unternehmer-Box */
/* Bildschirmfüllend wie die Abschnitte davor */
.orbit-unternehmer {
  background: #fff; min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(5rem, 12vh, 9rem) 0;
}
.orbit-unternehmer > .container-xl { width: 100%; }
.orbit-claim {
  border-left: 7px solid #1d2333; padding: .6rem 0 .6rem 4.5rem;
  font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 700; color: #1d2333;
  line-height: 1.5; max-width: 1500px; margin: 0 auto;
}
/* Bündig unter dem Claim-Text statt frei in der Seitenmitte */
.orbit-claim-sub {
  max-width: 1500px; margin: clamp(2.5rem, 7vh, 5rem) auto 0; padding-left: 4.5rem;
}
.orbit-claim-sub p {
  color: #2a3040; line-height: 1.8; max-width: 760px; margin: 0;
  font-size: clamp(1.02rem, 1.2vw, 1.22rem);
}
@media (max-width: 767.98px) {
  .orbit-claim { padding-left: 1.5rem; border-left-width: 5px; }
  .orbit-claim-sub { padding-left: 1.5rem; }
}

/* Methode-Banner (Video) – bildschirmfüllend wie die Abschnitte davor */
.orbit-methode {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: 100svh; background: #05060a;
  padding: clamp(5rem, 12vh, 8rem) 0;
}
.orbit-methode > .container-xl { width: 100%; }
.orbit-methode video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45;
}
.orbit-methode .container-xl { position: relative; color: #fff; }
.orbit-methode h2 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); }
.orbit-methode-sub { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 300; color: #e2e5ec; }
.orbit-methode-quote {
  border-left: 3px solid #fff; padding-left: 1.6rem; margin-top: 2rem;
  color: #e2e5ec; max-width: 900px; line-height: 1.75;
}

.orbit-besonders { background: #fff; padding: 7rem 0 4rem; }
.besonders-intro {
  max-width: 780px; margin: 1.6rem auto 0; text-align: center;
  color: #4c5468; font-size: 1.05rem; line-height: 1.75;
}
.besonders-intro strong { color: var(--ink); }
.besonders-karte {
  height: 100%; background: #fff; border: 1.5px solid #e2e5ee; border-radius: 14px;
  padding: 1.9rem 1.7rem;
}
.besonders-karte h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 .7rem; }
.besonders-karte p { color: #4c5468; font-size: .95rem; line-height: 1.7; margin: 0; }
.besonders-trust { color: #8a15c9; }

/* 5 Phasen */
.orbit-phasen { background: #fff; padding: 4rem 0 6rem; }
.orbit-atom { width: 80px; margin: 2rem 0 0 -14px; filter: invert(.35) sepia(.9) saturate(6) hue-rotate(235deg); }
.orbit-timeline { border-left: 3px solid #e2e5ee; margin-left: 22px; }
/* Statische Markierung – wird noch auf marcel-p-schmitt.php verwendet */
.orbit-phase--rakete::before {
  content: '🚀'; position: absolute; left: -17px; top: 4.5rem; font-size: 1.6rem;
  transform: rotate(-45deg); background: #fff; padding: 4px 0;
}

/* ORBIT.ONE: Schiene mit fliegender Rakete.
   --flug (0…1) setzt main.js beim Scrollen. Bewusst auf die ID begrenzt,
   damit die gleich aufgebaute Zeitleiste auf marcel-p-schmitt.php unberührt bleibt. */
#orbitTimeline { position: relative; padding-bottom: 7rem; }
/* Gleiche Wegstrecke wie die Rakete (100% minus der reservierte Fuß),
   sonst läuft der Balken der Rakete davon. */
#orbitTimeline::before {
  content: ''; position: absolute; left: -3px; top: 0; width: 3px;
  height: calc(var(--flug, 0) * (100% - 7rem));
  background: linear-gradient(180deg, #a21ccb 0%, #7b5ce4 55%, #4da3e6 100%);
}
#orbitTimeline .orbit-rakete {
  position: absolute; left: -19px; top: calc(var(--flug, 0) * (100% - 7rem));
  font-size: 1.7rem; line-height: 1; z-index: 2;
  transform: translateY(-50%) rotate(135deg);
  background: #fff; padding: 5px 0;
}
/* Ziel am Ende der Schiene, dort kommt die Rakete an */
#orbitTimeline .orbit-atom {
  position: absolute; left: -41px; bottom: 1.4rem; width: 80px; margin: 0;
}
.orbit-phase { padding: 4rem 0 4rem clamp(2rem, 4vw, 4.5rem); position: relative; }
.orbit-phase-nr { font-size: clamp(5rem, 9vw, 8.5rem); font-weight: 700; color: #5a3fe8; line-height: .9; margin-bottom: 1rem; }
.orbit-phase h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: #1d2333; margin-bottom: 1.4rem; }
.orbit-checks { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.orbit-checks li { color: #2a3040; }
.orbit-checks li span { margin-right: .5rem; }
.orbit-ergebnis { color: #1d2333; }
/* Einheitliches Format für alle fünf Phasen, egal ob Bild oder Video */
.orbit-phase-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 14px; display: block;
}
.orbit-phasen-cta { padding: 2rem 0 0 clamp(2rem, 4vw, 4.5rem); }

/* Warum ORBIT.ONE */
/* Bildschirmfüllend wie die Abschnitte weiter oben: Foto als Ebene,
   Text unten darüber. */
.orbit-warum {
  position: relative; overflow: hidden; min-height: 100svh;
  display: flex; align-items: flex-end; background: #060606;
}
.orbit-warum-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%; display: block;
}
.orbit-warum::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,6,8,.55) 0%, rgba(6,6,8,.2) 35%, rgba(6,6,8,.9) 78%, rgba(6,6,8,.97) 100%);
}
.orbit-warum-box {
  position: relative; z-index: 2; width: 100%;
  color: #fff; padding: 3rem 0 clamp(3rem, 8vh, 5rem);
}
.orbit-warum-box h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.orbit-warum-box p { color: #fff; max-width: 1150px; }

/* ════════════════ REVEAL-ANIMATION ════════════════ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .logo-track { animation: none; }
}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 1199.98px) {
  .slider-outer { padding-right: 0; }
  /* position:relative statt static: Der Kartenslider ragt mit seinem
     Negativ-Margin (Luft für den Hover-Schatten) 44 px über diese Leiste und
     fing jeden Tap auf „Im Detail" ab. relative + z-index legt die Leiste
     über den unsichtbaren Rand – gemessen mit elementFromPoint. */
  .slider-nav { position: relative; z-index: 2; transform: none; flex-direction: row; margin-top: 1rem; }
}
@media (max-width: 991.98px) {
  .check-grid { grid-template-columns: 1fr 1fr; }
  .sender-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-row { min-height: 480px; }
  .footer-top { margin-bottom: 3rem; }
  .text-lg-end .footer-socials { justify-content: flex-start; }
  .badges-row { justify-content: center; }
}
@media (max-width: 767.98px) {
  .site-footer { padding-top: 7.5rem; }
  .footer-siegel { width: 92px; top: -30px; right: 10px; }
}
@media (max-width: 575.98px) {
  .check-grid { grid-template-columns: 1fr; }
  .sender-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-bgwords span { font-size: 3.4rem; }
  .review-card { flex-basis: 320px; }
  .service-card, .product-card { flex-basis: 260px; min-height: 340px; }
}

/* ══════════════ GOOGLEADS-SEITE ══════════════ */
.ga-collage { width: 100%; height: auto; }

.ga-banner {
  background-image: var(--banner-img);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(420px, 45.8vw, 880px);
}
.ga-banner-line1 {
  font-weight: 300;
  font-size: clamp(1.15rem, 1.7vw, 1.7rem);
  color: #fff;
  margin-bottom: .4rem;
}
.ga-banner-line2 {
  font-weight: 700;
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  color: #fff;
  margin-bottom: 0;
}

/* Hausschrift und Hausfarben statt Googles Roboto/#202124 – der Abschnitt
   sah aus wie aus Googles eigenem Marketing kopiert. Fläche wie
   .kmu-leistungen, damit die Farbfolge der Seite stimmt. */
.section-google-ziele { background: #fbfbfd; color: #16181d; padding: 7rem 0; }
.section-google-ziele .h-display { color: var(--ink); }
.section-google-ziele .news-kicker { color: #6b7280; }
.ziele-lead { color: #3d4457; line-height: 1.75; max-width: 720px; margin: 1.2rem 0 0; }
.section-google-ziele .partner-card { background: #fff; box-shadow: 0 14px 34px rgba(20, 24, 40, .07); }
.section-google-ziele .partner-card h3 { font-size: 1.15rem; line-height: 1.4; }
.section-google-ziele .partner-card p { line-height: 1.75; }
/* .ziele-title und .ziel-card* stammen aus dem alten Google-Look und werden
   seit dem Umbau (07.08.2026) von keiner Seite mehr verwendet – aufbewahrt,
   weil das Projekt nicht versioniert ist. Auch die Bilder ziel-*.png im
   Ordner googleads/ hängen daran. */
.ziele-title {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  color: #202124;
}
.ziel-card { text-align: center; max-width: 330px; margin: 0 auto; }
.ziel-card img { width: 112px; height: 112px; border-radius: 50%; }
.ziel-card h3 {
  font-family: inherit;
  font-weight: 400;
  font-size: 1.2rem;
  color: #202124;
  margin: 1.6rem 0 .9rem;
}
.ziel-card p {
  font-family: inherit;
  font-size: .98rem;
  color: #5f6368;
  margin-bottom: 0;
}

/* ══════════════ MARCEL-P.-SCHMITT-SEITE ══════════════ */
.ms-hero { background: #0b0b0d; }
.ms-hero-wrap { position: relative; }
.ms-hero-img { width: 100%; display: block; }
.ms-hero-name { position: absolute; left: 13.5%; top: 69%; }
.ms-hero-name h1 {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.45rem);
  color: #fff;
  margin-bottom: .6rem;
}
.ms-hero-name p {
  font-weight: 300;
  font-size: clamp(.85rem, 1.15vw, 1.18rem);
  color: #f0f1f4;
  margin: 0;
}
.ms-hero-quote { position: absolute; left: 63.2%; top: 29.5%; width: 33%; }
.ms-quote-icon { margin-bottom: 1.4rem; width: clamp(30px, 3vw, 58px); }
.ms-quote-text {
  font-style: italic;
  font-size: clamp(.78rem, 1.2vw, 1.22rem);
  line-height: 1.72;
  color: #3a3f47;
  margin-bottom: .6rem;
}
.ms-quote-author {
  font-style: italic;
  text-align: right;
  color: #3a3f47;
  font-size: clamp(.78rem, 1.1vw, 1.1rem);
  margin: 0;
}
.ms-tuev { display: block; margin: 2.2rem 0 0 auto; width: 39.5%; }

.ms-quali { background: #fff; color: #16181d; padding: 7rem 0; }
.ms-quali .h-display { color: #16181d; }
.ms-beraten-link {
  display: inline-block;
  margin-top: 1rem;
  color: #8a15c9;
  text-decoration: underline;
  font-weight: 400;
}
.ms-beraten-link:hover { color: #6a0fa0; }
.ms-badges {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 3rem 3.5rem;
  justify-content: center;
}
.ms-badges img { width: 170px; height: 170px; }

@media (max-width: 991.98px) {
  /* Der Name liegt am Desktop AUF dem dunklen Foto (absolute, weiß). Mobil
     wächst der Hero um die statisch gewordene Zitat-Karte – bottom:6% legte
     den weißen Namen damit AUF die helle Karte: weiß auf weiß (Scan 16.08.).
     Mobil steht er deshalb im Fluss zwischen Foto und Karte, dunkel. */
  .ms-hero-name { position: static; padding: 1.4rem 1.5rem .2rem; }
  /* Farbe bleibt weiß – der Sektionsgrund hinter der neuen Position ist
     dunkel. Das Problem war allein die absolute Position auf der Karte. */
  .ms-hero-quote {
    position: static;
    width: auto;
    background: #edecea;
    padding: 2rem 1.5rem;
  }
  .ms-tuev { width: 250px; max-width: 60%; }
  .ms-badges img { width: 130px; height: 130px; }
}

/* ══════════════ ATV-BANNER-SEITE ══════════════ */
/* Senderwand im Header: eine Reihe läuft gleichmäßig nach links durch –
   dieselbe Mechanik wie die Kundenlogos auf der Startseite (@keyframes
   marquee). Das Band enthält den Satz zweimal; damit die −50 % exakt auf den
   Anfang der Kopie treffen, trägt jeder Satz rechts denselben Innenabstand
   wie den Abstand zwischen den Karten – sonst springt die Schleife um einen
   halben Zwischenraum. */
/* Etwas höher als die Layoutmitte – per transform, damit die Verschiebung
   exakt 30 px beträgt und die Zeilenhöhe nicht mitwandert (bei einem
   negativen Außenabstand käme durch das zentrierte Ausrichten nur die Hälfte an). */
.sender-wall { display: grid; gap: 14px; transform: translateY(-30px); }

.sender-marquee {
  position: relative; overflow: hidden;
  /* Voll deckend nur in der Mitte, zu beiden Seiten ausklingend */
  mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0, 0, 0, .28) 16%, rgba(0, 0, 0, .8) 38%,
    #000 50%, rgba(0, 0, 0, .8) 62%, rgba(0, 0, 0, .28) 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0, 0, 0, .28) 16%, rgba(0, 0, 0, .8) 38%,
    #000 50%, rgba(0, 0, 0, .8) 62%, rgba(0, 0, 0, .28) 84%, transparent 100%);
}
.sender-track {
  display: flex; width: max-content;
  animation: marquee var(--lauf, 62s) linear infinite;
  will-change: transform;
}
.sender-set { display: flex; gap: 16px; padding-right: 16px; }
.sender-wall:hover .sender-track { animation-play-state: paused; }
/* Breiter als hoch, damit die meist liegenden Logos die Karte ausfüllen und
   nicht in einer großen weißen Fläche schwimmen. Bei vier Reihen bestimmt die
   Höhe die Gesamthöhe der Wand – deshalb breit und flach. */
.sender-set .sender-card { flex: 0 0 200px; aspect-ratio: 7/4; padding: .9rem; }
/* Farbe behält nur die Mitte. Den Wert setzt main.js je Karte aus dem Abstand
   zur Bandmitte – so bleibt genau die mittlere Karte farbig, die Nachbarn
   verlieren die Farbe zunehmend. Ohne JavaScript bleiben alle farbig. */
.sender-set .sender-card {
  filter: grayscale(calc(1 - var(--farbe, 1)));
  transition: filter .2s linear;
}
@media (prefers-reduced-motion: reduce) { .sender-track { animation: none; } }
@media (max-width: 991.98px) {
  .sender-set .sender-card { flex: 0 0 180px; }
}
@media (max-width: 575.98px) {
  .sender-set .sender-card { flex: 0 0 150px; padding: .9rem; }
  .sender-set { gap: 12px; padding-right: 12px; }
}

/* Eigene Fläche in unserem schwarzen Verlauf – ohne sie scheint der
   Sternenhimmel der Seite zwischen den Kacheln durch. */
.atv-sizes { padding: 5rem 0 7rem; background: var(--grad-dark) fixed; }
.atv-size-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  border-radius: 14px;
  /* Zwei Ebenen: das Foto deckend über unserem schwarzen Verlauf. Der Verlauf
     ist die Kachelfläche selbst – wo das Foto nicht hinreicht, steht er
     undurchsichtig darunter, kein Seitenhintergrund scheint durch. */
  /* Der dunkle Fuß für die Schrift liegt als OBERSTE Ebene mit im Stapel –
     früher war er ein ::after mit eigener Rundung, und weil Foto und Fuß
     dann von zwei getrennten Malvorgängen geglättet wurden, deckten sich
     die Kurven an den unteren Ecken nie exakt: Ein heller Fotosaum blieb
     sichtbar. Im selben Stapel rundet EIN Malvorgang alles gemeinsam.
     (Die Prozentwerte entsprechen dem alten ::after: 62 % hoch mit Stufen
     bei 0/40/100 % → auf volle Höhe umgerechnet 38/62,8/100 %.) */
  background-image:
    linear-gradient(180deg,
      rgba(5, 5, 7, 0) 38%, rgba(5, 5, 7, .54) 62.8%, rgba(5, 5, 7, .93) 100%),
    var(--karten-bild), var(--grad-dark);
  background-size: 100% 100%, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  padding: 1.6rem 1.8rem;
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s ease;
}
/* Farbschleier im Markenverlauf: magenta oben links nach blau unten rechts.
   Er bindet die drei unterschiedlichen Fotos optisch zusammen. */
.atv-size-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg,
    rgba(162, 28, 203, .52) 0%, rgba(123, 92, 228, .44) 48%, rgba(77, 163, 230, .5) 100%);
  transition: opacity .3s;
  /* Eigene Rundung statt nur vom Container beschnitten zu werden: Beim
     Clipping einer eckigen Farbfläche entsteht an den Ecken eine doppelte
     Antialiasing-Kante – sichtbar als unsauberer Saum unten. */
  border-radius: 14px;
}
.atv-size-card:hover::before { opacity: .82; }
.atv-size-card > * { position: relative; z-index: 1; }
.atv-size-card:hover { transform: translateY(-6px); }
.atv-size-card .product-ext { position: absolute; top: 1.2rem; right: 1.2rem; width: 26px; }
.atv-size-title { color: #fff; font-size: 1.5rem; font-weight: 400; }
.atv-size-card .order-hint { color: #e8e9ee; font-size: .8rem; margin-top: .3rem; }

/* Mehr Luft nach oben: davor endet das helle Zitat-Modul direkt an der Kante,
   die Überschrift stand dadurch zu dicht darunter. */
.atv-tvdemo { padding: 7.5rem 0 7rem; }
.atv-quelle { color: #9aa0ab; font-size: .8rem; margin-top: .8rem; }

/* Zwei Werbemittelbeispiele als Klick-Videos, gleich groß im Sendeformat 16:9 */
.tvdemo-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2rem; max-width: 1180px; margin: 2.8rem auto 0;
}
.tvdemo-karte { margin: 0; }
.tvdemo-video {
  aspect-ratio: 16 / 9; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .38);
}
.tvdemo-video img,
.tvdemo-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tvdemo-karte figcaption { margin-top: 1rem; text-align: left; }
.tvdemo-karte figcaption strong {
  display: block; color: #fff; font-size: 1.02rem; margin-bottom: .15rem;
}
.tvdemo-karte figcaption span { color: #c3c9d4; font-size: .88rem; line-height: 1.6; }
@media (max-width: 767.98px) {
  .tvdemo-grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; margin-top: 2rem; }
}

.atv-lohnt { background: #fff; color: #16181d; padding: 7rem 0; }
.atv-lohnt .h-display { color: #16181d; }

/* .atv-underline steht noch im Header von atv-banner-kmu.php.
   .atv-familie und .atv-checks werden seit dem Umbau der KMU-Seite von KEINER
   Seite mehr verwendet – nur aufbewahrt, weil das Projekt nicht versioniert
   ist. Können weg, sobald das feststeht. */
.atv-familie { width: 100%; border-radius: 16px; }
.atv-underline {
  text-decoration: underline;
  text-decoration-color: #4f5ae8;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
.atv-checks { list-style: none; padding: 0; margin: 1.8rem 0; }
.atv-checks li { position: relative; padding-left: 2.4rem; margin-bottom: 1.1rem; }
.atv-checks li::before {
  content: '✓';
  position: absolute; left: 0; top: .05rem;
  width: 24px; height: 24px; border-radius: 50%;
  background: #4f5ae8; color: #fff; font-size: .85rem;
  display: grid; place-items: center;
}
.atv-checks strong { display: block; }
.atv-checks span { color: #6b7280; font-size: .85rem; }

/* Luft zwischen Bild und Text. Als Innenabstand der Spalte, nicht als
   Bootstrap-Gutter: ein größerer Gutter erzeugt negative Außenabstände an der
   Zeile und schiebt die Seite bei schmalen Containern in den Überlauf. */
@media (min-width: 992px) {
  .atv-lohnt-text { padding-left: 5rem; }
}

/* Bild mit Verlaufsring wie die Karten im Premium-Bereich */
.atv-lohnt-bild {
  margin: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(20, 24, 40, .18);
}
.atv-lohnt-bild img { width: 100%; height: auto; display: block; }

/* Studienwerte im Textblock neben dem Bild: 2x2, getrennt durch feine Linien
   statt Kästen – ruhiger als vier Karten und trägt die Aussage. */
.atv-wirkung {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin-top: 2.4rem; border-top: 1px solid #e6e8f0;
}
.atv-wirkung-karte { padding: 1.5rem 1.5rem; border-bottom: 1px solid #e6e8f0; }
.atv-wirkung-karte:nth-child(odd)  { padding-left: 0; }
.atv-wirkung-karte:nth-child(even) { border-left: 1px solid #e6e8f0; }
.atv-wirkung-wert {
  font-size: clamp(1.9rem, 2.7vw, 2.5rem); font-weight: 700; line-height: 1;
  margin: 0 0 .55rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.atv-wirkung-titel { font-size: .98rem; color: var(--ink); margin: 0 0 .25rem; font-weight: 700; }
.atv-wirkung-text { color: #6b7280; font-size: .82rem; line-height: 1.5; margin: 0; }

.atv-lohnt-fuss {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem 3rem; align-items: start; margin-top: 2.4rem;
}
.atv-lohnt-nutzung { color: #4c5468; font-size: .92rem; line-height: 1.7; margin: 0; }
.atv-quelle-klein { color: #9aa0ab; font-size: .75rem; margin: 0; }

@media (max-width: 991.98px) {
  .atv-lohnt-fuss { grid-template-columns: minmax(0, 1fr); }
}
/* Smartphone: Kacheln statt Linienraster. Die alte Regel hier versuchte nur,
   border-left zu entfernen – und verlor gegen :nth-child(even) (höhere
   Spezifität), die Linien blieben also stehen und wirkten wie ein kaputter
   Tabellenrahmen. Die Selektoren unten nennen die nth-child-Varianten
   deshalb ausdrücklich. */
@media (max-width: 767.98px) {
  .atv-wirkung { border-top: 0; gap: .7rem; margin-top: 1.8rem; }
  .atv-wirkung-karte,
  .atv-wirkung-karte:nth-child(odd),
  .atv-wirkung-karte:nth-child(even) {
    border: 0;
    background: #f6f6fa;
    border-radius: 12px;
    padding: 1.1rem 1rem;
  }
  .atv-wirkung-wert { font-size: 1.7rem; }
  /* Die Dunkel-Variante (Mobile Apps, CTV) liegt auf dunkler Sektion und
     färbt ihre Titel weiß – mit den hellen Kacheln von oben ergab das weiße
     Schrift auf fast weißem Grund (gemeldet 16.08.). Dort deshalb dunkle
     Kacheln, passend zur Umgebung; die Schriftfarben der Variante bleiben. */
  .atv-wirkung--dunkel .atv-wirkung-karte,
  .atv-wirkung--dunkel .atv-wirkung-karte:nth-child(odd),
  .atv-wirkung--dunkel .atv-wirkung-karte:nth-child(even) {
    background: rgba(255, 255, 255, .07);
  }
}

.atv-fakten { background: #fff; padding: 0 0 7rem; }
.atv-fakten-panel {
  background: #f1f2f4;
  border-radius: 20px;
  padding: 3.5rem 3.5rem 4rem;
  color: #16181d;
}
.atv-fakten-panel .h-sub { color: #16181d; }
.atv-fakten-panel .num-value { color: #16181d; font-size: clamp(2.4rem, 4vw, 3.6rem); }
.atv-fakt-kicker {
  font-weight: 600;
  border-bottom: 2px solid #16181d;
  padding-bottom: .8rem;
  margin-bottom: 1.6rem;
}
.atv-fakt-text { color: #6b7280; font-size: .9rem; }

/* ── Liquid Glass: dieselbe Box, aber durchscheinend auf einem Foto ──
   Bewusst weiß-transparent und nicht dunkel: So bleiben Schriftfarben,
   Kicker-Linie und Zahlen exakt die der Fassung auf atv-banner.php. Die
   Deckung ist gemessen, nicht geschätzt – hinter der Box wechseln heller
   Himmel und dunkle Bäume, und unter dem Weichzeichner zählt der örtliche
   Mittelwert, nicht das Einzelpixel. */
.atv-fakten-panel--glas {
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 26px 70px rgba(8, 10, 18, .34),
              inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Der dunkelste örtliche Mittelwert hinter der Box ist RGB 95/63/35 (Bäume und
   Backstein). Bei 66 % Deckung wird daraus 200/190/180 – das trägt die dunkle
   Schrift mit 9,7:1, das ursprüngliche Grau #6b7280 der Beschreibungstexte aber
   nur mit rund 3,2:1. Deshalb sind sie hier dunkler als auf atv-banner.php;
   #3a4152 ergibt 5,6:1. */
.atv-fakten-panel--glas .atv-fakt-text { color: #3a4152; }
/* Ohne Backdrop-Filter (älteres Safari, Firefox ohne Flag) stünde die Schrift
   auf dem nackten Foto – dann deckt die Fläche fast vollständig ab. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .atv-fakten-panel--glas { background: rgba(246, 247, 249, .95); }
}
.btn-indigo {
  display: inline-block;
  background: #5b4be8;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  padding: .8rem 1.6rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s ease;
}
.btn-indigo:hover { background: #4837d6; color: #fff; }

.atv-wohnzimmer { position: relative; background: #060606; }
.atv-wohnzimmer-img { width: 100%; display: block; }
.atv-wohnzimmer-text {
  position: absolute;
  left: 13%;
  bottom: 16%;
}
/* Schriftgröße wie die Banner-Überschrift auf der Agentur-Seite
   (.agentur-banner h2) – vorher war der Satz halb so groß wie dort. */
.atv-wohnzimmer-text p {
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.4;
  margin: 0;
}

.atv-vergleich { background: #fff; color: #16181d; padding: 7rem 0; }
.atv-vergleich-kopf { max-width: 760px; margin: 0 auto; }
/* Vorher clamp(1.1rem … 1.4rem): kleiner als die Kartentitel darunter. Jetzt
   das Maß der übrigen Überschriften auf hellen Flächen. */
.atv-vergleich-titel { font-size: clamp(1.55rem, 2.05vw, 2.05rem); font-weight: 400; line-height: 1.35; }

/* Zwei gleich hohe Karten statt Bootstrap-Spalten: so stehen sie unabhängig
   von der Zeilenzahl auf derselben Höhe und rücken näher zusammen. */
.vgl-paar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem; max-width: 1080px; margin: 3rem auto 0; align-items: stretch;
}
.vgl-card {
  border-radius: 18px; padding: 2.2rem 2.1rem; height: 100%;
  border: 1px solid; display: flex; flex-direction: column;
}
/* Deutlich blassere Flächen als vorher – die Farbe soll einordnen, nicht
   überschreien. Die Aussage tragen Text und Zeichen. */
.vgl-card--rot   { background: #fdf4f4; border-color: #f3d3d5; }
.vgl-card--gruen {
  background: #f2fbf4; border-color: #bfe9c9;
  box-shadow: 0 20px 46px rgba(31, 169, 67, .1);
}
.vgl-label {
  font-size: .7rem; letter-spacing: 2.5px; text-transform: uppercase;
  margin: 0 0 .5rem; font-weight: 400;
}
/* Dunkler als der erste Entwurf: 11,2 px brauchen 4,5:1, die hellen Töne
   lagen bei 3,84 bzw. 4,09:1. */
.vgl-card--rot   .vgl-label { color: #95484d; }
.vgl-card--gruen .vgl-label { color: #237038; }
.vgl-card h3 {
  font-size: 1.2rem; font-weight: 700; color: #16181d;
  margin: 0 0 1.6rem; padding-bottom: 1.1rem; border-bottom: 1px solid;
}
.vgl-card--rot   h3 { border-color: #f3d3d5; }
.vgl-card--gruen h3 { border-color: #bfe9c9; }
.vgl-list { list-style: none; padding: 0; margin: 0; }
.vgl-list li { position: relative; padding-left: 2.3rem; margin-bottom: 1.15rem; font-size: .93rem; line-height: 1.6; }
.vgl-list li:last-child { margin-bottom: 0; }
.vgl-card--rot .vgl-list li { color: #5c4a4c; }
/* Kreuz und Haken als gezeichnete Formen, nicht als Schriftzeichen: die
   Glyphen ✕ und ✓ sitzen in ihrer Zeilenbox nicht mittig, deshalb standen sie
   im Kreis leicht versetzt. Die SVG-Marken sind symmetrisch zum viewBox-
   Mittelpunkt, background-position:center trifft damit exakt die Kreismitte. */
.vgl-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .1rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 11px 11px;
}
.vgl-list--x li::before {
  border: 1.5px solid #eab4b8;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23d1454c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18'/%3E%3Cpath d='M18 6 6 18'/%3E%3C/g%3E%3C/svg%3E");
}
.vgl-list--check li::before {
  border: 1.5px solid #1fa943;
  background-color: #1fa943;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 11.75 10 16.25 18.5 7.75' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 767.98px) {
  .vgl-paar { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-top: 2.2rem; }
  .vgl-card { padding: 1.6rem 1.4rem; }
}

.atv-cta-balken {
  display: inline-block;
  background: #16181d;
  color: #fff;
  font-weight: 700;
  padding: 1rem 2.4rem;
  border-radius: 10px;
  text-decoration: none;
  line-height: 1.45;
  transition: background .2s ease;
}
.atv-cta-balken:hover { background: #2c2f38; color: #fff; }
.atv-cta-balken small { font-weight: 400; color: #c9ccd4; font-size: .82rem; }
.atv-fussnote { color: #9aa0ab; font-size: .72rem; margin-top: 1.4rem; }

.atv-buero { position: relative; background: #060606; }
.atv-buero-img { width: 100%; height: auto; display: block; }
.atv-buero-karte {
  position: absolute;
  left: 10%;
  top: 8%;
  bottom: 8%;
  width: 36%;
  min-width: 380px;
  background: #fff;
  border-radius: 18px;
  padding: 2.4rem 2.3rem;
  color: #16181d;
  box-shadow: 0 30px 70px rgba(6, 6, 6, .38);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.atv-buero-karte h2 { font-size: clamp(1.4rem, 1.9vw, 1.75rem); font-weight: 700; margin: .3rem 0 0; line-height: 1.3; }
.atv-buero-karte .news-kicker { font-size: .72rem; letter-spacing: 2.5px; }
.atv-buero-karte > p { font-size: .88rem; line-height: 1.7; color: #3a3f47; margin-top: 1rem; }
.atv-buero-karte .btn-dark-solid { font-size: .8rem; padding: .7rem 1.2rem; }
.atv-buero-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

/* Kundenlogos als laufendes Band. Vorher stand hier eine Bilddatei, die an der
   Kartenkante mitten im Logo abgeschnitten wurde. */
.atv-buero-logos {
  margin-top: 1.8rem; padding-top: 1.5rem; overflow: hidden;
  border-top: 1px solid #e6e8f0;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.atv-buero-track {
  display: flex; width: max-content;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.atv-buero-satz { display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; }
.atv-buero-satz img { height: 34px; width: auto; max-width: 120px; object-fit: contain; }
.atv-buero-logos:hover .atv-buero-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .atv-buero-track { animation: none; } }

/* ── Variante --tv (nur atv-banner.php) ──────────────────────────────
   Foto als deckende Ebene hinter dem Inhalt, Karte im normalen Fluss auf
   der Container-Achse. Die Kartenhöhe bestimmt die Abschnittshöhe – nichts
   wird mehr abgeschnitten, das Bild nie verzerrt (object-fit: cover). */
.atv-buero--tv { padding: 6.5rem 0; overflow: hidden; }
.atv-buero--tv .atv-buero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Dunkler Verlauf von links, damit die Karte ruhig auf dem Foto steht */
.atv-buero--tv::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 14, .5), rgba(8, 8, 14, .08) 62%);
}
.atv-buero--tv .container-xl { position: relative; }
.atv-buero--tv .atv-buero-karte {
  position: relative; left: auto; top: auto; bottom: auto;
  width: min(620px, 100%); min-width: 0;
  border-radius: 20px; padding: clamp(1.8rem, 3vw, 3rem);
  box-shadow: 0 36px 90px rgba(6, 6, 6, .45);
  display: block; overflow: hidden;
  /* Verlaufsring: 1px Markenverlauf um die weiße Fläche */
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
}
.atv-buero--tv .atv-buero-karte h2 { font-size: clamp(1.5rem, 2.1vw, 1.95rem); }
.atv-buero--tv .atv-buero-karte > p { font-size: .92rem; }
@media (max-width: 991.98px) {
  .atv-buero--tv { padding: 4rem 0; }
  .atv-buero--tv .atv-buero-karte { margin: 0; width: 100%; }
}
.btn-outline-hell {
  display: inline-block;
  border: 1px solid #c9ccd4;
  color: #16181d;
  font-size: .8rem;
  padding: .7rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
}
.btn-outline-hell:hover { border-color: #16181d; color: #16181d; }
.atv-karte-kunden { text-align: center; font-size: .78rem; color: #6b7280; margin: .9rem 0 0; }

/* .atv-kompetenz* (Badges-Band) wird seit dem Umbau der KMU-Seite von keiner
   Seite mehr verwendet – siehe Hinweis bei .atv-familie. Die beiden
   .atv-faq-*-Regeln darunter trägt die FAQ auf atv-banner-kmu.php weiterhin. */
.atv-kompetenz { background: #fff; padding: 4rem 0 5rem; }
.atv-kompetenz-badges { max-width: 620px; width: 100%; }
.atv-kompetenz-text { color: #3a3f47; font-size: .9rem; margin-top: 1.6rem; }
.atv-faq-titel { color: #5b4be8; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; }
.atv-faq-sub { color: #9aa0ab; }

/* FAQ im wwd-Akkordeon-Stil: links die Einordnung, rechts die Fragen */
.atv-faq { background: #fff; color: #16181d; padding: 7rem 0 8rem; }
.atv-faq .h-display { color: var(--ink); }
.atv-faq-hinweis { color: #5a6472; margin-top: 1.2rem; line-height: 1.7; }
.atv-faq-hinweis a { color: var(--indigo); text-decoration: none; border-bottom: 1px solid rgba(90, 86, 239, .35); }
.atv-faq-hinweis a:hover { color: var(--purple); border-bottom-color: var(--purple); }
/* FAQ-Fragen sind Sätze, keine Schlagworte – eine Stufe kleiner als die
   großen wwd-Titel, sonst brechen sie dreizeilig um. */
.wwd-titel--faq { font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.45; }

@media (max-width: 991.98px) {
  /* min-width aufheben: sonst wäre die Karte auf 360-px-Geräten breiter
     als der Platz zwischen den Rändern. */
  .atv-buero-karte { position: static; width: auto; min-width: 0; margin: -3rem 1rem 2rem; }
  .atv-wohnzimmer-text { position: static; padding: 1.5rem; background: #060606; }
}

/* ══════════════ ATV-GROSSKUNDEN-SEITE ══════════════ */
.gk-hero-video { width: 100%; height: auto; border-radius: 14px; }
/* Klick-Fassade des Kopfvideos – auf atv-banner-grosskunden.php und
   atv-banner-kmu.php. Die Regel ohne .video-facade darüber gilt zusätzlich für
   einfache Bilder mit demselben Klassennamen. */
.video-facade.gk-hero-video {
  aspect-ratio: 16 / 9; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.video-facade.gk-hero-video img,
.video-facade.gk-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gk-hero-claims { display: flex; gap: 2.4rem; align-items: flex-start; margin-top: 2.6rem !important; }

/* Eckwinkel oben rechts und unten links rahmen den Text ein, ohne ihn
   einzukasteln. Gezeichnet über zwei Pseudoelemente, die jeweils nur zwei
   Kanten tragen – deshalb sitzt der Text in einem eigenen Innenabstand. */
.gk-hero-claim {
  position: relative;
  flex: 0 1 auto;
  max-width: 26rem;
  padding: 1.2rem 1.5rem;
}
.gk-hero-claim::before,
.gk-hero-claim::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: #3f7ae0;
  border-style: solid;
  pointer-events: none;
}
.gk-hero-claim::before { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.gk-hero-claim::after  { bottom: 0; left: 0;  border-width: 0 0 1.5px 1.5px; }

.gk-hero-claim p {
  color: #5b8cf7;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.7;
  margin-bottom: .9rem;
}
/* Zweiter Absatz in normaler Stärke – im Haus-Font rendert 400 den
   Medium-Schnitt, deshalb 300 für die leichtere Fassung. */
.gk-hero-claim-leicht { font-weight: 300 !important; }
/* Das TÜV-Prüfzeichen ist ein breites Rechteck (700×258) – Höhe frei lassen,
   sonst wird es gestaucht. */
.gk-tuev-kasten { width: 200px; height: auto; flex-shrink: 0; border-radius: 6px; }

/* Schleier, Fußraum und Titelbreite kommen von .pw-banner. Nur der Schleier
   ist etwas kräftiger: im Motiv liegt hinter der Zeile das helle
   Fernsehlicht (Pixel bis 218), mit dem Premium-Schleier allein blieben
   dort 2,6:1. */
.gk-familie::before {
  background:
    linear-gradient(90deg, rgba(8, 10, 14, .72), rgba(8, 10, 14, .35) 80%),
    rgba(8, 10, 14, .44);
}

/* Die Kacheln ragen hier in ein Foto statt in ein Video – auf hellem Grund
   brauchen sie eine feine Kante, damit sie sich absetzen. Sie greifen außerdem
   weiter nach oben als auf Premium Website und halten mehr Abstand zum Text.
   Beides bewusst nur hier: .pw-features gilt auch für premium-website.php. */
@media (min-width: 992px) {
  .gk-zukunft .pw-features .partner-card--soft { border: 1px solid rgba(18, 20, 30, .07); }
  /* Luft zum Text wie auf Premium Website – als Innenabstand der Textspalte,
     ein Raster-Abstand würde über die negativen Zeilenränder seitlichen
     Überstand erzeugen. Die Überlappung selbst kommt unverändert aus
     .pw-features (-12,75rem), damit beide Seiten gleich aussehen. */
  .gk-zukunft .col-lg-7 { padding-right: 36px; }
}

.gk-zukunft { background: #fff; color: #16181d; padding: 7rem 0; }
.gk-zukunft .h-display { color: #16181d; }
.gk-card-icon { width: 52px; height: 52px; border-radius: 50%; margin-bottom: 1.1rem; }

/* Weiße Vollbreiten-Sektion wie .atv-lohnt / .gk-zukunft – deckt den
   Galaxie-Hintergrund vollständig ab, kein Panel im Panel. */
.gk-multiscreen { background: #fbfbfd; color: #16181d; padding: 7rem 0; }
.gk-multiscreen .h-display { color: var(--ink); }
.gk-multiscreen p { color: #3d4457; line-height: 1.75; }
.gk-multiscreen .news-kicker { color: #6b7280; }   /* Standardgrau, nicht die Absatzfarbe */

/* Kanäle als Logozeile – helle Logos abgedunkelt wie in den wwd-Markenzeilen.
   SVGs ohne width/height-Attribut brauchen feste Breiten, sonst kollabieren
   sie auf 0. Breite und Höhe deshalb immer paarweise setzen. */
.gk-ms-kanaele {
  display: flex; align-items: center; flex-wrap: wrap; gap: .9rem 1.4rem;
  margin-top: 2rem; padding-top: 1.6rem;
  border-top: 1px solid #e6e8f0;
}
/* Gleich groß heißt: gleiche Höhe der Buchstaben, nicht gleiche Kastenmaße.
   Google und affinity füllen ihre Datei randlos, das Meta-Lockup trägt ab
   Werk einen transparenten Rand (1000 von 6962 Einheiten links/rechts, 1000
   von 3000 oben/unten). Bei gleicher Kastenbreite blieben die Meta-Lettern
   deshalb ein Drittel kleiner. Der Kasten ist hier so weit vergrößert, dass
   die Schrifthöhe zu den beiden anderen passt (~18,5 px); die negativen
   Ränder ziehen den Leerraum wieder heraus, damit der Abstand in der Zeile
   überall gleich bleibt. Datei absichtlich unangetastet – sie wird auch auf
   strategie.php verwendet. */
.gk-ms-kanaele img { filter: brightness(0); opacity: .8; }
.gk-ms-kanaele img[alt="Meta"] { width: 135px; height: 58px; margin: -19px; }
.gk-ms-kanaele img[alt="Google Ads"] { width: 84px; height: 27px; }
.gk-ms-kanaele img[alt="affinity"] { width: 84px; height: 23px; }
.gk-ms-plus { color: #9aa0ab; font-size: 1.1rem; line-height: 1; }

/* Die Grafik liegt direkt auf der weißen Fläche */
.gk-ms-inventar { margin: 0; }
.gk-ms-inventar img { width: 100%; max-width: 460px; height: auto; margin: 0 auto; display: block; }
.gk-ms-inventar-text {
  color: #6b7280; font-size: .84rem; line-height: 1.6; text-align: center;
  margin: 1.4rem auto 0; max-width: 420px;
}
.gk-ms-inventar-text strong { color: var(--ink); }

@media (min-width: 992px) {
  /* Luft zwischen Text und Grafik – als Innenabstand, nicht als Gutter */
  .gk-multiscreen .col-lg-6:first-child { padding-right: 48px; }
}

/* ── „So funktioniert ATV" als Bildbanner ───────────────────────────
   Vorher lag der Fließtext mit 0,78rem in Hellgrau direkt auf dem Foto;
   Schriftgröße, Schleier und Zeilenlänge kommen daher hier neu.

   Das Foto steht in voller Höhe ohne Beschnitt (56,25vw = 16:9) und liegt
   hinter dem Text. Alle Maße unten sind deshalb in vw gerechnet und gelten
   damit bei jeder Fensterbreite gleich: Die Unterkante des Fernsehers liegt
   bei 46,7 % der Bildhöhe (nachgemessen), das LED-Licht darunter reicht bis
   etwa 50 %.
   Der Text beginnt frühestens bei 31vw (padding-top), rutscht auf breiten
   Fenstern per align-items: flex-end aber weiter nach unten. Reicht die
   Bildhöhe für den Text nicht, wächst der Abschnitt einfach über das Foto
   hinaus – der Schleier endet ohnehin in derselben Farbe.

   Die drei Ebenen brauchen ausdrückliche z-index-Werte: Das Foto ist hier
   ein echtes <img> (wegen des alt-Textes), kein CSS-Hintergrund wie bei den
   anderen Bannern. ::before wird als erstes Kind erzeugt und läge damit in
   der normalen Malreihenfolge UNTER dem Bild – der Schleier wäre unsichtbar. */
.atv-erklaer {
  position: relative; overflow: hidden;
  min-height: 56.25vw; display: flex; align-items: flex-end;
  padding: calc(31vw + 1rem) 0 4.5rem; background: #060606;
}
.atv-erklaer-bild {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; height: auto;
}
/* Schwarzer Schleier über dem ganzen Foto, nach oben hin durchsichtiger.
   Bis zur Unterkante des Fernsehers (24vw) bleibt er bei 10–16 % – gerade
   so viel, dass das Foto zum dunklen Rest der Seite passt, ohne das Banner
   auf dem Bildschirm zu dämpfen.
   Im Textbereich deckt er 80 % und bleibt damit absichtlich durchsichtig:
   Das Foto scheint sichtbar durch. Untergrenze ist gemessen, nicht geschätzt
   – das hellste Fotopixel unter dem Text ist RGB 206/194/172, dafür braucht
   es 54 % für 4,5:1 und 70 % für 7:1. Bei 80 % bleiben rund 8,5:1.
   Ab 50vw läuft der Schleier auf die Abschnittsfarbe zu und ist an der
   Bildunterkante (56,25vw) deckend – sonst würde dort, wo das Foto endet und
   der Abschnitt weiterläuft, eine waagerechte Kante sichtbar. */
.atv-erklaer::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .16) 24vw,
    rgba(0, 0, 0, .52) 28vw, rgba(0, 0, 0, .80) 31vw,
    rgba(0, 0, 0, .80) 50vw, #060606 56.25vw);
}
.atv-erklaer .container-xl { position: relative; z-index: 2; }
.atv-erklaer-titel { color: #fff; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.35; font-weight: 700; }
.atv-erklaer-text { color: #e8eaf0; line-height: 1.75; margin-bottom: 1.1rem; }
.atv-erklaer-text:last-child { margin-bottom: 0; }
/* Die drei Kennzahlen aus dem Fließtext auch zum Überfliegen */
.atv-erklaer-fakten {
  list-style: none; display: flex; flex-wrap: wrap; gap: .8rem 2.2rem;
  padding: 1.4rem 0 0; margin: 1.8rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.atv-erklaer-fakten li { color: #c9ceda; font-size: .84rem; line-height: 1.4; }
.atv-erklaer-fakten b { display: block; color: #fff; font-size: 1.12rem; font-weight: 700; }

@media (min-width: 992px) {
  /* Luft zwischen Titelspalte und Fließtext */
  .atv-erklaer .col-lg-7 { padding-left: 40px; }
}
@media (max-width: 991.98px) {
  /* Einspaltig: Foto ungeschnitten oben, Text darunter auf dunkler Fläche –
     ein Schleier über dem hochkant beschnittenen Foto wäre hier weder
     kontraststark noch würde er den Fernseher zeigen. */
  .atv-erklaer { display: block; min-height: 0; padding: 0 0 3rem; background: #0a0b10; }
  .atv-erklaer-bild { position: static; height: auto; }
  .atv-erklaer::before { display: none; }
  .atv-erklaer .container-xl { padding-top: 2.2rem; }
}

/* Alter Aufbau des Abschnitts „So funktioniert ATV". Beide ATV-Unterseiten
   nutzen inzwischen .atv-erklaer, diese Regeln sind also unbenutzt – siehe
   Hinweis bei .atv-familie. */
.gk-smarttv { position: relative; background: #060606; }
.gk-smarttv-img { width: 100%; display: block; }
.gk-smarttv-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
}
.gk-smarttv-overlay h2 { font-size: clamp(1.25rem, 1.8vw, 1.7rem); font-weight: 700; }
.gk-smarttv-text { color: #d6d9e0; font-size: .78rem; line-height: 1.65; margin: 0; }

/* Das Foto füllt den ganzen Abschnitt, die Box liegt vollständig darin. Die
   Abschnittshöhe entsteht deshalb aus der Box plus Innenabstand – kein
   gerechnetes Bildband nötig, das Foto folgt der Boxhöhe von selbst. */
/* Weiß, nicht schwarz: Auf Desktop deckt das Foto den Abschnitt vollständig,
   die Farbe ist dort unsichtbar. Einspaltig ist das Foto aber nur ein Band
   oben – dort liegt die Box zum größten Teil auf dieser Fläche, und weißes
   Glas über Schwarz wird zu Mittelgrau (gemessen 4,41:1 statt 5,6:1). */
.gk-fahnen {
  position: relative; background: #fff;
  padding: 12rem 0 8rem;
}
/* object-position 55 %: Die Box verdeckt die Bildmitte, sichtbar bleiben nur
   der Streifen darüber und darunter. Mit 35 % endete der obere Streifen genau
   an der Turmspitze (25 % der Bildhöhe) – zu sehen war dann nur Himmel. Bei
   55 % steht die Spitze mitten im Streifen. */
.gk-fahnen-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
.gk-fahnen .container-xl { position: relative; z-index: 1; }

@media (max-width: 991.98px) {
  .gk-hero-claims { flex-direction: column; gap: 1.8rem; }
  .gk-hero-claim { max-width: none; }
  .gk-smarttv-overlay { position: static; background: #060606; padding: 1.5rem 0 2.5rem; }
  /* Einspaltig wird die Box über 900 px hoch – ein Foto dieser Höhe wäre
     absurd. Deshalb hier zurück zum Bildband oben, in das die Box von unten
     hineinragt. Die Box selbst bleibt unverändert. */
  .gk-fahnen { padding: 12.5rem 0 4rem; }
  .gk-fahnen-img { inset: 0 0 auto; height: 260px; }
}

/* ══════════════ ATV-KMU-SEITE ══════════════ */
.kmu-tuev { width: 250px; max-width: 70%; margin: 1.4rem 0 .4rem; border-radius: 6px; }
.kmu-checks { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.kmu-checks li { position: relative; padding-left: 2.1rem; margin-bottom: .85rem; font-size: .95rem; }
.kmu-checks li::before { content: '✅'; position: absolute; left: 0; top: 0; font-size: .95rem; }
.kmu-note { color: #9aa0ab; font-size: .78rem; margin-top: 1.2rem; }

/* Weiße Sektion im Muster von .atv-lohnt / .gk-multiscreen: Kicker, Zitat,
   h-display mit Markierung. Fließtextfarbe wie dort. */
.kmu-einwand { background: #fff; color: #16181d; padding: 9rem 0 7rem; }
/* KEINE Überlappung ins Banner – anders als auf strategie.php, wo
   .experte-card sich mit -300px nach oben zieht. Dort sitzt die
   Banner-Headline oben, hier unten über die volle Breite; die Karte beginnt
   deshalb auf einer Linie mit dem Kicker der Textspalte. Der Wert muss
   ausdrücklich gesetzt werden, sonst greift der -300px-Grundwert. */
@media (min-width: 992px) {
  .kmu-einwand .experte-card { margin-top: 0; }
  /* Die Karte hat weder Polsterung noch Rahmen, deshalb fiel der 16-px-Abstand
     unter dem letzten Absatz (.experte-phone) per Margin-Collapsing aus ihr
     heraus in die Spalte: Spalte 681 px, Karte 665 px. align-items:center
     zentrierte damit die SPALTE – die Karte selbst saß 9 px zu hoch. Im
     Flex-Container kollabieren Margins nicht mehr, der Abstand bleibt in der
     Karte und beide sind deckungsgleich (gemessen 1 px Rest durch Rundung). */
  .kmu-einwand .col-lg-5 { display: flex; flex-direction: column; justify-content: center; }
}
/* Auflösung des Einwands im Schriftschnitt der Startseiten-Headline
   („Onlinemarketing ist kein Projekt …“, Kundenwunsch 09.08.2026): dieselben
   Werte wie .system-headline – kleiner und in 400 statt 700, damit der Satz
   ruhiger liest und die Markierung stärker heraussticht. Bei einer Änderung
   dort hier mitziehen. */
.kmu-einwand .h-display {
  color: var(--ink);
  font-size: clamp(1.55rem, 2.05vw, 2.05rem);
  font-weight: 400;
}
.kmu-einwand p { color: #3d4457; line-height: 1.75; }
.kmu-einwand .news-kicker { color: #6b7280; }
/* Der Einwand als Zitat über der Auflösung. Umbau 09.08.2026 (Kundenwunsch,
   die alte Fassung mit flacher grauer Kante wirkte lieblos): weiche Karte im
   Ton der hellen Panels, Verlaufsbalken mit runden Kappen statt Border (ein
   border-image könnte die Radien nicht), dazu ein großes Anführungszeichen
   als Wasserzeichen – bewusst in Georgia, die Hausschrift führt solche
   Glyphen nicht sauber. Gilt automatisch auf allen 15 Einwand-Seiten. */
.kmu-einwand-zitat {
  position: relative; overflow: hidden;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 300; color: #3f4557; line-height: 1.6;
  background: linear-gradient(135deg, #faf8fe, #f6f8fd);
  border: 1px solid #ece9f6; border-radius: 16px;
  padding: 1.7rem 4.6rem 1.7rem 2.2rem;
  margin: 1.6rem 0 1.9rem;
  box-shadow: 0 14px 34px rgba(90, 70, 180, .07);
}
.kmu-einwand-zitat::before {
  content: ''; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--grad);
}
.kmu-einwand-zitat::after {
  content: '\201C'; position: absolute; right: 1.1rem; top: -.4rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6.5rem; font-weight: 700; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: .16; pointer-events: none;
}
/* Die Reizwörter im Markenverlauf statt flachem Indigo. */
.kmu-indigo {
  font-weight: 400;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (max-width: 575.98px) {
  .kmu-einwand-zitat { padding: 1.3rem 3.4rem 1.3rem 1.5rem; }
  .kmu-einwand-zitat::after { font-size: 5rem; right: .7rem; }
}
/* Alte fünfzeilige Headline-Fassung – seit dem Umbau (06.08.2026) unbenutzt,
   aufbewahrt, weil das Projekt nicht versioniert ist. */
.kmu-einwand-titel {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.55;
  color: #16181d;
}
.kmu-lila { color: #8a15c9; }
/* .kmu-marcel-name und .kmu-kontaktzeile: seit dem Umbau der rechten Spalte
   auf die .experte-card von strategie.php (06.08.2026) unbenutzt – aufbewahrt,
   weil das Projekt nicht versioniert ist. */
.kmu-marcel-name { color: #16181d; }
.kmu-kontaktzeile {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  text-align: left;
  font-size: .9rem;
}
.kmu-kontaktzeile > div { display: flex; gap: .9rem; align-items: center; }
/* Icons in weichen Kreisen wie die Vorteils-Icons der Seite */
.kmu-kontaktzeile img {
  width: 44px; height: 44px; padding: 12px;
  background: #f1f2f6; border-radius: 50%;
}
.kmu-kontaktzeile strong { color: #16181d; }
.kmu-kontaktzeile > div > div { color: #6b7280; }
.kmu-kontaktzeile a { color: #16181d; text-decoration: none; }
.kmu-kontaktzeile a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Drei Vorteilskacheln auf der KMU-Seite. Hellgrau wie .gk-multiscreen, das
   hier vorher stand – so bleibt die Farbfolge der Seite (weiß → hellgrau →
   dunkel) erhalten. Die Kacheln selbst sind .partner-card--soft, deshalb
   braucht es hier nur Fläche und Kopfzeile. */
.kmu-leistungen { background: #fbfbfd; color: #16181d; padding: 7rem 0; }
.kmu-leistungen .h-display { color: var(--ink); max-width: 900px; }
.kmu-leistungen .news-kicker { color: #6b7280; }
.kmu-leistungen .partner-card { background: #fff; box-shadow: 0 14px 34px rgba(20, 24, 40, .07); }
.kmu-leistungen .partner-card h3 { font-size: 1.15rem; line-height: 1.4; }
.kmu-leistungen .partner-card p { line-height: 1.75; }

/* Alter Aufbau der drei Vorteile (zentrierte Spalten auf dunklem Grund) –
   seit dem Umbau am 06.08.2026 unbenutzt, aufbewahrt, weil das Projekt nicht
   versioniert ist. */
.kmu-vorteile { padding: 6rem 0 7rem; }
.kmu-vorteil-icon {
  display: inline-grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #23242c;
  margin-bottom: 1.6rem;
}
.kmu-vorteil-icon img { width: 38px; filter: invert(1); }
.kmu-vorteil-titel { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 1.2rem; }
.kmu-vorteil-text { color: #c9ccd4; font-size: .93rem; line-height: 1.75; }

/* ══════════════ KMU: Büro-Logos, Kompetenz + Anfrage-Formular ══════════════ */
.kmu-buero-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 1.6rem;
}
.kmu-buero-logos img { height: 44px; width: auto; }
.kmu-kompetenz-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.kmu-kompetenz-tuev { width: 235px; }

.kmu-anfrage { padding: 3rem 0 8rem; }
.kmu-anfrage-karte {
  background: #17181d;
  border: 1px solid #262833;
  border-radius: 20px;
  padding: 3.5rem clamp(1.5rem, 6vw, 6rem) 3rem;
  max-width: 1000px;
  margin: 0 auto;
}
.kmu-anfrage-karte h2 { font-size: clamp(1.3rem, 1.9vw, 1.75rem); font-weight: 700; color: #fff; }
.kmu-anfrage-sub { color: #c9ccd4; font-size: .92rem; margin: 1rem auto 2.2rem; max-width: 760px; }
.kmu-anfrage-karte .form-label { color: #e2e5ec; font-size: .85rem; font-weight: 600; }
.kmu-anfrage-karte .form-control {
  background: #1f2129;
  border: 1px solid #33364a;
  color: #f8f9fa;
  border-radius: 10px;
  padding: .8rem 1rem;
}
.kmu-anfrage-karte .form-control::placeholder { color: #6b7280; }
.kmu-anfrage-pflicht { color: #9aa0ab; font-size: .82rem; margin: -.6rem 0 1.8rem; }
/* Vom Server abgelehnte Felder – dieselbe Fehlerfarbe wie .form-feedback.err */
.kmu-anfrage-karte .form-control.feld-fehler,
.kmu-anfrage-karte .form-check-input.feld-fehler {
  border-color: #d43c3c;
  box-shadow: 0 0 0 3px rgba(212, 60, 60, .2);
}
.kmu-anfrage-karte .form-control:focus {
  background: #1f2129;
  color: #f8f9fa;
  border-color: #5b4be8;
  box-shadow: 0 0 0 3px rgba(91, 75, 232, .25);
}
.kmu-slider-wert { color: #c9ccd4; font-size: .85rem; white-space: nowrap; margin-left: 1rem; }
.kmu-anfrage-karte input[type="range"] {
  width: 100%;
  margin-top: .7rem;
  accent-color: #5b4be8;
}
.kmu-anfrage-karte .form-check-label { color: #c9ccd4; font-size: .85rem; }
.kmu-anfrage-karte .form-check-label a { color: #f8f9fa; }
.btn-atv-send { border: 0; }

/* ══════════════ GLOBALE LAYOUT-OPTIMIERUNG ══════════════ */
/* Asymmetrischer Container: rechts näher am Rand als links – mehr Breite, innovativeres Layout */
@media (min-width: 1200px) {
  .container-xl {
    max-width: none;
    width: auto;
    margin-left: var(--rand-links);
    margin-right: var(--rand-rechts);
  }
}
/* Darunter greift der Bootstrap-Standard: voller Breite mit nur 12 px Polster.
   Das ist rechts zu knapp – dort steht direkt daneben der Scrollbalken, der
   Inhalt klebt optisch daran. Deshalb hier etwas mehr Luft, mit wachsender
   Fensterbreite mehr. Die negativen Ränder der Bootstrap-Zeilen heben genau
   die Gutter-Breite auf, nicht dieses Polster – die Spalten rücken also
   korrekt mit. */
@media (max-width: 1199.98px) {
  .container-xl {
    padding-left: clamp(1.15rem, 2.6vw, 2rem);
    padding-right: clamp(1.15rem, 2.6vw, 2rem);
  }
}

/* Logo: größer und leichter (optische Mitte zwischen Light 300 und Medium 500:
   die Hausschrift hat keinen 400er-Schnitt, daher Light + feine Kontur) */
.brand {
  font-size: 2.4rem;
  font-weight: 300;
  -webkit-text-stroke: .45px currentColor;
  letter-spacing: .5px;
}

/* Social-Icons: moderne lila Umrandung (Topbar). .nav-quick gehört dazu –
   auf dem Smartphone ersetzt es genau diese Leiste, es soll also gleich
   aussehen. Der Fuß überschreibt die Farbe gleich darunter wieder auf Weiß. */
.topbar-socials a, .footer-socials a, .nav-quick {
  border-color: rgba(139, 92, 246, .85);
}
.topbar-socials a:hover, .footer-socials a:hover, .nav-quick:hover {
  background: rgba(139, 92, 246, .18);
  border-color: #b9a3ff;
  box-shadow: 0 0 14px rgba(139, 92, 246, .35);
}
/* Footer: Umrandung in Icon-Farbe (weiß) */
.footer-socials a { border-color: rgba(255, 255, 255, .85); }
.footer-socials a:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, .3);
}

/* Kein 500 mehr auf der Website: Bootstrap-Vorgaben auf 400 (Medium-Schnitt) */
h1, h2, h3, h4, h5, h6,
.fw-medium,
.btn,
.badge {
  font-weight: 400;
}
.fw-medium { font-weight: 400 !important; }

/* ══════════════ SPRACHAUSWAHL + ORBIT-BUTTON ══════════════ */
/* Sprachauswahl: lila Umrandung wie die Social-Icons, Inhalt vertikal mittig */
.lang-pill {
  border-color: rgba(139, 92, 246, .85);
  line-height: 1;
  padding: .6rem 1rem .38rem;
  transition: background .2s, border-color .2s;
}
.lang-pill:hover {
  background: rgba(139, 92, 246, .18);
  border-color: #b9a3ff;
}
.lang-pill .flag-de, .lang-pill svg { transform: translateY(-.1em); }

/* Animierte Universum-Umrandung: umkreisender Verlaufs-Glow, dauerhaft aktiv */
@property --orbit-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.btn-orbit {
  position: relative;
  z-index: 0;
}
/* Nur der Rand ist animiert: maskierter Ring, die Button-Fläche bleibt unberührt */
.btn-orbit::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 11px;
  padding: 1px;
  background: conic-gradient(from var(--orbit-angle),
    #2a0a4a 0%, #a21ccb 18%, #e6aefb 30%, #7b5ce4 45%,
    #d4e9ff 58%, #4da3e6 72%, #16345c 86%, #2a0a4a 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  animation: orbit-spin 3.2s linear infinite;
}
@keyframes orbit-spin {
  to { --orbit-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-orbit::before { animation: none; }
}

/* ══════════════ BADGES: Links + Hover, CTA-Verlauf, PE-Rating ══════════════ */
.hb-omr-link { display: inline-block; }
.hero-partnerbadges .hb-omr,
.hero-partnerbadges .hb-google-link,
.hero-partnerbadges .hb-ts {
  transition: transform .25s ease;
}
.hero-partnerbadges .hb-omr-link:hover .hb-omr,
.hero-partnerbadges .hb-google-link:hover,
.hero-partnerbadges .hb-ts:hover {
  transform: scale(1.09);
}

/* Header-CTA: gleicher Verlauf wie "Jetzt durchstarten" (ohne animierte Border) */
.btn-cta {
  background: var(--grad);
  box-shadow: 0 6px 20px rgba(122, 60, 220, .35);
}

/* "Unsere Leistungen" auf gleiche Größe wie "Jetzt durchstarten" */
.hero-actions .btn-outline { padding: .78rem 1.6rem; }

/* ProvenExpert-Bewertungssiegel */
.pe-rating { line-height: 1; }
.pe-rating a { text-decoration: none; }

/* ══════════════ HERO FULL-HEIGHT + KUNDEN-MARQUEE ══════════════ */
/* Above-the-fold füllt immer die Bildschirmhöhe (min-height setzt main.js exakt) */
.hero--full {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 130px);
}
.hero--full > .container-xl {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero--full .logo-marquee { flex-shrink: 0; }

/* Kunden-Marquee: grau als Standard, Farbe bei Hover */
.logo-marquee--kunden .logo-track { animation-duration: 280s; }
.logo-duo {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.logo-duo img {
  height: 52px; width: auto; max-width: 190px; object-fit: contain;
  filter: none; opacity: 1;
}
.logo-duo .logo-rgb { object-fit: contain; }
.logo-duo .logo-grau {
  filter: brightness(2.1);
  opacity: .7;
  transition: opacity .25s;
}
.logo-duo .logo-rgb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s;
}
.logo-duo:hover .logo-grau { opacity: 0; }
.logo-duo:hover .logo-rgb { opacity: 1; }
@media (max-width: 767.98px) {
  .logo-duo img { height: 42px; }
}

/* ══════════════ HEADER-FEINSCHLIFF (Border, Verläufe, Hero-Visual) ══════════════ */
/* Trennlinie Topbar/Header nur in Inhaltsbreite (Logo bis LinkedIn) */
.topbar { border-bottom: 0; }
.topbar > .container-xl { position: relative; }
.topbar > .container-xl::after {
  content: '';
  position: absolute;
  left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  bottom: -.65rem;
  height: 1px;
  /* 1:1 dieselbe Liquid-Glass-Linie wie an der Unterkante des Sticky Headers */
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 0%, rgba(139,92,246,.4) 25%,
    rgba(255,255,255,.12) 50%, rgba(77,195,247,.35) 75%,
    rgba(255,255,255,.05) 100%);
}

/* "Öffne Google Maps" + aktive Menüpunkte im Markenverlauf */
.topbar-maps,
.nav-item.active {
  background: linear-gradient(90deg, #9d4ee8 0%, #6f97e8 55%, #4dc3f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar-maps:hover { color: transparent; filter: brightness(1.25); }
.nav-item.active::after { -webkit-text-fill-color: #fff; }

/* Hero-Visual: Bildunterkante auf Badge-Mitte, TÜV auf Badge-Höhe, Phone/#mobilefirst +10% */
@media (min-width: 992px) {
  .hero--full .hero-visual { margin-bottom: clamp(44px, 3.2vw, 62px); }
}
.hero--full .hero-tuev { bottom: auto; top: calc(100% - 45px); }
.hero-phone { width: clamp(182px, 12.65vw, 244px); }
.hero-hashtag { font-size: clamp(2.42rem, 3.2vw, 3.74rem); }
@media (min-width: 992px) and (max-height: 840px) {
  .hero-phone { width: clamp(176px, 12.65vw, 237px); }
  .hero-hashtag { font-size: clamp(2.2rem, 2.75vw, 3.1rem); }
}
@media (min-width: 992px) and (max-height: 768px) {
  .hero-phone { width: clamp(143px, 10.5vw, 193px); }
  .hero-hashtag { font-size: clamp(1.76rem, 2.2vw, 2.42rem); }
}

/* Kunden-Logos: weißer Schein hinter dem Logo bei Hover (dunkle Logos auf dunklem Grund) */
.logo-duo { isolation: isolate; }
.logo-duo::before {
  content: '';
  position: absolute;
  inset: -22px -30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.5), rgba(255,255,255,.18) 55%, transparent 75%);
  opacity: 0;
  transition: opacity .25s;
  z-index: -1;
  pointer-events: none;
}
.logo-duo:hover::before { opacity: 1; }

/* Handschrift-Marker leicht versetzt: Band ragt links hinaus, "?" bleibt frei */
.handwritten-line mark {
  background: none;
  position: relative;
  z-index: 0;
  padding: 0;
}
.handwritten-line mark::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -.45em;
  right: .42em;
  top: .3em;
  bottom: .02em;
  background: #e4d0f7;
  border-radius: 999px;
}

/* ══════════════ QUOTE-SEKTION: 16:9-Video, versetzter Marker, neues Porträt ══════════════ */
.quote-video.video-facade { aspect-ratio: 16 / 9; overflow: hidden; }
.quote-video.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Marker wie Leuchtstift: halbtransparentes Lila über dem oberen Glyphenbereich,
   zeilenweise Balken (Werte aus dem Original-Markup: rgba(150,135,223,.39), Radius 4) */
.quote-highlight mark {
  background-color: transparent;
  background-image: linear-gradient(rgba(150, 135, 223, .39), rgba(150, 135, 223, .39));
  background-repeat: no-repeat;
  background-size: calc(100% + .5em) .74em;
  background-position: -.25em .04em;
  border-radius: 4px;
  padding: 0 .12em;
  color: #1e1a2d;
}
.quote-author img {
  border-radius: 50%;
  object-fit: cover;
  width: 72px;
  height: 72px;
}

/* Badge-Leiste: statische, zentrierte Reihe (kein Slider) */
.badges-static {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 6vw, 7rem);
}
/* Höhen optisch ausgeglichen, nicht rechnerisch gleich: Runde Siegel wirken
   bei gleicher Höhe kleiner als Rechtecke, ein breiter Schriftzug wirkt größer. */
.badges-static img { height: 88px; width: auto; object-fit: contain; }
.badges-static .bm-dap { height: 46px; }
.badges-static .bs-google { height: 84px; }
.badges-static .bs-ts { height: 76px; }
/* Das TÜV-Prüfzeichen ist ein breites Rechteck – niedriger gesetzt, damit es
   neben den runden Siegeln nicht dominiert. */
.badges-static .bs-tuev { height: 74px; }
.badges-static .bs-google-link { display: inline-flex; align-items: center; transition: transform .25s; }
.badges-static .bs-google-link:hover { transform: translateY(-2px); }

/* Pechtel-Logo in der Space-Karte */
.space-pechtel-logo--unten { height: 42px; width: auto; opacity: .95; }

/* Ziele-Box: Abstand zu den Accordions */
@media (min-width: 992px) {
  .section-ziele .ziele-box { padding-left: clamp(2rem, 4vw, 4.5rem); }
}

/* ══════════════ SPACE-CASE-SLIDER (3D-Kachelwechsel) ══════════════ */
.space-slider { position: relative; }
.space-slides { position: relative; perspective: 1800px; }
.space-slide {
  transition: transform .7s cubic-bezier(.35, .1, .25, 1), opacity .7s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.space-slide.is-active {
  position: relative;
  z-index: 3;
  transform: none;
  opacity: 1;
}
.space-slide:not(.is-active) {
  position: absolute;
  top: 3rem;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.space-slide.is-prev {
  transform: translateX(-17%) translateZ(-340px) rotateY(13deg);
  opacity: .45;
  z-index: 1;
}
.space-slide.is-next {
  transform: translateX(17%) translateZ(-340px) rotateY(-13deg);
  opacity: .45;
  z-index: 1;
}
.space-slide.is-back {
  transform: translateZ(-420px);
  opacity: 0;
  z-index: 0;
}
.space-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(13, 12, 20, .5);
  border: 1px solid rgba(139, 92, 246, .65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.space-arrow:hover {
  background: rgba(139, 92, 246, .35);
  border-color: #b9a3ff;
  box-shadow: 0 0 18px rgba(139, 92, 246, .4);
}
.space-arrow--prev { left: clamp(-74px, -4vw, -30px); }
.space-arrow--next { right: clamp(-74px, -4vw, -30px); }
@media (max-width: 991.98px) {
  .space-slide.is-prev, .space-slide.is-next { transform: translateZ(-240px); opacity: 0; }
  .space-arrow--prev { left: 8px; }
  .space-arrow--next { right: 8px; }
}

/* Google-Rezensionen: Initialen-Avatar + Zeitangabe */
.review-initial {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 400;
  flex-shrink: 0;
}
.review-zeit { color: #9aa0ab; font-size: .78rem; margin-left: .4rem; }

/* Newsroom-Karten als Links zum Shop-Blog */
.news-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease;
}
.news-card--link:hover { transform: translateY(-6px); color: inherit; }
.news-card--link h3 { transition: color .2s; }
.news-card--link:hover h3 { color: #5b4be8; }
.news-author-initial {
  width: 44px;
  height: 44px;
  font-size: 1.15rem;
  background: #5e35b1;
}

/* ══════════════ BLOG-BEITRAG (heller Seitenmodus, Layout wie Shop-Blog) ══════════════ */
.blog-page { background: #fff; color: #1d2333; padding: 2rem 0 7rem; }
.blog-page .breadcrumb-light a { color: #9aa1b2; text-decoration: none; }
.blog-page .breadcrumb-light a:hover { color: #5b4be8; }

.blog-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: clamp(320px, 42vw, 480px);
  background: #16181d center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 2.4rem;
  margin-top: 1.2rem;
}
.blog-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,14,.35) 0%, rgba(10,10,14,.15) 40%, rgba(10,10,14,.72) 100%);
}
.blog-hero-tags { position: relative; display: flex; gap: .5rem; flex-wrap: wrap; }
.blog-hero-tags span {
  background: #26262c;
  color: #dfe2e8;
  font-size: .74rem;
  padding: .38rem .8rem .24rem;
  border-radius: 30px;
  line-height: 1;
}
.blog-hero-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.blog-hero-titel {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 400;
  max-width: 640px;
  margin-bottom: 1rem;
}
.blog-hero-autor { color: #e6e9ee; font-size: .85rem; margin: 0; line-height: 1.6; }

.blog-share { display: flex; gap: .55rem; }
.blog-share-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.blog-share-btn:hover { background: rgba(139,92,246,.5); color: #fff; }
.blog-share--dunkel .blog-share-btn { background: #f0f1f4; color: #1d2333; }
.blog-share--dunkel .blog-share-btn:hover { background: #e0d7f7; color: #1d2333; }

.blog-body {
  max-width: 680px;
  margin: 3.5rem auto 0;
  font-size: 1rem;
  line-height: 1.85;
}
.blog-body h2, .blog-body h3, .blog-body h4 {
  color: #1d2333; font-weight: 700; margin: 2rem 0 1rem; font-size: 1.3rem;
}
.blog-body p { margin-bottom: 1.1rem; }
.blog-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.5rem 0; }
.blog-body a { color: #5b4be8; }
.blog-body ul, .blog-body ol { margin: 0 0 1.2rem 1.2rem; }

.blog-meta { max-width: 680px; margin: 2.5rem auto 0; }
.blog-hr { border-color: #d9dce3; opacity: 1; margin: 1.8rem 0; }
.blog-meta-autor strong { color: #1d2333; }
.blog-meta-autor span { color: #6b7280; }
.blog-meta-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  color: #6b7280;
  font-size: .85rem;
}
.blog-meta-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.blog-meta-tags span {
  background: #f0f1f4; color: #3a3f47;
  font-size: .74rem; padding: .38rem .8rem .24rem;
  border-radius: 30px; line-height: 1;
}

.blog-weitere { margin-top: 5rem; }
.blog-weitere h2 { color: #1d2333; font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.blog-weitere-karte { display: block; text-decoration: none; color: inherit; transition: transform .25s; }
.blog-weitere-karte:hover { transform: translateY(-6px); color: inherit; }
.blog-weitere-karte:hover h3 { color: #5b4be8; }
.blog-weitere-media {
  border-radius: 16px;
  background: #16181d center/cover no-repeat;
  aspect-ratio: 16 / 10;
  padding: 1rem 1.1rem;
}
.blog-weitere-karte h3 {
  color: #1d2333; font-size: 1.05rem; font-weight: 700;
  margin: 1rem 0 .4rem; transition: color .2s; line-height: 1.5;
}
.blog-weitere-datum { color: #6b7280; font-size: .82rem; }

/* Newsroom-Seite: echte Blog-Beiträge (Tags als HTML-Pills, verlinkte Bilder) */
.news-media-link { display: block; text-decoration: none; }
.section-newspage .news-media { position: relative; border-radius: 14px; overflow: hidden; }
.section-newspage .news-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.section-newspage .news-cats { position: absolute; top: .9rem; left: .9rem; display: flex; gap: .45rem; }
.section-newspage .news-cats span {
  background: #26262c; color: #dfe2e8;
  font-size: .72rem; padding: .36rem .75rem .22rem;
  border-radius: 30px; line-height: 1;
}
.section-newspage .featured-img { width: 100%; height: 100%; object-fit: cover; }
.section-newspage .trending-item img { object-fit: cover; }

/* Eigener Style für Produkt-Slider-Headlines: Größe wie "Cases - Konsequente Ausrichtung...", etwas leichter */
.slider-headline {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 400;
}

/* Agentur: echte Partner-Logos statt Platzhalter-Wortmarken */
.partner-logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.8rem, 4vw, 4rem);
  margin-top: 2.5rem;
}
.partner-logos-row img {
  height: 52px;
  width: auto;
  transition: opacity .25s, transform .25s;
}
.partner-logos-row a:hover img { transform: scale(1.06); }
.partner-logos-row .pl-shopify { height: 40px; }
.partner-logos-row .pl-wcheck { height: 76px; } /* gestapeltes Logo braucht mehr Höhe für gleiche Optik */

/* Asymmetrisches Layout: Container in Flex-Sektionen füllen die volle Achse
   (sonst schrumpfen sie auf Inhaltsbreite und sitzen links der Header-Achse) */
@media (min-width: 1200px) {
  .agentur-hero > .container-xl,
  .section-badges > .container-xl,
  .orbit-methode > .container-xl {
    flex: 1 1 auto;
  }
  /* Scroll-Maus auf der Achse des Headers statt der Viewport-Mitte
     (margin statt translateX, da die floaty-Animation transform überschreibt) */
  .hero-mouse {
    left: calc(50% + (var(--rand-links) - var(--rand-rechts)) / 2);
    margin-left: -11px;
  }
}

/* Agentur-Hero als Full-Height Above-the-Fold: Bild-Banner kommt erst beim Scrollen */
.agentur-hero.hero--full { align-items: stretch; padding: 2.2rem 0; }
.agentur-hero.hero--full .container-xl > * { align-self: center; }

/* Agentur-Banner mit Video-Hintergrund (Dauerschleife, stumm) */
.agentur-banner--video { overflow: hidden; background: #060606; }

/* Viral-Banner (Social Media): In diesem Video liegt im unteren Bildbereich das helle
   Displaylicht – gemessen über den ganzen Durchlauf steht die Schrift dort auf
   Flächen bis Helligkeit 196, der Verlauf von links allein bringt nur 1,4:1.
   Ein Verlauf von unten legt eine dunkle Basis unter die Zeile, ohne das Bild
   flächig zu dämpfen; darüber bleibt das Video unverändert kräftig. */
.viral-banner::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
  background: linear-gradient(180deg,
    rgba(8, 10, 14, 0) 0%, rgba(8, 10, 14, .56) 40%, rgba(8, 10, 14, .92) 100%);
  z-index: 1;
}
.viral-banner .container-xl { z-index: 2; }

.agentur-banner--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══════════════ MEILENSTEIN-TIMELINE (Agentur) ══════════════ */
.tl { margin-top: 3rem; }
.tl-track {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* Clip-Box nach links/rechts erweitern, damit aktiver Planet + Glow nicht abgeschnitten werden (Inhalt bleibt auf der Achse) */
  padding: 0 22px;
  margin: 0 -22px;
}
.tl-track::-webkit-scrollbar { display: none; }
.tl-stop {
  background: none;
  border: 0;
  padding: 0;
  text-align: center;
  cursor: pointer;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.tl-label {
  color: #8b90a0;
  font-size: .88rem;
  line-height: 1.35;
  min-height: 2.5em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: color .25s;
}
/* Weltraum-Route: Planeten mittig über der Jahreszahl, gerader Zeitstrahl */
.tl-planet-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
}
.tl-planet {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #d493f7, #7b5ce4 55%, #3a2a8f);
  box-shadow: 0 0 10px rgba(139, 92, 246, .5);
  transition: transform .3s, box-shadow .3s;
}
.tl-stop:nth-child(2n) .tl-planet { background: radial-gradient(circle at 32% 30%, #9cd8ff, #4da3e6 55%, #1d4f7e); box-shadow: 0 0 10px rgba(77, 163, 230, .5); }
.tl-stop:nth-child(3n) .tl-planet { background: radial-gradient(circle at 32% 30%, #f7b7dd, #c445b0 55%, #6e2464); box-shadow: 0 0 10px rgba(196, 69, 176, .5); }
/* Größenvarianten: 2026 + 2015 als große Ringplaneten, Rest leicht variiert */
.tl-stop:nth-child(2) .tl-planet { width: 24px; height: 24px; }
.tl-stop:nth-child(5) .tl-planet { width: 22px; height: 22px; }
.tl-stop:nth-child(3) .tl-planet { width: 15px; height: 15px; }
.tl-stop:nth-child(4) .tl-planet { width: 17px; height: 17px; }
.tl-stop:nth-child(6) .tl-planet { width: 14px; height: 14px; }
/* Planetenringe (Saturn-Optik, leicht gekippt) */
.tl-stop:nth-child(2) .tl-planet::after,
.tl-stop:nth-child(5) .tl-planet::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 195%;
  height: 72%;
  border: 1.5px solid rgba(156, 216, 255, .55);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  box-shadow: 0 0 6px rgba(156, 216, 255, .25);
}
.tl-stop:nth-child(5) .tl-planet::after {
  border-color: rgba(212, 147, 247, .55);
  box-shadow: 0 0 6px rgba(212, 147, 247, .25);
}
.tl-stop.active .tl-planet {
  transform: scale(1.45);
  box-shadow: 0 0 18px rgba(180, 140, 255, .9);
}
.tl { position: relative; }
.tl-route {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.tl-route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tl-rocket {
  position: absolute;
  width: 48px;
  height: 16px;
  transform: translate(-50%, -50%) scaleX(-1); /* Basisflug: nach links (Richtung Heute) */
  /* Raketenkörper (ohne Schweif) liegt bei x≈24–47 der 48px-Box → Körpermitte ≈ +11px
     neben der Boxmitte; margin gleicht das aus, damit der KÖRPER mittig auf der Achse sitzt */
  margin-left: 11px;
  transition: left .95s cubic-bezier(.5, .05, .3, 1), top .95s cubic-bezier(.5, .05, .3, 1),
              margin-left .95s cubic-bezier(.5, .05, .3, 1);
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, .35));
  z-index: 2;
}
.tl-rocket.nach-rechts { transform: translate(-50%, -50%); margin-left: -11px; }
.tl-trail {
  transform-origin: 22px 8px;
  animation: trail-puls .5s infinite alternate ease-in-out;
}
@keyframes trail-puls {
  from { opacity: 1; transform: scaleX(1); }
  to { opacity: .55; transform: scaleX(.7); }
}
.tl-jahr {
  color: #8b90a0;
  font-size: 1.25rem;
  font-weight: 400;
  transition: color .25s;
  /* Luft zwischen Planet, Zeitstrahl und Jahreszahl (Linie sitzt mittig im Korridor) */
  margin-top: 1.5rem;
}
.tl-stop:hover .tl-label, .tl-stop:hover .tl-jahr { color: #cfd4da; }
.tl-stop.active .tl-label, .tl-stop.active .tl-jahr { color: #fff; }

.tl-detail { position: relative; margin-top: .5rem; padding: 3rem 0 0 0; }
.tl-connector {
  position: absolute;
  top: 0;
  left: 12px;
  width: 2px;
  height: 3rem;
  background: linear-gradient(180deg, #a21ccb, #4da3e6);
  transition: left .4s ease;
}
.tl-connector::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4da3e6;
}
.tl-panel { display: none; padding-left: 2rem; }
.tl-panel.active { display: block; animation: tlFade .45s ease; }
@keyframes tlFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tl-panel-jahr { color: #8b90a0; font-size: 1.1rem; margin-bottom: .3rem; }
.tl-panel-titel { color: #fff; font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 400; margin-bottom: .8rem; }
.tl-panel-text { color: #c3c9d4; max-width: 640px; margin: 0; }
.tl-panel-bild { width: 100%; border-radius: 14px; max-height: 300px; object-fit: cover; }
@media (max-width: 767.98px) {
  .tl-stop { min-width: 140px; }
  .tl-panel { padding-left: 1rem; }
}

/* ── What we do (Agentur): nummeriertes Akkordeon ── */
.section-wwd { background: #fff; padding: 6.5rem 0; }
.wwd-sub { color: #5a6472; max-width: 620px; margin-top: 1rem; }
.wwd-list { margin-top: 3.5rem; border-top: 1px solid #d9dde4; }
.wwd-item { border-bottom: 1px solid #d9dde4; }
.wwd-head {
  display: grid;
  grid-template-columns: clamp(70px, 12vw, 170px) 1fr;
  align-items: baseline;
  width: 100%;
  background: none;
  border: 0;
  padding: 1.6rem 0;
  text-align: left;
  cursor: pointer;
}
.wwd-num { color: var(--ink); font-size: 1.35rem; font-weight: 400; }
.wwd-titel { color: var(--ink); font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 400; transition: color .25s; }
.wwd-head:hover .wwd-titel { color: #8b5cf6; }
.wwd-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1);
}
.wwd-body-inner { overflow: hidden; }
.wwd-item.open .wwd-body { grid-template-rows: 1fr; }
.wwd-body-inner p {
  color: #5a6472;
  max-width: 860px;
  margin: 0 0 0 clamp(70px, 12vw, 170px);
  padding-bottom: 1.8rem;
}
.wwd-brands {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 2.5vw, 2.6rem);
  margin: .2rem 0 2rem clamp(70px, 12vw, 170px);
}
.wwd-brands img { height: 44px; width: auto; filter: brightness(0); opacity: .82; }
.wwd-brand-word { font-size: 1.35rem; font-weight: 400; color: var(--ink); white-space: nowrap; }
.wwd-brand-word--space { font-weight: 300; letter-spacing: 1px; }
.wwd-brand-word--space strong { font-weight: 700; }

/* ── Who we are (Agentur): 6 Prinzipien auf dunklem Grund ── */
.section-wwa { background: var(--grad-dark) fixed; color: #cfd4da; padding: 6.5rem 0; }
.news-kicker--dark { color: #8b90a0; }
.section-wwa .h-display { color: #fff; }
.wwa-sub { color: #c3c9d4; max-width: 620px; margin-top: 1rem; }
.wwa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.wwa-cell {
  padding: 2.4rem 2.2rem 2.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  border-right: 1px solid rgba(255, 255, 255, .09);
}
.wwa-cell:nth-child(3n) { border-right: 0; }
.wwa-cell:nth-child(n+4) { border-bottom: 0; }
.wwa-cell:nth-child(3n+2), .wwa-cell:nth-child(3n) { padding-left: 2.2rem; }
.wwa-icon { width: 44px; height: 44px; filter: invert(.75) sepia(.3) saturate(3) hue-rotate(200deg); }
.wwa-cell h3 { color: #fff; font-size: 1.25rem; font-weight: 400; margin: 1.2rem 0 .7rem; }
.wwa-cell p { color: #b6bcc9; font-size: .95rem; line-height: 1.65; margin: 0; }
@media (max-width: 991.98px) {
  .wwa-grid { grid-template-columns: 1fr; }
  .wwa-cell { border-right: 0; padding-left: 0; }
  .wwa-cell:nth-child(3n+2), .wwa-cell:nth-child(3n) { padding-left: 0; }
  .wwa-cell:nth-child(n+4) { border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .wwa-cell:last-child { border-bottom: 0; }
}

/* Kompakte wwd-Variante (Startseite: Ziele-Akkordeon in 7er-Spalte) */
.wwd-list--compact { margin-top: 0; }
.wwd-list--compact .wwd-item:first-child .wwd-head { padding-top: .35rem; }
.wwd-list--compact .wwd-head { grid-template-columns: 64px 1fr; padding: 1.35rem 0; }
.wwd-list--compact .wwd-num { font-size: 1.1rem; }
.wwd-list--compact .wwd-titel { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.wwd-list--compact .wwd-body-inner p { margin-left: 64px; max-width: none; padding-bottom: 1.5rem; }

/* ── Agentur: Kontaktformular vor dem Footer ── */
.section-kontaktform { padding: 5.5rem 0 6.5rem; }
.kform-card {
  position: relative;
  background: var(--grad-dark);
  border-radius: 22px;
  padding: clamp(2rem, 4vw, 3.8rem);
  color: #fff;
  overflow: hidden;
}
.kform-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .55), rgba(77, 163, 230, .25) 45%, rgba(139, 92, 246, .5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.kform-headline { font-size: clamp(1.55rem, 2.05vw, 2.05rem); font-weight: 400; line-height: 1.4; }
.kform-sub { color: #c3c9d4; margin-top: 1rem; }
.kform-list { margin-top: 1.4rem; }
.kform-list li { color: #dfe2e8; }
.kform-kontaktzeile { margin-top: 1.8rem; color: #8b90a0; }
.kform-kontaktzeile a { color: #dfe2e8; text-decoration: none; }
.kform-kontaktzeile a:hover { color: #fff; }
.kform-kontaktzeile span { margin: 0 .6rem; color: #8b5cf6; }
.kform-feld { position: relative; }
.kform-feld input,
.kform-feld textarea {
  width: 100%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  color: #fff;
  padding: 1.35rem 1rem .55rem;
  font: inherit;
  transition: border-color .25s, background .25s;
}
.kform-feld input:focus,
.kform-feld textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  background: rgba(255, 255, 255, .08);
}
.kform-feld label {
  position: absolute;
  left: 1rem;
  top: .95rem;
  color: #8b90a0;
  pointer-events: none;
  transition: transform .2s, font-size .2s, color .2s;
  transform-origin: left top;
}
.kform-feld input:focus + label,
.kform-feld input:not(:placeholder-shown) + label,
.kform-feld textarea:focus + label,
.kform-feld textarea:not(:placeholder-shown) + label {
  transform: translateY(-.62rem);
  font-size: .74rem;
  color: #b9a8f7;
}
.kform .kontakt-check { color: #c3c9d4; }
.kform-send { border: 0; }
.kform-schutz { color: #8b90a0; font-size: .86rem; }

/* ── Team kompakt: 2 Bilder nebeneinander, Text bei Hover über dem Nachbar-Bild ──
   (Umschalter $teamLayout in agentur.php: 'kompakt' | 'panels') */
.section-team--kompakt { background: var(--grad-dark) fixed; padding: 5.5rem 0 3rem; }
.section-team--kompakt .section-headline { color: #fff; }
.section-team--kompakt .journey-sub { color: #c3c9d4; font-weight: 400; font-size: 1.15rem; }
.section-team--kompakt .team-head { margin-bottom: 1.5rem; }
.team-zeile { background: transparent; padding: 2.6rem 0; }
.team-paar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.tk { text-align: center; transition: opacity .45s ease; cursor: default; }
.tk-img { width: min(480px, 92%); transition: opacity .45s ease, transform .45s ease; }
.tk-caption { margin: 1.2rem 0 0; color: #fff; }
.tk-caption strong { display: block; font-size: 1.15rem; }
.tk-caption span { color: #8b90a0; font-size: .9rem; }
/* Text-Overlays: liegen über der jeweils anderen Bildhälfte */
.tk-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(14px);
  width: calc(50% - 1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
  z-index: 2;
}
.tk-text-a { left: calc(50% + 1rem); }
.tk-text-b { left: 0; transform: translateY(-50%) translateX(-14px); }
.tk-text .team-title { font-size: clamp(1.35rem, 1.9vw, 1.9rem); }
.tk-text .team-text { font-size: .95rem; }
/* Aktiv-Zustände (JS setzt data-aktiv am Paar) */
.team-paar[data-aktiv="a"] .tk-text-a,
.team-paar[data-aktiv="b"] .tk-text-b { opacity: 1; transform: translateY(-50%); }
.team-paar[data-aktiv="a"] .tk-text-a a,
.team-paar[data-aktiv="b"] .tk-text-b a { pointer-events: auto; }
.team-paar[data-aktiv="a"] .tk-b,
.team-paar[data-aktiv="b"] .tk-a { opacity: .07; }
/* Solo-Zeile (Ares): Bild links, Text erscheint rechts daneben */
.team-zeile--solo .tk-b { display: none; }
@media (max-width: 991.98px) {
  /* Mobile/Touch: statisch untereinander – Bild, Text, Bild, Text */
  .team-paar { grid-template-columns: 1fr; }
  .tk-a { order: 1; } .tk-text-a { order: 2; }
  .tk-b { order: 3; } .tk-text-b { order: 4; }
  .tk-text { position: static; transform: none; width: 100%; opacity: 1; pointer-events: auto; text-align: center; }
  .tk-text.text-lg-end { text-align: center; }
  .team-paar[data-aktiv="a"] .tk-b, .team-paar[data-aktiv="b"] .tk-a { opacity: 1; }
}

/* ── Agentur-Seite: Fließtexte auf dunklen Flächen in Weiß für besseren Kontrast ── */
.seite-agentur .agentur-sub,
.seite-agentur .section-journey .journey-sub,
.seite-agentur .section-team--kompakt .journey-sub,
.seite-agentur .section-wwa,
.seite-agentur .wwa-sub,
.seite-agentur .yes-text,
.seite-agentur .team-text,
.seite-agentur .tl-panel-text,
.seite-agentur .kform-sub,
.seite-agentur .kform-list li,
.seite-agentur .kform .kontakt-check,
.seite-agentur .kform .kontakt-check a { color: #fff; }

/* ── Maus-Schimmer: dezentes Farbleuchten im Markenverlauf folgt dem Cursor ── */
.maus-schimmer {
  position: fixed;
  left: -150px;
  top: -150px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(162, 28, 203, .09) 0%,
    rgba(139, 92, 246, .07) 32%,
    rgba(77, 163, 230, .05) 55%,
    transparent 72%);
  pointer-events: none;
  z-index: 2000;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform;
}

/* ── Globale Breadcrumb: auf allen Unterseiten an derselben Stelle direkt unter dem Header ── */
/* Smartphone: Lange Seitentitel (Blog!) ließen die Brotkrume zweizeilig
   werden – die zweite Zeile verschwand hinter dem Beitragskopf. Mobil bleibt
   die aktuelle Station deshalb einzeilig und endet mit Auslassungspunkten. */
@media (max-width: 767.98px) {
  .global-breadcrumb .breadcrumb-line {
    display: flex; align-items: baseline; flex-wrap: nowrap;
    white-space: nowrap; overflow: hidden;
  }
  .global-breadcrumb .breadcrumb-line > * { flex: 0 0 auto; }
  .global-breadcrumb .breadcrumb-line .bc-active {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
}

.global-breadcrumb {
  position: relative;
  z-index: 500;
  height: 0; /* schwebt über dem Seitenanfang, verschiebt kein Layout */
}
.global-breadcrumb .breadcrumb-line {
  margin: 0;
  padding-top: 1.1rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4); /* lesbar auch auf hellen Fotos */
}
/* Helle Seiten (Newsroom, Blog, Kontakt-Panel beginnt tiefer): dunkle Schrift ohne Schatten */
.seite-news .global-breadcrumb .breadcrumb-line { color: #6a7183; text-shadow: none; }
.seite-news .global-breadcrumb .breadcrumb-line a { color: #6a7183; }

/* ── "In drei Schritten" (Strategie): interaktiver Stepper mit Bildwechsel ── */
.guide-steps .step-kopf {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.guide-steps .step-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease;
}
.guide-steps li.active .step-body { grid-template-rows: 1fr; }
.guide-steps .step-body-inner { overflow: hidden; }
.guide-steps .step-body-inner p { padding-top: .2rem; }
.step-link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.1rem; color: #5a3fe8; font-weight: 700; text-decoration: none;
}
.step-link:hover { color: #7f6bf6; }
.step-link img { width: 14px; }
.guide-steps li:not(.active) h3 { opacity: .85; }
.steps-bild { width: 100%; transition: opacity .3s ease; }

/* ── Branding: vertikaler Bilder-Slider (links hoch, rechts runter, weißer Verlauf) ── */
/* NICHT MEHR IM EINSATZ (13.08.2026): Auf branding.php stand hier der
   Bilder-Slider; er wurde durch die Video-Fassade .marke-video ersetzt. Die
   Regeln bleiben stehen, falls die Collage wieder gebraucht wird – sonst
   können sie samt @keyframes collageHoch/collageRunter entfallen. */
.collage-slider {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  height: 620px;
  overflow: hidden;
}
.collage-spalte { will-change: transform; }
.collage-haelfte {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-bottom: 1.2rem;
}
.collage-haelfte img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
.collage-spalte--hoch { animation: collage-hoch 36s linear infinite; }
.collage-spalte--runter { animation: collage-runter 36s linear infinite; }
@keyframes collage-hoch { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes collage-runter { from { transform: translateY(-50%); } to { transform: translateY(0); } }
/* weißer Verlauf oben und unten */
.collage-slider::before,
.collage-slider::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 110px;
  z-index: 2;
  pointer-events: none;
}
.collage-slider::before { top: 0; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
.collage-slider::after { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
@media (prefers-reduced-motion: reduce) {
  .collage-spalte--hoch, .collage-spalte--runter { animation: none; }
}

/* ── Branding: Video neben dem Intro-Text ──
   Der Versatz oben richtet die Videokante auf die OBERKANTE DES „B“ aus, nicht
   auf die Kante des Textkastens. Zwischen beiden liegen der halbe Durchschuss
   und der Abstand von der Schrift-Oberkante zur Versalhöhe – am gerenderten
   Text gemessen: 0,327 × Schriftgröße (Hausschrift, line-height 1.45).
   Derselbe clamp() wie bei .branding-intro-title, damit es in jeder
   Fenstergröße stimmt. */
@media (min-width: 992px) {
  .branding-intro-slider { padding-left: 4rem; }
  /* Versatz auf das Video, NICHT auf die Spalte: Bootstraps Zeilenabstand
     (gy-5) sitzt als margin-top auf der Spalte – ein margin-top dort hätte
     ihn überschrieben und das Video um 48 px zu hoch gesetzt. */
  .marke-video { margin-top: calc(clamp(1.5rem, 2.3vw, 2.1rem) * .327); }
}

/* ── Referenz-Marquee: Klick vergrößert das Website-Beispiel (Lightbox) ── */
.refs-track img { cursor: zoom-in; }
.ref-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 14, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .25s ease;
}
.ref-lightbox.sichtbar { opacity: 1; }
.ref-lightbox img {
  max-width: min(1400px, 92vw);
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.ref-lightbox-close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  background: none;
  border: 0;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}

/* ── Case-Studies-Slider (Digital, Daten live aus dem Shop) ── */
/* Alle Panels liegen in DERSELBEN Grid-Zelle → Container ist so hoch wie das längste
   Case und die Boxhöhe bleibt beim Blättern konstant */
.cs-slider { position: relative; margin-top: 2rem; display: grid; }
.cs-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s ease;
}
.cs-panel.active { visibility: visible; opacity: 1; }
.cs-panel > .row {
  background: #f4f5f7;
  border-radius: 14px;
  overflow: hidden;
  min-height: 480px;
  /* füllt die Grid-Zelle → sichtbare Box ist bei jedem Case exakt gleich hoch */
  height: 100%;
}
.cs-content {
  padding: clamp(1.8rem, 3.5vw, 3.4rem);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cs-kennzahl { color: #5a3fe8; font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700; line-height: 1.1; margin: 0; }
.cs-label { color: #4c5468; margin: .2rem 0 1.6rem; }
.cs-zitat { color: var(--ink); font-size: clamp(1.25rem, 2vw, 1.9rem); font-weight: 700; line-height: 1.4; margin-bottom: 2.2rem; }
.cs-foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--ink);
  font-size: 1.2rem;
  box-shadow: 0 8px 26px rgba(20, 24, 40, .18);
  cursor: pointer;
  z-index: 3;
  transition: transform .2s, box-shadow .2s;
}
.cs-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 30px rgba(20, 24, 40, .26); }
.cs-arrow--prev { left: -24px; }
.cs-arrow--next { right: -24px; }
.cs-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 3rem;
}
/* Logos schalten das jeweilige Case um – aktives Logo voll sichtbar, andere transparent */
.cs-logo {
  background: none;
  border: 0;
  padding: .4rem;
  cursor: pointer;
  line-height: 0;
}
.cs-logo img {
  height: 46px;
  width: auto;
  opacity: .3;
  filter: grayscale(1);
  transition: opacity .3s, filter .3s, transform .3s;
}
.cs-logo:hover img { opacity: .6; filter: grayscale(.4); }
.cs-logo.active img { opacity: 1; filter: none; transform: scale(1.04); }
@media (max-width: 991.98px) {
  .cs-panel > .row { min-height: 0; }
  .cs-foto { max-height: 320px; }
  .cs-arrow--prev { left: 8px; }
  .cs-arrow--next { right: 8px; }
}

/* ── Cases: Logo-Mosaik (7×7, Memory-Dreh alle 2 s, Hover wie Startseiten-Marquee) ── */
.logo-mosaik {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2.2rem 2.6rem;
  margin-top: 3.5rem;
  perspective: 900px;
}
.mosaik-zelle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  /* Rückdrehung: startet schnell (steht bei 90°), landet weich */
  transition: transform .3s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.mosaik-zelle.flippt {
  transform: rotateY(90deg);
  /* Hindrehung: startet weich, beschleunigt zur Kante – wie eine echte Memory-Karte */
  transition: transform .3s ease-in;
}
/* Logo-Proportionen: feste Höhe, Breite folgt dem SVG-Seitenverhältnis;
   sehr breite Logos werden per max-width + object-fit contain proportional verkleinert */
.logo-mosaik .logo-duo img {
  height: 58px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.logo-mosaik .logo-duo { max-width: 100%; }
.logo-mosaik .logo-duo .logo-rgb { position: absolute; inset: 0; margin: auto; }
@media (max-width: 1199.98px) { .logo-mosaik { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 767.98px) { .logo-mosaik { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }

/* ── Case-Detailseite (case.php, Template für alle Cases) ──
   --case-akzent / --case-akzent-text kommen pro Kunde aus dem Template */
.case-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(rgba(8, 9, 14, .18), rgba(8, 9, 14, .72)), var(--banner-img);
  background-size: cover;
  background-position: center;
  padding: 4rem 0 4.5rem;
}
/* Kunden-Akzentfarbe im Hero geprüft 09.08.2026: Über dem Foto (Scrim
   .18 → .72) erreichte der Kicker nur 1,0–3,3:1 – Pechtel und Oh!lio waren
   praktisch unlesbar, Blackriver bei 2,0:1. Dunkle Markenfarben lassen sich
   dort nicht retten, deshalb steht der Kundenname jetzt in Weiß. Die
   Akzentfarbe trägt weiterhin das Trenner-Band, die Aufgabe-Sektion (6,9:1)
   und den Detail-Kicker (6,4:1) – dort ist der Hintergrund kontrolliert. */
.case-kicker { color: #fff; font-weight: 700; font-size: 1.35rem; margin-bottom: 1rem; }
.case-headline { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.45; font-weight: 400; max-width: 1050px; }

.case-band { background: #fff; padding: 3rem 0 2.4rem; }
.case-band-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem 3rem; }
.case-band-logo { height: 68px; width: auto; max-width: 190px; object-fit: contain; }
.case-fakt b {
  display: block; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
  color: #8b90a0; font-weight: 400; margin-bottom: .2rem;
}
.case-fakt { color: var(--ink); font-weight: 400; }
.case-fakt--erfolg { color: var(--case-akzent); font-weight: 700; }
.case-tagzeile { margin-top: 1.8rem; }

.case-aufgabe { background: var(--case-akzent); color: var(--case-akzent-text); padding: 5.5rem 0; }
.case-aufgabe h2 { font-size: clamp(1.55rem, 2.05vw, 2.05rem); font-weight: 700; margin-bottom: 2rem; }
.case-aufgabe-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem; line-height: 1.8; }
.case-aufgabe-spalten p { margin: 0; }
.case-btn-hell {
  border: 1.5px solid var(--case-akzent-text); color: var(--case-akzent-text);
  padding: .7rem 1.5rem; border-radius: 9px; font-weight: 700; text-decoration: none;
  transition: background .25s, color .25s;
}
.case-btn-hell:hover { background: var(--case-akzent-text); color: var(--case-akzent); }
.case-btn-leise { color: var(--case-akzent-text); font-weight: 700; padding: .7rem 0; text-decoration: none; opacity: .85; }
.case-btn-leise:hover { opacity: 1; color: var(--case-akzent-text); }

.case-leistungen { background: #fff; padding: 5rem 0 4rem; }
.case-lkarte {
  border: 1.5px solid #e2e5ee; border-radius: 14px; padding: 1.6rem;
  height: 100%; display: flex; flex-direction: column; gap: .4rem;
}
.case-lkarte b { color: var(--ink); font-size: 1.1rem; }
.case-lkarte span { color: #6b7280; font-size: .92rem; }

.case-devices { background: var(--grad-dark) fixed; color: #fff; padding: 5.5rem 0 6rem; }
.case-devices .section-headline { color: #fff; }
.case-devices .journey-sub { color: #c3c9d4; font-weight: 400; max-width: 720px; }
.case-frame { position: relative; overflow: hidden; background: #fff; }
.case-frame iframe, .case-frame img {
  border: 0; display: block; transform-origin: 0 0; background: #fff;
}
/* Monitor: dunkle Blende mit Browser-Chrome (Ampel-Punkte + URL) und Standfuß */
.case-monitor {
  background: #262b38;
  border-radius: 16px;
  padding: 0 10px 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.case-monitor-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
}
.cm-punkt { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.cm-punkt:nth-child(2) { background: #febc2e; }
.cm-punkt:nth-child(3) { background: #28c840; }
.cm-url {
  flex: 1;
  margin: 0 3rem 0 1.4rem;
  background: #1a1e28;
  color: #9aa1b2;
  font-style: normal;
  font-size: .78rem;
  text-align: center;
  padding: .32rem .8rem;
  border-radius: 7px;
}
.case-monitor .case-frame { aspect-ratio: 1280 / 800; border-radius: 6px; }
.case-monitor-fuss {
  display: block;
  width: 130px;
  height: 26px;
  margin: 0 auto;
  background: linear-gradient(#2e3442, #232837);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}
/* Geräte untereinander: Desktop volle Breite, darunter das Smartphone */
.case-preview-desktop { margin-top: 2.5rem; }
.case-preview-mobil { margin-top: 4rem; }
.case-geraet-label {
  text-align: center;
  color: #8b90a0;
  font-size: .82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 1.2rem 0 0;
}
/* Auf Smartphones nur die mobile Ansicht zeigen */
@media (max-width: 767.98px) {
  .case-preview-desktop { display: none; }
  .case-preview-mobil { margin-top: 2.5rem; }
}
/* iPhone: dunkler Rahmen mit Notch */
.case-phone {
  position: relative;
  width: min(340px, 88%);
  margin: 0 auto;
  border-radius: 40px;
  padding: 12px;
  background: #262b38;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.case-phone-notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 20px;
  background: #262b38;
  border-radius: 12px;
  z-index: 2;
  pointer-events: none;
}
.case-phone .case-frame { aspect-ratio: 375 / 812; border-radius: 28px; }

.case-galerie-sek { background: #f4f5f7; padding: 5rem 0 6rem; }
.case-galerie {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem;
  cursor: zoom-in;
}
.case-galerie figure { margin: 0; }
.case-galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block;
  transition: transform .25s;
}
.case-galerie img:hover { transform: scale(1.02); }
.case-galerie figcaption { color: #6b7280; font-size: .85rem; margin-top: .5rem; }

.case-abschluss { background: #fff; border-top: 1px solid #e9e9ef; padding: 3rem 0; }
.case-abschluss-links a { color: #6b7280; font-weight: 700; text-decoration: none; }
.case-abschluss-links a:hover { color: var(--case-akzent); }
.case-abschluss-links span { margin: 0 .6rem; color: #c3c9d4; }

@media (max-width: 991.98px) {
  .case-hero { min-height: 480px; }
  .case-aufgabe-spalten { grid-template-columns: 1fr; gap: 1.4rem; }
  .case-galerie { grid-template-columns: repeat(2, 1fr); }
}

/* Case-Detailseite: optionale Detail-Sektion (Branding und Emotionen …) */
.case-details { background: #f4f5f7; padding: 5rem 0; }
.case-details-kicker { color: var(--case-akzent); font-weight: 700; font-size: 1.15rem; margin-bottom: .4rem; }
.case-details-text { column-count: 2; column-gap: 3rem; margin-top: 1.8rem; max-width: 1200px; }
.case-details-text p { break-inside: avoid; color: #3d4457; line-height: 1.8; }
@media (max-width: 991.98px) { .case-details-text { column-count: 1; } }

/* Case-Live-Preview: Mobile-First-Fakten links/rechts neben dem Smartphone (nur Desktop) */
.case-preview-mobil {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.case-facts--links { text-align: right; }
.case-facts-kicker {
  color: var(--case-akzent);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 1.4rem;
  filter: brightness(1.3);
}
.case-fact { margin-bottom: 1.8rem; max-width: 340px; }
.case-facts--links .case-fact { margin-left: auto; }
.case-fact b {
  display: block;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: .3rem;
}
.case-fact span { color: #c3c9d4; font-size: .9rem; line-height: 1.65; display: block; }
@media (max-width: 991.98px) {
  .case-preview-mobil { grid-template-columns: 1fr; }
}

/* Cases: noch nicht geladene Projekt-Kacheln */
.case-slot.versteckt { display: none; }

/* Kontaktformular: Ansprechpartner mit Foto + Live-Erreichbarkeitsstatus */
.kform-ansprechpartner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.kform-ansprechpartner img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .25);
}
.kform-ansprechpartner strong { display: block; color: #fff; }
.kform-ap-rolle { display: block; color: #8b90a0; font-size: .85rem; margin-bottom: .25rem; }
.kform-ansprechpartner .phone-status { display: block; }
/* außerhalb der Erreichbarkeit: grauer Punkt ohne Puls */
.phone-status--aus { color: #8b90a0; }
.phone-status--aus .status-dot { background: #8b90a0; animation: none; }

/* Domain-Verfügbarkeitsprüfung (Digital: "Domain finden") */
.domain-ergebnis { margin-top: 1rem; font-weight: 400; min-height: 1.5em; }
.domain-ergebnis.laeuft { color: #6b7280; }
.domain-ergebnis.frei { color: #1e9e5a; font-weight: 700; }
.domain-ergebnis.vergeben { color: #c2453c; }
.domain-ergebnis.hinweis { color: #6b7280; }
.domain-ergebnis a { color: #5a3fe8; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.domain-ergebnis a:hover { color: #7f6bf6; }

/* ── Domain-Check-Seite (domain.php) ── */
.section-domaincheck { background: var(--grad-dark) fixed; color: #fff; padding: 3rem 0 6rem; min-height: 70vh; }
.dc-title { color: #fff; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.35; margin: 1.5rem 0 2rem; }
.dc-suche { max-width: 720px; }
.dc-hinweis { color: #c3c9d4; margin-top: 1.6rem; max-width: 720px; }

.dc-ergebnis {
  margin-top: 2.5rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  max-width: 860px;
}
.dc-ergebnis--frei { border-color: rgba(46, 196, 118, .6); background: rgba(46, 196, 118, .10); }
.dc-ergebnis--vergeben { border-color: rgba(214, 92, 82, .5); background: rgba(214, 92, 82, .08); }
.dc-badge {
  display: inline-block; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase;
  padding: .42rem .9rem .26rem; border-radius: 30px; background: #35353c; color: #dfe2e8;
}
.dc-ergebnis--frei .dc-badge { background: #2ec476; color: #06331c; }
.dc-ergebnis--vergeben .dc-badge { background: #d65c52; color: #fff; }
.dc-domain { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; color: #fff; margin: 1rem 0 .6rem; word-break: break-all; }
.dc-text { color: #c3c9d4; max-width: 620px; margin-bottom: 1.6rem; }

.dc-alternativen { margin-top: 4rem; }
.dc-alternativen .section-headline { color: #fff; }
.dc-alt-sub { color: #c3c9d4; margin-top: .6rem; }
.dc-alt-grid {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.dc-alt-karte {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.2rem 1.4rem; border-radius: 12px; text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  transition: border-color .25s, transform .25s, background .25s;
}
.dc-alt-karte:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, .12); transform: translateY(-3px); }
.dc-alt-name { color: #fff; font-weight: 700; font-size: 1.05rem; word-break: break-all; }
.dc-alt-status { color: #2ec476; font-size: .86rem; }

.dc-infos { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 4.5rem; }
.dc-info b { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .3rem; }
.dc-info span { color: #8b90a0; font-size: .92rem; }

/* ── Bestellseite (bestellung.php) ── */
.section-bestellung { background: #fff; padding: 2.5rem 0 6rem; }
.best-title { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.35; color: var(--ink); margin: 1.2rem 0 1rem; }
.best-sub { color: #5a6472; max-width: 780px; margin-bottom: 2.5rem; }

.best-block { border: 0; padding: 0; margin: 0 0 3rem; }
.best-block legend {
  display: flex; align-items: center; gap: .8rem; float: none; width: auto;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 700; color: var(--ink); margin-bottom: 1.2rem;
}
.best-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; font-size: .95rem;
  background: linear-gradient(135deg, #a21ccb, #4da3e6); color: #fff; flex: 0 0 auto;
}
.best-hinweis { color: #6b7280; font-size: .92rem; margin-bottom: 1.2rem; }

/* Pakete */
.best-pakete { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.best-paket {
  position: relative; display: block; cursor: pointer;
  border: 1.5px solid #e2e5ee; border-radius: 14px; padding: 1.3rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.best-paket:hover { border-color: #b9a3ff; }
.best-paket.aktiv { border-color: #5a3fe8; box-shadow: 0 12px 34px rgba(90, 63, 232, .16); }
.best-paket input { position: absolute; opacity: 0; pointer-events: none; }
.bp-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.bp-kopf b { font-size: 1.15rem; color: var(--ink); }
.bp-preis { color: #5a3fe8; font-weight: 700; white-space: nowrap; }
.bp-preis small { color: #6b7280; font-weight: 400; font-size: .74rem; }
.bp-kurz { display: block; color: #6b7280; font-size: .88rem; margin: .3rem 0 .8rem; }
.bp-liste { list-style: none; padding: 0; margin: 0; }
.bp-liste li { color: #3d4457; font-size: .86rem; padding-left: 1.1rem; position: relative; margin-bottom: .28rem; }
.bp-liste li::before { content: '✓'; position: absolute; left: 0; color: #1e9e5a; }

/* Premium-Erweiterungen */
.best-extras { margin-top: 1.6rem; padding: 1.4rem; background: #f4f5f7; border-radius: 12px; }
.best-extras-titel { font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.best-extra { display: grid; grid-template-columns: 1fr 110px auto; gap: .8rem; align-items: center; margin-bottom: .8rem; }
.best-extra label { margin: 0; font-size: .92rem; }
.best-extra label small { display: block; color: #6b7280; font-size: .78rem; font-weight: 400; }
.best-extra-einheit { color: #6b7280; font-size: .86rem; }

/* Domains */
.best-domains { display: flex; flex-direction: column; gap: .7rem; }
.best-domain { display: grid; grid-template-columns: 1fr auto auto auto; gap: .7rem; align-items: center; }
.bd-preis { font-size: .88rem; color: #6b7280; white-space: nowrap; min-width: 92px; text-align: right; }

/* Verfügbarkeit der Domain */
.bd-status { font-size: .82rem; color: #8b90a0; white-space: nowrap; min-width: 128px; text-align: right; }
.bd-status.bd-prueft { color: #5a3fe8; }
.bd-status.bd-frei { color: #1e9e5a; font-weight: 700; }
.bd-status.bd-vergeben { color: #c2453c; font-weight: 700; }
.bd-status.bd-unklar { color: #b8781a; }
.best-domain input.ist-vergeben {
  border-color: #c2453c !important; box-shadow: 0 0 0 4px rgba(194, 69, 60, .12);
}
.best-verfuegbar-hinweis { font-size: .82rem; color: #8b90a0; margin: .9rem 0 0; line-height: 1.55; }
.bs-senden[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 767.98px) {
  .best-domain { grid-template-columns: 1fr auto; row-gap: .35rem; }
  .bd-status { grid-column: 1; text-align: left; min-width: 0; }
}
.bd-preis.bd-frei { color: #1e9e5a; font-weight: 700; }
.bd-preis.bd-teuer { color: #c2453c; font-weight: 700; }
.bd-weg {
  width: 38px; height: 38px; border-radius: 9px; border: 1.5px solid #e2e5ee;
  background: #fff; color: #6b7280; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.bd-weg:hover { border-color: #c2453c; color: #c2453c; }
.best-add {
  margin-top: 1rem; background: none; border: 1.5px dashed #b9a3ff; color: #5a3fe8;
  padding: .7rem 1.3rem; border-radius: 10px; font-weight: 700; cursor: pointer;
}
.best-add:hover { background: #f4f0ff; }

/* TLD-Pflichtangaben */
.best-pflichten { margin-top: 1.6rem; }
.best-pflichten:empty { margin: 0; }
.best-pflichten-titel { font-weight: 700; color: var(--ink); margin-bottom: .8rem; }
.best-tld-tag {
  display: inline-block; background: #35353c; color: #dfe2e8; font-size: .72rem;
  padding: .2rem .55rem .1rem; border-radius: 20px; margin-right: .4rem;
}
.best-pflichtfeld { margin-bottom: 1rem; }

/* Formularfelder + Checkboxen */
.best-form label { display: block; font-size: .88rem; color: #3d4457; margin-bottom: .3rem; }
.best-form label small { color: #6b7280; font-weight: 400; }
.best-form input[type=text], .best-form input[type=email], .best-form input[type=tel],
.best-form input[type=date], .best-form input[type=number], .best-form textarea {
  width: 100%; border: 1.5px solid #e2e5ee; border-radius: 10px; padding: .7rem .9rem;
  font: inherit; color: var(--ink); background: #fff;
}
.best-form input:focus, .best-form textarea:focus { outline: none; border-color: #5a3fe8; }
.best-check { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: #3d4457; margin-bottom: .9rem; }
.best-check input { margin-top: .2rem; flex: 0 0 auto; }
.best-check--stark { background: #f4f0ff; border: 1.5px solid #d9ccff; border-radius: 12px; padding: 1rem 1.1rem; }
.best-check a { color: #5a3fe8; text-decoration: underline; }

/* SEPA */
.sepa-kasten { background: #f4f5f7; border-radius: 12px; padding: 1.4rem; }
.sepa-zeile { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; margin-bottom: .4rem; }
.sepa-zeile span { color: #6b7280; }
.sepa-zeile b { color: var(--ink); text-align: right; }
.sepa-text { font-size: .86rem; color: #3d4457; margin-top: 1rem; line-height: 1.65; }
.sepa-hinweis { color: #6b7280; }

.best-vertrag { background: #f4f5f7; border-radius: 12px; padding: 1.4rem; margin-bottom: 1.6rem; }
.best-vertrag p { font-size: .88rem; color: #3d4457; margin-bottom: .8rem; line-height: 1.65; }
.best-vertrag p:last-child { margin-bottom: 0; }

/* Zusammenfassung */
.best-summe {
  position: sticky; top: 110px;
  background: var(--grad-dark); color: #fff; border-radius: 16px; padding: 1.8rem;
}
.bs-titel { font-size: 1.15rem; font-weight: 700; margin-bottom: 1.2rem; }
.bs-posten { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.bs-posten li { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; color: #c3c9d4; margin-bottom: .45rem; }
.bs-posten li b { color: #fff; white-space: nowrap; font-weight: 400; }
.bs-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .95rem; }
.bs-zeile b { color: #fff; }
.bs-klein { font-size: .82rem; color: #8b90a0; }
.bs-gross { font-size: 1.15rem; padding-top: .6rem; }
.bs-gross b { color: #fff; font-size: 1.35rem; }
.bs-trenner { height: 1px; background: rgba(255,255,255,.14); margin: 1.1rem 0; }
.bs-senden { width: 100%; margin-top: 1.6rem; border: 0; }
.bs-fuss { font-size: .78rem; color: #8b90a0; margin-top: 1rem; line-height: 1.6; }
.bs-schutz { font-size: .78rem; color: #8b90a0; margin-top: .6rem; }
@media (max-width: 991.98px) { .best-summe { position: static; } }

/* ── Domainpreise-Tabelle (domainpreise.php) ── */
.section-domainpreise { background: #fff; padding: 2.5rem 0 6rem; }
.dp-title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 700; color: var(--ink); margin: .4rem 0 1rem; }
.dp-sub { color: #5a6472; max-width: 860px; margin-bottom: 2.5rem; }

.dp-steuerung { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.dp-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.dp-tab {
  background: none; border: 1.5px solid #e2e5ee; border-radius: 30px;
  padding: .55rem 1.2rem; font-size: .88rem; font-weight: 400; color: #5a6472; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.dp-tab:hover { border-color: #b9a3ff; color: var(--ink); }
.dp-tab.aktiv { background: var(--ink); border-color: var(--ink); color: #fff; }
.dp-suche input {
  border: 1.5px solid #e2e5ee; border-radius: 10px; padding: .65rem 1rem;
  min-width: 320px; font: inherit; color: var(--ink);
}
.dp-suche input:focus { outline: none; border-color: #5a3fe8; }
.dp-treffer { color: #8b90a0; font-size: .84rem; margin: .9rem 0 0; }

.dp-tabelle-wrap { margin-top: 1.2rem; overflow-x: auto; border: 1px solid #eceef3; border-radius: 14px; }
.dp-tabelle { width: 100%; border-collapse: collapse; min-width: 720px; }
.dp-tabelle thead th {
  text-align: left; font-size: .76rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: #8b90a0; font-weight: 400; padding: 1rem 1.2rem; border-bottom: 1px solid #eceef3;
  background: #fafbfc; position: sticky; top: 0; z-index: 1;
}
.dp-tabelle tbody th, .dp-tabelle tbody td {
  padding: .85rem 1.2rem; border-bottom: 1px solid #f2f4f7; font-size: .92rem; vertical-align: middle;
}
.dp-tabelle tbody th { text-align: left; font-weight: 700; color: var(--ink); white-space: nowrap; }
.dp-tabelle tbody tr:hover { background: #fafbff; }
.dp-zweck { color: #6b7280; }
.dp-monat { font-weight: 700; color: #5a3fe8; white-space: nowrap; }
.dp-jahr { color: #3d4457; white-space: nowrap; }
.dp-paket { white-space: nowrap; }
.dp-ja { color: #1e9e5a; font-weight: 700; }
.dp-nein { color: #b8bec9; }

.dp-hinweise { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 3rem; }
.dp-hinweis b { display: block; color: var(--ink); margin-bottom: .35rem; }
.dp-hinweis span { color: #6b7280; font-size: .9rem; line-height: 1.65; }
.dp-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.bd-preis.bd-anfrage { color: #8b90a0; font-style: italic; }

/* Helle Seiten: Breadcrumb dunkel (body-Klasse bc-dunkel über $bodyKlasse setzen) */
.bc-dunkel .global-breadcrumb .breadcrumb-line,
.bc-dunkel .global-breadcrumb .breadcrumb-line a,
.bc-dunkel .global-breadcrumb .breadcrumb-line strong { color: #3d4457; text-shadow: none; }
.bc-dunkel .global-breadcrumb .breadcrumb-line span { color: #8b90a0; }
.bc-dunkel .global-breadcrumb .breadcrumb-line a:hover { color: #5a3fe8; }

/* ── Hosting-Positionierung + Rechenzentrums-Fakten ── */
.section-hostinginfo { background: var(--grad-dark) fixed; color: #fff; padding: 5.5rem 0; }
.section-hostinginfo .section-headline { color: #fff; }
.hi-text { max-width: 900px; margin-top: 1.6rem; }
.hi-text p { color: #c3c9d4; line-height: 1.8; margin-bottom: 1rem; }
.hi-text strong { color: #fff; }
.hi-fakten { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 3rem; }
.hi-fakt { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 1.4rem; }
.hi-fakt b { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .45rem; }
.hi-fakt span { color: #c3c9d4; font-size: .9rem; line-height: 1.7; }
.hi-fakt strong { color: #fff; }
.hi-fussnote { color: #8b90a0; font-size: .84rem; line-height: 1.7; margin-top: 2.5rem; max-width: 900px; }
/* Bestellübersicht: Jahresbetrag + Laufzeit */
.bs-abrechnung { font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; color: #8b90a0; margin: 0 0 .4rem; }
.bs-laufzeit { font-size: .78rem; color: #8b90a0; margin-top: .9rem; line-height: 1.6; }

/* ── Online-Check-Seite (check.php) ── */
.section-checkseite { background: #fff; padding: 2.5rem 0 6rem; }
.ck-title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 700; color: var(--ink); margin: .4rem 0 1rem; }
.ck-sub { color: #5a6472; max-width: 780px; margin-bottom: 2.2rem; }
.ck-form { display: flex; gap: .8rem; flex-wrap: wrap; max-width: 720px; }
.ck-form input {
  flex: 1 1 320px; border: 1.5px solid #e2e5ee; border-radius: 12px;
  padding: .95rem 1.1rem; font: inherit; color: var(--ink);
}
.ck-form input:focus { outline: none; border-color: #5a3fe8; }
.ck-form button { border: 0; }
.ck-fehler { margin-top: 1.6rem; color: #c2453c; font-weight: 400; }

/* Kopfbereich: links Eingabe und Bericht, rechts der Beleg */
.ck-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 3.4rem; align-items: start; }
.ck-kopf-text { min-width: 0; }

/* Weiteren Check starten (nur wenn oben schon eine Prüfung läuft) */
.ck-neu { margin-top: 3rem; border-top: 1px solid #eceef4; padding-top: 2.4rem; }
.ck-neu p { color: #5a6472; margin: 1rem 0 1.6rem; max-width: 640px; }

/* ── Bericht als PDF anfordern ── */
/* Nimmt die volle Breite der linken Spalte ein – bündig mit dem
   Fortschrittsbalken darunter, mit dem Rasterabstand zum Beleg rechts. */
.ck-pdf { margin-top: 2.2rem; border: 1.5px solid #e2e5ee; border-radius: 16px; overflow: hidden; }
.ck-pdf-schalter {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
  background: #fafbfc; border: 0; padding: 1.1rem 1.3rem; cursor: pointer;
  font: inherit; color: var(--ink); transition: background .2s;
}
.ck-pdf-schalter:hover { background: #f4f5f9; }
.ck-pdf-symbol {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--grad-dark);
  color: #fff; display: grid; place-items: center; font-size: .68rem; font-weight: 700; letter-spacing: .5px;
}
.ck-pdf-schalter strong { display: block; font-size: 1rem; font-weight: 700; }
.ck-pdf-schalter small { display: block; color: #6b7280; font-size: .84rem; line-height: 1.5; margin-top: .15rem; }
.ck-pdf-pfeil {
  flex: 0 0 auto; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid #5a3fe8;
  border-bottom: 2px solid #5a3fe8; transform: rotate(45deg); transition: transform .25s;
}
.ck-pdf-schalter[aria-expanded="true"] .ck-pdf-pfeil { transform: rotate(-135deg); }

.ck-pdf-panel { padding: 1.4rem 1.3rem 1.5rem; border-top: 1px solid #eceef4; }
.ck-pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ck-pdf-weit { grid-column: 1 / -1; }
.ck-pdf-grid label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink); }
.ck-pdf-grid input {
  display: block; width: 100%; margin-top: .35rem; border: 1.5px solid #e2e5ee; border-radius: 12px;
  padding: .8rem 1rem; font: inherit; color: var(--ink); background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.ck-pdf-grid input:focus { outline: none; border-color: #5a3fe8; box-shadow: 0 0 0 4px rgba(90, 63, 232, .1); }
.ck-pdf-grid input.ist-fehlerhaft { border-color: #c2453c; box-shadow: 0 0 0 4px rgba(194, 69, 60, .1); }
.ck-pdf-check {
  display: flex; gap: .7rem; margin-top: 1.1rem; font-size: .84rem; color: #5a6472;
  line-height: 1.6; max-width: 820px;   /* Lesbare Zeilenlänge auf breiten Bildschirmen */
}
.ck-pdf-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .15rem; accent-color: #5a3fe8; }
.ck-pdf-check input.ist-fehlerhaft { outline: 2px solid #c2453c; outline-offset: 2px; }
.ck-pdf-check a { color: #5a3fe8; text-decoration: underline; }
.ck-pdf-aktion { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.3rem; }
.ck-pdf-aktion button { border: 0; white-space: nowrap; }
.ck-pdf-aktion button[disabled] { opacity: .6; cursor: not-allowed; }
.ck-pdf-hinweis { font-size: .8rem; color: #8b90a0; margin: 0; flex: 1 1 220px; line-height: 1.55; }
#ckPdfFeedback { text-align: left; margin-top: 1rem; }
#ckPdfFeedback a { color: inherit; text-decoration: underline; }

/* ── Beleg: Screenshots der geprüften Seite ── */
.ck-beleg {
  background: #fafbfc; border: 1.5px solid #e2e5ee; border-radius: 18px; padding: 1.4rem;
  display: flex; flex-direction: column;
}
.ck-beleg-titel {
  font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: #8b90a0;
  font-weight: 700; margin: 0 0 1.1rem;
}
/* Desktop und Handy nebeneinander – das Panel bleibt flach, damit der
   Fortschritt der Prüfung ohne Scrollen sichtbar ist. */
.ck-beleg-buehne { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 1.1rem; }
/* Beide Rahmen sind unterschiedlich hoch – die Beschriftungen sollen trotzdem
   auf einer Linie sitzen, deshalb wandert sie an den unteren Rand. */
.ck-beleg figure { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.ck-beleg figcaption { font-size: .74rem; color: #8b90a0; margin-top: auto; padding-top: .5rem; }

.ck-browser { border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(23, 19, 31, .14); }
.ck-browser-leiste {
  display: flex; align-items: center; gap: 5px; background: #2a2733; padding: .45rem .6rem;
}
.ck-browser-leiste span { width: 7px; height: 7px; border-radius: 50%; background: #55505f; flex: 0 0 auto; }
.ck-browser-leiste em {
  flex: 1 1 auto; min-width: 0; margin-left: .4rem; background: #1d1b25; border-radius: 20px;
  padding: .18rem .6rem; font-size: .66rem; font-style: normal; color: #9aa1b4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-browser-bild { aspect-ratio: 16 / 10; background: #17131f; }

.ck-phone {
  border: 3px solid #2a2733; border-radius: 14px; padding: 3px; background: #2a2733;
  box-shadow: 0 10px 26px rgba(23, 19, 31, .14);
}
.ck-phone-bild { aspect-ratio: 1 / 2; border-radius: 10px; overflow: hidden; background: #17131f; }
.ck-beleg-buehne img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Zustände: leer, lädt (Schimmer), fertig, fehlgeschlagen */
.ck-beleg:not([data-status="fertig"]) .ck-beleg-buehne img { opacity: 0; }
.ck-beleg[data-status="laedt"] .ck-browser-bild,
.ck-beleg[data-status="laedt"] .ck-phone-bild {
  background: linear-gradient(100deg, #211d2b 30%, #322c42 50%, #211d2b 70%) #211d2b;
  background-size: 300% 100%; animation: ck-schimmer 1.4s linear infinite;
}
@keyframes ck-schimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.ck-beleg-text { font-size: .8rem; color: #6b7280; line-height: 1.6; margin: 1.2rem 0 0; }
.ck-beleg-text strong { color: var(--ink); }
.ck-beleg-links { display: flex; gap: 1rem; flex-wrap: wrap; margin: .7rem 0 0; }
.ck-beleg-links a { font-size: .78rem; color: #5a3fe8; text-decoration: underline; }

/* Ab Zweispalten-Layout schließt das Beleg-Panel unten bündig mit der
   Fortschritts-Box ab. Nur bei geschlossenem Bericht-Formular – aufgeklappt
   wächst die linke Spalte um mehrere hundert Pixel, dann entstünde im Panel
   eine große Leerfläche. */
@media (min-width: 1200px) {
  .ck-kopf:has(.ck-pdf-schalter[aria-expanded="false"]) .ck-beleg { align-self: stretch; }
  .ck-kopf:has(.ck-pdf-schalter[aria-expanded="false"]) .ck-beleg-text { margin-top: auto; }
}

/* Direkt geöffneter Link: Prüfung erst nach Klick (Bot-Schutz) */
.ck-start {
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  margin-top: 1.3rem; border: 1.5px solid #e2e5ee; border-radius: 16px;
  padding: 1.3rem 1.5rem; background: #fff;
}
.ck-start > div { flex: 1 1 320px; min-width: 0; }
.ck-start-titel { font-weight: 700; color: var(--ink); margin: 0; font-size: 1rem; }
.ck-start-titel strong { color: #5a3fe8; word-break: break-all; }
.ck-start-text { color: #6b7280; font-size: .86rem; line-height: 1.6; margin: .35rem 0 0; }
.ck-start button { border: 0; white-space: nowrap; }
.ck-start[hidden] { display: none; }
.domain-form--start { margin-top: 1.2rem; }

/* ── Fortschritt der Prüfung ── */
.ck-fortschritt {
  margin-top: 1.3rem; border: 1.5px solid #e2e5ee; border-radius: 16px;
  padding: 1.3rem 1.5rem 1.4rem; background: #fff;
}
.ck-fs-kopf { display: flex; align-items: baseline; gap: 1rem; }
.ck-fs-schritt { flex: 1 1 auto; margin: 0; font-weight: 700; color: var(--ink); font-size: .98rem; }
.ck-fs-wert { margin: 0; font-weight: 700; color: #5a3fe8; font-variant-numeric: tabular-nums; }
.ck-fs-schiene {
  position: relative; height: 8px; border-radius: 4px; background: #eef0f4;
  overflow: hidden; margin-top: .8rem;
}
.ck-fs-balken {
  position: relative; width: 0; height: 100%; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, #5a3fe8, #8b5cf6 55%, #35c6f4);
  transition: width .2s linear;
}
/* Solange geprüft wird, läuft ein Lichtschein über den Balken – so ist auch bei
   einer langen Messung sichtbar, dass etwas passiert. */
.ck-fortschritt[data-status="laeuft"] .ck-fs-balken::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: ck-fs-lauf 1.5s linear infinite;
}
@keyframes ck-fs-lauf { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ck-fortschritt[data-status="fertig"] .ck-fs-balken { background: #1e9e5a; }
.ck-fs-hinweis { font-size: .82rem; color: #8b90a0; margin: .75rem 0 0; line-height: 1.55; min-height: 1.2em; }
@media (prefers-reduced-motion: reduce) {
  .ck-fortschritt[data-status="laeuft"] .ck-fs-balken::after { animation: none; }
}
.ck-fs-punkte {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: 1rem 0 0; padding: 0;
}
.ck-fs-punkt {
  display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: #a2a8b6;
}
.ck-fs-punkt::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid #d6d9e2; background: #fff;
}
.ck-fs-punkt[data-status="laeuft"] { color: #5a3fe8; font-weight: 700; }
.ck-fs-punkt[data-status="laeuft"]::before { border-color: #5a3fe8; background: #5a3fe8; }
.ck-fs-punkt[data-status="fertig"] { color: #4a5160; }
.ck-fs-punkt[data-status="fertig"]::before { border-color: #1e9e5a; background: #1e9e5a; }
.ck-fs-punkt[data-status="fehler"]::before { border-color: #c2453c; background: #c2453c; }

/* Gesamtergebnis */
.ck-bereiche { margin-top: 3rem; }
.ck-gesamt {
  display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap;
  background: var(--grad-dark); color: #fff; border-radius: 16px; padding: 1.8rem;
}
.ck-ring {
  --wert: 0;
  width: 108px; height: 108px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(#8b5cf6 calc(var(--wert) * 1%), rgba(255,255,255,.12) 0);
  transition: background .6s ease;
}
.ck-ring span {
  width: 84px; height: 84px; border-radius: 50%; background: #17131f;
  display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; color: #fff;
}
.ck-gesamt-titel { font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; color: #8b90a0; margin: 0; }
.ck-gesamt-url { color: #fff; font-weight: 700; margin: .2rem 0; word-break: break-all; }
.ck-gesamt-text { color: #c3c9d4; margin: 0; }

/* Gruppen-Karten */
.ck-liste { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
.ck-karte { border: 1.5px solid #e2e5ee; border-radius: 14px; overflow: hidden; }
.ck-karte-kopf { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.3rem; background: #fafbfc; }
.ck-karte-kopf h2 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; flex: 1; }
.ck-score { font-weight: 700; color: #5a3fe8; white-space: nowrap; }
.ck-spinner {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid #e2e5ee; border-top-color: #5a3fe8;
}
.ck-karte[data-status="laeuft"] .ck-spinner { animation: ck-dreh .8s linear infinite; }
.ck-karte[data-status="wartet"] .ck-spinner { opacity: .4; }
.ck-karte[data-status="fertig"] .ck-spinner { border: 2px solid #1e9e5a; border-radius: 50%; position: relative; }
.ck-karte[data-status="fertig"] .ck-spinner::after {
  content: '✓'; position: absolute; inset: -2px; display: grid; place-items: center;
  font-size: .7rem; color: #1e9e5a;
}
@keyframes ck-dreh { to { transform: rotate(360deg); } }

.ck-punkte { list-style: none; margin: 0; padding: 0; }
.ck-punkt { display: flex; gap: .9rem; padding: .9rem 1.3rem; border-top: 1px solid #f2f4f7; }
.ck-marke {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; margin-top: .15rem;
}
.ck-gut .ck-marke { background: #e4f6ec; color: #1e9e5a; }
.ck-warnung .ck-marke { background: #fdf3e2; color: #b8781a; }
.ck-schlecht .ck-marke { background: #fbe9e7; color: #c2453c; }
.ck-info .ck-marke { background: #eef0f4; color: #6b7280; }
.ck-punkt b { color: var(--ink); font-size: .95rem; }
.ck-wert { color: #5a3fe8; font-weight: 700; font-size: .88rem; margin-left: .4rem; }
.ck-hinweis { display: block; color: #6b7280; font-size: .86rem; line-height: 1.6; margin-top: .25rem; }

/* Abschluss-CTA + Methodik */
.ck-cta { margin-top: 3rem; background: #f4f5f7; border-radius: 16px; padding: clamp(1.6rem, 3vw, 2.6rem); }
.ck-cta p { color: #5a6472; max-width: 720px; margin: 1rem 0 1.6rem; }
.ck-lead-grid { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr auto; }
.ck-lead-grid input { border: 1.5px solid #e2e5ee; border-radius: 12px; padding: .9rem 1.1rem; font: inherit; }
.ck-lead-grid input:focus { outline: none; border-color: #5a3fe8; }
.ck-lead-grid button { border: 0; white-space: nowrap; }
.ck-lead-hinweis { font-size: .8rem; color: #8b90a0; margin-top: .8rem; }
.ck-methodik { margin-top: 3rem; color: #6b7280; font-size: .88rem; line-height: 1.75; max-width: 900px; }
.check-form--direkt .check-grid--direkt { display: grid; grid-template-columns: 1fr auto; gap: .8rem; }
.check-hinweis { text-align: center; color: #6b7280; font-size: .86rem; margin-top: .9rem; }
.check-fehler {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: .9rem 0 0; text-align: center; color: #c0392b; font-size: .93rem;
}
.check-fehler::before {
  content: '!'; flex: 0 0 auto; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: #c0392b; color: #fff; font-size: .78rem; line-height: 1.2rem; font-weight: 400;
}
.check-fehler[hidden] { display: none; }
.check-grid input.ist-fehlerhaft { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); }

/* ════════════════ BERICHT-SEITE ════════════════ */
.bt-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 3rem; align-items: start; }
.bt-download {
  background: #fafbfc; border: 1.5px solid #e2e5ee; border-radius: 18px; padding: 1.5rem;
  display: grid; gap: .9rem; justify-items: start;
}
.bt-download .btn-grad { border: 0; width: 100%; text-align: center; }
.bt-ansehen { font-size: .84rem; color: #5a3fe8; text-decoration: underline; }
.bt-hinweis { font-size: .78rem; color: #8b90a0; line-height: 1.6; margin: 0; word-break: break-word; }
/* Bericht teilen */
.bt-teilen {
  margin-top: 2.4rem; background: #fafbfc; border: 1.5px solid #e2e5ee; border-radius: 18px;
  padding: 1.6rem 1.8rem 1.5rem;
}
.bt-teilen-kopf h2 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0; }
.bt-teilen-kopf p { color: #5a6472; font-size: .92rem; margin: .4rem 0 1.1rem; max-width: 640px; }
.bt-teilen-kopf strong { color: var(--ink); }
.bt-teilen-feld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; }
.bt-teilen-feld input {
  border: 1.5px solid #e2e5ee; border-radius: 12px; padding: .8rem 1rem; font: inherit;
  font-size: .9rem; color: #5a6472; background: #fff; min-width: 0;
}
.bt-teilen-feld input:focus { outline: none; border-color: #5a3fe8; }
.bt-teilen-feld button { border: 0; white-space: nowrap; }
.bt-teilen-wege { display: flex; gap: 1.3rem; flex-wrap: wrap; margin: 1rem 0 0; }
.bt-teilen-wege a { font-size: .86rem; color: #5a3fe8; text-decoration: underline; }
.bt-teilen-hinweis { font-size: .78rem; color: #8b90a0; line-height: 1.6; margin: .9rem 0 0; max-width: 700px; }

.bt-gesamt { margin-top: 2.8rem; }
.bt-liste { margin-top: 2rem; }
.bt-belege { margin-top: 3rem; }
.bt-beleg-text { color: #5a6472; max-width: 720px; margin: 1rem 0 1.8rem; }
.bt-beleg-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2rem; align-items: start; }
.bt-beleg { margin: 0; }
.bt-beleg img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid #e2e5ee; box-shadow: 0 12px 30px rgba(23, 19, 31, .12);
}
.bt-beleg figcaption { font-size: .78rem; color: #8b90a0; margin-top: .7rem; }
.bt-cta { margin-top: 3rem; }
.bt-kontakt { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 0; }
.bt-kontakt .btn-grad { border: 0; }

@media (max-width: 1199.98px) {
  .ck-kopf, .bt-kopf { grid-template-columns: 1fr; gap: 2.4rem; }
  .ck-beleg { max-width: 560px; }
  .bt-download { max-width: 420px; }
}
@media (max-width: 575.98px) {
  .ck-beleg-buehne { grid-template-columns: minmax(0, 1fr) 78px; gap: .8rem; }
}
@media (max-width: 767.98px) {
  .ck-lead-grid, .check-form--direkt .check-grid--direkt { grid-template-columns: 1fr; }
  .ck-pdf-grid { grid-template-columns: 1fr; }
  .ck-pdf-aktion button { width: 100%; }
  .ck-fs-punkte { gap: .45rem 1rem; }
  .ck-fs-punkt { font-size: .74rem; }
  .bt-beleg-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .bt-beleg--mobil img { max-width: 240px; }
  .bt-teilen { padding: 1.3rem; }
  .bt-teilen-feld { grid-template-columns: 1fr; }
  .bt-teilen-feld button { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   RECHTSTEXTE (Impressum, Datenschutzerklärung)
   Der Text kommt als fertiges HTML von der Website-Check GmbH und bringt
   eigene Regeln auf #jmdcontent mit. Alles hier ist deshalb über
   .rechtstext-inhalt gehängt – damit gewinnt es gegen die Vorgaben aus
   dem Snippet, ohne dass dieses angefasst werden muss.
   ══════════════════════════════════════════════════════════════════ */
.section-rechtstext { background: #fff; padding: 2.5rem 0 6rem; }

.rechtstext-lauf.hat-toc {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 3.5rem; align-items: start;
}

/* ── Inhaltsverzeichnis ───────────────────────────────────────────── */
.rechtstext-toc { position: sticky; top: 120px; }
.rt-toc-titel {
  letter-spacing: 2.5px; text-transform: uppercase; color: #6b7280;
  font-size: .72rem; margin: 0 0 .9rem; padding-left: 1rem;
}
.rechtstext-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: rt; }
.rechtstext-toc li { counter-increment: rt; }
.rechtstext-toc a {
  display: flex; gap: .6rem; padding: .42rem 1rem; font-size: .84rem; line-height: 1.4;
  color: #5a6472; text-decoration: none; border-left: 2px solid #eceef4;
  transition: color .2s, border-color .2s, background .2s;
}
.rechtstext-toc a::before { content: counter(rt); color: #b3bac8; font-size: .74rem; padding-top: .1rem; }
.rechtstext-toc a:hover { color: var(--ink); background: #f7f7fb; border-left-color: #b9a3ff; }
.rechtstext-toc a.aktiv { color: var(--ink); font-weight: 700; border-left-color: var(--purple); }
.rechtstext-toc a.aktiv::before { color: var(--purple); }

/* ── Der Rechtstext selbst ────────────────────────────────────────── */
.rechtstext-inhalt { max-width: 860px; }
/* Ohne JavaScript legt das Snippet ein iframe über die Fläche und braucht dafür
   die vom Anbieter vorgesehene Mindesthöhe. Mit JavaScript wird der Text direkt
   ins Dokument geschrieben – dann bestimmt der Text die Höhe. */
/* !important, weil der Anbieter die Höhe direkt am Element notiert. */
html.mit-js .rechtstext-inhalt .jmdsnippet { min-height: 0 !important; }

.rechtstext-inhalt #jmdcontent {
  font-family: var(--font);
  font-size: .97rem; line-height: 1.75; color: #3b4354;
}
/* Die Überschrift des Snippets ist die Überschrift der Seite. Bis zum
   15.08.2026 war sie hier ausgeblendet, weil darüber eine eigene stand –
   mit deren Entfernung lief die Seite ohne Titel an. Sie bleibt sichtbar. */
.rechtstext-inhalt #jmdcontent > h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 700; color: var(--ink);
  line-height: 1.2; margin: 0 0 1.8rem;
}

.rechtstext-inhalt #jmdcontent h2 {
  font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 700; color: var(--ink);
  margin: 3.2rem 0 1.1rem; padding-top: 1.6rem; border-top: 1px solid #eceef4;
  scroll-margin-top: 130px;
}
.rechtstext-inhalt #jmdcontent > h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.rechtstext-inhalt #jmdcontent h3 {
  font-size: 1.06rem; font-weight: 700; color: var(--ink); margin: 2.2rem 0 .7rem;
  scroll-margin-top: 130px;
}
.rechtstext-inhalt #jmdcontent h4,
.rechtstext-inhalt #jmdcontent h5,
.rechtstext-inhalt #jmdcontent h6 {
  font-size: .97rem; font-weight: 700; color: var(--ink); margin: 1.6rem 0 .5rem;
}
.rechtstext-inhalt #jmdcontent p { margin: 0 0 1.1rem; }
.rechtstext-inhalt #jmdcontent strong, .rechtstext-inhalt #jmdcontent b { color: var(--ink); font-weight: 700; }
.rechtstext-inhalt #jmdcontent a {
  color: var(--indigo); text-decoration: none; border-bottom: 1px solid rgba(90,86,239,.3);
}
.rechtstext-inhalt #jmdcontent a:hover { color: var(--purple); border-bottom-color: var(--purple); }
.rechtstext-inhalt #jmdcontent ul,
.rechtstext-inhalt #jmdcontent ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.rechtstext-inhalt #jmdcontent li { margin-bottom: .4rem; }

/* Aufzählungen des Snippets: <li> sind auf display:block gesetzt und
   bekommen ihre Nummer über ein ::before – der Punkt bleibt also erhalten. */
.rechtstext-inhalt #jmdcontent ol > li > *:first-child::before { color: #8b90a0; font-weight: 700; }

.rechtstext-inhalt #jmdcontent code {
  background: #f5f4fa; color: var(--purple); box-shadow: none;
  border: 1px solid #e6e3f2; border-radius: 5px; font-weight: 500; font-size: .86em;
}
.rechtstext-inhalt #jmdcontent .cancellation-policy,
.rechtstext-inhalt #jmdcontent .jmd-bordered {
  border: 1px solid #e2e5ee; border-radius: var(--radius);
  padding: .4rem 1.4rem; background: #fafafd;
}

/* Tabellen: das Snippet klappt sie unter 1600px in Kartenform – die
   Kartenoptik hier an unsere Flächen angleichen. */
.rechtstext-inhalt #jmdcontent table { border-color: #eceef4; width: 100%; font-size: .9rem; }
.rechtstext-inhalt #jmdcontent table thead th { background: #f5f4fa; color: var(--ink); font-weight: 700; }
.rechtstext-inhalt #jmdcontent table tbody td { border-color: #eceef4; }
.rechtstext-inhalt #jmdcontent tr { border-color: #e2e5ee; border-radius: 10px; overflow: hidden; }

/* Der Herkunftsnachweis des Anbieters steht unten im Snippet – klein setzen,
   unsere eigene Quellenzeile führt ihn ohnehin aus. */
.rechtstext-inhalt #jmdwrapper > p,
.rechtstext-inhalt [data-jmdwrapper] > p { font-size: .78rem; color: #8b90a0; margin: .2rem 0; }
.rechtstext-inhalt [data-jmdwrapper] > p:first-of-type { margin-top: 2.5rem; }
.rechtstext-inhalt [data-jmdwrapper] > p a { color: #8b90a0; border-bottom-color: #d6d9e3; }

.rechtstext-fehlt { color: #b3261e; }

@media (max-width: 1199.98px) {
  .rechtstext-lauf.hat-toc { grid-template-columns: 1fr; gap: 2.4rem; }
  .rechtstext-toc { position: static; border: 1px solid #eceef4; border-radius: var(--radius); padding: 1.2rem 0; }
  .rechtstext-toc nav ol { columns: 2; column-gap: 1.5rem; }
}
@media (max-width: 575.98px) {
  .section-rechtstext { padding-bottom: 4rem; }
  .rechtstext-toc nav ol { columns: 1; }
  .rechtstext-inhalt #jmdcontent h2 { margin-top: 2.4rem; }
}

/* ══════════════ ATV-KONFIGURATOR ══════════════
   Rechnet lokal aus den Einwohnerzahlen der gewählten Postleitzahlen –
   dunkler Abschnitt zwischen den beiden hellen Nachbarn. */
.atv-konfig { background: var(--grad-dark) fixed; color: #fff; padding: 7rem 0; }
.atv-konfig .h-display { color: #fff; }
.atv-konfig-kopf { max-width: 780px; }
/* Der Standard-Kicker ist für helle Flächen gedacht (#6b7280 → hier 3,81:1). */
.atv-konfig .news-kicker { color: #a8b0be; }
.atv-konfig-lead { color: #c3c9d4; margin-top: 1.2rem; line-height: 1.75; }

/* Formular als Glaskarte wie das Kontaktformular */
.atv-konfig-form {
  margin-top: 2.8rem; padding: 1.9rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px;
}
.atv-konfig-modus { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.atv-modus-knopf {
  background: none; border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 30px;
  padding: .55rem 1.2rem; font-size: .88rem; color: #c3c9d4; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.atv-modus-knopf:hover { border-color: #b9a3ff; color: #fff; }
.atv-modus-knopf.aktiv { background: #fff; border-color: #fff; color: #16181d; }

/* Flexzeile statt Raster: das Umkreis-Feld gibt es nur, wenn Koordinaten
   hinterlegt sind – eine feste Spaltenzahl ließe sonst eine Lücke stehen. */
.atv-konfig-felder { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.atv-konfig-felder .atv-feld { flex: 1 1 260px; }
.atv-konfig-felder .atv-feld--km { flex: 0 0 150px; }
.atv-konfig-felder .atv-feld--knopf { flex: 0 0 auto; }
.atv-feld { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.atv-feld-titel { font-size: .82rem; letter-spacing: .4px; color: #c3c9d4; }
.atv-feld-titel b { color: #fff; }
.atv-feld input[type="text"], .atv-feld select {
  background: rgba(0, 0, 0, .28); border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 10px; padding: .7rem .9rem; color: #fff; font-size: .95rem; font-family: var(--font);
}
.atv-feld input[type="text"]:focus, .atv-feld select:focus {
  outline: none; border-color: #b9a3ff;
}
.atv-feld-hinweis { font-size: .72rem; color: #8b90a0; line-height: 1.4; }
.atv-konfig-start { white-space: nowrap; }
.atv-konfig-fehler { color: #ff9d9d; font-size: .88rem; margin: 1.2rem 0 0; }

/* Ergebnis */
.atv-konfig-ergebnis { margin-top: 2.6rem; }
/* Vier Werte: 2x2 statt 3+1 – die vierte Kachel stand sonst allein */
.atv-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.atv-wert {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; padding: 1.5rem 1.6rem;
}
.atv-wert--haupt { background: rgba(139, 47, 214, .16); border-color: rgba(185, 163, 255, .4); }
.atv-wert-zahl {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 700; line-height: 1.05; margin: 0 0 .4rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.atv-wert--haupt .atv-wert-zahl {
  background: none; -webkit-text-fill-color: #fff; color: #fff;
}
.atv-wert-titel { font-size: .95rem; color: #fff; margin: 0 0 .2rem; font-weight: 700; }
.atv-wert-text { font-size: .8rem; color: #9aa0ab; line-height: 1.5; margin: 0; }
.atv-wert-warnung {
  font-size: .8rem; line-height: 1.5; margin: .7rem 0 0; padding-top: .7rem;
  border-top: 1px solid rgba(255, 255, 255, .18); color: #ffd9a8;
}
.atv-wert--haupt .atv-wert-text { color: #d9cdf0; }

.atv-gebiete { margin-top: 2.4rem; }
.atv-gebiete-kopf { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: baseline; }
.atv-gebiete-kopf h3 { font-size: 1.15rem; margin: 0; color: #fff; }
.atv-gebiete-stand { font-size: .78rem; color: #8b90a0; margin: 0; }
.atv-gebiete-tabelle { margin-top: 1rem; max-height: 340px; overflow: auto; border-radius: 12px; }
.atv-gebiete-tabelle table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.atv-gebiete-tabelle th {
  position: sticky; top: 0; background: #17161d; color: #c3c9d4;
  text-align: left; font-weight: 400; font-size: .78rem; letter-spacing: .4px;
  padding: .7rem .9rem; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.atv-gebiete-tabelle td {
  padding: .6rem .9rem; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #e6e9ee;
}
.atv-gebiete-tabelle tr:last-child td { border-bottom: 0; }
.atv-gebiete-tabelle td:nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; }
.atv-konfig-quelle { font-size: .74rem; color: #8b90a0; line-height: 1.6; margin: 1.4rem 0 0; max-width: 900px; }
.atv-konfig-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
/* .btn-outline-dark bringt background:#fff mit – auf dunklem Grund stand
   sonst weiße Schrift auf weißer Fläche. */
.atv-konfig-cta .btn-outline-dark {
  background: transparent; border-color: rgba(255, 255, 255, .38); color: #fff;
}
.atv-konfig-cta .btn-outline-dark:hover { background: #fff; border-color: #fff; color: #16181d; }

@media (max-width: 991.98px) {
  .atv-konfig-start { flex: 1 1 100%; }
}
@media (max-width: 575.98px) {
  .atv-konfig { padding: 4.5rem 0; }
  .atv-konfig-form { padding: 1.3rem; }
  .atv-werte { grid-template-columns: minmax(0, 1fr); }
  .atv-konfig-felder .atv-feld { flex: 1 1 100%; }
  .atv-gebiete-tabelle { font-size: .82rem; }
  .atv-gebiete-tabelle th:nth-child(3), .atv-gebiete-tabelle td:nth-child(3) { display: none; }
}

/* Karte des ATV-Konfigurators */
.atv-karte { margin: 2.4rem 0 0; }
/* Festes Verhältnis: main.js rechnet den Kartenausschnitt darauf zu, damit
   preserveAspectRatio nicht doch mehr Umland einblendet als gewollt. */
.atv-karte-rahmen {
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9;
}
.atv-karte-rahmen svg { display: block; width: 100%; height: 100%; }
.atv-karte-quelle { font-size: .72rem; color: #8b90a0; margin: .6rem 0 0; }
.atv-karte-quelle a { color: #8b90a0; }

/* Zwei-Klick-Knopf und Pflicht-Attribution der OSM-Hintergrundkarte */
.atv-karte-rahmen { position: relative; }
.atv-karte-tiles {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: rgba(10, 10, 16, .78); color: #fff; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 30px;
  padding: .5rem 1rem; font-size: .8rem; font-family: var(--font);
  backdrop-filter: blur(4px);
  transition: border-color .2s, background .2s;
}
.atv-karte-tiles:hover { border-color: #b9a3ff; background: rgba(30, 20, 50, .85); }
.atv-karte-osm {
  position: absolute; right: .5rem; bottom: .4rem; z-index: 2;
  font-size: .68rem; color: #333; background: rgba(255, 255, 255, .75);
  border-radius: 4px; padding: .1rem .45rem;
}
.atv-karte-osm a { color: #333; }

/* ══════════════ GOOGLEADS: ANZEIGEN-BÜHNE IM HERO ══════════════
   Ein mittiges Smartphone, in dem die drei Werbeformate nacheinander
   überblenden (Rotation in main.js); die drei KPI-Karten liegen darum
   verteilt. Der Rahmen nutzt das Seitenverhältnis des höchsten Mockups
   (Shopping, 740×1194) – die beiden flacheren enden oben bündig und
   blenden innerhalb desselben Rahmens. Ersetzt die alte hero-collage.png. */
/* Nur noch unten Luft reservieren: Dorthin weicht die Conversions-Karte aus.
   Der obere Reserveraum ist mit der Karte „Website aufrufe“ entfallen, der
   negative Rand zieht die Bühne zusätzlich nach oben. */
/* Der negative Rand zieht die ganze Bühne (Telefon + beide Karten) nach
   oben. Grenze ist der Sticky-Header: Bei -156px verschwanden die obersten
   9px der Umsatzkarte darunter (Header z-index 1040, Karte 2), deshalb
   -147px – die Karte schließt damit bündig an die Headerkante an. */
.ga-buehne {
  position: relative; max-width: 560px; margin: -147px auto 0;
  padding: 50px 0 56px;
}
.ga-phone {
  width: min(300px, 56%); margin: 0 auto;
  position: relative; aspect-ratio: 740 / 1194;
}
/* Gleiche GRÖSSE heißt gleiche Höhe: Die drei gezeichneten Telefone haben
   unterschiedliche Proportionen (Seitenverhältnis der Tinte 1,48 / 1,69 /
   1,60 – gemessen), füllen ihre Datei aber identisch (92 % / 96 %). Bei
   voller Rahmenhöhe und automatischer Breite sind Ober- und Unterkante
   aller drei deckungsgleich; nur die Breite variiert leicht (273–311 px),
   das breiteste ragt mittig 19 px über den Rahmen – gewollt, kein Clip. */
.ga-phone img {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .9s ease;
}
.ga-phone img.aktiv { opacity: 1; }
/* Dreiecksverteilung um das Telefon: oben links (ragt über die Oberkante
   hinaus), rechts in der unteren Hälfte, unten links (ragt unter die
   Unterkante). So bleibt die Bildschirmmitte des Telefons frei. */
.ga-kpi {
  position: absolute; z-index: 2;
  width: min(186px, 34%); height: auto;
  border-radius: 10px; background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}
/* Beide Karten sitzen 50 px höher, als das Telefon es vorgibt. Der
   Bezugspunkt von top/bottom ist .ga-buehne, deren Oberkante durch das
   50-px-Polster bereits 50 px über dem Telefon liegt – top: 27px setzt die
   Umsatzkarte damit 23 px über die Telefonoberkante. Die Conversions-Karte
   steigt von 30 auf 80 px über der Bühnenunterkante. */
.ga-kpi--umsatz      { right: 0; top: 27px; }
.ga-kpi--conversions { left: 3%; bottom: 80px; }
/* Offizielles Google-Partner-Badge im Claim-Kasten. margin-left: auto
   schiebt es an den rechten Rand – der Claim-Text daneben behält seine
   Breite, statt sich bis ans Badge zu dehnen. Keine eigene weiße Fläche:
   das Badge bringt seinen Rahmen selbst mit. */
/* Der Claim-Kasten insgesamt 46px höher (statt nur das Badge) – so beginnen
   Text und Badge auf derselben Oberkante. Das !important schlägt das
   !important von .gk-hero-claims, deshalb der Nachbarschafts-Selektor. */
.ga-buehne + .gk-hero-claims { margin-top: -46px !important; }
.ga-partner-link {
  flex-shrink: 0; margin-left: auto;
  display: inline-flex; align-items: flex-start;
  transition: transform .25s;
}
.ga-partner-link:hover { transform: translateY(-2px); }
.ga-partner-badge { height: 104px; width: auto; display: block; }
@media (max-width: 991.98px) {
  /* Einspaltig steht das Badge unter dem Claim – dort weder nach rechts
     schieben noch hochziehen. */
  .ga-partner-link { margin-left: 0; }
  .ga-buehne { margin-top: 0; }
  .ga-buehne + .gk-hero-claims { margin-top: 2.6rem !important; }
}

/* ══════════════ MARKENSTRATEGIE ══════════════
   Die Seite nutzt sonst durchgehend bestehende Muster (kmu-einwand,
   kmu-leistungen, atv-lohnt, section-google-ziele) – nur das Hero-Motiv
   braucht eine eigene Regel. */
/* Quadratisch (Datei ist 1200×1200) und schmaler als die Spalte, damit es
   neben dem Text nicht erschlägt. Die senkrechte Zentrierung zur Textspalte
   macht align-items-center am row – hier nur die waagerechte. */
/* Rechtsbündig zur Layout-Achse (margin-left: auto) statt in der Spalte
   zentriert, damit die Bildkante mit Header-Button und Container fluchtet.
   Die senkrechte Ausrichtung auf den Einleitungstext übernimmt main.js –
   rein per CSS ist die Mitte eines Absatzes in der Nachbarspalte nicht
   erreichbar. */
.ms-hero-bild {
  width: min(520px, 100%); aspect-ratio: 1;
  height: auto; object-fit: cover;
  border-radius: 14px; margin: 0 0 0 auto; display: block;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
@media (max-width: 991.98px) {
  .ms-hero-bild { margin: 0 auto; }
}
/* Freigestellte Motive (WebP/PNG mit Alphakanal): Radius und box-shadow
   würden einen Kasten um die transparenten Flächen zeichnen. Der
   drop-shadow-Filter folgt dagegen der Silhouette. */
.ms-hero-bild--frei {
  border-radius: 0; box-shadow: none;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55));
}

/* ══════════════ HILFEBEREICH / FAQ ══════════════
   hilfe.php (Übersicht) + hilfe-*.php (Beiträge über
   includes/hilfe-template.php). Lese-Seiten: flacher Kopf, ruhige
   Textspalte, Berater-Karte rechts.                                    */
.hilfe-hero {
  position: relative;
  min-height: 360px;
  display: flex; align-items: flex-end;
  padding: 7rem 0 3.2rem;
  background-image: var(--banner-img);
  background-size: cover; background-position: center 38%;
  background-color: #060606;
}
/* Kräftiger Schleier: Im Motiv sitzen helle Monitore, der Titel steht links
   darüber. Zusätzlich ein flächiger Anteil, damit auch die rechte Bildhälfte
   ruhig bleibt – dort ragt die Berater-Karte herein. */
.hilfe-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 10, 14, .82), rgba(8, 10, 14, .55) 70%),
    rgba(8, 10, 14, .42);
}
.hilfe-hero .container-xl { position: relative; }
.hilfe-hero-kicker {
  color: #fff; font-weight: 300; margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.5;
}
.hilfe-hero-titel {
  color: #fff; font-weight: 300; margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.4;
}

.hilfe-inhalt { background: #fff; color: var(--ink); padding: 4.5rem 0 6rem; }
/* Die Berater-Karte ragt wie im Entwurf ins Banner. Der -300px-Grundwert von
   strategie.php passt hier nicht (dortiges Banner ist deutlich höher), deshalb
   ein eigener Wert: Sektionspolster 4,5rem (72px) minus 230px ergibt 158px
   Überlappung – der Verlaufskreis steht damit etwa zur Hälfte im Banner.
   Kein position: sticky, sonst löst sich die Karte beim Scrollen aus der
   Überlappung und springt. */
@media (min-width: 992px) {
  .hilfe-inhalt .experte-card { margin-top: -230px; position: relative; z-index: 2; }
  .hilfe-inhalt .col-lg-7 { padding-right: 40px; }
}
/* Beitragstitel mit kurzer Linie darunter – wie im Entwurf */
.hilfe-titel {
  font-size: clamp(1.35rem, 2.1vw, 1.7rem); font-weight: 700;
  color: var(--ink); line-height: 1.4; margin: 0 0 1.8rem;
  padding-bottom: 1rem; position: relative;
}
.hilfe-titel::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; border-radius: 2px; background: var(--grad);
}
.hilfe-text p { color: #3d4457; line-height: 1.85; margin-bottom: 1.5rem; }
.hilfe-text h3 {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  margin: 2.2rem 0 .5rem;
}
.hilfe-text h3 + p { margin-top: 0; }
.hilfe-text a { color: #5a3fe8; text-decoration: underline; text-underline-offset: 3px; }

.hilfe-zurueck { margin: 2.8rem 0 0; }
.hilfe-zurueck a {
  color: #5a3fe8; font-size: .92rem;
  text-decoration: underline; text-underline-offset: 4px;
}
.hilfe-verwandt { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid #e6e8f0; }
.hilfe-verwandt-titel { font-weight: 700; color: var(--ink); margin-bottom: .8rem; }
.hilfe-verwandt ul { list-style: none; padding: 0; margin: 0; }
.hilfe-verwandt li { margin-bottom: .5rem; }
.hilfe-verwandt a {
  color: #5a3fe8; font-size: .95rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.hilfe-verwandt a:hover { color: #3f2ad0; }

/* Übersicht: Themen als ruhige Liste, nicht als Kachelraster – die Titel
   sind zu lang für gleich hohe Karten. */
.hilfe-gruppe {
  font-weight: 700; color: var(--ink); font-size: 1.05rem;
  margin: 2.6rem 0 1rem;
}
.hilfe-liste { list-style: none; padding: 0; margin: 0; }
.hilfe-liste li { border-top: 1px solid #e6e8f0; }
.hilfe-liste li:last-child { border-bottom: 1px solid #e6e8f0; }
.hilfe-liste a {
  display: block; padding: 1.1rem .2rem;
  transition: background .2s, padding-left .2s;
}
.hilfe-liste a:hover { background: #f6f7fb; padding-left: .8rem; }
.hilfe-liste-titel { display: block; color: var(--ink); font-weight: 400; }
.hilfe-liste-text { display: block; color: #6b7280; font-size: .88rem; margin-top: .25rem; }

@media (max-width: 991.98px) {
  .hilfe-hero { min-height: 240px; padding: 5.5rem 0 2.4rem; }
  .hilfe-inhalt { padding: 3rem 0 4rem; }
}

/* ════════════════ SEO-SEITE ════════════════ */
/* Zwei eigene Module ohne Bilddaten: eine schematische Trefferliste im Hero
   und eine schematische KI-Antwort im GEO-Abschnitt. Beide sind bewusst mit
   Platzhaltertexten und in Hausfarben gehalten – sie zeigen den Aufbau einer
   Ergebnisseite, geben aber kein echtes Ranking und keine fremde Oberfläche
   wieder. */

/* Online-Check im dunklen Hero (nutzt die Klasse .check-form für main.js) */
.check-form--seo { max-width: 560px; margin: 1.7rem 0 0; }
.seo-check { display: flex; flex-wrap: wrap; gap: .6rem; }
.seo-check input {
  flex: 1 1 240px; min-width: 0;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px; padding: .85rem 1.1rem; color: #fff;
  font-family: var(--font); font-size: 1rem; outline: 0;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.seo-check input::placeholder { color: rgba(255, 255, 255, .5); }
.seo-check input:focus {
  border-color: #9d7bf5; background: rgba(255, 255, 255, .13);
  box-shadow: 0 0 0 4px rgba(157, 123, 245, .2);
}
.seo-check input.ist-fehlerhaft { border-color: #ff8a8a; }
/* Im Hero steht alles linksbündig – die zentrierte Variante der Startseite
   würde hier aus der Textachse fallen. */
.check-form--seo .check-fehler { color: #ffb3b3; font-size: .9rem; margin: .6rem 0 0; text-align: left; }
.check-form--seo .check-hinweis { color: #b9bfcb; font-size: .88rem; margin: .8rem 0 0; text-align: left; }

/* Schematische Trefferliste */
.seo-serp {
  background: #fff; color: #16181d; border-radius: 16px;
  padding: 1.3rem 1.4rem 1.5rem; max-width: 520px; margin: 0 0 0 auto;
  box-shadow: 0 28px 70px rgba(6, 8, 16, .55);
}
.seo-serp-suche {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid #dfe3ec; border-radius: 999px; padding: .6rem 1rem;
  color: #6b7385; font-size: .95rem;
}
.seo-serp-suche img { width: 16px; height: 16px; opacity: .5; }
.seo-serp-treffer {
  border: 1px solid #e6e9f0; border-radius: 12px;
  padding: .85rem .95rem; margin-top: .9rem;
}
.seo-serp-treffer--ihre {
  border-color: rgba(138, 21, 201, .4); box-shadow: 0 0 0 3px rgba(138, 21, 201, .09);
}
.seo-serp-marke {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #8a15c9;
}
.seo-serp-titel { color: var(--indigo); font-size: 1rem; font-weight: 400; margin: .2rem 0 .1rem; }
.seo-serp-url { color: #6b7385; font-size: .78rem; }
.seo-serp-text { color: #3d4457; font-size: .85rem; line-height: 1.5; margin: .35rem 0 0; }
.seo-serp-platzhalter { display: block; height: 9px; border-radius: 999px; background: #eceff5; }
.seo-serp-platzhalter + .seo-serp-platzhalter { margin-top: .5rem; }
.seo-serp-fuss {
  margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px dashed #e2e6ef;
  color: #6b7385; font-size: .8rem; line-height: 1.5;
}

/* GEO-Abschnitt */
.seo-geo { background: var(--grad-dark); color: #fff; padding: 6rem 0; }
.seo-geo .h-display { color: #fff; }
.seo-geo .news-kicker { color: #9aa1b1; }
.seo-geo p { color: #c9cedb; }
.seo-geo strong { color: #fff; }
.seo-ki {
  background: linear-gradient(160deg, rgba(138, 21, 201, .22), rgba(90, 86, 239, .12));
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 1.5rem;
}
.seo-ki-kopf {
  display: flex; align-items: center; gap: .55rem; color: #cfd4e0;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.seo-ki-kopf span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #9d7bf5; box-shadow: 0 0 0 4px rgba(157, 123, 245, .22);
}
.seo-ki-balken { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); margin-top: .9rem; }
.seo-ki-quellen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; }
.seo-ki-quelle {
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  padding: .35rem .85rem; font-size: .8rem; color: #cfd4e0;
}
.seo-ki-quelle--ihre { border-color: #9d7bf5; background: rgba(157, 123, 245, .18); color: #fff; }

@media (max-width: 991.98px) {
  .seo-serp { margin: 0 auto; }
  .seo-geo { padding: 4rem 0; }
}

/* ════════════════ GEO-SEITE (Sichtbarkeit in der KI-Suche) ════════════════ */
/* Wieder zwei eigene Module ohne Bilddaten: links/rechts der Vergleich
   Trefferliste gegen KI-Antwort, weiter unten eine schematische robots.txt.
   Beide arbeiten mit Platzhaltern – die Codezeilen sind echte Syntax, aber
   bewusst als Beispiel gekennzeichnet. */

.geo-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 560px; margin: 0 0 0 auto; }
.geo-panel {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px; padding: 1.2rem 1.1rem 1.3rem;
  /* Beide Panels sind gleich hoch (Grid), die Fußzeilen sollen unten auf
     einer Linie stehen – die KI-Seite hat ja bewusst weniger Inhalt. */
  display: flex; flex-direction: column;
}
.geo-panel--ki { background: linear-gradient(160deg, rgba(138, 21, 201, .22), rgba(90, 86, 239, .12)); }
.geo-panel-kopf {
  color: #cfd4e0; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  margin: 0 0 .9rem; display: flex; align-items: center; gap: .5rem;
}
.geo-panel--ki .geo-panel-kopf { color: #d9c8ff; }
.geo-panel-kopf i { width: 7px; height: 7px; border-radius: 50%; background: #6b7385; flex: 0 0 auto; }
.geo-panel--ki .geo-panel-kopf i { background: #9d7bf5; box-shadow: 0 0 0 4px rgba(157, 123, 245, .22); }
.geo-zeile { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .13); margin-bottom: .55rem; }
.geo-zeile--titel { background: rgba(157, 123, 245, .55); height: 9px; }
.geo-panel--ki .geo-zeile { background: rgba(255, 255, 255, .2); }
.geo-quellen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.geo-quelle {
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  padding: .25rem .6rem; font-size: .72rem; color: #cfd4e0;
}
.geo-quelle--ihre { border-color: #9d7bf5; background: rgba(157, 123, 245, .2); color: #fff; }
.geo-panel-fuss { color: #9aa1b1; font-size: .78rem; line-height: 1.45; margin: auto 0 0; padding-top: 1rem; }

/* Abschnitt "Lassen Sie die Crawler herein?" */
.geo-zugang { background: var(--grad-dark); color: #fff; padding: 6rem 0; }
.geo-zugang .h-display { color: #fff; }
.geo-zugang .news-kicker { color: #9aa1b1; }
.geo-zugang p { color: #c9cedb; }
.geo-zugang strong { color: #fff; }
.geo-robots {
  background: rgba(8, 10, 16, .72); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px; padding: 1.4rem; box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
}
.geo-robots-titel {
  color: #9aa1b1; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  margin: 0 0 1rem;
}
.geo-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; line-height: 1.7; color: #d7dbe6;
  margin: 0; white-space: pre; overflow-x: auto;
}
.geo-code .kommentar { color: #7b8496; }
.geo-code .regel { color: #9d7bf5; }
.geo-fall { border-left: 3px solid #d43c3c; padding-left: 1rem; margin-top: 1.3rem; }
.geo-fall + .geo-fall { margin-top: 1.6rem; }
.geo-fall--offen { border-left-color: #1d9e50; }
.geo-fall-label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 700; color: #ff9a9a; margin: 0 0 .5rem;
}
.geo-fall--offen .geo-fall-label { color: #6fd79b; }
.geo-fall-text { color: #9aa1b1 !important; font-size: .82rem; line-height: 1.55; margin: .6rem 0 0; }

@media (max-width: 991.98px) {
  .geo-vergleich { margin: 0 auto; }
  .geo-zugang { padding: 4rem 0; }
}
@media (max-width: 575.98px) {
  .geo-vergleich { grid-template-columns: 1fr; }
}

/* ════════════════ GOOGLE DISPLAY-NETZWERK ════════════════ */
/* Wieder ohne Bilddaten: Die Formatübersicht im Hero ist ein Raster aus
   leeren Rahmen mit echten IAB-Seitenverhältnissen (aspect-ratio) – sie zeigt
   den Aufwand hinter „ein Motiv, alle Plätze“, ohne ein Werbemittel zu
   erfinden. Darunter eine schlichte Ja/Nein-Liste für Platzierungen. */

.gdn-formate {
  display: grid; gap: .7rem; max-width: 500px; margin: 0 0 0 auto;
  grid-template-columns: 1fr 1fr 64px;
}
.gdn-format {
  border: 1px dashed rgba(255, 255, 255, .3); border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #b9bfcb; font-size: .72rem; line-height: 1.35; padding: .3rem;
}
.gdn-format b { display: block; color: #fff; font-weight: 400; font-size: .78rem; }
.gdn-format--leaderboard { grid-area: 1 / 1 / 2 / 3; aspect-ratio: 728 / 90; }
.gdn-format--skyscraper  { grid-area: 1 / 3 / 3 / 4; writing-mode: vertical-rl; }
.gdn-format--rectangle   { grid-area: 2 / 1 / 3 / 2; aspect-ratio: 300 / 250; }
.gdn-format--mobil       { grid-area: 2 / 2 / 3 / 3; aspect-ratio: 320 / 100; align-self: start; }
.gdn-formate-fuss {
  grid-column: 1 / -1; color: #9aa1b1; font-size: .78rem; line-height: 1.5; margin: .4rem 0 0;
}

/* Platzierungen: wo läuft die Anzeige, wo nicht */
.gdn-platzierung { background: var(--grad-dark); color: #fff; padding: 6rem 0; }
.gdn-platzierung .h-display { color: #fff; }
.gdn-platzierung .news-kicker { color: #9aa1b1; }
.gdn-platzierung p { color: #c9cedb; }
.gdn-platzierung strong { color: #fff; }
.gdn-liste {
  list-style: none; margin: 0; padding: 1.4rem;
  background: rgba(8, 10, 16, .62); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px; box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
}
.gdn-liste li {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem 0; color: #d7dbe6; font-size: .92rem; line-height: 1.5;
}
.gdn-liste li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.gdn-liste li::before {
  content: '✓'; flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; margin-top: .1rem;
  background: rgba(29, 158, 80, .18); color: #6fd79b;
}
.gdn-liste li.gdn-nein::before { content: '✕'; background: rgba(212, 60, 60, .18); color: #ff9a9a; }
.gdn-liste-kopf {
  color: #9aa1b1; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  margin: 0 0 .4rem;
}

@media (max-width: 991.98px) {
  .gdn-formate { margin: 0 auto; }
  .gdn-platzierung { padding: 4rem 0; }
}

/* ════════════════ „Neu“-Marker im Mega-Menü ════════════════ */
.mega-neu {
  display: inline-block; margin-left: .45rem; vertical-align: 2px;
  background: var(--grad); color: #fff;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .42rem; border-radius: 999px; line-height: 1.5;
}

/* ════════════════ MOBILE APPS (affinity Bündel) ════════════════ */
/* Preis-Beweis im Hero: Der TKP ist das Verkaufsargument, deshalb steht er als
   eigene Kachel und wird gleich vorgerechnet – nicht in einem Fließtext
   versteckt. */
.ma-preis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 2rem 0 0; max-width: 620px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px; overflow: hidden;
}
.ma-preis-zelle { padding: 1.1rem 1.2rem; }
.ma-preis-zelle + .ma-preis-zelle { border-left: 1px solid rgba(255, 255, 255, .12); }
.ma-preis-wert {
  font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 700; line-height: 1; margin: 0 0 .4rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ma-preis-titel { color: #fff; font-size: .84rem; margin: 0 0 .15rem; }
.ma-preis-text { color: #9aa1b1; font-size: .76rem; line-height: 1.45; margin: 0; }

/* Hero-Motiv: Anzeigenbeispiel im Smartphone */
.ma-phone { display: block; width: min(300px, 74%); height: auto; margin: 0 auto;
  filter: drop-shadow(0 26px 55px rgba(0, 0, 0, .55)); }

/* App-Portfolio */
.ma-portfolio { background: #fff; color: #16181d; padding: 7rem 0; }
.ma-bundle-bild { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.ma-apps { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.ma-apps li {
  border: 1px solid #e2e6ef; border-radius: 999px; background: #fbfbfd;
  padding: .4rem .85rem; font-size: .86rem; color: #3d4457;
}
.ma-bundle-hinweis {
  margin: 1.8rem 0 0; padding: 1.2rem 1.4rem;
  border-left: 3px solid #8a15c9; background: #faf6fe; border-radius: 0 12px 12px 0;
}
.ma-bundle-hinweis p { margin: 0; color: #3a4152; font-size: .95rem; line-height: 1.6; }
.ma-bundle-hinweis strong { color: #16181d; }

/* Zielgruppen-Segmente */
.ma-segmente { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.ma-segmente li {
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px;
  padding: .4rem .8rem; font-size: .84rem; color: #d7dbe6;
}
/* Auch von der CTV-Seite genutzt – gleiche dunkle Datenfläche */
.ma-daten, .ctv-daten { background: var(--grad-dark); color: #fff; padding: 6rem 0; }
.ma-daten .h-display, .ctv-daten .h-display { color: #fff; }
.ma-daten .news-kicker, .ctv-daten .news-kicker { color: #9aa1b1; }
.ma-daten p, .ctv-daten p { color: #c9cedb; }
.ma-daten strong, .ctv-daten strong { color: #fff; }

@media (max-width: 767.98px) {
  .ma-preis { grid-template-columns: minmax(0, 1fr); }
  .ma-preis-zelle + .ma-preis-zelle { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 991.98px) {
  .ma-portfolio { padding: 4.5rem 0; }
  .ma-daten, .ctv-daten { padding: 4rem 0; }
}

/* Dunkle Variante der Wirkungs-Kacheln (.atv-wirkung steht sonst auf weiß) */
.atv-wirkung--dunkel { border-top-color: rgba(255, 255, 255, .16); }
.atv-wirkung--dunkel .atv-wirkung-karte { border-color: rgba(255, 255, 255, .16); }
.atv-wirkung--dunkel .atv-wirkung-titel { color: #fff; }
.atv-wirkung--dunkel .atv-wirkung-text { color: #9aa1b1; }

/* ════════════════ CTV (Connected TV) ════════════════ */
/* Eigenmodule ohne Bilddaten: ein schematischer Fernseher im Hero und die
   Gegenüberstellung der beiden Buchungsmodelle. Die Preistabelle nutzt die
   VK-Preisliste 2026 – nur Mindestvolumen, keine TKP je Plattform. */

/* Schematischer Fernseher */
.ctv-screen { max-width: 520px; margin: 0 0 0 auto; }
.ctv-rahmen {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px;
  background: linear-gradient(160deg, #10131b, #05070b 60%);
  border: 8px solid #1a1e28; box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; justify-content: space-between; padding: .9rem 1rem;
  overflow: hidden;
}
.ctv-rahmen::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 0%, rgba(138, 21, 201, .3), transparent 60%),
              radial-gradient(100% 80% at 85% 100%, rgba(90, 86, 239, .28), transparent 60%);
}
.ctv-rahmen > * { position: relative; z-index: 1; }
.ctv-anzeige {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px; padding: .2rem .55rem;
  color: #e7e9ef; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.ctv-anzeige i { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; }
.ctv-spot { color: #fff; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.35; margin: 0; max-width: 82%; }
.ctv-fortschritt { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .22); margin-top: .8rem; }
.ctv-fortschritt span { display: block; height: 100%; width: 62%; border-radius: 999px; background: var(--grad); }
.ctv-fuss { display: flex; justify-content: space-between; color: #9aa1b1; font-size: .72rem; margin: .45rem 0 0; }
.ctv-standfuss { width: 24%; height: 8px; border-radius: 0 0 6px 6px; background: #1a1e28; margin: 0 auto; }
.ctv-screen-apps {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  margin: 1.1rem 0 0; padding: 0; list-style: none;
}
.ctv-screen-apps li {
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  padding: .22rem .6rem; font-size: .74rem; color: #b9bfcb;
}

/* Buchungsmodelle */
.ctv-modelle { background: #fff; color: #16181d; padding: 7rem 0; }
.ctv-modell {
  height: 100%; border: 1px solid #e2e6ef; border-radius: 18px; padding: 2rem 2rem 2.2rem;
  background: #fbfbfd; display: flex; flex-direction: column;
}
.ctv-modell--empfohlen {
  border-color: rgba(138, 21, 201, .35); background: #fff;
  box-shadow: 0 24px 60px rgba(120, 70, 220, .14);
}
.ctv-modell-marke {
  align-self: flex-start; background: var(--grad); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px; margin-bottom: .9rem;
}
.ctv-modell h3 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .3rem; }
.ctv-modell-preis {
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1; margin: 1rem 0 .3rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ctv-modell-preistext { color: #6b7280; font-size: .85rem; margin: 0 0 1.2rem; }
.ctv-modell-liste { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.ctv-modell-liste li {
  display: flex; gap: .6rem; padding: .5rem 0; color: #3d4457; font-size: .92rem; line-height: 1.5;
  border-top: 1px solid #eceff5;
}
.ctv-modell-liste li::before { content: '✓'; color: #8a15c9; flex: 0 0 14px; font-size: .85rem; }
.ctv-modell-liste li.ctv-nein::before { content: '✕'; color: #d43c3c; }
.ctv-modell .btn-grad, .ctv-modell .btn-outline-dark { margin-top: auto; align-self: flex-start; }

/* Plattform-Tabelle */
.ctv-tabelle-wrap { overflow-x: auto; margin-top: 1.6rem; }
.ctv-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 460px; }
.ctv-tabelle th, .ctv-tabelle td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid #e6e9f0; }
.ctv-tabelle th { color: #6b7280; font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.ctv-tabelle td:last-child, .ctv-tabelle th:last-child { text-align: right; white-space: nowrap; }
.ctv-tabelle tbody tr:hover { background: #fbfbfd; }
.ctv-tabelle .ctv-gruppe td {
  background: #f6f7fa; color: #16181d; font-weight: 700; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase;
}

@media (max-width: 991.98px) {
  .ctv-screen { margin: 0 auto; }
  .ctv-modelle { padding: 4.5rem 0; }
}

/* ── CTV-Rechner: nutzt die Optik des ATV-Konfigurators ────────────────────
   Ergänzt werden nur die Feldtypen, die dort nicht vorkommen (Zahl, E-Mail,
   Telefon) und die Regler. */
.atv-feld input[type="number"], .atv-feld input[type="email"], .atv-feld input[type="tel"] {
  background: rgba(0, 0, 0, .28); border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 10px; padding: .7rem .9rem; color: #fff; font-size: .95rem; font-family: var(--font);
}
.atv-feld input[type="number"]:focus, .atv-feld input[type="email"]:focus, .atv-feld input[type="tel"]:focus {
  outline: none; border-color: #b9a3ff;
}
.atv-feld input.feld-fehler { border-color: #ff7a7a; }
/* Auch der Budget-Regler steht außerhalb eines .atv-feld – ohne diese Breite
   bleibt er auf seiner Eigenbreite von rund 130 px stehen. */
.atv-feld input[type="range"], .ctv-regler input[type="range"] { accent-color: #8b2fd6; width: 100%; }

.ctv-regler { margin-top: 1.4rem; }
.ctv-regler .atv-feld-hinweis { display: block; margin-top: .35rem; }
.ctv-regler-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ctv-regler-wert { font-size: 1.05rem; font-weight: 700; color: #fff; white-space: nowrap; }
.ctv-rechner-trenner {
  margin: 2.2rem 0 1.6rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ctv-rechner-trenner h3 { font-size: 1.1rem; color: #fff; margin: 0 0 .3rem; }
.ctv-rechner-trenner p { color: #9aa0ab; font-size: .85rem; margin: 0; }
.ctv-rechner-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.ctv-rechner-raster .atv-feld--voll { grid-column: 1 / -1; }
.atv-konfig .form-check-label { color: #c3c9d4; font-size: .85rem; }
.atv-konfig .form-check-label a { color: #fff; }
.atv-konfig .form-check-input.feld-fehler { border-color: #ff7a7a; }

@media (max-width: 575.98px) {
  .ctv-rechner-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Plattformauswahl und Hinweis im CTV-Rechner (nur bei Einzelbuchung sichtbar) */
.ctv-plattformwahl { margin-top: 1.4rem; max-width: 420px; }
.ctv-plattformwahl[hidden] { display: none; }
.ctv-einzel-hinweis {
  margin-top: 2rem; padding: 1.3rem 1.5rem;
  background: rgba(139, 47, 214, .14); border: 1px solid rgba(185, 163, 255, .32);
  border-radius: 14px;
}
.ctv-einzel-hinweis p { margin: 0; color: #d9cdf0; font-size: .92rem; line-height: 1.6; }
.ctv-einzel-hinweis strong { color: #fff; }
.ctv-einzel-hinweis[hidden] { display: none; }

/* 09.08.2026 nicht mehr benutzt: Die Preistabelle der Einzelbuchung ist auf
   Kundenwunsch einer Plattform-Liste ohne Preise gewichen (.ma-apps). Die
   Regeln bleiben stehen, falls die Tabelle zurückkommt – das Projekt ist nicht
   versioniert. Betrifft: .ctv-tabelle-wrap, .ctv-tabelle und deren Kindregeln. */

/* Statuszeile im Einzelbuchungs-Hinweis (leer, solange das Budget reicht) */
.ctv-einzel-status { margin: .8rem 0 0 !important; color: #ffd9a8 !important; font-size: .86rem; }
.ctv-einzel-status:empty { display: none; }

/* ════════════════ WHITE-LABEL FÜR AGENTUREN ════════════════ */
/* Eigenmodul im Hero ohne Bilddaten: ein schematisches Browserfenster, in dem
   das Label des Partners steht und mps.agency ausdrücklich NICHT vorkommt –
   das ist die ganze Aussage des Produkts in einem Bild. */
.wl-schild { max-width: 480px; margin: 0 0 0 auto; }
.wl-fenster {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px; overflow: hidden; box-shadow: 0 28px 64px rgba(0, 0, 0, .5);
}
.wl-chrome {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem .9rem; background: rgba(0, 0, 0, .35);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.wl-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.wl-chrome span {
  margin-left: .5rem; font-size: .74rem; color: #9aa1b1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.wl-buehne { padding: 2.2rem 1.6rem 1.8rem; text-align: center; }
.wl-logo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 190px; padding: .9rem 1.4rem; border-radius: 10px;
  border: 1.5px dashed rgba(255, 255, 255, .32);
  color: #fff; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
}
.wl-zeile { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.wl-zeile li {
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  padding: .26rem .7rem; font-size: .76rem; color: #cfd4e0;
}
.wl-fuss {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 1.4rem 0 0; padding-top: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, .16);
  color: #9aa1b1; font-size: .78rem;
}
.wl-fuss s { color: #6f7686; }
.wl-hinweis { color: #9aa1b1; font-size: .78rem; line-height: 1.5; margin: 1rem 0 0; }

/* Abschnitt „Das Problem“ – wie .kmu-einwand, aber ohne Zitatkarte */
.wl-problem { background: #fff; color: #16181d; padding: 8rem 0 7rem; }
.wl-problem .h-display { color: var(--ink); }
.wl-problem p { color: #3d4457; line-height: 1.75; }
.wl-problem .news-kicker { color: #6b7280; }
@media (min-width: 992px) {
  .wl-problem .experte-card { margin-top: 0; }
}
@media (max-width: 991.98px) {
  .wl-schild { margin: 0 auto; }
  .wl-problem { padding: 4.5rem 0; }
}

/* ════════════════ CROSSMEDIALE KAMPAGNEN ════════════════ */
/* Zwei Eigenmodule ohne Bilddaten: im Hero die Kontaktkette eines Menschen
   über mehrere Kanäle, weiter unten die Tafel „eigene gegen zugekaufte
   Medien“ – deren Chips verlinken auf die jeweiligen Kanalseiten, damit die
   Seite auch als Einstieg funktioniert. */
.cx-kette { max-width: 460px; margin: 0 0 0 auto; padding: 0; list-style: none; position: relative; }
.cx-kette::before {
  content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(180deg, rgba(185, 163, 255, .1), rgba(185, 163, 255, .55), rgba(185, 163, 255, .1));
}
.cx-glied { position: relative; display: flex; gap: 1rem; padding: 0 0 1.5rem; }
.cx-glied:last-child { padding-bottom: 0; }
.cx-glied i {
  flex: 0 0 32px; height: 32px; border-radius: 50%; z-index: 1;
  background: rgba(20, 16, 32, .95); border: 1.5px solid rgba(185, 163, 255, .5);
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; font-style: normal; color: #cfd4e0;
}
.cx-glied--ziel i { background: var(--grad); border-color: transparent; color: #fff; }
.cx-glied b { display: block; color: #fff; font-size: .96rem; font-weight: 400; }
.cx-glied span { display: block; color: #9aa1b1; font-size: .82rem; line-height: 1.5; margin-top: .15rem; }
.cx-kette-fuss { color: #9aa1b1; font-size: .8rem; line-height: 1.55; margin: 1.3rem 0 0; max-width: 460px; margin-left: auto; }

/* Medien-Tafel */
.cx-medien { background: #fff; color: #16181d; padding: 7rem 0; }
.cx-tafel { height: 100%; border: 1px solid #e2e6ef; border-radius: 18px; padding: 2rem 2rem 2.2rem; background: #fbfbfd; }
.cx-tafel--zugekauft { background: linear-gradient(180deg, #f7f5ff 0%, #fff 60%); border-color: #d5cdfa; }
.cx-tafel-label {
  letter-spacing: 3px; text-transform: uppercase; font-size: .74rem;
  font-weight: 700; color: #8b90a0; margin: 0 0 .4rem;
}
.cx-tafel--zugekauft .cx-tafel-label { color: #5a3fe8; }
.cx-tafel h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 700; margin: 0 0 .6rem; color: var(--ink); }
.cx-tafel p { color: #3d4457; font-size: .95rem; line-height: 1.65; margin: 0; }
.cx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.cx-chips a, .cx-chips span {
  display: inline-block; border: 1px solid #e2e6ef; border-radius: 999px; background: #fff;
  padding: .42rem .9rem; font-size: .88rem; color: #3d4457; text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.cx-chips a:hover { border-color: #8a15c9; color: #8a15c9; transform: translateY(-1px); }
.cx-chips span { color: #6b7280; }
.cx-fazit {
  max-width: 880px; margin: 3rem auto 0; text-align: center;
  color: #3d4457; font-size: 1rem; line-height: 1.75;
}
.cx-fazit strong { color: var(--ink); }

@media (max-width: 991.98px) {
  .cx-kette, .cx-kette-fuss { margin: 0 auto; }
  .cx-medien { padding: 4.5rem 0; }
}

/* ════════════════ BEISPIEL-KONZEPT (Download mit Vorprüfung) ════════════════ */
.kz-seite { background: var(--grad-dark) fixed; color: #fff; padding: 7rem 0 8rem; }
.kz-karte {
  max-width: 780px; margin: 0 auto; padding: clamp(1.8rem, 4vw, 3rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
}
.kz-karte .news-kicker { color: #a8b0be; }
.kz-titel { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; color: #fff; margin: .8rem 0 1.2rem; }
.kz-lead { color: #c9cedb; line-height: 1.75; margin: 0; }
.kz-lead strong { color: #fff; }

.kz-hinweis {
  margin: 1.8rem 0 0; padding: 1.3rem 1.5rem;
  background: rgba(139, 47, 214, .14); border: 1px solid rgba(185, 163, 255, .3);
  border-radius: 14px;
}
.kz-hinweis p { margin: 0; color: #d9cdf0; font-size: .94rem; line-height: 1.65; }
.kz-hinweis strong { color: #fff; }
.kz-hinweis--warnung { background: rgba(214, 148, 47, .14); border-color: rgba(255, 217, 168, .34); }
.kz-hinweis--warnung p { color: #ffd9a8; }
.kz-hinweis--warnung a { color: #fff; }

/* Zustand 1: Prüfung */
.kz-pruefung { margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.kz-pruefung-kopf { display: flex; align-items: center; gap: .8rem; }
.kz-pruefung-titel { margin: 0; color: #fff; font-weight: 400; }
.kz-spinner {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22); border-top-color: #b9a3ff;
  animation: kzDreh .9s linear infinite;
}
@keyframes kzDreh { to { transform: rotate(360deg); } }
.kz-pruefung.ist-fertig .kz-spinner { animation: none; border-color: #6fd79b; border-top-color: #6fd79b; }
.kz-pruefung.ist-fehler .kz-spinner { animation: none; border-color: #ff9a9a; border-top-color: #ff9a9a; }
.kz-balken {
  height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12);
  margin: 1rem 0 1.2rem; overflow: hidden;
}
.kz-balken span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad); transition: width .5s ease; }
.kz-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.kz-schritte li {
  display: flex; align-items: center; gap: .6rem;
  color: #9aa1b1; font-size: .9rem;
}
.kz-schritte li::before {
  content: '○'; width: 18px; text-align: center; color: #6f7686; font-size: .8rem;
}
.kz-schritte li.ist-ok { color: #d7dbe6; }
.kz-schritte li.ist-ok::before { content: '✓'; color: #6fd79b; }
.kz-schritte li.ist-fehler { color: #ffb3b3; }
.kz-schritte li.ist-fehler::before { content: '✕'; color: #ff9a9a; }
.kz-pruefung-text { color: #9aa1b1; font-size: .84rem; line-height: 1.55; margin: 1.2rem 0 0; }
.kz-fehler { color: #ffb3b3; font-size: .9rem; margin: 1rem 0 0; }

/* Zustand 2: Formular – Felder im Muster der ATV-Anfragekarte */
.kz-form { margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.kz-form .form-label { color: #e2e5ec; font-size: .85rem; font-weight: 400; }
.kz-form .form-control {
  background: rgba(0, 0, 0, .28); border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 10px; padding: .7rem .9rem; color: #fff; font-family: var(--font);
}
.kz-form .form-control::placeholder { color: #6b7280; }
.kz-form .form-control:focus {
  background: rgba(0, 0, 0, .28); border-color: #b9a3ff; color: #fff; box-shadow: none;
}
.kz-form .form-control.feld-fehler, .kz-form .form-check-input.feld-fehler { border-color: #ff7a7a; }

.kz-grund { margin: 1.8rem 0 0; padding: 0; border: 0; }
.kz-grund legend { font-size: .85rem; color: #e2e5ec; margin-bottom: .8rem; float: none; }
.kz-option {
  display: flex; gap: .8rem; align-items: flex-start; cursor: pointer;
  padding: 1rem 1.2rem; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(255, 255, 255, .14);
  transition: border-color .2s, background .2s;
}
.kz-option + .kz-option { margin-top: .7rem; }
.kz-option:hover { border-color: rgba(185, 163, 255, .5); }
.kz-option input { margin-top: .25rem; accent-color: #8b2fd6; flex: 0 0 auto; }
.kz-option span { color: #c9cedb; font-size: .92rem; line-height: 1.55; }
.kz-option:has(input:checked) { border-color: #b9a3ff; background: rgba(139, 47, 214, .14); }
.kz-option:has(input:checked) span { color: #fff; }
.kz-check { margin-top: 1.6rem; }
.kz-check .form-check-label { color: #c9cedb; font-size: .88rem; }
.kz-check .form-check-label a { color: #fff; }

/* Zustand 3: Ergebnis */
.kz-ergebnis { margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.kz-ergebnis-titel { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; color: #fff; margin: 0 0 .8rem; }
.kz-ergebnis-text { color: #c9cedb; line-height: 1.7; margin: 0 0 1.8rem; }
.kz-ergebnis-aktionen { display: flex; flex-wrap: wrap; gap: 1rem; }
.kz-ergebnis-aktionen .btn-outline-dark {
  background: transparent; border-color: rgba(255, 255, 255, .38); color: #fff;
}
.kz-ergebnis-aktionen .btn-outline-dark:hover { background: #fff; border-color: #fff; color: #16181d; }

@media (prefers-reduced-motion: reduce) {
  .kz-spinner { animation: none; }
  .kz-balken span { transition: none; }
}

/* ════════════════ ONLINEKURS (webinar.php) ════════════════ */
/* Nutzt die Prüf-Bausteine der Konzept-Seite mit (.kz-pruefung, .kz-balken,
   .kz-schritte, .kz-form, .kz-check) – gleiche Mechanik, gleiche Optik. Hier
   kommen nur Kurs-Layout, Fortschritt und Kapiteltypografie dazu. */
.wb-seite { background: var(--grad-dark) fixed; color: #fff; padding: 6rem 0 8rem; }
.wb-kopf { max-width: 820px; margin-bottom: 3rem; }
.wb-kopf .news-kicker { color: #a8b0be; }
.wb-titel { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; color: #fff; margin: .8rem 0 1.2rem; }
.wb-lead { color: #c9cedb; line-height: 1.8; margin: 0; }

.wb-karte {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
}
.wb-pruefung { margin-top: 0; padding-top: 0; border-top: 0; }
.wb-form { margin-top: 0; padding-top: 0; border-top: 0; }
.wb-form-titel { font-size: 1.4rem; font-weight: 700; color: #fff; margin: 0 0 .6rem; }
.wb-form-sub { color: #9aa1b1; font-size: .9rem; line-height: 1.6; margin: 0 0 1.6rem; }
.wb-optional { color: #8b90a0; font-weight: 400; }
.wb-form select.form-control { appearance: none; background-image: none; }
.wb-form select.form-control option { background: #17161d; color: #fff; }

/* Fortschritt */
.wb-fortschritt { margin-bottom: 1.8rem; }
.wb-fortschritt-text { color: #9aa1b1; font-size: .84rem; margin: 0 0 .6rem; }
.wb-fortschritt .kz-balken { margin: 0; }

/* Kapitel */
.wb-kapitel {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
}
.wb-kapitel-kicker { color: #b9a3ff !important; }
.wb-kapitel-titel { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; color: #fff; margin: .6rem 0 1.4rem; }
.wb-kapitel p { color: #c9cedb; line-height: 1.85; margin: 0 0 1.1rem; }
.wb-merksatz {
  margin: 1.8rem 0 0 !important; padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, rgba(138, 21, 201, .22), rgba(90, 86, 239, .12));
  border-left: 4px solid #b9a3ff; border-radius: 0 12px 12px 0;
  color: #fff !important; font-size: 1.02rem; line-height: 1.6;
}
.wb-aufgabe {
  margin-top: 1.6rem; padding: 1.2rem 1.5rem;
  border: 1px dashed rgba(255, 255, 255, .26); border-radius: 12px;
}
.wb-aufgabe-kopf {
  color: #fff !important; font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .5rem !important;
}
.wb-aufgabe p:last-child { margin: 0 !important; }
.wb-vertiefung {
  display: inline-block; margin-top: 1.4rem; color: #b9a3ff;
  text-decoration: underline; text-underline-offset: 4px;
}

/* Blättern */
.wb-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.wb-nav .btn-outline-dark { background: transparent; border-color: rgba(255, 255, 255, .34); color: #fff; }
.wb-nav .btn-outline-dark:hover:not(:disabled) { background: #fff; border-color: #fff; color: #16181d; }
.wb-nav .btn-outline-dark:disabled { opacity: .4; cursor: not-allowed; }

/* Abschluss */
.wb-abschluss {
  margin-top: 2rem; padding: clamp(1.6rem, 3vw, 2.2rem);
  background: rgba(139, 47, 214, .14); border: 1px solid rgba(185, 163, 255, .32); border-radius: 18px;
}
.wb-abschluss-titel { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; color: #fff; margin: 0 0 .8rem; }
.wb-abschluss-text { color: #d9cdf0; line-height: 1.75; margin: 0 0 1.6rem; }
.wb-abschluss-aktionen { display: flex; flex-wrap: wrap; gap: 1rem; }
.wb-abschluss-aktionen .btn-outline-dark { background: transparent; border-color: rgba(255, 255, 255, .38); color: #fff; }
.wb-abschluss-aktionen .btn-outline-dark:hover { background: #fff; border-color: #fff; color: #16181d; }

/* Inhaltsverzeichnis */
.wb-inhalt {
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
  position: sticky; top: 120px;
}
.wb-inhalt-kopf {
  color: #9aa1b1; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 1rem;
}
.wb-inhalt-liste { list-style: none; counter-reset: wb; margin: 0; padding: 0; }
.wb-inhalt-liste li {
  counter-increment: wb; display: flex; align-items: baseline; gap: .7rem;
  padding: .7rem 0; border-top: 1px solid rgba(255, 255, 255, .08);
  color: #9aa1b1; font-size: .92rem; cursor: default;
}
.wb-inhalt-liste li:first-child { border-top: 0; }
.wb-inhalt-liste li::before {
  content: counter(wb); flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem;
  background: rgba(255, 255, 255, .08); color: #9aa1b1;
}
.wb-inhalt-titel { flex: 1 1 auto; }
/* #6f7686 ergab auf der dunklen Karte nur 4,34:1 bei 12,8 px Schrift. */
.wb-inhalt-dauer { color: #8b90a0; font-size: .8rem; white-space: nowrap; }
.wb-inhalt-liste li.ist-fertig::before { content: '✓'; background: rgba(29, 158, 80, .22); color: #6fd79b; }
.wb-inhalt-liste li.ist-fertig { color: #c9cedb; cursor: pointer; }
.wb-inhalt-liste li.ist-aktiv { color: #fff; cursor: pointer; }
.wb-inhalt-liste li.ist-aktiv::before { background: var(--grad); color: #fff; }
.wb-inhalt-fuss { color: #8b90a0; font-size: .78rem; line-height: 1.55; margin: 1.2rem 0 0; }

@media (max-width: 991.98px) {
  .wb-inhalt { position: static; }
  .wb-seite { padding: 4rem 0 5rem; }
}

.schritt-card--grad .schritt-text--hell { color: rgba(255, 255, 255, .88); }

/* ══════════════════════════════════════════════════════════════════════
   MARKEN-CHECK (marken-check.php)

   Zwei Spalten über die volle Breite: links die Einordnung, rechts der
   Check. Im Fragebogen ist immer nur EINE Frage sichtbar, nach der Auswahl
   rückt die nächste nach – deshalb braucht es hier weder eine klebende
   Fortschrittsleiste noch Scrollen während der Beantwortung.
   ══════════════════════════════════════════════════════════════════════ */
.mc-seite {
  background: var(--grad-dark) fixed; color: #fff;
  padding: 3.5rem 0 4.5rem;
}
/* Keine eigene Breite und kein eigenes Innenpolster: Das Raster sitzt im
   .container-xl und hält damit dieselben Fluchtlinien wie Kopf, Brotkrume
   und Fuß. */
.mc-raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
}
/* ── Linke Spalte: Einordnung ───────────────────────────────────────── */
.mc-intro .news-kicker { color: #a8b0be; }
.mc-titel {
  font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 700; color: #fff;
  line-height: 1.22; margin: .7rem 0 1.1rem;
}
.mc-lead { color: #c9cedb; line-height: 1.7; margin: 0; font-size: .98rem; }
.mc-lead strong { color: #fff; }

.mc-hinweis {
  margin: 1.5rem 0 0; padding: 1.2rem 1.4rem;
  background: rgba(139, 47, 214, .14); border: 1px solid rgba(185, 163, 255, .3);
  border-radius: 14px;
}
.mc-hinweis p { margin: 0; color: #d9cdf0; font-size: .9rem; line-height: 1.65; }
.mc-hinweis strong { color: #fff; }

/* Wegweiser: welcher der drei Blöcke gerade läuft. Eine Zeile aus drei
   Marken – ausführlicher wäre die Spalte zu hoch für einen Schirm. */
.mc-etappen {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.mc-etappen li {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .85rem .45rem .55rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .3s ease, background .3s ease;
}
.mc-etappen li::before {
  content: counter(list-item);
  width: 1.4rem; height: 1.4rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); color: #9aa1b1; font-size: .72rem;
}
.mc-etappe-titel { color: #c9cedb; font-size: .84rem; white-space: nowrap; }
.mc-etappen li.ist-aktiv {
  border-color: rgba(185, 163, 255, .45); background: rgba(139, 47, 214, .14);
}
.mc-etappen li.ist-aktiv::before { background: var(--grad); color: #fff; }
.mc-etappen li.ist-aktiv .mc-etappe-titel { color: #fff; }
.mc-etappen li.ist-fertig::before { content: '✓'; background: rgba(111, 215, 155, .18); color: #6fd79b; }

.mc-datenhinweis { margin: 1.4rem 0 0; color: #9aa1b1; font-size: .82rem; line-height: 1.6; }

/* ── Rechte Spalte: Karten ──────────────────────────────────────────── */
.mc-karte {
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
}
.mc-pruefung { margin: 0; padding-top: clamp(1.5rem, 2.6vw, 2.4rem); border-top: 1px solid rgba(255, 255, 255, .12); }

/* Abstand für scrollIntoView: Der Seitenkopf ist sticky und würde die
   Kartenoberkante sonst verdecken. */
.mc-karte--frage { scroll-margin-top: 110px; }

.mc-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mc-kopf-block {
  margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #b9a3ff;
}
.mc-kopf-zaehler { margin: 0; color: #9aa1b1; font-size: .82rem; white-space: nowrap; }
.mc-kopf-zaehler b { color: #fff; font-weight: 400; }
.mc-kopf-balken { margin: .7rem 0 1.7rem; }

/* Die Fragenbühne bekommt eine Mindesthöhe, damit die Karte beim Wechsel
   zwischen kurzen und langen Fragen nicht springt. */
.mc-fragen { min-height: 20.5rem; }
.mc-frage-text {
  margin: 0 0 .5rem; color: #fff; line-height: 1.45;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}
.mc-frage-text em { font-style: normal; color: #d5c4ff; }
.mc-hilfe { margin: 0 0 1rem; color: #9aa1b1; font-size: .86rem; line-height: 1.55; }
.mc-frage-text + .mc-antworten { margin-top: 1.2rem; }
.mc-antworten { display: grid; gap: .55rem; }

.mc-option {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .85rem;
  padding: .85rem 1.1rem; cursor: pointer;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.mc-option input { position: absolute; opacity: 0; pointer-events: none; }
/* #9aa1b1 ergab auf dem eigenen hellen Feld der Taste nur 3,79:1 bei 12,5 px –
   der Kasten hellt den Untergrund auf. #c9cedb wie der Antworttext. */
.mc-option-taste {
  width: 1.6rem; height: 1.6rem; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); color: #c9cedb;
  font-size: .78rem; transition: background .2s ease, color .2s ease;
}
.mc-option-text { color: #d3d8e3; font-size: .93rem; line-height: 1.45; }
.mc-option:hover { border-color: rgba(185, 163, 255, .5); background: rgba(255, 255, 255, .06); }
.mc-option:hover .mc-option-taste { background: rgba(185, 163, 255, .22); color: #fff; }
.mc-option:focus-within { outline: 2px solid #b9a3ff; outline-offset: 2px; }
/* Der gewählte Zustand hängt an einer Klasse, die marken-check.js setzt, nicht
   an :has(input:checked): Beim dynamischen Umschalten hat der Browser die
   Farbe der verschachtelten Ziffer nicht neu berechnet – der Hintergrund kam,
   die Schriftfarbe blieb auf dem Ausgangswert und landete mit 3,0:1 auf dem
   Verlauf. Mit der Klasse ist der Zustand eindeutig. */
.mc-option.ist-gewaehlt { border-color: #b9a3ff; background: rgba(139, 47, 214, .18); }
.mc-option.ist-gewaehlt .mc-option-taste { background: var(--grad); color: #fff; }
.mc-option.ist-gewaehlt .mc-option-text { color: #fff; }

.mc-steuerung {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .1);
}
.mc-zurueck {
  background: none; border: 0; padding: 0;
  color: #c9cedb; font-size: .86rem; cursor: pointer;
}
.mc-zurueck:hover { color: #fff; text-decoration: underline; }
/* #8b90a0 ergab 4,19:1 bei 12,5 px – knapp unter der Grenze. */
.mc-tastenhinweis { margin: 0 0 0 auto; color: #9aa1b1; font-size: .78rem; text-align: right; }
.mc-tastenhinweis kbd {
  display: inline-block; padding: .05rem .32rem; margin: 0 .05rem;
  background: rgba(255, 255, 255, .09); border-radius: 4px;
  color: #c9cedb; font-family: inherit; font-size: .74rem;
}

/* ── Ergebnis ───────────────────────────────────────────────────────── */
.mc-score { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.mc-score-zahl {
  margin: 0; font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 700; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mc-score-einheit { font-size: 1.3rem; font-weight: 300; }
.mc-score-stufe { margin: 0 0 .3rem; font-size: 1.2rem; color: #fff; }
.mc-score-stufe.ist-gut { color: #6fd79b; }
.mc-score-stufe.ist-ok { color: #b9e08a; }
.mc-score-stufe.ist-mittel { color: #ffd9a8; }
.mc-score-stufe.ist-schwach { color: #ffb3b3; }
.mc-score-fazit { margin: 0; color: #c9cedb; font-size: .93rem; line-height: 1.65; max-width: 48ch; }

.mc-werte { display: grid; gap: .9rem; margin-top: 1.8rem; }
.mc-wert {
  padding: 1.1rem 1.3rem; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
}
.mc-wert-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mc-wert-frage { margin: 0; color: #fff; font-size: .93rem; }
.mc-wert-zahl { margin: 0; color: #fff; font-size: 1.4rem; white-space: nowrap; }
.mc-wert-zahl span { color: #8b90a0; font-size: .8rem; font-weight: 300; }
.mc-wert-balken {
  height: 7px; margin: .75rem 0; border-radius: 999px;
  background: rgba(255, 255, 255, .1); overflow: hidden;
}
.mc-wert-balken span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--grad); transition: width .8s ease;
}
.mc-wert-text { margin: 0; color: #c9cedb; font-size: .86rem; line-height: 1.6; }

.mc-raeder {
  margin-top: 1.6rem; padding: 1.3rem 1.4rem;
  background: rgba(139, 47, 214, .14); border: 1px solid rgba(185, 163, 255, .3);
  border-radius: 14px;
}
.mc-raeder-kopf {
  margin: 0 0 .8rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #d5c4ff;
}
.mc-rat-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
/* Raster statt Flex: Als Flex-Zeile mit flex-wrap schob der Text den Pfeil auf
   eine eigene Zeile, sobald er nicht mehr danebenpasste – der Pfeil stand
   allein, Text und Link darunter. Im Raster bleibt der Pfeil in Spalte 1 und
   der Text hängt bündig in Spalte 2. */
.mc-rat-liste li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem;
  color: #e4dbff; font-size: .89rem; line-height: 1.6;
}
.mc-rat-liste li::before { content: '→'; color: #b9a3ff; }
/* Der Link läuft im Textfluss weiter, bricht aber nicht in sich um */
.mc-rat-liste a {
  color: #fff; text-decoration: underline; white-space: nowrap;
  text-underline-offset: 2px;
}

.mc-aktionen { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* ── Detailcheck: der einzige Schritt mit Kontaktdaten ──────────────── */
.mc-detail { margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.mc-detail-kopf { margin: 0 0 .5rem; color: #fff; font-size: 1.08rem; }
.mc-detail-text { margin: 0 0 1.3rem; color: #c9cedb; font-size: .9rem; line-height: 1.7; }
.mc-detail-text em { font-style: normal; color: #d5c4ff; }
.mc-detail-text strong { color: #fff; }
.mc-detail-form { margin-top: .4rem; }
.mc-detail-danke {
  padding: 1.3rem 1.4rem; background: rgba(111, 215, 155, .1);
  border: 1px solid rgba(111, 215, 155, .34); border-radius: 14px;
}
.mc-detail-danke-titel { margin: 0 0 .4rem; color: #fff; font-size: 1.05rem; }
.mc-detail-danke-text { margin: 0; color: #d3e8dc; font-size: .9rem; line-height: 1.65; }

/* ── Flache Schirme: Maße zusammenrücken ─────────────────────────────────
   ACHTUNG: Diese Blöcke müssen NACH den Grundregeln stehen. Media Queries
   erhöhen die Spezifität nicht – standen sie weiter oben, gewann jede später
   notierte Grundregel, und von den Anpassungen wirkten nur die Eigenschaften,
   die sonst nirgends gesetzt sind.
   ─────────────────────────────────────────────────────────────────────── */
/* Kein „min-height: 100vh minus Kopfhöhe“: Der Kopf ist ungescrollt 194 px
   hoch und eingelaufen 131 px, jede feste Formel schiebt den Abschnitt in
   einer der beiden Lagen unter den Rand. Stattdessen bleibt der Inhalt so
   knapp, dass er auch auf flachen Schirmen ohne Scrollen bedienbar ist –
   dafür rücken hier die Maße zusammen. */
@media (min-width: 992px) and (max-height: 900px) {
  /* Mindestens 2,75rem oben: .global-breadcrumb hat height: 0 und schwebt über
     dem Seitenanfang – bei weniger Abstand lag die Brotkrume auf dem Kicker.
     Der Kicker entfällt hier, seine Angabe steht in der Überschrift und im
     Zähler der Karte („Frage 1 von 16“). */
  .mc-seite { padding: 2.75rem 0 2.5rem; }
  .mc-intro .news-kicker { display: none; }
  .mc-titel { font-size: clamp(1.45rem, 2vw, 1.9rem); margin-bottom: .9rem; }
  .mc-lead { font-size: .92rem; line-height: 1.6; }
  .mc-hinweis { margin-top: 1.2rem; padding: 1rem 1.2rem; }
  .mc-hinweis p { font-size: .86rem; line-height: 1.55; }
  .mc-etappen { margin-top: 1.1rem; }
  .mc-datenhinweis { margin-top: 1.1rem; }
  .mc-karte { padding: 1.6rem 1.8rem; }
  .mc-fragen { min-height: 18rem; }
  .mc-kopf-balken { margin: .6rem 0 1.3rem; }
  .mc-steuerung { margin-top: 1.1rem; padding-top: .9rem; }
}
/* Zweite Stufe für 768er-Schirme: dort blieb die linke Spalte 1 px über der
   Kante – das ist zwar nichts, aber ohne Reserve kippt jede Textänderung. */
@media (min-width: 992px) and (max-height: 800px) {
  .mc-seite { padding: 2.75rem 0 1.5rem; }
  .mc-titel { margin-bottom: .7rem; }
  .mc-lead { font-size: .88rem; }
  .mc-hinweis { margin-top: 1rem; padding: .9rem 1.1rem; }
  .mc-hinweis p { font-size: .82rem; line-height: 1.5; }
  .mc-etappen { margin-top: .8rem; }
  .mc-datenhinweis { margin-top: .8rem; }
  /* Auch die Karte rückt zusammen: bei 768 px Höhe blieben sonst nur 19 px
     Reserve, und die trägt keine Textänderung. */
  .mc-karte { padding: 1.3rem 1.5rem; }
  .mc-frage-text { font-size: clamp(1rem, 1.2vw, 1.12rem); margin-bottom: .4rem; }
  .mc-frage-text + .mc-antworten { margin-top: .9rem; }
  .mc-antworten { gap: .45rem; }
  .mc-option { padding: .7rem 1rem; }
  .mc-fragen { min-height: 15rem; }
  .mc-kopf-balken { margin: .55rem 0 1.1rem; }
  .mc-steuerung { margin-top: .9rem; padding-top: .8rem; }
}

/* ── Schmale Schirme: eine Spalte, Einordnung zuerst ────────────────── */
@media (max-width: 991.98px) {
  .mc-raster { grid-template-columns: minmax(0, 1fr); }
  .mc-fragen { min-height: 0; }
}
@media (max-width: 575.98px) {
  .mc-seite { padding: 2.5rem 0 3.5rem; }
  .mc-steuerung { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .mc-tastenhinweis { display: none; }   /* keine Tastatur auf dem Telefon */
  .mc-wert-kopf { flex-direction: column; gap: .2rem; }
  .mc-aktionen > * { width: 100%; }
}
@media (hover: none) {
  .mc-tastenhinweis { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-wert-balken span, .mc-option, .mc-etappen li { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   EINWILLIGUNG (Cookie-Banner) und gesperrte Fremdinhalte
   ════════════════════════════════════════════════════════════════════════
   Markup: includes/consent-banner.php · Steuerung: assets/js/consent.js

   Der Dialog liegt unten rechts über der Seite und verdeckt sie nicht: Der
   Besucher darf lesen, ohne vorher zuzustimmen. Die beiden Entscheidungsknöpfe
   („Alle akzeptieren", „Nur notwendige") sind absichtlich gleich groß und
   gleich kräftig – Ablehnen darf nicht schwerer sein als Zustimmen.
   ════════════════════════════════════════════════════════════════════════ */

/* Weicher Schleier hinter dem Dialog: nur für die Lesbarkeit, ohne Klicksperre
   (pointer-events: none) – sonst wäre es eine Cookie-Wand. */
.cc-hintergrund {
  position: fixed; inset: 0; z-index: 2900; pointer-events: none;
  background: radial-gradient(120% 90% at 85% 100%, rgba(5,5,5,.55) 0%, rgba(5,5,5,0) 70%);
}
.cc-dialog {
  position: fixed; z-index: 2901;
  right: clamp(.75rem, 2vw, 1.75rem); bottom: clamp(.75rem, 2vw, 1.75rem);
  width: min(30rem, calc(100vw - 1.5rem));
  color: #fff;
}
.cc-innen {
  background: var(--grad-dark); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0,0,0,.55);
  padding: 1.6rem 1.5rem 1.35rem;
  max-height: min(85vh, 44rem); overflow-y: auto; overscroll-behavior: contain;
}
.cc-kicker {
  font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: #a9b0c4; margin-bottom: .5rem;
}
.cc-titel { font-size: 1.45rem; font-weight: 700; line-height: 1.25; margin-bottom: .7rem; }
.cc-titel-klein { font-size: 1.2rem; }
.cc-text { font-size: .94rem; line-height: 1.6; color: #e7e9f0; margin-bottom: .8rem; }
.cc-text-klein { font-size: .84rem; color: #b9bfd0; }

/* Knöpfe: die ersten zwei tragen dieselbe Größe. Der Verlauf und die weiße
   Kontur haben beide hohen Kontrast auf dem dunklen Grund. */
.cc-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 .9rem; }
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 9.5rem; min-height: 2.9rem; padding: .7rem 1.1rem;
  font-family: var(--font); font-size: .95rem; font-weight: 400;
  border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.cc-btn-ja { background: var(--grad); color: #fff; box-shadow: 0 8px 26px rgba(122,60,220,.35); }
.cc-btn-ja:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(122,60,220,.5); }
.cc-btn-nein { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.65); color: #fff; }
.cc-btn-nein:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); }
/* Dritter Weg, kein Entscheidungsknopf: bewusst schlichter, aber gut lesbar. */
.cc-btn-mehr {
  flex: 1 1 100%; background: transparent; color: #cfd4e2;
  border-color: rgba(255,255,255,.22); min-height: 2.5rem; font-size: .9rem;
}
.cc-btn-mehr:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.cc-btn:focus-visible, .footer-consent:focus-visible, .cc-schalter input:focus-visible + .cc-schalter-bahn {
  outline: 2px solid #8fc4f5; outline-offset: 2px;
}
.cc-rechtlich { font-size: .82rem; color: #9aa2b6; display: flex; gap: .5rem; flex-wrap: wrap; }
.cc-rechtlich a { color: #cfd4e2; text-decoration: underline; text-underline-offset: 3px; }
.cc-rechtlich a:hover { color: #fff; }
.cc-stand { color: #7f8798; }

/* ── Ebene 2: Einstellungen ─────────────────────────────────────────── */
.cc-details-kopf { margin-bottom: 1.1rem; }
.cc-liste { display: flex; flex-direction: column; gap: .9rem; }
.cc-gruppe {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: .9rem 1rem;
}
.cc-gruppe-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.cc-gruppe-titel { font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0; }
.cc-gruppe-kurz { display: block; font-weight: 300; font-size: .84rem; color: #b9bfd0; margin-top: .15rem; }
.cc-gruppe-beschreibung { font-size: .84rem; line-height: 1.55; color: #b9bfd0; margin: .6rem 0 .5rem; }
.cc-immer { flex: 0 0 auto; font-size: .76rem; color: #9aa2b6; padding-top: .25rem; white-space: nowrap; }

/* Schalter: eigener Bau statt Bootstrap-Switch, damit er zum Haus passt. Das
   Kästchen bleibt ein echtes <input type="checkbox"> – nur unsichtbar. */
.cc-schalter { flex: 0 0 auto; position: relative; cursor: pointer; margin: 0; }
.cc-schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-schalter-bahn {
  display: block; width: 3rem; height: 1.6rem; border-radius: 1rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  transition: background .2s, border-color .2s;
}
.cc-schalter-knopf {
  display: block; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: #fff; margin: .2rem 0 0 .2rem; transition: transform .2s;
}
.cc-schalter input:checked + .cc-schalter-bahn { background: var(--grad); border-color: transparent; }
.cc-schalter input:checked + .cc-schalter-bahn .cc-schalter-knopf { transform: translateX(1.4rem); }

.cc-dienste summary {
  font-size: .82rem; color: #cfd4e2; cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.cc-dienste summary::-webkit-details-marker { display: none; }
.cc-dienste summary::before { content: '+'; font-weight: 700; }
.cc-dienste[open] summary::before { content: '–'; }
.cc-dienste summary:hover { color: #fff; }
.cc-dienst-liste { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.cc-dienst-liste > li { border-top: 1px solid rgba(255,255,255,.1); padding-top: .6rem; }
.cc-dienst-name { font-size: .88rem; font-weight: 700; margin-bottom: .25rem; }
.cc-dienst-daten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .6rem; margin: 0; font-size: .8rem; }
.cc-dienst-daten dt { color: #8f97ab; font-weight: 400; }
.cc-dienst-daten dd { color: #d7dbe6; margin: 0; }
.cc-knoepfe-details { margin-top: 1.2rem; }

/* Widerrufsweg im Seitenfuß – sieht aus wie die Nachbarlinks, ist aber ein
   Knopf (er öffnet einen Dialog, führt zu keiner Adresse). */
.footer-consent {
  background: none; border: 0; padding: 0; color: #fff;
  font-family: var(--font); font-size: inherit; font-weight: inherit; cursor: pointer;
}
.footer-consent:hover { text-decoration: underline; }

/* ── Gesperrte Fremdinhalte ─────────────────────────────────────────────
   Der Platzhalter füllt die Fläche des Inhalts, damit beim Nachladen nichts
   springt. Er erklärt Anbieter und Folge und bietet beide Wege an: einmalig
   laden (nichts wird gespeichert) oder dauerhaft erlauben. */
.consent-sperre { position: relative; }
.consent-sperre > iframe { display: block; width: 100%; }
.consent-platzhalter {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; padding: clamp(.9rem, 3%, 2rem);
  background: #f4f5f8; border: 1px solid #dfe2ea; border-radius: 10px;
  /* size statt inline-size: Der Kasten hat durch inset:0 in beiden Richtungen
     ein festes Maß, und für die Frage „passt der Text noch?" zählt die Höhe. */
  container-type: size; overflow: auto;
}
.cp-titel { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0; }
.cp-text { font-size: .86rem; line-height: 1.55; color: #4a5162; max-width: 34rem; margin: 0; }
.cp-knoepfe { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: .4rem; }
.cp-knoepfe > * { font-size: .88rem; padding: .6rem 1.1rem; }
.cp-fuss { margin: .2rem 0 0; }
.cp-mehr {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font); font-size: .8rem; color: #4a5162;
  text-decoration: underline; text-underline-offset: 3px;
}
.cp-mehr:hover { color: var(--ink); }
/* Schmale Kästen (Handy-Rahmen in den Referenzen, Shorts-Kacheln): Knöpfe
   untereinander, kleinere Schrift. Der Hinweis auf die IP-Weitergabe bleibt –
   er ist der Grund, warum hier überhaupt gefragt wird. */
@container (max-width: 22rem) {
  .cp-titel { font-size: .95rem; }
  .cp-text { font-size: .78rem; }
  .cp-knoepfe { flex-direction: column; width: 100%; }
  .cp-knoepfe > * { width: 100%; font-size: .82rem; }
}
/* Erst wenn es wirklich zu flach wird, muss der Text weichen – vorher nie. */
@container (max-height: 15rem) {
  .cp-text, .cp-fuss { display: none; }
  .cp-titel { font-size: .9rem; }
}

/* Gesperrtes Bild (Google-Partner-Siegel): der Knopf hält die Fläche und nennt,
   was dort erscheint – so bleibt die Aussage lesbar, auch ungeladen. */
.consent-bildsperre { display: inline-flex; }
.consent-bildsperre > img[data-consent-src] { display: none; }
/* Enge Maße bewusst: Der Knopf übernimmt die Höhe des Siegels, das er ersetzt
   (z. B. 42 px in der Handy-Ansicht) – beide Zeilen müssen da hineinpassen. */
/* Der Platzhalter ist seit 16.08. auf JEDEM Grund eine helle Karte – wie die
   echten Siegel, die er vertritt (auch die sind weiße Kacheln auf dunklen
   Flächen). Vorher trug er weiße Schrift für dunkle Seiten und brauchte je
   heller Fläche eine Ausnahme; die Siegelleiste (section-badges) und die
   Marcel-Seite hatten keine – dort stand er weiß auf weiß (Kontrast-Scan). */
.consent-bildknopf {
  padding: .3rem .7rem; cursor: pointer; overflow: hidden; text-align: center;
  background: #f4f5f8; border: 1px dashed #b9bfd0;
  border-radius: 8px; color: var(--ink); font-family: var(--font); line-height: 1.2;
}
.consent-bildknopf:hover { background: #e9ebf2; border-color: #8a92a8; }
.cb-innen { display: flex; flex-direction: column; align-items: center; gap: .05rem; }
/* Links, die auf Fotos/Videostandbildern liegen (Social-Wall-Clips,
   Shop-Impressionen): ein Schriftschatten sichert die Lesbarkeit auch über
   hellen Bildstellen – gefunden im Kontrast-Scan vom 16.08. */
.sw-clip-link, .shopimp-link { text-shadow: 0 1px 6px rgba(0, 0, 0, .75); }

.cb-zeile { font-size: .82rem; font-weight: 400; white-space: nowrap; }
.cb-hinweis { font-size: .68rem; color: #5b6274; white-space: nowrap; }

@media (max-width: 575.98px) {
  .cc-dialog { right: .5rem; left: .5rem; bottom: .5rem; width: auto; }
  .cc-innen { padding: 1.25rem 1.15rem 1.1rem; max-height: 82vh; }
  .cc-titel { font-size: 1.25rem; }
  .cc-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-btn, .cc-schalter-bahn, .cc-schalter-knopf { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   STANDORTSEITEN (werbeagentur-homburg.php, beratungsagentur-muenchen.php)
   Markup: includes/standort-seite.php · Inhalte: includes/standorte/<id>.php
   ════════════════════════════════════════════════════════════════════════ */

.st-hero { padding-bottom: 4.5rem; }
.st-kicker { justify-content: flex-start; margin-bottom: .9rem; }

/* Anschriftenkarte im Hero – heller Kasten auf dunklem Grund, damit die
   Adresse das Erste ist, was ins Auge fällt. */
.st-karte {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: 1.6rem 1.5rem; font-style: normal;
  backdrop-filter: blur(6px);
}
.st-karte-kopf { color: #fff; font-weight: 700; font-size: 1.08rem; margin-bottom: .15rem; }
.st-karte-form { color: #a9b0c4; font-size: .86rem; margin-bottom: 1rem; }
.st-karte-adresse { color: #fff; font-size: 1.02rem; line-height: 1.55; margin-bottom: 1.1rem; }
.st-karte-daten {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .9rem;
  margin: 0 0 1rem; font-size: .93rem;
}
.st-karte-daten dt { color: #8f97ab; font-weight: 400; }
.st-karte-daten dd { color: #e7e9f0; margin: 0; }
.st-karte-daten a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.st-karte-status { color: #9fe6b4; font-size: .88rem; margin-bottom: 1.1rem; }
.st-karte-route {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #fff; font-size: .95rem; text-decoration: underline; text-underline-offset: 4px;
}
.st-karte-route img { width: 14px; height: 14px; }
.st-karte-route:hover { color: #fff; }

/* Profil: weiße Vollbreiten-Sektion, deckt den Galaxie-Hintergrund ab */
.st-profil { background: #fff; padding: 6rem 0; }
.st-text { color: #4c5468; font-size: 1.02rem; line-height: 1.75; margin-top: 1.1rem; }
.st-foto { width: 100%; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(20,24,40,.18); }

.st-leistungen { background: #f4f5f7; padding: 5.5rem 0 6rem; }
.st-leistungen .partner-card { display: flex; flex-direction: column; }
.st-mehr {
  margin-top: auto; padding-top: 1rem; color: #5a3fe8; font-size: .92rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.st-mehr:hover { color: #3d24c9; }

/* Referenzkacheln: als Link (mit Case-Seite) und als Text (ohne) gleich gebaut */
.st-referenzen { background: #fff; padding: 5.5rem 0 6rem; }
.st-ref {
  display: flex; flex-direction: column; height: 100%;
  background: #f7f8fa; border: 1px solid #e4e7ee; border-radius: 12px;
  padding: 1.4rem 1.5rem; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s;
}
a.st-ref:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20,24,40,.12); border-color: #cdd3e0; }
.st-ref-name { font-weight: 700; font-size: 1.08rem; color: var(--ink); margin-bottom: .15rem; }
.st-ref-art { color: #7a8296; font-size: .84rem; margin-bottom: .7rem; }
.st-ref-was { color: #4c5468; font-size: .93rem; line-height: 1.6; margin: 0; }
.st-ref-mehr { margin-top: auto; padding-top: .9rem; color: #5a3fe8; font-size: .9rem; }
.st-ref-fuss { color: #4c5468; font-size: .95rem; margin-top: 2rem; max-width: 760px; }

/* Anfahrt: helle Sektion, Wege als Liste mit Trennlinien */
.st-anfahrt { background: #f4f5f7; padding: 5.5rem 0 6rem; }
.st-wege { list-style: none; padding: 0; margin: 0; }
.st-wege li { border-top: 1px solid #dfe2ea; padding: 1.2rem 0; }
.st-wege li:first-child { border-top: 0; padding-top: 0; }
.st-wege strong { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: .25rem; }
.st-wege span { display: block; color: #4c5468; font-size: .96rem; line-height: 1.7; }

/* Kartenfläche: volle Breite, gleiche Höhe geladen wie gesperrt */
.st-karte-flaeche { background: #f4f5f7; }
.st-karte-flaeche iframe { display: block; }

/* Fragen: <details> statt JavaScript – funktioniert auch ohne Skripte */
.st-faq { background: #fff; padding: 5.5rem 0 6.5rem; }
.st-faq-liste { max-width: 900px; margin-top: 2rem; }
.st-faq-eintrag { border-top: 1px solid #e4e7ee; }
.st-faq-eintrag:last-child { border-bottom: 1px solid #e4e7ee; }
.st-faq-eintrag summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.2rem 1.15rem 0; position: relative;
  font-weight: 700; font-size: 1.05rem; color: var(--ink);
}
.st-faq-eintrag summary::-webkit-details-marker { display: none; }
.st-faq-eintrag summary::after {
  content: '+'; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: #5a3fe8; line-height: 1;
}
.st-faq-eintrag[open] summary::after { content: '–'; }
.st-faq-eintrag summary:hover { color: #3d24c9; }
.st-faq-eintrag p { color: #4c5468; font-size: .98rem; line-height: 1.75; margin: 0 0 1.3rem; max-width: 800px; }

/* Verweis auf den anderen Standort */
.st-weiter { padding: 0 0 1rem; }
.st-weiter-karte {
  background: var(--grad-dark); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 2rem 2.2rem; margin-top: 3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.st-weiter-titel { color: #fff; font-weight: 700; font-size: 1.5rem; margin: .3rem 0 .2rem; }
.st-weiter-text { color: #b9bfd0; font-size: .95rem; margin: 0; }

@media (max-width: 991.98px) {
  .st-profil, .st-leistungen, .st-referenzen, .st-anfahrt, .st-faq { padding: 4rem 0 4.5rem; }
  .st-karte { padding: 1.3rem 1.25rem; }
}
@media (max-width: 575.98px) {
  .st-weiter-karte { flex-direction: column; align-items: flex-start; padding: 1.5rem 1.4rem; }
  .st-weiter-karte .btn-grad { width: 100%; }
  .st-faq-eintrag summary { font-size: .98rem; }
}

/* Verweis auf die Standortseite im Seitenfuß – etwas hervorgehoben, weil er
   die einzige interne Verlinkung dieser Seiten ist. */
.footer-standort-link {
  display: inline-block; margin-top: .4rem;
  color: #fff; text-decoration: underline; text-underline-offset: 4px;
}
.footer-standort-link:hover { color: #fff; text-decoration-thickness: 2px; }

/* Standort-Verweise auf der Kontaktseite */
.kontakt-standorte { margin-top: 1.1rem; font-size: .95rem; color: #9aa1b2; }
.kontakt-standorte a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ÜBERSICHT: LEISTUNGEN & PRODUKTE (leistungen.php)
   ─────────────────────────────────────────────────────────────────────────
   Die Schleifen auf Start- und Digital-Seite zeigen immer nur einen Ausschnitt.
   Hier steht alles nebeneinander – deshalb Raster statt Schleife und flachere
   Kacheln (die 420 px hohen Slider-Karten ergäben bei 30 Einträgen eine
   endlose Seite). Motiv, Radius und Hover-Anhebung bleiben identisch, damit
   man die Kacheln als dieselbe Familie erkennt.
   ═══════════════════════════════════════════════════════════════════════ */
.uebersicht-hero {
  background: var(--grad-dark) fixed;
  color: #fff;
  padding: 4rem 0 3rem;
}
.uebersicht-titel {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  color: #fff;
  margin: .4rem 0 1.2rem;
}
.uebersicht-lead {
  color: #c9cfda;
  max-width: 860px;
  font-size: 1.05rem;
  line-height: 1.7;
}
.uebersicht-sprung { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.section-uebersicht {
  background: var(--grad-dark) fixed;
  color: #fff;
  padding: 3.5rem 0 4rem;
}
/* Beide Abschnitte tragen denselben festen Verlauf; ohne diese Trennlinie
   wirkte der Übergang zwischen Leistungen und Produkten wie ein Fehler. */
.section-uebersicht--produkte { border-top: 1px solid rgba(255,255,255,.12); }

.uebersicht-abschnitt-lead { color: #b9bfcb; margin: .8rem 0 0; max-width: 780px; }

.uebersicht-gruppe { margin-top: 3.5rem; }
.uebersicht-gruppe-kopf { margin-bottom: 1.5rem; }
.uebersicht-gruppe-titel { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0; }
.uebersicht-gruppe-lead { color: #9aa2b1; margin: .3rem 0 0; font-size: .95rem; }

/* auto-fill statt auto-fit: Eine einzelne Kachel (Gruppe „Für Agenturen“)
   bleibt damit in Spaltenbreite stehen, statt über die ganze Zeile zu laufen. */
.uebersicht-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.25rem;
}

.uebersicht-karte {
  position: relative;
  min-height: 210px;
  border-radius: 16px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .45rem;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(90, 170, 240, .75), transparent 55%),
    linear-gradient(160deg, #b13be0 0%, #7b52e0 55%, #4a8fe0 100%);
  transition: transform .3s, box-shadow .3s;
}
.uebersicht-karte:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(120, 70, 220, .4); }
.uebersicht-karte .pill-dark { position: absolute; top: 1.2rem; left: 1.2rem; }
.uebersicht-karte-ext { position: absolute; top: 1.25rem; right: 1.2rem; width: 24px; filter: invert(1); }
.uebersicht-karte-titel { color: #fff; font-size: 1.35rem; font-weight: 400; line-height: 1.25; }
.uebersicht-karte-text { color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.45; }

/* Produktkacheln behalten ihre Bildmotive und damit ihre Höhe – im Raster
   verlieren sie nur das flex-basis der Schleife. */
.uebersicht-raster--produkte { margin-top: 2rem; }
.uebersicht-raster--produkte .product-card { flex: initial; min-height: 340px; }

.uebersicht-schluss {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.uebersicht-schluss p { color: #c9cfda; font-size: 1.05rem; margin: 0; }

@media (max-width: 575px) {
  .uebersicht-raster { grid-template-columns: 1fr; }
  /* min-height entfällt – dann liegt die absolut gesetzte DIGITAL.-Pille aber
     auf dem Titel. Deshalb wandern Pille und Symbol hier in den Textfluss:
     erst die Pille, darunter Titel und Beschreibung. */
  .uebersicht-karte { min-height: 0; padding-top: 1.1rem; }
  .uebersicht-karte .pill-dark { position: static; align-self: flex-start; margin-bottom: .5rem; }
  .uebersicht-karte-ext { top: 1.1rem; }
  .uebersicht-karte-titel { padding-right: 2rem; }   /* Platz für das Symbol rechts */
}

/* ═══════════════════════════════════════════════════════════════════════════
   KURSÜBERSICHT (kurse.php)
   ─────────────────────────────────────────────────────────────────────────
   Zwei Kurse, beide mit vollständigem Inhaltsverzeichnis – deshalb keine
   Kacheln, sondern breite Blöcke: Das Verzeichnis ist hier das eigentliche
   Argument (man sieht vor der Anmeldung, was drinsteckt).
   ═══════════════════════════════════════════════════════════════════════ */
.kurse-hero {
  background: var(--grad-dark) fixed;
  color: #fff;
  padding: 4rem 0 3rem;
}
.kurse-titel {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 700;
  color: #fff;
  margin: .4rem 0 1.2rem;
  line-height: 1.15;
}
.kurse-lead { color: #c9cfda; max-width: 800px; font-size: 1.05rem; line-height: 1.7; }

.section-kurse { background: var(--grad-dark) fixed; color: #fff; padding: 1rem 0 4.5rem; }

.kurs-block {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 2.2rem;
  margin-top: 2rem;
  background: rgba(255,255,255,.03);
}
.kurs-block-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 1.5rem;
}
.kurs-block-kicker {
  color: #9d7bf5; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: .8rem; margin: 0 0 .4rem;
}
.kurs-block-titel { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; color: #fff; margin: 0; }

/* Die drei Zahlen nebeneinander: Kapitel, Minuten, Preis. Der Preis steht
   bewusst mit dabei – „0 €“ beantwortet die erste Frage sofort. */
.kurs-fakten { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.kurs-fakten li { color: #9aa2b1; font-size: .85rem; text-align: center; }
.kurs-fakten strong { display: block; color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

.kurs-block-lead { color: #c9cfda; margin: 1.5rem 0 0; line-height: 1.7; max-width: 900px; }

.kurs-block-lauf {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: 2.5rem;
  margin-top: 2rem;
}
.kurs-kapitel-titel { color: #fff; font-weight: 700; margin: 0 0 .8rem; }
/* Eigener Zähler statt des Listenpunkts: display:flex ersetzt display:list-item,
   damit verschwindet der ::marker. Die Nummer trägt hier aber Information –
   sie sagt, an welcher Stelle im Kurs das Kapitel steht. */
.kurs-kapitel-liste { margin: 0; padding: 0; list-style: none; counter-reset: kapitel; }
.kurs-kapitel-liste li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #d5dae3;
  counter-increment: kapitel;
}
.kurs-kapitel-liste li::before {
  content: counter(kapitel, decimal-leading-zero);
  color: #9d7bf5; font-weight: 700; font-size: .85rem;
  flex: 0 0 auto; min-width: 1.6rem;
}
.kurs-kapitel-name { flex: 1 1 auto; }
.kurs-kapitel-liste li:last-child { border-bottom: 0; }
.kurs-kapitel-dauer { color: #8d95a5; font-size: .85rem; white-space: nowrap; }

.kurs-start {
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: 2rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
.kurs-start-text { color: #9aa2b1; font-size: .9rem; line-height: 1.6; margin: 0; }
.kurs-zweitlink { color: #c9cfda; text-decoration: underline; text-underline-offset: 4px; font-size: .9rem; }
.kurs-zweitlink:hover { color: #9d7bf5; }

/* Hinweis auf kommende Kurse: gestrichelter Rahmen statt durchgezogenem –
   dieselbe Sprache, die Platzhalter überall benutzen, „hier kommt noch was". */
.kurse-mehr {
  margin-top: 2.5rem;
  border: 1px dashed rgba(157, 123, 245, .45);
  border-radius: 18px;
  padding: 2.2rem;
  background: rgba(157, 123, 245, .06);
}
.kurse-mehr-kicker {
  color: #9d7bf5; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: .78rem; margin: 0 0 .4rem;
}
.kurse-mehr-titel { font-size: 1.4rem; font-weight: 700; color: #fff; margin: 0 0 .8rem; }
.kurse-mehr-text { color: #c9cfda; line-height: 1.7; margin: 0; max-width: 780px; }
.kurse-mehr-link {
  display: inline-block; margin-top: 1.2rem;
  color: #fff; font-weight: 700;
  text-decoration: underline; text-underline-offset: 5px;
}
.kurse-mehr-link:hover { color: #9d7bf5; }

.kurse-schluss { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.12); }
.kurse-schluss p { color: #c9cfda; font-size: 1.05rem; max-width: 760px; }

@media (max-width: 991px) {
  .kurs-block-lauf { grid-template-columns: 1fr; gap: 1.8rem; }
  /* Umgestellt auf eine Spalte: Die senkrechte Trennlinie wird zur waagerechten. */
  .kurs-start { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 1.5rem 0 0; }
}
@media (max-width: 575px) {
  .kurs-block { padding: 1.5rem; }
  .kurs-fakten { gap: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KARRIERE + 60-SEKUNDEN-BEWERBUNG (karriere.php)
   ─────────────────────────────────────────────────────────────────────────
   Die Formularfelder übernehmen .kform-feld vom Kontaktformular – gleiche
   Bedienung, gleiche Fehlerdarstellung. Neu sind hier nur die Quiz-Teile:
   Uhr, Optionsknöpfe und das Kurzprofil.
   ═══════════════════════════════════════════════════════════════════════ */
.kr-hero { background: var(--grad-dark) fixed; color: #fff; padding: 4rem 0 3.5rem; }
.kr-hero-lauf {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
  gap: 3rem; align-items: start;
}
.kr-titel {
  font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; color: #fff;
  margin: .4rem 0 1.2rem; line-height: 1.1;
}
.kr-lead { color: #c9cfda; font-size: 1.05rem; line-height: 1.7; max-width: 640px; }
.kr-hero-knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.kr-fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.kr-fakten li { display: flex; align-items: baseline; gap: 1rem; }
.kr-fakten strong {
  color: #fff; font-size: 1.9rem; font-weight: 700; line-height: 1;
  min-width: 4.2rem; text-align: right;
}
.kr-fakten span { color: #9aa2b1; font-size: .92rem; line-height: 1.4; }

/* ── Stellenanzeige ────────────────────────────────────────────────────── */
.kr-stellen { background: #fff; padding: 4.5rem 0; }
.kr-abschnitt-titel { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 700; color: var(--ink); margin: .4rem 0 1rem; }
.kr-abschnitt-lead { color: #55607a; max-width: 820px; line-height: 1.7; }

.kr-stellen-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem; margin-top: 2.5rem;
}
.kr-stelle {
  border: 1px solid #e4e6ee; border-radius: 18px; padding: 2rem;
  display: flex; flex-direction: column;
  transition: border-color .25s, box-shadow .25s;
}
.kr-stelle:hover { border-color: #cfc3f0; box-shadow: 0 16px 40px rgba(120, 70, 220, .12); }
.kr-stelle-kurz {
  color: var(--purple); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .75rem; margin: 0 0 .4rem;
}
.kr-stelle-titel { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: 0 0 .8rem; }
.kr-stelle-text { color: #55607a; line-height: 1.65; margin: 0 0 1.4rem; }
.kr-stelle-label { font-weight: 700; color: var(--ink); margin: 0 0 .6rem; font-size: .95rem; }
/* Der Knopf sitzt unten bündig, auch wenn die Aufgabenlisten verschieden lang sind. */
.kr-stelle-knopf { margin-top: auto; align-self: flex-start; }
.kr-stelle .arrow-list { margin-bottom: 1.8rem; }

.kr-bedingungen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid #e9e9ef;
}
.kr-bed-titel { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 0 0 1.2rem; }
.kr-bed-hinweis { color: #55607a; font-size: .92rem; line-height: 1.6; margin-top: 1.2rem; }

/* ── Quiz ──────────────────────────────────────────────────────────────── */
.kr-quiz { background: var(--grad-dark) fixed; color: #fff; padding: 4.5rem 0; }
.kr-quiz-karte {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 980px; margin: 0 auto;
}
.kr-quiz-titel { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; color: #fff; margin: .3rem 0 1rem; }
.kr-quiz-lead { color: #c9cfda; line-height: 1.7; margin: 0; }

.kr-wahl-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.kr-wahl-karte {
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.03);
  border-radius: 14px; padding: 1.4rem; text-align: left; color: #fff;
  display: flex; flex-direction: column; gap: .35rem;
  transition: transform .25s, border-color .25s, background .25s;
}
.kr-wahl-karte:hover {
  transform: translateY(-4px); border-color: #9d7bf5; background: rgba(157, 123, 245, .12);
}
.kr-wahl-name { font-size: 1.2rem; font-weight: 700; }
.kr-wahl-kurz { color: #9aa2b1; font-size: .88rem; }
.kr-noscript { color: #c9cfda; margin-top: 1.5rem; line-height: 1.7; }
.kr-noscript a { color: #9d7bf5; text-decoration: underline; }

.kr-fragen-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.kr-fragen-bereich { color: #9d7bf5; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; margin: 0 0 .3rem; }
.kr-fragen-zaehler { color: #9aa2b1; font-size: .9rem; margin: 0; }
.kr-fragen-zaehler b { color: #fff; }

/* Die Uhr: Ring im SVG, Zahl mittig darüber. */
.kr-uhr { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.kr-uhr-spur { stroke: rgba(255,255,255,.14); }
.kr-uhr-lauf { stroke: #9d7bf5; transition: stroke-dashoffset .25s linear, stroke .4s; }
.kr-uhr-zahl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; color: #fff; font-variant-numeric: tabular-nums;
}
.kr-uhr.ist-knapp .kr-uhr-lauf { stroke: #ffb020; }
.kr-uhr.ist-knapp .kr-uhr-zahl { color: #ffb020; }
/* Über der Zeit: ruhiges Grau statt Rot – es ist kein Fehler. */
.kr-uhr.ist-drueber .kr-uhr-lauf { stroke: rgba(255,255,255,.3); }
.kr-uhr.ist-drueber .kr-uhr-zahl { color: #9aa2b1; font-size: .85rem; }

.kr-balken { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); margin: 1.5rem 0 2rem; overflow: hidden; }
.kr-balken > span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--grad); transition: width .3s; }

.kr-frage-buehne { min-height: 300px; }
.kr-frage-text { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; color: #fff; margin: 0 0 .6rem; line-height: 1.3; }
.kr-frage-hilfe { color: #9aa2b1; font-size: .92rem; margin: 0 0 1.4rem; }
.kr-frage--rein { animation: krRein .3s ease-out; }
@keyframes krRein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.kr-optionen { display: grid; gap: .7rem; margin-top: 1.2rem; }
.kr-option {
  display: flex; align-items: center; gap: 1rem; text-align: left;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.03);
  border-radius: 12px; padding: 1rem 1.2rem; color: #fff; width: 100%;
  transition: border-color .2s, background .2s, transform .2s;
}
.kr-option:hover { border-color: #9d7bf5; background: rgba(157, 123, 245, .12); transform: translateX(4px); }
.kr-option:focus-visible { outline: 2px solid #9d7bf5; outline-offset: 2px; }
.kr-option.ist-gewaehlt { border-color: #9d7bf5; background: rgba(157, 123, 245, .22); }
.kr-option-taste {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 6px;
  background: rgba(255,255,255,.1); color: #c9cfda;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}
.kr-option.ist-gewaehlt .kr-option-taste { background: #9d7bf5; color: #fff; }
.kr-option-text { line-height: 1.4; }

.kr-fragen-fuss { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; flex-wrap: wrap; }
.kr-zurueck { background: transparent; border: 0; color: #9aa2b1; padding: .4rem 0; }
.kr-zurueck:hover { color: #fff; }
.kr-tastenhinweis { color: #6f7787; font-size: .82rem; margin: 0; margin-left: auto; }
.kr-tastenhinweis kbd {
  background: rgba(255,255,255,.1); border-radius: 4px; padding: .1rem .35rem;
  font-family: inherit; font-size: .8rem; color: #c9cfda;
}

/* ── Kurzprofil + Formular ─────────────────────────────────────────────── */
.kr-zeit-meldung { color: #9aa2b1; font-size: .92rem; margin: 0; }
.kr-zeit-meldung.ist-geschafft { color: #4ad991; font-weight: 700; }

.kr-profil { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: .1rem; }
.kr-profil li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.kr-profil-frage { color: #9aa2b1; font-size: .9rem; line-height: 1.4; }
.kr-profil-antwort { color: #fff; font-weight: 700; line-height: 1.4; }

.kr-form { margin-top: 2.5rem; }
.kr-check { display: flex; gap: .8rem; align-items: flex-start; margin: 1.8rem 0 1.5rem; color: #c9cfda; font-size: .9rem; line-height: 1.6; }
.kr-check input { margin-top: .25rem; flex: 0 0 auto; }
.kr-check a { color: #9d7bf5; text-decoration: underline; }
.kr-check.ist-fehlerhaft span { color: #ff8a8a; }
.kr-senden { width: 100%; }
.kr-form-hinweis { color: #6f7787; font-size: .85rem; margin: 1rem 0 0; text-align: center; }

.kr-danke { text-align: center; padding: 2rem 0; }
.kr-danke-zeichen {
  width: 68px; height: 68px; margin: 0 auto 1.2rem; border-radius: 50%;
  background: rgba(74, 217, 145, .16); color: #4ad991;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.kr-danke .kr-quiz-lead { max-width: 560px; margin: 0 auto; }
.kr-danke-zusatz { color: #9aa2b1; font-size: .9rem; margin-top: 1.5rem; }
.kr-danke-zusatz a { color: #9d7bf5; text-decoration: underline; }

/* ── Ablauf ────────────────────────────────────────────────────────────── */
.kr-ablauf { background: #fff; padding: 4.5rem 0; }
.kr-ablauf-liste {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem;
}
.kr-ablauf-liste li { display: flex; gap: 1rem; align-items: flex-start; }
.kr-ablauf-nr { color: var(--purple); font-weight: 700; font-size: 1.1rem; flex: 0 0 auto; }
.kr-ablauf-titel { font-weight: 700; color: var(--ink); margin: 0 0 .4rem; }
.kr-ablauf-liste p { color: #55607a; line-height: 1.6; margin: 0; font-size: .95rem; }
.kr-ablauf-fuss { margin-top: 3rem; color: #55607a; }
.kr-ablauf-fuss a { color: var(--purple); text-decoration: underline; }

@media (max-width: 991px) {
  .kr-hero-lauf { grid-template-columns: 1fr; gap: 2.5rem; }
  .kr-fakten { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .kr-fakten { grid-template-columns: 1fr; }
  .kr-fakten strong { min-width: 3.4rem; }
  /* Kurzprofil einspaltig: Frage über Antwort statt nebeneinander. */
  .kr-profil li { grid-template-columns: 1fr; gap: .3rem; }
  .kr-frage-buehne { min-height: 340px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO AUF DEM SMARTPHONE (Entwurf 15.08.: Bild oben, Text darunter)
   ─────────────────────────────────────────────────────────────────────────
   Unter 992 px steht die Bildspalte (Frau + Telefon + TÜV + #mobilefirst)
   ÜBER dem Text (order-first in index.php). Die Desktop-Maße sind absolut
   positioniert und viel zu groß – hier alles eine Nummer kleiner.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .hero-visual { margin: 0 0 1.6rem; }
  .hero-image-wrap { padding-left: 40px; }
  .hero-woman { height: clamp(280px, 46vw, 420px); border-radius: 14px 14px 0 0; }
  /* Telefon ohne Schwebe-Animation: Auf dem kleinen Schirm wirkt das Auf und
     Ab unruhig – und es liegt direkt neben dem Lesetext. left rückt es von
     der Hashtag-Spalte weg, damit #mobilefirst lesbar bleibt (es darf das
     Gerät streifen, aber nicht darunter verschwinden). */
  .hero-phone { left: 26px; width: clamp(121px, 32.5vw, 182px); bottom: -38px; animation: none; } /* 17.08., Marcels Feinschliff: 5% kleiner und 14px tiefer; Frau/TÜV/#mobilefirst bleiben */
  /* TÜV bündig mit der rechten Bildkante – gleiche Linie wie das Frauenfoto. */
  .hero-tuev { width: clamp(150px, 42vw, 230px); right: 0; bottom: 14px; }
  /* Hashtag HINTER dem Telefon (Desktop: davor, z-index 3), bündig an der
     linken Layoutlinie (left:0) und so groß, dass er am Gerät anliegt –
     die Spalte ist breiter als der Abstand zum Telefon, der Rest liegt
     hinter dem Gerät. */
  .hero-hashtag { left: 0; bottom: 18px; font-size: clamp(1.71rem, 7.65vw, 2.43rem); z-index: 1; }
}

/* Textgrößen: Kicker + 3 Titelzeilen sollen wie im Entwurf 4 Zeilen ergeben.
   Die längste Zeile („Wir entfesseln Ideen und schaffen Erfolg.") gibt die
   Schriftgröße vor – 4.6vw ist gemessen die Grenze, ab der sie bei 360–430 px
   Fensterbreite einzeilig bleibt (Kontrolle: js-Messung der Zeilenzahl). */
@media (max-width: 767px) {
  /* Nur die Startseite (.hero--full): .hero-title steckt auch in 24 anderen
     Heros, deren längere Titel diese Verkleinerung nicht brauchen.

     SCHRIFTGRÖSSE AUS DER ZEILENBREITE GERECHNET, damit die drei durch <br>
     erzwungenen Zeilen immer die volle Layoutbreite füllen:
       – Die längste Zeile („Wir entfesseln Ideen und schaffen Erfolg.") ist
         gemessen das 18,14-fache der Schriftgröße breit.
       – Verfügbar sind 100vw minus 36,8 px Container-Polster. Dieses Polster
         ist auf Telefonen FEST (clamp-Minimum 1.15rem greift bis 707 px), es
         skaliert also nicht mit – ein reiner vw-Wert liefe deshalb bei 320 px
         über und die Zeile bräche in eine vierte um.
       – Daraus: 0,98 × (100vw − 36,8px) / 18,14 = calc(5.4vw − 1.99px).
         Die 2 % Reserve fangen Rundungen und fremde Schriftfassungen ab.
     Gemessen: 98 % Auslastung bei 320, 360, 375, 390, 414 und 430 px. */
  .hero--full .hero-title {
    font-size: clamp(.9rem, calc(5.4vw - 1.99px), 1.6rem);
    line-height: 1.5;
  }
  .hero--full .hero-kicker { font-size: clamp(1rem, 4.8vw, 1.35rem); margin-bottom: .9rem; }
  /* Einheitliche Abstände in diesem Block: Anführungszeichen → Kicker →
     Titel → Tags jeweils .9rem (vorher 12,8 / 14,4 / 24 px). */
  .hero--full .hero-quote { margin-top: 3.3rem; margin-bottom: .9rem; } /* rückt mit dem tiefer gesetzten Telefon nach unten */
  /* !important gegen das Inline-width:52px im Markup – die Inline-Angabe ist
     die Desktop-Größe, hier zählt die kleine. */
  .hero--full .hero-quote { width: 28px !important; }
  /* Tag-Pillen in EINER Zeile, seitlich wischbar – vier umgebrochene Pillen
     schoben den Titel sonst unnötig weit nach unten. Der Balken bleibt
     unsichtbar, das Wischen funktioniert trotzdem. */
  .hero--full .hero-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* Bis an die Fensterkante laufen (Containerpolster rechts aufheben):
       so passen alle vier Pillen ganz aufs Bild, nichts wird angeschnitten. */
    width: calc(100% + clamp(1.15rem, 2.6vw, 2rem));
    margin-right: calc(-1 * clamp(1.15rem, 2.6vw, 2rem));
    margin-top: .9rem;      /* gleicher Abstand wie Quote→Kicker→Titel */
  }
  .hero--full .hero-tags::-webkit-scrollbar { display: none; }
  /* Kompaktere Pillen: mit der Standardgröße fehlten 98 px, um alle vier in
     der Zeile ganz zu zeigen – kleiner gesetzt passen sie ohne Wischen. */
  .hero--full .hero-tags { gap: .4rem; }
  .hero--full .hero-tags span, .hero--full .hero-tags a {
    flex: 0 0 auto; white-space: nowrap;
    font-size: .64rem; letter-spacing: .3px;
    padding: .36rem .55rem .22rem;
  }
}

/* Anrufen + WhatsApp neben dem Burger: Pillen mit Umriss wie im Entwurf.
   Nur unter 768 px sichtbar (d-md-none im Markup) – darüber stehen dieselben
   Wege in der Topbar. */
/* Platzrechnung Kopfzeile (gemessen bei 360 px: exakt 0 px Luft):
   Schriftzug 198 px + Pillen + Burger füllen die Zeile vollständig. Unter
   480 px wird der Schriftzug deshalb eine Stufe kleiner – das schafft die
   Reserve für 360er-Androids und den 365-px-Entwurf. Erst wenn auch das
   nicht mehr reicht (altes iPhone SE, 320 px), weichen die Pillen; Anrufen
   und WhatsApp stehen dort weiter im Burger-Menü. */
@media (max-width: 479px) { .site-header .brand { font-size: 1.5rem; } }
@media (max-width: 339px) { .nav-quick { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   STARTSEITE AUF DEM SMARTPHONE – Feinschliff 15.08.
   ─────────────────────────────────────────────────────────────────────────
   Alle Regeln hier gelten NUR unter 768 px (bzw. 576 px) – Desktop und
   Tablet bleiben unangetastet, das war die ausdrückliche Vorgabe.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Weißraum über „Onlinemarketing ist kein Projekt…": Desktop braucht die
     10rem als Bühne, auf dem Telefon ist es ein leerer Bildschirm. */
  .section-system { padding-top: 3.5rem; }

  /* Handschrift-Zeile: 24 px Bradley Hand brachen in drei Zeilen, und der
     geklonte Marker zerfiel in drei Fetzen. Kleiner = ein sauberer Block. */
  .handwritten-line { font-size: 1.05rem; }
  .check-features { font-size: .85rem; }

  /* „Entdecken Sie unsere Kompetenzen…": rechtsbündiger Text steht mobil
     linksbündig unter der Überschrift – rechtsbündig wirkt dort wie ein
     Satzfehler. */
  .services-hint { text-align: left; }

  /* Referenz-Bildschirmfotos: Desktop schneidet auf einheitliche 320 px Höhe
     zu (Raster), mobil ist die Karte schmal und der Beschnitt verzerrt den
     Eindruck – natürliche Proportionen des Fotos behalten. */
  .case-card-media { padding: .9rem; }
  .case-card-media img { height: auto; }

  /* Video-Testimonials: mobil nur Zitat, Kundenname, Video und der Knopf –
     die drei Absätze Fallbeschreibung und der CTA-Satz sind Lesestoff für
     den großen Schirm (Kundenwunsch 15.08.). Der Knopf bleibt, weil er im
     selben Container steckt; das Kundenlogo daneben geht mit dem Text. */
  .space-text > p { display: none; }
  .space-text .space-pechtel-logo--unten { display: none; }
  .space-text .btn-grad { margin: 0 auto; }   /* einziges Kind: mittig */

  /* Testimonial-Pfeile: links/rechts lagen sie AUF dem Text. Mobil sitzen
     sie nebeneinander UNTER dem Slide – dafür bekommt der Slider unten Raum. */
  .space-slider { padding-bottom: 64px; }
  .space-arrow {
    top: auto; bottom: 0; transform: none;
    width: 44px; height: 44px;
  }
  .space-arrow--prev { left: calc(50% - 52px); }
  .space-arrow--next { right: calc(50% - 52px); }

  /* Google-Bewertungen: Der Pfeil schwebte mittig ÜBER der Karte und
     verdeckte den Text – mobil steht er zentriert unter den Karten. */
  .reviews-arrow { position: static; transform: none; margin: 1.2rem auto 0; }

  /* Tablet-Grafik exakt rechtsbündig ohne Abstand: das Container-Polster
     rechts aufheben (Zeilen-/Spaltenabstände heben sich gegenseitig auf,
     übrig bleibt genau das clamp-Polster des Containers). */
  .section-blickfeld .col-lg-6.d-lg-none img {
    max-width: none;
    width: calc(100% + clamp(1.15rem, 2.6vw, 2rem));
    margin-right: calc(-1 * clamp(1.15rem, 2.6vw, 2rem));
  }

  /* Creditreform-Siegel: lag auf „Starten Sie Ihre Mission." – mobil läuft
     die Überschrift über die volle Breite. Das Siegel wandert komplett in
     das Fußzeilen-Polster darüber (7.5rem hoch, Platz genug). */
  .footer-siegel { top: -104px; right: 8px; width: 88px; }
}

@media (max-width: 575.98px) {
  /* TV-Sender: 2 Spalten ergaben eine 1227 px hohe Logowand. 3 Spalten sind
     der Kompromiss – kompakt genug und die Logos bleiben groß genug zum
     Erkennen (bei 4 wurden Wortmarken wie „Disney Channel" grenzwertig). */
  .sender-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .sender-card { border-radius: 8px; }
  .sender-card img { inset: .55rem; width: calc(100% - 1.1rem); height: calc(100% - 1.1rem); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STARTSEITE SMARTPHONE: Knöpfe über die volle Breite, Scroll-Maus im
   sichtbaren Bereich (15.08.)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Beide Knöpfe teilen sich die volle Layoutbreite statt links zu kleben.
     flex:1 1 0 gibt beiden dieselbe Breite, unabhängig von der Textlänge. */
  .hero--full .hero-actions { gap: .6rem; }
  /* flex:1 1 auto (nicht 0): Beide wachsen von ihrer Textbreite aus, der
     längere Knopf bekommt dadurch mehr – mit Basis 0 wären beide gleich
     breit und „Jetzt durchstarten!" bräche um. nowrap + einheitliches
     Polster halten beide auf einer Zeile und gleich hoch. */
  .hero--full .hero-actions .btn-grad,
  .hero--full .hero-actions .btn-outline {
    flex: 1 1 auto; min-width: 0;
    justify-content: center; text-align: center; white-space: nowrap;
    /* FESTE Höhe statt Polster: iOS und Android rendern das Raketen-Emoji
       mit höheren Glyphen als Desktop-Chrome – der linke Knopf wurde dadurch
       auf echten Geräten höher als der rechte. Mit fester Höhe können die
       Emoji-Schriften die Zeile nicht mehr aufpumpen. */
    height: 46px; padding-top: 0; padding-bottom: 0;
    padding-left: .6rem; padding-right: .6rem;
  }

  /* Platz schaffen, damit die Scroll-Maus unter die Siegel passt, ohne sie
     zu überdecken: Der Hero ist auf dem Telefon höher als das Fenster, die
     Maus muss aber im ersten Bildschirm liegen. */
  /* CTA im Burger-Menü kleiner: In der Menüspalte stand er als einziges
     Element über die volle Breite und wirkte gegenüber den Navigationszeilen
     überdimensioniert. Nur Smartphone – auf dem Tablet öffnet derselbe
     Burger, dort bleibt die Originalgröße. */
  .mobile-menu .btn-cta {
    font-size: .86rem; padding: .58rem 1.1rem; align-self: center;
  }

  /* Bildhöhe am FENSTER statt an der Breite: 46vw liegt auf jedem Telefon
     unter dem 280-px-Minimum, das Bild war also überall gleich hoch – auch
     auf kurzen Geräten (740 px), wo dann die Partner-Siegel unter die
     Faltkante rutschten. svh rechnet mit eingeblendeter Adressleiste.
     NUR Smartphone: Auf dem Tablet bleibt der Breiten-Wert von oben. */
  .hero--full .hero-woman { height: clamp(196px, 29svh, 420px); }
  .hero--full .hero-visual { margin-bottom: 1.1rem; }
  .hero--full .hero-partnerbadges { margin-top: .7rem; }
  /* Siegel deutlich größer (Kundenwunsch 15.08., zweite Stufe). Den Platz
     dafür gibt das Hero-Bild her – siehe .hero-woman gleich darunter. */
  .hero--full .hero-partnerbadges .hb-omr { height: 80px; }
  .hero--full .hero-partnerbadges .hb-google { height: 64px; }
  .hero--full .hero-partnerbadges .hb-ts { height: 60px; }

  /* Maus an die Unterkante des SICHTBAREN Fensters statt an das Hero-Ende.
     --hero-oben ist der gemessene Abstand von der Seitenoberkante bis zum
     Hero (main.js); 100svh rechnet mit eingeblendeter Adressleiste, also
     konservativ. Der Fallback 71px ist die Kopfzeilenhöhe ohne Topbar. */
  .hero--full .hero-mouse {
    bottom: auto;
    top: calc(100svh - var(--hero-oben, 71px) - 34px);
    z-index: 10;   /* oberste Ebene – lag hinter der Badge-Reihe */
  }
}

/* Kurze Telefone (z. B. 360 × 740): Dort reicht der erste Bildschirm knapp
   nicht für Bild + Text + Knöpfe + Siegel + Scroll-Maus. Gemessen fehlten
   17 px – diese beiden Abstände geben sie her, ohne am Aufbau zu rütteln. */
@media (max-width: 767.98px) and (max-height: 780px) {
  .hero--full .hero-visual { margin-bottom: .5rem; }
  .hero--full .hero-tags { margin-bottom: .9rem; }
  /* Auf kurzen Geräten eine Stufe zurückhaltender als oben – sonst liegt die
     Scroll-Maus in den Siegeln (jeder Pixel hier ist gemessen, nicht geschätzt). */
  .hero--full .hero-partnerbadges .hb-omr { height: 68px; }
  .hero--full .hero-partnerbadges .hb-google { height: 54px; }
  .hero--full .hero-partnerbadges .hb-ts { height: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENTURSEITE AUF DEM SMARTPHONE (15.08.)
   ═══════════════════════════════════════════════════════════════════════ */

/* Seitliches Verrutschen: Zwei Stellen im Meilenstein-Abschnitt ragten über
   den Bildschirm (gemessen 6 px, dadurch ließ sich die Seite waagerecht
   schieben).
   1) .tl-track blendet mit ±22 px über den Container hinaus, damit der Glow
      des aktiven Planeten nicht abgeschnitten wird – auf dem Telefon ist das
      Container-Polster aber nur 18,4 px, es blieb also ein Rest.
   2) Die Bootstrap-Zeile im Panel zieht ihre Spalten mit −24 px nach außen;
      .tl-panel hat nur padding-left, rechts fehlte der Ausgleich. */
/* Bis 992 px, nicht nur bis 768: Der Überstand entsteht überall dort, wo das
   Container-Polster schmaler ist als die 22 px Überblendung – gemessen auch
   auf dem Tablet (800 px: 3 px). Das ist reine Fehlerbehebung, am Aussehen
   ändert sich nichts: Die Spalten stehen unter 992 px ohnehin untereinander,
   der waagerechte Spaltenabstand wird dort also gar nicht gebraucht. */
@media (max-width: 991.98px) {
  .tl-track {
    padding-left: clamp(1.15rem, 2.6vw, 2rem);
    padding-right: clamp(1.15rem, 2.6vw, 2rem);
    margin-left: calc(-1 * clamp(1.15rem, 2.6vw, 2rem));
    margin-right: calc(-1 * clamp(1.15rem, 2.6vw, 2rem));
  }
  /* Nur der waagerechte Abstand entfällt – der senkrechte (g-5) trennt
     weiterhin Bild und Text, die hier ohnehin untereinander stehen. */
  .tl-panel .row { --bs-gutter-x: 0; }
}

/* Ab hier wieder NUR Smartphone (Kundenvorgabe: Tablet unverändert). */
@media (max-width: 767.98px) {
  /* Team: Position im Marken-Verlauf wie der Kicker im Seitenkopf, der Name
     behält seinen eigenen Verlauf (.grad-text). Vorher war die Position ein
     flaches Blau und passte zu keinem der beiden. */
  .team-kicker {
    background: linear-gradient(90deg, #9d4ee8 0%, #6f97e8 55%, #4dc3f7 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-size: 1.05rem; margin-bottom: .8rem;
  }
  /* Kontaktzeile untereinander: nebeneinander brach die Rufnummer mitten in
     der Ziffernfolge um („… 18 77" / „324"). */
  .team-contact { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
  .team-contact a { white-space: nowrap; }
  .team-contact span { display: none; }   /* Trenner /// entfällt beim Stapeln */

  /* Bürofoto: Der Mitarbeiter sitzt am linken Bildrand – mit dem
     Standard-Ausschnitt (Mitte) blieben auf dem Telefon nur Trennwände
     übrig. Von links beschnitten ist er vollständig im Bild. */
  .agentur-office { background-position: left center; min-height: 400px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMARTPHONE-KORREKTUREN 15.08. (Strategie, Digital & Unterseiten)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Waagerechtes Verspringen ─────────────────────────────────────────────
   Gemessen über 24 Seiten bei 375 px: nur drei rutschten seitlich weg.
   Zwei Ursachen, beide hier behoben.                                      */

/* (1) Bootstrap-Zeilen mit g-5 ziehen ihre Spalten um 24 px nach außen; das
       Container-Polster ist auf dem Telefon aber nur 18,4 px – macht 6 px
       Überstand (news.php, digital.php). Ein kleinerer Spaltenabstand passt
       ins Polster; untereinander stehende Spalten merken davon nichts. */
@media (max-width: 991.98px) {
  .container-xl > .row.g-5,
  .container-xl .tl-detail .row.g-5 { --bs-gutter-x: 2rem; }
}

/* (2) Die Case-Logoleiste (digital.php, premium-website.php) ist eine
       zentrierte Flex-Reihe – auf dem Telefon ragten die äußeren Logos
       64 px über beide Ränder hinaus. Als wischbare Leiste bleibt alles
       erreichbar, ohne die Seite zu verschieben. */
@media (max-width: 767.98px) {
  .cs-logos {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 1.6rem;
  }
  .cs-logos::-webkit-scrollbar { display: none; }
  .cs-logo { flex: 0 0 auto; }

  /* Das Hosting-Formular (Eingabe + Knopf nebeneinander) war um 1 px zu
     breit – untereinander ist es auf dem Telefon ohnehin besser bedienbar. */
  .hosting-form { flex-direction: column; gap: .5rem; }
  .hosting-form .btn-grad { width: 100%; }
}

/* ── Kopfbereiche: Bild zuerst, dann Titel und Text ───────────────────────
   Auf 24 Unterseiten steht im Kopf links Text, rechts ein Bild. Beim
   Stapeln landete der Text oben und das Bild erst nach Fließtext, Tags und
   Siegeln – der Blickfang kam also zuletzt. Auf dem Telefon jetzt umgekehrt.
   (Die Startseite regelt das bereits im Markup und bleibt unberührt.)       */
@media (max-width: 767.98px) {
  .hero .row > .hero-content { order: 2; }
  .hero .row > *:not(.hero-content) { order: 1; }
}

/* ── Strategie-Kopfbild ───────────────────────────────────────────────────
   Das Flipchart mit SEO/SEA steht im linken Bilddrittel. Mit dem
   Standardausschnitt (Mitte) blieb auf dem Telefon nur eine Schulter übrig. */
@media (max-width: 767.98px) {
  .strategie-banner { background-position: 20% center; }
}

/* ── Video mit Textzeile (strategie.php) ──────────────────────────────────
   Zwei Änderungen fürs Telefon: ein leichter dunkler Schleier, damit die
   Schrift auf jedem Bild des Videos sicher lesbar bleibt (der Textschatten
   allein reicht bei hellen Szenen nicht), und die beiden Satzteile
   untereinander statt in einer Zeile – linksbündig, weil mittig gesetzte
   Umbrüche auf schmalen Schirmen unruhig wirken. */
@media (max-width: 767.98px) {
  .video-stage::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(8, 10, 14, .35); pointer-events: none;
  }
  /* Als BLOCK statt Flex-Container: Nur so fließt „Strategie." im selben
     Absatz weiter, statt als eigenes Flex-Element in eine neue Zeile zu
     rutschen. Senkrecht mittig über top/transform (inset: 0 aus der
     Grundregel liefert links und rechts weiterhin die volle Breite). */
  .video-stage p {
    display: block;
    top: 50%; bottom: auto;
    transform: translateY(-50%);
    text-align: left;
    padding: 0 1.25rem;
    z-index: 1;
  }
  .video-stage p strong { margin-left: .3em; }
}

/* Team auf dem Smartphone: Position, Rolle und Name standen im Textblock
   noch einmal, obwohl die Bildunterschrift (.tk-caption) Name und Position
   bereits nennt – auf dem Telefon stehen beide direkt untereinander und die
   Wiederholung fiel sofort auf. Der beschreibende Text und die Kontaktzeile
   bleiben. */
@media (max-width: 767.98px) {
  .section-team--kompakt .tk-text .team-kicker,
  .section-team--kompakt .tk-text .team-title { display: none; }
  .section-team--kompakt .tk-text .team-text { margin-top: 0; }
}

/* Case-Studies auf dem Smartphone: Das große Foto entfällt – untereinander
   gestapelt kam es erst nach dem kompletten Zitat und schob den nächsten
   Abschnitt weit nach unten, ohne etwas zu erklären (das Videotestimonial
   dahinter zeigt dieselbe Person). Die Pfeile lagen dabei mittig ÜBER dem
   Text; sie stehen jetzt nebeneinander unter dem Zitat. */
@media (max-width: 767.98px) {
  .cs-panel > .row > .col-lg-5 { display: none; }
  .cs-slider { padding-bottom: 68px; }
  .cs-arrow { top: auto; bottom: 0; transform: none; }
  .cs-arrow:hover { transform: scale(1.08); }
  .cs-arrow--prev { left: calc(50% - 54px); }
  .cs-arrow--next { right: calc(50% - 54px); }
}

/* Rechtstexte im Burger-Menü, unter der Sprachauswahl */
.mm-rechtlich {
  display: flex; justify-content: center; gap: 1.4rem;
  margin: 1.4rem 0 0; font-size: .85rem;
}
.mm-rechtlich a { color: #9aa2b1; }
.mm-rechtlich a:hover { color: #fff; text-decoration: underline; }

/* ── Bestätigungskarte nach Formularversand (17.08.2026) ─────────────
   Ersetzt das Formular komplett – unübersehbar, damit niemand mehrfach
   sendet. Wird von main.js nach erfolgreicher Übertragung eingesetzt. */
.form-erfolg {
  text-align: center;
  padding: 2.6rem 1.6rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
}
.form-erfolg .fe-haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--grad-soft);
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.form-erfolg h3 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  margin-bottom: .6rem;
}
.form-erfolg p { margin: 0 0 .4rem; }
.form-erfolg .fe-hinweis {
  color: #9aa3b5;
  font-size: .92rem;
  margin-top: .9rem;
}

/* ── Mobile Überlauf-Fixes (17.08.2026, Engine-Scan WebKit+Chrome) ────
   Gefunden per horizontalem Überlauf-Scan aller Seiten bei 393 px. */
@media (max-width: 767.98px) {
  /* AGB: das Inhaltsverzeichnis behielt seine 250px-Desktop-Spalte –
     Grid mobil einspaltig, Verzeichnis steht über dem Text. */
  .rechtstext-lauf.hat-toc { grid-template-columns: minmax(0, 1fr); }
  .rechtstext-toc { position: static; min-width: 0; }

  /* Bestellung: Bootstrap-row ohne Container-Polster ragte 6 px über. */
  .section-bestellung { overflow-x: clip; }

  /* Cases: Die Telefon-Spalte muss unter die natürliche Breite der
     Live-Vorschau (375 px iframe + Rahmen) schrumpfen dürfen. */
  .case-phone-spalte { min-width: 0; }
}

/* Domain-Suche: WebKit lässt das Eingabefeld nicht unter seine
   eingebaute Mindestbreite schrumpfen – der Prüfen-Knopf ragte rechts
   aus dem Bildschirm. Chrome war hier großzügiger; min-width:0 stellt
   beide gleich. */
.dc-suche input { min-width: 0; }

/* Rechtstext-Snippets (Website Check GmbH): Überschriften wie
   „Gewährleistung/Mängelhaftung/Rügepflicht" sind EIN Wort ohne
   Umbruchstelle und liefen mobil unsichtbar über den Seitenrand.
   Notumbruch erlauben – der Fremdinhalt selbst bleibt unangetastet
   und künftige Snippet-Updates sind automatisch mit abgedeckt. */
.rechtstext-inhalt { overflow-wrap: anywhere; }

/* ── iPhone/iPad: viewport-feste Hintergründe reparieren (17.08.2026) ──
   36 dunkle Sektionen malen ihren Verlauf mit background-attachment:fixed.
   iOS-WebKit spannt solche Hintergründe über die GESAMTE Dokumenthöhe –
   sichtbar bleibt nur die oberste Ecke des Verlaufs, und die ist pures
   Schwarz (#050505). Der blaugrüne Farbton fehlte deshalb auf dem
   Smartphone komplett. Diese eine Regel stellt mobil alle auf normales
   Verhalten um: Jede Sektion malt ihren Verlauf selbst über die eigene
   Fläche. Bei den bewusst subtilen Farbtönen sind Übergänge zwischen
   benachbarten Sektionen nicht wahrnehmbar. Desktop (ab 992 px) bleibt
   unverändert beim Original. */
@media (max-width: 991.98px) {
  *, *::before, *::after { background-attachment: scroll !important; }
}