/* =====================================================================
   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; }
}

/* =====================================================================
   R64 (12.11.2026) Handy-Ablauf: Reibungspunkte. Reine Darstellung.
   Keine Erklaerungstexte, keine Pflichtfelder, keine Pruefregeln, keine Preise, keine uebertragenen Daten.
   Abschnitte: 6 feste Preisleiste, 7 Speicherkarten, 8 Markenkacheln, 9 Suche, 10 "Deine Daten", 11 Erklaerungen.
   ===================================================================== */

/* ---------- 6) Feste Preisleiste: der Preis bricht nie um, der Knopf bleibt einzeilig ---------- */
/* Ursache "367,0 / 0 EUR": tm24-hybrid.css (max-width:959px) setzt white-space:normal + overflow-wrap:anywhere auf den
   Preis, der Knopf "Weiter zu meinen Daten" nahm bis 58 % der Leiste - dem Preis blieben 84 px. Jetzt: der Preisblock ist
   so breit wie sein Inhalt (eine Zeile, Tabellenziffern, Groesse folgt der Bildschirmbreite), der Knopf bekommt den Rest.
   Unter 480 px zeigt der Knopf eine kurze Beschriftung; die volle bleibt sein Name fuer Vorlesehilfen (partials/checkout.php). */
#tm-checkout-mobile-button .tm24-bar-label--short { display: none; }
@media (max-width: 959px) {
  html body.tm-hybrid #tm-checkout-sticky > div { flex: 0 0 auto !important; min-width: 0; max-width: none; }
  html body.tm-hybrid #tm-checkout-sticky #tm-checkout-mobile-price {
    max-width: none; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal;
    font-variant-numeric: tabular-nums; font-size: clamp(18px, 5.6vw, 24px) !important; line-height: 1.1;
  }
  html body.tm-hybrid #tm-checkout-sticky .tm-s { white-space: nowrap; }
  html body.tm-hybrid #tm-checkout-sticky #tm-checkout-mobile-button {
    position: relative; flex: 1 1 0 !important; min-width: 0 !important; max-width: 360px !important; margin-left: auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
  }
  /* Sprache ohne kurze Beschriftung: die volle darf zweizeilig werden, der Preis bleibt trotzdem einzeilig */
  html body.tm-hybrid #tm-checkout-sticky #tm-checkout-mobile-button:not(.tm24-bar-has-short) { white-space: normal; }
  /* Zurueck-Knopf der Leisten: 44 px Tippflaeche (war 40 px breit) */
  html body.tm-hybrid :is(#ankauf-mobile-footer, #tm-checkout-sticky) .tm24-bar-back { flex: 0 0 44px; width: 44px; height: 44px; }
  /* Leiste im Fragenteil: steht dort ein Preis (kein Statustext), bricht auch er nicht um. Seine Groesse folgt der Breite
     seines Textblocks (cqw): neben "Weiter" bleibt er so gross wie bisher, neben "Preisuebersicht" passt auch ein
     vierstelliger Preis. Browser ohne cqw behalten die bisherige Groesse. */
  html body.tm-hybrid #ankauf-mobile-footer .ankauf-mobile-footer-inner > div { container-type: inline-size; }
  html body.tm-hybrid #ankauf-mobile-footer:not(:has(#tm24-mobile-no-buy-reason:not([hidden]))):not(:has(#btn-fragen-weiter-mobile:disabled)) #ankauf-mobile-preis {
    white-space: nowrap !important; overflow-wrap: normal !important; font-variant-numeric: tabular-nums;
    font-size: clamp(15px, 16.5cqw, 26px) !important;
  }
}
@media (max-width: 479px) {
  html body.tm-hybrid #tm-checkout-sticky #tm-checkout-mobile-button.tm24-bar-has-short .tm24-bar-label--full {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  html body.tm-hybrid #tm-checkout-sticky #tm-checkout-mobile-button.tm24-bar-has-short .tm24-bar-label--short { display: inline; }
}
@media (max-width: 374px) {
  html body.tm-hybrid #ankauf-mobile-footer:not(:has(#tm24-mobile-no-buy-reason:not([hidden]))):not(:has(#btn-fragen-weiter-mobile:disabled)) #ankauf-mobile-preis {
    font-size: clamp(15px, 16.5cqw, 21px) !important;
  }
}
@media (max-width: 359px) {
  html body.tm-hybrid #tm-checkout-sticky { padding-left: 12px; padding-right: 12px; gap: 8px; }
  html body.tm-hybrid #ankauf-mobile-footer #btn-fragen-weiter-mobile { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ---------- 7) "Speicher waehlen": Innenabstand wie die Farbkarten ---------- */
/* Ursache: die Regel fuer die kleinen Speicher-Chips (.tm-storage .tm-opt, padding 0 6px) traf auch die grossen Karten -
   "128GB" klebte am oberen Rand, der Preis am unteren. Jetzt 12 px / 10 px Innenabstand wie .tm-colors .model-card. */
html body.tm-hybrid #main-content #schritt-2 #modell-bereich .wizard-speicher-grid .wizard-speicher-card.tm-opt {
  padding: 12px 10px !important; gap: 4px !important; min-height: 56px !important; justify-content: center !important; overflow: hidden;
}
html body.tm-hybrid #main-content #schritt-2 #modell-bereich .wizard-speicher-grid .wizard-speicher-card.tm-opt:has(.wizard-speicher-preis) { min-height: 72px !important; }
html body.tm-hybrid #main-content #schritt-2 #modell-bereich .wizard-speicher-grid .wizard-speicher-card.tm-opt .wizard-speicher-gb {
  line-height: 1.15 !important; font-size: clamp(18px, 5.4vw, 22px) !important;
}
html body.tm-hybrid #main-content #schritt-2 #modell-bereich .wizard-speicher-grid .wizard-speicher-card.tm-opt .wizard-speicher-preis {
  margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: clamp(15px, 4.9vw, 22px) !important;
}

/* ---------- 8) Markenkacheln: der Name stoesst nicht mehr an den Pfeil ---------- */
@media (max-width: 639px) {
  html body.tm-hybrid #main-content #schritt-1 #marken-grid .brand-card.tm-brand-tile { gap: 10px; padding: 12px 10px !important; }
  /* ein Wort bleibt in einer Zeile; ein Name aus mehreren Woertern ("CMF by Nothing") darf zweizeilig werden */
  html body.tm-hybrid #main-content #schritt-1 #marken-grid .tm-brand-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.2;
  }
  html body.tm-hybrid #main-content #schritt-1 #marken-grid .tm-brand-arrow { margin-left: 0 !important; padding-left: 0; }
}
@media (max-width: 419px) {
  /* zwei schmale Spalten: der Zierpfeil weicht dem Namen (die Kachel bleibt als Ganzes der Knopf) */
  html body.tm-hybrid #main-content #schritt-1 #marken-grid .tm-brand-arrow { display: none; }
  html body.tm-hybrid #main-content #schritt-1 #marken-grid .tm-brand-name { font-size: clamp(14px, 4.3vw, 16px) !important; }
}
@media (max-width: 359px) {
  html body.tm-hybrid #main-content #schritt-1 #marken-grid .brand-card.tm-brand-tile { gap: 8px; padding: 12px 8px !important; }
  html body.tm-hybrid #main-content #schritt-1 #marken-grid .tm-brand-logo { width: 40px !important; height: 40px !important; }
}

/* ---------- 8b) Tippflaechen unter 44 px: "Zurueck" (42 px hoch) und "Aendern" beim Speicher (40 px) ---------- */
@media (max-width: 959px) {
  html body.tm-hybrid #main-content :is(#schritt-1 > .tm24-brand-back, #schritt-2 > #modell-bereich > .wizard-back-btn:first-child, #schritt-3 > .s3-back, #schritt-4 .checkout-content > .wizard-back-btn) { min-height: 44px !important; }
  html body.tm-hybrid #main-content #schritt-2 #modell-bereich .tm-storage-kept__edit { min-height: 44px; }
}

/* ---------- 9) Geraetesuche: Platzhalter wird nie mitten im Wort abgeschnitten ---------- */
html body.tm-hybrid #suche-input { text-overflow: ellipsis; }
html body.tm-hybrid #suche-input::placeholder { text-overflow: ellipsis; }

/* ---------- 10) "Deine Daten": freiwillige Geraetenummern eingeklappt, IBAN gruppiert mitlesen ---------- */
html body.tm-hybrid #main-content #schritt-4 details.tm24-optional-ids { padding: 0 16px !important; }
html body.tm-hybrid #main-content #schritt-4 details.tm24-optional-ids[open] { padding-bottom: 16px !important; }
html body.tm-hybrid #main-content #schritt-4 details.tm24-optional-ids > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; margin: 0; padding: 10px 0;
  list-style: none; cursor: pointer; font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--hy-ink);
  -webkit-tap-highlight-color: transparent;
}
html body.tm-hybrid #main-content #schritt-4 details.tm24-optional-ids > summary::-webkit-details-marker { display: none; }
html body.tm-hybrid #main-content #schritt-4 details.tm24-optional-ids > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 6px 4px 0; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 160ms ease-out;
}
html body.tm-hybrid #main-content #schritt-4 details.tm24-optional-ids[open] > summary::after { margin: 4px 6px 0 0; transform: rotate(-135deg); }
html body.tm-hybrid #main-content #schritt-4 details.tm24-optional-ids > summary:focus-visible { outline: 3px solid var(--hy-electric); outline-offset: 2px; border-radius: 8px; }
html body.tm-hybrid #main-content #schritt-4 details.tm24-optional-ids[open] > summary { margin-bottom: 4px; }
html body.tm-hybrid #main-content #schritt-4 .tm24-iban-preview {
  display: block; margin: 6px 2px 0; font-size: 14px; line-height: 1.4; letter-spacing: .02em; color: var(--hy-muted);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
html body.tm-hybrid #main-content #schritt-4 .tm24-iban-preview[hidden] { display: none; }
/* Beispiel-IBAN im leeren Feld: auf schmalen Handys ganz lesbar (war bei 320 px abgeschnitten); getippter Text bleibt 16 px */
html body.tm-hybrid #main-content #schritt-4 #kunde-iban::placeholder { font-size: clamp(13px, 4vw, 16px); }
@media (prefers-reduced-motion: reduce) {
  html body.tm-hybrid #main-content #schritt-4 details.tm24-optional-ids > summary::after { transition: none; }
}

/* ---------- 11) Pflichtbestaetigungen: ruhiger Zaehler, gut lesbare Zeilen ---------- */
/* Die sieben Erklaerungen bleiben einzeln, ihre Texte unveraendert (sie sind der gespeicherte Nachweis). */
html body.tm-hybrid #main-content #schritt-4 .tm24-decl-count {
  margin: -4px 0 10px; font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--hy-muted); font-variant-numeric: tabular-nums;
}
html body.tm-hybrid #main-content #schritt-4 .tm24-decl-count[hidden] { display: none; }
html body.tm-hybrid #main-content #schritt-4 .tm24-decl-count.is-complete { color: var(--hy-ok); }
@media (max-width: 959px) {
  html body.tm-hybrid #main-content #schritt-4 .pflicht-box .check-label { min-height: 56px; font-size: 15px !important; line-height: 1.5 !important; align-items: start; }
  html body.tm-hybrid #main-content #schritt-4 .pflicht-box .check-label input[type=checkbox] { margin-top: -1px !important; }
  html body.tm-hybrid #main-content #schritt-4 .pflicht-box .check-label > span { text-wrap: pretty; }
}