/**
 * VOLTIGMA
 * Entwickler : Sven Helle
 * Webseite   : https://sven-helle.de
 * Projekt    : VOLTIGMA
 * Datei      : main-header.css
 * Version    : V3.0
 * Stand      : 26.09.2026
 *
 * Datei: public/assets/css/main-header.css
 * Aufgabe: Einheitliches Layout der zentralen Hauptnavigation und des Account-Overlays auf allen Benutzerseiten.
 * Weblink: sven-helle.de
 * Author: Sven Helle
 * Copyright: © 2026 Sven Helle
 */
.hh-main-header{box-sizing:border-box;position:relative;z-index:9000;width:calc(100% - 20px);min-height:82px;margin:10px auto 12px;padding:12px 18px 11px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(71,224,246,.82);border-radius:22px;background:linear-gradient(180deg,rgba(8,67,84,.97),rgba(3,35,51,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(0,220,255,.13);font-family:Arial,sans-serif;color:#effcff}.hh-main-header *{box-sizing:border-box}.hh-brand{min-width:410px;color:#eefcff;text-decoration:none;line-height:1}.hh-brand small{display:block;margin-bottom:7px;color:#9cebf5;font-size:11px;font-weight:900;letter-spacing:.16em}.hh-brand-line{display:flex;align-items:center;gap:9px;white-space:nowrap}.hh-brand strong{font-size:30px;letter-spacing:.02em}.hh-brand em{font-style:normal;font-size:25px;font-weight:300;letter-spacing:.035em;color:#c5d9df}.hh-brand b{padding:5px 8px;border:1px solid #37d8ed;border-radius:6px;background:#0a7895;color:#ffd34f;font-size:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.hh-main-nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.hh-nav-btn,.hh-icon-btn{height:52px;min-height:52px;border:1px solid rgba(73,225,246,.86);border-radius:16px;background:linear-gradient(180deg,rgba(23,119,143,.60),rgba(4,49,67,.80));box-shadow:inset 0 1px 0 rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:12px;font-weight:900;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.16s ease}.hh-nav-btn{width:150px;padding:0 12px}.hh-icon-btn{width:52px;min-width:52px;padding:0;font-size:22px;cursor:pointer}.hh-nav-btn:hover,.hh-icon-btn:not(:disabled):hover,.hh-nav-btn.is-active{transform:translateY(-1px);border-color:#76f4ff;background:linear-gradient(180deg,rgba(31,145,170,.72),rgba(4,59,79,.92));box-shadow:0 0 16px rgba(0,221,255,.17),inset 0 1px 0 rgba(255,255,255,.18)}.hh-icon-btn.is-disabled{opacity:.38;cursor:default}.hh-account-wrap{position:relative;flex:0 0 auto}.hh-account-toggle{border-color:#25d87e;background:linear-gradient(180deg,rgba(13,96,75,.8),rgba(3,57,53,.92))}.hh-account-menu{position:fixed;z-index:2147483000;width:238px;padding:9px;border:1px solid rgba(70,225,246,.9);border-radius:15px;background:linear-gradient(180deg,#0c4b61,#062b40);box-shadow:0 22px 60px rgba(0,0,0,.58),0 0 24px rgba(0,221,255,.20);color:#fff}.hh-account-menu[hidden]{display:none!important}.hh-account-head{padding:9px 10px 11px;border-bottom:1px solid rgba(110,230,246,.22);margin-bottom:5px}.hh-account-head small{display:block;color:#83cbd6;font-size:9px;letter-spacing:.12em}.hh-account-head strong{display:block;margin-top:3px;color:#fff;font-size:14px}.hh-account-menu>a,.hh-account-logout button{width:100%;min-height:39px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#eaffff;text-decoration:none;font:800 12px/1.2 Arial,sans-serif;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer}.hh-account-menu>a:hover,.hh-account-logout button:hover{background:rgba(69,215,239,.13);color:#fff}.hh-account-logout{margin:5px 0 0;padding-top:5px;border-top:1px solid rgba(110,230,246,.20)}.hh-account-logout button{color:#ffc1c8}.hh-credit{position:absolute;right:15px;top:6px;color:rgba(160,205,215,.55);font-size:8px;letter-spacing:.04em;pointer-events:none}.hh-music-btn.is-off{border-color:rgba(255,103,125,.78);color:#ff8ea1;background:linear-gradient(180deg,rgba(113,36,54,.68),rgba(55,17,29,.86))}
@media(max-width:1500px){.hh-main-header{padding-left:18px;gap:12px}.hh-brand{min-width:360px}.hh-brand strong{font-size:26px}.hh-brand em{font-size:21px}.hh-nav-btn{width:132px;font-size:11px}.hh-main-nav{gap:7px}}
@media(max-width:1180px){.hh-main-header{align-items:flex-start;flex-wrap:wrap}.hh-brand{min-width:0;flex:1 1 100%}.hh-main-nav{width:100%;justify-content:center;flex-wrap:wrap}.hh-nav-btn{width:auto;min-width:128px}.hh-credit{display:none}}
@media(max-width:640px){.hh-main-header{width:calc(100% - 12px);padding:10px;border-radius:16px}.hh-brand strong{font-size:22px}.hh-brand em{font-size:17px}.hh-brand b{font-size:13px}.hh-main-nav{gap:6px}.hh-nav-btn{height:44px;min-height:44px;min-width:calc(50% - 5px);font-size:10px}.hh-icon-btn{width:44px;min-width:44px;height:44px;min-height:44px}.hh-account-menu{width:min(238px,calc(100vw - 20px))}}

/* V4.6.15: kompakter zentraler Header mit quadratischem Home-Button. */
.hh-nav-btn{width:132px;padding-inline:10px}
.hh-nav-btn.is-active,.hh-icon-btn.is-active{border-color:#76f4ff;background:linear-gradient(180deg,rgba(31,145,170,.72),rgba(4,59,79,.92));box-shadow:0 0 16px rgba(0,221,255,.17),inset 0 1px 0 rgba(255,255,255,.18)}
.hh-home-btn{font-size:25px}
@media(max-width:1500px){.hh-nav-btn{width:116px;padding-inline:8px}.hh-main-nav{gap:6px}}

/* Einheitliche Icon-Darstellung; alle Navigationselemente bleiben getrennt. */
.hh-main-nav .hh-icon-btn{flex:0 0 52px;width:52px;min-width:52px;height:52px;min-height:52px;font-family:Arial,"Segoe UI Symbol",sans-serif;font-size:24px;font-weight:500;line-height:1;text-align:center;letter-spacing:0}
.hh-main-nav .hh-header-icon{display:block;width:25px;height:25px;flex:none;stroke-linecap:round;stroke-linejoin:round}
.hh-main-nav .hh-home-btn{font-size:29px;font-weight:400}
.hh-main-nav .hh-music-btn{font-size:27px;font-weight:500}
.hh-main-nav .hh-account-toggle{font-size:22px;font-weight:400}
.hh-main-nav .hh-nav-btn{font-size:12px;font-weight:800;letter-spacing:.025em}
.hh-main-nav .hh-nav-btn,.hh-main-nav .hh-icon-btn{vertical-align:middle;line-height:1.15}
@media(max-width:640px){.hh-main-nav .hh-icon-btn{flex-basis:44px;width:44px;min-width:44px;height:44px;min-height:44px}.hh-main-nav .hh-nav-btn{min-width:calc(50% - 5px)}}

/* Globale Privatnachrichten – nur angemeldete Benutzer */
.hh-pm-wrap{position:relative;flex:none}.hh-pm-bell{position:relative;font-size:26px!important}.hh-pm-count{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;border-radius:20px;background:#e94260;color:#fff;font:800 11px/21px Arial;text-align:center;padding:0 4px}.hh-pm-count[hidden]{display:none!important}.hh-pm-toasts{position:fixed;right:18px;top:18px;bottom:auto;z-index:2147483001;display:grid;gap:9px;width:min(340px,calc(100vw - 36px));pointer-events:none}.hh-pm-toast{pointer-events:auto;display:block;padding:14px 38px 14px 15px;position:relative;border:1px solid #35d4eb;border-radius:14px;background:#082e42;color:#e8fcff;text-decoration:none;box-shadow:0 10px 35px #0009;font:13px Arial}.hh-pm-toast strong{display:block;margin-bottom:5px;color:#68efb4}.hh-pm-toast span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hh-pm-toast button{position:absolute;right:8px;top:7px;background:transparent;color:#fff;border:0;font-size:20px;cursor:pointer}.hh-pm-toast a{color:inherit;text-decoration:none;display:block}

/* PM: Umschlag statt Textsymbol; Toasts oben rechts */
.hh-pm-bell{display:inline-flex;align-items:center;justify-content:center}
.hh-pm-bell .hh-header-icon{width:24px;height:24px;display:block}