/* Der globale LEVEL-ONE Kopf.

   Aufbau und Optik folgen dem bewaehrten Stand aus develop. Hier steht
   ausschliesslich der Grundaufbau; die Umschaltung auf schmale Geraete steht
   geschlossen in 90-responsive.css, damit es genau eine Stelle gibt, an der
   sich das Kopflayout aendert. */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px)}
.site-header-shell{min-height:76px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}
.site-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-width:0}

/* Die Marke wird ueber die HOEHE gesetzt, nicht ueber die Breite. Das Logo
   behaelt damit sein Seitenverhaeltnis, fuellt die Kopfzeile gleichmaessig
   aus und kann seine Nachbarn nicht verdraengen. Eine Regel fuer alle
   Breiten - schmale Geraete aendern nur den Wert von --header-logo-h. */
.site-brand{display:inline-flex;align-items:center;min-width:0}
.site-brand img{display:block;height:var(--header-logo-h);width:auto;max-width:100%;object-fit:contain;object-position:left center}

.main-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem}
.main-nav a,.mobile-main-nav a{padding:.58rem .78rem;border-radius:var(--radius-pill);color:var(--muted);text-decoration:none;font-weight:700}
/* Ein Zustand fuer beide Navigationen. Zuvor kannte die mobile Liste nur
   `is-active` - Hover und Tastaturfokus fehlten dort ganz, obwohl sie auf dem
   Telefon die einzige Navigation ist. */
.main-nav a:hover,.main-nav a:focus-visible,.main-nav a.is-active,
.mobile-main-nav a:hover,.mobile-main-nav a:focus-visible,.mobile-main-nav a.is-active{color:var(--text);background:var(--brand-soft);outline:none}
.main-nav a:focus-visible,.mobile-main-nav a:focus-visible{box-shadow:0 0 0 2px var(--theme-focus-ring)}
/* Der aktive Eintrag muss sich auch ohne Farbwahrnehmung vom blossen
   Hover unterscheiden - deshalb zusaetzlich die Randmarkierung. */
.mobile-main-nav a.is-active{box-shadow:inset .18rem 0 0 var(--brand)}
/* Markierung UND Fokusring: beide zeichnen box-shadow und haben dieselbe
   Spezifitaet - ohne diese Regel schluckt die Markierung den Fokusring, und
   der aktive Eintrag waere per Tastatur nicht mehr zu erkennen. */
.mobile-main-nav a.is-active:focus-visible{box-shadow:inset .18rem 0 0 var(--brand),0 0 0 2px var(--theme-focus-ring)}

/* Kontomenue.

   Name und Uhrzeit stehen UNTEREINANDER (Regel aus develop, die hier bisher
   fehlte). Ohne sie liefen beide nebeneinander in voller Textgroesse und der
   Knopf wurde so breit, dass er auf Tablets das Logo ueberlief. Die Kette aus
   `min-width:0` erlaubt dem Namen, statt dessen zu kuerzen - damit kann der
   Kopf bei keiner Breite mehr ueberlaufen. */
.site-header-account,.mobile-nav{position:relative}
.site-header-account,.site-header-account-toggle{min-width:0}
.site-header-account-meta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;line-height:1.15}
.site-header-account-time{color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums}
.site-header-account summary,.mobile-nav summary{list-style:none;cursor:pointer}
.site-header-account summary::-webkit-details-marker,.mobile-nav summary::-webkit-details-marker{display:none}
.site-header-account-toggle{display:flex;align-items:center;gap:.5rem;padding:.34rem .55rem;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface)}
.site-header-account-avatar{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--brand-soft);font-weight:900}
.site-header-account-name{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:800}
.site-header-account-menu{position:absolute;right:0;top:calc(100% + .45rem);z-index:60;min-width:13rem;padding:.45rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-strong);box-shadow:var(--shadow)}
.site-header-account-menu a{display:block;padding:.65rem .75rem;border-radius:.55rem;text-decoration:none}
.site-header-account-menu a:hover{background:var(--brand-soft)}
.site-header-account-item{display:grid;gap:.1rem}
.site-header-account-item-label{font-weight:800;font-size:.9rem}
.site-header-account-item-hint{color:var(--muted);font-size:.76rem}
.site-header-account-item.is-active{background:var(--brand-soft)}
.site-header-account-item-logout{margin-top:.25rem;border-top:1px solid var(--border);border-radius:0 0 .55rem .55rem}

/* Mobiles Hauptmenue. Das Panel bleibt immer im Viewport und scrollt in sich
   selbst, statt den Kopf zu sprengen, wenn viele Eintraege sichtbar sind. */
.mobile-nav{display:none}
.mobile-nav>summary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);padding:.58rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-weight:800}
.mobile-nav>summary:hover,.mobile-nav>summary:focus-visible,.mobile-nav[open]>summary{border-color:var(--brand);background:var(--brand-soft);outline:none}
.mobile-nav>summary:focus-visible{box-shadow:0 0 0 3px var(--theme-focus-ring)}
.mobile-main-nav{position:absolute;right:0;top:calc(100% + .45rem);z-index:61;display:grid;gap:.25rem;width:min(18rem,calc(100vw - 2*var(--page-gutter)));max-height:calc(100dvh - 8rem);overflow-y:auto;padding:.5rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-strong);box-shadow:var(--shadow)}
.mobile-main-nav a{display:flex;align-items:center;min-height:var(--tap)}
/* Trennt Hauptbereiche von den Eintraegen des eigenen Kontos. Eine Linie
   statt einer Ueberschrift - sie ordnet, ohne das Menue laenger zu machen. */
.mobile-main-nav-divider{display:block;height:1px;margin:.35rem .25rem;background:var(--border)}

/* Design-Auswahl */
.site-header-theme{position:relative}
.site-header-theme>summary{list-style:none;cursor:pointer}
.site-header-theme>summary::-webkit-details-marker{display:none}
.site-header-theme-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:.55rem;min-height:2.55rem;padding:.45rem .9rem;border:1px solid var(--brand);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font-size:.8rem;font-weight:800;letter-spacing:.03em;user-select:none}
.site-header-theme-toggle-label{text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.site-header-theme-toggle-current{padding-left:.55rem;border-left:1px solid var(--border);color:var(--text);font-weight:800}
.site-header-theme[open] .site-header-theme-toggle,.site-header-theme-toggle:hover,.site-header-theme-toggle:focus-visible{border-color:var(--brand);background:var(--brand-soft);color:var(--text);outline:none}
.site-header-theme-form{position:absolute;top:calc(100% + .5rem);right:0;z-index:60;min-width:min(15rem,86vw);display:grid;gap:.32rem;margin:0;padding:.45rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-strong);box-shadow:var(--shadow)}
.site-header-theme-item{-webkit-appearance:none;appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem;width:100%;min-height:2.3rem;padding:.55rem .75rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface);color:var(--text);font-size:.82rem;font-weight:800;text-align:left;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.site-header-theme-item:hover,.site-header-theme-item:focus-visible{border-color:var(--brand);background:var(--brand-soft);color:var(--text);outline:none}
.site-header-theme-item-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.site-header-theme-item-state{display:none}
.site-header-theme-item.is-active{border-color:var(--brand);background:var(--brand);color:var(--theme-button-text,#fff)}
.site-header-theme-item.is-active .site-header-theme-item-name{color:inherit}
.site-header-theme-item.is-active:hover{background:var(--brand)}
.site-header-theme-item.is-active .site-header-theme-item-state{display:inline-flex;align-items:center;justify-content:center;min-height:1.25rem;padding:0 .5rem;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 55%,transparent);color:inherit;font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* Glocke */
.site-header-notification{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:2.55rem;min-height:2.55rem;padding:.38rem .62rem;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--brand);text-decoration:none;transition:border-color .16s ease,background-color .16s ease,color .16s ease}
.site-header-notification:hover,.site-header-notification:focus-visible{border-color:var(--brand);background:var(--brand-soft);color:var(--text);outline:none}
.site-header-notification-icon{width:1.18rem;height:1.18rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.site-header-notification-badge{position:absolute;top:-.28rem;right:-.28rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.2rem;min-height:1.2rem;padding:0 .28rem;border-radius:var(--radius-pill);background:var(--danger);color:#fff;font-size:.7rem;font-weight:800;line-height:1}
/* Tastaturfokus fuer die beiden Knoepfe, die die Standard-Umrandung des
   Browsers loeschen. Ohne Ersatz sieht Fokus dort exakt aus wie Hover -
   wer mit der Tastatur bedient, sieht nicht, wo er steht. Derselbe Ring
   wie am Menue-Knopf. */
.site-header-theme-toggle:focus-visible,
.site-header-theme-item:focus-visible,
.site-header-notification:focus-visible{box-shadow:0 0 0 3px var(--theme-focus-ring)}