/* ==========================================================================
   Modellpreisliste — nur, was die Seite über ../css/styles.css (Kopf, Intro, Fuß) hinaus braucht.
   Neue Datei, deshalb vollständig nach dem Gestaltungssatz (AI/conventions/gestaltung.md):
   Tabellen-Grundform R-GEST-067/068, Aufzählung R-GEST-069, Leiter und Schriftstufen.
   Bewegung nur `d-1` (120 ms) für den Überfahr-Zustand der Modellzeilen, abschaltbar.
   ========================================================================== */

.mp-stand { margin-top: 0.75rem; font-size: 0.875rem; color: #61686c; }

.mp-abschnitt { padding-bottom: 3rem; }
.mp-abschnitt h2 { font-size: 1.875rem; line-height: 1.35; font-weight: 700; margin-bottom: 0.5rem; hyphens: manual; }
.mp-text { max-width: 72ch; color: #2b3033; margin-bottom: 1rem; line-height: 1.5; }
.mp-klein { max-width: 72ch; font-size: 0.875rem; color: #61686c; margin-top: 0.75rem; line-height: 1.5; }

/* Karte mit Tabelle; unter 40 rem scrollt die Tabelle in der Karte, die erste Spalte bleibt stehen. */
.mp-karte { background: #ffffff; border: 1px solid #e9e9e9; border-radius: 16px; box-shadow: 0 6px 18px rgba(43, 48, 51, .08); }
.mp-scroll { overflow-x: auto; padding: 1rem; }

.mp-tabelle { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.5; }
.mp-tabelle caption { caption-side: top; text-align: left; font-size: 1.0625rem; font-weight: 700; padding-bottom: 0.5rem; }
.mp-tabelle thead th {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: #61686c; text-align: left; vertical-align: bottom;
  padding: 0.5rem 0.75rem; border-bottom: 2px solid #2b3033;
}
.mp-tabelle tbody th, .mp-tabelle tbody td { padding: 0.5rem 0.75rem; vertical-align: top; text-align: left; }
.mp-tabelle tbody th { font-weight: 600; }
.mp-tabelle tbody tr.mp-gerade { background: #f5f5f5; }
.mp-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Zweizeiliger Kopf der Sprachmodell-Tabelle: Gruppe „außerhalb der EU" / „in der EU", die
   EU-Gruppe mit einer Trennlinie abgesetzt, damit die drei Spalten je Ort zusammen lesen. */
.mp-tabelle thead .mp-grp { text-align: center; border-bottom: 1px solid #e9e9e9; }
.mp-tabelle .mp-grp--eu, .mp-tabelle .mp-trenn { border-left: 1px solid #e9e9e9; }


.mp-ort { display: block; font-size: 0.75rem; font-weight: 400; color: #61686c; }
/* Standardmodell je Ort (Einbettung, Bild): Text in Link-Blau, keine Farbe als einziger Träger. */
.mp-std { display: block; font-size: 0.75rem; font-weight: 600; color: #0147B1; }

/* Spaltenkopf mit Erklärung im Tooltip; die Legende läuft über die volle Tabellenbreite. */
.mp-tip { cursor: help; text-decoration: underline dotted; text-underline-offset: 0.2em; }
.mp-legende { list-style: none; padding: 0; max-width: none; }
.mp-legende li { margin-bottom: 0.25rem; }

.mp-hinweis { margin: -0.5rem 0 0.75rem; }

/* ---- Modellzeile mit Leistungsprofil ------------------------------------------------------
   Die Zeile ist ein Ziel (Klick klappt das Profil auf) — deshalb hier, anders als in der
   Grundform R-GEST-067, ein Überfahr-Zustand: Grund Markenblau hell, Zeiger, Name in Markenblau.
   Ziel für Tastatur und Vorleser ist der Knopf im Zeilenkopf (aria-expanded). */
.mp-zeile { cursor: pointer; }
.mp-auf {
  display: inline-flex; align-items: baseline; gap: 0.25rem;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: #2b3033; text-align: left;
}
.mp-auf__zeichen {
  display: inline-block; width: 0.75rem; color: #026CDF; font-weight: 700;
  transition: transform 120ms ease;
}
.mp-auf[aria-expanded="true"] .mp-auf__zeichen { transform: rotate(90deg); }
.mp-auf:focus-visible { outline: 3px solid #026CDF; outline-offset: 2px; border-radius: 4px; }
.mp-tabelle tbody tr.mp-zeile > * { transition: background-color 120ms ease; }
/* Grund an den Zellen, nicht an der Zeile: sonst übermalt der stehende Zeilenkopf (Telefon) ihn. */
@media (hover: hover) {
  .mp-tabelle tbody tr.mp-zeile:hover > * { background: #DCEBFF; }
  .mp-zeile:hover .mp-auf__name { color: #0147B1; text-decoration: underline; text-underline-offset: 0.2em; }
}
.mp-tabelle tbody tr.mp-zeile.mp-zeile--offen > * { background: #DCEBFF; }
.mp-zeile--offen .mp-auf__name { color: #0147B1; }
/* Berührung: Ziel mindestens 44 px hoch (R-GEST-036). */
@media (pointer: coarse) { .mp-auf { min-height: 44px; align-items: center; } }

/* Profilzeile: steht unter ihrer Modellzeile, gleicher Grund-Wechsel; der Inhalt bleibt beim
   waagrechten Scrollen links stehen und nie breiter als das Fenster. */
.mp-tabelle tbody tr.mp-profilzeile > td { padding: 0 0.75rem 1rem; border-bottom: 2px solid #DCEBFF; }
.mp-profil {
  position: sticky; left: 0; box-sizing: border-box;
  width: min(44rem, calc(100vw - 4rem));
  padding: 1rem 1.5rem; background: #ffffff; border: 1px solid #e9e9e9; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(43, 48, 51, .08); white-space: normal;
}
.mp-profil__titel { font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.75rem; }

/* Balken: Name · Spur mit Füllung und Bestwert-Marke · Zahl. Die Zahl trägt die Aussage,
   der Balken zeigt sie nur (R-GEST-045). */
.mp-balken { list-style: none; margin: 0; padding: 0; }
.mp-balken li {
  display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr 4.5rem;
  align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;
}
.mp-balken__name { font-size: 0.875rem; color: #2b3033; }
.mp-balken__spur { position: relative; height: 0.75rem; background: #e9e9e9; border-radius: 999px; }
.mp-balken__wert {
  position: absolute; inset: 0 auto 0 0; width: var(--anteil, 0%);
  background: #026CDF; border-radius: 999px;
}
.mp-balken__best {
  position: absolute; top: -0.25rem; bottom: -0.25rem; width: 2px; margin-left: -1px;
  background: #2b3033;
}
.mp-balken__zahl { font-size: 0.875rem; font-weight: 700; text-align: right; }
.mp-profil__leg { margin-top: 0.25rem; max-width: none; }
.mp-profil__bestzeichen {
  display: inline-block; width: 2px; height: 0.875rem; margin-right: 0.5rem;
  vertical-align: -0.125rem; background: #2b3033;
}

/* Merkmale: Begriff über Wert, bis zu drei nebeneinander. */
.mp-merkmale {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem 1.5rem;
  margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid #e9e9e9;
}
.mp-merkmale dt {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #61686c;
}
.mp-merkmale dd { margin: 0.25rem 0 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .mp-auf__zeichen, .mp-tabelle tbody tr.mp-zeile > * { transition: none; }
}

.mp-punkte { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.mp-punkte li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; line-height: 1.5; }
.mp-punkte li::before {
  content: ''; position: absolute; left: 0.5rem; top: 0.6em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #026CDF;
}

@media (width < 40rem) {
  .mp-abschnitt h2 { font-size: 1.5rem; }
  .mp-profil { width: calc(100vw - 4rem); padding: 1rem; }
  .mp-balken li { grid-template-columns: 1fr 4.5rem; gap: 0.25rem 0.75rem; }
  .mp-balken__name { grid-column: 1 / -1; }
  .mp-tabelle tbody th, .mp-tabelle thead th:first-child { position: sticky; left: 0; background: inherit; }
  .mp-tabelle tbody tr:not(.mp-gerade) th { background: #ffffff; }
  .mp-tabelle thead th:first-child { background: #ffffff; }
}