/* responsive.css -- added 2026-09-23.
 *
 * The page is a 2001 layout: a full-width TABLE pinned with an inline
 * style="position:absolute; top:0; left:0", two logos absolutely positioned
 * over it, a 160px left rail (#rand) and a 140px header band (#kopf).
 * Navigation is coolmenus4 (jscript/menu.js), which is hover-driven and
 * therefore unusable on a touch screen.
 *
 * Nothing in the original markup is changed. Everything here is scoped to
 * max-width:768px, so desktop rendering is byte-for-byte what it was.
 * !important is needed throughout because the positioning lives in inline
 * style attributes, which otherwise win.
 */

/* The server-side nav is for small screens only; on desktop the DHTML menu
   does the job. Kept in the HTML at all widths so crawlers can follow it --
   the coolmenus markup is generated by JS and is not in the source at all. */
#mnav { display: none; }

@media (max-width: 768px) {

  /* Fluid media: stops wide photos forcing horizontal scroll on a phone. */
  img, table { max-width: 100%; }
  img { height: auto; }

  /* Un-pin the layout table and let it flow. */
  table[style*="position:absolute"] {
    position: static !important;
    height: auto !important;
    width: 100% !important;
  }

  /* Drop the decorative left rail and the tall header band. */
  #rand { display: none !important; }
  #kopf { height: auto !important; }

  /* Logos: out of absolute positioning, into a normal centred header. */
  img[src*="text_logo"], img[src*="logo_gross"] {
    position: static !important;
    display: inline-block;
    height: auto !important;
    width: auto !important;
    max-height: 70px;
    margin: 6px 8px;
    vertical-align: middle;
  }

  /* coolmenus is hover-only, and its level-0 items are a fixed 180px wide.
     Hidden by the CLASSES menu.css defines, not by id: coolmenus4 builds its
     element ids at runtime from the menu object name (oCMenu), so an id-based
     selector matches nothing. These class names are stable -- the site's own
     stylesheet declares them. */
  .clCMAbs, .clBar,
  .clLevel0, .clLevel0over, .clLevel0border,
  .clLevel1, .clLevel1over, .clLevel1border,
  .clLevel2, .clLevel2over, .clLevel2border { display: none !important; }

  /* The real mobile navigation. <details> so it collapses without JavaScript.
     Collapsed by default: otherwise 11 top-level items push the actual page
     content ~600px down, so a visitor arriving from a search result sees only
     navigation above the fold. */
  #mnav {
    display: block;
    font-family: Verdana, sans-serif;
    font-size: 16px;
    background: #f3f3f3;
    border-bottom: 2px solid #1b7ba8;
  }
  /* The one visible control when collapsed. */
  #mnav .mnav-root > summary {
    display: block;
    padding: 14px;                 /* >=44px touch target */
    font-weight: bold;
    font-size: 17px;
    color: #fff;
    background: #1b7ba8;
    cursor: pointer;
    list-style: none;
  }
  #mnav .mnav-root > summary::-webkit-details-marker { display: none; }
  #mnav .mnav-root > summary::before { content: "\2630\00a0\00a0"; }
  #mnav .mnav-root[open] > summary::before { content: "\2715\00a0\00a0"; }

  /* Top-level entries inside the open menu. */
  #mnav .mnav-root > a,
  #mnav .mnav-root > details > summary {
    display: block;
    padding: 12px 14px;
    font-weight: bold;
    color: #1b7ba8;
    text-decoration: none;
    cursor: pointer;
    border-top: 1px solid #ddd;
  }
  /* Second-level links. */
  #mnav .mnav-root > details > a {
    display: block;
    padding: 11px 14px 11px 32px;
    color: #333;
    text-decoration: none;
    border-top: 1px solid #eee;
  }

  /* Readable body text and no accidental sideways scroll. */
  body { font-size: 16px; line-height: 1.5; }
  html, body { overflow-x: hidden; }
  td { padding: 0 10px; }
}