/* === SF Ausbildungszentrum – Helles Theme === */
/* Nur innerhalb des Portals wirksam */
.sfaz-wrap{
  --sfaz-bg:#f8fafc;
  --sfaz-panel:#ffffff;
  --sfaz-text:#111111;
  --sfaz-muted:#6b7280;
  --sfaz-border:#e5e7eb;
  --sfaz-gold:#d4af37;         /* Primär-Gold */
  --sfaz-gold-strong:#f5d773;  /* Hover-Glanz */
  --sfaz-focus:rgba(29,78,216,.25);
  --sfaz-shadow:0 10px 24px rgba(0,0,0,.12);
  display:grid;
  grid-template-columns:300px 1fr;
  gap:20px;
  align-items:start;
  color:var(--sfaz-text);
}

/* NAV */
.sfaz-nav{
  position:sticky; top:0 !important;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid var(--sfaz-border);
  box-shadow:var(--sfaz-shadow);
  padding:14px;
}
.sfaz-nav button{
  appearance:none; border:1px solid var(--sfaz-border);
  background:#ffffff;
  color:var(--sfaz-text);
  width:100%; text-align:left;
  padding:12px 14px; margin:8px 0;
  letter-spacing:.2px;
  border-left:3px solid transparent;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.sfaz-nav button:hover,
.sfaz-nav button:focus{
  border-left-color:var(--sfaz-gold);
  outline:none;
  box-shadow:0 0 0 3px var(--sfaz-focus);
  transform:translateX(2px);
}

/* PANELS */
.sfaz-panel{
  background:
    radial-gradient(1200px 500px at 20% -20%, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border:1px solid var(--sfaz-border);
  box-shadow:var(--sfaz-shadow);
  padding:18px; min-height:460px;
}
.sfaz-panel h3{
  margin:.2rem 0 1rem; font-weight:600;
  border-bottom:1px solid rgba(212,175,55,.35);
  padding-bottom:.5rem;
}

/* TABS */
.sfaz-hidden{display:none}

/* TABLES */
.sfaz-table{width:100%; border-collapse:collapse; font-size:.98rem}
.sfaz-table th,.sfaz-table td{
  border:1px solid #e5e7eb; padding:10px 12px; vertical-align:top;
}
.sfaz-table thead th{
  background:linear-gradient(180deg, rgba(212,175,55,.15), rgba(212,175,55,.05));
  color:var(--sfaz-text); font-weight:600;
}
.sfaz-table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
.sfaz-table a{color:var(--sfaz-gold); text-decoration:none}
.sfaz-table a:hover{color:var(--sfaz-gold-strong); text-decoration:underline}

/* CHAT */
.sfaz-chatbox{
  height:70vh; overflow:auto;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid var(--sfaz-border); padding:12px;
  border-radius:8px;
}
.sfaz-chatbox .m{
  max-width:min(720px,92%); padding:10px 12px; margin:8px 0;
  background:#f9fafb; border:1px solid var(--sfaz-border); border-radius:10px;
  line-height:1.35;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.sfaz-chatbox .m.u{
  margin-left:auto; background:#eef2ff;
  border-color:rgba(212,175,55,.45);
  box-shadow:0 0 0 1px rgba(212,175,55,.15), 0 6px 18px rgba(0,0,0,.12);
}
.sfaz-chatinput{
  display:flex; gap:10px; margin-top:10px;
}
.sfaz-chatinput #sfaz-plus{
  padding: 0 12px;
  border: 1px solid var(--sfaz-border);
  background: rgba(255,255,255,.03);
  color: var(--sfaz-text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.sfaz-chatinput #sfaz-plus:hover{
  background: rgba(255,255,255,.06);
}
.sfaz-file-hidden{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

/* INPUTS + FILES */
.sfaz-panel input[type="text"],
.sfaz-panel input[type="email"],
.sfaz-panel input[type="password"]{
  width:100%; padding:12px 12px;
  background:rgba(255,255,255,.03);
  color:var(--sfaz-text);
  border:1px solid var(--sfaz-border);
  border-radius:8px;
}
.sfaz-panel input[type="text"]:focus,
.sfaz-panel input[type="email"]:focus,
.sfaz-panel input[type="password"]:focus{
  outline:none; border-color:rgba(212,175,55,.55);
  box-shadow:0 0 0 3px var(--sfaz-focus);
}
.sfaz-uploadbar{display:flex; gap:10px; align-items:center; margin-bottom:10px}
.sfaz-uploadbar input[type="file"]{
  inline-size:auto; color:var(--sfaz-muted);
  accent-color:var(--sfaz-gold);
}

/* BUTTONS (einheitlich) */
.sfaz-nav button,
.sfaz-panel button,
.sfaz-auth form button{
  border-radius:10px;
  background:
     linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10)) padding-box,
     linear-gradient(180deg, #39321a, #1d1a0c) border-box;
  border:1px solid transparent;
  color:var(--sfaz-text);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.sfaz-panel button,
.sfaz-auth form button{
  padding:12px 16px; font-weight:600; letter-spacing:.2px;
}
.sfaz-panel button:hover,
.sfaz-auth form button:hover{
  filter:brightness(1.08);
  box-shadow:0 0 0 2px var(--sfaz-focus), 0 10px 24px rgba(0,0,0,.45);
}
.sfaz-panel button:active{transform:translateY(1px)}
.sfaz-panel button:focus{outline:none; box-shadow:0 0 0 3px var(--sfaz-focus)}

/* AUTH */
.sfaz-auth{
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid var(--sfaz-border);
  box-shadow:var(--sfaz-shadow);
  padding:18px;
}
.sfaz-auth form input{width:100%; margin:6px 0;}

/* LINKS allgemein im Portal */
.sfaz-panel a{color:var(--sfaz-gold); text-decoration:none}
.sfaz-panel a:hover{color:var(--sfaz-gold-strong); text-decoration:underline}

/* RESPONSIVE */
@media (max-width: 900px){
  .sfaz-wrap{grid-template-columns:1fr; gap:14px}
  .sfaz-nav{position:static}
  .sfaz-chatbox{height:360px}
}

/* Barrierefreiheit / Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sfaz-nav button{transition:none}
}
/* === SF Ausbildungszentrum – AUTH (Hell) === */
.sfaz-auth{
  --auth-bg:#f8fafc;
  --auth-panel:#ffffff;
  --auth-text:#111111;
  --auth-muted:#6b7280;
  --auth-border:#e5e7eb;
  --auth-gold:#d4af37;
  --auth-gold-2:#f5d773;
  --auth-focus:rgba(29,78,216,.25);

  max-width: 880px;
  margin: 24px auto;
  color: var(--auth-text);
  background:
    radial-gradient(1100px 480px at 15% -10%, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid var(--auth-border);
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  padding: clamp(16px, 3vw, 28px);
}

/* Überschriften */
.sfaz-auth h3{
  margin: 6px 0 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--auth-gold);
  text-transform: none;
}

/* Jede Überschrift + folgendes Formular als „Card“ */
.sfaz-auth h3 + form{
  position: relative;
  border: 1px solid var(--auth-border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding: 14px;
  margin: 0 0 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Inputs */
.sfaz-auth input[type="text"],
.sfaz-auth input[type="email"],
.sfaz-auth input[type="password"]{
  width: 100%;
  padding: 12px 12px;
  margin: 8px 0;
  color: var(--auth-text);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--auth-border);
  outline: none;
}
.sfaz-auth input::placeholder{ color: #999; opacity:.8; }

.sfaz-auth input:focus{
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 0 0 3px var(--auth-focus);
}

/* Buttons einheitlich */
.sfaz-auth form button{
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--auth-text);
  background:
    linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.12)) padding-box,
    linear-gradient(180deg, #3c341c, #1f1a0d) border-box;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.sfaz-auth form button:hover{
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px var(--auth-focus), 0 14px 36px rgba(0,0,0,.55);
}
.sfaz-auth form button:active{ transform: translateY(1px); }
.sfaz-auth form button:focus{ box-shadow: 0 0 0 3px var(--auth-focus); outline: none; }

/* Kleinere UI-Details */
.sfaz-auth .hint,
.sfaz-auth p{
  color: var(--auth-muted);
  margin: 6px 0;
}

/* „fehler“/„ok“ Utility, falls du Meldungen einblendest */
.sfaz-auth .is-error{
  border-color:#8a2a2a !important;
  background: linear-gradient(180deg, rgba(138,42,42,.12), transparent);
}
.sfaz-auth .is-ok{
  border-color:#2a8a5a !important;
  background: linear-gradient(180deg, rgba(42,138,90,.12), transparent);
}

/* Desktop: beide Cards optisch angleichen */
@media (min-width: 960px){
  .sfaz-auth{ padding: 32px 34px; }
  .sfaz-auth h3 + form{ padding: 16px 16px 18px; }
}

/* Mobile Feinschliff */
@media (max-width: 480px){
  .sfaz-auth{ padding: 14px; }
  .sfaz-auth form button{ border-radius: 8px; }
}

/* Überschriften in Gold (Portal + Auth) */
.sfaz-panel h1, .sfaz-panel h2, .sfaz-panel h3,
.sfaz-panel h4, .sfaz-panel h5, .sfaz-panel h6{
  color: var(--sfaz-gold, #d4af37) !important;
}

.sfaz-auth h1, .sfaz-auth h2, .sfaz-auth h3,
.sfaz-auth h4, .sfaz-auth h5, .sfaz-auth h6{
  color: var(--auth-gold, #d4af37) !important;
}

/* ===== Fullscreen-Chat + Topbar + Menu + Modal ===== */

/* Fullscreen-Modus aktivieren */
.sfaz-wrap.sfaz-fullchat{
  grid-template-columns: 1fr;   /* Sidebar weg */
  gap: 0;
  min-height: 100vh;
}

/* alte Sidebar im Fullscreen ausblenden */
.sfaz-fullchat .sfaz-nav{ display:none !important; }

/* Topbar */
.sfaz-topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border-bottom:1px solid var(--sfaz-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.sfaz-brand{
  display:flex; align-items:center; gap:10px;
  color:var(--sfaz-gold); font-weight:700; letter-spacing:.3px;
}
.sfaz-brand .dot{
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--sfaz-gold-strong), var(--sfaz-gold));
  box-shadow: 0 0 12px rgba(212,175,55,.55);
}

/* Menü-Button oben rechts */
#sfaz-menu-btn{
  appearance:none;
  border-radius:10px;
  padding:10px 12px;
  background:
    linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10)) padding-box,
    linear-gradient(180deg, #39321a, #1d1a0c) border-box;
  border:1px solid transparent;
  color:var(--sfaz-text);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
#sfaz-menu-btn:hover{ filter:brightness(1.08); box-shadow:0 0 0 2px var(--sfaz-focus),0 10px 24px rgba(0,0,0,.45); }
#sfaz-menu-btn:focus{ outline:none; box-shadow:0 0 0 3px var(--sfaz-focus); }

/* Chat-Pane im Fullscreen: Panel-Rand schlank + volle Höhe */
.sfaz-fullchat .sfaz-panel{
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}
.sfaz-fullchat #sfaz-panel-chat{
  padding: 16px;
}
.sfaz-fullchat .sfaz-chatbox{
  height: calc(100vh - 160px); /* Topbar + Inputleiste Abstand */
  border:1px solid var(--sfaz-border);
  border-radius:12px;
}

/* Flyout-Menü (oben rechts unter Button) */
.sfaz-menu{
  position:fixed; top:60px; right:16px; z-index:60;
  width:min(320px, 92vw);
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid var(--sfaz-border);
  box-shadow:0 14px 36px rgba(0,0,0,.15);
  border-radius:12px;
  padding:10px;
}
.sfaz-menu h4{
  margin:6px 8px 8px; color:var(--sfaz-gold); font-weight:700;
  border-bottom:1px solid rgba(212,175,55,.25); padding-bottom:6px;
}
.sfaz-menu .item{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; margin:6px 0;
  border:1px solid var(--sfaz-border);
  border-radius:10px;
  background:#ffffff;
  color:var(--sfaz-text); cursor:pointer;
}
.sfaz-menu .item:hover{ border-color:var(--sfaz-gold); box-shadow:0 0 0 3px var(--sfaz-focus); }


/* Basis: unsichtbar/inklickbar */
.sfaz-modal{
  position: fixed;
  inset: 0;
  z-index: 90;                /* unter Header/Menu */
  display: none;              /* nicht im Flow */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  place-items: center;
  background: none;           /* kein Schimmer im Hidden-Zustand */
}

/* Sichtbar NUR wenn geöffnet (per ARIA oder Klasse) */
.sfaz-modal[aria-hidden="false"],
.sfaz-modal.is-open{
  display: grid;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(0,0,0,.65);
}

/* Harte Versteck-Regel (Fallback/Utility) */
.sfaz-hidden,
.sfaz-modal[aria-hidden="true"]{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Dialog-Inhalt */
.sfaz-modal__dialog{
  width: min(980px, 94vw);
  max-height: 86vh;
  overflow: auto;
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  border: 1px solid var(--sfaz-border);
  box-shadow: 0 20px 48px rgba(0,0,0,.6);
  border-radius: 14px;
  padding: 16px;
}
.sfaz-modal__header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:4px 4px 10px; margin-bottom:8px;
  border-bottom:1px solid rgba(212,175,55,.25);
}
.sfaz-modal__title{ color:var(--sfaz-gold); font-weight:700; }
.sfaz-modal__close{
  appearance:none; border:1px solid var(--sfaz-border);
  background:#ffffff;
  color:var(--sfaz-text); border-radius:8px; padding:8px 10px; cursor:pointer;
}
.sfaz-modal__content{ padding-top:4px; }

/* Mobile */
@media (max-width: 900px){
  .sfaz-fullchat #sfaz-panel-chat{ padding: 12px; }
  .sfaz-fullchat .sfaz-chatbox{ height: calc(100vh - 148px); }
}
:where(.sfaz-wrap) #sfaz-menu-btn:hover{ filter: brightness(1.08); box-shadow: 0 0 0 2px var(--sfaz-focus), 0 10px 24px rgba(0,0,0,.45); }
:where(.sfaz-wrap) #sfaz-menu-btn:focus{ outline: none; box-shadow: 0 0 0 3px var(--sfaz-focus); }

/* Sicherheitsnetz: keine Pseudo-Layer über der Topbar */
:where(.sfaz-wrap) .sfaz-topbar::before,
:where(.sfaz-wrap) .sfaz-topbar::after{
  content: none;
  background: none;
}

/* Cookie-/Backdrops weiterhin neutral (nur falls aktiv) */
.cky-overlay, .cookie-overlay, .cookieyes-overlay, .cli-modal-backdrop{
  opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: none;
}
/* Z-Index-Stack: Header immer oben */
.sfaz-topbar{ z-index: 110; }  /* Header */
.sfaz-menu{   z-index: 100; }  /* Flyout */
.sfaz-modal{  z-index: 90; }   /* Overlay */

/* Header klar definieren – neutral und ohne Blend */
.sfaz-topbar{
  position: sticky; top: 0;
  z-index: 9999;
  background: #fff;          /* fester Hintergrund, nichts scheint durch */
  isolation: isolate;        /* eigener Kontext, verhindert Durchmischen */
}

/* Nur Buttons in der Topbar zurücksetzen */
.sfaz-topbar button{
  opacity: 1 !important;     /* kein Abdunkeln */
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  border: 0 !important;
}

/* Speziell dein Menübutton (falls generische Button-Regeln greifen) */
#sfaz-menu-btn{
  opacity: 1 !important;
  filter: none !important;
}

/* Falls das Icon als SVG im Button steckt */
#sfaz-menu-btn svg, #sfaz-menu-btn svg *{
  opacity: 1 !important;
  filter: none !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

/* WICHTIG: Keine Pseudo-Overlays über der Topbar */
.sfaz-topbar::before, .sfaz-topbar::after{
  content: none !important;
  background: none !important;
}

/* --- Portal-scope: nur im Ausbildungszentrum --- */
:where(.sfaz-wrap) .sfaz-topbar{
  position: sticky; top: 0;
  z-index: 9999;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  color: var(--sfaz-text);
  border-bottom: 1px solid var(--sfaz-border);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  isolation: isolate;            /* verhindert „Mischen“ = kein Schleier */
}

/* Menübutton wie im Plugin-Design */
:where(.sfaz-wrap) #sfaz-menu-btn{
  appearance: none;
  border-radius: 10px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10)) padding-box,
    linear-gradient(180deg, #39321a, #1d1a0c) border-box;
  border: 1px solid transparent;
  color: var(--sfaz-text);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  opacity: 1; filter: none; mix-blend-mode: normal;
}

/* === PATCH: Popups wieder sichtbar, ohne übrige Styles zu ändern === */

/* 1) Falls dein Script .is-open NICHT auf .sfaz-modal,
      sondern auf einem Parent setzt, greifen diese Fallbacks */
.is-open > .sfaz-modal,
.is-open .sfaz-modal{
  display: grid;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(0,0,0,.65);
}

/* 2) Overlay über allem normalen Content, aber UNTER der Topbar lassen
   (Topbar hat bei dir z-index: 9999) */
.sfaz-modal{ z-index: 9990; } /* vorher 90 */
.sfaz-menu{  z-index: 9980; } /* damit Menü über Content, unter Topbar/Modal */

/* === PATCH: Flyout-Menü hell (Weiß) === */
:is(.sfaz-menu, .sfaz-wrap .sfaz-menu){
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.08) !important; /* dezent */
}

:is(.sfaz-menu h4, .sfaz-wrap .sfaz-menu h4){
  color: #111 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

:is(.sfaz-menu .item, .sfaz-wrap .sfaz-menu .item){
  background: #fff !important;             /* Buttons weiß */
  color: #111 !important;                   /* Schrift schwarz */
  border: 1px solid rgba(0,0,0,.12) !important; 
  transition: box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}

:is(.sfaz-menu .item:hover, .sfaz-wrap .sfaz-menu .item:hover){
  border-color: rgba(0,0,0,.2) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.14) !important;  /* Hover-Shadow */
  transform: translateY(-1px);
}

/* Fokus gut sichtbar, aber hell gehalten */
:is(.sfaz-menu .item:focus-visible, .sfaz-wrap .sfaz-menu .item:focus-visible){
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08), 0 8px 22px rgba(0,0,0,.14) !important;
}

/* === History in der linken Spalte (unter den Nav-Buttons) === */
.sfaz-history{
  margin-top: 12px;
  border:1px solid var(--sfaz-border);
  border-radius:12px;
  background:#fff;
  padding:8px;
  max-height: calc(100dvh - 240px); /* Platz lassen für Topbar/Buttons */
  overflow:auto;
}
.sfaz-history .sfaz-h-item{
  display:block; width:100%; text-align:left;
  padding:10px 12px; margin:6px 0;
  border:1px solid #e9e9e9; border-radius:10px;
  background:#fff; cursor:pointer;
}
.sfaz-history .sfaz-h-item:hover{ box-shadow:0 8px 20px rgba(0,0,0,.08); }
.sfaz-history .h-title{ font-weight:700; color:#111; }
.sfaz-history .h-meta{ font-size:.85rem; color:#555; margin:.25rem 0; }
.sfaz-history .h-snippet{ font-size:.9rem; color:#333; }

/* Mobile: History vor Panels, volle Breite */
@media (max-width: 900px){
  .sfaz-history{ max-height:none; }
}
.sfaz-wrap{ display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start; }
.sfaz-history{
  margin-top:12px; border:1px solid var(--sfaz-border,#ddd);
  border-radius:12px; background:#fff; padding:8px;
  max-height:calc(100dvh - 240px); overflow:auto;
}
.sfaz-history-empty{ padding:8px; font-size:.9rem; color:#555; }
.sfaz-h-item{ display:block; width:100%; text-align:left; padding:10px 12px; margin:6px 0;
  border:1px solid #e9e9e9; border-radius:10px; background:#fff; cursor:pointer; }
.sfaz-h-item:hover{ box-shadow:0 8px 20px rgba(0,0,0,.08); }
.h-title{ font-weight:700; color:#111; } .h-meta{ font-size:.85rem; color:#555; margin:.25rem 0; }
.h-snippet{ font-size:.9rem; color:#333; }
@media (max-width:900px){ .sfaz-wrap{ grid-template-columns:1fr } .sfaz-history{ max-height:none; } }

/* === Force 2-column layout for portal === */
.sfaz-wrap{ display:grid !important; grid-template-columns:280px 1fr !important; gap:20px; align-items:start; }
.sfaz-left{ display:flex; flex-direction:column; gap:12px; min-width:0; z-index:2; }
.sfaz-main{ min-width:0; position:relative; z-index:1; }

/* History sichtbar – auch leer */
.sfaz-history{
  margin-top:0vh;
  border-radius:12px; background:#fff; padding:8px;
  max-height:90vh; overflow:auto;
}
.sfaz-history-empty{ padding:8px; font-size:.9rem; color:#555; }
.sfaz-h-item{ display:block; width:100%; text-align:left; padding:10px 12px; margin:6px 0;
  background:#fff; cursor:pointer; border:1px solid var(--sfaz-border, #ddd);}
.sfaz-h-item:hover{ box-shadow:0 8px 20px rgba(0,0,0,.08); }
.h-title{ font-weight:700; color:#111; } .h-meta{ font-size:.85rem; color:#555; margin:.25rem 0; }
.h-snippet{ font-size:.9rem; color:#333; }

/* Falls dein Chat volle Seitenbreite forciert: hier zurück in die rechte Spalte zwingen */
.sfaz-main .sfaz-panel, 
.sfaz-main .sfaz-panel-in,
.sfaz-main #sfaz-chatbox{
  width:100% !important; max-width:100% !important;
  position:static !important; inset:auto !important;
}

/* Mobile einspaltig */
@media (max-width:900px){
  .sfaz-wrap{ grid-template-columns:1fr !important; }
  .sfaz-history{ max-height:none; }
}
.sfaz-history .sfaz-h-item.is-active{
  outline:2px solid var(--sfaz-border, #e5e7eb);
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* Chat-Inhalte komplett weiß */
.sfaz-chatbox .m,
.sfaz-chatbox .m p,
.sfaz-chatbox .m li,
.sfaz-chatbox .m h1,
.sfaz-chatbox .m h2,
.sfaz-chatbox .m h3,
.sfaz-chatbox .m code,
.sfaz-chatbox .m pre,
.sfaz-chatbox .m blockquote,
.sfaz-chatbox .m a { color: #fff; }

/* Bessere Lesbarkeit bei dunklem Theme */
.sfaz-chatbox .m a { text-decoration: underline; }
.sfaz-chatbox .m code { background: rgba(255,255,255,.08); }
.sfaz-chatbox .m pre  { background: rgba(255,255,255,.08); }
.sfaz-chatbox .m blockquote { 
  border-left: 4px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
}

/* Welcome-Karte / allgemeine Texte auch weiß */
.sfaz-card, 
.sfaz-card p, 
.sfaz-card label, 
.sfaz-card .sfaz-muted { color: #fff; }

/* Fachwahl: Text IMMER schwarz, egal ob Fokus/aktiv/placeholder */
#sfaz-welcome select#sfaz-subject,
#sfaz-welcome select#sfaz-subject:focus,
#sfaz-welcome select#sfaz-subject option {
  color: #000 !important;
  background-color: #fff; /* optional: sorgt für guten Kontrast */
}

/* Falls eine generische Karten-Styling alles weiß färbt, nimm die Spezifität hoch */
.sfaz-card #sfaz-subject { color:#000 !important; }

.sfaz-trainerbar .sfaz-btn{
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--sfaz-border, #e5e7eb);
  background: #fff;
  color: #000;
  cursor: pointer;
  border-radius: 6px;
}
.sfaz-trainerbar .sfaz-btn:hover{ box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.sfaz-editpanel .sfaz-btn{
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--sfaz-border, #e5e7eb);
  background: #fff;
  color: #000;
  cursor: pointer;
  border-radius: 6px;
}
.sfaz-editpanel textarea{
  background: #ffffff; color: #111111; border:1px solid var(--sfaz-border, #e5e7eb);
  border-radius: 6px; padding: 8px;
}
/* === TEXT-BLACK OVERRIDE (ans Ende der style.css) === */

/* Variablen & Grundfarbe auf Schwarz */
.sfaz-wrap,
.sfaz-auth{
  --sfaz-text:#000;
  --sfaz-muted:#000;
  color:#000;
}

/* Alle textführenden Elemente im Portal/Modal/Menu */
.sfaz-wrap, .sfaz-wrap *:not(svg):not(path),
.sfaz-auth, .sfaz-auth *:not(svg):not(path),
.sfaz-menu, .sfaz-menu *,
#sfaz-modal, #sfaz-modal *{
  color:#000 !important;
}

/* Links bleiben schwarz (mit Unterstreichung für Erkennbarkeit) */
.sfaz-wrap a, .sfaz-wrap a:hover,
.sfaz-auth a, .sfaz-auth a:hover,
.sfaz-menu a, .sfaz-menu a:hover{
  color:#000 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Buttons (Text) */
.sfaz-wrap .sfaz-btn,
.sfaz-wrap button,
.sfaz-auth .sfaz-btn,
.sfaz-auth button{
  color:#000 !important;
}

/* Chat-Code/Pre/Blockquote-Texte */
.sfaz-wrap code, .sfaz-wrap pre,
.sfaz-auth code, .sfaz-auth pre,
.sfaz-wrap blockquote, .sfaz-auth blockquote{
  color:#000 !important;
}

/* Formulare: Eingaben + Caret */
.sfaz-wrap input, .sfaz-wrap select, .sfaz-wrap textarea,
.sfaz-auth input, .sfaz-auth select, .sfaz-auth textarea{
  color:#000 !important;
  caret-color:#000;
}

/* Platzhaltertexte auf dunkelgrau-schwarz */
.sfaz-wrap input::placeholder, .sfaz-wrap textarea::placeholder,
.sfaz-auth input::placeholder, .sfaz-auth textarea::placeholder{
  color:#000 !important; opacity:.66;
}
/* Vendor-Präfixe */
.sfaz-wrap input::-webkit-input-placeholder, .sfaz-wrap textarea::-webkit-input-placeholder,
.sfaz-auth input::-webkit-input-placeholder, .sfaz-auth textarea::-webkit-input-placeholder{ color:#000 !important; opacity:.66; }
.sfaz-wrap input::-moz-placeholder, .sfaz-wrap textarea::-moz-placeholder,
.sfaz-auth input::-moz-placeholder, .sfaz-auth textarea::-moz-placeholder{ color:#000 !important; opacity:.66; }
.sfaz-wrap input:-ms-input-placeholder, .sfaz-wrap textarea:-ms-input-placeholder,
.sfaz-auth input:-ms-input-placeholder, .sfaz-auth textarea:-ms-input-placeholder{ color:#000 !important; opacity:.66; }

/* Trainer-Editor-Buttons explizit */
.sfaz-trainerbar .sfaz-btn,
.sfaz-editpanel .sfaz-btn{
  color:#000 !important;
}
.sfaz-wrap .sfaz-btn-edit { display: none !important; }
/* Prompt-Editor-Button ausblenden */
.sfaz-wrap .sfaz-trainerbar .sfaz-btn-edit {
  display: none !important;
}

.sfaz-form{border:1px solid var(--sfaz-border,#262626);border-radius:8px;padding:12px;margin:12px 0}
.sfaz-form__row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0}
.sfaz-form__row label{min-width:180px;font-weight:600}
.sfaz-form__row input,.sfaz-form__row select{flex:1;min-width:220px}
.sfaz-help{display:block;font-size:.85em;opacity:.8;margin:0 0 8px 180px}

/* === SFAZ Modal: Max-Height Override === */
.sfaz-modal { --sfaz-modal-max-h: 70vh !important; } /* bei Bedarf anpassen */

.sfaz-modal .sfaz-modal__dialog{
  max-height: var(--sfaz-modal-max-h);
  width: min(92vw, 980px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Header fix, Content scrollt separat */
}

.sfaz-modal .sfaz-modal__header{
  flex: 0 0 auto;
}

.sfaz-modal .sfaz-modal__content{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile-Feinschliff */
@media (max-width: 640px){
  .sfaz-modal { --sfaz-modal-max-h: 92vh; }
  .sfaz-modal .sfaz-modal__dialog{ width: 96vw; }
}

/* iOS/Android dynamische Viewports */
@supports (height: 100dvh){
  .sfaz-modal { --sfaz-modal-max-h: 86dvh; }
}

/* === UNIFORM MENÜBUTTON-LOOK FÜR ALLE INTERAKTIVEN ELEMENTE === */
/* Ziel: Buttons, "Kacheln", Menü-Items, History-Items, Pseudo-Buttons */

:where(.sfaz-wrap) :is(
  button,
  .button,
  .sfaz-btn,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .sfaz-menu .item,
  .sfaz-card,
  .sfaz-tile,
  .sfaz-history .sfaz-h-item
){
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  /* wie #sfaz-menu-btn (Grundstyle) */
  background:
    linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10)) padding-box,
    linear-gradient(180deg, #39321a, #1d1a0c) border-box;
  color: #000 !important;                 /* Beschriftung schwarz */
  box-shadow: 0 8px 20px rgba(0,0,0,.28); /* leichter Schatten */
  transition:
    transform .08s ease,
    box-shadow .12s ease,
    filter .12s ease,
    border-color .12s ease;
}

/* Schwarz für alle Texte IN den Elementen (Labels, Links etc.) */
:where(.sfaz-wrap) :is(
  button, .button, .sfaz-btn, [role="button"],
  input[type="submit"], input[type="button"],
  .sfaz-menu .item, .sfaz-card, .sfaz-tile, .sfaz-history .sfaz-h-item
) * {
  color: #000 !important;
}

/* Hover wie beim Menübutton (leicht heller + Fokusglow) */
:where(.sfaz-wrap) :is(
  button, .button, .sfaz-btn, [role="button"],
  input[type="submit"], input[type="button"],
  .sfaz-menu .item, .sfaz-card, .sfaz-tile, .sfaz-history .sfaz-h-item
):hover{
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px var(--sfaz-focus, rgba(29,78,216,.25)), 0 10px 24px rgba(0,0,0,.38);
  transform: translateY(-1px);
}

/* Focus-Ring konsistent */
:where(.sfaz-wrap) :is(
  button, .button, .sfaz-btn, [role="button"],
  input[type="submit"], input[type="button"],
  .sfaz-menu .item, .sfaz-card, .sfaz-tile, .sfaz-history .sfaz-h-item
):focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--sfaz-focus, rgba(29,78,216,.25)), 0 10px 24px rgba(0,0,0,.38);
}

/* Active-State: minimaler „Press-Effekt“ */
:where(.sfaz-wrap) :is(
  button, .button, .sfaz-btn, [role="button"],
  input[type="submit"], input[type="button"],
  .sfaz-menu .item, .sfaz-card, .sfaz-tile, .sfaz-history .sfaz-h-item
):active{
  transform: translateY(1px);
}

/* Optional: neutrale Kacheln bekommen etwas mehr „Card“-Polish */
:where(.sfaz-wrap) :is(.sfaz-card, .sfaz-tile, .sfaz-history .sfaz-h-item){
  display: block;
  text-align: left;
}

/* Opt-out-Klasse, falls etwas NICHT den Menübutton-Look bekommen soll */
:where(.sfaz-wrap) .sfaz-plain,
:where(.sfaz-wrap) .sfaz-plain *{
  background: initial !important;
  border: initial !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Reset: Kacheln/History/Panel wieder weiß */
:where(.sfaz-wrap) :is(.sfaz-card, .sfaz-tile, .sfaz-history .sfaz-h-item, .sfaz-panel-in, #sfaz-welcome){
  background:#fff !important;
  border:1px solid rgba(0,0,0,.12) !important;
  color:#000 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
}
:where(.sfaz-wrap) :is(.sfaz-card *, .sfaz-tile *, .sfaz-history .sfaz-h-item *){
  color:#000 !important;
}
/* Kein dunkler Hover auf Cards/History */
:where(.sfaz-wrap) :is(.sfaz-card, .sfaz-tile, .sfaz-history .sfaz-h-item):hover{
  filter:none !important; transform:none !important;
  box-shadow:0 4px 14px rgba(0,0,0,.10) !important;
}
/* Formfelder sicher weiß */
:where(.sfaz-wrap) input:not([type=button]):not([type=submit]),
:where(.sfaz-wrap) select,
:where(.sfaz-wrap) textarea{
  background:#fff !important; color:#000 !important; border:1px solid #ddd !important;
}
/* === GLOBALER BUTTON-RESET: überall weiß (auch in Popups) === */
:where(.sfaz-wrap, .sfaz-modal) :is(
  button,
  .button,
  .sfaz-btn,
  [role="button"],
  a.button,
  .wp-element-button,
  input[type="submit"],
  input[type="button"],
  .sfaz-menu .item
):not(#sfaz-menu-btn){
  -webkit-appearance:none; appearance:none;
  background:#fff !important;
  background-image:none !important;        /* alte Gradients kappen */
  color:#000 !important;
  border:1px solid rgba(0,0,0,.15) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.12) !important;
  filter:none !important;
  transform:none !important;
  text-shadow:none !important;
  border-radius:10px;                      /* falls vorher anders */
}

/* Hover/Fokus/Active einheitlich, dezent */
:where(.sfaz-wrap, .sfaz-modal) :is(
  button, .button, .sfaz-btn, [role="button"], a.button,
  .wp-element-button, input[type="submit"], input[type="button"],
  .sfaz-menu .item
):not(#sfaz-menu-btn):hover{
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important;
}
:where(.sfaz-wrap, .sfaz-modal) :is(
  button, .button, .sfaz-btn, [role="button"], a.button,
  .wp-element-button, input[type="submit"], input[type="button"],
  .sfaz-menu .item
):not(#sfaz-menu-btn):focus{
  outline:none !important;
  box-shadow:0 0 0 3px var(--sfaz-focus, rgba(29,78,216,.25)),
             0 8px 18px rgba(0,0,0,.18) !important;
}
:where(.sfaz-wrap, .sfaz-modal) :is(
  button, .button, .sfaz-btn, [role="button"], a.button,
  .wp-element-button, input[type="submit"], input[type="button"],
  .sfaz-menu .item
):not(#sfaz-menu-btn):active{
  transform: translateY(0) !important;
}

/* Popups: Buttons explizit weiß halten (falls Fremdstyles reinfunken) */
.sfaz-modal .sfaz-modal__content :is(
  button, .button, .sfaz-btn, [role="button"], a.button,
  .wp-element-button, input[type="submit"], input[type="button"]
){
  background:#fff !important; color:#000 !important;
  background-image:none !important; border-color:rgba(0,0,0,.15) !important;
}

/* Optional: Menü-Items im Dropdown auch weiß (wenn gewünscht) */
.sfaz-menu .item{ background:#fff !important; color:#000 !important; }

/* Falls du Panels/Kacheln auch wieder weiß willst (Sicherheitshalber): */
:where(.sfaz-wrap) :is(.sfaz-card, .sfaz-tile, .sfaz-history .sfaz-h-item, .sfaz-panel-in, #sfaz-welcome){
  background:#fff !important;
  border:1px solid rgba(0,0,0,.12) !important;
  color:#000 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
}

/* === OVERRIDE: Helle Buttons nur auf Anmelde/Registrationsseite (.sfaz-auth) === */

/* Grundzustand: weiß, schwarze Schrift, klare Kante */
.sfaz-auth form button,
.sfaz-auth .wp-element-button,
.sfaz-auth input[type="submit"],
.sfaz-auth input[type="button"]{
  background: #fff !important;
  background-image: none !important;
  color: #111 !important;
  border: 1px solid #111 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Hover/Active/Focus – dezent */
.sfaz-auth form button:hover,
.sfaz-auth .wp-element-button:hover,
.sfaz-auth input[type="submit"]:hover,
.sfaz-auth input[type="button"]:hover{
  background: #f7f7f7 !important;
  border-color: #111 !important;
}

.sfaz-auth form button:active,
.sfaz-auth .wp-element-button:active,
.sfaz-auth input[type="submit"]:active,
.sfaz-auth input[type="button"]:active{
  transform: translateY(0) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important;
}

.sfaz-auth form button:focus,
.sfaz-auth .wp-element-button:focus,
.sfaz-auth input[type="submit"]:focus,
.sfaz-auth input[type="button"]:focus{
  outline: 2px solid var(--auth-focus, rgba(29,78,216,.25)) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Links/“Pseudo-Buttons” in Formularen ebenfalls hell halten */
.sfaz-auth .button,
.sfaz-auth a.button{
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #111 !important;
  box-shadow: none !important;
}
.sfaz-auth .button:hover,
.sfaz-auth a.button:hover{ background:#f7f7f7 !important; }

.sfaz-chat{
  display:flex;
  flex-direction:column;
  height:70vh !important;                 /* voller Viewport */
  max-height:70vh;            /* mobile fix */
  overscroll-behavior:contain;  /* kein Scroll-„Durchreichen“ */
}

.sfaz-chat__history{
  flex:1 1 auto;
  overflow-y:auto;              /* eigener Scroll nur hier */
  -webkit-overflow-scrolling:touch;
  padding:1rem;
}

.sfaz-chat__input{
  position:sticky;
  bottom:0;                     /* am unteren Rand kleben */
  background:#fff;
  border-top:1px solid #eee;
  padding:0.75rem;
  z-index:10;
}

/* === FIX: History links fixieren + eigener Scroll === */
:root{
  /* ggf. an reale Topbar-Höhe anpassen */
  --sfaz-topbar-h: 56px;
}

/* Sidebar klebt unter der Topbar */
:where(.sfaz-wrap) .sfaz-left{
  position: sticky;
  top: var(--sfaz-topbar-h);
  align-self: start;
}

/* Nur die History scrollt (Höhe = Viewport minus Topbar/Abstand) */
:where(.sfaz-wrap) #sfaz-history{
  max-height: calc(100dvh - var(--sfaz-topbar-h) - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile: Sticky deaktivieren, volle Höhe zulassen */
@media (max-width: 900px){
  :where(.sfaz-wrap) .sfaz-left{ position: static; top: auto; }
  :where(.sfaz-wrap) #sfaz-history{ max-height: none; }
}

/* === Gleich hohe Spalten: History (links) = Fachauswahl+Chat (rechts) === */
:root{
  --sfaz-topbar-h: 56px; /* ggf. an deine echte Topbar-Höhe anpassen */
  --sfaz-col-h: calc(100dvh - var(--sfaz-topbar-h) - 24px);
}

/* Beide Grid-Items auf gleiche, sticky Höhe bringen */
:where(.sfaz-wrap) .sfaz-left,
:where(.sfaz-wrap) .sfaz-main{
  position: sticky;
  top: var(--sfaz-topbar-h);
  height: var(--sfaz-col-h);
  align-self: start;
}

/* Links: History füllt die Spaltenhöhe */
:where(.sfaz-wrap) .sfaz-left{ display:flex; flex-direction:column; }
:where(.sfaz-wrap) #sfaz-history{
  flex:1 1 auto; min-height:0;
  overflow:auto; -webkit-overflow-scrolling:touch;
  max-height:none !important; /* frühere max-heights neutralisieren */
}

/* Rechts: Fachauswahl + Chat stapeln; Chat füllt den Rest */
:where(.sfaz-wrap) .sfaz-main{ display:flex; flex-direction:column; gap:12px; }

/* Falls IDs vorhanden sind – bevorzugt nutzen */
:where(.sfaz-wrap) #sfaz-welcome{ flex:0 0 auto; }              /* Fachauswahl */
:where(.sfaz-wrap) #sfaz-panel-chat{
  flex:1 1 auto; min-height:50vh; max-height:80vh;
  display:flex; flex-direction:column;
}
/* Fallback, wenn keine IDs: erstes Panel kompakt, letztes Panel füllt */
:where(.sfaz-wrap) .sfaz-main > .sfaz-panel:first-child{ flex:0 0 auto; }
:where(.sfaz-wrap) .sfaz-main > .sfaz-panel:last-child{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}

/* Chatbereich flexibel machen (fixe 70vh überschreiben) */
:where(.sfaz-wrap) .sfaz-chat,
:where(.sfaz-wrap) .sfaz-chatbox{
  height:auto !important;
  max-height:none !important;
}
:where(.sfaz-wrap) #sfaz-panel-chat .sfaz-chatbox{
  flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch;
}

/* Eingabeleiste bleibt unten kleben */
:where(.sfaz-wrap) #sfaz-panel-chat .sfaz-chatinput{
  position:sticky; bottom:0; background:#fff;
  border-top:1px solid var(--sfaz-border,#e5e7eb); padding:.75rem;
  z-index:1;
}

/* Mobile: Sticky aus, natürliche Höhe */
@media (max-width:900px){
  :where(.sfaz-wrap) .sfaz-left,
  :where(.sfaz-wrap) .sfaz-main{
    position:static; top:auto; height:auto;
  }
}

/* === SFaz Chat Input Styling (Textarea) === */
#sfaz-chat-input {
  display: block;
  width: 100%;
  min-height: 2.4em;       /* Start: ~1 Zeile */
  line-height: 1.4;
  resize: none;            /* Größe nicht manuell ziehen */
  overflow-y: hidden;      /* wird per JS auf auto gesetzt, wenn > 3 Zeilen */
  padding: 10px 12px;
  border: 1px solid var(--sfaz-border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  color: var(--sfaz-text, #111);
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
  transition: border-color .15s ease, box-shadow .15s ease;
  white-space: pre-wrap;   /* sichtbare Zeilenumbrüche */
  word-break: break-word;  /* lange Wörter umbrechen */
}

#sfaz-chat-input:focus {
  outline: none;
  border-color: var(--sfaz-gold, #d4af37);
  box-shadow: 0 0 0 3px rgba(212,175,55,.25);
}

/* Optional: Container soll mitwachsen */
.sfaz-chat-input-wrap {
  align-items: flex-end;
}

/* === Chat-Prompt (max 3 Zeilen, scrollbar darüber) === */
#sfaz-prompt{
  display:block;
  width:100%;
  min-height:2.4em;       /* Start ~1 Zeile */
  line-height:1.4;
  resize:none;            /* manuelles Ziehen aus */
  overflow-y:hidden;      /* JS setzt 'auto', wenn nötig */
  padding:10px 12px;
  border:1px solid var(--sfaz-border, #e5e7eb);
  border-radius:8px;
  background:#fff;
  color:var(--sfaz-text, #111);
  box-shadow:0 1px 2px rgba(0,0,0,.04) inset;
  transition:border-color .15s ease, box-shadow .15s ease;
  white-space:pre-wrap;   /* sichtbare Umbrüche */
  word-break:break-word;  /* lange Wörter umbrechen */
}
#sfaz-prompt:focus{
  outline:none;
  border-color:var(--sfaz-gold, #d4af37);
  box-shadow:0 0 0 3px rgba(212,175,55,.25);
}

:root{ --sfaz-topbar-h: 56px; } /* echte Höhe, bei dir ggf. 60–64px */

.sfaz-topbar{ z-index: 10000 !important; }              /* Header */
.sfaz-menu{
  position: fixed !important;
  top: calc(var(--sfaz-topbar-h) + 8px) !important;     /* direkt unter Header */
  right: 16px !important;
  z-index: 10050 !important;                             /* ÜBER Header */
}