/* =========================================================
   KOALATALK - mobile-view.css
   Mobile/Tablet Styles bis 999px.
   Lade-Reihenfolge: nach main.css und nach pc-view.css laden.
========================================================= */

/* =========================================================
   KOALATALK – MOBILE.CSS CLEAN FIX
   Ziel:
   - obere Gruppenleiste nicht mehr über MasterLeiste/Chat
   - MasterLeiste sauber unter der Gruppenleiste
   - .mitte beginnt erst darunter und endet über Footer
   - Footer/Input sauber unten, Icons nicht abgeschnitten
   - weißes/helles Layout
========================================================= */

@media screen and (max-width: 999px){

  :root{
    --kt-adminbar-h: 32px;
    --kt-groupbar-h: 104px;
    --kt-masterbar-h: 58px;
    --kt-footer-h-mobile: 98px;
    --kt-mobile-gap: 8px;

    --kt-bg: #ffffff;
    --kt-panel: #f7f9fc;
    --kt-panel-2: #ffffff;
    --kt-text: #111827;
    --kt-muted: #6b7280;
    --kt-line: rgba(15,23,42,.12);
    --kt-blue: #2d9bf0;
    --kt-shadow: 0 10px 28px rgba(15,23,42,.10);
  }

  html,
  body{
    width:100%;
    height:100%;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#ffffff !important;
    color:var(--kt-text) !important;
  }

  #wpadminbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:999999 !important;
  }


  /* Hauptfenster */
  .kt-class-wrap-window{
    position:fixed !important;
    top:var(--kt-adminbar-h) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100vw !important;
    height:calc(100dvh - var(--kt-adminbar-h)) !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
    background:#ffffff !important;
    display:block !important;
    transform:none !important;
  }

  .kt-class-wrap-window > div{
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    display:block !important;
  }

  /* =========================================================
     OBERE GRUPPENLEISTE
     vorher war sie zu groß/überlagernd. Jetzt feste horizontale Leiste.
  ========================================================= */

  section.columns,
  .kt-class-wrap-window section.small-1,
  .kt-class-wrap-window section.medium-2,
  .kt-class-wrap-window section.large-1{
    position:fixed !important;
    top:var(--kt-adminbar-h) !important;
    left:0 !important;
    right:0 !important;

    width:100vw !important;
    height:var(--kt-groupbar-h) !important;
    min-height:var(--kt-groupbar-h) !important;
    max-height:var(--kt-groupbar-h) !important;

    margin:0 !important;
    padding:6px 8px !important;

    overflow:hidden !important;
    background:#f5f7fb !important;
    border-bottom:1px solid var(--kt-line) !important;
    box-shadow:0 4px 14px rgba(15,23,42,.06) !important;

    z-index:1000 !important;
    box-sizing:border-box !important;
  }

  .container-out-overflow-x1,
  .container-out-overflow-x2{
    width:100% !important;
    height:92px !important;
    min-height:92px !important;
    max-height:92px !important;
    position:relative !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px !important;

    margin:0 !important;
    padding:6px 8px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    background:transparent !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box !important;
                z-index: 1 !important;
  }

  .container-out-overflow-x1::-webkit-scrollbar,
  .container-out-overflow-x2::-webkit-scrollbar{
    height:6px;
  }

  .container-out-overflow-x1::-webkit-scrollbar-thumb,
  .container-out-overflow-x2::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:999px;
  }

  .btn-gruppen-inhalt-anzeigen,
  .btn-gruppen-inhalt-anzeigen5{
    flex:0 0 130px !important;
    width:130px !important;
    min-width:130px !important;
    max-width:130px !important;
    height:72px !important;
    min-height:72px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;

    margin:0 !important;
    padding:8px 10px !important;

    border:1px solid rgba(45,155,240,.14) !important;
    border-radius:18px !important;

    background:#ffffff !important;
    color:#111827 !important;

    box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
    text-align:left !important;
    text-decoration:none !important;
    scroll-snap-align:start !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .btn-gruppen-inhalt-anzeigen:hover,
  .btn-gruppen-inhalt-anzeigen5:hover,
  .btn-gruppen-inhalt-anzeigen.active,
  .btn-gruppen-inhalt-anzeigen5.active,
  .btn-gruppen-inhalt-anzeigen.group-selected,
  .btn-gruppen-inhalt-anzeigen5.group-selected{
    background:#eaf5ff !important;
    border-color:rgba(45,155,240,.45) !important;
    transform:none !important;
  }

  .image_shortcut_group,
  .btn-gruppen-inhalt-anzeigen img,
  .btn-gruppen-inhalt-anzeigen5 img{
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    max-width:48px !important;

    margin:0 !important;
    border-radius:50% !important;
    object-fit:cover !important;

    border:1px solid rgba(15,23,42,.10) !important;
    box-shadow:0 4px 12px rgba(15,23,42,.10) !important;
  }

  .btn-gruppen-inhalt-anzeigen span,
  .btn-gruppen-inhalt-anzeigen div,
  .btn-gruppen-inhalt-anzeigen a,
  .btn-gruppen-inhalt-anzeigen5 span,
  .btn-gruppen-inhalt-anzeigen5 div,
  .btn-gruppen-inhalt-anzeigen5 a{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    color:#111827 !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
  }

  /* =========================================================
     MASTERLEISTE
     liegt jetzt klar unter der Gruppenleiste.
  ========================================================= */

  .MasterLeiste{
    position:fixed !important;
    top:calc(var(--kt-adminbar-h) + var(--kt-groupbar-h)) !important;
    left:0 !important;
    right:0 !important;

    width:100vw !important;
    height:var(--kt-masterbar-h) !important;
    min-height:var(--kt-masterbar-h) !important;

    margin:0 !important;
    padding:7px 10px !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;

    background:#ffffff !important;
    border-bottom:1px solid var(--kt-line) !important;
    box-shadow:0 8px 18px rgba(15,23,42,.08) !important;

    z-index:1100 !important;
    box-sizing:border-box !important;
  }

  .MasterLeiste:empty{
    display:none !important;
  }

  .MasterLeiste > *,
  .MasterLeiste .koala-teilnehmer > *{
    flex:0 0 auto !important;
    float:none !important;
  }

  .MasterLeiste .koala-teilnehmer{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
  }

  .navi-oben__name_gruppe,
  .navi-oben__Chat,
  .navi-oben__kalender,
  .navi-oben__KS,
  .navi-oben__videochat,
  .navi-oben__mpm,
  .navi-oben__einstellungen,
  .navi-oben__user_anzahl,
  .navi-oben__AnzahlTeilnehmer{
    height:42px !important;
    min-height:42px !important;
    min-width:48px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 12px !important;

    border-radius:15px !important;
    border:1px solid rgba(15,23,42,.10) !important;
    background:#f8fafc !important;
    color:#111827 !important;

    box-shadow:0 6px 14px rgba(15,23,42,.08) !important;
    font-size:14px !important;
    font-weight:800 !important;
    text-decoration:none !important;
    overflow:hidden !important;
  }

  .navi-oben__name_gruppe{
    max-width:135px !important;
    background:#eaf5ff !important;
    border-color:rgba(45,155,240,.25) !important;
  }

  .navi-oben__Chat img,
  .navi-oben__kalender img,
  .navi-oben__KS img,
  .navi-oben__videochat img,
  .navi-oben__mpm img,
  .navi-oben__einstellungen img{
    width:28px !important;
    height:28px !important;
    object-fit:contain !important;
    border-radius:8px !important;
  }

  .navi-oben__user_anzahl{
    margin-left:auto !important;
  }

  /* =========================================================
     CHATBEREICH / MITTE
     beginnt nicht mehr unter dem seitlichen/oberen Div.
  ========================================================= */

  aside.columns,
  .kt-class-wrap-window aside.small-1,
  .kt-class-wrap-window aside.medium-2,
  .kt-class-wrap-window aside.large-2{
    position:fixed !important;
    top:calc(var(--kt-adminbar-h) + var(--kt-groupbar-h) + var(--kt-masterbar-h)) !important;
    left:0 !important;
    right:0 !important;
    bottom:var(--kt-footer-h-mobile) !important;

    width:100vw !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
    display:block !important;
    background:#ffffff !important;
    z-index:10 !important;
  }

  .MasterLeiste:empty ~ aside.columns,
  .MasterLeiste:empty + aside.columns{
    top:calc(var(--kt-adminbar-h) + var(--kt-groupbar-h)) !important;
  }

  .mitte{
    position:unset !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0px 0 0 0  !important;
    padding:10px 8px 14px 8px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    background:#ffffff !important;
    border:0 !important;
    box-shadow:none !important;

    box-sizing:border-box !important;
    -webkit-overflow-scrolling:touch;
  }

  .mitte-ohne-masterleiste{
    top:calc(var(--kt-adminbar-h) + var(--kt-groupbar-h)) !important;
  }

  /* Nachrichten */
  .Sprechblase-Gesammt-CR,
  .Sprechblase-Gesammt-CL{
    width:100% !important;
    max-width:100% !important;
    margin:12px 0 !important;
    padding:0 8px !important;
    display:flex !important;
    flex-direction:column !important;
    clear:both !important;
  }

  .Sprechblase-Gesammt-CR{
    align-items:flex-end !important;
  }

  .Sprechblase-Gesammt-CL{
    align-items:flex-start !important;
  }

  .Chat-Container-CR,
  .Chat-Container-CL,
  .Idee-Container-CR,
  .Idee-Container-CL,
  .Bug-Container-CR,
  .Bug-Container-CL,
  .Gdmma-Container-CR,
  .Gdmma-Container-CL,
  .D2d-Container-CR,
  .D2d-Container-CL,
  .Wdw-Container-CR,
  .Wdw-Container-CL,
  .PostIt-Container-CR,
  .PostIt-Container-CL,
  .Soundmoji-Container-CR,
  .Soundmoji-Container-CL,
  .Denkblase-Container-CR,
  .Denkblase-Container-CL,
  .Counter-Container-CR,
  .Counter-Container-CL{
    width:fit-content !important;
    min-width:0 !important;
    max-width:86vw !important;

    margin:0 !important;
    padding:11px 14px !important;

    float:none !important;
    clear:none !important;

    border-radius:18px !important;
    color:#111827 !important;
    box-shadow:0 8px 24px rgba(15,23,42,.10) !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  .kt-message-time{
    width:auto !important;
    min-width:0 !important;
    margin:0 8px 5px 8px !important;
    color:#374151 !important;
    text-shadow:none !important;
    font-size:11px !important;
    line-height:15px !important;
  }

  .kt-message-time-CR{
    text-align:right !important;
  }

  .kt-message-time-CL{
    text-align:left !important;
  }

  img.bubble.img,
  .bubble.img,
  .kt-bubble-attachment img{
    max-width:82vw !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* =========================================================
     FOOTER / INPUT
     Icon-Leiste und Eingabezeile sauber trennen.
  ========================================================= */

  .footer_c.kt-fixed-footer{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100vw !important;
    min-height:var(--kt-footer-h-mobile) !important;
    height:auto !important;

    margin:0 !important;
    padding:6px 8px calc(env(safe-area-inset-bottom) + 7px) 8px !important;

    display:block !important;

    background:#ffffff !important;
    border-top:1px solid var(--kt-line) !important;
    box-shadow:0 -10px 24px rgba(15,23,42,.08) !important;

    overflow:visible !important;
    z-index:99999 !important;
    box-sizing:border-box !important;
  }

  form#form1,
  .uploadForm1.kt-chat-form,
  .footer_c.kt-fixed-footer form.uploadForm1{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;
    background:transparent !important;
    border:0 !important;
  }

  .footer_c.kt-fixed-footer table,
  .footer_c.kt-fixed-footer form.uploadForm1 table,
  .table-75vw{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border-collapse:collapse !important;
  }

  .footer_c.kt-fixed-footer td,
  .footer_c.kt-fixed-footer th{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    vertical-align:middle !important;
  }

  .kt-keyboard-inner{
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
  }

  /* obere Icon-Reihe */
  .kt-actions-,
  .kt-icon-row{
    width:100% !important;
    min-height:42px !important;

    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;

    gap:10px !important;
    margin:0 0 4px 0 !important;
    padding:0 !important;

    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .kt-actions- > label.icon-btn,
  .kt-icon-row .icon-btn,
  .icon-btn{
    flex:0 0 42px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:14px !important;
    border:1px solid rgba(45,155,240,.14) !important;
    background:#f8fafc !important;
    box-shadow:0 5px 14px rgba(15,23,42,.08) !important;

    opacity:1 !important;
    visibility:visible !important;
    position:relative !important;
    z-index:5 !important;
  }

  .kt-actions- > label.icon-btn img,
  .kt-icon-row .icon-btn img,
  .icon-btn img{
    width:28px !important;
    height:28px !important;
    max-width:28px !important;
    max-height:28px !important;
    object-fit:contain !important;
    display:block !important;
  }

  /* Eingabezeile */
  .kt-chat-input-wrapper{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
  }

  .kt-chat-input-row,
  .kt-composer-row{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  .kt-chat-textarea-wrap{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;

    display:flex !important;
    align-items:center !important;
    gap:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  .kt-chat-textarea-wrap .SelectBox,
  .kt-chat-textarea-wrap .SelectBox1,
  .SelectBox,
  .SelectBox1{
    flex:0 0 92px !important;

    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;

    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    margin:0 !important;
    padding:0 8px !important;

    float:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:22px 0 0 22px !important;
    border:1px solid #111827 !important;
    background:#111827 !important;
    color:#ffffff !important;

    box-sizing:border-box !important;
  }

  .bouble_cs{
    color:#ffffff !important;
    font-size:18px !important;
  }

  .kt-chat-textarea-wrap textarea,
  .class_koala_chat_usermsg_none,
  .class_koala_chat_usermsg_block{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:44px !important;
    min-height:44px !important;
    max-height:82px !important;

    margin:0 !important;
    padding:9px 14px !important;

    float:none !important;
    resize:none !important;

    border-radius:0 24px 24px 0 !important;
    border:1px solid #d7e7f5 !important;
    border-left:0 !important;

    background:#ffffff !important;
    color:#111827 !important;

    font-size:16px !important;
    line-height:22px !important;
    outline:none !important;

    box-sizing:border-box !important;
  }

  .btnSubmit.kt-send-btn,
  .kt-send-btn{
    flex:0 0 44px !important;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;
    border:0 !important;
    background:#2d9bf0 !important;
    color:#ffffff !important;
    box-shadow:0 8px 18px rgba(45,155,240,.28) !important;
  }

  /* Upload Preview nicht in den Footer drücken */
  .kt-attach-preview{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 4px 0 !important;
    padding:0 36px !important;
    box-sizing:border-box !important;

    color:#374151 !important;
    font-size:12px !important;
    line-height:16px !important;
    text-align:center !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .X_Schliessen5{
    position:absolute !important;
    right:10px !important;
    top:8px !important;
    width:28px !important;
    height:28px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:20 !important;
  }

  .X_Schliessen5 img{
    width:28px !important;
    height:28px !important;
    border-radius:50% !important;
    display:block !important;
  }

  .preview{
    position:fixed !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    transform:none !important;
    background:rgba(255,255,255,.0) !important;

    z-index:999998 !important;
    pointer-events:none !important;
  }

  .preview img,
  .preview iframe,
  .preview pre{
    max-width:88vw !important;
    max-height:62vh !important;
    object-fit:contain !important;
    border-radius:14px !important;
    box-shadow:0 18px 50px rgba(15,23,42,.25) !important;
    pointer-events:none !important;
  }

  .preview *{
    pointer-events:none !important;
  }

  /* Kontextmenüs */
  .einstellungen-context-menu,
  .Idee-context-menu,
  .videoload-context-menu,
  .chat-context-menu,
  .termin-context-menu,
  .users-context-menu,
  .termin-aendern-context-menu,
  .event-context-menu,
  .chat-context-settings_menu{
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%, -50%) !important;

    width:90vw !important;
    min-width:0 !important;
    max-width:90vw !important;
    max-height:85dvh !important;

    overflow:auto !important;
    -webkit-overflow-scrolling:touch;

    background:#ffffff !important;
    color:#111827 !important;
    border:1px solid var(--kt-line) !important;
    border-radius:18px !important;
    box-shadow:0 24px 70px rgba(15,23,42,.25) !important;
    z-index:1000000 !important;
    box-sizing:border-box !important;
  }

  .event-context-menu{
    min-height:320px !important;
  }

  /* Hilfsbilder */
  .gruppen-auswahl-bild{
    display:block !important;
    width:min(25em, 82vw) !important;
    max-width:300px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  .gruppenintro-empty{
    display:none !important;
  }
}

/* Sehr kleine Displays */
@media screen and (max-width: 420px){
  :root{
    --kt-groupbar-h: 96px;
    --kt-masterbar-h: 54px;
    --kt-footer-h-mobile: 96px;
  }

  .btn-gruppen-inhalt-anzeigen,
  .btn-gruppen-inhalt-anzeigen5{
    flex-basis:118px !important;
    width:118px !important;
    min-width:118px !important;
    max-width:118px !important;
  }

  .image_shortcut_group,
  .btn-gruppen-inhalt-anzeigen img,
  .btn-gruppen-inhalt-anzeigen5 img{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    max-width:44px !important;
  }

  .kt-chat-textarea-wrap .SelectBox,
  .kt-chat-textarea-wrap .SelectBox1,
  .SelectBox,
  .SelectBox1{
    flex-basis:82px !important;
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;
  }

  .kt-actions- > label.icon-btn,
  .kt-icon-row .icon-btn,
  .icon-btn{
    flex-basis:40px !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }

  .btnSubmit.kt-send-btn,
  .kt-send-btn{
    flex-basis:42px !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
  }
}
/* =========================================================
   MOBILE FIX – WordPress Adminbar Menü sichtbar machen
   Problem: "Gruppen / Erstellen / Einladungen / Teilnehmen" wird
   auf Mobile abgeschnitten, weil nur Icons sichtbar sind.
   Diese Datei ganz am Ende der mobile.css laden/einfügen.
========================================================= */

@media screen and (max-width: 999px){



  /* Deine App unter die Adminbar schieben */
  .kt-class-wrap-window{
    top: 44px !important;
    height: calc(100dvh - 44px) !important;
  }

  /* Gruppenscroller beginnt direkt unter Adminbar */
  .container-out-overflow-x1,
  .container-out-overflow-x2{
    margin-top: 0 !important;
    background-color: #FFFFFF !important;
  }

  /* MasterLeiste darf nicht über Adminbar liegen */
  .MasterLeiste{

    z-index: 99998 !important;
  }
}




@media screen and (max-width: 999px) {

  .MasterLeiste,
  .navi-links,
  .navi-oben,
  .navigation,
  .nav-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* einzelne Buttons */
  .nav-item,
  .navi-item,
  .gruppen,
  .einstellungen,
  .kalender {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 16px;
    padding: 10px;
  }

  /* Icons größer machen */
  .nav-item img,
  .navi-item img {
    width: 24px;
    height: 24px;
  }

  /* falls irgendwo hidden gesetzt ist */
  .hidden,
  .d-none {
    display: inline-flex !important;
  }
}

@media screen and (max-width: 999px) {
  .MasterLeiste {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .nav-item {
    flex: 0 0 auto;
  }
}
#wpadminbar,
  #wp-toolbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  #wp-admin-bar-root-default,
  #wp-admin-bar-top-secondary {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  #wpadminbar .ab-item {
    display: inline-flex !important;
    font-size: 14px !important;
    padding: 8px 10px !important;
  }

#wp-toolbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999999999 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

#wpadminbar {
            background: #111827 !important;
            height: 46px !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            white-space: nowrap !important;
        }

        #wpadminbar .quicklinks,
        #wpadminbar .ab-top-menu {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            height: 46px !important;
        }

        #wpadminbar .ab-top-menu > li {
            flex: 0 0 auto !important;
            white-space: nowrap !important;
        }

        #wpadminbar .ab-item {
            color: #fff !important;
            height: 46px !important;
            line-height: 46px !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            padding: 0 14px !important;
            white-space: nowrap !important;
        }

        #wpadminbar .ab-item:hover,
        #wpadminbar li:hover > .ab-item {
            background: #2563eb !important;
            color: #fff !important;
        }

        #wpadminbar .ab-icon:before,
        #wpadminbar .ab-icon,
        #wpadminbar .ab-label {
            color: #fff !important;
        }

        #wpadminbar .menupop .ab-sub-wrapper {
            background: #111827 !important;
        }

        #wpadminbar .ab-submenu .ab-item {
            color: #fff !important;
            line-height: 40px !important;
            height: 40px !important;
        }

        #wpadminbar .ab-top-secondary {
            margin-left: auto !important;
            display: flex !important;
            flex-wrap: nowrap !important;
        }

        html {
            margin-top: 46px !important;
        }


body.admin-bar #wpadminbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: #111827 !important;
        z-index: 999999999 !important;
    }

  
    
    
    
  body.admin-bar  #wpadminbar .quicklinks{
    overflow-x:auto;
    overflow-y:visible;
}

body.admin-bar #wpadminbar .ab-top-menu{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
}

body.admin-bar #wpadminbar .ab-top-menu > li{
    position:relative;
    flex:0 0 auto;
}
    
    
    
    

    body.admin-bar #wpadminbar #wp-admin-bar-root-default,
    body.admin-bar #wpadminbar #wp-admin-bar-top-secondary {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        height: 52px !important;
        white-space: nowrap !important;
    }

    body.admin-bar #wpadminbar .ab-top-menu > li {
        display: flex !important;
        flex: 0 0 auto !important;
        height: 52px !important;
        white-space: nowrap !important;
    }

    body.admin-bar #wpadminbar .ab-item {
        color: #fff !important;
        height: 52px !important;
        line-height: 52px !important;
        white-space: nowrap !important;
    }

    html {
        margin-top: 52px !important;
    }
    
    @media screen and (max-width: 999px){

  .termin-context-menu,
  .termin-aendern-context-menu{
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    min-width: 0 !important;

    left: 50% !important;
    top: 52% !important;
    transform: translate(-50%, -50%) !important;

    max-height: 86dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .termin-context-menu *,
  .termin-aendern-context-menu *{
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .termin-context-menu form,
  .termin-aendern-context-menu form{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .termin-context-menu table,
  .termin-aendern-context-menu table,
  .termin-context-menu tbody,
  .termin-aendern-context-menu tbody,
  .termin-context-menu tr,
  .termin-aendern-context-menu tr,
  .termin-context-menu td,
  .termin-aendern-context-menu td{
    display: block !important;
    width: 100% !important;
  }

  .termin-context-menu td,
  .termin-aendern-context-menu td{
    padding: 0 0 10px 0 !important;
  }

  .termin-context-menu input,
  .termin-context-menu select,
  .termin-context-menu textarea,
  .termin-aendern-context-menu input,
  .termin-aendern-context-menu select,
  .termin-aendern-context-menu textarea{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .termin-context-menu textarea,
  .termin-aendern-context-menu textarea{
    min-height: 90px !important;
    resize: vertical !important;
  }

  .termin-context-menu input[type="file"],
  .termin-aendern-context-menu input[type="file"]{
    font-size: 12px !important;
  }

  .termin-context-menu img,
  .termin-aendern-context-menu img{
    max-width: 90px !important;
    height: auto !important;
  }

  .termin-context-menu .btn,
  .termin-context-menu button,
  .termin-context-menu input[type="submit"],
  .termin-aendern-context-menu .btn,
  .termin-aendern-context-menu button,
  .termin-aendern-context-menu input[type="submit"]{
    width: 100% !important;
    margin: 6px 0 !important;
  }
}




/* ===============================
   MOBILE
================================ */

@media screen and (max-width:999px){

    .MasterLeiste{
        top:52px;
        height:60px;
    }

    .Chat-Window{
        padding-top:10px;
    }

    .mitte{
        height:calc(100dvh - 60px - 96px);
    }
}