/* WG Bausteine: ablauf. Style-Block aus v3/parts/ablauf.html unverändert übernommen. */
/* ===== ABLAUF: Bento aus sechs Milchglas-Karten mit eigenen Formkompositionen ===== */
#ablauf { --abl-u: 1px; --abl-art-h: 200px; overflow: hidden; isolation: isolate; }
#ablauf .abl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#ablauf .abl-bggrid { position: absolute; left: 0; right: 0; top: 0; height: 760px; pointer-events: none; z-index: -1; }
#ablauf .abl-glow { z-index: -1; }
#ablauf .abl-glow--a { width: 560px; height: 340px; left: 50%; top: 60px; margin-left: -280px; opacity: .55; }
#ablauf .abl-glow--b { width: 520px; height: 420px; right: -120px; bottom: 80px; opacity: .45; }
#ablauf .abl-glow--c { width: 420px; height: 360px; left: -140px; top: 46%; opacity: .35; }
#ablauf .v3-wrap { position: relative; }
#ablauf .v3-head .v3-pill { align-self: center; }

/* Raster */
#ablauf .abl-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 64px; }
#ablauf .abl-card--wide { grid-column: span 2; }
#ablauf .abl-card--full { grid-column: 1 / -1; }

/* Karte */
#ablauf .abl-card { position: relative; display: flex; flex-direction: column; min-height: 390px; padding: 28px 28px 0; overflow: hidden; isolation: isolate; }
#ablauf .abl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
#ablauf .abl-card h3 { margin: 0; font-family: 'WGB Archivo', sans-serif;--wgb-ff:'WGB Archivo', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
#ablauf .abl-num { flex: none; font-family: 'WGB Roboto Mono', monospace;--wgb-ff:'WGB Roboto Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--muted); }
#ablauf .abl-card > p { margin: 12px 0 0; max-width: 36ch; font-family: 'WGB Roboto', sans-serif;--wgb-ff:'WGB Roboto', sans-serif; font-size: 16px; line-height: 1.55; color: var(--muted); }
#ablauf .abl-card--wide > p { max-width: 52ch; }

/* Bildfläche, bündig am unteren Kartenrand */
#ablauf .abl-art { position: relative; flex: none; height: var(--abl-art-h); margin: auto -28px 0; padding-top: 0; }
#ablauf .abl-card > .abl-art { margin-top: auto; }
#ablauf .abl-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; background-position: center bottom; -webkit-mask-image: radial-gradient(70% 90% at 50% 100%, #000 30%, transparent 78%); mask-image: radial-gradient(70% 90% at 50% 100%, #000 30%, transparent 78%); pointer-events: none; }
#ablauf .abl-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#ablauf .abl-art .s { stroke: url(#abl-edge); stroke-width: 1; filter: url(#abl-clay); }
#ablauf .abl-art .f1 { fill: url(#abl-f1); }
#ablauf .abl-art .f2 { fill: url(#abl-f2); }
#ablauf .abl-art .f3 { fill: url(#abl-f3); }
#ablauf .abl-art .route { fill: none; stroke: #141414; stroke-opacity: .26; stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; stroke-linejoin: round; }
#ablauf .abl-art .dot { fill: #C2F21C; stroke: #FFFFFF; stroke-width: 1.5; }
#ablauf .abl-art .pool { fill: #C2F21C; opacity: .5; filter: url(#abl-soft); transition: opacity 1.2s var(--ease) .35s; }

/* Die leuchtende Lime-Glasform */
#ablauf .abl-glass { position: absolute; z-index: 2; left: calc(50% + var(--gx) * var(--abl-u)); top: calc(var(--gy) * var(--abl-u)); width: calc(var(--gs) * var(--abl-u)); aspect-ratio: 1 / 1; border-radius: calc(14 * var(--abl-u));
  background: linear-gradient(140deg, rgba(240, 253, 190, .82) 0%, rgba(210, 247, 80, .62) 48%, rgba(194, 242, 28, .42) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(1.4); backdrop-filter: blur(7px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(20, 23, 12, .05), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -12px 22px rgba(110, 150, 0, .16), 0 16px 32px rgba(110, 150, 0, .20), 0 0 32px var(--glow);
  transition: transform 1.2s var(--ease) .2s, opacity 1s var(--ease) .2s, translate .6s var(--ease), box-shadow .6s var(--ease); }
#ablauf .abl-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 50% at 30% 22%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
#ablauf .abl-glass--circle { border-radius: 50%; }

/* Ankommen beim Sichtbarwerden (nur mit JS und ohne reduzierte Bewegung) */
#ablauf.abl-armed .abl-card:not(.is-live) .abl-glass { opacity: 0; transform: translate(calc(var(--fx, -14) * 1px), calc(var(--fy, -46) * 1px)) rotate(-7deg) scale(.88); }
#ablauf.abl-armed .abl-card:not(.is-live) .pool { opacity: 0; }
@media (hover: hover) {
  #ablauf .abl-card:hover .abl-glass { translate: 0 -6px; box-shadow: 0 0 0 1px rgba(20, 23, 12, .05), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -12px 22px rgba(110, 150, 0, .16), 0 22px 40px rgba(110, 150, 0, .24), 0 0 44px var(--glow); }
}

/* Garantie-Karte über die volle Breite */
#ablauf .abl-card--seal { min-height: 0; padding-bottom: 28px; }
#ablauf .abl-seal-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; margin-top: 8px; }
#ablauf .abl-seal-body > p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--muted); }
#ablauf .abl-seal { display: flex; align-items: center; gap: 28px; }
#ablauf .abl-seal-art { position: relative; width: 200px; height: 200px; flex: none; }
#ablauf .abl-seal-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#ablauf .abl-seal-art .s { stroke: url(#abl-edge); stroke-width: 1; filter: url(#abl-clay); }
#ablauf .abl-seal-art .f1 { fill: url(#abl-f1); }
#ablauf .abl-seal-art .f2 { fill: url(#abl-f2); }
#ablauf .abl-seal-art .f3 { fill: url(#abl-f3); }
#ablauf .abl-seal-art .ticks { fill: none; stroke: #141414; stroke-opacity: .16; stroke-width: 7; stroke-dasharray: 1.2 5.2; }
#ablauf .abl-seal-art .pool { fill: #C2F21C; opacity: .55; filter: url(#abl-soft); transition: opacity 1.2s var(--ease) .35s; }
#ablauf .abl-glass--seal { left: 37.5%; top: 37.5%; width: 25%; }
#ablauf .abl-seal-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; }
#ablauf .abl-ninety { display: block; font-family: 'WGB Archivo', sans-serif;--wgb-ff:'WGB Archivo', sans-serif; font-weight: 900; font-size: 128px; line-height: .82; letter-spacing: -0.05em; }
#ablauf .abl-seal-cap { display: block; max-width: 24ch; overflow-wrap: normal; hyphens: manual; font-family: 'WGB Roboto Mono', monospace;--wgb-ff:'WGB Roboto Mono', monospace; font-weight: 500; font-size: 11px; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

#ablauf .abl-cta { display: flex; justify-content: center; margin-top: 56px; }

/* ===== Formen für Leistungsseiten (gespraech, konzept, inhalte, technik, golive) ===== */
/* Feine Zeichen auf den Tonformen: Textzeilen, Rahmen, Häkchen, Anzeigen */
#ablauf .abl-art .abl-bb { fill: none; stroke: none; }
#ablauf .abl-art .abl-ink { fill: #141414; fill-opacity: .1; }
#ablauf .abl-art .abl-ink2 { fill: #141414; fill-opacity: .2; }
#ablauf .abl-art .abl-ink3 { fill: #141414; fill-opacity: .05; }
#ablauf .abl-art .abl-wire { fill: none; stroke: #141414; stroke-opacity: .2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ablauf .abl-art .abl-wire--faint { stroke-opacity: .1; }
#ablauf .abl-art .abl-dash { fill: none; stroke: #141414; stroke-opacity: .3; stroke-width: 1.4; stroke-dasharray: 4 4; }
#ablauf .abl-art .abl-box { fill: #FFFFFF; stroke: #141414; stroke-opacity: .16; stroke-width: 1.2; }
#ablauf .abl-art .abl-chk { fill: none; stroke: #141414; stroke-opacity: .55; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#ablauf .abl-art .abl-ok { fill: none; stroke: #2E3129; stroke-opacity: .72; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#ablauf .abl-art .abl-lime { fill: #C2F21C; }
#ablauf .abl-art .abl-dot2 { fill: #C2F21C; stroke: #FFFFFF; stroke-width: 1.5; }
#ablauf .abl-art .abl-lframe { fill: none; stroke: #C2F21C; stroke-width: 2.5; }
#ablauf .abl-art .abl-sw { stroke: #FFFFFF; stroke-width: 1.5; }
#ablauf .abl-art .abl-dark { fill: #2E3129; }
#ablauf .abl-art .abl-mid { fill: #B9BDB0; }
#ablauf .abl-art .abl-sel { fill: none; stroke: #141414; stroke-opacity: .28; stroke-width: 1.2; }
#ablauf .abl-art .abl-hnd { fill: #FFFFFF; stroke: #141414; stroke-opacity: .35; stroke-width: 1.2; }
#ablauf .abl-art .abl-arc { fill: none; stroke: #141414; stroke-opacity: .12; stroke-width: 6; stroke-linecap: round; }
#ablauf .abl-art .abl-arc--on { stroke: #C2F21C; stroke-opacity: 1; }
#ablauf .abl-art .abl-ndl { fill: none; stroke: #2E3129; stroke-width: 3; stroke-linecap: round; }
#ablauf .abl-art .abl-hub { fill: #2E3129; }
#ablauf .abl-art .pool.abl-pool--soft { opacity: .32; }
/* Tonstriche (Code-Klammern, Stift): Verlauf als Kontur, der Ton-Filter liegt auf der umgebenden Gruppe */
#ablauf .abl-art .abl-sk { fill: none; stroke: url(#abl-f1) #EEEFE9; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
#ablauf .abl-art .abl-sk--b { stroke: url(#abl-f3) #E3E5DD; }
#ablauf .abl-art .abl-skg { filter: url(#abl-clay); }
/* Zusatzmotive nur in breiten und vollen Karten ab 681 px, damit schmale Karten keine angeschnittenen Reste zeigen */
#ablauf .abl-art .abl-x { display: none; }
@media (min-width: 681px) {
  #ablauf .abl-card--wide .abl-art .abl-x, #ablauf .abl-card--full .abl-art .abl-x { display: inline; }
}
/* Einstieg der Details: einmalig, sobald die Karte sichtbar wird. --d ist die Verzögerung in Sekunden. */
#ablauf .abl-art .abl-mv { transform-box: fill-box; transition: opacity .8s var(--ease) calc(var(--d, 0) * 1s), transform 1.1s var(--ease) calc(var(--d, 0) * 1s), stroke-dashoffset 1.2s var(--ease) calc(var(--d, 0) * 1s); }
#ablauf .abl-art .abl-mv--grow { transform-origin: 0 50%; }
#ablauf .abl-art .abl-mv--pop { transform-origin: 50% 50%; }
#ablauf .abl-art .abl-mv--turn { transform-origin: 0 100%; }
#ablauf .abl-art .abl-mv--draw { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
#ablauf.abl-armed .abl-card:not(.is-live) .abl-mv--fade { opacity: 0; transform: translateY(8px); }
#ablauf.abl-armed .abl-card:not(.is-live) .abl-mv--grow { opacity: 0; transform: scaleX(.2); }
#ablauf.abl-armed .abl-card:not(.is-live) .abl-mv--pop { opacity: 0; transform: scale(.4); }
#ablauf.abl-armed .abl-card:not(.is-live) .abl-mv--turn { transform: rotate(-100deg); }
/* Versatz 1,5 statt 1: Dann liegt kein Strichende am Pfadanfang, und die runde Kappe zeichnet vorab keinen Punkt */
#ablauf.abl-armed .abl-card:not(.is-live) .abl-mv--draw { stroke-dashoffset: 1.5; }
/* Live-Schalter: Der Knopf steht zuerst blass links und gleitet beim Sichtbarwerden nach rechts */
#ablauf.abl-armed .abl-card:not(.is-live) .abl-glass.abl-glass--knob { opacity: .5; transform: translate(calc(var(--fx, -50) * var(--abl-u)), 0); }
@media (hover: hover) {
  #ablauf .abl-card:hover .abl-glass.abl-glass--knob { translate: 0 -2px; }
}

/* Tablet: zwei Spalten */
@media (max-width: 1023px) {
  #ablauf .abl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ablauf .abl-card--wide, #ablauf .abl-card--full { grid-column: 1 / -1; }
  #ablauf .abl-card { min-height: 400px; }
}
/* Handy: eine Spalte */
@media (max-width: 680px) {
  #ablauf { --abl-u: .9px; --abl-art-h: 180px; }
  #ablauf .abl-bento { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 44px; }
  #ablauf .abl-card { min-height: 0; padding: 24px 22px 0; }
  #ablauf .abl-art { margin: 20px -22px 0; }
  #ablauf .abl-card > .abl-art { margin-top: 20px; }
  #ablauf .abl-card h3 { font-size: 22px; }
  #ablauf .abl-card--seal { padding-bottom: 24px; }
  #ablauf .abl-seal-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #ablauf .abl-seal { gap: 18px; }
  #ablauf .abl-seal-art { width: 132px; height: 132px; }
  #ablauf .abl-ninety { font-size: 84px; }
  #ablauf .abl-cta { margin-top: 40px; }
  #ablauf .abl-cta .v3-btn { max-width: 100%; text-align: center; }
  #ablauf .abl-glow--a { width: 360px; margin-left: -180px; }
}
@media (prefers-reduced-motion: reduce) {
  #ablauf .abl-glass, #ablauf .abl-art .pool, #ablauf .abl-seal-art .pool { transition: none; }
  #ablauf .abl-art .abl-mv { transition: none; }
}