/* Online Marketing (Spec 2026-09-29-online-marketing-ausbau-design.md): eigene Abschnitte mit Präfix om-.
   Grafiken zeigen ohne Skript und bei „Bewegung reduzieren“ sofort ihr Endbild; Startzustände gibt es nur mit html.om-bereit. */
.om-abschnitt{padding:120px 0}
.om-intro{padding-top:80px}
.om-leistung+.om-leistung{padding-top:0}
.om-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;padding:8px 24px;border:1px solid var(--background-color-02);border-radius:100px;color:var(--text-color-01);font-size:14px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.om-titel{margin:0 0 28px;color:var(--text-color-01);font-size:48px;font-weight:600;line-height:1.2em;text-transform:uppercase;text-wrap:balance}
.om-leistung .om-titel{font-size:40px}
.om-leistung-name{display:block}
.om-grau{color:var(--text-color-02)}
.om-text{margin:0 0 20px;color:var(--text-color-02);font-size:18px;font-weight:500;line-height:1.6em}
.om-text:last-child{margin-bottom:0}
.om-text a,.om-region-text a{color:var(--text-color-01);text-decoration:underline;text-decoration-color:var(--primary-color);text-decoration-thickness:2px;text-underline-offset:3px;transition:color .3s}
.zigla-maus .om-text a:hover,.zigla-maus .om-region-text a:hover{color:var(--primary-color)}
.om-hero-knopf{margin-top:32px}
/* Knopf nur so breit wie sein Text: Webflows Hover-Füllung ist eine 400 px breite Form und deckt breitere Knöpfe nicht ganz ab */
.om-hero-knopf .large-button-copy{display:inline-flex}
/* Webflow macht .service-sort-description auf dem Handy zur Flex-Zeile: Text und Knopf untereinander halten */
.service-sort-description:has(>.om-hero-knopf){flex-direction:column;align-items:flex-start}
/* Die Sofort-Einblendung schiebt Text und Bild 100 px von rechts herein. Ohne Begrenzung wird die Seite dabei breiter als
   der Bildschirm, und Chrome behält diese Breite manchmal auch nach der Animation (Seite lässt sich seitlich wischen).
   clip statt hidden: kein Scroll-Container, senkrecht bleibt alles sichtbar. Der Abschnitt ist immer bildschirmbreit. */
.service-details-hero-wrapper{overflow-x:clip}

/* Zwei Spalten: Text und Grafik, bei .om-gespiegelt steht die Grafik links */
.om-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:center}
.om-gespiegelt>.om-grafik-spalte{order:-1}
.om-text-spalte,.om-grafik-spalte{min-width:0}

/* Liste „Das gehört dazu“ mit lila Haken */
.om-liste-titel{margin:32px 0 16px;color:var(--text-color-01);font-size:14px;font-weight:600;line-height:1.5em;text-transform:uppercase}
.om-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:0;padding:0;list-style:none}
.om-liste li{position:relative;padding-left:30px;color:var(--text-color-01);font-size:16px;font-weight:500;line-height:1.5em}
.om-liste li::before{content:"";position:absolute;top:2px;left:0;width:20px;height:20px;border-radius:50%;background:#f3e1fe}
.om-liste li::after{content:"";position:absolute;top:6px;left:7px;width:6px;height:10px;border:solid var(--primary-color);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Ablauf: senkrechte Zeitleiste, die lila Linie wächst mit dem Scrollen (--om-fortschritt, ohne Skript voll) */
.om-ablauf-kopf{max-width:820px;margin-bottom:64px}
.om-schritte{--om-fortschritt:1;position:relative;display:grid;gap:48px;margin:0;padding:0 0 0 96px;list-style:none}
.om-schritte::before,.om-schritte::after{content:"";position:absolute;top:28px;bottom:28px;left:27px;width:2px;border-radius:2px;background:var(--background-color-02)}
.om-schritte::after{background:var(--primary-color);transform:scaleY(var(--om-fortschritt));transform-origin:top}
.om-schritt{position:relative}
.om-schritt-nr{position:absolute;top:0;left:-96px;z-index:1;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:2px solid var(--primary-color);border-radius:50%;background:var(--white-color);color:var(--primary-color);font-size:18px;font-weight:600}
.om-schritt-titel{margin:12px 0 10px;color:var(--text-color-01);font-size:24px;font-weight:600;line-height:1.3em;text-transform:uppercase}
.om-schritt p{max-width:680px;margin:0;color:var(--text-color-02);font-size:17px;font-weight:500;line-height:1.6em}

/* Region */
.om-region{padding-top:40px}
.om-region-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 80px;padding-top:64px;border-top:1px solid var(--background-color-02)}
.om-region .om-titel{color:var(--text-color-02)}
.om-region-text p{margin:0 0 24px;color:var(--text-color-02);font-size:18px;font-weight:500;line-height:1.6em}
.om-region-text p:last-child{margin-bottom:0}

/* Erstgespräch: Text links, Terminkarte (termin-karte.css) rechts */
.om-termin-inhalt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px 80px;align-items:start}
.om-termin-inhalt .termin{scroll-margin-top:110px}
.om-gespraech{display:grid;gap:18px;margin:0 0 32px;padding:0;list-style:none;counter-reset:om-gespraech}
.om-gespraech li{position:relative;padding-left:54px;color:var(--text-color-01);font-size:17px;font-weight:500;line-height:1.55em;counter-increment:om-gespraech}
.om-gespraech li::before{content:counter(om-gespraech);position:absolute;top:-4px;left:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#f3e1fe;color:var(--primary-color);font-size:15px;font-weight:600}
.om-anruf{font-size:16px}

/* Grafiken: gemeinsame Bausteine */
.om-grafik{position:relative;margin:0;padding:32px;border-radius:20px;background:var(--blue-chalk);overflow:hidden}
.om-beispiel{position:absolute;top:14px;right:14px;z-index:3;padding:4px 10px;border-radius:100px;background:var(--white-color);color:var(--text-color-02);font-size:11px;font-weight:600;line-height:1.5em;letter-spacing:.04em;text-transform:uppercase}
.om-fenster{position:relative;border-radius:14px;background:var(--white-color);box-shadow:0 24px 48px -24px #1b0b4a40;overflow:hidden}
.om-fenster-leiste{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid #ececf3}
.om-fenster-leiste i{width:9px;height:9px;border-radius:50%;background:#dcdce6}
.om-suchfeld{display:flex;align-items:center;gap:10px;min-height:44px;margin:16px;padding:10px 16px;border:1px solid #e3e3ec;border-radius:100px;color:var(--text-color-01);font-size:15px;font-weight:500;line-height:1.4}
.om-suchfeld svg{flex:none;color:var(--text-color-02)}
.om-balken{display:block;flex:none;width:var(--b,70%);height:8px;border-radius:8px;background:#e4e4ee}
.om-url{color:var(--primary-color);font-size:13px;font-weight:600;line-height:1.3}
.om-tippen::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.2em;background:var(--primary-color);opacity:0}

/* 1 Verlauf: Ads sofort, SEO wächst und überholt */
.om-legende{display:flex;gap:20px;margin:0 0 12px}
.om-legende span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.om-legende span::before{content:"";width:18px;height:4px;border-radius:4px;background:currentColor}
.om-legende-ads{color:var(--text-color-01)}
.om-legende-seo{color:var(--primary-color)}
.om-diagramm{display:block;width:100%;height:auto;overflow:visible}
.om-raster line{stroke:#c9cfee;stroke-width:1}
.om-achse text{fill:var(--text-color-02);font-size:12px;font-weight:500}
.om-pfad{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.om-pfad-ads{stroke:var(--text-color-01)}
.om-pfad-seo{stroke:var(--primary-color)}
.om-schnitt{fill:var(--white-color);stroke:var(--primary-color);stroke-width:3;transform-box:fill-box;transform-origin:center}
.om-notiz{margin:12px 0 0;color:var(--text-color-02);font-size:14px;line-height:1.5em}

/* 2 Suche: Ergebnis steigt auf Platz 1 (Zeile = 52 px Eintrag + 12 px Abstand) */
.om-suche{--om-zeile:64px}
.om-treffer{position:relative;display:flex;flex-direction:column;gap:12px;margin:0;padding:0 16px 16px;list-style:none}
.om-treffer li{position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;height:52px;padding:0 14px;border-radius:10px;background:#f7f7fb}
.om-treffer .om-du{z-index:1;background:var(--white-color);box-shadow:0 0 0 2px var(--primary-color),0 14px 30px -14px #5510ff66}
.om-du .om-balken{background:#eadcfd}
.om-platz{position:absolute;top:50%;right:12px;padding:3px 9px;border-radius:100px;background:var(--primary-color);color:var(--white-color);font-size:12px;font-weight:700;line-height:1.4;transform:translateY(-50%)}
.om-ort{display:flex;align-items:center;gap:14px;margin:0 16px 16px;padding:12px;border:1px solid #ececf3;border-radius:12px}
.om-ort-karte{position:relative;flex:none;width:60px;height:60px;border-radius:10px;background:linear-gradient(135deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%),linear-gradient(45deg,transparent 40%,#fff 40%,#fff 46%,transparent 46%),#e7eaf7}
.om-pin{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-16px 0 0 -10px;border-radius:50% 50% 50% 0;background:var(--primary-color);transform:rotate(-45deg)}
.om-pin::after{content:"";position:absolute;top:6px;left:6px;width:8px;height:8px;border-radius:50%;background:var(--white-color)}
.om-ort-name{display:block;color:var(--text-color-01);font-size:15px;font-weight:600;line-height:1.3}
.om-ort-sterne{display:flex;align-items:center;gap:4px;margin-top:4px;color:var(--text-color-02);font-size:13px;line-height:1.3}
.om-stern{fill:var(--primary-color)}

/* 3 Google Ads: Anzeige oben, Kennzahlen zählen hoch */
.om-anzeige{display:block;margin:0 16px 12px;padding:14px;border:1px solid #eadcfd;border-radius:10px;background:#fbf7ff}
.om-anzeige-zeile{display:flex;align-items:center;gap:8px}
.om-anzeige-label{color:var(--text-color-01);font-size:12px;font-weight:700}
.om-anzeige-titel{display:block;margin:6px 0 10px;color:var(--primary-color);font-size:16px;font-weight:600;line-height:1.35}
.om-ads .om-treffer li{height:44px}
.om-kennzahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.om-kennzahl{padding:16px;border-radius:14px;background:var(--white-color)}
.om-kennzahl-wert{display:block;color:var(--text-color-01);font-size:26px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.om-kennzahl-name{display:block;margin-top:6px;color:var(--text-color-02);font-size:13px;font-weight:500;line-height:1.35}

/* 4 Social: Feed scrollt zur Anzeige (Beitrag 176 px + 14 px Abstand = 190 px) */
.om-social{display:flex;justify-content:center;padding:40px 32px}
.om-handy{width:260px;height:460px;padding:12px;border-radius:42px;background:var(--text-color-01);box-shadow:0 30px 60px -30px #1b0b4a80}
.om-bildschirm{position:relative;height:100%;border-radius:32px;background:var(--white-color);overflow:hidden}
.om-bildschirm::before{content:"";position:absolute;top:10px;left:50%;z-index:2;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:var(--text-color-01)}
.om-feed{display:flex;flex-direction:column;gap:14px;padding:40px 14px 14px;transform:translateY(-190px)}
.om-post{display:flex;flex:none;flex-direction:column;gap:10px;height:176px;padding:12px;border:1px solid #ececf3;border-radius:14px}
.om-post-kopf{display:flex;align-items:center;gap:10px}
.om-avatar{flex:none;width:28px;height:28px;border-radius:50%;background:#e4e4ee}
.om-post-bild{flex:1;border-radius:10px;background:#f0f0f6}
.om-anzeige-post{height:auto;border-color:#eadcfd;box-shadow:0 14px 30px -18px #5510ff55}
.om-anzeige-post .om-avatar{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color))}
.om-post-name{display:block;color:var(--text-color-01);font-size:13px;font-weight:600;line-height:1.2}
.om-post-hinweis{display:block;color:var(--text-color-02);font-size:11px;line-height:1.3}
.om-anzeige-bild{display:flex;align-items:flex-end;height:170px;padding:14px;border-radius:10px;background:radial-gradient(circle at 80% 20%,#c00bf7aa,transparent 55%),linear-gradient(135deg,var(--secondary-color),var(--text-color-01));color:var(--white-color);font-size:18px;font-weight:600;line-height:1.2;text-transform:uppercase}
.om-post-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px}
.om-herz{flex:none;fill:var(--primary-color);stroke:var(--primary-color);stroke-width:1.5;transform-origin:center}
.om-mehr{padding:7px 14px;border-radius:100px;background:var(--primary-color);color:var(--white-color);font-size:12px;font-weight:600}

/* 5 Dashboard (dunkel): Kurve, Kanäle, eingehende Anfragen */
.om-dunkel{background-color:var(--text-color-01);background-image:radial-gradient(circle at 100% 100%,#5510ff5c,transparent 55%),linear-gradient(90deg,#ffffff0f 1px,transparent 1px);background-size:100% 100%,25% 100%;color:var(--white-color)}
.om-dunkel .om-beispiel{background:#ffffff1f;color:#d6d6de}
.om-dash-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.om-dash-name{width:100%;color:#b5b5bd;font-size:14px;font-weight:500}
.om-dash-zahl{font-size:36px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.om-dash-trend{padding:3px 10px;border-radius:100px;background:#c00bf733;color:#e7b6ff;font-size:13px;font-weight:600}
.om-kurve{display:block;width:100%;height:auto;margin:16px 0 24px;overflow:visible}
.om-kurve-linie{fill:none;stroke:var(--primary-color);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.om-kurve-flaeche{fill:url(#om-kurve-verlauf)}
.om-dash-unten{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center}
.om-ring{display:block;width:96px;height:96px;transform:rotate(-90deg)}
.om-ring circle{fill:none;stroke:var(--c);stroke-width:6}
.om-kanaele{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.om-kanaele li{display:flex;align-items:center;gap:8px;color:#d6d6de;font-size:13px;font-weight:500}
.om-kanaele i{flex:none;width:10px;height:10px;border-radius:3px;background:var(--c)}
.om-kanaele b{margin-left:auto;color:var(--white-color);font-weight:600}
.om-ereignisse{display:grid;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.om-ereignisse li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#ffffff12;font-size:14px;font-weight:500}
.om-ereignisse li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--primary-color);box-shadow:0 0 0 4px #c00bf733}
.om-ereignisse small{margin-left:auto;color:#9a9aa6;font-size:12px}

@media (prefers-reduced-motion:no-preference){
  /* Einblenden (Ablauf-Schritte); falls das Skript nicht läuft, nach 3 s trotzdem sichtbar */
  html.w-mod-js .om-einblenden:not(.om-sichtbar){opacity:0;transform:translateY(40px)}
  .om-einblenden{transition:opacity .7s ease,transform .9s cubic-bezier(.25,1,.5,1)}
  html.w-mod-js:not(.om-bereit) .om-einblenden{animation:om-notfall 0s 3s forwards}

  /* Grafiken: Startzustand nur mit Skript (html.om-bereit), .om-los spielt ab */
  .om-pfad-ads{transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) .2s}
  .om-pfad-seo{transition:stroke-dashoffset 2s cubic-bezier(.65,0,.35,1) .6s}
  .om-schnitt{transition:opacity .3s 2.3s,transform .5s cubic-bezier(.34,1.56,.64,1) 2.3s}
  html.om-bereit .om-grafik:not(.om-los) .om-pfad{stroke-dashoffset:1}
  html.om-bereit .om-grafik:not(.om-los) .om-schnitt{opacity:0;transform:scale(.3)}

  .om-treffer li{transition:transform .9s cubic-bezier(.65,0,.35,1) 1.8s,box-shadow .5s 2.5s,background-color .5s 2.5s}
  html.om-bereit .om-suche:not(.om-los) .om-du{transform:translateY(calc(3 * var(--om-zeile)));background:#f7f7fb;box-shadow:none}
  html.om-bereit .om-suche:not(.om-los) .om-treffer li:not(.om-du){transform:translateY(calc(-1 * var(--om-zeile)))}
  .om-platz{transition:opacity .3s 2.7s}
  html.om-bereit .om-suche:not(.om-los) .om-platz{opacity:0}
  .om-ort{transition:opacity .5s 2.9s,transform .6s cubic-bezier(.34,1.56,.64,1) 2.9s}
  html.om-bereit .om-suche:not(.om-los) .om-ort{opacity:0;transform:translateY(12px) scale(.94)}
  .om-tippt::after{opacity:1;animation:om-blinken .9s steps(1) infinite}

  .om-anzeige{transition:opacity .6s .4s,transform .7s cubic-bezier(.25,1,.5,1) .4s}
  html.om-bereit .om-ads:not(.om-los) .om-anzeige{opacity:0;transform:translateY(-14px)}

  .om-feed{transition:transform 1.6s cubic-bezier(.65,0,.35,1) .3s}
  html.om-bereit .om-social:not(.om-los) .om-feed{transform:translateY(0)}
  .om-herz{transition:fill .3s 2.1s,stroke .3s 2.1s}
  html.om-bereit .om-social:not(.om-los) .om-herz{fill:transparent;stroke:#b5b5bd}
  html.om-bereit .om-social.om-los .om-herz{animation:om-pop .5s cubic-bezier(.34,1.56,.64,1) 2.1s}
  html.om-bereit .om-social.om-los .om-mehr{animation:om-puls 1.1s ease-out 2.5s 2}

  .om-kurve-linie{transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1) .3s}
  .om-kurve-flaeche{transition:opacity .8s 1.6s}
  html.om-bereit .om-dashboard:not(.om-los) .om-kurve-linie{stroke-dashoffset:1}
  html.om-bereit .om-dashboard:not(.om-los) .om-kurve-flaeche{opacity:0}
  .om-ring circle{transition:stroke-dasharray 1.1s cubic-bezier(.65,0,.35,1) 1.2s}
  html.om-bereit .om-dashboard:not(.om-los) .om-ring circle{stroke-dasharray:0 100}
  .om-ereignisse li{transition:opacity .4s,transform .5s cubic-bezier(.25,1,.5,1)}
  .om-ereignisse li:nth-child(1){transition-delay:2.2s}
  .om-ereignisse li:nth-child(2){transition-delay:2.7s}
  .om-ereignisse li:nth-child(3){transition-delay:3.2s}
  html.om-bereit .om-dashboard:not(.om-los) .om-ereignisse li{opacity:0;transform:translateX(-14px)}
}
@keyframes om-notfall{to{opacity:1;transform:none}}
@keyframes om-blinken{50%{opacity:0}}
@keyframes om-pop{40%{transform:scale(1.35)}}
@keyframes om-puls{from{box-shadow:0 0 0 0 #c00bf780}to{box-shadow:0 0 0 12px #c00bf700}}

@media screen and (max-width:991px){
  .om-abschnitt{padding:80px 0}
  .om-intro{padding-top:40px}
  .om-titel{font-size:40px}
  .om-leistung .om-titel{font-size:36px}
  .om-zwei,.om-region-inhalt,.om-termin-inhalt{grid-template-columns:minmax(0,1fr);gap:40px}
  .om-gespiegelt>.om-grafik-spalte{order:0}
}
@media screen and (max-width:767px){
  .om-abschnitt{padding:60px 0}
  .om-titel,.om-leistung .om-titel{font-size:30px}
  .om-text,.om-region-text p{font-size:16px}
  .om-liste{grid-template-columns:minmax(0,1fr)}
  .om-schritte{gap:36px;padding-left:64px}
  .om-schritte::before,.om-schritte::after{top:22px;bottom:22px;left:21px}
  .om-schritt-nr{left:-64px;width:44px;height:44px;font-size:15px}
  .om-schritt-titel{margin-top:8px;font-size:20px}
  .om-schritt p{font-size:16px}
  .om-grafik{padding:20px}
  .om-verlauf{padding-top:48px}
  .om-beispiel{top:10px;right:10px}
  .om-social{padding:40px 16px 24px}
  .om-kennzahlen{gap:8px}
  .om-kennzahl{padding:12px}
  .om-kennzahl-wert{font-size:19px}
}
@media screen and (max-width:479px){
  .om-pill{padding:6px 18px;font-size:12px}
  .om-kennzahl-wert{font-size:17px}
  .om-dash-unten{grid-template-columns:72px minmax(0,1fr)}
  .om-ring{width:72px;height:72px}
}