.elementor-kit-6{--e-global-color-primary:#DEC957;--e-global-color-secondary:#000000;--e-global-color-text:#000000;--e-global-color-accent:#000000;--e-global-color-39f4938:#DEC957;--e-global-color-1ff714b:#080808;--e-global-color-a5c3532:#1B1B1B;--e-global-color-ddfe28d:#F5F5F5;--e-global-color-5e43245:#B0B0B0;--e-global-color-0ebc9c8:#4A4A4A;--e-global-color-5ea0474:#262626;--e-global-color-7e5b7d2:#02010100;--e-global-color-9f201a3:#0A999D;--e-global-color-6314736:#F92675;--e-global-color-dd6c348:#FF0000;--e-global-color-06f0cdb:#CAE304;--e-global-typography-primary-font-family:"Barlow Semi Condensed";--e-global-typography-primary-font-size:95px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1em;--e-global-typography-secondary-font-family:"Barlow Semi Condensed";--e-global-typography-secondary-font-size:65px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1em;--e-global-typography-text-font-family:"Barlow";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.8em;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-d2b1735-font-family:"Barlow Condensed";--e-global-typography-d2b1735-font-size:25px;--e-global-typography-d2b1735-font-weight:500;--e-global-typography-d2b1735-text-transform:uppercase;background-color:var( --e-global-color-1ff714b );color:var( --e-global-color-5e43245 );font-family:"Barlow", Sans-serif;font-size:17px;font-weight:400;line-height:1.5em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-39f4938 );font-family:"Barlow Semi Condensed", Sans-serif;font-size:16px;font-weight:600;text-transform:uppercase;word-spacing:0.04em;color:var( --e-global-color-1ff714b );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-39f4938 );border-radius:0px 0px 0px 0px;padding:14px 25px 14px 25px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#02010100;color:var( --e-global-color-39f4938 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-39f4938 );border-radius:0px 0px 0px 0px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{color:var( --e-global-color-ddfe28d );font-family:"Barlow Semi Condensed", Sans-serif;font-size:72px;font-weight:700;text-transform:uppercase;line-height:1em;}.elementor-kit-6 h2{color:var( --e-global-color-ddfe28d );font-family:"Barlow Semi Condensed", Sans-serif;font-size:52px;font-weight:700;text-transform:uppercase;line-height:1em;}.elementor-kit-6 h3{font-family:"Barlow Semi Condensed", Sans-serif;font-size:32px;font-weight:700;text-transform:uppercase;}.elementor-kit-6 h4{font-family:"Barlow Semi Condensed", Sans-serif;font-size:24px;font-weight:700;text-transform:uppercase;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-family:"Barlow", Sans-serif;font-size:16px;font-weight:400;color:var( --e-global-color-5e43245 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:120px;--container-default-padding-right:50px;--container-default-padding-bottom:120px;--container-default-padding-left:50px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-primary-font-size:75px;--e-global-typography-secondary-font-size:55px;--e-global-typography-text-font-size:17px;font-size:17px;}.elementor-kit-6 h1{font-size:56px;}.elementor-kit-6 h2{font-size:42px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:50px;--container-default-padding-right:50px;--container-default-padding-bottom:50px;--container-default-padding-left:50px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-font-size:50px;--e-global-typography-secondary-font-size:45px;--e-global-typography-text-font-size:16px;font-size:16px;}.elementor-kit-6 h1{font-size:42px;}.elementor-kit-6 h2{font-size:34px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:80px;--container-default-padding-right:20px;--container-default-padding-bottom:80px;--container-default-padding-left:20px;}}
/* Start custom CSS */:root {
  --pi-gold: #DEC957;
  --pi-black: #080808;
  --pi-anthrazit: #1B1B1B;
  --pi-white: #F5F5F5;
  --pi-text-grey: #B0B0B0;
  --pi-line-grey: #4A4A4A;
  --pi-dark-grey: #262626;
  --pi-bruchsal: #0A999D;
  --pi-sinsheim: #F92675;
  --pi-wiesloch: #FF0000;
  --pi-pforzheim: #CAE304;
}


/* =========================================
   PURE INK – OUTLINE TYPOGRAPHY
   ========================================= */

.pi-outline-gold {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px var(--pi-gold) !important;
  paint-order: stroke fill;
}

.pi-outline-white {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px var(--pi-white) !important;
  paint-order: stroke fill;
}


/* Große Outline, z. B. Hero */
.pi-outline-gold-xl {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1.5px var(--pi-gold) !important;
  paint-order: stroke fill;
}

/* =========================================
   PURE INK – STUDIO OUTLINE COLORS
   ========================================= */

.pi-outline-bruchsal {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px var(--pi-bruchsal) !important;
  paint-order: stroke fill;
}

.pi-outline-sinsheim {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px var(--pi-sinsheim) !important;
  paint-order: stroke fill;
}

.pi-outline-wiesloch {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px var(--pi-wiesloch) !important;
  paint-order: stroke fill;
}

.pi-outline-pforzheim {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px var(--pi-pforzheim) !important;
  paint-order: stroke fill;
}

/* =========================================
   PURE INK – SECTION LINE
   ========================================= */

.pi-section-line {
  position: relative;
  overflow: visible;
}

/* Goldener Strich */
.pi-section-line::after {
  content: "";
  position: absolute;

  top: -35px;
  left: 50%;

  width: 1px;
  height: 70px;

  background: var(--pi-gold);

  z-index: 20;
  pointer-events: none;

  transform: translateX(-50%) scaleY(0);
  transform-origin: center;
  opacity: 0;

  transition:
    transform .7s cubic-bezier(.22, 1, .36, 1),
    opacity .4s ease;
}


/* Sobald Section sichtbar wird */
.pi-section-line.is-visible::after {
  transform: translateX(-50%) scaleY(1);
  opacity: 1;
}


/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {

  .pi-section-line::after {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
    transition: none;
  }

}

/* =========================================
   PURE INK – GALLERY CARDS
   ========================================= */

.pi-gallery-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;

  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

/* Die Kategorie-Kachel wird in Elementor als a (Link) eingestellt.
   Innerhalb der Kachel keine weiteren Links verwenden. */
a.pi-gallery-card,
a.pi-gallery-card:hover,
a.pi-gallery-card:focus,
a.pi-gallery-card:visited {
  color: inherit;
  text-decoration: none !important;
}

a.pi-gallery-card {
  cursor: pointer;
}

/* Sichtbarer Tastaturfokus, nicht beim normalen Antippen. */
a.pi-gallery-card:focus-visible {
  outline: 2px solid var(--pi-gold, #DEC957);
  outline-offset: 4px;
}

/* -------------------------
   BILD
   ------------------------- */

.pi-gallery-card .pi-gallery-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 0 !important;
}

.pi-gallery-card .pi-gallery-img .elementor-widget-container {
  width: 100%;
  height: 100%;
}

.pi-gallery-card .pi-gallery-img a {
  display: block;
  width: 100%;
  height: 100%;
}

.pi-gallery-card .pi-gallery-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: grayscale(100%);
  transform: scale(1);

  transition:
    filter .6s ease,
    transform .7s cubic-bezier(.22, 1, .36, 1);
}


/* -------------------------
   DUNKLES OVERLAY
   ------------------------- */

.pi-gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: rgba(8, 8, 8, .30);
  pointer-events: none;

  transition: background .5s ease;
}


/* -------------------------
   TITEL OBEN LINKS
   ------------------------- */

.pi-gallery-card .pi-gallery-title {
  position: absolute !important;
  top: 28px !important;
  left: 28px !important;

  width: fit-content !important;
  max-width: calc(100% - 56px);

  margin: 0 !important;
  z-index: 3 !important;
}


/* -------------------------
   PFEIL UNTEN LINKS
   ------------------------- */

.pi-gallery-card .pi-gallery-arrow {
  position: absolute !important;

  left: 28px !important;
  bottom: 28px !important;

  width: auto !important;
  margin: 0 !important;

  z-index: 3 !important;

  transition:
    transform .35s ease,
    color .35s ease;
}


/* Pfeilgrafik drehen – nicht das komplette Icon-Box-Widget.
   Funktioniert mit Icon- und Icon-Box-Widget.
   Die Galerie-CTA ist von der Drehung ausgenommen. */
.pi-gallery-card:not(.pi-gallery-cta) .pi-gallery-arrow .elementor-icon {
  display: inline-block;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* Dieselbe Rückmeldung bei Bedienung per Tastatur. */
a.pi-gallery-card:not(.pi-gallery-cta):focus-visible .pi-gallery-arrow .elementor-icon {
  transform: rotate(-45deg);
}

/* -------------------------
   HOVER
   ------------------------- */

@media (hover: hover) and (pointer: fine) {

  .pi-gallery-card:hover .pi-gallery-img img {
    filter: grayscale(0%);
    transform: scale(1.03);
  }

  .pi-gallery-card:hover::after {
    background: rgba(8, 8, 8, .08);
  }

  .pi-gallery-card:hover .pi-gallery-arrow {
    transform: translate(3px, -3px);
    color: var(--pi-gold);
  }

  /* Auf der gesamten Kategorie-Kachel auslösen. */
  .pi-gallery-card:not(.pi-gallery-cta):hover .pi-gallery-arrow .elementor-icon {
    transform: rotate(-45deg);
  }

}


/* -------------------------
   REDUCED MOTION
   ------------------------- */

@media (prefers-reduced-motion: reduce) {

  .pi-gallery-card .pi-gallery-img img,
  .pi-gallery-card .pi-gallery-arrow,
  .pi-gallery-card::after {
    transition: none;
  }

  /* Die neu ergänzte Drehung bei reduzierter Bewegung weglassen. */
  .pi-gallery-card:not(.pi-gallery-cta) .pi-gallery-arrow .elementor-icon {
    transform: none !important;
    transition: none !important;
  }

}




/* =========================================
   PURE INK – GALLERY CTA CARD
   ========================================= */

.pi-gallery-card.pi-gallery-cta::after {
  background: rgba(8, 8, 8, .90);
}


/* Bild bleibt immer Schwarz-Weiß */
.pi-gallery-card.pi-gallery-cta .pi-gallery-img img {
  filter: grayscale(100%);
  transform: scale(1);
}


/* Beim Hover NICHT bunt und kein Zoom */
@media (hover: hover) and (pointer: fine) {

  .pi-gallery-card.pi-gallery-cta:hover .pi-gallery-img img {
    filter: grayscale(100%);
    transform: scale(1);
  }

}


/* =========================================
   MOBILE – CARD IN VIEW
   ========================================= */

@media (hover: none), (pointer: coarse) {

  .pi-gallery-card.is-in-view .pi-gallery-img img {
    filter: grayscale(0%);
    transform: scale(1.02);
  }

  .pi-gallery-card.is-in-view::after {
    background: rgba(8, 8, 8, .08);
  }

  .pi-gallery-card.is-in-view .pi-gallery-arrow {
    color: var(--pi-gold);
    transform: translate(3px, -3px);
  }


  /* CTA bleibt immer dunkel + schwarzweiß */
  .pi-gallery-card.pi-gallery-cta.is-in-view .pi-gallery-img img {
    filter: grayscale(100%);
    transform: scale(1);
  }

  .pi-gallery-card.pi-gallery-cta.is-in-view::after {
    background: rgba(8, 8, 8, .90);
  }

}



/* ==========================================================
   PURE INK – NAVIGATION / v4 – ALLE GERAETE + UNTERMENUES
   ERSETZT den bisherigen Menü-CSS-Block, keine Ergänzung.
   Alle Größen: fester Burger. Bis 1024px: Vollbild.
   Ab 1025px: rechtes Panel, standardmäßig 520px breit.
   Burger richtet sich nach dem Logo / optional .pi-menu-align.
   Scrollsperre ohne zusätzliche Body-Padding-Kompensation.
   Studios/Wissen samt Unterpunkten aus dem vorhandenen WordPress-Menü.
   Zusammen mit JavaScript v4 verwenden; alte Menü-Skripte deaktivieren.
   Andere Pure-Ink-Klassen (Galerie, Outline usw.) bleiben bestehen.
   ========================================================== */

/* Versteckte Quelle im Header; derselbe Button wird an body verschoben.
   Ohne erfolgreich gestartetes Skript bleibt das alte Menü sichtbar. */
.pi-mobile-trigger-host,
button.pi-menu-trigger {
  display: none !important;
}
html.pi-mobile-menu-ready .pi-menu-source,
html.pi-mobile-menu-ready .pi-menu-booking-source {
  display: none !important;
}

/* Burger und Schließen: nur unsere Schalter, keine globalen Buttons. */
button#pi-menu-toggle,
#pi-mobile-menu button.pi-menu-close {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 48px;
  min-height: 48px;
  margin: 0 !important;
  padding: 10px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--pi-gold, #DEC957) !important;
  -webkit-text-fill-color: currentColor;
  font: 500 14px/1 "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#pi-mobile-menu button.pi-menu-close { display: inline-flex; }

/* Wichtig: feste Position gilt jetzt auf ALLEN Bildschirmgrößen. */
html.pi-mobile-menu-ready button#pi-menu-toggle {
  display: inline-flex !important;
  position: fixed !important;
  top: calc(18px + env(safe-area-inset-top, 0px) + var(--pi-menu-toolbar, 0px)) !important;
  right: max(20px, var(--pi-menu-content-inset, 24px), env(safe-area-inset-right, 0px)) !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  z-index: 999990 !important;
  transform: none !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
html.pi-mobile-menu-locked button#pi-menu-toggle {
  visibility: hidden !important;
  pointer-events: none;
}

/* Kein Rahmen beim Antippen oder nach dem Schließen. */
button#pi-menu-toggle:is(:hover, :focus, :focus-visible, :active),
#pi-mobile-menu button.pi-menu-close:is(:hover, :focus, :focus-visible, :active) {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Tastaturfokus bleibt durch Unterstreichung erkennbar. */
button#pi-menu-toggle:focus-visible .pi-menu-trigger-label,
#pi-mobile-menu .pi-menu-close:focus-visible .pi-menu-close-label {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
button#pi-menu-toggle .pi-menu-bars,
#pi-mobile-menu .pi-menu-bars {
  position: relative;
  display: block;
  width: 28px;
  height: 24px;
  flex: 0 0 28px;
}
button#pi-menu-toggle .pi-menu-bars > span,
#pi-mobile-menu .pi-menu-bars > span {
  position: absolute;
  top: 11px;
  right: 0;
  display: block;
  width: 28px;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-4px);
  transition: transform .3s ease, width .3s ease;
}
button#pi-menu-toggle .pi-menu-bars > span:last-child,
#pi-mobile-menu .pi-menu-bars > span:last-child {
  width: 19px;
  transform: translateY(4px);
}
#pi-mobile-menu.pi-menu-visible .pi-menu-close .pi-menu-bars > span {
  width: 28px;
  transform: rotate(45deg);
}
#pi-mobile-menu.pi-menu-visible .pi-menu-close .pi-menu-bars > span:last-child {
  transform: rotate(-45deg);
}

/* Platz für klassische Scrollbars behalten; Overlay-Scrollbars brauchen keinen. */
html.pi-mobile-menu-ready { scrollbar-gutter: stable; }

/* Breite und Lage des Bodys werden VOR der Scrollsperre gemessen.
   Am Desktop bleibt body im normalen Layout. Nur auf Touchgeräten und
   in Browsern ohne scrollbar-gutter wird body fixiert. Kein Extra-Padding. */
html.pi-mobile-menu-locked {
  overflow: hidden !important;
  scroll-behavior: auto !important;
}
html.pi-mobile-menu-locked.pi-menu-body-frozen body {
  position: fixed !important;
  top: var(--pi-menu-lock-top, 0px) !important;
  left: var(--pi-menu-lock-left, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--pi-menu-lock-width, 100%) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Native Dialog-Top-Layer: Elementor-z-index kann ihn nicht verdecken. */
dialog#pi-mobile-menu {
  --pi-menu-version: 4;
  --pi-menu-panel-time: 460ms;
  --pi-menu-desktop-width: 520px;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  overflow: hidden;
  background: var(--pi-black, #080808);
  color: var(--pi-white, #F5F5F5);
  font-family: "Barlow", Arial, sans-serif;
  text-align: left;
  clip-path: inset(0 0 100% 0);
  transform: none;
  transition: clip-path var(--pi-menu-panel-time) cubic-bezier(.76, 0, .24, 1);
}
dialog#pi-mobile-menu:not([open]) { display: none !important; }
dialog#pi-mobile-menu[open] { display: block; }
dialog#pi-mobile-menu.pi-menu-visible { clip-path: inset(0); }
#pi-mobile-menu::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background .35s ease;
}
#pi-mobile-menu.pi-menu-visible::backdrop { background: rgba(0, 0, 0, .42); }
#pi-mobile-menu *,
#pi-mobile-menu *::before,
#pi-mobile-menu *::after { box-sizing: border-box; }

#pi-mobile-menu .pi-menu-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 20px;
  width: min(100%, 700px);
  height: 100%;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top, 0px))
           max(26px, env(safe-area-inset-right, 0px))
           max(24px, env(safe-area-inset-bottom, 0px))
           max(26px, env(safe-area-inset-left, 0px));
}
#pi-mobile-menu .pi-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 62px;
}
#pi-mobile-menu .pi-menu-brand {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  color: var(--pi-gold, #DEC957);
  font: 700 26px/1 "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .04em;
}
#pi-mobile-menu .pi-menu-brand img {
  display: block;
  width: 76px;
  height: 62px;
  object-fit: contain;
  margin: 0;
}

/* Nur die Navigation scrollt auf niedrigen Displays. */
#pi-mobile-menu .pi-menu-nav {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(12px, 4vh, 40px) 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--pi-line-grey, #4A4A4A) transparent;
}
#pi-mobile-menu .pi-menu-kicker {
  margin: 0 0 18px;
  color: var(--pi-gold, #DEC957);
  font: 500 14px/1.4 "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .07em;
}
#pi-mobile-menu .pi-menu-list,
#pi-mobile-menu .pi-menu-sublist { margin: 0; padding: 0; list-style: none; }
#pi-mobile-menu .pi-menu-list { display: grid; gap: 0; }
#pi-mobile-menu .pi-menu-list > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(245,245,245,.12);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .22s ease, transform .28s ease;
}
#pi-mobile-menu.pi-menu-visible .pi-menu-list > li {
  opacity: 1;
  transform: none;
  transition-duration: .42s;
  transition-delay: calc(110ms + var(--pi-menu-index,0) * 55ms);
}
#pi-mobile-menu .pi-menu-link,
#pi-mobile-menu button.pi-menu-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-columns: 25px minmax(0,1fr) 24px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 10px 0;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--pi-white,#F5F5F5);
  -webkit-text-fill-color: currentColor;
  text-align: left;
  text-decoration: none;
  font: 600 clamp(38px,12vw,64px)/1.08 "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: -.015em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#pi-mobile-menu .pi-menu-number {
  color: var(--pi-gold,#DEC957);
  font: 400 12px/1 "Barlow", Arial, sans-serif;
  letter-spacing: .04em;
}
#pi-mobile-menu .pi-menu-label { min-width: 0; overflow-wrap: anywhere; transition: color .2s; }
#pi-mobile-menu .pi-menu-link[aria-current="page"] .pi-menu-label,
#pi-mobile-menu .pi-menu-group.pi-has-current > .pi-menu-toggle .pi-menu-label {
  color: var(--pi-gold,#DEC957);
}
@supports (-webkit-text-stroke: 1px #DEC957) {
  #pi-mobile-menu .pi-menu-link[aria-current="page"] .pi-menu-label,
  #pi-mobile-menu .pi-menu-group.pi-has-current > .pi-menu-toggle .pi-menu-label {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--pi-gold,#DEC957);
  }
}
#pi-mobile-menu button.pi-menu-toggle[aria-expanded="true"] .pi-menu-label {
  color: var(--pi-gold,#DEC957);
  -webkit-text-fill-color: var(--pi-gold,#DEC957);
  -webkit-text-stroke: 0;
}
#pi-mobile-menu .pi-menu-link:focus-visible .pi-menu-label,
#pi-mobile-menu .pi-menu-toggle:focus-visible .pi-menu-label,
#pi-mobile-menu .pi-menu-sub-link:focus-visible .pi-menu-sub-label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Ausschließlich gezeichnete weiße SVG-Pfeile, keine Unicode-/Emoji-Pfeile. */
#pi-mobile-menu .pi-menu-arrow {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  justify-self: end;
  fill: none !important;
  stroke: #FFFFFF !important;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}
#pi-mobile-menu .pi-menu-toggle[aria-expanded="true"] > .pi-menu-arrow { transform: rotate(180deg); }

/* Aufklappbare Standortliste: nur diese Liste verschiebt die Links darunter. */
#pi-mobile-menu .pi-menu-subpanel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .34s ease, opacity .22s ease, visibility 0s .34s;
}
#pi-mobile-menu .pi-menu-group.pi-sub-open > .pi-menu-subpanel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .34s ease, opacity .25s ease, visibility 0s;
}
#pi-mobile-menu .pi-menu-subclip { min-height: 0; overflow: hidden; }
#pi-mobile-menu .pi-menu-sublist {
  display: block;
  margin: 4px 0 18px 37px;
  padding: 0 0 0 18px;
  border-left: 1px solid rgba(222,201,87,.45);
}
#pi-mobile-menu .pi-menu-sublist > li { margin: 0; padding: 0; }
#pi-mobile-menu .pi-menu-sub-link,
#pi-mobile-menu .pi-menu-sublist button.pi-menu-toggle {
  display: grid;
  grid-template-columns: minmax(0,1fr) 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 0;
  border: 0 !important;
  border-radius: 0;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--pi-white,#F5F5F5);
  -webkit-text-fill-color: currentColor;
  font: 500 clamp(21px,5.8vw,28px)/1.25 "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .01em;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
#pi-mobile-menu .pi-menu-sub-link .pi-menu-arrow { width: 18px; height: 18px; }
#pi-mobile-menu .pi-menu-sub-link[aria-current="page"],
#pi-mobile-menu .pi-menu-sub-link:focus-visible { color: var(--pi-gold,#DEC957); -webkit-text-fill-color: currentColor; }
#pi-mobile-menu .pi-menu-sublist .pi-menu-sublist { margin-left: 0; }

/* Terminbutton bleibt unter dem scrollbaren Bereich sichtbar. */
#pi-mobile-menu .pi-menu-bottom { padding-top: 10px; }
#pi-mobile-menu .pi-menu-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 16px 20px;
  border: 1px solid var(--pi-gold,#DEC957);
  border-radius: 0;
  outline: 0 !important;
  box-shadow: none !important;
  background: var(--pi-gold,#DEC957);
  color: var(--pi-black,#080808);
  -webkit-text-fill-color: currentColor;
  font: 600 18px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .035em;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s;
}
#pi-mobile-menu .pi-menu-cta .pi-menu-arrow { stroke: currentColor !important; }
#pi-mobile-menu .pi-menu-cta:focus-visible .pi-menu-cta-label { text-decoration: underline; text-underline-offset: 5px; }
#pi-mobile-menu .pi-menu-signature {
  margin: 16px 0 0;
  color: var(--pi-text-grey,#B0B0B0);
  font: 400 12px/1.5 "Barlow", Arial, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Maus-Hover gilt für Links und Gruppen. Keine Touch-Fokusrahmen. */
@media (hover: hover) and (pointer: fine) {
  #pi-mobile-menu .pi-menu-link:hover .pi-menu-label,
  #pi-mobile-menu .pi-menu-sub-link:hover { color: var(--pi-gold, #DEC957); }
  #pi-mobile-menu .pi-menu-cta:hover {
    background: transparent;
    color: var(--pi-gold, #DEC957);
  }
}

/* DESKTOP: Nur rechts ein Panel; die Seite bleibt links sichtbar. */
@media (min-width: 1025px) {
  html.pi-mobile-menu-ready button#pi-menu-toggle {
    top: calc(24px + var(--pi-menu-toolbar, 0px)) !important;
  }
  dialog#pi-mobile-menu {
    inset: 0 0 0 auto;
    width: min(var(--pi-menu-desktop-width), 100%);
    clip-path: none;
    transform: translateX(102%);
    transition: transform var(--pi-menu-panel-time) cubic-bezier(.76, 0, .24, 1);
  }
  dialog#pi-mobile-menu.pi-menu-visible { transform: translateX(0); }
  #pi-mobile-menu .pi-menu-shell {
    width: 100%;
    padding: 26px 40px 32px;
  }
  #pi-mobile-menu .pi-menu-list > li > .pi-menu-link {
    font-size: 52px;
    padding-block: 15px;
  }
}
@media (max-height: 600px) {
  #pi-mobile-menu .pi-menu-shell { gap: 10px; padding-block: 12px; }
  #pi-mobile-menu .pi-menu-nav { padding-top: 8px; }
  #pi-mobile-menu .pi-menu-signature { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #pi-mobile-menu,
  #pi-mobile-menu *,
  #pi-mobile-menu::backdrop,
  #pi-menu-toggle .pi-menu-bars > span { transition: none !important; }
  dialog#pi-mobile-menu { clip-path: none; transform: none; }
  #pi-mobile-menu .pi-menu-list > li { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  #pi-mobile-menu { background: Canvas; color: CanvasText; }
  #pi-mobile-menu .pi-menu-label,
  #pi-mobile-menu .pi-menu-sub-label {
    color: LinkText !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: 0 !important;
  }
  #pi-mobile-menu .pi-menu-arrow { stroke: LinkText !important; }
  #pi-mobile-menu .pi-menu-cta { background: ButtonFace; color: ButtonText; }
  #pi-menu-toggle .pi-menu-bars > span,
  #pi-mobile-menu .pi-menu-bars > span { background: ButtonText; }
}
@media print {
  #pi-menu-toggle,
  dialog#pi-mobile-menu { display: none !important; }
}


/* =========================================
   PURE INK – INSTAGRAM FEED BUTTONS
   ========================================= */

#sb_instagram #sbi_load {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}


/* Mehr laden */
#sb_instagram .sbi_load_btn {
  margin: 0 !important;
  padding: 14px 24px !important;

  border: 1px solid var(--pi-gold) !important;
  border-radius: 0 !important;

  background: var(--pi-gold) !important;
  color: var(--pi-black) !important;

  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}


/* Hover Mehr laden */
@media (hover: hover) and (pointer: fine) {
  #sb_instagram .sbi_load_btn:hover {
    background: transparent !important;
    color: var(--pi-gold) !important;
    border-color: var(--pi-gold) !important;
  }
}


/* Instagram folgen / öffnen */
#sb_instagram .sbi_follow_btn a {
  margin: 0 !important;
  padding: 14px 24px !important;

  border: 1px solid var(--pi-gold) !important;
  border-radius: 0 !important;

  background: transparent !important;
  color: var(--pi-gold) !important;

  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;

  transition:
    background .25s ease,
    color .25s ease;
}


/* Hover Instagram */
@media (hover: hover) and (pointer: fine) {
  #sb_instagram .sbi_follow_btn a:hover {
    background: var(--pi-gold) !important;
    color: var(--pi-black) !important;
  }
}

/* PURE INK – Galerie-Unterseite: Mobile Kachelhöhen / v2.
   ERSETZT den bisherigen mobilen Galerie-Block. Kein PHP, keine <style>-Tags.
   Gilt nur für Loop Grids mit der Klasse pi-portfolio-grid.
   Desktop / Tablet ab 768 px bleiben unverändert. */
@media (max-width: 767px) {
  .pi-portfolio-grid.elementor-widget-loop-grid .elementor-loop-container {
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 24px !important;
  }

  /* Eventuelle Rasterpositionen und feste Eintragshöhen zurücksetzen. */
  .pi-portfolio-grid.elementor-widget-loop-grid .elementor-loop-container > .e-loop-item {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
  }

  /* Die Wrapper der Medienvorlage dürfen die Höhe nicht begrenzen. */
  .pi-portfolio-grid.elementor-widget-loop-grid .e-loop-item .e-con,
  .pi-portfolio-grid.elementor-widget-loop-grid .e-loop-item .e-con-inner,
  .pi-portfolio-grid.elementor-widget-loop-grid .e-loop-item .elementor-widget-shortcode,
  .pi-portfolio-grid.elementor-widget-loop-grid .e-loop-item .elementor-widget-shortcode .elementor-widget-container,
  .pi-portfolio-grid.elementor-widget-loop-grid .e-loop-item .elementor-shortcode {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Innerhalb der einzelnen Medienkachel keine umbrechende Flex-Spalte.
     Die Kategoriennavigation neben/über der Galerie bleibt unberührt. */
  .pi-portfolio-grid.elementor-widget-loop-grid .e-loop-item .pi-portfolio-item,
  .pi-portfolio-grid.elementor-widget-loop-grid .e-loop-item .pi-portfolio-item > .e-con-inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Entscheidend: Breite des Shortcode-WIDGETS explizit festlegen.
     So kann die prozentuale Höhe der Video-Vorschau schon während
     der Flex-Berechnung berücksichtigt werden. */
  .pi-portfolio-grid.elementor-widget-loop-grid .e-loop-item .elementor-widget-shortcode {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
}/* End custom CSS */