/* allgemein */

*::-webkit-scrollbar{display: none;}
*{box-sizing: border-box;font-family: sans-serif;}

body, html {
  background-color:#222;
  margin:0px;
  padding:0px;
  color:#dddddd;
  margin: 0;
  padding: 0;
  height: 100%;
  /* overflow-y: hidden; */
}
.ht{font-style:italic;}

a{color:cyan;text-decoration:none;/*user-select:none;*/}
a.hover{text-decoration:underline;}
a.black{color:black;}
.r{float:right;}
.l{float:left;}
.nowrap{white-space:nowrap;}

/* /allgemein */

/* Hauptteil */
#alles,#oben
{
  width:100%;
  max-width:1800px;
  margin:auto auto;
}
  /* ToDo: Fehler hier suchen, warum -20px! */
#alles{height: calc(100% - 10px);}

.blink_button{display:block;z-index:90000;height:43px;position:absolute;bottom:10px;right:20px;cursor:pointer;background-color:#222;color:cyan;border:1px solid cyan;border-radius:5px;padding:5px;font-size:30px;}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  padding-top: 85px; /* Platz für oben und Navigation */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.box {
  flex: 1; /* Gleichmäßige Verteilung des verfügbaren Platzes */
  height: 100%;
  overflow-y: auto;
  padding: 5px;
  position:relative;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  scroll-margin-top: 100px;
}

form{display:inline;}
select,input,button{padding:5px;cursor:pointer;}
hr{height:0px;border-bottom:1px solid grey;}

/* /Hauptteil */

/* Header */
#header{padding:10px;}
#oben {
  position: fixed;
  padding:0px;
  z-index: 100;
}

#nav {
  clear:both;
  text-align: center;
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  margin-top:5px;
}

#nav a {
  color:rgb(160, 255, 255);
  width:100%;
  padding: 5px 0px 5px 0px;

  /* kein Überlaufen: */
  max-width:100%;
  white-space:nowrap;
  overflow-y:hidden;
  text-overflow:ellipsis;
}

.button{background-color:#fff;color:#000;border:1px solid black;border-radius:3px;padding:5px;}
#logo{height: 23px;margin-right:10px;float:left;}
.button_oben,#logo{display: flex; justify-content: center;align-items: center;user-select: none;margin-left:5px;cursor:pointer;color:cyan;width:30px;height:30px;border:1px solid grey;border-radius:50%;padding:5px;font-size:15px;}
.button_oben{float:right;}
#ueb{display:block;white-space:nowrap;overflow-y:hidden;margin-top:5px;width:calc(100% - 200px);text-overflow:ellipsis;}
#suchfeld{width:calc(100% - 200px);padding:1px;margin-top:2px;font-size:15px;}
/* /Header */


#malert_head{background-color:#000;}
#malert_headline{color:cyan;}
#malert_x{color:cyan;border:1px solid grey;border-radius:5px;padding:5px;}
#malert_inhalt{background-color:#222;color:#dddddd;padding:10px;max-height:calc( 100vh - 180px );}
#malert_innen{top:40px;}
#toast{z-index:10000;}

#msg_badge{float:right;margin-left:-10px;display:flex;justify-content:center;align-items:center;border-radius:50%;width:12px;height:12px;font-size:11px;background-color:red;color:white;}

/* Sonstiges  */
#new_post_textarea{background-color:#555555;color:white;margin-bottom:5px;}

.msg{padding:5px;border:1px solid rgb(0, 60, 60);border-bottom:2px solid cyan;cursor:pointer;margin-bottom:5px;user-select: none;}
.lh{line-height:150%;}

.t{
  position: relative; /* Notwendig für die absolute Positionierung des ::after Elements */
line-height:150%;
overflow-y:hidden;
/* text-overflow:ellipsis; */
/* Besser:clamp */
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
/* Schatten: */
.t::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 15px;
  background: linear-gradient(to bottom, transparent, #222 50%);
  opacity: 0; /* Standardmäßig unsichtbar */
}
.t.kurz::after {
  opacity: 1; /* Sichtbar, wenn die Klasse "gekürzt" vorhanden ist */
}

h1{line-height:40px;font-size:25px;margin:0px;display:inline;}
h3{margin:0px;line-height:25px;} /* für rechts*/

#progress_bar{display:none; padding:5px;height:50px;color:white;width:0%; height:50px;background-color:green;}

.post_legende{font-size:17px;margin:5 0 0 0;display:block;}
.btn{box-sizing:content-box;height:21px;float:left;cursor:pointer;margin-right:10px;margin-bottom:5px;background-color:#222;color:cyan;white-space:nowrap;user-select:none;border:1px solid grey;border-radius:5px;padding:5px;}
.btn.last{margin-right:0px;float:right;font-size:12px;border:0px solid red;height:10px;margin-top:12px;}

#mein_post_bereich,.mein_antwort_bereich{padding:3px;background-color:white;color:black;font-size:12px;}
.mein_post{border:1px solid blue;padding:5px;}
.msg_aktiv{border-color:red !important;}

.yt_link { position: relative; display: inline-block;width:100%;margin-bottom:5px;}
.yt_playbutton{
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: url(/playbutton.jpg) no-repeat center center;
}

.antworten{border-left:1px solid cyan;padding-left:5px;}
.antwort{padding:10px;padding-left:5px;scroll-margin-top: 100px;}
.blink_antwort{background-color:red;}
.nowrap{white-space:nowrap;}

.msg_bild,.msg_bild_gross
{
margin:0px;
margin-bottom:5px;
height: 100px;
overflow: hidden;
background-size: cover;
background-position: 50% 50%;
}
.msg_bild_gross
{
height: 600px;
max-height:70%;
}

.voting_tab{border-collapse: collapse;margin-top:20px;}
.voting_tr{cursor:pointer;user-select: none;}
.voting_link{color:cyan;padding:5px;}
.voting_erg{width:50%;padding:5px;font-size:12px;}
.voting_balken{display:inline-block;float:left;background-color:cyan;margin:0px 3px 3px 0px;}

@media(max-width: 800px)
{
  .box {
    flex: 0 0 100%; /* Standardmäßig volle Breite für mobile Ansicht */
  }
  #oben #nav a.active {
    color:cyan;
    border-bottom: 2px solid cyan;
  }

}