html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: #fff;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: #1c5f35;
}

img {
  max-width: 100%;
}

.will {
  color: #202020;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

.copyr {
  color: #fff;
  font: 10px Arial, Helvetica, sans-serif;
}

/* Rebuild the image-based navigation with native CSS. Several rollover GIFs
   in the recovery were error pages rather than images. */
table[bgcolor="#ABA99B"] a:has(> img) {
  position: relative;
  display: flex;
  width: 180px;
  height: 37px;
  align-items: center;
  padding: 0 8px 0 32px;
  background: #aba99b;
  color: #fff;
  font: 700 11px Arial, Helvetica, sans-serif;
  letter-spacing: .2px;
  text-decoration: none;
  text-transform: uppercase;
}

table[bgcolor="#ABA99B"] a:has(> img)::before {
  position: absolute;
  left: 8px;
  color: #087624;
  content: "❮❮";
  font-size: 20px;
  letter-spacing: -8px;
  line-height: 1;
}

table[bgcolor="#ABA99B"] a:has(> img):hover,
table[bgcolor="#ABA99B"] a:has(> img):focus-visible {
  background: #99978b;
}

table[bgcolor="#ABA99B"] a:has(> img):hover::before,
table[bgcolor="#ABA99B"] a:has(> img):focus-visible::before {
  color: #44443f;
}

table[bgcolor="#ABA99B"] a[href$="index.html"]:has(> img)::after { content: "Home"; }
table[bgcolor="#ABA99B"] a[href$="unter.html"]:has(> img)::after { content: "Unternehmen"; }
table[bgcolor="#ABA99B"] a[href$="sicherheit.html"]:has(> img)::after { content: "Sicherheit"; }
table[bgcolor="#ABA99B"] a[href$="mitglied.html"]:has(> img)::after { content: "Aktuelles"; }
table[bgcolor="#ABA99B"] a[href$="produkte.html"]:has(> img)::after { content: "Produkte"; }
table[bgcolor="#ABA99B"] a[href$="planung.html"]:has(> img)::after { content: "Planungshilfe"; }
table[bgcolor="#ABA99B"] a[href$="kontakt.html"]:has(> img)::after { content: "Kontakt"; }

table[bgcolor="#ABA99B"] a:has(> img) > img {
  display: none;
}

@media (max-width: 799px) {
  body > table,
  body > table > tbody,
  body > table > tbody > tr,
  body > table > tbody > tr > td:nth-child(2),
  body > table > tbody > tr > td:nth-child(2) > table,
  body > table > tbody > tr > td:nth-child(2) > table > tbody,
  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  body > table > tbody > tr > td:first-child,
  body > table > tbody > tr > td:last-child {
    display: none;
  }

  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr:first-child table {
    width: 100% !important;
  }

  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:first-child,
  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:first-child table,
  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:first-child tbody,
  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:first-child tr,
  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:first-child td {
    width: 100% !important;
    height: auto !important;
  }

  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:first-child td[height="150"] {
    display: none;
  }

  table[bgcolor="#ABA99B"] a:has(> img) {
    width: 100%;
    min-height: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    padding-left: 44px;
    font-size: 13px;
  }

  table[bgcolor="#ABA99B"] a:has(> img)::before {
    left: 16px;
  }

  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:nth-child(2) {
    padding: 24px 16px;
    text-align: center !important;
  }

  body > table > tbody > tr > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:nth-child(2) img {
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 8px auto;
    vertical-align: middle;
  }

  p,
  td {
    overflow-wrap: anywhere;
  }
}
