@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.zz-mobile {
    margin: 0 !important;
    background-attachment: scroll !important;
    background-position: center top !important;
  }

  body.zz-mobile img,
  body.zz-mobile iframe {
    max-width: 100%;
    height: auto;
  }

  body.zz-mobile table {
    max-width: 100%;
    box-sizing: border-box;
  }

  body.zz-mobile .zz-mobile-shell {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.zz-mobile .zz-mobile-shell td,
  body.zz-mobile .zz-mobile-shell th {
    box-sizing: border-box;
  }

  body.zz-mobile .zz-mobile-shell table {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.zz-mobile .zz-mobile-shell > tbody > tr > td,
  body.zz-mobile .zz-mobile-shell > tbody > tr > th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.zz-mobile .zz-mobile-nav td {
    text-align: center !important;
    width: auto !important;
  }

  body.zz-mobile .zz-mobile-nav a,
  body.zz-mobile .zz-mobile-nav img {
    display: inline-block;
    vertical-align: middle;
  }

  body.zz-mobile .zz-mobile-grid {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.zz-mobile .zz-mobile-grid > tbody,
  body.zz-mobile .zz-mobile-grid > tbody > tr {
    display: block;
  }

  body.zz-mobile .zz-mobile-grid > tbody > tr {
    margin-bottom: 18px;
  }

  body.zz-mobile .zz-mobile-grid td,
  body.zz-mobile .zz-mobile-grid th {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: center !important;
  }

  body.zz-mobile .zz-mobile-grid td table,
  body.zz-mobile .zz-mobile-grid td div,
  body.zz-mobile .zz-mobile-grid td p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.zz-mobile .zz-mobile-grid td table {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.zz-mobile .zz-mobile-grid td[align="left"],
  body.zz-mobile .zz-mobile-grid td[align="right"] {
    text-align: center !important;
  }

  body.zz-mobile .zz-mobile-shell > tbody > tr > td.zz-spacer,
  body.zz-mobile .zz-mobile-shell > tbody > tr > th.zz-spacer,
  body.zz-mobile .zz-mobile-grid td.zz-spacer,
  body.zz-mobile .zz-mobile-grid th.zz-spacer,
  body.zz-mobile td.zz-spacer,
  body.zz-mobile th.zz-spacer,
  body.zz-mobile .zz-spacer {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}


/* missing-nav-link — text-button styled like image-button nav */
a.missing-nav-link {
  display: inline-block;
  width: 150px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  background: #1a1a1a;
  border: 1px solid #444;
  color: #d4a017;
  text-decoration: none;
  font: bold 13px Arial, Helvetica, sans-serif;
  letter-spacing: 0.5px;
  box-sizing: border-box;
  margin: 0;
}
a.missing-nav-link:hover {
  background: #d4a017;
  color: #1a1a1a;
  text-decoration: none;
}
@media (max-width: 800px) {
  a.missing-nav-link {
    width: auto;
    min-width: 100px;
    padding: 0 12px;
    margin: 4px 2px;
  }
}

/* P2.6.0 mobile-baseline */
@media (max-width: 800px) {
  body, html { overflow-x: hidden; }
  body[background] { background-attachment: scroll !important; }
  img { max-width: 100%; height: auto; }
}

/* P2.6.1 mobile: collapse PURE-SPACER cells (width<=30 with no content) */
@media (max-width: 800px) {
  /* :has(*) — empty content (no inner elements OR only whitespace) */
  /* But :empty does not match &nbsp;. So we target by width AND non-content rule below */
  td[width="5"], td[width="10"] {
    display: none !important;
    width: 0 !important; padding: 0 !important; border: 0 !important;
  }
  /* Width 20-30 cells: keep visible — likely A/B labels or short headers */
  /* They stay table-cell so they sit next to wider content */
}

/* P2.6.2 mobile: shrink outer fixed-width tables to viewport */
@media (max-width: 800px) {
  table[width="800"], table[width="780"], table[width="770"],
  table[width="750"], table[width="740"] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  /* Allow wide content cells to expand naturally */
  td[width="240"], td[width="250"], td[width="350"], td[width="390"], td[width="400"],
  td[width="740"], td[width="780"] {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* P2.6.3 mobile: preserve text alignment + default to center */
@media (max-width: 800px) {
  td[align="center"], td[align="center"] * { text-align: center !important; }
  td[align="left"]   { text-align: left   !important; }
  td[align="right"]  { text-align: right  !important; }
  /* Cells without explicit align → center on mobile (old 800px designs left-align by default) */
  body.zz-mobile td:not([align]) { text-align: center !important; }
  td[valign="top"][width="200"],
  td[valign="top"][width="220"],
  td[valign="top"][width="230"],
  td[valign="top"][width="235"],
  td[valign="top"][width="240"],
  td[valign="top"][width="250"],
  td[valign="top"][width="260"] {
    text-align: center !important;
  }
  td[valign="top"][width="200"] *,
  td[valign="top"][width="220"] *,
  td[valign="top"][width="230"] *,
  td[valign="top"][width="235"] *,
  td[valign="top"][width="240"] *,
  td[valign="top"][width="250"] *,
  td[valign="top"][width="260"] * {
    text-align: center !important;
  }
}

/* P2.6.4 mobile: shrink footer decoration strips */
@media (max-width: 800px) {
  img[width="800"][height="5"],
  img[width="800"][height="10"],
  img[width="800"][height="20"] {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
  }
  table[width="800"][bgcolor="#FFFFFF"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  body.zz-mobile .zz-side-label-mobile-only {
    display: inline !important;
    margin-right: 6px;
  }
}

/* Desktop + mobile: force fixed layout on cover-grid tables so declared column
   widths are honored (prevents 800px tables from stretching to 900+). */
table[width="800"]:has(> tbody > tr > td[width="200"]),
table[width="800"]:has(> tbody > tr > td[width="210"]),
table[width="800"]:has(> tbody > tr > td[width="220"]),
table[width="800"]:has(> tbody > tr > td[width="230"]),
table[width="800"]:has(> tbody > tr > td[width="240"]),
table[width="800"]:has(> tbody > tr > td[width="250"]),
table[width="780"]:has(> tbody > tr > td[width="230"]),
table[width="780"]:has(> tbody > tr > td[width="240"]) {
  table-layout: fixed !important;
}
table[width="800"] > tbody > tr > td[width="200"],
table[width="800"] > tbody > tr > td[width="210"],
table[width="800"] > tbody > tr > td[width="220"],
table[width="800"] > tbody > tr > td[width="230"],
table[width="800"] > tbody > tr > td[width="240"],
table[width="800"] > tbody > tr > td[width="250"] {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* mobile: give wide text cells extra horizontal padding so text sits INSIDE
   decorated panels drawn onto sibling header images (e.g. Marva biografie). */
@media (max-width: 900px) {
  body.zz-mobile td[width="740"],
  body.zz-mobile td[width="720"],
  body.zz-mobile td[width="700"],
  body.zz-mobile td[width="750"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
  }
}

/* mobile: scale header-table background images to fit viewport width
   (800x* banners like CHkop.jpg, GDkop.jpg get scaled to contain) */
@media (max-width: 900px) {
  body.zz-mobile table[width="800"][background],
  body.zz-mobile table[width="780"][background],
  body.zz-mobile table[width="750"][background] {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
  }
  body.zz-mobile table[width="800"][background] > tbody > tr > td[width="770"],
  body.zz-mobile table[width="800"][background] > tbody > tr > td[width="740"] {
    height: auto !important;
    padding-top: calc(100vw * 0.42) !important;
    vertical-align: top !important;
  }
  /* Hide the <br> stack in mobile header cell — the padding-top handles the banner space */
  body.zz-mobile table[width="800"][background] > tbody > tr > td[width="770"] > br,
  body.zz-mobile table[width="800"][background] > tbody > tr > td[width="740"] > br {
    display: none !important;
  }
}

/* mobile: kill body decorative wallpaper (leaves bgcolor / synced bg alone) */
@media (max-width: 900px) {
  body.zz-mobile {
    background-image: none !important;
  }
}

/* mobile: section labels injected by upgradeSectionLabels() */
h2.zz-section-label { display: none; }
@media (max-width: 900px) {
  body.zz-mobile h2.zz-section-label {
    display: block;
    text-align: center;
    font: italic bold 28px 'Georgia', 'Times New Roman', serif;
    color: #222;
    margin: 22px auto 14px;
    padding: 0 8px;
    letter-spacing: 0.3px;
  }
  body.zz-mobile img[data-zz-section-upgraded="1"] { display: none !important; }
}

/* mobile text-nav injected by buildTextNav() */
.zz-mobile-textnav { display: none; }
@media (max-width: 900px) {
  body.zz-mobile .zz-mobile-textnav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    box-sizing: border-box;
    background: transparent;
    margin: 14px auto !important;
    width: fit-content;
    max-width: 100%;
  }
  body.zz-mobile .zz-mobile-textnav a {
    display: inline-block;
    padding: 8px 18px;
    background: #f4f4f0;
    color: #222 !important;
    text-decoration: none !important;
    border: 1px solid #888;
    border-radius: 3px;
    font: italic 20px/1.1 'Georgia', 'Times New Roman', serif;
    letter-spacing: 0.3px;
  }
  body.zz-mobile .zz-mobile-textnav a:hover,
  body.zz-mobile .zz-mobile-textnav a:active {
    background: #e8e8e0;
    color: #000 !important;
  }
  /* Hide the original image-based menu items when text nav is present */
  body.zz-mobile td[data-zz-menu-upgraded="1"] > a,
  body.zz-mobile td[data-zz-menu-upgraded="1"] > img,
  body.zz-mobile th[data-zz-menu-upgraded="1"] > a,
  body.zz-mobile th[data-zz-menu-upgraded="1"] > img {
    display: none !important;
  }
  body.zz-mobile td[data-zz-menu-upgraded="1"] {
    background-image: none !important;
    text-align: center !important;
  }
}

/* mobile: keep split-cover images side-by-side using proportional widths */
@media (max-width: 900px) {
  body.zz-mobile td[data-zz-split-cover-fixed="1"] {
    white-space: nowrap;
    text-align: center;
    font-size: 0;
  }
  body.zz-mobile td[data-zz-split-cover-fixed="1"] > img {
    display: inline-block;
    vertical-align: top;
    height: auto !important;
    max-width: none !important;
  }
  body.zz-mobile td[data-zz-split-cover-fixed="1"] > img[data-zz-split-pct] {
    width: calc(var(--zz-pct) * 1%) !important;
  }
}

/* mobile: reduce excessive vertical <br> stacks in menu columns */
@media (max-width: 900px) {
  body.zz-mobile td[background*="menu" i] br + br + br { display: none !important; }
}

/* mobile: upscale thumbnail miniatures to match feature photos */
@media (max-width: 900px) {
  body.zz-mobile img[src*="miniaturen/"] {
    width: min(70vw, 260px) !important;
    height: auto !important;
    max-width: 100% !important;
    image-rendering: auto;
    margin: 8px auto !important;
  }
}

/* mobile: strip decorative bg images on cells + center content */
@media (max-width: 900px) {
  body.zz-mobile td[background] {
    background-image: none !important;
    text-align: center !important;
  }
  body.zz-mobile td[background] img,
  body.zz-mobile td[background] a {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* hide narrow decorative vertical connectors on mobile (ikop1/ikop3 etc.) */
@media (max-width: 900px) {
  body.zz-mobile img[width][height] {
    /* keep normal images */
  }
  body.zz-mobile img[src*="ikop"],
  body.zz-mobile img[width="10"][height="150"],
  body.zz-mobile img[width="10"][height="120"],
  body.zz-mobile img[width="10"][height="100"],
  body.zz-mobile img[width="20"][height="150"],
  body.zz-mobile img[width="15"][height="150"] {
    display: none !important;
  }
  /* Hide any table cell that only contains such a decorative narrow-tall image */
  body.zz-mobile td.zz-thin-strip {
    display: none !important;
  }
}

/* hide empty padding cells (width 100-280 with no content) — applies always */
td.zz-padding-cell, th.zz-padding-cell {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* P2.6.5 final: mobile edge spacing without revealing body bgcolor */
@media (max-width: 900px) {
  body.zz-mobile { margin: 0 !important; padding: 0 !important; }
  /* Outer content tables — full width */
  body.zz-mobile > center > table[width="800"],
  body.zz-mobile > center > table[width="780"],
  body.zz-mobile > table[width="800"],
  body.zz-mobile > table[width="780"],
  body.zz-mobile > div > table[width="800"],
  body.zz-mobile > div > center > table[width="800"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}