/* Live Tech Ventures, Markenbuch v0.4 (freigegeben 19.10.2026). Token aus Kapitel 7 und 8, Klassen für Punze, Lockup, Header und Fußzeile aus Kapitel 6 und 9. Quelle: marke/markenbuch-v0.4.md */
/* Archivo, selbst gehostet (Kapitel 8): variable Schrift, Latin-Subset, archivo.woff2 liegt neben dieser Datei. Ohne font-stretch im @font-face ignoriert der Browser die Breite von Punze und Wortmarke. */
@font-face {
  font-family: Archivo;
  src: url(archivo.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
:root {
  --grund: #FFFFFF; --flaeche: #F4F2EC; --text: #17130F; --nebentext: #5C5750; --grau: #8A857D; --linie: #D9D9D4;
  --gelb: #FFD60A; --gelb-seite: #FFD60A; --gelb-hell: #FFF4BF; --text-auf-gelb: #17130F;
  --rot: #B3001B; /* nur auf Punze, Balken und Hover, Schrift darauf Weiß */
  --schwarz: #17130F; /* Leiste, Fußzeile, Kopfzeile beim Scrollen */
  --hell: #F4F1EC; --grau-auf-schwarz: #A8A299;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --H: 48px;     /* Schriftgrad von Punze und Name, alles andere ist ein Bruchteil davon */
  --steig: 8px;  /* Steigung des Balkens auf 1088 px, 0,42 Grad */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --grund: #1E1B18; --flaeche: #2A2622; --text: #F4F1EC; --nebentext: #A8A29A; --grau: #6B665F; --linie: #35312C; --gelb-seite: #E8C200; --gelb-hell: #3A3000; color-scheme: dark; }
}
:root[data-theme="dark"] { --grund: #1E1B18; --flaeche: #2A2622; --text: #F4F1EC; --nebentext: #A8A29A; --grau: #6B665F; --linie: #35312C; --gelb-seite: #E8C200; --gelb-hell: #3A3000; color-scheme: dark; }
@media (max-width: 640px) { :root { --H: 32px; --steig: 3px; } }

body { font-family: var(--sans); background: var(--grund); color: var(--text); font-variant-numeric: tabular-nums; }

/* Punze und Lockup */
.lockup { display: inline-flex; align-items: center; font-size: var(--H); }
.punze { font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; font-size: 1em; line-height: 1; color: #FFFFFF; background: var(--rot); padding: .22em .28em .18em; flex: none; }
.name { font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; font-size: 1em; line-height: 1; color: var(--text-auf-gelb); margin-left: .45em; white-space: nowrap; }
@media (max-width: 640px) { .lockup { flex-direction: column; gap: 12px; } .name { margin-left: 0; font-size: 30px; } }

/* Header: Gelb mit Lockup, roter Balken mit dem Satz, schwarze Leiste mit den Links */
.kopf { background: var(--gelb); }
.kopf .innen { padding-block: 40px; display: flex; justify-content: center; }
.kopf a.lockup { text-decoration: none; color: inherit; }
.kopf a.lockup:focus-visible { outline: 2px solid var(--text-auf-gelb); outline-offset: 4px; }
.balken { background: var(--rot); color: #FFFFFF; font-weight: 700; font-size: 22px; line-height: 1; height: calc(46px + var(--steig)); margin-top: calc(-1 * var(--steig)); clip-path: polygon(0 var(--steig), 100% 0, 100% calc(100% - var(--steig)), 0 100%); }
.balken .innen { height: 100%; display: flex; align-items: center; justify-content: flex-end; }
.leiste { background: var(--schwarz); color: var(--hell); font-weight: 500; font-size: 17px; height: calc(53px + var(--steig)); margin-top: calc(-1 * var(--steig)); clip-path: polygon(0 var(--steig), 100% 0, 100% 100%, 0 100%); }
.leiste .innen { height: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; }
.leiste a { color: inherit; text-decoration: none; padding: 7px 10px; transition: background-color 120ms ease; }
.leiste a:hover, .leiste a:focus-visible { background: var(--rot); outline: none; }
.innen { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .innen { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 640px) {
  .kopf .innen { padding-block: 24px; }
  .balken { font-size: 16px; height: calc(36px + var(--steig)); }
  .leiste { font-size: 15px; height: calc(48px + var(--steig)); }
  .leiste .innen { gap: 8px; }
  .leiste a { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) { .leiste a { transition: none; } }

/* Fußzeile: Schwarz, Lockup klein, der Satz als Text */
.fuss { background: var(--schwarz); color: var(--grau-auf-schwarz); font-size: 14px; }
.fuss .innen { padding-block: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.fuss .lockup { --H: 24px; flex-direction: row; gap: 0; }
.fuss .name { color: var(--hell); margin-left: .45em; font-size: 1em; }
.fuss a { color: inherit; text-decoration: none; padding: 4px 6px; margin: -4px -6px; transition: background-color 120ms ease; }
.fuss a:hover { background: var(--rot); color: #FFFFFF; }

/* Marker hinter einem Datum, Fortschritt, Label BEISPIEL (Kapitel 7 und 8) */
.marker { background: var(--gelb-seite); color: var(--text-auf-gelb); padding: .12em .4em; white-space: nowrap; vertical-align: baseline; }
.zahl { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.beispiel { font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--nebentext); padding: 1px 5px; }