/* Marktteil der Modellseite (seit 17.10.2026): Kennzahlen, Angebote mit
   Einschaetzung, Preis-Check mit Boot. Schriften wie die Seite: Text in der
   Grundschrift, nur Betraege und Jahreszahlen in der Ziffernschrift. Ecken
   eckig. Bewegung nur ueber transform und opacity, und nur wenn das Skript
   (static/js/seiten/modell-markt.js) die Klasse mm-an gesetzt hat: ohne
   Skript und bei "weniger Bewegung" steht alles sofort im Endzustand. */

.mm-kopf { margin: 0 0 10px; font-size: 15.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); }
.mm-kopf::after { content: ''; display: block; height: 3px; width: 72px; margin-top: 9px; background: linear-gradient(90deg, var(--nm-logoblau), var(--nm-logopink)); transform-origin: left; transition: transform .9s cubic-bezier(.65, 0, .35, 1) .1s; }

/* ---------- Kennzahlen ---------- */
.mm-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin: 14px 0 16px; }
.mm-kachel { position: relative; padding: 16px 18px 18px 20px; border: 1px solid color-mix(in srgb, var(--nm-logoblau) 40%, transparent); background: var(--nm-grund, transparent); overflow: hidden; transition: opacity .5s, transform .7s cubic-bezier(.2, 1.3, .4, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.mm-kachel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mm-farbe, var(--nm-logoblau)); transform-origin: top; transition: transform .7s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--i, 0) * 90ms + .3s); }
.mm-kachel-name { margin: 0; font-size: 14.5px; line-height: 20px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.mm-kachel-zahl { margin: 6px 0 0; font: 700 clamp(26px, 3.2vw, 36px)/1.1 var(--font-heading, inherit); font-variant-numeric: tabular-nums; color: var(--mm-farbe, var(--color-text)); }
.mm-kachel.rauf { --mm-farbe: var(--nm-pinkschrift, #c8256f); }
.mm-kachel.runter { --mm-farbe: var(--nm-logoblau); }

/* Angebot gegen Wert: zwei Balken */
.mm-vergleich { display: grid; gap: 8px; margin: 0 0 16px; max-width: 640px; }
.mm-vergleich div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; align-items: center; gap: 12px; font-size: 15px; }
.mm-vergleich i { display: block; height: 12px; width: var(--w, 0%); background: var(--f, var(--nm-logoblau)); transform-origin: left; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1) .4s; }

/* ---------- Angebote ---------- */
.mm-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.mm-legende span::before { content: ''; display: inline-block; width: 16px; height: 8px; margin: 0 6px 1px 0; vertical-align: middle; background: var(--f); }
.mm-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; }
.mm-sort[hidden] { display: none; }
.mm-sort-name { font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin-right: 4px; }
.mm-sort button { min-height: 44px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--nm-logoblau) 45%, transparent); background: var(--nm-grund, transparent); color: var(--color-text); font: inherit; font-size: 14.5px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.mm-sort button:hover { border-color: var(--nm-logoblau); }
.mm-sort button[aria-pressed="true"] { background: var(--nm-flaeche, #e8f5fc); border: 2px solid var(--nm-logoblau); color: var(--color-text); font-weight: 600; }
.mm-liste { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.mm-angebot { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(190px, auto); gap: 10px 22px; align-items: center; padding: 14px 18px; border: 1px solid var(--color-neutral-700, rgba(0, 0, 0, .15)); background: var(--nm-grund, transparent); transition: opacity .5s, transform .6s cubic-bezier(.2, 1.3, .4, 1), border-color .2s; transition-delay: calc(var(--i, 0) * 60ms); }
.mm-angebot:hover { border-color: var(--nm-logoblau); }
.mm-angebot[hidden] { display: none; }
.mm-jahr { margin: 0; font: 700 24px/1 var(--font-heading, inherit); font-variant-numeric: tabular-nums; }
.mm-eck { margin: 5px 0 0; font-size: 14px; line-height: 19px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.mm-skala { position: relative; height: 34px; container-type: inline-size; }
.mm-spur { position: absolute; left: 0; right: 0; top: 13px; height: 8px; display: flex; }
.mm-spur span { height: 100%; flex: 0 0 var(--b); }
.mm-spur span:nth-child(1) { background: color-mix(in srgb, var(--nm-logoblau) 80%, transparent); }
.mm-spur span:nth-child(2) { background: color-mix(in srgb, var(--nm-logoblau) 40%, transparent); }
.mm-spur span:nth-child(3) { background: color-mix(in srgb, var(--color-text) 20%, transparent); }
.mm-spur span:nth-child(4) { background: color-mix(in srgb, var(--nm-logopink) 42%, transparent); }
.mm-spur span:nth-child(5) { background: color-mix(in srgb, var(--nm-logopink) 82%, transparent); }
.mm-mitte { position: absolute; top: 5px; height: 24px; left: var(--m, 50%); width: 2px; background: var(--color-text); opacity: .55; }
.mm-punkt { position: absolute; top: 7px; left: 0; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--color-text); box-shadow: 0 0 0 3px var(--nm-grund, #fff); transform: translateX(calc(var(--x, 50) * 1cqw)); transition: transform 1.3s cubic-bezier(.34, 1.45, .55, 1); transition-delay: calc(var(--i, 0) * 60ms + .35s); }
.mm-ohne { margin: 0; font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 66%, transparent); }
.mm-rechts { text-align: right; }
.mm-preis { margin: 0; font: 700 21px/1.1 var(--font-heading, inherit); font-variant-numeric: tabular-nums; }
.mm-urteil { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.mm-urteil.kalt, .mm-urteil.kuehl { color: var(--nm-logoblau); }
.mm-urteil.warm, .mm-urteil.heiss { color: var(--nm-pinkschrift, #c8256f); }
.mm-abstand { margin: 1px 0 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.mm-warn { color: var(--nm-pinkschrift, #c8256f); font-weight: 600; }
.mm-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14.5px; }
.mm-mehr { margin: 14px 0 0; }
.mm-betrug { margin: 16px 0 0; padding: 14px 18px 14px 20px; border: 1px solid color-mix(in srgb, var(--nm-logopink) 55%, transparent); border-left: 4px solid var(--nm-logopink); font-size: 15.5px; line-height: 24px; max-width: 74ch; }
.mm-betrug[hidden] { display: none; }

@media (max-width: 700px) {
  .mm-angebot { grid-template-columns: 1fr auto; }
  .mm-skala, .mm-ohne { grid-column: 1 / -1; grid-row: 2; }
  .mm-rechts { grid-row: 1; grid-column: 2; }
}

/* ---------- Bewegung, nur mit Skript ---------- */
.mm-an .mm-kopf::after { transform: scaleX(0); }
.mm-an .mm-kachel { opacity: 0; transform: translateY(16px); }
.mm-an .mm-kachel::before { transform: scaleY(0); }
.mm-an .mm-vergleich i { transform: scaleX(0); }
.mm-an .mm-angebot { opacity: 0; transform: translateX(-24px); }
.mm-an .mm-punkt { transform: translateX(0); }
.mm-an.sichtbar .mm-kopf::after, .mm-an.sichtbar .mm-vergleich i { transform: scaleX(1); }
.mm-an.sichtbar .mm-kachel, .mm-an.sichtbar .mm-angebot { opacity: 1; transform: none; }
.mm-an.sichtbar .mm-kachel::before { transform: scaleY(1); }
.mm-an.sichtbar .mm-punkt { transform: translateX(calc(var(--x, 50) * 1cqw)); }

/* ---------- Preis-Check: das Boot der Pruefseite ---------- */
/* Die Skala nimmt erst Platz ein, wenn ein Preis eingetragen ist. */
.mm-check .bp-see:not(.an) { height: 0; margin: 0; overflow: hidden; }