/* ============================================================
   Die Anfrage-Bausteine

   Rückmeldung nach dem Absenden, der WhatsApp-Knopf, die Aufteilung
   Formular + Karte daneben und die nummerierte Schrittfolge. Sie
   stehen für sich, weil ZWEI Seiten sie brauchen: die Reparaturseite
   und der freistehende Konfigurator. Das `rp-`-Präfix ist historisch
   — sie standen zuerst nur auf der Reparaturseite.

   Die Tokens kommen aus basis.css, die Eingabefelder aus
   allgemein.css.
   ============================================================ */

/* Der WhatsApp-Weg trägt die Fremdfarbe nur als Zeichen, nicht als
   Fläche: ein grüner Knopf neben dem Teal-Knopf hieße, zwei Marken
   werben um denselben Klick (Kapitel 04). */
.rp-wa{--wa:#25D366}
.rp-wa svg{width:19px;height:19px;margin-right:10px;fill:var(--wa);flex:none}
.rp-wa .t{display:inline-flex;align-items:center}
/* Die Beschriftung steht in EINEM Element: ein Flex-Behaelter schluckt
   fuehrende und schliessende Leerzeichen seiner Kinder, aus
   „Per WhatsApp anfragen" wurde sonst „PerWhatsAppanfragen". */
.rp-kurz{display:none}

/* ---------------------------------------------------------- Drei Schritte */
.rp-schritte{margin:38px 0 0;padding:0;list-style:none;
  display:grid;gap:0 44px;grid-template-columns:repeat(3,minmax(0,1fr));
  counter-reset:rp}
.rp-schritte li{position:relative;padding-top:26px;border-top:1px solid var(--n20)}
.rp-schritte li::before{counter-increment:rp;content:counter(rp,decimal-leading-zero);
  position:absolute;top:-1px;left:0;padding-right:12px;
  transform:translateY(-50%);background:var(--n00);
  font:500 13px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--teal-d)}
.rp-flaeche .rp-schritte li::before{background:var(--n05)}
.rp-schritte b{display:block;margin:0 0 8px;
  font:600 18px/1.3 Archivo,sans-serif;color:var(--n90)}
.rp-schritte span{display:block;font-size:16px;line-height:1.6;color:var(--n60)}

/* ---------------------------------------------------------- Anfrage */
.rp-anfrage{display:grid;gap:0 64px;margin-top:40px;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}

.rp-form .pr-felder,
.kt-form .pr-felder{display:grid;gap:18px 20px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.rp-form .breit,
.kt-form .breit{grid-column:1 / -1}
.rp-form button.handlung,
.kt-form button.handlung{margin-top:26px}

/* ---------------------------------------------------------- Kontaktseite
   Dasselbe Formular, aber im Fließtext einer Inhaltsseite statt in einer
   eigenen Vorlage. Deshalb eine Breite: `.is-text` hält den Text bei 74
   Zeichen, und ein Formular, das daneben über die ganze Seite läuft, sieht
   nicht großzügig aus, sondern verloren.

   760 px statt der 74 Zeichen des Textes, weil zwei Spalten drinstehen —
   bei Textbreite blieben für Vor- und Nachname je 22 Zeichen. */
.is-text .kt-form{max-width:760px;margin-top:26px}

/* Die Rückmeldung nach dem Absenden gehört über das Formular: nach dem
   Absenden springt der Browser hierher, und was dann im Blick ist, soll die
   Antwort sein und nicht ein wieder leeres Feld. */
.is-text .kt-form .rp-meldung{margin:0 0 24px}

/* Der zweite Weg steht als eigene Karte daneben, nicht als Fußnote
   unter dem Formular: für den, der ein Foto am Handy hat, ist er der
   kürzere, und er soll ihn sehen, bevor er zu tippen anfängt. */
.rp-daneben{padding:28px 30px 32px;background:var(--n00);
  box-shadow:inset 0 0 0 1px var(--n20);border-radius:var(--rundung)}
.rp-daneben h3{margin:0;font:600 19px/1.3 Archivo,sans-serif;color:var(--n90)}
.rp-daneben p{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--n60)}
.rp-daneben .handlung{margin-top:22px;width:100%}
.rp-daneben .rp-auch{margin-top:26px;padding-top:22px;border-top:1px solid var(--n10);
  font-size:16px;line-height:1.6;color:var(--n60)}
.rp-daneben a{color:var(--teal-d)}

/* Rückmeldung nach dem Absenden. Grün heißt „ist passiert", Teal
   hieße „hier kannst du handeln" — deshalb hier Grün (Kapitel 04). */
.rp-meldung{margin:0 0 30px;padding:16px 20px;font-size:16px;line-height:1.55;
  border-radius:var(--rundung)}
.rp-meldung.gut{background:#EAF7EF;color:#12693C;box-shadow:inset 0 0 0 1px #BDE3CC}
.rp-meldung.schlecht{background:#FDEEEC;color:#9B2C1B;box-shadow:inset 0 0 0 1px #F3CFC9}


@media(max-width:1100px){
  .rp-anfrage{grid-template-columns:1fr;gap:44px}
}

@media(max-width:900px){
  .rp-schritte{grid-template-columns:1fr;gap:26px 0}
}

@media(max-width:600px){
  /* Eng wird es hier: „Per … schicken" fällt weg, WhatsApp allein
     sagt dasselbe. */
  .rp-lang{display:none}
  .rp-kurz{display:inline}
  .rp-form .pr-felder,
  .kt-form .pr-felder{grid-template-columns:1fr}
}