/* schlingensief.com – Mobilansicht (2026)
   Greift nur bis 800 px Breite. Das Desktop-Layout bleibt unverändert.
   Zusammen mit /javascript/mobil.js (Burger-Menü, Unternavigation, Proportionen). */

#mb-bar, #mb-menu, .mb-label { display: none; }

@media (max-width: 800px) {
  html { -webkit-text-size-adjust: 100%; }
  html, body { overflow-x: hidden; }
  #animatedModal, #animatedModal * { max-width: 100%; box-sizing: border-box; }
  body { margin: 0 !important; background-color: #222222; }
  body > br, form > br, td[width="100%"] > br { display: none; }

  /* Tabellen-Layout linearisieren */
  table, tbody, thead, tfoot { display: block; width: auto !important; max-width: 100%; height: auto !important; }
  colgroup { display: none; }
  tr { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; max-width: 100%; height: auto !important; }
  td, th { display: block; flex: 0 1 auto; width: auto !important; max-width: 100%; min-width: 0; height: auto !important; box-sizing: border-box; }
  td[nowrap]:not([style*="white-space: nowrap"]) { white-space: normal !important; }
  /* Banner mit Auswahlfeld (Arbeiten, Oper, Installation …) */
  div.banner_box { width: auto !important; height: auto !important; background-image: none !important; }
  div.dropdown_box, div.credits_box { position: static !important; left: auto !important; right: auto !important; top: auto !important; height: auto !important; }
  div.dropdown_box { padding: 10px 14px 0; } div.dropdown_box select { width: 100%; }
  div.credits_box { padding: 2px 14px; }
  /* absolut positionierte Elemente (z. B. Portrait auf der Biographie) in den Fluss holen */
  table [style*="position:absolute"], table [style*="position: absolute"] { position: static !important; }
  td.inhalt, td.inhalt_rechts, td[width="110"], td[width="768"], td[width="770"], td[width="100%"],
  td[width="451"], td[width="150"], td[width="158"], td[width="168"], td[background] { flex: 1 1 100%; }

  /* Abstandsgrafiken und leere Zellen ausblenden */
  td:has(> img[src*="dummie"]:only-child):not([background]), td:empty { display: none !important; }
  td[background] { background-size: 100% auto; background-repeat: no-repeat; }
  /* Rubrik-Zeilen (THEATER, NEWSLOG …): Schriftzug in Originalgröße, Suchfeld dort aus (Suche steckt im Menü) */
  td[background*="subtitle_"] { background-size: auto 35px; background-position: 14px 4px; min-height: 42px; padding: 42px 14px 6px !important; }
  td[background*="subtitle_"] select { width: 100%; }
  td[background*="subtitle_"] table:has(input[name="s"]) { display: none !important; }

  /* Bilder, Videos, Flash an die Breite anpassen */
  img, video, iframe, object, embed, ruffle-object, ruffle-embed { max-width: 100% !important; }
  /* Newslog-Kasten auf der Startseite: volle Breite */
  td:has(> iframe[src*="newsfeed"]) { flex: 1 1 100%; border-left: 0 !important; }
  iframe[src*="newsfeed"] { display: block; width: 100% !important; height: 460px !important; aspect-ratio: auto !important; }
  img, video { height: auto; }
  img[src*="dummie"] { height: auto; }

  /* Formulare */
  select, input[type="text"], input[type="email"], textarea { max-width: 100%; font-size: 16px; }
  body select, body select[class] { font-size: 15px !important; padding: 6px 4px; min-height: 36px; }
  select.sitemap_input, select[name="site"] { display: none !important; }
  td.inhalt select, td.inhalt_rechts select { width: 100%; }

  /* Textzellen außerhalb der Inhaltsspalte (z. B. Startseiten-Teaser) mit Rand */
  td[class^="inhalt_rechts_"] { padding-left: 14px !important; padding-right: 14px !important; }
  td.inhalt td[class^="inhalt_rechts_"], td.inhalt_rechts td[class^="inhalt_rechts_"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* Kopf: Original-Kopf aus, mobile Leiste an */
  td.mb-textzelle { flex: 1 1 100%; padding-left: 14px !important; padding-right: 14px !important; }
  .mb-hide { display: none !important; }
  #mb-bar { display: flex; position: sticky; top: 0; z-index: 1000; align-items: center; justify-content: space-between;
            background: #ffffff; border-bottom: 1px solid #cccccc; padding: 10px 14px; box-sizing: border-box; width: 100%; }
  #mb-bar .mb-logo img { height: 26px; width: auto; display: block; }
  #mb-burger { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 8px; margin: -8px -6px -8px 0;
               cursor: pointer; width: 44px; height: 40px; position: relative; }
  #mb-burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: #333333; transition: transform .2s, opacity .2s; }
  #mb-burger span:nth-child(1) { top: 12px; } #mb-burger span:nth-child(2) { top: 19px; } #mb-burger span:nth-child(3) { top: 26px; }
  body.mb-open #mb-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mb-open #mb-burger span:nth-child(2) { opacity: 0; }
  body.mb-open #mb-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #mb-menu { position: fixed; z-index: 999; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; background: #ffffff;
             padding: 70px 22px 40px; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }
  body.mb-open #mb-menu { display: block; }
  body.mb-open { overflow: hidden; }
  #mb-menu form { display: flex; gap: 8px; margin: 0 0 22px; }
  #mb-menu form input[type="search"] { flex: 1; font-size: 16px; padding: 9px 10px; border: 1px solid #bbbbbb; border-radius: 3px; min-width: 0; }
  #mb-menu form button { font-size: 15px; padding: 9px 14px; border: 0; border-radius: 3px; background: #333333; color: #ffffff; }
  #mb-menu ul { list-style: none; margin: 0 0 24px; padding: 0; }
  #mb-menu li a { display: block; padding: 12px 2px; border-bottom: 1px solid #e5e5e5; color: #333333; text-decoration: none;
                  font-size: 17px; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; }
  #mb-menu li a.mb-aktiv { color: #e2001a; }
  #mb-menu .mb-flaggen { display: flex; flex-wrap: wrap; gap: 14px; }
  #mb-menu .mb-flaggen a { display: flex; align-items: center; gap: 6px; color: #555555; text-decoration: none; font-size: 14px; }
  #mb-menu .mb-flaggen img { width: 28px; height: auto; }

  /* Unternavigation (linke Spalte) als Textleiste */
  td.mb-subnav { flex: 1 1 100%; padding: 14px 14px 4px !important; }
  td.mb-subnav table, td.mb-subnav tbody { display: flex !important; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  td.mb-subnav tr, td.mb-subnav td { display: contents !important; }
  td.mb-subnav a { display: inline-block; padding: 6px 10px; border: 1px solid #cccccc; border-radius: 14px; color: #444444;
                   font: bold 12px Arial, Helvetica, sans-serif; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
  td.mb-subnav a.mb-aktiv { border-color: #e2001a; color: #e2001a; }
  td.mb-subnav img { display: none; }
  td.mb-subnav .mb-label { display: inline; }

  /* Inhalt und rechte Spalte */
  body td, body td[class] { font-size: 13px; line-height: 1.45; }
  body td.inhalt, body td.inhalt td, body td.inhalt td[class] { font-size: 15px; line-height: 1.55; }
  body td.inhalt_rechts, body td.inhalt_rechts td, body td.inhalt_rechts td[class] { font-size: 14px; line-height: 1.5; }
  body td.footer, body td.bildlegende, body td.inhalt td.inhalt_bildlegende { font-size: 12px; }
  td.inhalt { padding: 6px 16px 10px !important; font-size: 15px; line-height: 1.55; text-align: left; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  td.inhalt_rechts { padding: 18px 16px 10px !important; font-size: 14px; line-height: 1.5; text-align: left;
                     border-top: 1px solid #cccccc; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  td.inhalt table, td.inhalt_rechts table { width: 100% !important; }
  td.inhalt tr, td.inhalt_rechts tr { justify-content: flex-start; flex-wrap: nowrap; gap: 0 10px; }
  td.inhalt tr > td, td.inhalt_rechts tr > td { flex: 0 1 auto; }
  body td.inhalt tr > td:not(:only-child) { font-size: 13px; line-height: 1.45; }
  td.inhalt tr > td:only-child, td.inhalt_rechts tr > td:only-child { flex: 1 1 100%; }
  td.inhalt tr:has(> td > table), td.inhalt_rechts tr:has(> td > table) { flex-wrap: wrap; }
  td.inhalt tr > td:has(> table), td.inhalt_rechts tr > td:has(> table) { flex: 1 1 100%; }
  .headline_1 { font-size: 20px !important; line-height: 1.3; }
  .headline_2 { font-size: 17px !important; line-height: 1.35; }
  td.inhalt a, td.inhalt_rechts a { overflow-wrap: anywhere; }

  /* Fuß */
  tr:has(> td > a[href^="javascript:kontakt"]) { gap: 4px 18px; padding: 6px 12px; }
  td.footer { padding: 18px 12px !important; line-height: 2; font-size: 12px; }
}