/* =========================================
   DESKTOP-DARSTELLUNG, STUFE 1: GERÜST (#559)
   Seitenleiste, helle Kopfzeile, Arbeitsfläche.
   Alles steht unter html.ui-desktop und ab 601 px Breite.
   Ohne diese Klasse (Testumgebung, Produktion) und bis 600 px wirkt keine einzige Regel.
   Farben nur aus css/tokens.css, Maße als Variablen dort (--nav-w, --nav-w-schiene, --kopf-h, --nav-punkt-h, --app-pad).
   Klassen beginnen mit app__, damit nichts mit pv*.css oder components.css kollidiert.
   ========================================= */

@media (min-width: 601px) {

  /* ===== Sprunglink: Langform nur in der Desktop-Darstellung ===== */
  html.ui-desktop .app__nur-desktop[hidden] {
    display: inline !important;
  }

  /* ===== Hülle ===== */
  html.ui-desktop .app__haupt {
    min-width: 0;
  }

  /* ===== Seitenleiste: aus dem HTML (hidden) einblenden ===== */
  html.ui-desktop .app__nav[hidden] {
    display: flex !important;
  }

  html.ui-desktop .app__nav {
    flex-direction: column;
    width: var(--nav-w);
    background: var(--shell-bg);
    color: var(--shell-text);
    container: app-nav / inline-size;
    overflow: hidden;
  }

  html.ui-desktop .app__marke {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 var(--kopf-h);
    height: var(--kopf-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--blue-dark);
  }

  html.ui-desktop .app__logo {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
  }

  html.ui-desktop .app__marke-text {
    font-size: var(--fs-text);
    font-weight: 700;
    line-height: 1.25;
    color: var(--shell-text);
  }

  html.ui-desktop .app__liste {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 16px;
    overscroll-behavior: contain;
  }

  html.ui-desktop .app__punkte {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Gruppenüberschrift */
  html.ui-desktop .app__gruppe-titel {
    margin: 0;
    padding: 20px 16px 4px;
    font-size: var(--fs-tag);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--badge-bg);
  }

  /* Menüpunkt: 40 px hoch, 16 px Schrift */
  html.ui-desktop .app__link,
  html.ui-desktop .app__einklappen {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--nav-punkt-h);
    padding: 6px 8px 6px 12px;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--shell-text);
    font: inherit;
    font-size: var(--fs-text);
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  html.ui-desktop .app__link:hover,
  html.ui-desktop .app__einklappen:hover {
    background: var(--blue-mid);
    color: var(--shell-text);
    text-decoration: none;
  }

  /* Offene Seite: Hintergrund, fette Schrift und Strich links (nicht nur Farbe) */
  html.ui-desktop .app__link[aria-current="page"] {
    background: var(--blue-dark);
    border-left-color: var(--shell-text);
    font-weight: 700;
  }

  html.ui-desktop .app__nav a:focus-visible,
  html.ui-desktop .app__nav button:focus-visible {
    outline: 3px solid var(--shell-text);
    outline-offset: -3px;
  }

  html.ui-desktop .app__symbol {
    flex: 0 0 24px;
    width: 24px;
    text-align: center;
    font-size: 1.125rem;
    line-height: 1;
  }

  /* Einklappen-Knopf: ohne JavaScript ohne Wirkung, deshalb erst mit app--js und ab 1280 px sichtbar */
  html.ui-desktop .app__einklappen {
    display: none;
  }

  /* Hinweis zur Beschriftung der Schiene */
  html.ui-desktop .app__tipp {
    position: fixed;
    left: calc(var(--nav-w-schiene) + 8px);
    z-index: 400;
    transform: translateY(-50%);
    padding: 8px 12px;
    border-radius: 0.5rem;
    background: var(--shell-bg);
    color: var(--shell-text);
    font-size: var(--fs-text);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: var(--shadow-card);
    pointer-events: none;
  }

  html.ui-desktop .app__scrim {
    display: none;
  }

  /* ===== Schiene (Container ist die Leiste selbst): nur Symbole ===== */
  @container app-nav (max-width: 100px) {
    html.ui-desktop .app__marke {
      justify-content: center;
      padding: 0;
    }

    html.ui-desktop .app__marke-text,
    html.ui-desktop .app__gruppe-titel {
      display: none;
    }

    html.ui-desktop .app__gruppe {
      margin-top: 8px;
      border-top: 1px solid var(--blue-dark);
      padding-top: 8px;
    }

    html.ui-desktop .app__link,
    html.ui-desktop .app__einklappen {
      justify-content: center;
      padding: 6px 0;
    }

    html.ui-desktop .app__symbol {
      flex: 0 0 auto;
    }

    html.ui-desktop .app__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* ===== Kopfzeile: hell, 56 px ===== */
  html.ui-desktop .shell.app__kopf {
    height: var(--kopf-h);
    min-height: var(--kopf-h);
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 var(--app-pad);
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
  }

  html.ui-desktop .app__kopf .shell__logo,
  html.ui-desktop .app__kopf .shell__divider,
  html.ui-desktop .app__kopf .shell__org {
    display: none;
  }

  html.ui-desktop .app__titel {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-right: auto;
  }

  html.ui-desktop .app__kopf .shell__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fs-text);
    font-weight: 700;
    color: var(--text);
  }

  html.ui-desktop .app__pfad[hidden] {
    display: inline !important;
    flex: 0 0 auto;
    font-size: var(--fs-text);
    color: var(--muted);
    white-space: nowrap;
  }

  /* „← Portal“ ersetzt der Eintrag „Start“ in der Leiste; andere Rücksprünge (z. B. zum Notfallmanagement) bleiben */
  html.ui-desktop .app__kopf .shell__back[href="index.html"] {
    display: none;
  }

  html.ui-desktop .app__kopf .shell__back {
    margin-left: 0;
    color: var(--blue-dark);
    border-color: var(--blue-dark);
    background: var(--surface);
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
  }

  html.ui-desktop .app__kopf .shell__back:hover {
    background: var(--blue-light);
  }

  /* Anmeldebereich: Die Knöpfe tragen Inline-Stile für die dunkle Kopfzeile, deshalb !important */
  html.ui-desktop .app__kopf #auth-area {
    flex: 0 0 auto;
  }

  html.ui-desktop .app__kopf #login-btn {
    border-color: var(--blue-dark);
  }

  html.ui-desktop .app__kopf #user-info {
    color: var(--blue-dark) !important;
    background: var(--badge-bg) !important;
    border: 1px solid var(--blue-dark) !important;
    font-size: var(--fs-small) !important;
  }

  html.ui-desktop .app__kopf #logout-btn {
    border-color: var(--blue-dark);
    box-shadow: var(--shadow-card);
  }

  /* Menü-Knopf (nur 601 bis 1023 px, nur mit JavaScript) */
  html.ui-desktop .app__menue {
    display: none;
  }
}

/* ===== 601 bis 1023 px: keine feste Leiste, Schublade über den Menü-Knopf ===== */
@media (min-width: 601px) and (max-width: 1023px) {
  html.ui-desktop .app--js .app__menue[hidden] {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: var(--tap-min);
    padding: 0 16px;
    border: 1px solid var(--blue-dark);
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--blue-dark);
    font: inherit;
    font-size: var(--fs-text);
    font-weight: 700;
    cursor: pointer;
  }

  html.ui-desktop .app--js .app__menue[hidden]:hover {
    background: var(--blue-light);
  }

  html.ui-desktop .app__nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    box-shadow: var(--shadow-card);
  }

  html.ui-desktop .app--offen .app__nav {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }

  html.ui-desktop .app--offen .app__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 299;
    background: var(--overlay-dark);
    opacity: 0.6;
  }
}

/* ===== ab 1024 px: feste Leiste, zuerst als Schiene (64 px) ===== */
@media (min-width: 1024px) {
  html.ui-desktop .app {
    --nav-ist: var(--nav-w-schiene);
    display: grid;
    grid-template-columns: var(--nav-ist) minmax(0, 1fr);
    align-items: start;
    min-height: 100vh;
  }

  html.ui-desktop .app--ohne-menue {
    display: block;
  }

  html.ui-desktop .app__nav {
    position: sticky;
    top: 0;
    width: var(--nav-ist);
    height: 100vh;
    height: 100dvh;
  }
}

/* ===== ab 1280 px: Leiste offen (240 px), einklappbar auf 64 px ===== */
@media (min-width: 1280px) {
  html.ui-desktop .app {
    --app-pad: 32px;
  }

  html.ui-desktop .app:not(.app--schiene) {
    --nav-ist: var(--nav-w);
  }

  html.ui-desktop .app--js .app__einklappen {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ui-desktop .app__nav {
    transition: none !important;
  }
}