/* ======================================================================
   Funkenart Media – Online-Marketing-Seite, eigene Bausteine (om-)
   Leitidee „Aufwärts": Wachstumsgraph, lokale Sichtbarkeit, Stufenmodell.
   Ergänzt style.css. Nur seiteneigene Klassen, keine Überschneidung.
   (Nutzt @keyframes svcUp aus style.css.)
   ====================================================================== */

/* ---- Hero ---- */
.om-hero .wrap { position:relative; z-index:1; }
/* Grid hinter dem Board zurücknehmen, damit das Visual lesbar bleibt (nur OM-Seite) */
.page-hero.wd.om-hero .wd-grid { animation:none; opacity:.4; }
.page-hero.wd.om-hero .wd-grid::before { opacity:.5; }
.om-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; position:relative; z-index:1; }
.om-hero .om-hero-copy h1 { color:#fff; font-size:clamp(34px,4.6vw,58px); line-height:1.07; letter-spacing:-.035em; margin-top:16px; max-width:19ch; text-wrap:balance; }
.om-hero .om-hero-copy h1 em { color:var(--accent); white-space:nowrap; }
.om-hero .om-hero-copy .lead { margin-top:20px; max-width:52ch; color:#E7DECF; font-size:clamp(17px,1.5vw,19.5px); line-height:1.65; }
.om-hero .om-hero-cta { margin-top:30px; }
.om-hero-values { margin-top:32px; display:flex; flex-wrap:wrap; gap:10px; }
.om-hero-values span { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); font-size:14px; font-weight:600; color:#EBE2D4; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.om-hero-values span svg { width:17px; height:17px; color:var(--accent); flex:none; }

/* ---- Hero-Visual: dezentes Glas-Panel mit ruhiger Kurve und integrierter Ergebnis-Karte ---- */
.om-rise { position:relative; width:100%; max-width:480px; margin-inline:auto; overflow:hidden;
  border-radius:var(--radius-xl); border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(158deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); }
.or-sheen { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(62% 58% at 80% 24%, rgba(235,78,28,.12), transparent 68%); }
.or-graph { display:block; width:100%; height:auto; position:relative; }
.or-grid line { stroke:rgba(255,255,255,.03); stroke-width:1; }
.or-area { fill:url(#orFill); opacity:0; transition:opacity 1s var(--ease) .3s; }
.or-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(235,78,28,.38)); }
.or-halo { opacity:0; transition:opacity .6s var(--ease) 1.3s; }
.or-dot { fill:#fff; stroke:var(--accent); stroke-width:1.8; opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(0); }
/* Warmes, leicht helles Glas-Widget mit Betrieb, Angebot und Ergebnis */
.or-card { position:absolute; top:9%; left:6%; display:flex; flex-direction:column; padding:13px 15px;
  background:linear-gradient(158deg, rgba(255,251,245,.95), rgba(248,239,228,.9));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.65); border-radius:13px;
  box-shadow:0 20px 40px -20px rgba(40,25,10,.5), inset 0 1px 0 rgba(255,255,255,.7); opacity:0; }
.or-name { font-size:14px; font-weight:800; color:#2c2118; letter-spacing:-.01em; line-height:1.1; }
.or-offer { font-size:12px; font-weight:600; color:#8a7a62; margin-top:3px; line-height:1.2; }
.or-result { display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(120,80,40,.14); font-size:12.5px; font-weight:600; color:#4a3c2e; }
.or-result b { color:var(--accent); font-weight:800; font-size:14px; line-height:1; }
.or-arrow { width:14px; height:14px; color:var(--accent); flex:none; }
/* Reveal: Linie zeichnet sich, Fläche blendet ein, Endpunkt erscheint, Widget gleitet ein */
.om-rise.reveal .or-line { stroke-dasharray:1; stroke-dashoffset:1; }
.om-rise.reveal.in .or-line { animation:orDraw 1.4s var(--ease) .1s forwards; }
.om-rise.reveal.in .or-area { opacity:1; }
.om-rise.reveal.in .or-halo { opacity:1; }
.om-rise.reveal.in .or-dot { animation:orPop .4s var(--ease) 1.4s forwards; }
.om-rise.reveal.in .or-card { animation:orCard .55s var(--ease) .5s forwards; }
@keyframes orDraw { to { stroke-dashoffset:0; } }
@keyframes orPop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } }
@keyframes orCard { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:920px){
  .om-hero-grid { grid-template-columns:1fr; }
  .om-rise { margin:12px auto 0; max-width:500px; }
}
@media (max-width:560px){
  .om-hero .om-hero-copy h1 { font-size:38px; }
  .om-rise { max-width:420px; border-radius:18px; }
  /* Widget mobil kleiner skaliert */
  .or-card { padding:10px 12px; }
  .or-name { font-size:12.5px; }
  .or-offer { font-size:11px; margin-top:2px; }
  .or-result { font-size:11px; gap:5px; margin-top:8px; padding-top:7px; }
  .or-result b { font-size:12.5px; }
  .or-arrow { width:12px; height:12px; }
}

/* ---- Ziel-Karten (Was Online-Marketing bedeutet) ---- */
.om-goals { margin-top:clamp(34px,4vw,52px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); }
.om-goal { background:linear-gradient(180deg,#fff,#FBF6EC); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px); box-shadow:var(--sh-sm); }
.om-goal-ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(235,78,28,.18); }
.om-goal-ic svg { width:23px; height:23px; }
.om-goal h3 { margin-top:16px; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.om-goal p { margin-top:9px; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.om-goals.reveal .om-goal { opacity:0; transform:translateY(14px); }
.om-goals.reveal.in .om-goal { animation:svcUp .5s forwards; }
.om-goals.reveal.in .om-goal:nth-child(1){ animation-delay:.08s; }
.om-goals.reveal.in .om-goal:nth-child(2){ animation-delay:.22s; }
.om-goals.reveal.in .om-goal:nth-child(3){ animation-delay:.36s; }
@media (max-width:780px){ .om-goals { grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }

/* ---- Was ich übernehme ---- */
.om-do { margin-top:clamp(34px,4vw,50px); display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.om-do-item { display:flex; gap:14px; align-items:flex-start; background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--dk-line); border-radius:var(--r-lg); padding:20px 22px; }
.om-do-ic { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; color:var(--accent); background:rgba(235,78,28,.12); border:1px solid rgba(235,78,28,.2); }
.om-do-ic svg { width:19px; height:19px; }
.om-do-tx b { display:block; color:#fff; font-size:17px; font-weight:700; line-height:1.3; }
.om-do-tx span { display:block; margin-top:6px; color:var(--dk-muted); font-size:15px; line-height:1.55; }
.om-do.reveal .om-do-item { opacity:0; transform:translateY(14px); }
.om-do.reveal.in .om-do-item { animation:svcUp .5s forwards; }
.om-do.reveal.in .om-do-item:nth-child(1){ animation-delay:.06s; } .om-do.reveal.in .om-do-item:nth-child(2){ animation-delay:.14s; }
.om-do.reveal.in .om-do-item:nth-child(3){ animation-delay:.22s; } .om-do.reveal.in .om-do-item:nth-child(4){ animation-delay:.3s; }
.om-do.reveal.in .om-do-item:nth-child(5){ animation-delay:.38s; } .om-do.reveal.in .om-do-item:nth-child(6){ animation-delay:.46s; }
@media (max-width:760px){ .om-do { grid-template-columns:1fr; } }

/* ---- Sichtbarkeit + lokales Suchergebnis ---- */
.om-find-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(36px,5vw,64px); align-items:center; }
.om-find-copy h2 { font-size:clamp(26px,3.4vw,44px); margin-top:18px; }
.om-find-copy .lead { margin-top:18px; }
.om-checks { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:13px; }
.om-checks li { display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); font-size:16px; }
.om-checks li svg { color:var(--accent); flex:none; margin-top:3px; }
.om-localpack { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh); padding:16px; max-width:440px; margin-inline:auto; }
.lp-search { display:flex; align-items:center; gap:10px; background:#F3ECDF; border:1px solid var(--line-2); border-radius:999px; padding:11px 16px; color:var(--muted); font-size:14px; }
.lp-search svg { color:var(--muted); flex:none; }
.lp-map { position:relative; height:118px; margin-top:12px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#EAF0E6,#E7EBE2); border:1px solid var(--line-2); }
.lp-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(30,22,14,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(30,22,14,.05) 1px,transparent 1px); background-size:26px 26px; }
.lp-pin { position:absolute; width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--accent); box-shadow:0 6px 14px -4px rgba(235,78,28,.6); left:46%; top:36%; }
.lp-pin::after { content:""; position:absolute; inset:5px; background:#fff; border-radius:50%; }
.lp-pin.g { background:#B0A48F; box-shadow:none; }
.lp-pin.p2 { left:24%; top:62%; } .lp-pin.p3 { left:70%; top:56%; }
.lp-list { margin-top:12px; display:grid; gap:8px; }
.lp-row { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; background:#FBF6EC; border:1px solid var(--line-2); }
.lp-row.is-top { background:var(--accent-soft); border-color:rgba(235,78,28,.28); }
.lp-mark { width:10px; height:10px; border-radius:50%; background:var(--accent); flex:none; }
.lp-mark.g { background:#CFC4B2; }
.lp-rb { flex:1; min-width:0; }
.lp-rb b { font-size:14.5px; color:var(--ink); display:block; }
.lp-stars { font-size:12px; color:var(--accent); letter-spacing:1px; }
.lp-stars i { color:var(--muted); font-style:normal; letter-spacing:0; font-size:11.5px; }
.lp-tag { font-size:11px; font-weight:700; color:#fff; background:var(--accent); border-radius:999px; padding:4px 9px; flex:none; }
.lp-rb .ln { display:block; height:9px; border-radius:5px; background:#E7DDCC; }
.lp-rb b.ln { height:11px; margin-bottom:6px; }
.lp-rb .w70 { width:70%; } .lp-rb .w55 { width:55%; } .lp-rb .w40 { width:40%; } .lp-rb .w35 { width:35%; }
.om-localpack.reveal .lp-row { opacity:0; transform:translateY(10px); }
.om-localpack.reveal.in .lp-list .lp-row { animation:svcUp .5s forwards; }
.om-localpack.reveal.in .lp-list .lp-row:nth-child(1){ animation-delay:.18s; }
.om-localpack.reveal.in .lp-list .lp-row:nth-child(2){ animation-delay:.32s; }
.om-localpack.reveal.in .lp-list .lp-row:nth-child(3){ animation-delay:.46s; }
@media (max-width:860px){ .om-find-grid { grid-template-columns:1fr; } }

/* ---- System / Zusammenspiel ---- */
.om-flow { margin-top:clamp(40px,5vw,60px); display:grid; grid-template-columns:repeat(5,1fr); gap:14px; align-items:stretch; }
.om-node { position:relative; background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--dk-line); border-radius:var(--r-lg); padding:22px 18px; }
.om-node-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; color:var(--accent); background:rgba(235,78,28,.12); border:1px solid rgba(235,78,28,.2); margin-bottom:14px; }
.om-node b { display:block; color:#fff; font-size:17px; font-weight:700; }
.om-node p { margin-top:8px; color:var(--dk-muted); font-size:14px; line-height:1.5; }
.om-node:not(:last-child)::after { content:""; position:absolute; right:-9px; top:50%; width:14px; height:14px; transform:translateY(-50%) rotate(45deg); border-top:2px solid rgba(235,78,28,.45); border-right:2px solid rgba(235,78,28,.45); z-index:2; }
.om-node.is-goal { background:linear-gradient(160deg, rgba(235,78,28,.2), rgba(235,78,28,.05)); border-color:rgba(235,78,28,.4); }
.om-node.is-goal .om-node-ic { background:var(--accent); color:#fff; border-color:transparent; }
.om-flow.reveal .om-node { opacity:0; transform:translateY(14px); }
.om-flow.reveal.in .om-node { animation:svcUp .5s forwards; }
.om-flow.reveal.in .om-node.n1{ animation-delay:.08s; } .om-flow.reveal.in .om-node.n2{ animation-delay:.2s; }
.om-flow.reveal.in .om-node.n3{ animation-delay:.32s; } .om-flow.reveal.in .om-node.n4{ animation-delay:.44s; }
.om-flow.reveal.in .om-node.n5{ animation-delay:.56s; }
@media (max-width:900px){
  .om-flow { grid-template-columns:1fr; gap:12px; max-width:480px; margin-inline:auto; }
  .om-node:not(:last-child)::after { right:auto; left:50%; top:auto; bottom:-9px; transform:translateX(-50%) rotate(135deg); }
}

/* ---- Bausteine / Leistungen ---- */
.om-builds { margin-top:clamp(40px,5vw,60px); display:grid; gap:clamp(20px,3vw,30px); }
.wrap > .om-builds:first-child { margin-top:0; }
.om-build .om-build-text h2 { font-size:clamp(25px,3.4vw,46px); font-weight:800; letter-spacing:-.02em; line-height:1.12; margin-top:10px; text-wrap:balance; color:var(--ink); }
.om-build .om-build-text h2 em { color:var(--accent); }
.om-build { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,56px); align-items:center; background:linear-gradient(180deg,#fff,#FBF6EC); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,3vw,44px); box-shadow:var(--sh-sm); }
.om-build.alt .om-build-art { order:-1; }
.om-build .svc-kicker { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.om-build-text h3 { font-size:clamp(22px,2.4vw,30px); font-weight:800; letter-spacing:-.02em; line-height:1.14; }
.om-build-text .desc { margin-top:14px; color:var(--ink-2); font-size:16.5px; line-height:1.6; }
.om-mini { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; }
.om-mini li { position:relative; padding-left:27px; color:var(--ink-2); font-size:16.5px; line-height:1.55; }
.om-mini li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--accent); font-weight:800; font-size:16px; }
.gprofile { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); padding:20px; max-width:380px; margin-inline:auto; }
.gp-head { display:flex; align-items:center; gap:13px; }
.gp-logo { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(150deg,var(--accent),var(--accent-deep)); color:#fff; font-weight:800; font-size:15px; flex:none; }
.gp-id b { display:block; font-size:17px; color:var(--ink); }
.gp-id span { font-size:13px; color:var(--muted); }
.gp-rate { display:flex; align-items:center; gap:10px; margin-top:16px; }
.gp-num { font-size:24px; font-weight:800; color:var(--ink); }
.gp-stars { color:var(--accent); letter-spacing:1.5px; font-size:15px; }
.gp-count { font-size:13px; color:var(--muted); }
.gp-actions { display:flex; gap:8px; margin-top:16px; }
.gp-btn { flex:1; text-align:center; font-size:13px; font-weight:700; color:var(--ink-2); background:#F3ECDF; border:1px solid var(--line-2); border-radius:999px; padding:8px 0; }
.gp-btn.primary { background:var(--accent); color:#fff; border-color:transparent; }
.gp-row { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:var(--muted); }
.gp-open { color:#1F7A43; font-weight:700; }
.gp-dot { width:4px; height:4px; border-radius:50%; background:var(--faint); }
.adcard { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); padding:20px; max-width:360px; margin-inline:auto; }
.ad-chan { display:flex; gap:7px; margin-bottom:14px; }
.ad-ch { font-size:11px; font-weight:700; border-radius:999px; padding:4px 11px; }
.ad-ch.g { color:#1B5FC0; background:rgba(27,95,192,.1); }
.ad-ch.m { color:#C13584; background:rgba(193,53,132,.1); }
.ad-top { display:flex; align-items:center; gap:10px; }
.ad-tag { font-size:11px; font-weight:700; color:#1F7A43; background:rgba(31,122,67,.1); border-radius:5px; padding:2px 7px; }
.ad-url { font-size:13px; color:var(--muted); }
.ad-h { display:block; margin-top:12px; font-size:18px; color:#1B5FC0; font-weight:700; }
.ad-d { margin-top:7px; color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.ad-cta { display:inline-flex; margin-top:14px; background:var(--accent); color:#fff; font-size:13.5px; font-weight:700; border-radius:999px; padding:9px 18px; }
.ad-reach { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); }
.ad-bar { display:block; height:8px; border-radius:5px; background:#EFE7D8; overflow:hidden; }
.ad-bar i { display:block; height:100%; width:72%; border-radius:5px; background:linear-gradient(90deg,var(--accent),var(--accent-deep)); }
.ad-reach small { display:block; margin-top:8px; font-size:12.5px; color:var(--muted); }
.om-build.reveal .ad-bar i { width:0; }
.om-build.reveal.in .ad-bar i { animation:adFill 1s .3s var(--ease) forwards; }
@keyframes adFill { to { width:72%; } }

/* Beispielanzeige (Social-Ad eines Beispielbetriebs) */
.adpost { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); max-width:340px; margin-inline:auto; overflow:hidden; }
.ap-ping { position:absolute; z-index:3; top:-12px; right:14px; display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; border-radius:999px; padding:6px 12px; box-shadow:0 12px 26px -12px rgba(235,78,28,.7); }
.ap-ping svg { flex:none; }
.ap-head { display:flex; align-items:center; gap:11px; padding:15px 15px 11px; }
.ap-ava { width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; background:linear-gradient(150deg,var(--accent),var(--accent-deep)); color:#fff; font-weight:800; font-size:14px; }
.ap-id b { display:block; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.15; }
.ap-id span { display:block; margin-top:1px; font-size:11px; letter-spacing:.02em; color:var(--muted); }
.ap-cap { margin:0; padding:0 15px 13px; font-size:14px; color:var(--ink-2); line-height:1.5; }
.ap-cap b { color:var(--ink); font-weight:700; }
.ap-media { position:relative; aspect-ratio:4/5; overflow:hidden; background:#e8ddc9; }
.ap-media img { width:100%; height:100%; object-fit:cover; display:block; }
.ap-media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(24,16,9,0) 52%, rgba(24,16,9,.24)), linear-gradient(150deg, rgba(255,255,255,.12), transparent 32%); }
.ap-bar { display:flex; align-items:center; gap:12px; padding:12px 15px; background:#F7F1E6; border-top:1px solid var(--line-2); }
.ap-bar-tx { flex:1; min-width:0; }
.ap-url { display:block; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.ap-h { display:block; font-size:14px; font-weight:800; color:var(--ink); margin-top:2px; line-height:1.2; }
.ap-btn { flex:none; font-size:12.5px; font-weight:700; color:var(--ink-2); background:#fff; border:1px solid var(--line-2); border-radius:9px; padding:9px 13px; }
.ap-foot { display:flex; align-items:center; justify-content:space-between; padding:11px 15px 13px; }
.ap-tag { font-size:11px; font-weight:700; color:var(--muted); background:#F3ECDF; border:1px solid var(--line-2); border-radius:5px; padding:3px 8px; }
.ap-net { font-size:11.5px; font-weight:600; color:var(--muted); }
.om-build.reveal .adpost { opacity:0; transform:translateY(14px); }
.om-build.reveal.in .adpost { animation:svcUp .6s .15s forwards; }
@media (max-width:860px){
  .om-build { grid-template-columns:1fr; }
  .om-build.alt .om-build-art { order:0; }
}
/* Mobile bewusst kompakter und einheitlich, keine Desktop-Proportionen ungeprüft übernehmen */
@media (max-width:560px){
  /* Aufbau-Sektionen Grundlage + Hebel: straffe, gleiche Spacing-Hierarchie */
  .om-build { gap:22px; padding:22px 18px; }
  .om-build .svc-kicker { margin-bottom:8px; }
  .om-build .om-build-text h2 { margin-top:6px; }
  .om-build-text .desc { margin-top:10px; font-size:15.5px; }
  .om-mini { margin-top:14px; gap:9px; }
  .om-mini li { font-size:15.5px; text-wrap:pretty; }
  /* Anzeige: untere Leiste als Zeile – URL links, CTA rechts (wie echte Social-Ad) */
  .adpost { max-width:290px; }
  .adpost .ap-media { aspect-ratio:4/3; }
  .adpost .ap-cap { font-size:13.5px; }
  .adpost .ap-bar { flex-direction:row; align-items:center; gap:8px; }
  .adpost .ap-url { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .adpost .ap-h { font-size:13px; white-space:normal; }
  .adpost .ap-btn { flex:none; width:auto; text-align:center; padding:7px 10px; font-size:11.5px; }
  /* Google-Profil-Card kompakter, elegantes Mini-Mockup */
  .gprofile { max-width:268px; padding:15px; }
  .gprofile .gp-logo { width:38px; height:38px; font-size:14px; }
  .gprofile .gp-id b { font-size:15.5px; }
  .gprofile .gp-num { font-size:20px; }
  .gprofile .gp-rate { margin-top:13px; } .gprofile .gp-actions { margin-top:13px; }
  .gprofile .gp-btn { font-size:12px; padding:7px 0; }
  /* Zielkarten „Was Online-Marketing bedeutet" leichter und kompakter */
  .om-goal { padding:20px 18px; }
  .om-goal-ic { width:40px; height:40px; border-radius:11px; }
  .om-goal-ic svg { width:20px; height:20px; }
  .om-goal h3 { margin-top:13px; font-size:17px; }
  .om-goal p { margin-top:7px; font-size:14.5px; }
}

/* ---- Stufenmodell ---- */
.om-stage-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(36px,5vw,72px); align-items:center; }
.om-stage-copy h2 { font-size:clamp(28px,3.4vw,46px); margin-top:18px; }
.om-stage-copy .lead { margin-top:20px; }
.om-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:end; }
.om-step { position:relative; overflow:hidden; background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--dk-line); border-radius:var(--r-lg); padding:24px 20px; }
.om-step::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--accent),transparent); opacity:.45; }
.om-step.s1 { min-height:240px; }
.om-step.s2 { min-height:300px; }
.om-step.s3 { min-height:360px; background:linear-gradient(160deg, rgba(235,78,28,.18), rgba(235,78,28,.05)); border-color:rgba(235,78,28,.38); }
.om-step.s3::after { opacity:1; }
.om-step-lvl { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.om-step h3 { color:#fff; font-size:19px; font-weight:700; margin-top:12px; }
.om-step p { margin-top:10px; color:var(--dk-muted); font-size:14px; line-height:1.5; }
.om-steps.reveal .om-step { opacity:0; transform:translateY(16px); }
.om-steps.reveal.in .om-step { animation:svcUp .55s forwards; }
.om-steps.reveal.in .om-step.s1 { animation-delay:.1s; }
.om-steps.reveal.in .om-step.s2 { animation-delay:.26s; }
.om-steps.reveal.in .om-step.s3 { animation-delay:.42s; }
@media (max-width:860px){
  .om-stage-grid { grid-template-columns:1fr; }
  .om-steps { grid-template-columns:1fr; }
  .om-step { min-height:0 !important; }
}

/* ---- Ausblick: KI-Suchsektion (helle Sektion mit dezentem Tech-Hintergrund) ---- */
.om-ai { position:relative; overflow:hidden; }
.om-ai .wrap { position:relative; z-index:1; }
.ai-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 44% at 50% -2%, rgba(235,78,28,.08), transparent 68%),
    radial-gradient(38% 44% at 88% 22%, rgba(235,78,28,.05), transparent 70%),
    radial-gradient(46% 50% at 12% 70%, rgba(255,255,255,.5), transparent 70%); }
.om-ai-head { max-width:760px; margin:0 auto; text-align:center; }
.om-ai-head h2 { font-size:clamp(25px,3.4vw,46px); margin-top:18px; }
.om-ai-head .lead { margin:16px auto 0; max-width:60ch; }
/* Ein ruhiges Assistant-Fenster, flach statt verschachtelt */
.aiw { position:relative; max-width:720px; margin:clamp(34px,4vw,52px) auto 0; padding:clamp(22px,2.6vw,32px); border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(251,246,236,.9)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9); box-shadow:0 54px 110px -54px rgba(60,40,20,.5), 0 14px 34px -22px rgba(60,40,20,.2); }
.aiw-bar { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line-2); }
.aiw-brand { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.aiw-spark { width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center; background:linear-gradient(150deg,var(--accent),var(--accent-deep)); color:#fff; }
.aiw-spark svg { width:16px; height:16px; }
.aiw-status { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--muted); }
.aiw-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#3f9d6a; box-shadow:0 0 0 3px rgba(63,157,106,.18); }
.aiw-prompt { display:flex; align-items:center; gap:11px; margin-top:18px; background:#fff; border:1px solid var(--line-2); border-radius:12px; padding:12px 14px; box-shadow:0 6px 18px -14px rgba(60,40,20,.3); }
.aiw-prompt svg { width:17px; height:17px; color:var(--muted); flex:none; }
.aiw-prompt-tx { font-size:15px; font-weight:600; color:var(--ink); line-height:1.4; }
.aiw-answer { margin-top:20px; }
/* Ghost reserviert die finale Höhe, der Tipptext liegt absolut darüber -> kein Größensprung beim Schreiben */
.aiw .aa-typed { position:relative; margin:0; font-size:16px; line-height:1.65; color:var(--ink-2); }
.aa-ghost { visibility:hidden; }
.aa-live { position:absolute; inset:0; }
.aa-cursor { display:inline-block; width:2px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--accent); animation:aaBlink 1s steps(1) infinite; }
@keyframes aaBlink { 50% { opacity:0; } }
.aiw-rec { display:flex; align-items:center; gap:13px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-2); opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.om-aianswer.is-typed .aiw-rec { opacity:1; transform:none; }
.aiw-rec-logo { width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center; background:linear-gradient(150deg,var(--accent),var(--accent-deep)); color:#fff; font-weight:800; font-size:15px; box-shadow:0 12px 26px -14px rgba(235,78,28,.6); }
.aiw-rec-tx b { display:block; font-size:16px; color:var(--ink); font-weight:800; }
.aiw-rec-tx > span { display:block; margin-top:3px; font-size:13px; color:var(--muted); }
.aiw-rec-tx .st { color:var(--accent); letter-spacing:1px; }
.aiw-note { margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--faint); opacity:0; transition:opacity .5s var(--ease) .15s; }
.om-aianswer.is-typed .aiw-note { opacity:1; }
@media (max-width:620px){
  .om-ai-head h2 { margin-top:9px; }
  .aiw { padding:18px; }
  .aiw-prompt-tx { font-size:14px; }
  .aiw .aa-typed { font-size:15px; }
  .aiw-rec-tx span { font-size:12.5px; }
}

/* ---- Reduced motion: alle om-Elemente sichtbar ---- */
@media (prefers-reduced-motion:reduce){
  .om-goals.reveal .om-goal, .om-do.reveal .om-do-item,
  .om-build.reveal .adpost, .om-aianswer .aiw-rec, .om-aianswer .aiw-note { opacity:1 !important; transform:none !important; animation:none !important; }
  .om-rise .or-line { stroke-dashoffset:0 !important; animation:none !important; }
  .om-rise .or-area, .om-rise .or-halo, .om-rise .or-dot, .om-rise .or-card { opacity:1 !important; transform:none !important; animation:none !important; }
  .om-build.reveal .ad-bar i { width:72% !important; }
  .aa-cursor { display:none; }
}