/* =====================================================================
   TM24 Fragen-UX - Entwurf 08.11.2026 (NICHT live, nicht freigegeben)
   Reine Darstellung ueber dem bestehenden Funnel: keine Antwort-, Preis-,
   Speicher-, History- oder Ablauflogik. Laedt als letzte Datei nach
   css/tm24-hybrid.css (eine zusaetzliche <link>-Zeile in index.php).
   Abschnitte: 1 Akku, 2 Hinweisboxen, 3 mobile Preisleiste, 4 Zurueck in der Leiste.
   ===================================================================== */

/* ---------- 1) Akku: der Prozentwert steht genau einmal da (im Eingabefeld) ---------- */
/* Die blaue Plakette #s3_akku_badge zeigte "Bitte auswaehlen" (sah aus wie ein Knopf), "Kein %-Wert"
   oder den eingetippten Wert ein zweites Mal ("94 %" + "Sehr gut"). Sie bleibt im DOM, weil Skripte und
   bestehende Pruefungen #s3_akku_pct / #s3_akku_status lesen; sie wird nur nicht mehr angezeigt. */
body.tm-ui #schritt-3 #ankauf-fragen .s3-akku-row { display: none !important; }

/* Der Behaelter der versteckten Alt-Auswahllisten (akku-iphone/-andere/-laptop/-watch) hat inline
   margin-bottom:14px, aber keinen sichtbaren Inhalt: leerer Streifen oben in der Akku-Karte. */
body.tm-ui #schritt-3 #ankauf-fragen .s3-item-head + div:has(> select.frage-select[data-frage="akku"]) { margin-bottom: 0 !important; }

/* Nach der Wahl ist der Einleitungssatz erledigt; der Prozentbereich hat seinen eigenen Fundort-Hinweis. */
html body.tm-hybrid #main-content #schritt-3 #ankauf-fragen .tm24-battery-method:has(input:checked) .tm24-battery-method__help { display: none; }

/* Prozentbereich: eine ruhige Einheit direkt unter der Wahl. */
html body.tm-hybrid #main-content #schritt-3 #ankauf-fragen #tm24-battery-percent-area:not([hidden]) {
  margin-top: 12px !important; padding: 14px; border-radius: 14px; background: var(--hy-paper, #F5F8FE);
}
html body.tm-hybrid #main-content #schritt-3 #ankauf-fragen .tm24-battery-where {
  flex: 1 1 100%; margin: -2px 0 4px; font-size: 14px; line-height: 1.5; color: var(--hy-muted, #4E5A78);
}
html body.tm-hybrid #main-content #schritt-3 #ankauf-fragen #tm24-battery-exact-error:not([hidden]) {
  flex: 1 1 100%; margin: 4px 0 0; font-size: 14px; line-height: 1.45;
}

/* Sichtbare Unterfrage ueber den drei Laufzeit-Karten (vorher nur fuer Screenreader). */
html body.tm-hybrid #main-content #schritt-3 #ankauf-fragen #tm24-battery-runtime-area > .tm24-battery-runtime-q {
  position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
  display: block; margin: 14px 0 8px !important; padding: 0;
  font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--hy-ink, #0B1533);
}

/* ---------- 2) Hinweisboxen hinter dem (i)-Knopf ---------- */
/* Platz: direkt unter den Antworten der eigenen Frage (Markup-Umzug in partials/wizard-step-3.php),
   nicht mehr am Kartenende hinter Folgefragen/Schadenauswahl. Hier: Abstand, Karte, Symbol, Lesebreite. */
html body.tm-ui #schritt-3 #ankauf-fragen .s3-help.is-open,
html body.tm-ui #schritt-3 #ankauf-fragen .tm24-category-help:not([hidden]) {
  position: relative; display: block; box-sizing: border-box;
  max-width: 62ch;
  margin: 12px 0 2px !important;
  padding: 12px 14px 12px 42px !important;
  border: 0 !important; border-radius: 14px !important;
  background: var(--hy-ice, #EAF3FF) !important;
  color: var(--hy-ink, #0B1533) !important;
  font-size: 14px !important; line-height: 1.5 !important; font-weight: 500;
  text-align: left;
}
html body.tm-ui #schritt-3 #ankauf-fragen .s3-help.is-open::before,
html body.tm-ui #schritt-3 #ankauf-fragen .tm24-category-help:not([hidden])::before {
  content: "\f05a"; /* fa-circle-info, vorhandenes Font Awesome 6 */
  position: absolute; left: 14px; top: 12px;
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; line-height: 21px;
  color: var(--hy-electric, #0039E8);
}
html body.tm-ui #schritt-3 #ankauf-fragen .s3-help ul { margin: 0 !important; padding: 0 0 0 16px !important; color: inherit !important; }
html body.tm-ui #schritt-3 #ankauf-fragen .s3-help li + li { margin-top: 4px; }
html body.tm-ui #schritt-3 #ankauf-fragen .s3-help p { margin: 0; }
html body.tm-ui #schritt-3 #ankauf-fragen .s3-help p + p { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  html body.tm-ui #schritt-3 #ankauf-fragen .s3-help.is-open,
  html body.tm-ui #schritt-3 #ankauf-fragen .tm24-category-help:not([hidden]) { animation: tm24HelpIn 160ms ease-out; }
}
@keyframes tm24HelpIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---------- 3) Mobile Preisleiste: unten verankert, eine Zeile, gleich hoch in jedem Zustand ---------- */
/* Ursache "Leiste manchmal zu hoch": tm24-hybrid.css (Block @media max-width:959px, flex-wrap:wrap) laesst
   die Leiste umbrechen, sobald statt des Preises ein Statustext steht ("Kein Online-Preis moeglich",
   "Angaben zum Schaden ergaenzen", "Kein Ankauf moeglich" + Kurzgrund). Dann rutscht "Weiter" in eine
   zweite Zeile: live gemessen 138px statt 73px Hoehe; die reservierte Seitenhoehe
   (--tm24-mobile-action-space) zieht mit und der Inhalt springt. Hier: nie umbrechen, Textblock fest hoch. */
@media (max-width: 959px) {
  html body.tm-hybrid #ankauf-mobile-footer.tm-sticky { top: auto !important; bottom: 0 !important; transform: translateZ(0); }
  html body.tm-hybrid #ankauf-mobile-footer .ankauf-mobile-footer-inner,
  html body.tm-hybrid #tm-checkout-sticky { flex-wrap: nowrap !important; }
  html body.tm-hybrid #ankauf-mobile-footer .ankauf-mobile-footer-inner { min-height: 56px; }
  html body.tm-hybrid #ankauf-mobile-footer .ankauf-mobile-footer-inner > div {
    flex: 1 1 0 !important; min-width: 0; max-width: none; height: 56px;
    display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  }
  html body.tm-hybrid #ankauf-mobile-footer #ankauf-mobile-preis { max-height: 2.6em; overflow: hidden; }
  html body.tm-hybrid #ankauf-mobile-footer #tm24-mobile-no-buy-reason { -webkit-line-clamp: 1 !important; }
  html body.tm-hybrid:not(.tm24-decision-card-in-view) #ankauf-mobile-footer:has(#tm24-mobile-no-buy-reason:not([hidden])) .ankauf-mobile-footer-label { display: none !important; }
  html body.tm-hybrid:not(.tm24-decision-card-in-view) #ankauf-mobile-footer:has(#tm24-mobile-no-buy-reason:not([hidden])) #ankauf-mobile-preis { -webkit-line-clamp: 1 !important; max-height: 1.35em; }
  html body.tm-hybrid #ankauf-mobile-footer #btn-fragen-weiter-mobile { flex: 0 0 auto !important; min-width: 96px !important; max-width: 46%; padding-left: 16px !important; padding-right: 16px !important; }
  html body.tm-hybrid #tm-checkout-sticky > div { flex: 1 1 0 !important; min-width: 0; max-width: none; }
  html body.tm-hybrid #tm-checkout-sticky #tm-checkout-mobile-button { flex: 0 1 auto !important; max-width: 58%; white-space: normal; line-height: 1.2; }
}

/* ---------- 4) Zurueck in der Leiste (Fragen und Checkout, nur unter 960px) ---------- */
.tm24-bar-back { display: none; }
@media (max-width: 959px) {
  html body.tm-hybrid :is(#ankauf-mobile-footer, #tm-checkout-sticky) .tm24-bar-back {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px;
    width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff; font: 800 20px/1 system-ui, sans-serif;
    cursor: pointer; touch-action: manipulation; transition: transform 120ms ease-out, background-color 120ms ease;
  }
  html body.tm-hybrid :is(#ankauf-mobile-footer, #tm-checkout-sticky) .tm24-bar-back:active { transform: scale(.94); background: rgba(255, 255, 255, .24); }
  html body.tm-hybrid :is(#ankauf-mobile-footer, #tm-checkout-sticky) .tm24-bar-back:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px; }
  html body.tm-hybrid #ankauf-mobile-footer .ankauf-mobile-footer-inner { gap: 10px; }
  html body.tm-hybrid #tm-checkout-sticky { gap: 10px; }
}

/* ---------- 5) Zustandskarten am PC kompakt wie am Handy (Betreiber 09.11.2026) ----------
   tm24-hybrid.css macht die Karten ab 600 px gross (192 px Freiraum oben, 164 px hohes Bild, 333-382 px je Karte).
   Hier stehen die Karten wie am Handy untereinander ueber die ganze Breite (Betreiber: "nicht zweispaltig, sondern
   untereinander"), mit Handy-Aufbau: kleines Symbol links, Titel und Preis in einer Zeile, Beschreibung darunter,
   "Auswaehlen" erst nach der Wahl. Nur Darstellung. */
@media (min-width: 600px) {
  html body.tm-hybrid #main-content #schritt-3 .s3-cards { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  html body.tm-hybrid #main-content #schritt-3 .s3-cards .s3-card > label { padding: 14px 20px 14px 84px !important; min-height: 90px !important; align-items: baseline; }
  html body.tm-hybrid #main-content #schritt-3 .s3-cards .s3-icon-round { left: 14px !important; right: auto !important; top: 14px !important; width: 54px !important; height: 62px !important; border-radius: 14px !important; background-size: 78% 78% !important; }
  html body.tm-hybrid #main-content #schritt-3 .s3-cards .s3-card-title { font-size: 17px !important; }
  html body.tm-hybrid #main-content #schritt-3 .s3-cards .s3-card-price,
  html body.tm-hybrid #main-content #schritt-3 .s3-cards .s3-card > input:checked + label .s3-card-price { font-size: 18px !important; }
  html body.tm-hybrid #main-content #schritt-3 .s3-cards .s3-card-desc { font-size: 13.5px !important; line-height: 1.45 !important; }
  html body.tm-hybrid #main-content #schritt-3 .s3-cards .s3-card-select { display: none !important; }
  html body.tm-hybrid #main-content #schritt-3 .s3-cards .s3-card > input:checked + label .s3-card-select { display: flex !important; font-size: 13px; letter-spacing: 0; text-transform: none; gap: 6px; margin-top: 6px; }
}