/*
 * Die eine Navigationsleiste von mangold-it.de.
 *
 * Vorher hatte jede Seite ihre eigene: die Startseite eine Kopfzeile mit
 * Klappmenue, die Werkzeugseiten zusaetzlich eine Leiste am unteren Rand, das
 * Dashboard beides, die Reiseverwaltung gar keine. Dazu drei Namen fuer
 * dieselbe Seite. Diese Datei loest das ab.
 *
 * Bewusst OHNE var()-Farben: die Seiten laden unterschiedliche Stylesheets
 * (mi-design.css, global.css, mi-tools.css) mit unterschiedlichen Tokens. Eine
 * Leiste, die ueberall gleich aussehen soll, darf sich darauf nicht verlassen.
 *
 * Die Leiste steht im Fluss (sticky), nicht darueber (fixed). Dadurch braucht
 * keine Seite ein Ausgleichspolster, und keine kann es vergessen.
 */

.mi-navleiste{
  position:sticky; top:0; z-index:500;
  background:rgba(4,20,28,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(234,243,245,.12);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.mi-navinner{max-width:1280px;margin:0 auto;padding:0 clamp(16px,5vw,48px);
  display:flex;align-items:center;gap:20px;height:60px}

.mi-marke{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none}
.mi-marke:hover{text-decoration:none}
.mi-marke svg{width:24px;height:24px;display:block;flex:none}
.mi-marke b{font-family:'Sora',-apple-system,sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.03em;color:#eaf3f5;display:block;line-height:1}
.mi-marke i{display:block;font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#5f7c88;margin-top:3px}

.mi-links{display:flex;align-items:center;gap:20px;margin-left:auto}
.mi-links a{font-size:14px;color:#a7bec7;font-weight:500;white-space:nowrap;text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.mi-links a:hover{color:#eaf3f5;text-decoration:none}
.mi-links a.hier{color:#ff6a3d;border-bottom-color:#ff6a3d}
.mi-links a.hier:hover{color:#ff6a3d}

/* Trennt den oeffentlichen Teil vom persoenlichen Bereich. */
.mi-trenner{width:1px;height:20px;background:rgba(234,243,245,.16);flex:none}
.mi-gruppenlabel{display:none}

.mi-extern::after{content:"↗";font-size:11px;margin-left:3px;opacity:.6}

.mi-burger{display:none;margin-left:auto;width:40px;height:40px;flex:none;
  align-items:center;justify-content:center;border-radius:10px;
  border:1px solid rgba(234,243,245,.22);background:transparent;color:#eaf3f5;cursor:pointer;padding:0}
.mi-burger svg{width:19px;height:19px}
.mi-burger .zu{display:none}
.mi-burger[aria-expanded="true"] .auf{display:none}
.mi-burger[aria-expanded="true"] .zu{display:block}

@media (max-width:940px){
  .mi-burger{display:inline-flex}
  .mi-links{position:absolute;top:60px;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:10px clamp(16px,5vw,48px) 20px;
    background:#072430;border-bottom:1px solid rgba(234,243,245,.12);
    box-shadow:0 18px 44px rgba(0,0,0,.36)}
  .mi-links[hidden]{display:none}
  .mi-links a{padding:13px 2px;font-size:16px;border-bottom:1px solid rgba(234,243,245,.08)}
  .mi-links a.hier{border-bottom-color:rgba(234,243,245,.08);padding-left:10px;
    border-left:3px solid #ff6a3d;margin-left:-13px}
  .mi-trenner{display:none}
  .mi-gruppenlabel{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#5f7c88;
    padding:16px 2px 5px;border:0}
}

/* Die alten Leisten verschwinden, sobald diese Datei geladen ist - auch wenn
   ihr Markup noch irgendwo im Dokument steht. */
.mobile-nav{display:none!important}

/* Start- und Profilseite rechneten den frueher ueberlagernden Kopf in ihr
   Hero-Polster ein. Die Leiste steht jetzt im Fluss, also faellt das weg. */
html[data-seite="start"] .hero,
html[data-seite="ueber"] .hero{padding-top:clamp(48px,6vh,76px)!important}

/* ── Seitenkopf ────────────────────────────────────────────────────────────
   Unter der Navigation steht auf jeder Seite dieselbe Zeile: links Titel und
   Untertitel, rechts die Bedienelemente der jeweiligen Seite. Fruehere zweite
   Leisten mit eigenem Logo und eigener Uhr sind damit entfallen - die Marke
   und die aktuelle Seite stehen bereits in der Navigation. */
.mi-kopfzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 1.75rem;
}
.mi-kopfzeile > .page-header { margin-bottom: 0; }

.mi-kopftitel {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mi-kopftitel svg { width: 20px; height: 20px; }

.mi-kopfunter {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  opacity: 0.68;
}

.mi-kopfaktionen {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  margin-left: auto;
}

@media (max-width: 640px) {
  .mi-kopfaktionen { margin-left: 0; }
}

/* ── Anmeldeschranke ──────────────────────────────────────────────────────
   Jede Seite, die eine Microsoft-365-Anmeldung verlangt, zeigt dieselbe
   Karte. Vorher waren es fuenf verschiedene: die Werkzeugseiten eine
   ganzseitige Schranke, die Reiseverwaltung eine eigene Box ohne Symbol und
   mit anderem Knopftext, das Dashboard ein Widget, Smart Home ein schmales
   Warnband, One-Time Secret einen roten Hinweis.

   Zwei Auspraegungen derselben Karte:
     .mi-schranke-voll    deckt die ganze Seite ab (Werkzeuge, Reiseverwaltung)
     .mi-schranke         steht im Fluss (Dashboard, Smart Home, Paste)

   Farben wieder fest statt var(): die Karte erscheint auf Seiten mit drei
   verschiedenen Token-Saetzen und soll ueberall gleich aussehen. */
html.mi-gate-zu body > *:not(.mi-schranke){display:none!important}
html.mi-gate-zu body{background:#04141c}

.mi-schranke{display:grid;place-items:center;padding:clamp(28px,8vh,72px) 16px;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.mi-schranke-voll{position:fixed;inset:0;z-index:9999;background:#04141c;padding:16px}

.mi-schranke-karte{max-width:440px;width:100%;text-align:center;
  background:rgba(234,243,245,.035);border:1px solid rgba(234,243,245,.12);
  border-radius:14px;padding:36px 32px}
.mi-schranke-schloss{width:26px;height:26px;color:#ff6a3d;margin:0 auto 18px;display:block}
.mi-schranke-karte h2{font-family:'Sora',-apple-system,sans-serif;font-weight:700;
  font-size:1.3rem;letter-spacing:-.02em;color:#eaf3f5;margin:0 0 10px}
.mi-schranke-karte p{font-size:.9rem;line-height:1.6;color:#a7bec7;margin:0 0 22px}

.mi-schranke-knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#ff6a3d;color:#0b1419;border:0;border-radius:10px;padding:12px 22px;
  font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer;text-decoration:none}
.mi-schranke-knopf:hover{background:#ff8257;text-decoration:none;color:#0b1419}
.mi-schranke-knopf svg{width:18px;height:18px;flex:none}

.mi-schranke-zweit{display:inline-block;margin:14px 0 0;background:none;border:0;padding:0;
  font-family:inherit;font-size:.8rem;color:#a7bec7;text-decoration:underline;cursor:pointer}
.mi-schranke-zweit:hover{color:#eaf3f5}

.mi-schranke-fehler{min-height:1.2em;margin:16px 0 0;font-size:.8rem;color:#ff7a6b}
.mi-schranke-wege{margin:22px 0 0;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem;color:#5f7c88}
.mi-schranke-wege a{color:#5f7c88;text-decoration:none}
.mi-schranke-wege a:hover{color:#eaf3f5}

/* ── Seitenfuss ───────────────────────────────────────────────────────────
   Einer fuer alle Seiten, gebaut von mi-nav.js. Die Spalten fuehren die
   Verweise, die NICHT in der Navigation stehen - vor allem die Projekte auf
   mangold-software.de. Farben wieder fest, aus demselben Grund wie oben. */
.mi-fuss{
  display:block;padding:0;text-align:left;font-size:1rem;color:#a7bec7;
  margin-top:64px;
  border-top:1px solid rgba(234,243,245,.12);
  background:rgba(4,20,28,.6);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.mi-fussinner{max-width:1280px;margin:0 auto;padding:44px clamp(16px,5vw,48px) 32px}

.mi-fussgitter{display:grid;gap:32px;grid-template-columns:1.6fr 1fr 1fr 1fr;
  padding-bottom:32px;border-bottom:1px solid rgba(234,243,245,.08)}
.mi-fussmarke p{margin:14px 0 0;font-size:.85rem;line-height:1.6;color:#8aa4b0;max-width:34ch}
.mi-fussgitter h4{margin:0 0 14px;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#5f7c88}
.mi-fussgitter a{display:block;margin-bottom:9px;font-size:.88rem;color:#a7bec7;text-decoration:none}
.mi-fussgitter a:hover{color:#eaf3f5;text-decoration:none}
.mi-fussmarke .mi-marke{display:flex;margin-bottom:0}

.mi-fussunten{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  padding-top:24px;font-size:.76rem;line-height:1.6;color:#5f7c88}
.mi-fussgitter + .mi-fussunten{padding-top:24px}
.mi-fussunten a{color:#8aa4b0;text-decoration:none}
.mi-fussunten a:hover{color:#eaf3f5}

@media (max-width:860px){
  .mi-fussgitter{grid-template-columns:1fr 1fr;gap:28px}
  .mi-fussmarke{grid-column:1 / -1}
}
@media (max-width:520px){
  .mi-fussgitter{grid-template-columns:1fr}
  .mi-fussinner{padding:32px clamp(16px,5vw,48px) 24px}
}

/* Rechte Spalte im Seitenkopf, wenn dort mehr als eine Zeile steht
   (Dashboard: Uhr und Wetter, darunter die Knoepfe). */
.mi-kopfspalte{display:flex;flex-direction:column;align-items:flex-end;gap:14px}

/* ── Kurzmeldung ──────────────────────────────────────────────────────────
   Eine fuer alle Seiten, unten mittig, mit Fehlerzustand. */
.mi-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
  background:#0b2531;border:1px solid rgba(234,243,245,.22);border-radius:999px;
  padding:10px 20px;font-family:'DM Sans',-apple-system,sans-serif;font-size:.83rem;
  color:#eaf3f5;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
  z-index:9999;box-shadow:0 8px 30px rgba(0,0,0,.45);max-width:min(90vw,520px);text-align:center}
.mi-toast.an{opacity:1;transform:translateX(-50%) translateY(0)}
.mi-toast.fehler{border-color:rgba(255,122,107,.55);color:#ffd2c6}