/* WG Bausteine: abschluss. Style-Block aus v3/parts/abschluss.html unverändert übernommen. */
/* ===== ABSCHLUSS: große helle Lichtkarte, danach kleiner zweiter Schritt und Footer ===== */
#abschluss.v3-sec { padding-bottom: 64px; }
#abschluss .abs-stage { position: relative; }
#abschluss .abs-card { position: relative; isolation: isolate; overflow: hidden; min-height: 520px; display: flex; align-items: center; justify-content: center; border-radius: 36px; background: #FAFBF4; border: 1px solid var(--line); box-shadow: var(--shadow), 0 1px 0 rgba(255, 255, 255, .9) inset; transform-origin: 50% 100%; transform: translateY(calc((1 - var(--p, 1)) * 40px)) scale(calc(.955 + .045 * var(--p, 1))); }

/* Licht: mehrere weiche Flecken in Lime und Creme */
#abschluss .abs-blobs { position: absolute; inset: 0; z-index: -3; opacity: calc(.55 + .45 * var(--p, 1)); }
#abschluss .abs-blob { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; animation: abs-drift-a 22s var(--ease) infinite alternate; animation-play-state: paused; }
#abschluss .abs-card.is-vis .abs-blob { animation-play-state: running; }
#abschluss .abs-blob--1 { width: 46%; height: 78%; left: -8%; top: -26%; background: radial-gradient(closest-side, rgba(194, 242, 28, .72), rgba(194, 242, 28, 0)); }
#abschluss .abs-blob--2 { width: 52%; height: 86%; right: -12%; top: -6%; background: radial-gradient(closest-side, #F1F3D9, rgba(241, 243, 217, 0)); animation-name: abs-drift-b; animation-duration: 26s; }
#abschluss .abs-blob--3 { width: 40%; height: 70%; right: 6%; bottom: -34%; background: radial-gradient(closest-side, rgba(216, 247, 92, .78), rgba(216, 247, 92, 0)); animation-duration: 19s; animation-direction: alternate-reverse; }
#abschluss .abs-blob--4 { width: 38%; height: 64%; left: 14%; bottom: -30%; background: radial-gradient(closest-side, #EEF1CF, rgba(238, 241, 207, 0)); animation-name: abs-drift-b; animation-duration: 24s; animation-direction: alternate-reverse; }
#abschluss .abs-blob--5 { width: 30%; height: 50%; left: 35%; top: 25%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); animation: none; }
@keyframes abs-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.08); } }
@keyframes abs-drift-b { from { transform: translate3d(0, 0, 0) scale(1.04); } to { transform: translate3d(-7%, -5%, 0) scale(.96); } }

/* Material: feines Raster und Körnung in der Karte */
#abschluss .abs-grid { position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; background-position: center center; -webkit-mask-image: radial-gradient(62% 72% at 50% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(62% 72% at 50% 50%, #000 20%, transparent 80%); }
#abschluss .abs-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .04; mix-blend-mode: multiply; background-size: 180px 180px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Inhalt */
#abschluss .abs-content { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; max-width: 820px; padding: 72px 32px; }
#abschluss .abs-logo { display: block; width: auto; height: 36px; }
#abschluss .abs-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 4px 0 0; padding: 0; list-style: none; }
#abschluss .abs-checks li { display: inline-flex; align-items: center; gap: 9px; font-family: 'WGB Roboto', sans-serif;--wgb-ff:'WGB Roboto', sans-serif; font-weight: 500; font-size: 15px; color: var(--ink-2); }
#abschluss .abs-check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(20, 23, 12, .06) inset, 0 0 16px var(--glow); }
#abschluss .abs-check svg { width: 13px; height: 13px; fill: none; stroke: var(--lime-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#abschluss .abs-card h2 { margin: 6px 0 0; max-width: 17em; font-family: 'WGB Archivo', sans-serif;--wgb-ff:'WGB Archivo', sans-serif; font-weight: 800; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
#abschluss .abs-text { margin: 0; max-width: 34em; font-family: 'WGB Roboto', sans-serif;--wgb-ff:'WGB Roboto', sans-serif; font-size: 18px; line-height: 1.6; color: var(--muted); }
#abschluss .abs-content .v3-btn { margin-top: 8px; }
#abschluss .abs-call { margin: -6px 0 0; font-family: 'WGB Roboto', sans-serif;--wgb-ff:'WGB Roboto', sans-serif; font-size: 15px; color: var(--muted); }
#abschluss .abs-call a { color: var(--ink); font-weight: 500; text-decoration: none; background-image: linear-gradient(var(--lime), var(--lime)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; white-space: nowrap; }
#abschluss .abs-call a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* Zweiter, kleiner Schritt außerhalb der Karte */
#abschluss .abs-next { display: flex; justify-content: center; margin: 44px 0 0; }
#abschluss .abs-next a { display: inline-flex; align-items: center; gap: 18px; max-width: 560px; padding: 10px 18px 10px 10px; border-radius: 18px; color: var(--muted); text-decoration: none; transition: background-color .4s var(--ease); }
#abschluss .abs-next img { display: block; flex: none; width: auto; height: 80px; filter: drop-shadow(0 10px 16px rgba(20, 20, 20, .12)); transition: transform .5s var(--ease); }
#abschluss .abs-next span { font-family: 'WGB Roboto', sans-serif;--wgb-ff:'WGB Roboto', sans-serif; font-size: 15px; line-height: 1.55; }
#abschluss .abs-next em { font-style: normal; color: var(--ink); font-weight: 500; background-image: linear-gradient(var(--lime), var(--lime)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; }
#abschluss .abs-next a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  #abschluss .abs-next a:hover { background: rgba(255, 255, 255, .6); }
  #abschluss .abs-next a:hover img { transform: translateY(-3px) rotate(-2deg); }
}

@media (max-width: 680px) {
  #abschluss.v3-sec { padding-bottom: 40px; }
  #abschluss .abs-card { min-height: 0; border-radius: 28px; }
  #abschluss .abs-content { gap: 20px; padding: 52px 20px; }
  #abschluss .abs-logo { height: 30px; }
  #abschluss .abs-checks { flex-direction: column; align-items: flex-start; gap: 10px; }
  #abschluss .abs-text { font-size: 17px; }
  #abschluss .abs-content .v3-btn { max-width: 100%; }
  #abschluss .abs-next { margin-top: 32px; }
  #abschluss .abs-next a { align-items: center; gap: 14px; padding: 8px; }
  #abschluss .abs-next img { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  #abschluss .abs-card { transform: none; }
  #abschluss .abs-blobs { opacity: 1; }
  #abschluss .abs-blob { animation: none; }
  #abschluss .abs-next a, #abschluss .abs-next img { transition: none; }
}

/* Footer */
#footer { position: relative; border-top: 1px solid var(--line); padding: 32px 0 44px; font-family: 'WGB Roboto', sans-serif;--wgb-ff:'WGB Roboto', sans-serif; font-size: 14px; line-height: 1.6; color: var(--muted); }
#footer .ftr-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
#footer p { margin: 0; }
#footer strong { color: var(--ink); font-weight: 500; }
#footer .ftr-contact { display: flex; flex-wrap: wrap; gap: 4px 20px; }
#footer .ftr-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
#footer a { color: var(--muted); text-decoration: none; transition: color .3s var(--ease); }
#footer a:hover { color: var(--ink); }
#footer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
/* Seitenübersicht aus dem Menü: Spalten über der Adresszeile. Die Links sind mit Innenabstand mindestens 28 px hoch,
   damit sie auf dem Handy gut antippbar bleiben. */
#footer .ftr-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 32px; padding: 4px 0 28px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
#footer .ftr-map__h { margin: 0 0 8px; font: 500 11px/1.35 'WGB Roboto Mono', ui-monospace, monospace; --wgb-ff: 'WGB Roboto Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
#footer .ftr-map__h a { color: inherit; }
#footer .ftr-map ul { list-style: none; margin: 0; padding: 0; }
#footer .ftr-map li { margin: 0; padding: 0; }
#footer .ftr-map li a { display: inline-block; padding: 3px 0; }
#footer .ftr-map a[aria-current="page"] { color: var(--ink); }
@media (max-width: 680px) {
  #footer .ftr-row { flex-direction: column; align-items: flex-start; }
  #footer .ftr-map { gap: 20px 24px; }
}
/* Schwebende Knöpfe unten links (Einstellungsleiste von WG FX, Cookie-Knopf von CCM19) liegen unter 821 px Breite
   bis etwa 126 px über dem unteren Rand. Am Seitenende lässt sich nicht weiterscrollen, deshalb bekommt der Footer
   dort so viel Luft, dass Impressum, Datenschutz und E-Mail frei und antippbar bleiben. */
@media (max-width: 820px) {
  body:has(.wgfx-sidebar, .ccm-settings-summoner) #footer { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
}