/* Kopf des Portals: Logo, Leiste, Menü hinter dem Namen. Gebraucht von jeder Portalseite (vorlagen/rahmen.php)
   und von der Sichtseite im Portal (sicht_rahmen in lib/auslieferung.php). Farben aus farben.css. */

/* Kopf: Logo, Leiste (Projekte, Eingang), Menü hinter dem Namen */
.portal-kopf { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  min-height: 56px; padding: 6px 24px; background: rgba(24, 24, 26, .9); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid #262629; box-sizing: border-box; }
.po-logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.po-logo svg { width: 24px; height: 24px; flex: none; fill: var(--amber); }
.po-logo .po-logo-aus { fill: #3A3A3E; }
.portal-kopf .portal-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--text); }
.po-logo:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.portal-kopf .platz { flex: 1; }
.portal-kopf form { margin: 0; }
.portal-nav { display: flex; gap: 2px; }
.portal-nav a { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 16px;
  color: var(--beschriftung); text-decoration: none; font-weight: 500; }
.portal-nav a:hover { background: var(--hover); color: var(--text); }
.portal-nav a[aria-current="page"] { background: #2A2A2E; color: var(--text); }
.po-zahl { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: var(--amber-text);
  font: 700 11px/18px var(--ui); text-align: center; box-sizing: border-box; }

/* Menüs zum Aufklappen (Konto oben rechts, „···“ im Projekt); menue.js schließt sie beim Klick daneben und mit Esc */
.po-menue, .po-mehr { position: relative; }
.po-menue summary, .po-mehr summary { list-style: none; cursor: pointer; }
.po-menue summary::-webkit-details-marker, .po-mehr summary::-webkit-details-marker { display: none; }
.po-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  background: linear-gradient(135deg, #F2A93B, #C46A2B); color: var(--amber-text); font-weight: 700; font-size: 14px; }
.po-avatar:focus-visible, .po-mehr summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.po-mehr summary { height: 34px; min-width: 34px; padding: 0 10px; border-radius: 8px; background: var(--taste);
  color: var(--beschriftung); font-weight: 700; display: grid; place-items: center; box-sizing: border-box; }
.po-mehr summary:hover { background: var(--taste-hover); color: var(--text); }
.po-menue-feld { position: absolute; right: 0; top: 42px; z-index: 30; width: 250px; padding: 6px; border-radius: 12px;
  background: #202023; border: 1px solid var(--trenn); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); box-sizing: border-box; }
.po-wer { padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--trenn); overflow-wrap: anywhere; }
.po-wer b { display: block; font-weight: 600; color: var(--text); }
.po-wer span { color: var(--graviert); font-size: 12px; }
.po-menue-feld a, .po-menue-feld form button { display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 8px 10px; border-radius: 8px; color: var(--beschriftung); text-decoration: none; background: none; font: inherit; }
.po-menue-feld a:hover, .po-menue-feld form button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.po-menue-feld a[aria-current="page"] { color: var(--text); }
.po-menue-feld form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--trenn); }