/* Ratgeber zu Recht, Förderung und Kosten (recht-auf-reparatur, reparaturbonus, garantie-gewaehrleistung-reparatur,
   handy-reparatur-kosten): Fundstellen-Beleg, Zeitleiste, Tabellen, Zuständigkeiten. Vorsilbe rr-. */

/* Kopf */
.rr-kopf { padding-top: 24px; }
.rr-titel { font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.7rem); max-width: 18ch; }
.rr-kopf .gross { max-width: 54ch; }
.rr-meta { margin: 20px 0 0; font: 400 .82rem/1.5 var(--din); letter-spacing: .06em; color: var(--stahl); }
.rr-meta a { color: inherit; }
@media (min-width: 960px) { .rr-kopf .kopf-bild { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }

/* Fundstellen im Kopf: Paragraf links, Aussage rechts */
.rr-fund { width: 100%; max-width: 520px; justify-self: end; }
.rr-fund .beleg__titel { margin-bottom: 14px; }
.rr-fund__liste { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; border-top: 2px solid var(--schwarz); }
.rr-fund__liste > div { display: contents; }
.rr-fund__liste dt, .rr-fund__liste dd { margin: 0; border-bottom: 1px dashed var(--alu); }
.rr-fund__liste dt { padding: 12px 16px 12px 2px; }
.rr-fund__liste dd { padding: 12px 2px; font-size: .93rem; line-height: 1.45; color: var(--text-2); }
.rr-fund__fuss { margin: 14px 0 0; font: .8rem/1.5 var(--mono); color: var(--stahl); }
@media (max-width: 959px) { .rr-fund { justify-self: stretch; max-width: none; } }
@media (max-width: 479px) {
  .rr-fund__liste { grid-template-columns: minmax(0, 1fr); }
  .rr-fund__liste dt { padding: 14px 2px 6px; border-bottom: 0; }
  .rr-fund__liste dd { padding: 0 2px 14px; }
}

/* Paragraf, Status, Betrag als Marke */
.rr-marke { display: inline-block; padding: 3px 9px; border: 1px solid var(--schwarz); border-radius: 3px; background: #fff; color: var(--schwarz); font: 700 .8rem/1.35 var(--din); letter-spacing: .02em; white-space: nowrap; }
.rr-marke--rot { border-color: var(--rot); color: var(--rot); }
.rr-marke--gruen { border-color: var(--gruen); color: var(--gruen-text); }
.rr-marke--offen { border-style: dashed; border-color: var(--stahl); color: var(--text-2); }

/* Einleitung eines Abschnitts */
.rr-einleitung { max-width: 760px; margin-bottom: 32px; }
.rr-einleitung p:not(.etikett) { color: var(--text-2); }
.rr-text { max-width: 68ch; }
.rr-text h3 { margin-top: 1.6em; }
@media (min-width: 900px) { .rr-raster { grid-template-columns: 7fr 5fr; align-items: start; } }

/* Vier Punkte: Raster mit Strich oben */
.rr-punkte { display: grid; gap: 28px 40px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .rr-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rr-punkte--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rr-punkte > li { padding-top: 20px; border-top: 2px solid var(--schwarz); }
.rr-punkte .h4 { font-size: 1.25rem; margin-bottom: .5em; }
.rr-punkte p { margin: 0 0 .7em; color: var(--text-2); }
.rr-punkte p:last-child { margin-bottom: 0; }
.rr-punkte .rr-marke { margin-bottom: 12px; }

/* Zeitleiste: Datum links, Ereignis rechts, eine Linie dazwischen */
.rr-zeit { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.rr-zeit li { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 28px; padding: 0 0 26px 0; }
.rr-zeit li::before { content: ""; position: absolute; left: 164px; top: 8px; bottom: -8px; width: 2px; background: var(--alu); }
.rr-zeit li:last-child::before { display: none; }
.rr-zeit li::after { content: ""; position: absolute; left: 159px; top: 6px; width: 12px; height: 12px; border: 2px solid var(--schwarz); border-radius: 3px; background: #fff; }
.rr-zeit li.ist-stichtag::after { background: var(--rot); border-color: var(--rot); }
.rr-zeit__datum { font: 700 1.05rem/1.3 var(--din); font-variant-numeric: tabular-nums; text-align: right; padding-right: 8px; }
.rr-zeit__was { padding-left: 14px; }
.rr-zeit__was strong { display: block; font: 700 1.1rem/1.3 var(--din); }
.rr-zeit__was span { display: block; margin-top: 2px; font-size: .95rem; color: var(--text-2); }
.rr-zeit li.ist-stichtag .rr-zeit__datum, .rr-zeit li.ist-stichtag strong { color: var(--rot); }
@media (max-width: 599px) {
  .rr-zeit li { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .rr-zeit li::before { left: 6px; }
  .rr-zeit li::after { left: 1px; }
  .rr-zeit__datum { text-align: left; padding: 0; }
  .rr-zeit__was { padding-left: 0; }
}

/* Tabelle, am Handy als Karten (jede Zelle nennt ihre Spalte über data-spalte) */
.rr-tabelle { width: 100%; border-collapse: collapse; }
.rr-tabelle caption { caption-side: top; text-align: left; padding: 0 0 12px; font: 400 .78rem/1.5 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.rr-tabelle thead th { padding: 10px 12px 10px 4px; border-bottom: 2px solid var(--schwarz); text-align: left; font: 400 .74rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); vertical-align: bottom; }
.rr-tabelle tbody :is(th, td) { padding: 15px 12px 15px 4px; border-bottom: 1px dashed var(--alu); vertical-align: top; text-align: left; font-size: .96rem; line-height: 1.45; }
.rr-tabelle tbody th { font: 700 1.08rem/1.25 var(--din); }
.rr-tabelle tbody th small { display: block; margin-top: 3px; font: 400 .85rem/1.4 var(--sans); color: var(--stahl); }
.rr-tabelle td { color: var(--text-2); }
.rr-tabelle td strong { color: var(--text); }
.rr-tabelle .rr-zahl { font: 700 1.08rem/1.25 var(--din); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.rr-tabelle tr.ist-wichtig th, .rr-tabelle tr.ist-wichtig td { background: rgb(160 0 0 / .045); }
.rr-tabelle a { color: var(--rot); }
.rr-fussnote { max-width: 760px; margin: 18px 0 0; font-size: .9rem; color: var(--text-2); }
.rr-abstand { margin-top: 48px; }
@media (max-width: 759px) {
  .rr-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rr-tabelle, .rr-tabelle tbody, .rr-tabelle caption { display: block; }
  .rr-tabelle tbody { border-top: 2px solid var(--schwarz); }
  .rr-tabelle tbody tr { display: block; padding: 14px 2px 14px; border-bottom: 1px dashed var(--alu); }
  .rr-tabelle tr.ist-wichtig { margin-inline: -8px; padding-inline: 10px; background: rgb(160 0 0 / .045); }
  .rr-tabelle tr.ist-wichtig th, .rr-tabelle tr.ist-wichtig td { background: none; }
  .rr-tabelle tbody :is(th, td) { display: block; padding: 0; border: 0; }
  .rr-tabelle tbody th { margin-bottom: 6px; }
  .rr-tabelle tbody td { margin-top: 4px; }
  .rr-tabelle tbody td.rr-leer { display: none; }
  .rr-tabelle tbody td[data-spalte]::before { content: attr(data-spalte) ": "; font: 400 .72rem var(--din); letter-spacing: .12em; text-transform: uppercase; color: var(--stahl); }
}

/* Drei Zuständigkeiten nebeneinander */
.rr-wege { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .rr-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rr-wege > li { display: flex; flex-direction: column; padding: 26px 24px 24px; background: #fff; border-radius: 4px; box-shadow: var(--schatten), 0 0 0 1px rgb(10 10 11 / .06); }
.rr-wege .etikett { margin-bottom: .8em; }
.rr-wege .h3 { margin-bottom: .5em; }
.rr-wege p { margin: 0 0 .8em; font-size: .96rem; color: var(--text-2); }
.rr-wege ul { margin: 0 0 1em; padding-left: 1.1em; font-size: .94rem; color: var(--text-2); list-style: square; }
.rr-wege li li { margin-bottom: 4px; }
.rr-wege .pfeil-link { margin-top: auto; color: var(--rot); }
.rr-wege > li.ist-wir { background: var(--graphit); color: #fff; box-shadow: none; }
.rr-wege > li.ist-wir p, .rr-wege > li.ist-wir ul { color: var(--text-hell-2); }
.rr-wege > li.ist-wir .etikett { color: var(--text-hell-2); }
.rr-wege > li.ist-wir .h3 { color: #fff; }
.rr-wege > li.ist-wir .pfeil-link { color: #fff; }

/* Rechenbeispiel: Zeilen wie auf einem Beleg */
.rr-rechnung { margin: 0; padding: 26px clamp(20px, 3vw, 30px) 22px; background: #fff; border-radius: 4px; box-shadow: var(--schatten), 0 0 0 1px rgb(10 10 11 / .06); }
.rr-rechnung .etikett { margin-bottom: 12px; }
.rr-rechnung dl { margin: 0; border-top: 2px solid var(--schwarz); }
.rr-rechnung dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--alu); }
.rr-rechnung dt { font-size: .95rem; }
.rr-rechnung dt small { display: block; color: var(--stahl); font-size: .84rem; }
.rr-rechnung dd { margin: 0; font: 700 1.15rem var(--din); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-rechnung dl > div.ist-summe { border-bottom: 2px solid var(--schwarz); }
.rr-rechnung dl > div.ist-summe dd { color: var(--rot); font-size: 1.35rem; }
.rr-rechnung__fuss { margin: 14px 0 0; font-size: .86rem; line-height: 1.5; color: var(--stahl); }

/* Karte „So ist es bei uns“ */
.rr-wir { border-radius: 4px; }
.rr-wir .h3 { color: #fff; margin-bottom: .7em; }
.rr-wir .liste-haken { margin-bottom: 0; }
.rr-wir .liste-haken li::before { border-color: var(--glut); }
.rr-wir .knopf-reihe { margin-top: 1.4em; }
.rr-wir p.rr-wir__wege { margin: 18px 0 0; font-size: .92rem; }
.rr-wir__wege a { color: #fff; }
.rr-wir__wege a:hover { color: var(--text-hell-2); }

/* Hinweis „keine Rechtsberatung“ und Änderungsprotokoll */
.rr-hinweis { max-width: 860px; margin: 40px 0 0; }
.rr-hinweis p:last-child { margin-bottom: 0; }
.rr-protokoll { list-style: none; margin: 0; padding: 0; max-width: 760px; border-top: 2px solid var(--schwarz); }
.rr-protokoll li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px dashed var(--alu); font-size: .95rem; }
.rr-protokoll time { font: 700 .95rem/1.5 var(--din); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .rr-protokoll li { grid-template-columns: minmax(0, 1fr); } }

/* Weiterlesen und Quellen */
.rr-ende { padding-top: 0; }
.rr-verwandt { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin: 0; padding-top: 20px; border-top: 1px solid var(--alu); }
.rr-verwandt .etikett { margin: 0 8px 0 0; }
.rr-verwandt a { color: var(--rot); }
.rr-quellen { margin-top: 36px; font-size: .88rem; color: var(--text-2); }
.rr-quellen .etikett { margin-bottom: .8em; }
.rr-quellen p { max-width: 70ch; }
.rr-quellen ul { list-style: none; margin: 0; padding: 0; }
.rr-quellen li { margin-bottom: 6px; max-width: 80ch; }
.rr-quellen a { color: var(--text-2); overflow-wrap: anywhere; }
.rr-quellen a:hover { color: var(--rot); }

/* Kostenübersicht: Preisspannen als Balken auf einer gemeinsamen Skala */
.rr-spannen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--schwarz); }
.rr-spannen li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 16px 2px; border-bottom: 1px dashed var(--alu); }
.rr-spannen__name { font: 700 1.1rem/1.25 var(--din); }
.rr-spannen__name small { display: block; margin-top: 2px; font: 400 .84rem/1.4 var(--sans); color: var(--stahl); }
.rr-spannen__bahn { position: relative; height: 12px; background: var(--werkbank); border-radius: 3px; }
.abschnitt--grau .rr-spannen__bahn { background: #fff; }
.rr-spannen__weite { position: absolute; top: 5px; height: 2px; background: var(--stahl); }
.rr-spannen__weite.ist-weiter::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 2px solid var(--stahl); border-right: 2px solid var(--stahl); transform: rotate(45deg); }
.rr-spannen__balken { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--schwarz); }
.rr-spannen__mitte { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--rot); border-radius: 2px; }
.rr-spannen__zahl { font: 700 1.05rem var(--din); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rr-spannen__zahl small { display: block; font: 400 .8rem/1.3 var(--sans); color: var(--stahl); }
.rr-legende { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: .86rem; color: var(--stahl); }
.rr-legende span::before { content: ""; display: inline-block; width: 22px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--schwarz); vertical-align: .02em; }
.rr-legende span.ist-mitte::before { width: 3px; height: 14px; background: var(--rot); vertical-align: -.2em; }
.rr-legende span.ist-weite::before { height: 2px; background: var(--stahl); vertical-align: .25em; }
@media (max-width: 699px) {
  .rr-spannen li { grid-template-columns: minmax(0, 1fr) auto; }
  .rr-spannen__bahn { grid-column: 1 / -1; grid-row: 2; }
}