/* ---------------------------------------------------------------------------
   Kopf von ServyHub – Hinweisleiste, Kopf, Sprachwahl, mobiles Menü.

   Alles hängt an eigenen Klassen (sh-…): Die Apps, die diesen Kopf einbinden,
   haben eigene .btn, .wrap oder .iconbtn – die dürfen hier nichts verbiegen,
   und dieser Kopf nichts bei ihnen. Farben, Abstände und Radien kommen aus den
   Tokens der Startseite (design/tokens.css).
   --------------------------------------------------------------------------- */

.sh-leiste, .sh-kopf, .sh-menue { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
/* Verborgen heißt verborgen – auch in einer App ohne globale [hidden]-Regel (die Startseite hat eine, die Apps
   nicht unbedingt). Sonst stünden Sprachmenü und mobiles Menü dort offen. */
.sh-leiste [hidden], .sh-kopf [hidden], .sh-menue[hidden], .sh-menue [hidden] { display: none !important; }
.sh-leiste *, .sh-kopf *, .sh-menue * { box-sizing: border-box; }
.sh-kopf a, .sh-leiste a, .sh-menue a { color: inherit; text-decoration: none; }
.sh-kopf button, .sh-menue button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.sh-kopf svg.i, .sh-menue svg.i { width: 20px; height: 20px; flex: none; }
.sh-kopf :focus-visible, .sh-menue :focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 2px; border-radius: 6px; }
.sh-wrap { width: min(1200px, 100% - 2 * var(--space-4)); margin-inline: auto; }
.sh-unsichtbar {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sh-reihe { display: flex; align-items: center; gap: var(--space-2); }

/* ------------------------------------------------------------ Hinweisleiste */
.sh-leiste { background: var(--primary); color: var(--on-primary); font-size: 13px; line-height: 18px; font-weight: 600; }
.sh-leiste .sh-wrap { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sh-leiste a { text-decoration: underline; text-underline-offset: 3px; }
.sh-leiste nav { display: flex; gap: 6px; white-space: nowrap; }
.sh-leiste nav a { text-decoration: none; }
.sh-leiste nav a:hover { text-decoration: underline; }
.sh-leiste :focus-visible { outline: 3px solid var(--on-primary); outline-offset: 2px; }
.sh-leiste-ende { display: flex; align-items: center; gap: var(--space-3); }
.sh-leiste-zu { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -6px; border: 0; border-radius: 999px;
  background: none; color: inherit; cursor: pointer; }
.sh-leiste-zu:hover { background: rgba(255, 255, 255, .16); }
.sh-leiste-zu svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------- Kopf */
.sh-kopf { position: sticky; top: 0; z-index: 20; background: var(--surface-card); border-bottom: 1px solid var(--border); color: var(--ink); }
.sh-kopf > .sh-wrap { height: 76px; display: flex; align-items: center; gap: var(--space-8); }
/* Breit: Die Navigation (bzw. das Menü der App) steht in der Mitte des Kopfs, nicht am Logo (Aleksej 2026-10-08).
   Drei Spalten – die äußeren gleich breit, solange Platz ist, aber nie schmaler als ihr Inhalt: Wird es eng (langer
   Name), rückt die Mitte zur Seite, statt Logo oder Aktionen zu überdecken (2026-10-11). */
@media (min-width: 1181px) {
  .sh-kopf > .sh-wrap { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .sh-kopf > .sh-wrap > .sh-logo { grid-column: 1; justify-self: start; }
  .sh-kopf > .sh-wrap > .sh-hauptnav { grid-column: 2; }
  .sh-kopf > .sh-wrap > .sh-aktionen { grid-column: 3; justify-self: end; margin-left: 0; }
}

/* Logo: Zeichen als Bild (vorab in 32/64/96 px gerechnet), Wortmarke als Text. */
.sh-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.sh-zeichen { width: 32px; height: 32px; display: block; }
.sh-wort { font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.sh-hub { color: var(--brand-hub); }

.sh-hauptnav { display: flex; gap: var(--space-6); font-weight: 600; font-size: 15px; }
.sh-hauptnav a { color: var(--ink-muted); white-space: nowrap; padding: 6px 0; }
.sh-hauptnav a:hover, .sh-hauptnav a[aria-current] { color: var(--ink); }

.sh-aktionen { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.sh-iconbtn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  position: relative; border: 1px solid var(--border) !important; background: var(--surface-card) !important; flex: none;
}
.sh-iconbtn:hover { background: var(--surface-raised) !important; }
.sh-punkt {
  position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--surface-card); line-height: 1;
}
.sh-trenner { width: 1px; height: 28px; background: var(--border); margin-inline: var(--space-2); }

.sh-anmelden {
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-pill);
  font-weight: 700; font-size: 15px; border: 1px solid var(--border); background: var(--surface-card);
}
.sh-anmelden:hover { background: var(--surface-raised); }
/* „Anmelden“ leicht hervorgehoben – wie btn-soft der Startseite (Aleksej 2026-10-08); angemeldet (Name) wieder neutral. */
.sh-anmelden:not([data-sh-angemeldet]) { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.sh-anmelden:not([data-sh-angemeldet]):hover { background: var(--surface-raised); border-color: var(--border); }
.sh-anmelden.sh-breit { width: 100%; }
/* Angemeldet steht dort der Name – lange Namen werden gekürzt. */
.sh-anmelden[data-sh-angemeldet] { display: inline-block; line-height: 42px; max-width: 16em; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.sh-anmelden.sh-breit[data-sh-angemeldet] { max-width: none; }
.sh-burger { display: none !important; }

/* Sprache: Flagge und Kürzel, wie in den Apps – ein Klick öffnet die Wahl. */
.sh-sprache { position: relative; }
.sh-sprache-knopf {
  height: 44px; padding: 0 var(--space-2) !important; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink-muted) !important;
}
.sh-sprache-knopf:hover, .sh-sprache-knopf[aria-expanded="true"] { color: var(--ink) !important; background: var(--surface-raised) !important; }
.sh-flagge { font-size: 16px; line-height: 1; }
.sh-sprachmenue {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); padding: 6px; display: grid; gap: 2px;
}
.sh-sprachmenue button {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
  padding: 10px 12px !important; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.sh-sprachmenue button:hover:not(:disabled) { background: var(--surface-raised) !important; }
.sh-sprachmenue button[aria-checked="true"] { color: var(--primary-ink) !important; }
.sh-sprachmenue { max-height: min(70vh, 520px); overflow-y: auto; }

/* Angemeldet (Startseite): Kreis mit Initialen, Name, Menü – wie das Konto in events/web */
.sh-konto { position: relative; }
.sh-konto-knopf {
  height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); max-width: 20em;
  padding: 0 var(--space-4) 0 4px !important; border-radius: var(--radius-pill);
  border: 1px solid var(--border) !important; background: var(--surface-card) !important;
}
.sh-kopf .sh-konto-knopf { font-weight: 700; font-size: 15px; }
.sh-konto-knopf:hover, .sh-konto-knopf[aria-expanded="true"] { background: var(--surface-raised) !important; }
.sh-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 800;
}
.sh-konto-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Schmal (Kopf als Zeile): Zwischen 680 und ~760 px schob ein langer Name das Menü aus dem Bild – der Name kürzt sich
   statt dessen. Nur hier: Im breiten Raster ließe min-width: 0 die Aktionen in die Navigation laufen. */
@media (max-width: 1180px) {
  .sh-aktionen, .sh-konto, .sh-konto-knopf { min-width: 0; }
  .sh-aktionen > :not(.sh-konto) { flex: none; }
}
.sh-avatar svg.i { width: 18px; height: 18px; }
.sh-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sh-avatar { overflow: hidden; }
.sh-kontomenue {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); padding: 6px; display: grid; gap: 2px;
}
.sh-kontomenue-kopf { margin: 0; padding: 8px 12px; font-size: 13px; color: var(--ink-muted); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.sh-kontomenue form { margin: 0; }
.sh-kontomenue a, .sh-kontomenue button {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
  padding: 10px 12px !important; border-radius: 10px; font-size: 14px; font-weight: 600;
}
.sh-kontomenue a:hover, .sh-kontomenue button:hover { background: var(--surface-raised) !important; }
.sh-kontomenue button { color: var(--danger) !important; }
/* Nachrichten: Zahl am Eintrag und am Konto-Knopf (ungelesen über alle Apps) */
.sh-kontomenue .sh-zahl {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; display: grid; place-items: center; line-height: 1;
}
.sh-kontomenue .sh-zahl[hidden] { display: none; }
.sh-menue-konto .sh-zahl {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; display: grid; place-items: center; line-height: 1;
}
.sh-menue-konto { margin-top: var(--space-2); }
.sh-konto-knopf { position: relative; }
/* Ungelesene Erwähnung (@ich): „@3“ – Zahl im Menü wird rot wie der Punkt, der Punkt bekommt Luft für das @ */
.sh-punkt.sh-erwaehnt { padding: 0 4px; }
/* Das „@“ der Schrift reicht unter die Grundlinie – kleiner und angehoben, damit „@3“ mittig in der Pille sitzt */
.sh-erwaehnt { grid-auto-flow: column; }
.sh-erwaehnt .sh-at { font-size: .85em; position: relative; top: -.08em; margin-right: 1px; }
.sh-zahl.sh-erwaehnt { background: var(--danger); color: #fff; }

/* ------------------------------------------------------------- Mobiles Menü */
.sh-menue {
  position: fixed; inset: 0; z-index: 40; background: var(--surface-page); color: var(--ink);
  overflow-y: auto; padding-bottom: var(--space-12);
}
.sh-menue-kopf { height: 68px; display: flex; align-items: center; border-bottom: 1px solid var(--border); background: var(--surface-card); }
.sh-menue-kopf .sh-wrap { display: flex; align-items: center; justify-content: space-between; }
.sh-menue-inhalt { padding-top: var(--space-6); display: grid; gap: var(--space-6); }
.sh-lab { margin: 0 0 var(--space-2); font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.sh-menue-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sh-menue-liste a {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border); font-weight: 700;
}
.sh-menue-liste a[aria-current] { border-color: var(--primary); }
.sh-mini { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--c); flex: none; }
.sh-mini svg.i { width: 18px; height: 18px; }
.sh-ikon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); flex: none; }
.sh-ikon svg.i { width: 22px; height: 22px; }
body.sh-menue-offen { overflow: hidden; }

/* --------------------------------------------------------------- Responsiv */
@media (max-width: 1180px) {
  /* In einer App (sh-app) bleibt ihr Menü stehen – die App regelt es selbst */
  .sh-kopf:not(.sh-app) .sh-hauptnav { display: none; }
  .sh-burger { display: grid !important; }
  .sh-kopf > .sh-wrap { gap: var(--space-4); }
}
@media (max-width: 680px) {
  .sh-leiste .sh-rechts { display: none; }
  .sh-kopf > .sh-wrap { height: 64px; }
  .sh-wort { font-size: 22px; }
  .sh-zeichen { width: 28px; height: 28px; }
  /* Anmelden bzw. das Konto der App steht dann im mobilen Menü */
  .sh-kopf .sh-anmelden, .sh-kopf:not(.sh-app) [data-sh-konto], .sh-kopf .sh-konto, .sh-trenner { display: none; }
  /* In einer App stehen Menü, Konto und Glocke auch schmal im Kopf – enger Abstand, sonst läuft er bei 375 px über */
  .sh-kopf.sh-app > .sh-wrap { gap: var(--space-2); }
}
@media (max-width: 420px) {
  /* Angemeldet stehen Darstellung, Glocke, Sprache und Menü nebeneinander – bei 375–390 px lief das 30 px über */
  .sh-kopf > .sh-wrap { gap: var(--space-2); }
  .sh-aktionen { gap: var(--space-1); }
  .sh-sprache-knopf { padding: 0 6px !important; }
  .sh-sprache-knopf .sh-flagge { display: none; }
}
@media print {
  .sh-leiste, .sh-kopf, .sh-menue { display: none !important; }
}

/* Sitzung abgelaufen: Hinweis unter dem Kopf, überall gleich (sh-session-expired) */
.sh-abgelaufen { background: var(--primary-soft); color: var(--primary-ink); border-bottom: 1px solid var(--border); font-family: var(--font-sans); }
.sh-abgelaufen .sh-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 52px; flex-wrap: wrap; padding-block: var(--space-2); }
.sh-abgelaufen span { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.sh-abgelaufen svg.i { width: 18px; height: 18px; }
.sh-abgelaufen-knopf { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-5); border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-weight: 700; text-decoration: none; }
.sh-abgelaufen-knopf:hover { filter: brightness(1.05); }

/* ---------------------------------------------------------------- servybill.com */
/* Logo: Wortmarke Servy + Bill, darunter klein „von ServyHub“ (Aleksej 2026-10-27) */
.sh-wortblock { display: grid; line-height: 1; }
.sh-von { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--ink-muted); white-space: nowrap; }
/* Die drei Punkte stehen in jeder Breite in der Mitte (Aleksej 2026-10-27): breit in der mittleren Spalte, schmal in
   einer eigenen Zeile unter Logo und Aktionen */
.sh-kopf.sh-marke-servybill > .sh-wrap { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
.sh-kopf.sh-marke-servybill > .sh-wrap > .sh-logo { grid-column: 1; justify-self: start; }
.sh-kopf.sh-marke-servybill > .sh-wrap > .sh-hauptnav { grid-column: 2; justify-self: center; }
.sh-kopf.sh-marke-servybill > .sh-wrap > .sh-aktionen { grid-column: 3; justify-self: end; margin-left: 0; }
@media (max-width: 720px) {
  .sh-kopf.sh-marke-servybill > .sh-wrap { height: auto; padding-top: var(--space-3); row-gap: var(--space-2);
    grid-template-columns: 1fr auto; grid-template-areas: "logo aktionen" "nav nav"; }
  .sh-kopf.sh-marke-servybill > .sh-wrap > .sh-logo { grid-area: logo; }
  .sh-kopf.sh-marke-servybill > .sh-wrap > .sh-aktionen { grid-area: aktionen; }
  .sh-kopf.sh-marke-servybill > .sh-wrap > .sh-hauptnav { grid-area: nav; display: flex; justify-content: center; gap: var(--space-6);
    padding-bottom: var(--space-2); }
}