/*
  KLEIN Foundry Systems — Design refresh (v11)
  Loaded after components.css. Sharpens the existing system rather than
  replacing it: heavier display type, anthracite page headers with a faint
  technical grid and a copper glow, a stat strip instead of loose numbers,
  and the new home page sections (process band, "Warum KLEIN").
  All motion lives in motion.css / motion.js.
*/

/* ============ Type ============ */

h1,
h2 {
  font-weight: 700;
  letter-spacing: -0.022em;
}

h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.08;
}

.legal h2,
h2.h3,
.footer__heading {
  font-weight: 600;
  letter-spacing: normal;
}

.footer__heading {
  letter-spacing: 0.06em;
}

/* eyebrow gets a short copper rule in front — the one recurring
   "engineering drawing" detail of the refresh */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

/* centred contexts keep the rule on both sides */
[style*="text-align:center"] > .eyebrow::after,
.cta-band .eyebrow::after {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.lead {
  font-size: var(--text-lg);
  color: var(--color-slate);
  max-width: 58ch;
}

/* ============ Anthracite surfaces: grid + glow ============ */

/* faint 56 px technical grid, used on the page headers and dark bands */
.page-header,
.section--dark,
.process-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-header::before,
.section--dark::before,
.process-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  /* the grid fades out towards the bottom so it never fights the text */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}

.page-header::after,
.section--dark::after,
.process-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-ember) 22%, transparent), transparent);
  pointer-events: none;
}

/* ============ Page header (interior pages) ============ */

.page-header {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  background: var(--color-dark);
  border-bottom: 0;
  color: var(--color-dark-text);
}

/* a flat ellipse anchored to the top, so the glow is gone before the
   header fades into the page */
.page-header::after {
  right: -18%;
  top: -200px;
  aspect-ratio: 2 / 1;
}

.page-header h1,
.page-header__title {
  color: var(--color-dark-text);
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.04;
  margin-bottom: var(--space-3);
  max-width: 22ch;
}

/* the leads carry an inline slate colour meant for a white header */
.page-header p {
  color: var(--color-dark-text-soft) !important;
}

.page-header .breadcrumb,
.page-header .breadcrumb a {
  color: var(--color-dark-text-soft);
}

.page-header .breadcrumb {
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}

.page-header .breadcrumb li:not(:last-child)::after {
  color: var(--color-dark-border);
}

.page-header :focus-visible {
  outline-color: var(--color-accent-light);
}

@media (hover: hover) and (pointer: fine) {
  .page-header .breadcrumb a:hover {
    color: var(--color-accent-light);
  }
}

/* ============ Dark bands (contact CTA) ============ */

/* the copper glow is a flat ellipse that ends inside the band, so it
   never gets cut off where the band meets the footer */
.section--dark::after {
  left: 50%;
  top: 58%;
  aspect-ratio: 2 / 1;
  translate: -50% -50%;
}

.section--dark h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

/* ============ Header ============ */

.nav__list a,
.nav__dropdown-toggle {
  letter-spacing: 0.01em;
}

/* ============ Cards ============ */

.card,
.variant-card,
.category-card {
  border-radius: var(--radius-md);
}

.product-card {
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base),
    transform var(--duration-base) var(--ease-standard);
}

.product-card__media {
  background:
    radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--color-surface) 70%, transparent), transparent 70%),
    var(--color-panel);
}

.product-card__title {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -24px rgba(30, 34, 39, 0.45);
  }
}

/* press feedback: the card gives a little under the finger or click */
.product-card:active {
  transform: scale(0.985);
  transition-duration: var(--duration-fast);
}

.product-carousel__media {
  border-radius: var(--radius-md);
}

.product-carousel__body h3 {
  font-size: var(--text-xl);
}

.variant-card {
  border-left: 3px solid var(--color-accent);
}

/* ============ Stat strip (was: trust bar) ============ */

.trust-bar {
  gap: 0;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.trust-bar__item {
  text-align: left;
  padding: var(--space-5) var(--space-4);
  border-left: 1px solid var(--color-border);
}

.trust-bar__item:nth-child(2n + 1) {
  border-left: 0;
}

@media (min-width: 768px) {
  .trust-bar__item:nth-child(2n + 1) {
    border-left: 1px solid var(--color-border);
  }
  .trust-bar__item:first-child {
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .trust-bar__item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-border);
  }
}

.trust-bar__value {
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

/* the "+" sits in copper, smaller */
.trust-bar__value .plus {
  color: var(--color-accent);
  font-size: 0.6em;
  vertical-align: 0.55em;
  margin-left: 2px;
}

.trust-bar__label {
  color: var(--color-slate);
}

/* ============ Home: hero ============ */

.hero-section {
  padding-block: clamp(6rem, 13vw, 10rem) clamp(9rem, 16vw, 13rem);
}

.hero-section__inner {
  max-width: 980px;
}

/* the slogan is a <p> (the page's h1 is the keyword line in the badge
   above it), so it takes the heading face itself */
.hero-section__title {
  font-family: var(--font-heading);
  text-wrap: balance;
  font-size: clamp(2.6rem, 6.6vw, 5.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}

/* each sentence on its own line, masked for the rise-in (motion.css) */
.hero-line {
  display: block;
  overflow: hidden;
  /* room for descenders inside the mask */
  padding-bottom: 0.08em;
}

.hero-line > span {
  display: block;
}

/* second sentence in copper — the accent the eye lands on */
.hero-line--accent > span {
  color: var(--color-accent-light);
}

.hero-section__subtitle {
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  color: rgba(242, 241, 239, 0.86);
}

/* scroll cue under the buttons */
.hero-scroll {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: var(--space-7) auto 0;
  width: fit-content;
  color: rgba(242, 241, 239, 0.7);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero-scroll__track {
  position: relative;
  width: 1px;
  height: 44px;
  overflow: hidden;
  background: rgba(242, 241, 239, 0.22);
}

.hero-scroll__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 14px;
  background: var(--color-accent-light);
}

@media (hover: hover) and (pointer: fine) {
  .hero-scroll:hover {
    color: #fff;
  }
}

@media (max-width: 768px) {
  .hero-scroll {
    display: none;
  }
}

/* ============ Home: tradition ============ */

.about-media {
  position: relative;
  margin: 0;
}

.about-media .about-photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: var(--radius-md);
}

/* small copper tag on the photo */
.about-media__tag {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(18, 20, 23, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-media__tag strong {
  color: var(--color-accent-light);
}

/* ============ Home: process band ============ */

.process-band {
  background: var(--color-dark);
  color: var(--color-dark-text);
}

.process-band::after {
  left: -20%;
  top: -40%;
}

.process-band h2,
.process-band h3 {
  color: var(--color-dark-text);
}

.process-band p {
  color: var(--color-dark-text-soft);
}

.process-band a:not(.btn) {
  color: var(--color-accent-light);
}

.process-band .eyebrow {
  color: var(--color-accent-light);
}

.process-band :focus-visible {
  outline-color: var(--color-accent-light);
}

.process-band__head {
  display: grid;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .process-band__head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .process-band__head p {
    margin-bottom: 6px;
  }
}

.process-band__head h2 {
  margin: 0;
}

.process-band .process__steps {
  margin: 0;
  gap: var(--space-5);
}

.process-band .process__step {
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-dark-border);
}

/* copper line that draws across each step (motion.css animates it) */
.process-band .process__step::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: var(--color-accent-light);
  transform-origin: left center;
}

.process-band .process__step::before {
  content: counter(step, decimal-leading-zero);
  font-size: clamp(2.6rem, 4vw, 3.5rem);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-accent-light);
  margin-bottom: var(--space-3);
}

.process-band .process__step h3 {
  font-size: var(--text-xl);
}

.process-band__cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* the products page keeps its light process section, numbered like the
   home page */
.process:not(.process-band) .process__step::before {
  content: counter(step, decimal-leading-zero);
}

/* ============ Home: why KLEIN ============ */

.why {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

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

.why__media {
  position: relative;
  margin: 0;
}

.why__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.why__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.why__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.why__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.why__icon svg {
  width: 22px;
  height: 22px;
}

.why__item h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.why__item p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-slate);
}

/* ============ Products page tabs ============ */

.v-tabs__active-line {
  background: var(--color-accent);
}

/* ============ Footer ============ */

.site-footer {
  position: relative;
}

.footer__heading {
  color: var(--color-accent-light);
}

/* phones: the keyword line stays on one line without the year (the year
   is in the key figures further down anyway) */
@media (max-width: 480px) {
  .hero-badge__since {
    display: none;
  }
}

/* phones: the long place name in the hero badge fits on one line */
@media (max-width: 480px) {
  .hero-badge {
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    padding: 7px 12px;
  }
}

/* ============ Section transitions ============ */
/* No hard edges while scrolling: every change of background colour runs
   through a soft gradient, like the hero already does. The stops follow
   the same slow → fast → slow curve as the hero fade, so the change never
   starts or ends abruptly. Each fade is padded so text never sits on it. */

/* light page → dark band (contact CTA), and light page → footer on pages
   that don't end with a dark band */
.section--dark,
main:not(:has(> .section--dark:last-child)) + .site-footer {
  --fade: clamp(7rem, 14vw, 12rem);
  background: linear-gradient(
    180deg,
    var(--color-bg) 0,
    color-mix(in srgb, var(--color-dark) 3%, var(--color-bg)) calc(var(--fade) * 0.125),
    color-mix(in srgb, var(--color-dark) 11%, var(--color-bg)) calc(var(--fade) * 0.25),
    color-mix(in srgb, var(--color-dark) 26%, var(--color-bg)) calc(var(--fade) * 0.375),
    color-mix(in srgb, var(--color-dark) 50%, var(--color-bg)) calc(var(--fade) * 0.5),
    color-mix(in srgb, var(--color-dark) 74%, var(--color-bg)) calc(var(--fade) * 0.625),
    color-mix(in srgb, var(--color-dark) 89%, var(--color-bg)) calc(var(--fade) * 0.75),
    color-mix(in srgb, var(--color-dark) 97%, var(--color-bg)) calc(var(--fade) * 0.875),
    var(--color-dark) var(--fade)
  );
}

/* the section padding is larger than half the fade at every width, so the
   eyebrow always starts on the fully dark part */
.section--dark {
  padding-top: calc(clamp(4rem, 8vw, 7rem) + var(--fade) * 0.5);
}

main:not(:has(> .section--dark:last-child)) + .site-footer {
  padding-top: calc(var(--fade) * 0.75);
}

/* the dark band runs straight into the footer */
.site-footer {
  border-top: 0;
}

/* the technical grid only shows once the band is dark */
.section--dark::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--fade) * 0.6), #000 calc(var(--fade) + 2rem), transparent 85%);
  mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--fade) * 0.6), #000 calc(var(--fade) + 2rem), transparent 85%);
}

/* dark page header (interior pages) → light page */
.page-header {
  --fade: clamp(4rem, 8vw, 7rem);
  padding-bottom: calc(clamp(2rem, 4vw, 3rem) + var(--fade));
  background: linear-gradient(
    180deg,
    var(--color-dark) calc(100% - var(--fade)),
    color-mix(in srgb, var(--color-dark) 97%, var(--color-bg)) calc(100% - var(--fade) * 0.875),
    color-mix(in srgb, var(--color-dark) 89%, var(--color-bg)) calc(100% - var(--fade) * 0.75),
    color-mix(in srgb, var(--color-dark) 74%, var(--color-bg)) calc(100% - var(--fade) * 0.625),
    color-mix(in srgb, var(--color-dark) 50%, var(--color-bg)) calc(100% - var(--fade) * 0.5),
    color-mix(in srgb, var(--color-dark) 26%, var(--color-bg)) calc(100% - var(--fade) * 0.375),
    color-mix(in srgb, var(--color-dark) 11%, var(--color-bg)) calc(100% - var(--fade) * 0.25),
    color-mix(in srgb, var(--color-dark) 3%, var(--color-bg)) calc(100% - var(--fade) * 0.125),
    var(--color-bg) 100%
  );
}

/* the white product band melts in and out of the fireclay ground */
.section--surface {
  --fade: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(
    180deg,
    var(--color-bg) 0,
    var(--color-surface) var(--fade),
    var(--color-surface) calc(100% - var(--fade)),
    var(--color-bg) 100%
  );
}

/* ============ v14 Feinschliff (09.11.2026) ============ */

/* less empty space between the page header and the first content: the
   header's soft fade already gives the breathing room */
.page-header + .section {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* closing call to action: one strong button, the phone number as a quiet
   link next to it */
.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-dark-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 4px;
}

.cta-phone svg {
  flex-shrink: 0;
  color: var(--color-accent-light);
}

@media (hover: hover) and (pointer: fine) {
  .cta-phone:hover {
    text-decoration-color: currentColor;
  }
}

/* homepage carousel: same white card as on the product pages */
.product-carousel__slide {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base);
}

.product-carousel__media {
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--color-surface) 70%, transparent), transparent 70%),
    var(--color-panel);
}

.product-carousel__body {
  padding: var(--space-4);
}

.product-carousel__body p {
  margin-bottom: 0;
}

.product-carousel__body .product-card__link {
  align-self: flex-start;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .product-carousel__slide:hover {
    box-shadow: 0 18px 40px -24px rgba(30, 34, 39, 0.45);
    border-color: var(--color-border-strong);
  }

  .product-carousel__slide:hover .product-card__link svg {
    transform: translateX(3px);
  }
}

/* desktop: the fourth card peeks in, so it's clear there is more */
@media (min-width: 1000px) {
  .product-carousel__slide {
    flex-basis: calc((100% - 2 * var(--space-5)) / 3.25);
  }
}

/* product overview: the free sixth slot invites custom builds */
.product-card--special .product-card__media {
  background:
    radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%),
    var(--color-panel);
  color: var(--color-accent);
}

.product-card--special .product-card__media svg {
  width: 38%;
  height: auto;
  transition: transform var(--duration-base) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .product-card--special:hover .product-card__media svg {
    transform: rotate(-8deg);
  }
}

/* footer: quick links (the footer itself is styled in the block below) */

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.footer__nav a {
  display: inline-block;
  padding-block: 5px;
  text-decoration: none;
}

/* The footer speaks the same language as the rest of the site (10.11.2026,
   first for phones, then for every width): anthracite with the faint
   technical grid and copper glow of the page headers, section labels with
   the copper rule of the eyebrows, ruled rows with an arrow like the menu
   and the lists on the pages. No tiles, no boxes. Columns from tablet
   width (layout.css), one centred column on phones (below). */

.site-footer {
  isolation: isolate;
  overflow: hidden;
}

/* technical grid, fading in below the transition and out again */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9rem, #000 16rem, transparent 34rem);
  mask-image: linear-gradient(180deg, transparent 0, #000 9rem, #000 16rem, transparent 34rem);
  pointer-events: none;
}

/* copper glow behind the logo */
.site-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: max(0px, calc((100% - var(--container-max)) / 2));
  top: 2rem;
  width: min(880px, 90vw);
  aspect-ratio: 2 / 1;
  translate: -32% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-ember) 15%, transparent), transparent);
  pointer-events: none;
}

.footer__top {
  padding-block: var(--space-7) var(--space-6);
}

@media (min-width: 64em) {
  .footer__top {
    grid-template-columns: 1.2fr 1fr 1.15fr 1fr;
    gap: var(--space-6);
  }
}

/* brand: small mark, the claim in the heading face */
.footer__logo {
  max-width: 104px;
}

.footer__tagline {
  max-width: 21ch;
  margin: 0;
  color: var(--color-dark-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* quick links: one quiet line, separated by copper dots */
.footer__nav {
  gap: 0;
  font-size: 0.9375rem;
}

.footer__nav li {
  display: flex;
  align-items: center;
  margin: 0;
}

.footer__nav li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline: 12px;
  border-radius: 50%;
  background: var(--color-accent-light);
}

.footer__nav a {
  padding-block: 10px;
}

/* narrow four-column layout: the three links don't fit on one line, so
   they stack without the dots */
@media (min-width: 64em) and (max-width: 80em) {
  .footer__nav {
    flex-direction: column;
  }

  .footer__nav li + li::before {
    display: none;
  }

  .footer__nav a {
    padding-block: 5px;
  }
}

/* tablets: the glow of the closing band ends inside the band instead of
   being cut off where the footer begins */
@media (min-width: 600px) and (max-width: 1000px) {
  .section--dark::after {
    width: min(720px, 110vw);
    top: 54%;
  }
}

/* section label: like the eyebrows, a short copper rule in front */
.footer__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
}

.footer__heading::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
}

/* products: ruled rows with an arrow, like the menu */
.footer__list {
  border-top: 1px solid var(--color-dark-border);
}

.footer__list li {
  margin: 0;
  border-bottom: 1px solid var(--color-dark-border);
}

.footer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 46px;
  padding: 6px 4px;
  color: var(--color-dark-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  transition: color var(--duration-fast) var(--ease-standard);
}

.footer__list a::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--color-accent-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duration-base) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer .footer__list a:hover {
    color: var(--color-accent-light);
  }

  .footer__list a:hover::after {
    transform: translateX(4px);
  }
}

/* contact: the phone number is the headline */
.footer__address {
  font-size: 0.9375rem;
}

.footer__address a[href^="tel:"] {
  display: inline-block;
  padding-block: 2px;
  color: var(--color-dark-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.footer__address a[href^="mailto:"] {
  display: inline-block;
  padding-block: 8px;
  color: var(--color-accent-light);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

/* opening hours: ruled rows, day left, time right */
.footer__hours {
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--color-dark-border);
}

.footer__hours dt,
.footer__hours dd {
  padding: 11px 4px;
  border-bottom: 1px solid var(--color-dark-border);
}

.footer__hours dd:last-child {
  color: var(--color-dark-text-soft);
}

/* phones: one centred column */
@media (max-width: 767px) {
  .site-footer::after {
    left: 50%;
    top: 1rem;
    width: 150vw;
    translate: -50% 0;
  }

  .footer__top {
    gap: 0;
    padding-block: var(--space-7) var(--space-4);
    text-align: center;
  }

  .footer__top > div {
    padding-top: var(--space-6);
  }

  .footer__top > div:first-child {
    padding-top: 0;
  }

  .footer__brand {
    align-items: center;
    gap: var(--space-3);
  }

  .footer__logo {
    max-width: 92px;
  }

  .footer__tagline {
    max-width: 22ch;
    margin: 0 auto;
  }

  .footer__nav {
    justify-content: center;
  }

  /* centred label: the rule on both sides */
  .footer__heading {
    justify-content: center;
  }

  .footer__heading::after {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 2px;
    background: currentColor;
  }

  .footer__list {
    text-align: left;
  }

  .footer__list a {
    min-height: 52px;
    font-size: 1.0625rem;
  }

  .footer__address a[href^="tel:"] {
    font-size: 1.25rem;
  }

  .footer__address a[href^="mailto:"] {
    font-size: 1rem;
  }

  .footer__hours {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .footer__hours dt,
  .footer__hours dd {
    padding-block: 13px;
  }

  .footer__hours dt {
    text-align: left;
  }

  .footer__bottom {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding-block: var(--space-4) var(--space-5);
    border-top: 0;
    text-align: center;
  }
}

/* ============ v16 (09.11.2026): lighter, softer, more depth ============ */
/* The header now lies on the dark top of every page (layout.css), corners
   are rounder and the flat hard shadows became soft layered ones
   (tokens.css). This block adapts the components to that. */

/* ---- hero: fills the first screen, content centred ---- */

.hero-section {
  display: grid;
  align-content: center;
  min-height: 44rem;
  min-height: min(100svh, 60rem);
  /* top: room for the header that lies on the hero; bottom: the fade into
     the page stays free of text */
  padding-block: calc(var(--header-height) + clamp(2rem, 6vw, 4rem)) clamp(9rem, 24vh, 14rem);
}

.hero-section__inner {
  width: 100%;
}

/* a soft shade behind the navigation, so the light type holds on bright
   sparks too */
.hero-section__media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 11rem;
  background: linear-gradient(180deg, rgba(18, 20, 23, 0.6), rgba(18, 20, 23, 0.32) 45%, transparent);
  pointer-events: none;
}

/* frosted glass for the small controls on the footage */
.hero-badge {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
}

.hero-section__toggle {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(18, 20, 23, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---- interior pages: the dark header starts underneath the navigation ---- */

.page-header {
  padding-top: calc(var(--header-height) + clamp(2.5rem, 6vw, 4.5rem));
}

/* ---- cards: hairline border, soft shadow, a calm lift on hover ---- */

.card,
.variant-card,
.category-card,
.product-carousel__slide {
  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.product-card,
.product-carousel__slide {
  transition: transform 460ms var(--ease-soft), box-shadow 460ms var(--ease-soft),
    border-color var(--duration-base) var(--ease-standard);
}

.product-card__media img,
.product-carousel__media img {
  transition: transform 620ms var(--ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover,
  .product-carousel__slide:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
    box-shadow: var(--shadow-lg);
  }

  .product-card:hover .product-card__media img,
  .product-carousel__slide:hover .product-carousel__media img {
    transform: translateY(-3px) scale(1.035);
  }
}

.product-card:active,
.product-carousel__slide:active {
  transition-duration: var(--duration-fast);
}

/* the variant marker is a short copper bar inside the card instead of a
   coloured edge that bends around the rounded corner */
.variant-card {
  position: relative;
  border-left: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  padding-left: calc(var(--space-4) + 14px);
}

.variant-card::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: var(--space-4);
  bottom: var(--space-4);
  width: 3px;
  border-radius: 3px;
  background: var(--color-accent);
}

/* ---- photos and product panels: larger radius ---- */

.about-media,
.why__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.about-media .about-photo,
.why__media img,
img.about-photo,
.product-detail__media {
  border-radius: var(--radius-lg);
}

.product-figure,
.finder {
  border-radius: var(--radius-md);
}

/* ---- controls ---- */

.btn--primary {
  box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--color-accent) 90%, transparent);
}

.form-field input,
.form-field textarea,
.form-field select {
  border-radius: 0.75rem;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.nav__dropdown-panel {
  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: var(--shadow-lg);
}

.carousel-arrow {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.why__icon {
  border-radius: 14px;
}

/* ============ Tighter vertical rhythm (10.11.2026) ============ */
/* Philipp: too much empty space between the sections. Section padding,
   the soft colour transitions and the gaps inside the footer are about a
   third smaller. Every transition still ends before the first line of
   text (padding ≥ the part of the fade the text would sit on). */

.section {
  padding-block: clamp(2.25rem, 5.5vw, 4.75rem);
}

/* the hero and the page headers already end in a fade: the first section
   starts right below it */
.hero-section + .section,
.page-header + .section {
  padding-top: clamp(1rem, 2.5vw, 2rem);
}

.page-header {
  --fade: clamp(3rem, 6vw, 5rem);
  padding-bottom: calc(clamp(1.25rem, 2.5vw, 2rem) + var(--fade));
}

.section--surface {
  --fade: clamp(2.25rem, 4.5vw, 3.5rem);
}

.section--dark,
main:not(:has(> .section--dark:last-child)) + .site-footer {
  --fade: clamp(4.25rem, 10vw, 8.5rem);
}

.section--dark {
  padding-top: calc(clamp(2.25rem, 5.5vw, 4.75rem) + var(--fade) * 0.5);
}

.trust-bar {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.two-col,
.product-detail {
  gap: clamp(2rem, 4vw, 3rem);
}

.why {
  gap: clamp(2rem, 4vw, 3rem);
}

.footer__top {
  padding-block: var(--space-6) var(--space-5);
}

@media (max-width: 767px) {
  .footer__top {
    padding-block: var(--space-6) var(--space-3);
  }

  .footer__top > div {
    padding-top: var(--space-5);
  }
}

/* ============ Closing band and footer as one surface (10.11.2026) ============ */
/* Where a page ends with the dark closing band, band and footer each had
   their own grid and their own copper glow – two copies of the same
   picture on top of each other. Now it is one: a single glow centred on
   the line where they meet (each side draws its half of the same ellipse)
   and one grid that runs through without a break. Pages that end on a
   light section keep the footer's own glow. */

main > .section--dark:last-child::after,
main:has(> .section--dark:last-child) + .site-footer::after {
  left: 50%;
  width: clamp(34rem, 170vw, 68rem);
  aspect-ratio: 2 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-ember) 20%, transparent), transparent);
}

main > .section--dark:last-child::after {
  top: 100%;
}

main:has(> .section--dark:last-child) + .site-footer::after {
  top: 0;
}

/* the band's grid is anchored to its lower edge and stays visible down to
   it, so the footer's grid continues it line for line */
main > .section--dark:last-child::before {
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--fade) * 0.6), #000 calc(var(--fade) + 2rem));
  mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--fade) * 0.6), #000 calc(var(--fade) + 2rem));
}

main:has(> .section--dark:last-child) + .site-footer::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 8rem, transparent 30rem);
  mask-image: linear-gradient(180deg, #000 0, #000 8rem, transparent 30rem);
}

/* a little less distance between the two, they belong together */
main > .section--dark:last-child {
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

main:has(> .section--dark:last-child) + .site-footer .footer__top {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* ============ Light theme: softer way into the dark band (12.11.2026) ============ */
/* On the light ground the change to anthracite covers the whole tonal
   range; over the short distance it read as a hard grey edge, most of all
   on phones. It now takes about twice the distance. The dark theme keeps
   the short fade – there both tones are close together. */
html:not(.dark) .section--dark {
  --fade: clamp(10rem, 24vw, 18rem);
}

html:not(.dark) .section--dark {
  padding-top: calc(clamp(1rem, 2.5vw, 2rem) + var(--fade) * 0.72);
}

/* ============ Light theme: light grey closing band and footer (12.11.2026) ============ */
/* In the light theme the closing contact band and the footer are no
   longer anthracite but a light grey, one step below the page ground.
   Both are built on the "dark" tokens, so those are re-pointed here and
   everything inside follows; only the few fixed whites (grid lines,
   button, logo) are set by hand. Hero, page headers and the dark theme
   stay as they are. */
html:not(.dark) main > .section--dark:last-child,
html:not(.dark) .site-footer {
  --color-dark: #e1dfdb;
  --color-dark-surface: #d9d6d1;
  --color-dark-border: #c9c5bf;
  --color-dark-text: var(--color-ink);
  --color-dark-text-soft: var(--color-ink-soft);
  /* the darker copper keeps small labels above 4.5:1 on the grey */
  --color-accent-light: var(--color-accent-hover);
  /* a quieter glow: full ember turns salmon on the grey */
  --color-ember: #d9905f;
  /* two close tones need only a short fade */
  --fade: clamp(3.5rem, 8vw, 6.5rem);
}

html:not(.dark) main > .section--dark:last-child {
  padding-top: calc(clamp(2.25rem, 5.5vw, 4.75rem) + var(--fade) * 0.5);
}

html:not(.dark) main > .section--dark:last-child::before,
html:not(.dark) .site-footer::before {
  background-image:
    linear-gradient(rgba(30, 34, 39, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 34, 39, 0.05) 1px, transparent 1px);
}

/* the footer logo is the white variant */
html:not(.dark) .site-footer .footer__logo {
  filter: invert(1);
}

html:not(.dark) main > .section--dark:last-child .btn--flow {
  border-color: rgba(30, 34, 39, 0.4);
  color: var(--color-ink);
}

html:not(.dark) main > .section--dark:last-child .btn--flow .btn-flow__arrow {
  color: var(--color-ink);
}

html:not(.dark) main > .section--dark:last-child .btn--flow .btn-flow__circle {
  background: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
  html:not(.dark) main > .section--dark:last-child .btn--flow:hover {
    border-color: transparent;
    color: var(--color-bg);
  }

  html:not(.dark) main > .section--dark:last-child .btn--flow:hover .btn-flow__arrow {
    color: var(--color-bg);
  }
}