/* Erklärschicht — die Legende über dem Artikel.
   Die vier Kategoriefarben sind die Sprache von SEO BASE, nicht die des Kunden:
   sie bleiben über alle Kunden und Branchen hinweg gleich, damit dieselbe Farbe
   immer dieselbe Bedeutung trägt. Die Zuweisung geschieht über data-kategorie,
   damit im erzeugten Dokument kein einziges style-Attribut steht. */

:root {
  /* Jede dieser Farben trägt weiße Ziffern und steht zugleich selbst als Text
     auf der weißen Tafel. Beides verlangt dasselbe: 4,5 zu 1 gegen Weiß. Grün
     und Orange lagen in ihrer üblichen Fassung bei 2,9 — hell genug, dass die
     Ziffer darin verschwimmt. Sie sind hier so weit nachgedunkelt, dass sie die
     Grenze halten, und nicht weiter; der Farbton ist derselbe geblieben. */
  --kat-seo: #0070b9;
  --kat-cvr: #1e874b;
  --kat-ux:  #b2611a;
  --kat-copy:#8e44ad;
  --tafel-breite: clamp(300px, 26vw, 360px);
}

[data-kategorie="SEO"]  { --kat: var(--kat-seo); }
[data-kategorie="CVR"]  { --kat: var(--kat-cvr); }
[data-kategorie="UX"]   { --kat: var(--kat-ux); }
[data-kategorie="COPY"] { --kat: var(--kat-copy); }

/* ── Einblender für die Strukturdaten ─────────────────────────────────── */
/* Der Verlauf dunkelt nach, statt aufzuhellen. Vorher endete er bei 70 Prozent
   Markenton auf Weiß — genau dort war die helle Schrift am schlechtesten zu
   lesen, und gerechnet war nie gegen dieses Ende. */
#pitch-schema {
  background: linear-gradient(135deg, var(--marke-primaer-flaeche) 0%, color-mix(in srgb, var(--marke-primaer-flaeche) 78%, #000) 100%);
  padding: 20px 24px 22px; border-radius: 4px; margin-bottom: 32px;
}
.pitch-schema-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-leise); margin-bottom: 6px;
}
.pitch-schema-titel { font-size: 0.95rem; font-weight: 700; margin-bottom: 14px; line-height: 1.4; }
/* Jeder Eintrag nennt einen Typ und wofür er gut ist. Als Pille in einer Reihe
   passte nur der Typ hinein; der Satz daneben lief aus dem Kasten heraus.
   Jetzt steht jeder Eintrag in einem eigenen Feld, der Name oben, der Satz
   darunter, und beides darf umbrechen. */
.pitch-schema-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; margin: 0; padding: 0; list-style: none;
}
.pitch-schema-liste li {
  background: var(--flaeche-leise); border: 1px solid var(--linie);
  border-radius: 4px; padding: 10px 13px;
  font-size: 0.72rem; line-height: 1.55; font-weight: 400;
}
.pitch-schema-nutzen { display: block; color: var(--text-weich); }
.pitch-schema-liste strong {
  display: block; margin-bottom: 3px;
  color: var(--akzent-schrift); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.01em;
}

/* ── Schalter ─────────────────────────────────────────────────────────── */
.seite-kopf { z-index: 600; }

.pitch-schalter {
  position: fixed; right: 24px; z-index: 500;
  border: none; padding: 10px 18px;
  font-family: var(--schrift); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; border-radius: 3px; text-decoration: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.pitch-schalter { bottom: 24px; background: var(--marke-primaer-flaeche); color: var(--auf-primaer); }
.pitch-schalter[aria-pressed="true"] { background: var(--marke-akzent-flaeche); color: var(--auf-akzent); }
.pitch-schalter:hover { opacity: 0.88; }

body.erklaerschicht-an .pitch-schalter { right: calc(var(--tafel-breite) + 20px); }

/* Der Schalter schwebt über der Seite. Damit er am Ende nicht auf dem letzten
   Absatz liegt, reserviert die Seite unten so viel Platz, wie er hoch ist.
   Die Klasse setzt das Skript, sobald es den Schalter angelegt hat — ohne
   Skript gibt es keinen Schalter und also auch nichts zu reservieren. */
body.hat-pitch-schalter { padding-bottom: 88px; }

/* ── Tafel ───────────────────────────────────────────────────────────── */
.pitch-tafel {
  display: none;
  position: fixed; right: 0; top: var(--kopf-hoehe);
  width: var(--tafel-breite); height: calc(100vh - var(--kopf-hoehe));
  background: var(--flaeche); border-left: 1px solid var(--linie);
  box-shadow: -4px 0 20px rgba(0,0,0,0.07);
  flex-direction: column; z-index: 450; overflow: hidden;
}
body.erklaerschicht-an { padding-right: var(--tafel-breite); }
body.erklaerschicht-an .pitch-tafel { display: flex; }

.pitch-tafel-kopf {
  padding: 12px 16px 10px; border-bottom: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; gap: 8px;
}
.pitch-marke {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-leise);
}
.pitch-blaettern { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pitch-blaettern button {
  background: none; border: 1px solid var(--linie); width: 28px; height: 28px;
  border-radius: 3px; cursor: pointer; font-size: 1rem; color: var(--text-leise);
  display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.pitch-blaettern button:hover { background: var(--flaeche-leise); border-color: var(--text-leise); }
.pitch-zaehler { font-size: 0.68rem; font-weight: 700; color: var(--text-leise); min-width: 44px; text-align: center; }

.pitch-tafel-koerper { flex: 1; overflow: hidden; position: relative; }

.pitch-karte { display: none; position: absolute; inset: 0; padding: 22px 20px 20px; overflow-y: auto; }
.pitch-karte[aria-hidden="false"] { display: block; }
.pitch-karte-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--kat); margin-bottom: 8px;
}
.pitch-karte-kat {
  display: block; font-size: 0.57rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 8px; color: var(--kat);
}
.pitch-karte-titel { font-size: 0.87rem; font-weight: 700; color: var(--text); margin: 0 0 12px; line-height: 1.45; }
.pitch-karte-punkte {
  font-size: 0.775rem; line-height: 1.6; color: var(--text-weich);
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px;
}
.pitch-karte-punkte li { padding: 0; line-height: 1.5; }
.pitch-karte-punkte strong { color: var(--text); font-weight: 700; }
.pitch-karte-symbol { margin-right: 4px; }

.pitch-punkte-leiste {
  padding: 10px 14px; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0;
}
/* Die ruhenden Punkte standen vorher auf 55 Prozent Deckkraft. Das mischt die
   Fläche zur Tafel hin auf, während die Ziffer weiß bleibt — der Abstand
   zwischen beiden fällt damit unter jede brauchbare Grenze, und zwar gerade
   bei den vielen Punkten, die noch nicht gelesen sind. Der laufende Punkt hebt
   sich deshalb durch einen Ring ab statt durch die Schwäche der anderen. */
.pitch-punkt {
  width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--kat);
  font-size: 0.6rem; font-weight: 700; color: #fff; cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.pitch-punkt[aria-current="true"] {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--kat);
}
.pitch-punkt:hover { transform: scale(1.1); }

/* ── Nummern am annotierten Element ──────────────────────────────────── */
.pitch-markiert { position: relative; }
.pitch-nummer {
  display: none; position: absolute; right: -11px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--flaeche); background: var(--kat);
  font-size: 0.6rem; font-weight: 700; color: #fff; z-index: 50;
  box-shadow: 0 1px 5px rgba(0,0,0,0.22);
  transition: transform 0.15s, box-shadow 0.15s;
  align-items: center; justify-content: center; pointer-events: none; line-height: 1;
}
.pitch-nummer[data-aktiv="ja"] {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 0 12px 2px var(--kat);
  transform: translateY(-50%) scale(1.25);
}
body.erklaerschicht-an .pitch-nummer { display: flex; }

/* ── Schmale Fenster ─────────────────────────────────────────────────── */
/* Neben dem Text ist kein Platz mehr für eine Spalte, also kommt die Tafel von
   unten. Sie vorher ganz abzuschalten war der eigentliche Fehler: der Schalter
   blieb sichtbar, versprach Erklärungen und schaltete etwas ein, das niemand
   sehen konnte. Jetzt gilt überall dasselbe — ein Druck, eine Tafel. */
@media (max-width: 1060px) {
  body.erklaerschicht-an { padding-right: 0; }
  .pitch-tafel {
    right: 0; left: 0; top: auto; bottom: 0;
    width: auto; height: min(62vh, 520px);
    border-left: none; border-top: 1px solid var(--linie);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
  }
  .pitch-schalter { bottom: 16px; right: 16px; }
  /* Solange die Tafel offen ist, sitzt der Schalter über ihrer Kante. */
  body.erklaerschicht-an .pitch-schalter { right: 16px; bottom: calc(min(62vh, 520px) + 12px); }
  /* Die offene Tafel liegt über dem Text, nicht neben ihm. Ohne diesen
     Ausgleich endet der Artikel hinter ihr: die letzten Absätze lassen sich
     nicht mehr herunterscrollen, weil unter ihnen nichts mehr kommt. */
  body.erklaerschicht-an.hat-pitch-schalter {
    padding-bottom: calc(min(62vh, 520px) + 72px);
  }
}

/* Ab hier ist die Lesespalte so schmal, dass ein schwebender Knopf immer auf
   einem Satz liegt. Er wird deshalb zur Leiste über die volle Breite: eigene
   Fläche, eigene Oberkante, der Text endet darüber statt darunter. */
@media (max-width: 768px) {
  .pitch-schalter {
    left: 0; right: 0; bottom: 0;
    border-radius: 0; text-align: center;
    padding: 14px 18px;
    border-top: 1px solid color-mix(in srgb, var(--auf-primaer) 24%, transparent);
    box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.18);
  }
  body.erklaerschicht-an .pitch-schalter {
    right: 0; bottom: min(62vh, 520px);
    border-top: 1px solid color-mix(in srgb, var(--auf-akzent) 24%, transparent);
  }
  /* Leiste und Tafel stehen hier übereinander und nehmen zusammen mehr Platz
     als der schmale Knopf davor. */
  body.erklaerschicht-an.hat-pitch-schalter {
    padding-bottom: calc(min(62vh, 520px) + 80px);
  }
}

/* Auf dem Telefon nimmt der Schalter sonst die halbe Lesespalte ein. Er wird
   kürzer und bricht notfalls um, statt über den Rand hinauszustehen. */
@media (max-width: 560px) {
  /* Der Marker steht sonst 11 Pixel weiter außen als der Absatz. Bei vollem
     Seitenrand fällt das in den Rand; ist der Rand auf dem Telefon knapp,
     ragte er über die Kante. Hier rückt er in den Text hinein. */
  .pitch-nummer { right: -2px; }
  .pitch-schalter {
    padding: 13px 14px; font-size: 0.66rem; letter-spacing: 0.06em;
  }
  body.hat-pitch-schalter { padding-bottom: 76px; }
  body.erklaerschicht-an.hat-pitch-schalter {
    padding-bottom: calc(min(62vh, 520px) + 68px);
  }
}
/* Beim Drucken stört die Bedienschicht */
@media print {
  .pitch-schalter, .pitch-tafel, .pitch-nummer { display: none !important; }
  body.erklaerschicht-an { padding-right: 0; }
  body.hat-pitch-schalter, body.erklaerschicht-an.hat-pitch-schalter { padding-bottom: 0; }
}