/* Fassung 3 · Richtung: Pinnwand mit Haftnotiz (RICHTUNG.md) · posture: restrained, ein Signal (Notizgelb)
   critique: Fotos tragen die Farbe, Notizgelb nur fuer Antworten und ehrliche Schwaechen, keine Kicker, keine Kaesten-Reihen. */
:root {
  --color-paper: oklch(99.4% 0.006 95);
  --color-paper-2: oklch(96.6% 0.010 95);
  --color-ink: oklch(19% 0.012 70);
  --color-ink-2: oklch(32% 0.012 70);
  --color-muted: oklch(50% 0.012 70);
  --color-rule: oklch(90% 0.010 85);
  --color-note: oklch(91% 0.155 98);
  --color-note-ink: oklch(24% 0.03 80);
  --color-note-edge: oklch(84% 0.15 92);
  --color-focus: oklch(55% 0.19 255);
  --font-body: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --radius-pin: 18px; --radius-pill: 999px; --radius-note: 3px;
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem;
  --text-2xl: clamp(1.6rem, 2.6vw, 2.1rem); --text-display: clamp(2.5rem, 5vw, 4.6rem);
  --rahmen: 1240px; --spalte: 680px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-micro: 120ms; --dur-short: 220ms;
  --shadow-note: 0 1px 1px oklch(30% 0.05 80 / 0.10), 0 10px 22px -10px oklch(30% 0.05 80 / 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink-2);
  font: 400 var(--text-base)/1.6 var(--font-body); font-synthesis: none;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--color-note); color: var(--color-note-ink); }

h1, h2, h3 {
  font-family: var(--font-body); color: var(--color-ink); margin: 0;
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance;
  overflow-wrap: break-word; min-width: 0;
}
h1 { font-size: var(--text-display); max-width: 18ch; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1.12; max-width: 28ch; }
h3 { font-size: var(--text-lg); letter-spacing: -0.012em; line-height: 1.22; font-weight: 600; }
h1 a, h2 a, h3 a { text-decoration: none; }
p { margin: 0; text-wrap: pretty; }

.rahmen { width: min(100% - 2 * var(--space-md), var(--rahmen)); margin-inline: auto; }
.spalte { width: min(100% - 2 * var(--space-md), var(--spalte)); margin-inline: auto; }
.sprung { position: absolute; left: var(--space-md); top: -100px; background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); z-index: 300; }
.sprung:focus-visible { top: var(--space-md); }
.lead { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); max-width: 44ch; }
.meta { font-size: var(--text-sm); color: var(--color-muted); }
.meta a { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.meta a:hover { text-decoration: underline; }
.klein { font-size: var(--text-sm); color: var(--color-muted); }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 200; background: color-mix(in oklab, var(--color-paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--color-rule); }
.kopf-innen { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-sm); }
.wortmarke { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.035em; color: var(--color-ink); text-decoration: none; flex-shrink: 0; }
.wortmarke span { background: var(--color-note); padding: 0 0.18em; margin-left: 0.06em; border-radius: 2px; }
.rubrik-chips { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.rubrik-chips::-webkit-scrollbar { display: none; }
.rubrik-chips a { flex-shrink: 0; font-size: var(--text-sm); font-weight: 600; text-decoration: none; color: var(--color-ink);
  background: var(--color-paper-2); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  transition: background-color var(--dur-short) var(--ease-out); }
.rubrik-chips a:hover { background: var(--color-rule); }
.rubrik-chips a[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }

/* Knopf */
.knopf { display: inline-block; justify-self: start; align-self: start; background: var(--color-ink); color: var(--color-paper);
  border-radius: var(--radius-pill); padding: 14px 24px; font-weight: 600; text-decoration: none; line-height: 1.1;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.knopf:hover { background: oklch(32% 0.012 70); }
.knopf:active { transform: translateY(1px); }
.textlink { font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: var(--color-note-edge); }
.textlink:hover { text-decoration-color: var(--color-ink); }

/* Haftnotiz: die Signatur */
.notiz { background: var(--color-note); color: var(--color-note-ink); border-radius: var(--radius-note);
  padding: var(--space-md) var(--space-lg) var(--space-lg); box-shadow: var(--shadow-note);
  position: relative; max-width: 34ch; }
.notiz::before { content: ""; position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; translate: -50% 0;
  background: oklch(96% 0.02 95 / 0.75); border-radius: 2px; rotate: -2deg; }
.notiz-titel { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.notiz p:last-child { font-size: 1.0625rem; line-height: 1.45; font-weight: 500; }
.notiz-aufmacher { rotate: -1.6deg; margin-block: var(--space-xs); }
.notiz-artikel { rotate: 1.2deg; margin-top: var(--space-md); }
.notiz-produkt { rotate: -1.2deg; align-self: start; }

/* Aufmacher */
.aufmacher { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl);
  align-items: center; padding-block: var(--space-xl) var(--space-3xl); }
.aufmacher-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-pin); }
.aufmacher-text { display: grid; gap: var(--space-lg); }
.aufmacher h1 { font-size: clamp(2.3rem, 4.2vw, 4rem); }
.aufmacher h1 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--color-note-edge); }

/* Pinnwand */
.pinnwand-abschnitt { padding-block: var(--space-xl) var(--space-2xl); }
.pinnwand-abschnitt > h2 { margin-bottom: var(--space-lg); }
.pinnwand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); align-items: start; }
.pin { display: grid; gap: var(--space-xs); align-content: start; }
.pin-bild { display: block; border-radius: var(--radius-pin); overflow: hidden; background: var(--color-paper-2); }
.pin-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 420ms var(--ease-out); }
.pin-gross { grid-column: span 2; }
.pin-gross .pin-bild img { aspect-ratio: auto; height: 100%; }
.pin-gross .pin-bild { aspect-ratio: calc(8 / 5 + 0.05); }
.pin-gross h3 { font-size: var(--text-xl); }
.pin-bild:hover img { transform: scale(1.03); }
.pin h3 { margin-top: var(--space-xs); font-size: 1.1875rem; }
.pin h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-note-edge); text-decoration-thickness: 2px; }
.pin-meta { font-size: var(--text-sm); color: var(--color-muted); }
.pin-meta a { text-decoration: none; }
.pin-meta a:hover { text-decoration: underline; }

/* Band */
.band { background: var(--color-ink); color: oklch(90% 0.01 80); margin-top: var(--space-xl); }
.band-innen { padding-block: var(--space-3xl); display: grid; gap: var(--space-md); justify-items: start; }
.band-satz { font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--color-paper); max-width: 20ch; }
.band-satz::after { content: ""; display: block; width: 72px; height: 10px; background: var(--color-note); margin-top: var(--space-md); border-radius: 2px; rotate: -2deg; }
.band p:not(.band-satz) { max-width: 46ch; }
.band .textlink { color: var(--color-paper); }

/* Artikel */
.artikel-kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl);
  align-items: start; padding-block: var(--space-xl) var(--space-2xl); }
.artikel-titel { display: grid; gap: var(--space-md); padding-top: var(--space-md); }
.artikel-titel h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.artikel-bild { margin: 0; }
.artikel-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-pin); }
.werbung { font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2); border-radius: 10px; margin-bottom: var(--space-lg); }
.fliesstext { padding-bottom: var(--space-2xl); }
.fliesstext h2 { margin: var(--space-xl) 0 var(--space-sm); }
.fliesstext p { margin-bottom: var(--space-md); }
.einschub { margin: var(--space-xl) 0; }
.einschub img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-pin); object-fit: cover; }
.einschub figcaption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }

/* Empfehlungen */
.empfehlung { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 3px solid var(--color-ink); }
.empfehlung > h2 { margin-top: 0; }
.produkte { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-xl); }
.produkt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: var(--space-lg); align-items: start;
  padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.produkt:last-child { border-bottom: 0; }
.produkt-text { display: grid; gap: var(--space-sm); }
.produkt-text p { margin: 0; }
.produkt-fuer { font-size: var(--text-sm); color: var(--color-muted); }
.pflicht { font-size: var(--text-sm); color: var(--color-ink-2); border: 1px solid var(--color-rule); padding: var(--space-sm) var(--space-md); border-radius: 10px; }

.rubrik-kopf { display: grid; gap: var(--space-md); padding-block: var(--space-2xl) var(--space-md); }
.textseite { padding-block: var(--space-2xl); }
.textseite h1 { margin-bottom: var(--space-lg); font-size: clamp(2.2rem, 4vw, 3.2rem); }

/* Fuss */
.fuss { border-top: 1px solid var(--color-rule); }
.fuss-innen { display: grid; gap: var(--space-md); padding-block: var(--space-2xl); }
.fuss-satz { font-weight: 600; color: var(--color-ink); max-width: 44ch; }
.fuss nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; font-size: var(--text-sm); }
.nachweis { font-size: 0.8125rem; color: var(--color-muted); }
.nachweis a { color: var(--color-muted); }

@media (max-width: 860px) {
  .kopf-innen { flex-wrap: wrap; gap: var(--space-sm); }
  .rubrik-chips { margin-left: 0; width: 100%; }
  .aufmacher, .artikel-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md) var(--space-2xl); }
  .aufmacher-bild img, .artikel-bild img { aspect-ratio: 4 / 4.4; }
  .artikel-bild { order: -1; }
  .notiz-aufmacher, .notiz-artikel { margin-left: var(--space-xs); max-width: none; }
  .aufmacher-text { position: relative; }
  .pinnwand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .pinnwand-drei .pin:nth-child(3) { display: none; }
  .pin h3 { font-size: 1.0625rem; }
  .produkt { grid-template-columns: minmax(0, 1fr); }
  .notiz-produkt { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .pin-bild:hover img { transform: none; }
}