/* Seitennavigation im Burger-Menü — alle Seiten, auf jeder Bildschirmbreite */

/* Burger auf allen Breiten sichtbar; die alte Mobil-Regel wird überschrieben */
.header .menu{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--touch-target,48px);
  height:var(--touch-target,48px);
  flex:none;
  padding:0;
  border:1px solid #ddd8c9;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 1px 2px #0000000a;
  transition:background 160ms var(--ease-out),border-color 160ms var(--ease-out),
             transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out);
}
.header .menu .menu-icon{display:block;pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .header .menu:hover{
    background:#fffaed;
    border-color:#e8c366;
    box-shadow:0 2px 8px #edaf2626;
  }
}
/* Solange die Navigation offen ist, bleibt der Knopf sichtbar aktiv */
.header .menu[aria-expanded="true"]{
  background:#fdf3d8;
  border-color:#e8c366;
}
.header .menu:active{transform:scale(.94)}
.header .menu:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Abdunkelung hinter dem Panel */
.sidenav-scrim{
  position:fixed;
  inset:var(--header-h,81px) 0 0;
  z-index:60;
  background:#20251d70;
  backdrop-filter:blur(7px);
  opacity:1;
  transition:opacity 220ms var(--ease-out);
}
.sidenav-scrim[hidden]{display:block!important;opacity:0;pointer-events:none}

/* Das Panel selbst */
.sidenav{
  border-top:1px solid #e6e1d5;
  position:fixed;
  top:var(--header-h,81px);
  right:0;
  bottom:0;
  z-index:61;
  width:min(340px,86vw);
  display:flex;
  flex-direction:column;
  background:#fffefa;
  border-left:1px solid #e6e1d5;
  box-shadow:-18px 0 40px #0000001f;
  transform:translateX(0);
  transition:transform 260ms var(--ease-out);
  overscroll-behavior:contain;
}
/* Verborgen: aus dem Bild geschoben, aber nicht display:none — sonst keine Animation */
.sidenav[hidden]{display:flex!important;transform:translateX(100%)}


.sidenav-body{
  display:flex;
  flex-direction:column;
  padding:var(--space-4) var(--space-3) var(--space-4);
  overflow-y:auto;
  flex:1;
}
.sidenav-label{
  margin:var(--space-4) var(--space-3) var(--space-1);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9a9c92;
}
.sidenav-body > .sidenav-label:first-child{margin-top:var(--space-2)}
.sidenav-body > a:first-child{margin-bottom:var(--space-2)}
.sidenav-body a{
  display:block;
  padding:var(--space-3);
  border-radius:9px;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  transition:background 160ms var(--ease-out),color 160ms var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .sidenav-body a:hover{background:#f6f3e9;color:#b67805}
}
.sidenav-body a:active{background:#f0ece0}
.sidenav-body a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
/* Aktuelle Seite */
.sidenav-body a[aria-current="page"]{
  background:#fdf3d8;
  color:#8a5a12;
  font-weight:600;
}

/* Dunkle Darstellung */
[data-theme=dark] .sidenav{background:var(--surface);border-left-color:var(--line);border-top-color:var(--line)}
[data-theme=dark] [data-theme=dark] .sidenav-body a{color:var(--ink)}
[data-theme=dark] .sidenav-label{color:#8d9285}
[data-theme=dark] [data-theme=dark] @media(hover:hover) and (pointer:fine){
  [data-theme=dark] .header .menu:hover{background:#ffffff14}
  [data-theme=dark] .sidenav-body a:hover{background:#333b2c;color:#ffd54c}
}
[data-theme=dark] .sidenav-body a:active{background:var(--line)}
[data-theme=dark] .sidenav-body a[aria-current="page"]{background:#3a3a24;color:#ffd54c}

/* Body-Scroll sperren, solange das Panel offen ist */
body.sidenav-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .sidenav{transition:opacity 180ms var(--ease-out)}
  .sidenav[hidden]{transform:none;opacity:0;pointer-events:none}
  .sidenav:not([hidden]){transform:none;opacity:1}
  .header .menu:active,}

/* ---- Schlanker Header: nur Logo, Sprachwahl und Burger ---- */
.header-slim{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
}
.header-slim .header-right{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-left:auto;
}
/* Die Sprachwahl trug im alten Header einen Trenner und Abstand nach links */
.header-slim .language-control{
  margin-left:0;
  padding-left:0;
  border-left:0;
}

/* ---- Aktionen am Fuß der Seitennavigation ---- */
.sidenav-actions{
  flex:none;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-3) var(--space-4);
  border-top:1px solid #ece8de;
}
.sidenav-actions .sidenav-cta{
  width:100%;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  font-size:14px;
}
.sidenav-theme{
  width:100%!important;
  height:auto!important;
  min-height:var(--touch-target,48px);
  border-radius:9px!important;
  place-items:unset;
}
.sidenav-login,
.sidenav-theme{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  width:100%;
  padding:var(--space-3);
  border:0;
  border-radius:9px;
  background:none;
  font:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:background 160ms var(--ease-out),transform 160ms var(--ease-out);
}
.sidenav-theme-icon{font-size:15px;line-height:1;width:1.2em;text-align:center}
@media(hover:hover) and (pointer:fine){
  .sidenav-login:hover,
  .sidenav-theme:hover{background:#f6f3e9}
}
.sidenav-login:active,
.sidenav-theme:active{transform:scale(.98);background:#f0ece0}
.sidenav-login:focus-visible,
.sidenav-theme:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}

[data-theme=dark] .sidenav-actions{border-top-color:var(--line)}
[data-theme=dark] .sidenav-login,
[data-theme=dark] .sidenav-theme{color:var(--ink)}
@media(hover:hover) and (pointer:fine){
  [data-theme=dark] .sidenav-login:hover,
  [data-theme=dark] .sidenav-theme:hover{background:#333b2c}
}
[data-theme=dark] .sidenav-login:active,
[data-theme=dark] .sidenav-theme:active{background:var(--line)}

@media(prefers-reduced-motion:reduce){
  .sidenav-login:active,.sidenav-theme:active{transform:none}
}



/* ---- Login als eigenständiger großer Button ---- */
.sidenav-login{
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-4)!important;
  border:1px solid #dcd7c8!important;
  border-radius:7px!important;
  font-size:14px!important;
  font-weight:650!important;
  background:#fff!important;
}
@media(hover:hover) and (pointer:fine){
  .sidenav-login:hover{background:#faf7ee!important;border-color:#cfc8b4!important}
}
.sidenav-login:active{transform:scale(.98)}

/* Darstellung ist kein Ziel, sondern ein Schalter — bleibt leise */
.sidenav-theme{
  justify-content:flex-start;
  font-size:13px!important;
  font-weight:500!important;
  color:var(--muted)!important;
  margin-top:var(--space-1);
}

[data-theme=dark] .sidenav-product strong{color:var(--ink)}
[data-theme=dark] .sidenav-product span{color:var(--muted)}
[data-theme=dark] .sidenav-body a:not(.sidenav-product){color:#d6d8cb}
[data-theme=dark] .sidenav-login{background:var(--sand)!important;border-color:#4a5240!important;color:var(--ink)}
[data-theme=dark] .sidenav-theme{color:var(--muted)!important}
@media(hover:hover) and (pointer:fine){
  [data-theme=dark] .sidenav-product:hover strong{color:#ffd54c}
  [data-theme=dark] .sidenav-product:hover span{color:#c9b47a}
  [data-theme=dark] .sidenav-login:hover{background:#39422f!important}
}
[data-theme=dark] .sidenav-product[aria-current="page"] strong{color:#ffd54c}
[data-theme=dark] .sidenav-product[aria-current="page"] span{color:#c9b47a}


/* Burger in dunkler Darstellung */
[data-theme=dark] .header .menu{
  background:var(--sand);
  border-color:#4a5240;
  color:var(--ink);
  box-shadow:none;
}
@media(hover:hover) and (pointer:fine){
  [data-theme=dark] .header .menu:hover{
    background:#39422f;
    border-color:#6b7359;
    box-shadow:none;
  }
}
[data-theme=dark] .header .menu[aria-expanded="true"]{
  background:#3a3a24;
  border-color:#8a7a3a;
}


/* ================= Produktbereiche ================= */
.sidenav-label{
  margin:0 var(--space-3) var(--space-2);
  font-size:10px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#9a9c92;
}
.sidenav-products{display:flex;flex-direction:column;gap:1px}

.sidenav-product{
  display:flex!important;
  align-items:flex-start;
  gap:var(--space-3);
  padding:10px var(--space-3)!important;
  border-radius:10px;
}
.sidenav-tile{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:#f7f3e9;
  border:1px solid #e9e2d2;
  transition:background 160ms var(--ease-out),border-color 160ms var(--ease-out);
}
.sidenav-icon{display:block;width:19px;height:19px;object-fit:contain}
.sidenav-text{display:block;min-width:0;padding-top:1px}
.sidenav-text strong{
  display:block;
  font-size:15.5px;
  font-weight:650;
  letter-spacing:-.011em;
  line-height:1.3;
  color:var(--ink);
  transition:color 160ms var(--ease-out);
}
.sidenav-text > span{
  display:block;
  margin-top:1px;
  font-size:12px;
  font-weight:400;
  line-height:1.35;
  color:var(--muted);
}
@media(hover:hover) and (pointer:fine){
  .sidenav-product:hover .sidenav-tile{background:#fdf3d8;border-color:#e8c366}
  .sidenav-product:hover .sidenav-text strong{color:#b67805}
}
.sidenav-product[aria-current="page"]{background:#fdf3d8}
.sidenav-product[aria-current="page"] .sidenav-tile{background:#fff;border-color:#e8c366}
.sidenav-product[aria-current="page"] .sidenav-text strong{color:#8a5a12}

/* ====== Zweiter Block: sitzt unten, bündig über den Schaltflächen ====== */
.sidenav-secondary{
  margin-top:auto;
  padding-top:var(--space-4);
  border-top:1px solid #ece8de;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.sidenav-secondary a{
  padding:var(--space-3)!important;min-height:var(--touch-target,48px);display:flex;align-items:center;
  font-size:13.5px;
  color:#5b5e55;
}
@media(hover:hover) and (pointer:fine){
  .sidenav-secondary a:hover{background:#f6f3e9;color:#b67805}
}
.sidenav-secondary a[aria-current="page"]{background:#fdf3d8;color:#8a5a12;font-weight:600}

/* Dunkle Darstellung */
[data-theme=dark] .sidenav-tile{background:#333b2c;border-color:#4a5240}
[data-theme=dark] .sidenav-icon{filter:brightness(1.55)}
[data-theme=dark] .sidenav-text strong{color:var(--ink)}
[data-theme=dark] .sidenav-text > span{color:var(--muted)}
[data-theme=dark] .sidenav-secondary{border-top-color:var(--line)}
[data-theme=dark] .sidenav-secondary a{color:var(--muted)}
@media(hover:hover) and (pointer:fine){
  [data-theme=dark] .sidenav-product:hover .sidenav-tile{background:#3f4a33;border-color:#8a7a3a}
  [data-theme=dark] .sidenav-product:hover .sidenav-text strong{color:#ffd54c}
  [data-theme=dark] .sidenav-secondary a:hover{background:#333b2c;color:#ffd54c}
}
[data-theme=dark] .sidenav-product[aria-current="page"]{background:#3a3a24}
[data-theme=dark] .sidenav-product[aria-current="page"] .sidenav-tile{background:#2a301f;border-color:#8a7a3a}
[data-theme=dark] .sidenav-product[aria-current="page"] .sidenav-text strong{color:#ffd54c}
[data-theme=dark] .sidenav-secondary a[aria-current="page"]{background:#3a3a24;color:#ffd54c}

/* ---- Pfeil in Schaltflächen: gezeichnet statt Schriftzeichen ---- */
/* Unicode-Pfeile werden auf iOS und Android teils als farbiges Emoji
   dargestellt und haben je nach Schrift eine andere Form und Lage. */
.btn-arrow{
  flex:none;
  width:1.14em;
  height:1.14em;
  margin-top:-0.06em; /* optischer Ausgleich: der Pfeil trägt oben mehr Masse */
}
.button .btn-arrow{opacity:.85}

/* ---- Pfeile in Texten und Links: gezeichnet statt Schriftzeichen ---- */
/* Unicode-Pfeile haben eine Emoji-Variante, die iOS und Android oft
   farbig darstellen. Gezeichnet folgen sie Schriftfarbe und -größe. */
.ui-arrow{
  display:inline-block;
  vertical-align:-0.13em;   /* auf die Grundlinie des Textes setzen */
  width:1.05em;
  height:1.05em;
  flex:none;
}
/* In Flex-Zeilen trägt vertical-align nicht, dort richtet der Container aus */
:is(a,span,b,div,button).ui-arrow-flex > .ui-arrow{vertical-align:0}

/* ---- Textlinks mit Pfeil: der Pfeil gehört zum letzten Wort ---- */
/* .text-link ist inline-flex; der Text ist dort ein eigenes Flex-Element
   und bricht um, während der Pfeil daneben stehen bleibt. */
.text-link{gap:7px}
.actions{flex-wrap:wrap}          /* schmale Breiten: Link rutscht unter den Knopf */
.actions > .text-link{flex:none}