/* ═══════════════════════════════════════════════════════════════════════════
   DIE MOBILE SCHUBLADE                                          04.09.2026

   Ivos Wunsch nach dem Muster von my.fumee.at, in unserem Design: ein Menue,
   das auf dem Telefon von links aufklappt, mit einer zweiten Ebene fuer
   Untermenues.

   🔴 DIESE DATEI GILT FUER ALLE SEITEN. Vorher haette dieselbe Gestaltung
   sechsmal in sechs HTML-Dateien gestanden - die waeren beim ersten
   Nachbessern auseinandergelaufen. Wer hier etwas aendert, aendert es
   ueberall: Portal, Startseite, Shop, Webinar, beide Rechner und den
   Unternehmensbereich.

   Das Gegenstueck ist assets/pp-menue.js. Beide gehoeren zusammen.

   Die Farben kommen aus den Variablen der jeweiligen Seite (--gold,
   --verlauf, --border ...). Fehlt eine, greift der Wert dahinter - so bleibt
   die Schublade auch auf einer Seite benutzbar, die noch nicht umgestellt
   ist.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Auf dem grossen Bildschirm ist von alldem nichts zu sehen. */
.mm-knopf{display:none;}
#mmBlende{display:none;}
#mmLade{display:none;}

@media (prefers-reduced-motion:reduce){
  #mmLade{transition:none !important;}
  .mm-knopf span,.mm-pfeil{transition:none !important;}
}

@media(max-width:680px){

  /* Was die Seite auf dem Telefon in die Schublade abgibt. Die Liste steht
     je Seite in PP_MENUE.verstecken - hier nur die Wirkung. */
  .pp-mm-weg{display:none !important;}

  /* Die Kopfzeile bleibt EINE Zeile: Knopf links, Marke daneben. Die Klasse
     setzt pp-menue.js auf den Behaelter aus PP_MENUE.kopf.
     Das !important ist noetig, weil mehrere Seiten ihre Kopfzeile im
     Umbruch selbst auf Spalte stellen - die Startseite stapelte den Knopf
     sonst ueber das Logo. */
  .pp-mm-kopf{display:flex !important;flex-direction:row !important;
    align-items:center !important;flex-wrap:nowrap !important;gap:12px !important;
    overflow:hidden;}
  /* Was neben dem Knopf stehen bleibt (Marke, Name), darf schrumpfen statt
     die Zeile zu sprengen. */
  .pp-mm-kopf > *{min-width:0;}
  .pp-mm-kopf > :not(.mm-knopf) *{min-width:0;}

  /* ── Der Knopf: drei Striche im Kupferring ── */
  .mm-knopf{display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:44px;height:44px;flex:0 0 44px;padding:0 11px;cursor:pointer;
    background:transparent;border:1px solid var(--border,rgba(255,255,255,.20));
    border-radius:50%;box-shadow:inset 0 0 0 4px rgba(232,184,144,.16);}
  .mm-knopf span{display:block;height:1.5px;background:var(--gold,#e8b890);
    border-radius:2px;transition:transform .22s ease,opacity .18s ease;}
  body.mm-offen .mm-knopf span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
  body.mm-offen .mm-knopf span:nth-child(2){opacity:0;}
  body.mm-offen .mm-knopf span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
  .mm-knopf:focus-visible{outline:2px solid var(--gold2,#f7d2b0);outline-offset:2px;}

  /* ── Blende und Lade ── */
  /* 🔴 Die Blende NUR zeigen, wenn die Schublade offen ist.
     Bis zum 04.09.2026 stand hier schlicht "#mmBlende{display:block}". Das
     Skript setzt zwar das Attribut hidden, aber ein ID-Selektor (1-0-0)
     schlaegt die eingebaute Regel [hidden]{display:none} (0-1-0) - die
     Blende lag dadurch DAUERHAFT ueber der ganzen Seite, mit 62 % Dunkel
     und Weichzeichner. Auf dem Telefon war nach dem Einloggen alles
     verschleiert. Ivo hat es gemeldet, mit Bildschirmfoto.
     Merksatz: was ein Skript ueber `hidden` steuert, darf im CSS nicht per
     ID auf display gesetzt werden. */
  body.mm-offen #mmBlende{display:block;position:fixed;inset:0;z-index:900;
    background:rgba(6,13,22,.62);backdrop-filter:blur(2px);}
  #mmLade{display:block;position:fixed;top:0;bottom:0;left:0;z-index:901;
    width:min(78vw,320px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:linear-gradient(160deg,rgba(16,26,38,.97),rgba(6,11,18,.98) 75%);
    /* Die senkrechte Kupferkante rechts - das Kennzeichen aus Ivos Muster. */
    border-right:2px solid var(--gold-tief,#c6753d);
    box-shadow:14px 0 44px rgba(0,0,0,.6);
    /* Geschlossen steht sie links ausserhalb des Bildes UND ist unsichtbar
       geschaltet - so kann sie am Rand keine Beruehrung abfangen und liegt
       auch fuer die Vorlesehilfe sauber weg. Die Sichtbarkeit schaltet erst
       NACH der Fahrt zurueck (0s Verzoegerung beim Oeffnen, .26s beim
       Schliessen), sonst waere die Bewegung nicht zu sehen. */
    visibility:hidden;
    transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.4,0,.2,1), visibility 0s .26s;}
  body.mm-offen #mmLade{visibility:visible;transform:translateX(0);
    transition:transform .26s cubic-bezier(.4,0,.2,1), visibility 0s 0s;}
  body.mm-offen{overflow:hidden;}

  .mm-inhalt{padding:18px 0 34px;display:flex;flex-direction:column;gap:6px;}
  .mm-abschnitt{display:flex;flex-direction:column;}
  .mm-abschnitt + .mm-abschnitt{margin-top:12px;padding-top:12px;
    border-top:1px solid rgba(255,255,255,.10);}

  /* ── Ein Punkt. Der aktive ist ein VOLL GEFUELLTER Kupferblock mit dunkler
        Schrift - der Effekt aus Ivos Bild 1, nicht nur farbiger Text. ── */
  .mm-punkt{display:flex;align-items:center;gap:13px;
    margin:0 12px;width:calc(100% - 24px);
    background:transparent;border:none;border-radius:9px;
    padding:11px 13px;cursor:pointer;text-align:left;
    font-family:'EB Garamond',Georgia,serif;font-size:16.5px;
    color:var(--text,#e9e3d5);}
  .mm-punkt:focus-visible{outline:2px solid var(--gold2,#f7d2b0);outline-offset:2px;}
  .mm-punkt.aktiv{background:var(--verlauf,linear-gradient(180deg,#f7d2b0,#e3ab85 55%,#c6753d));
    color:#3a2415;font-weight:600;}
  .mm-punkt.mm-still{cursor:default;}
  .mm-schrift{flex:1 1 auto;min-width:0;}

  /* ── Der Doppelring - die Form unseres Wappens (Lorbeerkranz mit zwei
        Kreisen innen), nicht Fumees Sechseck.
        Gebaut aus drei Lagen: der Rand ist der aeussere Ring, darunter legen
        zwei inset-Schatten erst einen Abstand in Grundfarbe und dann den
        inneren Ring. Der ERSTE Schatten liegt oben, deshalb steht der
        schmalere Wert vorn - sonst waere der innere Ring verdeckt.
        Am 04.09.2026 auf Ivos Wunsch kraeftiger gefasst (vorher 1 px). ── */
  .mm-fassung{flex:0 0 38px;width:38px;height:38px;border-radius:50%;
    display:grid;place-items:center;color:var(--gold,#e8b890);
    border:2px solid rgba(232,184,144,.72);
    box-shadow:inset 0 0 0 2.5px rgba(6,13,22,.85),
               inset 0 0 0 4px rgba(232,184,144,.50);}
  .mm-fassung svg{width:19px;height:19px;fill:none;stroke:currentColor;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  /* Auf dem gefuellten Block kehrt sich der Ring um: hell im Dunkelbraun. */
  .mm-punkt.aktiv .mm-fassung,
  .mm-gruppe.auf .mm-fassung{border-color:rgba(58,36,21,.70);
    box-shadow:inset 0 0 0 2.5px rgba(247,210,176,.85),
               inset 0 0 0 4px rgba(58,36,21,.45);
    color:#3a2415;}

  /* ── Die zweite Ebene ── */
  .mm-pfeil{flex:0 0 auto;width:9px;height:9px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(-45deg);transition:transform .2s ease;opacity:.75;margin-right:3px;}
  .mm-gruppe.auf{background:var(--verlauf,linear-gradient(180deg,#f7d2b0,#e3ab85 55%,#c6753d));
    color:#3a2415;font-weight:600;}
  .mm-gruppe.auf .mm-pfeil{transform:rotate(45deg);}
  .mm-unter{display:none;flex-direction:column;padding:4px 0 8px;}
  .mm-unter.auf{display:flex;}
  /* Eingerueckt auf die Schriftkante des Elternpunkts, ohne Symbol - so wie
     im Muster. */
  .mm-unterpunkt{background:transparent;border:none;cursor:pointer;text-align:left;
    font-family:'EB Garamond',Georgia,serif;font-size:15.5px;
    color:var(--text2,#9fb0c2);padding:8px 13px 8px 64px;}
  .mm-unterpunkt.aktiv{color:var(--gold,#e8b890);font-weight:600;}
  .mm-unterpunkt:focus-visible{outline:2px solid var(--gold2,#f7d2b0);outline-offset:-2px;}

  .mm-sprache{width:auto;flex:0 0 auto;padding:6px 8px;font-size:13.5px;}
  .mm-fuss{padding-bottom:6px;}

  /* ══ Der helle Modus ═════════════════════════════════════════════════════
     🔴 Ohne diesen Block waere die Schublade im hellen Modus unlesbar: sie
     hat einen dunklen Grund, holt ihre Schriftfarbe aber aus --text - und
     das ist im hellen Modus fast schwarz. Dasselbe bei --gold, das dort
     Marine ist. Beides auf dunklem Grund: unsichtbar.
     Nur das Partnerportal kennt body.lightmode; auf den uebrigen Seiten
     greift dieser Block nie.
     Farben und Schriftstaerken sind dieselben wie im Portal
     ("Marine auf Sand", Ivos Wahl vom 04.09.2026). */
  body.lightmode #mmLade{
    background:linear-gradient(160deg,#ffffff,#f7f4ec 75%);
    border-right:2px solid #123047;
    box-shadow:14px 0 44px rgba(18,48,71,.22);}
  body.lightmode #mmBlende{background:rgba(18,48,71,.42);}
  body.lightmode .mm-abschnitt + .mm-abschnitt{border-top-color:rgba(18,48,71,.16);}
  /* Ein Schnitt mehr, wie im uebrigen hellen Modus. */
  body.lightmode .mm-punkt{color:#1b2229;font-weight:500;}
  body.lightmode .mm-unterpunkt{color:#5c6874;font-weight:500;}
  body.lightmode .mm-unterpunkt.aktiv{color:#123047;font-weight:700;}
  /* Der gefuellte Block bleibt KUPFER - er ist im hellen Modus der einzige
     Ort, an dem Kupfer steht, und wirkt genau dadurch als Akzent. */
  body.lightmode .mm-punkt.aktiv,
  body.lightmode .mm-gruppe.auf{color:#2a1a0e;font-weight:700;}
  body.lightmode .mm-fassung{color:#1c4258;border-color:rgba(18,48,71,.55);
    box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.9), inset 0 0 0 4px rgba(18,48,71,.35);}
  body.lightmode .mm-punkt.aktiv .mm-fassung,
  body.lightmode .mm-gruppe.auf .mm-fassung{color:#2a1a0e;
    border-color:rgba(58,36,21,.70);
    box-shadow:inset 0 0 0 2.5px rgba(247,210,176,.85), inset 0 0 0 4px rgba(58,36,21,.45);}
  body.lightmode .mm-knopf{border-color:rgba(18,48,71,.45);
    box-shadow:inset 0 0 0 4px rgba(18,48,71,.10);}
  body.lightmode .mm-knopf span{background:#1c4258;}
}