/* ==========================================================================
   Kitarino Mega Menu - Unified Stylesheet
   Desktop sections synced to Figma "2697-01 Kitarino Website Menue Konzept"
   (nodes 11:1891 default, 11:1978 / 2002:969 variant 1, 15:451 variant 2,
   20:553 variant 3). Figma canvas is 1440px wide; fixed design offsets are
   expressed as clamp() so the bar reflows between 1025px and 1440px+.
   ========================================================================== */

:root {
  --kitarino-lila: #8250d5;
  --kitarino-magenta: #cc3366;
  --kitarino-gelb: #ffc300;
  --kitarino-black: #000000;
  --kitarino-white: #ffffff;
  --kitarino-hairline: rgba(0, 0, 0, 0.08);

  --kitarino-header-h: 115px;
  --kitarino-gutter: clamp(
    24px,
    6.94vw,
    100px
  ); /* logo / CTA inset: 100px @1440 */
  --kitarino-panel-gutter: clamp(
    20px,
    9.72vw,
    140px
  ); /* panel content inset: 140px @1440 */
  --kitarino-shadow-card: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  --kitarino-shadow-panel: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
}

/* Scoped so the plugin never re-boxes the surrounding theme. */
.ds-kitarino-mega-menu-wrapper,
.ds-kitarino-mega-menu-wrapper *,
.ds-kitarino-mega-menu-wrapper *::before,
.ds-kitarino-mega-menu-wrapper *::after {
  box-sizing: border-box !important;
}

.ds-kitarino-mega-menu-wrapper {
  position: relative !important;
  width: 100% !important;
  font-family: var(--font-family) !important;
  -webkit-font-smoothing: antialiased !important;
}

.elementor-section:has(.ds-kitarino-mega-menu-wrapper) {
  padding: 0px !important;
}

.elementor-column:has(.ds-kitarino-mega-menu-wrapper) {
  width: 100% !important;
}

/* ==========================================================================
   1. Level 1 Desktop Navigation Bar (Header Bar)
   ========================================================================== */

.ds-header-wrapper {
  width: 100% !important;
  background: var(--kitarino-white) !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 10 !important;
  border-bottom: 1px solid var(--kitarino-hairline) !important;
}

.ds-header-wrapper .ds-navbar {
  height: var(--kitarino-header-h) !important;
  width: 100% !important;
  max-width: 1440px !important;
  padding: 0 100px !important;
  display: flex !important;
  align-items: center !important;
}

.ds-nav-logo {
  flex: 0 0 auto !important;
  width: 142px !important;
  height: 38px !important;
  display: block !important;
}

.ds-nav-logo svg,
.ds-nav-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.ds-nav-links {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  /* Figma: first item starts 135px after the logo, 32px between items. */
  margin: 0 0 0 clamp(16px, 9.375vw, 135px) !important;
  gap: clamp(16px, 2.22vw, 32px) !important;
}

/* Per-item accent. Figma uses Lila for Standorte, Gelb for Karriere and
   Magenta for Ueber uns - on the nav label *and* everything in its panel. */
.ds-nav-links > li {
  --kitarino-accent: var(--kitarino-lila) !important;
  --kitarino-submenu-accent: var(--kitarino-accent) !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.ds-nav-links > li.ds-submenu-variant-1 {
  --kitarino-submenu-accent: var(--kitarino-lila) !important;
}

.ds-nav-links > li.ds-submenu-variant-2 {
  --kitarino-submenu-accent: var(--kitarino-gelb) !important;
}

.ds-nav-links > li.ds-submenu-variant-3 {
  --kitarino-submenu-accent: var(--kitarino-magenta) !important;
}

.ds-nav-links > li.ds-accent-gelb {
  --kitarino-accent: var(--kitarino-gelb) !important;
}

.ds-nav-links > li.ds-accent-magenta {
  --kitarino-accent: var(--kitarino-magenta) !important;
}

/* Direct children only - the dropdown panels live inside these <li>s, so an
   unscoped `.ds-nav-links a` would out-specify every link rule in the panels. */
.ds-nav-links > li > a,
.ds-nav-links > li > button,
.ds-nav-links > li > .ds-nav-item-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 500 !important; /* Futura PT Demi */
  line-height: normal !important;
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.ds-nav-links > li.ds-active > a,
.ds-nav-links > li.ds-active > button,
.ds-nav-links > li.ds-active > .ds-nav-item-btn,
.ds-nav-links > li.ds-is-open > a,
.ds-nav-links > li.ds-is-open > .ds-nav-item-btn,
.ds-nav-links > li > .ds-nav-item-btn:hover {
  font-weight: 500 !important; /* Futura PT Bold */
  color: var(--kitarino-submenu-accent) !important;
}

.ds-nav-links > li > a:hover {
  font-weight: 500 !important;
  color: var(--kitarino-black) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

.ds-nav-links > li.ds-active > a:hover {
  color: var(--kitarino-submenu-accent) !important;
}

.ds-nav-actions {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.ds-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 100px !important;
  padding: 5px 14px !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 500 !important; /* Futura PT Medium */
  line-height: normal !important;
  background: var(--kitarino-white) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease !important;
}

/* Icon slot. A second upload can be swapped in on hover, which is how the
   icon keeps up with the button inverting its colours. */
.ds-cta-icon {
  position: relative !important;
  display: inline-flex !important;
  width: 20px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}

.ds-cta-icon svg,
.ds-cta-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.ds-cta-icon--swap .ds-cta-icon-hover {
  display: none !important;
}

.ds-btn-outline:hover .ds-cta-icon--swap .ds-cta-icon-default,
.ds-kitarino-mobile-drawer
  .ds-btn:hover
  .ds-cta-icon--swap
  .ds-cta-icon-default,
.ds-kitarino-mobile-utility:hover .ds-cta-icon--swap .ds-cta-icon-default {
  display: none !important;
}

.ds-btn-outline:hover .ds-cta-icon--swap .ds-cta-icon-hover,
.ds-kitarino-mobile-drawer .ds-btn:hover .ds-cta-icon--swap .ds-cta-icon-hover,
.ds-kitarino-mobile-utility:hover .ds-cta-icon--swap .ds-cta-icon-hover {
  display: block !important;
}

.ds-btn-outline.ds-magenta {
  border: 1.5px solid var(--kitarino-magenta) !important;
  color: var(--kitarino-magenta) !important;
}

.ds-btn-outline.ds-magenta:hover {
  background-color: var(--kitarino-magenta) !important;
  color: var(--kitarino-white) !important;
}

.ds-btn-outline.ds-lila {
  border: 1.5px solid var(--kitarino-lila) !important;
  color: var(--kitarino-lila) !important;
}

.ds-btn-outline.ds-lila:hover {
  background-color: var(--kitarino-lila) !important;
  color: var(--kitarino-white) !important;
}

/* Caret Arrow Icon */
.ds-kitarino-caret {
  width: 10px !important;
  height: 6px !important;
  fill: currentColor !important;
  transition: transform 0.2s ease !important;
}

.ds-nav-links > li.ds-is-open .ds-kitarino-caret {
  transform: rotate(180deg) !important;
}

/* Badge Style */
.ds-kitarino-badge {
  display: inline-block !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 100px !important;
  background-color: var(--kitarino-gelb) !important;
  color: var(--kitarino-black) !important;
  line-height: 1 !important;
}

/* ==========================================================================
   2. Submenu Dropdown Container Wrapper (Desktop)
   ========================================================================== */

/* Positioned against .ds-header-wrapper so the panel spans the full viewport
   width rather than the <li> it is authored inside. */
.ds-dropdown-panel-wrapper,
.ds-submenu-container {
  position: absolute !important;
  top: var(--kitarino-header-h) !important;
  left: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  z-index: 999 !important;
  /* Clips the top edge only, so the panel slides out from behind the header.
     The negative insets let the drop shadow spill on the other three sides. */
  clip-path: inset(0 -40px -40px -40px) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: visibility 0.3s ease !important;
}

.ds-nav-links > li.ds-is-open > .ds-dropdown-panel-wrapper,
.ds-nav-links > li.ds-is-open > .ds-submenu-container {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* The panel itself does the moving: parked one full height above its slot,
   it slides down into place. */
.ds-dropdown-panel-wrapper > .ds-dropdown-panel,
.ds-submenu-container > .ds-submenu-panel {
  transform: translateY(-100%) !important;
  transition: transform 0.3s ease !important;
}

.ds-nav-links > li.ds-is-open > .ds-dropdown-panel-wrapper > .ds-dropdown-panel,
.ds-nav-links > li.ds-is-open > .ds-submenu-container > .ds-submenu-panel {
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ds-dropdown-panel-wrapper > .ds-dropdown-panel,
  .ds-submenu-container > .ds-submenu-panel {
    transition: none !important;
  }
}

.ds-dropdown-panel,
.ds-submenu-panel {
  width: 100% !important;
  max-width: 1440px !important;
  background: var(--kitarino-white) !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: var(--kitarino-shadow-panel) !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: 4px solid #f5f5f5 !important;
}

/* Figma panel heights. min-height (not height) so a longer city list from the
   Elementor repeater grows the panel instead of being clipped. */
.ds-dropdown-panel.ds-variant-1-panel,
.ds-submenu-panel.ds-variant-1-panel,
.ds-dropdown-panel.ds-variant-2-panel,
.ds-submenu-panel.ds-variant-2-panel {
  min-height: 254px !important;
}

.ds-dropdown-panel.ds-variant-3-panel,
.ds-submenu-panel.ds-variant-3-panel {
  min-height: 194px !important;
}

/* Shared content box: 140px inset, content baseline 41px from the panel top. */
.ds-panel-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 95px !important;
  padding: 41px var(--kitarino-panel-gutter) 36px !important;
}

.ds-arrow-icon {
  width: 12px !important;
  height: 8px !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
  flex: 0 0 auto !important;
}

/* ==========================================================================
   3. Submenu Variant 1 (City Links, Master Button, Cards + Drilldown)
   ========================================================================== */

/* Both states share one grid cell, so the panel is as tall as the taller
   state and the cross-fade has nothing to reflow. */
.ds-variant-1-panel {
  display: grid !important;
  height: fit-content !important;
}

.ds-variant-1-panel > .ds-panel-view {
  grid-area: 1 / 1 !important;
  min-width: 0 !important;
  height: fit-content !important;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease !important;
}

.ds-panel-view.ds-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#ds-view-state-1.ds-hidden,
.ds-view-state-1.ds-hidden {
  transform: translateX(-20px) !important;
}

#ds-view-state-2.ds-hidden,
.ds-view-state-2.ds-hidden {
  transform: translateX(20px) !important;
}

#ds-view-state-2 > .ds-panel-inner {
  gap: 75px !important;
}
#ds-view-state-2 > .ds-panel-inner > .ds-link-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 50px !important;
}

/* --- State 1: city overview --- */
/* The city columns keep their intrinsic width; the cards absorb the squeeze. */
.ds-v1-cities {
  display: flex !important;
  gap: 30px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.ds-s1-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 18px !important; /* also the gap between the list and the master button */
  min-width: 0 !important;
}

/* The cities are a real <ul> for crawlers; the row rhythm lives here now so
   the column can also hold the master button without inheriting the gap. */
.ds-city-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 18px !important; /* Figma row pitch 39px = 21px line + 18px gap */
  min-width: 0 !important;
  height: 100% !important;
}

/* Flex, not list-item: an inline formatting context would add a descender
   line box and push the row pitch off the Figma 39px. */
.ds-city-list li {
  display: flex !important;
}

.ds-city-list .ds-all-locations-btn-wrapper {
  margin-top: auto !important;
  width: 100% !important;
}

.ds-s1-col-1 {
  min-width: 182px !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.ds-city-link {
  display: inline-flex !important;
  position: relative !important;
  align-items: center !important;
  gap: 8px !important;
  height: 21px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important; /* Futura PT Demi */
  line-height: normal !important;
  text-align: left !important;
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.ds-city-link:hover {
  gap: 15px !important;
}

.ds-city-link::after,
.ds-drilldown-links a::after,
.ds-left-heading::after,
.ds-sublinks li a::after,
.ds-col-heading::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 1px !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  pointer-events: none !important;
}

.ds-city-link:hover::after,
.ds-drilldown-links a:hover::after,
.ds-left-heading:hover::after,
.ds-sublinks li a:hover::after,
.ds-col-heading:hover::after,
.ds-city-link:focus-visible::after,
.ds-drilldown-links a:focus-visible::after,
.ds-left-heading:focus-visible::after,
.ds-sublinks li a:focus-visible::after,
.ds-col-heading:focus-visible::after {
  opacity: 1 !important;
}

.ds-btn-all-locations {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 204px !important;
  height: 65px !important;
  margin-top: 0 !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: 20px !important;
  background: var(--kitarino-white) !important;
  box-shadow: var(--kitarino-shadow-card) !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 500 !important; /* Futura PT Medium */
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.ds-btn-all-locations:hover {
  font-weight: 500 !important;
}

.ds-btn-all-locations:hover svg * {
  stroke: var(--kitarino-accent) !important;
}

.ds-btn-all-locations:hover svg * {
  stroke: var(--kitarino-accent) !important;
  stroke-width: 1.5 !important;
}

/* --- State 2: drilldown --- */
/* Back control spans x=100..310 so its arrow sits outside the 140px inset,
   exactly as in Figma, and the kita columns begin at x=310. */
.ds-drilldown-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 21px !important;
  flex: 0 0 auto !important;
  margin-left: -40px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  text-align: left !important;
  color: var(--kitarino-accent) !important;
}

.ds-drilldown-back .ds-back-arrow {
  width: 19px !important;
  height: 12px !important;
  flex: 0 0 auto !important;
  fill: currentColor !important;
}

/* Two explicit columns rather than CSS multi-column, so PHP and JS can build
   the identical structure and the "all kitas" link can be pinned to the foot
   of the second column. */
.ds-drilldown-links {
  display: flex !important;
  align-items: stretch !important;
  gap: 30px !important;
  flex: 0 1 400px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.ds-drilldown-column {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important; /* 21px row + 10px = Figma's 31px pitch */
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Flex, not list-item: an inline formatting context would add a descender
   line box and push the row pitch off the Figma 31px. */
.ds-drilldown-column > li {
  display: flex !important;
}

.ds-drilldown-links a {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 21px !important;
  font-size: 16px !important;
  font-weight: 400 !important; /* Futura PT Book */
  line-height: normal !important;
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.ds-drilldown-links a:hover {
  color: var(--kitarino-black) !important;
}

/* Sits at the foot of column 2. margin-top:auto absorbs the slack so it lines
   up with the bottom of the taller column; the padding guarantees a minimum
   separation when both columns are full. Tune via --ds-drilldown-all-gap. */
.ds-drilldown-links .ds-all-kitas-link-wrapper {
  margin-top: auto !important;
  padding-top: var(--ds-drilldown-all-gap, 21px) !important;
}

.ds-drilldown-links .ds-all-kitas-link {
  font-weight: 500 !important; /* Futura PT Demi */
}

/* --- Cards shared by both variant 1 states and variant 2 --- */
/* nowrap: the cards are a single row in Figma. They carry flex:0 1 271px so
   they shrink when the panel is tight - wrapping would drop one to a second
   row and break the panel height. */
.ds-nav-cards {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  margin-left: auto !important;
  margin-top: -20px !important; /* cards sit 21px from the panel top */
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.ds-nav-card {
  position: relative !important;
  display: block !important;
  width: 271px !important;
  height: 212px !important;
  flex: 0 1 271px !important;
  min-width: 0 !important;
  border-radius: 20px !important;
  background: var(--kitarino-white) !important;
  box-shadow: var(--kitarino-shadow-card) !important;
  overflow: hidden !important;
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  transition: transform 0.2s ease !important;
}

.ds-nav-card .ds-card-title {
  position: absolute !important;
  left: 25px !important;
  top: 21px !important;
  /* Stop short of the arrow so a long title truncates instead of running
     underneath it when the card shrinks on narrow desktops. */
  right: 56px !important;
  font-size: 18px !important;
  font-weight: 500 !important; /* Futura PT Medium */
  line-height: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ds-nav-card .ds-card-arrow {
  position: absolute !important;
  right: 25px !important;
  top: 27px !important;
  width: 19px !important;
  height: 12px !important;
  fill: currentColor !important;
  color: var(--kitarino-submenu-accent) !important;
}

.ds-nav-card:hover .ds-card-arrow * {
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}

.ds-nav-card .ds-card-image-area {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: 65px !important;
  background: #f2f2f2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  font-size: 13px !important;
  color: #999 !important;
}

.ds-nav-card .ds-card-image-area img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.ds-nav-card:hover .ds-card-image-area img {
  transform: scale(1.1) !important;
}

/* ==========================================================================
   4. Submenu Variant 2 (Left Link List + Card Grid)
   ========================================================================== */

.ds-left-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.ds-left-heading {
  display: block !important; /* was an <h3>; keep block flow now it is a <span> */
  position: relative !important;
  width: fit-content !important;
  margin: 0 !important;
  height: 21px !important;
  font-size: 16px !important;
  font-weight: 500 !important; /* Futura PT Demi */
  line-height: normal !important;
  color: var(--kitarino-gelb) !important;
}

.ds-left-heading:hover {
  cursor: pointer !important;
}

.ds-sublinks {
  list-style: none !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important; /* Figma row pitch 27px */
}

.ds-sublinks li a {
  position: relative !important;
  width: fit-content !important;
  display: block !important;
  height: 21px !important;
  font-size: 16px !important;
  font-weight: 400 !important; /* Futura PT Book */
  line-height: normal !important;
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.ds-sublinks li a:hover {
  color: var(--kitarino-black) !important;
}

.ds-arrow-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  height: 21px !important;
  font-size: 16px !important;
  font-weight: 500 !important; /* Futura PT Demi */
  line-height: normal !important;
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.ds-arrow-link:hover {
  border-bottom: 1px solid var(--kitarino-black) !important;
}

.ds-arrow-link .ds-arrow-icon {
  color: var(--kitarino-accent) !important;
}

.ds-arrow-icon-mobile {
  flex-shrink: 0 !important;
  color: var(--kitarino-black) !important;
}

/* ==========================================================================
   5. Submenu Variant 3 (Three Columns with Description)
   ========================================================================== */

.ds-v3-cols {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 372px)) !important;
  column-gap: 70px !important; /* columns land on x=140 / 582 / 1024 @1440 */
  padding-top: 46px !important;
  /* Figma leaves only 44px to the right of column 3, so the 3x372+2x70 grid
     fits at full size instead of being squeezed by a symmetric gutter. */
  padding-right: clamp(20px, 3.06vw, 44px) !important;
}

.ds-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}

.ds-col-heading {
  display: block !important; /* was an <h3>; keep block flow now it is a <span> */
  position: relative !important;
  width: fit-content !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important; /* Futura PT Demi */
  line-height: normal !important;
  color: var(--kitarino-magenta) !important;
}

.ds-col-heading:hover {
  cursor: pointer !important;
}
.ds-col-description {
  margin: 14px 0 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important; /* Futura PT Book */
  line-height: 21px !important;
  color: var(--kitarino-black) !important;
}

.ds-col-description a {
  color: inherit !important;
}

.ds-col-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  height: 21px !important;
  font-size: 16px !important;
  font-weight: 500 !important; /* Futura PT Demi */
  line-height: normal !important;
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.ds-col-link:hover {
  border-bottom: 1px solid var(--kitarino-black) !important;
}

/* Every 16px row in the panels is a 21px line box in Figma. Pinning it keeps
   the row pitch (39px / 31px / 27px) exact when Futura PT falls back. */
.ds-city-link,
.ds-drilldown-back,
.ds-drilldown-links > a,
.ds-left-heading,
.ds-sublinks li a,
.ds-arrow-link,
.ds-col-heading,
.ds-col-link {
  line-height: 21px !important;
}

/* ==========================================================================
   6. Mobile Header, Drawer & Accordions
   Synced to the Figma mobile file (414px canvas): nodes 2007:1940 closed
   header, 2007:2340 drawer, 2007:2526 / 2007:2629 Standorte states 1 and 2,
   4004:645 Ueber Uns, 4004:710 Karriere.
   ========================================================================== */

/* Hamburger: 72x46 rounded pill at the right of the 80px mobile header. */
.ds-kitarino-hamburger {
  display: none !important;
  width: 31px !important;
  height: 18px !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: none !important;
  cursor: pointer !important;
  flex-direction: column !important;
  align-items: end !important;
  justify-content: space-between !important;
  flex: 0 0 auto !important;
}

.ds-kitarino-hamburger span:nth-child(odd) {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--kitarino-black) !important;
}

.ds-kitarino-hamburger span:nth-child(even) {
  display: block !important;
  width: 90% !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--kitarino-black) !important;
}

/* Purple utility strip directly under the mobile header (Figma 2007:1962:
   full width, 40px tall, centred icon + label). */
.ds-kitarino-mobile-utility {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 40px !important;
  /* Figma 2007:1962: rounded-bl-[10px] rounded-br-[10px] - it hangs off the
     bottom of the header, so only the bottom corners round. */
  border-radius: 0 0 10px 10px !important;
  background: var(--kitarino-lila) !important;
  color: var(--kitarino-white) !important;
  font-family: var(--font-family) !important;
  font-size: 16px !important;
  font-weight: 500 !important; /* Futura PT Medium */
  line-height: 21px !important;
  text-decoration: none !important;
}

/* --- Backdrop --- */
.ds-kitarino-mobile-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease !important;
  z-index: 9998 !important;
}

.ds-kitarino-mobile-overlay.ds-is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* --- Drawer --- */
.ds-kitarino-mobile-drawer {
  position: fixed !important;
  /* Full-bleed at every width - never a 414px panel against the right edge. */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--kitarino-white) !important;
  font-family: var(--font-family) !important;
  /* Opens on top of the page with a fade - no slide. */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 9999 !important;
}

.ds-kitarino-mobile-drawer.ds-is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* The hamburger sits behind the drawer, so it has to be gone before the fade
   starts rather than showing through the half-transparent panel. */
body.ds-kitarino-drawer-open .ds-kitarino-hamburger {
  display: none !important;
}

body.ds-kitarino-drawer-open {
  overflow: hidden !important;
}

/* Drawer header: 80px, logo 124x33 at x=30, close button 72x46 at the right. */
.ds-kitarino-mobile-drawer .ds-header {
  display: flex !important;
  align-items: center !important;
  height: 80px !important;
  flex: 0 0 auto !important;
  padding: 0 10px 0 30px !important;
  border-bottom: 1px solid var(--kitarino-hairline) !important;
}

.ds-kitarino-mobile-drawer .ds-logo {
  width: 124px !important;
  height: 33px !important;
  flex: 0 0 auto !important;
}

.ds-kitarino-mobile-drawer .ds-logo svg,
.ds-kitarino-mobile-drawer .ds-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.ds-kitarino-drawer-close {
  width: 72px !important;
  height: 46px !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 22px !important;
  background: var(--kitarino-white) !important;
  color: var(--kitarino-black) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  /* Fades in just behind the panel so it reads as replacing the hamburger. */
  opacity: 0 !important;
  transition: opacity 0.25s ease 0.12s !important;
}

.ds-kitarino-mobile-drawer.ds-is-active .ds-kitarino-drawer-close {
  opacity: 1 !important;
}

.ds-kitarino-drawer-close svg {
  width: 24px !important;
  height: 24px !important;
}

/* --- Accordion rows --- */
.ds-menu-items {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
}

/* The drawer nav wraps the list; it must not shrink away from the CTA block. */
.ds-kitarino-mobile-drawer > nav {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
}

.ds-menu-item {
  --kitarino-accent: var(--kitarino-lila) !important;
  --kitarino-submenu-accent: var(--kitarino-accent) !important;
  border-bottom: 1px solid var(--kitarino-hairline) !important;
}

.ds-menu-item.ds-accent-gelb {
  --kitarino-accent: var(--kitarino-gelb) !important;
}

.ds-menu-item.ds-accent-magenta {
  --kitarino-accent: var(--kitarino-magenta) !important;
}

.ds-menu-item.ds-submenu-variant-1 {
  --kitarino-submenu-accent: var(--kitarino-lila) !important;
}

.ds-menu-item.ds-submenu-variant-2 {
  --kitarino-submenu-accent: var(--kitarino-gelb) !important;
}

.ds-menu-item.ds-submenu-variant-3 {
  --kitarino-submenu-accent: var(--kitarino-magenta) !important;
}

/* Figma row: 24px + 45px label + 24px = 93px pitch, label 35px Demi at x=27. */
.ds-menu-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 24px 30px 24px 27px !important;
  border: none !important;
  background: none !important;
  font-family: inherit !important;
  font-size: 35px !important;
  font-weight: 500 !important; /* Futura PT Demi */
  line-height: 45px !important;
  color: var(--kitarino-black) !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  text-transform: none !important;
}

.ds-menu-row-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.ds-menu-row-chevron {
  width: 27px !important;
  height: 13px !important;
  flex: 0 0 auto !important;
  fill: currentColor !important;
  transition: transform 0.25s ease !important;
}

.ds-menu-row.ds-active,
.ds-menu-row:hover {
  color: var(--kitarino-submenu-accent) !important;
}

.ds-menu-row.ds-active .ds-menu-row-chevron {
  transform: rotate(180deg) !important;
}

/* --- Expanded panel --- */
/* Row label already carries 24px of bottom padding, so the panel only adds
   its own 24px tail before the divider. */
.ds-sub-menu {
  display: none !important;
  padding: 0 30px 24px !important;
}

.ds-menu-row.ds-active + .ds-sub-menu {
  display: block !important;
}

.ds-m-view.ds-hidden {
  display: none !important;
}

/* Level-2 links: 16px, 21px line box, 41px pitch (cities) or 37px (kitas). */
.ds-m-sublink,
.ds-m-sublink-arrow,
.ds-m-all-link,
.ds-m-back {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 21px !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 21px !important;
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.ds-m-sublink-arrow,
.ds-m-all-link {
  font-weight: 500 !important; /* Futura PT Demi */
}

.ds-m-sublink {
  font-weight: 400 !important; /* Futura PT Book */
}

.ds-m-sublink-arrow + .ds-m-sublink-arrow {
  margin-top: 20px !important; /* 21 + 20 = 41px pitch */
}

.ds-m-sublink + .ds-m-sublink {
  margin-top: 16px !important; /* 21 + 16 = 37px pitch */
}

.ds-m-sublink:hover,
.ds-m-sublink-arrow:hover,
.ds-m-all-link:hover {
  color: var(--kitarino-accent) !important;
}

.ds-m-sublink-arrow .ds-arrow-icon,
.ds-m-all-link .ds-arrow-icon {
  color: var(--kitarino-accent) !important;
}

/* Variant 2 heading (Figma: accent colour, 16px Demi, 24px before the links) */
.ds-m-heading {
  display: block !important;
  margin: 0 0 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
  color: var(--kitarino-gelb) !important;
}

.ds-m-links {
  display: flex !important;
  flex-direction: column !important;
}

.ds-m-links + .ds-m-all-link {
  margin-top: 24px !important;
}

/* Pill cards: 65px tall, 20px radius, soft shadow, 15px apart. */
.ds-m-cards {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 15px !important;
  margin-top: 40px !important;
}

.ds-m-card {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 41px !important;
  min-width: 148px !important;
  max-width: 100% !important;
  height: 65px !important;
  padding: 0 20px !important;
  border-radius: 20px !important;
  background: var(--kitarino-white) !important;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1) !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 500 !important; /* Futura PT Medium */
  line-height: normal !important;
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  transition: transform 0.2s ease !important;
}

.ds-m-card:hover {
  transform: translateY(-2px) !important;
}

.ds-m-card .ds-arrow-icon {
  color: var(--kitarino-accent) !important;
}

/* Variant 1 master button sits below the city list. */
.ds-m-view-1 .ds-m-card {
  margin-top: 30px !important;
}

/* --- Variant 1 drilldown (Figma 2007:2629) --- */
/* Back arrow at x=30, its label at x=68; the kita list aligns to the label. */
.ds-m-back {
  gap: 19px !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-weight: 500 !important;
  color: var(--kitarino-accent) !important;
  cursor: pointer !important;
}

.ds-m-back .ds-back-arrow {
  width: 19px !important;
  height: 12px !important;
  flex: 0 0 auto !important;
  fill: currentColor !important;
}

.ds-m-kita-list {
  display: flex !important;
  flex-direction: column !important;
  margin: 22px 0 0 38px !important;
}

.ds-m-view-2 .ds-m-all-link {
  margin: 23px 0 0 38px !important;
}

/* --- Drawer footer --- */
.ds-cta-container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  padding: 40px 27px 0 !important;
}

/* 16px (not the desktop 18px): both pills have to sit side by side inside the
   414px drawer, and the Nunito fallback runs wider than Futura PT. */
.ds-kitarino-mobile-drawer .ds-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 100px !important;
  padding: 5px 12px !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important; /* Futura PT Medium */
  line-height: normal !important;
  background: var(--kitarino-white) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease !important;
}

.ds-btn-magenta {
  border: 1.5px solid var(--kitarino-magenta) !important;
  color: var(--kitarino-magenta) !important;
}

.ds-btn-magenta:hover {
  background-color: var(--kitarino-magenta) !important;
  color: var(--kitarino-white) !important;
}

.ds-btn-purple,
.ds-btn-lila {
  border: 1.5px solid var(--kitarino-lila) !important;
  color: var(--kitarino-lila) !important;
}

.ds-btn-purple:hover,
.ds-btn-lila:hover {
  background-color: var(--kitarino-lila) !important;
  color: var(--kitarino-white) !important;
}

.ds-footer-links {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  padding: 24px 27px 30px !important;
  font-size: 16px !important;
  font-weight: 400 !important; /* Futura PT Book */
  line-height: 21px !important;
  color: var(--kitarino-black) !important;
}

.ds-footer-links a {
  color: var(--kitarino-black) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.ds-footer-links a:hover {
  color: var(--kitarino-lila) !important;
}

/* ==========================================================================
   7. Media Queries & Responsive Logic
   ========================================================================== */

@media screen and (max-width: 1024px) {
  .ds-nav-links,
  .ds-nav-actions {
    display: none !important;
  }

  .ds-kitarino-hamburger {
    background: transparent !important;
    display: flex !important;
  }

  .ds-kitarino-mobile-utility {
    display: flex !important;
  }

  .ds-header-wrapper .ds-navbar {
    height: 80px !important;
    padding: 0 30px 0 30px !important;
  }

  .ds-nav-logo {
    width: 124px !important;
    height: 33px !important;
  }
}

/* Phones narrower than the 414px Figma canvas: scale the 35px row label down
   so long items ("Kita-Alltag") never overflow the chevron. */
@media screen and (max-width: 400px) {
  .ds-menu-row {
    font-size: 30px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .ds-sub-menu,
  .ds-cta-container,
  .ds-footer-links {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Narrow desktop (just above the 1024px drawer breakpoint): the 1440px design
   does not fit intrinsically, so tighten type and spacing rather than overlap. */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .ds-nav-links {
    margin-left: 16px !important;
    gap: 16px !important;
  }

  .ds-nav-links > li > a,
  .ds-nav-links > li > button,
  .ds-nav-links > li > .ds-nav-item-btn {
    font-size: 16px !important;
  }

  .ds-nav-actions {
    gap: 10px !important;
  }

  .ds-btn-outline {
    font-size: 15px !important;
    padding: 5px 12px !important;
    gap: 8px !important;
  }

  .ds-btn-outline svg {
    width: 16px !important;
    height: 12px !important;
  }
}