/* ===============================
   Two / Three Column Menu – Final CSS
   (includes: neutralize Elementor styles, wrapping, equal spacing, SVG arrow,
   desktop 30/30/40, mobile slide (<=767px))
   =============================== */

/* -------- Base layout (desktop/tablet) -------- */

.tcm-wrap{
  display:flex;
  gap:16px;
  width:100%;
  align-items:flex-start;
}

@media (max-width: 1024px){
  .tcm-wrap{
    gap: 0 !important;
  }
}

.tcm-col{
  min-width:0;
  box-sizing:border-box;
}

/* Desktop widths */
.tcm-col--lvl1{ width:35%; }
.tcm-col--lvl2{ width:35%; }
.tcm-col--lvl3{ width:30%; }

/* Panels */
.tcm-panel{ display:none; }
.tcm-panel.is-active{ display:block; }

/* -------- Neutralize Elementor / theme styling -------- */
.tcm-wrap button,
.tcm-wrap [role="button"],
.tcm-wrap a{
  padding: 0;
  background: none;
  border-radius: 0;
  color: inherit;
  text-align: left;
}

.tcm-wrap button:hover,
.tcm-wrap button:focus,
.tcm-wrap [role="button"]:hover,
.tcm-wrap [role="button"]:focus,
.tcm-wrap a:hover,
.tcm-wrap a:focus{
  background: none;
  color: inherit;
  box-shadow: none;
}

.tcm-wrap button{
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}

.tcm-wrap button:focus-visible,
.tcm-wrap [role="button"]:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* -------- Pure-text lists (neutral) -------- */
.tcm-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.tcm-list-item{
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Links / Buttons in list neutral */
.tcm-list .tcm-link,
.tcm-list .tcm-btn,
.tcm-list [role="button"]{
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  text-align: left;
  display: block;
}

/* -------- Full-width items + arrow right -------- */
.tcm-btn,
.tcm-link,
.tcm-list .tcm-link,
.tcm-list .tcm-btn,
.tcm-wrap [role="button"]{
  width: 100%;
  display: flex;
  align-items: flex-start;        /* allows multi-line */
  justify-content: space-between;
  box-sizing: border-box;
	
	font-size: 1em;
	font-weight: 600;
	
	min-height: 2em;
	line-height: 1.2;
}

/* Label wrapping (no hyphenation) */
.tcm-label{
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  line-height: 1.3;
}

/* -------- Arrow icon (SVG next to CSS in plugin folder) -------- */

.tcm-arrow{
  width: 25px;
  height: 25px;
  flex: 0 0 25px;

  margin-left: auto;

  /* Farbe (Standard) */
  background-color: currentColor;

  /* Mask (für moderne Browser inkl. iOS Safari) */
  -webkit-mask-image: url("right-arrow.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("right-arrow.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.tcm-btn.is-active .tcm-arrow {
	transform: scale(1.25) translatex(0.25em);
	transition: all .5s;
}

/* -------- Unified vertical spacing (use same gap everywhere) -------- */
:root{
  --tcm-item-gap: 0.5em;
}

/* Spalte 1 nutzt .tcm-item, Spalte 2/3 nutzen .tcm-list-item */
.tcm-item,
.tcm-list-item{
  margin-bottom: var(--tcm-item-gap);
}

.tcm-item:last-child,
.tcm-list-item:last-child{
  margin-bottom: 0;
}

/* Safety: no hidden top margins */
.tcm-list,
.tcm-list-item,
.tcm-btn,
.tcm-link{
  margin-top: 0;
}

/* -------- Mobile slide navigation (<= 1024px) -------- */
/*
  Requires markup:
  <div class="tcm-viewport">
    <div class="tcm-wrap tcm-rail" data-view="l1"> ... </div>
  </div>
*/

@media (max-width: 1024px){

  .tcm-viewport{
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .tcm-rail{
    display: flex;
    flex-direction: row;
    width: 300%;
    gap: 0;                 /* WICHTIG: kein gap */
    transition: transform 280ms ease;
  }

  .tcm-col--lvl1,
  .tcm-col--lvl2,
  .tcm-col--lvl3{
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;  /* verhindert Überlauf */
  }

  .tcm-rail[data-view="l1"]{ transform: translateX(0%); }
  .tcm-rail[data-view="l2"]{ transform: translateX(-100%); }
  .tcm-rail[data-view="l3"]{ transform: translateX(-200%); }
}

/* ===============================
   Back button rows (mobile only)
   =============================== */

.tcm-back-row{
  display: none;          /* desktop: aus */
}

@media (max-width: 1024px){
  .tcm-back-row{
    display: block;
    margin-bottom: var(--tcm-item-gap);
  }

  .tcm-back-btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5em;
  }

  /* kleines Icon: wir nehmen dein Arrow-SVG, nur gedreht */
  .tcm-back-icon{
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-image: url("right-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: rotate(180deg);
  }
}

/* ===============================
   Show arrows on mobile as well
   =============================== */

@media (max-width: 1024px){

  /* Klickbare Menüzeilen behalten Flex-Layout */
  .tcm-btn,
  .tcm-link,
  .tcm-list .tcm-link,
  .tcm-list .tcm-btn{
    display: flex;
    align-items: center;        /* Pfeil vertikal zentrieren */
  }

  /* Pfeil explizit sichtbar halten */
  .tcm-arrow{
    display: block;
    opacity: 0.7;
  }
}