/* =========================================================
   Golden Hour – Mobile / Responsive   (muss ALS LETZTES laden)
   Alle Regeln in @media-Bloecken -> Desktop (>1000px) unberuehrt.
   ========================================================= */
@media (max-width: 1000px){
  #container{ min-width:0; }
  #content{ padding:16px 0; }
  .shell{ padding:0 8px; }
  .hero-outer{ padding:12px 8px 0; }
  .htab{ padding:0 8px; }
  .htab-panel{ padding:14px 12px; }
  .hcol-box{ padding:12px 11px 14px; }
  #totopscroller{ display:none; }
  .railbar{ display:none; }

  .tabnav{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .tabnav > a, .tabnav > .box{ width:auto; min-width:0; margin:0; padding:12px 4px 11px; font-size:9px; letter-spacing:0; line-height:1.14; text-align:center; clip-path:polygon(0 100%, 6px 0, calc(100% - 6px) 0, 100% 100%); }
  .tabnav > .box > a{ font-size:9px; letter-spacing:0; padding:0; }

  .hero .wordmark:not(.ganz){ display:block; position:absolute; top:auto; bottom:0; left:0; right:0; width:auto; padding:30px 16px 12px; z-index:4; background:linear-gradient(to top, rgba(16,20,31,.94), rgba(16,20,31,.5) 52%, rgba(16,20,31,0)); }
  .hero .wordmark .wm-teil{ display:block; width:auto; max-width:100%; white-space:normal; }
  .hero .wordmark .wm-links{ font-size:1.55rem; line-height:1.04; }
  .hero .wordmark .wm-rechts{ font-size:.92rem; margin-top:3px; }

  .infogrid{ grid-template-columns:1fr; }
  .hcol-body{ max-height:none; }
  .hcol > h3{ letter-spacing:.08em; }
  .hcols{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; gap:10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
  .hcols > .hcol{ flex:0 0 87% !important; grid-column:auto !important; scroll-snap-align:center; display:flex; flex-direction:column; }
  .hcols > .hcol .hcol-box{ max-height:300px; overflow-y:auto; }

  /* Foren-/Themenzeilen als KARTE wie altes TL-Mobil */
  .board{ display:flex !important; flex-direction:column; position:relative; height:auto !important; min-height:0; padding:0; gap:0; overflow:hidden; }
  .board .main{ display:contents; }
  .board .stats{ display:contents; }
  .board .thumb{ position:absolute; top:6px; right:8px; width:auto; height:auto; z-index:3; transform:scale(.42); transform-origin:top right; }
  .board .main h3{ order:1; margin:0 !important; padding:12px 44px 9px 14px; font-size:1.12rem; line-height:1.15; border-bottom:1px solid var(--line); }
  .board .main h3::first-letter{ font-size:1em; }
  .board .lastpost{ order:2; display:flex !important; align-items:center; gap:10px; padding:10px 14px !important; width:auto !important; border:0 !important; margin:0 !important; text-align:left; }
  .board .lastpost .lp-ava{ order:-1; flex:0 0 auto; width:36px !important; height:36px !important; }
  .board .lastpost .lp-ava img{ width:36px !important; height:36px !important; object-fit:cover; }
  .board .lastpost > div:first-child{ flex:1 1 auto; min-width:0; text-align:left; }
  .board .lastpost .lp-title{ display:block; font-size:.92rem; margin:0; }
  .board .lastpost .lp-meta{ display:block; font-size:.72rem; margin-top:1px; }
  .board .counts{ display:none !important; }
  .board .main p{ order:3; margin:0 !important; padding:0 14px 10px; font-size:.85rem; }
  .board .subs{ order:4; padding:0 14px 12px !important; margin:0 !important; border:0 !important; display:flex; flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; gap:6px; align-items:flex-start; align-content:flex-start; height:auto !important; min-height:0 !important; }
  .board .subs a{ flex:0 0 auto !important; align-self:flex-start !important; height:auto !important; min-height:0 !important; padding:5px 12px !important; }

  /* Themenzeilen (forumdisplay .board.thema) eigenes Layout: Titel -> von X . Datum -> Antworten/Ansichten */
  .board.thema .main{ display:block; }
  .board.thema .main h3{ border-bottom:0 !important; padding:12px 44px 2px 14px !important; }
  .board.thema .main p{ display:none !important; }
  .board.thema .von{ display:block; padding:2px 14px 6px; font-size:.78rem; }
  .board.thema .von .wann{ margin-left:6px; opacity:.8; }
  .board.thema .stats{ display:block; padding:9px 14px 12px 14px; border-top:1px solid var(--line); }
  .board.thema .stats .counts{ display:flex !important; gap:16px; font-size:.74rem; opacity:.85; }
  .board.thema .stats .lastpost{ font-size:.74rem; margin-top:5px; }
  .board.thema .themenknoepfe{ display:none; }

  /* Profil (member_profile .profil): 3-Spalten-Grid stapeln, 9 Reiter (.preiter) als horizontale Scroll-Leiste */
  .profil{ display:block !important; }
  .profil > *{ width:auto !important; max-width:100% !important; float:none !important; }
  .profil .preiter{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; gap:6px; margin:12px 0; }
  .profil .preiter label{ flex:0 0 auto !important; width:auto !important; white-space:nowrap; padding:8px 13px; border:1px solid var(--line); border-radius:20px; }

  /* Schreibmaske (newthread/newreply/editpost .tlm-fw): Tabelle+Zellen stapeln, Felder/Editor/Buttons voll breit */
  .tlm-fw-tbl, .tlm-fw-tbl tbody, .tlm-fw-tbl > tbody > tr, .tlm-fw-tbl > tbody > tr > td{ display:block !important; width:100% !important; box-sizing:border-box; }
  .tlm-fw input.textbox, .tlm-fw textarea, .tlm-fw select{ width:100% !important; max-width:100% !important; box-sizing:border-box; }
  .mybbeditor, .markItUp, .markItUpContainer, textarea.markItUpEditor, #showWarn, #showData{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box; }
  .tlm-fw .select2-container{ width:100% !important; max-width:100% !important; }
  #clickable_smilies{ width:100% !important; }
  #clickable_smilies tbody, #clickable_smilies tr{ display:inline !important; }
  #clickable_smilies td{ display:inline-block !important; vertical-align:middle; }
  .tlm-fw-actions{ display:block !important; }
  .tlm-fw input.tlm-fw-prim, .tlm-fw input.tlm-fw-primary, .tlm-fw input[type=submit], .tlm-fw input.button{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:5px 0 !important; }

  .cat-banner h2, .cat-banner h2::after{ font-size:1.3rem !important; letter-spacing:.04em !important; }
  .cat-banner h2{ white-space:normal !important; line-height:1.12; padding:0 14px; }
  .mb-vorstellung table, .mb-vorstellung tbody, .mb-vorstellung tr, .mb-vorstellung td{ display:block; width:100%; }
  .mb-vorstellung td{ padding:8px 2px; border:0; }
  .mb-vorstellung .box3-last{ font-size:.8rem; }
  .mb-vorstellung .box3-last img{ float:none; width:34px !important; height:34px !important; object-fit:cover; }

  .post{ grid-template-columns:1fr; }
  .post .author{ border-right:0; border-bottom:1px solid var(--line); }
  .post .kopf{ grid-template-columns:56px minmax(0,1fr); align-items:center; gap:9px; }
  .post .kopf .gif-klein{ width:56px; height:62px; }
  .post .kopf .gif-klein img{ width:56px; height:62px; object-fit:cover; }
  .post .kopf .wer{ flex-direction:column; align-items:flex-start; min-width:0; }
  .post .kopf .name{ font-size:1.2rem; line-height:1.14; }
  .post .kopf .name a{ white-space:normal; word-break:break-word; }
  .post .kopf .rolle{ font-size:.8rem; margin-top:2px; }
  .post .mitte{ grid-template-columns:minmax(0,1fr) 78px; gap:10px; }
  .post .mitte > .body{ min-width:0; }
  .post .body{ overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--gold-soft) rgba(255,255,255,.07); }
  .post .body::-webkit-scrollbar{ height:9px; -webkit-appearance:none; }
  .post .body::-webkit-scrollbar-thumb{ background:var(--gold-soft); border-radius:5px; }
  .post .body::-webkit-scrollbar-track{ background:rgba(255,255,255,.07); border-radius:5px; }
  /* breiter Beitrag: sichtbarer Gold-Verlauf rechts als Wisch-Hinweis (Skript im footer setzt data-scrollx) */
  .post .body[data-scrollx]{ padding-bottom:14px; background:linear-gradient(to left, rgba(173,126,53,.55), rgba(173,126,53,0) 60px) right top / 60px 100% no-repeat; box-shadow:inset -2px 0 0 rgba(209,167,88,.4); }
  .post .body .content{ padding:6px 4px; }
  .post .avaspalte{ flex-direction:column; align-items:center; text-align:center; }
  .post .avaspalte > *{ max-width:100%; width:auto; }
  .post .avatar, .post .author_avatar{ width:78px; max-width:78px; height:auto; margin:0 auto; }
  .post .avatar img, .post .author_avatar img{ width:100%; height:auto; display:block; }
  .post .avatar .felder{ display:none; }
  .post .signatur img{ max-width:100%; height:auto; }
  .post .fuss{ grid-template-columns:1fr; gap:12px; }
  .post .fuss .felder{ grid-template-columns:1fr 1fr; }
  .post .fuss .gif.gross{ justify-self:center; }
  .post .fuss .gif.gross img{ max-width:191px; width:100%; height:auto; }
  .post .actions{ flex-wrap:wrap; gap:8px 12px; align-items:center; }
  .post .actions .knoepfe{ flex-wrap:wrap; }

  .foot-row.three{ grid-template-columns:1fr; }
  .foot-row.three .fbox{ max-height:180px; overflow:auto; }
  .foot-row.quotes .fbox{ max-height:250px; overflow:auto; }
  .footer .footer-legend{ max-height:300px; overflow:auto; }

  /* Footer-Bloecke im Karten-Look wie die Foren: Gold-Kopfbalken (Cormorant) + Inhalt */
  .footer .fbox{ background:#161b29; border:1px solid var(--line); gap:0; }
  .footer .fbox > h4{ margin:0 !important; padding:10px 14px !important; border-bottom:1px solid var(--line); background:rgba(173,126,53,.07); color:var(--gold-light); font-family:var(--display); letter-spacing:.06em; font-size:1.05rem; font-weight:400; line-height:1.1; }
  .footer .fbox .fbody{ padding:11px 14px !important; }
  .footer .footer-legend .legend-item{ font-size:.82rem; }
  .footer .fbox::-webkit-scrollbar{ width:5px; }

  /* Online-Namen als Chips wie altes TL-Mobil; Komma-::after weg */
  .footer .foot-row.three .fbox:nth-child(1) .userlist,
  .footer .foot-row.three .fbox:nth-child(2) .userlist{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 7px; font-size:0; }
  .footer .foot-row.three .fbox:nth-child(1) .userlist a,
  .footer .foot-row.three .fbox:nth-child(2) .userlist a{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:20px; padding:4px 11px; background:#1b2133; font-size:.8rem; line-height:1.2; }
  .footer .foot-row.three .userlist a::after{ content:none !important; }
  .footer .foot-row.three .fbox:nth-child(3){ display:none; }
  .footer .foot-row.two{ grid-template-columns:1fr !important; }
  .footer .foot-row.two .fbox:nth-child(2){ display:none; }

  /* Legende als Chip-Grid wie altes TL-Mobil (farbiger Stern + Name + Zahl, umbrechend) */
  .footer .footer-legend{ max-height:none !important; display:flex !important; flex-wrap:wrap; gap:7px 9px; justify-content:center; }
  .footer .footer-legend .legend-item{ display:inline-flex !important; align-items:center; gap:6px; width:auto !important; border:1px solid var(--line); border-radius:20px; padding:4px 11px; margin:0 !important; background:#1b2133; }
  .footer .footer-legend .legend-item::after{ content:none !important; border:0 !important; }
  .footer .footer-legend .legend-item .dot{ font-size:.9em; }
  .footer .footer-legend .legend-item .ct{ opacity:.65; font-size:.85em; margin-left:1px; }
}
@media (max-width: 600px){
  .foot-row.quotes, .foot-row.legende-stats{ grid-template-columns:1fr; }
  .post .fuss .felder{ grid-template-columns:1fr; }
}