/* Rosigama: Menü mit den Kategorien (menue.js, Kundenwunsch 26.10.).
   Tafel auf Papier, dünne Linien wie im Shop, Rosenrot nur für Handlungen. */

/* ---------- Kopf: Knopf mit drei Strichen vor dem Logo ---------- */
.kopf__links { justify-self: start; display: flex; align-items: center; gap: 4px; min-width: 0; }
.kopf__links .marke { min-width: 0; }
.menueknopf { flex: none; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; margin-left: -10px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 600 15px/1 'Albert Sans', sans-serif; cursor: pointer; transition: background .2s; }
@media (hover: hover) { .menueknopf:hover { background: rgba(42, 26, 32, .06); } }
.menueknopf svg { flex: none; color: #000; } /* Kundenwunsch 26.10.: Striche schwarz, damit man sie sieht */
.ton-dunkel .kopf:not(.hat-grund):not(.ist-unten) .menueknopf svg { color: inherit; } /* auf dunklem Bild hell lassen */
/* Über dem Startbild: Striche als Maske mit schwarzem Grund. Der erzwungene Dunkelmodus
   (Samsung Internet, Chrome) färbt Schwarz als Grund nicht um, gezeichnete Striche schon (Kundenwunsch 26.10.). */
.menueknopf__schwarz { display: none; flex: none; width: 24px; height: 24px; background: #000;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 6.5h17M3.5 12h17M3.5 17.5h17' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 6.5h17M3.5 12h17M3.5 17.5h17' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
html:not(.ton-dunkel) .start .kopf:not(.hat-grund):not(.ist-unten) .menueknopf svg,
html:not(.ton-dunkel).start .kopf:not(.hat-grund):not(.ist-unten) .menueknopf svg { display: none; }
html:not(.ton-dunkel) .start .kopf:not(.hat-grund):not(.ist-unten) .menueknopf__schwarz,
html:not(.ton-dunkel).start .kopf:not(.hat-grund):not(.ist-unten) .menueknopf__schwarz { display: block; }
.menueknopf__text { display: none; }
@media (min-width: 961px) {
  .menueknopf { margin-right: 10px; padding: 0 14px 0 10px; }
  .menueknopf__text { display: inline; }
}
.bkopf .kopf__links { display: flex; }
.bkopf .menueknopf { margin-left: -10px; }
@media (max-width: 760px) {
  .kopf__links { gap: 2px; }
  .kopf__links .marke__logo { margin-right: 8px; }
}
/* Schmale Handys: Warenkorb nur als Zeichen mit Zahl, damit Menü, Logo und Korb in eine Zeile passen */
@media (max-width: 440px) {
  .korbknopf > span:not(.korbknopf__zahl) { display: none; }
  .korbknopf { padding: 0 12px; gap: 6px; }
  .marke, .bkopf .marke { font-size: 19px; letter-spacing: .12em; }
}

/* ---------- Die Tafel ---------- */
html.menue-offen { overflow: hidden; }
.menue { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(420px, 100%); height: 100%; max-height: none; max-width: 100%; padding: 0; border: 0; background: var(--papier); color: var(--tinte); box-shadow: 20px 0 60px rgba(42, 21, 32, .18); overscroll-behavior: contain; }
.menue::backdrop { background: rgba(42, 21, 32, .42); }
.menue[open] { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .menue[open] { animation: menueRein .26s var(--weich); }
  .menue[open]::backdrop { animation: menueSchleier .26s ease; }
  .menue.geht { animation: menueRaus .22s ease forwards; }
  .menue.geht::backdrop { animation: menueSchleier .22s ease reverse forwards; }
  @keyframes menueRein { from { transform: translateX(-100%); } to { transform: none; } }
  @keyframes menueRaus { to { transform: translateX(-100%); } }
  @keyframes menueSchleier { from { opacity: 0; } to { opacity: 1; } }
}
.menue__in { display: flex; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); }

.menue__kopf { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 8px 10px 8px 20px; background: var(--papier); border-bottom: 1px solid var(--linie); }
.menue__marke { font-size: 20px; letter-spacing: .14em; }
.menue__marke .marke__logo { width: 34px; height: 34px; margin-right: 10px; }
.menue__zu { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--tinte); cursor: pointer; transition: background .2s; }
.menue__zu:hover { background: rgba(42, 26, 32, .06); }

.menue__nav ul { list-style: none; margin: 0; padding: 0; }
.menue__zeile { border-bottom: 1px solid var(--linie); }
.menue__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 0 20px; border: 0; background: transparent; color: var(--tinte); font: 500 17px/1.3 'Albert Sans', sans-serif; text-align: left; text-decoration: none; cursor: pointer; transition: background .2s; }
.menue__link:hover { background: var(--hell); }
.menue__link svg { flex: none; transition: transform .25s var(--weich); }
.menue__auf[aria-expanded="true"] { color: var(--granat); }
.menue__auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.menue__unter { padding: 0 0 10px !important; background: var(--hell); border-top: 1px solid var(--linie); }
.menue__unterlink { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 20px 0 36px; color: var(--tinte); font-size: 16px; text-decoration: none; }
.menue__unterlink:hover { color: var(--granat); }
.menue__bald { flex: none; margin-left: auto; padding: 3px 9px; border-radius: 99px; background: var(--puder); color: var(--grau); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; }

.menue__mehr { padding: 14px 0 !important; }
.menue__mehr a { display: flex; align-items: center; min-height: 44px; padding: 0 20px; color: var(--grau); font-size: 15.5px; text-decoration: none; }
.menue__mehr a:hover { color: var(--tinte); }

.menue__fuss { margin-top: auto; padding: 20px 20px 28px; border-top: 1px solid var(--linie); }
.menue__fuss p { font-size: 15px; color: var(--grau); margin-bottom: 12px; }
.menue__wa { width: 100%; }