/************************* Styles *************************/


.my_head_big{
  font-size: 100px;
}

.col-white{
  color: white;
}

.col-white-trans{
  color: rgba(255,255,255,0.6)
}


.fnt{
  font-family: "Kanit", Sans-serif;
}



html, body {
  overflow: hidden;
  touch-action: none;
  height: 100%;
  margin: 0;
  padding: 0;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}



/************************* Styles *************************/




.container{
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 88%;
  overflow: hidden;
  border: 2px solid #333;  
  background: #fff;
}

/************************* Nav Icon *************************/
.container_nav{
  position: relative;
  margin: 0 auto;
  width: 95%;
  height: 5%;
  box-sizing: border-box;
}

.nav_wrapper{
  position: relative;
  float: left;
  width: 70px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.nav_wrapper:hover{
  cursor: pointer;
  transform: scale(1.1); /* leicht kleiner beim Klick */
}

.nav_wrapper img{
  position: relative;
  float: left;
  height: 100%;
}

.naklim_logo{
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 100%;
  z-index: 3;
}

.naklim_logo img{
  position: relative;
  float: left;
  width: auto;
  height: 100%;
}

.naklim_logo:hover{
  cursor: pointer;
  transform: scale(1.1);
}


/*

.svg_marker {
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg_marker svg {
  height: 100%;
  width: auto;
  display: block;
}
*/





/************************* Button *************************/
.bottom_container {
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  height: 8%; 
  text-align: center;
}
.project-button {
  background-color: #088aa1;
  color: white;
  border: none;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
}

.project-button:hover {
  background-color: #066b7c;
}

.project-button:active {
  transform: scale(0.95); /* leicht kleiner beim Klick */
  background-color: #055968; /* etwas dunkler beim Klick */
}

/************************* Button *************************/

.all_map_icons{

}

.map_graphics{
  position: absolute;
  margin-top: 0px;
}

.map_graphics:hover{
  cursor: pointer;
  margin-top: -10px;
}


@keyframes fadePulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

.map_graphics.pulsing {
  animation: fadePulse 1s infinite ease-in-out;
}




/* Sind als ID nötig wegen Jquery */
#asset_01{
    left: 4477px;
    top: 1488px;
}

#asset_02{ 
    left: 6930px;
    top: 487px;
}

#asset_03{
    left: 580px;
    top: 2840px;
}

#asset_04{
    left: 490px;
    top: 1810px;
}

#asset_05{
    left: 8680px;
    top: 4133px;
}

#asset_06{
    left: 7236px;
    top: 1565px;
}

#asset_07{
    left: 4596px;
    top: 3495px;
}

#asset_08{
    left: 6298px;
    top: 2019px;
}

#asset_09{
    left: 2388px;
    top: 2008px;
}

#asset_10{
  left: 5616px;
    top: 3598px;
}

#asset_11{
    left: 710px;
    top: 87px;
}

#asset_12{
    left: 1697px;
    top: 3398px;
}

#asset_13{
    left: 3699px;
    top: 3614px;
}

#asset_14{
left: 2248px; 
  top: 526px;
}

#asset_15{
    left: 5548px;
    top: 664px;
}




/************************* Notify Big Screen *************************/

.notify_big_wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:  -150%;
  z-index: 2000;

  display: flex;
  justify-content: center; /* horizontal zentriert */
  align-items: center;     /* vertikal zentriert */

  opacity: 1;
}
.notify_slide{
  top: 0%;
}

.notify_big_container{
  position: relative;
  margin: 0 auto;
  width: 600px;
  height: auto;
  border-radius: 20px 20px;
  background: rgba(218, 233, 157, 1);
  text-align: center;
  padding: 50px;
}


.notify_big_container p{
  padding: 50px;
  color: #88935b;
  line-height: 32px;
  font-size: 20px;
  padding-bottom: 20px;
}

.notify_big_container img{
  width: 200px;
}





.notify_button{
  background-color: #98a7d4;
  padding: 15px 20px;
  border-radius: 8px;
  margin: 12px auto;
  width: 50%;
  box-sizing: border-box;
  color: #eaedf6;
  font-weight: bold;
  cursor: pointer;
  border: 0px;
  margin-top: 30px;
}

.notify_button:hover {
  background-color: white;
  color: #4e5772;
  transform: scale(1.02);
}


.notify_button_2{
  background-color: #e8f5b3;
  padding: 15px 20px;
  border-radius: 8px;
  margin: 12px auto;
  width: 50%;
  box-sizing: border-box;
  color: #a8b572;
  font-weight: bold;
  cursor: pointer;
  border: 0px;
  margin-top: 30px;
}

.notify_button_2:hover {
  background-color: #bbc885;
  color: #f7ffd4;
  transform: scale(1.02);
}

.notify_button_3{
  background-color: #e8f5b3;
  padding: 15px 20px;
  border-radius: 8px;
  margin: 12px auto;
  width: 50%;
  box-sizing: border-box;
  color: #a8b572;
  font-weight: bold;
  cursor: pointer;
  border: 0px;
  margin-top: 30px;
}

.notify_button_3:hover {
  background-color: #bbc885;
  color: #f7ffd4;
  transform: scale(1.02);
}



/************************* Small Notify Bar *************************/

.small_notify_wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:  -150%;
  z-index: 1000;

  display: flex;
  justify-content: center; /* horizontal zentriert */
  align-items: center;     /* vertikal zentriert */
}

.small_notify_container{
  position: relative;
  margin: 0 auto;
  width: 570px;
  height: auto;
  border-radius: 20px 20px;

  text-align: center;
  padding: 70px;
  background: #bfd0ff;

  -webkit-box-shadow: 5px 5px 11px 1px rgba(0,0,0,0.2);
  box-shadow: 5px 5px 11px 1px rgba(0,0,0,0.2);
}

.small_notify_container p{
    line-height: 32px;
    color: #7180ae;
    font-size: 20px;
}

.small_notify_container b{
  display: inline-block;
  margin-bottom: 0.5em; 
}

.small_notify_slide{
  top: 0%;
}




/************************* Small Start Bar *************************/

.small_start_wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:  0%;
  z-index: 1000;

  display: flex;
  justify-content: center; /* horizontal zentriert */
  align-items: center;     /* vertikal zentriert */
}

.small_start_container{
  position: relative;
  margin: 0 auto;
  width: 570px;
  height: auto;
  border-radius: 20px 20px;

  text-align: center;
  padding: 70px;
  background: rgba(218, 233, 157, 1);

  -webkit-box-shadow: 5px 5px 11px 1px rgba(0,0,0,0.2);
  box-shadow: 5px 5px 11px 1px rgba(0,0,0,0.2);
}

.small_start_container p{
  padding: 50px;
  color: #6e7848;
  line-height: 32px;
  font-size: 20px;
  padding-bottom: 20px;
}

.small_start_container b{
  display: inline-block;
  margin-bottom: 0.5em; 
}

.small_start_slide{
  top: -150%;
}





/************************* Question Bar *************************/


.team_question_marker{
  position: absolute;
  width: 90px;
  height: 90px;

  background-image: url('https://naklim.de/wp-content/themes/oceanwp/kimMapFiles/icons/question_marker.svg'); /* dein Bild */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 1;
}

.team_question_marker:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.team_question_marker:active {
  transform: scale(0.5); /* leicht kleiner beim Klick */
  cursor: pointer;
}


.team_question_marker .team_question_content{
  display: none;
}


/******* Temp *******/


.full_question_wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: -200%;
  z-index: 1;

  display: flex;
  justify-content: center; /* horizontal zentriert */
  align-items: center;     /* vertikal zentriert */
}

.slided_in0{
  top: 0%;
}

.position_question_wrapper{
  position: relative;
  margin: 0 auto;
  width: 40%;
  max-width: 800px;
  height: auto;
  background: rgba(218, 233, 157, 0.97);
  border-radius: 50px 50px;
}


.team_question_container{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
}

.team_question_title_TEMP{
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 20px;
    color: #909b65;
}

.team_question_info_TEMP{
  line-height: 25px;
  color: #a0a97a;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}




.team_question_button_TEMP {
      background-color: #C3D18A;
      padding: 15px 20px;
      border-radius: 8px;
      margin: 12px auto;
      width: 100%;
      box-sizing: border-box;
      color: #f7fce4;
      color: #818b5a;
      font-weight: bold;
      cursor: pointer;
      border: 0px;
      text-align: left;
    }


.teamQ_selected_hover {
  background-color: #F8FFDB;
  color: #A2AB77;
  transform: scale(1.02);
}


.teamQ_selected_right {
    background-color: #92ce8e;
    color: #c1ffbd;
}

.teamQ_selected_wrong {
background-color: #e0a1a1;
    color: #895151;
}




/************************* SIDE BAR *************************/


.full_side_bar_wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  right: -100%;
  /*background: rgba(39, 61, 119, 0.25);*/
}


.side_bar{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%; /* default open */
  height: 90%;
  overflow: hidden;
  background: rgba(38, 60, 118, 0.97) !important;
  z-index: 1;

  border-top-left-radius: 50px 50px;

  max-width: 700px;
  min-width: 500px;
}

.side_bar_inside{
  padding: 50px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  padding-right: 20%;
  overflow-y: scroll;



}

.side_bar_open{
  right: 0%;
}



/************************* Map Navigations Menü *************************/

.my_nav_style{
  position: relative;
  float: left;
  width: 100px;
  padding: 15px;
  background: #987;
  border: 2px solid #456;
}


.healthbar_container{
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 20;
}

.healthbar_container img{
  position: relative;
  float: left;
  height: 60px;
  margin-top: -10px;
  z-index: 22;
}


.healthbar{
  position: relative;
  float: left;
  width: 300px;
  height: 30px;
  background: #c6d192;
  -webkit-box-shadow: 5px 5px 11px 1px rgba(0,0,0,0.2);
  box-shadow: 5px 5px 11px 1px rgba(0,0,0,0.2);
  border: 4px solid #DDE8A5;
  margin-left: -10px;

  z-index: 20;
}

.healthbar_inside{
  position: absolute;
  left: 0;
  top: 0;
  width: 0px;
  height: 100%;
  background: #7b894a;
}

.healthbar_inside_2{
  position: absolute;
  left: 0;
  top: 0;
  width: 0px;
  height: 100%;
  background: white;
}


.healthbar_getpoints_container{
    position: absolute;
    left: -100%;
    top: 100px;
    width: auto;
    height: auto;
    background: #3a4b7e;
    color: #b9c8f3;
    z-index: 1;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

    font-family: 'Kanit', sans-serif;
    font-size: 20px;
}



/************************* PROJECTS *************************/

.project_title_TEMP{
  position: relative;
  float: left;
  width: 100%;

}

.project_title_TEMP h1{
  font-size: 50px;
  line-height: 50px;
  margin-bottom: 50px;
  color: #fff;
}

.project_info_TEMP{
  position: relative;
  float: left;
  width: 100%;
  
  line-height: 32px;
  color: #a3b0d0;
  font-size: 20px;
  font-weight: 700;
}


.project_info_TEMP .wp-block-image{
    width: 100%;
    margin: 0;
    margin-top: 30px;
    margin-bottom: 30px;
}

.project_info_TEMP .wp-block-image img{
    width: 100% !important;
    height: auto;
    border-radius: 6%;
}

.wp-block-video{
    width: 100%;
    padding: 0px;
    margin: 0px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.wp-block-video video{
    border-radius: 20px;
    width: 100%;
}


.wp-block-audio{
    width: 100%;
    padding: 0px;
    margin: 0px;
    margin-bottom: 30px;
    margin-top: 30px;
}

.wp-block-audio video{
    width: 100%;
}




.project_image_TEMP img{
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  border-radius: 6%;
  object-fit: cover;
  margin-bottom: 30px;
}

.project_mapicon_TEMP{
  position: absolute;
  right: 20px;
}

.project_mapicon_TEMP img{
  width: 80px;
}





.project_question_wrapper{
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  margin-top: 30px;
}

.project_question_wrapper h1{
    font-size: 35px;
    line-height: 44px;
    margin-bottom: 20px;
    color: #fff;
    font-family: 'Kanit', sans-serif;
}


.project_question_button {
      text-align: left;
      background-color: #6E88CC;
      padding: 20px 20px;
      border-radius: 8px;
      margin: 12px auto;
      width: 100%;
      box-sizing: border-box;
      color: white;
      font-weight: bold;
      cursor: pointer;
      border: 0px;
    }


    .selected_hover {
      background-color: #BED0FF;
      color: #3B4F83;
      transform: scale(1.02);
    }


.selected_right {
  background-color: #C4D483; /* Grün als Beispiel */
  color: #56612b;
}

.selected_wrong {
    background-color: #eb95ad;
    color: #794242;
}



/************************* Create New Project *************************/

.create_new_project_container{
  position: absolute;
  bottom: -80%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 80%;
  max-width: 1000px;
  background: rgba(6, 140, 164, 0.97);
  z-index: 1;
  overflow: scroll;

  -webkit-border-top-left-radius: 40px;
  -webkit-border-top-right-radius: 40px;
  -moz-border-radius-topleft: 40px;
  -moz-border-radius-topright: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

.side_bar_openB{
  bottom: 0%;
}







/*******************+ formula **********************/

.form_container{
  padding: 70px;
  padding-bottom: 200px;
}

.form_container h1{
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 50px;
    color: #e2f8fd;
}

.form_container p{
  position: relative;
  float: left;
  width: 100%;
  padding-bottom: 20px;

  line-height: 32px;
  color: #b3d5dc;
  font-size: 20px;
  font-weight: 700;
}

.form_container .form_agb{
  line-height: 32px;
  color: #b3d5dc;
  font-size: 20px;
  font-weight: 700;

}

.extra_padding{
  padding-top: 50px;
}




.form_container input[type="text"],
.form_container textarea {
  width: 100%;
  padding: 15px;
  background: #0C748D;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
  box-sizing: border-box;
  resize: none;
  letter-spacing: normal;
}

input[type="file"] {
  display: none;
}

.form_container input::placeholder {
  color: #fff;
  opacity: 0.5;
}

.form_container textarea::placeholder {
  color: #fff;
  opacity: 0.5;
}

.styled_select {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: none;
  border-radius: 10px;
  /*border: 2px solid #0f748d;*/
  background-color: #0C748D;
  color: #91b9c7;
  font-size: 18px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%20fill%3D'white'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M4%206l4%204%204-4'%20stroke%3D'white'%20stroke-width%3D'2'%20fill%3D'none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.styled_select:focus {
  outline: none;
  color: #fff;
}


.file_label {
  background: #0C748D;
  padding: 12px 20px;
  display: inline-block;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 30px;
  font-size: 18px;
  color: #aee1e8;
  /*border: 2px solid #0f748d;*/
}

.submit_button {
  float: right;
  background: #8de2f2;
  color: white;
  padding: 15px 40px;
  font-weight: bold;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 18px;
}

.submit_button:hover {
  background: #6ed0e5;
}


input[type="checkbox"] {
  accent-color: #8ee2f2; /* deine Wunschfarbe */
}



.checkboy_label{
  position: relative;
  float: left;
  width: 100%;
  margin-top: 10px;
}

 .checkbox_box{
    position: relative;
    float: left;
    width: 8%;
  }

  .checkbox_text{
    position: relative;
    float: left;
    width: 92%;
  }


.form_button:hover{
  background: #094351 !important;
}


.g-recaptcha{
  margin-top: 80px;
}



/************************* MAP *************************/


.wrapper{
  position: absolute; 
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 1;
}

.wrapper_alpha{
  opacity: .5;
}






/* Google Scroll Map */
.map_wrapper {
    overflow: hidden; /* oder scroll */


  width: 100%;
  height: 100%;

  /* karten Größe */
  min-width: 9240px;
  height: 4513px;

  position: absolute;

  background: #f3f7fa;

  

}

  .map_wrapper {
    position: absolute;
    left: 0;
    top: 0;
    touch-action: none !important;
    overflow: hidden;
    }

  .map_is_listMode{
    min-width: 100%;
    left: 0px !important;
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    /* hier - das passt er nimmt immer das volle an */
    
    height: auto;
    padding-bottom: 200px;
  }




  .map_wrapper.map_is_listMode {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* für iOS weiches Scrollen */
    touch-action: auto !important;
  }


.map_img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;

  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;

}







/********* MARKER *********/


.map_marker .project_image,
.map_marker .projcet_container_right{
  display: none;
}



.map_marker{
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%; 
  will-change: transform;
  z-index: 1;
}

.map_marker img{
  width: 80px;
}


.map_marker:hover {
  cursor: pointer;
}


.question{
  position: absolute;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  padding: 25px;
  right: -40px;
  top: -20px;



  background-image: url('https://naklim.de/wp-content/themes/oceanwp/kimMapFiles/icons/project_marker_notify.svg'); /* dein Bild */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}




/******************* Wenn Listen Modus *********************/




.map_marker.is_listMode{
  position: relative;
  margin: 50px auto 0 auto; /* margin-top 50px + auto horizontal */
  left: 0px !important;
  top: 0px !important;
  width: 70%;
  max-width: 1000px;
  height: 290px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #d2d2d2;
  border-radius: 30px;
  background: #d6dce0;
}

.map_marker:hover{
  scale: 1.05;
}


/***** Wenn Listen Projekt angeklickt wird ****/
.map_marker.is_listMode.list_open {
  height: 800px;
}


.projcet_container_right{
  position: relative;
  float: left;
  width: 60%;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}

.projcet_container_right_open{
  width: 100%;
}


.projcet_container_right .wp-block-image{
  margin: 0px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.projcet_container_right .wp-block-image img{
  width: 100% !important;
  height: auto;
  border-radius: 15px;
}

.project_image{
  position: relative;
  float: left;
  width: 40%;
  height: 100%;
  overflow: hidden;
}

.project_image img{
  
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}


.project_image_open{
  width: 100% !important;
  height: 300px !important;
}

.project_info{
  position: relative;
  float: left;
  width: 100%;
  height: 90%;
  overflow: hidden;
  box-sizing: border-box;

  line-height: 25px;
  margin-top: 13px;
  color: #425f64;
  
  padding-right: 110px;
  padding-bottom: 100px;
}



.project_title{
  position: relative;
  float: left;
  width: 70%;

  font-size: 25px;
  line-height: 30px;
}

.germany_mapState{
  position: absolute;
  right: 50px;
  z-index: 1;
}

.germany_mapState img{
  width: 60px;
}

.project_more_link{
  position: relative;
  float: left;
  width: 80%;
  background: blue;
  margin-top: 20px;
}


.project_bottom_fade{
  position: absolute; /* oder relative, je nach Layout */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px; /* Höhe des Fade-Effekts */
  background: linear-gradient(to top, white 40%, transparent 100%);
  pointer-events: none; /* sorgt dafür, dass man durchklicken kann */
}





/********* KOORDINATEN *********/

.cordinates {
  position: fixed;
  bottom: 20px;
  left: 10px;
  color: #088aa1;
  padding: 5px 10px;
  z-index: 100;
}


/********* DRAG & DROP *********/


.drag_container {
  width: 100px;
  height: 100px;
  background-color: transparent; /* wichtig */
  position: absolute;
  left: 200px;
  top: 500px;
  cursor: grab;
  border-radius: 0; /* optional, aber klarstellen */
  box-shadow: none !important;
}


.civ_shadow {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://naklim.de/wp-content/themes/oceanwp/kimMapFiles/icons/map_project_marker.svg'); /* dein Bild */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0);
  transition: all 0.1s ease;

  -webkit-user-drag: none;
  user-select: none;
}

.civ_shadow_circle {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  filter: blur(2px);
  z-index: 0;
}

.civ-dragged .civ_shadow {
  transform: translateY(-30px);
}
.civ-dragged .civ_shadow_circle {
  background: rgba(0, 0, 0, 0.3);
}

.drag_fallen{
  top: 300px;
}


/*******************/
.not_selectable{
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

img {
  user-select: none;        /* verhindert Text- und Bildauswahl */
  -webkit-user-drag: none;  /* verhindert Drag in WebKit-Browsern */
  pointer-events: auto;     /* optional – falls Interaktion gewünscht */
}