/* Lars Roisch – Website. Gestaltung: Regaletikett (Option 1 „Etikett deutlich“, gewählt 08.11.2026).
   Rot nur für die Handlung, Petrol für Ordnung, Schrift Archivo (selbst gehostet). Kein JavaScript. */

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

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-var.woff2") format("woff2");
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, figure { margin: 0; }
  ul { padding: 0; list-style: none; }
  img, svg { display: block; max-inline-size: 100%; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --canvas: #EDEDEA;
    --paper: #FFFFFF;
    --ink: #15161A;
    --muted: #55585F;
    --line: #D3D1CA;
    --rail: #0E6E76;
    --rail-hi: #3E9199;
    --band: #2C2E33;
    --band-text: #F1F0EC;
    --band-muted: #A4A7AE;
    --band-line: #45484F;
    --on-rail: #F1F0EC;
    --accent: #E8431F;
    --accent-hover: #F2603C;
    --on-accent: #15161A;
    --edge: 6px;
    --shadow: 0 8px 12px -8px rgb(21 22 26 / 0.28);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --canvas: #111216;
      --paper: #23252B;
      --ink: #F1F0EC;
      --muted: #A4A7AE;
      --line: #3A3D44;
      --band: #08090B;
      --band-line: #2B2D33;
      --shadow: 0 8px 12px -8px rgb(0 0 0 / 0.6);
    }
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 1rem; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    background: var(--canvas);
    color: var(--ink);
    font-family: "Archivo", system-ui, sans-serif;
    font-stretch: 100%;
    font-size: 1.1875rem;
    line-height: 1.55;
  }
  a { color: inherit; }
  a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  h1, h2, h3 {
    font-stretch: 72%;
    font-weight: 600;
    line-height: 0.98;
    word-spacing: 0.1em;
    overflow-wrap: break-word;
  }
  strong { font-weight: 700; }
  .skip {
    position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem;
    background: var(--paper); color: var(--ink); padding: 0.75rem 1rem; border-radius: 2px; z-index: 10;
  }
  .skip:focus { inset-block-start: 1rem; }
}

@layer layout {
  .wrap { max-inline-size: 1240px; margin-inline: auto; padding-inline: 40px; }
  .section { padding-block-start: 120px; }
  .nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; padding-block: 14px; }
  .nav-links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
  .hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: stretch; padding-block: 12px 56px; }
  .intro { display: flex; flex-direction: column; gap: 14px; font-size: 1.25rem; max-inline-size: 780px; padding-block-end: 24px; }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; margin-block-start: 64px; }
  .book { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: center; }
  .action { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
}

@layer components {
  /* Kopf */
  .word { font-stretch: 72%; font-weight: 800; font-size: 1.625rem; text-decoration: none; white-space: nowrap; }
  .nav-links a { text-decoration: none; color: var(--muted); font-size: 1.0625rem; min-block-size: 44px; display: inline-flex; align-items: center; }
  .nav-links a:hover { color: var(--ink); }

  /* Abschnittsmarke */
  .way { display: flex; align-items: center; gap: 12px; font-stretch: 72%; font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: var(--muted); margin-block-end: 12px; word-spacing: normal; }
  .chip { background: var(--band-text); color: #15161A; padding: 4px 12px 5px; border-radius: 2px; }

  /* Regalkante mit Etikett */
  .rail {
    padding-block-end: var(--edge);
    background-image: linear-gradient(var(--rail-hi), var(--rail-hi)), linear-gradient(var(--rail), var(--rail));
    background-size: 100% 2px, 100% var(--edge);
    background-position: 0 calc(100% - var(--edge) + 2px), 0 100%;
    background-repeat: no-repeat;
  }
  .rail-row { display: grid; gap: 10px; }
  .label {
    background: var(--paper); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow);
    padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0;
  }
  .l-top { font-size: 0.875rem; color: var(--muted); line-height: 1.3; }
  .l-main { font-stretch: 72%; font-weight: 800; line-height: 0.95; word-spacing: 0.1em; overflow-wrap: break-word; }
  .l-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.8125rem; color: var(--muted); border-block-start: 1px solid var(--line); margin-block-start: 10px; padding-block-start: 8px; line-height: 1.35; }
  .bars { flex: none; inline-size: 46px; block-size: 22px; color: var(--ink); }

  /* Hero */
  .hero > .rail { display: flex; }
  .hero .label { flex: 1; padding: 28px 32px 18px; justify-content: space-between; }
  .h1 { font-size: clamp(2.625rem, 7vw, 5.625rem); margin-block-start: 18px; text-wrap: balance; }
  .nowrap { white-space: nowrap; }
  .hero-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 2px solid var(--ink); margin-block-start: 28px; }
  .hero-fields p { padding: 12px 16px 4px 0; font-size: 1rem; line-height: 1.35; }
  .hero-fields p + p { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
  .portrait { display: flex; flex-direction: column; gap: 14px; }
  .portrait img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; max-block-size: max(320px, calc(100svh - 330px)); object-fit: cover; object-position: 50% 30%; border-radius: 2px; }
  .mail { font-size: 0.9375rem; color: var(--muted); margin-block-start: -4px; }

  /* Handlung: Rot */
  .cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 64px; padding-inline: 26px;
    background: var(--accent); color: var(--on-accent); font-stretch: 72%; font-weight: 800; font-size: 2rem; line-height: 1; text-decoration: none; border-radius: 2px;
  }
  .cta:hover, .sale:hover { background: var(--accent-hover); }
  .cta:focus-visible, .sale:focus-visible { outline-color: var(--ink); }

  /* Wobei ich helfe */
  .help { padding-block-start: 40px; }
  .four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .help .l-main { font-size: 1.875rem; }
  .note { margin-block-start: 22px; color: var(--muted); font-size: 1.0625rem; max-inline-size: 960px; }
  .note strong { color: var(--ink); }

  /* Situationen: Gangschilder */
  .h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
  .h2-gap { max-inline-size: 900px; margin-block-end: 48px; }
  .aisles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; border-block-start: 6px solid var(--rail); }
  .aisle { --drop: 28px; padding-block-start: var(--drop); position: relative; }
  .aisle:nth-child(even) { --drop: 56px; }
  .aisle::before, .aisle::after { content: ""; position: absolute; inset-block-start: 0; block-size: var(--drop); inline-size: 2px; background: var(--rail); }
  .aisle::before { inset-inline-start: 22%; }
  .aisle::after { inset-inline-end: 22%; }
  .hang { background: var(--rail); color: var(--on-rail); padding: 14px 16px 16px; border-radius: 2px; font-size: 1.625rem; line-height: 1.02; min-block-size: 96px; display: flex; align-items: flex-end; }
  .aisle ul { margin-block-start: 10px; display: flex; flex-direction: column; gap: 8px; }
  .aisle li { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; font-size: 1.0625rem; line-height: 1.4; }

  /* Unterschiede */
  .points { margin-block-start: 44px; display: flex; flex-direction: column; gap: 28px; }
  .three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .point { padding: 20px 22px 18px; gap: 10px; }
  .point h3 { font-size: clamp(1.875rem, 2.6vw, 2.375rem); }
  .point p { font-size: 1.125rem; }

  /* Zahlen und Fakten */
  .stats { margin-block-start: 44px; }
  .stats .l-main { font-size: clamp(4rem, 7vw, 7rem); font-variant-numeric: tabular-nums; }
  .unit { font-weight: 700; }
  .lab { font-weight: 700; margin-block-end: 8px; }
  .lab + p + .lab, .facts p + .lab { margin-block-start: 32px; }
  .facts p + p:not(.lab) { margin-block-start: 6px; }
  .quote { margin-block-start: 88px; max-inline-size: 960px; }
  .quote-src { font-size: 0.9375rem; color: var(--muted); margin-block-end: 14px; line-height: 1.4; }
  .quote-text { font-stretch: 72%; font-weight: 600; font-size: clamp(2rem, 3.6vw, 3.125rem); line-height: 1.08; }

  /* Buch */
  .book .label { padding: 32px 36px 16px; }
  .book .l-main { font-size: clamp(2rem, 3.2vw, 2.75rem); margin-block-start: 6px; }
  .book-sub { font-weight: 600; margin-block-start: 14px; line-height: 1.4; }
  .book-text { font-size: 1.375rem; max-inline-size: 560px; }
  .book-head { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 36px; align-items: center; margin-block-end: 24px; }
  .cover { display: block; inline-size: 100%; block-size: auto; box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 10px 22px -10px rgb(0 0 0 / .35); }
  .btn-line {
    display: inline-flex; align-items: center; min-block-size: 52px; padding-inline: 24px; margin-block-start: 24px;
    background: var(--ink); color: var(--canvas); font-weight: 700; text-decoration: none; border-radius: 2px;
  }
  .btn-line:hover { background: var(--rail); color: var(--on-rail); }

  /* Kontakt */
  .band { background: var(--band); color: var(--band-text); margin-block-start: 128px; padding-block: 96px 0; }
  .band a:focus-visible { outline-color: var(--band-text); }
  .band .way { margin-block-end: 28px; }
  .band .h2 { max-inline-size: 760px; }
  .band-text { margin-block-start: 16px; font-size: 1.375rem; max-inline-size: 640px; }
  .band-text.first { margin-block-start: 24px; }
  .sale {
    margin-block-start: 46px; background: var(--accent); color: var(--on-accent); border-radius: 2px; padding: 24px 26px 20px;
    text-decoration: none; display: flex; flex-direction: column; gap: 6px;
  }
  .sale-top { font-size: 0.9375rem; font-weight: 600; }
  .sale .l-main { font-size: clamp(3rem, 5vw, 4.5rem); }
  .sale-mail { font-size: 1.0625rem; font-weight: 600; border-block-start: 1px solid rgb(21 22 26 / 0.35); padding-block-start: 8px; margin-block-start: 6px; }
  .linkedin { margin-block-start: 28px; font-size: 1.0625rem; color: var(--band-muted); }
  .linkedin a { color: var(--band-text); font-weight: 700; }

  /* Fuß */
  .foot { background: var(--band); color: var(--band-muted); }
  .foot .wrap { padding-block: 88px 36px; }
  .foot-row { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: 0.9375rem; padding-block-start: 20px; border-block-start: 1px solid var(--band-line); }
  .foot-links { display: flex; gap: 24px; }
  .foot a:focus-visible { outline-color: var(--band-text); }

  /* Rechtstexte */
  .legal { padding-block: 48px 96px; }
  .legal > * { max-inline-size: 760px; }
  .legal h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); margin-block-end: 32px; }
  .legal h2 { font-size: 1.75rem; margin-block: 40px 10px; }
  .legal p + p { margin-block-start: 10px; }
  .legal .back { display: inline-flex; min-block-size: 44px; align-items: center; margin-block-start: 48px; font-weight: 700; }
}

@media (max-width: 900px) {
  .wrap { padding-inline: 20px; }
  .section { padding-block-start: 80px; }
  .hero, .book, .action, .facts { grid-template-columns: minmax(0, 1fr); }
  .hero .label { padding: 22px 20px 14px; }
  .hero .l-foot { display: none; }
  .hero-fields { grid-template-columns: minmax(0, 1fr); }
  .hero-fields p + p { padding-inline-start: 0; border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .portrait img { aspect-ratio: 1 / 1; order: 3; }
  .portrait .cta { order: 1; }
  .portrait .mail { order: 2; }
  .four, .three, .two { grid-template-columns: minmax(0, 1fr); }
  .nav { flex-wrap: nowrap; gap: 16px; }
  .nav-links { flex-wrap: nowrap; overflow-x: auto; gap: 0 18px; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .nav-links a { white-space: nowrap; font-size: 1rem; }
  .aisles { grid-template-columns: minmax(0, 1fr); border-block-start: 0; }
  .aisle { --drop: 0px; padding-block-start: 0; }
  .aisle:nth-child(even) { --drop: 0px; }
  .aisle::before, .aisle::after { display: none; }
  .hang { min-block-size: 0; position: relative; margin-block-start: 14px; }
  .hang::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -14px; block-size: 4px; background: var(--rail); }
  .band { margin-block-start: 88px; padding-block-start: 72px; }
  .sale { margin-block-start: 32px; }
  .foot .wrap { padding-block-start: 56px; }
}

@media (max-width: 420px) {
  .h2 { font-size: 2.25rem; }
  .book .l-main { font-size: 1.625rem; }
  .book-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cover { inline-size: 104px; }
  .book .label { padding: 24px 22px 14px; }
}

@media (forced-colors: active) {
  .rail { border-block-end: var(--edge) solid CanvasText; padding-block-end: 0; background: none; }
  .cta, .sale, .btn-line, .chip, .hang { border: 2px solid ButtonText; }
}

@media print {
  .nav-links, .skip { display: none; }
  .band, .foot { background: none; color: #000; }
}