/*
 * smart-things.de — Entwurf 2026
 *
 * Richtung: plakativer Typo-Satz. Archivo Black als Display, Inter als
 * Lesetext, JetBrains Mono ausschliesslich dort, wo "Dokument" gemeint ist.
 * Farbwelt unveraendert aus dem bestehenden System uebernommen:
 * achromatische Graustufen plus Markenrot oklch(58% 0.2 32). Kein Radius.
 *
 * Schriften kommen aus assets/fonts/fonts.css — kein externer Aufruf.
 */

@layer reset, tokens, base, layout, components;

/* ─── reset ──────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
    margin: 0;
  }

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  address { font-style: normal; }
  img, picture, svg { display: block; max-inline-size: 100%; block-size: auto; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }
}

/* ─── tokens ─────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    color-scheme: light;

    --ink:       oklch(12% 0.01 65);
    --muted:     oklch(42% 0.01 65);
    --subtle:    oklch(56% 0.01 65);
    --paper:     #fff;
    --surface:  oklch(97.5% 0 0);
    --rule:      oklch(88% 0 0);
    --rot:       oklch(58% 0.2 32);
    --rot-hover: oklch(50% 0.2 32);

    --display: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --gutter:  clamp(1.25rem, 5vw, 4rem);
    --measure: 78rem;
    --lesebreite: 42rem;
    --sec:     clamp(4.5rem, 11vw, 9rem);
    --balken:  3px;
  }
}

/* ─── base ───────────────────────────────────────────────────────────── */
@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  :focus-visible {
    outline: 2px solid var(--rot);
    outline-offset: 3px;
  }

  .skip {
    position: absolute;
    inset-inline-start: -9999px;
    padding: .75rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: .8125rem;
    z-index: 10;
  }

  .skip:focus {
    inset-inline-start: var(--gutter);
    inset-block-start: .75rem;
  }
}

/* ─── layout ─────────────────────────────────────────────────────────── */
@layer layout {
  .wrap {
    inline-size: 100%;
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Vollbreite: bricht aus der Spalte aus, damit vw-Skalierung greift */
  .wrap--bleed { max-inline-size: none; }

  .band { padding-block: var(--sec); }
  .band--grau { background: var(--surface); }
}

/* ─── components ─────────────────────────────────────────────────────── */
@layer components {

  /* Kopfzeile — Wortmarke plus genau ein Ziel */
  .masthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: clamp(1.25rem, 3vw, 2rem);
    border-block-end: var(--balken) solid var(--ink);
  }

  .wordmark {
    font-family: var(--display);
    font-size: clamp(1rem, 2.6vw, 1.375rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .masthead a:not(.wordmark) {
    font-family: var(--mono);
    font-size: clamp(.8125rem, 1.8vw, .9375rem);
    color: var(--muted);
    transition: color .15s ease;
  }

  .masthead a:not(.wordmark):hover { color: var(--rot-hover); }

  /* Hero — die Wand aus Typografie, darunter der leise Nachsatz.
     Groesse und Polsterung haengen an der Breite UND an der Hoehe. Nur nach
     Breite gerechnet lief der Hero auf 5 von 10 geprueften Viewports aus dem
     Bild — darunter gewoehnliche Laptops mit 1280x800 und 1366x768, wo die
     Headline auf fuenf Zeilen umbricht, und jedes breite, flache Fenster.
     Selbst 1920x1080 passte nur mit 27px Reserve.
     min(9vw, 13svh) deckelt die Schrift dort, wo Hoehe knapper ist als
     Breite, und laesst sie sonst unveraendert. svh statt vh, damit die
     eingeblendete Browserleiste auf dem Telefon mitgerechnet wird.
     Die Polsterung braucht denselben Deckel: 10vw sind auf 1920px Breite
     192px oben und unten — auf einem 600px hohen Fenster zwei Drittel der
     Hoehe allein fuer Luft. */
  .hero {
    padding-block: min(max(3.5rem, 10vw), 10svh) min(max(4rem, 10vw), 10svh);
  }

  .hero h1 {
    font-family: var(--display);
    font-size: max(2rem, min(9vw, 13svh));
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-transform: uppercase;
  }

  .nachsatz {
    margin-block-start: clamp(2rem, 5vw, 3.25rem);
    max-inline-size: 34ch;
    color: var(--muted);
    font-size: max(1.0625rem, 1.6vw);
    line-height: 1.45;
    text-wrap: pretty;
  }

  /* Der Hero zieht sich beim Scrollen zusammen.
     Geskaliert wird per transform, NICHT per font-size: Eine animierte
     Schriftgroesse laesst das h1 bei jedem Frame neu umbrechen, die Seite
     wird dabei kuerzer, das verschiebt die Scrollposition und damit den
     Animationsfortschritt, der wiederum die Hoehe aendert. Diese
     Rueckkopplung ruckelt und laesst die Seite unter dem Finger wandern.
     transform laeuft auf dem Compositor und ruehrt das Layout nicht an —
     der Nachsatz bleibt dadurch exakt stehen.
     Anker unten links: Die letzte Grundlinie bleibt stehen, die Zeilen
     darueber ruecken zu ihr herunter. Headline und Nachsatz bleiben
     aneinander, die Luecke entsteht zwischen Kopfzeile und Headline.
     Ohne scroll-gesteuerte Animationen passiert nichts. */
  @supports (animation-timeline: scroll()) {
    .hero h1 {
      transform-origin: left bottom;
      will-change: transform;
      animation: hero-zieht-sich-zusammen linear both;
      animation-timeline: scroll();
      animation-range: 0 60vh;
    }

    @keyframes hero-zieht-sich-zusammen {
      to { transform: scale(0.2); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero h1 { animation: none; transform: none; }
    }
  }

  /* Abschnittsmarke — bewusst kein getracktes Mono-Label */
  .marke {
    font-family: var(--display);
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    letter-spacing: -0.015em;
    margin-block-end: clamp(2rem, 5vw, 3rem);
  }

  /* Expertise — vier Zeilen, getrennt durch Balken statt Haarlinien */
  .leistungen {
    list-style: none;
    padding: 0;
    border-block-end: var(--balken) solid var(--ink);
  }

  .leistungen > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem 2.5rem;
    align-items: baseline;
    padding-block: clamp(1.25rem, 3.5vw, 2.25rem);
    border-block-start: var(--balken) solid var(--ink);
  }

  @media (min-width: 44rem) {
    .leistungen > li { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
  }

  .leistungen h3 {
    font-family: var(--display);
    font-size: clamp(1.75rem, 5.5vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .leistungen p {
    color: var(--muted);
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
    text-wrap: pretty;
  }

  /* Rotes Band — Expertise.
     Die Token werden im Scope neu belegt, damit Regeln INNERHALB des Bandes
     (Beschreibungen, 3px-Balken) automatisch mitziehen. Das allein genuegt
     aber nicht: `color` wird auf dem body deklariert und vererbt von dort
     den berechneten dunklen Wert nach unten — Ueberschriften ohne eigene
     color-Angabe blieben sonst dunkel. Deshalb deklariert das Band seine
     Textfarbe selbst.
     Reines Weiss ist Pflicht, nicht Geschmack: Weiss auf #DA3B26 ergibt
     4.53:1 und besteht AA knapp — 90% Deckung faellt auf 3.93:1 durch. */
  .band--rot {
    background: var(--rot);
    color: var(--ink);
    --ink:    #fff;
    --muted:  #fff;
    --subtle: #fff;
    --rule:   #fff;
  }

  /* Kontakt — nur Daten */
  .kontakt address {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
    line-height: 1.45;
  }

  .kontakt .name {
    font-family: var(--display);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .kontakt .firma { color: var(--muted); }

  .draht {
    display: grid;
    gap: .5rem;
    font-family: var(--mono);
    font-size: clamp(.9375rem, 0.9rem + 0.35vw, 1.125rem);
    word-break: break-word;
  }

  .draht a { transition: color .15s ease; }
  .draht a:hover { color: var(--rot-hover); }

  /* ─── Rechtstexte ──────────────────────────────────────────────────
     Gleiche Sprache, andere Lautstaerke: Der Titel bleibt plakativ,
     alles darunter wird Lesetext auf schmalem Satzspiegel. */

  .legal { padding-block: clamp(3rem, 8vw, 6rem) var(--sec); }

  .legal h1 {
    font-family: var(--display);
    font-size: clamp(2.25rem, 8vw, 5rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    text-transform: uppercase;
  }

  .legal-lead {
    margin-block-start: clamp(1.5rem, 3.5vw, 2.25rem);
    max-inline-size: 38ch;
    color: var(--muted);
    font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
    line-height: 1.45;
    text-wrap: pretty;
  }

  .prose {
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    max-inline-size: var(--lesebreite);
    border-block-start: var(--balken) solid var(--ink);
    padding-block-start: clamp(2rem, 5vw, 3rem);
  }

  .prose > * + * { margin-block-start: 1.25em; }

  .prose h2 {
    font-family: var(--display);
    font-size: clamp(1.375rem, 3.2vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-block-start: 2.25em;
  }

  .prose h3 {
    font-family: var(--display);
    font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-block-start: 1.75em;
  }

  .prose > :first-child { margin-block-start: 0; }

  .prose p { text-wrap: pretty; }

  .prose ul {
    padding-inline-start: 1.25em;
    display: grid;
    gap: .5em;
  }

  .prose li::marker { color: var(--subtle); }

  .prose strong { font-weight: 600; }

  .prose a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--rule);
    transition: color .15s ease, text-decoration-color .15s ease;
  }

  .prose a:hover {
    color: var(--rot-hover);
    text-decoration-color: currentColor;
  }

  /* Anschrift- und Kontaktbloecke im Rechtstext */
  .prose .block {
    font-family: var(--mono);
    font-size: clamp(.875rem, 0.85rem + 0.3vw, 1rem);
    line-height: 1.75;
  }

  .stand {
    margin-block-start: 2.5em;
    padding-block-start: 1.5em;
    border-block-start: 1px solid var(--rule);
    color: var(--subtle);
    font-family: var(--mono);
    font-size: .8125rem;
  }

  /* Ausgewaehlte Arbeiten — eine Zeile externer Links, grau hinterlegt.
     Der Trennstrich haengt als ::after am Listenpunkt statt als ::before am
     naechsten: So bleibt er beim vorangehenden Namen, wenn die Zeile
     umbricht, statt allein eine neue Zeile anzufuehren.
     content zweimal deklariert — die zweite Form gibt dem Strich einen
     leeren Alternativtext, damit Screenreader ihn nicht mitlesen; wo sie
     nicht unterstuetzt wird, greift die erste. */
  .arbeiten { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

  .arbeiten .marke { margin-block-end: clamp(1.25rem, 3vw, 1.75rem); }

  .arbeiten-liste {
    display: flex;
    flex-wrap: wrap;
    column-gap: .85em;
    row-gap: .4em;
    list-style: none;
    padding: 0;
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
    line-height: 1.4;
  }

  .arbeiten-liste li:not(:last-child)::after {
    content: "|";
    content: "|" / "";
    margin-inline-start: .85em;
    color: var(--subtle);
  }

  .arbeiten-liste a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--rule);
    transition: color .15s ease, text-decoration-color .15s ease;
  }

  .arbeiten-liste a:hover {
    color: var(--rot-hover);
    text-decoration-color: currentColor;
  }

  /* Fusszeile */
  .site-footer {
    border-block-start: var(--balken) solid var(--ink);
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: .8125rem;
    color: var(--subtle);
  }

  .site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .site-footer a { transition: color .15s ease; }
  .site-footer a:hover { color: var(--rot-hover); }

  .site-footer a[aria-current="page"] { color: var(--ink); }
}