/* =========================================================
   TITELMENÜ - auf jeder Seite gleich
   ========================================================= */
.seitenmenue {
  /* Eigene weiße Zeile unter dem Seitentitel.
     Die Seitenlinks stehen exakt MITTIG über die ganze Breite. Links (Burger
     in der Verwaltung) und rechts (Abmelden) sitzen fest am Rand; die Leiste
     hält auf beiden Seiten so viel Abstand, wie der breitere der beiden
     Ränder braucht - den misst assets/seitenmenue.js. So kann sich nichts
     überschneiden, und die Mitte bleibt die Mitte.
     Läuft nicht mit - nur im Aufmaß (seitenmenue-mitlaufend). */
  position: relative;
  /* Burger, Seitenlinks und Abmelden bilden EINEN Block, der als Ganzes
     mittig steht. Der Burger dockt direkt links an die Links an - so wie
     Abmelden rechts -, statt am Bildschirmrand zu kleben. */
  display: flex !important;
  align-items: center;
  justify-content: safe center;
  min-height: 48px;
  background: #fff;
  border-bottom: 1px solid #e2dcd4;
  font-family: inherit;
  box-sizing: border-box;
}
.seitenmenue-rand {
  position: relative;      /* Träger für das aufgeklappte Burgermenü */
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.seitenmenue-rand-links { margin-right: 6px; }
/* Der Bereichsname der Verwaltung steht am rechten Rand, aber AUSSERHALB
   der Reihe: Sonst schöbe seine Breite den Block aus der Mitte. */
.seitenmenue-rand-rechts {
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
}
.seitenmenue-rand:empty { display: none; }

/* Alle Einträge auf EINER Mittellinie mit dem Abmelden-Knopf. */
.seitenmenue-leiste {
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 2px;
  min-height: 48px;
  box-sizing: border-box;
  /* Nimmt nur so viel Platz wie nötig, damit der ganze Block mittig
     bleibt - und schrumpft auf schmalen Geräten, statt überzulaufen. */
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.seitenmenue-leiste::-webkit-scrollbar { display: none; }
/* Schlichte Einträge wie die früheren Reiter - kein Rahmen, keine Pillen.
   Die Unterstreichung ist ein Schatten statt eines Rahmens: Ein Rahmen
   verschöbe die Schrift um ein paar Pixel nach oben, und sie stünde nicht
   mehr auf einer Linie mit "Abmelden". */
.seitenmenue-eintrag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  color: #4a443e !important;
  text-decoration: none !important;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: none;
  border-radius: 6px 6px 0 0;
}
.seitenmenue-eintrag:hover { color: #23201d !important; background: #f7f5f1; }
.seitenmenue-eintrag.ist-aktiv {
  color: #1f3f2b !important;
  box-shadow: inset 0 -3px 0 #4a9b63;
}
.seitenmenue-eintrag[hidden] { display: none; }
/* Abmelden: rot, direkt hinter dem letzten Eintrag, auf derselben Linie. */
.seitenmenue-abmelden {
  flex: 0 0 auto;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #b5342c;
  border: none;
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}
.seitenmenue-abmelden:hover { background: #9c2b24; }
/* Ohne einen einzigen erlaubten Eintrag (etwa vor der Anmeldung) nimmt die
   Leiste keinen Platz ein. */
.seitenmenue.ist-leer { display: none !important; }
@media (max-width: 700px) {
  .seitenmenue { justify-content: flex-start; padding: 0 8px; }
  .seitenmenue-leiste { justify-content: flex-start; }
  .seitenmenue-eintrag { padding: 0 10px; font-size: 0.9rem; }
  .seitenmenue-abmelden { padding: 0 12px; font-size: 0.9rem; }
}
@media print { .seitenmenue { display: none; } }

/* In der Verwaltung läuft das Menü nicht mit - siehe seitenmenue_html(). */
.seitenmenue.seitenmenue-statisch { position: static; }

/* =========================================================
   PLATZ FÜR DAS MENÜ IN DEN WEB-APPS
   Was dort oben festsitzt oder mitläuft, rückt um die Höhe des Menüs
   nach unten - sonst läge es genau darüber. Die Höhe setzt
   assets/seitenmenue.js; ist das Menü leer, ist sie 0.
   ========================================================= */
.seitenmenue.seitenmenue-mitlaufend { position: sticky; top: 0; z-index: 900; }
/* Der schwebende Titel im Aufmaß (Adresse des offenen Aufmaßes) läuft
   direkt unter dem Menü mit, statt über dem Seitentitel zu schweben. */
.app-schwebe-titel {
  position: sticky !important;
  top: var(--seitenmenue-hoehe, 0px) !important;
  left: auto !important;
  right: auto !important;
  z-index: 880 !important;
}
.app-schwebe-titel:empty { display: none !important; }


/* Der aktuelle Bereich neben dem Menü - auf dem Handy fehlt der Platz. */
@media (max-width: 700px) { .tabs-aktuell { display: none; } }


/* Die früheren Burgermenüs der Web-Apps bleiben unsichtbar im Dokument,
   weil der Code auf ihre Elemente zugreift. Ihre eigenen Regeln setzen
   "display: flex" - das würde das Verbergen aushebeln. */
.app-menu-btn[hidden],
.galerie-navi[hidden] { display: none !important; }



/* =========================================================
   SEITENTITEL - auf jeder Seite gleich groß
   Die Regeln sind bewusst mit !important versehen: Jede Seite hatte
   ihre eigenen Kopfregeln, und die sollen hier nicht mehr hineinreden.
   ========================================================= */
.seitentitel {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  grid-column: 1 / -1;        /* in Rasterköpfen über die ganze Breite */
}
.seitentitel-logo {
  display: block;
  height: 38px !important;
  width: auto !important;
  border-radius: 8px;
  flex: 0 0 auto;
}
.seitentitel-text {
  margin: 0 !important;
  min-width: 0;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  letter-spacing: 0 !important;
  /* Eine Zeile - ein Umbruch machte die festen Köpfe höher und schob sie
     über die Leiste darunter. Zu Langes wird mit "…" gekürzt. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seitentitel .titel-benutzer,
.seitentitel .titel-seite { color: #b9b2a9 !important; font-weight: 400 !important; opacity: 1 !important; }
@media (max-width: 600px) {
  .seitentitel-text { font-size: 1.05rem !important; }
  .seitentitel-logo { height: 30px !important; }
}
/* =========================================================
   DER SCHWARZE TITELBALKEN - überall dasselbe Element, dieselbe Höhe.
   Früher hatte jede Seite ihren eigenen Kopf (app-header, galerie-kopf …)
   mit eigenem Innenabstand; deshalb waren sie verschieden hoch.
   ========================================================= */
.seitenkopf {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: calc(70px + env(safe-area-inset-top, 0px)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: env(safe-area-inset-top, 0px) 16px 0 !important;
  background: #23201d !important;
  color: #fff !important;
  border: none !important;
  flex-shrink: 0;
}

/* Die feste Leiste der Verwaltung IST das Titelmenü: kein eigenes Raster
   mehr, das Menü füllt sie ganz aus. */
.tabs.tabs-mit-menue {
  display: block !important;
  padding: 0 !important;
}
.tabs-mit-menue .seitenmenue {
  position: relative;
  height: 100%;
  border-bottom: none;
}
.tabs-mit-menue .tabs-aktuell { margin-left: 10px; font-weight: 700; white-space: nowrap; }
@media (max-width: 900px) { .tabs-mit-menue .tabs-aktuell { display: none; } }

/* Verwaltung auf schmalen Bildschirmen: Die frühere Reiterleiste konnte dort
   umbrechen, deshalb begann der Inhalt tiefer. Die Leiste ist jetzt immer
   eine Zeile - Titelbalken 70 px + Leiste 48 px. */
.tabs.tabs-mit-menue { height: 48px !important; }
body:has(.tabs-mit-menue) { padding-top: 118px !important; }


/* Titelbalken und Menüleiste der Verwaltung stehen fest oben. Sie müssen
   über allem liegen, was beim Blättern darunter durchläuft - sonst schob
   sich der Seiteninhalt (Hinweisleisten, mitlaufende Köpfe) darüber. Die
   Fenster und Dialoge (ab 2600) liegen weiterhin darüber. */
header.seitenkopf { z-index: 2100 !important; }
.tabs.tabs-mit-menue { z-index: 2090 !important; }
.tabs-mit-menue .seitenmenue { height: 48px; min-height: 48px; }

/* --- Handy: "Abmelden" bekommt seinen eigenen Platz ---
   Am breiten Bildschirm steht es absolut rechts, damit die Reihe der Seiten
   mittig bleibt. Auf schmalen Geräten würde die Reihe aber darunter
   durchlaufen - deshalb wird es dort ein normaler Teil der Zeile, und die
   Reihe schrumpft daneben. Gemessen bei 360 px war es vorher gar nicht zu
   sehen. */
@media (max-width: 700px) {
  .seitenmenue-rand-rechts {
    position: static;
    right: auto;
    margin-left: 6px;
  }
  /* Grösser als die früheren 34 px - mit Handschuhen auf der Baustelle. */
  .seitenmenue-abmelden {
    height: 40px;
    margin-left: 0;
    padding: 0 14px;
  }
}