/* ============================================================================
   rompassvergleich.de — Stylesheet
   ----------------------------------------------------------------------------
   Eine Datei, kein Build. Klassenpraefix rv-.

   Gestaltungsidee (KONZEPT.md Abschnitt 5): ein Testmagazin, kein Reiseportal.
   Die Zahlen sind die Hauptsache. Der einzige auffaellige Baustein ist der
   Rechenzettel (Abschnitt 6); alles andere bleibt ruhig: Nachtblau als Tinte,
   kuehles Grau als Flaeche, Petrol fuer Links und Knoepfe, Ocker nur fuer
   Hervorhebungen. Bewusst anders als rompass.de (Rot, Creme, Serife, runde
   Karten mit Schatten, Foto-Hero).

     1  Schrift und Tokens        6  Rechenzettel
     2  Grundlagen                7  Urteile und Urteilsliste
     3  Kopf und Fuss             8  Attraktions-Matrix
     4  Abschnitte und Raster     9  Artikelseiten (Lohnt sich …)
     5  Startseiten-Kopf         10  FAQ, Knoepfe, Hilfsklassen
   ========================================================================== */

/* -- 1 Schrift und Tokens ------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --rv-tinte:   #17223b;
  --rv-text:    #2b3448;
  --rv-grau:    #5b6477;
  --rv-flaeche: #eef1f5;
  --rv-linie:   #d3d9e2;
  --rv-weiss:   #ffffff;
  --rv-petrol:  #1d6b68;
  --rv-petrol-d:#145250;
  --rv-ocker:   #d39a2c;
  --rv-ocker-h: #fbf0d9;
  --rv-gruen:   #2b7a4b;
  --rv-ziegel:  #9b3d2e;
  --rv-blass:   #7b8496;

  --rv-r:    4px;
  --rv-s1: 4px;  --rv-s2: 8px;  --rv-s3: 12px; --rv-s4: 16px;
  --rv-s5: 24px; --rv-s6: 32px; --rv-s7: 48px; --rv-s8: 72px;

  --rv-breite: 1120px;
  --rv-text-breite: 680px;

  --rv-schrift: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* -- 2 Grundlagen --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--rv-schrift);
  font-size: 17px;
  line-height: 1.62;
  color: var(--rv-text);
  background: var(--rv-weiss);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  color: var(--rv-tinte);
  font-stretch: 82%;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 var(--rv-s4);
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem); }
h3 { font-size: 1.22rem; font-stretch: 88%; line-height: 1.2; }
p  { margin: 0 0 var(--rv-s4); }

a { color: var(--rv-petrol); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rv-petrol-d); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--rv-ocker); outline-offset: 2px; }

.rv-skip { position: absolute; left: -9999px; }
.rv-skip:focus { left: var(--rv-s4); top: var(--rv-s4); z-index: 10; background: var(--rv-weiss); padding: var(--rv-s2) var(--rv-s3); }
.rv-nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -- 3 Kopf und Fuss ------------------------------------------------------ */
.rv-kopf { border-bottom: 1px solid var(--rv-linie); background: var(--rv-weiss); }
.rv-kopf__innen {
  max-width: var(--rv-breite); margin: 0 auto; padding: var(--rv-s3) var(--rv-s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--rv-s4);
}
.rv-marke { display: inline-flex; align-items: center; gap: var(--rv-s2); color: var(--rv-tinte); text-decoration: none; }
.rv-marke:hover { color: var(--rv-tinte); }
.rv-marke__wort { font-size: 1.12rem; font-stretch: 85%; font-weight: 520; letter-spacing: -0.01em; }
.rv-marke__wort b, .rv-fuss__marke b { font-weight: 800; }
.rv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--rv-s5); }
.rv-nav a { color: var(--rv-text); text-decoration: none; font-weight: 560; font-size: .97rem; padding: var(--rv-s1) 0; border-bottom: 2px solid transparent; }
.rv-nav a:hover { color: var(--rv-tinte); border-bottom-color: var(--rv-linie); }
.rv-nav a[aria-current="page"] { color: var(--rv-tinte); border-bottom-color: var(--rv-ocker); }

.rv-fuss { background: var(--rv-tinte); color: #c9d0dc; margin-top: var(--rv-s8); }
.rv-fuss__innen { max-width: var(--rv-breite); margin: 0 auto; padding: var(--rv-s7) var(--rv-s4); display: grid; gap: var(--rv-s4); }
.rv-fuss__marke { color: var(--rv-weiss); font-size: 1.15rem; font-stretch: 85%; margin: 0; }
.rv-fuss__text { max-width: 62ch; font-size: .93rem; margin: 0; }
.rv-fuss__links { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--rv-s5); font-size: .93rem; }
.rv-fuss a { color: var(--rv-weiss); }

/* -- 4 Abschnitte und Raster ---------------------------------------------- */
.rv-wrap { max-width: var(--rv-breite); margin: 0 auto; padding: 0 var(--rv-s4); }
.rv-abschnitt { padding: var(--rv-s8) 0 0; }
.rv-abschnitt__kopf { max-width: var(--rv-text-breite); margin-bottom: var(--rv-s6); }
.rv-abschnitt__kopf p { color: var(--rv-grau); margin: 0; }
.rv-flaeche { background: var(--rv-flaeche); padding-bottom: var(--rv-s8); margin-top: var(--rv-s8); }
.rv-text { max-width: var(--rv-text-breite); }

/* -- 5 Startseiten-Kopf --------------------------------------------------- */
.rv-start {
  max-width: var(--rv-breite); margin: 0 auto; padding: var(--rv-s7) var(--rv-s4) 0;
  display: grid; gap: var(--rv-s6); align-items: start;
}
@media (min-width: 900px) {
  .rv-start { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--rv-s7); padding-top: var(--rv-s8); }
}
.rv-start h1 { max-width: 13ch; }
.rv-vorspann { font-size: 1.14rem; color: var(--rv-text); max-width: 46ch; }
.rv-kurz {
  border-left: 4px solid var(--rv-ocker); padding: var(--rv-s1) 0 var(--rv-s1) var(--rv-s4);
  margin: var(--rv-s5) 0 0; max-width: 52ch;
}
.rv-kurz p { margin: 0 0 var(--rv-s2); }
.rv-kurz p:last-child { margin: 0; }
.rv-kurz strong { color: var(--rv-tinte); }

/* -- 6 Rechenzettel ------------------------------------------------------- */
/* Ein Kassenzettel: weisses Papier auf grauem Grund, gestrichelte Summen-
   linie, gezackte Unterkante. Die Zahlen stehen rechtsbuendig in
   Tabellenziffern, damit man die Spalten von oben nach unten lesen kann. */
.rv-zettel {
  margin: 0; background: var(--rv-weiss); color: var(--rv-text);
  border: 1px solid var(--rv-linie); border-bottom: 0;
  padding: var(--rv-s5) var(--rv-s5) var(--rv-s6);
  position: relative; max-width: 560px;
  --zacke: 9px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--zacke)) no-repeat,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--zacke) * 2) var(--zacke) repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--zacke)) no-repeat,
                conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--zacke) * 2) var(--zacke) repeat-x;
}
.rv-start .rv-zettel { background: var(--rv-weiss); box-shadow: none; }
.rv-zettel-buehne { background: var(--rv-flaeche); padding: var(--rv-s5); border-radius: var(--rv-r); }
.rv-zettel__titel { font-size: 1.08rem; font-stretch: 85%; margin: 0 0 var(--rv-s4); padding-bottom: var(--rv-s3); border-bottom: 2px solid var(--rv-tinte); }
.rv-zettel__tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rv-zettel__tabelle thead th + th { width: 6.5rem; padding-left: var(--rv-s3); }
@media (max-width: 520px) {
  .rv-zettel-buehne { padding: var(--rv-s2); margin: 0 calc(-1 * var(--rv-s2)); }
  .rv-zettel { padding: var(--rv-s4) var(--rv-s4) var(--rv-s5); }
  .rv-zettel__tabelle { font-size: .86rem; }
  .rv-zettel__tabelle thead th + th { width: 4.9rem; }
  .rv-zettel__tabelle td { padding-left: var(--rv-s2); }
}
.rv-zettel__tabelle th, .rv-zettel__tabelle td { padding: 7px 0; vertical-align: top; text-align: left; font-weight: 400; }
.rv-zettel__tabelle td { padding-left: var(--rv-s3); }
.rv-zettel__tabelle thead th { font-size: .8rem; color: var(--rv-grau); font-weight: 560; padding-bottom: var(--rv-s2); }
.rv-zettel__tabelle tbody tr + tr th, .rv-zettel__tabelle tbody tr + tr td { border-top: 1px dotted var(--rv-linie); }
.rv-zahl { text-align: right !important; white-space: nowrap; }
.rv-zettel__extra th { color: var(--rv-grau); }
.rv-zettel__ohne { color: var(--rv-grau); font-size: .85rem; }
.rv-zettel__summen tr:first-child th, .rv-zettel__summen tr:first-child td { border-top: 1.5px dashed var(--rv-tinte) !important; padding-top: var(--rv-s3); font-weight: 700; color: var(--rv-tinte); }
.rv-zettel__pass th, .rv-zettel__pass td { background: var(--rv-ocker-h); font-weight: 700 !important; color: var(--rv-tinte); border-top: 0 !important; }
.rv-zettel__pass th { padding-left: var(--rv-s3) !important; }
.rv-zettel__pass td { padding-right: var(--rv-s3) !important; font-size: 1.05rem; }
.rv-zettel__diff th, .rv-zettel__diff td { padding-top: var(--rv-s3); font-weight: 700; }
.rv-zettel__diff th { font-weight: 560; color: var(--rv-grau); font-size: .85rem; }
.rv-plus  { color: var(--rv-gruen); }
.rv-minus { color: var(--rv-ziegel); }
.rv-zettel__notiz { margin-top: var(--rv-s4); font-size: .88rem; color: var(--rv-grau); line-height: 1.5; }
.rv-zettel__notiz p { margin: 0 0 var(--rv-s2); }

.rv-zettel-reihe { display: grid; gap: var(--rv-s5); margin: var(--rv-s5) 0 var(--rv-s4); background: var(--rv-flaeche); padding: var(--rv-s5); border-radius: var(--rv-r); }
@media (max-width: 520px) { .rv-zettel-reihe { padding: var(--rv-s2); margin-left: calc(-1 * var(--rv-s2)); margin-right: calc(-1 * var(--rv-s2)); } }

/* -- 7 Urteile und Urteilsliste ------------------------------------------- */
.rv-urteil {
  display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: .9rem; line-height: 1.3; padding: 3px 9px 4px 8px;
  border-radius: var(--rv-r); border: 1px solid currentColor; background: var(--rv-weiss);
}
.rv-urteil { align-items: center; }
/* Urteilspunkte als Form, nicht als Zeichen: voll, halb, leer. So bleiben
   sie in jeder Schrift gleich gross, und die Stufe ist auch ohne Farbe
   lesbar. */
.rv-punkt { width: .72em; height: .72em; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.rv-punkt--lohnt   { background: currentColor; }
.rv-punkt--bedingt { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.rv-punkt--selten  { background: transparent; }
.rv-urteil__wer { color: var(--rv-text); font-weight: 560; }
.rv-urteil__wer::after { content: ":"; }
.rv-urteil__stufe { font-weight: 700; }
.rv-urteil--lohnt   { color: var(--rv-gruen); }
.rv-urteil--bedingt { color: #9a6a0e; }
.rv-urteil--selten  { color: var(--rv-blass); }

.rv-liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rv-tinte); }
.rv-eintrag { padding: var(--rv-s5) 0; border-bottom: 1px solid var(--rv-linie); display: grid; gap: var(--rv-s4); }
@media (min-width: 900px) {
  .rv-eintrag { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: var(--rv-s6); }
}
.rv-eintrag__name { margin: 0; font-size: 1.3rem; }
.rv-eintrag__name a { color: inherit; text-decoration: none; }
.rv-eintrag__name a:hover { text-decoration: underline; }
.rv-eintrag__anbieter { color: var(--rv-grau); font-size: .9rem; margin: 2px 0 var(--rv-s2); }
.rv-eintrag__preis { font-size: 1.25rem; font-weight: 720; color: var(--rv-tinte); margin: 0; }
.rv-eintrag__preis small { font-size: .78rem; font-weight: 450; color: var(--rv-grau); display: block; }
.rv-eintrag__urteile { display: grid; gap: var(--rv-s4); }
@media (min-width: 640px) { .rv-eintrag__urteile { grid-template-columns: 1fr 1fr; } }
.rv-eintrag__urteile p { margin: var(--rv-s2) 0 0; font-size: .95rem; }
.rv-eintrag__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--rv-s2) var(--rv-s5); align-items: center; font-size: .9rem; color: var(--rv-grau); }
@media (min-width: 900px) { .rv-eintrag__fuss { grid-column: 2; } }
.rv-eintrag__fuss dl { display: flex; flex-wrap: wrap; gap: var(--rv-s1) var(--rv-s4); margin: 0; }
.rv-eintrag__fuss dl div { display: flex; gap: 5px; }
.rv-eintrag__fuss dt { font-weight: 600; color: var(--rv-text); }
.rv-eintrag__fuss dt::after { content: ":"; }
.rv-eintrag__fuss dd { margin: 0; }
.rv-eintrag__links { display: flex; gap: var(--rv-s4); margin-left: auto; }
.rv-eintrag__links a { font-weight: 600; }

/* -- 8 Attraktions-Matrix ------------------------------------------------- */
.rv-matrix-rahmen { overflow-x: auto; border: 1px solid var(--rv-linie); background: var(--rv-weiss); border-radius: var(--rv-r); }
.rv-matrix { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .92rem; }
.rv-matrix th, .rv-matrix td { padding: 10px 12px; border-bottom: 1px solid var(--rv-linie); text-align: center; }
.rv-matrix thead th { font-stretch: 85%; font-weight: 700; color: var(--rv-tinte); vertical-align: bottom; line-height: 1.2; font-size: .88rem; }
.rv-matrix tbody th { text-align: left; font-weight: 600; color: var(--rv-tinte); white-space: nowrap; }
.rv-matrix th:first-child { position: sticky; left: 0; background: var(--rv-weiss); z-index: 1; text-align: left; box-shadow: 1px 0 0 var(--rv-linie); }
.rv-matrix tbody tr:last-child th, .rv-matrix tbody tr:last-child td { border-bottom: 0; }
.rv-mx { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; position: relative; }
.rv-mx--ja       { background: var(--rv-tinte); }
.rv-mx--wahl     { border: 2px solid var(--rv-tinte); background: linear-gradient(90deg, var(--rv-tinte) 50%, transparent 50%); }
.rv-mx--optional { border: 1.5px solid var(--rv-petrol); width: 16px; height: 16px; }
.rv-mx--optional::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; line-height: 1; color: var(--rv-petrol); }
.rv-mx--nein     { width: 12px; height: 2px; border-radius: 1px; background: #b7bfcc; }
.rv-legende { display: flex; flex-wrap: wrap; gap: var(--rv-s2) var(--rv-s5); list-style: none; padding: 0; margin: var(--rv-s3) 0 0; font-size: .88rem; color: var(--rv-grau); }
.rv-legende .rv-mx { margin-right: 6px; }
.rv-legende li { display: flex; align-items: center; }

/* -- 9 Artikelseiten ------------------------------------------------------ */
.rv-krume { font-size: .88rem; color: var(--rv-grau); margin-bottom: var(--rv-s4); }
.rv-krume a { color: var(--rv-grau); }
.rv-artikel-kopf { max-width: var(--rv-breite); margin: 0 auto; padding: var(--rv-s7) var(--rv-s4) var(--rv-s6); }
.rv-artikel-kopf h1 { max-width: 18ch; }
.rv-urteilskopf { display: grid; gap: var(--rv-s4); margin-top: var(--rv-s5); max-width: 900px; }
@media (min-width: 720px) { .rv-urteilskopf { grid-template-columns: 1fr 1fr; } }
.rv-urteilskopf > div { border-top: 3px solid var(--rv-tinte); padding-top: var(--rv-s3); }
.rv-urteilskopf p { margin: var(--rv-s2) 0 0; }

.rv-artikel { max-width: var(--rv-breite); margin: 0 auto; padding: 0 var(--rv-s4); display: grid; gap: var(--rv-s6); }
@media (min-width: 1000px) {
  .rv-artikel { grid-template-columns: 13rem minmax(0, var(--rv-text-breite)); column-gap: var(--rv-s8); }
}
.rv-inhalt { font-size: .92rem; }
.rv-inhalt p { font-weight: 700; color: var(--rv-tinte); margin-bottom: var(--rv-s2); }
.rv-inhalt ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--rv-linie); }
.rv-inhalt li a { display: block; padding: 5px 0 5px var(--rv-s3); color: var(--rv-text); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.rv-inhalt li a:hover { border-left-color: var(--rv-ocker); color: var(--rv-tinte); }
@media (min-width: 1000px) { .rv-inhalt { position: sticky; top: var(--rv-s5); align-self: start; } }
@media (max-width: 999px) { .rv-inhalt { border: 1px solid var(--rv-linie); padding: var(--rv-s4); border-radius: var(--rv-r); } }

.rv-fliess h2 { margin-top: var(--rv-s7); scroll-margin-top: var(--rv-s4); }
.rv-fliess > h2:first-child { margin-top: 0; }
.rv-fliess ul { padding-left: 1.2em; }
.rv-fliess li { margin-bottom: var(--rv-s2); }

.rv-kasten { background: var(--rv-flaeche); padding: var(--rv-s5); border-radius: var(--rv-r); margin: var(--rv-s5) 0; }
.rv-kasten > :last-child { margin-bottom: 0; }
.rv-kasten h3 { margin-bottom: var(--rv-s2); }

.rv-fakten { display: grid; grid-template-columns: max-content 1fr; gap: var(--rv-s2) var(--rv-s5); margin: 0; }
.rv-fakten dt { font-weight: 650; color: var(--rv-tinte); }
.rv-fakten dd { margin: 0; }
@media (max-width: 560px) { .rv-fakten { grid-template-columns: 1fr; gap: 2px; } .rv-fakten dd { margin-bottom: var(--rv-s3); } }

.rv-alternativen { list-style: none; padding: 0 !important; margin: 0; border-top: 1px solid var(--rv-linie); }
.rv-alternativen li { padding: var(--rv-s4) 0; border-bottom: 1px solid var(--rv-linie); margin: 0 !important; }
.rv-alternativen strong { color: var(--rv-tinte); }

/* -- 10 FAQ, Knoepfe, Hilfsklassen ---------------------------------------- */
.rv-faq details { border-bottom: 1px solid var(--rv-linie); }
.rv-faq details:first-child { border-top: 2px solid var(--rv-tinte); }
.rv-faq summary { cursor: pointer; padding: var(--rv-s4) var(--rv-s6) var(--rv-s4) 0; font-weight: 650; color: var(--rv-tinte); list-style: none; position: relative; }
.rv-faq summary::-webkit-details-marker { display: none; }
.rv-faq summary::after { content: "+"; position: absolute; right: 4px; top: var(--rv-s4); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--rv-petrol); }
.rv-faq details[open] summary::after { content: "−"; }
.rv-faq details > div { padding: 0 0 var(--rv-s4); }

.rv-btn {
  display: inline-block; background: var(--rv-petrol); color: var(--rv-weiss); text-decoration: none;
  font-weight: 650; padding: 11px 18px; border-radius: var(--rv-r); line-height: 1.2;
}
.rv-btn:hover { background: var(--rv-petrol-d); color: var(--rv-weiss); }
.rv-btn--still { background: transparent; color: var(--rv-petrol); box-shadow: inset 0 0 0 1.5px var(--rv-petrol); }
.rv-btn--still:hover { background: var(--rv-petrol); color: var(--rv-weiss); }

.rv-hinweis { font-size: .88rem; color: var(--rv-grau); }

/* Preis-Spans aus den Engine-Helfern (kt_live_price, kt_pass_preis) */
.rv-preis__label { font-weight: 450; font-size: .8em; color: var(--rv-grau); }
.rv-preis--leer::after { content: "Preis folgt"; font-size: .85rem; font-weight: 450; color: var(--rv-grau); }

.rv-recht h2 { font-size: 1.4rem; margin-top: var(--rv-s6); }
.rv-recht h3 { font-size: 1.1rem; margin-top: var(--rv-s5); }
.rv-recht { overflow-wrap: anywhere; }

/* -- 11 Rechner ----------------------------------------------------------- */
.rv-rechner { display: grid; gap: var(--rv-s6); align-items: start; }
@media (min-width: 960px) { .rv-rechner { grid-template-columns: 20rem minmax(0, 1fr); gap: var(--rv-s7); } }
.rv-rechner__form { background: var(--rv-flaeche); border-radius: var(--rv-r); padding: var(--rv-s5); }
@media (min-width: 960px) { .rv-rechner__form { position: sticky; top: var(--rv-s4); } }
.rv-rechner__form fieldset { border: 0; margin: 0 0 var(--rv-s5); padding: 0; }
.rv-rechner__form fieldset:last-of-type { margin-bottom: 0; }
.rv-rechner__form legend { font-weight: 700; color: var(--rv-tinte); margin-bottom: var(--rv-s2); padding: 0; }
.rv-wahl { display: flex; align-items: baseline; gap: var(--rv-s2); padding: 5px 0; cursor: pointer; line-height: 1.35; }
.rv-wahl input { accent-color: var(--rv-petrol); transform: translateY(2px); flex: none; }
.rv-wahl small { margin-left: auto; color: var(--rv-grau); font-size: .82rem; white-space: nowrap; }
.rv-segmente { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rv-segmente label { position: relative; }
.rv-segmente input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rv-segmente span { display: block; text-align: center; padding: 8px 0; border-radius: var(--rv-r); background: var(--rv-weiss); border: 1px solid var(--rv-linie); font-weight: 650; }
.rv-segmente input:checked + span { background: var(--rv-tinte); color: var(--rv-weiss); border-color: var(--rv-tinte); }
.rv-segmente input:focus-visible + span { outline: 3px solid var(--rv-ocker); outline-offset: 2px; }
.rv-rechner__ergebnis[aria-busy="true"] { opacity: .5; transition: opacity .15s; }
.rv-rechner__titel { font-size: 1.35rem; }
.rv-einzeln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-s3); margin-bottom: var(--rv-s5); }
.rv-einzeln > div { border: 1px solid var(--rv-linie); border-radius: var(--rv-r); padding: var(--rv-s3) var(--rv-s4); }
.rv-einzeln > div.ist-aktiv { border: 2px solid var(--rv-tinte); }
.rv-einzeln span { display: block; font-size: .85rem; color: var(--rv-grau); }
.rv-einzeln strong { font-size: 1.4rem; color: var(--rv-tinte); }
.rv-einzeln p { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--rv-grau); }
@media (max-width: 520px) { .rv-einzeln { grid-template-columns: minmax(0, 1fr); } }
.rv-ergebnisse { list-style: none; margin: 0 0 var(--rv-s4); padding: 0; border-top: 2px solid var(--rv-tinte); counter-reset: platz; }
.rv-ergebnis { padding: var(--rv-s4) 0; border-bottom: 1px solid var(--rv-linie); counter-increment: platz; }
.rv-ergebnis__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rv-s2) var(--rv-s4); align-items: baseline; }
.rv-ergebnis__kopf h3 { margin: 0; font-size: 1.15rem; }
.rv-ergebnis__kopf h3::before { content: counter(platz) ". "; color: var(--rv-grau); font-weight: 500; }
.rv-ergebnis__kopf h3 span { font-weight: 450; color: var(--rv-grau); font-size: .9rem; }
.rv-ergebnis__summe { margin: 0; text-align: right; }
.rv-ergebnis__summe strong { font-size: 1.2rem; color: var(--rv-tinte); }
.rv-ergebnis__summe span { display: block; font-size: .85rem; font-weight: 650; }
.rv-ergebnis__zeile { margin: var(--rv-s1) 0 0; font-size: .9rem; color: var(--rv-grau); }
.rv-ergebnis__links { margin: var(--rv-s2) 0 0; display: flex; flex-wrap: wrap; gap: var(--rv-s4); font-size: .92rem; font-weight: 600; }

/* -- 12 Vergleichstabelle, Duell, Fazit ----------------------------------- */
.rv-vergleich { margin: var(--rv-s5) 0; }
.rv-vergleich__titel { font-weight: 700; color: var(--rv-tinte); margin-bottom: var(--rv-s3); font-stretch: 88%; font-size: 1.05rem; }
.rv-vergleich__tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 480px; }
.rv-vergleich__tabelle th, .rv-vergleich__tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--rv-linie); text-align: left; vertical-align: top; }
.rv-vergleich__tabelle thead th { font-size: .82rem; color: var(--rv-grau); font-weight: 600; }
.rv-vergleich__tabelle tbody th { font-weight: 600; color: var(--rv-tinte); }
.rv-vergleich__tabelle tbody th a { color: inherit; }
.rv-vergleich__tabelle small { font-weight: 450; color: var(--rv-grau); }
.rv-vergleich__rest { display: block; }
.rv-vergleich__einzeln th, .rv-vergleich__einzeln td { background: var(--rv-flaeche); font-weight: 700; }
.rv-vergleich__tabelle tr.ist-hervor th, .rv-vergleich__tabelle tr.ist-hervor td { background: var(--rv-ocker-h); }
.rv-vergleich__tabelle tbody tr:last-child th, .rv-vergleich__tabelle tbody tr:last-child td { border-bottom: 0; }
.rv-vergleich .rv-hinweis { margin-top: var(--rv-s2); }

.rv-duell-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rv-s4) var(--rv-s6); margin-top: var(--rv-s5); max-width: 900px; }
.rv-duell-kopf > div { border-top: 3px solid var(--rv-tinte); padding-top: var(--rv-s3); }
.rv-duell-kopf h2 { font-size: 1.35rem; margin-bottom: var(--rv-s1); }
.rv-duell-kopf h2 a { color: inherit; }
.rv-duell-kopf p { margin: 0 0 var(--rv-s2); }
@media (max-width: 560px) { .rv-duell-kopf { grid-template-columns: 1fr; } }
.rv-text-breit { max-width: 900px; }
.rv-duell { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 560px; }
.rv-duell th, .rv-duell td { padding: 11px 12px; border-bottom: 1px solid var(--rv-linie); text-align: left; vertical-align: top; width: 40%; }
.rv-duell th:first-child { width: 20%; }
.rv-duell thead th { font-stretch: 88%; color: var(--rv-tinte); font-weight: 720; }
.rv-duell tbody th { color: var(--rv-tinte); font-weight: 650; }
.rv-duell td.ist-vorn { background: #e8f2ec; }
.rv-vorn { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--rv-gruen); margin-left: 4px; }

.rv-fazit { margin: 0; border-top: 2px solid var(--rv-tinte); }
.rv-fazit > div { display: grid; gap: var(--rv-s1) var(--rv-s5); padding: var(--rv-s4) 0; border-bottom: 1px solid var(--rv-linie); }
@media (min-width: 720px) { .rv-fazit > div { grid-template-columns: 14rem 1fr; } }
.rv-fazit dt { font-weight: 700; color: var(--rv-tinte); }
.rv-fazit dd { margin: 0; }

/* -- 13 Reiseseiten ------------------------------------------------------- */
.rv-reise { display: grid; gap: var(--rv-s7); }
@media (min-width: 1000px) { .rv-reise { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); } }
.rv-zeitleiste { list-style: none; margin: 0; padding: 0 0 0 var(--rv-s5); border-left: 2px solid var(--rv-linie); }
.rv-zeitleiste > li { position: relative; padding-bottom: var(--rv-s5); }
.rv-zeitleiste > li::before { content: ""; position: absolute; left: calc(-1 * var(--rv-s5) - 7px); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--rv-weiss); border: 2px solid var(--rv-tinte); }
.rv-zeitleiste h3 { font-size: 1.1rem; margin-bottom: var(--rv-s2); }
.rv-zeitleiste dl { margin: 0; }
.rv-zeitleiste dl div { margin-bottom: var(--rv-s2); }
.rv-zeitleiste dt { font-weight: 650; color: var(--rv-tinte); font-size: .9rem; }
.rv-zeitleiste dd { margin: 0; font-size: .95rem; }

/* -- 14 Startseite: Weiter ------------------------------------------------ */
.rv-weiter { display: grid; gap: var(--rv-s6); }
@media (min-width: 900px) { .rv-weiter { grid-template-columns: 1.3fr 1fr 1fr; } }
.rv-weiter__rechner { background: var(--rv-tinte); color: #d6dbe4; border-radius: var(--rv-r); padding: var(--rv-s5); }
.rv-weiter__rechner h2 { color: var(--rv-weiss); font-size: 1.5rem; }
.rv-weiter__rechner .rv-btn { background: var(--rv-ocker); color: var(--rv-tinte); }
.rv-weiter__rechner .rv-btn:hover { background: #e3ad45; color: var(--rv-tinte); }
.rv-weiter h3 { font-size: 1.05rem; }
.rv-linkliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rv-linie); }
.rv-linkliste li { border-bottom: 1px solid var(--rv-linie); }
.rv-linkliste a { display: block; padding: 9px 0; font-weight: 560; text-decoration: none; }
.rv-linkliste a:hover { text-decoration: underline; }

/* -- 15 Fuss: Linkspalten ------------------------------------------------- */
.rv-fuss__spalten { display: grid; gap: var(--rv-s5); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: var(--rv-s3) 0; }
.rv-fuss__kopf { color: var(--rv-weiss); font-weight: 700; margin: 0 0 var(--rv-s2); font-size: .95rem; }
.rv-fuss__spalten ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.rv-fuss__spalten li { margin-bottom: 5px; }
.rv-fuss__spalten a { color: #d6dbe4; text-decoration: none; }
.rv-fuss__spalten a:hover { color: var(--rv-weiss); text-decoration: underline; }

/* -- 16 Schmale Bildschirme ----------------------------------------------- */
.rv-artikel, .rv-reise, .rv-rechner, .rv-weiter { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .rv-artikel { grid-template-columns: 13rem minmax(0, var(--rv-text-breite)); }
  .rv-reise { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
}
@media (min-width: 960px) { .rv-rechner { grid-template-columns: 20rem minmax(0, 1fr); } }
@media (min-width: 900px) { .rv-weiter { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (max-width: 600px) {
  .rv-kopf__innen { flex-wrap: wrap; row-gap: var(--rv-s2); }
  .rv-nav { width: 100%; }
  .rv-nav ul { gap: var(--rv-s4); font-size: .92rem; }
}

.rv-alt-name { font-weight: 700; color: var(--rv-tinte); }
.rv-alt-name a { color: inherit; }