/* Disruptive Vibes. Farb- und Schriftwerte abgeleitet aus den bestehenden
   Geschaeftsdrucksachen (Rechnung, Leistungsnachweis): Systemschrift, Schwarz
   auf Weiss, Grauabstufungen, Bernstein als einzige Hinweisfarbe.
   Keine externe Schrift, kein CDN, keine Nachladung. */

/* ============================================================================
   DIESE DATEI IST DIE CI DER DISRUPTIVE VIBES, NICHT NUR DER STIL DER WEBSITE.

   Drei Tokens sind Aussenvertrag: --akzent, --text, --linie. Sie werden von
   ausserhalb dieses Projekts gelesen und tragen Decks und OnePager mit. Wer sie
   aendert, aendert das Geschaeftspapier der Gesellschaft.

   Wo sie genannt sind, Stand 22.09.2026, nachgelesen an diesem Tag:
     ceo-tools/skills/presentation/SKILL.md:442      nennt diese Datei als Master
     ceo-tools/skills/executive-topic/SKILL.md:88    dito, "dort lesen, nie abschreiben"

   Und wo der Wert von --akzent trotzdem als Literal steht, viermal, jeweils
   auskommentiert als Anleitung und nicht als wirksamer Code:
     ceo-tools/skills/presentation/SKILL.md:419      Beispielblock
     ceo-tools/skills/executive-topic/SKILL.md:117   Beispielblock
     ceo-tools/skills/executive-topic/assets/deck.html:40      CSS-Kommentar
     ceo-tools/skills/executive-topic/assets/onepager.html:27  CSS-Kommentar

   Der Preis einer Aenderung steht damit hier: die vier Anleitungen ziehen nicht
   mit, und bereits erzeugte Decks tragen den alten Wert im eigenen :root. Wer
   --akzent, --text oder --linie anfasst, arbeitet die vier Stellen mit ab und
   faehrt danach ceo-tools/skills/presentation/assets/check_deck.py, das die
   Arbeitskopie der presentation.css bytegenau gegen ihren Master haelt.

   Die CI gehoert der Einheit Iris. Ein Farbwechsel ist ihr Vorgang, nicht der
   eines Website-Umbaus. Die Regel dahinter:
   gedaechtnis/lehren/erzeugnis/eigenes-ci-auch-bei-fremder-marke.md

   Die Gestalt der Website selbst, also Flaechen, Radien, Schatten und Typoskala,
   liegt in auftritt.css daneben. Sie wird nach dieser Datei geladen und gewinnt.
   Dort darf umgebaut werden, ohne das Geschaeftspapier zu beruehren.
   ========================================================================== */

:root {
  --grund: #ffffff;
  --grund-ton: #f7f6f4;
  --text: #1a1a1a;
  --text-leise: #555555;
  /* Am 22.09.2026 von #777777 angehoben: der alte Wert lag mit 4,48 zu 1 auf
     Weiss knapp und mit 4,14 auf der Hochflaeche deutlich unter 4,5. Kein
     Aussenvertrag-Token, Decks und OnePager lesen es nicht. */
  --text-still: #707070;
  --linie: #e2e0dc;
  --linie-stark: #cccccc;
  --akzent: #b45309;
  --akzent-tief: #7c4a06;
  --mass: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14130f;
    --grund-ton: #1c1b17;
    --text: #f2f0eb;
    --text-leise: #b4b0a8;
    --text-still: #918d85;
    --linie: #302e28;
    --linie-stark: #45423a;
    --akzent: #e8983f;
    --akzent-tief: #f0b166;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.bahn { width: 100%; max-width: var(--mass); margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent-tief); }
a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }

.sprung {
  position: absolute; left: -9999px;
  background: var(--text); color: var(--grund); padding: .6rem 1rem;
}
.sprung:focus { left: 1rem; top: 1rem; z-index: 10; }

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); }
.kopf-bahn {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.marke { text-decoration: none; color: var(--text); }
.marke-name { font-weight: 700; letter-spacing: -0.015em; font-size: 1.15rem; }
.nav { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.nav a { color: var(--text-leise); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); text-decoration: underline; }
.nav-sprache a { color: var(--text-still); }

/* Abschnitte */
section { padding: 4rem 0; border-bottom: 1px solid var(--linie); }
section:last-of-type { border-bottom: 0; }
.ton { background: var(--grund-ton); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1rem; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1.1rem; max-width: 42em; }
.gross { font-size: 1.2rem; color: var(--text-leise); }
.leise { color: var(--text-leise); }
.still { color: var(--text-still); font-size: .9rem; }

/* Hero */
.hero { padding: 5rem 0 4rem; }
.hero p.gross { max-width: 40em; }

.tasten { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin: 2rem 0 1rem; }
.taste {
  display: inline-block; padding: .75rem 1.4rem;
  background: var(--text); color: var(--grund);
  text-decoration: none; font-weight: 600; border-radius: 3px;
}
.taste:hover { background: var(--akzent-tief); color: #fff; }
.taste-leise { color: var(--text-leise); text-decoration: underline; }

/* Raster */
.raster { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 2rem 0 0; }
.karte { border: 1px solid var(--linie); border-radius: 4px; padding: 1.4rem; background: var(--grund); }
.karte h3 { margin-bottom: .35rem; }
.karte p { margin-bottom: .8rem; font-size: .97rem; }
.dachzeile {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: .5rem;
}
.fach { font-size: .95rem; color: var(--text-leise); margin: 0 0 .8rem; }
.grenze {
  border-top: 1px solid var(--linie); padding-top: .8rem; margin: 0;
  font-size: .9rem; color: var(--text-still);
}
.grenze b { color: var(--text-leise); font-weight: 600; }

/* Tabelle */
.rolle { overflow-x: auto; margin: 2rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .8rem .9rem; border-bottom: 1px solid var(--linie); }
th { font-weight: 700; }
thead th { border-bottom: 2px solid var(--linie-stark); }

/* Listen */
.punkte { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.punkte > li { padding-left: 1.4rem; border-left: 3px solid var(--linie-stark); min-width: 0; }
.punkte h3 { margin-bottom: .4rem; }
.punkte p:last-child { margin-bottom: 0; }

dl.fragen { margin: 2rem 0 0; }
dl.fragen dt { font-weight: 700; margin-top: 1.6rem; }
dl.fragen dd { margin: .5rem 0 0; color: var(--text-leise); max-width: 42em; }

/* Rechtstexte */
.recht h2 { margin-top: 2.5rem; font-size: 1.25rem; }
.recht p, .recht li { max-width: 44em; }

/* Fuss */
.fuss { border-top: 1px solid var(--linie); padding: 2.5rem 0; background: var(--grund-ton); font-size: .9rem; }
.fuss-hinweis { color: var(--text-leise); margin-bottom: 1rem; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.fuss-firma { color: var(--text-still); margin: 0; }

@media (max-width: 34rem) {
  section { padding: 3rem 0; }
  .hero { padding: 3.5rem 0 3rem; }
}