/* Kopf, Reiterzeile und Fuß der Website (templates/rahmen.gohtml).
   Geladen vor site.css von allen Seiten der Website, der Suchseite und der
   Begegnungsseite. Die Begegnungsseite definiert die Farb- und
   Schriftvariablen der Website nicht; dort gelten die Rückfallwerte, die den
   Werten in site.css (:root) entsprechen. Zeilenhöhen stehen ausdrücklich
   hier, weil die Seiten unterschiedliche Grundschriften haben. */

/* ---------- Kopf ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .85rem max(16px, 4vw);
  font-family: var(--rough, "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  border-bottom: 1px solid var(--line, #262b33);
}
.topbar .name {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  font-size: 15px;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink, #e4e6e8);
  text-decoration: none;
}
.site-logo { display: block; width: 56px; height: 56px; object-fit: contain; }
.topbar:not(.discovery-topbar) { position: sticky; z-index: 30; top: 0; background: var(--bg, #0d0f12); }
.topbar nav { font-size: 12px; line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; }
.topbar nav a { color: var(--ink-dim, #8a919b); text-decoration: none; margin-left: 1.6rem; white-space: nowrap; }
.topbar nav a:hover,
.topbar nav a.hier { color: var(--accent, #d4a24e); }
.topbar a:focus-visible { outline: 2px solid var(--accent, #d4a24e); outline-offset: 4px; }

.kopf-rechts { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
/* Sprachwahl wie die Reiterzeile: aktive Sprache hell mit Akzentlinie. Das
   padding-left gleicht den Buchstabenabstand nach dem letzten Zeichen aus,
   damit die Linie mittig unter dem Kürzel steht. */
.topbar .sprachen {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--line, #262b33);
}
.topbar .sprachen a,
.topbar .sprachen span { margin: 0; padding: .3rem 0 .2rem .15em; border-bottom: 1px solid transparent; line-height: 1.2; }
.topbar .sprachen span { color: var(--ink, #e4e6e8); border-bottom-color: var(--accent, #d4a24e); }
.topbar nav:not(.sprachen) { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.topbar nav:not(.sprachen) a { margin: 0; }
/* Unter 1024 px passt der Kopf nicht mehr in eine Zeile. Name, Suche und
   Sprachwahl bilden dann die erste Zeile, die Bereiche stehen einzeilig
   darunter. Die Suchseite hat einen eigenen Kopf (.discovery-topbar). */
@media (max-width: 1023px) {
  /* Das negative top lässt die erste Zeile (Logo, Name, Sprachwahl) aus dem
     Bild scrollen; danach klebt der Kopf mit 12 px Luft über der Navigation. */
  .topbar:not(.discovery-topbar) { top: calc(12px - .85rem - 56px - .9rem); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .9rem .5rem; }
  .topbar:not(.discovery-topbar) .kopf-rechts { display: contents; }
  .topbar .site-search-link { grid-column: 2; grid-row: 1; }
  .topbar .sprachen { grid-column: 3; grid-row: 1; padding-left: 0; border-left: 0; }
  .topbar:not(.discovery-topbar) nav:not(.sprachen) { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topbar:not(.discovery-topbar) nav:not(.sprachen)::-webkit-scrollbar { display: none; }
}
@media (max-width: 599px) {
  .topbar:not(.discovery-topbar) nav:not(.sprachen) { justify-content: space-between; gap: .5rem; font-size: clamp(10.5px, 3.3vw, 12px); }
}

/* ---------- Reiter eines Bereichs ---------- */
.bereich-reiter { border-bottom: 1px solid var(--line, #262b33); font-family: var(--rough, "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif); font-size: 11px; line-height: 1.7; letter-spacing: .15em; text-transform: uppercase; -webkit-font-smoothing: antialiased; }
.bereich-reiter ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 2rem; margin: 0; padding: 0 max(16px, 4vw); }
.bereich-reiter a { display: block; padding: .95rem 0 .85rem; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-dim, #8a919b); text-decoration: none; }
.bereich-reiter a:hover { color: var(--accent, #d4a24e); }
.bereich-reiter a[aria-current] { color: var(--ink, #e4e6e8); border-bottom-color: var(--accent, #d4a24e); }
.bereich-reiter a:focus-visible { outline: 2px solid var(--accent, #d4a24e); outline-offset: 4px; }

/* ---------- Fuß ---------- */
/* Der Seitenfuß steht immer am unteren Fensterrand. sticky statt fixed: Er
   bleibt das letzte Element im Fluss und verdeckt deshalb am Seitenende keinen
   Inhalt, auch wenn er auf schmalen Geräten zweizeilig wird. Die Seiten
   brauchen dafür einen body mit display: flex und flex-direction: column.
   Die Suchseite hat einen eigenen Fuß (.discovery-footer). */
.seitenfuss {
  position: sticky;
  z-index: 20;
  bottom: 0;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem 1.5rem;
  padding: .6rem max(16px, 4vw) calc(.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line, #262b33);
  background: var(--bg, #0d0f12);
  color: var(--ink-dim, #8a919b);
  font-family: var(--rough, "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
.seitenfuss .fuss-meta { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.seitenfuss .fuss-meta a { color: var(--ink-dim, #8a919b); text-decoration: none; }
.seitenfuss .fuss-meta a:hover, .seitenfuss .fuss-meta a:focus-visible, .seitenfuss .fuss-meta a[aria-current="page"] { color: var(--accent, #d4a24e); }
.seitenfuss .fuss-copyright { white-space: nowrap; }
.seitenfuss .fuss-copyright a { color: inherit; text-decoration: none; }
.seitenfuss .fuss-copyright a:hover, .seitenfuss .fuss-copyright a:focus-visible { color: var(--accent, #d4a24e); }
@media (max-width: 599px) {
  .seitenfuss { column-gap: .8rem; font-size: 10px; letter-spacing: .08em; }
  .seitenfuss .fuss-meta { gap: 0 .8rem; }
}