/* ---------------------------------------------------------------------------
   cleansort-Markenauftritt
   Echte Werte von cleansort.de: Teal #00908F, Cyan #17BABA, Navy #112424,
   Schrift "Inter". Kopfzeile hell (Modus „default") bzw. dunkel (Modus „slate").
--------------------------------------------------------------------------- */

:root {
  --md-accent-fg-color: #17BABA;                       /* Cyan – Hover/Akzent */
  --md-accent-fg-color--transparent: rgba(23, 186, 186, 0.1);
}

/* Inhalts- und Navigationslinks in cleansort-Teal */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #00908F;
}
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #0AC4B3;   /* im Dunkelmodus etwas heller für Lesbarkeit */
}

/* Aktiver Navigationspunkt links deutlich in cleansort-Teal hervorheben */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: #00908F;
  font-weight: 700;
}

/* Dunkle Wortmarke im Dunkelmodus aufhellen, damit sie auf schwarzer
   Kopfzeile sichtbar bleibt */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  filter: brightness(0) invert(1);
}

/* Helle Kopfzeile optisch von der weißen Seite abgrenzen */
[data-md-color-scheme="default"] .md-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* ---------------------------------------------------------------------------
   Kopfzeile: Portalname UND aktuellen Seitennamen dauerhaft anzeigen
   (Material blendet beim Scrollen sonst den Portalnamen aus)
--------------------------------------------------------------------------- */
.md-header__title .md-header__ellipsis {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.md-header__title .md-header__topic {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  max-width: none;
}
/* Trenner und dezenterer Stil vor dem Seitennamen */
.md-header__title .md-header__topic[data-md-component="header-topic"] {
  font-weight: 400;
  opacity: .8 !important;
  flex: 0 0 auto;
}
.md-header__title .md-header__topic[data-md-component="header-topic"]::before {
  content: "·";
  margin: 0 .4rem;
  opacity: .6;
}

/* ---------------------------------------------------------------------------
   Login-/Passwort-Seite: zentrierte Karte mit cleansort-Logo
--------------------------------------------------------------------------- */
#mkdocs-decrypt-form {
  max-width: 420px;
  margin: 4rem auto;
  padding: 2.5rem 2rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  background: var(--md-default-bg-color);
}
#mkdocs-decrypt-form::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  background: url("../assets/img/signet-gradient.svg") no-repeat center / contain;
}
#mkdocs-decrypt-form h1 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 .5rem;
  font-weight: 700;
}
#mkdocs-decrypt-form > p {
  color: var(--md-default-fg-color--light);
  font-size: .78rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
#mkdocs-content-password {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .9rem;
  font-size: .9rem;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  outline: none;
  transition: border-color .2s ease;
}
#mkdocs-content-password:focus {
  border-color: #00908F;
}
#mkdocs-decrypt-form::after {
  content: "↵ Mit Enter bestätigen";
  display: block;
  margin-top: .8rem;
  font-size: .72rem;
  color: var(--md-default-fg-color--lighter);
}
#mkdocs-decrypt-msg {
  color: #DC5097;
  font-size: .8rem;
  min-height: 1.2em;
  margin: .75rem 0 0;
}

/* ---------------------------------------------------------------------------
   Gesperrte Seiten: Navigation, Inhaltsverzeichnis und Suche ausblenden,
   damit weder Bereiche noch Themen vor dem Login sichtbar sind.
   (Greift, solange das Anmeldeformular vorhanden ist; nach dem Login
   verschwindet das Formular und alles erscheint automatisch wieder.)
--------------------------------------------------------------------------- */
body:not(.cs-authenticated):has(#mkdocs-decrypt-form) .md-sidebar--primary,
body:not(.cs-authenticated):has(#mkdocs-decrypt-form) .md-sidebar--secondary,
body:not(.cs-authenticated):has(#mkdocs-decrypt-form) .md-search,
body:not(.cs-authenticated):has(#mkdocs-decrypt-form) .md-footer__inner {
  display: none !important;
}

/* Auf der Admin-Anmeldung (bereits eingeloggt) das Inhaltsverzeichnis rechts
   trotzdem verbergen, damit die Admin-Themen nicht durchscheinen – die
   Navigation links bleibt aber sichtbar zum Zurückspringen. */
body.cs-authenticated:has(#mkdocs-decrypt-form) .md-sidebar--secondary {
  display: none !important;
}

/* Abmelden-Knopf in der Kopfzeile */
.cs-logout {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: .2rem;
  padding: 0 .5rem;
  height: 2.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  color: var(--md-primary-bg-color);
  border-radius: .2rem;
  transition: color .2s ease, background .2s ease;
}
.cs-logout svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}
.cs-logout:hover {
  color: #00908F;
  background: rgba(0, 0, 0, .05);
}
/* Auf sehr schmalen Bildschirmen nur das Symbol zeigen */
@media screen and (max-width: 44.9375em) {
  .cs-logout span { display: none; }
}

/* ---------------------------------------------------------------------------
   Feinschliff: sanfter Hover-Effekt für die Startseiten-Kacheln
--------------------------------------------------------------------------- */
.md-typeset .grid.cards > ul > li {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Schaubilder – einfache Box-/Pfeil-Diagramme in cleansort-Farben.
   Bewusst reines HTML/CSS (kein JavaScript), damit sie auch hinter dem
   Passwortschutz zuverlässig erscheinen, sobald die Seite entschlüsselt ist.
--------------------------------------------------------------------------- */
.cs-figure { margin: 1.8rem 0; }
.cs-figure__caption {
  font-size: .72rem;
  color: var(--md-default-fg-color--light);
  text-align: center;
  margin-top: .7rem;
  font-style: italic;
}

/* Reihe (horizontal) bzw. Stapel (vertikal) von Boxen */
.cs-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: .6rem;
}
.cs-flow--col { flex-direction: column; align-items: center; }

/* Eine Box */
.cs-box {
  flex: 1 1 190px;
  min-width: 150px;
  max-width: 300px;
  border: 2px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  padding: .85rem 1rem;
  background: var(--md-default-bg-color);
  text-align: center;
}
.cs-box__title { font-weight: 700; font-size: .85rem; margin-bottom: .2rem; }
.cs-box__text  { font-size: .72rem; color: var(--md-default-fg-color--light); line-height: 1.45; }

/* Farbvarianten (cleansort-Palette) */
.cs-box--projekt   { border-color: #00908F; }
.cs-box--projekt .cs-box__title { color: #00908F; }
.cs-box--fertigung { border-color: #DC5097; }
.cs-box--fertigung .cs-box__title { color: #DC5097; }
.cs-box--accent    { border-color: #17BABA; }
.cs-box--accent .cs-box__title { color: #0E8C8C; }

/* Hervorgehobene Hauptbox (z. B. Projekt = Rückgrat) */
.cs-box--main {
  flex-basis: 100%;
  max-width: 440px;
  background: linear-gradient(135deg, rgba(0,144,143,.10), rgba(23,186,186,.12));
  border-color: #00908F;
  border-width: 3px;
}
.cs-box--main .cs-box__title { font-size: 1rem; }

/* Pfeile zwischen den Boxen */
.cs-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 .15rem;
  color: #17BABA;
}
.cs-arrow__sym { font-size: 1.5rem; line-height: 1; }
.cs-arrow__label {
  font-size: .64rem;
  color: var(--md-default-fg-color--light);
  max-width: 150px;
  text-align: center;
  line-height: 1.3;
  margin-top: .15rem;
}
.cs-arrow--bridge .cs-arrow__sym { color: #DC5097; }

/* Mehrere Eingangsboxen, die in eine Box zusammenlaufen */
.cs-inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.cs-inputs .cs-box { flex: 1 1 150px; }

/* ---------------------------------------------------------------------------
   Admin-Bereich kenntlich machen: Abzeichen in der fixierten Kopfzeile
   (per portal.js gesetzt, sobald die URL „/admin" enthält) + pinke Linie.
--------------------------------------------------------------------------- */
.cs-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .5rem;
  padding: .12rem .55rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: #DC5097;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* dezente pinke Linie unter der Kopfzeile als zusätzlicher Hinweis */
body.cs-admin .md-header {
  box-shadow: inset 0 -3px 0 #DC5097;
}

/* Eigener Hinweis-Kasten „Nur für Administratoren" in der Admin-Farbe (pink)
   statt im Standard-Rot von !!! danger. Verwendung: !!! cs-admin-note "…" */
.md-typeset .admonition.cs-admin-note,
.md-typeset details.cs-admin-note {
  border-color: #DC5097;
}
.md-typeset .cs-admin-note > .admonition-title {
  background-color: rgba(220, 80, 151, 0.12);
}
.md-typeset .cs-admin-note > .admonition-title::before {
  background-color: #DC5097;
  -webkit-mask-image: var(--md-admonition-icon--danger);
          mask-image: var(--md-admonition-icon--danger);
}

/* Aufklappbare Schritt-Blöcke (??? note/info) in der cleansort-Grundfarbe
   (Teal #00908F) statt im Material-Standardblau – einheitlich in Testlauf und
   Admin. Spezifischere Selektoren als Materials eigene note/info-Regeln.
   Nicht-aufklappbare Admonitions (warning/example/cs-admin-note) bleiben in
   ihrer eigenen Farbe. */
.md-typeset details.note,
.md-typeset details.info {
  border-color: #00908F;
}
.md-typeset details.note > summary,
.md-typeset details.info > summary {
  background-color: rgba(0, 144, 143, 0.10);
}
.md-typeset details.note > summary::before,
.md-typeset details.info > summary::before {
  background-color: #00908F;
}

/* „Alle ein-/ausklappen"-Knopf oben im rechten Inhaltsverzeichnis */
.cs-collapse-all {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: .15rem 0 .6rem;
  padding: .2rem .55rem;
  font-size: .62rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
  background: none;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.cs-collapse-all:hover {
  color: #00908F;
  border-color: #00908F;
}
@media screen and (max-width: 44.9375em) {
  .cs-admin-badge { font-size: .6rem; padding: .1rem .45rem; }
}