/* Spec 07: Mobile-Layout fuer den LSMaxx-Look. Eigene Datei statt Aenderung
   an den Original-CSS: oberhalb von 650px (XFs Narrow-Breakpoint, derselbe
   wie im LSMaxx-Toggle) aendert sich exakt nichts am Desktop-Look. Die Datei
   wird ueber _mobile.html als LETZTES Stylesheet nach den Inline-Styles der
   Templates eingebunden, damit gleiche Spezifitaet per Reihenfolge gewinnt;
   !important nur gegen style=""-Attribute im Markup (Thumbnails) und gegen
   !important-Regeln der Originale. Das zugehoerige Verhalten (Off-Canvas-
   Panel, Element-Umzuege in die m*-Slots, Header-Skalierung) liegt in
   3566d2b4_mobile.js ("Panel-Script"). */

/* Hamburger, Home-Button, Panel und Overlay existieren im Markup immer —
   sichtbar werden Hamburger und Home-Button nur im Mobile-Zweig unten. */
#mtoggle, #mhome, #mpanel, #moverlay { display: none; }
/* "+"-Dropdown in der Nav-Leiste (base.html): nur sichtbar, wenn das
   Panel-Script Frontpage+Feedback mangels Platz hineingeschoben und .mshow
   gesetzt hat (Mobile-Zweig unten). !important noetig, weil nav-style.css
   ".navglobal li { display:inline !important }" sonst sogar ein
   style=""-Attribut uebersteuern wuerde. */
#navmore { display: none !important; }

@media (max-width: 650px) {

/* ---------- Grundgeruest: 1170px-Wrapper aufloesen ---------- */
div#wrapper { width: auto; }
div#page { width: auto; float: none; padding-top: 46px; }
/* clear: die Nav-Buttons bleiben mobil als Floats in der Leiste (s.u.) —
   die auto-breite BFC-Box (overflow:hidden) wuerde sich sonst NEBEN sie
   quetschen statt darunter anzuschliessen. */
div#content { float: none; width: auto; overflow: hidden; clear: both; }
#main_content { width: auto; float: none; padding: 10px 8px; }
/* Die Sidebar behaelt ihre originalen 224px (alle Box-Hintergrundgrafiken
   sind darauf gebaut) und rutscht zentriert UNTER den Inhalt. */
#sidebar { float: none; width: 224px; margin: 0 auto; padding: 0 0 10px; }

/* ---------- Header: Die Desktop-Komposition (Kopf links, Sprechblase im
   Hintergrundbild, Banner darin) bleibt pixelgenau erhalten und wird als
   GANZES runterskaliert. Die Suche wandert unters Banner (s.u.), daher wird
   die Sprechblase rechts VOR der Suchbox-Grafik (beginnt bei x=591)
   abgeschnitten — Kopf und Schriftzug werden dadurch entsprechend größer.
   ::after setzt die letzten 5px des Originals (runde rechte Kante, oberhalb
   x=845 suchbox-frei) an die Schnittkante. Den exakten zoom-Faktor
   (Viewportbreite / 608) setzt das Panel-Script (mobile.js); der Wert hier
   ist nur der No-JS-Fallback. ---------- */
div#header { zoom: 0.6; width: 590px; overflow: hidden; position: relative; }
div#header::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 5px; background: url(9c9e8502_header.png) no-repeat right top; }
div.adbox-topbanner { display: none; }

/* ---------- Suche: wandert mobil aus dem Header in den Slot #msearch
   unterm Banner (Panel-Script) — volle Breite statt mitskaliert ---------- */
#msearch form#search fieldset { border: none; margin: 0 8px 12px; padding: 0; overflow: hidden; }
#msearch input.text { float: left; width: calc(100% - 78px); box-sizing: border-box; height: 22px; border: solid 1px #9b9796; padding: 1px 3px; margin: 0; }
#msearch input.submit { float: left; height: 18px; width: 68px; margin: 2px 0 0 6px; }

/* ---------- Nav-Leisten: bleiben in der Leiste oben (Desktop-Optik).
   Passen Frontpage+Feedback nicht mehr in die Zeile, schiebt sie das
   Panel-Script ins "+"-Dropdown #navmore und setzt .mshow — Markup-Muster
   und Grundregeln (absolutes Unter-<ul>, 150px) kommen aus nav-style.css
   (alte Galerie-Navigation), hier nur Sichtbarkeit + Nav-Farben
   (hellblau/dunkelblau statt dunkelblauem Original-Dropdown). ---------- */
#navmore.mshow { display: inline !important; }
/* Aufklappen nur per Tipp auf "+" (.open, Panel-Script) — das :hover der
   Original-Dropdowns ist auf Touch unzuverlaessig und flattert. */
#navmore > ul { display: none; }
#navmore.open > ul { display: block; left: auto; right: 0; margin-top: 30px; z-index: 1000000; background: #D9E2F2; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
/* Der gruene Hover-Verlauf der Original-Dropdowns (nav-style.css,
   !important) passt nicht zu den hellblauen Buttons — weiss wie
   "ul#nav li a:hover". */
#navmore ul a:hover { background: #FFFFFF !important; text-shadow: none; }
/* nav-style.css verkleinert Dropdown-Eintraege auf normal/12px (!important)
   — Frontpage+Feedback sollen aber genauso aussehen wie der Forum-Button
   daneben (bold 14px, "ul.navglobal a"). */
#navmore ul a { font-weight: bold !important; font-size: 14px !important; }

/* ---------- Notices-Sprechblase ---------- */
/* Desktop-Margins (ul 9px links, li 30px links, rechts jeweils 0) druecken
   die Blase mobil an den rechten Rand — stattdessen mittig mit 8px/Seite. */
ul#notices { width: auto !important; margin-left: 8px !important; margin-right: 8px !important; }
ul#notices li { margin-left: 0 !important; margin-right: 0 !important; }

/* ---------- Subnav (Profil-/Hallen-/Frontpage-Tabs) ---------- */
ul#subnav { width: auto; float: none; margin: 10px 8px 0; height: auto; overflow: hidden; }

/* ---------- Fusszeile ---------- */
div#footer { width: auto; float: none; overflow: hidden; }
div#footernav { float: none; overflow: hidden; }
div#footer ul { width: 46%; height: auto; margin: 0 2% 10px; border-right: none; box-sizing: border-box; }
div#footer div.left, div#footer span.right { float: none; width: auto; display: block; margin: 0 8px; }
/* Platz fuer LSMaxx-Toggle (unten links) und Chat/WT-Tabs (unten rechts) */
div#footer { padding-bottom: 52px; }
div#bannerbottom { width: auto; float: none; }
div#bannerbottom-wrap { width: auto; height: auto; }

/* ---------- Seitentitel ---------- */
h1.pagetitle { width: auto; display: block; }

/* ---------- Galerie-Grid: eine Spalte, Thumbs in voller Breite ---------- */
ul#itemlist { margin-left: 0; }
ul#itemlist li { width: 100%; height: auto; float: none; margin-left: 0; overflow: hidden; }
ul#itemlist li img.previewitem { width: 100% !important; height: auto !important; }
#itemlist hr.grey { width: auto; }
div.metainfo-small { width: 100%; height: auto; overflow: hidden; }
div.metainfo-small a.title, div.metainfo-big a.title { width: calc(100% - 70px); overflow: hidden; text-overflow: ellipsis; }
div.metainfo-small span.user-date, div.metainfo-big span.user-date { width: calc(100% - 70px); }

/* ---------- Item-Detailseite ---------- */
span.item_view { width: 100%; box-sizing: border-box; }
span.item_view img, span.item_view iframe, span.item_view video, span.item_view object { max-width: 100% !important; }
span.item_view img { height: auto !important; }
div.metainfo-big { width: 100%; height: auto; overflow: hidden; margin-bottom: 10px; }
div.metainfo-big div.ratingbox { float: left; clear: both; width: 100%; max-width: 330px; margin-top: 8px; }
object.video, iframe.video { width: 100%; }
div.joke { width: auto !important; }
/* Bewertungsbox (#box_itemdetails) wandert per Panel-Script in den Slot
   #mitem direkt unterm Bild; Breite = Sidebar-Design (Grafiken sind auf
   224px gebaut), zentriert. Die #sidebar-gescopten Tags-Regeln aus
   sidebar.css greifen dort nicht mehr — hier nachgezogen. */
/* span.item_view floatet (main.css) — ohne clear rutscht der Slot ins Bild */
#mitem { clear: both; }
#mitem #box_itemdetails { width: 224px; margin: 12px auto; }
#mitem .tags h2 { color: #1c4283; font-size: 16px; background: #FFFFFF; font-weight: bold; margin: 2px 0; }
#mitem .tags ul li a { font-weight: normal; }
/* main.css gibt div.pageselection eine feste height:30px — mit vielen
   Seitenlinks (4-stellige Seitenzahlen) umbricht die Zeile mobil und die
   zweite Zeile ueberlappt Breadcrumb bzw. Editor-Toolbar. */
.pageselection { width: auto !important; height: auto !important; }
/* Eine Fensterseite weniger (die am weitesten von der aktiven entfernte),
   damit die Zeile gar nicht erst umbricht: 6 statt 7 klickbare Nummern. */
.pageselection a.mnarrow { display: none; }

/* ---------- Foren-Listen ---------- */
ul#thread-list, ul#forum-list, ul#post-list { width: auto; }
ul#thread-list li { height: auto; overflow: hidden; }
ul#thread-list .last-post { position: static; display: block; margin-top: 4px; }
ul#forum-list li { height: auto; overflow: hidden; }
ul#post-list li { overflow: hidden; }
/* Bilder im Post-Inhalt nie breiter als der Textbereich */
ul#post-list .post-content img { max-width: 100%; height: auto; }
.online { margin-top: 10px; width: auto; }

/* ---------- Umfragen ---------- */
span.poll-option { width: 62%; }
li.public-votes { width: auto; }
span.poll-public-remark { width: auto; float: none; display: block; }

/* ---------- Kommentare (Item, Gaestebuch) ---------- */
ul.comments { width: auto; }

/* ---------- Reaction-Auswahl ---------- */
/* interactions_css setzt white-space:nowrap — auf schmalen Screens wird
   das Popup abgeschnitten. Wie XF mobil: horizontal fliessen lassen und
   erst an der vollen Viewportbreite (ca. 10px Rand pro Seite) umbrechen,
   umbrochene Zeilen zentriert. width:max-content noetig, weil der
   Positionierungskontext beim like-Link die schmale .options-Spanne ist —
   Shrink-to-fit wuerde die Icons sonst vertikal stapeln. */
.ls-popup { white-space: normal; width: max-content; max-width: calc(100vw - 20px); box-sizing: border-box; text-align: center; }

/* ---------- Formulare/Editor: volle Breite ---------- */
form#reply fieldset textarea, form#create_new fieldset textarea,
form#write_comment textarea, textarea#edittext { width: 100% !important; box-sizing: border-box; }
form#create_new input.text { width: 100%; box-sizing: border-box; }
form#write_comment { width: auto !important; }

/* ---------- Native Fragmente (PeLT-Konto, Feedback) ---------- */
.ls-fragment { overflow-x: auto; }

/* ---------- Profil ---------- */
div#infobar label { width: 120px; }
/* Options-Box wandert in den Slot #mprofile zwischen Profil-Info und
   Gaestebuch (Panel-Script): grosses Profilbild weglassen, gruener Rahmen
   bleibt gleich dick und wird samt Buttons auf volle Breite gestreckt —
   die 224px-Eckgrafiken (top/bottom.png) ersetzen border-radius-Ecken */
#mprofile #box_profile { margin: 0 0 12px; padding: 10px; background: #9cc42f; border-radius: 6px; }
#mprofile #box_profile div.photo { display: none; }
#mprofile ul#options { width: auto; margin: 0; background: #FFFFFF; border-radius: 4px; }

/* ---------- Dialoge (Reactions-Liste, Moderation): 420px-Box einpassen ---------- */
.ls-dialog { left: 10px; right: 10px; margin-left: 0; width: auto; max-width: 420px; }

/* Gast-Login-Popup wird aus dem Panel heraus geoeffnet (einloggen-Button in
   der Login-Box) — es muss UEBER dem Panel (z-index 10010) liegen. */
#loginpopup { z-index: 10011; }

/* ---------- Glocken-/Brief-Popup: die Popups wandern mit #box_login ins
   Panel. Dort klappen sie inline auf (statisch statt absolut) — das Panel
   hat einen transform, position:fixed wuerde darin sowieso nicht am
   Viewport haengen, sondern ueberlaufen. ---------- */
#mpanel #alertspopup, #mpanel #convpopup { position: static; width: auto; max-width: none; margin: 6px 4px 0; }

/* ---------- Hamburger + Home-Button + Off-Canvas-Panel (XF-Muster,
   LSMaxx-Optik; Markup in _mobile.html, Verhalten in mobile.js) ---------- */
#mtoggle, #mhome { display: block; position: fixed; top: 6px; left: 6px; z-index: 10005; width: 38px; height: 38px; background: #1C4284; border: 2px solid #98BBE5; border-radius: 6px; box-sizing: border-box; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
#mtoggle svg, #mhome svg { width: 18px; height: 18px; fill: #FFFFFF; margin-top: 8px; }
/* Home-Button rechts neben dem Hamburger (Issue #63): 6 + 38 + 6 */
#mhome { left: 50px; }
#mtoggle em { position: absolute; top: -7px; right: -8px; background: #cc0000; color: #FFFFFF; font: bold 10px Verdana, Arial, sans-serif; font-style: normal; line-height: 10px; padding: 2px 5px; border-radius: 9px; }
#moverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 10009; }
#mpanel { display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 272px; background: #FFFFFF; border-right: 2px solid #98BBE5; z-index: 10010; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; transform: translateX(-110%); -webkit-transform: translateX(-110%); transition: transform 0.2s ease; visibility: hidden; }
#mpanel.open { transform: translateX(0); -webkit-transform: translateX(0); visibility: visible; box-shadow: 3px 0 12px rgba(0,0,0,0.35); }
#mpanel .mp_head { background: #98BBE5; color: #FFFFFF; font: bold 13px Verdana, Arial, sans-serif; padding: 9px 12px; }
#mpanel .mp_head a { float: right; color: #FFFFFF; text-decoration: none; font-size: 16px; line-height: 13px; }
/* Login-Box im Panel: gleiche Box wie in der Sidebar, per zoom auf die
   Panelbreite (272px) hochskaliert — Boxgrafiken bleiben proportional */
#mp_user { padding: 8px 0; text-align: center; }
#mp_user #box_login { margin: 0 auto; float: none; text-align: left; zoom: 1.19; }
/* "#sidebar a.button_left { float:left }" (sidebar.css) greift im Panel
   nicht — ohne den Float staenden ausloggen/Einstellungen untereinander */
#mp_user #box_login a.button_left { float: left; }
/* Activity Stream + Neue Mitglieder zwischen Login-Box und Nav (Slot
   #mp_boxes): per zoom auf die Panelbreite hochskaliert (Gesamtbreite
   Stream 220px, Neue Mitglieder 224px) */
#mp_boxes #box_activitystream, #mp_boxes #box_newmembers { float: none; margin-left: auto; margin-right: auto; }
#mp_boxes #box_activitystream { zoom: 1.21; }
#mp_boxes #box_newmembers { zoom: 1.19; margin-top: 10px; }
/* "#sidebar div.avatar { float:left }" (sidebar.css) greift im Panel nicht
   — ohne den Float steht der Avatar UEBER dem Stream-Text statt daneben */
#mp_boxes div.avatar { float: left; }
#mp_boxes { padding-bottom: 12px; }

}

/* ---------- Sehr schmal (<348px): Neu/Trend/Hochladen/Forum/"+" passen
   selbst voll eingeklappt nicht mehr in die Zeile — bevor Forum und "+"
   umbrechen, schrumpfen die beiden 20px-Luecken vor und hinter dem
   Hochladen-Button (nav-style.css: margin-left von ul#contentcreation und
   ul#nav) fluid mit der Viewportbreite, bis auf den 1px-Minimalabstand der
   uebrigen Buttons. Anker 328px: pro fehlendem Viewport-Pixel gibt jede
   Luecke 1px her (zusammen das Doppelte des Defizits), ab 329px sind beide
   bei 1px. Erste Zeile = Fallback fuer Browser ohne clamp(). ---------- */
@media (max-width: 347px) {
ul#contentcreation, ul#nav { margin-left: 1px; margin-left: clamp(1px, calc(100vw - 328px), 20px); }
}