/* ==========================================================================
   Silbenfuchs – Seitenaufbau und Anpassung an Bildschirmgrößen
   --------------------------------------------------------------------------
   Breiten:  ≥ 1100 px  Desktop / Tablet quer  → Rutsche links, Auswahl rechts
             760–1099   Tablet                 → schmalere Seitenleiste
             < 760      Smartphone / Hochformat → alles untereinander
   ========================================================================== */

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  min-height: var(--kopfhoehe);
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.marke img { width: 40px; height: auto; }
.marke-text { font-size: 1.45rem; letter-spacing: .01em; }

.navigation { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.navigation::-webkit-scrollbar { display: none; }
.navigation a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px;
  border-radius: 999px; color: var(--text-leise); text-decoration: none; white-space: nowrap;
}
.navigation a:hover { background: var(--flaeche-leise); color: var(--text); }
.navigation a[aria-current="page"] { background: var(--fuchs-hell); color: var(--fuchs-dunkel); }

.kopf-aktionen { display: flex; gap: 8px; margin-left: auto; }
.knopf-kopf { min-height: 44px; padding: 6px 12px; }
.knopf-kopf .knopf-symbol { font-size: 1.1rem; }

/* ---------- Inhalt ---------- */
.inhalt {
  width: 100%; max-width: 1680px; margin: 0 auto;
  padding: var(--abstand) max(var(--abstand), env(safe-area-inset-right)) var(--abstand) max(var(--abstand), env(safe-area-inset-left));
  outline: none;
}
.fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  max-width: 1680px; margin: 0 auto; padding: 8px 16px 24px;
  color: var(--text-leise); font-size: .8rem;
}
.lade-hinweis { display: grid; place-items: center; gap: 12px; padding: 18vh 0; color: var(--text-leise); }
.startfehler { max-width: 640px; margin: 10vh auto; }

/* ---------- Ansicht Rutsche ---------- */
.ansicht-rutsche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas:
    "buehne auswahl"
    "bild   auswahl"
    "paar   auswahl";
  grid-template-rows: auto auto 1fr;
  gap: var(--abstand);
  align-items: start;
}
.buehne { grid-area: buehne; }
.seitenleiste { grid-area: auswahl; position: sticky; top: calc(var(--kopfhoehe) + var(--abstand)); max-height: calc(100dvh - var(--kopfhoehe) - 2 * var(--abstand)); overflow-y: auto; overscroll-behavior: contain; }
.bildaufgabe { grid-area: bild; }
.silbenpaar { grid-area: paar; }

.ansicht-tabelle, .ansicht-verwaltung, .ansicht-hilfe { max-width: 1400px; margin: 0 auto; }

/* „Rutsche groß“ / Vollbild: nur die Bühne */
body.fokus .kopf .navigation { display: none; }
body.fokus .fuss { display: none; }
body.fokus .ansicht-rutsche { grid-template-columns: 1fr; grid-template-areas: "buehne"; }
body.fokus .ansicht-rutsche > :not(.buehne) { display: none !important; }
body.fokus .rutsche { max-height: calc(100dvh - var(--kopfhoehe) - 190px); }

@media (max-width: 1099px) {
  .ansicht-rutsche { grid-template-columns: minmax(0, 1fr) 290px; }
}

@media (max-width: 899px) {
  .ansicht-rutsche {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "buehne" "auswahl" "bild" "paar";
    grid-template-rows: auto;
  }
  .seitenleiste { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 759px) {
  :root { --abstand: 10px; --kopfhoehe: 104px; }
  .kopf { gap: 6px 10px; }
  .marke-text { font-size: 1.2rem; }
  .marke img { width: 32px; }
  .navigation { order: 3; flex-basis: 100%; }
  .navigation a { padding: 6px 12px; min-height: 40px; }
  .knopf-kopf .knopf-text { display: none; }
  .knopf-kopf { min-width: 44px; padding: 6px; }
  .fuss { font-size: .75rem; }
}

/* Smartphone quer: wenig Höhe → kompakter Kopf */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --kopfhoehe: 56px; }
  .kopf { flex-wrap: nowrap; min-height: 56px; padding-top: 4px; padding-bottom: 4px; }
  .navigation { order: 0; flex-basis: auto; }
  .marke-text { display: none; }
  .knopf-kopf .knopf-text { display: none; }
  .ansicht-rutsche { grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "buehne auswahl" "bild auswahl" "paar auswahl"; }
  .seitenleiste { position: sticky; max-height: calc(100dvh - var(--kopfhoehe) - 2 * var(--abstand)); overflow-y: auto; }
}