/* Rahmen: tannengrüne Seitenleiste, Lagebänder, Inhaltsbereich auf Sand. */

.rahmen { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); height: 100dvh; }

.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 80; padding: .6rem 1rem; border-radius: var(--radius-m); background: var(--weiss); box-shadow: var(--schatten-hoch); font-weight: 650; }
.sprung:focus { top: 1rem; }

/* ---- Seitenleiste ---- */

.seitenleiste {
  display: flex; flex-direction: column; gap: 1.25rem; min-height: 0; padding: 1.35rem 1rem 1rem; background: var(--tanne); color: var(--tanne-text);
  overflow-y: auto; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.seitenleiste :focus-visible { outline-color: #a9dccf; }
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; padding: 0 .4rem; color: #fff; }
.leiste-zu { display: none; }

.nav { flex: 1; }
.nav-liste { display: flex; flex-direction: column; gap: .15rem; }
.nav-gruppe { margin: 1.1rem 0 .3rem; padding: 0 .75rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tanne-gedaempft); }
.nav-eintrag {
  display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .5rem .75rem; border-radius: .8rem;
  color: var(--tanne-text); font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s;
}
.nav-eintrag .icon { color: var(--tanne-gedaempft); transition: color .15s; }
.nav-eintrag:hover { background: var(--tanne-flaeche); color: #fff; }
.nav-eintrag.aktiv { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.nav-eintrag.aktiv .icon, .nav-eintrag:hover .icon { color: #a9dccf; }

.leiste-fuss { display: flex; flex-direction: column; gap: .6rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.konto { display: flex; align-items: center; gap: .7rem; padding: 0 .4rem; min-width: 0; }
.konto-zeichen { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-family: var(--schrift-display); font-weight: 700; flex: none; }
.konto-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.konto-name { color: #fff; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-rolle { font-size: .75rem; color: var(--tanne-gedaempft); }
.konto-aktionen { display: flex; flex-direction: column; gap: .1rem; }
.leiste-knopf {
  display: flex; align-items: center; gap: .7rem; min-height: 2.5rem; padding: .4rem .75rem; border: 0; border-radius: .8rem; background: none;
  color: var(--tanne-text); font-weight: 600; font-size: .8125rem; text-align: left; cursor: pointer;
}
.leiste-knopf .icon { width: 1.125rem; height: 1.125rem; color: var(--tanne-gedaempft); }
.leiste-knopf:hover { background: var(--tanne-flaeche); color: #fff; }
.leiste-version { padding: 0 .75rem; font-size: .6875rem; color: var(--tanne-gedaempft); }

/* ---- Bühne: Kopfleiste (nur schmal), Bänder, Inhalt ---- */

.buehne { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; }
.kopfleiste { display: none; }
.leiste-schleier { display: none; }

.baender { flex: none; }
.band { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem 2rem; font-size: .875rem; }
.band .icon { width: 1.125rem; height: 1.125rem; margin-top: .1rem; }
.band p { max-width: 110ch; }
/* Testbetrieb: Warnschraffur am oberen Rand, damit das Band auch aus dem Augenwinkel auffällt */
.band-test {
  background: #f8d98b; color: #3d2a00; font-weight: 550;
  border-top: 5px solid transparent; border-image: repeating-linear-gradient(-45deg, #3d2a00 0 10px, #f8d98b 10px 20px) 5;
  border-bottom: 1px solid #e0bb5c;
}
.band-sperre { background: #8f1d15; color: #fff; }
.band-sperre strong { font-weight: 700; }
.band-liste { margin-top: .35rem; padding-left: 1.1rem; list-style: disc; display: grid; gap: .15rem; }
.band-bezug { margin-left: .5rem; font-size: .75rem; opacity: .8; }
.band-info { background: var(--lauf-flaeche); color: #123c5b; border-bottom: 1px solid var(--lauf-rand); }

.inhalt { flex: 1; min-height: 0; overflow-y: auto; container-type: size; container-name: inhalt; scroll-padding-block: 5rem 8rem; }
.seite { display: flex; flex-direction: column; gap: 1.5rem; max-width: 82rem; margin-inline: auto; padding: 2rem 2rem 3rem; min-height: 100%; }
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.seiten-unter { margin-top: .3rem; color: var(--gedaempft-tief); }
.seiten-stand { color: var(--gedaempft-tief); font-size: .8125rem; }
.seiten-fussnote { color: var(--gedaempft-tief); font-size: .8125rem; max-width: 80ch; }
.ablauf-rest { white-space: nowrap; }

@media (max-width: 900px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .kopfleiste { display: flex; align-items: center; gap: .75rem; flex: none; padding: .55rem .9rem; background: var(--tanne); color: #fff; }
  .kopfleiste .marke-zeichen { width: 30px; height: 30px; border-radius: 9px; }
  .kopfleiste .marke-name { font-size: .9375rem; }
  .kopfleiste .marke-zusatz { font-size: .6875rem; }
  .leiste-schalter, .leiste-zu { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--radius-m); background: none; color: #fff; cursor: pointer; }
  .leiste-schalter:hover, .leiste-zu:hover { background: var(--tanne-flaeche); }
  .leiste-schalter:focus-visible { outline-color: #a9dccf; }

  .seitenleiste {
    position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(19rem, 86vw); transform: translateX(-102%); visibility: hidden;
    transition: transform .28s var(--kurve), visibility 0s .28s; box-shadow: var(--schatten-hoch);
  }
  .seitenleiste.offen { transform: none; visibility: visible; transition: transform .28s var(--kurve); }
  .leiste-schleier { position: fixed; inset: 0; z-index: 40; background: rgba(11, 42, 36, .5); }
  .seitenleiste.offen + .leiste-schleier { display: block; }

  .band { padding: .5rem 1rem; font-size: .8125rem; }
  .seite { padding: 1.25rem 1rem 2.5rem; gap: 1.1rem; }
}

@media (min-width: 901px) {
  .leiste-schalter { display: none; }
}