/* holz-objekte.org: the one stylesheet. The old theme (themes/holzobjekte_new) rebuilt
   without Bootstrap: header with logo, the side panel on the right (yellow title band,
   black bar, grey navigation, info text), main on --bg. Phones (< 768 px) stack. */

/* Galaxie Polaris (Village / Thirstype), served unmodified as on the old site. */
@font-face {
  font-family: "Galaxie Polaris";
  src: url("/fonts/Polaris_V2_Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galaxie Polaris";
  src: url("/fonts/Polaris_V2_Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galaxie Polaris";
  src: url("/fonts/Polaris_V2_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Until Polaris has loaded (font-display: swap), text is set in Arial scaled to Polaris'
   width and line metrics (measured in Chrome on a pangram of the site's words), so the
   swap barely moves anything (Lighthouse counted it as layout shift). */
@font-face {
  font-family: "Polaris Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  font-weight: 400;
  size-adjust: 106.7%;
  ascent-override: 75%;
  descent-override: 18.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Polaris Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  font-weight: 500;
  size-adjust: 108.3%;
  ascent-override: 73.9%;
  descent-override: 18.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Polaris Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
  font-weight: 700;
  size-adjust: 104.8%;
  ascent-override: 76.3%;
  descent-override: 19.1%;
  line-gap-override: 0%;
}

:root {
  --yellow: #D0CE00;
  --ink: #303030;
  --bg: #f7f7f7;
  --panel: #eeeeee;
  --black: #111;
  --white: #fff;
  --on-black: #bdbdbd;
  --font-sans: "Galaxie Polaris", "Polaris Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-h: 90px;
  --bar-h: 52px;
  --gutter: 25px;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: off-screen until focused. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Layout: main column two thirds, panel one third, fixed to the right, full height. */
.site {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "header panel"
    "main   panel";
  min-height: 100vh;
}

/* Header: logo left, a thin yellow rule below; it stays at the top while the page scrolls
   (scroll-padding keeps jump targets and focused fields clear of it). */
html {
  scroll-padding-top: calc(var(--header-h) + 16px);
}

.site-header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 30px;
  background: var(--white);
  border-bottom: 1px solid var(--yellow);
}

/* The text logo, laid out in units of the old 664 × 112 logo PNG: 1em = 64 units (the
   wordmark's size), so --logo-w is the width the PNG had (296 px, 240 px on phones).
   Like the PNGs, each language's logo is scaled to fill that width: --logo-k is 664 over
   this language's natural width (chevrons + wordmark), measured in Chromium. */
.site-logo {
  --logo-w: 296px;
  --logo-k: 1;
  display: flex;
  align-items: flex-start;
  flex: none;
  width: var(--logo-w);
  font-size: calc(var(--logo-w) * 64 / 664 * var(--logo-k));
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.logo-mark {
  flex: none;
  width: calc(133em / 64);
  height: calc(112em / 64);
  fill: var(--yellow);
}

.logo-text {
  display: flex;
  flex-direction: column;
  margin-left: calc(9.5em / 64);
}

.logo-wordmark {
  margin-top: calc(1.8em / 64);
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* The "." of ".org": a yellow block that hangs from the baseline, as in the PNG. */
.logo-dot {
  display: inline-block;
  overflow: hidden;
  width: calc(11em / 64);
  height: calc(13em / 64);
  margin: 0 calc(1em / 64) 0 calc(5em / 64);
  vertical-align: calc(-14em / 64);
  background: var(--yellow);
  color: transparent;
}

.site-logo:lang(fr) {
  --logo-k: 1.059;
}

.site-logo:lang(it) {
  --logo-k: 0.946;
}

.logo-tagline {
  /* Its own em is 27.5 units here. Medium, not the PNG's Book: at 296 px the downscaled PNG
     reads as heavy as Medium (ink density 27 vs Book 22, Medium 29), so this looks the same. */
  margin: calc(13.6em / 27.5) 0 0 calc(1em / 27.5);
  font-size: calc(27.5em / 64);
  font-weight: 500;
  letter-spacing: 0.024em;
}

/* The menu button only exists on phones (the panel is always open on wider screens). */
.menu-button {
  display: none;
}

/* Side panel */
.site-panel {
  grid-area: panel;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  background: var(--white);
}

.panel-title {
  display: flex;
  align-items: flex-start;
  min-height: var(--header-h);
  margin: 0;
  padding: 22px var(--gutter) 12px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: lowercase;
}

.panel-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-height: var(--bar-h);
  padding: 0 16px;
  background: var(--black);
  color: var(--on-black);
}

.panel-bar a {
  color: var(--on-black);
}

/* Every page but the home: the menu button left in the black bar (the old burger), the nav collapses. */
.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--yellow);
  font-size: 1.625rem;
  cursor: pointer;
}

.nav-button:hover {
  color: var(--white);
}

.panel-nav.is-collapsed {
  display: none;
}

/* html.js (set by boot.js before the first paint): the menus holzobjekte.js collapses start
   collapsed (it adds .is-open to show them), so the page doesn't jump when the module runs.
   Without JS they stay open; if the module never marks itself ready, boot.js drops .js after
   4 s and they show again. */
html.js [data-nav-menu] .panel-nav:not(.is-open) {
  display: none;
}

/* Phones: the home's disclosure behind the header's menu button. Every other page has no such
   button (data-nav-menu: its bar, with the burger and the language switch, always shows; only
   .panel-nav collapses). */
@media (max-width: 767px) {
  html.js body:not([data-screen="gallery"]):not([data-nav-menu]) .panel-menu:not(.is-open) {
    display: none;
  }
}

.panel-bar :focus-visible {
  outline-color: var(--yellow);
  outline-offset: 0;
}

.language-switch {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.125rem;
  line-height: 1;
}

.language-switch .icon {
  width: 0.95em;
  height: 0.95em;
}

.language-switch ul {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.language-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.3rem;
  text-decoration: none;
}

.language-switch a:hover {
  color: var(--white);
}

.panel-nav {
  background: var(--panel);
  padding: 16px 0 28px;
}

.panel-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel-nav a {
  display: block;
  padding: 8px 20px;
  font-size: 1.25rem;
  line-height: 1.2;
  text-decoration: none;
}

.panel-nav a:hover,
.panel-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.panel-nav :focus-visible {
  outline-offset: -3px;
}

.panel-intro {
  padding: 28px var(--gutter);
  font-size: 0.875rem;
  line-height: 1.43;
}

.panel-intro p {
  margin: 0 0 1.43em;
}

/* As on the old site: the "<>" paragraph bold, then each paragraph's capitals ("SAMMELN."). */
.panel-intro [data-panel-lead],
.panel-intro strong {
  font-weight: 700;
}

/* A page's own side text (über uns: "Allgemeine Hinweise") and the contact form: under the
   navigation, its first bold line or h2 set like the old side headings (lowercase). */
.panel-side {
  padding: 28px var(--gutter);
  font-size: 0.875rem;
  line-height: 1.43;
}

.panel-side .text-block > p:first-child > strong:only-child,
.panel-side h2 {
  display: block;
  margin: 0 0 1.1rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: lowercase;
}

.panel-side p {
  margin: 0 0 1.43em;
}

.panel-side a {
  color: inherit;
}

/* The contact form (the old Bootstrap form, flat). */
.contact-form .field {
  margin: 0 0 1rem;
}

.contact-form label {
  display: block;
  margin: 0 0 0.3rem;
  font-weight: 700;
}

.field-required {
  color: #c00;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 22rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #b3b3b3;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

/* Safari keeps its native select (small, rounded) unless the look is reset: a flat field with a chevron. */
.contact-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23303030' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
}

.contact-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.contact-form [aria-invalid="true"] {
  border-color: #c00;
  box-shadow: inset 3px 0 0 #c00;
}

.field-error,
.contact-error {
  margin: 0.3rem 0 0;
  color: #b00000;
  font-weight: 700;
}

.contact-error {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  border-left: 4px solid #b00000;
  background: #fbeaea;
}

.field-note {
  margin: 0 0 1rem;
  color: #595959;
}

.contact-actions {
  display: flex;
  justify-content: flex-end;
  max-width: 22rem;
}

.contact-send {
  min-height: 2.75rem;
  padding: 0.5rem 1.4rem;
  border: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.contact-send:hover,
.contact-send:focus-visible {
  background: var(--yellow);
  color: var(--ink);
}

.contact-send[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* The honeypot: off-screen, not display:none (some bots skip hidden fields). */
.contact-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-sent {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--yellow);
  background: var(--white);
}

.contact-sent:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.contact-sent p:last-child {
  margin-bottom: 0;
}

/* The black bar's account icon (sign-in arrow; the person once signed in), left of the globe. */
.account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.125rem;
  text-decoration: none;
}

.account-link:hover,
.account-link[aria-current="page"] {
  color: var(--white);
}

/* The black bar's "mein album" (the old site's picture icon and label), the count as a small
   yellow badge (holzobjekte.js fills it from the album cookie; hidden at 0 and without JS). */
.album-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  text-transform: lowercase;
  white-space: nowrap;
}

.album-link .icon {
  font-size: 1.125rem;
}

.album-link:hover,
.album-link[aria-current="page"] {
  color: var(--white);
}

.album-count {
  min-width: 1.25rem;
  padding: 0.15rem 0.35rem;
  border-radius: 0.65rem;
  background: var(--yellow);
  color: var(--black);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.album-count[hidden] {
  display: none;
}

/* The navigation's last link: "objekt erfassen" (the old header's "+"). */
.panel-nav__submit a::before {
  content: "+ ";
  font-weight: 700;
}

/* Member pages (/konto/...: body[data-konto]). The package's pages (login, forgot, reset,
   account …) bring their own styles and classes (.members-status); the selectors below are one
   attribute stronger than the package's, and its colour tokens get the site's. The site's own
   pages (register, Meine Objekte) are set like the contact form. */
[data-konto] {
  --paper: var(--white);
  --rule: #b3b3b3;
  --ink-soft: var(--ink);
  --ink-muted: #595959;
  --accent: var(--ink);
  --accent-deep: #b00000;
  --accent-tint: #fbeaea;
  --radius: 0;
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);
}

[data-konto] .members-status {
  min-height: 0;
  padding: 0;
}

[data-konto] .members-status .section-inner {
  max-width: 28rem;
}

[data-konto] .members-status__card {
  padding: 0;
  border: 0;
  background: none;
}

[data-konto] .members-status__tag {
  display: none;
}

[data-konto] .members-status h1,
[data-konto] .members-status .account-section h2 {
  margin: 0 0 1.25rem;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

[data-konto] .members-status .account-section h2 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
}

[data-konto] .members-status .account-section {
  border-top-color: var(--yellow);
}

[data-konto] .members-status p {
  line-height: 1.5;
}

[data-konto] .members-status a:not(.btn) {
  color: var(--ink);
  font-weight: 700;
}

[data-konto] .members-status .field label {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 700;
}

[data-konto] .members-status .field input:not([type="checkbox"]),
[data-konto] .konto-form .field input:not([type="checkbox"]) {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

[data-konto] .members-status .field input:focus,
[data-konto] .konto-form .field input:focus {
  outline: 3px solid var(--black);
  outline-offset: 2px;
  border-color: var(--rule);
}

[data-konto] .members-status .field-hint,
[data-konto] .konto-form .field-hint {
  margin: 0.3rem 0 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

[data-konto] .members-status .members-errors,
[data-konto] .konto-errors {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-left: 4px solid #b00000;
  background: #fbeaea;
  color: #b00000;
  font-size: 1rem;
  font-weight: 700;
}

[data-konto] .members-status__note,
[data-konto] .konto-note {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-left: 4px solid var(--yellow);
  background: var(--white);
  font-size: 1rem;
}

[data-konto] .members-status .btn,
.konto-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: auto;
  min-height: 2.75rem;
  padding: 0.5rem 1.4rem;
  border: 0;
  border-radius: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

[data-konto] .members-status .btn:hover,
[data-konto] .members-status .btn:focus-visible,
.konto-button:hover,
.konto-button:focus-visible {
  background: var(--yellow);
  color: var(--ink);
}

[data-konto] .members-status .account-delete {
  border: 1px solid #b00000;
  background: var(--white);
  color: #b00000;
}

[data-konto] .members-status .members-switch,
.konto-switch {
  margin: 1rem 0 0;
  font-size: 1rem;
  text-align: left;
}

[data-konto] .members-status .members-submit + .members-switch,
[data-konto] .members-status form + .members-switch {
  margin-top: 1.5rem;
}

[data-konto] .members-status .members-switch + .members-switch {
  margin-top: 0.4rem;
}

/* Register (/konto/register): two groups, the short fields side by side from 600 px. */
.site-main .konto-register {
  max-width: 34rem;
}

.konto-lead {
  margin-bottom: 1.5rem;
}

.konto-form fieldset {
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

.konto-form legend {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0 0 1px;
  border-bottom: 1px solid var(--yellow);
  font-size: 1.125rem;
  font-weight: 700;
}

.konto-form .field {
  margin: 0 0 1rem;
}

.konto-form .field label {
  display: block;
  margin: 0 0 0.3rem;
  font-weight: 700;
}

.konto-form [aria-invalid="true"] {
  border-color: #c00 !important;
  box-shadow: inset 3px 0 0 #c00;
}

@media (min-width: 600px) {
  .konto-form .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }

  .konto-form .field-row--street {
    grid-template-columns: 1fr 7rem;
  }

  .konto-form .field-row--city {
    grid-template-columns: 7rem 1fr;
  }
}

.konto-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400 !important;
}

.konto-check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--black);
}

.konto-check [aria-invalid="true"] {
  outline: 2px solid #c00;
  outline-offset: 2px;
}

.konto-actions {
  margin: 0 0 1rem;
}

/* Meine Objekte (/konto): one row per object, thumb, text and badge, actions. */
.konto-home__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1.5rem;
}

.site-main .konto-home__head h1 {
  margin: 0;
}

.konto-objects {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.konto-object {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: 12px;
  background: var(--white);
}

.konto-object__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel);
}

.konto-object__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-main .konto-object__title {
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
  font-size: 1.125rem;
}

.konto-object__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0 0 0.5rem;
  color: #595959;
  font-size: 0.875rem;
}

.konto-object__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.konto-object__edit {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

.konto-object__edit:hover,
.konto-object__edit:focus-visible {
  background: var(--yellow);
  color: var(--ink);
}

/* The state: grey draft, yellow in review, black when public. */
.konto-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--rule, #b3b3b3);
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.konto-badge--review {
  border-color: var(--yellow);
  background: var(--yellow);
}

.konto-badge--published,
.konto-badge--published_changed,
.konto-badge--published_draft {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.konto-badge--published_changed {
  box-shadow: inset 6px 0 0 var(--yellow);
  padding-left: 0.85rem;
}

.konto-badge--rejected {
  border-color: #b00000;
  background: #fbeaea;
  color: #b00000;
}

.konto-badge--offline {
  border-color: var(--panel);
  background: var(--panel);
  color: #595959;
}

.konto-empty {
  padding: 1rem;
  background: var(--white);
}

.konto-who {
  margin: 0 0 1rem;
}

.konto-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.konto-links li {
  margin: 0 0 0.4rem;
}

.konto-links form {
  margin: 0;
}

/* The account navigation (konto/_nav.twig): the current page bold, not underlined; sign out below. */
.konto-links a[aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
}

.konto-logout {
  margin: 0.8rem 0 0;
}

.konto-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* "Mein Album" (/album, body[data-album]): white cards as the account's list, the title over
   the cover (left) and the detail's rows (right), "Aus dem Album entfernen" under them; one
   column on phones. The side: the PDF or the sign-in options, set like the contact form. */
.album-summary {
  margin: -0.5rem 0 1.25rem;
  color: #595959;
  font-size: 0.875rem;
}

.album-items {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.album-item {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0.75rem 1.5rem;
  align-items: start;
  padding: 16px;
  background: var(--white);
}

.site-main .album-item__title {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.125rem;
}

.album-item__title a {
  color: inherit;
  text-decoration: none;
}

.album-item__title a:hover,
.album-item__title a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.album-item__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel);
}

.album-item__image a,
.album-item__image picture {
  display: block;
  height: 100%;
}

.album-item__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-item__info {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.43;
  overflow-wrap: anywhere;
}

.album-item__info a {
  color: inherit;
}

.album-item__co2,
.album-item__web {
  margin: 1.43em 0 0;
}

.album-item__co2 + .album-item__web {
  margin-top: 0;
}

.album-item__remove {
  margin: 1.25rem 0 0;
}

.album-remove {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.album-remove:hover,
.album-remove:focus-visible {
  border-color: var(--yellow);
  background: var(--yellow);
}

.album-empty {
  padding: 1rem;
  background: var(--white);
}

.album-empty a {
  color: inherit;
  font-weight: 700;
}

/* Why no PDF came (the throttle): as the account's error box. */
.album-notice {
  padding: 0.6rem 0.75rem;
  border-left: 4px solid #b00000;
  background: #fbeaea;
  color: #b00000;
  font-weight: 700;
}

/* .panel-side a inherits the text colour; the side's buttons keep theirs. */
.panel-side a.konto-button {
  color: var(--white);
}

.panel-side a.konto-button:hover,
.panel-side a.konto-button:focus-visible {
  color: var(--ink);
}

.album-side h3 {
  margin: 1.75rem 0 0.4rem;
  font-size: 1rem;
}

.album-side .album-side__account {
  margin-top: 2.5rem;
}

.album-pdf {
  margin: 0 0 1.43em;
}

.album-login {
  margin: 0 0 1rem;
}

.album-login__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  max-width: 22rem;
}

@media (max-width: 599px) {
  .album-item {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
}

/* The flyer shop (/shop, body[data-shop]) as the old page: per product the title, the cover
   (left, small) and the text, price and order lines (right), products parted by a grey rule; an
   order line is the old input group (grey label, quantity, the yellow "In den Warenkorb").
   The side: "Ihr Warenkorb" (not lowercased, as the old cart), lines, total, the buttons. */
.shop-products {
  display: grid;
}

.shop-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 0.5rem 2rem;
  padding: 0 0 2rem;
  margin: 0 0 2rem;
  border-bottom: 1px solid #e3e3e3;
}

.site-main .shop-product__title {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.125rem;
}

.shop-product__image {
  padding-left: 15px;
}

.shop-product__image img {
  width: 100%;
  max-width: 130px;
  height: auto;
}

.shop-product__body {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.43;
}

.shop-product__text {
  margin: 0 0 1.43em;
}

.shop-product__text p {
  margin: 0 0 1.43em;
}

.shop-product__text p:last-child {
  margin-bottom: 0;
}

.shop-product__package {
  margin: 0 0 1.43em;
}

.shop-product__price {
  margin: 0 0 2.5rem;
}

.shop-product__lines {
  display: grid;
  gap: 10px;
}

.shop-add {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 100%;
}

.shop-add__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.5rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid #ccc;
  white-space: nowrap;
  border-right: 0;
  background: var(--panel);
  font-size: 0.9375rem;
  text-align: center;
}

.shop-add__qty,
.shop-cart__qty {
  width: 4rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.shop-add__qty[disabled],
.shop-cart__qty[readonly] {
  background: var(--panel);
  color: #595959;
}

.shop-add__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--yellow);
  border-radius: 0;
  background: #f4f3cf;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.shop-add__button:hover,
.shop-add__button:focus-visible {
  background: var(--yellow);
}

/* "Im Warenkorb · Zum Warenkorb" under the pressed line (htmx; phones see the cart only far
   below). Wide screens show the cart beside the list: there only screen readers hear it. */
.shop-add__status {
  flex: 0 0 100%;
  margin: 0;
}

.shop-add__status:not(:empty) {
  margin-top: 0.4rem;
  font-weight: 700;
}

.shop-add__status a {
  margin-left: 0.4rem;
  color: inherit;
}

@media (min-width: 768px) {
  .shop-add__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.shop-cart h2 {
  text-transform: none;
}

.shop-cart__items {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.shop-cart__item {
  padding: 0 0 0.75rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid #e3e3e3;
}

.panel-side .shop-cart__title {
  margin: 0 0 0.4rem;
}

.shop-cart__dl .icon {
  display: inline-block;
  vertical-align: -0.15em;
}

.shop-cart__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.shop-cart__remove {
  margin: 0;
}

.shop-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid #b00000;
  border-radius: 0;
  background: var(--white);
  color: #b00000;
  cursor: pointer;
}

.shop-remove:hover,
.shop-remove:focus-visible {
  background: #b00000;
  color: var(--white);
}

.shop-cart__sum {
  margin-left: auto;
}

.panel-side .shop-cart__total {
  display: flex;
  justify-content: space-between;
  margin: 0 0 1rem;
}

.shop-cart__total strong {
  border-bottom: 3px double;
}

.shop-cart__update {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
}

.panel-side .shop-cart__legend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  order: 2;
  margin: 0;
}

.shop-update {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.shop-update:hover,
.shop-update:focus-visible {
  border-color: var(--yellow);
  background: var(--yellow);
}

@media (max-width: 599px) {
  .shop-product {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-add__label {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  .shop-add__qty {
    width: 3.25rem;
  }

  .shop-add__button {
    padding: 0.25rem 0.5rem;
  }
}

/* The checkout (/konto/bestellung, body[data-checkout]) and its thanks page: the old
   "Bestellübersicht" as rows (title | quantity x price | sum, the total double-underlined as the
   cart), then the sign-in options side by side (guest) or the contact data and the form. */
.site-main .checkout {
  max-width: 44rem;
}

.checkout-block {
  margin: 0 0 2rem;
}

.site-main .checkout-block h2 {
  margin: 0 0 0.75rem;
  padding: 0 0 1px;
  border-bottom: 1px solid var(--yellow);
  font-size: 1.125rem;
  text-transform: none;
}

.checkout-lines {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.checkout-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid #e3e3e3;
}

.checkout-line__qty {
  color: var(--ink-muted);
  white-space: nowrap;
}

.checkout-line__sum {
  min-width: 5.5rem;
  text-align: right;
  white-space: nowrap;
}

.checkout-line .shop-cart__dl .icon,
.checkout-legend .icon,
.checkout-download .icon {
  display: inline-block;
  vertical-align: -0.15em;
}

.checkout-total {
  display: flex;
  justify-content: space-between;
  margin: 0 0 1rem;
  font-size: 1.0625rem;
}

.checkout-total strong {
  border-bottom: 3px double;
}

.checkout-overview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.checkout-overview__foot .shop-update,
.checkout-block .shop-update {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.checkout-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}

.checkout-options {
  display: grid;
  gap: 1.5rem 2.5rem;
}

.site-main .checkout-option h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.checkout-address {
  margin: 0 0 0.75rem;
  font-style: normal;
  line-height: 1.5;
}

.checkout-address span {
  display: block;
}

.checkout-address span:first-child {
  font-weight: 700;
}

.checkout-change {
  margin: 0 0 1.5rem;
}

.checkout-missing a {
  color: inherit;
}

.checkout-privacy {
  margin: 0 0 1rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.checkout-form .konto-button[disabled] {
  background: #9a9a9a;
  cursor: not-allowed;
}

.checkout-thanks__text {
  margin: 0 0 2rem;
}

.checkout-downloads .checkout-line {
  grid-template-columns: minmax(0, 1fr) auto;
}

.checkout-download {
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
}

.checkout-line__missing {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

@media (min-width: 900px) {
  .checkout-options {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 599px) {
  .checkout-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .checkout-line__title {
    grid-column: 1 / -1;
  }

  .checkout-downloads .checkout-line {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-downloads .checkout-download {
    justify-self: start;
  }
}

/* The submission wizard (/konto/objekte/…, body[data-wizard]): the step list as a numbered
   progress bar, calm white field groups, Zurück | status | Weiter at the bottom. */
.wizard {
  max-width: 42rem;
}

.site-main .wizard__title {
  margin: 0 0 1.25rem;
}

.wizard-default {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wizard-steps {
  margin: 0 0 1.75rem;
}

.wizard-steps__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

/* The line to the previous step: black up to the current step. */
.wizard-step::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: #c8c8c8;
}

.wizard-step:first-child::before {
  display: none;
}

.wizard-step--done::before,
.wizard-step--current::before {
  background: var(--black);
}

.wizard-step__link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
}

button.wizard-step__link,
a.wizard-step__link {
  cursor: pointer;
}

.wizard-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid #b3b3b3;
  border-radius: 50%;
  background: var(--white);
  color: #595959;
  font-size: 0.9375rem;
  font-weight: 700;
}

.wizard-step__n .icon {
  width: 18px;
  height: 18px;
  stroke-width: 3;
}

.wizard-step--done .wizard-step__n {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.wizard-step--current .wizard-step__n {
  border-color: var(--black);
  background: var(--yellow);
  color: var(--ink);
}

.wizard-step__label {
  font-size: 0.875rem;
  line-height: 1.25;
}

.wizard-step--current .wizard-step__label {
  font-weight: 700;
}

.wizard-step--open .wizard-step__label {
  color: #595959;
}

.wizard-step__link:hover .wizard-step__n {
  border-color: var(--black);
}

.wizard-step__link:hover .wizard-step__label {
  text-decoration: underline;
}

.wizard-step__link:focus-visible {
  outline: none;
}

.wizard-step__link:focus-visible .wizard-step__n {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.wizard-step__link[aria-disabled="true"] {
  cursor: default;
}

.wizard-steps__where {
  display: none;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
}

.wizard-intro {
  max-width: 40rem;
}

.wizard-legend {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: #595959;
}

.wizard-eye {
  display: inline-flex;
  vertical-align: -0.15em;
  color: #595959;
}

.wizard-eye .icon {
  width: 1.1em;
  height: 1.1em;
}

/* Fields: white groups; the group's legend is the yellow-ruled heading. */
.wizard-form {
  max-width: none;
}

/* A party (name, place, e-mail, website): two columns from 600 px. */
@media (min-width: 600px) {
  .wizard-group[data-group^="gallery.info."] .wizard-group__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 1rem;
    align-items: start;
  }
}

.wizard-form .wizard-group {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem 0.25rem;
  background: var(--white);
}

.wizard-form fieldset.wizard-group legend {
  float: left;
  margin-bottom: 1rem;
}

.wizard-form fieldset.wizard-group legend + * {
  clear: both;
}

.wizard-form .field input:not([type="checkbox"]):not([type="radio"]),
.wizard-form .field textarea {
  max-width: 32rem;
}

.wizard-form .field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 9rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.wizard-form .field textarea:focus {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

[data-konto] .wizard-form .field[data-field="zip"] input:not([type="checkbox"]),
[data-konto] .wizard-form .wizard-field--year input:not([type="checkbox"]) {
  max-width: 8rem;
}

[data-konto] .wizard-form .wizard-field--decimal input:not([type="checkbox"]) {
  max-width: 12rem;
}

.wizard-check {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2rem;
}

.wizard-check .konto-check {
  min-width: 11rem;
}

.wizard-check__swiss .konto-check {
  color: #595959;
}

.wizard-typed {
  margin: 0.35rem 0 0;
  padding: 0.3rem 0.5rem;
  background: #fff8cc;
  font-size: 0.875rem;
}

.wizard-errors ul {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.25rem;
}

.wizard-errors a {
  color: inherit;
}

.wizard-errors p {
  margin: 0;
}

.wizard-errors .wizard-errors__rest {
  margin-top: 0.25rem;
  color: var(--ink);
  font-weight: 400;
}

.wizard-errors:focus,
.wizard-conflict:focus,
.wizard-thanks:focus {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin: 1.5rem 0 0;
}

.wizard-actions .wizard-next {
  margin-left: auto;
}

.wizard-status {
  flex: 1 1 10rem;
  min-height: 1.5em;
  margin: 0;
  font-size: 0.875rem;
  color: #595959;
}

.wizard-status:empty {
  min-height: 0;
}

.wizard-status__ok {
  color: #2d6a1f;
  font-weight: 700;
}

.wizard-status__error {
  color: #b00000;
  font-weight: 700;
}

.wizard-status__error a {
  color: inherit;
}

/* The quieter button: Zurück, zurückziehen, verwerfen. */
.wizard-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.2rem;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.wizard-back:hover,
.wizard-back:focus-visible {
  background: var(--yellow);
}

.konto-button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Step CO₂: the calculator (wizard/co2.twig). One table per area; from 640 px a real table, below
   that each row is a card (label on top, then "Rohdichte / Faktor / Menge / Einsparung" with
   their column names), so nothing scrolls sideways on a phone. */
.co2calc__heading,
.co2calc__shown-heading {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  line-height: 1.3;
}

.co2calc__shown-heading {
  margin-top: 1.75rem;
}

.co2calc__shown-hint {
  margin: 0 0 0.75rem;
}

.co2calc__table {
  width: 100%;
  margin: 1rem 0 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.co2calc__table th:nth-child(1) { width: 38%; }
.co2calc__table th:nth-child(2) { width: 14%; }
.co2calc__table th:nth-child(3) { width: 11%; }
.co2calc__table th:nth-child(4) { width: 20%; }
.co2calc__table th:nth-child(5) { width: 17%; }

.co2calc__table caption {
  padding: 0.35rem 0;
  border-bottom: 3px solid var(--yellow);
  text-align: left;
  font-weight: 700;
}

.co2calc__table th,
.co2calc__table td {
  padding: 0.5rem 0.6rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}

.co2calc__table th {
  font-size: 0.875rem;
  font-weight: 700;
  color: #595959;
}

.co2calc__table .co2calc__factor,
.co2calc__table .co2calc__result {
  font-variant-numeric: tabular-nums;
}

.co2calc__table td label {
  display: block;
  margin: 0;
}

.co2calc__quantity {
  white-space: nowrap;
}

.co2calc__table input {
  width: 6.5rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: right;
}

.co2calc__table input:focus {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.co2calc__unit {
  margin-left: 0.35rem;
  color: #595959;
}

.co2calc__result span {
  font-weight: 700;
}

.co2calc__sum {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 1rem -1.25rem 0;
  padding: 0.9rem 1.25rem;
  background: var(--panel);
}

.co2calc__total {
  margin: 0;
  font-size: 1.15rem;
}

.co2calc__total output {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.co2calc__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.co2calc__skip {
  margin: 0 0 1rem;
}

.co2calc__skip a {
  color: var(--ink);
}

/* JS has a live total: no "Berechnen" button then. */
[data-co2calc].is-live [data-co2-calc] {
  display: none;
}

@media (max-width: 639px) {
  .co2calc__table,
  .co2calc__table tbody,
  .co2calc__table tr,
  .co2calc__table td {
    display: block;
  }

  .co2calc__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .co2calc__table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
  }

  .co2calc__table td {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0;
    border: 0;
  }

  .co2calc__table td::before {
    content: attr(data-label);
    font-size: 0.8125rem;
    color: #595959;
  }

  .co2calc__table td.co2calc__name {
    grid-column: 1 / -1;
    padding-bottom: 0.2rem;
    font-weight: 700;
  }

  .co2calc__table td.co2calc__name::before {
    content: none;
  }

  .co2calc__table td.co2calc__quantity {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .co2calc__table td.co2calc__quantity::before {
    flex: 0 0 100%;
  }

  .co2calc__table input {
    width: 5.5rem;
  }

  .co2calc__sum {
    margin: 1rem -1.25rem 0;
  }
}

/* Step Bilder: the image list (thumbnails with their buttons) and the upload forms, in a
   white box like the field groups; the heading is ruled yellow like their legends. */
.wizard-images {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem 0.25rem;
  background: var(--white);
}

.site-main .wizard-images__heading {
  margin: 0 0 1rem;
  padding: 0 0 1px;
  border-bottom: 1px solid var(--yellow);
  font-size: 1.125rem;
  font-weight: 700;
}

.wizard-images__count {
  font-weight: 400;
  color: #595959;
}

.wizard-images__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.wizard-image {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.wizard-image__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f1f1f1;
}

.wizard-image__label {
  margin: 0;
  font-weight: 700;
}

.wizard-image__cover,
.wizard-image__legacy {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 400;
}

.wizard-image__legacy {
  background: #ececec;
}

.wizard-image__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.wizard-image__button {
  min-height: 2.25rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8125rem;
}

.wizard-image__remove {
  border-color: #b00000;
  color: #b00000;
}

.wizard-uploads {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.wizard-upload {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid #e4e4e4;
}

.wizard-upload:first-child {
  border-top: 0;
}

.wizard-upload__label {
  flex: 0 0 9rem;
  font-weight: 700;
}

.wizard-upload__file {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
  font: inherit;
}

.wizard-upload__button {
  min-height: 2.25rem;
  padding: 0.25rem 0.9rem;
  font-size: 0.875rem;
}

.wizard-images__error p {
  margin: 0;
}

/* The image picker (holzobjekte.js): its controls under the list, in the same white box; the
   one-file forms go once it runs. A dashed drop zone with the "Bilder auswählen" button (the
   file input itself is hidden but focusable: its focus ring shows on the button), then the
   queue: one row per file with name, size, a progress bar, its state and its buttons. */
.image-picker {
  margin: 0 0 1.25rem;
}

.image-picker > .wizard-images {
  margin-bottom: 0;
}

.image-picker[data-picker-ready] .wizard-uploads {
  display: none;
}

.picker {
  padding: 0 1.25rem 1rem;
  background: var(--white);
}

.picker[hidden] {
  display: none;
}

.picker__drop {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1rem;
  border: 2px dashed #9a9a9a;
  background: #fafafa;
}

.picker__drop.is-over {
  border-color: var(--black);
  background: #f9f6e0;
}

.picker.is-full .picker__drop {
  display: none;
}

.picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

.picker__input:focus-visible + .picker__choose {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.picker__choose {
  cursor: pointer;
}

.picker__hint {
  flex: 1 1 14rem;
  min-width: 0;
  margin: 0;
  color: #595959;
}

.picker__alert {
  margin: 0.75rem 0 0;
  color: #b00000;
  font-weight: 700;
}

.picker__alert:empty,
.picker__queue:empty {
  margin: 0;
}

.picker__alert a,
.picker-row__state a {
  color: inherit;
}

.picker__queue {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border-left: 4px solid #9a9a9a;
  background: #f4f4f4;
}

.picker-row[data-state="done"] {
  border-left-color: var(--yellow);
}

.picker-row__progress[hidden] {
  display: none;
}

.picker-row[data-state="error"] {
  border-left-color: #b00000;
  background: #fdf1f1;
}

.picker-row__file {
  display: flex;
  min-width: 0;
  gap: 0.6rem;
  margin: 0;
}

.picker-row__name {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-row__size {
  flex: none;
  color: #595959;
  font-variant-numeric: tabular-nums;
}

.picker-row__progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.picker-row__bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 0.5rem;
  border: 0;
  background: #dcdcdc;
  color: var(--black);
  -webkit-appearance: none;
  appearance: none;
}

.picker-row__bar::-webkit-progress-bar {
  background: #dcdcdc;
}

.picker-row__bar::-webkit-progress-value {
  background: var(--black);
}

.picker-row__bar::-moz-progress-bar {
  background: var(--black);
}

.picker-row[data-state="error"] .picker-row__bar::-webkit-progress-value {
  background: #b00000;
}

.picker-row[data-state="error"] .picker-row__bar::-moz-progress-bar {
  background: #b00000;
}

.picker-row__percent {
  flex: none;
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.picker-row__state {
  margin: 0;
}

.picker-row[data-state="error"] .picker-row__state {
  color: #b00000;
  font-weight: 700;
}

.picker-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.picker-row__actions[hidden] {
  display: none;
}

.picker-row__button {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

.picker-row__button[hidden] {
  display: none;
}

.picker-row__remove {
  border-color: #b00000;
  color: #b00000;
}

@media (max-width: 599px) {
  .picker {
    padding: 0 0.75rem 0.75rem;
  }

  .picker__choose {
    width: 100%;
  }
}

/* Step Typ: radio cards under their group. */
.wizard-types__all:focus {
  outline: none;
}

.wizard-typegroup {
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

.wizard-typegroup__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 8px;
}

.wizard-type {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border: 2px solid var(--white);
  background: var(--white);
  cursor: pointer;
}

.wizard-type:hover {
  border-color: #b3b3b3;
}

.wizard-type:has(input:checked) {
  border-color: var(--black);
  box-shadow: inset 6px 0 0 var(--yellow);
}

.wizard-type:has(input:focus-visible) {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.wizard-type input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--black);
}

.wizard-type__title {
  display: block;
  font-weight: 700;
  line-height: 1.3;
}

.wizard-type__text {
  display: block;
  margin-top: 0.25rem;
  color: #595959;
  font-size: 0.875rem;
  line-height: 1.4;
}

[data-invalid] .wizard-type {
  border-color: #f0c4c4;
}

/* Prüfen & absenden. */
.wizard-thanks {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--yellow);
  background: var(--white);
}

.wizard-thanks p:last-child,
.wizard-state p:last-child,
.wizard-state form {
  margin-bottom: 0;
}

.wizard-state form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-top: 0.75rem;
}

.wizard-state .field-hint {
  color: #595959;
  font-size: 0.875rem;
}

.wizard-missing {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #b00000;
  background: #fbeaea;
}

.site-main .wizard-missing h2 {
  margin: 0 0 0.4rem;
  padding: 0;
  border: 0;
  color: #b00000;
  font-size: 1rem;
}

.wizard-missing p {
  margin: 0 0 0.3rem;
}

.wizard-missing ul {
  margin: 0;
  padding-left: 1.25rem;
}

.wizard-missing a {
  color: var(--ink);
  font-weight: 700;
}

.wizard-missing__step {
  color: #595959;
  font-size: 0.875rem;
}

.wizard-complete {
  margin: 0 0 1.5rem;
  padding: 0.6rem 1rem;
  border-left: 4px solid #2d6a1f;
  background: var(--white);
  font-weight: 700;
}

.site-main .wizard-public h2,
.site-main .wizard-summary h2,
.site-main .wizard-submit h2 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 2rem 0 0.75rem;
  font-size: 1.125rem;
}

.wizard-public__card,
.wizard-summary__step {
  margin: 0 0 12px;
  padding: 1rem 1.25rem;
  background: var(--white);
}

.wizard-public__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.wizard-public__category {
  margin: 0 0 0.75rem;
  color: #595959;
}

.wizard-public dl,
.wizard-summary dl {
  margin: 0;
}

.wizard-public .info-row,
.wizard-summary__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.4rem 0;
  border-top: 1px solid #ececec;
}

.wizard-public dt,
.wizard-summary dt {
  color: #595959;
}

.wizard-public dd,
.wizard-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.wizard-summary__head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.5rem;
}

.site-main .wizard-summary__head h3 {
  margin: 0;
  font-size: 1rem;
}

.wizard-summary__head a {
  color: var(--ink);
  font-weight: 700;
}

.wizard-summary__row.is-missing {
  box-shadow: inset 3px 0 0 #c00;
  padding-left: 0.6rem;
}

.wizard-summary__row.is-missing dd {
  color: #b00000;
  font-weight: 700;
}

.wizard-private {
  display: inline-block;
  padding: 0 0.35rem;
  border: 1px solid #c8c8c8;
  color: #595959;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: nowrap;
}

.wizard-submit {
  margin-top: 1rem;
}

.wizard-agb {
  max-height: 16rem;
  overflow: auto;
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  background: var(--white);
  font-size: 0.875rem;
}

.wizard-agb:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.wizard-agb p {
  margin: 0 0 0.75rem;
}

.wizard-side__object {
  margin: 0 0 0.75rem;
}

@media (max-width: 599px) {
  .wizard-step::before {
    top: 15px;
  }

  .wizard-step__n {
    width: 32px;
    height: 32px;
  }

  .wizard-step__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .wizard-steps__where {
    display: block;
  }

  .wizard-form .wizard-group {
    padding: 0.85rem 0.85rem 0.1rem;
  }

  .wizard-public .info-row,
  .wizard-summary__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .wizard-actions .wizard-next {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 599px) {
  .konto-object {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .konto-object__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }
}

/* Page text: a paragraph that is a bold line only reads as a heading (the imported texts). */
.text-block p:has(> strong:only-child) {
  margin-bottom: 0.2rem;
}

/* Main */
.site-main {
  grid-area: main;
  padding: 40px var(--gutter) 64px;
  background: var(--bg);
}

.site-main:focus {
  outline: none;
}

.site-main > * {
  max-width: 56rem;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1px;
}

.site-main h1 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Section headings: a thin yellow rule as on the old site. */
.site-main h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--yellow);
}

.site-main h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 1rem;
}

/* Gallery (list, category, filter, search, company, detail): the stage fills the main column on
   the old bar colour #444 (images letterboxed, 4:3), the button column over its left edge, the
   badges bottom-left, the share bar bottom-right; the side panel holds the info (cream tint) and
   the list (yellow rules). Without JS the slider is a scroll-snap strip. */
:root {
  --stage: #444;
  --stage-button: #a9a9a9;
  --cream: #f9f6e0;
}

.site-main:has(> .gallery-stage) {
  padding: 0;
  background: var(--stage);
}

.site-main > .gallery-stage {
  max-width: none;
}

.gallery-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "frame"
    "next";
  color: var(--white);
  background: var(--stage);
}

.gallery-stage :focus-visible {
  outline-color: var(--yellow);
}

/* The frame: 4:3, at most the window below the header and the caption row (copyright, next
   object), so the stage stays in view as on the old site. The controls and badges share its cell. */
.slider {
  grid-area: frame;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: calc(100vh - var(--header-h) - 48px);
  background: var(--stage);
}

.slider:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: -3px;
}

.slider-track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--stage-button) var(--stage);
}

.slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}

.slide picture,
.slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.slide img {
  object-fit: contain;
}

/* With the script: one image at a time, moved by the buttons, the keys and the pointer. */
.slider.is-enhanced .slider-track {
  overflow: hidden;
  scroll-snap-type: none;
  scrollbar-width: none;
  touch-action: pan-y;
  cursor: grab;
}

.slider.is-enhanced .slider-track.is-dragging {
  cursor: grabbing;
}

.slider-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #e0e0e0;
  font-size: 1rem;
}

/* The old logo's chevrons as a calm mark, above the text. */
.slider-empty::before,
.thumb-empty::before {
  content: "< >";
  color: var(--yellow);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.slider-empty::before {
  position: absolute;
  top: calc(50% - 3.25rem);
  font-size: 2.5rem;
  opacity: 0.6;
}

.thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  aspect-ratio: 4 / 3;
  background: #e6e6e6;
}

.thumb-empty::before {
  font-size: 1.25rem;
  opacity: 0.8;
}

.slider-controls[hidden] {
  display: none;
}

.slider-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 64px;
  margin-top: -32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}

.slider-button:hover {
  color: var(--yellow);
}

.slider-button[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.slider-prev {
  left: 12px;
}

.slider-next {
  right: 12px;
}

.slider-counter {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
  margin: 0;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Button column, badges and share bar sit in the frame's cell. */
.stage-buttons,
.stage-badges,
.share {
  grid-area: frame;
  z-index: 3;
}

.stage-buttons {
  position: relative;
  align-self: start;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 70px 0 0 10px;
}

.stage-buttons:empty {
  display: none;
}

.stage-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.stage-button[hidden],
.stage-button-icon[hidden] {
  display: none;
}

.stage-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--stage-button);
  font-size: 1.375rem;
}

.stage-button:hover .stage-button-icon,
.stage-button[data-playing] .stage-button-icon {
  background: var(--black);
}

.stage-like,
.stage-album {
  display: contents;
}

/* A refused like (old token, too many): a short note beside the button column. */
.like-note {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  z-index: 3;
  width: 16rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--yellow);
  background: var(--white);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
}

@media (max-width: 767px) {
  .like-note {
    top: calc(100% + 8px);
    left: 0;
    width: min(16rem, calc(100vw - 32px));
  }
}

/* The like button: a white heart on the grey tile, "N top" under it; pressed = this browser liked. */
.stage-like .icon {
  fill: currentColor;
}

.stage-like .stage-button[aria-pressed="true"] .stage-button-icon {
  background: var(--black);
}

.stage-like .stage-button[aria-pressed="true"] .icon {
  color: var(--yellow);
}

/* The longer fr/it label ("aggiungi all’album") wraps to two lines, so the button column keeps
   its width and leaves room for the share bar on phones. */
.stage-album .stage-button-label {
  max-width: 4.75rem;
  text-align: center;
}

/* The album toggle: the picture on the grey tile, "ins album" under it; pressed = in this
   browser's album (black tile, yellow picture, "im album"), as the pressed like. */
.stage-album .stage-button[aria-pressed="true"] .stage-button-icon {
  background: var(--black);
}

.stage-album .stage-button[aria-pressed="true"] .icon {
  color: var(--yellow);
}

.stage-button-label {
  margin-top: 3px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--white);
  font-size: 0.75rem;
  line-height: 1.25;
  text-transform: lowercase;
}

.stage-badges {
  align-self: end;
  justify-self: start;
  display: flex;
  gap: 10px;
  margin: 0 0 10px 12px;
  padding: 0;
  list-style: none;
}

/* Yellow as the old badge; dark text instead of white so the number stays readable. */
.co2-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 50px; /* grows for long values (furniture in kg: "6520") */
  height: 50px;
  padding: 0 5px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.625rem;
  line-height: 1;
  text-decoration: none;
}

.co2-badge strong {
  margin-bottom: 3px;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.stage-badge img {
  width: 50px;
  height: 50px;
}

.share {
  align-self: end;
  justify-self: end;
  display: flex;
  gap: 4px;
  margin: 0 10px 10px 0;
  padding: 0;
  list-style: none;
}

.share a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--black);
  color: var(--white);
  font-size: 1.25rem;
}

.share a:hover {
  color: var(--yellow);
}

.stage-meta {
  grid-area: next;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px 16px 12px;
  font-size: 0.875rem;
}

.stage-meta p {
  margin: 0;
}

.stage-copyright {
  color: #d6d6d6;
  font-size: 0.75rem;
}

.stage-next {
  margin-left: auto;
  text-align: right;
}

.next-object {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #e6e6e6;
  text-decoration: none;
}

.next-object:hover {
  color: var(--white);
  text-decoration: underline;
}

/* Every other page with the panel (desktop): the band and the black bar stay at the top of the
   panel and the rest (navigation, panel text, side texts, the contact form) scrolls beneath
   them. The panel is the scroll container; .panel-menu (the phones' disclosure) drops its box so
   the bar sticks to the panel. --band-h is the band's height (holzobjekte.js; without it the
   one- and two-line band's 90 px), scroll-padding keeps a focused field and its label clear of both. */
@media (min-width: 768px) {
  body:not([data-screen="gallery"]) .site-panel {
    scroll-padding-top: calc(var(--band-h, var(--header-h)) + var(--bar-h) + 40px);
  }

  body:not([data-screen="gallery"]) .panel-menu {
    display: contents;
  }

  body:not([data-screen="gallery"]) .panel-title {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  body:not([data-screen="gallery"]) .panel-bar {
    position: sticky;
    top: var(--band-h, var(--header-h));
    z-index: 2;
  }
}

/* Side panel: the list, the active object's card open. On desktop the band and the black bar
   (with the opened navigation) stay put and only the list beneath scrolls (the old site's
   scroll area); the script scrolls the open card to its top. */
.gallery-side {
  font-size: 0.875rem;
  line-height: 1.43;
}

[data-screen="gallery"] .site-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Not even a fragment jump (#item-n without JS) may scroll the band away. */
  overflow: clip;
}

[data-screen="gallery"] .panel-title,
[data-screen="gallery"] .panel-menu {
  flex: none;
}

/* A long navigation scrolls on its own, so the list keeps some room. */
[data-screen="gallery"] .panel-menu {
  max-height: 60vh;
  overflow-y: auto;
}

[data-screen="gallery"] .gallery-side {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gallery-side ul,
.gallery-side ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-thumb img {
  width: 130px;
}

/* The open card: its head as in the list, the info beneath it, on the cream gradient. */
.gallery-item.is-expanded {
  background: linear-gradient(to bottom, var(--white) 0%, var(--cream) 100%);
}

.gallery-list .gallery-item.is-expanded > a,
.gallery-list .gallery-item.is-expanded > a:hover {
  background: none;
}

.item-info {
  padding: 14px 15px 16px;
}

.info-rows {
  margin: 0;
}

/* A blank line between the groups (parties | place | CO₂ | wood | description), as before. */
.info-group + .info-group {
  margin-top: 1.43em;
}

.info-rows dt {
  display: inline;
  font-weight: 700;
}

.info-rows dt::after {
  content: ": ";
}

.info-rows dd {
  display: inline;
  margin: 0;
}

.info-rows dd::after {
  content: "\A";
  white-space: pre;
}

.info-rows dd:has(> ul)::after {
  content: none;
}

.info-rows dd ul {
  display: block;
}

.info-rows dd li::before {
  content: "- ";
}

.info-certificates {
  margin-top: 16px;
}

.info-certificates li + li {
  margin-top: 12px;
}

.info-certificates img {
  width: 240px;
  margin-bottom: 2px;
}

.info-company {
  margin: 16px 0 0;
}

.gallery-item {
  border-bottom: 1px solid var(--yellow);
}

.gallery-item > a {
  position: relative;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: start;
  column-gap: 15px;
  min-height: 80px;
  padding: 6px 15px;
  color: var(--ink);
  text-decoration: none;
}

.gallery-item > a:hover,
.gallery-item > a[aria-current="true"] {
  background: linear-gradient(to bottom, var(--white) 0%, var(--cream) 100%);
}

.gallery-item > a:hover .item-title {
  text-decoration: underline;
}

.gallery-item > a:focus-visible {
  outline-offset: -3px;
}

.item-thumb {
  grid-column: 1;
}

.item-text {
  grid-column: 2;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.item-title {
  margin-top: 2px;
}

.item-category {
  margin-top: 4px;
  font-size: 0.6875rem;
}

/* The ranking's place: big and pale behind the text, as before (dark enough to read). */
.item-rank {
  position: absolute;
  top: 4px;
  right: 20px;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: #8c8c8c;
}

/* Now that the place is dark enough to read, a long title must not run over it. */
.gallery-item > a:has(.item-rank) .item-text {
  padding-right: 64px;
}

.gallery-more,
.gallery-prev {
  padding: 16px 15px;
}

.gallery-more:not(:has(a)),
.gallery-prev:not(:has(a)) {
  display: none;
}

.more-link {
  display: inline-block;
  padding: 10px 18px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.more-link:hover {
  text-decoration: underline;
}

.more-link.htmx-request {
  opacity: 0.6;
}

.gallery-ads {
  padding: 16px 15px;
}

.gallery-ads ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* The info texts: without JS open sections at the end of the panel (the badge links scroll
   there); with JS modal dialogs. */
.info-dialog {
  position: static;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 16px 15px;
  border: 0;
  border-top: 1px solid var(--yellow);
  background: transparent;
  color: var(--ink);
}

.info-dialog:not([open]) {
  display: none;
}

.info-dialog-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.35;
}

.info-dialog p {
  margin: 0 0 0.75rem;
}

.info-dialog:not(:modal) .info-dialog-close {
  display: none;
}

.info-dialog:modal {
  position: fixed;
  width: min(34rem, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 24px 24px 20px;
  border: 0;
  border-top: 6px solid var(--yellow);
  background: var(--white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.info-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.info-dialog-close {
  margin: 1rem 0 0;
  text-align: right;
}

.info-dialog-close button {
  min-height: 44px;
  padding: 8px 20px;
  border: 0;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.gallery-empty {
  padding: 0;
}

/* Phones: header with logo and menu button, the title band, then the disclosure
   (bar, navigation, info), then the content. */
/* Home and the "+" overlay: the search, the top-object teaser, the tiles (white cards, 4:3
   image, bold title). On other pages the overlay replaces the main column while it is open. */
.overlay-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-left: auto;
  color: var(--yellow);
  font-size: 2.25rem;
  text-decoration: none;
}

.overlay-toggle > span {
  display: inline-flex;
}

.overlay-toggle .overlay-close,
.overlay-toggle[aria-expanded="true"] .overlay-open {
  display: none;
}

.overlay-toggle[aria-expanded="true"] .overlay-close {
  display: inline-flex;
  color: var(--black);
  font-size: 1.75rem;
}

.overlay-toggle:hover {
  color: var(--ink);
}

.site-overlay[hidden] {
  display: none;
}

.site-main:has(> .site-overlay:not([hidden])) {
  padding: 40px var(--gutter) 64px;
  background: var(--bg);
}

.site-main:has(> .site-overlay:not([hidden])) > :not(.site-overlay) {
  display: none;
}

.site-main > .overlay-section,
.site-main > .site-overlay {
  max-width: none;
}

.site-main h2:where(.overlay-section > h2) {
  margin-top: 4rem;
}

.overlay-section:first-of-type > h2 {
  margin-top: 1.5rem;
}

.site-search {
  max-width: 420px;
  margin: 1.75rem 0 1.75rem;
}

.site-search label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}

.site-search-field {
  display: flex;
}

/* One focus ring around the field and its button: the ring on the input alone looked broken. */
.site-search-field:has(:focus-visible) {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

.site-search-field :focus-visible {
  outline: none;
}

.site-search-field input {
  flex: 1;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #c4c4c4;
  border-right: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}

.site-search-field input::placeholder {
  color: #737373;
}

.site-search-field button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 36px;
  padding: 0;
  border: 1px solid #c4c4c4;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 1.125rem;
  cursor: pointer;
}

.site-search-field button:hover {
  background: var(--yellow);
}

.top-teaser-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  max-width: 420px;
  color: var(--ink);
  text-decoration: none;
}

.top-teaser-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9375rem;
}

.top-teaser-heading {
  font-size: 1.125rem;
}

.top-teaser-link:hover .top-teaser-heading {
  text-decoration: underline;
}

.top-teaser-logo {
  flex: none;
  width: 80px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 214px));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.tile a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 8px 18px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* Hover as on the old cards: black card, yellow title, a soft shadow; the image zooms in a little. */
.tile a:hover,
.tile a:focus-visible {
  background: var(--black);
  color: var(--yellow);
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.55);
}

.tile-image picture img {
  transition: transform 0.4s ease;
}

.tile a:hover .tile-image picture img,
.tile a:focus-visible .tile-image picture img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .tile a,
  .tile-image picture img {
    transition: none;
  }
}

.tile-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e6e6e6;
}

.tile-image picture,
.tile-image picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.tile-image picture img {
  object-fit: cover;
}

/* The Schweizer Holz label in the image's top right corner, as on the old tiles. */
.tile-label {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 25%;
}

.tile-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tile-empty::before {
  content: "< >";
  color: var(--yellow);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.tile-title {
  display: block;
  margin-top: 14px;
  padding: 0 2px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  hyphens: auto;
}

/* Top object page: the head (title, slider, logo and texts) on the light grey, then the
   description and the other top objects on white. */
.site-main:has(> .top-object) {
  padding: 0;
  background: var(--white);
}

.site-main > .top-object,
.site-main > .top-others {
  max-width: none;
}

.top-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "stage aside";
  column-gap: 32px;
  padding: 54px 42px 42px;
  background: var(--bg);
}

.site-main .top-title {
  grid-area: title;
  margin: 0 0 18px;
  font-size: 1.5rem;
}

.top-stage {
  grid-area: stage;
  color: var(--white);
}

.top-stage .slider {
  max-height: none;
}

.top-stage :focus-visible {
  outline-color: var(--yellow);
}

.top-aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.top-logo {
  width: 125px;
  margin-bottom: auto;
}

.top-teaser {
  margin: 2rem 0 1.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.45;
}

.top-object-title {
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.top-constructor {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.top-description {
  max-width: 54rem;
  padding: 40px 62px 8px;
}

.top-others {
  padding: 24px 62px 64px;
}

.site-main .top-others h2 {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  font-size: 1rem;
}

.top-others ul {
  display: grid;
  gap: 24px;
  max-width: 52rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-others a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px;
  background: #efefef;
  color: var(--ink);
  text-decoration: none;
}

.top-others-thumb {
  flex: none;
  width: 120px;
}

.top-others-thumb img,
.top-others-thumb .thumb-empty {
  width: 120px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.site-main .top-others h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.top-others a:hover h3 {
  text-decoration: underline;
}

.top-others p {
  margin: 0;
}

@media (max-width: 767px) {
  .site-header:has(.overlay-toggle) .site-logo {
    --logo-w: min(240px, calc(100vw - 152px));
  }

  .site-main:has(> .site-overlay:not([hidden])) {
    padding: 28px 16px 48px;
  }

  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
  }

  .tile a {
    padding: 6px 6px 14px;
  }

  .tile-title {
    margin-top: 10px;
    font-size: 0.875rem;
    hyphens: auto;
  }

  .site-main h2:where(.overlay-section > h2) {
    margin-top: 3rem;
  }

  .top-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "stage"
      "aside";
    padding: 28px 16px 24px;
  }

  .top-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    margin-top: 20px;
  }

  .top-logo {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 80px;
    margin: 0;
  }

  .top-teaser {
    margin-top: 0;
  }

  .top-description {
    padding: 28px 16px 8px;
  }

  .top-others {
    padding: 16px 16px 48px;
  }

  .top-others a {
    gap: 14px;
  }

  .top-others-thumb,
  .top-others-thumb img,
  .top-others-thumb .thumb-empty {
    width: 96px;
  }

  .site-main .top-others h3 {
    font-size: 1.0625rem;
  }
}

@media (max-width: 767px) {
  .site {
    display: block;
  }

  html {
    scroll-padding-top: 88px;
  }

  .site-header {
    min-height: 72px;
    padding: 12px 16px;
  }

  /* 240 px as before, narrower when the menu button would not fit beside it (320 px screens). */
  .site-logo {
    --logo-w: min(240px, calc(100vw - 108px));
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: var(--yellow);
    color: var(--ink);
    font-size: 1.5rem;
    cursor: pointer;
  }

  .site-panel {
    position: static;
    height: auto;
    overflow: visible;
  }

  .panel-title {
    min-height: 0;
    padding: 14px 16px;
    font-size: 1.25rem;
  }

  .panel-menu.is-collapsed {
    display: none;
  }

  .panel-bar {
    min-height: 48px;
    padding: 0 12px;
  }

  .panel-nav {
    padding: 8px 0 16px;
  }

  .panel-nav a {
    padding: 8px 16px;
  }

  .panel-intro {
    padding: 20px 16px 8px;
    border-bottom: 1px solid var(--yellow);
  }

  .site-main {
    padding: 28px 16px 48px;
  }

  .panel-side {
    padding: 24px 16px 32px;
    border-top: 1px solid var(--yellow);
  }

  /* Pages with side content (über uns, kontakt): band, menu, page text, then the side. */
  [data-side-after] .site {
    display: flex;
    flex-direction: column;
  }

  [data-side-after] .site-panel {
    display: contents;
  }

  [data-side-after] .site-header { order: 1; }
  [data-side-after] .panel-title { order: 2; }
  [data-side-after] .panel-menu { order: 3; }
  [data-side-after] .site-main { order: 4; }
  [data-side-after] .panel-side { order: 5; background: var(--white); }

  /* Gallery on phones: band, (menu,) stage, button row, info, list. The panel's parts take
     their own places around main. */
  [data-screen="gallery"] .site {
    display: flex;
    flex-direction: column;
  }

  [data-screen="gallery"] .site-panel {
    display: contents;
  }

  [data-screen="gallery"] .site-header { order: 1; }
  [data-screen="gallery"] .panel-title { order: 2; }
  [data-screen="gallery"] .panel-menu { order: 3; }
  [data-screen="gallery"] .site-main { order: 4; }
  [data-screen="gallery"] .gallery-side { order: 5; background: var(--white); }

  /* Phones scroll the page, no nested scroll areas. */
  [data-screen="gallery"] .panel-menu,
  [data-screen="gallery"] .gallery-side {
    max-height: none;
    overflow: visible;
  }

  .slider {
    max-height: none;
  }

  .gallery-stage {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "frame frame frame"
      "buttons badges share"
      "next next next";
    align-items: center;
  }

  .stage-buttons {
    grid-area: buttons;
    flex-direction: row;
    margin: 10px 0 10px 10px;
  }

  .stage-badges {
    grid-area: badges;
    align-self: center;
    margin: 10px 0 10px 10px;
  }

  .share {
    grid-area: share;
    align-self: center;
    margin: 10px 10px 10px 0;
  }

  /* With a certificate beside the CO₂ badge the share buttons don't fit in the same row
     (they slid under the badge): they get their own row, right-aligned. */
  .gallery-stage:has(.stage-badges > li + li) {
    grid-template-areas:
      "frame frame frame"
      "buttons badges badges"
      "share share share"
      "next next next";
  }

  .gallery-stage:has(.stage-badges > li + li) .share {
    justify-self: end;
    margin-top: 0;
  }

  /* Small phones: with the album toggle in the button column (and the longer fr/it labels) the
     share buttons don't fit beside the buttons and badges; they always take their own row. */
  @media (max-width: 479px) {
    .gallery-stage {
      grid-template-areas:
        "frame frame frame"
        "buttons badges badges"
        "share share share"
        "next next next";
    }

    .gallery-stage .share {
      justify-self: end;
      margin-top: 0;
    }
  }

  .slider-button {
    width: 44px;
  }

  .slider-prev {
    left: 2px;
  }

  .slider-next {
    right: 2px;
  }

  .stage-meta {
    padding-top: 0;
  }

  .item-info,
  .gallery-item > a,
  .gallery-more,
  .gallery-prev,
  .gallery-ads {
    padding-left: 16px;
    padding-right: 16px;
  }

  .gallery-item > a {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .item-thumb img,
  .thumb-empty {
    width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}