/* ==========================================================================
   MENU WITH ICONS - Desktop & Mobile
   ========================================================================== */

/* Desktop Nav Icons */
.nav-menu-list .nav-link i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.nav-link-cta i {
    margin-right: 0.4rem;
}

/* Desktop-only menu */
.nav-desktop-only {
    display: flex;
}

/* Mobile menu - versteckt auf Desktop */
.nav-menu-mobile {
    display: none;
}

/* Mobile Styles */
@media (max-width: 991px) {
    /* Desktop Menü verstecken */
    .nav-desktop-only {
        display: none !important;
    }

    /* Mobile Menü */
    .nav-menu-mobile {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-white);
        flex-direction: column;
        overflow-y: auto;
        z-index: 999;
        box-shadow: var(--shadow-lg);
    }

    .nav-menu-mobile.nav-menu-active {
        display: flex;
    }

    /* Icon-Leiste */
    .mobile-icon-bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 1rem;
        background: var(--color-primary);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        flex-shrink: 0;
    }

    .mobile-icon-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        color: white;
        text-decoration: none;
        border-radius: 12px;
        transition: all 0.2s ease;
    }

    .mobile-icon-link:hover,
    .mobile-icon-link:focus {
        background: rgba(255,255,255,0.15);
        color: white;
        transform: scale(1.1);
    }

    .mobile-icon-link i {
        font-size: 1.5rem;
    }

    /* Sidebar Menü im Mobile */
    .mobile-sidebar-menu {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
    }

    .mobile-menu-section {
        margin-bottom: 1rem;
        background: var(--color-gray-50);
        border-radius: 12px;
        overflow: hidden;
    }

    .mobile-menu-title {
        padding: 0.75rem 1rem;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--color-primary);
        background: var(--color-gray-100);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mobile-menu-items {
        padding: 0.5rem;
    }

    .mobile-menu-items ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-menu-items li {
        margin: 0;
    }

    .mobile-menu-items a {
        display: block;
        padding: 0.75rem 1rem;
        color: var(--color-gray-700);
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .mobile-menu-items a:hover,
    .mobile-menu-items a:focus {
        background: var(--color-primary);
        color: white;
    }

    /* Kalender Mobile Fix */
    .content-card-body .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content-card-body table {
        min-width: 100%;
    }

    /* Calendar specific mobile fixes */
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }

    .fc .fc-button {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.1rem;
    }

    /* Kalender Tabellenansicht */
    .calendar-table,
    .table-calendar,
    [class*="calendar"] table {
        font-size: 0.75rem;
    }

    .calendar-table th,
    .calendar-table td,
    .table-calendar th,
    .table-calendar td {
        padding: 0.25rem !important;
    }
}

/* Sehr kleine Bildschirme */
@media (max-width: 480px) {
    .mobile-icon-link {
        width: 40px;
        height: 40px;
    }

    .mobile-icon-link i {
        font-size: 1.2rem;
    }

    .mobile-icon-bar {
        padding: 0.75rem 0.5rem;
    }
}

/* ==========================================================================
   IFRAME EDGE-TO-EDGE (Mobile)
   Ziel: möglichst randlos / nahtlos eingebettet
   ========================================================================== */

@media (max-width: 991px) {

  /* 1) Standard-Absatzabstände killen, weil deine iframes in <p> liegen */
  p:has(> iframe) {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Fallback für Browser ohne :has() (iOS kann je nach Version zicken):
     -> wirkt globaler, aber hilft sofort */
  p iframe {
    display: block;
  }

  /* 2) Iframes selbst: keine Border, keine Lücken, volle Breite */
  iframe {
    border: 0 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) Wenn du "edge-to-edge" willst: negative Seitenränder gegen Container-Padding
     (Bootstrap container hat links/rechts Padding) */
  .container iframe,
  .container-fluid iframe,
  .card-body iframe,
  .content-card-body iframe {
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: calc(100% + 24px) !important;
  }

  /* 4) Card/Content Padding reduzieren, damit der iframe nicht eingerahmt wirkt */
  .card-body,
  .content-card-body {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* 5) Wenn du eine eigene Klasse setzen kannst, ist das am saubersten:
     <iframe class="embed-iframe" ...> */
  iframe.embed-iframe {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Sehr kleine Bildschirme: noch aggressiver randlos */
@media (max-width: 480px) {
  .container iframe,
  .container-fluid iframe,
  .card-body iframe,
  .content-card-body iframe {
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: calc(100% + 20px) !important;
  }

  .card-body,
  .content-card-body {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}