@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ground: #f8f7f3;
  --fill: #eeece6;
  --ink: #1a1d26;
  --ink-soft: #6a6a6e;
  --pink: #df3c83;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Be Vietnam Pro", system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow-photo: 0 1px 2px rgba(26, 29, 38, 0.06), 0 18px 40px -18px rgba(26, 29, 38, 0.38);
  --shadow-photo-hover: 0 1px 2px rgba(26, 29, 38, 0.08), 0 28px 56px -20px rgba(26, 29, 38, 0.48);
  --shadow-pill: 0 1px 1px rgba(26, 29, 38, 0.2), 0 10px 22px -10px rgba(26, 29, 38, 0.6);
  --shadow-pill-hover: 0 1px 1px rgba(26, 29, 38, 0.2), 0 16px 30px -12px rgba(26, 29, 38, 0.65);
  --shadow-s: rgba(70, 25, 45, 0.2);
  --shadow-machine: rgba(26, 29, 38, 0.3);
  color-scheme: light;
  accent-color: var(--pink);
  scrollbar-color: #b9b5ad var(--ground);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased; }
::selection { background: #c42f70; color: #fff; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; border-radius: 6px; }
.pill:focus-visible, .switch button:focus-visible { border-radius: 999px; }
.switch button:focus-visible { outline-offset: -3px; }
.trust-slot:focus-visible, .machine:focus-visible { border-radius: var(--radius); }

/* Maßsystem: 1u = ein Pixel des freigegebenen Entwurfs (2688 breit), skaliert mit der Seitenbreite */
.page { container-type: inline-size; position: relative; }
.page > * {
  --u: calc(100cqi / 2688);
  --gutter: max(1rem, calc(65 * var(--u)));
  --space: clamp(4.5rem, calc(240 * var(--u)), 15rem);
  --fs-display: clamp(2.75rem, calc(180 * var(--u)), 11.25rem);
  --fs-h3: clamp(1.375rem, calc(54 * var(--u)), 3.375rem);
  --fs-body: clamp(1.0625rem, calc(38 * var(--u)), 2.375rem);
  --fs-small: clamp(0.875rem, calc(28 * var(--u)), 1.75rem);
  --radius: max(8px, calc(12 * var(--u)));
}

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font-family: inherit; font-weight: 500; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-pill);
  transition: transform 160ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease), color 200ms var(--ease);
}
.pill:active { transform: scale(0.97); }

.arrow { overflow: visible; }

/* Kopfzeile und erster Bildschirm: unter 1100px im Fluss, ab 1100px als vermessene Bühne des Entwurfs */
.site-header { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; padding: 0.875rem var(--gutter) 0.25rem; }
.plate { margin: 0; }
.plate picture, .panel-photo picture { display: contents; }
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-logo { display: block; width: clamp(9.5rem, 38cqi, 13rem); }
.p-logo img { height: auto; }
.nav { order: 3; flex-basis: 100%; min-width: 0; margin-top: 0.5rem; }
.nav ul { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.nav .nav-more { display: none; }
.nav a { display: block; font-weight: 500; line-height: 1.5; letter-spacing: -0.012em; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.35em; text-decoration-color: transparent; transition: text-decoration-color 200ms var(--ease); }
.nav a[aria-current="page"] { text-decoration-color: currentColor; }
.nav a { padding-block: 0.6rem; font-size: 0.9375rem; }
.pill-nav { min-height: 2.75rem; padding: 0.6em 1.1em; font-size: 0.875rem; }

.first-view { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: clamp(1.5rem, 6cqi, 3rem) var(--gutter) 0; }
.headline { grid-column: 1 / -1; margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(3.25rem, 17cqi, 8rem); line-height: 0.95; letter-spacing: -0.02em; }
.headline em, .page-title em { font-style: normal; color: var(--pink); }
.hl-break { display: block; }
.subline { grid-column: 1 / -1; margin: 1rem 0 0; max-width: 30em; font-size: var(--fs-body); line-height: 1.45; color: var(--ink-soft); }
.pill-hero { position: relative; z-index: 3; grid-column: 1 / -1; grid-row: 3; justify-self: start; align-self: start; min-height: 3rem; margin-top: 1.5rem; padding: 0.9em 1.6em; font-size: 1rem; }
.p-s { position: relative; z-index: 2; grid-column: 2; grid-row: 3; justify-self: end; align-self: start; width: 38cqi; margin: -1.5rem 0 -16cqi; pointer-events: none; }
.p-s img { height: auto; filter: drop-shadow(0 max(10px, calc(30 * var(--u))) max(10px, calc(22 * var(--u))) var(--shadow-s)); }

.places { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.places li:first-child { grid-column: 1 / -1; }
.places a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem 0.5rem; }
.photo { grid-column: 1 / -1; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-photo); transition: box-shadow 300ms var(--ease); }
.p-buero { aspect-ratio: 16 / 10; }
.p-fitness img { object-position: 44% 50%; }
.p-wohnen img { object-position: 56% 50%; }
.place-name { font-size: clamp(1.0625rem, 4.6cqi, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; }
.n-buero { font-size: clamp(1.375rem, 6cqi, 2.25rem); }
.first-view .arrow { width: 1.3rem; height: 1rem; }

@container (max-width: 559.98px) {
  .pill-hero { grid-column: 1; }
  .p-s { width: clamp(4rem, calc(100cqi - 16rem), 11rem); margin: 1.5rem 0 -4rem; }
}

@container (min-width: 560px) and (max-width: 1099.98px) {
  .first-view { grid-template-rows: auto auto auto 1fr auto; }
  .headline { grid-row: 1; font-size: clamp(3.25rem, 12.5cqi, 8rem); }
  .subline { grid-column: 1; grid-row: 2; }
  .pill-hero { grid-column: 1; grid-row: 3; align-self: start; }
  .p-s { grid-column: 2; grid-row: 2 / 5; align-self: end; width: 26cqi; margin: 0 0 -15cqi; }
  .places { grid-row: 5; }
}

@container (min-width: 1100px) {
  .site-header { position: absolute; top: 0; left: 0; right: 0; display: block; height: calc(150 * var(--u)); padding: 0; }
  .sub .site-header { position: relative; }
  .site-header .plate, .first-view .plate { position: absolute; }
  .p-logo { left: calc(64 * var(--u)); top: calc(25 * var(--u)); width: calc(370 * var(--u)); height: calc(112 * var(--u)); }
  .p-logo img { height: 100%; object-fit: contain; object-position: left center; }
  .nav { display: flex; justify-content: center; position: absolute; left: calc(434 * var(--u)); right: calc(351 * var(--u)); top: calc(57 * var(--u)); }
  .nav { margin: 0; }
  .nav ul { gap: calc(64 * var(--u)); }
  .nav .nav-more { display: list-item; }
  .nav a { padding-block: 0; font-size: max(0.875rem, calc(24.5 * var(--u))); }
  .pill-nav { position: absolute; right: calc(57 * var(--u)); top: calc(36 * var(--u)); min-width: calc(294 * var(--u)); min-height: max(2.5rem, calc(78 * var(--u))); padding: 0 1.1em; font-size: max(0.875rem, calc(23 * var(--u))); }

  .first-view { display: block; aspect-ratio: 2688 / 1520; overflow: hidden; padding: 0; }
  .headline { position: absolute; left: calc(52 * var(--u)); top: calc(196 * var(--u)); font-size: calc(236 * var(--u)); line-height: 1; letter-spacing: -0.04em; word-spacing: -0.03em; white-space: nowrap; z-index: 3; }
  .hl-break { display: none; }
  .subline { position: absolute; left: calc(64 * var(--u)); top: calc(464 * var(--u)); margin: 0; max-width: none; font-size: max(1rem, calc(38 * var(--u))); line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; }
  .pill-hero { position: absolute; left: calc(66 * var(--u)); top: calc(554 * var(--u)); min-width: calc(341 * var(--u)); min-height: max(2.75rem, calc(84 * var(--u))); margin: 0; padding: 0 1.2em; font-size: max(0.9375rem, calc(25.5 * var(--u))); }
  .p-s { left: calc(2220 * var(--u)); top: calc(400 * var(--u)); width: calc(442 * var(--u)); height: calc(604 * var(--u)); margin: 0; }
  .p-s img { height: 100%; object-fit: contain; }

  .places { display: block; margin: 0; }
  .places a { display: inline; }
  .photo { aspect-ratio: auto; }
  .p-buero { left: calc(65 * var(--u)); top: calc(700 * var(--u)); width: calc(1271 * var(--u)); height: calc(650 * var(--u)); }
  .p-fitness img, .p-wohnen img { object-position: 50% 50%; }
  .p-fitness { left: calc(1367 * var(--u)); top: calc(698 * var(--u)); width: calc(841 * var(--u)); height: calc(298 * var(--u)); }
  .p-wohnen { left: calc(1367 * var(--u)); top: calc(1095 * var(--u)); width: calc(843 * var(--u)); height: calc(256 * var(--u)); }
  .place-name { position: absolute; }
  .n-buero { left: calc(70 * var(--u)); top: calc(1363 * var(--u)); font-size: calc(61 * var(--u)); }
  .n-fitness { left: calc(1374 * var(--u)); top: calc(1004 * var(--u)); font-size: calc(51 * var(--u)); }
  .n-wohnen { left: calc(1374 * var(--u)); top: calc(1367 * var(--u)); font-size: calc(51 * var(--u)); }
  .first-view .arrow { position: absolute; width: calc(45 * var(--u)); height: calc(35 * var(--u)); }
  .a-buero { left: calc(1275 * var(--u)); top: calc(1385 * var(--u)); }
  .a-fitness { left: calc(2153 * var(--u)); top: calc(1021 * var(--u)); }
  .a-wohnen { left: calc(2156 * var(--u)); top: calc(1385 * var(--u)); }
}

/* Unterseiten: Seitentitel unter der Kopfzeile */
.page-intro { padding: calc(var(--space) * 0.4) var(--gutter) 0; }
.page-title { margin: 0; max-width: 16em; font-family: var(--display); font-weight: 800; font-size: clamp(3.25rem, calc(236 * var(--u)), 14.75rem); line-height: 0.95; letter-spacing: -0.03em; text-wrap: balance; }
.lead { margin: 0.9em 0 0; max-width: 34em; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-soft); }

/* Abschnitte */
.section { padding: var(--space) var(--gutter) 0; }
.section-title {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: var(--fs-display);
  line-height: 0.92; letter-spacing: -0.02em; text-wrap: balance;
}
.title-line { display: block; }
.item-title { margin: 0 0 0.45em; font-size: var(--fs-h3); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.text { margin: 0; max-width: 32em; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-soft); }
.small { margin: 0; max-width: 48em; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }

/* Weiterlink: großer Textlink mit Pfeil zu einer Unterseite */
.more {
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1.1em;
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
  text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; text-decoration-color: transparent;
  transition: text-decoration-color 200ms var(--ease);
}
.more .arrow { width: 0.85em; height: 0.66em; flex: none; transition: transform 200ms var(--ease); }
.more:focus-visible .arrow { transform: translateX(20%); }

/* Hier stehen wir schon */
.trust {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: center;
  gap: 2rem calc(2 * var(--gutter)); padding: calc(var(--space) * 0.55) var(--gutter) 0;
}
.trust-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink-soft); }
.trust-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem calc(2 * var(--gutter)); margin: 0; padding: 0; list-style: none; }
.trust-list img { display: block; width: auto; opacity: 0.78; }
.logo-quickcity { height: clamp(1.875rem, calc(80 * var(--u)), 5rem); }
.logo-bricks { height: clamp(1.25rem, calc(50 * var(--u)), 3.125rem); }
.logo-fitplus { height: clamp(2.25rem, calc(100 * var(--u)), 6.25rem); }
.trust-slot {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-width: clamp(9rem, calc(300 * var(--u)), 18.75rem); min-height: clamp(3.25rem, calc(120 * var(--u)), 7.5rem); padding: 0 1.25em;
  border: 1px dashed rgba(26, 29, 38, 0.3); border-radius: var(--radius); color: var(--ink-soft);
  font-size: var(--fs-small); font-weight: 500;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.trust-slot .arrow { width: 1.1em; height: 0.85em; flex: none; }

/* Zahlen */
.facts { padding: calc(var(--space) * 0.6) var(--gutter) 0; }
.facts-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gutter); margin: 0; }
.facts-list div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.4em; }
.facts-list dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.75rem, calc(150 * var(--u)), 9.5rem); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.facts-list dt { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }

/* Merkmalsraster: Leistungen, Sortimentsbereiche, Automaten, Verantwortung */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem calc(1.5 * var(--gutter)); margin: calc(var(--space) * 0.45) 0 0; padding: 0; list-style: none; }
.free { margin: calc(var(--space) * 0.6) 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.25rem, calc(140 * var(--u)), 8.75rem); line-height: 0.92; letter-spacing: -0.02em; }
.free em { font-style: normal; color: var(--pink); }
.free a { display: inline-block; min-width: 1.5rem; min-height: 1.5rem; text-align: center; margin-left: 0.04em; padding: 0 0.15em; font-size: 0.55em; line-height: 1; vertical-align: top; color: var(--ink-soft); }

/* Teaser auf der Startseite */
.teaser-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem calc(1.5 * var(--gutter)); align-items: start; margin-top: calc(var(--space) * 0.45); }
.teaser-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em var(--gutter); margin: 0; padding: 0; list-style: none; font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.teaser-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem calc(2 * var(--gutter)); margin-top: 1.1em; }
.teaser-row .more { margin-top: 0; }

/* Sortiment je Standort */
.switch { display: none; }
.js .switch { max-width: 100%; overflow-x: auto; scrollbar-width: thin; position: relative; isolation: isolate; box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.1); display: inline-flex; gap: 0.25rem; margin-top: calc(var(--space) * 0.35); padding: 0.4rem; border-radius: 999px; background: var(--fill); }
.switch button {
  flex: none; white-space: nowrap; min-height: 2.75rem; padding: 0.75em 1.5em; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-small); font-weight: 500; cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.switch button[aria-selected="true"] { color: #fff; }
.switch-indicator { position: absolute; z-index: -1; top: 0.4rem; bottom: 0.4rem; left: 0; width: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 1px 1px rgba(26, 29, 38, 0.2), 0 3px 8px -3px rgba(26, 29, 38, 0.45); transition: transform 280ms var(--ease), width 280ms var(--ease); }
.switch-indicator.is-static { transition: none; }
.fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.fade-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem); mask-image: linear-gradient(to right, transparent, #000 3rem); }
.fade-left.fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.panels { display: grid; gap: calc(var(--space) * 0.4); margin-top: calc(var(--space) * 0.3); }
.panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem calc(1.5 * var(--gutter)); align-items: center; }
.panel-photo { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-photo); }
.panel-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.panel-s { display: grid; place-items: center; background: var(--fill); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.08), var(--shadow-photo); }
.panel-s img { width: auto; height: 78%; object-fit: contain; filter: drop-shadow(0 max(10px, calc(30 * var(--u))) max(10px, calc(22 * var(--u))) var(--shadow-s)); }
.panel-cta { margin-top: 1.6em; }
.assortment { display: grid; gap: 0.55em; margin: 1.4em 0 0; padding: 0; list-style: none; font-size: var(--fs-body); font-weight: 500; }
.panels-note { margin-top: calc(var(--space) * 0.3); }

/* Ablauf */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem calc(1.5 * var(--gutter)); margin: calc(var(--space) * 0.45) 0 0; padding: 0; list-style: none; }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4em; }
.step-no { font-family: var(--display); font-weight: 800; font-size: clamp(3.5rem, calc(200 * var(--u)), 12.5rem); line-height: 0.85; letter-spacing: -0.02em; }
.step-head .arrow { width: clamp(1.75rem, calc(45 * var(--u)), 2.8rem); height: auto; flex: none; margin-right: calc(0.6 * var(--gutter)); }

/* Sortiment auf Wunsch */
.wish { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem calc(1.5 * var(--gutter)); align-items: start; margin-top: calc(var(--space) * 0.55); }
.wish .text { margin-top: 0.2em; }
.wish .item-title { margin: 0; }

/* Automaten im Schaufenster (Startseite) */
.showroom {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 1.5rem var(--gutter);
  margin: calc(var(--space) * 0.45) 0 0; padding: clamp(2rem, calc(130 * var(--u)), 8rem) var(--gutter) clamp(1.5rem, calc(90 * var(--u)), 5.5rem);
  list-style: none; border-radius: var(--radius); background: var(--fill); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.08), var(--shadow-photo);
}
.showroom figure { display: grid; justify-items: center; gap: 1.2em; margin: 0; }
.showroom img {
  display: block; width: auto; max-width: 100%; height: clamp(11rem, calc(860 * var(--u)), 38rem); object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 max(14px, calc(34 * var(--u))) max(14px, calc(30 * var(--u))) var(--shadow-machine));
}
.showroom figcaption { display: grid; justify-items: center; gap: 0.15em; text-align: center; }
.showroom-note { margin-top: 1em; }

/* Automaten zum Durchblättern (Seite Automaten) */
.lineup { margin-top: calc(var(--space) * 0.4); border-radius: var(--radius); background: var(--fill); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.08), var(--shadow-photo); overflow: hidden; }
.lineup-track {
  display: flex; align-items: flex-end; gap: calc(1.2 * var(--gutter)); margin: 0; list-style: none;
  padding: clamp(2rem, calc(130 * var(--u)), 8rem) var(--gutter) clamp(1.5rem, calc(90 * var(--u)), 5.5rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: #b9b5ad transparent;
}
.js .lineup-track { scrollbar-width: none; }
.js .lineup-track::-webkit-scrollbar { display: none; }
.lineup-item { position: relative; flex: 0 0 auto; min-width: 11rem; scroll-snap-align: start; }
.lineup-item-tall { --scale: 1.22; }
.machine {
  display: grid; justify-items: center; gap: 1.1em; width: 100%; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: center; cursor: pointer;
}
.machine picture { display: contents; }
.machine img {
  display: block; width: auto; max-width: none; height: calc(var(--scale, 1) * clamp(15rem, calc(900 * var(--u)), 40rem));
  filter: drop-shadow(0 max(14px, calc(34 * var(--u))) max(14px, calc(30 * var(--u))) var(--shadow-machine));
  transition: transform 300ms var(--ease);
}
.machine-name { display: grid; justify-items: center; gap: 0.15em; }
.machine-brand { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }
.machine-model { font-size: var(--fs-body); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.machine-tip {
  position: absolute; z-index: 2; top: 0; left: 50%; width: max(100%, 16rem); max-width: 20rem; translate: -50% 0;
  padding: 1rem 1.15rem 1.1rem; border-radius: var(--radius); background: var(--ground); color: var(--ink); text-align: left;
  box-shadow: 0 1px 2px rgba(26, 29, 38, 0.08), 0 20px 44px -16px rgba(26, 29, 38, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
  transition: opacity 180ms var(--ease), transform 240ms var(--ease), visibility 0s linear 240ms;
}
.machine-tip-title { margin: 0 0 0.55em; font-size: var(--fs-small); font-weight: 600; line-height: 1.3; }
.machine-tip ul { display: grid; gap: 0.4em; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: 1.4; }
.lineup-item.is-open .machine-tip, .machine:focus-visible + .machine-tip {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 180ms var(--ease), transform 240ms var(--ease), visibility 0s;
}
.lineup-item:first-child .machine-tip { left: 0; translate: none; }
.lineup-item:last-child .machine-tip { left: auto; right: 0; translate: none; }
.lineup-item.tip-hidden .machine-tip { opacity: 0; visibility: hidden; }
.lineup-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1em; }
.lineup-controls { display: none; gap: 0.75rem; }
.js .lineup-controls { display: flex; }
.pill-round { width: 3rem; height: 3rem; padding: 0; }
.pill-round .arrow { width: 1.2rem; height: 0.95rem; }
.pill-round .arrow-back { transform: scaleX(-1); }
.pill-round:disabled { background: var(--fill); color: var(--ink-soft); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.1); cursor: default; }

/* Sortiment: Produktwand, Bereiche mit Produkten, Trend-Regal */
.product-wall {
  margin-top: calc(var(--space) * 0.4); padding: clamp(2rem, calc(120 * var(--u)), 7rem) var(--gutter) clamp(1.75rem, calc(90 * var(--u)), 5.5rem);
  border-radius: var(--radius); background: var(--fill); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.08), var(--shadow-photo);
}
.product-wall ul { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(1.25rem, calc(60 * var(--u)), 3.5rem) 0; margin: 0; padding: 0 calc(20 * var(--u)); list-style: none; }
.product-wall li { margin-inline: calc(-10 * var(--u)); }
.pack {
  display: block; width: auto; max-width: none; height: calc(var(--h, 1) * clamp(5rem, calc(400 * var(--u)), 19rem));
  filter: drop-shadow(0 max(8px, calc(22 * var(--u))) max(8px, calc(20 * var(--u))) var(--shadow-machine));
}
.product-note { margin-top: 1em; }
.worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem calc(1.2 * var(--gutter)); margin: calc(var(--space) * 0.5) 0 0; padding: 0; list-style: none; }
.world-shelf {
  display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 16 / 11; margin: 0 0 1.1em; padding: 0 1rem clamp(1.25rem, calc(80 * var(--u)), 4rem);
  border-radius: var(--radius); background: var(--fill); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.08), var(--shadow-photo); overflow: hidden;
}
.world-shelf .pack { height: calc(var(--h, 1) * clamp(8.5rem, calc(460 * var(--u)), 19rem)); margin-inline: calc(-20 * var(--u)); }
.world-shelf .pack:nth-child(2) { position: relative; z-index: 1; }
.filter { display: none; }
.js .filter { display: flex; flex-wrap: nowrap; gap: 0.25rem; max-width: 100%; overflow-x: auto; scrollbar-width: thin; margin-top: calc(var(--space) * 0.35); padding: 0.4rem; border-radius: 999px; background: var(--fill); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.1); width: max-content; }
.filter button {
  flex: none; white-space: nowrap; min-height: 2.75rem; padding: 0.75em 1.3em; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-small); font-weight: 500; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.filter button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 1px 1px rgba(26, 29, 38, 0.2), 0 3px 8px -3px rgba(26, 29, 38, 0.45); }
.filter button:focus-visible { border-radius: 999px; outline-offset: -3px; }
.filter-count { margin-left: 0.35em; font-variant-numeric: tabular-nums; opacity: 0.7; }
.catalog {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(6rem, calc(230 * var(--u)), 10rem), 1fr)); gap: clamp(1.25rem, calc(50 * var(--u)), 3rem) clamp(0.75rem, calc(34 * var(--u)), 2rem);
  margin: calc(var(--space) * 0.3) 0 0; padding: clamp(1.5rem, calc(90 * var(--u)), 5rem) var(--gutter); list-style: none;
  border-radius: var(--radius); background: var(--fill); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.08), var(--shadow-photo);
}
.catalog li { display: grid; place-items: end center; min-height: 0; height: clamp(5.5rem, calc(220 * var(--u)), 10.5rem); }
.catalog li picture { display: flex; align-items: flex-end; justify-content: center; align-self: stretch; justify-self: stretch; min-height: 0; }
.catalog img { display: block; width: auto; height: auto; min-height: 0; max-width: 100%; max-height: 100%; filter: drop-shadow(0 max(5px, calc(12 * var(--u))) max(6px, calc(12 * var(--u))) rgba(26, 29, 38, 0.28)); }
.catalog-note { margin-top: 1em; }
.catalog-note a { text-decoration: underline; text-underline-offset: 0.2em; }
.lineup-products .machine img { height: calc(var(--scale, 1) * clamp(9rem, calc(430 * var(--u)), 22rem)); }

/* Partnerlogos */
.partners-title { margin-top: calc(var(--space) * 0.55); }
.partner-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 2.5rem var(--gutter); margin: 1.6em 0 0; padding: 0; list-style: none; }
.partner-logos img { display: block; width: auto; max-width: 100%; opacity: 0.78; }
.logo-sielaff { height: clamp(2.5rem, calc(118 * var(--u)), 6.5rem); }
.logo-fas { height: clamp(1.625rem, calc(78 * var(--u)), 4.25rem); }
.logo-sanden-vendo { height: clamp(2.125rem, calc(112 * var(--u)), 6rem); }
.logo-tcn { height: clamp(1.125rem, calc(46 * var(--u)), 2.5rem); }
.logo-vendvibe { height: clamp(1.125rem, calc(50 * var(--u)), 2.75rem); }
.logo-nayax { height: clamp(1.375rem, calc(66 * var(--u)), 3.625rem); }

/* Abschluss der Unterseiten */
.closing { display: grid; justify-items: start; }
.closing .text { margin-top: 1em; }
.closing .pill { margin-top: 1.6em; }

/* Über uns */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem calc(2 * var(--gutter)); align-items: start; }
.about-body .text + .text { margin-top: 1em; }
.about-body .founders { margin-top: 2.2em; }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--gutter); margin: 0; padding: 0; list-style: none; }
.founder-name { margin: 0; font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.founder-role { margin: 0.25em 0 0; font-size: var(--fs-small); color: var(--ink-soft); }

/* Kontakt */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem calc(2 * var(--gutter)); align-items: start; }
.contact .text { margin-top: 1em; }
.contact-direct { display: grid; gap: 1.25em; margin: 2.2em 0 0; }
.contact-direct div { display: grid; gap: 0.2em; }
.contact-direct dt { font-size: var(--fs-small); color: var(--ink-soft); }
.contact-direct dd { margin: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; }
.contact-direct a { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; text-decoration-color: transparent; transition: text-decoration-color 200ms var(--ease); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem calc(0.6 * var(--gutter)); }
.field { display: grid; gap: 0.45em; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8em 1em; border: 0; border-radius: var(--radius); background: var(--fill); color: var(--ink);
  font: inherit; font-size: clamp(1rem, calc(32 * var(--u)), 2rem);
  box-shadow: inset 0 0 0 1px rgba(26, 29, 38, 0.12), inset 0 2px 3px rgba(26, 29, 38, 0.07);
}
.field select {
  appearance: none; padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%231a1d26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; background-size: 0.8em auto;
}
.field textarea { min-height: 8em; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.form-actions { grid-column: 1 / -1; display: grid; gap: 1rem; justify-items: start; margin-top: 0.4rem; }
.pill-submit { padding: 1em 1.8em; font-size: clamp(1rem, calc(26 * var(--u)), 1.625rem); }
.form-status { font-weight: 500; color: var(--ink); }
.form-status:empty { display: none; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form [disabled] { cursor: wait; }
.form .pill[disabled] { opacity: 0.7; }
.form-status:focus { outline: 3px solid var(--pink); outline-offset: 4px; border-radius: 6px; }
.form-status[data-error] { padding-left: 1rem; border-left: 3px solid var(--ink); }
.contact-result { max-width: 48rem; margin: 0 auto; padding: 4rem 1.25rem; }
.contact-result .text { margin: 1.5rem 0; }

/* Fußzeile */
.site-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; padding: var(--space) var(--gutter) calc(var(--space) * 0.35); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.site-footer p { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.footer-note { flex-basis: 100%; max-width: 48em; font-size: clamp(0.8125rem, calc(24 * var(--u)), 1.5rem); }
.footer-nav a { display: inline-block; padding-block: 0.7rem; text-decoration: underline; text-underline-offset: 0.2em; }

/* Bewegung: Rückmeldung */
.places .photo img { transition: transform 300ms var(--ease); }
.places .arrow, .trust-slot .arrow { transition: transform 200ms var(--ease); }
.places a:focus-visible { outline: none; }
.places a:focus-visible .photo { outline: 3px solid var(--pink); outline-offset: 4px; }
.places a:focus-visible .arrow { transform: translateX(20%); }
.machine:focus-visible { outline-offset: 8px; }

@media (hover: hover) and (pointer: fine) {
  .contact-direct a:hover, .nav a:hover, .more:hover { text-decoration-color: currentColor; }
  .pill:hover { background: #30343f; box-shadow: var(--shadow-pill-hover); }
  .pill-round:disabled:hover { background: var(--fill); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.1); }
  .places a:hover .photo { box-shadow: var(--shadow-photo-hover); }
  .places a:hover .photo img { transform: scale(1.03); }
  .trust-slot:hover { border-color: var(--ink); color: var(--ink); }
  .places a:hover .arrow, .trust-slot:hover .arrow, .more:hover .arrow { transform: translateX(20%); }
  .lineup-item:hover .machine img { transform: translateY(-8px); }
  .lineup-item:hover .machine-tip {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 180ms var(--ease), transform 240ms var(--ease), visibility 0s;
  }
  .lineup-item.tip-hidden:hover .machine-tip { opacity: 0; visibility: hidden; }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes word-rise { from { opacity: 0; transform: translateY(0.3em); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes panel-open { from { clip-path: inset(100% 0 0 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }
@keyframes photo-settle { from { transform: scale(1.08); } }
@keyframes s-arrive { from { opacity: 0; transform: translateY(-7%) rotate(-5deg) scale(0.96); } }

/* Bewegung: Auftritt des ersten Bildschirms, Wegweiser öffnen sich, das S landet zuletzt */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .site-header { animation: fade-in 500ms var(--ease) backwards; }
  .hl-word { display: inline-block; animation: word-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i) * 55ms + 40ms); }
  .subline { animation: rise-in 560ms cubic-bezier(0.16, 1, 0.3, 1) backwards 280ms; }
  .pill-hero { animation: rise-in 560ms cubic-bezier(0.16, 1, 0.3, 1) backwards 340ms; }
  .first-view .photo { animation: panel-open 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i) * 70ms + 380ms); }
  .first-view .photo img { animation: photo-settle 820ms cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i) * 70ms + 380ms); }
  .place-name, .first-view .arrow { animation: rise-in 460ms cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i) * 70ms + 600ms); }
  .p-s { animation: s-arrive 720ms cubic-bezier(0.16, 1, 0.3, 1) backwards 480ms; }
  .page-intro .page-title { animation: rise-in 620ms cubic-bezier(0.16, 1, 0.3, 1) backwards 60ms; }
  .page-intro .lead { animation: rise-in 560ms cubic-bezier(0.16, 1, 0.3, 1) backwards 180ms; }
  .panel { transition: opacity 280ms var(--ease), transform 280ms var(--ease), filter 280ms var(--ease); }
  .panel.is-entering { opacity: 0; transform: translateY(8px); filter: blur(2px); transition: none; }
  .reveal-armed .steps > li { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease), transform 650ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i) * 80ms); }
  .reveal-armed .steps.is-in > li { opacity: 1; transform: none; }
  .reveal-armed .step-head .arrow { opacity: 0; transform: translateX(-40%); transition: opacity 400ms var(--ease), transform 500ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i) * 80ms + 260ms); }
  .reveal-armed .steps.is-in .step-head .arrow { opacity: 1; transform: none; }
}

@container (max-width: 1000px) {
  .trust, .panel, .contact, .wish, .about, .teaser-body { grid-template-columns: minmax(0, 1fr); }
  .facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features, .steps, .worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  .features, .steps, .form, .worlds { grid-template-columns: minmax(0, 1fr); }
  .showroom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.75rem; padding-inline: 0.75rem; }
  .showroom img { height: clamp(11rem, 58cqi, 16rem); }
  .partner-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .step-head .arrow { display: none; }
  .switch button { padding: 0.75em 1.05em; }
}

@media (prefers-reduced-motion: reduce) {
  .switch-indicator, .places .photo img, .places .arrow, .trust-slot .arrow, .more .arrow, .machine img, .filter button { transition: none; }
  .places a:hover .photo img, .lineup-item:hover .machine img { transform: none; }
  .machine-tip, .lineup-item.is-open .machine-tip, .machine:focus-visible + .machine-tip { transform: none; transition: opacity 120ms ease, visibility 0s; }
  .panel { transition: opacity 150ms ease; }
  .panel.is-entering { opacity: 0; transition: none; }
}

/* Startseite: Schaufenster mit Kurzinfos */
.showroom .lineup-item { min-width: 0; }
.showroom .machine img { height: clamp(11rem, calc(860 * var(--u)), 38rem); max-width: 100%; }
@container (max-width: 640px) {
  .showroom .machine img { height: clamp(11rem, 58cqi, 16rem); }
  .showroom .lineup-item:nth-child(odd) .machine-tip { left: 0; right: auto; translate: none; }
  .showroom .lineup-item:nth-child(even) .machine-tip { left: auto; right: 0; translate: none; }
}

/* Sortiment-Kacheln: heben sich beim Zeigen, die Produkte fächern auf (Startseite und Sechs Welten) */
.keytiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, calc(44 * var(--u)), 2.75rem) clamp(1rem, calc(40 * var(--u)), 2.5rem); margin: calc(var(--space) * 0.45) 0 0; padding: 0; list-style: none; }
.keytile { display: grid; gap: 0.85em; color: inherit; perspective: 900px; }
.keytile-stage, .world-shelf {
  transform-origin: 50% 100%;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.keytile-stage {
  display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 5 / 4; padding: 0 0.5rem clamp(1rem, calc(46 * var(--u)), 2.5rem);
  border-radius: var(--radius); background: var(--fill); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.08), var(--shadow-photo); overflow: hidden;
}
.keytile-stage picture, .world-shelf picture { display: block; flex: none; }
.keytile-stage .pack { height: calc(var(--h, 1) * clamp(4.75rem, calc(270 * var(--u)), 12.5rem)); margin-inline: calc(-14 * var(--u)); }
.keytile-stage .pack, .world-shelf .pack { transition: transform 520ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.keytile-stage picture:nth-child(2), .world-shelf picture:nth-child(2) { position: relative; z-index: 1; }
.keytile-name { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; font-size: clamp(1.125rem, calc(46 * var(--u)), 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.keytile-name .arrow { width: 0.85em; height: 0.66em; flex: none; transition: transform 200ms var(--ease); }
.keytile:focus-visible { outline: none; }
.keytile:focus-visible .keytile-stage { outline: 3px solid var(--pink); outline-offset: 4px; }
.worlds li { perspective: 900px; }
@media (hover: hover) and (pointer: fine) {
  .keytile:hover .keytile-stage, .worlds li:hover .world-shelf { transform: translateY(-10px) rotateX(7deg); box-shadow: inset 0 1px 3px rgba(26, 29, 38, 0.08), var(--shadow-photo-hover); }
  .keytile:hover .arrow { transform: translateX(20%); }
  .keytile:hover picture:nth-child(1) .pack, .worlds li:hover picture:nth-child(1) .pack { transform: translate(-10%, -12%) rotate(-9deg); }
  .keytile:hover picture:nth-child(2) .pack, .worlds li:hover picture:nth-child(2) .pack { transform: translateY(-20%) scale(1.06); }
  .keytile:hover picture:nth-child(3) .pack, .worlds li:hover picture:nth-child(3) .pack { transform: translate(10%, -11%) rotate(8deg); }
}
.keytile:focus-visible .keytile-stage { transform: translateY(-10px) rotateX(7deg); }
.keytile:focus-visible picture:nth-child(2) .pack { transform: translateY(-20%) scale(1.06); }
@container (max-width: 1000px) { .keytiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .keytile-stage, .world-shelf, .keytile-stage .pack, .world-shelf .pack, .keytile-name .arrow { transition: box-shadow 150ms ease; }
  .keytile:hover .keytile-stage, .worlds li:hover .world-shelf, .keytile:focus-visible .keytile-stage { transform: none; }
  .keytile .pack, .worlds li .pack { transform: none !important; }
}

/* Standorte: Fotokacheln im Raster und als Streifen */
.spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, calc(70 * var(--u)), 4rem) clamp(1rem, calc(44 * var(--u)), 2.75rem); margin: calc(var(--space) * 0.45) 0 0; padding: 0; list-style: none; }
.spot { display: grid; align-content: start; gap: 0.55em; color: inherit; }
.spot-photo { margin: 0 0 0.35em; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-photo); transition: box-shadow 300ms var(--ease), transform 420ms var(--ease); }
.spot-photo picture { display: contents; }
.spot-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ease); }
.spot-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.spot-name { font-size: clamp(1.125rem, calc(46 * var(--u)), 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.spot .arrow { width: 0.95em; height: 0.74em; flex: none; transition: transform 200ms var(--ease); }
.spot-line { max-width: 30em; }
.spot-s { display: grid; place-items: center; background: var(--fill); box-shadow: inset 0 0 0 1px rgba(26, 29, 38, 0.18); }
.spot-s img { width: auto; height: 72%; object-fit: contain; filter: drop-shadow(0 10px 12px var(--shadow-s)); }
.spot:focus-visible { outline: none; }
.spot:focus-visible .spot-photo { outline: 3px solid var(--pink); outline-offset: 4px; }
.spot-track { display: flex; gap: clamp(1rem, calc(44 * var(--u)), 2.75rem); margin: calc(var(--space) * 0.35) calc(-1 * var(--gutter)) 0; padding: 0.9rem var(--gutter) 1.2rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: #c9c5bd transparent; }
.spot-track > li { flex: 0 0 clamp(15rem, calc(640 * var(--u)), 27rem); scroll-snap-align: start; }
@media (hover: hover) and (pointer: fine) {
  .spot:hover .spot-photo { transform: translateY(-8px); box-shadow: var(--shadow-photo-hover); }
  .spot:hover .spot-photo img { transform: scale(1.05); }
  .spot:hover .arrow { transform: translateX(20%); }
}
@container (min-width: 1100px) { .spots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 1000px) { .spots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 640px) { .spots { grid-template-columns: minmax(0, 1fr); } .nav ul { flex-wrap: wrap; gap: 0 1.1rem; } .nav a { display: flex; align-items: center; min-height: 2.75rem; font-size: 0.875rem; } }
@media (prefers-reduced-motion: reduce) { .spot-photo, .spot-photo img, .spot .arrow { transition: none; } .spot:hover .spot-photo, .spot:hover .spot-photo img { transform: none; } }
/* Standorte: Fotokacheln */

/* Automaten nach Hersteller: Markenlogo über jeder Gruppe, bleibt beim Wischen sichtbar */
.lineup-track { gap: calc(3 * var(--gutter)); }
.lineup-group { flex: none; display: grid; align-content: end; gap: clamp(1rem, calc(40 * var(--u)), 2.25rem); }
.lineup-brand { position: sticky; left: 3rem; justify-self: start; display: flex; align-items: center; gap: 0.8rem; margin: 0; font-size: var(--fs-small); font-weight: 500; line-height: 1.2; color: var(--ink-soft); }
.lineup-brand img { display: block; width: auto; opacity: 0.85; }
.brand-sielaff { height: clamp(2.5rem, calc(96 * var(--u)), 4.5rem); }
.brand-fas { height: clamp(1.375rem, calc(52 * var(--u)), 2.5rem); }
.brand-sanden-vendo { height: clamp(2rem, calc(80 * var(--u)), 3.75rem); }
.brand-tcn { height: clamp(1.125rem, calc(42 * var(--u)), 2rem); }
.brand-vendvibe { height: clamp(1rem, calc(38 * var(--u)), 1.75rem); }
.lineup-group-items { display: flex; align-items: flex-end; gap: calc(1.2 * var(--gutter)); margin: 0; padding: 0; list-style: none; }
.lineup-group:first-child .lineup-item:first-child .machine-tip { left: 0; right: auto; translate: none; }
.lineup-group:last-child .lineup-item:last-child .machine-tip { left: auto; right: 0; translate: none; }
.lineup-group .lineup-item:first-child .machine-tip, .lineup-group .lineup-item:last-child .machine-tip { left: 50%; right: auto; translate: -50% 0; }
.lineup-group:first-child .lineup-item:first-child .machine-tip { left: 0; translate: none; }
.lineup-group:last-child .lineup-item:last-child .machine-tip { left: auto; right: 0; translate: none; }

/* Sortiment: Katalog gleichmäßig, einklappbar, Produkte heben sich beim Zeigen */
.catalog li { transition: transform 360ms var(--ease); }
.js .catalog.is-collapsed > li:nth-child(n+49) { display: none; }
.catalog-more { display: none; justify-content: center; margin-top: 1.4em; }
.js .catalog-more { display: flex; }
.js .catalog-more[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .catalog li:hover { transform: translateY(-8px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .catalog li { transition: none; } .catalog li:hover { transform: none; } }
/* Automaten nach Hersteller */

/* Automat gestalten */
.wechsler { position: relative; width: min(100%, 26rem); margin: calc(var(--space) * 0.35) auto 0; aspect-ratio: 911 / 1600; }
.wechsler-klein { width: min(100%, 18rem); }
.wechsler picture { display: contents; }
.wechsel-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0;
  transition: opacity 900ms var(--ease); filter: drop-shadow(0 max(10px, calc(30 * var(--u))) max(14px, calc(34 * var(--u))) var(--shadow-machine)); }
.wechsel-bild.ist-da { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wechsel-bild { transition: none; } }

.gestalter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, calc(60 * var(--u)), 4rem);
  align-items: start; margin-top: calc(var(--space) * 0.4); }
.gestalter-buehne { display: grid; gap: 0.8rem; justify-items: center; }
.designer { position: relative; width: min(100%, 30rem); aspect-ratio: 911 / 1600; }
.designer picture { display: contents; }
.design-bild { width: 100%; height: 100%; object-fit: contain; transition: opacity 260ms var(--ease);
  filter: drop-shadow(0 max(10px, calc(30 * var(--u))) max(14px, calc(34 * var(--u))) var(--shadow-machine)); }
.design-bild.wechselt { opacity: 0; }
.logo-schicht { position: absolute; top: 0; left: 0; transform-origin: 0 0; display: grid; place-items: start center;
  padding-top: 9%; pointer-events: none; }
.logo-schicht img { width: 58%; height: auto; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3)); }
.designer-hinweis { color: var(--ink-soft); }
.gestalter-regler { display: grid; gap: clamp(1.25rem, calc(44 * var(--u)), 2.25rem); align-content: start; }
.regler-gruppe h3 { margin: 0 0 0.7em; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft); }
.muster-reihe { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.muster { display: grid; gap: 0.4rem; justify-items: center; width: 5rem; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; }
.muster-bild { display: block; width: 100%; aspect-ratio: 1; border-radius: 0.75rem; background-size: cover;
  background-position: center; box-shadow: inset 0 0 0 1px rgba(26, 29, 38, 0.15);
  transition: box-shadow 180ms var(--ease), transform 180ms var(--ease); }
.muster-text { font-size: 0.75rem; line-height: 1.2; text-align: center; color: var(--ink-soft); }
.muster[aria-pressed="true"] .muster-bild { box-shadow: 0 0 0 3px var(--pink); transform: translateY(-2px); }
.muster:focus-visible .muster-bild { outline: 3px solid var(--ink); outline-offset: 3px; }
.laden { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; padding: 0.8em 1.3em;
  border: 1px dashed rgba(26, 29, 38, 0.35); border-radius: 999px; cursor: pointer; font-size: var(--fs-small); }
.laden input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.logo-weg { margin-left: 0.6rem; padding: 0.8em 1.2em; border: 0; border-radius: 999px; background: var(--fill);
  color: var(--ink); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.veredeln-hinweis { margin-top: 1.4em; color: var(--ink-soft); }
.referenz { margin: calc(var(--space) * 0.35) 0 0; }
.referenz img { display: block; width: min(100%, 34rem); height: auto; border-radius: var(--radius); box-shadow: var(--shadow-photo); }
.referenz figcaption { margin-top: 0.8em; max-width: 34em; color: var(--ink-soft); }
@container (max-width: 900px) { .gestalter { grid-template-columns: minmax(0, 1fr); } }

/* Liste der Veredelungen */
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, calc(56 * var(--u)), 3rem) clamp(1.25rem, calc(44 * var(--u)), 2.75rem);
  margin: calc(var(--space) * 0.4) 0 0; padding: 0; list-style: none; }
.items .item { display: grid; align-content: start; gap: 0.5em; }
.items .item-title { margin: 0; font-size: clamp(1.125rem, calc(44 * var(--u)), 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
@container (max-width: 700px) { .items { grid-template-columns: minmax(0, 1fr); } }

/* Kurzinfos auf schmalen Schirmen.
   Zentriert ueber einer 11rem-Kachel ragt eine 16rem-Box beidseitig hinaus und
   wird vom Rahmen (.lineup, overflow:hidden) abgeschnitten. position:fixed
   allein reicht nicht: .lineup macht einen eigenen Stapelkontext auf, in dem
   die Box hinter dem Automatenknopf liegen bleibt. Deshalb haengt site.js die
   geoeffnete Box auf schmalen Schirmen an den Seitenkoerper um, und diese Regel
   gibt ihr dort ihren Platz. */
@media (max-width: 680px) {
  body > .machine-tip.tip-los {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 1rem;
    width: min(22rem, calc(100vw - 2rem));
    max-width: none;
    translate: -50% 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    z-index: 60;
  }
}

/* Produktgröße folgt der tatsächlichen Kachel, auch im geteilten Fenster. */
.keytile-stage,.world-shelf{container-type:inline-size}
.keytile-stage .pack{height:calc(var(--h,1) * 61cqw);margin-inline:-3cqw}
.world-shelf .pack{height:calc(var(--h,1) * 52cqw);margin-inline:-3cqw}
.home-brand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);align-items:center}
.home-brand-copy .more{display:inline-flex;white-space:normal;gap:.65em;line-height:1.3}
.home-brand-copy>.small:last-child{margin-top:1.5rem;max-width:35em}
.home-brand-stage{margin:0;min-width:0}.home-brand-stage .realistic-machine{max-width:460px}
.home-brand-stage figcaption{display:flex;gap:1rem;justify-content:center;align-items:center;font-size:.85rem}
.home-brand-stage>p{text-align:center;margin-top:.7rem}
#home-brand-machine .front-plane{clip-path:url(#home-front-cutout)}
#home-brand-pause{font:inherit;color:var(--ink);border:0;border-bottom:1px solid;background:none;padding:.65rem;cursor:pointer}
@media(max-width:680px){.home-brand{grid-template-columns:1fr}.home-brand-stage .realistic-machine{max-width:340px}.home-brand-copy .more{font-size:1.25rem}}