/* =====================================================================
   Ad Agentur — Mobile App Navigation
   Ported from the approved interactive mockup.
   - Shows only at <= 1024px (tablet/phone). Desktop is untouched.
   - Uses transform/opacity/height only for animation (compositor-friendly).
   - Respects safe-area insets and prefers-reduced-motion.
   Icons: Font Awesome 4.7 (fas/fa-) + theme "Happy Icons" (hm hm-) —
   authors pick icons in the WP menu CSS-class field (see guide).
   ===================================================================== */

:root{
  /* Brand core */
  --aa-blue:#265E9A; --aa-blue-ink:#0C447C; --aa-blue-sub:#C2DCF6;
  --aa-blue-tint:#EEF4FA;
  /* Semantic accents — deliberately narrow:
     green = "live / available right now" (status dot only)
     star  = rating gold (trust line only) */
  --aa-green:#8ec047; --aa-star:#E8A93C;
  --aa-ink:#33434C; --aa-muted:#5F5E5A; --aa-line:#ECEBE7;
  --aa-bg:#F7F7F7; --aa-white:#fff;
  --aa-radius-tile:16px; --aa-radius-pill:50px;
  --aa-ease:cubic-bezier(.16,1,.3,1); --aa-ease-in:cubic-bezier(.4,0,1,1);
  --aa-bar-h:84px;
  --aa-safe-b:env(safe-area-inset-bottom,0px);
}

/* Hide entire component on desktop */
@media (min-width:1025px){ #aa-mnav-root{ display:none !important; } }

/* The fixed .aa-bar sits on top of normal document flow, so without this the
   last ~84px of every page (footer content, last section) renders underneath
   it. Reserve that space at the same breakpoint the bar itself appears at. */
@media (max-width:1024px){
  body{ padding-bottom:calc(var(--aa-bar-h) + var(--aa-safe-b)); }
}

/* Root wrapper is fixed and does not affect page layout (no CLS) */
#aa-mnav-root{ font-family:"Ad Agentur Montserrat","Montserrat",sans-serif; }
#aa-mnav-root *{ box-sizing:border-box; }

/* ---- RESET BOUNDARY ----
   Themes (Kadence) and page builders (Elementor) ship blanket
   `button {}` / `a {}` rules that bleed into this component (e.g. a blue
   button background making the back-chevron invisible). Neutralise every
   interactive element here, then rebuild only what we style below.

   CRITICAL: the reset must carry ZERO specificity so every component class
   wins. `#aa-mnav-root :where(button, a)` still resolves to specificity
   (1,0,0) — the `#aa-mnav-root` ID sits outside the :where() — which still
   outranks single-class component rules like `.aa-morph` (0,1,0) and flattens
   them to display:inline/position:static. Wrapping `#aa-mnav-root` itself in
   :where() too drops the whole selector to (0,0,0) so component classes win. */
:where(#aa-mnav-root) :where(button, a){
  all:unset;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  font-family:inherit;
}
:where(#aa-mnav-root) :where(button){ background:transparent; }
/* all:unset resolves `appearance` to its initial value (auto), not none — it
   does NOT strip native OS widget chrome. Kadence explicitly ships
   `button{ appearance:button }` (specificity 0,0,1), which beats the
   zero-specificity :where() reset above, so iOS Safari kept rendering every
   <button>'s native rounded-rect press highlight on top of our own circular
   backgrounds (the darker-grey "square with rounded corners" behind
   .aa-x/.aa-back-shared on tap). This needs real specificity, not :where(),
   to win against that. */
#aa-mnav-root button,
#aa-mnav-root a{ appearance:none; -webkit-appearance:none; }
/* Same reasoning as appearance above, for the tap-highlight flash instead of
   the resting appearance: the :where() copy at the top only wins if nothing
   else touches this property with real specificity. Setting it again here
   with an ID guarantees it regardless of what any theme/plugin does. */
#aa-mnav-root button,
#aa-mnav-root a{ -webkit-tap-highlight-color:transparent; }
/* Restore accessible focus (all:unset removed it) */
#aa-mnav-root button:focus-visible,
#aa-mnav-root a:focus-visible{ outline:3px solid var(--aa-blue); outline-offset:2px; border-radius:8px; }

/* ---- Bundled SVG icons (no font dependency) ---- */
#aa-mnav-root .aa-svg{ width:1em; height:1em; display:block; flex-shrink:0; }
/* icon containers set the em-size; the svg inherits it */
.aa-tile .aa-ic .aa-svg{ width:21px; height:21px; }
.aa-srow .aa-ic .aa-svg{ width:18px; height:18px; }
.aa-chev .aa-svg{ width:15px; height:15px; }
.aa-x .aa-svg{ width:16px; height:16px; }
.aa-btn .aa-svg{ width:19px; height:19px; }
.aa-star .aa-svg{ width:13px; height:13px; }
.aa-m-icon .aa-svg{ width:23px; height:23px; }
.aa-open .aa-m-icon .aa-svg{ width:18px; height:18px; transition:width .34s var(--aa-ease),height .34s var(--aa-ease); }
.aa-m-arrow .aa-svg{ width:18px; height:18px; }

/* ---- Scrim ---- */
.aa-scrim{
  position:fixed; left:0; right:0; top:0;
  bottom:calc(var(--aa-bar-h) + var(--aa-safe-b));
  background:rgba(20,30,45,.32); opacity:0; pointer-events:none;
  transition:opacity .28s var(--aa-ease); z-index:2147483000;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.aa-open .aa-scrim{ opacity:1; pointer-events:auto; }

/* ---- Sheet (height driven by content, capped) ---- */
.aa-sheet{
  position:fixed; left:0; right:0;
  bottom:calc(var(--aa-bar-h) + var(--aa-safe-b));
  background:var(--aa-white); border-radius:26px 26px 0 0;
  z-index:2147483001; box-shadow:0 -12px 40px rgba(0,0,0,.14);
  display:flex; flex-direction:column;
  transform:translateY(calc(102% + var(--aa-bar-h)));
  transition:transform .34s var(--aa-ease);
  max-height:calc(100dvh - var(--aa-bar-h) - var(--aa-safe-b) - 20px);
}
.aa-open .aa-sheet{ transform:translateY(0); }
/* Touch target is taller (20px) than the visible bar (4px) — the visible
   bar is a centred ::after so the drag handle stays easy to grab without
   looking oversized. touch-action:none hands the gesture fully to JS. */
.aa-grip{ width:100%; height:20px; position:relative; touch-action:none; }
.aa-grip::after{ content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:38px; height:4px; background:#d8dade; border-radius:3px; }

/* min-height:44px reserves the .aa-x/.aa-back-shared circles' full footprint
   inside this row — without it the 44px circles overflowed the ~32px row and
   the next section (.aa-viewport, opaque, later in paint order) clipped their
   bottom edge. */
.aa-sheet-head{ display:flex; align-items:center; justify-content:center; padding:4px 16px 8px; position:relative; min-height:44px; }
/* Trust line — colours set explicitly so no theme link colour leaks in.
   Text is ink (passes AA); the star keeps the amber/gold rating convention. */
.aa-trust{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--aa-ink); text-decoration:none; }
.aa-trust b{ color:var(--aa-ink); font-weight:700; }
.aa-trust .aa-star{ color:var(--aa-star); }
/* #aa-mnav-root prefix (not just .aa-x) is required here, in every state:
   Kadence ships a global `button:hover, button:focus, button:active{ color:
   var(--global-palette-btn-hover); background:var(--global-palette-btn-bg-
   hover) }` rule (specificity 0,1,1) — the site's blue accent. A bare
   `.aa-x:active{ background:... }` (0,1,1) ties with it and Kadence wins the
   tie since it loads after this stylesheet; a bare `.aa-x{ color:... }`
   (0,1,0) loses outright. This is the same class of leak as .aa-srow/.aa-
   legal a — mobile-only, so tap alone (:active) is enough to trigger it,
   which is why it looked like an intermittent, ring-less flash of blue.
   Prefixing with the ID (1,1,0 / 1,1,1) beats Kadence's rule unconditionally
   in every state, close/back stay passive grey always. */
#aa-mnav-root .aa-x{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--aa-bg); display:flex; align-items:center; justify-content:center; color:var(--aa-ink); transition:background .15s; }
/* This component is mobile-only — no keyboard-focus affordance to preserve
   here, so every state is forced flat with !important rather than relying on
   specificity per state. Outline/box-shadow killed everywhere (not just
   :focus-visible) since Safari can paint a native focus/active ring on plain
   :focus too, and that ring follows the element's rectangular layout box, not
   its 50% border-radius — which is what read as a "square with rounded
   corners" behind the circle. */
#aa-mnav-root .aa-x,
#aa-mnav-root .aa-x:hover,
#aa-mnav-root .aa-x:focus,
#aa-mnav-root .aa-x:focus-visible,
#aa-mnav-root .aa-x:active{
  color:var(--aa-ink) !important;
  outline:none !important;
  box-shadow:none !important;
}
#aa-mnav-root .aa-x:hover,
#aa-mnav-root .aa-x:focus,
#aa-mnav-root .aa-x:active{ background:#e8e8e5 !important; }
/* Shared back control for drill-down panels — mirrors .aa-x exactly (same
   grey circle, same ink colour, same active state) so both read as equally
   passive chrome controls. Neither is ever brand blue — blue is reserved for
   the CTA morph per the colour rules. Hidden unless a detail panel is open. */
#aa-mnav-root .aa-back-shared{ display:none; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--aa-bg); align-items:center; justify-content:center; color:var(--aa-ink); transition:background .15s; }
#aa-mnav-root .aa-back-shared,
#aa-mnav-root .aa-back-shared:hover,
#aa-mnav-root .aa-back-shared:focus,
#aa-mnav-root .aa-back-shared:focus-visible,
#aa-mnav-root .aa-back-shared:active{
  color:var(--aa-ink) !important;
  outline:none !important;
  box-shadow:none !important;
}
#aa-mnav-root .aa-back-shared:hover,
#aa-mnav-root .aa-back-shared:focus,
#aa-mnav-root .aa-back-shared:active{ background:#e8e8e5 !important; }
.aa-back-shared .aa-svg{ width:16px; height:16px; }
/* #aa-mnav-root prefix needed here too, now that the base .aa-back-shared
   rule above also carries the ID (both need it — an ID selector always beats
   a non-ID one regardless of how many classes/pseudo-classes it has, so
   without this the base rule's display:none would permanently win). */
#aa-mnav-root .aa-sheet:has(.aa-detail.aa-open-detail) .aa-back-shared{ display:flex; }

/* ---- Viewport / rail / panels ---- */
.aa-viewport{ position:relative; overflow:hidden; min-height:0; height:320px; transition:height .32s var(--aa-ease); }
.aa-rail{ display:flex; align-items:flex-start; width:200%; transition:transform .34s var(--aa-ease); touch-action:pan-y; }
.aa-rail.aa-dragging{ transition:none; }
.aa-panel{ width:50%; padding:6px 18px 4px; display:flex; flex-direction:column; gap:9px; max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* reassurance strip */
.aa-badges{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-x; overscroll-behavior-x:contain; }
.aa-badges::-webkit-scrollbar{ display:none; }
.aa-badge{ flex-shrink:0; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:500; color:var(--aa-blue-ink); background:var(--aa-blue-tint); padding:5px 11px; border-radius:20px; white-space:nowrap; }
.aa-badge-ic{ display:inline-flex; }
.aa-badge-ic .aa-svg{ width:11px; height:11px; }

/* tiles */
.aa-tile{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--aa-radius-tile); background:var(--aa-bg); border:none; width:100%; text-align:left; cursor:pointer; font-family:inherit; text-decoration:none; color:var(--aa-ink); transition:transform .1s var(--aa-ease),background .15s; }
.aa-tile:active{ transform:scale(.975); }
.aa-tile.aa-hero{ background:var(--aa-blue); }
.aa-tile .aa-ic{ font-size:21px; flex-shrink:0; width:24px; text-align:center; }
.aa-tile.aa-hero .aa-ic{ color:var(--aa-blue-sub); }
.aa-tile:not(.aa-hero) .aa-ic{ color:var(--aa-blue); }
.aa-tile .aa-tx{ flex:1; min-width:0; }
.aa-tile .aa-t1{ display:block; font-size:14.5px; font-weight:600; line-height:1.2; }
.aa-tile.aa-hero .aa-t1{ color:#fff; }
.aa-tile:not(.aa-hero) .aa-t1{ color:var(--aa-blue); }

/* subheading — one static, or several auto-animated */
.aa-subs{ display:block; height:15px; overflow:hidden; position:relative; margin-top:3px; }
.aa-subs-track{ position:absolute; left:0; top:0; width:100%; }
.aa-subs-track > span{ display:block; height:15px; font-size:11px; line-height:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aa-tile.aa-hero .aa-subs-track > span{ color:var(--aa-blue-sub); }
.aa-tile:not(.aa-hero) .aa-subs-track > span{ color:var(--aa-muted); }
.aa-subs-track.aa-animated{ animation:aaSubFlip 9s infinite; }
@keyframes aaSubFlip{ 0%,26%{transform:translateY(0)} 33%,59%{transform:translateY(-15px)} 66%,92%{transform:translateY(-30px)} 100%{transform:translateY(0)} }
.aa-tile .aa-chev{ font-size:15px; flex-shrink:0; }
.aa-tile.aa-hero .aa-chev{ color:var(--aa-blue-sub); }
.aa-tile:not(.aa-hero) .aa-chev{ color:#b9c2cc; }

/* secondary rows
   #aa-mnav-root prefix (not just .aa-srow) is required here: this plugin loads
   before the theme/Elementor, and Elementor's kit CSS ships `.elementor-kit-N a`
   (specificity 0,1,1) which otherwise outranks a bare `.aa-srow` (0,1,0) and
   recolours every link row with the sitewide link-green — exactly the kind of
   leak the RESET BOUNDARY above exists to prevent. */
#aa-mnav-root .aa-srow{ display:flex; align-items:center; gap:11px; padding:11px 6px; border:none; background:none; width:100%; text-align:left; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:500; color:var(--aa-ink); text-decoration:none; border-bottom:.5px solid var(--aa-line); }
.aa-srow:last-child{ border-bottom:none; }
.aa-srow .aa-ic{ font-size:18px; color:var(--aa-blue); width:22px; text-align:center; flex-shrink:0; }
.aa-srow .aa-thumb{ width:26px; height:26px; border-radius:6px; flex-shrink:0; background-size:cover; background-position:center; background-color:var(--aa-blue-tint); }
.aa-srow .aa-chev{ margin-left:auto; color:#b9c2cc; font-size:14px; }
.aa-srow:active{ background:var(--aa-bg); }
.aa-beliebt{ font-size:9px; font-weight:600; color:var(--aa-blue-ink); background:var(--aa-blue-tint); padding:2px 7px; border-radius:8px; margin-left:auto; }

/* legal row — centered, one line where it fits
   Same leak as .aa-srow above: needs #aa-mnav-root to beat `.elementor-kit-N a`. */
.aa-legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px; padding:14px 6px 4px; }
#aa-mnav-root .aa-legal a{ font-size:11px; color:#9aa2ab; text-decoration:none; white-space:nowrap; }
#aa-mnav-root .aa-legal a:active{ color:var(--aa-blue); }

/* dots */
.aa-dots{ display:flex; justify-content:center; gap:6px; padding:8px 0 4px; }
.aa-dot{ width:6px; height:6px; border-radius:50%; background:#d5d8dc; transition:all .25s; border:none; padding:0; cursor:pointer; }
.aa-dot.aa-on{ background:var(--aa-blue); width:18px; border-radius:3px; }

/* ---- Detail panel (drill-down) ----
   No header of its own: back/trust-line/close all live in the persistent
   .aa-sheet-head row (see .aa-back-shared above), so this is just the
   sliding body. */
.aa-detail{ position:absolute; inset:0; background:var(--aa-white); transform:translateX(101%); transition:transform .3s var(--aa-ease),visibility 0s linear .3s; z-index:20; display:flex; flex-direction:column; visibility:hidden; pointer-events:none; }
.aa-detail.aa-open-detail{ transform:translateX(0); visibility:visible; pointer-events:auto; transition:transform .3s var(--aa-ease); }
.aa-detail-body{ overflow-y:auto; padding:10px 18px 4px; flex:1; -webkit-overflow-scrolling:touch; }

/* ---- Bottom bar: morphs circle <-> pill ---- */
.aa-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:2147483002;
  height:calc(var(--aa-bar-h) + var(--aa-safe-b));
  padding:0 22px var(--aa-safe-b);
  background:var(--aa-white); border-top:.5px solid var(--aa-line);
}
.aa-side{ position:absolute; top:0; height:var(--aa-bar-h); display:flex; align-items:center; transition:opacity .18s ease,transform .24s var(--aa-ease); }
.aa-side.aa-left{ left:24px; }
.aa-side.aa-right{ right:24px; }
.aa-open .aa-side{ opacity:0; transform:scale(.8); pointer-events:none; }
.aa-btn{ width:44px; height:44px; border-radius:50%; background:var(--aa-bg); display:flex; align-items:center; justify-content:center; color:var(--aa-ink); transition:transform .1s,background .15s; }
.aa-btn:active{ transform:scale(.94); background:#e8e8e5; }
.aa-btn.aa-book{ color:var(--aa-blue); }

/* ---- THE morphing element — OPTION B ----
   Closed: a compact labelled pill (icon + short verb, e.g. "Anrufen"), raised.
   Open:   expands to the full-width CTA (status line + number/label + arrow).
   The closed label lives in .aa-m-short; the open text in .aa-m-tx. */
.aa-morph{
  position:absolute; top:50%; left:50%;
  height:52px; margin-top:-6px;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:9px; padding:0 16px 0 7px;
  border-radius:50px; background:var(--aa-blue); text-decoration:none;
  box-shadow:0 8px 20px rgba(38,94,154,.4);
  white-space:nowrap;
  transition:left .34s var(--aa-ease),right .34s var(--aa-ease),width .34s var(--aa-ease),
             padding .34s var(--aa-ease),margin-top .34s var(--aa-ease),box-shadow .34s var(--aa-ease);
  will-change:width;
}
/* Closed: pill hugs its content, centred (width:auto via inline flex) */
/* Open: stretch edge-to-edge inside the bar */
.aa-open .aa-morph{ left:18px; right:18px; transform:translateY(-50%); margin-top:0; padding:0 16px 0 8px; box-shadow:0 8px 22px rgba(38,94,154,.32); }

.aa-morph .aa-m-icon{ width:38px; height:38px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; position:relative; }
.aa-morph .aa-m-icon .aa-svg{ width:19px; height:19px; }

/* status dot on the icon avatar's corner (consistent closed & open) */
.aa-morph .aa-m-dot{ position:absolute; top:-1px; right:-1px; width:12px; height:12px; border-radius:50%; background:var(--aa-green); border:2px solid var(--aa-blue); box-sizing:border-box; pointer-events:none; }
.aa-morph.aa-hours-open .aa-m-dot{ animation:aaPulse 2s infinite; }
.aa-morph:not(.aa-hours-open) .aa-m-dot{ display:none; }   /* no dot outside business hours */
@keyframes aaPulse{ 0%{box-shadow:0 0 0 0 rgba(142,192,71,.7)} 70%{box-shadow:0 0 0 6px rgba(142,192,71,0)} 100%{box-shadow:0 0 0 0 rgba(142,192,71,0)} }

/* Closed label (short verb) — visible only when collapsed */
.aa-m-short{ font-size:14.5px; font-weight:600; color:#fff; letter-spacing:.2px; }
.aa-open .aa-m-short{ display:none; }

/* Open text block — hidden when collapsed */
.aa-morph .aa-m-tx{ display:none; flex:1; min-width:0; overflow:hidden; }
.aa-open .aa-morph .aa-m-tx{ display:block; }
.aa-morph .aa-m-status{ display:block; font-size:9.5px; font-weight:500; color:var(--aa-blue-sub); text-transform:uppercase; letter-spacing:.3px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; }
.aa-morph .aa-m-main{ display:block; font-size:14.5px; font-weight:600; color:#fff; line-height:1.25; margin-top:1px; overflow:hidden; text-overflow:ellipsis; }
.aa-morph .aa-m-arrow{ flex-shrink:0; color:#fff; display:none; }
.aa-open .aa-morph .aa-m-arrow{ display:block; }
.aa-morph .aa-m-arrow .aa-svg{ width:18px; height:18px; }
.aa-morph:active{ filter:brightness(.96); }

/* Focus visibility for keyboard users */
#aa-mnav-root :focus-visible{ outline:3px solid var(--aa-blue); outline-offset:2px; border-radius:8px; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  #aa-mnav-root *{ animation:none !important; transition-duration:.01ms !important; }
}