/* Alle bekannten Social Links entfernen */
a[href*="facebook"],
a[href*="twitter"],
a[href*="linkedin"],
a[href*="instagram"],
a[href*="x.com"],
a[href*="discord"],
a[href*="github"] {
  display: none !important;
}

/* Typische Social-Container */
.social-icons,
.footer-social,
[class*="social"],
[class*="Social"],
[class*="footer"] a[href*="github"],
[class*="footer"] a[href*="discord"] {
  display: none !important;
}

svg[class*="discord"],
svg[class*="github"],
svg[class*="icon"] {
  display: none !important;
}

/* Original Footer ausblenden */
footer,
.site-footer,
.app-footer,
#footer {
  display: none !important;
}

/* Professioneller Custom Footer */
#custom-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 12px 18px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #6b7280;
  z-index: 9999;
}

#custom-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

#custom-footer .footer-left,
#custom-footer .footer-center,
#custom-footer .footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

#custom-footer .footer-left {
  min-width: 220px;
  justify-content: flex-start;
}

#custom-footer .footer-center {
  flex: 1;
  justify-content: center;
  text-align: center;
  gap: 8px;
  flex-wrap: wrap;
}

#custom-footer .footer-right {
  min-width: 220px;
  justify-content: flex-end;
}

#custom-footer a {
  color: #111827;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

#custom-footer a:hover {
  color: #2563eb;
}

#custom-footer .muted {
  color: #9ca3af;
}

#custom-footer .logo {
  height: 22px;
  width: auto;
  display: block;
}

/* Abstand für Fixed Footer */
body {
  padding-bottom: 70px !important;
}

/* Mobile: Footer untereinander */
@media (max-width: 700px) {
  #custom-footer .footer-inner {
    flex-direction: column;
    align-items: stretch;
  }
  #custom-footer .footer-left,
  #custom-footer .footer-right {
    min-width: unset;
    justify-content: center;
  }
  #custom-footer .footer-center {
    justify-content: center;
  }
}

/* Mobile Header: nicht fix auf eine Höhe, Buttons dürfen umbrechen */
@media (max-width: 768px) {
  .MuiAppBar-root,
  header {
    height: auto !important;
    min-height: 56px !important;
  }

  .MuiToolbar-root {
    min-height: 56px !important;
    height: auto !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}
@media (max-width: 768px) {
  body {
    padding-top: 72px; /* ggf. 56/64/80 testen */
  }
}
@media (max-width: 768px) {
  /* Häufig: Action-Container als letzter Bereich im Header/Toolbar */
  .MuiToolbar-root > :last-child {
    position: sticky !important;
    bottom: 0 !important;
    background: #fff;
    z-index: 9999;
    padding: 8px 0 !important;
  }
}

/* ===== EJHB Mobile Fix: Header darf nichts verdecken ===== */
@media (max-width: 768px) {

  /* 1) Nichts darf auf mobile "abgeschnitten" werden */
  html, body, #root {
    height: auto !important;
    min-height: 100% !important;
    overflow: auto !important;
  }

  /* 2) Header/Topbar: keine feste Höhe, kein Abschneiden */
  header,
  .MuiAppBar-root,
  [class*="AppBar"],
  [class*="appbar"],
  [class*="Header"],
  [class*="header"] {
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 3) Toolbar-Inhalt darf umbrechen (wichtig für Buttons wie "Absenden") */
  .MuiToolbar-root,
  [class*="Toolbar"],
  [class*="toolbar"] {
    height: auto !important;
    min-height: 56px !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }

  /* 4) Falls der Header fixed ist, machen wir ihn sticky (verhindert Überdeckung) */
  header,
  .MuiAppBar-root {
    position: sticky !important;
    top: 0 !important;
  }

  /* 5) Extra Platz unten, damit Action-Bereiche nicht abgeschnitten werden */
  body {
    padding-bottom: 88px !important;
  }
}

/* ===== EJHB Fix: Modal/Popup "Absenden" wird vom Footer verdeckt ===== */
@media (max-width: 768px) {

  /* A) Falls ein Footer / Bottom-Bar über dem Content liegt: entschärfen */
  footer,
  [class*="footer"],
  [class*="Footer"],
  [class*="bottom"],
  [class*="Bottom"] {
    position: static !important;   /* statt fixed */
  }

  /* B) Modals/Dialogs: immer genug Platz unten, damit Buttons sichtbar bleiben */
  .MuiDialog-paper,
  .MuiModal-root .MuiPaper-root,
  [role="dialog"] {
    margin-bottom: 96px !important;   /* Abstand zum unteren Rand */
  }

  /* C) Der scrollbare Bereich im Dialog bekommt extra padding unten */
  .MuiDialogContent-root,
  [class*="DialogContent"],
  [class*="dialogContent"] {
    padding-bottom: 120px !important;
  }

  /* D) Wenn es eine Dialog-Button-Leiste gibt: sticky innerhalb des Dialogs */
  .MuiDialogActions-root,
  [class*="DialogActions"],
  [class*="dialogActions"] {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background: #fff !important;
    padding-bottom: env(safe-area-inset-bottom) !important; /* iPhone safe area */
  }
}

@media (max-width: 768px) {
  [role="dialog"] { outline: 4px solid red !important; }
}

/* ===== EJHB Fix: Popup/Modal liegt hinter Footer (z-index Problem) ===== */
@media (max-width: 768px) {

  /* 1) Footer/Bottom-Bar darf NICHT über Modals liegen */
  footer,
  [class*="footer"],
  [class*="Footer"],
  [class*="bottom"],
  [class*="Bottom"] {
    position: relative !important;
    z-index: 10 !important;  /* bewusst niedrig */
  }

  /* 2) Modal/Popup immer über allem (MUI Modal ist oft 1300) */
  .MuiModal-root,
  .MuiDialog-root,
  [role="dialog"],
  [class*="Modal"],
  [class*="Dialog"] {
    z-index: 2000 !important;
  }

  /* 3) Falls ein Backdrop existiert, auch korrekt stapeln */
  .MuiBackdrop-root,
  [class*="Backdrop"] {
    z-index: 1990 !important;
  }

  /* 4) Der Popup-Container selbst (Paper) sicher über Footer */
  .MuiPaper-root,
  [class*="Paper"] {
    z-index: 2010 !important;
  }

  /* 5) Zusätzlich: Dialog-Buttonbereich immer sichtbar */
  .MuiDialogActions-root,
  [class*="DialogActions"],
  [class*="dialogActions"] {
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    z-index: 2020 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ===== EJHB Collapsible Footer (default closed) ===== */
#ejhb-footer {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 50;          /* bewusst niedrig, damit Modals immer darüber liegen */
  max-width: calc(100vw - 24px);
}

/* der kleine “Tab” */
#ejhb-footer > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-weight: 600;
  display: inline-block;
}

/* Pfeil/Marker weg (Browserabhängig) */
#ejhb-footer > summary::-webkit-details-marker { display: none; }

/* Panel-Inhalt */
#ejhb-footer .ejhb-footer-panel {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  max-height: 45vh;
  overflow: auto;
}

/* optional: auf Mobile etwas größer/touch-freundlicher */
@media (max-width: 768px) {
  #ejhb-footer { left: 10px; bottom: 10px; }
  #ejhb-footer > summary { padding: 12px 14px; }
}