/* teeparty.be - Mobile-Schicht.
   Greift AUSSCHLIESSLICH bei <=768px. Der Desktop (>768px) bleibt voellig
   unveraendert; das alte 1025px-Slice-Design ist hier nicht beruehrt. */

/* Mobil-Navigation (vom mobile-nav.js erzeugt) - auf dem Desktop ausgeblendet */
.tp-mnav { display: none; }

@media (max-width: 768px) {

  /* ---------- Festes Tabellen-Layout linearisieren ---------- */
  html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
  [id^="#standard"] { width: 100% !important; }
  #Table_01,
  #Table_01 tbody,
  #Table_01 tr,
  #Table_01 td {
    display: block !important;
    width: auto !important;
    height: auto !important;
  }
  #Table_01 { width: 100% !important; }

  /* Deko-Slices, Spacer und die alte Bild-Navigation ausblenden
     (Inhaltsbilder wie Galerie-Thumbnails heissen NICHT standard_/spacer) */
  img[src*="/images/standard_"],
  img[src*="spacer.gif"] { display: none !important; }

  /* ---------- Inhaltsbereiche volle Breite ---------- */
  [id*="maincontent"],
  [id*="sidecontent"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box;
    padding: 8px 12px;
  }

  /* Moderne Inhaltsbloecke fluid (deren eigenes CSS bleibt unangetastet) */
  .tp-news, .gb-wrap, .tp-gallery {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .tp-gallery { max-height: 75vh; }
  .tp-news    { max-height: none !important; }

  /* Medien & Bilder fluid */
  video, .tp-video { width: 100% !important; height: auto !important; }
  [id*="maincontent"] img,
  .tp-news img, .gb-text img { max-width: 100%; height: auto; }

  /* iframes (Schreibteil-Logs, Disclaimer) fluid */
  [id*="maincontent"] iframe {
    width: 100% !important;
    height: 80vh !important;
    max-width: 100%;
    border: 0;
  }
  /* YouTube-Embed bleibt 16:9 (nicht von der 80vh-Regel oben erfassen) */
  .tp-yt { height: 0; padding-top: 56.25%; }
  .tp-yt iframe {
    position: absolute !important; top: 0; left: 0;
    width: 100% !important; height: 100% !important;
  }

  /* Home: leere Spacer-Sidecontent-Spalte ausblenden (sonst grosse Luecke
     zwischen Kopf und News) */
  #sidecontent { display: none !important; }
  /* leere, nur dekorative Zellen nicht aufblasen */
  [id*="maincontent"] { padding-top: 4px; }

  /* ---------- Navigation: feste Schnell-Links + Burger (Antistyle) ---------- */
  .tp-mnav {
    display: block; position: sticky; top: 0; z-index: 9000;
    background: #e6c68f; border-bottom: 2px solid #8a6a30;
    font-family: "Courier New", Courier, monospace; font-size: 14px;
  }
  .tp-mnav-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 7px 10px; }
  .tp-mnav-brand { font-weight: bold; color: #5d3800; text-decoration: none; }
  .tp-mnav-quick { margin-left: auto; display: flex; gap: 12px; }
  .tp-mnav-quick a { color: #5d3800; text-decoration: underline; white-space: nowrap; }
  .tp-mnav-burger {
    background: none; border: 0; color: #5d3800;
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px;
  }
  .tp-mnav-menu { display: none; border-top: 1px solid #8a6a30; padding: 4px 10px 8px; }
  /* Aufgeklappt: Eintraege horizontal in einer (umbrechenden) Reihe */
  .tp-mnav.open .tp-mnav-menu { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .tp-mnav-menu a {
    display: inline-block; color: #5d3800; text-decoration: underline;
    padding: 7px 0; white-space: nowrap;
  }
  .tp-mnav a:active { color: #000; }
}