/* ==========================================================================
   Spedition Nickles · Konzeptentwurf Startseite
   Silberschmidt Media · Tokens 1:1 aus dem Figma-Layout „Nickles Tokens“
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Farben */
  --paper:        #f4f4f0;
  --ink:          #111111;
  --ink-deep:     #1c272c;  /* Header */
  --grey:         #3f3f3f;
  --accent:       #ed701e;
  --accent-light: #ff8a3d;  /* Akzent auf dunklem Grund, 5,7:1 */
  --blue:         #1a304d;
  --light:        #efefef;
  --white:        #ffffff;

  /* Schrift. Arial Black als fette Rückfallebene, damit die Display-Typografie
     auch ohne Google Fonts (Blocker, Offline-Vorführung) schwer bleibt. */
  --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "Archivo", Helvetica, Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type-Scale, fluid zwischen 320 px und 1440 px (Figma-Werte als Maximum) */
  --t-display-xl: clamp(2.125rem, 0.938rem + 5.94vw, 7rem);       /*  34 → 112 */
  --t-display-l:  clamp(1.375rem, 0.741rem + 3.17vw, 4rem);       /*  22 →  64 */
  --t-display-m:  clamp(1.5rem, 1.161rem + 1.7vw, 2.5rem);        /*  24 →  40 */
  --t-h3:         clamp(1.188rem, 1.116rem + 0.36vw, 1.5rem);     /*  19 →  24 */
  --t-body:       clamp(1rem, 0.972rem + 0.14vw, 1.125rem);       /*  16 →  18 */
  --t-body-s:     clamp(0.938rem, 0.916rem + 0.094vw, 1rem);      /*  15 →  16 */
  --t-mono:       clamp(0.75rem, 0.728rem + 0.094vw, 0.813rem);   /*  12 →  13 */
  --t-mono-xs:    clamp(0.625rem, 0.603rem + 0.094vw, 0.688rem);  /*  10 →  11 */

  /* Raster und Abstände */
  --page-max:     1440px;
  --gutter:       clamp(1.25rem, 5.56vw, 5rem);   /*  20 →  80 */
  --sec-y:        clamp(3.5rem, 7.22vw, 6.5rem);  /*  56 → 104 */
  --cell-pad:     clamp(1.25rem, 1.95vw, 1.75rem);/*  20 →  28 */
  --stack:        clamp(1.5rem, 2.78vw, 2.5rem);  /*  24 →  40 */
  --hair:         1px;
  --focus:        var(--ink);   /* wird auf dunklen Flächen umgeschaltet */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.5;
  /* Netz gegen versehentlichen Seitenüberlauf. Die Bühnen, die bewusst
     überstehen (Hero-Bild, Störer), klippen selbst. */
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

/* ---------- Bausteine ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.line { display: block; }
.line__in { display: block; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
}
.skip-link:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
main:focus { outline: none; }

/* Deutsche Komposita in Display-Größen: Trennung nur als Netz, wenn ein Wort
   sonst über die Zeile hinausläuft (greift erst unter rund 340 px). */
.hero__title,
.services__title,
.heritage__title,
.handoff__title,
.service__title {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.icon--arrow { width: 1.35em; height: 1.35em; }
.icon--glyph { width: 30px; height: 30px; }
.icon--mail { width: 20px; height: 14px; fill: none; }

/* Buttons und Textlinks */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  padding: 1rem 1.75rem;
  border: 2px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  overflow-wrap: anywhere;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.btn--ink { color: var(--ink); }
.btn--accent { color: var(--accent-light); }
.btn--offen { cursor: default; }

/* Rückmeldung: Hover nur auf Zeigergeräten, :active quittiert den Tap. */
@media (hover: hover) {
  .btn--ink:hover { background: var(--ink); color: var(--paper); }
  .btn--accent:hover { background: var(--accent-light); color: var(--blue); }
  .btn--offen:hover { background: none; color: var(--accent-light); }
  a.site-nav__link:hover { color: var(--accent-light); }
}
.btn--ink:focus-visible,
a.btn--ink:active { background: var(--ink); color: var(--paper); }
.btn--accent:focus-visible { background: var(--accent-light); color: var(--blue); }
.btn--offen:active { background: none; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.textlink--offen {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: default;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: var(--ink-deep);
  border-bottom: var(--hair) solid var(--ink);
  color: var(--white);
  position: relative;
  z-index: 20;
  --focus: var(--light);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(0.875rem, 1.67vw, 1.5rem);
}
.site-header__logo { display: block; flex: none; }
.site-header__logo img {
  width: clamp(104px, 10.2vw, 146px);
  height: auto;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.site-nav__link {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  white-space: nowrap;
}
a.site-nav__link { transition: color 0.2s ease; }
.site-nav__link--offen { cursor: default; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars span { display: block; height: 2px; background: currentColor; }

@media not all and (min-width: 60rem) {
  html:not(.no-js) .nav-toggle { display: inline-flex; }
  html:not(.no-js) .site-header__bar { flex-wrap: wrap; }
  html:not(.no-js) .site-nav {
    flex-basis: 100%;
    display: none;
    padding-block: 0.25rem 0.75rem;
  }
  html:not(.no-js) .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; gap: 0; }
  /* Touchziel mindestens 44 px hoch */
  .site-nav__link { display: block; padding-block: 0.8rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.speedlines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.speedlines line {
  stroke: var(--accent);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Auf schmalen Geräten skaliert das Feld hoch und wird dichter: dort etwas
   zurücknehmen, damit es Zierelement bleibt und nicht in die Copy drängt. */
@media not all and (min-width: 48rem) {
  .speedlines { opacity: 0.7; }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack);
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6.11vw, 5.5rem);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-xl);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
/* Maske für die zeilenweise Enthüllung. Padding plus negativer Rand
   verhindert, dass Ober- und Unterlängen beschnitten werden. */
.hero__title .line,
.services__title .line,
.heritage__title .line {
  overflow: hidden;
  padding-block: 0.06em;
  margin-block: -0.06em;
}
.hero__lead {
  max-width: 35rem;
  color: var(--grey);
}

/* Bildbühne: 19,68 % breiter als die Seite und links verankert wie im Layout,
   randlos bis zur Kante. Die Höhe ist beim Layoutwert 850 px gedeckelt, sonst
   wüchse der Hero auf breiten Monitoren ins Endlose und die Zahl verlöre ihre
   Lage an der Bildkante. */
.hero__media {
  position: relative;
  z-index: 1;
  width: 119.68%;
  aspect-ratio: 1723.5 / 849.8;
  max-height: 850px;
}
.hero__frame {
  height: 100%;
  overflow: hidden;
}
.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
}
/* An der Bildbühne verankert, nicht am Viewport: so bleibt das Verhältnis von
   Zahl, Bildkante und Fahrzeug bei jeder Breite wie im Layout.
   Unterkante 587/849,8 = 69,08 % der Bühnenhöhe.
   Rechte Kante soll 34,8 px hinter der SEITENkante liegen; die Bühne ist
   19,68 % breiter, der Abstand zu ihrer rechten Kante ist damit
   (1,1968 − 1,02417)/1,1968 = 14,42 % der Bühnenbreite. */
.hero__monument {
  position: absolute;
  right: 14.42%;
  bottom: 69.08%;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(28.167vw, 406px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
  white-space: nowrap;
}

@supports not (aspect-ratio: 1 / 1) {
  .hero__media { min-height: 42vw; }
  .heritage__media { min-height: 62vw; }
}

/* ==========================================================================
   Leistungen
   ========================================================================== */
.services { padding-block: var(--sec-y); }
.services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 3.33vw, 3rem);
  margin-bottom: clamp(2rem, 3.89vw, 3.5rem);
}
.services__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-l);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.services__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hair);
  background: var(--ink);
  border: var(--hair) solid var(--ink);
}
/* Wisch-Fläche des Reveals. Wird von JS eingehängt und danach entfernt. */
.services__wipe {
  position: absolute;
  inset: -1px;
  z-index: 2;
  background: var(--paper);
  transform-origin: 100% 50%;
  pointer-events: none;
}
.services__figure { margin: 0; }
.services__figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: var(--cell-pad);
  background: var(--paper);
}
.service__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.service__title {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
}
.service__text {
  font-size: var(--t-body-s);
  color: var(--grey);
}

@media (min-width: 48rem) {
  .services__grid { grid-template-columns: 1fr 1fr; }
  .services__figure { grid-column: 1 / -1; }
  .services__figure img { aspect-ratio: 21 / 9; }
}
@media (min-width: 80rem) {
  .services__grid { grid-template-columns: minmax(0, 460fr) minmax(0, 408fr) minmax(0, 408fr); }
  .services__figure { grid-column: 1; grid-row: 1 / span 3; }
  .services__figure img { aspect-ratio: auto; }
}

/* ==========================================================================
   Signatur: Familienbetrieb seit 1926
   ========================================================================== */
.heritage {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--blue);
  color: var(--light);
  --focus: var(--accent-light);
}
.heritage__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 1.94vw, 1.75rem);
  padding: var(--sec-y) var(--gutter);
}
.heritage__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-m);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.heritage__lead { max-width: 35rem; }
/* overflow: hidden ist Pflicht, sonst tritt das Parallax-Bild aus der Sektion aus. */
.heritage__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 648 / 522;
}
.heritage__media img { width: 100%; height: 100%; object-fit: cover; }
/* Blauer Vorhang des Reveals, von JS eingehängt. */
.heritage__curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--blue);
  transform-origin: 0% 50%;
  pointer-events: none;
}

@media (min-width: 64rem) {
  /* Kein Padding auf der Sektion: nur so lösen die 45 % gegen die volle
     Sektionsbreite auf und die Bildspalte wird 648 px breit wie im Layout. */
  .heritage {
    grid-template-columns: minmax(0, 1fr) 45%;
    align-items: center;
    column-gap: clamp(2rem, 4.44vw, 4rem);
  }
  .heritage__text { padding: var(--sec-y) 0 var(--sec-y) var(--gutter); }
  .heritage__media { align-self: stretch; aspect-ratio: auto; min-height: 100%; }
}

/* ==========================================================================
   Vorschau endet
   ========================================================================== */
.handoff {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  min-height: clamp(17.5rem, 26.4vw, 23.75rem);
  padding-block: clamp(3.5rem, 6.11vw, 5.5rem) clamp(1.25rem, 2.43vw, 2.19rem);
}
.handoff__preview {
  position: relative;
  opacity: 0.45;
}
.handoff__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-l);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.handoff__lead { margin-top: 1.5rem; color: var(--grey); }
.handoff__veil {
  position: absolute;
  inset: 2.5rem 0 0;
  background: linear-gradient(to bottom, rgba(244, 244, 240, 0) 0%, var(--paper) 85%);
  pointer-events: none;
}
/* Im Fluss statt absolut: nur so greift die zentrierte .wrap-Spalte oberhalb 1440 px. */
.handoff__note {
  position: relative;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Pflicht-Abschluss: Silberschmidt Media
   ========================================================================== */
.pitch {
  border-top: var(--hair) solid var(--ink);
  padding-block: clamp(3rem, 6.11vw, 5.5rem) clamp(3.5rem, 7.22vw, 6.5rem);
}
.pitch__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4.44vw, 4rem);
}
.pitch__photo { display: flex; flex-direction: column; gap: 0.875rem; }
.pitch__photo img { width: min(264px, 60vw); height: auto; }
.pitch__photo figcaption { font-size: var(--t-body-s); }
.pitch__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.375rem;
}
.pitch__eyebrow-link {
  display: inline-block;
  padding-block: 0.25rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.pitch__title {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
}
.pitch__lead { color: var(--grey); }
.pitch__fine {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
/* Auf Mobil zuerst der Absender, dann das Porträt: der Satz erklärt den Wechsel. */
@media not all and (min-width: 48rem) {
  .pitch__photo { order: 2; }
}
@media (min-width: 48rem) {
  .pitch__inner { grid-template-columns: 264px minmax(0, 1fr); }
}

/* ==========================================================================
   Recruiting-Störer, fix am Seitenrand
   Bis 72rem als flache Pille unten rechts: erst darüber ist der Außenrand
   breit genug, dass die hochkante Fahne nicht in die Textspalte greift.
   ========================================================================== */
.stoerer {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0.625rem 0.875rem;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 72rem) {
  /* Höhe wie im Layout (dort y 125 bis 456), nicht mittig: so trifft die Fahne
     die angeschnittene Monument-„100“ im Ruhezustand nicht. Die Ink-Haarlinie
     hält die Kante lesbar, wenn die Zahl beim Scrollen dahinter durchläuft. */
  .stoerer {
    right: 0;
    bottom: auto;
    top: clamp(6.5rem, 12vh, 11rem);
    gap: 0.75rem;
    max-width: none;
    padding: 0.875rem 1.375rem;
    font-size: var(--t-mono);
    letter-spacing: 0.06em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    box-shadow: 0 0 0 1px var(--ink);
  }
  /* writing-mode dreht nur Glyphen, kein SVG: der Pfeil wird eigens gedreht,
     damit er nach der 180-Grad-Drehung des Störers nach oben zeigt. */
  .stoerer .icon--arrow { transform: rotate(90deg); }
}
/* Querformat mit wenig Höhe: hochkant wäre dort fast die ganze Höhe. */
@media (min-width: 72rem) and (max-height: 30rem) {
  .stoerer {
    right: 0.75rem;
    bottom: 0.75rem;
    top: auto;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: var(--t-mono-xs);
  }
  .stoerer .icon--arrow { transform: none; }
}

/* ==========================================================================
   Motion: Startzustände kommen ausschließlich aus main.js.
   Ohne JS, ohne GSAP und bei prefers-reduced-motion steht alles sichtbar.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}