/* ============================================================
   Triangle – Account-Pulldown + Shop-Button
   ADDITIV zu styles.css. Nutzt deine bestehenden Tokens
   (--paper-2, --line, --ink, --ink-soft, --green, --serif, --radius).
   Definiert KEINE eigenen Tokens und ueberschreibt NICHT deine
   bestehenden Header-Regeln (.site-header/.brand/.nav-toggle/.btn-login).
   Dein dunkles Theme, deine Schriften, dein Burger bleiben.
   ============================================================ */

/* Header-rechts: Aktions-Zeile (Nav + Account + Login + Shop) oben;
   Begruessung + Social brechen rechtsbuendig in die Zeile darunter um.
   (width:100% erzwingt den Umbruch im Row-Layout; im mobilen Spalten-
   Panel ist es ein No-op, da die Items dort ohnehin volle Breite haben.) */
.header-right{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.55rem 1.1rem; }
.header-social{ width:100%; justify-content:flex-end; flex-wrap:wrap; }
/* Duenner Trenner zwischen aktiven und "folgt"-Icons (TikTok, Instagram) - auf
   DERSELBEN Zeile (kein Zeilenumbruch mehr; Header bleibt zweizeilig). */
.social-break{ flex-basis:auto; width:1px; height:18px; margin:0 .15rem; background:var(--line); align-self:center; }

/* "zum Shop" – rot, Groesse wie .btn-login */
.btn-shop{
  background:#7a1626; color:#fff; border-color:transparent;
  padding:0.55em 1.3em; font-size:0.9rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-shop:hover{ background:#971a2e; color:#fff; }

/* ---------- Account-Trigger ---------- */
.account{ position:relative; }
.account-toggle{
  border:1px solid var(--line); color:var(--ink); background:transparent;
  padding:0.55em 1.1em; font-size:0.9rem;
}
.account-toggle:hover{ border-color:var(--green); color:var(--green); }
.account-toggle .caret{ width:14px; height:14px; color:var(--green); transition:transform .2s ease; }
.account[data-open="true"] .account-toggle{ border-color:var(--green); color:var(--green); }
.account[data-open="true"] .caret{ transform:rotate(180deg); }

/* ---------- Menue-Panel ---------- */
.account-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:320px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 30px 70px -28px #000; padding:.5rem; z-index:60;
  display:grid; grid-template-columns:auto 1fr;
  /* obere Akzent-Haarlinie */
  background-image:linear-gradient(90deg,transparent,var(--green),transparent);
  background-size:60% 1px; background-position:top center; background-repeat:no-repeat;
  /* Animation */
  opacity:0; transform:translateY(-6px) scale(.99); transform-origin:top right;
  pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.account[data-open="true"] .account-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
/* unsichtbare Bruecke gegen Hover-Abriss zwischen Button und Menue */
.account-menu::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }

/* Vertikales "ACCOUNT"-Wasserzeichen */
.account-rail{ display:grid; place-items:center; width:34px; border-right:1px solid var(--line); margin:.3rem .35rem; }
.account-rail span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--serif); font-weight:700; font-size:.72rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--ink-soft); opacity:.5;
}

/* Eintraege */
.account-list{ display:flex; flex-direction:column; padding:.15rem .2rem; }
.account-item{
  display:flex; align-items:center; gap:1rem; padding:.7rem .8rem;
  border-radius:6px; text-decoration:none; color:var(--ink); position:relative;
  transition:background .14s ease, color .14s ease;
}
.account-item + .account-item{ box-shadow:0 -1px 0 rgba(255,255,255,.04); }
.account-item .ic{ flex:none; width:22px; height:22px; color:var(--ink-soft); display:grid; place-items:center; transition:color .14s ease; }
.account-item .ic svg{ width:21px; height:21px; }
.account-item .lbl{ margin-left:auto; text-align:right; font-family:var(--serif); font-weight:500; font-size:1.02rem; letter-spacing:.015em; }
.account-item .lbl em{ font-style:normal; color:var(--ink-soft); font-weight:400; }
.account-item:hover, .account-item:focus-visible{
  background:color-mix(in oklab, var(--green) 12%, transparent);
  color:var(--green); outline:none;
}
.account-item:hover .ic, .account-item:focus-visible .ic,
.account-item:hover .lbl, .account-item:focus-visible .lbl{ color:var(--green); }
/* Akzentkante rechts beim Hover */
.account-item::after{
  content:""; position:absolute; right:0; top:18%; bottom:18%; width:2px;
  background:var(--green); border-radius:2px;
  opacity:0; transform:scaleY(.3); transition:opacity .14s ease, transform .14s ease;
}
.account-item:hover::after, .account-item:focus-visible::after{ opacity:1; transform:scaleY(1); }

/* ============================================================
   Mobile (< 860px): KOMPAKTER DROPDOWN UNTER DEM HEADER.
   Ueberschreibt bewusst den Vollhoehen-Drawer aus styles.css
   (position:fixed; inset:0; overflow-y:auto) -> der erzeugte den
   Laufbalken. Hier: position:absolute, height:auto, overflow:visible.
   ============================================================ */
@media (max-width:860px){
  .header-inner{ position:relative; }

  .header-right{
    position:absolute; top:calc(100% + 1px); right:0; bottom:auto; left:auto;
    width:max-content; max-width:min(320px, 88vw);
    height:auto; transform:none;
    /* Hoehenbremse: das Panel haengt im sticky Header, ein Ueberstand waere
       nicht wegscrollbar (der Header bleibt ja stehen). Darum auf die
       Fensterhoehe begrenzen und NUR im Notfall intern scrollen - der frueher
       stoerende Dauer-Laufbalken entsteht dabei nicht, weil max-height greift
       statt eines fixen Vollhoehen-Drawers. dvh wo vorhanden (mobile URL-Leiste). */
    max-height:calc(100vh - 7rem); max-height:calc(100dvh - 7rem);
    overflow-y:auto; overscroll-behavior:contain;
    /* nowrap ist Pflicht: die Desktop-Regel oben setzt flex-wrap:wrap, und eine
       Spalte MIT Hoehenbegrenzung bricht damit in eine zweite Spalte um statt zu
       scrollen (Eintraege lagen dann wild uebereinander). */
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:.5rem;
    background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 24px 60px -28px #000; padding:.85rem 1.1rem .95rem;
    display:none;
  }
  .header-right.open{ display:flex; transform:none; }
  /* Flex-Kinder duerfen NICHT schrumpfen: greift die Hoehenbremse oben, wuerden
     Navigation und Account-Liste sonst zusammengequetscht statt scrollbar. */
  .header-right > *{ flex-shrink:0; }

  .site-nav{ flex-direction:column; align-items:flex-start; gap:.35rem; width:100%; }
  /* Menueschrift kleiner als die 1.3rem aus styles.css (dort fuer den frueheren
     Vollhoehen-Drawer gedacht). Zusammen mit den engeren Abstaenden passt das
     Panel auf ueblichen Fensterhoehen ganz ins Bild - die Hoehenbremse oben ist
     nur das Netz fuer sehr flache Fenster. */
  /* SEO.md G3: die Menueeintraege selbst waren 21-36 px hoch. min-height 48
     plus Zentrierung - die Schriftgroesse bleibt bei .95rem. Gleiches Muster
     wie .btn-login darunter (E7). */
  .site-nav a{ font-size:.95rem; min-width:48px; min-height:48px; display:flex; align-items:center; }
  /* SEO.md E7: rund 27 px hoch, jetzt volle 48. inline-flex, weil die
     Basisregel in styles.css rein padding-basiert ist und min-height dort
     sonst nichts zu zentrieren haette. */
  .btn-login{ font-size:.9rem; padding:.45em 1.2em; min-height:48px;
              display:inline-flex; align-items:center; justify-content:center; }

  /* Account: kein Hover-Popup, inline ausgeklappt */
  .account{ width:100%; }
  .account-toggle{ display:none; }
  .account-menu{
    position:static; opacity:1; transform:none; pointer-events:auto;
    width:100%; min-width:0; border:0; box-shadow:none; padding:0;
    background:none; background-image:none;
  }
  .account-menu::before{ display:none; }
  .account-rail{ display:none; }
  /* SEO.md E7: sichtbarer Abstand zwischen den Zielen. Vorher lagen die
     Eintraege ohne Luecke uebereinander - danebengetippt hiess: falscher
     Eintrag, nicht Leerraum. */
  .account-list{ gap:.3rem; }
  /* SEO.md E7 - Tap-Targets. Das Panel war mobil auf rund 20 px hohe
     Eintraege zusammengeschrumpft; Lighthouse verlangt 48 x 48 px, und bei
     einer Zielgruppe 70+ ist das kein Pruefpunkt, sondern Bedienbarkeit.
     Die Folge ist beabsichtigt: das Panel wird hoeher und nutzt auf sehr
     flachen Fenstern die Hoehenbremse oben (internes Scrollen) - lieber
     scrollen als danebentippen. */
  .account-item{ min-height:48px; padding:.5rem .55rem; font-size:.9rem; }
  .account-item .ic{ width:20px; height:20px; }
  .account-item .ic svg{ width:19px; height:19px; }
  .account-item{ gap:.6rem; }

  .btn-shop{ width:100%; justify-content:center; }

  /* Willkommens-Text auf eigene volle Zeile - sonst ragt er (mit den Icons in
     einer flex-end-Zeile, ohne Umbruch) links aus dem schmalen Panel heraus.
     margin-right des inline-Styles hier neutralisieren (sonst 1em Ueberstand). */
  .header-social{ flex-wrap:wrap; }
  .header-social > p{ width:100%; margin-right:0 !important; }

  /* Social-Reihe passend zum schmalen Dropdown: die 42px-Icons in styles.css
     stammen noch vom frueheren Vollhoehen-Drawer. 5 Icons + Trenner brauchen
     damit ~280px, das Panel bietet aber nur ~276px -> Instagram rutschte in
     eine zweite Zeile. Etwas kleiner und enger -> alle fuenf in EINER Zeile.
     Linksbuendig, weil im Panel auch alles andere links steht. */
  .header-social{ gap:.55rem; justify-content:flex-start; }
  /* SEO.md G3: 48 statt der kompakten 36 px. Das Symbol darin bleibt bei
     17 px - nur die anfassbare Flaeche waechst. Diese Regel gewinnt gegen
     die 42 px in styles.css, weil account-menu.css spaeter geladen wird. */
  .header-social a{ width:48px; height:48px; }
  .header-social a svg{ width:17px; height:17px; }

  /* Navigator nach GANZ OBEN, zum Home-Symbol. Er ist im Markup das letzte
     Element des Header-Stacks; im aufgeklappten Panel landete er dadurch unten
     - auf den laengeren Seiten (Triangle/Tarock/Wuerfel) sogar unterhalb des
     Fensterrands. Und weil das Panel im sticky Header haengt, war er dort auch
     nicht herunterscrollbar, also faktisch unerreichbar. */
  .header-jump{ order:-1; }
}

/* ============================================================
   ADMIN-Pulldown (blauer Burger) - Eck-Element rechts oben.
   Reuse der .account-Mechanik; nur Trigger + Mobile-Verhalten anders.
   ============================================================ */

/* Robustes Header-Cluster: Brand links, alles andere rechts gebuendelt -
   so bleibt der Admin-Burger rechts neben "zum Shop", egal wie viele Items. */
.header-inner > .brand{ margin-right:auto; }

/* Blauer Burger (Striche), Form wie der weisse .nav-toggle */
.admin-toggle{
  display:inline-flex; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px; border-radius:6px;
}
.admin-toggle span{ width:24px; height:2px; background:#5AA9E6; border-radius:2px; transition:.2s ease; }
.admin-toggle:hover span{ background:#7FC4F2; }
.account.admin[data-open="true"] .admin-toggle span{ background:#7FC4F2; }
.account.admin[data-open="true"] .admin-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.account.admin[data-open="true"] .admin-toggle span:nth-child(2){ opacity:0; }
.account.admin[data-open="true"] .admin-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* "ADMIN"-Wasserzeichen leicht blau angedeutet */
.account.admin .account-rail span{ color:#5AA9E6; opacity:.6; }

/* Mobile: der Admin-Burger bleibt ein Popup-Dropdown (NICHT inline einklappen
   wie das Account-Menue im Drawer) - er steht ja eigenstaendig neben dem
   weissen Burger. Daher die generischen Mobile-.account-Regeln zurueckdrehen. */
@media (max-width:860px){
  .account.admin{ width:auto; position:relative; }
  .account.admin .admin-toggle{ display:inline-flex; }
  .account.admin .account-menu{
    position:absolute; top:calc(100% + 8px); right:0; left:auto;
    width:max-content; min-width:260px; max-width:88vw;
    border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 24px 60px -28px #000; padding:.5rem;
    background:var(--paper-2);
    background-image:linear-gradient(90deg,transparent,var(--green),transparent);
    background-size:60% 1px; background-position:top center; background-repeat:no-repeat;
    /* WICHTIG: die generische Mobile-Regel .account-menu{opacity:1} wieder
       zuruecknehmen - sonst bliebe das Admin-Popup hier dauerhaft sichtbar. */
    opacity:0; transform:translateY(-6px) scale(.99); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .account.admin[data-open="true"] .account-menu{
    opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
  }
  .account.admin .account-menu::before{ display:block; }
  .account.admin .account-rail{ display:grid; }
}

@media (prefers-reduced-motion:reduce){
  .account-menu, .caret, .account-item, .account-item::after,
  .admin-toggle span{ transition:none; }
}