/*
 * 934tel Media – Kopf der drei Kundenseiten (Vertragsseite, Angebotsseite, Kundenportal), Issue #150.
 * Gehört zu js/site-chrome.js. Fuß, Rechtstext-Overlay, Hell/Dunkel- und Sprachumschalter kommen
 * wie auf der Website aus css/custom.css. Seiteneigenes (Menübreiten, Konto-Pille …) bleibt inline
 * in der Seite und steht dort nach diesem Stylesheet.
 */
.portal-page { min-height: 100vh; display: flex; flex-direction: column; }
.portal-topbar { position: sticky; top: 0; z-index: 20; background: rgb(var(--page) / 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
/* Kopf 1:1 wie die Website: Container 1280px + 1.5rem Rand, Höhe 72px (1rem oben/unten + 40px Logo-Reihe). */
.portal-topbar-inner { max-width: 1280px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* Logo wie im Website-Kopf: Quadrat im Akzentverlauf, daneben „934tel Media“, „Media“ blasser. */
.portal-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.portal-brand-mark { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: linear-gradient(to bottom right, rgb(var(--accent-rgb)), rgb(var(--accent-2-rgb))); display: flex; align-items: center; justify-content: center; padding: 0.375rem; flex: 0 0 auto; }
.portal-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
/* Im hellen Design das Mini-Logo auf dem Verlauf weiß einfärben (wie die Website). */
html.light .portal-brand-mark img { filter: brightness(0) invert(1); }
.portal-brand-name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; }
.portal-brand-name span { color: rgb(var(--ink) / 0.4); font-weight: 400; margin-left: 0.25rem; }
/* Linke Gruppe: Menü direkt neben dem Logo. Das Menü erscheint erst nach dem Rendern (.is-ready)
   und nur ab 901px; die .nav-link-Optik mit orangem Unterstrich kommt aus css/custom.css. */
.portal-lead { display: flex; align-items: center; gap: 3.5rem; min-width: 0; }
.portal-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 901px) { .portal-nav.is-ready { display: flex; } }
/* Rechte Gruppe wie der Website-Kopf: Hell/Dunkel, DE/EN, Knopf „Startseite“ in Größe von „Projekt starten“. */
.portal-top-actions { display: flex; align-items: center; gap: 1rem; }
.portal-cta { padding: 0.625rem 1.25rem; font-size: 0.875rem; line-height: 1.25rem; white-space: nowrap; }
/* Hinweis im Rechtstext-Overlay, wenn ein Text nur auf Deutsch vorliegt. */
.site-legal-note { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px; background: rgb(var(--accent-rgb) / 0.12); font-size: 14px; }