/* Die gemeinsame Schale: Kopfzeile ohne Navigation, Seitenleiste immer sichtbar.
   Die Navigation stand vorher oben und in der Leiste, also zweimal. Jetzt nur links. */

body.app { height: 100vh; overflow: hidden; display: flex; flex-direction: column; margin: 0; }
body.app .raster { flex: 1; display: grid; grid-template-columns: 244px 1fr; min-height: 0; }
body.app.postfachseite .raster { grid-template-columns: 244px 372px 1fr; }

.inhalt { overflow-y: auto; padding: 26px 30px 70px; min-width: 0; }
.inhalt > .titel { margin-bottom: 4px; }

/* Kopfzeile. Lag bis 27.08.2026 in postfach.css und war deshalb nur dort
   gestaltet, auf den anderen Seiten stapelte sie sich untereinander. */
.appkopf {
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px; height: 54px; flex-shrink: 0;
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.appkopf .marke { font-weight: 650; letter-spacing: -.02em; font-size: 15px; }
.appkopf .marke span { color: var(--tinte-3); font-weight: 450; }
.appkopf .suche {
  flex: 1; max-width: 560px; margin-left: 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--flaeche-2); border: 1px solid transparent;
  border-radius: 99px; padding: 7px 14px;
}
.appkopf .suche:focus-within { background: var(--flaeche); border-color: var(--akzent); }
.appkopf .suche input { border: 0; background: none; width: 100%; font: inherit; font-size: 13.5px; outline: none; }
.appkopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.appkopf { gap: 12px; }
.appkopf .rechts { gap: 12px; }
.appkopf .suche .symbol { flex-shrink: 0; color: var(--tinte-3); }

/* Seitenleiste */
.seite {
  border-right: 1px solid var(--linie); overflow-y: auto;
  padding: 14px 10px 26px; background: rgba(255,255,255,.5);
}
.seite .gruppe { margin-bottom: 14px; }
.seite .gruppentitel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinte-3); padding: 6px 12px 6px;
}
.seite a.punkt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; margin-bottom: 1px;
  color: var(--tinte-2); text-decoration: none; font-size: 13px;
}
.seite a.punkt .symbol { flex-shrink: 0; color: var(--tinte-3); }
.seite a.punkt .wort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seite a.punkt:hover { background: var(--flaeche-2); color: var(--tinte); }
.seite a.punkt:hover .symbol { color: var(--tinte-2); }
.seite a.punkt[aria-current="page"] {
  background: var(--akzent-weich); color: var(--akzent); font-weight: 600;
}
.seite a.punkt[aria-current="page"] .symbol { color: var(--akzent); }
.seite a.punkt .anzahl {
  margin-left: auto; font-size: 11.5px; color: var(--tinte-3);
  font-variant-numeric: tabular-nums;
}

/* Symbole allgemein */
.symbol { display: block; }
.mit-symbol { display: inline-flex; align-items: center; gap: 7px; }
.abschnitt > h2.mit-symbol, .kartenkopf h2.mit-symbol { display: flex; align-items: center; gap: 7px; }
.kartenkopf h2 .symbol { color: var(--tinte-3); }
.zahl .symbolkopf { display: flex; align-items: center; justify-content: space-between;
  color: var(--tinte-3); margin-bottom: 4px; }
.marker .symbol { margin-right: -1px; }
.hinweis { align-items: flex-start; }
.hinweis .symbol { flex-shrink: 0; margin-top: 1px; }
button .symbol, .knopf .symbol { margin-left: -2px; }

@media (max-width: 1080px) {
  body.app .raster { grid-template-columns: 62px 1fr; }
  body.app.postfachseite .raster { grid-template-columns: 62px 330px 1fr; }
  .seite .gruppentitel, .seite a.punkt .wort, .seite a.punkt .anzahl { display: none; }
  .seite a.punkt { justify-content: center; padding: 9px 0; }
}
@media (max-width: 760px) {
  body.app { height: auto; overflow: auto; }
  /* Die Adresse rechts oben schiebt die Kopfzeile ueber den Rand. */
  .appkopf .rechts > span.leise { display: none; }
  .appkopf .suche { margin-left: 0; min-width: 0; }
  body.app .raster, body.app.postfachseite .raster { grid-template-columns: 1fr; }
  .seite { border-right: 0; border-bottom: 1px solid var(--linie);
    display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px; }
  .seite .gruppe { display: flex; gap: 4px; margin: 0; }
  .seite .gruppentitel { display: none; }
  .seite a.punkt .wort { display: none; }
  .inhalt { padding: 18px 16px 50px; }
}