/* ---------------------------------------------------------------
   THEME-VARIABLEN: alle Anpassungen hier oben.
   Kaskade: WordPress-Theme-Preset  →  eigene Variable  →  Fallback
   Fallback-Farben = rpmdepot Design-System (--rpm-*, siehe
   Technology/System/design-system.md): Brand #1d9ff0, Ink/Link #3077d0,
   Neutrals #1f2933/#6b7280/#e2e2e2/#f7f8f9. Behutsam angewandt: nur die
   Farb-Tokens auf DS gezogen — Layout, Radius und Schrift unverändert.
   Ampel bewusst NICHT auf DS-success/warning-500 gezogen: die hellen
   Tint-Flächen unterschreiten damit die AA-Kontrastschwelle → lesbare
   Grün-/Amber-Töne beibehalten, nur Rot auf DS-danger #c8102e.
   --------------------------------------------------------------- */
.rpmr {
  --rpmr-primary:      var(--wp--preset--color--primary,   var(--rechner-primary,   #1d9ff0));
  --rpmr-primary-dark: var(--wp--preset--color--secondary, var(--rechner-primary-dark, #3077d0));
  --rpmr-text:         var(--wp--preset--color--foreground, var(--rechner-text,     #1f2933));
  --rpmr-text-soft:    var(--rechner-text-soft, #6b7280);
  --rpmr-bg:           var(--wp--preset--color--background, var(--rechner-bg,       #ffffff));
  --rpmr-surface:      var(--rechner-surface, #f7f8f9);
  --rpmr-border:       var(--rechner-border, #e2e2e2);
  --rpmr-ok:           var(--rechner-ok,   #1a7f37);
  --rpmr-ok-bg:        var(--rechner-ok-bg, #e6f4ea);
  --rpmr-warn:         var(--rechner-warn, #c8102e);
  --rpmr-warn-bg:      var(--rechner-warn-bg, #fdecea);
  --rpmr-mid:          var(--rechner-mid, #8a5a00);
  --rpmr-mid-bg:       var(--rechner-mid-bg, #fdf3d7);
  --rpmr-tire:         var(--rechner-tire, #383d43);
  --rpmr-rim:          var(--rechner-rim,  #cfd6dc);
  --rpmr-radius:       var(--rechner-radius, 0);   /* kantig (DS/House-Style) */
  /* Schriftgrößen bewusst fix (nicht vom Theme geerbt), damit die Seite wie standalone aussieht */
  --rpmr-fs:           var(--rechner-fs, 16px);
  --rpmr-fs-small:     var(--rechner-fs-small, 13.5px);

  color: var(--rpmr-text);
  font-size: var(--rpmr-fs);
  line-height: 1.55;
  max-width: 900px;
  margin: 0 auto;
  padding: .5rem 1rem 2rem;
  box-sizing: border-box;
}
.rpmr *, .rpmr *::before, .rpmr *::after { box-sizing: border-box; }

/* ---- Typografie ---- */
/* DS-Eyebrow über der H1 (Brand-Blau, Versal) */
.rpmr-eyebrow {
  margin: 0 0 .5rem; padding: 0;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rpmr-primary-dark);
}
.rpmr h1 { font-size: clamp(1.45rem, 3.5vw, 2rem); line-height: 1.25; margin: 0 0 .75rem; }
.rpmr h2 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); margin: 2.2rem 0 .6rem; }
.rpmr p  { margin: 0 0 .9rem; }
.rpmr a  { color: var(--rpmr-primary-dark); }
.rpmr .rpmr-muted { color: var(--rpmr-text-soft); font-size: var(--rpmr-fs-small); }

/* ---- Rechner-Karte (DS-Karte mit dunklem Kopfband) ---- */
.rpmr-tool {
  background: var(--rpmr-bg);
  border: 1px solid var(--rpmr-border);
  border-radius: 0;
  padding: 0;
  margin: 1.25rem 0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(11,14,17,.08);
}
/* Dunkles DS-Akzentband (#0e1a29) — brandet den Konfigurator, blauer Glow + Gold-Kante */
.rpmr-tool__head {
  position: relative;
  background:
    radial-gradient(120% 140% at 12% -20%, rgba(29,159,240,.24), transparent 60%),
    #0e1a29;
  padding: .95rem 1.15rem;
  border-bottom: 2px solid #fbbc04;
}
.rpmr-tool__eyebrow {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #7cc6f7; margin-bottom: .15rem;
}
.rpmr-tool__title {
  display: block; color: #f6f9fc; font-weight: 600; font-size: .98rem; line-height: 1.35;
}
.rpmr-tool__body { padding: 1rem; }
.rpmr-field { margin-bottom: 1rem; }
.rpmr label, .rpmr legend { font-weight: 600; font-size: var(--rpmr-fs-small); display: block; margin-bottom: .3rem; }
.rpmr fieldset legend {
  float: left;                 /* aus dem Fieldset-Rand lösen → obere Border laeuft durch */
  width: calc(100% + 1.6rem);  /* + horizontales Fieldset-Padding (.8rem je Seite) */
  margin: 0 -.8rem .8rem;      /* Unterlinie randbündig bis an die Kartenkanten */
  padding: 0 .8rem .5rem;      /* Text bleibt bündig mit den Feldern */
  border-bottom: 1px solid var(--rpmr-border);
}
.rpmr fieldset legend + * { clear: both; }
.rpmr select {
  width: 100%;
  min-height: 44px;               /* touch-freundlich */
  padding: .5rem .6rem;
  font-size: 1rem;
  color: var(--rpmr-text);
  background: var(--rpmr-bg);
  border: 1px solid var(--rpmr-border);
  border-radius: calc(var(--rpmr-radius) - 4px);
}
.rpmr select:focus { outline: 2px solid var(--rpmr-primary); outline-offset: 1px; }

.rpmr-sizes { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 620px) { .rpmr-sizes { grid-template-columns: 1fr 1fr; } }
.rpmr fieldset {
  border: 1px solid var(--rpmr-border);
  border-radius: max(0px, calc(var(--rpmr-radius) - 2px));
  background: var(--rpmr-bg);
  padding: .7rem .8rem .9rem;
  margin: 0;
  min-width: 0;
}
.rpmr-size-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.rpmr-size-row > div { display: flex; flex-direction: column; }
.rpmr-size-row label { font-weight: 400; color: var(--rpmr-text-soft); margin-bottom: .2rem; flex: 1; }
.rpmr-size-row select { margin-top: auto; }
.rpmr .rpmr-fzg-hinweis { margin-top: .8rem; }
.rpmr .rpmr-jump { margin: 1.1rem 0 0; }
#rpmr-empfehlungen { scroll-margin-top: 90px; }  /* Platz für Sticky-Header des Themes */

/* ---- Ergebnis ---- */
.rpmr-verdict {
  display: flex; align-items: flex-start; gap: .6rem;
  border-radius: max(0px, calc(var(--rpmr-radius) - 2px));
  padding: .7rem .9rem;
  margin: 1rem 0 .9rem;
  font-weight: 600;
}
.rpmr-verdict > span:last-child { font-size: 1.05rem; line-height: 1.4; }
.rpmr-verdict .rpmr-verdict-icon { font-size: 1.05rem; line-height: 1.4; flex: none; }
.rpmr-verdict small { display: block; font-weight: 400; font-size: .85rem; line-height: 1.5; margin-top: .15rem; }
.rpmr-verdict--ok   { background: var(--rpmr-ok-bg);   color: var(--rpmr-ok);   border: 1px solid currentColor; }
.rpmr-verdict--warn { background: var(--rpmr-warn-bg); color: var(--rpmr-warn); border: 1px solid currentColor; }
.rpmr-verdict--mid  { background: var(--rpmr-mid-bg);  color: var(--rpmr-mid);  border: 1px solid currentColor; }

.rpmr-results { width: 100%; border-collapse: collapse; background: var(--rpmr-bg); border: 1px solid var(--rpmr-border); border-radius: max(0px, calc(var(--rpmr-radius) - 2px)); overflow: hidden; }
.rpmr-results th, .rpmr-results td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid var(--rpmr-border); font-size: .95rem; }
.rpmr-results tr:last-child th, .rpmr-results tr:last-child td { border-bottom: 0; }
.rpmr-results thead th { background: var(--rpmr-surface); font-size: var(--rpmr-fs-small); }
.rpmr-results td.rpmr-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpmr-results td#rpmr-boden, .rpmr-results td#rpmr-tacho { white-space: normal; }
.rpmr-results .rpmr-plus  { color: var(--rpmr-ok); }
.rpmr-results .rpmr-minus { color: var(--rpmr-warn); }
.rpmr-results .rpmr-mitte { color: var(--rpmr-mid); }
.rpmr-table-scroll { overflow-x: auto; margin-top: 1.4rem; }
.rpmr-faq-body .rpmr-table { width: 100%; border-collapse: collapse; background: var(--rpmr-bg); border: 1px solid var(--rpmr-border); margin: .9rem 0; }
.rpmr-faq-body .rpmr-table th, .rpmr-faq-body .rpmr-table td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid var(--rpmr-border); font-size: .95rem; }
.rpmr-faq-body .rpmr-table thead th { background: var(--rpmr-surface); font-size: var(--rpmr-fs-small); }
.rpmr-faq-body .rpmr-table tr:last-child td { border-bottom: 0; }
.rpmr-results th[scope="row"] { width: 32%; hyphens: auto; }
@media (max-width: 480px) {
  .rpmr-results th, .rpmr-results td { padding: .45rem .5rem; font-size: 13.5px; }
}

/* ---- Visualisierung ---- */
.rpmr-viz-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 1.4rem 0 .5rem; }
.rpmr-viz-head h2 { margin: 0; }
.rpmr-toggle { display: inline-flex; border: 1px solid var(--rpmr-border); border-radius: 0; overflow: hidden; background: var(--rpmr-bg); }
.rpmr-toggle button {
  border: 0; background: transparent; color: var(--rpmr-text-soft);
  padding: .45rem .9rem; font-size: var(--rpmr-fs-small); cursor: pointer; min-height: 40px;
}
.rpmr-toggle button[aria-pressed="true"] { background: var(--rpmr-primary-dark); color: #fff; font-weight: 600; }
.rpmr-viz-box { background: var(--rpmr-bg); border: 1px solid var(--rpmr-border); border-radius: max(0px, calc(var(--rpmr-radius) - 2px)); padding: .6rem; }
.rpmr-viz-box svg { display: block; width: 100%; height: auto; }
.rpmr-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .5rem .3rem 0; font-size: var(--rpmr-fs-small); }
.rpmr-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.rpmr-chip { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex: none; }

/* ---- Empfehlungen ---- */
.rpmr-reco-group { margin-bottom: 1.1rem; }
.rpmr-reco-group h3 { font-size: 1rem; margin: 1.4rem 0 .5rem; }
.rpmr-reco-group:first-child h3 { margin-top: .4rem; }
.rpmr-reco-list { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.rpmr-reco-list button {
  border: 1px solid var(--rpmr-border); background: var(--rpmr-bg); color: var(--rpmr-text);
  border-radius: 0; padding: .45rem .8rem; font-size: var(--rpmr-fs-small);
  cursor: pointer; min-height: 44px;
}
.rpmr-reco-list button:hover { border-color: var(--rpmr-primary); }
.rpmr-reco-list button.rpmr-active { background: var(--rpmr-primary-dark); border-color: var(--rpmr-primary-dark); color: #fff; }
.rpmr-reco-list b { font-weight: 600; }
.rpmr-reco-list .rpmr-reco-gelb { color: var(--rpmr-mid); font-weight: 600; }
.rpmr-reco-list button.rpmr-active .rpmr-reco-gelb { color: #ffe08a; }

/* Fokus-Ringe für Tastaturbedienung (Themes resetten Browser-Defaults oft) */
.rpmr button:focus-visible, .rpmr summary:focus-visible, .rpmr a:focus-visible {
  outline: 2px solid var(--rpmr-primary); outline-offset: 2px;
}

/* Aktions-Buttons: Teilen, Drucken, Felgen-CTA. Mobil gestapelt und zentriert, ab 620 px nebeneinander */
.rpmr .rpmr-actions { margin: 1.6rem 0 .45rem; display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.rpmr .rpmr-actions + .rpmr-muted { text-align: center; font-size: 15px; max-width: 640px; margin-left: auto; margin-right: auto; }
.rpmr-actions button, .rpmr a.rpmr-cta-btn {
  width: 100%; min-height: 44px; padding: .5rem 1.2rem; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--rpmr-primary-dark); color: var(--rpmr-primary-dark);
  background: var(--rpmr-bg); border-radius: 0;
  font-size: 1rem; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.rpmr-actions button:hover { background: var(--rpmr-surface); }
.rpmr-actions button.rpmr-kopiert { border-color: var(--rpmr-ok); color: var(--rpmr-ok); }
.rpmr a.rpmr-cta-btn {
  background: var(--rpmr-primary-dark); border-color: var(--rpmr-primary-dark);
  color: #fff !important; font-weight: 700;
  text-decoration: none !important;
}
.rpmr a.rpmr-cta-btn:hover { background: var(--rpmr-primary); }
@media (min-width: 620px) { .rpmr-actions button, .rpmr a.rpmr-cta-btn { width: auto; } }

.rpmr-verdict .rpmr-verdict-icon { font-weight: 700; }
.rpmr-verdict small a { color: inherit; text-decoration: underline; }

/* ---- Hover-States: einheitliches Feedback auf allen interaktiven Elementen ---- */
/* Cursor-Pointer erzwingen: das Shoptimizer-Theme resettet den Hand-Cursor auf
   Buttons/Links im Content, daher hier explizit + !important fuer alle klickbaren
   Elemente (CTA, Toggle, Groessen-Pills, FAQ-Summary, Textlinks). */
.rpmr a[href],
.rpmr-verdict small a,
.rpmr-toggle button,
.rpmr-reco-list button,
.rpmr-actions button,
.rpmr-faq summary { cursor: pointer !important; }
/* Ganze Button-Gruppen inkl. Zwischenraeume auf Pointer, damit der Cursor beim
   Wandern ueber eine Button-Reihe nicht zwischen Hand und Pfeil springt (Luecken). */
.rpmr-actions, .rpmr-toggle, .rpmr-reco-list, .rpmr-reco-list li { cursor: pointer; }
/* Textlinks (Intro, About, Disclaimer, FAQ, Sprungmarke) — Unterstreichung erst bei Hover.
   .rpmr-cta-btn bleibt unberuehrt (text-decoration:none !important). */
.rpmr a:hover { text-decoration: underline; }
/* Verdict-CTA ist per Default unterstrichen (Sichtbarkeit im farbigen Kasten) → Hover kehrt um. */
.rpmr-verdict small a:hover { text-decoration: none; }
/* View-Umschalter: nicht-aktive Buttons bekommen Hover-Flaeche. */
.rpmr-toggle button:not([aria-pressed="true"]):hover { background: var(--rpmr-surface); color: var(--rpmr-text); }
/* Groessen-Pills der Empfehlungen: deutlichere Hover-Flaeche (aktive Auswahl unberuehrt). */
.rpmr-reco-list button:not(.rpmr-active):hover { background: var(--rpmr-surface); border-color: var(--rpmr-primary); }
/* FAQ-Akkordeon: Hover auf der Summary-Zeile. */
.rpmr-faq summary:hover { background: var(--rpmr-surface); color: var(--rpmr-primary-dark); }

/* ---- Druckansicht ---- */
.rpmr-print-head { display: none; }
@media print {
  /* WordPress-Theme drumherum ausblenden (Header, Footer, Navigation) */
  header, footer, nav, aside, #masthead, #colophon, #wpadminbar,
  .site-header, .site-footer, .main-navigation, .storefront-handheld-footer-bar,
  .top-bar, .topbar-wrapper, .col-full-nav, .secondary-navigation,
  .header-widget-region, .below-content, #text-38, .wpml-ls,
  #google-business-reviews-rating, .google-business-reviews-rating, #cookie-notice,
  .rpmr-jump, .rpmr-actions, .rpmr-actions + .rpmr-muted, .rpmr-cta, .rpmr-toggle, .rpmr-faq,
  .rpmr-eyebrow, .rpmr-tool__head { display: none !important; }
  .rpmr { max-width: 100%; padding: 0; }
  .rpmr-print-head {
    display: flex !important; align-items: center; gap: .8rem;
    border-bottom: 2px solid #000; padding-bottom: .5rem; margin-bottom: 1rem;
  }
  .rpmr-print-head img { width: 56px; height: 56px; }
  .rpmr h1 { font-size: 1.3rem; }
  .rpmr-tool { border: 1px solid #999; background: #fff; }
  /* Grafik im Druck: kleiner und in sparsamen Grautönen statt voller Farbflächen */
  .rpmr { --rpmr-tire: #d9d9d9; --rpmr-rim: #f4f4f4; --rpmr-primary: #8a8a8a; --rpmr-primary-dark: #555555; }
  .rpmr-viz-box svg { max-height: 45mm; width: auto; margin: 0 auto; }
  .rpmr-verdict, .rpmr-results, .rpmr-viz-box, .rpmr-reco-group { break-inside: avoid; }
  .rpmr-verdict { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Baureihen-Pill neben dem Auswahl-Label, per Flex sauber auf einer Linie zentriert */
.rpmr label[for="rpmr-fzg"] { display: flex; align-items: center; gap: .45rem; }
.rpmr-pill {
  display: inline-block; padding: .1rem .55rem;
  background: var(--rpmr-primary-dark); color: #fff;
  border-radius: 0; font-size: .75rem; font-weight: 700; line-height: 1.4;
}
.rpmr-pill[hidden] { display: none; }

/* Abschluss-CTA am Seitenende: zentriert, mit Luft zur FAQ darüber */
.rpmr .rpmr-cta { margin: 0 0 .45rem; text-align: center; }
.rpmr .rpmr-faq + .rpmr-cta { margin-top: 1.6rem; }

/* ---- FAQ ---- */
/* FAQ-Akkordeon nach rpmdepot DS (vgl. .rpm-faq der Landingpages):
   kantig, 1px-Rahmen + 3px Brand-Akzentkante links, +/– Text-Icon rechts oben in Brand-Blau. */
.rpmr-faq details {
  background: var(--rpmr-bg);
  border: 1px solid var(--rpmr-border);
  border-left: 3px solid var(--rpmr-primary);
  border-radius: 0;
  margin: 0 0 12px;
}
.rpmr-faq summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 18px 48px 18px 22px;
  font-weight: 700; font-size: 16px; color: var(--rpmr-text);
}
.rpmr-faq summary::-webkit-details-marker { display: none; }
.rpmr-faq summary h3 { display: inline; margin: 0; font: inherit; }
.rpmr-faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 15px;
  font-size: 22px; font-weight: 400; color: var(--rpmr-primary);
}
.rpmr-faq details[open] summary::after { content: "\2013"; }
.rpmr-faq .rpmr-faq-body { padding: 0 22px 20px; color: var(--rpmr-text); line-height: 1.65; font-size: 15px; }
.rpmr-faq .rpmr-faq-body p:last-child { margin-bottom: 0; }
.rpmr-faq a { color: var(--rpmr-primary-dark); font-weight: 600; }

/* ---- Schluss-Disclaimer ---- */
.rpmr-disclaimer {
  margin-top: 2.2rem; padding: 1rem 1.1rem;
  border-left: 3px solid var(--rpmr-border);
  background: var(--rpmr-surface);
  border-radius: 0 max(0px, calc(var(--rpmr-radius) - 2px)) max(0px, calc(var(--rpmr-radius) - 2px)) 0;
  font-size: var(--rpmr-fs-small); color: var(--rpmr-text-soft);
}
.rpmr-disclaimer p { margin: 0 0 .5rem; }
.rpmr-disclaimer p:last-child { margin-bottom: 0; }