/* ══ SECTION 2 · DIE FÜNF MODELLE — Aussehen ══════════════════════════════
   Neu am 08.08.2026 nach Jordans Vorlage `Downloads/2fa68abf-…jpg`.

   ── WAS DIESE DATEI NICHT MEHR MACHT ────────────────────────────────────
   Bis zum 08.08. kam jede Kartenlage als `matrix3d` aus modelle.mjs —
   dieselbe Zahl, aus der auch eine WebGL-Glasplatte darunter entstand.
   Das Glas ist weg (Begründung im Kopf von modelle.mjs), und damit auch
   der Zwang, zwei Systeme im selben Bild zu synchronisieren. Die Reihe
   ist jetzt ein Raster, die Karte ein Kasten, und die einzige Bewegung
   ist der FLIP beim Herausheben.

   Was daraus folgt und leicht zurückfällt: es gibt hier KEIN
   `perspective`, keine `--tiefe`, keine `@property`-Registrierung für
   Maße. Die gab es nur, damit JS Längen als Zahl zurücklesen konnte.

   ── DREI EIGENSCHAFTEN, DREI AUFGABEN ───────────────────────────────────
   Eigenschafts-Budget des Hauses, hier besonders eng, weil koerper.mjs
   mitschreibt:
     transform  Herausheben (FLIP), geschrieben von modelle.mjs
     rotate     Zeigerneigung der Karte, geschrieben von koerper.mjs
     translate  frei — nicht belegen
   Wer zwei davon auf dieselbe Eigenschaft legt, lässt eine lautlos
   ausfallen, ohne Fehlermeldung.

   ── DER GRUND ───────────────────────────────────────────────────────────
   Nur das Punktraster des Heros (engine/raster/), derselbe geteilte
   Baustein. Fällt es aus, fehlt die Klasse `hat-raster` und der
   CSS-Verlauf unten übernimmt — dieselbe Rolle wie `.hintergrund` im
   Hero: Rückfall, nicht Grundstimmung.
───────────────────────────────────────────────────────────────────────── */

/* `--st-kopf` gibt es nur im Stationsmodus; hier deckt das Polster die
   Höhe des festen Kopfes ab. Ohne es liegt der Kicker genau unter der
   Navigationspille, sobald die Sektion oben anschlägt. */
.modelle {
  position: relative;
  z-index: 1;
  isolation: isolate;
  scroll-margin-top: 1rem;
  --kb: clamp(11rem, 15.5vw, 14.5rem);   /* Kartenbreite                    */
  --luecke: clamp(.6rem, 1.1vw, 1.05rem);
  --ecke: clamp(18px, 1.5vw, 26px);
  /* Wie weit die ausgezeichnete Karte oben und unten übersteht. Das ist
     die einzige Auszeichnung, die man aus zwei Metern Abstand sieht. */
  --hoch: clamp(14px, 2.6svh, 30px);
  /* Breite der herausgehobenen Tafel. Steht als Variable, weil zwei
     Stellen sie brauchen: die Tafel selbst und der Zurück-Knopf, der
     außerhalb der Karte im DOM sitzt und trotzdem an ihrer Ecke kleben
     soll. 62 rem: mit den gekürzten Zusagen (max. ~55 Zeichen, siehe
     inhalt.mjs) bleibt jede Zeile einzeilig, und die Tafel wirkt als
     Fenster statt als Fläche. Sie war einen Tag lang 68 rem — zusammen
     mit voller Bühnenhöhe war das der Grund, warum sie „überladen"
     aussah, obwohl der Inhalt derselbe war. */
  --tafel: min(62rem, 100%);
  --fokus: 0;
  padding-block: clamp(5rem, 11svh, 7.5rem) clamp(3rem, 8svh, 6rem);
}

/* ══ KOPF ═══════════════════════════════════════════════════════════════ */
.mo-kopf {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem clamp(2rem, 5svh, 3.4rem);
  text-align: center;
}

/* Der Kicker steht zwischen zwei Haarlinien, wie in der Vorlage. Sie sind
   keine Dekoration: sie machen die kleine gesperrte Zeile über dem
   unruhigen Gitter überhaupt erst als Marke lesbar. */
.mo-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 1.6vw, 1.3rem);
  margin: 0 0 1.15rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  /* Sperrung schiebt das letzte Zeichen nach rechts und kippt eine
     zentrierte Zeile sichtbar aus der Mitte. Der Ausgleich gehört zur
     Sperrung, nicht zum Geschmack. */
  text-indent: .34em;
  color: color-mix(in oklab, var(--haze) 92%, transparent);
}
.mo-kicker::before,
.mo-kicker::after {
  content: '';
  width: clamp(2rem, 7vw, 5.5rem);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--linie-hell));
}
.mo-kicker::after { scale: -1 1; }

.mo-kopf h2 {
  margin: 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  /* Große Typo will negative Sperrung — je größer, desto weiter wirken die
     Buchstaben sonst auseinander. */
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  text-wrap: balance;
  color: var(--ink);
}
.mo-hinweis {
  max-width: 44rem;
  margin: 1rem auto 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* ── Der Ausweg für Unentschlossene ───────────────────────────────────
   Steht unter dem Leitsatz und ist der einzige farbige Punkt im Kopf.
   Das ist Absicht: wer sich in keiner der fünf Stufen wiedererkennt,
   soll hier hängenbleiben — und nicht die Seite verlassen. */
.mo-unsicher {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: .35rem;
  padding: 0 .2rem;
  font: 500 .82rem/1 'Space Grotesk', sans-serif;
  color: var(--accent);
  text-decoration: none;
  touch-action: manipulation;
  transition: color .24s var(--ease);
}
.mo-unsicher span { color: var(--ink-dim); }
.mo-unsicher i {
  font-style: normal;
  transition: translate .24s var(--ease);
}
.mo-unsicher:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .mo-unsicher:hover { color: color-mix(in srgb, var(--accent) 70%, #fff); }
  .mo-unsicher:hover i { translate: 3px 0; }
}

/* ── Der ganze Kopf tritt ab, wenn eine Tafel offen ist ────────────────
   Bis zum 10.08.2026 verschwand nur der Hinweissatz. Kicker und
   Überschrift blieben stehen — und standen dann über einer Tafel, die
   ihre eigene Überschrift mitbringt: zwei Titel übereinander, von denen
   der obere nichts mehr mit dem Inhalt darunter zu tun hat. Jordan:
   „Die 5 Modelle / Fünf Modelle. Alles offengelegt. / Von ‚man findet
   dich' … bei der vorschau nicht sehen lassen."

   `visibility` statt `display`, damit der Platz erhalten bleibt: die
   Bühne darunter darf nicht springen, sonst wandert die Tafel im selben
   Moment, in dem sie sich aufbaut. */
.mo-kopf {
  transition: opacity .32s var(--ease), visibility .32s;
}
.modelle.ist-offen .mo-kopf {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ══ DIE BÜHNE ══════════════════════════════════════════════════════════
   Bezugsrahmen der herausgehobenen Karte. `position: relative` ist deshalb
   Pflicht, nicht Vorsicht. */
.mo-buehne {
  position: relative;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.mo-reihe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, var(--kb)));
  justify-content: center;
  align-items: stretch;
  gap: var(--luecke);
  margin-inline: auto;
}

/* Der Platz hält die Rasterzelle; die Karte darin darf sie verlassen.
   Die ausgezeichnete steht deshalb oben und unten über — und zwar über
   einen negativen Außenabstand des PLATZES, nicht über eine größere
   Kartenhöhe: so bleiben alle fünf Zellen gleich hoch und die Preise
   stehen auf EINER Grundlinie. Genau daran ist der alte Fächer
   gescheitert — er machte die fünf Preise verschieden groß, und
   verglichen werden Zahlen. */
.mk-platz {
  position: relative;
  display: flex;
  min-width: 0;
  transition: opacity .32s var(--ease);
}
.mk-platz:has(.ist-beliebt) { margin-block: calc(var(--hoch) * -1); }

/* ── Die Perspektive ──────────────────────────────────────────────────
   koerper.mjs schreibt seit jeher eine ECHTE Achsen-Drehung auf die Karte
   unter dem Zeiger (`rotate: x y 0 Ngrad`, koerper.mjs). Ohne einen
   Fluchtpunkt ist eine 3D-Drehung aber nur eine affine Schrägstellung —
   die Karte kippte, ohne dass eine Kante näher käme. Eine Zeile macht aus
   derselben Drehung einen Raum.

   NUR auf dem geschlossenen Platz, und das ist keine Feinheit:
   `perspective` erzeugt einen umschließenden Block für absolut
   positionierte Nachfahren. Stünde es auf `.ist-auf` oder auf `.mo-reihe`,
   löste das `inset` der herausgehobenen Tafel gegen den falschen Rahmen
   auf — genau der Fehler, der weiter unten (bei `.mk-platz.ist-auf`)
   schon einmal teuer war.

   900 px auf eine ~200 px breite Karte: kräftig genug, dass die nähere
   Kante sichtbar wächst, flach genug, dass die Schrift nicht verzerrt. */
.mk-platz:not(.ist-auf) { perspective: 900px; }

/* Alles außer der offenen Karte tritt ab. `visibility` fehlt hier
   absichtlich: die Karten bleiben messbar (koerper.mjs vermisst seine
   Canvas), und bei 8 % Deckkraft liest niemand mehr mit. */
.mk-platz:not(.ist-auf) { opacity: calc(1 - var(--fokus) * .92); }
.modelle.ist-offen .mk-platz:not(.ist-auf) { pointer-events: none; }

/* ══ DIE KARTE ══════════════════════════════════════════════════════════
   Glas als CSS: dunkle, leicht violette Füllung, Innenlicht an der
   Oberkante, versetzter Schatten nach unten. KEIN `backdrop-filter` —
   fünf davon über einem laufenden Canvas wären fünf Unschärfe-Durchgänge
   je Bild, und das Gitter dahinter ist ohnehin leise genug, um
   durchzuscheinen. */
.mk {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.15rem, 1.5vw, 1.6rem) clamp(.95rem, 1.25vw, 1.35rem)
           clamp(1.05rem, 1.35vw, 1.45rem);
  border-radius: var(--ecke);
  background:
    linear-gradient(180deg, rgba(185, 164, 240, .085),
                            color-mix(in srgb, var(--deep) 58%, transparent) 62%),
    color-mix(in srgb, var(--void) 52%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 18px 40px -26px rgba(0, 0, 0, .9);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(111, 222, 217, .18);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease),
              background .32s var(--ease);
}
.mk:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ── KEIN `preserve-3d`, KEIN `translateZ` (10.08.2026) ────────────────
   Hier standen für ein paar Stunden zwei Lagen, die beim Kippen vor der
   Karte schweben sollten: Drahtkörper und Abzeichen auf eigenem
   `translateZ`, dazu `transform-style: preserve-3d` an der Karte.

   Beides ist wieder raus, und zwar wegen Jordans „die Texte sind
   teilweise etwas unscharf". `preserve-3d` eröffnet einen
   3D-Rendering-Kontext, und darin rastert der Browser JEDES Kind in eine
   eigene Textur — Schrift wird zum Bild und verliert das
   Sub-Pixel-Hinting. Dasselbe gilt für das Abzeichen, das per
   `translateZ` obendrein um 3 % vergrößert dargestellt wurde: eine
   3-%-Skalierung ist genau die Größenordnung, bei der Text weich wird,
   ohne dass man den Grund sieht.

   Die Räumlichkeit trägt die `perspective` am Platz allein — sie wirkt
   auf die Drehung, die koerper.mjs ohnehin schreibt, und braucht keine
   eigenen Ebenen dafür. */

/* ── Der Rand ─────────────────────────────────────────────────────────
   Ein echter `border` kann keinen Verlauf tragen. Deshalb eine
   1-px-Verlaufsfläche, aus der die Mitte per Maske ausgestanzt wird —
   dieselbe Technik wie `.btn::before` auf der Live-Seite. */
.mk-rand {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, .30),
    rgba(185, 164, 240, .12) 46%,
    rgba(111, 222, 217, .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: opacity .32s var(--ease);
}

/* ── DER LICHTSTREIF IST AUSGEBAUT (10.08.2026) ───────────────────────
   Hier lag ein `.mk-schimmer`, der beim Überfahren einmal quer durch die
   Karte zog. Auf Jordans Ansage raus, und der Grund ist gestalterisch:
   ein wandernder Glanz zieht den Blick auf die BEWEGUNG, nicht auf die
   Karte — man sieht den Effekt und liest den Preis nicht. Die Karte
   färbt sich jetzt stattdessen (Ton und Deckkraft, siehe premium.css).

   Mit ihm sind das Element im Markup (modelle.mjs) und die Keyframes
   `mk-streif` gegangen. Wer den Namen irgendwo wiederfindet, hat einen
   Rest übersehen — pruefen.mjs meldet ihn. */
@media (hover: hover) {
  .mk:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .2),
      inset 0 -1px 0 rgba(0, 0, 0, .28),
      0 24px 52px -28px rgba(0, 0, 0, .95),
      /* Der farbige Anteil hat einen VERSATZ. Ein farbiger Ring ohne
         Versatz ist Dekoration, kein Licht. */
      0 10px 30px -22px color-mix(in srgb, var(--ton, #b9a4f0) 70%, transparent);
  }
  .mk:hover .mk-more { color: var(--ink); border-color: var(--linie-hell); }
}

/* ── Die ausgezeichnete Karte ─────────────────────────────────────────
   Sie unterscheidet sich in drei Dingen und in keinem vierten: sie steht
   höher, ihr Rand trägt den vollen Verlauf Flieder → Türkis, und ihr
   Aufruf ist gefüllt. Keine andere Schrift, keine andere Ordnung — sonst
   vergleicht man nicht mehr fünf Modelle, sondern vier plus eines. */
.mk.ist-beliebt {
  padding-block: calc(clamp(1.15rem, 1.5vw, 1.6rem) + var(--hoch))
                 calc(clamp(1.05rem, 1.35vw, 1.45rem) + var(--hoch));
  background:
    linear-gradient(180deg, rgba(185, 164, 240, .16),
                            color-mix(in srgb, var(--deep) 66%, transparent) 60%),
    color-mix(in srgb, var(--void) 58%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .3),
    0 26px 60px -30px rgba(0, 0, 0, .95),
    0 12px 40px -26px color-mix(in srgb, var(--haze) 55%, transparent);
}
.ist-beliebt .mk-rand {
  padding: 1.4px;
  background: linear-gradient(175deg,
    var(--haze) 0%,
    color-mix(in srgb, var(--haze) 40%, var(--accent)) 52%,
    var(--accent) 100%);
  opacity: .85;
}

.mk-badge {
  position: absolute;
  top: 0; left: 50%;
  z-index: 3;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .3rem .78rem;
  border-radius: 999px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--haze) 88%, #fff),
    color-mix(in srgb, var(--haze) 55%, var(--accent)));
  color: var(--void);
  font: 600 .58rem/1.5 'Space Grotesk', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--haze) 80%, transparent);
}
.mk-badge i { font-style: normal; font-size: .74em; }

/* ══ INHALT DER KARTE ═══════════════════════════════════════════════════
   `display: contents` in der Übersicht: die Hülle ist dort gar nicht da,
   ihre Kinder sind direkt die Kinder der Karte. Erst die herausgehobene
   Tafel macht daraus eine echte Spalte — deshalb kostet der Umbau in der
   Übersicht nichts. */
.mk-spalte { display: contents; }

/* Feste Höhe, kein `flex: 1` — sonst bestimmt die Länge des Fließtexts die
   Zeichnungsgröße und die fünf Körper sind verschieden groß. */
.mk-schau {
  flex: none;
  height: clamp(5.4rem, 8.5vw, 7.4rem);
  margin-bottom: clamp(.7rem, 1vw, 1.05rem);
}
.mk-koerper { display: block; width: 100%; height: 100%; }

.mk-name {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
/* ── Das Versprechen ──────────────────────────────────────────────────
   Die wichtigste Zeile der Karte, und die einzige neue vom 10.08.2026.
   Sie beantwortet, wofür diese Stufe da ist („Dein Betrieb online"), und
   das ist die Frage, an der die alte Fassung gescheitert ist: dort stand
   an dieser Stelle ein Satz über die Zielgruppe, und wer sich darin nicht
   wiederfand, hatte keinen zweiten Anhaltspunkt.

   Zwei bis drei Wörter, deshalb `balance` — bei so kurzen Zeilen ist ein
   einzelnes hängendes Wort sofort ein Fehler im Bild. */
.mk-verspr {
  margin: .5rem 0 0;
  font-size: clamp(.92rem, 1.15vw, 1.05rem);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}

/* ── Für wen ──────────────────────────────────────────────────────────
   Drei Begriffe, kein Satz. Als echte Liste ausgezeichnet, weil es eine
   ist; die Trennpunkte kommen aus CSS, damit Screenreader sie nicht
   mitlesen. */
.mk-fuer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .5rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .7rem;
  line-height: 1.5;
  color: var(--ink-dim);
  opacity: .85;
}
.mk-fuer li { display: flex; align-items: center; gap: .5rem; }
.mk-fuer li + li::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

/* `margin-top: auto` — und das ist keine Kosmetik, sondern der Grund, aus
   dem die Reihe überhaupt vergleichbar ist.

   Die Zielgruppenzeile ist je nach Modell zwei bis VIER Zeilen lang
   (Premium ist die längste). Hängt der Preis daran, steht er fünfmal auf
   einer anderen Höhe, und man vergleicht Zahlen, die nicht nebeneinander
   liegen. Genau daran ist am 07.08.2026 schon der Fächer gescheitert —
   dort machte die Perspektive die Preise verschieden GROSS, hier machte
   der Fließtext sie verschieden HOCH. Derselbe Fehler, andere Ursache.

   Der Block Preis · Strich · Lieferzeit · Aufruf wird deshalb nach UNTEN
   gedrückt: alle fünf Karten sind gleich hoch (das Raster streckt sie),
   also sitzt der Block bei allen auf derselben Linie. Oben darf der
   Abstand ungleich sein — dort steht Prosa, und die vergleicht niemand
   zeilenweise. */
.mk-preis {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: clamp(.75rem, 1.1vw, 1.1rem) 0 0;
  margin-top: auto;
  padding-top: clamp(.75rem, 1.1vw, 1.1rem);
}
/* `baseline` statt `flex-start`, und das ist die Korrektur vom
   10.08.2026: hochgestellt sah das € aus wie eine Fußnotenziffer, und
   beim Master („ab 2.990") saß es vollends schief — dort stand das „ab"
   in derselben Display-Schrift wie die Zahl und las sich als „1b".
   Jetzt tragen drei Teile drei Rollen: „ab" klein und vorangestellt, die
   Zahl groß, das Zeichen daneben auf der Grundlinie. */
.mk-preis b {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 2.9vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
/* Versalziffern auf gemeinsamer Höhe. Clash Display führt Mediävalziffern
   im Bestand — bei „1.990" neben „300" springen die dann in der Höhe, und
   verglichen werden hier Zahlen. */
.mk-zahl { font-variant-numeric: lining-nums tabular-nums; }

/* „ab" ist eine Einschränkung der Zahl, kein Teil von ihr. Grotesk statt
   Display, weil die Display-Schrift bei zwei Kleinbuchstaben in dieser
   Größe keine Form mehr hat. */
.mk-ab {
  margin-right: .3em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .3em;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* Das Währungszeichen bleibt untergeordnet — aber auf der Grundlinie: die
   Zahl trägt die Aussage, das Zeichen sagt nur, worin sie gemessen ist. */
.mk-waehrung {
  margin-left: .16em;
  font-size: .46em;
  letter-spacing: 0;
  color: var(--ink-dim);
}
.mk-preis i {
  margin-top: .42rem;
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--ink-dim);
  opacity: .9;
}

.mk-strich {
  height: 1px;
  margin: clamp(.85rem, 1.2vw, 1.2rem) 0 clamp(.7rem, 1vw, 1rem);
  background: linear-gradient(to right, transparent, var(--linie), transparent);
}

/* KEIN `margin-bottom: auto` mehr. Das schob bis zum 08.08.2026 alles
   Folgende nach unten und war der Grund, warum der Preis oben klebte. */
.mk-dauer {
  margin: 0;
  text-align: center;
  font-size: .78rem;
  color: var(--ink-dim);
  opacity: .92;
}
.mk-dauer span {
  display: block;
  margin-bottom: .18rem;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--haze) 80%, transparent);
}

/* Der Aufruf am Fuß. In der Übersicht ist er kein echter Knopf (die ganze
   Karte ist einer), sondern die sichtbare Zusage, dass hier etwas passiert. */
.mk-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: clamp(.9rem, 1.3vw, 1.3rem);
  border: 1px solid var(--linie);
  border-radius: 999px;
  font: 500 .72rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .28s var(--ease), border-color .28s var(--ease),
              background .28s var(--ease);
}
.ist-beliebt .mk-more {
  border-color: transparent;
  background: linear-gradient(150deg, #a6f2e8 0%, var(--accent) 44%, #45bcb7 100%);
  color: #042220;                          /* ~12:1 gegen die Füllung      */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 10px 26px -14px rgba(111, 222, 217, .5);
}
@media (hover: hover) {
  .mk.ist-beliebt:hover .mk-more { color: #042220; border-color: transparent; }
}

/* ══ DIE HERAUSGEHOBENE KARTE ═══════════════════════════════════════════
   Eine TAFEL quer, kein großes Hochformat: hochkant passte der Inhalt
   nicht in die Bühne und die Karte ragte unten heraus, wo die
   Zeichenfläche endet. Zwei Spalten — links, wer und wie viel, rechts,
   was drin ist.

   ── SIE IST BEGRENZT, UND DAS LÖST ZWEI DINGE AUF EINMAL (10.08.2026) ──
   Bis dahin nahm sie per `inset: 0` die volle Bühnenbreite. Auf einem
   1920er Fenster zogen sich die Leistungszeilen dadurch über gut 1000 px
   — lesbar sind 45 bis 75 Zeichen, alles darüber verliert beim
   Zeilensprung den Anschluss. Und es gab kein „daneben": der
   Danebenklick zum Schließen war programmiert, hatte aber nirgends eine
   Fläche, auf die er hätte fallen können.

   `--tafel` löst beides. Die Breite steht als Variable, weil der
   Zurück-Knopf sie mitrechnen muss — er sitzt außerhalb der Karte im DOM
   und soll trotzdem an ihrer Ecke kleben. */
/* `position: static`, und das ist der ganze Fehler von vorhin.
   `.mk-platz` steht sonst auf `relative` (für den Stapel), und dann
   löst das `inset: 0` der Karte gegen den PLATZ auf statt gegen die
   Bühne: die Tafel blieb 165 px breit, ihr Text quetschte sich in eine
   48-px-Spalte und lief 900 px nach unten heraus.

   Das sah nach einem Layoutfehler in der Tafel aus und war einer im
   Bezugsrahmen. Merksatz: `inset: 0` ist immer eine Frage nach dem
   nächsten positionierten Vorfahren — und den legt man beim Stapeln
   gern versehentlich an. */
.mk-platz.ist-auf { position: static; }
.mk-platz.ist-auf .mk {
  position: absolute;
  /* ── Mittig in BEIDEN Achsen ──────────────────────────────────────
     `inset: 0` plus feste Breite plus `margin: auto` ist die klassische
     Zentrierung eines absoluten Kastens — sie wirkt auch senkrecht,
     sobald die Höhe nicht mehr gestreckt wird. Genau das macht
     `height: fit-content`: die Tafel ist nur so hoch wie ihr Inhalt und
     steht in der Mitte der Bühne, statt sie von oben bis unten
     auszufüllen.

     Bis zum 10.08.2026 stand hier nur `inset: 0`. Die Tafel war damit
     immer 70 svh hoch, egal wie wenig darin stand — und eine große
     Fläche mit verstreutem Inhalt liest sich als „überladen", obwohl
     das Gegenteil der Fall ist: es ist zu viel Fläche, nicht zu viel
     Text. */
  inset: 0;
  width: var(--tafel);
  height: fit-content;
  max-height: 100%;
  margin: auto;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr);
  /* ── DIE ZEILE MUSS BEGRENZT SEIN ────────────────────────────────
     Ohne diese Zeile lief der Text unten aus der Tafel heraus (Jordan
     am 10.08.2026: „der text ist nicht in der box, es ist verbuggt").
     Der Grund ist eine Feinheit des Rasters, die man einmal gesehen
     haben muss:

     `max-height` begrenzt den CONTAINER, nicht seine Zeilen. Eine
     implizite Zeile steht auf `auto` und wird so hoch wie ihr Inhalt —
     also wuchs sie über den gedeckelten Container hinaus, und weil
     `overflow` sichtbar war, stand der Text einfach unter der Karte im
     Raum. Die Spalten hatten zwar `overflow-y: auto`, bekamen aber nie
     eine begrenzte Höhe, gegen die sie hätten rollen können.

     `minmax(0, 1fr)` deckelt die Zeile auf die Containerhöhe. Erst
     dadurch greift das `min-height: 0` der Spalten und aus dem Überlauf
     wird ein Roller. `overflow: hidden` ist der Riegel dahinter — für
     den Fall, dass doch einmal etwas die Rundung überragt. */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  column-gap: clamp(1.5rem, 3vw, 3.2rem);
  padding: clamp(1.6rem, 2.6vw, 2.6rem);
  cursor: default;
  /* Die Tafel steht STILL. koerper.mjs schreibt seine Zeigerneigung als
     Inline-Stil auf jede Karte unter dem Zeiger — auf einer Karte in der
     Reihe ist das die Räumlichkeit, auf einer Lesefläche eine Zumutung
     („das geöffnete Fenster bewegt sich mit", Jordan am 10.08.2026).
     Gegen einen Inline-Stil kommt nur `!important`; das ist hier kein
     Notnagel, sondern die einzige Sprache, die er versteht. */
  rotate: none !important;
  transform: none;
}
/* ══ DIE MATERIALISIERUNG ═══════════════════════════════════════════════
   Die Tafel entsteht AN ORT UND STELLE, von unten nach oben dichter
   werdend, während ein feiner Staub darüber vergeht.

   ── WARUM NICHT DAS HOLOGRAMM VON HEUTE MORGEN ────────────────────────
   Der erste Versuch war ein Projektor: eine Linie in der Mitte, die
   auseinanderfährt, ein Scan-Band, zweimal Flackern. Jordan: „Entferne
   den hologram effekt beim öffnen des fenster, es soll sich ehr
   materalisieren." Er hat recht, und der Unterschied ist inhaltlich:

     Hologramm     etwas wird PROJIZIERT — es ist nicht wirklich da
     Materie       etwas wird FEST — es war schon da und wird greifbar

   Eine Preistafel, die als Projektion daherkommt, sagt „unverbindlich".
   Das Flackern hat das noch unterstrichen. Materie sagt „das gilt". Das
   Haus hat diese Unterscheidung schon einmal getroffen — die
   Stationsübergänge sind am 05.08.2026 aus demselben Grund von Hologramm
   auf Materialisierung umgestellt worden (engine/materie/).

   ── DIE MASKE STEHT IN DEN KEYFRAMES, NICHT AM ELEMENT ────────────────
   Das ist kein Stil, sondern dieselbe Falle wie zweimal vorher: eine
   `mask` am Element hält die Tafel dauerhaft in einer eigenen
   Compositor-Ebene, und der Text wird wieder weich. In den Keyframes
   gilt sie nur, solange die Animation läuft; mit `backwards` ist danach
   nichts mehr gesetzt. Kein `filter`, kein `transform` — aus demselben
   Grund. */
@keyframes mk-mat-auf {
  0% {
    opacity: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.45) 40%, #000 60%);
            mask-image: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.45) 40%, #000 60%);
    -webkit-mask-size: 100% 260%;  mask-size: 100% 260%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 0%;   mask-position: 0 0%;
  }
  30% { opacity: 1; }
  100% {
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.45) 40%, #000 60%);
            mask-image: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.45) 40%, #000 60%);
    -webkit-mask-size: 100% 260%;  mask-size: 100% 260%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 100%; mask-position: 0 100%;
  }
}
/* Rückwärts und kürzer: beim Schließen will man zur Übersicht, nicht
   noch eine Vorführung. DOPPELSTELLE — die 240 ms stehen als Zeitgeber
   in modelle.mjs. */
@keyframes mk-mat-zu {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.mk-platz.ist-auf .mk {
  animation: mk-mat-auf .56s var(--ease) backwards;
}
.mk-platz.ist-zu .mk {
  animation: mk-mat-zu .24s var(--ease) both;
  pointer-events: none;
}

/* Der Staub. Ein feines Punktraster in der Fliederfarbe des Hauses, das
   über der entstehenden Tafel liegt und vergeht — das ist der Rest
   Materie, der sich noch nicht gesetzt hat. Es verschwindet vollständig;
   ein Dauerraster über einer Preisliste wäre Dekoration, die das Lesen
   kostet.

   Als `::after` auf der Karte, weil `.mk-rand` (die Leuchtkante) ein
   eigenes Element ist und bleiben muss: es trägt selbst eine Maske. */
.mk-platz.ist-auf .mk::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(circle at center,
    color-mix(in srgb, var(--haze) 75%, transparent) 0 1px,
    transparent 1.7px);
  background-size: 7px 7px;
  animation: mk-staub .58s var(--ease) both;
}
@keyframes mk-staub {
  0%   { opacity: .5;  background-size: 7px 7px; }
  60%  { opacity: .22; }
  100% { opacity: 0;   background-size: 11px 11px; }
}
/* Beim Zusammenfahren kein zweiter Staub — er käme nicht mehr zum Ende. */
.mk-platz.ist-zu .mk::after { animation: none; opacity: 0; }

/* Die Kante glimmt beim Festwerden kurz auf und beruhigt sich — das ist
   der Moment, in dem die Form steht. */
.mk-platz.ist-auf .mk-rand { animation: mk-kante .56s var(--ease) backwards; }
@keyframes mk-kante {
  0%   { opacity: 0; }
  55%  { opacity: 1; }
}

/* ── Das Gummiband der festgehaltenen Geste ───────────────────────────
   Im Stationsmodus sperrt eine offene Tafel den Sektionswechsel
   (`sperrt()` in modelle.mjs). Eine geschluckte Geste braucht eine
   Antwort — sonst liest sie sich als kaputtes Scrollrad, und der
   Nutzer wischt fester statt zu schließen.

   Die Tafel gibt deshalb ein kurzes Stück in Wischrichtung nach und
   kommt zurück: die Bewegung eines Dings, das gehalten wird. `--halt-dir`
   trägt die Richtung (+1 abwärts), modelle.mjs schreibt sie.

   9 px, und keinen mehr. Das ist die Schwelle, an der eine Bewegung als
   Widerstand gelesen wird statt als Wackeln — ein Fehler-Shake gehört
   einem falschen Passwort, nicht einer richtigen Entscheidung des
   Nutzers, hier bleiben zu wollen.

   AN DER BÜHNE, und dafür gibt es zwei zwingende Gründe:

   · Die Karte trägt `mk-mat-auf` (0,56 s). Zwei Animationen auf einem
     Element lassen die erste ausfallen — wischt jemand während des
     Öffnens, bräche der Aufbau der Tafel ab.
   · Der PLATZ wäre der schlimmere Ort: er ist im offenen Zustand
     `position: static`, die Tafel darin liegt absolut gegen die BÜHNE.
     Ein `translate` macht jedes Element zum umschließenden Block seiner
     absoluten Nachfahren — die Tafel spränge also im Moment des
     Nachgebens in die schmale Rasterzelle des Platzes. Dieselbe Falle
     steht weiter oben bei `perspective`, wo sie schon zweimal Geld
     gekostet hat.

   Die Bühne ist ohnehin die ehrlichere Aussage: festgehalten wird die
   STATION, nicht die einzelne Karte. */
.modelle.haelt .mo-buehne { animation: mk-haelt .42s var(--ease); }
@keyframes mk-haelt {
  0%   { translate: 0 0; }
  30%  { translate: 0 calc(var(--halt-dir, 1) * -9px); }
  100% { translate: 0 0; }
}

/* Ankunft ohne Reise: die Tafel steht sofort, alles andere bleibt.
   „Aus" wäre hier falsch — das Ergebnis ist dasselbe Bild, nur ohne den
   Weg dorthin. */
@media (prefers-reduced-motion: reduce) {
  .mk-platz.ist-auf .mk,
  .mk-platz.ist-zu .mk,
  .mk-platz.ist-auf .mk-rand { animation: none; }
  .mk-platz.ist-auf .mk::after { display: none; }
  /* Die SPERRE bleibt auch hier — nur ihre Vorführung entfällt.
     modelle.mjs setzt die Klasse dann gar nicht erst. */
  .modelle.haelt .mo-buehne { animation: none; }
}

/* Aus `display: contents` wird hier eine echte Spalte — der einzige Zweck
   dieser Hülle. Beide Spalten dürfen intern rollen; das ist die
   Sicherung für flache Fenster, nicht der Normalfall. */
.mk-platz.ist-auf .mk-spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-hell) transparent;
}
.mk-platz.ist-auf .mk-more { display: none; }
/* Das Abzeichen rutscht aus der Mitte der Oberkante in die linke obere
   Ecke der Tafel — mittig säße es unter dem Zurück-Knopf.

   Es bleibt ABSOLUT positioniert, und das ist keine Bequemlichkeit: es
   ist ein direktes Kind der Karte, und die Karte ist im offenen Zustand
   ein Raster aus genau zwei Spalten. Ein statisches Abzeichen wäre ein
   drittes Rasterelement und risse eine eigene Zeile auf. */
.mk-platz.ist-auf .mk-badge {
  top: clamp(1.4rem, 2.4vw, 2.4rem);
  left: clamp(1.4rem, 2.4vw, 2.4rem);
  translate: 0 0;
}
/* Nur wenn eines da ist: Platz dafür in der linken Spalte. Ohne diese
   Zeile läge es auf dem Drahtkörper. */
.mk-platz.ist-auf .mk:has(.mk-badge) .mk-spalte { padding-top: 2.1rem; }
/* Anlass und „Passt zu dir" liegen im Markup in der linken Spalte, damit
   sie neben Name und Preis stehen — in der ÜBERSICHT haben sie dort
   nichts zu suchen. `.mk-spalte` ist dort `display: contents`, also
   werden ihre Kinder einzeln ausgeblendet. */
.mk-platz:not(.ist-auf) .mk-anlass,
.mk-platz:not(.ist-auf) .mk-passt { display: none; }

.mk-platz.ist-auf .mk-name,
.mk-platz.ist-auf .mk-verspr,
.mk-platz.ist-auf .mk-dauer { text-align: left; }
.mk-platz.ist-auf .mk-fuer { justify-content: flex-start; }
/* In der Reihe drückt `margin-top: auto` den Preis auf eine gemeinsame
   Grundlinie mit den vier Nachbarn. In der Tafel gibt es keine Nachbarn
   mehr — dort soll er dem Anlass folgen, und statt seiner klebt „Passt
   zu dir" am Fuß der Spalte. */
.mk-platz.ist-auf .mk-preis {
  align-items: flex-start;
  margin-top: clamp(1.1rem, 2vw, 1.7rem);
}
.mk-platz.ist-auf .mk-passt { margin-top: auto; }
.mk-platz.ist-auf .mk-name { font-size: 1rem; }
.mk-platz.ist-auf .mk-verspr {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  text-wrap: pretty;
}
.mk-platz.ist-auf .mk-preis b { font-size: clamp(2.1rem, 3.6vw, 2.9rem); }
.mk-platz.ist-auf .mk-strich {
  margin-block: clamp(.6rem, .9vw, .9rem) clamp(.5rem, .8vw, .8rem);
}
.mk-platz.ist-auf .mk-strich { background: linear-gradient(to right, var(--linie), transparent); }
/* Deutlich kleiner als früher (war 7–11 rem, dann 5–8): die linke Spalte
   trägt jetzt auch Anlass und „Passt zu dir, wenn", und sie war damit die
   höhere der beiden — gerechnet rund 570 px bei 526 px Platz. Das
   Drahtmodell ist hier Signet, nicht Hauptdarsteller; jeder Zentimeter,
   den es abgibt, ist einer, den der Text nicht rollen muss. */
.mk-platz.ist-auf .mk-schau {
  flex: none;
  height: clamp(3.6rem, 7.5svh, 5.4rem);
  margin-bottom: .7rem;
}

.mk-mehr { display: none; }
.mk-platz.ist-auf .mk-mehr {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-hell) transparent;
  /* Ruhezustand SICHTBAR, die Animation ist die Zugabe. Mit `both` hielte
     sie den Startzustand fest, wo Zeitachsen eingefroren sind — im
     Hintergrund-Tab stünde die Tafel dann leer.

     Die Verzögerung ist auf den Hologramm-Aufbau abgestimmt: die Tafel
     ist nach rund 0,36 s aufgefahren, der Text kommt danach. Umgekehrt
     sähe man den Text schon in der Linie, aus der sich die Tafel erst
     entfaltet. */
  animation: mk-mehr-ein .38s var(--ease) .3s backwards;
}
@keyframes mk-mehr-ein {
  from { opacity: 0; translate: 0 10px; }
}
/* Die linke Spalte kommt eine Spur früher — Name und Preis zuerst, die
   Leistungen danach. Das ist die Lesereihenfolge. */
.mk-platz.ist-auf .mk-spalte {
  animation: mk-mehr-ein .38s var(--ease) .24s backwards;
}
.mk-platz.ist-zu .mk-spalte,
.mk-platz.ist-zu .mk-mehr { animation: none; }

/* ── Links: der Anlass ────────────────────────────────────────────────
   Der ganze Satz, der aus der Übersichtskarte verschwunden ist. Hier hat
   er Platz — und hier ist er auch am richtigen Ort: in der Reihe soll man
   vergleichen, in der Tafel verstehen. */
.mk-anlass {
  margin: .85rem 0 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* ── Rechts: „Enthält alles aus …" ────────────────────────────────────
   Eine Zeile, die die Leiter sichtbar macht. Sie stand früher als erster
   Aufzählungspunkt in der Leistungsliste („Alles aus dem Basic-Modell")
   und ging dort unter — sie ist aber keine Leistung, sondern die Ansage,
   dass man nach oben nichts verliert. */
.mk-erbt {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--ink-dim);
}
.mk-erbt::before {
  content: '';
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--accent);
}
.mk-erbt b { color: var(--ink); font-weight: 500; }

/* ── Die Leistungsblöcke ──────────────────────────────────────────────
   Zwei Blöcke stehen nebeneinander, ein einzelner wird zweispaltig. Beides
   hält die Zeilen unter 75 Zeichen, ohne dass eine halbleere Tafel
   entsteht. */
.mk-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-bottom: 1.25rem;
}
.mk-feld h4,
.mk-passt h4 {
  margin: 0 0 .7rem;
  font: 500 .62rem/1.4 'Space Grotesk', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--haze) 88%, transparent);
}
.mk-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
/* Nur wenn es EINEN Block gibt: dann füllt die Liste die Breite in zwei
   Spalten, statt als schmale Säule dazustehen. `break-inside` ist Pflicht
   — ohne es reißt eine zweizeilige Zusage mitten durch. */
.mk-felder.eins .mk-liste {
  columns: 2;
  column-gap: clamp(1rem, 2vw, 2rem);
  display: block;
}
.mk-felder.eins .mk-liste li {
  break-inside: avoid;
  margin-bottom: .5rem;
}
.mk-liste li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
/* Das Häkchen aus zwei Kanten statt aus einem Zeichen: eine Glyphe säße
   je nach Schriftfall anders auf der Grundlinie. */
.mk-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .48em;
  width: .62rem;
  height: .34rem;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  rotate: -45deg;
}

/* ── „Passt zu dir, wenn" ─────────────────────────────────────────────
   Steht in der LINKEN Spalte, unter dem Preis — und das ist Absicht: es
   gehört zur Frage „bin ich hier richtig?", nicht zur Frage „was kriege
   ich?". Die Pfeile unterscheiden es auf einen Blick von der
   Häkchen-Liste daneben. */
.mk-passt {
  margin-top: clamp(.9rem, 1.6vw, 1.4rem);
  padding-top: clamp(.9rem, 1.6vw, 1.4rem);
  border-top: 1px solid var(--linie);
}
.mk-passt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.mk-passt li {
  position: relative;
  padding-left: 1.35rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink-dim);
}
.mk-passt li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  opacity: .8;
}

/* ── „Typisch für" ────────────────────────────────────────────────────
   Die lange Branchenliste (seit 17.08.2026), rechte Spalte unter den
   Feldern. Eine gedämpfte Fließzeile mit Trennpunkten — dieselbe Sprache
   wie `.mk-fuer` auf der Karte, nur mehr davon. Kein Raster, keine
   Häkchen: Branchen sind Wörter zum Überfliegen, keine Leistungen zum
   Abhaken. Die Titelmarke sitzt inline davor, damit die Zeile keine
   eigene Überschrift-Höhe kostet. */
.mk-branchen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .55rem;
  margin: clamp(.7rem, 1.2vw, 1rem) 0 0;
  padding-top: clamp(.7rem, 1.2vw, 1rem);
  border-top: 1px solid var(--linie);
  font-size: .72rem;
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.mk-branchen-titel {
  margin-right: .25rem;
  font: 500 .62rem/1.4 'Space Grotesk', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--haze) 88%, transparent);
}
.mk-branchen span + span:not(.mk-branchen-titel) { display: inline-flex; align-items: baseline; gap: .55rem; }
.mk-branchen span + span:not(.mk-branchen-titel)::before {
  content: '';
  align-self: center;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
/* Der erste Begriff folgt direkt auf die Titelmarke — ohne Punkt davor. */
.mk-branchen .mk-branchen-titel + span::before { display: none; }

/* ── Der Zuschnitt ────────────────────────────────────────────────────
   Das Versprechen, dass nichts von der Stange kommt — bei JEDEM Modell,
   auch beim kleinsten. Abgesetzt durch eine Haarlinie, nicht durch eine
   zweite Kartenfläche: eine Karte in einer Karte ist immer falsch. */
.mk-zuschnitt {
  margin-top: auto;
  padding-top: clamp(.9rem, 1.6vw, 1.3rem);
  border-top: 1px solid var(--linie);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.mk-zuschnitt b { color: var(--ink); font-weight: 500; }

/* ── Der Fuß: Aufruf und Nachbarstufe ─────────────────────────────────
   Nebeneinander, aber nicht gleichrangig: der Aufruf ist eine Fläche, der
   Weg zur Nachbarstufe eine Zeile. */
.mk-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(.9rem, 1.6vw, 1.3rem);
}
.mk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: linear-gradient(150deg, #a6f2e8 0%, var(--accent) 44%, #45bcb7 100%);
  color: #042220;
  font: 600 .8rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  touch-action: manipulation;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    0 14px 30px -16px rgba(111, 222, 217, .5);
  transition: transform .22s var(--ease), box-shadow .3s var(--ease);
}
.mk-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .mk-cta:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .7),
      0 20px 40px -16px rgba(111, 222, 217, .62);
  }
}

/* Der Weg zur Nachbarstufe. Er ist die stärkste Einzelmaßnahme gegen
   „ich weiß nicht, was ich nehmen soll" — man vergleicht IM Detail
   weiter, statt zurückzugehen und neu zu suchen. Deshalb steht er neben
   dem Aufruf und nicht in einer Fußzeile. */
.mk-nachbar {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 .76rem/1.3 'Space Grotesk', sans-serif;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .24s var(--ease);
}
.mk-nachbar span { color: var(--ink-dim); }
.mk-nachbar i {
  font-style: normal;
  color: var(--accent);
  transition: translate .24s var(--ease);
}
.mk-nachbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .mk-nachbar:hover i { translate: 3px 0; }
  .mk-nachbar:hover span { color: var(--ink); }
}

/* ══ ZURÜCK ═════════════════════════════════════════════════════════════
   Er sitzt IN der Tafel, in ihrer oberen rechten Ecke.

   ── DREI ORTE IN EINEM TAG, UND WARUM DIESER BLEIBT (10.08.2026) ───────
   Zuerst hing er an der Bühnenecke — und lag damit, solange die Tafel die
   ganze Bühne füllte, mitten auf ihrem Text (Jordans Screenshot: die
   Pille „Zurück zur Übersicht" über der ersten Leistungszeile). Dann an
   der ausgerechneten Kante der begrenzten Tafel. Das hielt genau so
   lange, bis die Tafel auch senkrecht mittig stand: eine Ecke, die man
   ausrechnen kann, braucht eine bekannte Höhe — und `fit-content` hat
   keine.

   Also gehört er dorthin, wo er hingehört: in die Tafel. Ein Knopf im
   Knopf ist das nicht, denn die offene Karte legt ihr `role="button"` ab
   (modelle.mjs, `waehlen`). In der Übersicht steht er auf
   `display: none` und ist damit auch für die Tastatur nicht da.

   Aus der Pille ist ein Zeichen mit Wort geworden. Das Kreuz trägt die
   Handlung, das Wort nimmt ihr die Rätselhaftigkeit. */
.mk-zu { display: none; }
.mk-platz.ist-auf .mk-zu {
  position: absolute;
  top: clamp(.9rem, 1.4vw, 1.3rem);
  right: clamp(.9rem, 1.4vw, 1.3rem);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .95rem 0 .7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: color-mix(in srgb, var(--void) 55%, transparent);
  color: var(--ink-dim);
  font: 500 .66rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease);
}
/* Das Kreuz aus zwei Strichen statt aus einem Zeichen: „×", „✕" und „x"
   sitzen je nach Schriftschnitt verschieden hoch, und genau bei einem
   Symbol dieser Größe fällt ein halbes Pixel Versatz auf. */
.mk-zu i {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  font-style: normal;
}
.mk-zu i::before,
.mk-zu i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1px;
  right: 1px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}
.mk-zu i::before { rotate: 45deg; }
.mk-zu i::after  { rotate: -45deg; }
.mk-zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .mk-zu:hover {
    color: var(--ink);
    border-color: var(--linie-hell);
    background: color-mix(in srgb, var(--void) 72%, transparent);
  }
}


/* ══ SCHMAL ═════════════════════════════════════════════════════════════
   Eine eigene Fassung, keine geschrumpfte. Die Grenze steht seit dem
   10.08.2026 nur noch HIER — `schmalAb` in modelle.mjs ist entfallen, weil
   ohne FLIP nichts mehr gegen Rechtecke rechnet.

   Karten ausblenden wäre Produktverlust, nicht Anpassung — deshalb ein
   Raster, das umbricht. */
@media (max-width: 900px) {
  .mo-reihe {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    max-width: 40rem;
  }
  .mk-platz:has(.ist-beliebt) { margin-block: 0; }
  .mk.ist-beliebt { padding-block: clamp(1.15rem, 1.5vw, 1.6rem); }
  .mk-badge { top: 0; }
  .mk-platz.ist-auf { position: relative; }
  .mk-platz.ist-auf .mk {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-height: 88svh;
    border-radius: var(--ecke) var(--ecke) 0 0;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* ── DIE ZEILENREGEL GILT HIER NICHT ──────────────────────────────
     `grid-template-rows: minmax(0, 1fr)` ist auf dem Rechner richtig:
     dort steht EINE Zeile mit zwei Spalten, und der Deckel sorgt dafür,
     dass die Spalten rollen statt überzulaufen.

     Hier stehen die beiden Spalten UNTEREINANDER — also zwei Zeilen, von
     denen nur die erste vom `1fr` erfasst wird. Die zweite ist implizit
     `auto`, nimmt sich ihre vollen 874 px, und für die erste bleibt, was
     übrig ist: gemessen 26 px bei 511 px Inhalt. Der Name und der Preis
     wurden zu einem 26 px hohen Streifen zusammengequetscht.

     Gefunden am 10.08.2026 beim Nachmessen im Browser — im Blatt sieht
     man den Grund nicht, die Regel steht ja 200 Zeilen weiter oben. */
  .mk-platz.ist-auf .mk { grid-template-rows: auto; }
  /* EIN Roller, nicht drei. Das Blatt selbst rollt; die beiden Spalten
     dürfen es hier nicht auch tun, sonst gerät man beim Wischen in einen
     inneren Bereich und die Seite darunter bewegt sich nicht mehr. */
  .mk-platz.ist-auf .mk-spalte,
  .mk-platz.ist-auf .mk-mehr { overflow: visible; min-height: auto; }
  /* Zwei Textspalten auf 390 px wären je 20 Zeichen breit. */
  .mk-felder.eins .mk-liste { columns: 1; }
  /* Im Blatt von unten bleibt es in der Ecke wie am Rechner — die
     Oberkante des Blattes ist dort die Griffkante, dort gehört nichts
     hin, das man lesen soll. */
  .mk-platz.ist-auf .mk:has(.mk-badge) .mk-spalte { padding-top: 1.6rem; }
  .mk { transform: none !important; }
  /* Im Blatt bleibt er oben rechts, nur enger an der Kante. Er rollt mit
     dem Inhalt weg — das ist hier vertretbar, weil es auf dem Handy zwei
     bequemere Wege zurück gibt: der Tipp über das Blatt (das Blatt reicht
     nur bis 88 svh, darüber liegt die Seite) und die Zurück-Geste. */
  .mk-platz.ist-auf .mk-zu { top: .8rem; right: .8rem; }
}