/* ============================================================================
   Gemeinsame Portal-Hülle
   Kopfleiste in Hausfarbe (--accent) + App-Wechsler, darunter Modul-Tabs.
   Am Handy klappt alles in eine ☰-Schublade.
   Nutzt die Variablen aus tokens.css / app.css.
   ============================================================================ */

/* --- Kopfleiste (Hausfarbe) --------------------------------------------- */
.huelle-top{display:flex;align-items:center;gap:16px;padding:11px 22px;
  background:var(--accent);color:#fff;flex-wrap:wrap}
.huelle-logo{background:#fff;border-radius:9px;padding:5px 10px;display:flex;line-height:0}
.huelle-logo img{height:30px;display:block}
.huelle-app-name{font-family:var(--display);font-weight:600;font-size:18px;color:#fff}
a.huelle-app-name{text-decoration:none;padding:4px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.55)}
a.huelle-app-name:hover{background:rgba(255,255,255,.14)}

/* App-Wechsler (nur bei mehreren Apps) */
.huelle-apps{display:flex;gap:8px;flex-wrap:wrap}
.huelle-apps a{color:rgba(255,255,255,.85);text-decoration:none;font-size:13px;font-weight:600;
  padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.3)}
.huelle-apps a.app-aktiv{background:#fff;color:var(--accent-ink,var(--accent-dark));border-color:#fff}

.huelle-user{margin-left:auto;display:flex;align-items:center;gap:12px}
.huelle-user form{margin:0}
.huelle-user button{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;
  padding:6px 14px;border-radius:var(--radius-sm);cursor:pointer;font:inherit;font-size:13.5px}
.huelle-user button:hover{background:rgba(255,255,255,.14)}

.portalhinweise{position:relative}
.portalhinweise-toggle{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:34px;min-height:34px;padding:5px 8px!important;font-size:17px!important}
.hinweis-punkt{position:absolute;top:3px;right:4px;width:8px;height:8px;border-radius:50%;
  background:#d84b4b;border:2px solid var(--accent);box-sizing:content-box}
.portalhinweise-panel{position:absolute;z-index:20;top:calc(100% + 10px);right:0;width:min(330px, calc(100vw - 32px));
  padding:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:0 10px 26px rgba(43,35,25,.18)}
.portalhinweise-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.portalhinweise-kopf strong{display:block}
/* Lange Listen scrollen innerhalb der Glocke statt aus dem Bild zu laufen. */
.portalhinweise-liste{max-height:min(60vh, 420px);overflow-y:auto;overscroll-behavior:contain}
.portalhinweise-alle-gelesen{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:var(--radius-sm);padding:3px 9px;font:inherit;font-size:12px;cursor:pointer}
.portalhinweise-alle-gelesen:hover:not(:disabled){background:var(--surface-alt);color:var(--ink)}
.portalhinweise-alle-gelesen:disabled{opacity:.6;cursor:default}
/* Ungelesene Hinweise fallen auf, gelesene bleiben als Verlauf stehen. */
.portalhinweise-panel a[data-portalhinweise-ungelesen='true'] span{font-weight:600}
.portalhinweise-panel a[data-portalhinweise-ungelesen='true'] span::before{content:"";display:inline-block;
  width:7px;height:7px;margin-right:6px;border-radius:50%;background:#d84b4b;vertical-align:.08em}
.portalhinweise-panel a[data-portalhinweise-ungelesen='false'] span{color:var(--muted)}
.portalhinweise-panel a{display:flex;flex-direction:column;gap:2px;padding:9px 7px;color:var(--ink);
  text-decoration:none;border-top:1px solid var(--line-soft);font-size:13px}
.portalhinweise-panel a:hover{background:var(--surface-alt)}
.portalhinweise-panel small{color:var(--muted);font-size:11px}
.portalhinweise-leer{display:block;color:var(--muted);font-size:13px;padding:5px 0}
.huelle-account{position:relative}
.huelle-account summary{list-style:none;border:1px solid rgba(255,255,255,.55);color:#fff;
  padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px}
.huelle-account-trigger{max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.huelle-account summary::-webkit-details-marker{display:none}
.huelle-account summary:hover{background:rgba(255,255,255,.14)}
.huelle-account-menu{position:absolute;z-index:20;top:calc(100% + 10px);right:0;display:flex;flex-direction:column;
  min-width:180px;padding:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:0 10px 26px rgba(43,35,25,.18)}
.huelle-account-menu a{padding:9px 10px;color:var(--ink);text-decoration:none;font-size:13px}
.huelle-account-menu a:hover{background:var(--surface-alt)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.florist-farbpunkt{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;background:var(--florist-farbe);vertical-align:.05em}

/* --- Modul-Tabs --------------------------------------------------------- */
.huelle-tabs{display:flex;align-items:center;gap:24px;padding:0 22px;flex-wrap:wrap;
  background:var(--surface);border-bottom:1px solid var(--line)}
.huelle-tabs a{color:#5b5246;text-decoration:none;font-size:14.5px;font-weight:500;
  padding:13px 0;border-bottom:2px solid transparent}
.huelle-tabs a:hover{color:var(--ink)}
.huelle-tabs a.tab-aktiv{color:var(--ink);border-bottom-color:var(--accent)}

.huelle-burger{display:none}
.huelle-mob-apps{display:none}
.huelle-mob-user{display:none}

/* --- Handy: ☰-Schublade ------------------------------------------------- */
@media (max-width:820px){
  .huelle-top{--huelle-menu-top:62px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;column-gap:7px;row-gap:8px;padding:9px 12px;min-width:0}
  .huelle-top-mit-apps{--huelle-menu-top:100px}
  .huelle-logo{grid-column:1;grid-row:1;justify-self:start;min-width:0;padding:4px 7px}
  .huelle-logo img{height:24px;max-width:22vw}
  .huelle-app-name{display:none}
  .huelle-apps{grid-column:1 / -1;grid-row:2;width:100%;min-width:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .huelle-apps::-webkit-scrollbar{display:none}
  .huelle-user{grid-column:2;grid-row:1;display:flex;gap:7px;min-width:0}
  .huelle-user form{display:none}
  .huelle-account{min-width:0}
  .huelle-account-trigger{max-width:10ch}
  .huelle-burger{grid-column:3;grid-row:1;display:flex;margin-left:0;cursor:pointer;font-size:26px;line-height:1;
    color:#fff;padding:2px 8px;user-select:none;background:transparent;border:none}
  .portalhinweise-panel,.huelle-account-menu{position:fixed;top:var(--huelle-menu-top);left:16px;right:16px;width:auto;max-width:none}
  .huelle-tabs{display:none;flex-direction:column;align-items:flex-start;gap:0;padding:6px 16px}
  .huelle-drawer-toggle:checked ~ .huelle-tabs{display:flex}
  .huelle-tabs a{width:100%;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .huelle-tabs a.tab-aktiv{border-bottom-color:var(--line-soft);color:var(--accent-dark,var(--accent));font-weight:600}
  .huelle-mob-apps{display:flex;flex-direction:column;width:100%}
  .huelle-mob-user{display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:8px;width:100%;padding:12px 0 4px;margin-top:4px;border-top:1px solid var(--line)}
  .huelle-mob-user span{color:var(--muted);font-size:14px}
  .huelle-mob-user form{margin:0}
  .huelle-mob-user button{background:var(--accent);color:#fff;border:none;
    padding:7px 15px;border-radius:var(--radius-sm);cursor:pointer;font:inherit}
  .huelle-mob-melden{flex-basis:100%;order:3;padding-top:8px;border-top:1px solid var(--line-soft);
    color:var(--accent-dark,var(--accent));font-size:14px;text-decoration:none}
}