/* ABR-IT · Cinematic / Glassmorphism Enhancement Layer
   Wird auf allen Seiten zusätzlich geladen – verändert keine Struktur, nur Optik & Bewegung. */

/* ── Aurora-Hintergrund (cineastische Tiefe) ─────────────────────── */
body::before{
  content:"";position:fixed;inset:-20% -10% -10% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 38% at 18% 12%, oklch(54% 0.22 25 / 0.10) 0%, transparent 60%),
    radial-gradient(36% 34% at 86% 18%, oklch(54% 0.22 25 / 0.07) 0%, transparent 62%),
    radial-gradient(46% 42% at 70% 88%, oklch(54% 0.22 25 / 0.06) 0%, transparent 65%);
  filter:blur(8px);
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(-1.5%,-1%,0) scale(1.03)}
}
#root{position:relative;z-index:1}

/* fine film-grain / vignette for cinematic feel */
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 0%, transparent 60%, oklch(0% 0 0 / 0.35) 100%);
  mix-blend-mode:multiply;
}

/* ── Glassmorphism für Karten & Panels ───────────────────────────── */
.card, .svc-card, .guide-card, .faq-item, .why-card, .partner-card, .stat,
.loc-chip, .tech-chip{
  background:oklch(17% 0.012 0 / 0.55) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid oklch(100% 0 0 / 0.07) !important;
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.06) inset,
    0 18px 40px oklch(0% 0 0 / 0.45);
  transition:transform .45s cubic-bezier(.16,1,.3,1),
             box-shadow .45s cubic-bezier(.16,1,.3,1),
             border-color .45s ease, background .45s ease !important;
}

/* top edge highlight for glass cards */
.card, .svc-card, .guide-card, .why-card{position:relative;}
.card::after, .svc-card::after, .guide-card::after, .why-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, oklch(100% 0 0 / 0.06), transparent 36%);
}

/* richer hover: lift + glow (nur klickbare Karten) */
.card:hover, .svc-card:hover, .guide-card:hover{
  transform:translateY(-6px) scale(1.012) !important;
  border-color:oklch(54% 0.22 25 / 0.45) !important;
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.10) inset,
    0 0 0 1px oklch(54% 0.22 25 / 0.18),
    0 30px 60px oklch(0% 0 0 / 0.55),
    0 0 46px oklch(54% 0.22 25 / 0.22) !important;
}

/* illustration zoom inside guide cards */
.guide-card svg{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.guide-card:hover svg{transform:scale(1.08)}

/* ── Einheitliche Glass-Tiefe für statische Panels (abr-glass) ────── */
.abr-glass{
  background-color:oklch(17% 0.012 0 / 0.55) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 18px 40px oklch(0% 0 0 / 0.35), inset 0 1px 0 oklch(100% 0 0 / 0.05);
  position:relative;
  transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .45s, box-shadow .45s;
}
.abr-glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, oklch(100% 0 0 / 0.06), transparent 36%);
}
.abr-glass:hover{
  transform:translateY(-3px);
  border-color:oklch(54% 0.22 25 / 0.35) !important;
  box-shadow:0 24px 52px oklch(0% 0 0 / 0.42), 0 0 34px oklch(54% 0.22 25 / 0.10), inset 0 1px 0 oklch(100% 0 0 / 0.06);
}
@media (max-width:880px){
  .abr-glass{backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
}

/* ── Glassy Navigation ───────────────────────────────────────────── */
nav[style]{
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
}

/* ── Buttons: 3D-Tiefe wie Leistungskarten ───────────────── */
.btn-primary, .btn-amber, .om-3d, .abr-mcta,
.btn-ghost, .btn-secondary, .om-3d-ghost, .abr-mtel, .abr-mwa, .om-3d-wa{
  position:relative; overflow:hidden;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* gemeinsame Basis – wie Cookie-Buttons (flach & schlicht) */
.btn, .om-3d, .om-3d-ghost, .abr-mcta, .abr-mwa, .abr-mtel{
  border-radius:9px !important;
  transition:all .18s !important;
  letter-spacing:-.01em;
  will-change:transform;
}
.om-3d, .om-3d-ghost{white-space:nowrap}

/* ROTE Buttons = wie Sticky-Bar-Button (leicht erhaben) */
.btn-primary, .om-3d, .abr-mcta{
  background:linear-gradient(180deg,oklch(60% 0.22 25),oklch(47% 0.2 25)) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 6px 22px oklch(54% 0.22 25 / 0.45), 0 1px 0 oklch(100% 0 0 / 0.18) inset !important;
  text-shadow:none;
}
.btn-primary:hover, .om-3d:hover, .abr-mcta:hover{
  background:linear-gradient(180deg,oklch(63% 0.22 25),oklch(50% 0.2 25)) !important;
  box-shadow:0 0 44px oklch(54% 0.22 25 / 0.6), 0 10px 30px oklch(54% 0.22 25 / 0.55), 0 1px 0 oklch(100% 0 0 / 0.24) inset !important;
  transform:translateY(-2px);
}
.btn-primary:active, .om-3d:active, .abr-mcta:active{
  transform:translateY(0);
  box-shadow:0 4px 14px oklch(54% 0.22 25 / 0.4), 0 1px 0 oklch(100% 0 0 / 0.16) inset !important;
}

/* GRÜNER WhatsApp-Button im Mobil-Menü – flach */
.abr-mwa{
  background:oklch(60% 0.15 150) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 0 16px oklch(58% 0.15 150 / 0.4) !important;
}
.abr-mwa:hover{ background:oklch(52% 0.14 150) !important; box-shadow:0 0 28px oklch(58% 0.15 150 / 0.45) !important; transform:translateY(-1px); }
.abr-mwa:active{ transform:translateY(0) }

/* HELLE Buttons = leicht erhaben (wie Sticky-Stil, dunkel) */
.btn-ghost, .btn-secondary, .om-3d-ghost, .abr-mtel{
  background:linear-gradient(180deg, oklch(26% 0.014 0), oklch(20% 0.012 0)) !important;
  color:var(--fg) !important;
  border:1px solid var(--border-light) !important;
  box-shadow:0 6px 18px oklch(0% 0 0 / 0.4), 0 1px 0 oklch(100% 0 0 / 0.10) inset !important;
}
.btn-ghost:hover, .btn-secondary:hover, .om-3d-ghost:hover, .abr-mtel:hover{
  background:linear-gradient(180deg, oklch(30% 0.016 0), oklch(23% 0.013 0)) !important;
  border-color:var(--fg-subtle) !important;
  box-shadow:0 10px 26px oklch(0% 0 0 / 0.5), 0 1px 0 oklch(100% 0 0 / 0.14) inset !important;
  transform:translateY(-2px);
}
.btn-ghost:active, .btn-secondary:active, .om-3d-ghost:active, .abr-mtel:active{
  transform:translateY(0);
  box-shadow:0 4px 12px oklch(0% 0 0 / 0.4), 0 1px 0 oklch(100% 0 0 / 0.08) inset !important;
}

/* GRÜNER WhatsApp-Icon-Button im Header – leicht erhaben */
.om-3d-wa{
  background:linear-gradient(180deg, oklch(68% 0.16 152), oklch(56% 0.15 152)) !important;
  border:none !important;
  border-radius:9px !important;
  box-shadow:0 6px 18px oklch(58% 0.15 152 / 0.4), 0 1px 0 oklch(100% 0 0 / 0.2) inset !important;
  transition:all .18s !important;
}
.om-3d-wa:hover{
  background:linear-gradient(180deg, oklch(71% 0.16 152), oklch(59% 0.15 152)) !important;
  box-shadow:0 10px 26px oklch(58% 0.15 152 / 0.5), 0 1px 0 oklch(100% 0 0 / 0.26) inset !important;
  transform:translateY(-2px);
}
.om-3d-wa:active{ transform:translateY(0); box-shadow:0 4px 12px oklch(58% 0.15 152 / 0.4), 0 1px 0 oklch(100% 0 0 / 0.18) inset !important; }

/* ── Reveal: cineastisches Blur-/Scale-In ────────────────────────── */
.reveal{filter:blur(8px) saturate(.85);transform:translateY(34px) scale(.985);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease !important}
.reveal.visible{filter:none;transform:none}

/* section heads get a soft text glow on dark */
h1,h2{text-shadow:0 2px 30px oklch(0% 0 0 / 0.35)}

/* badges & pills glass */
.badge-red{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* gentle floating for hero glow orbs already animated; add a slow scale to service icons */
.svc-card > div:first-child > div, .why-card > div:first-child{
  transition:transform .45s cubic-bezier(.16,1,.3,1)
}
.svc-card:hover > div:first-child > div{transform:scale(1.08) rotate(-3deg)}

/* tilt container set by JS */
[data-tilt]{transform-style:preserve-3d;will-change:transform}

/* ── Performance & Accessibility ─────────────────────────────────── */
@media (max-width:880px){
  .card, .svc-card, .guide-card, .faq-item, .why-card, .partner-card, .stat{
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  body::before{animation-duration:40s}
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .reveal{filter:none;transform:none}
  .btn-primary::after,.btn-amber::after{display:none}
}

/* ── Premium-Finish: Selektion, Scrollbar, Fokus ─────────────────── */
::selection{background:oklch(54% 0.22 25 / 0.85);color:#fff}
html{scrollbar-color:oklch(30% 0.02 25) oklch(12% 0.01 0)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:oklch(12% 0.01 0)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,oklch(32% 0.05 25),oklch(24% 0.02 25));border-radius:8px;border:2px solid oklch(12% 0.01 0)}
::-webkit-scrollbar-thumb:hover{background:oklch(45% 0.15 25)}
a:focus-visible,button:focus-visible{outline:2px solid oklch(54% 0.22 25);outline-offset:3px;border-radius:4px}

/* ── Einsatzgebiete-Karte: Glow-Stil ── */
.leaflet-container{border-radius:18px;filter:saturate(0.85) contrast(1.05)}
.leaflet-marker-icon{filter:drop-shadow(0 0 8px oklch(54% 0.22 25 / 0.8))}
@keyframes abrMapPulse{0%,100%{filter:drop-shadow(0 0 5px oklch(54% 0.22 25 / 0.55))}50%{filter:drop-shadow(0 0 14px oklch(54% 0.22 25 / 0.95))}}
@media (prefers-reduced-motion:no-preference){.leaflet-marker-icon{animation:abrMapPulse 3s ease-in-out infinite}}

/* ── Page transitions: rein JS-gesteuert (siehe cinematic.js), kein CSS-Verstecken ── */

/* ── Hero spotlight (desktop) ── */
.abr-spot{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(460px circle at var(--sx,50%) var(--sy,40%), oklch(54% 0.22 25/0.09) 0%, oklch(54% 0.22 25/0.065) 22%, oklch(54% 0.22 25/0.038) 40%, oklch(54% 0.22 25/0.018) 56%, oklch(54% 0.22 25/0.007) 70%, oklch(54% 0.22 25/0.002) 82%, transparent 94%)}

/* ── Pulsierender Glow hinter Haupt-CTAs (Buchungslink) ── */
@keyframes abrCtaGlow{0%,100%{box-shadow:0 0 24px oklch(54% 0.22 25 / 0.35),0 8px 26px oklch(0% 0 0 / 0.5)}50%{box-shadow:0 0 44px oklch(54% 0.22 25 / 0.6),0 8px 26px oklch(0% 0 0 / 0.5)}}
@media (prefers-reduced-motion:no-preference){
  a[href*="zeeg.me"]{animation:abrCtaGlow 3.2s ease-in-out infinite}
  a[href*="zeeg.me"]:hover{animation:none}
}

/* ── Icon-Mikroanimation auf Leistungs-/Guide-Karten ── */
.card svg,.svc-card svg{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.card:hover > div:first-child svg,.svc-card:hover svg{transform:scale(1.14) rotate(-4deg)}

/* ── Bewertungs-Band (laufende Reviews) ── */
.abr-rev-mask{
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.abr-rev-row{overflow:hidden;padding:36px 0}
.abr-rev-track{display:flex;gap:22px;width:max-content;will-change:transform;animation:abrRevScroll 150s linear infinite}
.abr-rev-row:hover .abr-rev-track{animation-play-state:paused}
@keyframes abrRevScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 11px))}}
/* Premium-Karte (Variante A – Editorial) */
.abr-rev-card{
  background:linear-gradient(180deg, oklch(15% 0.013 0) 0%, oklch(11% 0.011 0) 100%);
  border:1px solid var(--border-light);
  box-shadow:0 1px 0 oklch(100% 0 0 / 0.05) inset, 0 18px 40px oklch(0% 0 0 / 0.5);
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.abr-rev-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg, oklch(100% 0 0 / 0.06), transparent 30%)}
.abr-rev-card:hover{border-color:var(--red) !important;transform:translateY(-4px);box-shadow:0 0 30px var(--red-glow), 0 18px 40px oklch(0% 0 0 / 0.55)}
.abr-rev-quote{position:absolute;top:14px;right:22px;font-family:Georgia,'Times New Roman',serif;font-size:88px;line-height:.7;color:oklch(54% 0.22 25 / 0.16);pointer-events:none;user-select:none}
.abr-rev-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:880px){
  .abr-rev-card{width:300px !important}
  .abr-rev-track{animation-duration:110s}
  .abr-rev-quote{font-size:74px}
}
@media(prefers-reduced-motion:reduce){
  /* Immer als durchlaufende Leiste (Kundenwunsch) — bei reduzierter Bewegung nur stark verlangsamt */
  .abr-rev-track{animation-duration:420s}
}

/* ── Sticky Mobile-CTA ── */
#abr-sticky-cta{display:none}
@media(max-width:880px){
  #abr-sticky-cta{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:9000;display:flex;gap:8px;align-items:center;
    padding:8px;border-radius:20px;
    background:linear-gradient(180deg, oklch(18% 0.015 0 / 0.92), oklch(12% 0.012 0 / 0.94));
    -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
    border:1px solid oklch(100% 0 0 / 0.12);
    box-shadow:0 1px 0 oklch(100% 0 0 / 0.08) inset, 0 18px 44px oklch(0% 0 0 / 0.65)}
  #abr-sticky-cta a{display:grid;place-items:center;
    border-radius:14px;font-family:var(--font-display,'Sora',sans-serif);font-weight:700;text-decoration:none;
    color:var(--fg,#f4f4f5);
    background:linear-gradient(180deg, oklch(26% 0.014 0), oklch(20% 0.012 0));
    border:1px solid oklch(100% 0 0 / 0.12);
    box-shadow:0 6px 18px oklch(0% 0 0 / 0.45), 0 1px 0 oklch(100% 0 0 / 0.14) inset;
    flex:0 0 auto;width:54px;height:54px;padding:0;line-height:0;font-size:0;transition:transform .18s, box-shadow .18s}
  #abr-sticky-cta a:active{transform:translateY(1px)}
  #abr-sticky-cta a svg{display:block}
  #abr-sticky-cta a.abr-sticky-wa{color:#fff;border:none;
    background:linear-gradient(180deg, oklch(68% 0.16 152), oklch(56% 0.15 152));
    box-shadow:0 6px 18px oklch(58% 0.15 152 / 0.42), 0 1px 0 oklch(100% 0 0 / 0.22) inset}
  #abr-sticky-cta a.abr-sticky-main{flex:1;width:auto;height:54px;font-size:14.5px;padding:0 16px;color:#fff;border:none;
    background:linear-gradient(180deg,oklch(60% 0.22 25),oklch(47% 0.2 25));
    box-shadow:0 6px 22px oklch(54% 0.22 25 / 0.45), 0 1px 0 oklch(100% 0 0 / 0.18) inset;animation:none;letter-spacing:0.01em}
  body{padding-bottom:90px}
  .proc-grid{grid-template-columns:1fr!important}
  .proc-line{display:none}

  /* Sektions-Überschriften auf Mobil: links als Default, mit Ausnahmen */
  main h2, main h3, main h4, main p, main .section-label{text-align:left!important}
  main .section-label{justify-content:flex-start!important}
  main .om-mob-left, main .om-mob-left *{text-align:left!important}
  main .om-mob-left .section-label{justify-content:flex-start!important}
  main .om-mob-center, main .om-mob-center *{text-align:center!important}
  main .om-mob-center .section-label{justify-content:center!important}
}

/* ════════════════════════════════════════════════════════════════
   RATGEBER · Diagramm- & Inhalts-Bausteine (shared, mobile-first)
   ════════════════════════════════════════════════════════════════ */
/* Diagramm-Karte (glassy) */
.abr-diagram{background:radial-gradient(120% 150% at 50% -15%, oklch(24% 0.025 25 / 0.55), oklch(15% 0.012 0 / 0.62) 58%)!important;-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border:1px solid oklch(100% 0 0 / 0.07)!important;border-radius:20px;box-shadow:0 1px 0 oklch(100% 0 0 / 0.06) inset,0 30px 60px -20px oklch(0% 0 0 / 0.7);padding:28px 22px;overflow:hidden}
.abr-diagram svg{display:block;margin:0 auto;width:100%;height:auto}
/* Diagramm-Einblendung: Elemente bauen sich gestaffelt auf, sobald .reveal sichtbar wird */
@media (prefers-reduced-motion: no-preference){
  .abr-diagram.visible svg > :not([class*="abr-"]){animation:abrDiagIn .8s cubic-bezier(.22,.9,.3,1) both}
  .abr-diagram.visible svg > :not([class*="abr-"]):nth-child(2){animation-delay:.08s}
  .abr-diagram.visible svg > :not([class*="abr-"]):nth-child(3){animation-delay:.16s}
  .abr-diagram.visible svg > :not([class*="abr-"]):nth-child(4){animation-delay:.24s}
  .abr-diagram.visible svg > :not([class*="abr-"]):nth-child(5){animation-delay:.32s}
  .abr-diagram.visible svg > :not([class*="abr-"]):nth-child(6){animation-delay:.40s}
  .abr-diagram.visible svg > :not([class*="abr-"]):nth-child(7){animation-delay:.48s}
  .abr-diagram.visible svg > :not([class*="abr-"]):nth-child(8){animation-delay:.56s}
  .abr-diagram.visible svg > :not([class*="abr-"]):nth-child(9){animation-delay:.64s}
  .abr-diagram.visible svg > :not([class*="abr-"]):nth-child(n+10){animation-delay:.72s}
  @keyframes abrDiagIn{
    from{opacity:0}
  }
}

/* nummerierte Schritte */
.abr-step{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border)}
.abr-step:last-child{border-bottom:none}
.abr-step-n{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--red-light);border:1px solid oklch(54% 0.22 25/.3);color:var(--red-text);font-family:Sora;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}

/* Fehler-/Check-Listen */
.abr-xlist{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.abr-xlist li{display:flex;gap:10px;align-items:flex-start;font-family:var(--font-body);font-size:15.5px;line-height:1.65;color:var(--fg-muted)}
.abr-xlist .x{color:var(--red);flex-shrink:0;margin-top:1px}
.abr-xlist .c{color:#27a567;flex-shrink:0;margin-top:1px}

/* ── Diagramm-Animationen (gated auf reduced-motion in den Seiten) ── */
@keyframes abrSignalMove{0%{transform:translateX(0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translateX(var(--abr-travel,522px));opacity:0}}
@keyframes abrFlowDash{to{stroke-dashoffset:-160}}
@keyframes abrCheckPop{0%,16%{opacity:.16;transform:scale(.7)}34%,80%{opacity:1;transform:scale(1)}100%{opacity:.16;transform:scale(.7)}}
@keyframes abrPulseRing{0%{transform:scale(.6);opacity:.0}30%{opacity:.55}100%{transform:scale(1.5);opacity:0}}
@keyframes abrFadeSeq{0%,12%{opacity:.18}30%,78%{opacity:1}100%{opacity:.18}}
@keyframes abrDrawLine{to{stroke-dashoffset:0}}
@keyframes abrFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes abrGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.abr-signal{opacity:0}
.abr-flow{opacity:0}
.abr-gate-check{opacity:1;transform-box:fill-box;transform-origin:center}
.abr-seq{opacity:1;transform-box:fill-box;transform-origin:center}
.abr-ring{opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .abr-signal{animation:abrSignalMove 5.4s linear infinite}
  .abr-flow{opacity:.6;animation:abrFlowDash 2.4s linear infinite}
  .abr-gate-check{opacity:.16;animation:abrCheckPop 5.4s ease-in-out infinite}
  .abr-gate-check.g1{animation-delay:.4s}.abr-gate-check.g2{animation-delay:1.2s}.abr-gate-check.g3{animation-delay:2s}.abr-gate-check.g4{animation-delay:2.8s}
  .abr-seq{opacity:.18;animation:abrFadeSeq 5s ease-in-out infinite}
  .abr-seq.s1{animation-delay:.2s}.abr-seq.s2{animation-delay:1s}.abr-seq.s3{animation-delay:1.8s}.abr-seq.s4{animation-delay:2.6s}.abr-seq.s5{animation-delay:3.4s}
  .abr-ring{animation:abrPulseRing 3s ease-out infinite}
  .abr-ring.r2{animation-delay:1s}.abr-ring.r3{animation-delay:2s}
  .abr-float{animation:abrFloatY 4s ease-in-out infinite}
  .abr-draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:abrDrawLine 2s ease forwards}
  .abr-draw.d2{animation-delay:.5s}
  .abr-bar{transform-box:fill-box;transform-origin:bottom;animation:abrGrowY .9s cubic-bezier(.16,1,.3,1) forwards;transform:scaleY(0)}
  .abr-bar.b2{animation-delay:.18s}.abr-bar.b3{animation-delay:.36s}.abr-bar.b4{animation-delay:.54s}
}

/* ── WOW-Layer: leuchtende Orbs, Energie-Beams, Partikel, Ripple ── */
@keyframes abrBeamDash{to{stroke-dashoffset:-200}}
@keyframes abrGlowPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes abrRingExp{0%{transform:scale(.5);opacity:0}25%{opacity:.6}100%{transform:scale(1.75);opacity:0}}
@keyframes abrChkPop{0%,12%{opacity:0;transform:scale(.5)}30%,84%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.abr-beam2{opacity:.55}
.abr-orbring{transform-box:fill-box;transform-origin:center;opacity:0}
.abr-chk2{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .abr-beam2{stroke-dasharray:18 14;opacity:.9;animation:abrBeamDash 1.4s linear infinite}
  .abr-orbring{animation:abrRingExp 2.6s ease-out infinite}
  .abr-orbring.r2{animation-delay:.8s}.abr-orbring.r3{animation-delay:1.6s}
  .abr-chk2{animation:abrChkPop 4s ease-in-out infinite}
  .abr-chk2.c1{animation-delay:.3s}.abr-chk2.c2{animation-delay:1.1s}.abr-chk2.c3{animation-delay:1.9s}.abr-chk2.c4{animation-delay:2.5s}
  .abr-gpulse{animation:abrGlowPulse 3s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  .abr-particle{display:none}
  .abr-orbring{display:none}
  .abr-chk2{opacity:1}
}
@media(max-width:880px){
  .abr-diagram{padding:18px 12px}
  .abr-step{text-align:left!important}
  .abr-xlist li{text-align:left!important}
}


/* ── Cookie-Consent (DSGVO/TTDSG) ───────────────────────────── */
.abr-cc{position:fixed;bottom:24px;right:24px;left:24px;max-width:540px;margin-left:auto;z-index:9999;background:linear-gradient(135deg,var(--surface),var(--bg-2));border:1px solid var(--border-light);border-radius:18px;padding:26px;box-shadow:0 24px 64px oklch(0% 0 0/.6),0 0 0 1px oklch(54% 0.22 25/.08);font-family:var(--font-body);transform:translateY(20px) scale(.98);opacity:0;transition:all .4s cubic-bezier(.16,1,.3,1);pointer-events:none}
.abr-cc.show{transform:none;opacity:1;pointer-events:auto}
.abr-cc-icon{width:40px;height:40px;border-radius:10px;background:var(--red-light);border:1px solid oklch(54% 0.22 25/.2);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.abr-cc h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--fg);margin-bottom:8px;letter-spacing:-.02em}
.abr-cc p{font-size:13.5px;line-height:1.62;color:var(--fg-muted);margin-bottom:16px}
.abr-cc p a{color:var(--red-text);text-decoration:none;border-bottom:1px solid oklch(54% 0.22 25/.3)}
.abr-cc-cats{display:none;flex-direction:column;gap:2px;margin-bottom:16px;border-top:1px solid var(--border);padding-top:8px}
.abr-cc.open .abr-cc-cats{display:flex}
.abr-cc-cat{display:flex;align-items:flex-start;gap:12px;padding:10px 0}
.abr-cc-cat .t{flex:1}
.abr-cc-cat .t b{display:block;font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--fg);margin-bottom:2px}
.abr-cc-cat .t span{font-size:12px;line-height:1.5;color:var(--fg-subtle)}
.abr-cc-sw{position:relative;width:40px;height:23px;border-radius:12px;background:var(--border-light);border:none;cursor:pointer;flex-shrink:0;transition:background .2s;margin-top:2px;padding:0}
.abr-cc-sw::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .2s}
.abr-cc-sw.on{background:var(--red)}
.abr-cc-sw.on::after{transform:translateX(17px)}
.abr-cc-sw.lock{background:var(--red);opacity:.45;cursor:not-allowed}
.abr-cc-sw.lock::after{transform:translateX(17px)}
.abr-cc-btns{display:flex;gap:9px;flex-wrap:wrap}
.abr-cc-btn{flex:1;min-width:120px;padding:11px 16px;border-radius:9px;cursor:pointer;font-family:var(--font-body);font-size:13.5px;font-weight:600;transition:all .18s;letter-spacing:-.01em;background:var(--surface);color:var(--fg);border:1px solid var(--border-light)}
.abr-cc-btn:hover{border-color:var(--fg-subtle);background:var(--bg-2)}
.abr-cc-link{display:block;background:none;border:none;color:var(--fg-subtle);font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;margin-top:12px;text-decoration:underline;text-underline-offset:3px}
.abr-cc-link:hover{color:var(--fg)}
@media(max-width:600px){.abr-cc{left:12px;right:12px;bottom:12px;padding:20px;max-height:calc(100dvh - 24px);overflow-y:auto}}

/* Karten-Klickschranke (datensparsam) */
.abr-map-shield{position:absolute;inset:0;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:linear-gradient(135deg,var(--surface),var(--bg-2));border-radius:inherit;cursor:default}
.abr-map-shield p{font-family:var(--font-body);font-size:13.5px;line-height:1.6;color:var(--fg-muted);max-width:360px;margin:0}
.abr-map-shield p a{color:var(--red-text);text-decoration:underline;text-underline-offset:2px}
.abr-map-shield .ms-ico{width:46px;height:46px;border-radius:12px;background:var(--red-light);border:1px solid oklch(54% 0.22 25/.22);display:flex;align-items:center;justify-content:center}
.abr-map-load{padding:12px 24px;border-radius:9px;border:1px solid var(--border-light);background:var(--surface);color:var(--fg);font-family:var(--font-body);font-weight:600;font-size:13.5px;cursor:pointer;transition:all .18s}
.abr-map-load:hover{border-color:var(--red);background:var(--bg-2)}


/* ── Mobiler Header: statisch statt fixiert (Freigabe Athos 07/2026) ─────────
   Unten schwebt bereits die Sticky-Kontaktleiste (#abr-sticky-cta); der
   Header soll auf Mobil mitscrollen. Betrifft NUR die Haupt-Nav (#root > nav),
   nicht Breadcrumbs, nicht das Slide-in-Panel (.abr-mpanel haengt am body). */
@media (max-width:880px){
  #root > nav{ position:absolute !important; }
}