/* ══ MODELLE · PREMIUM-AUFSATZ ═══════════════════════════════════════════
   Nach Jordans Vorlage `Downloads/grok-image-a6224abc….jpg` (09.08.2026).

   Das hier ist ein AUFSATZ, kein Ersatz. `modelle.css` bleibt geladen und
   trägt weiter Struktur, FLIP-Zustände und Responsive; diese Datei ändert
   nur das Aussehen und ist auf `.modelle.premium` gescoped. Damit gewinnt
   sie ohne ein einziges `!important`, und Vanilla 3 läuft unverändert
   weiter.

   ── WAS HIER NIE STEHEN DARF ──────────────────────────────────────────
   `position`, `display`, `grid-template-*`, `inset` der Karte. Daran
   hängt der FLIP: er misst Rechtecke vor und nach dem Klassenwechsel und
   rechnet daraus eine Matrix. Wer die Bezugsrahmen verschiebt, bekommt
   keinen Fehler, sondern einen Flug ins Nichts. Abstände und Schriftmaße
   sind dagegen frei — die misst er ja gerade.

   ── WAS DIE VORLAGE AUSMACHT ──────────────────────────────────────────
   Vier Dinge, und keines davon ist ein Effekt:

     1. LEERE. Die Vorlage ist zu zwei Dritteln nichts. Alle Innenabstände
        hier sind deutlich größer als im Bestand.
     2. EINE Kante. Kein Rahmen, kein Schatten als Umriss — ein Haar aus
        Licht, violett oben links, cyan unten rechts.
     3. GESPERRTE LICHTSCHRIFT. Versalien, weit gesperrt, dünn. Dieselbe
        Sprache wie der Hero-Titel, zwei Stufen kleiner.
     4. HAARLINIEN statt Aufzählungspunkten. Die Leistungen sind eine
        Liste, keine Bulletpoints.

   Was die Vorlage NICHT hergibt und deshalb nicht übernommen wurde: ihre
   Icons. Ein Icon-Satz, der nicht existiert, wird nicht erfunden — die
   Trennlinien tragen die Gliederung allein.
──────────────────────────────────────────────────────────────────────── */

.modelle.premium {
  /* Etwas rundere Ecken als im Bestand: die Vorlage lebt vom weichen,
     großen Radius. Er wird von modelle.css über `--ecke` gelesen. */
  --ecke: clamp(20px, 1.7vw, 30px);
}

/* ── Der Sektionskopf ──────────────────────────────────────────────────
   „Die 5 Modelle" wird zur Augenbraue der Vorlage: klein, weit gesperrt,
   mit zwei kurzen Strichen. Die Striche baut modelle.css bereits als
   ::before/::after — hier werden sie nur feiner und länger. */
.modelle.premium .mo-kicker {
  font-size: .68rem;
  letter-spacing: .38em;
  text-indent: .38em;
  color: var(--ink-dim);
  opacity: .9;
}
.modelle.premium .mo-kicker::before,
.modelle.premium .mo-kicker::after {
  width: clamp(28px, 5vw, 64px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--linie-hell));
  opacity: .8;
}

.modelle.premium .mo-kopf h2 {
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  letter-spacing: .015em;
}

.modelle.premium .mo-hinweis {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .72;
}

/* ── Die Karte ─────────────────────────────────────────────────────────
   Fast schwarz. Der Bestand legt einen Fliederschleier darüber; die
   Vorlage tut das nicht, und das ist der halbe Unterschied zwischen
   „getönte Fläche" und „Glas vor Nacht". Was an Farbe da ist, kommt von
   der Kante und vom Drahtkörper — nicht vom Grund. */
.modelle.premium .mk {
  padding: clamp(1.5rem, 2vw, 2.1rem) clamp(1.15rem, 1.5vw, 1.6rem)
           clamp(1.35rem, 1.8vw, 1.9rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 34%),
    color-mix(in srgb, var(--void) 62%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 30px 70px -40px rgba(0, 0, 0, .95);
}

/* Die Kante. Deutlich präsenter als im Bestand und klar gerichtet:
   violett oben links, ein heller Scheitel bei 42 %, cyan unten rechts.
   Genau diese Diagonale macht die Vorlage aus — ein gleichmäßig heller
   Rand sähe aus wie ein Rahmen, nicht wie Licht auf einer Kante. */
.modelle.premium .mk-rand {
  background: linear-gradient(152deg,
    color-mix(in srgb, var(--haze) 78%, transparent) 0%,
    rgba(255, 255, 255, .55) 42%,
    color-mix(in srgb, var(--accent) 62%, transparent) 100%);
  opacity: .55;
}
/* ── Was beim Überfahren passiert ──────────────────────────────────────
   Bis zum 10.08.2026 zog ein Lichtstreif quer durch die Karte. Auf
   Jordans Ansage ersetzt durch das Naheliegende: die Karte nimmt ihre
   eigene Farbe an und wird dabei etwas durchsichtiger.

   Das ist der ehrlichere Hinweis. Ein wandernder Glanz sagt „hier
   passiert eine Animation"; eine Farbänderung sagt „diese Karte ist
   gemeint" — und genau das will jemand wissen, der zwischen fünf
   Angeboten steht. `--ton` liegt schon auf jedem Platz (modelle.mjs
   mischt ihn über die Reihe von Flieder nach Türkis), die Karte trägt
   ihn also, ohne dass eine zweite Farbe eingeführt wird.

   Die Stärke ist am 10.08.2026 angehoben worden (von 14/6 auf 24/11 %):
   „die Farbe war vorher etwas intensiver, das hat mir mehr gefallen."
   Nach oben bleibt Luft, aber nicht viel — ab etwa 35 % kippt die Karte
   von „Glas vor Nacht" in „getönte Kachel", und das ist der Unterschied,
   um den es dem ganzen Aufsatz geht. */
@media (hover: hover) {
  .modelle.premium .mk:hover {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--ton, #b9a4f0) 24%, transparent),
        transparent 58%),
      color-mix(in srgb, var(--ton, #b9a4f0) 11%, transparent),
      color-mix(in srgb, var(--void) 44%, transparent);
  }
  .modelle.premium .mk:hover .mk-rand { opacity: .9; }
}
.modelle.premium .mk-platz.ist-auf .mk-rand { opacity: 1; }

/* Die ausgezeichnete Karte trägt dieselbe Kante, nur voll — nicht eine
   zweite, andere. Eine Auszeichnung, die eine neue Gestalt einführt,
   ist keine Auszeichnung mehr, sondern ein zweites Element. */
.modelle.premium .mk.ist-beliebt .mk-rand { opacity: .95; }

.modelle.premium .mk-badge {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: .42em .9em .42em .8em;
}

/* ── Name, Zielgruppe, Preis ───────────────────────────────────────────
   Der Name ist in der Vorlage das größte Wort auf der Karte und weit
   gesperrt. In der Reihe muss er sich den Platz mit vier Nachbarn teilen,
   also kleiner — die Sperrung trägt den Charakter, nicht die Größe. */
.modelle.premium .mk-name {
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(.86rem, 1.05vw, 1.02rem);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  margin-top: .2rem;
}

/* ── Versprechen und Zielgruppe ────────────────────────────────────────
   Hier stand bis zum 10.08.2026 `.mk-fit`: die Zielgruppe als ganzer Satz
   in gesperrten Versalien. Bei Premium waren das 95 Zeichen — auf 11 rem
   Kartenbreite acht Zeilen, die jede Karte zur Textwand machten.

   Die Regel dahinter, damit der Fehler nicht wiederkommt: gesperrte
   Versalien sind eine AUSZEICHNUNG. Sie tragen zwei, drei Wörter und
   kosten bei jedem weiteren Wort überproportional Lesbarkeit — Versalien
   haben keine Ober- und Unterlängen, an denen das Auge Wortbilder
   erkennt, und die Sperrung nimmt ihm zusätzlich den Wortzusammenhalt.

   Deshalb jetzt zwei Zeilen mit klar getrennten Aufgaben:
     .mk-verspr  der Anlass, gemischtschriftlich und größer — die Zeile,
                 nach der entschieden wird
     .mk-fuer    drei Begriffe, Versalien, weil DREI BEGRIFFE genau der
                 Fall sind, für den die Auszeichnung gemacht ist */
.modelle.premium .mk-verspr {
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--ink);
  opacity: .96;
}
.modelle.premium .mk-fuer {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .72;
}

.modelle.premium .mk-preis b {
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
}
/* Das Währungszeichen bleibt untergeordnet, steht aber auf der
   Grundlinie. Die Vorlage setzt ihr „$" hochgestellt — mit „ab 2.990 €"
   ging das nicht auf: hochgestellt sah es aus wie eine Fußnotenziffer,
   und zusammen mit dem vorangestellten „ab" kippte die ganze Zeile aus
   dem Gleichgewicht. Eine übernommene Vorlage endet dort, wo die eigenen
   Daten anders aussehen als ihre. */
.modelle.premium .mk-waehrung {
  font-size: .46em;
  letter-spacing: .06em;
  opacity: .72;
  margin-left: .18em;
}
.modelle.premium .mk-ab { opacity: .78; }
.modelle.premium .mk-preis i {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .7;
}

.modelle.premium .mk-strich {
  background: linear-gradient(to right, transparent, var(--linie-hell), transparent);
  opacity: .55;
}

.modelle.premium .mk-dauer {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .75;
}
.modelle.premium .mk-dauer span { opacity: .6; letter-spacing: .16em; }

.modelle.premium .mk-more span {
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* ══ DER HERAUSGEHOBENE ZUSTAND — hier IST die Vorlage ═══════════════════
   Ab hier darf die Karte alles nehmen, was sie in der Reihe entbehren
   musste: Größe, Sperrung, Luft. */
.modelle.premium .mk-platz.ist-auf .mk {
  padding: clamp(1.8rem, 3vw, 3.2rem) clamp(1.8rem, 3.2vw, 3.4rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 28%),
    color-mix(in srgb, var(--void) 70%, transparent);
}

.modelle.premium .mk-platz.ist-auf .mk-name {
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  letter-spacing: .3em;
  text-indent: .3em;
  margin: 0 0 .5rem;
}

.modelle.premium .mk-platz.ist-auf .mk-verspr {
  letter-spacing: .01em;
  opacity: 1;
  max-width: 20ch;
}
.modelle.premium .mk-platz.ist-auf .mk-fuer {
  font-size: .66rem;
  letter-spacing: .18em;
  opacity: .7;
}
.modelle.premium .mk-anlass { max-width: 42ch; }

.modelle.premium .mk-platz.ist-auf .mk-preis b {
  font-size: clamp(2.8rem, 5.4vw, 4.4rem);
}

.modelle.premium .mk-platz.ist-auf .mk-strich {
  background: linear-gradient(to right, var(--linie-hell), transparent 70%);
}

/* ── Die Leistungen: Haarlinien statt Punkte ───────────────────────────
   Die Vorlage listet mit einer 1-px-Linie zwischen den Zeilen und ohne
   Aufzählungszeichen. Das ist der Grund, warum die Liste dort nicht wie
   eine Liste aussieht, sondern wie eine Tabelle ohne Rahmen.

   ── GEMISCHTSCHRIFT, NICHT VERSALIEN (10.08.2026) ────────────────────
   Bis dahin standen diese Zeilen in gesperrten Versalien — dieselbe
   Auszeichnung wie auf der Zielgruppenzeile, und derselbe Fehler in
   größerem Maßstab: „WARENKORB, MODERNER CHECKOUT & ZAHLUNGSANBINDUNG
   (PAYPAL, KREDITKARTE, KLARNA)" ist ein Satz, den man buchstabieren
   muss statt ihn zu lesen. Die Vorlage kommt damit durch, weil dort
   Zwei-Wort-Etiketten stehen. Hier stehen Zusagen.

   Was bleibt, ist die HAARLINIE — sie trägt den Charakter der Vorlage,
   und den trug nie die Sperrung. */
/* Nur ZWISCHEN den Zeilen, nicht über und unter jeder. Die erste Fassung
   hatte eine Kante an der Liste plus eine unter jedem Punkt — bei elf
   Punkten zwölf Linien, und das liest sich als Gitter, nicht als
   Gliederung. Jordan am 10.08.2026: „sehr überladen". Eine Trennlinie
   trennt; eine Umrandung rahmt ein, und eingerahmt war hier nichts
   gemeint. */
.modelle.premium .mk-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 0;
}
.modelle.premium .mk-liste li {
  position: relative;
  margin: 0;
  padding: .5rem 0 .5rem 1.4rem;
  border-bottom: 0;
  font-size: .78rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  opacity: .9;
  text-wrap: pretty;
}
.modelle.premium .mk-liste li + li {
  border-top: 1px solid color-mix(in srgb, var(--linie) 62%, transparent);
}
/* Eine Marke, kein Icon: ein feiner Strich in Akzentfarbe. Er ersetzt
   den Aufzählungspunkt, ohne einen Icon-Satz zu erfinden, den es nicht
   gibt. */
.modelle.premium .mk-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(.5rem + .72em);
  width: 9px;
  height: 1px;
  border: 0;
  rotate: none;
  background: var(--accent);
  opacity: .75;
}
.modelle.premium .mk-liste li::marker { content: none; }
/* In der zweispaltigen Fassung greift `li + li` auch über den
   Spaltenumbruch hinweg — die erste Zeile der zweiten Spalte bekäme dann
   eine Linie an der Oberkante, die dort ins Leere trennt. Sichtbar wäre
   nur ein schiefer Strich; die Ursache stünde nirgends. */
.modelle.premium .mk-felder.eins .mk-liste li + li { border-top: 0; }
.modelle.premium .mk-felder.eins .mk-liste li {
  padding-block: .34rem;
}
.modelle.premium .mk-felder.eins .mk-liste li::before { top: calc(.34rem + .72em); }

/* Die beiden Spaltenköpfe der Tafel. Hier sind Versalien richtig: zwei,
   drei Wörter, und sie sollen als Ordnungsebene gelesen werden, nicht
   als Inhalt. */
.modelle.premium .mk-feld h4,
.modelle.premium .mk-passt h4,
.modelle.premium .mk-branchen-titel {
  letter-spacing: .22em;
  opacity: .85;
}

.modelle.premium .mk-erbt {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .64rem;
  opacity: .8;
}

.modelle.premium .mk-passt li,
.modelle.premium .mk-zuschnitt { text-wrap: pretty; }
.modelle.premium .mk-zuschnitt b {
  display: block;
  margin-bottom: .3rem;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: .92rem;
  letter-spacing: .01em;
  color: var(--ink);
}

/* ── Der Knopf ─────────────────────────────────────────────────────────
   In der Vorlage eine UMRISS-Fläche mit Verlaufskante, nicht gefüllt.
   Das ist hier richtig, obwohl die Live-Seite in jedem CTA-Paar eine
   gefüllte Fläche führt: dort steht der Knopf allein auf dunklem Grund,
   hier sitzt er auf einer Karte, die selbst schon eine Leuchtkante hat.
   Zwei gefüllte Flächen übereinander nehmen der Karte die Ruhe. */
.modelle.premium .mk-cta {
  position: relative;
  isolation: isolate;
  margin-top: auto;
  padding: 1.05em 1.6em;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .028);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background .26s var(--ease), translate .26s var(--ease);
}
.modelle.premium .mk-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--haze) 85%, transparent),
    rgba(255, 255, 255, .5) 48%,
    color-mix(in srgb, var(--accent) 80%, transparent));
  -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;
}
@media (hover: hover) {
  .modelle.premium .mk-cta:hover {
    background: rgba(255, 255, 255, .07);
    translate: 0 -1px;
  }
}

/* ── Der Steuer-Hinweis unter der Reihe ────────────────────────────────
   Pflichtangabe seit der Regelbesteuerung (08.08.2026): Nettopreise
   müssen dort gekennzeichnet sein, wo die Preise stehen — die fünf
   Karten SIND die Preisangabe dieses Prototyps. Das Element steht im
   Markup der Seite (wie Kicker und Überschrift: Inhalt, kein Modulbau).

   `--ink-dim` OHNE zusätzliche opacity — die Falle darunter steht in
   der Palette dokumentiert (unter .72 fällt der Kontrast auf --void
   unter 4,5:1). Eine Pflichtangabe darf leise sein, nicht unleserlich. */
.modelle.premium .mo-ust {
  margin: clamp(.7rem, 1.8svh, 1.3rem) auto 0;
  max-width: 64ch;
  padding-inline: 1rem;
  text-align: center;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--ink-dim);
  transition: opacity .32s var(--ease);
}
/* Mit offener Tafel tritt er ab wie der Sektionskopf: die Tafel trägt
   ihre eigenen Preise, und zwei Textblöcke um sie herum wären
   Konkurrenz. Nur opacity, KEINE visibility-Transition — die hat am
   11.08.2026 als „Texte stehen zu lange da" schon einmal Stunden
   gekostet (stationen.css erklärt den Mechanismus). */
.modelle.premium.ist-offen .mo-ust { opacity: 0; }

/* ── Schmal ────────────────────────────────────────────────────────────
   Unter 900 px stapelt modelle.css die Reihe und macht aus der Tafel ein
   Blatt von unten. Die Sperrungen müssen dort zurück: was auf einer
   14-rem-Karte edel wirkt, sprengt bei 390 px die Zeile. */
@media (max-width: 900px) {
  /* ── DAS BLATT MUSS DECKEN ────────────────────────────────────────
     Am Rechner steht die Tafel vor der Welt, und 30 % Durchsicht sind
     dort genau das, was sie zu Glas macht. Unter 900 px ist sie ein
     Blatt von unten — und darunter liegt kein Nebel, sondern die Seite:
     im Screenshot vom 10.08.2026 stand der Hero-Titel „SPARWEB AGENCY"
     mitten im Anlass-Satz von Individual.

     Text auf Text ist kein Transparenzeffekt, sondern ein Lesefehler.
     Deshalb hier fast deckend — der Verlauf oben bleibt, damit die
     Griffkante ihre Lichtkante behält. */
  .modelle.premium .mk-platz.ist-auf .mk {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 22%),
      color-mix(in srgb, var(--void) 97%, transparent);
  }
  .modelle.premium .mk-name { letter-spacing: .16em; text-indent: .16em; }
  .modelle.premium .mk-platz.ist-auf .mk-name {
    letter-spacing: .2em; text-indent: .2em;
    font-size: clamp(1.2rem, 6vw, 1.7rem);
  }
  .modelle.premium .mk-liste li { padding-left: 1.3rem; }
  .modelle.premium .mk-fuer { letter-spacing: .12em; }
  .modelle.premium .mk-cta { letter-spacing: .18em; }
  .modelle.premium .mo-kicker { letter-spacing: .28em; text-indent: .28em; }
}