/* =====================================================================
   TM24 Modellseite /verkaufen/MODELL-ankauf - eigener Inhalt unter dem Ankauf (R71, 12.11.2026)
   Markup: partials/model-content.php. Dieselben Werte wie die Abschnitte der Startseite und der Landingpages
   (css/tm24-start-refine.css, css/tm24-landing-hub.css): Hauptueberschrift Archivo 24/30 px, Abschnittsueberschrift
   18 px, Text 15 px, Karten weiss mit Rand #D5DFF5 und Radius 16 px, Abstandsraster 36/52 px.
   Die Datei wird nur auf Modellseiten geladen, ohne das Rendern aufzuhalten (der Block steht unter dem ersten Bildschirm).
   Wann der Block zu sehen ist, regelt css/tm24-model-first.css (im Seitenkopf eingebettet).
   Sie veraendert nichts am Ankauf und an keinem anderen Abschnitt.
   ===================================================================== */

/* ---------- Abschnitt ---------- */
html body.page-ankauf #main-content .tm24-model { padding: 36px 0; margin: 0; background: transparent; color: #0B1533; font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; }
html body.page-ankauf #main-content .tm24-model__wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
html body.page-ankauf #main-content .tm24-model :is(h1, h2, p, ul, dl, dt, dd, table) { margin: 0; padding: 0; }
html body.page-ankauf #main-content .tm24-model h1 { font-family: "Archivo", "Figtree", system-ui, sans-serif !important; font-stretch: 112% !important; font-weight: 750 !important; font-size: 24px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; color: #111827 !important; text-transform: none !important; text-wrap: balance; overflow-wrap: break-word; }
html body.page-ankauf #main-content .tm24-model h2 { font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif !important; font-stretch: normal !important; font-weight: 800 !important; font-size: 18px !important; line-height: 1.3 !important; letter-spacing: -.01em !important; color: #0B1533 !important; text-transform: none !important; margin: 0 0 12px !important; }
html body.page-ankauf #main-content .tm24-model a { color: #003B8F; text-decoration: none; }
html body.page-ankauf #main-content .tm24-model a:focus-visible { outline: 3px solid #0039E8; outline-offset: 2px; border-radius: 10px; }

/* ---------- Kopf: Bild, Name, "bis zu", Kurztext ---------- */
html body.page-ankauf #main-content .tm24-model__head { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "pic titles" "copy copy"; gap: 14px 16px; align-items: center; }
html body.page-ankauf #main-content .tm24-model__pic { grid-area: pic; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 16px; background: #fff; border: 1px solid #D5DFF5; overflow: hidden; }
html body.page-ankauf #main-content .tm24-model__pic img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
html body.page-ankauf #main-content .tm24-model__pic--none { background: #EAF3FF; }
html body.page-ankauf #main-content .tm24-model__pic--none .tm24-ph { display: block; width: 78%; height: auto; aspect-ratio: 1 / 1; }
html body.page-ankauf #main-content .tm24-model__titles { grid-area: titles; min-width: 0; }
html body.page-ankauf #main-content .tm24-model__upto { margin-top: 6px; font-size: 14px; line-height: 1.4; color: #4E5A78; }
html body.page-ankauf #main-content .tm24-model__upto-label { font-weight: 700; color: #0B1533; }
html body.page-ankauf #main-content .tm24-model__upto strong { font-family: "Archivo", "Figtree", system-ui, sans-serif !important; font-stretch: 112%; font-weight: 800 !important; font-size: 26px !important; line-height: 1; letter-spacing: -.01em; color: #0A7A45; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.page-ankauf #main-content .tm24-model__upto-note { display: block; margin-top: 2px; }
html body.page-ankauf #main-content .tm24-model__copy { grid-area: copy; max-width: 72ch; font-size: 15px; line-height: 1.55; color: #33405F; }

/* ---------- Preistabelle ---------- */
html body.page-ankauf #main-content .tm24-model__prices { margin-top: 28px; }
html body.page-ankauf #main-content .tm24-model__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; }
html body.page-ankauf #main-content .tm24-model__table :is(th, td) { font-weight: 400; text-align: right; vertical-align: middle; border: 0; background: transparent; color: #0B1533; }
html body.page-ankauf #main-content .tm24-model__table th[scope="row"] { font-weight: 800; text-align: left; overflow-wrap: anywhere; }
html body.page-ankauf #main-content .tm24-model__table td { font-weight: 700; white-space: nowrap; }
html body.page-ankauf #main-content .tm24-model__table td.is-none { font-weight: 400; color: #6B7895; }
html body.page-ankauf #main-content .tm24-model__note { margin-top: 10px; max-width: 78ch; font-size: 13.5px; line-height: 1.5; color: #4E5A78; }

/* Handy: je Ausfuehrung eine Karte, die Zustaende als kleine Felder (kein waagerechtes Scrollen) */
@media (max-width: 699px) {
  html body.page-ankauf #main-content .tm24-model__table, html body.page-ankauf #main-content .tm24-model__table tbody { display: block !important; width: 100% !important; }
  html body.page-ankauf #main-content .tm24-model__table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html body.page-ankauf #main-content .tm24-model__table tr { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; margin: 0 0 10px; background: #fff; border: 1px solid #D5DFF5; border-radius: 16px; }
  html body.page-ankauf #main-content .tm24-model__table tbody tr:last-child { margin-bottom: 0; }
  html body.page-ankauf #main-content .tm24-model__table th[scope="row"] { display: block !important; grid-column: 1 / -1; font-size: 16px; line-height: 1.3; }
  html body.page-ankauf #main-content .tm24-model__table td { display: flex !important; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 6px; border-radius: 12px; background: #F5F8FE; text-align: center; font-size: 15px; white-space: normal; }
  html body.page-ankauf #main-content .tm24-model__table td::before { content: attr(data-short); font-size: 11.5px; line-height: 1.25; font-weight: 700; letter-spacing: .01em; color: #4E5A78; }
}
/* Seitenende mit dem schwebenden WhatsApp-Knopf: solange der Ankauf offen ist, endet die Seite auf dem Handy mit diesem Block
   (die Fusszeile ist dann ausgeblendet). Dieselbe Regel wie R68 in partials/footer.php - gleicher Selektor, gleicher Wert auf
   demselben Element (#main-content), deshalb nie doppelt: mit oder ohne R68 bleiben am Seitenende 80 px frei. */
@media (max-width: 1279.98px) {
  body.tm24-funnel-active:has(.tm24-wa-float:not([hidden])):not(:has(#tm24-consent-banner:not([hidden]))) #main-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
/* ab 700 px: eine Tabelle, die ihre Karte ganz fuellt - die Zustaende teilen sich die Breite gleichmaessig, Zahlen rechtsbuendig unter ihrem Kopf */
@media (min-width: 700px) {
  html body.page-ankauf #main-content .tm24-model__scroll { background: #fff; border: 1px solid #D5DFF5; border-radius: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html body.page-ankauf #main-content .tm24-model__table { display: table !important; table-layout: auto; width: 100% !important; max-width: none !important; min-width: 560px; }
  html body.page-ankauf #main-content .tm24-model__table thead { display: table-header-group !important; width: auto !important; }
  html body.page-ankauf #main-content .tm24-model__table tbody { display: table-row-group !important; width: auto !important; }
  html body.page-ankauf #main-content .tm24-model__table tr { display: table-row !important; width: auto !important; }
  html body.page-ankauf #main-content .tm24-model__table :is(th, td) { display: table-cell !important; width: auto; padding: 13px 20px; border-bottom: 1px solid #E1E8F5; }
  html body.page-ankauf #main-content .tm24-model__table thead th { font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #4E5A78; background: #F5F8FE; white-space: nowrap; }
  html body.page-ankauf #main-content .tm24-model__table thead th:first-child { text-align: left; }
  html body.page-ankauf #main-content .tm24-model__table tbody tr:last-child :is(th, td) { border-bottom: 0; }
  html body.page-ankauf #main-content .tm24-model__table th[scope="row"] { max-width: 360px; }
}

/* ---------- Farben ---------- */
html body.page-ankauf #main-content .tm24-model__colours { margin-top: 28px; }
html body.page-ankauf #main-content .tm24-model__colours ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
html body.page-ankauf #main-content .tm24-model__colours li { padding: 7px 14px; border: 1px solid #D5DFF5; border-radius: 999px; background: #fff; font-size: 14.5px; line-height: 1.3; font-weight: 600; color: #0B1533; }

/* ---------- Fragen zum Modell ---------- */
html body.page-ankauf #main-content .tm24-model__faq { margin-top: 28px; }
html body.page-ankauf #main-content .tm24-model__faq dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
html body.page-ankauf #main-content .tm24-model__faq dl > div { padding: 16px; background: #fff; border: 1px solid #D5DFF5; border-radius: 16px; }
html body.page-ankauf #main-content .tm24-model__faq dt { font-size: 16px; line-height: 1.35; font-weight: 800; color: #0B1533; }
html body.page-ankauf #main-content .tm24-model__faq dd { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: #33405F; }

/* ---------- Verwandte Modelle, Landingpages ---------- */
html body.page-ankauf #main-content .tm24-model__more { margin-top: 28px; }
html body.page-ankauf #main-content .tm24-model__siblings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; list-style: none; }
html body.page-ankauf #main-content .tm24-model__siblings a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; background: #fff; border: 1px solid #D5DFF5; border-radius: 14px; transition: border-color 160ms ease-out; }
html body.page-ankauf #main-content .tm24-model__siblings a:hover { border-color: #0039E8; }
html body.page-ankauf #main-content .tm24-model__sibling-name { min-width: 0; font-size: 15px; line-height: 1.3; font-weight: 800; color: #0B1533; overflow-wrap: anywhere; }
html body.page-ankauf #main-content .tm24-model__sibling-price { flex: none; font-size: 14px; font-weight: 700; color: #0A7A45; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body.page-ankauf #main-content .tm24-model__hubs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 14px; }
html body.page-ankauf #main-content .tm24-model__siblings + .tm24-model__hubs { margin-top: 14px; }
html body.page-ankauf #main-content .tm24-model__hubs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #EAF3FF; font-size: 14.5px; font-weight: 800; color: #003B8F; }
html body.page-ankauf #main-content .tm24-model__hubs a:hover { background: #D6E6FF; }

@media (min-width: 600px) {
  html body.page-ankauf #main-content .tm24-model__siblings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 768px) {
  html body.page-ankauf #main-content .tm24-model { padding: 52px 0; }
  html body.page-ankauf #main-content .tm24-model__wrap { padding: 0 24px; }
  html body.page-ankauf #main-content .tm24-model h1 { font-size: 30px !important; }
  html body.page-ankauf #main-content .tm24-model__head { grid-template-columns: 136px minmax(0, 1fr); grid-template-areas: "pic titles" "pic copy"; gap: 10px 24px; align-items: start; }
  html body.page-ankauf #main-content .tm24-model__pic { width: 136px; height: 136px; border-radius: 20px; }
  html body.page-ankauf #main-content .tm24-model__upto-note { display: inline; margin-top: 0; }
  html body.page-ankauf #main-content .tm24-model__faq dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  html body.page-ankauf #main-content .tm24-model__prices, html body.page-ankauf #main-content .tm24-model__colours, html body.page-ankauf #main-content .tm24-model__faq, html body.page-ankauf #main-content .tm24-model__more { margin-top: 36px; }
}
@media (min-width: 992px) {
  html body.page-ankauf #main-content .tm24-model__siblings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html body.page-ankauf #main-content .tm24-model__siblings a { transition: none; }
}