/* ==========================================================================
   KLINGE — 01-base.css · Reset, Typografie, Bausteine, Motion-Grundlagen
   Sektionsdateien benutzen diese Klassen, überschreiben sie aber nie.
   ========================================================================== */

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;           /* Lenis übernimmt das Scrollen */
  background: var(--c-coal);
}

body {
  min-height: 100svh;
  background: var(--c-coal);
  color: var(--t-strong);
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p, h1, h2, h3, h4, li, dd, dt, figcaption { overflow-wrap: break-word; }
::selection { background: var(--c-signal); color: #fff; }

:focus-visible {
  outline: 2px solid var(--c-signal);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---- Typografie ---------------------------------------------------------- */
.display, .h1, .h2 {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--lh-blade);
  letter-spacing: 0.002em;
  color: var(--t-strong);
  text-wrap: balance;
}
.display { font-size: var(--fs-display); }
.h1      { font-size: var(--fs-h1); }
.h2      { font-size: var(--fs-h2); }

.h3, .h4 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: 0.012em;
  color: var(--t-strong);
}
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.54;
  color: var(--t-body);
  max-width: 48ch;
  text-wrap: pretty;
}
.body-text { color: var(--t-body); max-width: var(--maxw-text); text-wrap: pretty; }
.small     { font-size: var(--fs-sm); color: var(--t-body); }

/* Mono-Mikrolabel — trägt die halbe Markenstimme */
.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--t-muted);
  line-height: 1;
}
.num {
  font-family: var(--f-mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--t-strong);
}

/* Eyebrow: rechteckiger Tab mit Signalpunkt (kein Pillen-Badge) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.7rem 0.42rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--t-muted);
  line-height: 1.35;
  white-space: nowrap;
}
/* Auf schmalen Geräten darf das Label umbrechen statt aus der Fassung zu laufen */
@media (max-width: 560px) {
  .eyebrow { white-space: normal; }
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--c-signal);
  flex: none;
}

/* ---- Layout -------------------------------------------------------------- */
.section { padding-block: var(--sp-section); position: relative; }
.section--tight { padding-block: calc(var(--sp-section) * 0.6); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: 1680px; }
.container--narrow { max-width: 1000px; }

.rule { height: 1px; background: var(--line); border: 0; }

/* Barber-Streifen als Trennkante — sparsam einsetzen */
.rule--stripe {
  height: 4px;
  background: var(--stripe);
  opacity: 0.85;
  border: 0;
}

.sec-head { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---- Doppelrand: Schale + konzentrischer Kern ---------------------------- */
.panel {
  padding: var(--bezel);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.panel__core {
  border-radius: var(--r-core);
  background: var(--c-steel);
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--edge);
}
.on-light .panel__core { background: var(--c-chalk-warm); }

/* Medienrahmen */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-core);
  background: var(--c-steel);
}
.frame::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: inherit;
  pointer-events: none;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* Bildveredelung: kühles Monochrom, Farbe erst beim Hover */
.tone {
  filter: grayscale(1) contrast(1.12) brightness(0.94);
  transition: filter var(--d-epic) var(--e-sleek), transform var(--d-epic) var(--e-sleek);
}
.tone-hover:hover .tone, .tone-hover:focus-visible .tone {
  filter: grayscale(0.12) contrast(1.04) brightness(1);
}
/* Warme Variante für Werkstatt-/Interieurbilder */
.tone--warm { filter: grayscale(0.72) sepia(0.16) contrast(1.1) brightness(0.95); }

/* ---- Buttons: Pille mit eingefasstem Icon -------------------------------- */
.btn {
  --btn-bg: var(--c-chalk);
  --btn-fg: var(--c-coal);
  --btn-nest: rgba(18, 18, 20, 0.10);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.55rem 0.55rem 1.35rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform var(--d-base) var(--e-sleek), background-color var(--d-base) var(--e-sleek),
              box-shadow var(--d-base) var(--e-sleek), color var(--d-base) var(--e-sleek);
  will-change: transform;
}
.btn__nest {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--btn-nest);
  flex: none;
  transition: transform var(--d-base) var(--e-back), background-color var(--d-base) var(--e-sleek);
}
.btn__nest svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.25; fill: none; }
.btn:hover { box-shadow: var(--shadow-md); }
.btn:hover .btn__nest { transform: translate3d(3px, -2px, 0) scale(1.06); }
.btn:active { transform: scale(0.978); }

.btn--signal { --btn-bg: var(--c-signal); --btn-fg: #fff; --btn-nest: rgba(255, 255, 255, 0.22); }
.btn--signal:hover { --btn-bg: var(--c-signal-lite); }
.btn--signal:hover .btn__nest { background: rgba(255, 255, 255, 0.34); }

.btn--dark { --btn-bg: var(--c-steel-lift); --btn-fg: var(--t-strong); --btn-nest: rgba(242, 239, 233, 0.12); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--t-strong);
  --btn-nest: var(--surface-deep);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-sm); }

.btn--sm { padding: 0.42rem 0.42rem 0.42rem 1rem; font-size: var(--fs-xs); gap: 0.55rem; }
.btn--sm .btn__nest { width: 1.7rem; height: 1.7rem; }

/* Textlink mit Unterstrich-Wischer */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--t-strong);
  padding-block: 2px;
}
.link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-base) var(--e-sleek);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }
.link svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.25; fill: none; }

/* ---- Statuspunkt (Öffnungsstatus, Wartezeit) ----------------------------- */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-signal);
  flex: none;
  position: relative;
}
.dot--live::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--c-signal);
  opacity: 0.6;
  animation: dot-pulse 2.6s var(--e-sleek) infinite;
}
@keyframes dot-pulse {
  0%   { transform: scale(0.7); opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---- Endlosband ---------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  display: flex;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  flex: none;
  min-width: 100%;
  gap: var(--sp-5);
  align-items: center;
  animation: marquee var(--marquee-dur, 42s) linear infinite;
  will-change: transform;
}
@keyframes marquee { to { transform: translate3d(-100%, 0, 0); } }

/* ---- Scroll-Reveal (Vertrag mit js/main.js) ------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  filter: blur(7px);
  transition:
    opacity var(--d-slow) var(--e-expo) var(--reveal-delay, 0ms),
    transform var(--d-epic) var(--e-expo) var(--reveal-delay, 0ms),
    filter var(--d-slow) var(--e-expo) var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); will-change: auto; }
[data-reveal='fade']  { transform: none; }
[data-reveal='scale'] { transform: scale(0.965); }
[data-reveal='left']  { transform: translate3d(-26px, 0, 0); }
[data-reveal='right'] { transform: translate3d(26px, 0, 0); }

/* Zeilenmasken für große Headlines: <span class="line"><span>…</span></span> */
.line { display: block; overflow: hidden; padding-block: 0.055em; }
.line > span {
  display: block;
  transform: translate3d(0, 106%, 0);
  transition: transform var(--d-epic) var(--e-expo) var(--reveal-delay, 0ms);
  will-change: transform;
}
.is-in .line > span, .line.is-in > span { transform: translate3d(0, 0, 0); will-change: auto; }

/* Sicherheitsnetz ohne JavaScript: js/main.js setzt .is-ready am <html> */
html:not(.is-ready) [data-reveal] { animation: reveal-rescue var(--d-base) var(--e-expo) 2400ms forwards; }
html:not(.is-ready) .line > span  { animation: line-rescue var(--d-base) var(--e-expo) 2400ms forwards; }
@keyframes reveal-rescue { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes line-rescue   { to { transform: none; } }

/* ---- Auftakt: Die Klinge trennt den Vorhang ------------------------------
   js/main.js setzt .is-intro am <html> und später .is-intro-out. Der Vorhang
   besteht aus zwei Hälften, die auseinanderfahren — der Schnitt als Metapher. */
.intro { display: none; }
html.is-intro .intro {
  display: block;
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}
html.is-intro body { overflow: hidden; }

.intro__pane {
  position: absolute;
  left: 0; right: 0;
  background: var(--c-coal);
  transition: transform 900ms var(--e-expo);
  will-change: transform;
}
.intro__pane--top    { top: 0; height: 50%; }
.intro__pane--bottom { bottom: 0; height: 50%; }
html.is-intro-out .intro__pane--top    { transform: translate3d(0, -101%, 0); }
html.is-intro-out .intro__pane--bottom { transform: translate3d(0, 101%, 0); }

.intro__core {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.1rem;
  transition: opacity 340ms var(--e-sleek), transform 620ms var(--e-expo);
}
html.is-intro-out .intro__core { opacity: 0; transform: scale(0.965); }

.intro__meta {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--t-muted);
  opacity: 0;
  animation: intro-letter 620ms var(--e-expo) 520ms forwards;
}

.intro__mark {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 14vw, 10rem);
  letter-spacing: 0.012em;
  line-height: 1;
  display: flex;
  color: var(--t-strong);
}
.intro__mark > span {
  display: block;
  opacity: 0;
  transform: translate3d(0, 40%, 0);
  animation: intro-letter 620ms var(--e-expo) forwards;
}
.intro__mark > span:nth-child(1) { animation-delay: 60ms; }
.intro__mark > span:nth-child(2) { animation-delay: 130ms; }
.intro__mark > span:nth-child(3) { animation-delay: 200ms; }
.intro__mark > span:nth-child(4) { animation-delay: 270ms; }
.intro__mark > span:nth-child(5) { animation-delay: 340ms; }
.intro__mark > span:nth-child(6) { animation-delay: 410ms; }
@keyframes intro-letter { to { opacity: 1; transform: none; } }
/* Der Schnitt: eine rote Linie fährt durch die Mitte und bleibt als Fuge stehen */
.intro__blade {
  position: absolute;
  left: 0; right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--c-signal);
  box-shadow: 0 0 22px -2px rgba(255, 74, 46, 0.75);
  transform: scaleX(0);
  transform-origin: left;
  animation: intro-blade 620ms var(--e-blade, cubic-bezier(0.76, 0, 0.24, 1)) 300ms forwards;
}
@keyframes intro-blade { to { transform: scaleX(1); } }
html.is-intro-out .intro__blade {
  transition: opacity 300ms var(--e-sleek), transform 900ms var(--e-expo);
  opacity: 0;
  transform: scaleX(1) scaleY(6);
}

@media (prefers-reduced-motion: reduce) {
  html.is-intro .intro { display: none; }
  .marquee__track { animation: none; }
  .dot--live::after { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Filmkorn (fix, klickdurchlässig) ------------------------------------ */
.grain {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---- Hilfsklassen -------------------------------------------------------- */
.u-center  { text-align: center; }
.u-signal  { color: var(--c-signal); }
.u-nowrap  { white-space: nowrap; }
.u-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: 50%; top: 0;
  transform: translate3d(-50%, -140%, 0);
  z-index: var(--z-modal);
  background: var(--c-signal);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: transform var(--d-fast) var(--e-expo);
}
.skip-link:focus-visible { transform: translate3d(-50%, 0, 0); }

/* ---- Mobil --------------------------------------------------------------- */
@media (max-width: 767px) {
  .lead { max-width: none; }
  .btn { padding: 0.6rem 0.6rem 0.6rem 1.25rem; }
  .btn__nest { width: 2.2rem; height: 2.2rem; }
}