@import "../tokens/tokens.css";
@import "../dashboard/styles.css";

/*
 * Öffentliche Seiten — Shop, Wiki, Landing.
 *
 * ── Die Formensprache: plastisch ────────────────────────────────────────
 *
 * Die öffentlichen Seiten sprechen die Sprache des Spiels: Flächen stehen auf
 * einer harten Schattenkante wie Blöcke, Knöpfe sinken beim Drücken darauf ab,
 * die Marke sitzt als Verlauf auf Balken und Knöpfen. Das ist eine
 * Entscheidung, keine Nachlässigkeit — der Shop lief so seit dem Start, und
 * die Wiedererkennung mit dem Spiel ist auf einer Verkaufsseite mehr wert als
 * die Zurückhaltung des Panels. Eine frühere Fassung dieser Datei hat das
 * Gegenteil versucht; sie ist verworfen.
 *
 * Das Panel bleibt davon unberührt: dort arbeitet man acht Stunden, dort gilt
 * die ruhige Formensprache aus dashboard/styles.css. Zwei Erscheinungen, ein
 * Satz Tokens — Farben, Abstände, Schrift und Radien kommen weiter aus
 * tokens.css, nur die Oberfläche darüber ist hier eine andere.
 *
 * ── Die drei Regeln der plastischen Schicht ─────────────────────────────
 *
 * 1. **Die Kante ist der Stil.** Jede plastische Fläche hat genau eine harte
 *    Schattenkante nach unten (`0 Npx 0 <kante>`), nie einen weichen Schatten
 *    dazu. Weich und hart gemischt sieht nach Fehler aus.
 *
 * 2. **Die Marke ist Verlauf, nicht Fläche.** Balken und Knöpfe tragen den
 *    Verlauf hell→Marke. Karten bleiben dunkel — eine ganz eingefärbte Karte
 *    macht den Preis unlesbar. Die eine Ausnahme ist die hervorgehobene
 *    Produktkarte, und genau deshalb trägt sie.
 *
 * 3. **Gedrückt heißt unten.** :active nimmt die Kante weg und versetzt das
 *    Element um die Kantenhöhe nach unten. Das ist die ganze Mechanik; mehr
 *    Bewegung braucht es nicht.
 */

/* ═══ Plastik-Tokens ════════════════════════════════════════════════════
   Die Werte der plastischen Schicht, abgeleitet aus den Grundtokens. Nur hier
   und nicht in tokens.css: das Panel kennt keine Plastik-Kanten, und ein
   Token, das nur eine Oberfläche benutzt, gehört zu dieser Oberfläche. */
:root {
  --my-plastik-hell: var(--my-n-850);
  --my-plastik: var(--my-n-900);
  --my-plastik-kante: var(--my-n-1000);
  --my-plastik-verlauf: linear-gradient(180deg, var(--my-plastik-hell) 0%, var(--my-plastik) 100%);

  /* Höhe der Kopfzeile — als Token, damit klebende Leisten darunter andocken
     können, statt die 4rem zu raten und beim nächsten Umbau dahinter zu
     verschwinden. */
  --my-kopfleiste: 4rem;

  --my-marke-hell: var(--my-brand-400);
  --my-marke-kante: var(--my-brand-700);
  --my-marke-verlauf: linear-gradient(180deg, var(--my-brand-400) 0%, var(--my-brand-500) 100%);
  --my-marke-verlauf-quer: linear-gradient(135deg, var(--my-brand-400) 0%, var(--my-brand-500) 100%);
  --my-marke-schein: rgba(var(--my-brand-rgb), 0.3);

  /* Kräftige Signaltöne — nur für Meldungen der plastischen Schicht. Die
     gedämpften Töne aus tokens.css sind für Flächen gedacht, die man acht
     Stunden ansieht; ein Toast steht zweieinhalb Sekunden und darf knallen.
     Werte wie im Shop, jeweils Fläche und Kante. */
  --my-plastik-erfolg: #22c55e;
  --my-plastik-erfolg-kante: #16a34a;
  --my-plastik-gefahr: #ef4444;
  --my-plastik-gefahr-kante: #dc2626;
  --my-plastik-warnung: #f59e0b;
  --my-plastik-warnung-kante: #b45309;
}
[data-theme="light"] {
  --my-plastik-hell: var(--my-n-0);
  --my-plastik: var(--my-n-50);
  --my-plastik-kante: var(--my-n-300);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --my-plastik-hell: var(--my-n-0);
    --my-plastik: var(--my-n-50);
    --my-plastik-kante: var(--my-n-300);
  }
}

/* ═══ Plastikfläche ═════════════════════════════════════════════════════
   Die Grundfläche der öffentlichen Seiten: Verlauf von hell nach dunkel,
   eine harte Kante darunter. Produktkarten, Leisten und Plaketten bauen
   darauf auf. */
.my-plastikflaeche {
  position: relative;
  overflow: hidden;
  border-radius: var(--my-r-lg);
  background: var(--my-plastik-verlauf);
  box-shadow: 0 6px 0 var(--my-plastik-kante);
}

/* ═══ Blockknopf ════════════════════════════════════════════════════════
   Der Knopf der öffentlichen Seiten. Versalien, Verlauf, Kante — und beim
   Drücken sinkt er um die Kantenhöhe ab. Der Panel-Button bleibt, was er
   ist; dieser hier ist die Handlung auf einer Verkaufsseite. */
.my-blockknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--my-s-2);
  border: none;
  cursor: pointer;
  border-radius: var(--my-r-md);
  font-weight: var(--my-gewicht-halbfett);
  letter-spacing: var(--my-lw-weit);
  text-transform: uppercase;
  color: var(--my-text-auf-voll);
  background: var(--my-marke-verlauf);
  box-shadow: 0 4px 0 var(--my-marke-kante), 0 0 20px var(--my-marke-schein);
  transform: translateY(0);
  transition: transform var(--my-zeit-schnell) var(--my-kurve),
              filter var(--my-zeit-schnell) var(--my-kurve),
              box-shadow var(--my-zeit-schnell) var(--my-kurve);
}
.my-blockknopf:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--my-marke-kante), 0 0 30px var(--my-marke-schein);
}
.my-blockknopf:active {
  filter: brightness(1);
  transform: translateY(4px);
  box-shadow: 0 0 0 transparent;
}
.my-blockknopf:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .my-blockknopf, .my-blockknopf:hover, .my-blockknopf:active { transform: none; }
}

/* Größen. md ist der Kaufknopf; sm für Nebensächliches, lg für den Held. */
.my-blockknopf[data-groesse="sm"] { padding: var(--my-s-2) var(--my-s-4); font-size: var(--my-t-xs); min-height: 40px; }
.my-blockknopf[data-groesse="md"] { padding: var(--my-s-3) var(--my-s-6); font-size: var(--my-t-md); min-height: var(--my-tippziel); }
.my-blockknopf[data-groesse="lg"] { padding: var(--my-s-4) var(--my-s-8); font-size: var(--my-t-lg); min-height: 52px; }
.my-blockknopf[data-breit="ja"] { display: flex; width: 100%; }

/* Varianten. Der Verlauf wandert, die Mechanik bleibt. */
.my-blockknopf[data-variante="flaeche"] {
  background: var(--my-plastik-verlauf);
  color: var(--my-text);
  box-shadow: 0 4px 0 var(--my-plastik-kante);
}
.my-blockknopf[data-variante="flaeche"]:hover { box-shadow: 0 6px 0 var(--my-plastik-kante); }
.my-blockknopf[data-variante="flaeche"]:active { box-shadow: 0 0 0 transparent; }

/* Auf einer farbigen Fläche (Rang-Karte, Kisten-Karte): durchscheinend, die
   Kante aus Schwarz — die Fläche darunter gibt die Farbe. */
.my-blockknopf[data-variante="durchscheinend"] {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.1);
}
.my-blockknopf[data-variante="durchscheinend"]:hover {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 0 25px rgba(255, 255, 255, 0.3);
}
.my-blockknopf[data-variante="durchscheinend"]:active { box-shadow: 0 0 0 transparent; }

.my-blockknopf[data-variante="gefahr"] {
  background: linear-gradient(180deg, var(--my-gefahr-schrift) 0%, var(--my-gefahr) 100%);
  box-shadow: 0 4px 0 var(--my-gefahr-rand), 0 0 20px rgba(0, 0, 0, 0.2);
}
.my-blockknopf[data-variante="gefahr"]:hover { box-shadow: 0 6px 0 var(--my-gefahr-rand), 0 0 20px rgba(0, 0, 0, 0.2); }
.my-blockknopf[data-variante="gefahr"]:active { box-shadow: 0 0 0 transparent; }

/* Weiß — für den Kaufknopf auf der hervorgehobenen Karte: auf dem
   Markenverlauf wäre ein Markenknopf unsichtbar. */
.my-blockknopf[data-variante="hell"] {
  background: linear-gradient(180deg, var(--my-n-0) 0%, var(--my-n-100) 100%);
  color: var(--my-brand-800);
  box-shadow: 0 4px 0 var(--my-n-300), 0 0 20px rgba(255, 255, 255, 0.3);
}
.my-blockknopf[data-variante="hell"]:hover { box-shadow: 0 6px 0 var(--my-n-300), 0 0 30px rgba(255, 255, 255, 0.5); }
.my-blockknopf[data-variante="hell"]:active { box-shadow: 0 0 0 transparent; }

/* Eigener Verlauf — Rang-Farben, Kisten-Farben. Die Werte kommen als
   Custom Properties vom Aufrufer; die Kante rechnet die Komponente. */
.my-blockknopf[data-variante="verlauf"] {
  background: linear-gradient(180deg, var(--my-knopf-hell) 0%, var(--my-knopf-grund) 100%);
  box-shadow: 0 4px 0 var(--my-knopf-kante), 0 0 20px rgba(255, 255, 255, 0.1);
}
.my-blockknopf[data-variante="verlauf"]:hover { box-shadow: 0 6px 0 var(--my-knopf-kante), 0 0 20px rgba(255, 255, 255, 0.2); }
.my-blockknopf[data-variante="verlauf"]:active { box-shadow: 0 0 0 transparent; }

/* ═══ Sektionsbalken ════════════════════════════════════════════════════
   Der Kapiteltitel einer Verkaufsseite: ein Balken im Markenverlauf, Symbol
   und Titel in Versalien mittig. Er ist laut, und das darf er — er ist die
   Gliederung, nicht der Inhalt. Rechts ist Platz für einen Umschalter oder
   eine Plakette.

   Klasse heißt `my-sektionsbalken`, nicht `my-balken`: Letzteres ist im
   Dashboard bereits der Fortschrittsbalken (Balken in Laden.tsx). Beide
   liefen in derselben Datei zusammen — public.css importiert dashboard.css
   — und diese Regeln hier überschrieben bis 11.08.2026 jeden Fortschritts-
   balken irgendwo im Dokument mit Kapitelbalken-Optik (Innenabstand,
   Markenverlauf, harte Kante), sobald public.css geladen war. */
.my-sektionsbalken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--my-s-3);
  border-radius: var(--my-r-lg);
  padding: var(--my-s-4) var(--my-s-5);
  color: var(--my-text-auf-voll);
  background: var(--my-marke-verlauf-quer);
  box-shadow: 0 4px 0 var(--my-marke-kante);
}
.my-sektionsbalken[data-verlauf="eigen"] {
  background: linear-gradient(135deg, var(--my-balken-1) 0%, var(--my-balken-2) 100%);
  box-shadow: 0 4px 0 var(--my-balken-kante);
}
.my-sektionsbalken-titel {
  min-width: 0;
  font-size: var(--my-t-2xl);
  font-weight: var(--my-gewicht-fett);
  text-transform: uppercase;
  letter-spacing: var(--my-lw-weit);
  /* Lange Titel („Allgemeine Geschäftsbedingungen") brechen ausgewogen um,
     statt eine Zeile fast leer zu lassen — und das Symbol bleibt neben dem
     Block statt allein auf einer Zeile. */
  text-wrap: balance;
  text-align: center;
}
@media (max-width: 639px) {
  .my-sektionsbalken-titel { font-size: var(--my-t-xl); }
}
.my-sektionsbalken-rechts { margin-inline-start: auto; display: flex; align-items: center; gap: var(--my-s-2); }

/* ═══ Infoband ══════════════════════════════════════════════════════════
   Eine Zeile über der Seite: Symbol und Satz auf dem Markenverlauf. Für die
   eine Botschaft, die jeder sehen soll — Donator-Vorteil, Sale. Mehr als
   eines übereinander, und keines wird gelesen. */
.my-infoband {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--my-s-3);
  border-radius: var(--my-r-lg);
  padding: var(--my-s-4) var(--my-s-5);
  color: var(--my-text-auf-voll);
  background: var(--my-marke-verlauf-quer);
  box-shadow: 0 4px 0 var(--my-marke-kante);
  text-align: center;
  font-weight: var(--my-gewicht-mittel);
}
.my-infoband[data-verlauf="eigen"] {
  background: linear-gradient(135deg, var(--my-balken-1) 0%, var(--my-balken-2) 100%);
  box-shadow: 0 4px 0 var(--my-balken-kante);
}
.my-infoband-symbol { flex-shrink: 0; display: inline-flex; }

/* ═══ Schleifen ═════════════════════════════════════════════════════════
   Die Bonusschleife liegt gedreht über der oberen linken Ecke, das Eckband
   über der rechten. Beide brauchen eine Fläche mit `overflow: hidden` und
   `position: relative` — die Plastikfläche bringt beides mit.

   Eine Schleife je Karte. Zwei Schleifen übertönen einander, und die Karte
   sieht aus wie ein Marktstand. */
.my-bonusschleife {
  position: absolute;
  top: 18px;
  left: -40px;
  width: 160px;
  padding: var(--my-s-2) 0;
  z-index: 1;
  text-align: center;
  transform: rotate(-45deg);
  font-size: var(--my-t-sm);
  font-weight: var(--my-gewicht-fett);
  color: var(--my-text-auf-voll);
  background: var(--my-marke-verlauf-quer);
  box-shadow: 0 3px 0 var(--my-marke-kante);
  pointer-events: none;
}
.my-bonusschleife[data-verlauf="eigen"] {
  background: linear-gradient(135deg, var(--my-schleife-1) 0%, var(--my-schleife-2) 100%);
  box-shadow: 0 3px 0 var(--my-schleife-kante);
}
.my-eckband {
  position: absolute;
  top: 18px;
  right: -40px;
  width: 160px;
  padding: var(--my-s-2) 0;
  z-index: 1;
  text-align: center;
  transform: rotate(45deg);
  font-size: var(--my-t-xs);
  font-weight: var(--my-gewicht-fett);
  text-transform: uppercase;
  letter-spacing: var(--my-lw-weit);
  color: #78350f;
  background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%);
  box-shadow: 0 3px 0 #b45309;
  pointer-events: none;
}

/* ═══ Untere Navigation ═════════════════════════════════════════════════
   Die schwebende Pille am unteren Rand: ein Reiter je Abschnitt, der aktive
   trägt den Markenverlauf. Sie ersetzt auf einer langen Verkaufsseite das
   Inhaltsverzeichnis — immer erreichbar, ein Daumen genügt. */
.my-untennav {
  position: fixed;
  bottom: calc(var(--my-s-6) + var(--my-unten));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--my-e-klebend);
  display: flex;
  gap: var(--my-s-1);
  padding: var(--my-s-2);
  border-radius: var(--my-r-lg);
  background: var(--my-plastik-verlauf);
  box-shadow: 0 4px 0 var(--my-plastik-kante);
  max-width: calc(100vw - var(--my-s-8));
  overflow-x: auto;
  scrollbar-width: none;
}
.my-untennav::-webkit-scrollbar { display: none; }
/* Im Schaukasten und überall, wo die Leiste nur gezeigt wird: an Ort und
   Stelle statt schwebend. */
.my-untennav[data-schwebt="nein"] { position: static; transform: none; max-width: 100%; }
.my-navpille {
  flex-shrink: 0;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  background: transparent;
  padding: var(--my-s-3) var(--my-s-5);
  border-radius: var(--my-r-md);
  font-size: var(--my-t-md);
  font-weight: var(--my-gewicht-halbfett);
  color: var(--my-text-2);
  min-height: 40px;
  transition: color var(--my-zeit-schnell) var(--my-kurve);
}
.my-navpille:hover { color: var(--my-text); }
.my-navpille[data-aktiv="ja"] {
  color: var(--my-text-auf-voll);
  background: var(--my-marke-verlauf);
  box-shadow: 0 3px 0 var(--my-marke-kante);
}

/* Auch auf dem Telefon bleibt die Leiste eine schwebende Pille — die
   angedockte Volle-Breite-Variante wirkte wie ein Fremdkörper im Plastik-
   Look. Damit trotzdem alle Reiter ohne Wischen erreichbar sind, wird die
   Pille kompakt; läuft sie doch über, bleibt sie wischbar. */
@media (max-width: 639px) {
  .my-untennav:not([data-schwebt="nein"]) {
    bottom: calc(var(--my-s-4) + var(--my-unten));
    max-width: calc(100vw - var(--my-s-6));
    padding: var(--my-s-1_5);
  }
  .my-untennav:not([data-schwebt="nein"]) .my-navpille {
    padding: var(--my-s-2) var(--my-s-3);
    font-size: var(--my-t-sm);
    min-height: 44px;
  }
}

/* ═══ Blockfeld ═════════════════════════════════════════════════════════
   Eingabefelder auf öffentlichen Seiten: eingesenkt statt aufgesetzt — das
   Gegenstück zur Kante der Knöpfe. Als Zusatzklasse auf das Feld aus dem
   Dashboard gelegt, damit Zustände und Zugänglichkeit von dort kommen. */
.my-feld.my-blockfeld {
  background: var(--my-plastik);
  border: 2px solid var(--my-plastik-hell);
  border-radius: var(--my-r-md);
  box-shadow: var(--my-schatten-innen);
  min-height: 52px;
}

/* ═══ Preis ═════════════════════════════════════════════════════════════ */
.my-preis { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--my-s-2); }
.my-preis-wert { font-weight: var(--my-gewicht-fett); color: var(--my-text); }
.my-preis-vorher { color: var(--my-text-3); }
.my-preis-rabatt {
  padding: 0.0625rem var(--my-s-1_5);
  border-radius: var(--my-r-sm);
  background: var(--my-gefahr-flaeche);
  color: var(--my-gefahr-schrift);
  border: 1px solid var(--my-gefahr-rand);
  font-weight: var(--my-gewicht-fett);
}

/* ═══ Produktkarte ══════════════════════════════════════════════════════
   Drei Flächen, eine Karte:

     dunkel    der Normalfall — Plastikfläche, der Inhalt trägt
     marke     die eine hervorgehobene Karte der Seite („Beste Wahl")
     verlauf   Rang- und Kistenkarten — die Produktfarbe als ganze Fläche;
               diese Farben sind eine eigene Palette und kein Markenersatz

   Der Kaufknopf sitzt unten und ist immer gleich breit — auch wenn eine
   Karte drei Merkmale hat und die daneben sieben. Deshalb margin-top: auto
   in einer Spalte voller Höhe. */
.my-produkt {
  display: flex;
  height: 100%;
  flex-direction: column;
  transition: transform var(--my-zeit) var(--my-kurve), filter var(--my-zeit) var(--my-kurve);
}
.my-produkt:hover { transform: translateY(-2px); filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) { .my-produkt:hover { transform: none; } }

.my-produkt[data-flaeche="marke"] {
  background: var(--my-marke-verlauf);
  box-shadow: 0 6px 0 var(--my-marke-kante);
}
.my-produkt[data-flaeche="verlauf"] {
  background: linear-gradient(135deg, var(--my-produkt-1) 0%, var(--my-produkt-2) 100%);
  box-shadow: 0 6px 0 var(--my-produkt-kante);
}
.my-produkt-bild { display: flex; align-items: center; justify-content: center; padding: var(--my-s-6) var(--my-s-5) 0; }
.my-produkt-rumpf { display: flex; flex: 1; flex-direction: column; padding: var(--my-s-6); }
/* Mit Schleife, aber ohne Bild: der Name stünde oben links genau unter dem
   gedrehten Band. Luft nach oben schafft den Platz, den sonst das Bild
   schaffen würde. */
.my-produkt[data-bonus="ja"]:not([data-bild="ja"]) .my-produkt-rumpf { padding-top: var(--my-s-12); }
/* Zentriert — für Karten ohne Bild. Nur der Text wandert in die Mitte;
   Knöpfe und Listen behalten ihre Breite. */
.my-produkt[data-zentriert="ja"] .my-produkt-rumpf { text-align: center; }
.my-produkt[data-zentriert="ja"] .my-merkmal { justify-content: center; }
.my-produkt-name { font-weight: var(--my-gewicht-fett); color: var(--my-text); }
.my-produkt-text { margin-top: var(--my-s-1); color: var(--my-text-3); }
.my-produkt-preis { margin-top: var(--my-s-3); }
.my-produkt-fuss { margin-top: auto; padding-top: var(--my-s-5); }
.my-produkt-knopf-zweit { margin-top: var(--my-s-2); }

/* Auf farbiger Fläche: weiße Schrift, Deckkraft statt Grautöne. */
.my-produkt[data-flaeche="marke"] .my-produkt-name,
.my-produkt[data-flaeche="verlauf"] .my-produkt-name,
.my-produkt[data-flaeche="marke"] .my-preis-wert,
.my-produkt[data-flaeche="verlauf"] .my-preis-wert { color: var(--my-text-auf-voll); }
.my-produkt[data-flaeche="marke"] .my-produkt-text,
.my-produkt[data-flaeche="verlauf"] .my-produkt-text,
.my-produkt[data-flaeche="marke"] .my-preis-vorher,
.my-produkt[data-flaeche="verlauf"] .my-preis-vorher { color: rgba(255, 255, 255, 0.75); }

/* Merkmalsliste mit Haken. */
.my-merkmale { display: flex; flex-direction: column; gap: var(--my-s-2); margin-top: var(--my-s-4); }
.my-merkmal { display: flex; gap: var(--my-s-2); color: var(--my-text-2); }
.my-merkmal-haken { color: var(--my-brand-300); }
.my-produkt[data-flaeche="marke"] .my-merkmal,
.my-produkt[data-flaeche="verlauf"] .my-merkmal { color: rgba(255, 255, 255, 0.85); }
.my-produkt[data-flaeche="marke"] .my-merkmal-haken,
.my-produkt[data-flaeche="verlauf"] .my-merkmal-haken { color: var(--my-text-auf-voll); }

/* ═══ Preistafel ════════════════════════════════════════════════════════
   Drei Tarife sind die übliche Zahl: bei zwei fehlt der Vergleich, ab vier
   fängt man an zu rechnen statt zu wählen. Der empfohlene trägt die Marke. */
.my-preistafel {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--my-s-5);
}
.my-tarif { display: flex; flex-direction: column; padding: var(--my-s-6); }
.my-tarif[data-hervor="ja"] {
  background: var(--my-marke-verlauf);
  box-shadow: 0 6px 0 var(--my-marke-kante);
}
.my-tarif[data-hervor="ja"] .my-produkt-name,
.my-tarif[data-hervor="ja"] .my-preis-wert,
.my-tarif[data-hervor="ja"] .my-merkmal-haken { color: var(--my-text-auf-voll); }
.my-tarif[data-hervor="ja"] .my-produkt-text,
.my-tarif[data-hervor="ja"] .my-tarif-zeitraum { color: rgba(255, 255, 255, 0.75); }
.my-tarif[data-hervor="ja"] .my-merkmal { color: rgba(255, 255, 255, 0.85); }
.my-tarif-hinweis {
  align-self: flex-start;
  padding: 0.125rem var(--my-s-2);
  border-radius: var(--my-r-voll);
  background: var(--my-gewaehlt);
  color: var(--my-brand-300);
  font-weight: var(--my-gewicht-halbfett);
  letter-spacing: var(--my-lw-weit);
  text-transform: uppercase;
  margin-bottom: var(--my-s-3);
}
.my-tarif[data-hervor="ja"] .my-tarif-hinweis {
  background: rgba(255, 255, 255, 0.2);
  color: var(--my-text-auf-voll);
}
.my-tarif-preis { display: flex; align-items: baseline; gap: var(--my-s-1); margin-top: var(--my-s-4); }
.my-tarif-zeitraum { color: var(--my-text-3); }
.my-tarif .my-merkmale { margin-top: var(--my-s-5); }
.my-tarif-fuss { margin-top: auto; padding-top: var(--my-s-6); }

/* ═══ Abschnitt ═════════════════════════════════════════════════════════
   Öffentliche Seiten atmen mehr als ein Panel. */
.my-abschnitt { padding-block: var(--my-s-16); }
@media (max-width: 639px) { .my-abschnitt { padding-block: var(--my-s-10); } }

.my-abschnitt-streifen { margin-inline: auto; width: 100%; max-width: var(--my-inhalt); }
.my-abschnitt-streifen[data-breit="ja"] { max-width: 84rem; }
.my-abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--my-s-4);
  margin-bottom: var(--my-s-8);
}
.my-abschnitt-titel { font-weight: var(--my-gewicht-fett); color: var(--my-text); }
/* 52 Zeichen: eine Unterzeile, die breiter läuft als die Überschrift darüber,
   sieht aus, als gehöre sie nicht dazu. */
.my-abschnitt-unterzeile { margin-top: var(--my-s-2); color: var(--my-text-2); max-width: 52ch; }

/* ═══ Mustergrund und Schein ════════════════════════════════════════════
   Ein feines Raster für große leere Flächen (Held, Aufruf), ein weicher
   Schein als Licht dahinter. Beides sitzt hinter dem Inhalt — die plastische
   Schicht selbst leuchtet nur an den Knöpfen. */
.my-raster-grund {
  background-image:
    linear-gradient(var(--my-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--my-linie) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}
.my-punkt-grund {
  background-image: radial-gradient(var(--my-linie-stark) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 70%);
}
.my-schein {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
  pointer-events: none;
}

/* ═══ Held ══════════════════════════════════════════════════════════════ */
.my-held {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--my-held-hoehe, 26rem);
  padding-block: var(--my-s-16);
}
/* Der dunkle Verlauf über dem Bild ist keine Deko: ohne ihn steht heller Text
   auf hellem Himmel und ist genau dort unlesbar, wo die Überschrift sitzt. */
.my-held[data-bild="ja"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.3) 45%,
    var(--my-grund) 100%
  );
}
.my-held > * { position: relative; }
/* Das Bild NUR, wenn es eines gibt — und deshalb an einem data-Attribut.
   Ohne diese Bedingung stand hier `background-image: var(--my-held-bild)`
   ohne Wert, das ergibt `none`, und weil `.my-held` nach `.my-raster-grund`
   steht, hat es dessen Muster überschrieben. Gefunden vom Stilvergleich. */
.my-held[data-bild="ja"] {
  background-image: var(--my-held-bild);
  background-size: cover;
  background-position: center;
}
.my-held-inhalt { margin-inline: auto; max-width: 44rem; }
.my-held-schein { width: 38rem; height: 24rem; top: -8rem; background: var(--my-brand-500); }
.my-held-ueberzeile { margin-bottom: var(--my-s-3); color: var(--my-brand-300); }
.my-held-titel { font-weight: var(--my-gewicht-fett); color: var(--my-text); }
.my-held-unterzeile { margin-top: var(--my-s-4); margin-inline: auto; max-width: 38rem; color: var(--my-text-2); }
.my-held-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--my-s-3); margin-top: var(--my-s-8); }

/* ═══ Kopfzeile ═════════════════════════════════════════════════════════
   `color-mix` statt einer zweiten Farbe: die Leiste soll den Grund
   durchscheinen lassen, egal welcher Grund gerade gilt. */
.my-kopfzeile {
  position: sticky;
  top: 0;
  z-index: var(--my-e-leiste);
  background: color-mix(in srgb, var(--my-grund) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--my-linie);
  padding-top: var(--my-oben);
}
.my-kopfzeile-streifen {
  margin-inline: auto;
  display: flex;
  align-items: center;
  max-width: var(--my-inhalt);
  height: var(--my-kopfleiste);
  gap: var(--my-s-4);
}
.my-kopf-nav { display: none; gap: var(--my-s-1); margin-inline-start: var(--my-s-4); }
/* Zentriert in beide Richtungen: das Tippziel ist 44 Pixel, die Striche sind
   18 — ohne Zentrierung hängen sie in der oberen linken Ecke des Knopfes. */
.my-kopf-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--my-text-2);
  padding: var(--my-s-2);
}
@media (min-width: 640px) {
  .my-kopf-nav { display: flex; }
  .my-kopf-knopf { display: none; }
  .my-kopf-schublade { display: none; }
}
.my-kopf-punkt {
  padding: var(--my-s-2) var(--my-s-3);
  border-radius: var(--my-r-sm);
  font-weight: var(--my-gewicht-mittel);
  color: var(--my-text-3);
  transition: color var(--my-zeit-schnell) var(--my-kurve);
}
.my-kopf-punkt[aria-current="page"] { color: var(--my-text); }
.my-kopf-rechts { display: flex; align-items: center; gap: var(--my-s-2); }
/* Drei Striche aus einem: zwei davon sind Schatten. */
.my-kopf-striche {
  display: block;
  width: 1.125rem;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}
.my-kopf-schublade { border-top: 1px solid var(--my-linie); padding: var(--my-s-2) var(--my-s-4); }
.my-kopf-schublade-punkt {
  display: block;
  padding: var(--my-s-3);
  border-radius: var(--my-r-sm);
  color: var(--my-text-2);
  min-height: var(--my-tippziel);
}

/* ═══ Fußzeile ══════════════════════════════════════════════════════════
   Eine zentrierte Plastikkarte auf dem Seitengrund, kein Vollflächen-Balken:
   Marke, Adresse, zwei Verweisreihen. Unten mehr Luft als oben — die
   schwebende Navigation braucht Platz, sonst liegt sie über Impressum und
   Datenschutz, und genau die will man finden können. */
.my-fusszeile {
  padding-block: var(--my-s-10) calc(var(--my-s-10) + var(--my-fussleiste) + var(--my-unten));
}
.my-fusszeile-streifen { margin-inline: auto; max-width: var(--my-inhalt); }
.my-fusszeile-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--my-s-4);
  text-align: center;
  border-radius: var(--my-r-xl);
  padding: var(--my-s-8) var(--my-s-5);
}
.my-fusszeile-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--my-s-3);
  color: var(--my-text-aus);
}
.my-fusszeile-punkt { color: var(--my-text-3); transition: color var(--my-zeit-schnell) var(--my-kurve); }
.my-fusszeile-punkt:hover { color: var(--my-text); }
.my-fusszeile-unten { color: var(--my-text-3); }

/* ═══ Plakette ══════════════════════════════════════════════════════════
   Eine kleine Plastikfläche mit Symbol und Wort. Als Knopf drückt sie sich
   wie einer; als Auskunft steht sie still. */
.my-plakette {
  display: inline-flex;
  align-items: center;
  gap: var(--my-s-2);
  border: none;
  padding: var(--my-s-2_5) var(--my-s-4);
  border-radius: var(--my-r-md);
  background: var(--my-plastik-verlauf);
  box-shadow: 0 3px 0 var(--my-plastik-kante);
  color: var(--my-text);
  font-size: var(--my-t-md);
  font-weight: var(--my-gewicht-halbfett);
}
.my-plakette[data-groesse="sm"] { padding: var(--my-s-1_5) var(--my-s-3); font-size: var(--my-t-xs); gap: var(--my-s-1_5); }
.my-plakette[data-variante="marke"] {
  background: var(--my-marke-verlauf);
  box-shadow: 0 3px 0 var(--my-marke-kante);
  color: var(--my-text-auf-voll);
}
.my-plakette-symbol { display: inline-flex; color: var(--my-brand-300); }
.my-plakette[data-variante="marke"] .my-plakette-symbol { color: var(--my-text-auf-voll); }
button.my-plakette {
  cursor: pointer;
  transform: translateY(0);
  transition: transform var(--my-zeit-schnell) var(--my-kurve),
              filter var(--my-zeit-schnell) var(--my-kurve),
              box-shadow var(--my-zeit-schnell) var(--my-kurve);
}
button.my-plakette:hover { filter: brightness(1.15); }
button.my-plakette:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
@media (prefers-reduced-motion: reduce) {
  button.my-plakette, button.my-plakette:active { transform: none; }
}

/* ═══ Meldungen und Dialoge ═════════════════════════════════════════════
   Dieselben Bausteine wie im Panel — ToastAnbieter, Dialog, Bestätigen —
   mit plastischer Haut. Mechanik, Rollen und Zugänglichkeit kommen
   unverändert aus dem Dashboard.

   Nur wenn KEINE `Rahmen`-Hülle auf der Seite steht. `Rahmen` ist laut
   eigenem Kommentar "die Hülle einer internen Oberfläche" und trägt dafür
   die Markierung `.my-rahmen`. Eine eigenständige öffentliche Seite (Shop,
   Wiki) hat sie nie; eine App wie das Team-Panel bündelt aber echte
   öffentliche Seiten (apply, Login, Entbannung, Termin) UND das interne
   Dashboard im selben CSS-Bundle, weil `globals.css` dort `public.css` lädt
   (siehe dessen Kommentar). Ohne dieses `:has()`-Tor griff dieselbe
   Klasse `.my-meldung`/`.my-dialog` überall zugleich — ToastAnbieter und
   Dialog sind im Dashboard exakt dieselbe Komponente, nur ohne `Rahmen`
   drumherum lässt sich das unterscheiden. Gemessen am 11.08.2026 auf
   team.mythora.de/dashboard/settings: ein Erfolgs-Toast kam knallgrün mit
   harter Kante statt der ruhigen Karte aus dashboard/styles.css.

   Die Meldung sieht aus wie im Shop: ein vollfarbiger Balken unten in der
   Mitte, harte Kante, weiße Schrift. Kein Streifen auf grauer Karte — auf
   einer Verkaufsseite steht der Toast über der schwebenden Navigation und
   ist die eine Rückmeldung des Moments; er darf so laut sein wie ein
   Knopf. */
body:not(:has(.my-rahmen)) .my-meldungen {
  align-items: center;
  padding-bottom: calc(var(--my-fussleiste) + var(--my-s-8) + var(--my-unten));
}
@media (min-width: 640px) { body:not(:has(.my-rahmen)) .my-meldungen { align-items: center; } }
body:not(:has(.my-rahmen)) .my-meldung {
  width: auto;
  max-width: min(28rem, 100%);
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  border-radius: var(--my-r-lg);
  padding: var(--my-s-4) var(--my-s-8);
  background: var(--my-brand-500);
  box-shadow: 0 4px 0 var(--my-marke-kante);
}
body:not(:has(.my-rahmen)) .my-meldung[data-ton="erfolg"] { background: var(--my-plastik-erfolg); box-shadow: 0 4px 0 var(--my-plastik-erfolg-kante); }
body:not(:has(.my-rahmen)) .my-meldung[data-ton="gefahr"] { background: var(--my-plastik-gefahr); box-shadow: 0 4px 0 var(--my-plastik-gefahr-kante); }
body:not(:has(.my-rahmen)) .my-meldung[data-ton="warnung"] { background: var(--my-plastik-warnung); box-shadow: 0 4px 0 var(--my-plastik-warnung-kante); }
body:not(:has(.my-rahmen)) .my-meldung .my-meldung-titel { color: var(--my-text-auf-voll); }
body:not(:has(.my-rahmen)) .my-meldung .my-meldung-text { color: rgba(255, 255, 255, 0.85); }
body:not(:has(.my-rahmen)) .my-meldung .my-meldung-aktion { color: var(--my-text-auf-voll); text-decoration: underline; }
body:not(:has(.my-rahmen)) .my-meldung .my-meldung-zu { color: rgba(255, 255, 255, 0.75); }
body:not(:has(.my-rahmen)) .my-dialog {
  background: var(--my-plastik-verlauf);
  box-shadow: 0 6px 0 var(--my-plastik-kante);
}

/* ═══ Merkmalsraster ════════════════════════════════════════════════════
   Ohne Karten drumherum: sechs Kästen in einem Raster sehen aus wie eine
   Preistabelle. Ein Symbol, eine Überschrift, zwei Zeilen — der Raum trennt.
   Das Symbol sitzt auf einer kleinen Plastikplakette. */
.my-merkmalsraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--my-s-8);
}
.my-merkmalsraster[data-spalten="2"] { max-width: 44rem; }
.my-merkmal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--my-s-3);
  border-radius: var(--my-r-md);
  background: var(--my-plastik-verlauf);
  box-shadow: 0 3px 0 var(--my-plastik-kante);
  color: var(--my-brand-300);
}
.my-merkmal-titel { font-weight: var(--my-gewicht-halbfett); color: var(--my-text); }
.my-merkmal-text { margin-top: var(--my-s-2); color: var(--my-text-2); }

/* ═══ Zahlenband ════════════════════════════════════════════════════════ */
.my-zahlenband { display: grid; text-align: center; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--my-s-8); }
.my-zahlenband-wert { font-weight: var(--my-gewicht-fett); color: var(--my-text); }
.my-zahlenband-wort { margin-top: var(--my-s-1); }

/* ═══ Handlungsaufruf ═══════════════════════════════════════════════════
   Der Aufruf ist ein Balkenmoment über die volle Breite: Markenverlauf,
   Kante, weiße Schrift. Die letzte Handlung darf aussehen wie eine. */
.my-aufruf {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: var(--my-r-xl);
  background: var(--my-marke-verlauf-quer);
  box-shadow: 0 6px 0 var(--my-marke-kante);
  padding: var(--my-s-12) var(--my-s-6);
  color: var(--my-text-auf-voll);
}
.my-aufruf-inhalt { position: relative; margin-inline: auto; max-width: 38rem; }
.my-aufruf-titel { font-weight: var(--my-gewicht-fett); color: var(--my-text-auf-voll); }
.my-aufruf-text { margin-top: var(--my-s-3); color: rgba(255, 255, 255, 0.85); }
.my-aufruf-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--my-s-3); margin-top: var(--my-s-6); }

/* ═══ Zeugnis ═══════════════════════════════════════════════════════════ */
.my-zeugnis { padding: var(--my-s-6); }
.my-zeugnis-text { color: var(--my-text); line-height: var(--my-zh-weit); }
.my-zeugnis-fuss { display: flex; align-items: center; gap: var(--my-s-3); margin-top: var(--my-s-5); }
.my-zeugnis-bild { width: 2.25rem; height: 2.25rem; border-radius: var(--my-r-voll); object-fit: cover; }
.my-zeugnis-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--my-r-voll);
  background: var(--my-marke-verlauf);
  color: var(--my-text-auf-voll);
  font-weight: var(--my-gewicht-fett);
  box-shadow: 0 2px 0 var(--my-marke-kante);
}
.my-zeugnis-name { display: block; font-weight: var(--my-gewicht-halbfett); color: var(--my-text); }
.my-zeugnis-rolle { display: block; color: var(--my-text-3); }

/* ═══ Fragenliste ═══════════════════════════════════════════════════════
   Jede Frage eine Plastikfläche. Das Pluszeichen dreht sich zum Kreuz, statt
   gegen ein Minus getauscht zu werden: bei einem Tausch springt das Zeichen,
   bei einer Drehung sieht man, dass es dieselbe Schaltfläche ist. */
.my-fragenliste { display: flex; flex-direction: column; gap: var(--my-s-3); }
.my-frage > summary { list-style: none; }
.my-frage > summary::-webkit-details-marker { display: none; }
.my-frage-kopf {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: var(--my-s-4);
  padding: var(--my-s-5) var(--my-s-6);
  min-height: var(--my-tippziel);
  font-weight: var(--my-gewicht-halbfett);
  color: var(--my-text);
  border-radius: var(--my-r-lg);
}
.my-frage-antwort {
  padding: 0 var(--my-s-6) var(--my-s-5);
  color: var(--my-text-2);
  line-height: var(--my-zh-weit);
}
.my-frage-zeichen {
  display: inline-block;
  font-size: var(--my-t-2xl);
  line-height: 1;
  color: var(--my-text-3);
  transition: transform var(--my-zeit) var(--my-kurve);
}
.my-frage[open] .my-frage-zeichen { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .my-frage-zeichen { transition: none; }
}