/* Die Seite folgt Design/kinkventory-bildsprache.html: Anthrazit als Grund,
   Signal-Bernstein als Akzent, Stahlblau für alles Technische; Archivo 112 %
   für Auszeichnung, IBM Plex Sans für Lesetext, IBM Plex Mono für Etiketten.
   Die drei Schriften sind ausdrücklich für alles **außerhalb** der App
   gesetzt — Store, Website, Bildschirmfotos —, in der App bleibt SF Pro.

   Sie liegen unter /schriften/ und kommen nicht von Google: Ein Link dorthin
   überträgt bei jedem Aufruf die IP des Lesers in die USA, und das auf einer
   Seite, deren Datenschutzerklärung genau das ausschließt. Die CSP in
   deploy/website/nginx.conf verbietet den Weg ohnehin.

   Dunkel zuerst, weil die Marke aus der Gerätewelt kommt; der helle Satz
   steht unter prefers-color-scheme. */

@import url("/schriften/schriften.css");

:root {
  --bg: #0D0F12;
  --surface: #14171C;
  --surface-2: #1B1F26;
  --line: #262C35;
  --line-soft: #1E232B;
  --text: #E6E8EA;
  --text-dim: #98A1AB;
  --text-faint: #6B747E;
  --amber: #E9962E;
  --amber-soft: #7A5416;
  --steel: #7FA0BE;
  /* Die Marke steht auf dem schwarzen Grund rein weiß, nicht im
     abgesenkten Lesegrau: Sie ist ein Zeichen und kein Text, und das
     Grau ließ sie neben der Überschrift stumpf wirken. Der Zusatz
     „Gear Log" geht mit — halb weiß, halb stahlblau wäre nicht ein
     Zeichen, sondern zwei. */
  --marke: #FFFFFF;
  --marke-zusatz: #FFFFFF;
  --shadow: rgba(0, 0, 0, .5);
  --mass: 66ch;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #EBECEE;
    --surface: #F6F7F8;
    --surface-2: #FFFFFF;
    --line: #D4D8DD;
    --line-soft: #E1E4E8;
    --text: #15181D;
    --text-dim: #565E68;
    --text-faint: #828B95;
    /* Bernstein auf hellem Grund abgesenkt — die Bildsprache nennt den Wert
       ausdrücklich, weil #E9962E auf Weiß den Kontrast nicht hält. */
    --amber: #A9620B;
    --amber-soft: #EBCFA6;
    --steel: #3D5D7C;
    /* Auf hellem Grund bleibt es beim Vorlagenpaar: Zeichen im
       Textton, Zusatz in Stahl. Weiß wäre dort unsichtbar. */
    --marke: #15181D;
    --marke-zusatz: #3D5D7C;
    --shadow: rgba(20, 25, 32, .14);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typografie ---------- */

h1, h2, h3 {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-stretch: 112%;
  text-wrap: balance;
  line-height: 1.08;
  letter-spacing: -.015em;
}
h1 { font-weight: 800; font-size: clamp(2.1rem, 6.2vw, 3.4rem); margin: 2.5rem 0 1rem; }
h2 { font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.15rem); letter-spacing: -.02em;
     margin: 3rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
h3 { font-weight: 700; font-size: 1.22rem; font-stretch: 105%; margin: 2rem 0 .35rem; }

p, ul, ol, dl { margin: .85rem 0; }
li { margin: .3rem 0; }

a { color: var(--amber); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

strong, b { color: var(--text); font-weight: 600; }

/* Das Etikett aus der Bildsprache: Plex Mono, weit laufend, Versalien. Es
   trägt hier, was ein Ausrüstungsschein trägt — Rolle, Stand, Sprache. */
.stamp {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.stamp--amber { color: var(--amber); }
.stamp--steel { color: var(--steel); }

.vorspann {
  font-size: clamp(1.06rem, 2.1vw, 1.24rem);
  color: var(--text-dim);
  line-height: 1.58;
  max-width: 62ch;
}

.klein { font-size: .88rem; color: var(--text-dim); }

/* ---------- Kopf ---------- */

.skip {
  position: absolute;
  left: -9999px;
  background: var(--amber);
  color: var(--bg);
  padding: .6rem 1rem;
  font-weight: 600;
  z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

/* Die Wortmarke ist gezeichnet, nicht gesetzt: „KINK" fett, „VENTORY" leicht
   ist Teil der Zeichnung und nicht des Schriftschnitts. Sie steht inline im
   HTML und erbt über `currentColor` die Textfarbe — damit stimmt sie in
   beiden Modi, ohne zweite Datei. Maße kommen aus dem Markup, nicht von hier;
   so springt beim Laden nichts. */
.marke {
  display: inline-flex;
  align-items: center;
  color: var(--marke);
  text-decoration: none;
}
.marke svg { display: block; }

.kopf nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.kopf nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: .93rem;
}
.kopf nav a:hover { color: var(--amber); }
.kopf nav a[aria-current] { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }

.sprachen {
  margin-left: auto;
  gap: .85rem !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .12em;
}
.sprachen span { color: var(--amber); font-weight: 600; }
.sprachen a { color: var(--text-faint); text-decoration: none; }

/* ---------- Inhalt ---------- */

main { padding: 0 clamp(1rem, 4vw, 2.5rem) 4.5rem; }

section, .fliess { max-width: var(--mass); margin-inline: auto; }

/* Die Etikettenmarke als Titelkarte — die gerahmte Fassung ist in der
   Bildsprache genau dafür vorgesehen. Der Rahmen ist die Kiste.

   Ohne eigenen Grund: Rahmen und Schrift nehmen `currentColor` aus dem
   Marken-Token. Damit steht das Etikett im hellen Modus dunkel auf hell und
   im dunklen weiß auf schwarz — eine feste dunkle Platte wäre im hellen
   Modus ein Fremdkörper und im Druck eine Farbfläche zu viel. */
.titelkarte {
  max-width: 60rem;
  margin: 2.75rem auto .5rem;
  display: flex;
  justify-content: center;
}
.titelkarte svg {
  color: var(--marke);
  width: min(30rem, 100%);
  height: auto;
  display: block;
}

/* Die Zeile „Gear Log" ist die einzige zweite Farbe in den Marken. Sie kommt
   als Klasse aus build.py und nicht als `style`-Attribut am Pfad: Die CSP der
   Auslieferung verwirft `style`-Attribute, und der Pfad fiele damit auf sein
   schwarzes Vorgabe-fill zurück. */
.marke .stahl,
.titelkarte .stahl { fill: var(--marke-zusatz); }

.zeile-stempel {
  max-width: var(--mass);
  margin: 2.5rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: baseline;
  padding-bottom: .5rem;
}

.stand { color: var(--text-faint); margin-top: .35rem; }

/* Kernaussage. Bei diesem Inhalt ist die Kernaussage „nichts bleibt liegen" —
   die soll niemand suchen müssen. Kante statt Rundung: Die Bildsprache setzt
   auf Kistenbeschriftung, nicht auf Karten. */
.kasten {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  padding: 1.1rem 1.35rem;
  margin: 1.75rem auto;
  max-width: var(--mass);
}
.kasten p:first-child { margin-top: 0; }
.kasten p:last-child, .kasten ul:last-child { margin-bottom: 0; }

.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
  padding: 0;
  max-width: 62rem;
  margin: 1.75rem auto;
}
.merkmale li { background: var(--surface); padding: 1.1rem 1.25rem; margin: 0; }
.merkmale b {
  display: block;
  margin-bottom: .3rem;
  font-family: Archivo, sans-serif;
  font-stretch: 105%;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.merkmale span { color: var(--text-dim); font-size: .92rem; line-height: 1.5; }

/* Die Funktionsseite läuft auf einer breiteren Bahn als die Rechtstexte, weil
   neben dem Text ein Telefonbild steht. Damit die linke Kante über die ganze
   Seite fluchtet, laufen dort auch Überschriften und Listen auf dieser Bahn —
   die Zeilenlänge halten die inneren Elemente selbst. Ohne das säße die
   Überschrift eingerückt und die Bildabschnitte weiter links: eine Treppe,
   die man beim Scrollen sieht, ohne sie erklären zu können. */
.breit { max-width: 62rem; }
.breit p, .breit ul, .breit ol, .breit dl { max-width: var(--mass); }

/* Ein Abschnitt der Funktionsseite: Text und das Bildschirmfoto dazu. Erst ab
   58rem nebeneinander — darunter stünde das Telefonbild neben einer Spalte von
   vier Wörtern Breite, und beides wäre unlesbar. Das Bild kommt im Quelltext
   *nach* dem Text und steht damit auch für Screenreader an der richtigen
   Stelle: Es illustriert den Abschnitt, es leitet ihn nicht ein. */
.funktion {
  display: grid;
  gap: 1rem 2.5rem;
  max-width: 62rem;
  margin: 2.5rem auto;
  align-items: start;
}
@media (min-width: 58rem) {
  .funktion { grid-template-columns: 1fr 260px; }
  /* Die Überschrift trägt sonst die Linie über die ganze Rasterbreite, auch
     über das Bild — sie gehört zum Text. */
  .funktion h2 { margin-top: 0; }
}
.funktion img {
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.funktion p:last-child { margin-bottom: 0; }

/* Der Weiterlesen-Verweis der Startseite. Als eigene Zeile mit Abstand, nicht
   als Satz im Fließtext: Er ist ein Weg, kein Nachsatz. */
.mehr {
  max-width: var(--mass);
  margin: 1.75rem auto 0 !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .8rem;
  letter-spacing: .06em;
}
.mehr a { text-decoration: none; }
.mehr a:hover { text-decoration: underline; }

/* Bildschirmfotos waagerecht scrollend statt schrumpfend: Ein Telefonbild auf
   Spaltenbreite eingepasst ist auf keinem Gerät mehr lesbar. */
.fotos {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  margin: 1rem -1rem 0;
  scroll-snap-type: x mandatory;
}
.fotos img {
  width: 260px;
  flex: 0 0 auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  scroll-snap-align: center;
  background: var(--surface);
}

/* Verarbeitungsübersicht: auf schmalen Geräten scrollend, nie umbrechend —
   eine Tabelle mit vier Zeichen je Spalte sagt nichts mehr aus. */
.tabelle { overflow-x: auto; max-width: var(--mass); margin: 1.25rem auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 34rem; }
th, td { text-align: left; vertical-align: top; padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
th {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

dt { font-weight: 600; margin-top: 1rem; }
dd { margin: .2rem 0 0; color: var(--text-dim); }

/* ---------- Fuß ---------- */

.fuss {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 2.25rem;
  color: var(--text-faint);
  font-size: .87rem;
}
.fuss > * { max-width: var(--mass); margin-inline: auto; }
.fuss .marke { margin-bottom: .9rem; }
.fuss p { margin: .3rem auto; }
.fuss-links { margin-top: .9rem !important; }
.fuss-links a { color: var(--text-dim); text-decoration: none; }
.fuss-links a:hover { color: var(--amber); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}