/* ============================================================
   Real Vending · Webseite
   realvending-site.css — baut auf colors_and_type.css auf.
   "The Aperture" — brand-treu, etwas mutiger im Web.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }   /* KEIN overflow-x hier: bricht das sticky-Scrollytelling. Wisch-Ursache ist am Header behoben. */
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* KEIN overflow-x:hidden auf html/body: bricht position:sticky auf iOS Safari (Recherche).
   Horizontaler Overflow wird stattdessen an der Quelle (Bildbreiten) verhindert. */
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--brick); color:var(--paper); }

/* ---------- web-scale tokens + tweak hooks ---------- */
:root{
  --maxw: 1400px;
  --gutter: clamp(20px, 5vw, 76px); /* @kind spacing */
  --hero:  clamp(46px, 8.4vw, 108px); /* @kind font */
  --h2:    clamp(30px, 4.4vw, 56px); /* @kind font */
  --h3:    clamp(20px, 2.1vw, 27px); /* @kind font */
  --lede:  clamp(18px, 1.6vw, 22px); /* @kind font */
  --sect:  clamp(72px, 11vh, 140px); /* @kind spacing */  /* section vertical padding */
  --nav-h: 70px;
  --radius-img: 13px;  /* Eckenrundung NUR fuer Bilder (Marke sonst kantig) */
  /* geerdeter, eng anliegender Schatten: minimal 3D/erhaben, KEIN schwebendes Floating */
  --shadow-img: 0 1px 2px rgba(17,16,13,.12), 0 10px 22px -12px rgba(17,16,13,.30);
}
[data-style="reduziert"]{ --hero:clamp(40px,6.6vw,82px); --h2:clamp(27px,3.7vw,44px); }
[data-style="mutig"]    { --hero:clamp(52px,10vw,134px);  --h2:clamp(34px,5.4vw,68px); }
[data-density="kompakt"]{ --sect:clamp(54px,8vh,96px); }
[data-density="luftig"] { --sect:clamp(96px,15vh,180px); }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* mono kicker: nr · label · slot mark */
.kicker{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-weight:500;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}
.kicker .k-nr{ color:var(--brick); }
.kicker .k-rule{ flex:0 0 38px; height:1px; background:var(--rule); }

/* the aperture, as inline mark (frame = currentColor, slot = brick) */
.ap{ display:inline-block; vertical-align:-0.02em; }
.ap rect.fr{ stroke:currentColor; }

/* wordmark REAL ▢ VENDING */
.wordmark{ display:inline-flex; align-items:center; gap:.02em; font-family:var(--font-display); font-weight:500; letter-spacing:.05em; line-height:1; color:currentColor; }
.wordmark .wm-ap{ width:.74em; height:.74em; margin:0 .2em; }

/* aperture divider — hairline with a brick slot segment */
.slot-rule{ position:relative; height:1px; background:var(--rule); }
.slot-rule::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:64px; height:5px; background:var(--brick); }

/* buttons — kantig, füllen sich beim Hover */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-weight:500; font-size:15px; letter-spacing:.01em;
  padding:15px 26px; border:1px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:var(--brick); border-color:var(--brick); }
.btn--primary:active{ background:var(--deep); border-color:var(--deep); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn .ph-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
/* inverse buttons (on ink) */
.section--ink .btn{ border-color:var(--paper); color:var(--paper); }
.section--ink .btn--primary{ background:var(--paper); color:var(--ink); }
.section--ink .btn--primary:hover{ background:var(--brick); color:var(--paper); border-color:var(--brick); }
.section--ink .btn--ghost:hover{ background:var(--paper); color:var(--ink); }

/* image placeholders (brand-konform: gestreift + mono-label) */
.ph{ position:relative; background:var(--paper-dk); border:1px solid var(--rule); overflow:hidden; }
.ph::before{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 13px, color-mix(in srgb,var(--rule) 55%, transparent) 13px 14px); }
.ph .ph-label{ position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:var(--font-mono); font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); background:var(--paper-dk); padding:4px 7px 4px 0; }
.ph .ph-slot{ position:absolute; top:50%; left:30%; right:30%; height:10px; background:var(--brick); transform:translateY(-50%); z-index:1; }

/* ============================================================
   SECTIONS / TYPE
   ============================================================ */
.section{ padding-block:var(--sect); border-top:1px solid var(--rule); scroll-margin-top:calc(var(--nav-h) + 8px); }
.section--ink{ background:var(--ink); color:var(--on-dark); border-top-color:var(--ink-soft); }
.section--alt{ background:var(--paper-dk); }
.section--ink .kicker{ color:color-mix(in srgb,var(--paper) 52%, transparent); }
.section--ink .kicker .k-rule{ background:color-mix(in srgb,var(--paper) 24%, transparent); }
.section--ink .slot-rule{ background:color-mix(in srgb,var(--paper) 20%, transparent); }

.h2{ font-family:var(--font-display); font-weight:500; font-size:var(--h2); letter-spacing:-.025em; line-height:1.02; margin:.5em 0 0; max-width:18ch; text-wrap:balance; }
.h3{ font-family:var(--font-display); font-weight:500; font-size:var(--h3); letter-spacing:-.012em; line-height:1.15; margin:0; }
.lede{ font-size:var(--lede); line-height:1.45; max-width:46ch; color:var(--ink); }
.section--ink .lede{ color:color-mix(in srgb,var(--paper) 88%, transparent); }
.body{ font-size:16px; line-height:1.6; color:var(--muted); max-width:52ch; }
.section--ink .body{ color:color-mix(in srgb,var(--paper) 66%, transparent); }
.sect-head{ max-width:760px; margin-bottom:clamp(40px,6vh,72px); }

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h); display:flex; align-items:center;
  background:var(--paper);
  border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease;
}
.site-nav.scrolled{ border-bottom-color:var(--rule); box-shadow:0 10px 30px -24px var(--ink-14); }
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:24px; }
.site-nav .wordmark{ font-size:clamp(24px,3.2vw,30px); }
.nav-links{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav-links a{ position:relative; font-size:14.5px; color:var(--ink); padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1.5px; background:var(--brick); transition:right .18s ease; }
.nav-links a:hover::after{ right:0; }
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-tel{ font-family:var(--font-mono); font-weight:500; font-size:13.5px; font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--ink); white-space:nowrap; }
.nav-tel:hover{ color:var(--brick); }
.nav-toggle{ display:none; width:42px; height:42px; border:1px solid var(--rule); background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0; }
.nav-toggle span{ display:block; width:18px; height:1.5px; background:var(--ink); }
.nav-cta-m{ display:none; text-align:center; }   /* nur im offenen Mobile-Menue sichtbar */

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; border-top:none; padding-top:clamp(48px,9vh,104px); padding-bottom:clamp(56px,9vh,110px); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(32px,5vw,64px); align-items:center; }
.hero h1{ font-family:var(--font-display); font-weight:500; font-size:var(--hero); letter-spacing:-.035em; line-height:.98; margin:.32em 0 0; text-wrap:balance; }
.hero .lede{ margin-top:1.4em; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2em; }
/* Hero-Kicker (jetzt unter der Lede) */
.hero-kicker{ margin-top:1.5em; }

/* Stats als interaktive Eyecatcher-Karten */
.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,28px); margin-top:clamp(30px,4.5vh,54px); perspective:1300px; }
/* Stats in den Leistungen: mehr Luft nach unten zur Slideshow */
.lstg-stats{ margin-bottom:clamp(44px,6vh,76px); }
.stat{ position:relative; border:1px solid var(--rule); border-radius:var(--radius-img); background:var(--paper);
  padding:clamp(24px,2.6vw,38px) clamp(22px,2.3vw,30px) clamp(26px,2.8vw,40px); overflow:hidden; cursor:pointer;
  transform-style:preserve-3d;
  transition:border-color .3s ease, background .3s ease, transform .55s cubic-bezier(.23,1,.32,1), box-shadow .55s ease; }
.stat-val{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(40px,4.6vw,64px);
  letter-spacing:-.03em; line-height:1; color:var(--ink); transition:color .3s ease; }
.stat-val .u{ color:var(--brick); }
.stat-lab{ display:block; margin-top:11px; font-family:var(--font-mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); }
.stat-detail{ display:block; max-height:0; opacity:0; margin-top:0; font-size:clamp(14px,1.05vw,16px); line-height:1.55;
  color:var(--muted); transition:max-height .4s ease, opacity .35s ease, margin-top .4s ease; }
/* Glanz-Sweep (laeuft beim Aktivieren einmal diagonal durch) */
.stat::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%);
  background-size:250% 250%; background-position:100% 100%; opacity:0;
  transition:background-position .8s cubic-bezier(.23,1,.32,1), opacity .35s ease; mix-blend-mode:soft-light; }
/* „+" / „×"-Indikator */
.stat::after{ content:"+"; position:absolute; top:16px; right:18px; font-family:var(--font-mono); font-size:21px;
  color:var(--rule); transition:color .25s ease, transform .3s var(--ease); z-index:3; }
/* Desktop-Hover: dezenter Affordance-Hint (laedt zum Klicken ein) */
@media (hover:hover){
  .stat:hover{ border-color:var(--ink); transform:translateY(-3px); }
  .stat:hover::after{ color:var(--muted); }
}
/* Aktiviert per Klick/Tap (.open): 3D-Tilt, Glanz, Detail, „×" */
.stat.open{ border-color:var(--ink); background:var(--paper-dk);
  transform:rotateX(4deg) rotateY(-7deg) scale(1.03); box-shadow:var(--shadow-img); }
.stat.open .stat-val{ color:var(--brick); }
.stat.open .stat-detail{ max-height:220px; opacity:1; margin-top:14px; }
.stat.open::after{ content:"×"; color:var(--brick); }
.stat.open::before{ background-position:0% 0%; opacity:1; }
@media (max-width:560px){
  /* kein scale auf Mobile: full-width-Karte wuerde sonst ueber den Rand ragen */
  .stat.open{ transform:rotateX(3deg) rotateY(-3deg); }
}
/* Eigene Stats-Band direkt unter dem Hero */
.stats-band{ padding-block:clamp(36px,5vh,64px); }
.stats-band .hero-stats{ margin-top:0; }

/* hero visual = "Automat" placeholder, aperture at dispensing line */
.hero-visual{ position:relative; aspect-ratio:4/5; min-height:560px; width:100%; min-width:0; max-width:100%; border-radius:var(--radius-img); overflow:hidden; border:1px solid var(--rule); box-shadow:var(--shadow-img); }
.hero-visual .ph{ position:absolute; inset:0; }
.hero-visual .ap-line{ position:absolute; left:0; right:0; bottom:23%; height:0; border-top:1px dashed color-mix(in srgb,var(--ink) 28%, transparent); z-index:2; }
.hero-visual .ap-cap{ position:absolute; right:14px; top:16px; z-index:3; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* hero dark variant */
[data-hero="dunkel"] .hero{ background:var(--ink); color:var(--on-dark); }
[data-hero="dunkel"] .hero .lede{ color:color-mix(in srgb,var(--paper) 86%, transparent); }
[data-hero="dunkel"] .hero .kicker{ color:color-mix(in srgb,var(--paper) 52%, transparent); }
[data-hero="dunkel"] .hero .kicker .k-rule{ background:color-mix(in srgb,var(--paper) 24%, transparent); }
[data-hero="dunkel"] .hero-stats{ border-top-color:color-mix(in srgb,var(--paper) 20%, transparent); }
[data-hero="dunkel"] .hero-stat .s-lab{ color:color-mix(in srgb,var(--paper) 55%, transparent); }
[data-hero="dunkel"] .hero .btn{ border-color:var(--paper); color:var(--paper); }
[data-hero="dunkel"] .hero .btn--primary{ background:var(--paper); color:var(--ink); }
[data-hero="dunkel"] .hero .btn--primary:hover{ background:var(--brick); color:var(--paper); border-color:var(--brick); }
[data-hero="dunkel"] .hero .btn--ghost:hover{ background:var(--paper); color:var(--ink); }
[data-hero="dunkel"] .hero .ph{ background:#1b1915; border-color:var(--ink-soft); }
[data-hero="dunkel"] .hero .ph::before{ background:repeating-linear-gradient(45deg,transparent 0 13px, rgba(244,241,234,.06) 13px 14px); }
[data-hero="dunkel"] .hero .ph .ph-label{ background:#1b1915; color:color-mix(in srgb,var(--paper) 55%, transparent); }
[data-hero="dunkel"] .nav-after-hero{ }

/* ============================================================
   STANDORTE (audience grid)
   ============================================================ */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.cell{ background:var(--paper); padding:clamp(24px,2.6vw,38px) clamp(22px,2.4vw,34px); min-height:200px; display:flex; flex-direction:column; }
.section--alt .cell{ background:var(--paper-dk); }
.cell .c-nr{ font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.16em; color:var(--muted); }
.cell .h3{ margin-top:auto; }
.cell .c-desc{ font-size:14.5px; line-height:1.5; color:var(--muted); margin-top:10px; }
.cell .c-slot{ width:34px; height:6px; background:var(--rule); margin-top:18px; transition:background .15s ease, width .2s ease; }
.cell:hover .c-slot{ background:var(--brick); width:54px; }

/* Standorte: schlanke Typo-Liste (gestaffelt eingeblendet) */
.loc-list{ list-style:none; margin:clamp(28px,4vh,48px) 0 0; padding:0; border-top:1px solid var(--rule); }
.loc{ display:flex; align-items:baseline; gap:clamp(14px,2.5vw,28px);
  padding:clamp(15px,2.2vw,24px) 6px; border-bottom:1px solid var(--rule);
  transition:padding-left .3s var(--ease), color .3s var(--ease); }
.loc-nr{ font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; color:var(--brick); flex:0 0 auto; }
.loc-name{ font-family:var(--font-display); font-weight:500; font-size:clamp(21px,3.2vw,36px);
  letter-spacing:-.02em; line-height:1.05; color:var(--ink); }
.loc-tag{ margin-left:auto; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); text-align:right; flex:0 0 auto; }
@media (hover:hover){ .loc:hover{ padding-left:16px; } .loc:hover .loc-name{ color:var(--brick); } }
@media (max-width:560px){
  .loc{ flex-wrap:wrap; gap:6px 14px; padding-block:16px; }
  .loc-tag{ width:100%; margin-left:0; text-align:left; padding-left:30px; }
}

/* ============================================================
   LEISTUNGEN
   ============================================================ */
.lstg{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,56px); }
.lstg .item{ display:flex; flex-direction:column; }
.lstg .l-nr{ font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.12em; color:var(--brick); }
.lstg .l-thumb{ aspect-ratio:2/3; margin:18px 0 22px; }
.lstg .h3{ margin-bottom:10px; }

/* Leistungen: manuelle Slideshow, Text liegt AUF dem Bild (Scrim-Verlauf + text-shadow als
   Hervorhebung). Kein Auto-Play, kein sticky/scroll-binding -> Overflow-sicher.
   Navigation: Pfeile, Dots, Swipe. */
.lstg-show{ position:relative; aspect-ratio:16/9; width:100%; overflow:hidden; isolation:isolate;
  border-radius:var(--radius-img); border:1px solid var(--rule); box-shadow:var(--shadow-img);
  background:var(--paper-dk); touch-action:pan-y; }
.lstg-slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .6s var(--ease); }
.lstg-slide.is-active{ opacity:1; }
.lstg-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Scrim: der Schatten hinter dem Text, der auf dem Bild liegt (unten dunkel -> oben transparent) */
.lstg-slide::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(17,16,13,.86) 0%, rgba(17,16,13,.46) 34%, rgba(17,16,13,0) 64%); }
.lstg-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(22px,3.4vw,46px) clamp(22px,3.4vw,46px) clamp(44px,4.6vw,54px);
  color:var(--paper); text-shadow:0 2px 16px rgba(0,0,0,.6); }
.lstg-cap .l-nr{ font-family:var(--font-mono); font-weight:500; font-size:clamp(12px,1vw,14px);
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper); opacity:.9; }
.lstg-cap .h3{ font-size:clamp(26px,3.6vw,46px); line-height:1.04; letter-spacing:-.02em;
  margin:clamp(8px,1.2vw,16px) 0 clamp(8px,1vw,14px); color:var(--paper); }
.lstg-cap .body{ font-size:clamp(14px,1.1vw,17px); line-height:1.5; color:rgba(244,241,234,.9); max-width:48ch; }
.lstg-count{ position:absolute; top:0; left:0; z-index:3; font-family:var(--font-mono);
  font-size:clamp(12px,1vw,14px); letter-spacing:.18em; color:var(--paper); background:var(--ink); padding:7px 13px; }
.lstg-arrow{ position:absolute; top:40%; z-index:4; width:clamp(40px,4vw,50px); height:clamp(40px,4vw,50px);
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; padding:0;
  background:rgba(244,241,234,.92); color:var(--ink); font-size:24px; line-height:1;
  transition:background .2s ease, transform .15s ease; }
.lstg-prev{ left:clamp(12px,1.5vw,20px); }
.lstg-next{ right:clamp(12px,1.5vw,20px); }
@media (hover:hover){ .lstg-arrow:hover{ background:var(--brick); color:var(--paper); } }
.lstg-arrow:active{ transform:scale(.92); }
.lstg-dots{ position:absolute; right:clamp(16px,3vw,28px); bottom:clamp(15px,2vw,20px); z-index:4;
  display:flex; align-items:center; gap:9px; }
.lstg-dot{ width:clamp(26px,3vw,40px); height:4px; border:none; padding:0; cursor:pointer;
  background:rgba(244,241,234,.42); transition:background .3s var(--ease); }
.lstg-dot.is-active{ background:var(--paper); }
@media (max-width:680px){
  .lstg-show{ aspect-ratio:3/4; }   /* Mobile: hoeher, mehr Bild + Platz fuer den Text */
  .lstg-arrow{ top:auto; bottom:clamp(15px,3vw,20px); }
  .lstg-prev{ left:clamp(14px,3vw,18px); }
  .lstg-next{ left:calc(clamp(14px,3vw,18px) + clamp(40px,4vw,50px) + 8px); right:auto; }
}

/* Sonderlösungen-Block (am Ende der Leistungen) */
.special{ margin-top:clamp(40px,5vh,64px); border:1px solid var(--rule); background:var(--paper);
  padding:clamp(28px,4vw,44px); display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,48px); flex-wrap:wrap; }
.special-text{ flex:1 1 460px; }
.special-h{ font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.02em; line-height:1.1; margin:12px 0 10px; color:var(--ink); }
.special .btn{ flex:0 0 auto; }

/* ============================================================
   ABLAUF (process)
   ============================================================ */
.process{ position:relative; margin-top:44px; }

/* Ladebalken — lädt beim Reveal von links nach rechts */
.process-bar{ position:relative; height:4px; background:var(--rule); overflow:hidden;
  margin-bottom:clamp(30px,4.5vh,52px); }
.process-bar::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--brick);
  transition:width 1.3s cubic-bezier(.45,.05,.2,1) .15s; }
.process.is-revealed .process-bar::after{ width:100%; }

.steps{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,40px); }

/* Schritte: gestaffeltes Einblenden im Takt des Balkens */
.step{ opacity:0; transform:translateY(20px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.process.is-revealed .step{ opacity:1; transform:none; transition-delay:calc(var(--i) * .14s + .25s); }

.step-icon{ display:block; color:var(--brick); margin-bottom:16px;
  transition:transform .25s var(--ease), color .2s ease; }
.step-icon svg{ width:32px; height:32px; }
.step:hover .step-icon{ color:var(--deep); transform:translateY(-4px); }

.step .st-nr{ display:block; font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.14em; color:var(--muted); }
.step .h3{ font-size:20px; margin:10px 0 8px; }
.step .st-desc{ font-size:14.5px; line-height:1.55; color:var(--muted); }

/* ---- Scroll-Fortschrittsbalken (oben, Brick) ---- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:100;
  background:var(--brick); transform:scaleX(0); transform-origin:left;
  will-change:transform; }

/* ============================================================
   VORTEILE (ink moment)
   ============================================================ */
.vorteile{ position:relative; overflow:hidden; }
.vorteile .v-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-soft); border:1px solid var(--ink-soft); margin-top:8px; }
.v-cell{ background:var(--ink); padding:clamp(30px,3.4vw,52px); display:flex; flex-direction:column; gap:14px; }
.v-cell .v-nr{ font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; color:var(--brick); }
.v-cell .v-h{ font-family:var(--font-display); font-weight:500; font-size:clamp(24px,2.8vw,38px); letter-spacing:-.02em; line-height:1.04; color:var(--paper); text-wrap:balance; }
.v-cell .v-d{ font-size:15px; line-height:1.55; color:color-mix(in srgb,var(--paper) 60%, transparent); max-width:38ch; }
.vorteile .v-watermark{ position:absolute; right:-4%; bottom:-12%; width:min(42vw,520px); opacity:.06; pointer-events:none; }

/* ============================================================
   SORTIMENT (selector)
   ============================================================ */
.sort-tabs{ display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--rule); margin-bottom:clamp(28px,4vh,48px); }
.sort-tab{ appearance:none; background:none; border:none; cursor:pointer; padding:14px 22px 16px;
  font-family:var(--font-display); font-weight:500; font-size:clamp(16px,1.5vw,19px); letter-spacing:-.01em; color:var(--muted);
  position:relative; transition:color .15s ease; }
.sort-tab[aria-selected="true"]{ color:var(--ink); }
.sort-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brick); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.sort-tab[aria-selected="true"]::after{ transform:scaleX(1); }
.sort-panel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; }
.sort-panel[hidden]{ display:none; }
.sort-figure{ aspect-ratio:1/2; width:100%; max-width:236px; margin-inline:auto; border-radius:var(--radius-img); overflow:hidden; border:1px solid var(--rule); box-shadow:var(--shadow-img);
  display:flex; align-items:center; justify-content:center; background:var(--paper); padding:clamp(8px,1.3vw,16px); }
/* Selbst gebauter, gebrandeter Automat (SVG) mit Logo-Münzschlitz + Animationen */
/* width+height 100% + preserveAspectRatio "meet" (SVG-Default) = passt IMMER komplett rein, nie abgeschnitten */
.vend{ width:100%; height:100%; display:block; overflow:visible; }
/* Alle animierten Automaten-Teile: transform-box fill-box = korrekte Origins auf iOS/WebKit */
.v-coin,.v-coin>*,.v-pour,.v-fill,.v-steam,.v-fall,.v-land,.v-flap{ transform-box:fill-box; }
.v-coin{ transform-origin:center; animation:vCoinY 5s cubic-bezier(.55,0,.6,1) infinite; }
.v-coin > *{ transform-origin:center; animation:vCoinSpin .5s linear infinite; }
@keyframes vCoinY{ 0%{transform:translateY(-54px);opacity:0} 4%{opacity:1} 15%{transform:translateY(0);opacity:1} 20%{opacity:0} 100%{transform:translateY(0);opacity:0} }
@keyframes vCoinSpin{ 0%{transform:scaleX(1)} 50%{transform:scaleX(.12)} 100%{transform:scaleX(1)} }
.v-pour{ transform-origin:top center; animation:vPour 5s ease-in-out infinite; }
@keyframes vPour{ 0%,24%{transform:scaleY(0);opacity:0} 28%{opacity:1;transform:scaleY(1)} 62%{opacity:1;transform:scaleY(1)} 66%{opacity:0} 100%{opacity:0} }
.v-fill{ transform-origin:center bottom; animation:vFill 5s ease-in-out infinite; }
@keyframes vFill{ 0%,26%{transform:scaleY(0)} 62%{transform:scaleY(1)} 88%{transform:scaleY(1)} 100%{transform:scaleY(0)} }
.v-steam{ animation:vSteam 5s ease-in-out infinite; }
@keyframes vSteam{ 0%,60%{opacity:0;transform:translateY(6px)} 70%{opacity:.5} 85%{opacity:.5} 95%{opacity:0;transform:translateY(-10px)} 100%{opacity:0} }
.v-fall{ animation:vFall 5s cubic-bezier(.5,0,.9,1) infinite; }
@keyframes vFall{ 0%,24%{transform:translateY(0);opacity:0} 28%{opacity:1} 44%{transform:translateY(120px);opacity:1} 50%{transform:translateY(120px);opacity:0} 100%{opacity:0} }
.v-land{ animation:vLand 5s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes vLand{ 0%,48%{transform:translateY(-40px);opacity:0} 52%{opacity:1} 66%{transform:translateY(0);opacity:1} 92%{transform:translateY(0);opacity:1} 100%{opacity:0} }
.v-flap{ transform-origin:center top; animation:vFlap 5s ease-in-out infinite; }
@keyframes vFlap{ 0%,50%{transform:rotateX(0)} 58%{transform:rotateX(38deg)} 72%{transform:rotateX(0)} 100%{transform:rotateX(0)} }
.sort-body .h3{ font-size:clamp(22px,2.4vw,30px); margin-bottom:14px; }
.sort-list{ list-style:none; margin:20px 0 0; padding:0; }
.sort-list li{ display:flex; align-items:baseline; gap:12px; padding:11px 0; border-top:1px solid var(--rule); font-size:15.5px; }
.sort-list li::before{ content:""; flex:0 0 16px; height:4px; background:var(--brick); transform:translateY(-3px); }
.sort-meta{ display:flex; gap:28px; margin-top:24px; }
.sort-meta .m{ display:flex; flex-direction:column; gap:4px; }
.sort-meta .m-v{ font-family:var(--font-display); font-weight:500; font-size:22px; letter-spacing:-.02em; }
.sort-meta .m-l{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
/* Kaffee-Vergleich: Bei uns vs. Anderswo */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 0; }
.vs-card{ border:1px solid var(--rule); border-radius:var(--radius-img); padding:clamp(15px,1.5vw,20px); }
.vs-us{ border-color:var(--brick); background:color-mix(in srgb, var(--brick) 7%, var(--paper)); }
.vs-them{ background:var(--paper-dk); }
.vs-tag{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
.vs-us .vs-tag{ color:var(--brick); }
.vs-them .vs-tag{ color:var(--muted); }
.vs-card p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink); }
.vs-them p{ color:var(--muted); }
@media (max-width:560px){ .vs{ grid-template-columns:1fr; } }
/* Sorten-Chips (Kalt/Snack) */
.sort-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 0; padding:0; }
.sort-chips li{ font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; color:var(--ink);
  border:1px solid var(--rule); padding:8px 14px; background:var(--paper); }
/* Formular-Hinweis */
.sort-note{ margin:22px 0 0; font-size:14.5px; line-height:1.55; color:var(--muted); }
.sort-note a{ color:var(--brick); text-decoration:underline; text-underline-offset:2px; }
/* Bohnen-Produktfotos (Kaffee-Tab) */
.bean-shots{ display:flex; flex-wrap:wrap; gap:clamp(18px,3.2vw,38px); margin:22px 0 0; align-items:flex-end; justify-content:center; }
.bean-shots figure{ margin:0; display:flex; flex-direction:column; align-items:center; }
/* freigestellte Produktfotos, tight zugeschnitten -> gleiche Hoehe = saubere Grundlinie */
.bean-shots img{ height:clamp(66px,7.6vw,98px); width:auto; object-fit:contain; display:block;
  filter:drop-shadow(0 6px 10px rgba(17,16,13,.22)); }
.bean-shots figcaption{ margin-top:11px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--muted); text-align:center; white-space:nowrap; }
/* Instant-Kaffee: nur Text-Hinweis */
.bean-note{ margin:16px 0 0; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; color:var(--muted); }
.bean-note::before{ content:"+ "; color:var(--brick); font-weight:700; }
/* Sidefact unter den drei Nullen: dezent, nicht zu gross */
.lstg-sidefact{ margin:20px auto 0; text-align:center; font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; color:var(--muted); }
.lstg-sidefact strong{ color:var(--brick); font-weight:700; }

/* Flip-Karten im Produktbereich (Hover am Desktop, Tap am Touch) */
.flip-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:22px 0 0; }
.flip-card{ perspective:700px; aspect-ratio:3/2; cursor:pointer; }
.flip-card:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }
.flip-inner{ position:relative; width:100%; height:100%; transition:transform .5s var(--ease); transform-style:preserve-3d; }
.flip-card:hover .flip-inner, .flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-front, .flip-back{ position:absolute; inset:0; display:grid; place-items:center; padding:10px; text-align:center;
  -webkit-backface-visibility:hidden; backface-visibility:hidden; border:1px solid var(--rule); }
.flip-front{ background:var(--paper); }
.flip-back{ background:var(--ink); border-color:var(--ink); transform:rotateY(180deg); }
.fc-name{ font-family:var(--font-display); font-weight:500; font-size:14px; letter-spacing:-.01em; color:var(--ink); line-height:1.15; }
.fc-brand{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper); }
@media (prefers-reduced-motion:reduce){ .flip-inner{ transition:none; } }
@media (max-width:680px){ .flip-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(36px,5vw,84px); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-mono); font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.field label .req{ color:var(--brick); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:0; padding:12px 13px;
  transition:border-color .15s ease; width:100%;
}
.section--alt .field input, .section--alt .field select, .section--alt .field textarea{ background:var(--paper); }
.field textarea{ resize:vertical; min-height:104px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ink); }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{ display:inline-block; padding:9px 15px; border:1px solid var(--rule); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); cursor:pointer; transition:.12s ease; }
.chip input:checked + span{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.chip input:focus-visible + span{ outline:2px solid var(--brick); outline-offset:2px; }
.form-submit{ display:flex; align-items:center; gap:18px; margin-top:8px; flex-wrap:wrap; }
.form-note{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted); }
.form-success{ display:none; border:1px solid var(--ink); padding:clamp(28px,3vw,40px); }
.form-success.show{ display:block; }
.form-success .fs-mark{ width:40px; height:40px; margin-bottom:18px; }
.form-success h3{ font-family:var(--font-display); font-weight:500; font-size:24px; letter-spacing:-.02em; margin:0 0 8px; }

.contact-side{ }
.contact-side .cs-block{ padding:20px 0; border-top:1px solid var(--rule); }
.contact-side .cs-block:first-child{ border-top:none; padding-top:0; }
.contact-side .cs-l{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.contact-side .cs-v{ font-size:16px; line-height:1.5; }
.contact-side a.cs-v:hover{ color:var(--brick); }
.contact-side .cs-tel{ font-family:var(--font-mono); font-weight:500; font-size:19px; font-variant-numeric:tabular-nums; letter-spacing:.01em; }

/* ============================================================
   IMPRESSUM + FOOTER
   ============================================================ */
.impressum{ padding-block:clamp(48px,6vh,80px); border-top:1px solid var(--rule); background:var(--paper-dk); scroll-margin-top:calc(var(--nav-h) + 8px); }
.imp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.imp-col .ic-l{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.imp-col .ic-v{ font-size:14px; line-height:1.6; color:var(--ink); }
.imp-col .ic-v .pend{ color:var(--muted); font-style:italic; }
.imp-note{ margin-top:30px; font-size:12px; color:var(--muted); max-width:80ch; line-height:1.6; }

.site-footer{ background:var(--ink); color:var(--paper); padding-block:clamp(56px,7vh,88px); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.site-footer .wordmark{ font-size:30px; color:var(--paper); }
.foot-tagline{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,var(--paper) 55%, transparent); margin-top:16px; }
.foot-social{ display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 72%, transparent); transition:color .2s ease; }
.foot-social svg{ width:20px; height:20px; }
.foot-social:hover{ color:var(--brick); }
.foot-nav{ display:flex; gap:40px; flex-wrap:wrap; }
.foot-nav .fn-col{ display:flex; flex-direction:column; gap:11px; }
.foot-nav .fn-h{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb,var(--paper) 45%, transparent); margin-bottom:4px; }
.foot-nav a, .foot-nav span.fn-i{ font-size:14.5px; color:color-mix(in srgb,var(--paper) 80%, transparent); }
.foot-nav a:hover{ color:var(--brick); }
.foot-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(40px,6vh,64px); padding-top:24px; border-top:1px solid var(--ink-soft); }
.foot-bottom span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:color-mix(in srgb,var(--paper) 50%, transparent); }

/* ============================================================
   SCROLL REVEAL (gated on motion + reduced-motion)
   ============================================================ */
/* Dezenter Reveal — spürbar, nicht überladen. Re-triggert bei jedem Scroll (JS toggelt .in). */
html[data-motion="an"].reveal-ready .reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
html[data-motion="an"].reveal-ready .reveal.in{ opacity:1; transform:none; }
html[data-motion="an"].reveal-ready .reveal[data-d="1"]{ transition-delay:.06s; }
html[data-motion="an"].reveal-ready .reveal[data-d="2"]{ transition-delay:.12s; }
html[data-motion="an"].reveal-ready .reveal[data-d="3"]{ transition-delay:.18s; }
html[data-motion="an"].reveal-ready .reveal[data-d="4"]{ transition-delay:.24s; }
html[data-motion="an"].reveal-ready .reveal[data-d="5"]{ transition-delay:.30s; }
/* Hinweis: Reveals laufen bewusst auch bei prefers-reduced-motion (Betreiber-Wunsch). */

/* ============================================================
   CONSENT-CHECKBOX (DSGVO / Formspree) — brand-treu ergänzt
   ============================================================ */
.consent{ display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  font-size:13.5px; line-height:1.5; color:var(--muted); max-width:60ch; }
.consent input{ flex:0 0 20px; width:20px; height:20px; margin-top:1px; accent-color:var(--brick);
  border:1px solid var(--rule); cursor:pointer; }
.consent input:focus-visible{ outline:2px solid var(--brick); outline-offset:2px; }
.consent a{ color:var(--brick); text-decoration:underline; text-underline-offset:2px; }
.consent a:hover{ color:var(--deep); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  /* min-height + aspect-ratio leiteten die BREITE ab -> Overflow. Breite explizit fixieren. */
  .hero-visual{ aspect-ratio:4/3; min-height:0; width:100%; max-width:100%; order:-1; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .lstg{ grid-template-columns:1fr; gap:34px; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:40px 30px; }
  .vorteile .v-grid{ grid-template-columns:1fr; }
  .sort-panel{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .imp-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .hero{ padding-top:clamp(14px,2.5vh,26px); }   /* Abstand Header -> Hero-Bild verkleinern */
  .sort-figure{ max-width:206px; padding:clamp(6px,2vw,12px); }
  .bean-shots{ gap:clamp(10px,3.5vw,20px); justify-content:space-between; }
  .bean-shots img{ height:clamp(54px,13.5vw,72px); }
  .bean-shots figcaption{ font-size:9.5px; margin-top:7px; }
  .bean-note{ font-size:11.5px; }
  .nav-links{ display:none; }
  .nav-tel{ display:none; }
  .nav-toggle{ display:flex; flex:0 0 auto; }
  /* Header schrumpfbar machen: CTA wandert ins Burger-Menue, sonst overflow */
  .site-nav .container{ gap:12px; }
  .site-nav .wordmark{ font-size:20px; min-width:0; flex:0 1 auto; }
  .nav-actions{ flex:0 0 auto; }
  .nav-actions .btn--primary{ display:none; }
  .site-nav.nav-open .nav-links a.nav-cta-m{ display:block; margin-top:14px; padding:14px 20px; border-top:none; color:var(--paper); text-align:center; }
  .site-nav.nav-open .nav-links{ display:flex; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--rule); padding:6px var(--gutter) 18px; box-shadow:0 18px 40px -28px rgba(0,0,0,.4); }
  .site-nav.nav-open .nav-links a{ padding:14px 0; border-top:1px solid var(--rule); font-size:16px; }
  .site-nav.nav-open .nav-links a::after{ display:none; }
  .grid-3{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .imp-grid{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:1fr; gap:clamp(14px,3.5vw,20px); }
}

/* ============================================================
   INTERAKTION & ANIMATIONEN (Ergänzung) — nur Branding-Farben
   ============================================================ */

/* ---- Hero-Headline: Wörter fliegen ins Bild (page-load) ---- */
.hero-h1{ font-family:var(--font-display); font-weight:500; font-size:var(--hero);
  letter-spacing:-.035em; line-height:.98; margin:.32em 0 0; text-wrap:balance; }
.hero-h1 .hl-line{ display:block; }
.hero-h1 .hl-w{ display:inline-block; will-change:transform, opacity; }
.hero-h1 .hl-real{ color:var(--brick); }   /* Marken-Anspielung 'real' hervorheben */
/* Ausgangszustand nur mit JS (no-JS zeigt Text sofort); re-triggert via .in */
html.reveal-ready .hero-h1 .hl-w{
  opacity:0; transform:translateY(.5em);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .58s cubic-bezier(.22,.61,.36,1); }
html.reveal-ready .hero-h1.in .hl-w{ opacity:1; transform:none; }
html.reveal-ready .hero-h1.in .hl-line:nth-child(1) .hl-w:nth-child(1){ transition-delay:.03s; }
html.reveal-ready .hero-h1.in .hl-line:nth-child(1) .hl-w:nth-child(2){ transition-delay:.09s; }
html.reveal-ready .hero-h1.in .hl-line:nth-child(2) .hl-w:nth-child(1){ transition-delay:.15s; }
html.reveal-ready .hero-h1.in .hl-line:nth-child(2) .hl-w:nth-child(2){ transition-delay:.21s; }
/* Hinweis: Hero-Fly-in läuft bewusst auch bei prefers-reduced-motion (Betreiber-Wunsch). */

/* ---- Floating-Label-Felder (Schriftfeldverschiebung + Brick-Hervorhebung) ---- */
.field.float{ position:relative; display:block; gap:0; }
.field.float > input,
.field.float > select,
.field.float > textarea{
  width:100%; border:1px solid var(--rule); background:var(--paper); border-radius:0;
  font-family:var(--font-body); font-size:15.5px; color:var(--ink);
  padding:22px 13px 8px; transition:border-color .15s ease;
}
.field.float > textarea{ min-height:108px; resize:vertical; padding-top:24px; }
.field.float > label{
  position:absolute; left:13px; top:15px; margin:0; pointer-events:none;
  font-family:var(--font-mono); font-size:13.5px; letter-spacing:.01em; text-transform:none; color:var(--muted);
  transition:transform .15s cubic-bezier(.4,0,.2,1), color .15s ease, font-size .15s ease, letter-spacing .15s ease;
}
.field.float:focus-within > label,
.field.float.has-value > label{
  transform:translateY(-11px); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brick);
}
.field.float:focus-within > input,
.field.float:focus-within > select,
.field.float:focus-within > textarea{ outline:none; border-color:var(--brick); }
.field.float .req{ color:var(--brick); }
.field .static-label{ display:block; margin-bottom:10px;
  font-family:var(--font-mono); font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---- Auswahl-Chips: Pop-Bewegung beim Anwählen + Hover ---- */
.chip span{ transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
.chip span:hover{ border-color:var(--ink); }
.chip input:checked + span{ animation:pickPop .26s ease; }
.consent input{ transition:transform .12s ease; }
.consent input:checked{ animation:pickPop .26s ease; }
@keyframes pickPop{ 0%{transform:scale(1)} 42%{transform:scale(1.09)} 100%{transform:scale(1)} }

/* ---- Hover-Hervorhebung: Leistungs-Thumbnails (stärker) ---- */
.lstg .item .l-thumb{ position:relative; }
.lstg .l-thumb::after{ content:""; position:absolute; left:0; bottom:0; height:6px; width:0;
  background:var(--brick); z-index:3; transition:width .4s var(--ease); }
.lstg .item:hover .l-thumb::after{ width:100%; }

/* ---- Hero-Slideshow (Produktshots auf Weiss, Auto-Crossfade) ---- */
.hero-visual .slideshow{ position:absolute; inset:0; }
.hero-visual .slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .8s ease; }
.hero-visual .slide.is-active{ opacity:1; }
/* contain: Automat komplett sichtbar (Hochformat wird nicht beschnitten) */
.hero-visual .slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Bilder in Leistungs-Thumbnails + Sortiment ---- */
.lstg .l-thumb img,
.sort-figure img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Back-to-top (kantig, Ink → Brick, expandiert beim Hover) ---- */
.to-top{
  position:fixed; right:clamp(16px,3vw,30px); bottom:clamp(16px,3vw,30px); z-index:60;
  height:48px; width:48px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer; overflow:hidden; white-space:nowrap;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:width .3s var(--ease), background .2s ease, border-color .2s ease, opacity .25s ease, transform .25s ease;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top__icon{ width:15px; flex:0 0 auto; transition:transform .3s var(--ease); }
.to-top__icon path{ fill:currentColor; }
.to-top__label{ max-width:0; opacity:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:max-width .3s var(--ease), opacity .2s ease; }
.to-top:hover{ width:150px; background:var(--brick); border-color:var(--brick); }
.to-top:hover .to-top__icon{ transform:translateY(-3px); }
.to-top:hover .to-top__label{ max-width:110px; opacity:1; }
.to-top:focus-visible{ outline:2px solid var(--brick); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .to-top{ transition:opacity .2s ease; }
  .to-top__icon, .to-top__label{ transition:none; }
}