/* =============================================================
   Produktseiten co-co.space

   Gestaltung vollständig abgeleitet aus COORDINATOR/MARKE.md §3–§5,
   freigegeben mit K-10. Nichts hier ist neu erfunden.

   Die eine Regel, die alles zusammenhält:
   GOLD IST DIE EINZIGE HANDELSFARBE. Kaufknopf, Preis, Checkout — sonst
   nichts. Damit ist auf jeder Seite ohne Nachdenken sichtbar, was zum Kauf
   führt und was nur erklärt, und keine Produktfarbe muss die Doppelrolle
   "ich bin dieses Werkzeug" und "hier klicken zum Kaufen" tragen.
   ============================================================= */

:root {
  /* Papier statt Weiß — "der Unterschied zwischen warm und Software" */
  --papier: #FBF8F3;
  --karte: #FFFFFF;
  --flaeche: #F4F0E8;
  --tinte: #2A2724;
  --tinte-2: #514B44;
  --stein: #6B6560;
  --linie: #E4DFD6;
  --linie-2: #D3CCC0;

  /* Eine Farbe je Werkzeug (MARKE §5) */
  --studio: #5F7148;      --studio-f: #E9EDDF;
  --presenter: #4A5F8C;   --presenter-f: #E4E9F4;
  --thoughtspace: #4F6470; --thoughtspace-f: #E6EBEE;
  --interactive: #A55A45; --interactive-f: #F7E8E3;

  /* Handel */
  --gold: #C79A4A;        --gold-f: #F6EEDF;
  --gold-tinte: #2A2724;

  --eigen: var(--tinte);
  --eigen-f: var(--flaeche);

  --mass: 65ch;
  --bahn: 1080px;
  --bahn-schmal: 720px;
  --rund: 9px;
  --schatten: 0 1px 2px rgba(42, 39, 36, .05), 0 10px 30px -20px rgba(42, 39, 36, .35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #1C1A17;
    --karte: #252220;
    --flaeche: #2E2A26;
    --tinte: #F0EBE3;
    --tinte-2: #C6BEB3;
    --stein: #9A9188;
    --linie: #38332E;
    --linie-2: #4A443D;

    --studio: #9DB47F;      --studio-f: #2C3325;
    --presenter: #8CA3D6;   --presenter-f: #242A38;
    --thoughtspace: #8FA7B5; --thoughtspace-f: #242C31;
    --interactive: #DE9782; --interactive-f: #382520;

    --gold: #E0B76E;        --gold-f: #37301F;
    --gold-tinte: #1C1A17;

    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -20px rgba(0, 0, 0, .9);
  }
}

:root[data-theme="dark"] {
  --papier: #1C1A17; --karte: #252220; --flaeche: #2E2A26;
  --tinte: #F0EBE3; --tinte-2: #C6BEB3; --stein: #9A9188;
  --linie: #38332E; --linie-2: #4A443D;
  --studio: #9DB47F; --studio-f: #2C3325;
  --presenter: #8CA3D6; --presenter-f: #242A38;
  --thoughtspace: #8FA7B5; --thoughtspace-f: #242C31;
  --interactive: #DE9782; --interactive-f: #382520;
  --gold: #E0B76E; --gold-f: #37301F; --gold-tinte: #1C1A17;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -20px rgba(0, 0, 0, .9);
}

/* ---------- Grundlagen ---------- */

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .q {
  font-family: Quicksand, system-ui, sans-serif;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -.012em;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--gold); }

code, .mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .9em;
}

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.ueberspringen {
  position: absolute; left: -9999px;
  background: var(--tinte); color: var(--papier);
  padding: 10px 18px; border-radius: 0 0 var(--rund) 0; z-index: 10;
}
.ueberspringen:focus { left: 0; top: 0; }

/* ---------- Bahn ---------- */

.bahn { max-width: var(--bahn); margin: 0 auto; padding-inline: 26px; }
.bahn--schmal { max-width: var(--bahn-schmal); }

/* ---------- Kopfleiste ---------- */

.kopfleiste {
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
  position: sticky; top: 0; z-index: 5;
}
.kopfleiste__innen {
  display: flex; align-items: center; gap: 28px;
  min-height: 66px;
}
.wortmarke {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Quicksand, sans-serif; font-weight: 700; font-size: 18px;
  text-decoration: none; color: var(--tinte); letter-spacing: -.02em;
}
.hauptnav { display: flex; gap: 22px; margin-left: auto; font-size: 15.5px; }
.hauptnav a { text-decoration: none; color: var(--tinte-2); }
.hauptnav a:hover { color: var(--tinte); }
.hauptnav a[aria-current="page"] { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--gold); }

/* ---------- Fließtext ---------- */

.fliesstext { max-width: var(--mass); }
.fliesstext > * + * { margin-top: 1.05em; }
.fliesstext p { margin: 0; }
.fliesstext h2 { font-size: 24px; font-weight: 600; margin-top: 1.9em; }
.fliesstext h3 { font-size: 19px; font-weight: 600; margin-top: 1.6em; }
.fliesstext ul, .fliesstext ol { margin: 0; padding-left: 1.3em; }
.fliesstext li + li { margin-top: .38em; }
.fliesstext--gross { font-size: 18.5px; }
.fliesstext strong { font-weight: 600; }

.etikett {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--stein);
  margin-bottom: 14px;
}

.fussnote { font-size: 14.5px; color: var(--stein); max-width: var(--mass); margin: 14px 0 0; }

/* ---------- Startseite ---------- */

.start__kopf { padding: 76px 0 8px; }
.start__kopf h1 {
  font-size: clamp(30px, 5vw, 46px); font-weight: 600; line-height: 1.1;
  max-width: 17ch;
}
.start__kopf p { margin: 20px 0 0; font-size: 19px; color: var(--tinte-2); max-width: 48ch; }

.zeichenreihe { display: flex; gap: 26px; margin-top: 40px; flex-wrap: wrap; }
.zeichenreihe .studio { color: var(--studio); }
.zeichenreihe .presenter { color: var(--presenter); }
.zeichenreihe .thoughtspace { color: var(--thoughtspace); }
.zeichenreihe .interactive { color: var(--interactive); }

.abschnitt { padding: 64px 0; }
.abschnitt--flaeche { background: var(--flaeche); border-block: 1px solid var(--linie); }
.abschnitt__kopf { margin-bottom: 30px; }
.abschnitt__kopf h2 { font-size: 27px; font-weight: 600; }
.abschnitt__kopf p { margin: 10px 0 0; color: var(--tinte-2); max-width: var(--mass); }

/* ---------- Werkzeugkarten ---------- */

.kartenreihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 15px;
}
.karte {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 21px 20px 19px;
  text-decoration: none; color: var(--tinte);
  transition: border-color .13s, transform .13s;
}
.karte:hover { border-color: var(--linie-2); transform: translateY(-2px); }
.karte__kopf { display: flex; align-items: center; gap: 11px; font-family: Quicksand, sans-serif; font-size: 16px; }
.karte__satz { font-size: 15px; color: var(--tinte-2); line-height: 1.45; }
.karte__preis {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--linie);
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
}
.karte__preis em { font-style: normal; color: var(--stein); }

.karte--studio .karte__kopf { color: var(--studio); }
.karte--presenter .karte__kopf { color: var(--presenter); }
.karte--thoughtspace .karte__kopf { color: var(--thoughtspace); }
.karte--interactive .karte__kopf { color: var(--interactive); }

/* ---------- Zusagen ---------- */

.zusagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 30px; }
.zusage h3 { font-size: 17px; font-weight: 600; margin-bottom: 7px; }
.zusage p { margin: 0; font-size: 15.5px; color: var(--tinte-2); }

/* ---------- Kreislauf ---------- */

.kreislauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.kreislauf__schritt { display: flex; flex-direction: column; gap: 9px; }
.kreislauf__schritt h3 { font-size: 17px; font-weight: 600; }
.kreislauf__schritt p { margin: 0; font-size: 15px; color: var(--tinte-2); }
.kreislauf__daneben {
  margin-top: 28px; padding: 18px 22px;
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 3px solid var(--thoughtspace); border-radius: 0 var(--rund) var(--rund) 0;
}
.kreislauf__daneben p { margin: 0; font-size: 15.5px; color: var(--tinte-2); max-width: var(--mass); }

/* ---------- Produktseite ---------- */

.produkt--studio { --eigen: var(--studio); --eigen-f: var(--studio-f); }
.produkt--presenter { --eigen: var(--presenter); --eigen-f: var(--presenter-f); }
.produkt--thoughtspace { --eigen: var(--thoughtspace); --eigen-f: var(--thoughtspace-f); }
.produkt--interactive { --eigen: var(--interactive); --eigen-f: var(--interactive-f); }

.produkt__kopf { background: var(--eigen-f); border-bottom: 1px solid var(--linie); padding: 52px 0; }
.produkt__kopf-innen { display: flex; align-items: center; gap: 22px; color: var(--eigen); }
.produkt__kopf h1 { font-size: clamp(27px, 4vw, 38px); font-weight: 600; color: var(--tinte); }
.produkt__satz { margin: 5px 0 0; font-size: 19px; color: var(--tinte-2); }

.produkt__block { padding: 40px 0; border-bottom: 1px solid var(--linie); }
.produkt__block:last-child { border-bottom: 0; }

.faehigkeiten { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 13px 30px; }
.faehigkeiten li { display: flex; gap: 11px; align-items: flex-start; font-size: 16.5px; }
.faehigkeiten .punktzeichen { flex: none; margin-top: 5px; color: var(--eigen); }

.grenzen {
  background: var(--flaeche); border-left: 3px solid var(--stein);
  padding: 18px 22px; border-radius: 0 var(--rund) var(--rund) 0;
}
.grenzen p { color: var(--tinte-2); }

.produkt__bild { margin: 0; }
.produkt__bild img { border: 1px solid var(--linie-2); border-radius: var(--rund); }
.produkt__bild figcaption { margin-top: 9px; font-size: 14px; color: var(--stein); }

.platzhalter {
  border: 1px dashed var(--linie-2); border-radius: var(--rund);
  padding: 22px 24px; color: var(--stein); font-size: 15px; max-width: var(--mass);
}
.platzhalter strong { display: block; color: var(--tinte-2); margin-bottom: 5px; }

.produkt__nachbarn .kartenreihe { margin-top: 18px; }

/* ---------- Preis ---------- */

.preisblock {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 26px 34px;
  background: var(--gold-f); border: 1px solid var(--gold);
  border-radius: var(--rund); padding: 26px 28px;
}
.preisblock__zahl { display: flex; flex-direction: column; gap: 5px; }
.preisblock__zahl .betrag { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 36px; line-height: 1; }
.preisblock__zahl .art { font-size: 14px; color: var(--tinte-2); }
.preisblock__text { margin: 0; max-width: 40ch; font-size: 15.5px; color: var(--tinte-2); }
.preisblock__knoepfe { display: flex; gap: 11px; flex-wrap: wrap; margin-left: auto; align-items: center; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--gold-tinte);
  font-family: Quicksand, sans-serif; font-weight: 600; font-size: 16px;
  padding: 12px 24px; border-radius: 7px; border: 1px solid var(--gold);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knopf:hover { filter: brightness(.96); }
.knopf--still { background: transparent; color: var(--tinte); border-color: var(--linie-2); }
.knopf--still:hover { border-color: var(--tinte-2); filter: none; }
.knopf--aus { background: transparent; color: var(--stein); border-style: dashed; cursor: not-allowed; }
.knopf--aus:hover { filter: none; }

/* ---------- Daten- und Preistabellen ---------- */

.daten { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; }
.daten > div { background: var(--karte); padding: 15px 19px; }
.daten dt { font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--stein); }
.daten dd { margin: 5px 0 0; font-size: 15.5px; }

.tabelle { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabelle th, .tabelle td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--stein); font-weight: 500; }
.tabelle td.betrag { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabellenrahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--karte); }

/* ---------- Download ---------- */

.dl { border: 1px solid var(--linie-2); border-radius: var(--rund); overflow: hidden;
  background: var(--karte); margin-top: 18px; }
.dl__kopf { display: flex; align-items: center; gap: 16px; padding: 21px 24px; border-bottom: 1px solid var(--linie); }
.dl__kopf .name { font-family: Quicksand, sans-serif; font-weight: 600; font-size: 18px; }
.dl__kopf .system { font-size: 14px; color: var(--stein); }
.dl__kopf .knopf { margin-left: auto; }
.dl__daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px; background: var(--linie); }
.dl__daten > div { background: var(--karte); padding: 14px 24px; }
.dl__daten .l { font-family: "IBM Plex Mono", monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--stein); }
.dl__daten .w { font-family: "IBM Plex Mono", monospace; font-size: 14px; margin-top: 4px; }
.dl__fuss { padding: 13px 24px; background: var(--flaeche); font-size: 12.5px; color: var(--stein); }
.dl__fuss code { word-break: break-all; font-size: 11.5px; }
.dl--offen { border-style: dashed; }
.dl--offen .dl__kopf { border-bottom-style: dashed; }

.hinweis {
  background: var(--flaeche); border: 1px solid var(--linie-2);
  border-radius: var(--rund); padding: 18px 22px; margin-top: 22px;
}
.hinweis p { margin: 0; max-width: var(--mass); font-size: 15.5px; color: var(--tinte-2); }
.hinweis p + p { margin-top: .8em; }

/* ---------- Seite (Textseiten) ---------- */

.seite { padding: 62px 0 88px; }
.seite__kopf { margin-bottom: 34px; }
.seite__kopf h1 { font-size: clamp(28px, 4.4vw, 40px); font-weight: 600; }
.seite__untertitel { margin: 13px 0 0; font-size: 18.5px; color: var(--tinte-2); max-width: 52ch; }

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

.fussleiste { border-top: 1px solid var(--linie); background: var(--flaeche); padding: 52px 0 34px; margin-top: 40px; }
.fussleiste__raster { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.fussleiste__marke p { margin: 12px 0 0; font-size: 15px; color: var(--tinte-2); max-width: 34ch; }
.fussleiste__konzept { font-size: 14.5px; }
.wortmarke--fuss { font-size: 17px; }
.fussleiste__nav { display: flex; flex-direction: column; gap: 8px; }
.fussleiste__nav h2 { font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stein); font-weight: 500; margin-bottom: 4px; }
.fussleiste__nav a { font-size: 15px; color: var(--tinte-2); text-decoration: none; }
.fussleiste__nav a:hover { color: var(--tinte); text-decoration: underline; }
.fussleiste__zeile { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--linie-2);
  font-size: 13.5px; color: var(--stein); }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .hauptnav { gap: 15px; font-size: 14.5px; }
  .kopfleiste__innen { gap: 14px; flex-wrap: wrap; padding-block: 10px; }
  .produkt__kopf-innen { flex-direction: column; align-items: flex-start; gap: 15px; }
  .preisblock__knoepfe { margin-left: 0; width: 100%; }
  .fussleiste__raster { grid-template-columns: 1fr; gap: 30px; }
  .start__kopf { padding-top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  .kopfleiste, .fussleiste, .knopf { display: none; }
  body { background: #fff; color: #000; }
}