/*
  Responsive-Anpassungen fuer alle Styles (wird auf jeder Seite nach <head> geladen).
  - Handy/Tablet (bis 900px): Spalten untereinander, Chat zuerst, nichts laeuft ueber.
  - Breitbild (ab 1600px, z.B. 16:9 / 16:10 / 21:9): breitere Seitenleisten, groessere Schrift.
  Die Regeln nutzen !important, weil die Style-CSS danach geladen wird.
*/

/* ---------- Grundlage fuer alle Geraete ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}
#ctcol {
  overflow-x: auto;       /* breite Tabellen scrollen in der Mitte statt die Seite zu sprengen */
}


/* ---------- Chatraum: Eingabezeile und Button-Leiste ---------- */
#text_input_div {
  height: auto !important;          /* waechst mit, statt Buttons abzuschneiden */
  overflow: visible !important;
  padding: 6px 6px 4px !important;
  box-sizing: border-box;
}
#text_container {
  display: flex !important;
  align-items: center;
  gap: 6px;
  height: auto !important;
  padding: 0 !important;
}
#text_petition {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  width: auto !important;
  float: none !important;
  min-width: 0;
}
#text_input {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  height: 30px !important;
  padding: 0 8px !important;
  box-sizing: border-box;
}
#text_petition .sebutton {
  flex: 0 0 auto;
  height: 30px;
  margin: 0 !important;
  padding: 0 14px !important;
}
#scrollSwitch {
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  float: none !important;
}
#controls_container {
  display: flex !important;
  flex-wrap: wrap;                   /* bei Platzmangel neue Zeile statt Ueberlauf */
  align-items: center;
  gap: 6px;
  height: auto !important;
  padding: 6px 0 0 !important;
}
#controls_container > select,
#controls_container > .sebutton,
#controls_container > button {
  margin: 0 !important;
  height: 26px;
  box-sizing: border-box;
}
#controls_container > .sebutton,
#reloadform > .sebutton {
  padding: 0 10px !important;
}
#reloadform {                          /* Formular um "Neu laden" verhaelt sich wie ein Button */
  display: inline-flex;
  margin: 0;
  padding: 0;
}
#reloadform > .sebutton {
  margin: 0 !important;
  height: 26px;
  box-sizing: border-box;
}
#controls_container .ctrl_icons,
#controls_container .ctrl_right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#controls_container .ctrl_right {
  margin-left: auto;                 /* Moderator-Ruf und Leeren ganz rechts */
}
#controls_container .icon_button {
  float: none !important;
  margin: 0 !important;
  min-width: 18px;
  height: 18px;
  background-position: center !important;
}


/* ---------- Profil: Zeile "Rang" ---------- */
/* Alle Styles hatten hier hellen Hintergrund (#eeeeff) bei weisser Schrift -> unlesbar.
   Durchscheinend hervorheben, damit die Schriftfarbe des jeweiligen Styles lesbar bleibt. */
#p_userbar .lvl {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px dashed rgba(204, 204, 204, 0.55) !important;
  padding: 3px 4px 5px !important;
}
#p_userbar .lvl p {
  color: inherit !important;
}


/* ---------- Breitbild-Monitore ---------- */
@media (min-width: 1600px) {
  #colwrapper { width: 96% !important; }
  #ltcol, #rtcol { width: 220px !important; }
  .acenter   { margin: 0 230px !important; }
  .acenternr { margin: 0 0 0 230px !important; }
  .acenternl { margin: 0 230px 0 0 !important; }
  .lcenter   { margin: 0 0 0 230px !important; }
  .rcenter   { margin: 0 230px 0 0 !important; }
  body { font-size: 105%; }
}

@media (min-width: 2400px) {          /* 21:9, 4K und groesser */
  #ltcol, #rtcol { width: 280px !important; }
  .acenter   { margin: 0 290px !important; }
  .acenternr { margin: 0 0 0 290px !important; }
  .acenternl { margin: 0 290px 0 0 !important; }
  .lcenter   { margin: 0 0 0 290px !important; }
  .rcenter   { margin: 0 290px 0 0 !important; }
  body { font-size: 115%; }
}


/* ---------- Tablets und Handys ---------- */
@media (max-width: 900px) {
  #colwrapper { width: 100% !important; padding: 0 6px; box-sizing: border-box; }

  /* Spalten untereinander: Chat/Inhalt zuerst, Seitenleisten darunter */
  #cont { display: flex !important; flex-direction: column; }
  #ctcol { order: 1; }
  #ltcol { order: 2; }
  #rtcol { order: 3; }
  #ltcol, #rtcol {
    float: none !important;
    display: block !important;
    width: auto !important;
    padding: 5px 0 !important;
  }
  .acenter, .acenternr, .acenternl, .acenternb,
  .lcenter, .rcenter, .ccenter {
    margin: 0 !important;
  }

  /* Kopfzeile: Titel umbrechen statt abschneiden */
  .pgheader { height: auto !important; overflow: hidden; }
  .pgheader h1 { float: none !important; font-size: 20px !important; line-height: 1.3; padding-left: 6px !important; }

  /* Hauptmenue: Punkte nebeneinander umbrechen, Untermenues klappen nach unten auf */
  .hdnav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    height: auto !important;
    padding: 4px 0 !important;
  }
  .hdnav .left, .hdnav .right {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .hdnav .left  { flex: 1 1 100%; align-items: flex-start; }
  .hdnav > ul > li:has(> ul[style*="block"]) { flex-basis: 100%; } /* offenes Untermenue volle Breite */
  .hdnav .right { flex: 1 1 100%; }
  .hdnav > ul > li {
    float: none !important;
    width: auto !important;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .hdnav > ul > li > a {
    padding: 8px 4px !important;     /* groessere Tippflaeche */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hdnav ul ul {
    position: static !important;     /* Untermenue schiebt den Inhalt nach unten statt ueberzulappen */
    width: 100% !important;
  }
  .hdnav ul ul li { width: auto !important; float: none !important; }
  .hdnav ul ul a { padding: 8px 6px !important; }

  /* Chatverlauf: feste Hoehe passend zum Bildschirm */
  #content { height: 60vh !important; min-height: 260px; }

  /* Elemente mit fester Breite an den Bildschirm anpassen */
  .form_con, .forms_con, .minibox3, .popup, .tlist, .item_detail, .itemdesctr,
  .min_login_page #main-bg, #imageholder_large, .norm p, .reply-message-box textarea,
  #smilielist .smilelist, table {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  img { max-width: 100% !important; }
}

@media (max-width: 600px) {
  /* 16px verhindert das automatische Hineinzoomen bei Eingabefeldern (iOS) */
  input, select, textarea, button { font-size: 16px !important; }
  #content { height: 55vh !important; }
  .sebutton, .navbutton { padding: 6px 10px; margin: 2px; }
  #text_input, #text_petition .sebutton { height: 38px !important; }
  #controls_container > select,
  #controls_container > .sebutton,
  #controls_container > button,
  #reloadform > .sebutton { height: 34px; }
  #controls_container > select { flex: 1 1 40%; min-width: 0; }
  #controls_container .icon_button { min-width: 28px; height: 28px; }  /* groessere Tippflaeche */
  #controls_container .ctrl_icons { gap: 10px; }
}

/* Handy quer: wenig Hoehe */
@media (max-height: 500px) and (orientation: landscape) {
  #content { height: 50vh !important; min-height: 180px; }
}