/* =========================================================
   PAG/STPO-GURU V9.3 — production finish layer
   Loaded last on every page on purpose: deterministic contrast,
   navigation containment, desktop-scannable QR codes and motion polish.
   ========================================================= */

/* 1) Legal critical banner: all copy fully white on navy. */
body:not(.home) .legal-critical-banner,
body:not(.home) .legal-critical-banner b,
body:not(.home) .legal-critical-banner strong,
body:not(.home) .legal-critical-banner p,
body:not(.home) .legal-critical-banner li,
body:not(.home) .legal-critical-banner a{
  color:#fff!important;
}
body:not(.home) .legal-critical-banner>span{
  color:#fff!important;
  background:rgba(224,225,221,.10)!important;
  border:1px solid rgba(224,225,221,.14)!important;
}

/* 2) Impressum end-card heading: black on the light card. */
body:not(.home) .legal-end-card>div>b,
body:not(.home) .legal-end-card>div>strong{
  color:#000!important;
}

/* 3) Dienstleistungen CTA: every requested text role white. */
body:not(.home) .cta,
body:not(.home) .cta .eyebrow,
body:not(.home) .cta h2,
body:not(.home) .cta p{
  color:#fff!important;
  opacity:1!important;
}
body:not(.home) .cta .eyebrow:before{background:#fff!important}

/* 4) Training chips: black copy on white chips. */
body:not(.home) .training-points>div b,
body:not(.home) .training-points>div small{
  color:#000!important;
  opacity:1!important;
}

/* 5) Homepage glass filters: selected = dark text on light surface, always. */
.home .pg7-explorer .pg7-filter-group button.active,
.home .pg7-explorer .pg7-filter-group button[aria-pressed="true"]{
  color:#0D1B2A!important;
  background:#E0E1DD!important;
  text-shadow:none!important;
  box-shadow:0 10px 28px rgba(0,0,0,.26),inset 0 0 0 1px rgba(13,27,42,.10)!important;
}
.home .pg7-explorer .pg7-filter-group button.active:hover,
.home .pg7-explorer .pg7-filter-group button[aria-pressed="true"]:hover{
  color:#0D1B2A!important;
  background:#fff!important;
}

/* 6) Desktop header: use the full viewport safely and wrap before clipping. */
.final-site-nav{overflow:visible!important}
.final-site-nav-inner{
  width:min(1600px,calc(100% - 24px))!important;
  max-width:1600px!important;
  overflow:visible!important;
  padding-inline:4px!important;
}
@media (min-width:1251px){
  .final-site-nav-inner{flex-wrap:nowrap!important;justify-content:center!important;gap:3px!important}
  .final-site-nav a{font-size:.75rem!important;padding-inline:9px!important;min-width:0!important}
}
@media (min-width:821px) and (max-width:1250px){
  :root{--final-header-nav:88px!important;--final-header-total:156px!important}
  .final-site-nav{height:var(--final-header-nav)!important}
  .final-site-nav-inner{
    height:100%!important;display:flex!important;flex-wrap:wrap!important;
    align-content:center!important;justify-content:center!important;
    gap:4px 5px!important;padding:7px 4px!important;
  }
  .final-site-nav a{min-height:32px!important;font-size:.73rem!important;padding:0 9px!important}
  .hero{padding-top:calc(var(--final-header-total) + 45px)!important}
  .inner-hero,.pg2-inner-hero,.inner-hero-app,.privacy-hero-final{padding-top:calc(var(--final-header-total) + 38px)!important}
}

/* Desktop QR codes: large enough to scan from a normal monitor with an iPhone.
   White quiet-zone is part of the visual container even if the source PNG is tight. */
@media (min-width:821px){
  .pg7-final-qr{
    grid-template-columns:170px!important;
    justify-items:center!important;text-align:center!important;
    gap:12px!important;padding:16px!important;right:0!important;bottom:7%!important;
    min-width:202px!important;border-radius:24px!important;
  }
  .pg7-final-qr img{
    width:170px!important;height:170px!important;object-fit:contain!important;
    padding:10px!important;background:#fff!important;border-radius:16px!important;
    box-shadow:0 12px 32px rgba(0,0,0,.22)!important;
  }
  .pg7-final-qr b{font-size:.86rem!important}.pg7-final-qr small{font-size:.73rem!important}

  .appstore-card{grid-template-columns:minmax(0,1fr) 220px!important;gap:42px!important}
  .appstore-qr-card{width:220px!important;justify-self:end!important;padding:14px!important;border-radius:26px!important}
  .appstore-qr-card img{width:192px!important;height:192px!important;object-fit:contain!important;padding:8px!important;background:#fff!important;border-radius:15px!important}
  .appstore-qr-card b{font-size:.88rem!important}.appstore-qr-card small{font-size:.72rem!important}

  .mini-qr{gap:14px!important;padding:12px 16px 12px 12px!important;border-radius:22px!important}
  .mini-qr img{width:150px!important;height:150px!important;object-fit:contain!important;padding:8px!important;background:#fff!important;border-radius:15px!important}
  .mini-qr span{font-size:.86rem!important;line-height:1.35!important;max-width:128px!important}
}
@media (min-width:821px) and (max-width:1050px){
  .pg7-final-qr{grid-template-columns:145px!important;min-width:175px!important}
  .pg7-final-qr img{width:145px!important;height:145px!important}
  .appstore-card{grid-template-columns:minmax(0,1fr) 190px!important}
  .appstore-qr-card{width:190px!important}.appstore-qr-card img{width:162px!important;height:162px!important}
  .mini-qr img{width:132px!important;height:132px!important}
}

/* Stronger but controlled interactive depth across the entire site. */
.v93-tilt-target{
  --v93-rx:0deg;--v93-ry:0deg;--v93-lift:0px;
  transform:perspective(1100px) rotateX(var(--v93-rx)) rotateY(var(--v93-ry)) translateY(var(--v93-lift))!important;
  transform-style:preserve-3d;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease!important;
  will-change:transform;
}
.v93-tilt-target:hover{--v93-lift:-7px;box-shadow:0 28px 78px rgba(13,27,42,.14)!important}
.v93-stage-target{
  --v93-rx:0deg;--v93-ry:0deg;
  transform:perspective(1500px) rotateX(var(--v93-rx)) rotateY(var(--v93-ry));
  transform-style:preserve-3d;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease!important;
  will-change:transform;
}
.v93-stage-target:hover{box-shadow:0 34px 96px rgba(13,27,42,.17)!important}

/* Scroll parallax uses the independent CSS translate property so existing phone
   rotations/transforms remain untouched. */
.v93-scroll-layer{translate:0 var(--v93-scroll-y,0px);will-change:translate;transition:translate .08s linear}
.home .pg7 [data-pg8-depth]{
  translate:var(--pg8-x,0px) calc(var(--pg8-y,0px) + var(--v93-scroll-y,0px))!important;
}

/* Richer directional reveals — still subtle enough for reading-heavy pages. */
.reveal.v93-reveal-left{transform:translate3d(-30px,22px,0) scale(.988);filter:blur(6px)}
.reveal.v93-reveal-right{transform:translate3d(30px,22px,0) scale(.988);filter:blur(6px)}
.reveal.v93-reveal-up{transform:translate3d(0,34px,0) scale(.985);filter:blur(6px)}
.reveal.v93-reveal-left.visible,.reveal.v93-reveal-right.visible,.reveal.v93-reveal-up.visible{transform:none;filter:none}

/* More responsive hover feedback for primary navigation/filter/product controls. */
.final-site-nav a,.quick-jump a,.pg7-filter-group button,.pg8-gallery-nav button{
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s,color .22s,border-color .22s,box-shadow .22s!important;
}
@media (hover:hover) and (pointer:fine){
  .final-site-nav a:hover{transform:translateY(-2px) scale(1.018)!important}
  .quick-jump a:hover{transform:translateY(-2px) scale(1.02)!important}
  .pg7-filter-group button:hover{transform:translateY(-2px)!important}
  .pg8-gallery-nav button:hover{transform:translateY(-3px)!important}
  .pg7-final-qr:hover,.appstore-qr-card:hover,.mini-qr:hover{transform:translateY(-6px) scale(1.015)!important;box-shadow:0 28px 80px rgba(0,0,0,.24)!important}
}

/* Make the large homepage visual stages respond more strongly without becoming
   click-like. */
.home .pg8-gallery-stage,.home .pg7-service-stage,.home .pg7-transfer-stage,.home .pg7-final-visual{
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease!important;
}

@media (hover:none),(pointer:coarse){
  .v93-tilt-target,.v93-stage-target{transform:none!important}
  .home .pg7 [data-pg8-depth]{translate:none!important}
}
@media (prefers-reduced-motion:reduce){
  .v93-tilt-target,.v93-stage-target{transform:none!important;transition:none!important}
  .v93-scroll-layer{translate:none!important;transition:none!important}
  .home .pg7 [data-pg8-depth]{translate:none!important}
  .reveal.v93-reveal-left,.reveal.v93-reveal-right,.reveal.v93-reveal-up{transform:none!important;filter:none!important}
}


/* =========================================================
   V9.3 final visual corrections
   ========================================================= */

/* Feature atlas: individual cards instead of divider lines. This also removes
   the old nth-child border geometry that could flash during reveal/tilt. */
.home .pg7-feature-atlas .pg7-atlas-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  border:0!important;
}
.home .pg7-feature-atlas .pg7-atlas-item,
.home .pg7-feature-atlas .pg7-atlas-item:nth-child(odd),
.home .pg7-feature-atlas .pg7-atlas-item:nth-child(even){
  position:relative;
  min-height:118px;
  padding:24px 24px!important;
  border:1px solid rgba(65,90,119,.20)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.34)!important;
  box-shadow:0 12px 38px rgba(13,27,42,.055)!important;
  overflow:hidden;
}
.home .pg7-feature-atlas .pg7-atlas-item::after{
  content:"";position:absolute;inset:-40% auto auto -12%;width:180px;height:180px;
  border-radius:50%;background:radial-gradient(circle,rgba(119,141,169,.16),transparent 70%);
  opacity:0;transition:opacity .28s ease;pointer-events:none;
}
.home .pg7-feature-atlas .pg7-atlas-item:hover::after{opacity:1}
.home .pg7-feature-atlas .pg7-atlas-item>span{
  border-radius:15px!important;background:rgba(119,141,169,.12)!important;
  border-color:rgba(65,90,119,.16)!important;color:#415A77!important;
}
@media(max-width:700px){
  .home .pg7-feature-atlas .pg7-atlas-grid{grid-template-columns:1fr!important;gap:11px!important}
  .home .pg7-feature-atlas .pg7-atlas-item{min-height:0;padding:20px!important;border-radius:20px!important}
}

/* Hero: give the copy a wider protected lane and keep callout 01 inside the
   visual stage. It can no longer sit over the final letters of "Polizeiwissen". */
@media(min-width:901px){
  .home .pg7-hero>.container.pg7-hero-shell{
    width:min(1380px,calc(100% - 52px))!important;max-width:1380px!important;
    grid-template-columns:minmax(610px,1.08fr) minmax(500px,.92fr)!important;
    gap:54px!important;
  }
  .home .pg7-hero-copy{position:relative;z-index:12;min-width:0!important}
  .home .pg7-hero h1{font-size:clamp(4rem,6.9vw,7.15rem)!important;max-width:760px!important}
  .home .pg8-hero-stage{z-index:3;min-width:0}
  .home .pg8-stage-callout.callout-a{left:11%!important;top:112px!important}
  .home .pg8-stage-callout.callout-b{right:2%!important;top:54px!important}
}
@media(min-width:901px) and (max-width:1180px){
  .home .pg7-hero>.container.pg7-hero-shell{
    width:min(100% - 38px,1120px)!important;
    grid-template-columns:minmax(520px,1.05fr) minmax(390px,.95fr)!important;
    gap:32px!important;
  }
  .home .pg7-hero h1{font-size:clamp(4rem,7vw,5.6rem)!important}
  .home .pg8-stage-callout.callout-a{left:18%!important;top:124px!important}
  .home .pg8-stage-callout.callout-b{right:0!important;top:68px!important}
}

/* Resource icon geometry: SVG box and glyph are both truly centered. */
body:not(.home) .resource-card{align-items:center!important}
body:not(.home) .resource-icon{
  display:grid!important;place-items:center!important;align-self:center!important;
  line-height:0!important;padding:0!important;
}
body:not(.home) .resource-icon svg,
body:not(.home) .resource-icon .app-symbol{
  display:block!important;width:26px!important;height:26px!important;
  margin:0!important;position:static!important;transform:none!important;
}
@media(max-width:760px){
  body:not(.home) .resource-icon svg,body:not(.home) .resource-icon .app-symbol{width:24px!important;height:24px!important}
}

/* Consent: accept and reject remain equally easy to reach on the first layer. */
.cookie-actions-main .cookie-btn-primary,.cookie-actions-main .cookie-btn-secondary{
  min-height:48px!important;font-weight:850!important
}
.cookie-actions-main .cookie-btn-secondary{
  background:#E0E1DD!important;color:#0D1B2A!important;border-color:#E0E1DD!important
}
.cookie-actions-main .cookie-btn-primary{
  background:#778DA9!important;color:#0D1B2A!important;border-color:#778DA9!important
}

/* V9.3 hero breakpoint hardening: avoid any minimum-column overflow between
   tablet and wide desktop while keeping the callouts inside the product stage. */
@media (min-width:901px) and (max-width:1100px){
  .home .pg7-hero>.container.pg7-hero-shell{
    width:min(100% - 38px,1040px)!important;
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .home .pg7-hero-copy{max-width:820px!important}
  .home .pg7-hero h1{font-size:clamp(4rem,8vw,5.8rem)!important;max-width:760px!important}
  .home .pg8-hero-stage{width:min(100%,720px)!important;margin-inline:auto!important}
  .home .pg8-stage-callout.callout-a{left:5%!important;top:118px!important}
  .home .pg8-stage-callout.callout-b{right:3%!important;top:64px!important}
}
@media (min-width:1101px) and (max-width:1250px){
  .home .pg7-hero>.container.pg7-hero-shell{
    width:min(100% - 46px,1200px)!important;
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;
    gap:30px!important;
  }
  .home .pg7-hero h1{font-size:clamp(4.3rem,6.9vw,6rem)!important;max-width:700px!important}
  .home .pg8-stage-callout.callout-a{left:8%!important;top:122px!important}
  .home .pg8-stage-callout.callout-b{right:1%!important;top:60px!important}
}
@media (min-width:1251px){
  .home .pg7-hero>.container.pg7-hero-shell{
    grid-template-columns:minmax(0,1.08fr) minmax(470px,.92fr)!important;
  }
}


/* ================================================================
   V9.4 — mobile-first opening scene + final product-image refresh
   Mobile gets its own art-directed first impression instead of a
   squeezed desktop phone stack. No interaction is required to read it.
   ================================================================ */
.pg94-mobile-intro{display:none}

@media(max-width:700px){
  .home .pg7-hero{padding-top:calc(var(--final-header-total,70px) + 24px)!important}
  .home .pg7-hero>.container.pg7-hero-shell{display:block!important;width:min(100% - 24px,560px)!important;max-width:560px!important}
  .home .pg7-hero-copy{max-width:none!important}
  .home .pg7-kicker{margin-bottom:15px!important}
  .home .pg7-hero h1{font-size:clamp(3.08rem,14vw,4.3rem)!important;line-height:.84!important;letter-spacing:-.065em!important;max-width:100%!important}
  .home .pg7-hero-lead{font-size:.96rem!important;line-height:1.56!important;margin-top:18px!important}
  .home .pg7-hero-actions{margin-top:20px!important;gap:9px!important}
  .home .pg8-hero-stage{display:none!important}

  .pg94-mobile-intro{
    display:block;position:relative;height:332px;margin:25px 0 18px;border-radius:29px;overflow:hidden;isolation:isolate;
    border:1px solid rgba(224,225,221,.14);
    background:
      radial-gradient(circle at 50% 47%,rgba(119,141,169,.24),transparent 36%),
      radial-gradient(circle at 8% 90%,rgba(65,90,119,.18),transparent 38%),
      linear-gradient(145deg,#1B263B 0%,#0D1B2A 76%);
    box-shadow:0 28px 75px rgba(0,0,0,.28),inset 0 1px 0 rgba(224,225,221,.06)
  }
  .pg94-mobile-grid{position:absolute;inset:0;z-index:0;opacity:.42;background-image:linear-gradient(rgba(224,225,221,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(224,225,221,.055) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
  .pg94-mobile-intro:before{content:"";position:absolute;z-index:1;inset:-40% -30%;background:linear-gradient(112deg,transparent 43%,rgba(224,225,221,.075) 49%,transparent 55%);transform:translateX(-34%);pointer-events:none}
  .pg94-mobile-intro:after{content:"§";position:absolute;z-index:0;right:-7px;top:20px;font-family:Georgia,serif;font-size:11rem;line-height:1;color:rgba(224,225,221,.035);pointer-events:none}
  .pg94-mobile-topline{position:absolute;z-index:9;left:13px;right:13px;top:12px;display:flex;justify-content:space-between;align-items:center;font-size:.55rem;font-weight:900;letter-spacing:.13em;color:rgba(224,225,221,.82)}
  .pg94-mobile-topline span{display:flex;align-items:center;gap:6px}.pg94-mobile-topline i{width:6px;height:6px;border-radius:50%;background:#E0E1DD;box-shadow:0 0 0 4px rgba(224,225,221,.07)}
  .pg94-mobile-topline small{font:inherit;color:rgba(224,225,221,.6)}
  .pg94-mobile-orbit{position:absolute;z-index:1;left:50%;top:51%;border:1px solid rgba(119,141,169,.18);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
  .pg94-mobile-orbit.orbit-one{width:252px;height:252px}.pg94-mobile-orbit.orbit-two{width:190px;height:190px;border-style:dashed;opacity:.82}
  .pg94-mobile-card{position:absolute;z-index:3;margin:0;overflow:hidden;background:#0D1B2A;border:1px solid rgba(224,225,221,.16);box-shadow:0 20px 55px rgba(0,0,0,.34);will-change:translate,filter;transform-origin:50% 82%}
  .pg94-mobile-card img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 0}
  .pg94-mobile-card-main{z-index:6;width:148px;height:286px;left:50%;top:35px;transform:translateX(-50%) rotate(-.7deg);translate:0 var(--pg94-scroll-y,0px);border-radius:27px;border-width:3px;box-shadow:0 25px 72px rgba(0,0,0,.46),0 0 0 1px rgba(224,225,221,.08)}
  .pg94-mobile-card-left{width:109px;height:222px;left:-15px;top:77px;transform:rotate(-8deg);translate:0 var(--pg94-scroll-y,0px);border-radius:20px;opacity:.84;filter:saturate(.96)}
  .pg94-mobile-card-right{width:109px;height:222px;right:-15px;top:73px;transform:rotate(8deg);translate:0 var(--pg94-scroll-y,0px);border-radius:20px;opacity:.84;filter:saturate(.96)}
  .pg94-mobile-status{position:absolute;z-index:10;left:10px;right:10px;bottom:9px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(224,225,221,.12);border-radius:13px;background:rgba(13,27,42,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:rgba(224,225,221,.74)}
  .pg94-mobile-status span,.pg94-mobile-status b{font-size:.46rem;line-height:1;letter-spacing:.1em;white-space:nowrap}.pg94-mobile-status b{color:#E0E1DD;text-align:center}.pg94-mobile-status span:last-child{text-align:right}
  .home .pg7-proofline{margin-top:18px!important}
}

@media(max-width:360px){
  .home .pg7-hero>.container.pg7-hero-shell{width:min(100% - 20px,520px)!important}
  .home .pg7-hero h1{font-size:clamp(2.9rem,14.4vw,3.55rem)!important}
  .pg94-mobile-intro{height:306px;border-radius:25px}
  .pg94-mobile-card-main{width:136px;height:263px;top:34px;border-radius:24px}
  .pg94-mobile-card-left,.pg94-mobile-card-right{width:96px;height:203px;top:72px}
  .pg94-mobile-card-left{left:-13px}.pg94-mobile-card-right{right:-13px}
  .pg94-mobile-status span{display:none}.pg94-mobile-status{grid-template-columns:1fr;justify-items:center}
}

@media(max-width:700px) and (prefers-reduced-motion:no-preference){
  .pg94-mobile-intro{animation:pg94-surface-in .7s cubic-bezier(.18,.8,.22,1) both}
  .pg94-mobile-card-main{animation:pg94-card-rise .84s .12s cubic-bezier(.18,.82,.2,1) both}
  .pg94-mobile-card-left{animation:pg94-card-side .76s .22s cubic-bezier(.18,.82,.2,1) both}
  .pg94-mobile-card-right{animation:pg94-card-side .76s .3s cubic-bezier(.18,.82,.2,1) both}
  .pg94-mobile-card-main img{animation:pg94-main-breathe 6.2s 1.05s ease-in-out infinite alternate}
  .pg94-mobile-card-left img{animation:pg94-side-breathe 7s 1.2s ease-in-out infinite alternate}
  .pg94-mobile-card-right img{animation:pg94-side-breathe 7.4s 1.35s ease-in-out infinite alternate-reverse}
  .pg94-mobile-intro:before{animation:pg94-scan 5.2s 1.1s ease-in-out infinite}
  .pg94-mobile-orbit.orbit-two{animation:pg94-orbit-spin 18s linear infinite}
}
@keyframes pg94-surface-in{from{opacity:0;translate:0 18px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes pg94-card-rise{from{opacity:0;scale:.955;filter:blur(5px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes pg94-card-side{from{opacity:0;scale:.94;filter:blur(4px)}to{opacity:.84;scale:1;filter:blur(0) saturate(.96)}}
@keyframes pg94-main-breathe{from{scale:1}to{scale:1.012}}
@keyframes pg94-side-breathe{from{scale:1.006}to{scale:1.022}}
@keyframes pg94-scan{0%,24%{transform:translateX(-42%)}64%,100%{transform:translateX(42%)}}
@keyframes pg94-orbit-spin{to{rotate:360deg}}

/* V10 — Explorer-only stability pass.
   Scope is intentionally limited to #explorer: no site-wide layout, palette or motion changes. */
@media (min-width: 901px) {
  .home #explorer .pg7-filterbar {
    /* Lower resting point than V9.4 while keeping the existing sticky interaction. */
    top: clamp(132px, 18vh, 172px);

    /* Sticky + backdrop-filter + reveal transforms can shimmer/jitter in Safari.
       Keep the same RGB surface and visual hierarchy, but make the sticky layer
       compositor-stable and remove the expensive live backdrop sample. */
    background: rgba(27, 38, 59, .94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* The sticky control itself must never participate in the generic reveal
     translateY animation. It appears once in its final coordinate system and
     therefore cannot jump/retrigger while entering sticky mode. */
  .home #explorer .pg7-filterbar.pg7-reveal,
  .home #explorer .pg7-filterbar.pg7-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  }
}

@media (max-width: 900px) {
  /* Preserve V9.4 mobile behavior: normal document flow, no sticky simulation. */
  .home #explorer .pg7-filterbar {
    top: auto;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}