/* Gemeinsamer Kopf der Vereinsanwendungen (PR, Mittagstisch, Bildarchiv), seit 28.10.2026 (Kevin: einheitliches
   Design, Profil anklickbar). Diese Datei ist die einzige Quelle — die Anwendungen liefern sie unter /dgb-kopf.css aus.
   Farben aus ~/DgB/Corporate Design/Farben.txt. */
/* Feste Höhe (Kevin, 28.10.2026: überall gleich hoch) — 54 px Inhalt + 4 px rote Linie, Abstand oben fürs iPhone */
.dgb-kopf { display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: calc(58px + env(safe-area-inset-top));
  margin: 0; padding: env(safe-area-inset-top) 16px 0; flex: none;
  background: #fff; border-bottom: 4px solid #8a1812; position: sticky; top: 0; z-index: 1100; color: #29235c;
  font: 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.dgb-kopf-logo { height: 34px; display: block; flex: none; }
.dgb-kopf-titel { font-weight: 700; font-size: 1.1rem; color: #29235c; white-space: nowrap; }

/* Toolauswahl: der Titel klappt die anderen Anwendungen auf */
.dgb-wahl { position: relative; flex: none; }
.dgb-wahl > summary { list-style: none; cursor: pointer; padding: 5px 8px; margin-left: -8px; border-radius: 8px; border: 1px solid transparent; }
.dgb-wahl > summary::-webkit-details-marker { display: none; }
.dgb-wahl > summary::after { content: " ▾"; color: #7c7c7c; font-size: .75em; font-weight: 400; }
.dgb-wahl > summary:hover, .dgb-wahl[open] > summary { border-color: #d6d3cc; background: #f6f5f2; }
.dgb-menue-links { left: -8px; right: auto; }
.dgb-menue > span { display: block; padding: 10px 14px; font-size: .95rem; }
.dgb-menue small { display: block; font-size: .78rem; color: #7c7c7c; }
.dgb-menue .dgb-hier { color: #29235c; font-weight: 700; background: #f6f5f2; }
.dgb-menue .dgb-aus { color: #b4b2ba; cursor: not-allowed; }
.dgb-menue .dgb-aus small { color: #c4c2c8; }

.dgb-konto { margin-left: auto; position: relative; flex: none; }
.dgb-konto > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 3px 8px 3px 3px; border-radius: 999px; border: 1px solid transparent; }
.dgb-konto > summary::-webkit-details-marker { display: none; }
.dgb-konto > summary:hover, .dgb-konto[open] > summary { border-color: #d6d3cc; background: #f6f5f2; }
.dgb-konto-kreis { width: 32px; height: 32px; border-radius: 50%; background: #29235c; color: #fff; display: grid;
  place-items: center; font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.dgb-konto-name { font-size: .9rem; color: #1e1d2b; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgb-konto-name::after { content: " ▾"; color: #7c7c7c; font-size: .8em; }

.dgb-menue { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid #d6d3cc;
  border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); min-width: 230px; padding: 6px 0; z-index: 1200; }
.dgb-menue-kopf { padding: 8px 14px 10px; border-bottom: 1px solid #e5e5e5; font-size: .82rem; color: #7c7c7c; }
.dgb-menue-kopf b { display: block; color: #1e1d2b; font-size: .95rem; }
.dgb-menue a, .dgb-menue button { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 10px 14px;
  margin: 0; background: none; border: 0; border-radius: 0; font: inherit; font-size: .95rem; color: #29235c;
  text-decoration: none; cursor: pointer; }
.dgb-menue a:hover, .dgb-menue button:hover { background: #f6f5f2; }
.dgb-menue .dgb-abmelden { border-top: 1px solid #e5e5e5; color: #8a1812; }
.dgb-wechsel .dgb-menue-kopf { border-top: 1px solid #e5e5e5; border-bottom: 0; padding-bottom: 2px; }
.dgb-menue .dgb-verwaltung { font-weight: 600; }
.dgb-menue .dgb-verwaltung + :not(.dgb-verwaltung) { border-top: 1px solid #e5e5e5; }

/* Verwaltungsfenster: Konten, Anmeldungen, Besuche */
.dgb-vw { width: min(860px, 100vw - 24px); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3); color: #1e1d2b; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.dgb-vw[open] { display: flex; flex-direction: column; }
.dgb-vw::backdrop { background: rgba(20, 18, 40, .45); }
.dgb-vw-kopf { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 4px solid #8a1812; color: #29235c; font-size: 1.1rem; }
.dgb-vw-kopf b { margin-right: auto; }
.dgb-vw-kopf button { background: none; border: 1px solid #d6d3cc; border-radius: 8px; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; color: #29235c; }
.dgb-vw-reiter { display: flex; gap: 6px; padding: 10px 16px 0; flex-wrap: wrap; }
.dgb-vw-reiter button { font: inherit; padding: 6px 12px; border: 1px solid #d6d3cc; border-radius: 8px; background: #fff; color: #29235c; cursor: pointer; }
.dgb-vw-reiter button.an { background: #29235c; border-color: #29235c; color: #fff; }
.dgb-vw-inhalt { overflow: auto; padding: 6px 16px 16px; }
.dgb-vw-hinweis { color: #7c7c7c; font-size: .85rem; margin: 8px 0; }
.dgb-vw-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.dgb-vw-filter select { display: inline-block; width: auto; margin: 0; font: inherit; padding: 6px 8px; border: 1px solid #d6d3cc; border-radius: 8px; background: #fff; max-width: 100%; }
.dgb-vw-filter label { display: flex; gap: 6px; align-items: center; font-size: .9rem; margin: 0; font-weight: 400; }
.dgb-vw-filter input { display: inline-block; width: auto; margin: 0; padding: 0; }
.dgb-vw-zeile { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; width: 100%;
  box-sizing: border-box; padding: 8px 0; border: 0; border-bottom: 1px solid #e5e5e5; background: none; font: inherit;
  color: inherit; text-align: left; border-radius: 0; margin: 0; }
.dgb-vw-konto { grid-template-columns: 1fr auto; cursor: pointer; align-items: start; }
.dgb-vw-konto:hover { background: #f6f5f2; }
.dgb-vw-haupt { min-width: 0; overflow-wrap: anywhere; }
.dgb-vw-seite { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.dgb-vw-apps { display: block; margin-top: 2px; }
.dgb-vw-zeit { color: #7c7c7c; font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dgb-vw-klein { color: #7c7c7c; font-size: .82rem; }
.dgb-vw-fehl .dgb-vw-haupt { color: #8a1812; }
.dgb-marke { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.dgb-gruen { background: #e3f1e8; color: #076633; }
.dgb-gelb { background: #fbf1d6; color: #7a5a00; }
.dgb-rot { background: #f6e1df; color: #8a1812; }
@media (max-width: 560px) {
  .dgb-vw { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; margin: 0; }
  .dgb-vw-zeile { grid-template-columns: 1fr auto; }
  .dgb-vw-zeit { grid-column: 1 / -1; }
  .dgb-vw-konto { grid-template-columns: 1fr; }
  .dgb-vw-seite { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
}

/* Kontolinks als Zeile, wo oben kein Platz ist (Bildarchiv am Handy) */
.dgb-konto-zeile a, .dgb-konto-zeile button { color: #29235c; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

@media (max-width: 560px) {
  .dgb-kopf { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .dgb-konto-name { display: none; }
  .dgb-konto > summary { padding-right: 3px; }
}