/* Mobile skin for the fixed-width 2006 table layout — CSS only, no HTML rebuild.
   Everything is scoped to small screens; desktop rendering is untouched.
   Requires <meta name="viewport" content="width=device-width, initial-scale=1">. */
@media (max-width: 768px) {
  body { margin: 0; padding: 0 10px;
         background: #99CCFF url("/images/gfx_bg.gif") repeat-x top !important; }

  /* let every layout table flow to the screen width instead of 749px */
  table { width: 100% !important; max-width: 100% !important; }

  /* the body padding insets the content + nav for readability, but the
     decorative header (567) and footer (754) graphics should stay flush to the
     screen edges -> pull them back out over the padding. */
  table[width="567"], table[width="754"] {
    width: calc(100% + 20px) !important; max-width: none !important;
    margin-left: -10px !important; margin-right: -10px !important;
  }
  td, th { width: auto !important; }
  img { max-width: 100%; height: auto; }

  /* team page: render the "name @ domain" mini-table inline, so the role text
     that follows drops to its own line (instead of stretching across). */
  table[width="28%"] { display: block !important; width: auto !important; margin: 1px 0; }
  table[width="28%"] tbody, table[width="28%"] tr { display: inline !important; }
  table[width="28%"] td { display: inline !important; width: auto !important; padding: 0 2px !important; }
  /* team page: fully linearize the member grid -> one member per row (portrait
     line, then details line). Member cells have inconsistent/absent widths, so
     key off the portrait image (chrome images never use the "portrait" prefix). */
  table:has(> tbody > tr > td > img[src*="portrait"]),
  table:has(> tbody > tr > td > img[src*="portrait"]) > tbody,
  tr:has(> td > img[src*="portrait"]) { display: block !important; width: 100% !important; }
  tr:has(> td > img[src*="portrait"]) > td {
    display: block !important; width: 100% !important; text-align: left; }
  tr:has(> td > img[src*="portrait"]) > td:has(> img[src*="portrait"]) { padding-top: 12px; }
  img[src*="portrait"] { width: 72px !important; height: auto !important; margin: 0 0 2px 0; }

  /* the login form is inactive (dead forum) — hide the whole left sidebar */
  form[name="frmLogin"], td.leftside { display: none !important; }

  /* content column: full width, drop the right-border texture on mobile */
  td[width="595"] { display: block; width: 100% !important;
                    background: #D3E9FF !important; }

  /* header logo strip: keep, scaled to fit */
  table[width="567"] td { text-align: center; }

  /* navigation buttons: keep the original tab bar connected. The 6px gfx_space_nav
     spacer bridges the buttons' bottom rail, so re-show it, drop the gap to 0 and
     bottom-align the row so the rail lines up into one continuous bar. */
  table[width="595"] tr:first-child { display: flex; flex-wrap: wrap; gap: 0;
                                      align-items: flex-end; }
  table[width="595"] tr:first-child td { display: inline-flex; }
  a img[src*="btn_nav_"], img[src*="gfx_space_nav"] {
    height: 40px !important; width: auto !important; }
  /* the Forum button targets a dead forum (404) and is the one that wraps to a
     second row on narrow screens. Hide it, then let the trailing nav spacer grow
     so the bottom rail still runs cleanly to the right edge (the gfx_space_nav
     strip is horizontally uniform, so it stretches without distortion). */
  table[width="595"] tr:first-child td:has(> a > img[src*="btn_nav_forum"]) {
    display: none !important; }
  table[width="595"] tr:first-child td:has(> img[src*="gfx_space_nav"]):has(+ td > img[src*="gfx_nav_end"]) {
    flex: 1 1 auto !important; }
  table[width="595"] tr:first-child td:has(> img[src*="gfx_space_nav"]):has(+ td > img[src*="gfx_nav_end"]) > img {
    width: 100% !important; }

  /* drop the fixed spacer / decorative chrome that forces widths or adds noise */
  img[src*="transp.gif"],
  img[src*="gfx_nav_end"],
  img[src*="gfx_subnav"], img[src*="gfx_subnavunder"],
  img[src*="gfx_leftside1"], img[src*="gfx_leftside2"],
  img[src*="gfx_footer"], img[src*="gfx_left_bottom"],
  img[src*="gfx_right_bottom"], img[src*="gfx_right_border"],
  img[src*="fnt_nothing"] { display: none !important; }

  /* readable typography */
  .titel { font-size: 22px !important; line-height: 1.25 !important; }
  .einleitung, .lf-h { font-size: 15px !important; }
  .text, td.text, .lf-facts, .lf-switcher, .lf-overview { font-size: 15px !important; line-height: 1.55 !important; }
  p.text { font-size: 15px !important; line-height: 1.55 !important; }

  /* tables of content (facts box, overview) become full width with wrapping */
  .lf-overview td, .lf-overview th { padding: 6px 8px !important; }
  a { word-break: break-word; }

  /* galleries already use flex; give thumbs a touch more size */
  .lf-print { width: 30% !important; }
  .lf-video { max-width: 100% !important; }
}

/* Tablet / landscape band: the screen is wider than the 567px header artwork, so
   stretching the strip to full width only spreads the four images apart and leaves
   gaps in the middle. Instead let the strip shrink to its natural width and pack
   the images flush-left against the screen edge. Phones (< 568px) keep the
   scale-to-fit behavior in the block above; this band is purely additive. */
@media (min-width: 568px) and (max-width: 768px) {
  table[width="567"] {
    width: auto !important; max-width: none !important;
    margin-left: -10px !important; margin-right: 0 !important;
  }
  table[width="567"] td { text-align: left !important; }
}