/* =========================================================
   24_mdPages.css — MD-Seiten spezifisch
   Enthält: Content-/TOC-Feinschliff, Markdown-spezifische Elemente
   ---------------------------------------------------------
   Erwartete Projekt-Variablen:
     --ix-color-primary
     --ix-color-accent     (optional)
   ========================================================= */

/* Volle Breite für Content, wenn Sidebar aktiv ist */
@media screen and (min-width: 76.25em) {
  [dir="ltr"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner,
  [dir="ltr"] .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner,
  [dir="rtl"] .md-sidebar--secondary:not([hidden]) ~ .md-content > .md-content__inner,
  [dir="rtl"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
    margin: 0 !important;
    margin-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  .md-content { max-width: none !important; }
}

/* 1) Tabs: Labels müssen über dem Content liegen (Klicks nicht blockieren) */
.md-typeset .tabbed-set > .tabbed-labels {
  position: relative;
  z-index: 2;
}
.md-typeset .tabbed-set > .tabbed-content {
  position: relative;
  z-index: 1;
  margin-top: 0; /* falls irgendwo negative Margins gesetzt wurden */
}

/* 2) Klicks immer ans <label> durchreichen, nicht am <a> „hängen bleiben“ */
.md-typeset .tabbed-labels--linked a {
  pointer-events: none;   /* ganz wichtig */
}

/* ---------------------------------------------------------
   Grid-Utilities für Markdown-Karten (Material for MkDocs)
   data-columns + data-gutter Steuerung
   --------------------------------------------------------- */

/* Basis */
.md-typeset .grid {
  display: grid;
  gap: 1rem;
}

/* Spaltenzahl */
.md-typeset .grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-typeset .grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-typeset .grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Gutters (1 = klein, 2 = mittel, 3 = groß) */
.md-typeset .grid[data-gutter="1"] { gap: .5rem; }
.md-typeset .grid[data-gutter="2"] { gap: 1rem; }
.md-typeset .grid[data-gutter="3"] { gap: 1.5rem; }

/* Responsive: auf schmalen Screens einspaltig */
@media (max-width: 800px) {
  .md-typeset .grid[data-columns] {
    grid-template-columns: 1fr !important;
  }
}

/* Karten-Icons optional automatisch in Primärfarbe */
.md-typeset .grid.cards .md-icon {
  color: var(--ix-color-primary);
}

/* ---------------------------------------------------------
   Zweispaltiges Layout: Prozessliste links, Text rechts
   .ix-grid-2col  (.ix-left | .ix-right)
   --------------------------------------------------------- */
.md-typeset .ix-grid-2col {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* links schmaler, rechts breiter */
  gap: 2rem;
  align-items: start;
}
.md-typeset .ix-grid-2col .ix-left  { 
  min-width: 240px; 
  padding-top: 20px;
}

.md-typeset .ix-grid-2col .ix-right { min-width: 0; }   /* verhindert Overflow -> Umbruch */

@media (max-width: 800px) {
  .md-typeset .ix-grid-2col {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .md-typeset .ix-grid-2col .ix-left {
    border-bottom: 1px solid var(--md-default-fg-color--lighter);
    padding-bottom: 1rem;
    margin-bottom: .75rem;
  }
}

/* Feinabstimmung Schritteliste links */
.md-typeset .ix-left li { margin-bottom: .65rem; }
.md-typeset .ix-left li strong { color: var(--ix-color-primary); }

/* ---------------------------------------------------------
   Hilfsklassen
   --------------------------------------------------------- */

/* Zentrierte Überschriften (wenn Attr-List aktiv: ## Titel {: .centered }) */
.md-typeset .centered,
.md-typeset .h2-center {
  text-align: center;
}

/* Icon-Farben via Projektvariablen (kannst du im MD mit <span class="icon-..."> nutzen) */
.md-typeset .icon       { color: var(--ix-color-primary); }
.md-typeset .icon-primary   { color: var(--ix-color-primary); }
.md-typeset .icon-accent    { color: var(--ix-color-accent, var(--ix-color-primary)); }
.md-typeset .icon-success   { color: #22C55E; }
.md-typeset .icon-warning   { color: #EAB308; }
.md-typeset .icon-danger    { color: #EF4444; }

/* Optional: etwas kompaktere Card-Listen */
.md-typeset .grid.cards li { margin: 0; }


/* ******************************************************************** */
/* Stile nur für Admonitions in der linken Spalte                       */
/*                                                                      */
/* ******************************************************************** */


/* =========================================================
   Harmonisches Farbset für Admonitions
   ========================================================= */

/* --- TIP (Amber) ---------------------------------------- */
.md-typeset details.tip {
  background-color: #FFF8E1 !important;
  border: .075rem solid #F59E0B !important;
  color: #4A3000 !important;
}
.md-typeset details.tip > summary {
  color: #4A3000 !important;
  font-weight: 600;
}
.md-typeset details.tip > summary:after {
  color: #F59E0B !important;
  background-color: #F59E0B !important;
}

/* --- QUESTION (Blau) ------------------------------------ */
.md-typeset details.question {
  background-color: #E8F1FB !important;
  border: .075rem solid #3B82F6 !important;
  color: #1E3A8A !important;
}
.md-typeset details.question > summary {
  color: #1E3A8A !important;
  font-weight: 600;
}
.md-typeset details.question > summary:after {
  color: #3B82F6 !important;
  background-color: #3B82F6 !important;
}
.md-typeset details.question > summary:before {
  background-color: #3B82F6 !important;
}

/* --- WARNING (hell-orange) ------------------------------- */
.md-typeset details.warning {
  background-color: #FFF4E5 !important;
  border: .075rem solid #FB923C !important;
  color: #7C2D12 !important;
}
.md-typeset details.warning > summary {
  color: #7C2D12 !important;
  font-weight: 600;
}
.md-typeset details.warning > summary:after {
  color: #FB923C !important;
  background-color: #FB923C !important;
}

/* --- INFO (neutral-grau) -------------------------------- */
.md-typeset details.info {
  background-color: #F3F4F6 !important;
  border: .075rem solid #9CA3AF !important;
  color: #111827 !important;
}
.md-typeset details.info > summary {
  color: #111827 !important;
  font-weight: 600;
}
.md-typeset details.info > summary:after {
  color: #9CA3AF !important;
  background-color: #9CA3AF !important;
}


/* Zähler im linken Block zurücksetzen */
.md-typeset .ix-left { counter-reset: tipstep; }

.md-typeset .ix-left details.tip > summary:before {
  /* Theme-Icon (Masken-SVG) neutralisieren */
  -webkit-mask-image: none !important;
  mask-image: none !important;

  /* Nummer zählen + anzeigen */
  counter-increment: tipstep;
  content: counter(tipstep) !important;

  /* Badge-Optik */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 1.25em !important;
  height: 1.25em !important;
  border-radius: 999px !important;
  margin-inline-end: .5rem !important;

  background-color: var(--ix-color-primary, #F59E0B) !important;
  color: var(--ix-color-neutral, #F59E0B) !important;
  font-weight: 700 !important;
  font-size: .75rem !important;
  line-height: 1 !important;
}

/* --- Variante: Outline-Nummern-Badge --- */
/*
.md-typeset .ix-left details.tip > summary:before {
  -webkit-mask-image: none !important;
  mask-image: none !important;

  counter-increment: tipstep;
  content: counter(tipstep) !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 1.25em !important;
  height: 1.25em !important;
  border-radius: 999px !important;
  margin-inline-end: .5rem !important;

  background-color: transparent !important;
  border: 2px solid var(--ix-color-primary, #F59E0B) !important;
  color: var(--ix-color-neutral, #F59E0B) !important;

  font-weight: 700 !important;
  font-size: .75rem !important;
  line-height: 1 !important;
}




/* --- AMBER (ix-box-amber) ------------------------------- */
.md-typeset .ix-box-amber {
  background-color: #FFF8E1 !important;
  border: .075rem solid #F59E0B !important;
  color: #4A3000 !important;
  padding: 0.6rem 1.25rem 1rem 1.25rem;  /* oben reduziert */
  border-radius: .5rem;
  margin: 1em 0;
}

.md-typeset .ix-box-amber h4 {
  color: #4A3000 !important;
  font-weight: 600;
  margin-top: 0;
}