:root{ color-scheme: light dark; }

/* Frosted header */
header.width-before-scroll-bar{
  background: hsl(var(--color-background-01) / 0.82) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* WP Admin Bar: push fixed header + mobile panel down, and spacer too */
body.admin-bar header.width-before-scroll-bar{
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}
body.admin-bar #mobileSearchPanel{
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}
body.admin-bar .pt-safe.pb-safe > .h-\[72px\]{
  height: calc(72px + var(--wp-admin--admin-bar--height, 32px)) !important;
}

/* Mobile: desktop search hidden */
@media (max-width: 767px){ #desktopSearchWrap{ display:none !important; } }

/* Mobile search overlay */
#mobileSearchBackdrop{
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9990 !important;
}
#mobileSearchBackdrop.is-open{ display:block !important; }

/* Panel */
#mobileSearchPanel{
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  overflow:hidden;
  z-index: 10000 !important;
}
#mobileSearchPanel .panel-inner{
  padding-top: calc(72px + env(safe-area-inset-top) + 6px) !important;
}

/* Covers: full image + minimal rounding + inner shadow */
.demo-cover{
  position:relative;
  border-radius: 10px !important;
  overflow:hidden !important;
  background: transparent !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    inset 0 10px 24px rgba(0,0,0,.07),
    0 10px 30px rgba(0,0,0,.10);
}

/* When search is open: prevent background scrolling and ensure nothing can sit above the overlay */
html.search-open,
body.search-open{
  overflow: hidden !important;
  height: 100% !important;
}
body.search-open .demo-cover{ z-index: 0 !important; }
.demo-cover img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit: contain !important;
  background: transparent !important;
}
/* Subtle gloss */
.demo-cover::after{
  content:"";
  position:absolute;
  inset:-45% -25% auto -25%;
  height:130%;
  transform: rotate(18deg);
  background: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity:.35;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* Tile hover */
section[aria-label="Prospekter"] > a.group{
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
  will-change: transform;
}
@media (min-width:1024px){
  section[aria-label="Prospekter"] > a.group:hover{
    transform: translateY(-4px) perspective(1100px) rotateX(1.1deg) rotateY(-2deg);
    box-shadow: 0 26px 70px rgba(0,0,0,.22);
  }
}
section[aria-label="Prospekter"] > a.group:active{ transform: scale(.985); }

/* Bottom nav: remove active underline/indicator */
.z-bottom-nav a[aria-current="page"]::after{ display:none !important; content:none !important; }

/* Desktop left rail layout */
@media (min-width:1024px){
  .z-bottom-nav{ display:none !important; }
  #mainContentWithRail{ display:grid !important; grid-template-columns: 88px 1fr; gap: 16px; padding-left: 16px; padding-right: 16px; }
  #desktopLeftRail{ position: sticky !important; top: calc(72px + env(safe-area-inset-top) + 16px) !important; margin-left: 8px; }
  body, #app, .min-h-lvh, .pb-safe-4, #mainContentWithRail{ overflow: visible !important; }
}
#desktopLeftRail a[data-active="true"]{
  background: hsl(var(--color-base-03)) !important;
  color: hsl(var(--color-primary-500)) !important;
}

/* Bottom nav: active icon/label in primary */
.z-bottom-nav a[aria-current="page"]{
  color: hsl(var(--color-primary-500));
}

/* Ensure bottom nav shows on smaller screens (sidebar hidden) */
@media (max-width:1023px){
  .z-bottom-nav{ display:block !important; }
}

/* ---------------------------------------------------------
   Light mode should use the theme defaults
   (We only override colors in dark mode further below)
--------------------------------------------------------- */
html:not(.dark):not([data-theme="dark"]) a,
html:not(.dark):not([data-theme="dark"]) a:hover,
html:not(.dark):not([data-theme="dark"]) button:hover{
  color: inherit;
}
html:not(.dark):not([data-theme="dark"]) header button:hover{
  border-color: inherit !important;
}

/* ---------------------------------------------------------
   Search icon (loupe) stays pink in BOTH themes
--------------------------------------------------------- */
#desktopSearchWrap form[role="search"] span.text-base-06,
#mobileSearchPanel form[role="search"] span.text-base-06{
  color: #f477af !important; /* uses currentColor in SVG */
}

/* ---------------------------------------------------------
   Dark mode: global link color + active icon color
--------------------------------------------------------- */
:is(.dark, [data-theme="dark"]) a{ color: #fbb46e; }
:is(.dark, [data-theme="dark"]) a:hover{ color: #fbb46e; opacity: .88; }

/* Active icons/labels (instead of the default blue) */
:is(.dark, [data-theme="dark"]) .z-bottom-nav a[aria-current="page"],
:is(.dark, [data-theme="dark"]) #desktopLeftRail a[data-active="true"]{
  color: #11bac7 !important;
}

/* Sidebar (left rail) links are warm instead of blue */
:is(.dark, [data-theme="dark"]) #desktopLeftRail a{ color: #fbb46e !important; }

/* ---------------------------------------------------------
   Header icon buttons: warm icon color + thicker border
--------------------------------------------------------- */
:is(.dark, [data-theme="dark"]) header .z-2 button{
  color: #fbb46e !important;
  border-width: 2px !important;
}
:is(.dark, [data-theme="dark"]) header .z-2 button:hover,
:is(.dark, [data-theme="dark"]) header .z-2 button:focus-visible{
  border-color: #11bac7 !important;
}

/* Back-to-top: always right, blue on hover (exact button feel) */
#backToTop{
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: calc(env(safe-area-inset-right) + 16px) !important;
  bottom: calc(env(safe-area-inset-bottom) + 88px) !important;
  inset-inline-end: calc(env(safe-area-inset-right) + 16px) !important;
  inset-inline-start: auto !important;

  /* Hidden by default; JS toggles visibility */
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);

  transition:
    opacity .18s ease,
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}
#backToTop.btt-visible{
  display: inline-flex !important;
}
#backToTop.btt-in{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
#backToTop:hover{
  background: hsl(var(--color-primary-500)) !important;
  border-color: hsl(var(--color-primary-500)) !important;
  color: white !important;
}
#backToTop:hover svg{ color: white !important; }

/* Desktop/Tablet search focus overlay (keep search visible) */
body.desktop-search-open #mobileSearchBackdrop{
  display:block !important;
  background: rgba(0,0,0,.65);
  /* start below header + wp admin bar if present */
  top: calc(72px + var(--wp-adminbar-h, 0px));
}
body.desktop-search-open header{ z-index: 80 !important; }
body.desktop-search-open #desktopSearchWrap{ position:relative; z-index: 81 !important; }

/* Prospekt card: clearer "Öffnen" CTA + peel corner */
.prospekt-card{ position:relative; }
.prospekt-card .open-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:650;
  color: hsl(var(--color-primary-500));
}


/* Prospekt card action icon (curved arrow) – matches button design */
.prospekt-card{ position: relative; }
.prospekt-card .card-action{
  position:absolute;
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 9999px;
  border: 2px solid hsl(var(--color-base-03));
  background: hsl(var(--color-base-01));
  color: hsl(var(--color-base-06));
  box-shadow: 0 1px 2px hsl(var(--color-foreground-01) / .10);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  pointer-events:none; /* card is the link */
}
.prospekt-card .card-action svg{ width: 22px; height: 22px; stroke-width: 2.6; }

:root.dark .prospekt-card .card-action{
  background: hsl(var(--color-base-02));
  box-shadow: none;
}
.prospekt-card:hover .card-action{
  background: hsl(var(--color-primary-500));
  border-color: hsl(var(--color-primary-500));
  color: white;
  transform: translateY(-1px);
}
.prospekt-card .card-action svg{ width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce){
  section[aria-label="Prospekter"] > a.group{ transition:none !important; }
  .demo-cover::after{ display:none !important; }
}


/* Manual theme toggle overrides prefers-color-scheme */
:root:not(.dark){
  --color-base-01:0deg 0% 100%;
  --color-base-02:0deg 0% 96%;
  --color-base-03:0deg 0% 92%;
  --color-base-04:0deg 0% 84%;
  --color-base-05:0deg 0% 56%;
  --color-base-06:0deg 0% 27%;
  --color-base-07:0deg 0% 0%;
  --color-primary-50:213deg 90% 92%;
  --color-primary-100:213deg 90% 86%;
  --color-primary-200:213deg 90% 76%;
  --color-primary-300:213deg 90% 66%;
  --color-primary-400:213deg 90% 56%;
  --color-primary-500:213deg 90% 46%;
  --color-primary-600:213deg 90% 40%;
  --color-primary-700:213deg 90% 34%;
  --color-primary-800:213deg 90% 28%;
  --color-primary-900:213deg 90% 22%;
  --color-primary-950:213deg 90% 16%;
  --color-red-400:0deg 70% 65%;
  --color-red-500:0deg 70% 55%;
  --color-red-600:0deg 70% 45%;
  --color-red-700:0deg 70% 35%;
  --color-primary:var(--color-primary-500);
  --color-primary-foreground:var(--color-primary-950);
  --color-primary-accent:var(--color-primary-700);
  --color-primary-hover:var(--color-primary-600);
  --color-primary-active:var(--color-primary-700);
}

:root.dark{
  --color-base-01:0deg 3% 9%;
  --color-base-02:0deg 3% 15%;
  --color-base-03:0deg 3% 18%;
  --color-base-04:0deg 3% 24%;
  --color-base-05:0deg 3% 44%;
  --color-base-06:0deg 3% 73%;
  --color-base-07:0deg 3% 100%;
  --color-primary-50:213deg 90% 92%;
  --color-primary-100:213deg 90% 86%;
  --color-primary-200:213deg 90% 76%;
  --color-primary-300:213deg 90% 66%;
  --color-primary-400:213deg 90% 56%;
  --color-primary-500:213deg 90% 46%;
  --color-primary-600:213deg 90% 40%;
  --color-primary-700:213deg 90% 34%;
  --color-primary-800:213deg 90% 28%;
  --color-primary-900:213deg 90% 22%;
  --color-primary-950:213deg 90% 16%;
}


/* Footer spacing */
main{ padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

/* =========================================================
   Header accents: make header buttons + search icon pink
   (override global hover primary blue)
========================================================= */

/* Header action buttons (dark mode only) */
:is(.dark, [data-theme="dark"]) header .z-2 button{
  color: #fbb46e !important;
}
:is(.dark, [data-theme="dark"]) header .z-2 button svg{
  color: #fbb46e !important;
}

/* Keep hover border highlight consistent */
:is(.dark, [data-theme="dark"]) header .z-2 button:hover,
:is(.dark, [data-theme="dark"]) header .z-2 button:focus-visible{
  border-color: #11bac7 !important;
}

/* Search magnifier icon (desktop + mobile) */
#desktopSearchWrap form[role="search"] > span,
#mobileSearchPanel form[role="search"] > span{
  color: #f477af !important;
}

/* Ensure any SVG paths that use currentColor follow the accent */
#desktopSearchWrap form[role="search"] > span svg,
#mobileSearchPanel form[role="search"] > span svg{
  color: #f477af !important;
}


/* =========================================================
   Link colors: make ALL text links warm (#fbb46e)
========================================================= */
:is(.dark, [data-theme="dark"]) main a:not(.btn):not(.button):not([class*="btn"]),
:is(.dark, [data-theme="dark"]) footer a:not(.btn):not(.button):not([class*="btn"]){
  color: #fbb46e !important;
}
:is(.dark, [data-theme="dark"]) main a:not(.btn):not(.button):not([class*="btn"]):hover,
:is(.dark, [data-theme="dark"]) footer a:not(.btn):not(.button):not([class*="btn"]):hover{
  color: #fbb46e !important;
  opacity: 0.85;
}

/* Sidebar menu links (left rail) */
:is(.dark, [data-theme="dark"]) #desktopLeftRail a{
  color: #fbb46e !important;
}
:is(.dark, [data-theme="dark"]) #desktopLeftRail a:hover{
  color: #fbb46e !important;
  opacity: 0.85;
}

/* Flipbook embeds: ensure they are clickable (some embeds need visible overflow) */
.pa-prospekt-post-page .pa-flipbook,
.pa-prospekt-post-page .pa-flipbook *{
  pointer-events: auto;
}


/* Flipbook must stay clickable (override) */
.pa-flipbook{ position: relative; z-index: 10; }
.pa-flipbook, .pa-flipbook *{ pointer-events: auto !important; }


/* Back-to-top: avoid default blue active/focus highlight */
#backToTop:active,
#backToTop:focus-visible{
  border-color: #f477af !important;
  outline: 2px solid #f477af !important;
  outline-offset: 2px;
}
#backToTop svg{ color: inherit; }



/* =========================================================
   Header icons: 2px ring + dark active state cyan
========================================================= */
/* Make header icon buttons feel more "premium" */
header .z-2 button{
  border-width: 2px !important;
}

/* Dark mode: active icons/labels cyan */
:is(.dark, [data-theme="dark"]) header a[aria-current="page"],
:is(.dark, [data-theme="dark"]) header button[aria-current="page"],
:is(.dark, [data-theme="dark"]) header .is-active{
  color: #11bac7 !important;
}
:is(.dark, [data-theme="dark"]) header a[aria-current="page"] svg,
:is(.dark, [data-theme="dark"]) header button[aria-current="page"] svg,
:is(.dark, [data-theme="dark"]) header .is-active svg{
  color: #11bac7 !important;
}