/* Gemeinsames Slide-out-Menü (links/rechts) + Rand-Tabs («/») für alle Seiten von
   zhs.klaaf.eu (index.html, mein-angebot.html, ueber-mich.html,
   kontakt.html, ...). Zentrale Datei, damit Menüinhalt/-position auf jeder Seite
   garantiert identisch sind — einmal hier ändern statt pro Seite (s. Vault-Doku,
   NAS-Web-Projekt, TP004). Wird zusammen mit site-panels.js eingebunden. */
:root{
  --sp-panel:#8C7B0F; --sp-panel-ink:#eef0f4; --sp-accent:#10288C;
}

/* ---- Menü-Tabs: 2012Metro-Position (~10% vom oberen Rand) ----
   Hintergrund war ursprünglich Schwarz (2012Metro-Original), auf Gisberts
   Vorgabe (04.09.) jetzt Oliv der Farbpalette statt Schwarz. */
.edge-tab{position:fixed;top:10%;transform:translateY(-50%);z-index:25;
          background:#8C7B0F;color:#fff;border:none;cursor:pointer;
          font-size:1.05rem;line-height:1;padding:16px 7px;
          transition:background .2s ease}
.edge-tab:hover{background:#8C5D0F}
#btn-left{left:0;border-radius:0 6px 6px 0}
#btn-right{right:0;border-radius:6px 0 0 6px}

/* ---- Slide-out-Menüs links/rechts ---- */
.panel{position:fixed;top:0;bottom:0;width:280px;background:var(--sp-panel);
       color:var(--sp-panel-ink);padding:60px 20px 20px;overflow-y:auto;
       transition:transform .25s ease;z-index:30}
.panel h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
          color:var(--sp-accent);margin:18px 0 8px}
.panel h3:first-of-type{margin-top:0}
.panel a{display:block;color:var(--sp-panel-ink);text-decoration:none;
         padding:8px 6px;border-radius:6px;font-size:.92rem}
.panel a:hover{background:rgba(0,0,0,.18)}
.panel .sub{padding-left:16px;font-size:.85rem}
.panel hr.divider{width:66%;margin:14px auto;border:0;height:1px;background:rgba(255,255,255,.3)}
#panel-left{left:0;transform:translateX(-100%)}
#panel-left.open{transform:translateX(0)}
#panel-right{right:0;transform:translateX(100%)}
#panel-right.open{transform:translateX(0)}
.panel .close{position:absolute;top:14px;right:16px;background:none;border:none;
              color:var(--sp-panel-ink);font-size:1.3rem;cursor:pointer}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20;
         opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.open{opacity:1;pointer-events:auto}

/* ---- "Gisbert"-Logo-Link oben im linken Menü + Social-Media-Overlay ----
   Referenz: 2012Metro #logo (Klick öffnet #modal/#copyright via jQuery.reveal,
   Hintergrund .reveal-modal-bg) — hier eigenes schlankes CSS/JS statt jQuery-Plugin.
   Original: durchgehende dunkle Vollbildfläche (kein weißer Kasten, kein X-Button,
   Schließen per Klick irgendwo auf die Fläche), Icons direkt darauf, darunter
   dezente (c)-Zeile. Farben (Gisbert, 04.09.): Fläche zunächst Dunkelblau, dann
   auf Oliv #8C7B0F der Farbpalette umgestellt (statt Original-Schwarz);
   Icons Creme-Gelb #FFF19C statt Weiß. "2012" ersetzt durch "Gisbert".
   Hover 1:1 aus #logo:hover in css/style.css: nur opacity:0.7, kein Hintergrund-
   Button-Look wie die übrigen Menü-Links (Korrektur 04.09. — Original-Logo war
   außerdem deutlich größer/prägnanter als ein normaler Menüpunkt). */
.panel .brand{display:block;font-size:2.1rem;font-weight:800;letter-spacing:.01em;
       color:var(--sp-panel-ink);text-decoration:none;margin:0 0 22px;cursor:pointer;
       padding:0;transition:opacity .2s ease}
.panel .brand:hover{opacity:.7}

.social-overlay{position:fixed;inset:0;background:#8C7B0F;z-index:50;
       display:flex;flex-direction:column;align-items:center;justify-content:center;
       opacity:0;pointer-events:none;transition:opacity .3s ease;cursor:pointer}
.social-overlay.open{opacity:1;pointer-events:auto}
.social-overlay .icons{display:flex;gap:30px;justify-content:center}
.social-overlay .icons a{display:block;width:44px;height:44px}
.social-overlay .icons svg{width:44px;height:44px;display:block}
.social-overlay p{margin:22px 0 0;font-size:12px;letter-spacing:.03em;
       color:rgba(255,241,156,.55);font-family:Arial,Helvetica,sans-serif}