/* ==========================================================================
   BEGRUESSUNG UND BESUCHSANZEIGE IM PANELKOPF, 15.09.2026, Sitzung 160e0796
   Beide Elemente setzt begruessung.js zwischen Marke und rechte Seite.
   Ab 1040 Pixel steht alles in einer Zeile, die Begruessung nimmt den freien
   Platz. Darunter rutscht sie hinter die rechte Seite in eine eigene Zeile,
   unter 768 auch die Besuchsanzeige. Breakpunkte nur 490, 768, 1040.
   ========================================================================== */

/* Die Reiterleiste klebt unter dem Kopf. Bisher fest 60 Pixel, jetzt die
   gemessene Kopfhoehe. Am Handy setzt erik-mobile.css sie auf 0. */
.adm-tabs { top: var(--adm-kopf-hoehe, 60px); }

/* hidden verliert sonst gegen jede Klasse mit display. */
.adm-gruss[hidden],
.adm-besuch[hidden] { display: none; }

.adm-gruss {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--vr-linie-soft, #E8DDC4);
  animation: adm-gruss-ein 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.adm-gruss__titel {
  margin: 0;
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--vr-burgund, #6E1A24);
}

.adm-gruss__zeile {
  margin: 3px 0 0;
  font-family: var(--vr-font-body, Georgia, serif);
  font-size: 13px;
  line-height: 1.35;
  color: var(--vr-text-muted, #6B5E50);
}

/* 24.09.2026, Sitzung a9c2aede: der Name abgesetzt, in Gruen.
   Hell #2E7D32 auf Weiss 5,1 zu 1, dunkel #8BD17C auf #1A1410 9,6 zu 1. */
.adm-gruss__name {
  color: #2E7D32;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Natuerliche Textbreite: begruessung.js misst sie fuer die Entscheidung
   mittig oder eigene Zeile. */
.adm-gruss p,
.adm-besuch p { width: max-content; max-width: 100%; }
.adm-gruss { text-align: center; }
.adm-gruss p { margin-left: auto; margin-right: auto; }

/* Mittig im ganzen Kopf, wenn beide Seiten Platz lassen. */
.adm-header.adm-kopf--mitte { position: sticky; }
.adm-header.adm-kopf--mitte .adm-gruss {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 44%;
  padding: 0;
  border: 0;
}
.adm-header.adm-kopf--mitte .adm-besuch { margin-left: auto; }

.adm-besuch {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 340px;
  padding-left: 12px;
  border-left: 2px solid var(--vr-gold, #B8924A);
  font-family: var(--vr-font-body, Georgia, serif);
  font-size: 12px;
  line-height: 1.4;
  color: var(--vr-text-muted, #6B5E50);
}

.adm-besuch p { margin: 0; }

.adm-besuch__jetzt::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #3F7A38;
  vertical-align: 1px;
}

.adm-besuch strong {
  font-weight: 600;
  color: #2F5B2A;
}

@keyframes adm-gruss-ein {
  from { opacity: 0; translate: 0 4px; }
}

/* Zwei Zeilen setzt begruessung.js, wenn der Platz fuer die Mitte nicht
   reicht. Oben Marke und Knoepfe, darunter die Begruessung mittig in einer
   eigenen Zeile. Die Besuchsanzeige steht oben mit, wenn sie passt. */
.adm-header.adm-kopf--zweizeilig .adm-header__right { order: 2; }
.adm-header.adm-kopf--zweizeilig .adm-gruss {
  order: 3;
  flex: 1 1 100%;
  padding-left: 0;
  border-left: 0;
}
.adm-header.adm-kopf--zweizeilig .adm-besuch { order: 4; flex-basis: 100%; max-width: none; }
.adm-header.adm-kopf--zweizeilig.adm-kopf--besuch-oben .adm-besuch { order: 1; flex: 0 0 auto; margin-left: auto; max-width: 340px; }

@media (max-width: 767px) {
  .adm-header { row-gap: 10px; }
  .adm-gruss,
  .adm-besuch {
    flex-basis: 100%;
    max-width: none;
  }
}

html[data-theme="dark"] .adm-gruss { border-left-color: #4A2025; }
html[data-theme="dark"] .adm-gruss__titel { color: #F5EFE0; }
html[data-theme="dark"] .adm-gruss__name { color: #8BD17C; }
html[data-theme="dark"] .adm-gruss__zeile,
html[data-theme="dark"] .adm-besuch { color: #C9B998; }
html[data-theme="dark"] .adm-besuch strong { color: #9FD08F; }
html[data-theme="dark"] .adm-besuch__jetzt::before { background: #7DB86F; }

@media (prefers-reduced-motion: reduce) {
  .adm-gruss { animation: none; }
}