:root {
  --default-font-family-stack: tahoma, arial, verdana, helvetica, sans-serif;
  --page-content-font-family-stack: arial, verdana, helvetica, sans-serif;

  --default-layout-width: 931px; /* the only real and beautiful width ;) */
  --default-border-radius: 8px;
  --default-border-radius-always: 8px;
  --default-content-padding-left-right: 1rem;

  --page-content-background-color: #cbcbcb;
  --page-content-background-text: #1f1f1f;

  --page-header-background-color-top: #222222;
  --page-header-background-color-bottom: #0e0e0e;

  --page-content-element-background-color: #222222;
  --page-content-element-text-color: #ffffff;

  --signal-text-color: #fdce02;
  --signal-subtext-color: #7fcde1;

  --header-height: 86px;
  --navtop-text-color: #9fa3a2;
  --navtop-font-size: 11px;

  --headline-container-background-color-top: #ffffff;
  --headline-container-background-color-bottom: #afafaf;
  --headline-container-text-color: #312f30;
  --headline-container-line-height: 32px;

  /* re-check those */
  --article-background-color: #1f1f1f;
  --textbox-text-color: #312f30;
  --article-text-color: #e0e0e0;
  --white-text-color: #ffffff;
  --black: #000;
  --dark-gray: #333;
  --darker-gray: #2d2d2d;
  --light-gray: #fcfcfc;
  --medium-gray: #a7a7a7;
  --default-font-size: 16px;
  --header-box-font-size: 16px;

  /* sofahelden_header.webp is 3788x436; displayed at 955px width it is
	   ~110px tall and spans .navbox_top (25px) + .header (85px) */
  --header-height: 85px;
  --header-bg-size: calc(var(--default-layout-width) + 24px);
  --header-bg-position: -24px 0;
  --nav-inactive-text-color: #9c9c9c;
  --nav-active-text-color: #1c211b;
  --subnav-text-color: #3c352d;

  /* team member info popup (#popup.answers) */
  --popup-background-color: #2f2f2f;
  --popup-header-background-color: #262626;
  /* exactly the height of the popup h3: 1rem * 1.618 + padding top/bottom */
  --popup-header-height: calc(
    1.618rem + 2 * var(--default-content-padding-left-right)
  );
  --popup-right-column-width: 9rem;

  /* image lightbox (jquery.lightbox-0.5); above the #popup panel (1000) */
  --lightbox-z-index: 2000;
  --lightbox-frame-color: var(--article-background-color);
  --lightbox-bar-color: var(--page-content-element-background-color);

  /* review pros / cons header bars */
  --positive-color: #139b0f;
  --negative-color: #9b0f0f;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* https://piccalil.li/blog/a-more-modern-css-reset/ */
html {
  font-size: 100%;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  tab-size: 4;
  color-scheme: light dark;
  hanging-punctuation: first allow-end last;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  color: var(--color-text);
  line-height: 1.618;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  overflow-anchor: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* sofahelden specific */
  font-family: var(--default-font-family-stack);
  background-image: linear-gradient(to bottom, #012030, #326275 50%, #326275);
  font-size: var(--default-font-size);
}

@media (max-width: 930px) {
  body {
    --default-border-radius: 0;
    /* header image scales with the viewport (aspect ratio 436/3788)
		   and is pushed below the navbox strip so they don't overlap */
    --header-height: calc((100vw + 24px) * 0.1151);
    --header-bg-size: calc(100% + 24px);
    --header-bg-position: -10px 25px;
  }
}
@media (min-width: 930px) {
  body {
    --default-font-size: 12px;
  }
}

/* https://piccalil.li/blog/start-implementing-view-transitions-on-your-websites-today/ */
@view-transition {
  navigation: auto;
}

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: 200ms;
}

img {
  display: inline-block;
  max-width: 100%;
  max-inline-size: 100%;
  block-size: auto;
  height: auto;
  border-style: none;
}

b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    Liberation Mono,
    Menlo,
    monospace;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

table {
  border-color: currentcolor;
  caption-side: bottom;
  border-collapse: collapse;
  border-spacing: 0;
}
td {
  padding: 0;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

input::placeholder {
  text-overflow: ellipsis;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

abbr[title] {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
  margin-bottom: 0;
}

ul,
ol,
dl {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1rem;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  color: currentColor;
  /* text-decoration: underline; */
  text-decoration-skip-ink: auto;
}

:target {
  scroll-margin-block: 5ex;
}

/* --------------------------------------------------------------------- */
/* sofahelden - HARD(ER) RESET */
/* --------------------------------------------------------------------- */

#fb-root {
  /* don't know what this was for  */
  display: none;
}

.head > h1,
.head > h2,
.subheader > h2,
.subheader_news > h3 {
  background-color: gray;
  background-image: linear-gradient(
    to bottom,
    var(--headline-container-background-color-top),
    var(--headline-container-background-color-bottom)
  );
  border-radius: var(--default-border-radius);
  line-height: var(--headline-container-line-height);
  font-size: var(--header-box-font-size);
  padding-left: calc(var(--default-content-padding-left-right) * 0.5);
  color: var(--headline-container-text-color);
}

@container page-main-content (width < 99vw) {
  .subheader > h2 {
    margin: calc(var(--default-content-padding-left-right) * 0.5)
      var(--default-content-padding-left-right);
  }
  .subheader_news > h3 {
    margin-right: var(--default-content-padding-left-right);
    margin-bottom: calc(var(--default-content-padding-left-right) * 0.5);
  }
}

/* headlines inside the sidebar-box have an icon in front of them */
.sidebar_box .head > h1 {
  border-radius: var(--default-border-radius-always);
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.sidebar_box .head > h1::before {
  content: "";
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjEuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik02NCAzMjBDNjQgNDYxLjQgMTc4LjYgNTc2IDMyMCA1NzZDNDYxLjQgNTc2IDU3NiA0NjEuNCA1NzYgMzIwQzU3NiAxNzguNiA0NjEuNCA2NCAzMjAgNjRDMTc4LjYgNjQgNjQgMTc4LjYgNjQgMzIwek0zMDUgNDQxQzI5NS42IDQ1MC40IDI4MC40IDQ1MC40IDI3MS4xIDQ0MUMyNjEuOCA0MzEuNiAyNjEuNyA0MTYuNCAyNzEuMSA0MDcuMUwzNTguMSAzMjAuMUwyNzEuMSAyMzMuMUMyNjEuNyAyMjMuNyAyNjEuNyAyMDguNSAyNzEuMSAxOTkuMkMyODAuNSAxODkuOSAyOTUuNyAxODkuOCAzMDUgMTk5LjJMNDA5IDMwM0M0MTguNCAzMTIuNCA0MTguNCAzMjcuNiA0MDkgMzM2LjlMMzA1IDQ0MXoiLz48L3N2Zz4=")
    no-repeat center / contain;

  background-color: currentColor;
  background-color: var(--navtop-text-color);
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.2rem;
}

/* --------------------------------------------------------------------- */
/* sofahelden - BODY */
/* --------------------------------------------------------------------- */

/* drop shadow around the whole content column (replaces dropshadow_*.png) */
.outside_wrapper > .shadow {
  box-shadow:
    -8px 0 8px -6px rgba(0, 0, 0, 0.65),
    8px 0 8px -6px rgba(0, 0, 0, 0.65),
    0 8px 8px -6px rgba(0, 0, 0, 0.65);
  margin-bottom: var(--default-content-padding-left-right);
}

/* gray page background starts below the header so the logo image on
   .outside_wrapper stays visible in the header area */
.outside_wrapper > div > .body {
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--header-height),
    var(--page-content-background-color) var(--header-height)
  );
  color: var(--page-content-background-text);
}

/* --------------------------------------------------------------------- */
/* sofahelden - NAVBOX TOP (Unser Team | FAQ | ...) */
/* --------------------------------------------------------------------- */

.navbox_top {
  padding-right: 0;
}

.navbox_top p {
  display: flex;
  justify-content: right;
  align-items: center;
  height: 100%;
  color: var(--navtop-text-color);
  font-size: var(--navtop-font-size);
  line-height: 24px;
}

.navbox_top p > a {
  display: inline-block;
  white-space: nowrap;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-weight: bold;
}

.navbox_top p > a:last-child {
  flex-shrink: 1000;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 0;
}

/* --------------------------------------------------------------------- */
/* sofahelden - HEADER (logo + search) */
/* --------------------------------------------------------------------- */

.outside_wrapper {
  width: 100%;
  max-width: var(--default-layout-width);
  margin-left: auto;
  margin-right: auto;
  background-position: var(--header-bg-position);
}

.body > .header {
  display: flex;
  justify-content: right;
  align-items: end;
  height: var(--header-height);
}

.shadow > .body > .content {
  background-color: #cbcbcb;
  container-type: inline-size;
  container-name: page-main-content;
}

.header_piece_left {
  left: -7px;
  position: absolute;
  width: 7px;
  height: var(--header-height);
  background-position: -15px -23px;
}

.outside_wrapper,
.header_piece_left {
  background-image: url(/img/sofahelden_header.webp) !important;
  background-size: var(--header-bg-size);
  background-repeat: no-repeat;
}

.outside_wrapper > .shadow {
  position: relative;
}

.shadow_bottom {
  /* not needed anymore - box-shadow 4tw */
  display: none;
}

/* Search Form in Header */
.search {
  margin: calc(var(--default-content-padding-left-right) * 0.5);
}

.search .field {
  width: 150px;
}

.search .button {
  padding: 0.25rem 0.5rem;
}

/* --------------------------------------------------------------------- */
/* sofahelden - MAIN NAVIGATION */
/* --------------------------------------------------------------------- */

.navi {
  /* kept from main.css - no longer load-bearing: below 930px the labels are hidden
	   explicitly via font-size, they are not clipped by this any more */
  overflow: hidden;
  height: auto;
  background-color: var(--article-background-color);
  padding-top: 0.25rem;
}
.navi > ul {
  padding-left: 0;
  display: flex;
  justify-content: space-around;
  gap: 0 0.33rem;
  margin: 0;
}

@media (min-width: 930px) {
  .navi > ul {
    padding-left: var(--default-content-padding-left-right);
    padding-right: var(--default-content-padding-left-right);
  }
}

.navi > ul > li {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 1%;
  min-width: calc(0.5rem + 0.5rem + 1.5em);
}

@media (min-width: 930px) {
  .navi > ul > li {
    min-width: calc(0.75rem + 0.75rem + 1.5em);
    /* size each entry by its label so long ones ("Hard-/Software") are not squeezed */
    flex-basis: auto;
  }
}

.navi > ul > li > a {
  display: block;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  color: var(--navtop-text-color);
  font-weight: bold;

  text-transform: uppercase;
  text-align: center;

  height: 1.75rem;
  line-height: 1.75rem;
}

.navi > ul > li > a.active {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: max-content;
}

@media (min-width: 930px) {
  .navi > ul > li > a {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
  }
}

.navi > ul > li > a.active,
.navi > ul > li > a:hover,
.navi > ul > li > a:focus {
  background-image: linear-gradient(
    to bottom,
    var(--signal-text-color),
    var(--signal-text-color)
  );
  /* top corners only - the pill always sits on the gold .subnavi bar below */
  border-top-left-radius: var(--default-border-radius-always);
  border-top-right-radius: var(--default-border-radius-always);
  color: var(--nav-active-text-color);
}

.navi > ul > li:has(> a.active) {
  flex-shrink: 0;
  flex-grow: 100;
  max-width: max-content;
}

@media (min-width: 930px) {
  .navi > ul > li:has(> a.active) {
    flex-shrink: 1;
    flex-grow: 1;
  }
}

.navi > ul > li > a.active::before {
  display: none;
}

@media (max-width: 930px) {
  .navi > ul {
    /* keeps the rounded active pill off the viewport edge on the first and last
		   entry (home / "Die Woche...") */
    padding-inline: 0.25rem;
  }

  .navi > ul > li {
    min-width: 2.25rem;
  }

  .navi > ul > li > a {
    /* activates the align-items/justify-content declared above: the icon is really
		   centred now instead of riding the baseline of an invisible label */
    display: flex;
    height: auto;
    min-height: 2.25rem;
    line-height: 1;
    /* hides the label text node without dropping it from the accessibility tree.
		   Until now it merely overflowed and got clipped by .navi { overflow: hidden }. */
    font-size: 0;
  }

  .navi > ul > li > a::before {
    background-color: var(--nav-inactive-text-color);
    display: inline-block;
    /* fixed size - no longer tied to an inherited font-size */
    width: 1.25rem;
    height: 1.25rem;
  }

  /* one step above the 0.75rem of the subnavigation pill below */
  .navi > ul > li > a.active {
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
  }
}

/* Nav entry 'home' */
.navi > ul > li:nth-child(1) > a::before {
  content: "";
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjEuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zMDQgNzAuMUMzMTMuMSA2MS45IDMyNi45IDYxLjkgMzM2IDcwLjFMNTY4IDI3OC4xQzU3Ny45IDI4Ni45IDU3OC43IDMwMi4xIDU2OS44IDMxMkM1NjAuOSAzMjEuOSA1NDUuOCAzMjIuNyA1MzUuOSAzMTMuOEw1MjcuOSAzMDYuNkw1MjcuOSA1MTEuOUM1MjcuOSA1NDcuMiA0OTkuMiA1NzUuOSA0NjMuOSA1NzUuOUwxNzUuOSA1NzUuOUMxNDAuNiA1NzUuOSAxMTEuOSA1NDcuMiAxMTEuOSA1MTEuOUwxMTEuOSAzMDYuNkwxMDMuOSAzMTMuOEM5NCAzMjIuNiA3OC45IDMyMS44IDcwIDMxMkM2MS4xIDMwMi4yIDYyIDI4NyA3MS44IDI3OC4xTDMwNCA3MC4xek0zMjAgMTIwLjJMMTYwIDI2My43TDE2MCA1MTJDMTYwIDUyMC44IDE2Ny4yIDUyOCAxNzYgNTI4TDIyNCA1MjhMMjI0IDQyNEMyMjQgMzg0LjIgMjU2LjIgMzUyIDI5NiAzNTJMMzQ0IDM1MkMzODMuOCAzNTIgNDE2IDM4NC4yIDQxNiA0MjRMNDE2IDUyOEw0NjQgNTI4QzQ3Mi44IDUyOCA0ODAgNTIwLjggNDgwIDUxMkw0ODAgMjYzLjdMMzIwIDEyMC4zek0yNzIgNTI4TDM2OCA1MjhMMzY4IDQyNEMzNjggNDEwLjcgMzU3LjMgNDAwIDM0NCA0MDBMMjk2IDQwMEMyODIuNyA0MDAgMjcyIDQxMC43IDI3MiA0MjRMMjcyIDUyOHoiLz48L3N2Zz4=")
    no-repeat center / contain;
}

/* Nav entry 'movies' */
.navi > ul > li:nth-child(2) > a::before {
  content: "";
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjEuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0xOTIgMTI4QzE5MiA5Mi43IDIyMC43IDY0IDI1NiA2NEw1NzYgNjRDNjExLjMgNjQgNjQwIDkyLjcgNjQwIDEyOEw2NDAgMzUyQzY0MCAzODcuMyA2MTEuMyA0MTYgNTc2IDQxNkwyNTYgNDE2QzIyMC43IDQxNiAxOTIgMzg3LjMgMTkyIDM1MkwxOTIgMTI4ek0zMjAgMTYwQzMyMCAxNDIuMyAzMDUuNyAxMjggMjg4IDEyOEMyNzAuMyAxMjggMjU2IDE0Mi4zIDI1NiAxNjBDMjU2IDE3Ny43IDI3MC4zIDE5MiAyODggMTkyQzMwNS43IDE5MiAzMjAgMTc3LjcgMzIwIDE2MHpNNDc2LjUgMTcxLjVDNDcyLjEgMTY0LjQgNDY0LjQgMTYwIDQ1NiAxNjBDNDQ3LjYgMTYwIDQzOS45IDE2NC40IDQzNS41IDE3MS41TDM4MS41IDI1OS44TDM2My42IDIzNC4yQzM1OS4xIDIyNy44IDM1MS44IDIyNCAzNDMuOSAyMjRDMzM2IDIyNCAzMjguNyAyMjcuOCAzMjQuMiAyMzQuMkwyNjguMiAzMTQuMkMyNjMuMSAzMjEuNSAyNjIuNCAzMzEuMSAyNjYuNiAzMzlDMjcwLjggMzQ2LjkgMjc5LjEgMzUyIDI4OCAzNTJMNTQ0IDM1MkM1NTIuNyAzNTIgNTYwLjcgMzQ3LjMgNTY0LjkgMzM5LjdDNTY5LjEgMzMyLjEgNTY5IDMyMi45IDU2NC40IDMxNS40TDQ3Ni40IDE3MS40ek0xNDQgMTkyTDE0NCAzNTJDMTQ0IDQxMy45IDE5NC4xIDQ2NCAyNTYgNDY0TDQ0OCA0NjRMNDQ4IDQ4MEM0NDggNTE1LjMgNDE5LjMgNTQ0IDM4NCA1NDRMNjQgNTQ0QzI4LjcgNTQ0IDAgNTE1LjMgMCA0ODBMMCAyNTZDMCAyMjAuNyAyOC43IDE5MiA2NCAxOTJMMTQ0IDE5MnpNNTIgMjYwTDUyIDI4NEM1MiAyOTIuOCA1OS4yIDMwMCA2OCAzMDBMOTIgMzAwQzEwMC44IDMwMCAxMDggMjkyLjggMTA4IDI4NEwxMDggMjYwQzEwOCAyNTEuMiAxMDAuOCAyNDQgOTIgMjQ0TDY4IDI0NEM1OS4yIDI0NCA1MiAyNTEuMiA1MiAyNjB6TTY4IDM0MEM1OS4yIDM0MCA1MiAzNDcuMiA1MiAzNTZMNTIgMzgwQzUyIDM4OC44IDU5LjIgMzk2IDY4IDM5Nkw5MiAzOTZDMTAwLjggMzk2IDEwOCAzODguOCAxMDggMzgwTDEwOCAzNTZDMTA4IDM0Ny4yIDEwMC44IDM0MCA5MiAzNDBMNjggMzQwek02OCA0MzZDNTkuMiA0MzYgNTIgNDQzLjIgNTIgNDUyTDUyIDQ3NkM1MiA0ODQuOCA1OS4yIDQ5MiA2OCA0OTJMOTIgNDkyQzEwMC44IDQ5MiAxMDggNDg0LjggMTA4IDQ3NkwxMDggNDUyQzEwOCA0NDMuMiAxMDAuOCA0MzYgOTIgNDM2TDY4IDQzNnoiLz48L3N2Zz4=")
    no-repeat center / contain;
}

/* Nav entry 'games' */
.navi > ul > li:nth-child(3) > a::before {
  content: "";
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjEuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik00NDggMTI4QzU1NCAxMjggNjQwIDIxNCA2NDAgMzIwQzY0MCA0MjYgNTU0IDUxMiA0NDggNTEyTDE5MiA1MTJDODYgNTEyIDAgNDI2IDAgMzIwQzAgMjE0IDg2IDEyOCAxOTIgMTI4TDQ0OCAxMjh6TTE5MiAyNDBDMTc4LjcgMjQwIDE2OCAyNTAuNyAxNjggMjY0TDE2OCAyOTZMMTM2IDI5NkMxMjIuNyAyOTYgMTEyIDMwNi43IDExMiAzMjBDMTEyIDMzMy4zIDEyMi43IDM0NCAxMzYgMzQ0TDE2OCAzNDRMMTY4IDM3NkMxNjggMzg5LjMgMTc4LjcgNDAwIDE5MiA0MDBDMjA1LjMgNDAwIDIxNiAzODkuMyAyMTYgMzc2TDIxNiAzNDRMMjQ4IDM0NEMyNjEuMyAzNDQgMjcyIDMzMy4zIDI3MiAzMjBDMjcyIDMwNi43IDI2MS4zIDI5NiAyNDggMjk2TDIxNiAyOTZMMjE2IDI2NEMyMTYgMjUwLjcgMjA1LjMgMjQwIDE5MiAyNDB6TTQzMiAzMzZDNDE0LjMgMzM2IDQwMCAzNTAuMyA0MDAgMzY4QzQwMCAzODUuNyA0MTQuMyA0MDAgNDMyIDQwMEM0NDkuNyA0MDAgNDY0IDM4NS43IDQ2NCAzNjhDNDY0IDM1MC4zIDQ0OS43IDMzNiA0MzIgMzM2ek00OTYgMjQwQzQ3OC4zIDI0MCA0NjQgMjU0LjMgNDY0IDI3MkM0NjQgMjg5LjcgNDc4LjMgMzA0IDQ5NiAzMDRDNTEzLjcgMzA0IDUyOCAyODkuNyA1MjggMjcyQzUyOCAyNTQuMyA1MTMuNyAyNDAgNDk2IDI0MHoiLz48L3N2Zz4=")
    no-repeat center / contain;
}

/* Nav entry 'sonstiges' */
.navi > ul > li:nth-child(4) > a::before {
  content: "";
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjMuMSBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI2IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik00ODIuNCAyMjEuOUM1MTcuNyAyMTMuNiA1NDQgMTgxLjkgNTQ0IDE0NEM1NDQgOTkuOCA1MDguMiA2NCA0NjQgNjRDNDIwLjYgNjQgMzg1LjMgOTguNSAzODQgMTQxLjVMMjAwLjIgMjE1LjFDMTg1LjcgMjAwLjggMTY1LjkgMTkyIDE0NCAxOTJDOTkuOCAxOTIgNjQgMjI3LjggNjQgMjcyQzY0IDMxNi4yIDk5LjggMzUyIDE0NCAzNTJDMTU2LjIgMzUyIDE2Ny44IDM0OS4zIDE3OC4xIDM0NC40TDMyMy43IDQ3MS44QzMyMS4zIDQ3OS40IDMyMCA0ODcuNiAzMjAgNDk2QzMyMCA1NDAuMiAzNTUuOCA1NzYgNDAwIDU3NkM0NDQuMiA1NzYgNDgwIDU0MC4yIDQ4MCA0OTZDNDgwIDQ2OC4zIDQ2NiA0NDMuOSA0NDQuNiA0MjkuNkw0ODIuNCAyMjEuOXpNMjIwLjMgMjk2LjJDMjIyLjUgMjg5LjMgMjIzLjggMjgyIDIyNCAyNzQuNUw0MDcuOCAyMDFDNDExLjQgMjA0LjUgNDE1LjIgMjA3LjcgNDE5LjQgMjEwLjVMMzgxLjYgNDE4LjFDMzc2LjEgNDE5LjQgMzcwLjggNDIxLjIgMzY1LjggNDIzLjZMMjIwLjMgMjk2LjJ6Ii8+PC9zdmc+")
    no-repeat center / contain;
}

/* Nav entry 'podcast' */
.navi > ul > li:nth-child(5) > a::before {
  content: "";
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjEuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zMjAgNjRDMjY3IDY0IDIyNCAxMDcgMjI0IDE2MEwyMjQgMjg4QzIyNCAzNDEgMjY3IDM4NCAzMjAgMzg0QzM3MyAzODQgNDE2IDM0MSA0MTYgMjg4TDQxNiAxNjBDNDE2IDEwNyAzNzMgNjQgMzIwIDY0ek0xNzYgMjQ4QzE3NiAyMzQuNyAxNjUuMyAyMjQgMTUyIDIyNEMxMzguNyAyMjQgMTI4IDIzNC43IDEyOCAyNDhMMTI4IDI4OEMxMjggMzg1LjkgMjAxLjMgNDY2LjcgMjk2IDQ3OC41TDI5NiA1MjhMMjQ4IDUyOEMyMzQuNyA1MjggMjI0IDUzOC43IDIyNCA1NTJDMjI0IDU2NS4zIDIzNC43IDU3NiAyNDggNTc2TDM5MiA1NzZDNDA1LjMgNTc2IDQxNiA1NjUuMyA0MTYgNTUyQzQxNiA1MzguNyA0MDUuMyA1MjggMzkyIDUyOEwzNDQgNTI4TDM0NCA0NzguNUM0MzguNyA0NjYuNyA1MTIgMzg1LjkgNTEyIDI4OEw1MTIgMjQ4QzUxMiAyMzQuNyA1MDEuMyAyMjQgNDg4IDIyNEM0NzQuNyAyMjQgNDY0IDIzNC43IDQ2NCAyNDhMNDY0IDI4OEM0NjQgMzY3LjUgMzk5LjUgNDMyIDMyMCA0MzJDMjQwLjUgNDMyIDE3NiAzNjcuNSAxNzYgMjg4TDE3NiAyNDh6Ii8+PC9zdmc+")
    no-repeat center / contain;
}

/* Nav entry 'hard/software' */
.navi > ul > li:nth-child(6) > a::before {
  content: "";
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjEuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zODAuOCA5NkMzNzIuNyAxMTAuMSAzNjggMTI2LjUgMzY4IDE0NEwzNjggMTYwTDk2IDE2MEw5NiAzODRMMzY4IDM4NEwzNjggNDQ4TDk2IDQ0OEM2MC43IDQ0OCAzMiA0MTkuMyAzMiAzODRMMzIgMTYwQzMyIDEyNC43IDYwLjcgOTYgOTYgOTZMMzgwLjggOTZ6TTM2OCA0OTZDMzY4IDUxMy41IDM3Mi43IDUyOS45IDM4MC44IDU0NEwxNTIgNTQ0QzEzOC43IDU0NCAxMjggNTMzLjMgMTI4IDUyMEMxMjggNTA2LjcgMTM4LjcgNDk2IDE1MiA0OTZMMzY4IDQ5NnpNNDY0IDk2TDU2MCA5NkM1ODYuNSA5NiA2MDggMTE3LjUgNjA4IDE0NEw2MDggNDk2QzYwOCA1MjIuNSA1ODYuNSA1NDQgNTYwIDU0NEw0NjQgNTQ0QzQzNy41IDU0NCA0MTYgNTIyLjUgNDE2IDQ5Nkw0MTYgMTQ0QzQxNiAxMTcuNSA0MzcuNSA5NiA0NjQgOTZ6TTQ4OCAxNjBDNDc0LjcgMTYwIDQ2NCAxNzAuNyA0NjQgMTg0QzQ2NCAxOTcuMyA0NzQuNyAyMDggNDg4IDIwOEw1MzYgMjA4QzU0OS4zIDIwOCA1NjAgMTk3LjMgNTYwIDE4NEM1NjAgMTcwLjcgNTQ5LjMgMTYwIDUzNiAxNjBMNDg4IDE2MHpNNDg4IDI1NkM0NzQuNyAyNTYgNDY0IDI2Ni43IDQ2NCAyODBDNDY0IDI5My4zIDQ3NC43IDMwNCA0ODggMzA0TDUzNiAzMDRDNTQ5LjMgMzA0IDU2MCAyOTMuMyA1NjAgMjgwQzU2MCAyNjYuNyA1NDkuMyAyNTYgNTM2IDI1Nkw0ODggMjU2ek01NDQgNDAwQzU0NCAzODIuMyA1MjkuNyAzNjggNTEyIDM2OEM0OTQuMyAzNjggNDgwIDM4Mi4zIDQ4MCA0MDBDNDgwIDQxNy43IDQ5NC4zIDQzMiA1MTIgNDMyQzUyOS43IDQzMiA1NDQgNDE3LjcgNTQ0IDQwMHoiLz48L3N2Zz4=")
    no-repeat center / contain;
}

/* skip 'die Woche' if there is not enough space */
.navi > ul > li:nth-child(7) > a::before {
  content: "";
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjMuMSBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI2IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0yMTYgNjRDMjI5LjMgNjQgMjQwIDc0LjcgMjQwIDg4TDI0MCAxMjhMNDAwIDEyOEw0MDAgODhDNDAwIDc0LjcgNDEwLjcgNjQgNDI0IDY0QzQzNy4zIDY0IDQ0OCA3NC43IDQ0OCA4OEw0NDggMTI4TDQ4MCAxMjhDNTE1LjMgMTI4IDU0NCAxNTYuNyA1NDQgMTkyTDU0NCA0ODBDNTQ0IDUxNS4zIDUxNS4zIDU0NCA0ODAgNTQ0TDE2MCA1NDRDMTI0LjcgNTQ0IDk2IDUxNS4zIDk2IDQ4MEw5NiAxOTJDOTYgMTU2LjcgMTI0LjcgMTI4IDE2MCAxMjhMMTkyIDEyOEwxOTIgODhDMTkyIDc0LjcgMjAyLjcgNjQgMjE2IDY0ek00ODAgNDk2QzQ4OC44IDQ5NiA0OTYgNDg4LjggNDk2IDQ4MEw0OTYgNDE2TDQwOCA0MTZMNDA4IDQ5Nkw0ODAgNDk2ek00OTYgMzY4TDQ5NiAyODhMNDA4IDI4OEw0MDggMzY4TDQ5NiAzNjh6TTM2MCAzNjhMMzYwIDI4OEwyODAgMjg4TDI4MCAzNjhMMzYwIDM2OHpNMjMyIDM2OEwyMzIgMjg4TDE0NCAyODhMMTQ0IDM2OEwyMzIgMzY4ek0xNDQgNDE2TDE0NCA0ODBDMTQ0IDQ4OC44IDE1MS4yIDQ5NiAxNjAgNDk2TDIzMiA0OTZMMjMyIDQxNkwxNDQgNDE2ek0yODAgNDE2TDI4MCA0OTZMMzYwIDQ5NkwzNjAgNDE2TDI4MCA0MTZ6TTIxNiAxNzZMMTYwIDE3NkMxNTEuMiAxNzYgMTQ0IDE4My4yIDE0NCAxOTJMMTQ0IDI0MEw0OTYgMjQwTDQ5NiAxOTJDNDk2IDE4My4yIDQ4OC44IDE3NiA0ODAgMTc2TDIxNiAxNzZ6Ii8+PC9zdmc+")
    no-repeat center / contain;
}

.navi > ul > li:nth-child(7) {
  flex-shrink: 1000;
}

/* --------------------------------------------------------------------- */
/* sofahelden - SUB NAVIGATION (gold bar) */
/* --------------------------------------------------------------------- */

.subnavi {
  height: auto;
  background-image: linear-gradient(
    to bottom,
    var(--signal-text-color),
    var(--signal-text-color)
  );
  /* the entries paint their own background, so clip them to the rounded corners */
  overflow: hidden;
}

@media (min-width: 930px) {
  .subnavi {
    /* main.css pins the bar at a fixed 22px on every page; without this an empty
		   flex <p> collapses the gold rule to nothing on the pages that have no
		   sub-entries (homepage, Kontakt, unserteam) */
    min-height: 22px;
  }

  /* ... but a 22px field of signal colour with nothing in it is too loud, so those
	   pages get the same thin band the mobile bar reduces to */
  .subnavi:not(:has(a)) {
    min-height: 0.25rem;
  }
}

.subnavi > p {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.5rem;
}

.subnavi > p > a {
  flex: 1 1 auto;
  text-align: center;
  padding-top: 0;
  line-height: 22px;
  /* fallback only: a single label wider than the whole row */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.subnavi > p > a:hover,
.subnavi > p > a:focus-visible,
.subnavi > p > a.active {
  /* replaces subnav_bg_hover.gif from main.css (gradient #fff1ea -> #b2b5ac) */
  background-image: linear-gradient(
    to bottom,
    var(--headline-container-background-color-top),
    var(--headline-container-background-color-bottom)
  );
  color: var(--headline-container-text-color);
  box-shadow:
    inset 1px 0 0 #c5af4a,
    inset -1px 0 0 #c5af4a;
}

/* Below 930px the entries wrap into three rows - the gold stops being a rule and
   becomes a surface. A field of the signal color out-shouts the content it navigates
   to, so the bar inverts: dark panel, gold edge, gold labels. The active category
   repeats the gold pill of the main navigation directly above it. Pages without
   sub-entries keep the gold edge alone, so the active pill always has a rule to
   sit on. */
@media (max-width: 930px) {
  .subnavi {
    background-image: none;
    background-color: var(--darker-gray);
    border-top: 0.25rem solid var(--signal-text-color);
  }

  /* pages without sub-entries keep the gold edge - it is the rule the active pill
	   sits on - but must not show an empty dark panel below it */
  .subnavi:not(:has(a)) > p {
    display: none;
  }

  .subnavi > p {
    gap: 0.15rem 0.25rem;
    padding: 0.4rem 0.4rem 0.5rem;
  }

  .subnavi > p > a {
    color: var(--signal-text-color);
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* 32px tap target: WCAG 2.5.8 (AA) asks for 24px, so this keeps a third of
		   that as headroom. Do not go below - at 28px the entries stop reading as
		   buttons and thumb accuracy drops noticeably. */
    line-height: 2rem;
    padding-inline: 0.5rem;
    border-radius: var(--default-border-radius-always);
  }

  .subnavi > p > a:hover,
  .subnavi > p > a.active {
    background-image: linear-gradient(
      to bottom,
      var(--signal-text-color),
      var(--signal-text-color)
    );
    color: var(--nav-active-text-color);
    box-shadow: none;
  }

  /* must stay distinguishable from .active, which owns the gold pill */
  .subnavi > p > a:focus-visible {
    background-image: none;
    color: var(--signal-text-color);
    box-shadow: none;
    outline: 2px solid var(--white-text-color);
    outline-offset: 2px;
  }
}

.subnavi > p > span {
  display: none;
}

/* --------------------------------------------------------------------- */
/* sofahelden - Homepage / Category Pages
/* --------------------------------------------------------------------- */

.content_bars {
  display: grid;
  gap: var(--default-content-padding-left-right);
  grid-template-columns: minmax(1px, 1fr) minmax(1px, 1fr);
}

.divbar_left,
.divbar_right {
  border-radius: var(--default-border-radius);
  background-color: var(--page-content-element-background-color);
  color: var(--page-content-element-text-color);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.65);
}

/* --------------------------------------------------------------------- */
/* sofahelden -Homepage / Category Pages SUBHEADER (slider with teasers)
/* --------------------------------------------------------------------- */

.subheader {
  background-color: var(--article-background-color);
  display: grid;
  grid-template-areas: "header_slideshow news" "slideshow news";
  grid-template-columns: 1fr 256px;
}

.slideshow_h2 {
  grid-area: header_slideshow;
}

.subheader > .slideshow,
.subheader > .slideshow_thumbs {
  grid-area: slideshow;
}

.subheader_news {
  grid-area: news;
  container-type: inline-size;
  container-name: page-main-content-right;
}

@container page-main-content (width < 99vw) {
  .subheader_news {
    padding: calc(var(--default-content-padding-left-right) / 2);
  }
}

.subheader > .slideshow {
  position: relative;
  margin-left: calc(2 * var(--default-content-padding-left-right));
  margin-right: var(--default-content-padding-left-right);
  width: calc(100% - 3 * var(--default-content-padding-left-right)) !important;
  height: auto !important;
}

@media (max-width: 930px) {
  .subheader {
    grid-template-areas: "header_slideshow" "slideshow" "slideshow_thumbs" "news";
    grid-template-columns: 1fr;
  }

  .subheader > .slideshow_thumbs {
    grid-area: slideshow_thumbs;
  }

  .subheader > .slideshow {
    margin-left: 0;
    margin-right: 0;
    width: 100% !important;
  }
}

/* There are the actual slides */
.subheader > .slideshow > div {
  width: 100% !important;
  height: auto !important;
}

.subheader > .slideshow > div img {
  width: 100% !important;
}

.subheader > .slideshow > div > a {
  display: block;
}

.subheader
  > .slideshow_thumbs:has(> a.activeSlide:nth-child(1))
  ~ .slideshow
  > div:nth-child(1),
.subheader
  > .slideshow_thumbs:has(> a.activeSlide:nth-child(2))
  ~ .slideshow
  > div:nth-child(2),
.subheader
  > .slideshow_thumbs:has(> a.activeSlide:nth-child(3))
  ~ .slideshow
  > div:nth-child(3),
.subheader
  > .slideshow_thumbs:has(> a.activeSlide:nth-child(4))
  ~ .slideshow
  > div:nth-child(4) {
  position: static !important;
}

/* Slide-Caption */
.subheader > .slideshow > div > div {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgba(20, 20, 20, 0.85);
  color: var(--signal-text-color);
  padding: 1rem 1rem 1rem 128px;
  pointer-events: none;
}

@media (max-width: 930px) {
  .subheader > .slideshow > div > div {
    padding: 1rem;
    position: static;
  }
}

.subheader > .slideshow .slideshow_texts_panel {
  display: none;
}

.subheader > .slideshow_thumbs {
  margin-left: var(--default-content-padding-left-right);
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.5rem 0;
  margin-top: var(--default-content-padding-left-right);
  margin-bottom: var(--default-content-padding-left-right);
  width: max-content;
}

@media (max-width: 930px) {
  .subheader > .slideshow_thumbs {
    flex-direction: row;
    justify-content: center;
    gap: 0 var(--default-content-padding-left-right);
    margin-left: var(--default-content-padding-left-right);
    margin-right: var(--default-content-padding-left-right);
    width: auto;
  }
}

.subheader > .slideshow_thumbs > a {
  display: inline-block;
  line-height: 0;
  max-width: max-content;
  width: min(max-content, 100%);
  border: 2px solid var(--article-background-color);
}

.subheader > .slideshow_thumbs > a.activeSlide {
  border: 2px solid var(--signal-text-color);
}
.subheader > .slideshow_thumbs > a > img {
  display: inline-block;
  line-height: 0;
}

/* Subheader news */

.subheader_news {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
}

.subheader_news h3 {
  grid-column: 1 / -1;
}

.subheader_news h3:not(:has(+ table)) {
  display: none;
}

.subheader_news table {
  table-layout: fixed;
  min-width: 0;
  width: 100%;
}

.subheader_news table:has(~ table) {
  margin-bottom: calc(var(--default-content-padding-left-right) / 4);
}

.subheader_news .line {
  display: none;
}

.subheader_news table td {
  padding-top: calc(var(--default-content-padding-left-right) / 4);
  padding-bottom: calc(var(--default-content-padding-left-right) / 4);
}

.subheader_news table td:first-child {
  width: 40px;
}

.subheader_news table td:first-child img {
  min-width: 40px;
}

.subheader_news table a {
  color: var(--signal-text-color);
  font-weight: normal;
  padding-left: calc(var(--default-content-padding-left-right) / 2);
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

.subheader_news table p {
  color: var(--signal-subtext-color);
  font-size: 0.875em;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: calc(var(--default-content-padding-left-right) / 2);
}

/* --------------------------------------------------------------------- */
/* sofahelden - Homepage / Category subentries
/* --------------------------------------------------------------------- */

.subheader ~ table .divbar_left,
.subheader ~ table .divbar_right {
  padding: var(--default-content-padding-left-right);
}

.subheader ~ table .content_bars h2 {
  color: var(--signal-text-color);
}

.subheader ~ table .content_bars h4 {
  color: var(--signal-text-color);
  padding-top: var(--default-content-padding-left-right);
  padding-bottom: calc(var(--default-content-padding-left-right) / 2);
  display: flex;
  align-items: center;
}

.subheader ~ table .content_bars a img {
  border: 1px solid var(--signal-subtext-color);
  width: 100%;
}

.subheader ~ table .content_bars p {
  display: flex;
  justify-content: space-between;
}

.subheader ~ table .content_bars p > span {
  color: var(--signal-subtext-color);
  font-size: 0.75rem;
}

.subheader ~ table .article_list_bottom {
  padding-top: var(--default-content-padding-left-right);
  padding-left: 0;
}

.subheader ~ table .article_list_bottom > li {
  display: flex;
  align-items: center;
}

.subheader ~ table .article_list_bottom a {
  color: var(--signal-text-color);
}

/* --------------------------------------------------------------------- */
/* sofahelden - Homepage / Category subentries on a narrow column
/* --------------------------------------------------------------------- */

/* One bar per row, and the image cards become a horizontal snap scroller.
   Those cards are unclassed <div>s without a wrapper of their own, so the bar itself
   has to be the scroll container: a column flow grid whose second row holds the cards,
   while the headline (row 1) and the text only list (row 3) are pinned with
   position: sticky and therefore appear to stand still while the cards move. */
@container page-main-content-left (max-width: 640px) {
  .content_bars {
    grid-template-columns: 1fr;
  }

  /* only bars with more than one card become a scroller - the single card ones
	   ("Hard-/Softwareviews", "Events") stay a plain, full width block */
  .subheader
    ~ table
    .content_bars
    > div:has(> div:not([class]) ~ div:not([class])) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 22rem);
    grid-template-rows: auto auto auto;
    column-gap: var(--default-content-padding-left-right);

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--default-content-padding-left-right);

    /* lets the 100cqi below resolve against the visible width, not the scrolled one */
    container-type: inline-size;

    scrollbar-width: thin;
    scrollbar-color: var(--signal-subtext-color) transparent;
  }

  /* the sticky offset is exactly the bar padding, so nothing jumps the moment
	   sticky positioning takes over */
  .subheader
    ~ table
    .content_bars
    > div:has(> div:not([class]) ~ div:not([class]))
    > h2,
  .subheader
    ~ table
    .content_bars
    > div:has(> div:not([class]) ~ div:not([class]))
    > .article_mini_sub {
    grid-column: 1;
    position: sticky;
    /* offsets are measured from the content box, i.e. inside the bar padding */
    left: 0;
    width: 100cqi;
  }

  .subheader
    ~ table
    .content_bars
    > div:has(> div:not([class]) ~ div:not([class]))
    > h2 {
    grid-row: 1;
  }

  .subheader
    ~ table
    .content_bars
    > div:has(> div:not([class]) ~ div:not([class]))
    > .article_mini_sub {
    grid-row: 3;
  }

  .subheader
    ~ table
    .content_bars
    > div:has(> div:not([class]) ~ div:not([class]))
    > div:not([class]) {
    grid-row: 2;
    scroll-snap-align: start;
  }

  /* CSS only pagination dots, Chromium 135+; absent everywhere else */
  @supports (scroll-marker-group: after) {
    .subheader
      ~ table
      .content_bars
      > div:has(> div:not([class]) ~ div:not([class])) {
      scroll-marker-group: after;
      /* the dot row is laid out after the bar, so the bar reserves the space
			   and the group is pulled back into it */
      padding-bottom: calc(var(--default-content-padding-left-right) + 2.25rem);
    }

    .subheader
      ~ table
      .content_bars
      > div:has(> div:not([class]) ~ div:not([class]))::scroll-marker-group {
      margin-top: -2.25rem;
      height: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: calc(var(--default-content-padding-left-right) / 2);
    }

    .subheader
      ~ table
      .content_bars
      > div:has(> div:not([class]) ~ div:not([class]))
      > div:not([class])::scroll-marker {
      content: "";
      width: 0.625rem;
      height: 0.625rem;
      border: 1px solid var(--signal-subtext-color);
      border-radius: 50%;
    }

    .subheader
      ~ table
      .content_bars
      > div:has(> div:not([class]) ~ div:not([class]))
      > div:not([class])::scroll-marker:target-current {
      background-color: var(--signal-text-color);
      border-color: var(--signal-text-color);
    }
  }

  /* the single card bars ("Hard-/Softwareviews", "Events") keep their card at the
	   width of a scroller card - the source images are only 272px wide and would
	   simply blur when stretched across a wide column */
  .subheader
    ~ table
    .content_bars
    > div:not(:has(> div:not([class]) ~ div:not([class])))
    > div:not([class]) {
    max-width: 22rem;
  }

  /* uniform cards: every article image is 272x118, so a fixed ratio keeps the
	   rows aligned and stops the layout from jumping while the images load */
  .subheader ~ table .content_bars > div > div:not([class]) > a > img {
    aspect-ratio: 272 / 118;
    object-fit: cover;
  }

  .subheader ~ table .content_bars h4 {
    align-items: flex-start;
  }

  .subheader ~ table .content_bars h4 > a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-width: 0;
    min-height: 2lh;
    overflow: hidden;
  }

  .subheader ~ table .content_bars p {
    flex-wrap: wrap;
    gap: 0 var(--default-content-padding-left-right);
  }

  /* comfortable tap targets for the text only entries below the cards */
  .subheader ~ table .article_list_bottom > li {
    min-height: 2.75rem;
  }

  .subheader ~ table .article_list_bottom > li > a {
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------- */
/* sofahelden - HEADER (V2)
/* --------------------------------------------------------------------- */

.header_v2 {
  background-image: linear-gradient(
    to bottom,
    var(--page-header-background-color-top),
    var(--page-header-background-color-bottom)
  );
  padding-top: var(--default-content-padding-left-right);
  padding-bottom: var(--default-content-padding-left-right);
}

/* --------------------------------------------------------------------- */
/* sofahelden - HEADER (V2) - DETAILS PAGE
/* --------------------------------------------------------------------- */

.header_v2 .textbox > table {
  margin-left: calc(var(--default-content-padding-left-right) * 0.5);
  margin-right: calc(var(--default-content-padding-left-right) * 0.5);
  width: calc(100% - var(--default-content-padding-left-right));
}

.header_v2 .textbox > table > tbody > tr > td.field {
  color: var(--white-text-color);
  min-height: 24px;
  white-space: nowrap;
  padding-right: calc(var(--default-content-padding-left-right) * 0.5);
}

@media (min-width: 480px) {
  .header_v2 .textbox > table > tbody > tr > td {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    vertical-align: top;
  }

  /* width 1% + nowrap: the label column shrinks to its longest label, so the
	   values start right after it instead of halfway across the box */
  .header_v2 .textbox > table > tbody > tr > td.field {
    width: 1%;
    text-transform: uppercase;
  }
}

.header_v2 .textbox > table > tbody > tr > td.value {
  color: var(--signal-text-color);
}

.header_v2 .textbox > table > tbody > tr > td.value a {
  color: var(--signal-text-color);
}

@media (max-width: 480px) {
  .header_v2 .textbox > table {
    margin-left: var(--default-content-padding-left-right);
    margin-right: var(--default-content-padding-left-right);
  }

  .header_v2 .textbox > table > tbody > tr > td.field {
    font-size: 85%;
    line-height: 1em;
    display: block;
    min-height: 0;
    margin-top: 0.75rem;
  }
  .header_v2 .textbox > table > tbody > tr > td.value {
    display: block;
  }
}

.header_v2 > table,
.header_v2 > table > tbody,
.header_v2 > table > tbody > tr,
.header_v2 > table > tbody > tr > td {
  display: block;
}

.header_v2 > table > tbody > tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--default-content-padding-left-right);
}

/* product/article image */
.header_v2 > table > tbody > tr > .left {
  grid-column: 1;
  grid-row: 2;
  text-align: left;
  padding-left: var(--default-content-padding-left-right);
  /* padding-right: calc(var(--default-content-padding-left-right) / 2); */
}

.header_v2 > table > tbody > tr > .left img {
  padding: 0;
}

.header_v2 > table > tbody > tr > .middle {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row: 1;
  position: relative;
}

.header_v2 > table > tbody > tr > .right {
  grid-column: 2;
  grid-row: 2;
  /* padding-left: calc(var(--default-content-padding-left-right) / 2); */
  padding-right: var(--default-content-padding-left-right);
}

.fskusk {
  position: absolute;
  top: calc(3 * var(--default-content-padding-left-right));
  right: var(--default-content-padding-left-right);
}

@media (min-width: 931px) {
  .header_v2 > table > tbody > tr {
    grid-template-columns: 186px auto max-content;
  }

  .header_v2 > table > tbody > tr > .left,
  .header_v2 > table > tbody > tr > .middle,
  .header_v2 > table > tbody > tr > .right {
    grid-row: 1;
    grid-column: auto;
  }
}

.header_v2 > table > tbody > tr > .right .head h2 {
  border-radius: var(--default-border-radius-always);
}

.header_v2 .rating {
  max-width: 220px;
  min-height: 114px; /* height of rating-image */
  padding-top: 1px;
  color: var(--signal-text-color);
}

.header_v2 .rating > img {
  position: absolute;
  top: auto;
  left: auto;
}

.header_v2 .rating > img ~ p {
  position: static;
  margin-left: 110px;
  margin-top: 10px;
  white-space: nowrap;
  text-align: center;
  border: 2px solid var(--article-text-color);
  border-radius: 2px;
  width: 110px;
  height: 100px;
  line-height: 75px;
  font-size: 60px;
  font-weight: bold;
}

.header_v2 .rating > .rate_text p {
  position: static;
  margin-left: 110px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  margin-top: -25px;
  width: 110px;
}

/* --------------------------------------------------------------------- */
/* sofahelden - Content (Review page)
/* --------------------------------------------------------------------- */

/* CONTENT TABLE ---------------------------------- */
.content > table,
.content > table > tbody {
  display: block;
}

.content > table {
  box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.99);
  padding-top: var(--default-content-padding-left-right);
  padding-bottom: var(--default-content-padding-left-right);
}

.content > table > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: var(--default-content-padding-left-right);
}

.content > table > tbody > tr > td:has(> .left) {
  flex-basis: 512px;
  flex-shrink: 1;
  flex-grow: 99;
  container-type: inline-size;
  container-name: page-main-content-left;
}

.content > table > tbody > tr > td:has(> .right) {
  flex-basis: 256px;
  flex-shrink: 0;
  flex-grow: 1;
  container-type: inline-size;
  container-name: page-main-content-right;
}

/* CONTENT LEFT - MAIN -------------------------------------------------- */
.left > .main,
.left > .conclusion,
.left > .pros_cons,
/* CONTENT RIGHT - SIDEBAR BOXES ----------------------------------------- */
.right > .sidebar_box {
  background-color: var(--page-content-element-background-color);
  color: var(--page-content-element-text-color);
  border-radius: var(--default-border-radius);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.65);
  container-type: inline-size;
}

@container page-main-content-left (max-width: 90vw) {
  td[valign] > .left {
    margin-left: var(--default-content-padding-left-right);
  }
}
@container page-main-content-right (max-width: 90vw) {
  td[valign] > .right {
    margin-right: var(--default-content-padding-left-right);
  }
}

.left > .main {
  container-name: main-content;
}
.right > .sidebar_box {
  container-name: sidebar-box;
  padding: calc(var(--default-content-padding-left-right) / 2);
}

.right > .sidebar_box ~ .sidebar_box {
  margin-top: calc(var(--default-content-padding-left-right) * 0.5);
}

.right > .sidebar_box h4 {
  color: var(--signal-text-color);
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1.125em;
  line-height: 2em;
  text-wrap: normal;
}

.right > .sidebar_box p {
  font-size: 0.875em;
}

.right > .sidebar_box p > span:first-child {
  color: var(--signal-subtext-color);
}

@container sidebar-box (min-width: 50vw) {
  .right > .sidebar_box .body {
    column-count: 2;
  }

  .right > .sidebar_box .body > p {
    break-inside: avoid-column;
  }
}

.left > .main > .headline > h1 {
  /* padding-top: calc(var(--default-content-padding-left-right) / 2); */
  padding-right: var(--default-content-padding-left-right);
  /* padding-bottom: calc(var(--default-content-padding-left-right) / 2); */
  padding-left: var(--default-content-padding-left-right);
  color: var(--signal-text-color);
}

.body_wrapper > hr,
.left > .main > .headline > div:last-child {
  border-top: 1.5px solid #121212;
  border-bottom: 1.5px solid #303030;
}

/* REVIEW CONTENT ------------------------------- */

.body_wrapper > p {
  padding-right: var(--default-content-padding-left-right);
  /* padding-bottom: calc(var(--default-content-padding-left-right) / 2); */
  padding-left: var(--default-content-padding-left-right);
  font-family: var(--page-content-font-family-stack);
}

.body_wrapper > p:empty {
  display: none;
}

/* overview tables on pages like http://localhost:3000/index/artikel/Paramount-September-2026/19278 */
.body_wrapper > table {
  margin-left: var(--default-content-padding-left-right);
  margin-right: var(--default-content-padding-left-right);
  width: calc(100% - var(--default-content-padding-left-right) * 2);
}

.body_wrapper > table > tbody > tr {
  height: auto;
}

.body_wrapper > table > tbody > tr > td {
  vertical-align: top;
  padding: 0.2rem;
}

.body_wrapper > table > tbody > tr > td:first-child,
.body_wrapper > table > tbody > tr > td:nth-child(2) {
  width: 1%;
}

.body_wrapper > table > tbody > tr > td > a {
  font-weight: bold;
  color: var(--signal-text-color);
}

.body_wrapper > ul {
  margin-top: 0;
  margin-bottom: 0;
}

@container main-content (min-width: 500px) {
  .body_wrapper > p {
    text-align: justify;
  }
}

.body_wrapper > p img[style] {
  border: 1px solid white;
}

@container page-main-content-left (width > 90vw) {
  .body_wrapper > p img[style] {
    display: block;

    width: calc(
      100% + var(--default-content-padding-left-right) * 2
    ) !important;
    max-width: none !important;

    height: auto !important;
    float: none !important;
    margin: 0 auto 1rem !important;
    position: relative;
    left: calc(var(--default-content-padding-left-right) * -1);

    border-left: 0;
    border-right: 0;
  }
}

.body_wrapper ul li {
  list-style-position: inside;
  list-style-type: square;
  color: var(--signal-subtext-color);
}

/* REVIEW CONCLUSION ------------------------------- */
.left > .conclusion {
  padding: var(--default-content-padding-left-right);
}

.left > .conclusion table {
  padding-top: var(--default-content-padding-left-right);
}

.left > .conclusion table,
.left > .conclusion table > tbody {
  display: block;
}

.left > .conclusion table > tbody {
  display: grid;
  grid-template-columns: 90px minmax(1px, 1fr);
  gap: var(--default-content-padding-left-right);
}

.left > .conclusion table > tbody > tr {
  display: contents;
}
.left > .conclusion table > tbody > tr > td {
  display: block;
}

.left > .conclusion .head h3 {
  font-size: calc(var(--header-box-font-size) * 1.25);
  font-weight: normal;
  color: var(--signal-subtext-color);
}

.left > .conclusion .head h3 > b {
  color: var(--signal-text-color);
  text-transform: uppercase;
  font-weight: normal;
}

.left > .conclusion table p {
  text-align: justify;
  color: var(--signal-subtext-color);
}
.left > .conclusion table p {
  text-align: justify;
}

.left > .conclusion div.further_articles {
  display: flex;
  justify-content: space-between;
  margin-top: var(--default-content-padding-left-right);
}

@container (min-width: 90vw) {
  .left > .conclusion table > tbody {
    display: block;
  }

  .left > .conclusion table > tbody > tr > td:nth-child(1) {
    float: left;
    margin-right: var(--default-content-padding-left-right);
  }

  .left > .conclusion table p {
    text-align: left;
    font-size: 0.875rem;
  }

  /* the thumbnails become a horizontal rail instead of a grid three rows deep -
	   div.further_articles holds nothing but the tiles, so it can be the scroll
	   container itself */
  .left > .conclusion div.further_articles {
    display: flex;
    justify-content: flex-start;
    gap: var(--default-content-padding-left-right);

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    /* proximity, not mandatory: several tiles are visible at once and free
		   scrolling has to stay possible */
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--signal-subtext-color) transparent;
  }

  .left > .conclusion div.further_articles > a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    line-height: 0;
  }

  /* a common height lines the covers up without cropping any of them; the widths
	   follow the artwork, which ranges from 127x171 to 209x171.
	   width: auto is needed to beat the width="69" attribute on the images */
  .left > .conclusion div.further_articles img {
    width: auto;
    height: 10rem;
  }
}

/* REVIEW PROS / CONS ------------------------------- */
/* markup: .head / .body > table (th.positive, empty th, th.negative) / .foot;
   the table becomes a two column grid, the empty spacer cells disappear */
.left > .pros_cons {
  container-name: pros-cons;
  padding: var(--default-content-padding-left-right);
}

.left > .pros_cons > .head,
.left > .pros_cons > .foot,
.left > .pros_cons > .body > br,
.left > .pros_cons tr > :nth-child(2) {
  display: none;
}

.left > .pros_cons table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--default-content-padding-left-right);
  width: 100%;
}

.left > .pros_cons table > thead,
.left > .pros_cons table > tbody,
.left > .pros_cons table tr {
  display: contents;
}

.left > .pros_cons th,
.left > .pros_cons td {
  display: block;
  width: auto;
}

.left > .pros_cons tr > :first-child {
  grid-column: 1;
}

.left > .pros_cons tr > :last-child {
  grid-column: 2;
}

.left > .pros_cons th {
  padding: 0.25em 0.625em;
  border-radius: var(--default-border-radius-always)
    var(--default-border-radius-always) 0 0;
  color: var(--white-text-color);
  font-size: calc(var(--header-box-font-size) * 1.125);
  font-weight: normal;
  text-align: left;
  text-transform: uppercase;
}

.left > .pros_cons th.positive {
  background-color: var(--positive-color);
}

.left > .pros_cons th.negative {
  background-color: var(--negative-color);
}

.left > .pros_cons ul {
  padding: 0.5em 0 0;
}

.left > .pros_cons li {
  position: relative;
  padding-left: 1.25em;
  margin-bottom: 0.375em;
  color: var(--signal-subtext-color);
  font-family: var(--page-content-font-family-stack);
}

.left > .pros_cons li::before {
  position: absolute;
  left: 0;
  font-weight: bold;
}

.left > .pros_cons td:first-child li::before {
  content: "+";
  color: var(--positive-color);
}

.left > .pros_cons td:last-child li::before {
  content: "\2013";
  color: var(--negative-color);
}

/* narrow: positive header, its list, negative header, its list */
@container pros-cons (max-width: 30rem) {
  .left > .pros_cons table {
    grid-template-columns: minmax(0, 1fr);
  }

  .left > .pros_cons tr > :first-child,
  .left > .pros_cons tr > :last-child {
    grid-column: 1;
  }

  .left > .pros_cons th.positive {
    grid-row: 1;
  }
  .left > .pros_cons td:first-child {
    grid-row: 2;
  }
  .left > .pros_cons th.negative {
    grid-row: 3;
  }
  .left > .pros_cons td:last-child {
    grid-row: 4;
  }

  .left > .pros_cons td:first-child {
    margin-bottom: var(--default-content-padding-left-right);
  }
}

/* SIDEBAR BOX */

.sidebar_box:nth-child(2) .body {
  display: grid;
  column-gap: var(--default-content-padding-left-right);
  column-count: 1;
}

.sidebar_box .body > * {
  grid-column: 1;
}

.sidebar_box .body > *:nth-of-type(1) {
  grid-row: 1;
}
.sidebar_box .body > *:nth-of-type(2) {
  grid-row: 2;
}
.sidebar_box .body > *:nth-of-type(3) {
  grid-row: 3;
}
.sidebar_box .body > *:nth-of-type(4) {
  grid-row: 4;
}

@container sidebar-box (min-width: 480px) {
  .sidebar_box .body > *:nth-of-type(1) {
    grid-row: 1;
    grid-column: 1;
  }
  .sidebar_box .body > *:nth-of-type(2) {
    grid-row: 1;
    grid-column: 2;
  }
  .sidebar_box .body > *:nth-of-type(3) {
    grid-row: 2;
    grid-column: 1;
  }
  .sidebar_box .body > *:nth-of-type(4) {
    grid-row: 2;
    grid-column: 2;
  }
}

.sidebar_box .body h4,
.sidebar_box .body a,
.sidebar_box .body p,
.sidebar_box .body img {
  position: static;
  break-inside: avoid;
}

.sidebar_box .body img {
  width: 100%;
}

.sidebar_box .body h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;

  padding-left: 0;
  padding-top: 0.5rem;
  line-height: 1.5rem;
}

.sidebar_box .body a {
  padding-top: 2rem;
}

.sidebar_box .body h4:not(:first-child) {
  margin-top: 0; /* Clean up visual spacing at the top */
}

.sidebar_box .body p:has(+ .line),
.sidebar_box .body .line {
  display: none;
}

/* Comments have never been visible on the site, but just in case they are still in the HTML, we hide them */
.content_comments {
  display: none;
}

/* --------------------------------------------------------------------- */
/* sofahelden - Content (CMS page)
/* --------------------------------------------------------------------- */

.mini_header + table .main {
  padding-top: var(--default-content-padding-left-right);
  padding-bottom: calc(var(--default-content-padding-left-right) / 2);
}

.mini_header + table .main > *:not(.headline) {
  padding-right: var(--default-content-padding-left-right);
  padding-left: var(--default-content-padding-left-right);
}

.mini_header + table .left > .main > .headline > h1 {
  font-size: 16px;
  padding-right: var(--default-content-padding-left-right);
  padding-left: var(--default-content-padding-left-right);
  margin-top: calc(var(--default-content-padding-left-right) * 0.5);
  margin-bottom: calc(var(--default-content-padding-left-right) * 0.5);
  border-bottom: 1.5px solid #121212;
}

.mini_header + table .left > .main > .headline > h1::after {
  content: "";
  display: block;
  border-bottom: 1.5px solid #303030;
}

.mini_header + table .body {
  font-family: var(--page-content-font-family-stack);
  text-align: justify;
}

.mini_header + table .left .body a {
  font-weight: bold;
  color: var(--signal-text-color);
}

.mini_header + table .body ul li {
  color: var(--signal-subtext-color);
}

/* --------------------------------------------------------------------- */
/* sofahelden - Our Team https://www.sofahelden.de/index/unserteam
/* --------------------------------------------------------------------- */

.mini_header + table .left .answers {
  display: none;
}

.ueber_uns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: var(--default-content-padding-left-right);
}

.ueber_uns > div {
  display: contents;
}

.ueber_uns br.clear {
  display: none;
}

/* this is the actual user / team member container  */

.ueber_uns > div > div {
  overflow: hidden;
  position: relative;
}

.ueber_uns > div > div a {
  display: block;
}

.ueber_uns > div > div .name {
  display: block !important;
  position: absolute;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  background-color: rgba(0, 0, 0, 0.6);
  transform: translateY(0);
  transition: transform 0.2s ease-in-out;
  pointer-events: none;
}

.ueber_uns > div > div .name h2 {
  font-weight: normal;
  text-align: center;
  font-size: 0.85rem;
  min-height: 2.5rem;
  hyphens: auto;
}

.ueber_uns > div > div:hover .name {
  transform: translateY(-100%);
}

/* info popup after clicking a team member.

   #popup lives in the global page template and is empty on every page; it is
   only ever filled by the inline script on /index/unserteam, which toggles it
   with an INLINE display: none / display: block. That inline style beats any
   rule here, so #popup has to stay a block-level box: the layout below uses
   floats and position: sticky, never grid or flexbox. Forcing a display value
   with !important would also override the inline display: none and leave the
   popup impossible to close. */
#popup.answers {
  position: fixed;

  inset: 0px;
  width: 500px;
  max-width: 100vw;
  height: 60vh;
  min-height: 10rem;
  max-height: 90dvh;
  margin: auto;

  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  overscroll-behavior: contain;

  z-index: 1000;
  background-color: var(--popup-background-color);
  border: 1px solid var(--page-content-element-background-color);
  border-radius: var(--default-border-radius);

  /* first shadow is the page scrim, second one lifts the panel off the page */
  box-shadow:
    0 0 0 100vmax rgba(0, 0, 0, 0.6),
    0 1.5rem 3rem rgba(0, 0, 0, 0.5);

  container-type: inline-size;
  container-name: popup;

  animation: sh-popup-in 0.22s ease-out;
}

/* the empty template div on every other page of the site */
#popup.answers:empty {
  display: none;
}

/* full screen sheet once the floating panel stops making sense */
@media (max-width: 640px) {
  #popup.answers {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* the h3 and the close link below it are pinned together as one header row.
   Sticky works here because #popup is a plain block scroll container, so the
   containing block is its whole scrollable content box. */
#popup.answers > h3 {
  position: sticky;
  top: 0;
  z-index: 2;

  font-size: 1rem;
  line-height: 1.618;
  text-transform: uppercase;
  color: var(--signal-text-color);
  padding: var(--default-content-padding-left-right);
  /* keep the title clear of the close link that sits on top of it */
  padding-right: calc(var(--default-content-padding-left-right) + 8rem);
  margin: 0;

  background-color: var(--popup-header-background-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* the negative margin lifts this into the h3 row without moving .left down:
   h3 spans 0 -> header-height, this spans 0 -> header-height, .left still
   starts at header-height. */
#popup.answers > .close_answers {
  position: sticky;
  top: 0;
  z-index: 3;

  display: block;
  width: fit-content;
  margin-left: auto;
  margin-top: calc(-1 * var(--popup-header-height));
  height: var(--popup-header-height);
  line-height: 1.618;

  color: var(--signal-text-color);
  padding: var(--default-content-padding-left-right);
  text-decoration: none;
  border-radius: calc(var(--default-border-radius) / 2);
}

#popup.answers > .close_answers:hover,
#popup.answers > .close_answers:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
}

/* .left holds the interview text, .right the avatar. Both float so they sit
   side by side despite .right coming second in the source. */
#popup.answers > .left {
  float: left;
  width: calc(100% - var(--popup-right-column-width));
  padding: var(--default-content-padding-left-right);
  padding-top: calc(var(--default-content-padding-left-right) * 0.5);
}

#popup.answers > .right {
  float: right;
  width: var(--popup-right-column-width);
  padding: var(--default-content-padding-left-right);
  padding-left: 0;
}

#popup.answers > .right img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--default-border-radius) / 2);
}

/* most team members have no avatar at all - the div is there but holds only
   whitespace, so :empty would not match it. Give the text the full width.
   :has() may not be nested inside another :has(), hence :not(:has(...)). */
#popup.answers > .right:not(:has(img)) {
  display: none;
}

#popup.answers > .left:not(:has(+ .right img)) {
  float: none;
  width: 100%;
}

@container popup (max-width: 420px) {
  #popup.answers > .left,
  #popup.answers > .right {
    float: none;
    width: 100%;
  }

  #popup.answers > .right {
    padding-left: var(--default-content-padding-left-right);
  }
}

#popup.answers > .left > p {
  color: var(--signal-subtext-color);
  padding-bottom: calc(var(--default-content-padding-left-right) * 0.66);
  margin: 0;
}

#popup.answers p > b {
  color: var(--signal-text-color);
}

/* the rating photos card. Its table is wider than the column and carries an
   inline margin-left: -10px, so it gets its own horizontal scroll. */
#popup.answers .darkgrey {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: calc(var(--default-border-radius) / 2);
  padding: calc(var(--default-content-padding-left-right) * 0.66);
  margin-top: var(--default-content-padding-left-right);
  overflow-x: auto;
}

#popup.answers .darkgrey > table {
  margin-left: 0 !important;
}

#popup.answers .darkgrey h4 {
  color: var(--signal-text-color);
  font-size: 0.9rem;
  margin: 0 0 calc(var(--default-content-padding-left-right) * 0.5) 0;
}

#popup.answers .darkgrey p {
  color: var(--article-text-color);
  padding: 0;
  margin: 0.25rem 0 0 0;
}

/* #popup itself only goes display: none -> block on the very first open, so
   this plays once, as the modal appearing. The children are replaced on every
   open, which restarts their animation each time a team member is picked. */
@keyframes sh-popup-in {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sh-popup-content-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#popup.answers > * {
  animation: sh-popup-content-in 0.28s ease-out both;
}

#popup.answers > .left {
  animation-delay: 0.04s;
}

#popup.answers > .right {
  animation-delay: 0.08s;
}

/* declared here, after the animations above, so it wins on source order */
@media (prefers-reduced-motion: reduce) {
  #popup.answers,
  #popup.answers > * {
    animation: none;
  }
}

/* --------------------------------------------------------------------- */
/* sofahelden - FOOTER + ADVERTS */
/* --------------------------------------------------------------------- */

.content > .footer,
.content ~ .footer {
  background-color: var(--page-content-element-background-color);
  height: 2rem;
}

.commercial,
.footer_advert_grey {
  padding-left: var(--default-content-padding-left-right);
  padding-right: var(--default-content-padding-left-right);
}

.footer_advert_grey {
  background-color: var(--page-content-element-background-color);
  height: 70px;
  display: flex;
  align-items: center;
  gap: 0 var(--default-content-padding-left-right);
}

.footer_advert_grey ~ .footer_advert_grey {
  margin-top: calc(var(--default-content-padding-left-right) * 0.25);
}

.footer_advert_grey + .spacer + .footer {
  display: none;
}

.footer_advert_grey > img {
  display: none;
}

.copyright {
  text-align: center;
  line-height: 2rem;
  color: var(--navtop-text-color);
}

/* --------------------------------------------------------------------- */
/* Nuvouo Slider / Image Carousel
/* --------------------------------------------------------------------- */

.slider-wrapper {
  background-color: #333333;
  padding-left: var(--default-content-padding-left-right);
  padding-right: var(--default-content-padding-left-right);
}

@container page-main-content-left (width > 90vw) {
  .slider-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

.slider-wrapper h3 {
  text-align: center;
  color: var(--signal-text-color);
  padding-top: calc(var(--default-content-padding-left-right) * 0.75);
  padding-bottom: calc(var(--default-content-padding-left-right) * 0.75);
}

.slider-wrapper .nivoSlider {
  /* nivo sets position: relative inline; repeated here so the absolutely
	   positioned slices, caption and arrows keep their containing block */
  position: relative;
  overflow: hidden;
  width: 100% !important;
  height: auto !important;
  background-size: 100% !important;
}

.slider-wrapper .nivo-imageLink {
  display: block;
  /* every slide opens the lightbox */
  cursor: zoom-in;
}

.slider-wrapper .nivo-imageLink img {
  display: block !important;
  width: 100%;
}

.slider-wrapper .nivo-slice {
  width: 100% !important;
  background-size: 100% !important;
  background-repeat: no-repeat;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
}

.slider-wrapper .nivo-slice ~ .nivo-slice {
  display: none;
}

/* prev / next buttons. nivo renders them as two bare <a> holding the texts
   'Prev' and 'Next', and hides their container (inline display: none/block)
   until the slider is hovered. */
.slider-wrapper .nivo-directionNav a {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 9;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  /* swallow the 'Prev' / 'Next' text nodes */
  font-size: 0;
  overflow: hidden;
  transition: background-color 0.15s ease;
}

.slider-wrapper .nivo-prevNav {
  left: 0.5rem;
}

.slider-wrapper .nivo-nextNav {
  right: 0.5rem;
}

.slider-wrapper .nivo-directionNav a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--white-text-color);
  transition: background-color 0.15s ease;
}

.slider-wrapper .nivo-prevNav::before {
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTUgNCA4IDEybDcgOCIvPjwvc3ZnPg==")
    no-repeat center / 55%;
}

.slider-wrapper .nivo-nextNav::before {
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSA0bDcgOC03IDgiLz48L3N2Zz4=")
    no-repeat center / 55%;
}

.slider-wrapper .nivo-directionNav a:hover,
.slider-wrapper .nivo-directionNav a:focus-visible {
  background-color: rgba(0, 0, 0, 0.75);
}

.slider-wrapper .nivo-directionNav a:hover::before,
.slider-wrapper .nivo-directionNav a:focus-visible::before {
  background-color: var(--signal-text-color);
}

.slider-wrapper .nivo-directionNav a:focus-visible {
  outline: 2px solid var(--signal-text-color);
  outline-offset: 2px;
}

/* without a pointer there is no hover, so the arrows would never show up */
@media (hover: none) {
  .slider-wrapper .nivo-directionNav {
    display: block !important;
  }
}

.slider-wrapper .nivo-caption {
  position: absolute;
  width: 100.1%;
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateY(-100%);
  z-index: 1;
  padding: 0.25rem 0.5rem;
}

.slider-wrapper .nivo-controlNav {
  box-sizing: content-box;
  text-align: center;
  line-height: 1;
}

.slider-wrapper .nivo-controlNav > .nivo-control {
  margin: 0.33rem;
  display: inline-block;
  width: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.slider-wrapper .nivo-controlNav > .nivo-control::before {
  display: inline-block;
  content: "";
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjMuMSBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI2IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik01MjggMzIwQzUyOCAyMDUuMSA0MzQuOSAxMTIgMzIwIDExMkMyMDUuMSAxMTIgMTEyIDIwNS4xIDExMiAzMjBDMTEyIDQzNC45IDIwNS4xIDUyOCAzMjAgNTI4QzQzNC45IDUyOCA1MjggNDM0LjkgNTI4IDMyMHpNNjQgMzIwQzY0IDE3OC42IDE3OC42IDY0IDMyMCA2NEM0NjEuNCA2NCA1NzYgMTc4LjYgNTc2IDMyMEM1NzYgNDYxLjQgNDYxLjQgNTc2IDMyMCA1NzZDMTc4LjYgNTc2IDY0IDQ2MS40IDY0IDMyMHoiLz48L3N2Zz4=")
    no-repeat center / contain;

  background-color: currentColor;
  background-color: var(--navtop-text-color);
  width: 1.25rem;
  height: 1rem;
}

.slider-wrapper .nivo-controlNav > .nivo-control.active::before {
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjMuMSBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI2IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zMjAgNTc2QzE3OC42IDU3NiA2NCA0NjEuNCA2NCAzMjBDNjQgMTc4LjYgMTc4LjYgNjQgMzIwIDY0QzQ2MS40IDY0IDU3NiAxNzguNiA1NzYgMzIwQzU3NiA0NjEuNCA0NjEuNCA1NzYgMzIwIDU3NnpNMzIwIDExMkMyMDUuMSAxMTIgMTEyIDIwNS4xIDExMiAzMjBDMTEyIDQzNC45IDIwNS4xIDUyOCAzMjAgNTI4QzQzNC45IDUyOCA1MjggNDM0LjkgNTI4IDMyMEM1MjggMjA1LjEgNDM0LjkgMTEyIDMyMCAxMTJ6TTMyMCA0MTZDMjY3IDQxNiAyMjQgMzczIDIyNCAzMjBDMjI0IDI2NyAyNjcgMjI0IDMyMCAyMjRDMzczIDIyNCA0MTYgMjY3IDQxNiAzMjBDNDE2IDM3MyAzNzMgNDE2IDMyMCA0MTZ6Ii8+PC9zdmc+")
    no-repeat center / contain;
}

/* --------------------------------------------------------------------- */
/* Lightbox (jquery.lightbox-0.5)
/* --------------------------------------------------------------------- */

/*
 * The plugin appends its markup to <body> and relies on a stylesheet that the
 * proxy strips, so everything below has to be provided here. It also writes all
 * geometry inline (page-sized overlay, absolute top/left, a box animated to the
 * natural image size), which is why the layout rules need !important.
 *
 * Two things must stay untouched: the opacity of #jquery-overlay (fadeIn /
 * fadeOut animate it) and the display / height of #lightbox-container-image-data-box
 * and #lightbox-loading (slideDown / show / hide animate them).
 *
 * Used by the nivo gallery (#slider a.nivo-imageLink) and by the sidebar
 * images (.sidebar_box .body .images a) alike.
 */

/* keep the page behind the lightbox from scrolling; body already reserves the
   scrollbar space (scrollbar-gutter: stable), so nothing jumps */
body:has(> #jquery-lightbox) {
  overflow: hidden;
}

#jquery-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: var(--lightbox-z-index);
  background-color: var(--black);
  /* the plugin only dims with opacity: 0.8, which leaves the page behind
	   perfectly readable - push it out of focus as well */
  backdrop-filter: blur(3px);
}

#jquery-lightbox {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: calc(var(--lightbox-z-index) + 1);
  /* one centred column: the image box sizes the track, the data bar below it
	   stretches to exactly the same width */
  display: grid !important;
  grid-template-columns: minmax(0, auto);
  grid-auto-rows: min-content;
  justify-content: center;
  align-content: center;
  padding: clamp(0.5rem, 2vw, 2rem);
  line-height: 0;
}

#lightbox-container-image-box {
  position: relative;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  min-width: 4rem;
  min-height: 4rem;
  margin: 0;
  background-color: var(--lightbox-frame-color);
  border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;
  overflow: hidden;
}

#lightbox-container-image {
  padding: 0.5rem;
  line-height: 0;
}

#lightbox-image {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  /* leave room for the outer padding, the frame and the data bar */
  max-height: calc(100dvh - 8rem);
  margin: 0 auto;
  border-radius: calc(var(--default-border-radius) / 2);
}

/* prev / next: two half-width hotspots covering the image. The plugin paints
   its own gif arrows inline - they are dropped in favour of mask icons. */
#lightbox-nav {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
}

#lightbox-nav a {
  position: relative;
  display: block;
  width: 50%;
  height: 100% !important;
  background-image: none !important;
  outline: none;
}

#lightbox-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--white-text-color);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9));
  opacity: 0;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
}

#lightbox-nav-btnPrev::before {
  left: 0.5rem;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTUgNCA4IDEybDcgOCIvPjwvc3ZnPg==")
    no-repeat center / contain;
}

#lightbox-nav-btnNext::before {
  right: 0.5rem;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNOSA0bDcgOC03IDgiLz48L3N2Zz4=")
    no-repeat center / contain;
}

/* the plugin only assigns the arrow gif (and a click handler) to a direction
   that actually exists, so its inline background is the flag for 'enabled' */
#lightbox-nav-btnPrev[style*="btn-prev"],
#lightbox-nav-btnNext[style*="btn-next"] {
  cursor: pointer;
}

#lightbox-nav-btnPrev[style*="btn-prev"]::before,
#lightbox-nav-btnNext[style*="btn-next"]::before {
  opacity: 0.75;
}

#lightbox-nav-btnPrev[style*="btn-prev"]:hover::before,
#lightbox-nav-btnNext[style*="btn-next"]:hover::before {
  opacity: 1;
  background-color: var(--signal-text-color);
}

/* at the first / last image the dead half must not swallow the click that
   closes the lightbox - and must not follow its href="#" either */
#lightbox-nav-btnPrev:not([style*="btn-prev"]),
#lightbox-nav-btnNext:not([style*="btn-next"]) {
  pointer-events: none;
}

/* loading indicator: the gif is replaced by a css spinner. #lightbox-loading is
   shown / hidden inline, so its display must stay writable. */
#lightbox-loading {
  position: absolute;
  inset: 0;
  z-index: 11;
}

#lightbox-loading img {
  display: none;
}

#lightbox-loading-link {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--signal-text-color);
  border-radius: 50%;
  animation: sh-lightbox-spin 0.8s linear infinite;
}

@keyframes sh-lightbox-spin {
  to {
    rotate: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  #lightbox-loading-link {
    animation: none;
  }
}

/* caption / counter / close bar below the image */
#lightbox-container-image-data-box {
  width: auto !important;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--lightbox-bar-color);
  color: var(--navtop-text-color);
  border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
  font: normal var(--default-font-size) / 1.4 var(--default-font-family-stack);
  text-align: left;
}

#lightbox-container-image-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  color: inherit;
}

#lightbox-container-image-data #lightbox-image-details {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  width: auto !important;
  min-width: 0;
  float: none !important;
  text-align: left;
}

#lightbox-image-details-caption {
  font-weight: bold;
  color: var(--signal-text-color);
}

#lightbox-image-details-currentNumber {
  display: inline;
  clear: none;
  padding: 0;
  font-size: 0.85em;
}

#lightbox-secNav {
  margin-left: auto;
  line-height: 0;
}

#lightbox-secNav-btnClose {
  display: block;
  width: 2rem !important;
  height: 2rem;
  padding: 0 !important;
  float: none !important;
  cursor: pointer;
}

#lightbox-secNav-btnClose img {
  display: none;
}

#lightbox-secNav-btnClose::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--navtop-text-color);
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNiA2bDEyIDEyTTE4IDZMNiAxOCIvPjwvc3ZnPg==")
    no-repeat center / 60%;
  transition: background-color 0.15s ease;
}

#lightbox-secNav-btnClose:hover::before,
#lightbox-secNav-btnClose:focus-visible::before {
  background-color: var(--signal-text-color);
}

/* touch devices: no hover, so the arrows stay visible and everything that can
   be tapped gets a 44px target */
@media (hover: none) {
  #lightbox-nav-btnPrev[style*="btn-prev"]::before,
  #lightbox-nav-btnNext[style*="btn-next"]::before {
    width: 2.75rem;
    height: 2.75rem;
    opacity: 0.9;
  }

  #lightbox-secNav-btnClose {
    width: 2.75rem !important;
    height: 2.75rem;
  }
}

/* phone: use the full viewport, the frame radius already collapses to 0 */
@media (max-width: 930px) {
  #jquery-lightbox {
    padding: 0;
  }

  #lightbox-container-image {
    padding: 0.25rem;
  }

  #lightbox-image {
    max-height: calc(100dvh - 4rem);
  }
}

/* --------------------------------------------------------------------- */
/* Content: the WEEK  */
/* --------------------------------------------------------------------- */

.content .week > p {
  min-height: 0 !important;
}

.content .week > table {
  display: block;
}
.content .week > table > tbody {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  gap: var(--default-content-padding-left-right);
  align-items: center;
  justify-items: center;
}

.content .week > table > tbody > tr {
  display: contents;
}

.content .week > table > tbody > tr > td {
  display: block;
}

/* --------------------------------------------------------------------- */
/* Content: Search Result  */
/* --------------------------------------------------------------------- */

.search_link_even,
.search_link_odd {
  display: block;
  margin-top: calc(var(--default-content-padding-left-right) * 0.5);
  margin-bottom: calc(var(--default-content-padding-left-right) * 0.5);
}

/* --------------------------------------------------------------------- */
/* Content: Archive Output  */
/* --------------------------------------------------------------------- */

table.archive {
  width: 100%;
}

table.archive th:first-child,
table.archive td:first-child {
  display: none;
}

@container main-content (width <= 98vw) {
  table.archive th,
  table.archive td {
    vertical-align: top;
    padding: 3px 5px;
  }
  table.archive tr:not(:first-child) th,
  table.archive tr:not(:first-child) td {
    border-top: 1px dotted var(--signal-text-color);
  }
}

@container main-content (width > 98vw) {
  table.archive,
  table.archive > tbody {
    display: block;
  }

  table.archive > thead {
    display: none;
  }

  table.archive > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    text-align: left;

    column-gap: 0.5ch;

    padding-bottom: var(--default-content-padding-left-right);

    margin-top: 1rem;
    border-bottom: 1px dotted var(--signal-text-color);
  }

  table.archive > tbody > tr > td:nth-child(2) {
    order: 2;
    flex: 1 1 calc(100% - 5rem);
    min-width: 0;
    line-height: 1.2;
  }
  table.archive > tbody > tr > td:nth-child(3) {
    order: 1;
    font-size: 0.66rem;
    white-space: nowrap;
  }

  table.archive > tbody > tr > td:nth-child(3)::before {
    content: "[";
  }
  table.archive > tbody > tr > td:nth-child(3)::after {
    content: "]";
  }

  table.archive > tbody > tr > td:nth-child(4) {
    order: 3;
    font-size: 0.66rem;
  }
  table.archive > tbody > tr > td:nth-child(5) {
    order: 4;
    font-size: 0.66rem;
  }
  table.archive > tbody > tr > td:nth-child(5)::before {
    content: " · ";
  }
  table.archive > tbody > tr > td:nth-child(6) {
    order: 5;
    font-size: 0.66rem;
  }
  table.archive > tbody > tr > td:nth-child(6)::before {
    content: " · Bewertung: ";
  }
}