/* Büroeinrichtungen von A bis RitZ: the 2013-14 layout (1&1 builder) rebuilt as plain CSS.
   Mint page, 960px frame, white logo block + interior photo, teal menu bar, teal box on the left,
   content on the right, dark footer strip. Teal and link tones are a step darker than in 2014 so
   white and teal text reach 4.5:1; the hues are unchanged. */

:root {
   --page: #d0f3db;
   --teal: #2b8282;
   --teal-deep: #236c6c;
   --heading: #008f8d;
   --link: #1f6f6f;
   --text: #5e5e5e;
   --text-strong: #474747;
   --rule: #9fcfb5;
   --footer: #1a1a1a;
   --footer-text: #cfcfcf;
   --white: #ffffff;
}

* {
   box-sizing: border-box;
}
html {
   -webkit-text-size-adjust: 100%;
}
body {
   margin: 0;
   background: var(--page);
   color: var(--text);
   font: 12px/1.5 Arial, Helvetica, sans-serif;
}
::selection {
   background: var(--teal);
   color: var(--white);
}
a {
   color: var(--link);
   text-underline-offset: 2px;
}
a:hover {
   color: var(--teal-deep);
}
a:focus-visible,
button:focus-visible {
   outline: 2px solid var(--teal-deep);
   outline-offset: 2px;
}
img {
   border: 0;
}

.skip {
   position: absolute;
   left: -9999px;
   top: 0;
}
.skip:focus {
   left: 8px;
   top: 8px;
   z-index: 10;
   background: var(--white);
   color: var(--link);
   padding: 6px 10px;
   border: 1px solid var(--teal);
}

#container {
   width: 960px;
   margin: 0 auto;
   padding-top: 10px;
}

/* header: 248px white logo block + 692px photo, 179px tall, inset 10px like the original */
#header {
   display: flex;
   width: 940px;
   height: 179px;
   margin: 0 10px;
   background: var(--white);
}
.site-mark {
   flex: 0 0 248px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   padding: 8px 0 10px;
   color: var(--teal);
   font-weight: bold;
   font-size: 14px;
   line-height: 1.25;
   text-align: center;
   text-decoration: none;
}
.site-mark img {
   display: block;
   width: 150px;
   height: auto;
}
.site-mark span {
   max-width: 150px;
}
#header picture {
   flex: 0 0 692px;
   display: block;
   min-width: 0;
   overflow: hidden;
}
.emotion {
   display: block;
   width: 100%;
   height: 179px;
   object-fit: cover;
   object-position: left center;
}

/* menu bar */
#navigation {
   margin-top: 10px;
   background: var(--teal);
}
.nav-toggle {
   display: none;
}
#menu {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0 10px;
   list-style: none;
}
#menu a {
   display: block;
   padding: 12px 20px 11px;
   color: var(--white);
   font-weight: bold;
   font-size: 13px;
   text-decoration: none;
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
#menu a:hover,
#menu a[aria-current="page"],
#menu a.in-section {
   background: var(--teal-deep);
}

#breadcrumb {
   margin: 0 10px;
   padding: 12px 0 10px;
   font-weight: bold;
}
#breadcrumb a {
   color: var(--text);
   font-weight: normal;
   text-decoration-color: var(--teal);
   text-decoration-thickness: 2px;
}
#breadcrumb .sep {
   padding: 0 4px;
   font-weight: normal;
}

/* left teal box + content */
#content {
   display: flex;
   align-items: flex-start;
   gap: 65px;
   margin: 0 10px;
   padding-bottom: 40px;
}
#sidebar {
   flex: 0 0 250px;
   padding: 34px 25px 40px;
   background: var(--teal);
   color: var(--white);
}
#sidebar h2 {
   margin: 0 0 10px;
   font-size: 12px;
   font-weight: bold;
   color: var(--white);
}
#sidebar ul {
   margin: 0 0 22px;
   padding: 0;
   list-style: none;
}
#sidebar li {
   border-top: 1px solid rgba(255, 255, 255, 0.35);
}
#sidebar li:first-child {
   border-top: 0;
}
#sidebar a {
   display: block;
   padding: 7px 0;
   color: var(--white);
   text-decoration: none;
}
#sidebar a:hover,
#sidebar a[aria-current="page"] {
   text-decoration: underline;
   text-underline-offset: 3px;
}
#sidebar a[aria-current="page"] {
   font-weight: bold;
}
#sidebar p {
   margin: 0;
}

#main {
   flex: 1 1 auto;
   min-width: 0;
   max-width: 570px;
   padding-top: 6px;
}
/* the Ratgeber articles are long reads: a size step up keeps the line near 80 characters in the 570px column */
#main.reading {
   font-size: 14px;
   line-height: 1.6;
}
#main.reading h2 {
   font-size: 17px;
   margin-top: 28px;
}
#main.reading h3 {
   font-size: 14px;
}
#main.reading .data,
#main.reading figure.ilu figcaption {
   font-size: 12px;
}
#main h1 {
   margin: 0 0 8px;
   color: var(--heading);
   font-size: 20px;
   line-height: 1.25;
}
#main h2 {
   margin: 22px 0 8px;
   color: var(--text-strong);
   font-size: 14px;
   font-weight: normal;
}
#main h2.lead {
   margin-top: 0;
}
#main h3 {
   margin: 18px 0 6px;
   color: var(--text-strong);
   font-size: 12px;
}
#main p {
   margin: 0 0 12px;
}
#main ul,
#main ol {
   margin: 0 0 12px;
   padding-left: 20px;
}
#main li {
   margin-bottom: 3px;
}
#main strong {
   color: var(--text-strong);
}
#main hr {
   border: 0;
   border-top: 1px solid var(--rule);
   margin: 20px 0;
}

/* chair terms: name, then what it does */
dl.terms {
   margin: 0 0 14px;
}
dl.terms dt {
   margin-top: 8px;
   color: var(--text-strong);
   font-weight: bold;
}
dl.terms dd {
   margin: 2px 0 0 14px;
}
/* overview lists: one line per section, name in bold */
ul.cards {
   padding-left: 0 !important;
   list-style: none;
}
ul.cards li {
   margin: 0;
   padding: 9px 0;
   border-top: 1px solid var(--rule);
}
ul.cards li:last-child {
   border-bottom: 1px solid var(--rule);
}
ul.makers {
   columns: 2;
   column-gap: 24px;
}
ul.checklist {
   padding-left: 0 !important;
   list-style: none;
}
ul.checklist li {
   position: relative;
   padding-left: 22px;
}
ul.checklist li::before {
   content: "";
   position: absolute;
   left: 2px;
   top: 0.3em;
   width: 10px;
   height: 10px;
   border: 2px solid var(--teal);
}

/* generated stand-in picture under the heading */
figure.ilu {
   margin: 10px 0 18px;
}
figure.ilu img {
   display: block;
   width: 100%;
   height: auto;
}
figure.ilu figcaption {
   margin-top: 5px;
   font-size: 11px;
   color: var(--text);
}

/* spec lists from the stock pages: name, then features */
.stock-item {
   margin: 0 0 16px;
   padding-top: 12px;
   border-top: 1px solid var(--rule);
}
#main .stock-item h3 {
   margin-top: 0;
}

/* article footer links */
.see-also {
   margin-top: 26px;
   padding-top: 12px;
   border-top: 1px solid var(--rule);
}
.see-also h2 {
   margin-top: 0 !important;
}

/* Ratgeber: table for comparisons and norms */
.data {
   width: 100%;
   margin: 0 0 14px;
   border-collapse: collapse;
   font-variant-numeric: tabular-nums;
}
.data th,
.data td {
   padding: 6px 8px;
   border-bottom: 1px solid var(--rule);
   text-align: left;
   vertical-align: top;
}
.data th {
   color: var(--text-strong);
}
.table-wrap {
   overflow-x: auto;
}
.note {
   font-size: 11px;
}

#footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   padding: 9px 10px 8px;
   background: var(--footer);
   color: var(--footer-text);
   font-size: 11px;
}
#footer a {
   color: var(--white);
}

/* phone */
@media (max-width: 760px) {
   body {
      font-size: 15px;
      line-height: 1.55;
   }
   #container {
      width: auto;
      padding-top: 0;
   }
   #header {
      width: auto;
      height: 64px;
      margin: 0;
   }
   .site-mark {
      flex: 0 0 auto;
      flex-direction: row;
      gap: 8px;
      padding: 0 10px 0 12px;
      font-size: 12px;
      text-align: left;
   }
   .site-mark img {
      width: 66px;
   }
   .site-mark span {
      max-width: 120px;
   }
   ul.makers {
      columns: 1;
   }
   #header picture {
      flex: 1 1 auto;
   }
   .emotion {
      height: 64px;
   }
   #navigation {
      margin-top: 0;
   }
   .nav-toggle {
      display: block;
      width: 100%;
      min-height: 46px;
      padding: 0 16px;
      border: 0;
      background: var(--teal);
      color: var(--white);
      font: bold 15px Arial, Helvetica, sans-serif;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
   }
   .nav-toggle:active,
   .nav-toggle[aria-expanded="true"] {
      background: var(--teal-deep);
   }
   .nav-toggle::after {
      content: "";
      float: right;
      margin-top: 19px;
      border: 6px solid transparent;
      border-top-color: var(--white);
   }
   .nav-toggle[aria-expanded="true"]::after {
      margin-top: 12px;
      border-top-color: transparent;
      border-bottom-color: var(--white);
   }
   .js #menu {
      display: none;
   }
   .js #menu.open {
      display: block;
   }
   #menu {
      display: block;
      padding: 0 0 6px;
   }
   #menu a {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 0 16px;
      font-size: 15px;
   }
   #breadcrumb {
      margin: 0 16px;
      font-size: 13px;
   }
   #content {
      display: flex;
      flex-direction: column-reverse;
      gap: 0;
      margin: 0;
      padding-bottom: 0;
   }
   #main {
      max-width: none;
      width: 100%;
      padding: 4px 16px 28px;
   }
   #main h1 {
      font-size: 24px;
   }
   #main h2 {
      font-size: 18px;
   }
   #main h3 {
      font-size: 16px;
   }
   #sidebar {
      flex: none;
      width: 100%;
      padding: 22px 16px 26px;
   }
   #sidebar h2 {
      font-size: 15px;
   }
   #sidebar a {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 0;
   }
   figure.ilu figcaption,
   .note {
      font-size: 13px;
   }
   .data {
      font-size: 14px;
   }
   #footer {
      flex-direction: column;
      align-items: flex-start;
      padding: 12px 16px;
      font-size: 13px;
   }
}