/* =============================================================================
   preistafel.css — die eine Preistafel für Startseite (#preise), /preise und Signup.

   Seit dem 2026-10-18. Bis dahin stand die Tafel zweimal im Haus: als .mk-price-* in
   marketing.css und als .pricing-card / .signup-pricing-panel in signup.css — mit anderer
   Schrift, anderen Farben, anderen Abständen. Das Markup dazu steht EINMAL in
   resources/views/marketing/preistafel.blade.php, und dieses Stylesheet laden beide Layouts.

   WARUM EINE EIGENE DATEI und nicht marketing.css im Signup: marketing.css trägt die ganze
   Werbeseite (Kopfleiste, Hero, Galerie, FAQ …) und setzt auf --mk-* an :root. Im Signup
   liegt darunter Bootstrap. Eine Datei, die nur die Tafel kennt, kommt in beiden Kaskaden
   gleich an.

   FARBEN: dieselbe Palette wie marketing.css, nicht eine Kopie davon. Jedes Token unten liest
   zuerst --mk-* — auf dem Marketing-Host gilt also der Wert aus marketing.css, und eine
   Farbänderung dort kommt hier an. Der zweite Wert ist der Rückfall für das Signup, wo
   marketing.css fehlt; er MUSS dem Wert in marketing.css entsprechen. Kontraste von Hand
   gerechnet (tests/Feature/Ui/ContrastPaletteTest.php kennt diese Datei nicht):

     Tarifname        --mk-blue-dark auf Weiss               9,36:1
     Betrag           --mk-blue auf Weiss                    6,44:1  Großtext, Maßstab 3:1
     Abzeichen        --mk-blue-dark auf --mk-akz-subtle     8,46:1  (akz-dark wären 6,70:1)
     Merkmale         --mk-n800 auf Weiss                   15,4:1
     Einheit, Fußnote --mk-n600 auf Weiss                    8,14:1  (auf --mk-n25: 7,86:1)
     Kastentext       --mk-n600 auf --mk-n50                 7,52:1
     Kastenkopf       --mk-blue-dark auf --mk-n50            8,65:1
     Haken            --mk-akz-dark auf --mk-akz-subtle      6,70:1  Grafik, Maßstab 3:1

   SPEZIFITÄT: Jede Regel hängt an .mk-price-tafel (zwei Klassen). Auf /preise steht die Tafel
   in .mk-prosa, und deren Regeln (.mk-prosa h2, .mk-prosa ul, .mk-prosa a — Klasse plus
   Element) schoben bis zum 2026-10-18 vierzig Pixel Leerraum über jeden Tarifnamen, rückten
   die Merkmale ein und färbten die Knöpfe als Fließtextlinks. Im Signup gilt dasselbe für
   Bootstraps h2/h3/ul/p.
   ============================================================================= */

/* Montserrat liegt in public/fonts, wie für marketing.css. Auf dem Marketing-Host ist die
   Schrift damit zweimal angemeldet — mit derselben Datei, der Browser lädt sie einmal. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');
}

.mk-price-tafel {
    --pt-blue:         var(--mk-blue, #0A58CA);
    --pt-blue-dark:    var(--mk-blue-dark, #084298);
    --pt-akz:          var(--mk-akz, #8ECCC5);
    --pt-akz-dark:     var(--mk-akz-dark, #205F56);
    --pt-akz-subtle:   var(--mk-akz-subtle, #E6F7F4);
    --pt-n50:          var(--mk-n50, #F4F6F9);
    --pt-n100:         var(--mk-n100, #EDF2F7);
    --pt-n200:         var(--mk-n200, #DEE2E6);
    --pt-n600:         var(--mk-n600, #4A5058);
    --pt-n800:         var(--mk-n800, #212529);
    --pt-font-heading: var(--mk-font-heading, 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif);
    --pt-font-body:    var(--mk-font-body, system-ui, -apple-system, 'Segoe UI', sans-serif);

    max-width: 1080px;
    margin: 0 auto;
    font-family: var(--pt-font-body);
    color: var(--pt-n800);
}
.mk-price-tafel *,
.mk-price-tafel *::before,
.mk-price-tafel *::after { box-sizing: border-box; }

/* Auf /preise steht die Tafel in der 720-px-Textspalte, und drei Karten brachen dort als 2 + 1
   um. Die Spalte gibt deshalb ihre Breite frei, wenn sie eine Tafel enthält, und hält sie für
   alle übrigen Kinder selbst — der Fließtext behält seine rund 75 Zeichen je Zeile (Begründung
   bei .mk-prosa in marketing.css). Bewusst nicht width: 100vw o. ä.: Das zählt die
   Bildlaufleiste mit und schiebt die Seite seitlich. Ohne :has() bleibt die Tafel in der
   Spalte und bricht wie früher um. */
.mk-prosa:has(> .mk-price-tafel) { max-width: none; }
.mk-prosa:has(> .mk-price-tafel) > :not(.mk-price-tafel) { max-width: 720px; }
.mk-prosa > .mk-price-tafel { margin: 8px 0 48px; }

/* ── Kopf ─────────────────────────────────────────────────────────────────── */

.mk-price-tafel .mk-price-kopf { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.mk-price-tafel .mk-price-kopf h2 {
    font-family: var(--pt-font-heading);
    font-weight: 700;
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.2;
    color: var(--pt-blue-dark);
    margin: 0 0 12px;
    text-wrap: balance;
}
.mk-price-tafel .mk-price-kopf p {
    font-size: 17px;
    line-height: 1.55;
    color: var(--pt-n600);
    margin: 0;
    text-wrap: pretty;
}
.mk-price-tafel .mk-price-kopf p + p { margin-top: 6px; }

/* ── Karten ───────────────────────────────────────────────────────────────── */

/* auto-fit statt fester Spaltenzahl (die plans-Tabelle entscheidet, wie viele Tarife kommen).
   260 px ist die Breite, unter der Betrag und Einheit in der .mk-price-line umbrechen. */
.mk-price-tafel .mk-price-grid {
    display: grid;
    gap: 24px;
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* align-items:stretch am Raster, column an der Karte, flex:1 an der Liste — nur so stehen die
   Knöpfe aller Karten auf einer Linie, egal wie viele Punkte drinstehen. */
.mk-price-tafel .mk-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--pt-n200);
    border-radius: 14px;
    padding: 28px 24px 24px;
    box-shadow: 0 1px 2px rgba(8, 66, 152, .05), 0 12px 32px -14px rgba(8, 66, 152, .22);
}

/* Die hervorgehobene Karte: 1 px Rahmen plus 1 px Innenring statt „border: 2px" — dieselbe
   doppelte Kante, aber gleiche TEXTBREITE. Ein 2-px-Rahmen frisst zwei Pixel vom Inhalt, und
   die Merkmalliste brach dann an anderen Stellen um als die gleich langen Zeilen daneben. Der
   Innenring liegt VOR dem Schatten — box-shadow zeichnet von vorn nach hinten. --mk-akz wären
   auf Weiss 1,81:1 und praktisch unsichtbar, --mk-akz-dark misst 7,41:1. Heute ungenutzt
   (marketing.featured_plan ist leer), siehe Kopf von preistafel.blade.php. */
.mk-price-tafel .mk-price-card-hervor {
    border-color: var(--pt-akz-dark);
    box-shadow: inset 0 0 0 1px var(--pt-akz-dark), 0 12px 32px -14px rgba(8, 66, 152, .22);
}
/* top:-13px ist die halbe Abzeichenhöhe, damit es mittig auf dem Rahmen sitzt.
   --mk-blue-dark auf --mk-akz sind 5,17:1 — Ausnahme der Akzentrolle, Begründung im Kopf von
   marketing.css. */
.mk-price-tafel .mk-price-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    background: var(--pt-akz);
    color: var(--pt-blue-dark);
    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    padding: 3px 12px;
    border-radius: 4px;
    white-space: nowrap;
}

/* „Guthaben" oder „Monatstarif" (Tarifdarstellung::abrechnungsart). Blau statt Akzentgrün als
   Schrift: --mk-akz-dark erreichte auf der hellen Fläche nur 6,70:1. */
.mk-price-tafel .mk-price-art {
    align-self: flex-start;
    margin: 0 0 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pt-akz-subtle);
    color: var(--pt-blue-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mk-price-tafel .mk-price-name {
    font-family: var(--pt-font-heading);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    color: var(--pt-blue-dark);
    margin: 0;
}

/* baseline, nicht center: „10,00 €" und „pro Monat" sitzen auf einer Grundlinie. */
.mk-price-tafel .mk-price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 10px 0 0;
}
/* --mk-blue statt --mk-blue-dark wie die Überschriften: 42 px in 700 ist Großtext, und dies ist
   die eine Stelle, an der das Markenblau als Fläche wirken soll (Kopf von marketing.css). */
.mk-price-tafel .mk-price-amount {
    font-family: var(--pt-font-heading);
    font-weight: 700;
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--pt-blue);
    white-space: nowrap;
}
/* Der Stern am Betrag. line-height:0, damit er die Preiszeile nicht erhöht; aria-hidden im
   Markup, weil eine Vorlesefunktion den Satz darunter ohnehin vorliest. Der Klassenname enthält
   bewusst NICHT „mk-price-amount": SteuerstatusEinigTest sucht den letzten Preis über genau diese
   Zeichenfolge. */
.mk-price-tafel .mk-stern {
    font-size: .5em;
    line-height: 0;
    vertical-align: super;
    margin-left: 2px;
}
.mk-price-tafel .mk-price-unit { font-size: 16px; color: var(--pt-n600); }

.mk-price-tafel .mk-price-merkmale {
    list-style: none;
    flex: 1;
    margin: 22px 0 26px;
    padding: 22px 0 0;
    border-top: 1px solid var(--pt-n100);
}
.mk-price-tafel .mk-price-merkmale li {
    position: relative;
    padding-left: 34px;
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.45;
}
.mk-price-tafel .mk-price-merkmale li:last-child { margin-bottom: 0; }
.mk-price-tafel .mk-price-merkmale li svg {
    position: absolute;
    left: 0;
    top: -1px;
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 50%;
    background: var(--pt-akz-subtle);
    color: var(--pt-akz-dark);
}

/* Der Knopf vollständig hier und nicht über .mk-btn: Im Signup gibt es marketing.css nicht.
   Mindesthöhe 44 px, die Tap-Ziel-Grenze des Projekts. */
.mk-price-tafel .mk-price-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 20px;
    border: 1px solid var(--pt-blue);
    border-radius: 8px;
    font-family: var(--pt-font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mk-price-tafel .mk-price-knopf.mk-btn-outline { background: transparent; color: var(--pt-blue); }  /* 6,44:1 */
.mk-price-tafel .mk-price-knopf.mk-btn-outline:hover { background: var(--pt-blue); color: #fff; }
.mk-price-tafel .mk-price-knopf.mk-btn-primary { background: var(--pt-blue); color: #fff; }
/* Blau → Akzentfläche wie .mk-btn-primary:hover; die Schrift wechselt auf --mk-blue-dark
   (5,17:1), mit dem helleren Blau wären es 3,55:1. */
.mk-price-tafel .mk-price-knopf.mk-btn-primary:hover {
    background: var(--pt-akz);
    border-color: var(--pt-akz);
    color: var(--pt-blue-dark);
}

/* ── Unter den Karten ─────────────────────────────────────────────────────── */

/* Die Fußnote zum Stern, direkt unter der Kartenreihe und vor den Kästen: Sie gehört zu den
   Zahlen darüber (§ 3 PAngV, räumliche Nähe; Ort geprüft von SteuerstatusEinigTest). */
.mk-price-tafel .mk-price-tax {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pt-n600);
    text-align: left;
}

.mk-price-tafel .mk-price-arten {
    display: grid;
    gap: 20px;
    margin: 36px 0 0;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.mk-price-tafel .mk-price-note {
    min-width: 0;
    background: var(--pt-n50);
    border-radius: 12px;
    padding: 22px 24px;
}
.mk-price-tafel .mk-price-note h2,
.mk-price-tafel .mk-price-note h3 {
    font-family: var(--pt-font-heading);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    color: var(--pt-blue-dark);
    margin: 0 0 8px;
    text-wrap: balance;
}
.mk-price-tafel .mk-price-note p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--pt-n600);
    margin: 0;
}

.mk-price-tafel .mk-price-schluss {
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pt-n600);
    text-align: center;
}
/* Unterstrichen wie in .mk-prosa: Farbe allein trägt keinen Link. */
.mk-price-tafel .mk-price-schluss a {
    color: var(--pt-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mk-price-tafel .mk-price-schluss a:hover { text-decoration-thickness: 2px; }

/* Das Band, in dem die Tafel im Signup steht: weiss wie die Preissektion der Startseite
   (.mk-pricing), damit Karten und Kästen auf derselben Fläche liegen wie dort. */
.mk-price-band { background: #fff; padding-block: 72px; }

@media (max-width: 575.98px) {
    .mk-price-band { padding-block: 48px; }
    .mk-price-tafel .mk-price-kopf { margin-bottom: 28px; }
    .mk-price-tafel .mk-price-kopf p { font-size: 16px; }
    .mk-price-tafel .mk-price-amount { font-size: 38px; }
    .mk-price-tafel .mk-price-card { padding: 24px 20px 20px; }
    .mk-price-tafel .mk-price-arten { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-price-tafel .mk-price-knopf { transition: none; }
}