/* ==========================================================================
   MM · ABSCHNITTS-TABS
   --------------------------------------------------------------------------
   Ein Muster für jede Tab-Leiste der Seite: „Mein Bereich“, „Mein Konto“,
   Studio, und alles Künftige.

   WARUM DIESE DATEI ÜBERHAUPT NÖTIG IST
   Hello Elementor setzt in theme.css  .page-content a{text-decoration:underline}.
   Diese Regel ist einen Tick spezifischer als das text-decoration:none, das die
   Plugins selbst mitbringen — deshalb sind die Reiter in „Mein Bereich“ heute
   unterstrichen, auch die inaktiven. Hier wird das mit derselben Spezifität
   und einer späteren Position im Dokument gedreht, ohne !important.

   DIE MARKIERUNG
   Der aktive Reiter bekommt eine Linie als Innenschatten, nicht als
   text-decoration. Dadurch klebt sie nicht am Wort, bricht bei zwei Zeilen
   nicht mit um und sitzt immer auf der Trennlinie.

   AM TELEFON
   Fünf Reiter passen nicht nebeneinander. Statt sie auf 11 px zu quetschen
   oder in zwei Zeilen zu brechen, schiebt sich die Zeile seitlich.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Die Leiste
   -------------------------------------------------------------------------- */
.mm-tabs,
.mms-dashboard-tabs,
.mms-account-tabs{
  position:relative;
  display:flex;
  gap:4px;
  margin-bottom:var(--mm-s-s);
  border-bottom:1px solid var(--mm-line);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mm-tabs::-webkit-scrollbar,
.mms-dashboard-tabs::-webkit-scrollbar,
.mms-account-tabs::-webkit-scrollbar{ display:none; }

/* --------------------------------------------------------------------------
   2 · Ein Reiter
   -------------------------------------------------------------------------- */
.mm-tabs > *,
.mms-dashboard-tab,
.mms-account-tab{
  flex:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;          /* Fingerkuppe — nie kleiner */
  box-sizing:border-box;
  padding:0 16px;
  border:0;
  background:none;
  cursor:pointer;
  font-family:var(--mm-font-sans);
  font-size:15px;
  font-weight:400;
  line-height:1.25;
  color:var(--mm-ink-45);
  white-space:nowrap;
  transition:color var(--mm-t) var(--mm-ease),
             box-shadow var(--mm-t) var(--mm-ease);
}

/* Schlägt .page-content a aus theme.css — gleiche Spezifität, spätere Regel */
.page-content .mms-dashboard-tab,
.page-content .mms-account-tab,
.page-content .mm-tabs > a,
.mm-tabs > *,
.mms-dashboard-tab,
.mms-account-tab{
  text-decoration:none;
}

.mm-tabs > *:hover,
.mms-dashboard-tab:hover,
.mms-account-tab:hover{
  color:var(--mm-blue);
}

.mm-tabs > .is-active,
.mm-tabs > [aria-selected="true"],
.mms-dashboard-tab.is-active,
.mms-account-tab.is-active{
  color:var(--mm-ink);
  box-shadow:inset 0 -2px 0 var(--mm-blue);
}

.mm-tabs > *:focus-visible,
.mms-dashboard-tab:focus-visible,
.mms-account-tab:focus-visible{
  outline:2px solid var(--mm-blue);
  outline-offset:-2px;
  border-radius:6px;
}

/* --------------------------------------------------------------------------
   3 · Telefon — etwas kompakter, aber lesbar. Kein Umbruch, kein Quetschen.
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  .mm-tabs > *,
  .mms-dashboard-tab,
  .mms-account-tab{
    padding:0 13px;
    font-size:14px;
  }
  /* Andeutung, dass rechts noch etwas kommt */
  .mm-tabs,
  .mms-dashboard-tabs,
  .mms-account-tabs{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  }
}

/* --------------------------------------------------------------------------
   4 · Am Schreibtisch wird „Mein Bereich“ zur Seitenspalte.
       Dort gilt Muster C — blau hinterlegte Pille statt Linie.
       Das Plugin bringt das ab 900 px selbst mit; hier nur die Werte
       auf die Tokens ziehen, damit eine Kit-Änderung durchschlägt.
   -------------------------------------------------------------------------- */
@media (min-width:900px){
  .mms-dashboard-tabs{
    /* Steht auch im Plugin, hier bewusst noch einmal: sonst haengt die
       Spaltenansicht davon ab, dass das Plugin diese Zeile behaelt. */
    flex-direction:column;
    flex-wrap:nowrap;
    border-bottom:0;
    margin-bottom:0;
    overflow:visible;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .mms-dashboard-tab{
    width:100%;
    text-align:left;
    white-space:normal;
    padding:0 14px;
    border-radius:var(--mm-r-control);
    font-size:16px;
    box-shadow:none;
  }
  .mms-dashboard-tab:hover,
  .mms-dashboard-tab.is-active{
    background:var(--mm-blue-soft);
    color:var(--mm-blue);
    box-shadow:none;
  }
}