/* ══ Koch-Seite: Vergleichs-Slider und Vorstellung ══════ */
.chero--team{ min-height:0; }
.chero.chero--sub.chero--team{ min-height:0; }
.chero--team .chero__inner{ padding-block:clamp(72px,8vh,110px) clamp(24px,3vh,40px); }
.chero--team .display{ font-size:clamp(2.6rem,6.4vw,5.4rem); }
.chero--team .hero__lead{ max-width:54ch; }

.tsplit{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(26px,3.6vw,72px); align-items:center; padding-block:var(--sec);
}
.tsplit__text .pull{ margin-top:var(--flow-lg); }
.tyears{ margin-top:var(--flow-lg); display:flex; align-items:baseline; gap:.5em; }
.tyears b{ font-family:var(--serif); font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:1; color:var(--red); }
.tyears span{ font-size:var(--t-kicker); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* Vergleich: unten Kochjacke, darüber der Anzug, per clip-path beschnitten. */
.cmp{
  position:relative; margin:0; overflow:hidden; user-select:none;
  aspect-ratio:700/933; background:#0E0E11; border:1px solid var(--line);
  touch-action:pan-y;
}
.cmp img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.cmp__top{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.cmp__line{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px;
  background:var(--red); transform:translateX(-1px); pointer-events:none;
}
.cmp__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--red); border:2px solid #fff;
  display:grid; place-items:center;
}
.cmp__grip::before,.cmp__grip::after{
  content:""; position:absolute; width:0; height:0;
  border-block:5px solid transparent;
}
.cmp__grip::before{ border-right:7px solid #fff; left:10px; }
.cmp__grip::after { border-left:7px solid #fff;  right:10px; }

/* Der Regler liegt unsichtbar über dem Bild: Ziehen mit Maus, Finger
   und Pfeiltasten, ohne eigene Tastaturlogik. */
.cmp__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;
}
.cmp__range::-webkit-slider-thumb{ -webkit-appearance:none; width:56px; height:100%; cursor:ew-resize; }
.cmp__range::-moz-range-thumb{ width:56px; height:100%; border:0; background:transparent; cursor:ew-resize; }
/* Der Regler ist unsichtbar: sein Fokusrahmen (und der globale rote) wuerde
   als loser Kasten im Bild haengen. Stattdessen bekommt der Griff einen Ring,
   also das Element, das der Nutzer als Bedienteil sieht. */
.cmp__range:focus,.cmp__range:focus-visible{ outline:none; }
.cmp.is-focus .cmp__grip{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--red); }

.cmp__lab{
  position:absolute; bottom:14px; z-index:2; pointer-events:none;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  background:rgba(11,11,12,.62); padding:.5em .9em; backdrop-filter:blur(4px);
}
.cmp__lab--a{ left:14px; }
.cmp__lab--b{ right:14px; }
.cmp__hint{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:2;
  pointer-events:none; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.82); background:rgba(11,11,12,.5); padding:.45em .8em;
  transition:opacity .4s var(--ease);
}
.cmp.is-touched .cmp__hint{ opacity:0; }

.tbrand{ align-self:center; border-left:2px solid var(--red); padding-left:clamp(18px,2vw,30px); }
.tbrand__k{ font-size:var(--t-kicker); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.tbrand__h{ margin-top:.4em; font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.1; }
.tbrand__b{ margin-top:.6em; color:var(--muted); max-width:34ch; }

@media (max-width:1080px){
  .tsplit{ grid-template-columns:1fr; }
  .cmp{ max-width:520px; margin-inline:auto; }
}
@media (prefers-reduced-motion:reduce){
  .cmp__hint{ transition:none; }
}