: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; */ color-scheme: light; 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); position: relative; } .body > .header > .headerClickTag { position: absolute; top: 0; left: 0; bottom: 0; width: 40%; } .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

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: none; } @container page-main-content (width < 99vw) { .subheader_news { grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); display: grid; } } .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

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-top: calc(var(--default-content-padding-left-right) * 0.5); 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; } .left > .main > .headline > div:last-child { margin-top: calc(var(--default-content-padding-left-right) * 0.5); margin-bottom: calc(var(--default-content-padding-left-right) * 0.5); } /* 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, .body_wrapper a:where(:not([class])) { 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); font-size: 11px; } .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); margin-bottom: 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 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 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; padding: calc(var(--default-content-padding-left-right) * 0.25); color: white !important; } .search_link_even { background-color: #333333; } .search_link_odd { background-color: #3d3d3d; } .search_link_even > span, .search_link_odd > span { font-weight: normal; padding-left: calc(var(--default-content-padding-left-right) * 0.5); } .search_link_even:hover, .search_link_odd:hover { background-color: var(--signal-text-color); color: #333333 !important; } .news > h2 { padding: calc(var(--default-content-padding-left-right) * 0.25); background-color: var(--signal-text-color); font-size: 0.875rem; color: #333333; margin-bottom: calc(var(--default-content-padding-left-right) * 0.25); } /* --------------------------------------------------------------------- */ /* 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: "; } }