/* ===========================================================================
 * autofokus-bewertung-mobile.css
 * Mobile-Darstellungsschicht NUR fuer den freien Bewertungs-Funnel
 * (autobewertung.php + autobewertung-keys.php). Wird dort als LETZTE CSS
 * geladen und ist hart auf body.page-bewertung gescoped — andere Seiten und
 * der Desktop (>900px) bleiben unberuehrt.
 *
 * Additiv & reversibel: nur @media-Regeln, kein Eingriff in Legacy-CSS/PHP.
 * !important ist hier bewusst gesetzt, weil im alten Markup viel Inline-Style
 * + sehr spezifische Legacy-Selektoren stecken. Akzeptabel, da seiten-gescoped.
 *
 * Phase 1 (Codex/Jochen 14.06.): Viewport + fluider Container, Side-Ads weg,
 * xajax-Fragmente fluide/scrollbar, Header entschaerft, Inputs full-width <=600px.
 * KEINE Hamburger-Nav (spaeter).
 * =========================================================================== */

/* ---- Tablet / kleine Laptops & Handy (<=900px): fluides Grundlayout -------- */
@media (max-width: 900px) {

  /* Logo als Heim-Link NUR mobil aktiv: das Markup wrappt das Logo in einen
     <a href=".../autobewertung.php"> mit Inline-pointer-events:none (Desktop
     bleibt unklickbar wie bisher). Hier mobil scharf schalten — der einzige
     verlaessliche Rueckweg, wenn die Menueleiste auf dem Handy fehlt. */
  .af-logo-home {
      pointer-events: auto !important;
      cursor: pointer !important;
  }

  /* Box-Modell vereinheitlichen, sonst sprengen padding/border die 100%. */
  body.page-bewertung,
  body.page-bewertung #container,
  body.page-bewertung #container * {
      box-sizing: border-box;
  }

  /* Feste Desktop-Breiten der Rahmen-Container auf fluid. */
  body.page-bewertung #container,
  body.page-bewertung #cont-autofokus24,
  body.page-bewertung #kopf-autofokus24,
  body.page-bewertung #logo-autofokus24-c,
  body.page-bewertung #inhalte-autofokus24,
  body.page-bewertung #inhalte-dienste,
  body.page-bewertung #fuss-inhalte-autofokus24,
  body.page-bewertung #fuss-impressum-autofokus24 {
      width: auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
      float: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
  }
  body.page-bewertung { overflow-x: hidden; }   /* letzter Schutz gegen Rand-Ueberlauf */

  /* Bestand- (autobewertung-storage.php, .page-storage) UND Standtage-Seite
     (autobewertung-popular.php, .page-standtage): eigener Content-Container
     #inhalte-login-autofokus24 mit Legacy-Festbreite (~751px) → fluid machen,
     damit die width:100%-Tabellen auf Viewport-Breite schrumpfen. */
  body.page-storage #inhalte-login-autofokus24,
  body.page-standtage #inhalte-login-autofokus24,
  body.page-config #inhalte-login-autofokus24 {
      width: auto !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
  }

  /* Das (viewport-zentrierte) Logo ragt ~25px unter seinen Header-Container hinaus.
     Auf der Bestandsseite folgt direkt die Account-Box → sie rutschte ins Logo
     (Jochen 17.06.). Header unten Platz geben, damit er das Logo enthält; die
     Account-Box startet dann sauber darunter. (Nur .page-storage — Bewertungsseite
     unberührt, dort folgt Content mit eigenem Abstand.) */
  body.page-storage #kopf-autofokus24,
  body.page-standtage #kopf-autofokus24,
  body.page-config #kopf-autofokus24 {
      padding-bottom: 32px !important;
  }

  /* Jede gespeicherte Bewertung = mehrere width:100%-Tabellen mit %-Spalten.
     Mobil je Tabellen-ZEILE eine flexende Karten-Zeile: die "lange" Textspalte
     wächst (flex-grow) und drückt das nachfolgende Label+Wert-Paar zusammen auf
     eine neue Zeile → "Marke · EZ · km" eine Zeile, "VK 42.850 €" eine Zeile
     (Jochen 17.06.). Rein CSS/mobil — Desktop-Tabelle unverändert. */
  body.page-storage #inhalte-login-autofokus24 table,
  body.page-storage #inhalte-login-autofokus24 tbody {
      display: block !important;
      width: 100% !important;
      height: auto !important;       /* Legacy height:25px/10px klemmt sonst */
  }
  body.page-storage #inhalte-login-autofokus24 tr {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: baseline !important;
      column-gap: 6px !important;
      width: 100% !important;
      height: auto !important;
  }
  body.page-storage #inhalte-login-autofokus24 td {
      width: auto !important;
      height: auto !important;
      line-height: 1.45 !important;
      text-align: left !important;
      padding: 2px 0 !important;
  }
  /* Die lange Textspalte jeder Zeile wächst → schiebt das folgende Label+Wert-Paar
     auf eine neue Flex-Zeile (Paar bleibt zusammen). 12% = EZ (Kopf): EZ wächst →
     Umbruch IMMER nach der Erstzulassung, d.h. Zeile 1 "Marke · EZ", Zeile 2
     "km … VK Preis" (km 16% wächst → VK/Preis rechts). 27% = "gespeichert am" (EK),
     75% = Notizen, 84% = Submodell. (Jochen 17.06.: Umbruch nach EZ, passt fast immer.) */
  body.page-storage #inhalte-login-autofokus24 td[style*="width: 16%"],
  body.page-storage #inhalte-login-autofokus24 td[style*="width: 27%"],
  body.page-storage #inhalte-login-autofokus24 td[style*="width: 75%"],
  body.page-storage #inhalte-login-autofokus24 td[style*="width: 84%"] {
      flex-grow: 1 !important;
  }

  /* Kopf-Zeile (.afs-head): Umbruch IMMER nach der Erstzulassung → Zeile 1
     "Marke  EZ", Zeile 2 "km … VK Preis" (Jochen 17.06.: passt fast immer).
     flex-grow allein erzwingt keinen Umbruch (alles passt in eine Zeile), daher
     ein 0-hohes Pseudo-Element mit flex-basis:100% als erzwungener Umbruch —
     via order zwischen EZ (2) und km (4). km (16%) wächst → VK/Preis nach rechts. */
  body.page-storage .afs-head td[style*="width: 48%"] { order: 1 !important; }  /* Name */
  body.page-storage .afs-head td[style*="width: 12%"] { order: 2 !important; }  /* EZ */
  body.page-storage .afs-head tr::after {
      content: "" !important;
      order: 3 !important;
      flex-basis: 100% !important;
      height: 0 !important;
  }
  body.page-storage .afs-head td[style*="width: 16%"] { order: 4 !important; }  /* km */
  body.page-storage .afs-head td[style*="width: 8%"]  { order: 5 !important; }  /* VK */
  body.page-storage .afs-head td[style*="width: 10%"] { order: 6 !important; }  /* Preis */
  /* Leere Spacer-Spalten (6% Positions-/Leerspalte, 72% Aktions-Spacer) raus. */
  body.page-storage #inhalte-login-autofokus24 td[style*="width: 6%"],
  body.page-storage #inhalte-login-autofokus24 td[style*="width: 72%"] {
      display: none !important;
  }
  /* Dekorative Kopf-/Summen-Tabellen (hg.jpg-Hintergrund: oben "Fahrzeug/Preise",
     unten "Seitensummen") mobil weg — Summen braucht niemand, der Spaltenkopf ist
     bei gestapelten Karten redundant. */
  body.page-storage #inhalte-login-autofokus24 table[style*="hg.jpg"] {
      display: none !important;
  }

  /* Aktionen als volle, tappbare Buttons unter dem Auto. command=delete = Löschen,
     command=load OHNE .storageLink = Anzeigen (der Fahrzeugname ist auch
     command=load → per :not ausgeschlossen). */
  body.page-storage a[href*="command=delete"],
  body.page-storage a[href*="command=load"]:not(.storageLink) {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      text-align: center !important;
      padding: 12px !important;
      margin: 6px 0 0 !important;
      font-size: 16px !important;
      font-weight: bold !important;
      border-radius: 8px !important;
      text-decoration: none !important;
  }
  /* Die Flex-Zeile (oben) würde Löschen+Anzeigen nebeneinander setzen — ihre Zellen
     je auf volle Flex-Zeilenbreite zwingen, damit die Buttons untereinander auf
     voller Auto-Breite stehen (Jochen: "auf Breite des Autos"). */
  body.page-storage #inhalte-login-autofokus24 td:has(> a[href*="command=delete"]),
  body.page-storage #inhalte-login-autofokus24 td:has(> a[href*="command=load"]:not(.storageLink)) {
      flex-basis: 100% !important;
  }
  body.page-storage a[href*="command=load"]:not(.storageLink) {
      color: #ffffff !important;
      background: #009036 !important;        /* Anzeigen = grün (primär) */
      border: 1px solid #009036 !important;
  }
  body.page-storage a[href*="command=delete"] {
      color: #c0392b !important;
      background: #fdecea !important;         /* Löschen = rot (sekundär) */
      border: 1px solid #c0392b !important;
  }

  /* Seiten-Pager: vorher winzige Text-Links → grosse, tappbare Felder. */
  body.page-storage .pagerLink,
  body.page-storage .pagerStatic,
  body.page-storage .pagerStaticCurrent {
      display: inline-block !important;
      min-width: 38px !important;
      padding: 10px 12px !important;
      margin: 3px !important;
      font-size: 17px !important;
      text-align: center !important;
      border: 1px solid #cdddea !important;
      border-radius: 8px !important;
      text-decoration: none !important;
  }
  body.page-storage .pagerStaticCurrent {
      background: #023365 !important;
      color: #ffffff !important;
      border-color: #023365 !important;
  }

  /* === Standtage-Seite (autobewertung-popular.php, .page-standtage) ===========
     Merkmals-Liste: je Zeile eine width:100%-Tabelle [Checkbox | Label | Symbol(e) |
     Prozent]. Mobil ZWEIZEILIG (Jochen 17.06.): Zeile 1 = Checkbox + Merkmal,
     Zeile 2 (eingerückt) = Wirkungs-Symbol(e) + Prozentwert. Die Symbole bleiben
     drin — grünes Häkchen (positive_bewertung) = werterhöhend, rotes Schild
     (negative_bewertung) = wertmindernd ("hoch/runter"). */
  body.page-standtage #inhalte-login-autofokus24 table[style*="height: 25px"],
  body.page-standtage #inhalte-login-autofokus24 table[style*="height: 25px"] tbody {
      display: block !important; height: auto !important;
  }
  body.page-standtage #inhalte-login-autofokus24 table[style*="height: 25px"] tr {
      display: flex !important; flex-wrap: wrap !important; align-items: center !important;
      height: auto !important;
  }
  body.page-standtage #inhalte-login-autofokus24 table[style*="height: 25px"] td {
      height: auto !important; padding: 5px 4px !important; box-sizing: border-box !important;
  }
  /* Checkbox (Zeile 1, links) */
  body.page-standtage #inhalte-login-autofokus24 table[style*="height: 25px"] td:nth-child(1) {
      order: 1 !important; width: auto !important; flex: 0 0 auto !important;
  }
  /* Merkmal-Label (Zeile 1, füllt den Rest) */
  body.page-standtage #inhalte-login-autofokus24 table[style*="height: 25px"] td:nth-child(2) {
      order: 2 !important; flex: 1 1 auto !important; min-width: 0 !important;
      text-align: left !important; font-weight: bold !important;
  }
  /* harter Umbruch nach dem Label → Symbol + Prozent landen auf Zeile 2 */
  body.page-standtage #inhalte-login-autofokus24 table[style*="height: 25px"] tr::after {
      content: "" !important; flex-basis: 100% !important; height: 0 !important; order: 3 !important;
  }
  /* Wirkungs-Symbol(e) (Zeile 2, links, unter dem Label eingerückt) */
  body.page-standtage #inhalte-login-autofokus24 table[style*="height: 25px"] td:nth-child(3) {
      order: 4 !important; flex: 0 0 auto !important; width: auto !important;
      text-align: left !important; padding-left: 28px !important;
  }
  /* Prozentwirkung (Zeile 2, direkt neben den Symbolen) */
  body.page-standtage #inhalte-login-autofokus24 table[style*="height: 25px"] td:nth-child(4) {
      order: 5 !important; flex: 0 0 auto !important; width: auto !important;
      text-align: left !important; font-weight: bold !important; white-space: nowrap !important;
  }
  /* Symbole wieder sichtbar (Declutter zurückgenommen) */
  body.page-standtage #inhalte-login-autofokus24 img[src*="positive_bewertung"],
  body.page-standtage #inhalte-login-autofokus24 img[src*="negative_bewertung"] {
      display: inline !important; vertical-align: middle !important; margin-right: 2px !important;
  }

  /* === Einstellungen/Abschläge (register/myconfig1.php, .page-config) ==========
     Die Seite, die der Händler mobil wirklich braucht (Abschläge auf den EK +
     welche Preise angezeigt werden). Tab-Leisten raus (Navigation via Aufklapp-
     Menü; Nutzerdaten ist Desktop-Domäne), Formularzeilen fluid, fixe Abstands-
     Spacer entschärfen, Speichern/Weiter als moderne Voll-Buttons. */
  body.page-config #submenue-nutzerdaten-aendern,
  body.page-config #submenue-nutzerdaten-2 {
      display: none !important;
  }
  /* Formular-Container + Felder fluid (Legacy-Festbreiten ~605px). */
  body.page-config #inhalte-login-autofokus24 .formularfelder,
  body.page-config #inhalte-login-autofokus24 .formularfelder p,
  body.page-config #inhalte-login-autofokus24 .haendlerpreis-wahl {
      width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  body.page-config #inhalte-login-autofokus24 select {
      width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
      margin-top: 4px !important;
  }
  /* spanAbstand210/292 sind GEFLOATETE Festbreiten-Spalten (210/297px) — sie tragen
     aber die Label-Texte ("Händlerverkaufspreis" etc.), dürfen also NICHT versteckt
     werden. Float + Fixbreite lösen → Label steht inline neben dem Radio/Select,
     leere &nbsp;-Spacer kollabieren. */
  body.page-config .spanAbstand210,
  body.page-config .spanAbstand292 {
      display: inline !important; float: none !important; width: auto !important;
      padding-right: 6px !important;
  }
  body.page-config #inhalte-login-autofokus24 .formularfelder p { text-align: left !important; }
  /* Speichern/Weiter: moderne Voll-Buttons untereinander statt Legacy-Bildbuttons. */
  body.page-config #inhalte-login-autofokus24 input.button-passwort-anfordern,
  body.page-config #inhalte-login-autofokus24 input.button-weiter,
  body.page-config #inhalte-login-autofokus24 input.button-weiter180 {
      display: block !important; width: 100% !important; box-sizing: border-box !important;
      height: auto !important; padding: 14px !important; margin: 8px 0 0 !important;
      background: #023365 !important; background-image: none !important; color: #fff !important;
      border: none !important; border-radius: 8px !important;
      font-size: 16px !important; font-weight: bold !important; cursor: pointer;
  }
  /* "Weiter" sekundär (hell) absetzen. */
  body.page-config #inhalte-login-autofokus24 input.button-weiter {
      background: #eff5fc !important; color: #023365 !important; border: 1px solid #023365 !important;
  }

  /* Standzeit-/Häufigkeiten-Block mobil komplett raus (Jochen 18.06.) — das
     detailLevel-Select bleibt im DOM (Wert wird weiter gespeichert), nur unsichtbar. */
  body.page-config #config-standzeit {
      display: none !important;
  }

  /* Mobile Unter-Navigation der Einstellungen (configMobileSubnavHtml): Ersatz für
     die ausgeblendete Tab-Leiste — Bevorzugte/Fremde Marken + Abschläge als Buttons. */
  body.page-config .config-mobile-subnav {
      display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
      margin: 4px 0 14px !important;
  }
  body.page-config .config-mobile-subnav .config-subnav-btn {
      flex: 1 1 auto !important; text-align: center !important; box-sizing: border-box !important;
      padding: 11px 10px !important; border-radius: 8px !important;
      background: #eff5fc !important; color: #023365 !important; border: 1px solid #aac4e0 !important;
      font-size: 14px !important; font-weight: bold !important; text-decoration: none !important;
  }
  body.page-config .config-mobile-subnav .config-subnav-active {
      background: #023365 !important; color: #fff !important; border-color: #023365 !important;
  }

  /* Marken-Seiten (myconfig2/3): Doppel-Listbox (Alle Marken | Hinzufügen/Entfernen |
     Bevorzugte Marken | Zuschlag) liegt in gefloateten ~200px-Spalten → läuft über.
     Mobil die Spalten untereinander stapeln, Listen + Zuschlag voll breit. */
  body.page-config #bevorzugte-fremde-marken {
      width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  body.page-config #inhalte-login-autofokus24 .bevorzugte-fremde-marken-2 {
      float: none !important; width: 100% !important; box-sizing: border-box !important;
      margin: 0 0 12px 0 !important;
  }
  body.page-config #inhalte-login-autofokus24 select[multiple],
  body.page-config #inhalte-login-autofokus24 .bevorzugte-fremde-marken-2 input[type="text"] {
      width: 100% !important; box-sizing: border-box !important;
  }

  /* === Impressum (impressum.php, .page-impressum) =============================
     Mobil eingedampft: fluide Container, Bild-Credits raus, lange Datenschutz-
     erklärung hinter einen Aufklapp-Button (bleibt vollständig im DOM + per Anker
     #google-analytics aufklappbar). Pflicht-Impressum bleibt sichtbar. */
  body.page-impressum #inhalte-e2-autofokus24,
  body.page-impressum .inhalte-impressum {
      width: auto !important; max-width: 100% !important; box-sizing: border-box !important;
      padding-left: 8px !important; padding-right: 8px !important;
  }
  body.page-impressum #inhalte-e2-autofokus24 h1 { font-size: 20px !important; }
  body.page-impressum #inhalte-e2-autofokus24 h2 { font-size: 16px !important; }
  body.page-impressum .impressum-credits { display: none !important; }   /* Bild-Credits-Geblabber raus */

  /* Datenschutz-Aufklapp: Button nur mobil (Inline display:none → hier zeigen);
     Inhalt mobil eingeklappt bis .ds-open. Desktop: Button aus, Inhalt immer da. */
  body.page-impressum .impressum-ds-toggle {
      display: block !important; width: 100% !important; box-sizing: border-box !important;
      margin: 16px 0 0 !important; padding: 13px !important; text-align: left !important;
      background: #eff5fc !important; color: #023365 !important; border: 1px solid #023365 !important;
      border-radius: 8px !important; font-size: 15px !important; font-weight: bold !important; cursor: pointer;
  }
  body.page-impressum .impressum-ds-toggle::after  { content: "  ▼"; }
  body.page-impressum .impressum-ds-toggle.ds-open::after { content: "  ▲"; }
  body.page-impressum #impressum-datenschutz { display: none !important; }
  body.page-impressum #impressum-datenschutz.ds-open { display: block !important; }

  /* === Header-Prototyp (Jochen 15.06.): nur das Logo, kein blauer Rahmen ======
     Der blaue Rahmen ist das Hintergrundbild + die fixe 190px-Hoehe von
     #kopf-autofokus24; der seitliche Rahmen kommt von #cont-autofokus24. Beide
     Hintergruende raus, Hoehe freigeben, Logo mittig + volle Breite. */
  body.page-bewertung #kopf-autofokus24 {
      background-image: none !important;
      height: auto !important;
  }
  body.page-bewertung #cont-autofokus24 {
      background-image: none !important;
  }
  body.page-bewertung #logo-autofokus24-c {
      height: auto !important;
      text-align: center !important;
  }
  /* #logo (float:left, fixe 108px) reservierte Hoehe + floatete → Spalt unter dem
     Logo. Float/feste Masse aufheben, damit der Container auf das Logo schrumpft. */
  body.page-bewertung #logo {
      float: none !important;
      width: auto !important;
      height: auto !important;
  }
  /* Claim-CONTAINER (nicht nur das Bild) raus — #fahrzeugbewertung ist float:right
     mit fixen 108px Hoehe und blies den Abstand zum ersten Dropdown auf. */
  body.page-bewertung #fahrzeugbewertung {
      display: none !important;
  }
  /* Logo: NEUES modernes Vektor-Logo (images/af24-logo-mobile.svg) per
     content-Swap — randscharf, ohne weissen Rand/Schatten, perfekt zentrierbar.
     Schmaler + mittig, kaum Abstand nach unten. Legacy-Verschiebung aufgehoben. */
  body.page-bewertung .logobild-autofokus24 {
      content: url(images/af24-logo-mobile.svg) !important;
      display: block !important;
      width: 90vw !important;      /* ~volle Phone-Breite (an der Viewport-Breite, nicht am schmalen Header-Container) */
      max-width: 380px !important; /* Deckel: auf Tablets (<=900) nicht absurd gross */
      height: auto !important;
      margin: 10px 0 6px !important;
      /* margin:auto zentriert NICHT, wenn das Logo breiter als sein Container ist
         (#logo ~326px < 90vw) → es klebte links und lief rechts an. #logo sitzt
         selbst mittig, daher per left:50% + translateX(-50%) auf Viewport-Mitte. */
      position: relative !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
  }
  body.page-bewertung .fahrzeugbewertung {   /* das breite "Professionelle Fahrzeugbewertung"-Bild */
      display: none !important;
  }
  /* Navigation umbrechen statt fixer Breite (kompakt halten). */
  body.page-bewertung #navigation,
  body.page-bewertung .navigation,
  body.page-bewertung ul.menue {
      width: auto !important;
      max-width: 100% !important;
      white-space: normal !important;
  }

  /* Seitliche Werbespalten sind mobil Ballast → raus. */
  body.page-bewertung #leftAdFrame,
  body.page-bewertung #rightAdFrame {
      display: none !important;
  }
  /* Bottom-Ad ist ein LEERER Platzhalter-iframe (src="", 730px breit); sein
     Parent #adsense/.googleAd bleibt 720px breit und erzeugte mobil horizontalen
     Overflow (scrollWidth 744 bei 390px). Kein echter Ad geladen → ganzer Block
     raus, das beseitigt den Overflow (Codex 15.06.). */
  body.page-bewertung #adsense {
      display: none !important;
  }

  /* Auswahl-Bereich fluid. */
  body.page-bewertung #select_fields {
      width: auto !important;
      max-width: 100% !important;
      padding-left: 0 !important;
  }

  /* xajax-Fragmente (der eigentliche Risikoteil) fluide. */
  body.page-bewertung #as_container,
  body.page-bewertung #price_container,
  body.page-bewertung #progression_container {
      width: auto !important;
      max-width: 100% !important;
      float: none !important;
  }

  /* xajax-Tabellen umbrechen / horizontal scrollbar statt fixer Breite. */
  body.page-bewertung .rootTableLinks,
  body.page-bewertung .rootTableLinksKeys {
      width: 100% !important;
      max-width: 100% !important;
      display: block !important;
      overflow-x: auto !important;
  }
  body.page-bewertung .rootTableLinksCol {
      width: auto !important;
      display: block !important;
      float: none !important;
  }

  /* Bilder/Charts (pChart-Wertverlauf) skalieren. */
  body.page-bewertung img,
  body.page-bewertung #progression_container img,
  body.page-bewertung #price_container img {
      max-width: 100% !important;
      height: auto !important;
  }

  /* Resultat (xajax, calcutil): die 3-spaltige Ausstattung + die Eingabezeilen
     (Farbe/km/PLZ) liefen ueber 390px hinaus. Tabellen-Spalten untereinander
     stapeln und inline-gefloatete Bloecke aufloesen. */
  body.page-bewertung #as_container table,
  body.page-bewertung #as_container tbody,
  body.page-bewertung #as_container tr {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
  }
  body.page-bewertung #as_container td,
  body.page-bewertung #as_container th {
      display: block !important;
      width: 100% !important;
      float: none !important;
  }
  body.page-bewertung #as_container [style*="float"],
  body.page-bewertung #price_container [style*="float"],
  body.page-bewertung #progression_container [style*="float"] {
      float: none !important;
      width: auto !important;
      max-width: 100% !important;
  }
  /* Untere Eingabezeile (Farbe/km/PLZ-Toolbar) umbrechen lassen. */
  body.page-bewertung #price_container table,
  body.page-bewertung #price_container tr,
  body.page-bewertung #price_container td {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      float: none !important;
  }

  /* Ausstattungs-/Toolbar-Tabellen tragen feste Desktop-Breiten (705/780px,
     padding-left:39px). Das war das unsichtbare, rechts abgeschnittene
     ~745px-Element. Fluid machen. */
  body.page-bewertung .asCheckBoxRootTable,
  body.page-bewertung .asCheckBoxRootTableEx,
  body.page-bewertung .asCheckBoxRootTableMainCol,
  body.page-bewertung .innerAsTD,
  body.page-bewertung .innerAsTDEx,
  body.page-bewertung .debugOut,
  body.page-bewertung .asBlockHeader,
  body.page-bewertung .asBlockHeaderLink {
      width: auto !important;
      max-width: 100% !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
  }

  /* Farbe / km / Garantie / PLZ stecken in .asCheckBoxEx(2) — float:left mit
     FIXER height:20px. Gestapelt klemmt jeder Block auf 20px, der Inhalt
     quillt drunter → die Felder kleben/ueberlappen. Float loesen, Hoehe
     freigeben, vertikalen Abstand geben. */
  body.page-bewertung .asCheckBoxEx,
  body.page-bewertung .asCheckBoxEx2 {
      float: none !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 0 0 12px 0 !important;
      overflow: visible !important;
  }

  /* === Phase 2 (Codex/Jochen 14.06.): gezieltes Ausblenden auf Mobile ======= */

  /* Wertverlauf komplett raus — Charts UND die [+]-Toggle-Links liegen alle in
     #progression_container, das xajax als Ganzes befuellt. */
  body.page-bewertung #progression_container {
      display: none !important;
  }

  /* carsale24-„Preis ermitteln"-CTA raus — ABER der echte Gratis-Preis bleibt.
     Jede Preisbox (#tablePriceEK/VK/HVK) enthaelt ENTWEDER den EUR-Preis ODER
     den carsale-Button. :has() blendet nur die Box mit carsale-<img> aus; die
     Gratis-Preis-Box (ohne carsale-Bild) bleibt stehen. Faellt :has() bei einem
     uralten Browser aus, bliebe hoechstens die CTA sichtbar — der Preis nie weg. */
  body.page-bewertung #tablePriceEK:has(img[src*="carsale24"]),
  body.page-bewertung #tablePriceVK:has(img[src*="carsale24"]),
  body.page-bewertung #tablePriceHVK:has(img[src*="carsale24"]) {
      display: none !important;
  }

  /* === Preis-Box: moderne Pastell-Karte (Jochen 15.06.) =====================
     Weiche Pastell-Anmutung (zarter Blau→Mint-Verlauf, runde Ecken, sanfter
     Schatten) statt der blauen Legacy-Tabelle. Preis gross + ZENTRIERT. Die
     carsale-Boxen sind oben bereits ausgeblendet → trifft nur die echte Box. */
  body.page-bewertung #buyPrice #tablePriceEK,
  body.page-bewertung #buyPrice #tablePriceVK,
  body.page-bewertung #buyPrice #tablePriceHVK {
      background: linear-gradient(155deg, #eef5ff 0%, #f3fbf6 100%) !important;
      border: 1px solid #dbe8fb !important;
      border-radius: 16px !important;
      padding: 22px 18px !important;
      margin: 8px auto 12px !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      box-shadow: 0 6px 20px rgba(60, 110, 180, 0.13) !important;
  }
  body.page-bewertung #buyPrice #tablePriceEK table,
  body.page-bewertung #buyPrice #tablePriceVK table,
  body.page-bewertung #buyPrice #tablePriceHVK table {
      border: none !important;
      width: 100% !important;
  }
  body.page-bewertung #buyPrice #tablePriceEK td,
  body.page-bewertung #buyPrice #tablePriceVK td,
  body.page-bewertung #buyPrice #tablePriceHVK td {
      background: transparent !important;
      border: none !important;
      height: auto !important;
      padding: 0 !important;
      text-align: center !important;
  }
  /* Zeile 1 = Ueberschrift (z. B. „Privat an Privat") — zarte Label-Optik. */
  body.page-bewertung #buyPrice #tablePriceEK tr:nth-child(1) td,
  body.page-bewertung #buyPrice #tablePriceVK tr:nth-child(1) td,
  body.page-bewertung #buyPrice #tablePriceHVK tr:nth-child(1) td {
      font-size: 12px !important;
      letter-spacing: 1.5px !important;
      text-transform: uppercase !important;
      color: #7e9bc0 !important;
      font-weight: 700 !important;
  }
  /* Zeile 2 = Untertitel (z. B. „(ohne Gewährleistung)"). */
  body.page-bewertung #buyPrice #tablePriceEK tr:nth-child(2) td,
  body.page-bewertung #buyPrice #tablePriceVK tr:nth-child(2) td,
  body.page-bewertung #buyPrice #tablePriceHVK tr:nth-child(2) td {
      font-size: 12px !important;
      color: #9aa7b8 !important;
      padding: 2px 0 12px !important;
  }
  /* Zeile 3 = der Preis — gross, ZENTRIERT, kraeftiges aber weiches Blau. */
  body.page-bewertung #buyPrice #tablePriceEK tr:nth-child(3) td,
  body.page-bewertung #buyPrice #tablePriceVK tr:nth-child(3) td,
  body.page-bewertung #buyPrice #tablePriceHVK tr:nth-child(3) td {
      font-size: 38px !important;
      line-height: 1.05 !important;
      color: #1f5fae !important;
      font-weight: 800 !important;
      letter-spacing: -0.5px !important;
      text-align: center !important;
  }
  /* Box mittig + volle Breite: die Karte liegt in einer Wrapper-Tabelle
     (resultVK), die als display:block NICHT automatisch 100% fuellt → Box blieb
     schmal (170px) und links. Wrapper-Kette unter #buyPrice auf volle Breite
     zwingen, dann fuellt die Karte die Spalte und ist (wie die Lead-Box) mittig. */
  body.page-bewertung #buyPrice,
  body.page-bewertung #buyPrice table,
  body.page-bewertung #buyPrice tr,
  body.page-bewertung #buyPrice td {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
  }
  /* tbody fehlte im display:block-Satz (Phase 1b nahm nur table/tr/td) → blieb
     table-row-group und schrumpfte die Zeilengruppe auf Inhaltsbreite (172px),
     darunter erbte die Karte die 170px/links. tbody mitnehmen → volle Breite. */
  body.page-bewertung #price_container tbody {
      display: block !important;
      width: 100% !important;
  }

  /* „[+] Verkaufspreise"-Header samt Trennlinie (.asBlockHeader border-bottom)
     raus — die Preiskarte zeigt der Nutzer eh direkt. Nur der Header IN
     #price_container, der auf show('price_out_table') verweist (nicht die
     gleichnamigen Ausstattungs-Header in #as_container). */
  body.page-bewertung #price_container table.asCheckBoxRootTable:has(a[onclick*="price_out_table"]) {
      display: none !important;
  }

  /* „Zum Vergleich — was bringt das Auto sonst noch?"-Divider (Sponsor-Intro,
     util.php) mobil raus. */
  body.page-bewertung .af-vergleich-divider {
      display: none !important;
  }

  /* Hauptmenue / Reiter raus (navigation.php: .navi-autofokus24, alle Instanzen
     — float-left + die zwei absolut positionierten rechts). Login-Block +
     Frei-Zaehler werden weiter unten separat ausgeblendet. */
  body.page-bewertung .navi-autofokus24 {
      display: none !important;
  }
  /* Unter-Navigation der Konto-Seiten (navigation.php .navi-sub-autofokus24:
     "Nutzerdaten | Einstellungen | Rechnungen | …") mobil raus — Navigation
     läuft übers Aufklapp-Menü, Nutzerdaten ist Desktop-Domäne. */
  body.page-bewertung .navi-sub-autofokus24 {
      display: none !important;
  }

  /* Testkonto-Werbeblock („30 Tage … ausprobieren" + „Kostenloses Testkonto
     anlegen") raus — #gratisAd (autobewertung.php). Nur Marketing, kein
     Funnel-Schritt; nicht-eingeloggte Besucher sehen ihn auf Mobile nicht mehr. */
  body.page-bewertung #gratisAd {
      display: none !important;
  }

  /* Login-/Anmelden-Block raus (menu2.php #navi-login-autofokus24). Bricht auf
     Mobile haesslich in eine zweite Zeile um und verleitet zum Klick auf ein
     (noch) nicht mobil-taugliches Login. Der Frei-Zaehler (#counterInfo) liegt
     separat und wird unten eigens ausgeblendet. */
  body.page-bewertung #navi-login-autofokus24 {
      display: none !important;
  }

  /* Frei-Zaehler („X von N freien Bewertungen") raus. #counterInfo liegt NICHT
     im Login-Block (menu.php-<span>), daher eigene Regel. Rein informativ — der
     rote „Taeglich N kostenlose…"-Hinweis deckt es ab. Wird per xajax befuellt;
     Verstecken ist kosmetisch, der Free-Count bleibt serverseitig unberuehrt. */
  body.page-bewertung #counterInfo {
      display: none !important;
  }

  /* Footer-Link-Block KOMPLETT raus auf Mobile (Jochen 15.06.: „Impressum unten
     weg"). #navi-impressum-af24 traegt Kontakt/Impressum/Links/FAQ inkl. der
     Trenner-Striche — ganzer Block weg, damit unten kein einzelnes Impressum +
     loser „|" bleibt (ersetzt den frueheren Einzel-Link-Hide; footer.php bleibt
     so unangetastet). ACHTUNG Impressumspflicht — s. Bericht. */
  body.page-bewertung #navi-impressum-af24 {
      display: none !important;
  }

  /* Trennlinie ueber dem Footer raus — #fuss-inhalte-autofokus24 ist ein leeres
     8px-Div mit hg_fuss_inhalte.gif als Linie. Mobil weg (Jochen 15.06.). */
  body.page-bewertung #fuss-inhalte-autofokus24 {
      display: none !important;
  }

  /* Copyright sitzt mobil (per JS) direkt unter dem Preis — Legacy-Float +
     fixe Masse aufheben, damit er eng + zentriert anschliesst statt mit grosser
     Luecke (Jochen 15.06.: „Copyright ist zu weit weg"). */
  body.page-bewertung #copyright {
      float: none !important;
      width: auto !important;
      height: auto !important;
      margin: 4px 0 0 !important;
      padding: 0 !important;
      text-align: center !important;
  }
  body.page-bewertung #copyright p { text-align: center !important; }

  /* Impressum-Link mobil ans Copyright (Impressumspflicht — der Footer ist mobil
     aus). Liegt in #copyright und zieht so mit unter den Preis; auf Desktop via
     Inline-display:none versteckt, hier sichtbar gemacht. */
  body.page-bewertung .af-mobile-impressum {
      display: inline-block !important;
      margin-top: 3px !important;
      font-size: 12px !important;
      color: #335a80 !important;
      text-decoration: underline !important;
  }

  /* Login-Link mobil NEBEN dem Impressum, gleiche Groesse/Optik. Der Footer-Nav
     ist mobil aus und der Erstansicht-Quick-Login (#af-mobile-login-box)
     verschwindet, sobald ein Auto gewaehlt ist — dieser Link bleibt immer
     erreichbar (Jochen 18.06.). Desktop via Inline-display:none aus. */
  body.page-bewertung .af-mobile-footer-login {
      display: inline-block !important;
      margin-top: 3px !important;
      margin-left: 16px !important;
      font-size: 12px !important;
      color: #335a80 !important;
      text-decoration: underline !important;
  }

  /* Mobile-Quick-Login (Bestandskunden-Beschwerde 16.06.2026): der Login wurde
     auf dem Handy aus dem Kopf-Menue genommen (#navi-login-autofokus24, oben mit
     display:none). Ersatz: ein reiner "login"-Link in der Erstansicht direkt
     unter Marke/Baujahr/Monat (#af-mobile-login-box, eigene Box — NICHT in
     #helpText, das showHelpText() nach 5s ueberschreibt). Auf Desktop via
     Inline-display:none aus, hier sichtbar gemacht. Wird in ajax.js newModels()
     beim ersten Auswahl-Wechsel per removeChild entfernt. */
  body.page-bewertung #af-mobile-login-box {
      display: block !important;
      text-align: center !important;
      margin: 8px 0 2px !important;
  }
  body.page-bewertung #af-mobile-login-box .af-mobile-login {
      display: block !important;           /* volle Breite — klar als Kunden-Button
                                              erkennbar; "Kundenlogin" signalisiert,
                                              dass es nichts fuer private Neugierige ist */
      width: 100% !important;
      box-sizing: border-box !important;
      text-align: center !important;
      padding: 12px 16px !important;
      font-size: 16px !important;          /* grosse Tap-Flaeche, kein iOS-Zoom */
      font-weight: bold !important;
      color: #023365 !important;           /* gleiches Blau wie "Anmelden" im Menue */
      background: #eff5fc !important;
      border: 1px solid #023365 !important;
      border-radius: 8px !important;
      text-decoration: none !important;
  }

  /* Eingeloggte Haendler: mobil sichtbarer "Angemeldet …/Abmelden"-Streifen oben
     (Ersatz fuer den mobil ausgeblendeten Kopf-Login). Desktop via Inline-
     display:none aus. Bleibt sichtbar (wird NICHT bei Auswahl entfernt). */
  body.page-bewertung #af-mobile-account-box {
      display: block !important;
      text-align: center !important;
      background: #eef4fa !important;
      border: 1px solid #cdddea !important;
      border-radius: 6px !important;
      margin: 8px 0 12px !important;
      padding: 8px 10px !important;
      font-size: 13px !important;
      color: #023365 !important;
      line-height: 1.6 !important;
      word-break: break-word !important;
  }
  body.page-bewertung #af-mobile-account-box .af-mobile-account-who {
      margin-right: 10px !important;
  }
  body.page-bewertung #af-mobile-account-box .af-mobile-account-logout {
      color: #023365 !important;
      font-weight: bold !important;
      text-decoration: underline !important;
      white-space: nowrap !important;
  }

  /* Mobiles Aufklapp-Menue fuer eingeloggte Haendler (Jochen 17.06.): radikal
     vereinfachte Navigation. Grosser "Menue"-Toggle-Button; Antippen klappt einen
     Stack grosser Buttons auf (Autobewertung/Bestand/Standtage/Ankauf/Mein Konto).
     Ersatz fuer das mobil ausgeblendete .navi-autofokus24. JS: toggle .af-open. */
  body.page-bewertung #af-mobile-menu {
      display: block !important;
      margin: 0 0 12px !important;
  }
  body.page-bewertung #af-mobile-menu .af-mobile-menu-toggle {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      text-align: left !important;
      padding: 12px 16px !important;
      font-size: 16px !important;          /* kein iOS-Zoom, grosse Tap-Flaeche */
      font-weight: bold !important;
      color: #ffffff !important;
      background: #023365 !important;
      border: 1px solid #023365 !important;
      border-radius: 8px !important;
      cursor: pointer !important;
  }
  body.page-bewertung #af-mobile-menu .af-mobile-menu-toggle::after {
      content: "\25be" !important;         /* ▾ zugeklappt */
      float: right !important;
  }
  body.page-bewertung #af-mobile-menu.af-open .af-mobile-menu-toggle::after {
      content: "\25b4" !important;         /* ▴ aufgeklappt */
  }
  body.page-bewertung #af-mobile-menu .af-mobile-menu-items {
      display: none !important;            /* Standard: zu */
  }
  body.page-bewertung #af-mobile-menu.af-open .af-mobile-menu-items {
      display: block !important;
      margin-top: 8px !important;
  }
  body.page-bewertung #af-mobile-menu .af-mobile-menu-item {
      display: block !important;
      box-sizing: border-box !important;
      text-align: center !important;
      padding: 13px 16px !important;
      margin: 6px 0 !important;
      font-size: 16px !important;
      font-weight: bold !important;
      color: #023365 !important;
      background: #eff5fc !important;
      border: 1px solid #cdddea !important;
      border-radius: 8px !important;
      text-decoration: none !important;
  }

  /* Wertverlauf- + Standzeitrechnung-Bloecke mobil komplett raus (Jochen 16.06.):
     die "[+]"-Header-Tabellen (per :has auf den markierten Link) + Chart/Container.
     #price_container-Scope noetig: diese Tabellen liegen in #price_container, sonst
     schlaegt die Phase-1b-Regel (Z.178) #price_container table{display:block} per
     ID-Spezifitaet. Plain-Selektoren bleiben als Fallback (falls woanders gerendert). */
  body.page-bewertung #price_container table:has(.af-wertverlauf-link),
  body.page-bewertung #price_container table:has(.af-standzeit-link),
  body.page-bewertung table.asCheckBoxRootTable:has(.af-wertverlauf-link),
  body.page-bewertung table.asCheckBoxRootTable:has(.af-standzeit-link) {
      display: none !important;
  }
  body.page-bewertung #degeneration_table,
  body.page-bewertung #progression_table,
  body.page-bewertung #elasticContainer {
      display: none !important;
  }

  /* Ausstattungs-Prozente "(X %)" + gruen/rot-Symbole (gut/schlecht) mobil raus
     (Jochen 16.06.). */
  body.page-bewertung .af-as-percent { display: none !important; }
  body.page-bewertung img[src*="_bewertung.png"] { display: none !important; }

  /* Sondermodell-Prozent (X %) + Standzeit-Hinweis-Icon in der Sondermodell-Zeile raus. */
  body.page-bewertung .af-sm-popular { display: none !important; }

  /* Formular-Weiterleitung "Angebotspreis erstellen" raus. */
  body.page-bewertung .af-angebotspreis-row { display: none !important; }

  /* Legacy-Preis-Tabelle (660px, rowspan-Spacer + Angebotspreis-Zeile) mobil ganz
     aus — stattdessen die saubere af-price-mobile-Box. Damit ist auch die
     Angebotspreis-Formularweiterleitung mobil weg (sie steckt in dieser Tabelle). */
  /* #price_container-scope noetig: die Phase-1b-Regel (Z.178) #price_container table
     {display:block} schlaegt sonst per ID-Spezifitaet die reine Klassen-Regel. */
  body.page-bewertung #price_container .af-price-table { display: none !important; }

  /* Saubere Mobile-Preis-Box (Jochen 16.06.). Respektiert die Kunden-Einstellung
     welcher Preis angezeigt wird (showVK/showEK) — calcutil.php gibt nur die
     erlaubten Zeilen aus. */
  body.page-bewertung .af-price-mobile {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 16px 0 !important;
      border: 2px solid #5e8ebd !important;
      border-radius: 8px !important;
      background: #eff5fc !important;
      overflow: hidden !important;
  }
  body.page-bewertung .af-price-mobile .af-price-row {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 12px 14px !important;
      border-bottom: 1px solid #d4e2f0 !important;
  }
  body.page-bewertung .af-price-mobile .af-price-row:last-child { border-bottom: none !important; }
  body.page-bewertung .af-price-mobile .af-price-label {
      font-size: 13px !important;
      font-weight: bold !important;
      color: #0c3762 !important;
  }
  body.page-bewertung .af-price-mobile .af-price-val {
      font-size: 22px !important;
      font-weight: bold !important;
      color: #0c3762 !important;
      white-space: nowrap !important;
  }
  /* Fachlicher Gewährleistungs-/Garantie-Hinweis (Jochen 17.06.): Desktop zeigt ihn
     per Info-Icon-Tooltip, mobil kein :hover → sichtbar in der Box. Der gelieferte
     $infoText bringt eigene Inline-font-size mit; hier nur Rahmen + Farbe. */
  body.page-bewertung .af-price-mobile .af-price-hint {
      padding: 12px 14px !important;
      border-top: 1px solid #d4e2f0 !important;
      background: #f6fafe !important;
      color: #0c3762 !important;
      line-height: 1.4 !important;
  }

  /* ===== Moderne, touch-taugliche Bedienelemente (Jochen 16.06.) ===== */
  /* Aufklapp-Header "[+] …" als echte Buttons (waren mickrige Text-Links, kaum
     antippbar) — volle Breite, gerundet, mit Schatten + Active-Feedback. */
  body.page-bewertung .asBlockHeaderLink {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 8px 0 !important;
      padding: 14px 16px !important;
      background: #f0f5fb !important;
      border: 1px solid #cdddea !important;
      border-radius: 10px !important;
      color: #023365 !important;
      font-size: 15px !important;
      font-weight: bold !important;
      text-align: left !important;
      text-decoration: none !important;
      box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  }
  body.page-bewertung .asBlockHeaderLink:active { background: #e2ecf6 !important; }

  /* Selects + Textfelder: abgerundet, gerahmt, grosszuegig, leichter Schatten. */
  body.page-bewertung select,
  body.page-bewertung input[type="text"],
  body.page-bewertung input[type="number"],
  body.page-bewertung input[type="email"],
  body.page-bewertung input[type="tel"] {
      border: 1px solid #cdddea !important;
      border-radius: 10px !important;
      padding: 12px 14px !important;
      font-size: 16px !important;
      background-color: #ffffff !important;
      color: #023365 !important;
      box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  }

  /* Checkboxen groesser + Marken-Akzentfarbe; Ausstattungs-Zeilen als Tap-Flaeche. */
  body.page-bewertung input[type="checkbox"] {
      width: 20px !important;
      height: 20px !important;
      accent-color: #023365 !important;
      vertical-align: middle !important;
      margin: 0 10px 0 0 !important;
  }
  body.page-bewertung .asCheckBoxEx {
      display: flex !important;
      align-items: center !important;
      padding: 9px 2px !important;
      font-size: 15px !important;
      border-bottom: 1px solid #eef2f7 !important;
  }

  /* km-Zaehler-Spinner (winzige Pfeil-Bilder) mobil raus — auf dem Handy tippt man
     die Laufleistung direkt ein. #price_container-Scope schlaegt die Phase-1b-Regel. */
  body.page-bewertung #price_container table.spinBtn,
  body.page-bewertung table.spinBtn { display: none !important; }

  /* Es gibt ZWEI km-Spinner-Varianten: table.spinBtn (images/test.PNG, oben) und
     — die tatsaechlich gerenderte — zwei klassenlose <td> mit den Bildern
     Bilder/laufleistung-erhoehen_*.jpg / -verringern_*.jpg (calcutil.php ~3146,
     im #as_container). Letztere wurde von der spinBtn-Regel NICHT getroffen
     (visuell verifiziert 17.06.: Spinner blieb unter dem km-Feld sichtbar).
     Bilder direkt ausblenden + die enthaltende Zelle per :has() (sonst bleibt im
     #as_container ein leerer display:block-Block stehen). src-Praefix-Match deckt
     _0/_1 (Hover-Wechsel) ab. */
  body.page-bewertung img[src*="laufleistung-erhoehen"],
  body.page-bewertung img[src*="laufleistung-verringern"] { display: none !important; }
  body.page-bewertung #as_container td:has(> img[src*="laufleistung-erhoehen"]),
  body.page-bewertung #as_container td:has(> img[src*="laufleistung-verringern"]) {
      display: none !important;
  }

  /* Fokuscode-/Trim-Auswahl (z.B. Ambition/Attraction/S line) als tappbare Karten-
     Zeilen statt duenner Text-Links. Legacy-Rahmen/Tabellen-Look neutralisieren. */
  body.page-bewertung #fokuscodes_container,
  body.page-bewertung #fokuscodes_container table,
  body.page-bewertung #fokuscodes_container tbody,
  body.page-bewertung #fokuscodes_container tr,
  body.page-bewertung #fokuscodes_container td {
      display: block !important;
      border: none !important;
      background: none !important;
      padding: 0 !important;
      width: auto !important;
  }
  body.page-bewertung #fokuscodes_container a {
      display: block !important;
      box-sizing: border-box !important;
      margin: 6px 0 !important;
      padding: 13px 16px !important;
      background: #f0f5fb !important;
      border: 1px solid #cdddea !important;
      border-radius: 10px !important;
      color: #023365 !important;
      font-size: 15px !important;
      font-weight: bold !important;
      text-decoration: none !important;
      box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  }
  body.page-bewertung #fokuscodes_container a:active { background: #e2ecf6 !important; }

  /* Toolbar (Druck | Bewertung übernehmen | Notizen): mobil als MODERNE Text-Buttons
     (nicht die Desktop-Bild-Buttons; Jochen 17.06.), Druck entfällt. Zeile als
     Flex-SPALTE → Buttons voll-breit untereinander. Toolbar-Tabelle = die mit dem
     druckansicht-Bild (Pfad trifft NUR sie, nicht die äußere Preis-Tabelle). */
  body.page-bewertung #price_container table:has(> tbody > tr > td > img[src*="druckansicht"]) tr {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
  }
  /* Druck-Zelle + leere Spacer-Zellen (5%) raus. */
  body.page-bewertung #price_container td:has(> img[src*="druckansicht"]),
  body.page-bewertung #price_container table:has(> tbody > tr > td > img[src*="druckansicht"]) td[style*="width: 5%"] {
      display: none !important;
  }
  /* Desktop-Bild-Buttons raus, Mobile-Text-Labels rein. */
  body.page-bewertung #price_container img[src*="bewertung_uebernehmen"],
  body.page-bewertung #price_container img[src*="bewertung_speichern"],
  body.page-bewertung #price_container img[src*="Notizen_bearbeiten"] {
      display: none !important;
  }
  body.page-bewertung #price_container .af-toolbtn-label { display: inline !important; }
  /* „Bewertung übernehmen/speichern" (onclick-TD) = primärer Button (blau). */
  body.page-bewertung #price_container td:has(> img[src*="bewertung_uebernehmen"]),
  body.page-bewertung #price_container td:has(> img[src*="bewertung_speichern"]) {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      text-align: center !important;
      padding: 14px !important;
      background: #023365 !important;
      color: #ffffff !important;
      font-size: 16px !important;
      font-weight: bold !important;
      border-radius: 8px !important;
      cursor: pointer !important;
  }
  /* „Notizen bearbeiten" (<a> im TD) = sekundärer Button (hell, gerahmt). */
  body.page-bewertung #price_container td:has(a img[src*="Notizen_bearbeiten"]) > a {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      text-align: center !important;
      padding: 14px !important;
      background: #eff5fc !important;
      color: #023365 !important;
      border: 1px solid #023365 !important;
      font-size: 16px !important;
      font-weight: bold !important;
      border-radius: 8px !important;
      text-decoration: none !important;
  }

  /* „Individuelle Fahrzeugdaten"-Aufklapp-Toggle mobil weg: der Inhalt (Farbe/km/…)
     ist mobil ohnehin dauerhaft offen → der Toggle ist ein No-op (Jochen 17.06.).
     Nur DIESEN Header treffen (per onclick), die anderen [+]-Blöcke bleiben. */
  body.page-bewertung a.asBlockHeaderLink[onclick*="Individuelle_Fahrzeugdaten"] {
      display: none !important;
  }

  /* Leere <br>-Spacer im Preisbereich (Legacy-Abstandshalter unter der Karte)
     mobil raus — sie liessen ~70px Luecke vor dem Copyright. Die Preiskarte
     nutzt Tabellenzeilen, KEINE <br>, bleibt also unberuehrt. */
  body.page-bewertung #price_container br {
      display: none !important;
  }
}

/* ---- Echtes Handy (<=600px): Bedienelemente full-width & touch-tauglich ---- */
@media (max-width: 600px) {
  body.page-bewertung select,
  body.page-bewertung input[type="text"],
  body.page-bewertung input[type="number"],
  body.page-bewertung input[type="email"],
  body.page-bewertung input[type="tel"],
  body.page-bewertung input[type="submit"],
  body.page-bewertung button {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      font-size: 16px !important;   /* >=16px verhindert iOS-Auto-Zoom beim Fokus */
      margin: 5px 0 !important;
      padding: 12px 14px !important;   /* modern + groessere Tap-Flaeche */
  }

  /* Lead-Werbung: das 2-spaltige Grid (Nachname / Vorname / Telefon / E-Mail)
     auf dem Handy auf EINE Spalte → alle Felder untereinander. Trifft den
     Grid-Container ueber seine af-lead-Inputs (kein PHP-Eingriff noetig). */
  body.page-bewertung div:has(> label > input[id^="af-lead-"]) {
      grid-template-columns: 1fr !important;
  }
}