/* ============================================================
   Carbonreparatur

   Eine Seite, die eine einzige Frage beantwortet: lohnt sich das,
   und wie komme ich zu einer Antwort. Deshalb steht der Weg zur
   Anfrage oben, in der Mitte und am Ende — dazwischen das, was
   jemand sehen muss, um sich das zu trauen: der Schaden vorher und
   dasselbe Teil nachher.

   Kein Hero. Ein Bild über der ganzen Breite würde hier eine
   Stimmung bauen, wo eine Auskunft gebraucht wird.

   Die Tokens kommen aus basis.css, das Feld aus allgemein.css
   (`.is-innen`, 1560 px wie auf der Startseite). Hier steht nur,
   was es dort nicht gibt.
   ============================================================ */

/* Die Seite endet auf einer N05-Flaeche; der Fussabstand der
   Inhaltsseite stuende sonst als weisser Streifen darunter. */
.reparaturseite{padding-bottom:0}

/* ---------------------------------------------------------- Kopf */
.rp-kopf{border-bottom:0;margin-bottom:0;padding-bottom:0}
.rp-kopf .satz{margin-top:16px;font-size:19px;line-height:1.55;color:var(--n70)}

.rp-wege{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 0}


.rp-beleg{margin:22px 0 0;font:400 15px/1.6 Archivo,sans-serif;color:var(--n50)}
.rp-beleg b{color:var(--n70);font-weight:600}

/* ---------------------------------------------------------- Abschnitte */
.rp-block{margin-top:96px}
.rp-block > .titel{margin:0;
  font:600 clamp(24px,2.6vw,32px)/1.16 Archivo,sans-serif;
  letter-spacing:-.02em;color:var(--n90)}
.rp-block > .satz{margin:14px 0 0;max-width:74ch;color:var(--n60)}

/* Ein Abschnitt auf N05 zieht sich über die volle Breite; das Feld
   darin bleibt dasselbe. Zwei davon hat die Seite, mehr nicht. */
.rp-flaeche{margin-top:96px;padding:76px 0 84px;background:var(--n05)}
.rp-flaeche .rp-block{margin-top:0}

/* ---------------------------------------------------------- Gründe
   Vier Sätze nebeneinander, getrennt durch dieselbe Haarlinie wie
   überall. Keine Zahlen: die alte Seite nannte im selben Abschnitt
   „13+" und „15+ Jahre" und „5/5" neben „4.9/5" — solange nicht
   feststeht, was stimmt, steht hier keine davon. */
.rp-gruende{margin:38px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rp-gruende li{position:relative;padding:0 30px}
.rp-gruende li:first-child{padding-left:0}
.rp-gruende li:last-child{padding-right:0}
.rp-gruende li + li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;
  width:1px;background:var(--n20)}
.rp-gruende b{display:block;margin:0 0 8px;
  font:600 17px/1.3 Archivo,sans-serif;color:var(--n90)}
.rp-gruende span{display:block;font-size:16px;line-height:1.55;color:var(--n60)}

/* ---------------------------------------------------------- Schadensbilder */
/* Schmaler als das Feld: bei voller Breite wird jeder Regler ueber
   700 px hoch und das Paar zerfaellt in zwei Einzelbilder. */
.rp-schaeden{margin:42px 0 0;max-width:1180px;display:grid;gap:56px 44px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.rp-schaden .wort{margin:20px 0 0}
.rp-schaden h3{margin:0;font:600 20px/1.3 Archivo,sans-serif;color:var(--n90)}
.rp-schaden p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--n60)}

/* ---------------------------------------------------------- Der Regler
   Zwei Aufnahmen desselben Teils, übereinander. Die obere wird von
   links beschnitten; wie weit, steht in --stand.

   Geschoben wird mit einem echten `input[type=range]`, das
   unsichtbar über dem Bild liegt: damit funktionieren Finger, Maus
   und Pfeiltasten ohne eine Zeile eigener Ereignisbehandlung, und
   Vorlesegeräte bekommen ein Bedienelement, das sie kennen.

   Ohne JavaScript bleibt --stand bei 50 % stehen — dann sieht man
   beide Hälften nebeneinander. Weniger, aber nicht kaputt. */
.rp-regler{--stand:50%;position:relative;overflow:hidden;
  aspect-ratio:1/1;background:var(--n05);
  border-radius:var(--rundung);
  /* Senkrecht scrollt die Seite weiter, waagerecht gehört dem Regler.
     Ohne diese Zeile deutet der Browser am Handy JEDEN Wisch auf dem
     Bild als Seitenlauf, bricht die Zeigerfolge ab — und der Regler
     ließ sich mobil überhaupt nicht schieben. */
  touch-action:pan-y}
.rp-regler img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;-webkit-user-select:none;user-select:none;
  -webkit-user-drag:none}
.rp-regler .vorher{clip-path:inset(0 calc(100% - var(--stand)) 0 0)}

/* Die Kontur liegt über dem Bild, nicht darunter — sonst deckt das
   Foto sie genau dort zu, wo es die Fläche berührt. */
.rp-regler::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px var(--n20)}

.rp-marke{position:absolute;z-index:3;top:14px;
  padding:5px 11px;background:rgba(21,21,21,.72);
  font:600 11px/1.4 Archivo,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;pointer-events:none;
  border-radius:var(--rundung);transition:opacity .18s ease}
.rp-marke.links{left:14px}
.rp-marke.rechts{right:14px}

/* Der Griff: eine senkrechte Linie mit dem Signet darauf. Rund ist
   daran nur, wo eine Linie aufhört (Kapitel 09) — deshalb eine Wabe
   mit 60°-Flanken und kein Kreis. */
.rp-griff{position:absolute;z-index:2;top:0;bottom:0;left:var(--stand);
  width:2px;margin-left:-1px;background:var(--teal);pointer-events:none}
.rp-griff i{position:absolute;top:50%;left:50%;width:44px;height:38px;
  margin:-19px 0 0 -22px;display:block;background:var(--teal);
  clip-path:path("M10.0 1.5Q11.0 0.0 13.0 0.0L31.0 0.0Q33.0 0.0 34.0 1.5L43.0 17.5Q44.0 19.0 43.0 20.5L34.0 36.5Q33.0 38.0 31.0 38.0L13.0 38.0Q11.0 38.0 10.0 36.5L1.0 20.5Q0.0 19.0 1.0 17.5Z")}
.rp-griff i::before,.rp-griff i::after{content:"";position:absolute;top:50%;
  width:0;height:0;margin-top:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent}
.rp-griff i::before{left:9px;border-right:6px solid #05201E}
.rp-griff i::after{right:9px;border-left:6px solid #05201E}

/* Das Bedienelement selbst ist unsichtbar und deckt die ganze Fläche:
   angefasst wird das Bild, nicht ein Schieberegler darunter. */
.rp-regler input[type=range]{position:absolute;z-index:4;inset:0;
  width:100%;height:100%;margin:0;padding:0;
  background:none;border:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;opacity:0}
.rp-regler input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:44px;height:100%}
.rp-regler input[type=range]::-moz-range-thumb{width:44px;height:100%;border:0}
.rp-regler input[type=range]:focus-visible{outline:none}
.rp-regler:has(input:focus-visible)::after{box-shadow:inset 0 0 0 2px var(--teal-d)}

/* ---------------------------------------------------------- Grenzen
   Der Abschnitt, der etwas kostet: hier steht, wann wir abraten.
   Er steht bewusst VOR dem Formular — wer danach anfragt, weiß, was
   ihn erwartet, und wir sparen uns eine Absage nach dem Versand. */
.rp-grenzen{margin:30px 0 0;padding:0;list-style:none;max-width:74ch}
.rp-grenzen li{position:relative;padding-left:26px;font-size:17px;
  line-height:1.6;color:var(--n70)}
.rp-grenzen li + li{margin-top:12px}
/* Dieselbe Marke im Kleinen wie in den Zusagen der Produktseite:
   liegendes Sechseck, 60°-Flanken, dieselben 17,72 % wie beim
   Rabattkennzeichen und den Waben im Fuß. */
.rp-grenzen li::before{content:"";position:absolute;left:0;top:.6em;
  width:11px;height:7px;background:var(--teal);
  clip-path:polygon(17.72% 0, 82.28% 0, 100% 50%,
                    82.28% 100%, 17.72% 100%, 0 50%)}

/* ---------------------------------------------------------- Mitlaufender Weg
   Er blendet sich ein, wenn die Knoepfe aus dem Kopf aus dem Bild
   gelaufen sind, und wieder aus, sobald das Formular selbst zu sehen
   ist. Geschaltet wird ueber die Klasse `da` — `hidden` liesse sich
   nicht ueberblenden.

   Nicht sichtbar heisst hier AUCH nicht erreichbar: `visibility` nimmt
   die Knoepfe aus der Tabulatorreihenfolge. Mit blosser Deckkraft
   liefe der Fokus in etwas, das niemand sieht. */
.rp-schwebe{position:fixed;z-index:60;
  display:flex;visibility:hidden;opacity:0;
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s .28s}
.rp-schwebe.da{visibility:visible;opacity:1;transition-delay:0s}

/* Rechts am Rand steht er erst, wenn daneben auch Platz ist. Das Feld
   ist bis 1560 px breit, die Schadensbilder darin bis 1180 — erst ab
   etwa 1500 px Fenster bleibt rechts genug frei. Darunter laege er
   sonst auf einem Regler, und der bekaeme keinen Zeiger mehr ab. */
@media(min-width:1500px){
  .rp-schwebe{right:24px;top:50%;flex-direction:column;gap:12px;
    transform:translate(28px,-50%)}
  .rp-schwebe.da{transform:translate(0,-50%)}
  .rp-schwebe .handlung{justify-content:flex-start;width:246px;padding:0 22px}
  /* Auf Weiss hat der zweitrangige Knopf nur eine Haarlinie — schwebend
     ueber dem Foto braucht er eine eigene Flaeche, sonst steht er im
     Nichts. */
  .rp-schwebe .zweitrangig::before{background-color:var(--n00)}
}

/* Sonst: flache Leiste unten, beide Knoepfe nebeneinander. Sie
   verdeckt den Fuss nicht — die Seite bekommt unten so viel Luft, wie
   die Leiste hoch ist. */
@media(max-width:1499px){
  .rp-schwebe{left:0;right:0;bottom:0;gap:10px;justify-content:center;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
    box-shadow:0 -1px 0 var(--n20);transform:translateY(100%)}
  .rp-schwebe.da{transform:translateY(0)}
  /* Am breiten Fenster nicht ueber die ganze Leiste ziehen — zwei
     700 px breite Knoepfe sehen nach Fehler aus. */
  .rp-schwebe .handlung{flex:1 1 0;min-width:0;max-width:280px;
    height:46px;padding:0 12px;font-size:14px}
  .rp-schwebe .zweitrangig::before{background-color:var(--n00)}
  .rp-schwebe .rp-wa svg{width:17px;height:17px;margin-right:7px}
  body.rp-leiste{padding-bottom:66px}
}

@media(max-width:600px){
  .rp-schwebe .handlung{max-width:none}
  /* Erst hier wird es eng: „Per … anfragen" faellt weg,
     WhatsApp allein sagt dasselbe. */
  .rp-schwebe .rp-lang{display:none}
  .rp-schwebe .rp-kurz{display:inline}
}

@media(prefers-reduced-motion:reduce){
  .rp-schwebe{transition:opacity .01s,visibility 0s}
  .rp-schwebe,.rp-schwebe.da{transform:none}
}

/* ---------------------------------------------------------- Enger */
@media(max-width:1100px){
  .rp-gruende{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0}
  .rp-gruende li:nth-child(odd){padding-left:0}
  .rp-gruende li:nth-child(even){padding-right:0}
  .rp-gruende li:nth-child(3)::before{display:none}
}

@media(max-width:900px){
  .rp-block,.rp-flaeche{margin-top:68px}
  .rp-flaeche{padding:56px 0 60px}
  .rp-schaeden{grid-template-columns:1fr;gap:44px}
}

@media(max-width:600px){
  .rp-gruende{grid-template-columns:1fr;gap:26px 0}
  .rp-gruende li{padding:0}
  .rp-gruende li + li::before{display:none}
  .rp-wege .handlung{width:100%}
  .rp-marke{font-size:10px;padding:4px 9px}
}

@media(prefers-reduced-motion:reduce){
  .rp-marke{transition:none}
}