/* Eigenes Designsystem der Seite "smart-case".
   Aus dem HTML-Prototyp uebernommen, erzeugt von
   werkzeug/bauen.py. Nicht von Hand aendern. */

/* =====================================================================
   Smart Case Landingpage (QR-Ziel Kofferdeckel, FAKUMA 2026)
   Eigenstaendige Seite. Bewusst NICHT im icotek-Rot, sondern in der
   Schwarz-Weiss-Anmutung der Lasermarkierung: der Scanner soll die
   Seite als dasselbe Objekt wiedererkennen, und keiner der vier
   Partner soll optisch vereinnahmt werden.
   Schrift, Radien (0) und Anti-KI-Leitplanken wie im Prototyp.
   ===================================================================== */
:root{
  --ink:#0a0a0a;
  --ink-soft:#3c3c3b;
  --ink-faint:#75746f;
  --paper:#ffffff;
  --paper-2:#f4f3f1;
  --paper-3:#e8e6e2;
  --line:#dcdad6;
  --line-dark:#33322f;
  --dark:#111110;
  --dark-2:#1c1b19;
  --dark-ink:#f4f3f1;
  --dark-soft:#a3a29d;
  --font:"Open Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --gutter:clamp(1.15rem,4vw,2.4rem);
  --sec-y:clamp(3.4rem,7vw,6rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:var(--font);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);margin:0 0 .6rem;line-height:1.12;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.1rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.45rem)}
h3{font-size:clamp(1.08rem,1.7vw,1.3rem);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1rem;max-width:42rem}
a{color:inherit}
img{max-width:100%;display:block;border-radius:0}
button{font:inherit;border-radius:0}
b,strong{font-weight:700;color:var(--ink)}
::selection{background:var(--ink);color:var(--paper)}

/* --- Sprachumschaltung: beide Sprachen liegen im Markup --- */
html[data-lang="de"] .l-en{display:none!important}
html[data-lang="en"] .l-de{display:none!important}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:840px}
.sec{padding:var(--sec-y) 0}
.sec--tight{padding:calc(var(--sec-y)*.62) 0}
.sec--paper{background:var(--paper-2)}
.sec--dark{background:var(--dark);color:var(--dark-soft)}
.sec--dark h2,.sec--dark h3{color:var(--dark-ink)}
.sec--dark b,.sec--dark strong{color:var(--dark-ink)}
.sec-head{margin-bottom:clamp(1.8rem,3.4vw,2.8rem)}
.sec-head p{color:var(--ink-faint);font-size:1.08rem;margin-bottom:0;max-width:52rem}
.sec--dark .sec-head p{color:var(--dark-soft)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* --- Sprachschalter --- */
.langbar{position:absolute;top:0;right:0;z-index:20;display:flex}
.langbar button{
  appearance:none;border:1px solid var(--line);border-top:0;border-right:0;
  background:var(--paper);color:var(--ink-faint);
  padding:.5rem .85rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease);
}
.langbar button:hover{color:var(--ink)}
.langbar button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.langbar button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* ---------------- HERO ---------------- */
.hero{position:relative;background:var(--paper);padding:clamp(3.2rem,7vw,5.4rem) 0 clamp(2.6rem,5vw,4rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:auto auto -30% -18%;
  width:min(72vw,780px);height:min(72vw,780px);
  background-image:radial-gradient(circle at center,var(--ink) 1.7px,transparent 1.9px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(ellipse at 24% 82%,#000 0%,rgba(0,0,0,.5) 40%,transparent 70%);
  mask-image:radial-gradient(ellipse at 24% 82%,#000 0%,rgba(0,0,0,.5) 40%,transparent 70%);
  opacity:.3;pointer-events:none;
}
.hero::after{
  content:"";position:absolute;top:clamp(1rem,6vw,4rem);right:clamp(-2rem,-1vw,0rem);
  width:min(38vw,300px);height:min(38vw,300px);
  background-image:radial-gradient(circle at center,var(--ink) 1.3px,transparent 1.5px);
  background-size:19px 19px;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 68%);
  mask-image:linear-gradient(200deg,#000 0%,transparent 68%);
  opacity:.22;pointer-events:none;
}
.hero .wrap{position:relative;z-index:2}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;
  font-size:.86rem;color:var(--ink-faint);margin-bottom:1.5rem;
  border-top:1px solid var(--line);padding-top:1rem;
}
.hero__meta .mark{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);font-weight:700}
.hero h1{max-width:16ch;margin-bottom:1.1rem}
.hero__lead{font-size:clamp(1.08rem,1.5vw,1.22rem);color:var(--ink-soft);max-width:46rem}


/* --- Claim-Kette (Zitat des Deckel-Layouts) --- */

/* ---------------- Stationen ---------------- */
.stations{display:grid;gap:0;border-top:1px solid var(--line)}
.station{
  display:grid;grid-template-columns:5.5rem 1fr minmax(0,20rem);
  gap:clamp(1rem,3vw,2.4rem);align-items:start;
  padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line);
}
.station__no{
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1;padding-top:.15rem;
}
.station__claim{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:0 0 .45rem;line-height:1.1}
.station__claim em{font-style:normal;font-weight:400}
.station__co{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;margin-bottom:.9rem}
.station__co b{font-size:1rem}
.station__co small{font-size:.86rem;color:var(--ink-faint)}
.station p{margin-bottom:.7rem;max-width:38rem}
.station__aside{border-left:1px solid var(--line);padding-left:clamp(1rem,2vw,1.6rem)}
.station__role{font-size:.84rem;color:var(--ink-faint);margin:0 0 .8rem}

/* Link mit Pfeil */
.arrowlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
  transition:gap .2s var(--ease),opacity .2s var(--ease);
}
.arrowlink svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:square}
.arrowlink:hover{gap:.75rem}
.sec--dark .arrowlink{color:var(--dark-ink);border-color:var(--dark-ink)}

/* ---------------- SEE THE DIFFERENCE ---------------- */
.feel{padding:clamp(2.6rem,6vw,4.6rem) 0;text-align:left}
.feel__word{
  font-size:clamp(1.7rem,6.4vw,4.6rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.05;color:var(--dark-ink);margin:0 0 1.4rem;white-space:nowrap;
  overflow-x:auto;padding-bottom:.4rem;
}
.feel__word .pre{opacity:.42;font-weight:400}
.feel__word i{font-style:normal;display:inline-block}
/* kontrastarm -> kontraststark */
.feel__word i:nth-child(1){opacity:.20;text-shadow:none}
.feel__word i:nth-child(2){opacity:.29}
.feel__word i:nth-child(3){opacity:.38}
.feel__word i:nth-child(4){opacity:.48;text-shadow:0 1px 0 rgba(255,255,255,.10)}
.feel__word i:nth-child(5){opacity:.58;text-shadow:0 1px 1px rgba(255,255,255,.14)}
.feel__word i:nth-child(6){opacity:.68;text-shadow:0 1px 2px rgba(255,255,255,.18)}
.feel__word i:nth-child(7){opacity:.78;text-shadow:0 2px 3px rgba(255,255,255,.22)}
.feel__word i:nth-child(8){opacity:.87;text-shadow:0 2px 5px rgba(255,255,255,.28)}
.feel__word i:nth-child(9){opacity:.94;text-shadow:0 3px 7px rgba(255,255,255,.34)}
.feel__word i:nth-child(10){opacity:1;text-shadow:0 3px 10px rgba(255,255,255,.42),0 1px 0 rgba(255,255,255,.5)}
.feel__scale{
  display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line-dark);padding-top:.7rem;
  font-size:.8rem;color:var(--dark-soft);max-width:min(100%,52rem);
}

/* Effekt-Karten */
.effects{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);margin-top:clamp(2rem,4vw,3rem)}
.effect{background:var(--dark);padding:clamp(1.2rem,2.4vw,1.7rem)}
.effect__swatch{height:74px;margin-bottom:1rem;border:1px solid var(--line-dark);position:relative;overflow:hidden;background:#2a2926}
.effect__swatch--engrave::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0a0a0a 0 2px,transparent 2px 7px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.effect__swatch--carbon::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2a2926 0%,#151412 45%,#0a0a0a 100%)}
.effect__swatch--foam::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#3a3936 0%,#8f8d87 55%,#e6e4df 100%);box-shadow:inset 0 -2px 4px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.25)}
.effect h3{margin-bottom:.4rem}
.effect p{font-size:.94rem;margin:0;color:var(--dark-soft)}

/* Musterfeld */
.field{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2rem);margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.field__cell h4{font-size:.9rem;font-weight:700;color:var(--dark-ink);margin:0 0 .55rem;letter-spacing:0}
.field__cell p{font-size:.87rem;margin:.55rem 0 0;color:var(--dark-soft)}
.field__photo{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line-dark)}
.deckel-foto{margin:clamp(1.6rem,3.2vw,2.4rem) 0 0}
.deckel-foto img{display:block;width:100%;max-width:52rem;height:auto;border:1px solid var(--line-dark)}
.deckel-foto figcaption{margin-top:.6rem;font-size:.84rem;color:var(--dark-soft)}
.field__demo{height:56px;border:1px solid var(--line-dark);display:flex}
.field__demo i{flex:1;display:block}
.res i:nth-child(1){background:repeating-linear-gradient(90deg,#e6e4df 0 5px,#111110 5px 10px)}
.res i:nth-child(2){background:repeating-linear-gradient(90deg,#e6e4df 0 3px,#111110 3px 6px)}
.res i:nth-child(3){background:repeating-linear-gradient(90deg,#e6e4df 0 2px,#111110 2px 4px)}
.res i:nth-child(4){background:repeating-linear-gradient(90deg,#e6e4df 0 1px,#111110 1px 2px)}
.cplx i:nth-child(1){background:linear-gradient(90deg,#111110 0 60%,#e6e4df 60%)}
.cplx i:nth-child(2){background:repeating-linear-gradient(90deg,#e6e4df 0 4px,#111110 4px 8px)}
.cplx i:nth-child(3){background:repeating-linear-gradient(45deg,#e6e4df 0 3px,#111110 3px 6px)}
.cplx i:nth-child(4){background:repeating-conic-gradient(#e6e4df 0 25%,#111110 0 50%) 0 0/6px 6px}
.grey i:nth-child(1){background:#111110}
.grey i:nth-child(2){background:#3d3c39}
.grey i:nth-child(3){background:#6d6b66}
.grey i:nth-child(4){background:#a6a49e}
.grey i:nth-child(5){background:#e6e4df}
.foam i:nth-child(1){background:#26251f}
.foam i:nth-child(2){background:#5b594f;box-shadow:inset 0 1px 2px rgba(255,255,255,.10)}
.foam i:nth-child(3){background:#95928a;box-shadow:inset 0 2px 4px rgba(255,255,255,.20)}
.foam i:nth-child(4){background:#e6e4df;box-shadow:inset 0 3px 7px rgba(255,255,255,.55),inset 0 -2px 4px rgba(0,0,0,.30)}

/* ---------------- Produkt ---------------- */
.product{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.product__media{background:var(--paper);border:1px solid var(--line);padding:clamp(1.2rem,3vw,2.2rem)}
.product__media img{margin:0 auto;max-height:420px;width:auto;object-fit:contain}
.facts{list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--line)}
.facts li{display:flex;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.facts li b{flex:0 0 9.5rem;color:var(--ink);font-weight:700}
.facts li span{color:var(--ink-soft)}


/* ---------------- Kontakt ---------------- */
.contacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);margin-top:clamp(1.6rem,3vw,2.4rem)}
.contact{background:var(--dark-2);padding:clamp(1.1rem,2.2vw,1.5rem);display:flex;flex-direction:column;gap:.5rem}
.contact b{color:var(--dark-ink);font-size:1rem;line-height:1.25}
.contact small{color:var(--dark-soft);font-size:.84rem;display:block}
.contact .arrowlink{margin-top:auto;font-size:.9rem;align-self:flex-start}

/* ---------------- Hinweise / Platzhalter ---------------- */
.note{
  border:1px dashed var(--line);background:var(--paper-2);
  padding:.8rem 1rem;font-size:.86rem;color:var(--ink-faint);margin:1.4rem 0 0;max-width:44rem;
}
.sec--dark .note{border-color:var(--line-dark);background:var(--dark-2);color:var(--dark-soft)}

/* ---------------- Footer ---------------- */
.foot{background:var(--paper-2);border-top:1px solid var(--line);padding:2.2rem 0}
.foot__grid{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;font-size:.86rem;color:var(--ink-faint)}
.foot__grid nav{display:flex;flex-wrap:wrap;gap:1.1rem}
.foot__grid a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid transparent}
.foot__grid a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.foot__brand{max-width:34rem}
.foot__brand b{color:var(--ink)}


/* --- Partnerlogos --- */
.logostrip{margin-top:clamp(1.6rem,3.2vw,2.4rem);border-top:1px solid var(--line);padding-top:1.1rem}
.logostrip--foot{margin-top:0;border-top:0;padding-top:0}
.sec--logos{padding:calc(var(--sec-y)*.7) 0}
.logostrip__label{font-size:.82rem;color:var(--ink-faint);margin:0 0 1rem}
.logostrip__row{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem clamp(1.4rem,3.4vw,2.8rem)}
.lg{display:flex;align-items:center;height:44px}
.lg img{width:auto;display:block}
.lg--ml  img{height:40px}
.lg--gc  img{height:25px}
.lg--ico img{height:34px}
.lg--bl  img{height:29px}
.lg--wero img{height:30px}
.plogo{
  border:1px solid var(--line);background:var(--paper);
  padding:1rem 1.1rem;display:flex;align-items:center;min-height:78px;
}
.plogo img{width:auto;display:block}
.plogo--ml  img{height:54px}
.plogo--gc  img{height:32px}
.plogo--ico img{height:46px}
.plogo--bl  img{height:38px}

/* --- Messestand --- */
.fair{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.fair__main,.fair__aside{background:var(--paper);padding:clamp(1.3rem,2.8vw,2rem)}
.fair__aside{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:.4rem 2.4rem;align-items:start}
.fair__aside h3{margin:0}
.fair__logo{display:flex;align-items:center;height:56px;margin-bottom:1.1rem}
.fair__logo img{width:auto;display:block}
.fair__logo--ml img{height:52px}
.fair__logo--gc img{height:32px}
.fair__logo--bl img{height:38px}
.fair__loc{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;margin:.2rem 0 1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.8rem 0}
.fair__loc b{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fair__loc span{font-size:.92rem;color:var(--ink-faint)}
.fair__aside{background:var(--paper-3)}
.fair__aside p:last-child{margin-bottom:0}

/* --- WERO-Zeile im Produktabschnitt --- */
.weromark{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem 0;margin:0 0 1.4rem}
.weromark img{height:56px;width:auto;display:block}
.weromark small{font-size:.82rem;color:var(--ink-faint)}

/* ---------------- Reveal ---------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------------- Responsive ---------------- */
@media (max-width:980px){
  .station{grid-template-columns:3.6rem 1fr}
  .station__aside{grid-column:2/-1;border-left:0;padding-left:0;padding-top:.4rem}
  .product{grid-template-columns:1fr}
  .contacts{grid-template-columns:repeat(2,1fr)}
  .fair{grid-template-columns:1fr}
  .fair__aside{grid-template-columns:1fr;gap:0}
  .fair__aside h3{margin:0 0 .5rem}
  .effects{grid-template-columns:1fr}
  .field{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero::before{display:none}
  .hero::after{opacity:.16}
}
@media (max-width:620px){
  .station{grid-template-columns:1fr;gap:.4rem}
  .station__no{padding-top:0}
  .contacts{grid-template-columns:1fr}
  .facts li{flex-direction:column;gap:.1rem}
  .facts li b{flex:none}
  .feel__scale{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition-duration:.01ms!important}
}