/* „Alle Bereiche"-Navigation (assets/areas.js). Eigene Datei, damit sie auch auf Seiten
   ohne die volle style.css (404, Login) eingebunden werden kann. */

.areas-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(212, 175, 55, .4);
  color: var(--gold-soft, #e8d9a8); border-radius: 999px;
  padding: 8px 15px; font-size: .82rem; font-family: inherit; cursor: pointer;
  white-space: nowrap; transition: background .15s, border-color .15s;
}
.areas-btn:hover { background: rgba(212, 175, 55, .16); border-color: rgba(212, 175, 55, .7); }
.areas-btn span { font-size: .9em; opacity: .85; }

/* In der Navigationsleiste ist ab ~700px kein Platz mehr für Symbol UND Text neben dem
   Warenkorb — dort bleibt nur das Symbol, der Name steckt im aria-label. Auf Login- und
   404-Seite ist Platz, dort bleibt die Beschriftung stehen. */
@media (max-width: 700px) {
  .subnav-actions .areas-btn .areas-btn-text,
  .pwa-header-actions .areas-btn .areas-btn-text { display: none; }
  .subnav-actions .areas-btn,
  .pwa-header-actions .areas-btn { padding: 8px 12px; }
}

/* Seiten ohne Navigationsleiste (Login, 404) hängen den Knopf über [data-areas-anchor] ein. */
.areas-inline { margin-top: 18px; text-align: center; }

.areas-overlay { position: fixed; inset: 0; z-index: 200; }
.areas-overlay[hidden] { display: none; }
.areas-backdrop { position: absolute; inset: 0; background: rgba(6, 9, 20, .78); backdrop-filter: blur(3px); }

.areas-panel {
  position: absolute; inset: auto 0 0 0; max-height: 88vh; overflow-y: auto;
  background: #0f1530; border-top: 1px solid rgba(212, 175, 55, .35);
  border-radius: 18px 18px 0 0; padding: 24px 22px calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .5);
  animation: areas-rise .22s ease;
}
@media (min-width: 900px) {
  .areas-panel {
    inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: min(1000px, 92vw); max-height: 88vh; border-radius: 18px;
    border: 1px solid rgba(212, 175, 55, .3);
  }
}
@keyframes areas-rise { from { transform: translateY(24px); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .areas-panel { animation: none } }

.areas-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.areas-head h2 { font-size: 1.15rem; color: #f6f4ec; margin: 0; }
.areas-close {
  background: none; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px;
  color: rgba(246, 244, 236, .7); font-size: .9rem; width: 32px; height: 32px;
  cursor: pointer; font-family: inherit;
}
.areas-close:hover { color: #f6f4ec; border-color: rgba(255, 255, 255, .4); }

/* align-content/-items: start ist wichtig — ohne das strecken sich die Rasterzeilen auf
   gleiche Höhe und zwischen den Gruppen klaffen auf dem Handy riesige Lücken. */
.areas-groups { display: grid; gap: 22px; align-content: start; align-items: start; }
@media (min-width: 700px) { .areas-groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .areas-groups { grid-template-columns: repeat(4, 1fr); } }

/* style.css setzt global `section{padding:120px 0}` — ohne das Zurücksetzen reißt jede
   Gruppe hier eine riesige Lücke auf (bekannte Falle, siehe frühere Fundstellen). */
.areas-group { padding: 0; margin: 0; }

.areas-group h3 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold, #d4af37); margin: 0 0 4px;
}
.areas-group.locked h3 { color: rgba(154, 160, 180, .95); }
.areas-lock { font-size: .9em; }
.areas-note { font-size: .72rem; color: rgba(246, 244, 236, .45); margin: 0 0 6px; line-height: 1.35; }
.areas-group ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.areas-group.locked ul { margin-top: 0; }

.areas-group a {
  display: block; padding: 7px 10px; border-radius: 9px; text-decoration: none;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.areas-group a:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.areas-group a.current { background: rgba(212, 175, 55, .12); border-color: rgba(212, 175, 55, .45); }
.areas-label { display: block; color: #f6f4ec; font-size: .92rem; }
.areas-group a.current .areas-label { color: var(--gold-soft, #e8d9a8); font-weight: 600; }
.areas-desc { display: block; color: rgba(246, 244, 236, .5); font-size: .74rem; line-height: 1.4; margin-top: 1px; }