/* =========================================================
   3) MOBILE / TABLET (<1000px)
========================================================= */

@media screen and (max-width: 999px){
    .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{
    width: 90%;
    left: 5% !important;
  
  }

  fieldset{
    background: radial-gradient(var(--kt-blue) 0%, var(--kt-purple) 100%) !important;
  }

  .textbox-left-1,
  .textbox-left-2{
    width:10%;
    margin-right:0;
    text-align:right;
    vertical-align: bottom;
  }

  .textbox-right-1,
  .textbox-right-2{
    width:15%;
    margin-left:0;
    text-align:left;
    vertical-align: top;
  }

  .dropdown-my-3{
    width:16%;
    max-width:16%;
    float:left;
    height:50px;
    padding:0;
  }

  .class_koala_chat_usermsg_none,
  .class_koala_chat_usermsg_block{
    width:83% !important;
    max-width:83% !important;
  }

  .container-out-overflow-x1{
    width:100%;
    display:flex;
    margin:0 auto;
    padding:0;
    min-height:7em;
    max-height:90%;
     overflow-y:auto;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .btn-gruppen-inhalt-anzeigen{
    display:block;
    padding-left:15px;
    max-width:120px;
    border:0;
    scroll-snap-align: center;
  }

  .mitte{
    height: 53vh;
    width:100%;
    float:right;
    padding:5px;
    overflow-y:auto;
    border: 1px solid rgba(255,255,255,.22);
  }

  img.bubble.img{ max-width:220px; }
  .bubble{ max-width:80vw; }

  .me{ background-color: rgba(255,255,255,.85); }
  .you{ background-color: rgba(230,240,255,.95); }


  .navi-oben__kalender,
  .navi-oben__KS,
  .navi-oben__Chat,
  .navi-oben__videochat,
  .navi-oben__mpm,
  .navi-oben__Teilnehmer,
  .navi-oben__AnzahlTeilnehmer{
    width:35px;
    height:35px;
    float:left;
    background-repeat:no-repeat;
    background-size:35px 35px;
    color: #fff !important;
    text-indent:-9999px;
 
  }

  
  .navi-oben__einstellungen{
    width:30px;
    height:30px;
    float:right;
    background-repeat:no-repeat;
    background-size:35px 35px;
    color: #fff !important;
    text-indent:-9999px;
}
  
  .navi-oben__name_gruppe, .navi-oben__einstellungen{
      display: inline;
      float:left;
      margin-right:20px ;
    font-size: 0.7em !important;
  }
  
  
.navi-oben__einstellungen,
  .navi-oben__kalender,
  .navi-oben__KS,
  .navi-oben__Chat,
  .navi-oben__videochat,
  .navi-oben__mpm{
    border-radius:1px;
    padding:2px;
    border:0px solid #fff;
    margin:4px;
    color: #fff !important;
  }
  
  
  .navi-oben__einstellungen{background-image:url("/wp-content/plugins/koalatalk/img/settings1.1.svg");}
  .navi-oben__kalender{ background-image:url("/wp-content/plugins/koalatalk/img/themenleiste/iT-Calendar.png"); }
  .navi-oben__KS{ background-image:url("/wp-content/plugins/koalatalk/img/themenleiste/iT-Download.png"); }
  .navi-oben__Chat{ background-image:url("/wp-content/plugins/koalatalk/img/themenleiste/iT-Chat.png"); }
  .navi-oben__videochat{ background-image:url("/wp-content/plugins/koalatalk/img/themenleiste/video.png"); }
  .navi-oben__mpm{ background-image:url("/wp-content/plugins/koalatalk/img/themenleiste/mpm.jpg"); }
  .navi-oben__Teilnehmer,
  .navi-oben__AnzahlTeilnehmer{ background-image:url("/wp-content/plugins/koalatalk/icons/buttons/Teilnehmer-60.png"); }

  
  .navi-oben__einstellungen,
  .setting_image_mobile,
  .chat-cls_btn_settings_grouplist{
    height:32px;
    width:32px;
    float:left;
  }

  .class_input_talkroom_name,
  .navi-oben__name_gruppe,
  .navi-oben__einstellungen{
    display:block;
    margin:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    vertical-align:text-top !important;
    width:91px;
    font: normal 15px/34.2857px Arial, "Montserrat", sans-serif;
    color: #fff !important;
  }

  .navi-oben__user_anzahl{
    float:left;
    color: #fff !important;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    border-radius:0;
    margin-top:3px !important;
    margin-left:4px;
    border:0px solid #fff;
  }

  .cls_navi-oben__user_anzahl input{
    border:0;
    text-align:right;
  }

  .div_label_class_quad_rahmen_ausgabe_unten,
  .div_label_class_quad_rahmen_ausgabe_oben{
    background-color: rgba(255,255,255,.18);
    width:100%;
    box-sizing:border-box;
    height:1.5em;
    border:0;
    text-align:center;
    color:#fff;
  }
}



/* 9) Kleine Mobile-Korrekturen für deine vorhandenen Media-Rules */
@media (max-width: 999px){

  /* deine Menüs nicht "aus dem Screen" laufen lassen */
  .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{
    max-height: calc(100dvh - 20px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
      position: fixed !important;
  top: 50% !important;
  left: 50% !important;


  z-index: 100000 !important;
  }

  /* optional: MasterLeiste kompakter auf Mobile */
  .MasterLeiste{
    height: 56px;              /* du kannst hier 68px lassen */
    padding: 0 10px;
  }

  /* wichtig: wenn oben sticky ist, darf .mitte nicht "unter" die Leiste rutschen */
  .mitte{
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

/* ---------- Mobile Feinschliff ---------- */
@media (max-width: 720px){
  .frmIdeeAnzeigen{
    padding: .6rem;
    font-size: 17px;
  }

  

  
  .frmIdeeAnzeigen .widefat thead th,
  .frmIdeeAnzeigen .widefat tbody td{
    padding: .75rem .75rem;
  }

  .frmIdeeAnzeigen textarea{
    font-size: 1.1rem;
  }

  .frmIdeeAnzeigen input[type="submit"][class*="IdeenAbschicken_"]{
    width: 100%;
  }

  .Idee-context-menu__price{
    margin-left: 0;
  }
}


@media (max-width: 520px){
  #calendar{ border-spacing: 6px; }
  #calendar td{ padding: 8px; border-radius: 12px; }
  #calendar td.calendar_entry{ height: 48px; min-width: 40px; }
  #calendar a.calendar_link{ width: 34px; height: 34px; border-radius: 10px; }
  #calendar .calendar_head_month{ font-size: 1rem; }
}

@media (max-width: 520px){
  #calendar{ font-size: 15px; }
  #calendar td.calendar_entry img{ max-width: 3.1em; max-height: 3.1em; }
  #calendar textarea{ min-height: 120px; }
}


/* ANDROID/REAL MOBILE: Footer nicht zu durchsichtig */
@media (max-width: 999px){
  .footer_c.kt-fixed-footer,
  form#form1{
    background: rgba(125,105,210,.55) !important;  /* vorher .25 -> deutlich sichtbarer */
    border-top: 1px solid rgba(255,255,255,.22) !important;
  }

  /* Blur nur wenn verfügbar, sonst trotzdem solide */
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .footer_c.kt-fixed-footer,
    form#form1{
      -webkit-backdrop-filter: blur(6px) !important;
      backdrop-filter: blur(6px) !important;
    }
  }

  /* Fallback: wenn kein Blur, noch etwas weniger transparent */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .footer_c.kt-fixed-footer,
    form#form1{
      background: rgba(125,105,210,.70) !important;
    }
  }
}

/* =========================================================
   MOBILE: Footer nur so hoch wie Icons + Input
========================================================= */
@media (max-width: 999px){

  /* 1️⃣ Feste Höhe entfernen */
  form#form1{
    height: auto !important;
    max-height: none !important;
    padding: 8px 12px !important;
  }

  /* 2️⃣ Innencontainer war zu hoch */
  .kt-keyboard-inner{
    height: auto !important;
    padding: 6px 8px !important;   /* vorher viel zu groß */
    margin: 0 !important;
  }

  /* 3️⃣ Footer selbst kompakter */
  .footer_c.kt-fixed-footer{
   
    min-height: unset !important;
    padding: 0px 10px 0 10px !important
  }

  /* 4️⃣ Composer etwas enger */
  .kt-composer{
    gap: 8px !important;
  }

  /* 5️⃣ Input Höhe leicht reduzieren */
  .kt-input textarea{
    height: 40px !important;
    min-height: 40px !important;
    max-height: 80px !important;
  }

  /* 6️⃣ Sende-Button gleiche Höhe */
  .kt-send-btn{
    height: 40px !important;
    width: 40px !important;
  }

  /* 7️⃣ SelectBox gleiche Höhe */
  .kt-apps .SelectBox1{
    height: 40px !important;
    line-height: 40px !important;
  }
}



/* ===============================
   MOBILE
================================ */
@media screen and (max-width: 999px){

  .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{

      max-width: 90vw;
      max-height: 90vh;

      width: 90vw;
      height: auto;

      left: 50% !important;
      top: 50%;

    

 
      
  }

}

  /* ===============================
     MOBILE OPTIMIERUNG
  ================================ */
  @media (max-width: 768px) {
    .MasterLeiste { height: 68px; padding: 0 10px; }
    aside.columns { padding-top: 48px; height: calc(100vh - 48px); }
    
  }

  /* ===============================
   TOOLBAR ÜBER INPUT
=============================== */
.kt-toolbar{
  display: flex;
  gap: 8px;
  padding: 4px 6px 6px 6px;
  align-items: center;
}

/* einzelne Buttons */
.kt-tool-btn{
  width: 36px;
  height: 36px;

  border-radius: 50%;
  border: none;

  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);

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

  cursor: pointer;
  transition: 0.2s;
}

.kt-tool-btn:hover{
  background: rgba(255,255,255,.25);
  transform: scale(1.05);
}

/* Icons */
.kt-tool-btn img{
  width: 18px;
  height: 18px;
  object-fit: contain;
}