/* -------------------------------------------

Kontakt: geführte Anfrage und freie Nachricht (28.09.2026)

Alle Bausteine tragen das Präfix ryno-anfrage-. Schrift, Farben und Abstände
kommen aus dem Gestaltungssystem in style.css (Variablen --ryno-...).
Ohne JavaScript sind Umschalter und geführte Anfrage ausgeblendet (hidden),
die freie Nachricht funktioniert dann wie ein normales Formular.
Rahmen von Auswahlflächen haben dieselbe Linie wie die Eingabefelder
(rgba 0,0,0,0.2). Hover-Effekte nur auf Geräten mit Maus, damit auf dem Handy
nach dem Tippen nichts hängen bleibt.

------------------------------------------- */
.ryno-anfrage [hidden] {
  display: none !important;
}
/* Nur für Screenreader */
.ryno-anfrage-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------
   Direkter Kontakt
------------------------------------------- */
.ryno-anfrage-direkt {
  margin-bottom: var(--ryno-space-60);
}
.ryno-anfrage-direkt-titel {
  margin-bottom: var(--ryno-space-10);
  color: var(--ryno-color-dark-soft);
}
.ryno-anfrage-direkt-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ryno-space-40);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ryno-anfrage-direkt-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: var(--ryno-color-dark);
  font-size: var(--ryno-font-text-lg);
  font-weight: 500;
}
.ryno-anfrage-direkt-link span {
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.2);
  text-underline-offset: 5px;
  transition: text-decoration-color var(--ryno-dauer) var(--ryno-bewegung);
}
.ryno-anfrage-direkt-link svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .ryno-anfrage-direkt-link:hover span {
    text-decoration-color: var(--ryno-color-dark);
  }
}
@media screen and (max-width: 575px) {
  .ryno-anfrage-direkt-liste {
    flex-direction: column;
  }
}

/* -------------------------------------------
   Umschalter geführt / frei: zwei Reiter, der aktive mit oranger Linie,
   darunter eine dünne Linie über die ganze Breite (Entwurf B, 28.09.2026)
------------------------------------------- */
.ryno-anfrage-wahl-bereich {
  margin-bottom: var(--ryno-space-60);
}
.ryno-anfrage-wahl {
  position: relative;
  display: flex;
  gap: var(--ryno-space-40);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.ryno-anfrage-wahl-btn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0 0 -1px;
  padding: 8px 0 var(--ryno-space-15);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--ryno-color-dark-soft);
  font: inherit;
  font-size: var(--ryno-font-text-xl);
  font-weight: 500;
  line-height: var(--ryno-line-heading-sm);
  text-align: left;
  cursor: pointer;
  transition: color var(--ryno-dauer) var(--ryno-bewegung);
}
.ryno-anfrage-wahl-btn[aria-selected="true"] {
  color: var(--ryno-color-dark);
}
/* Der orange Strich gleitet zum gewählten Reiter; Lage und Breite setzt js/kontakt.js */
.ryno-anfrage-wahl-strich {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--ryno-strich-breite, 0);
  height: 2px;
  background-color: var(--ryno-color-accent);
  transform: translateX(var(--ryno-strich-x, 0));
  transition: transform var(--ryno-dauer-lang) var(--ryno-bewegung), width var(--ryno-dauer-lang) var(--ryno-bewegung);
  pointer-events: none;
}
.ryno-anfrage-wahl-strich.ryno-anfrage-sofort {
  transition: none;
}
.ryno-anfrage-wahl-text.ryno-anfrage-neu {
  animation: ryno-anfrage-blende var(--ryno-dauer) var(--ryno-bewegung) both;
}
@media (hover: hover) {
  .ryno-anfrage-wahl-btn[aria-selected="false"]:hover {
    color: var(--ryno-color-dark);
  }
}
.ryno-anfrage-wahl-text {
  margin-top: var(--ryno-space-15);
  color: var(--ryno-color-dark-soft);
}
@media screen and (max-width: 575px) {
  /* Auf dem Handy eine Schriftstufe kleiner, damit beide Reiter einzeilig bleiben */
  .ryno-anfrage-wahl {
    gap: var(--ryno-space-20);
  }
  .ryno-anfrage-wahl-btn {
    font-size: var(--ryno-font-h6);
  }
}

/* -------------------------------------------
   Schrittanzeige: am Computer vier Stufen mit Namen, auf dem Handy
   vier Balken und darunter „Schritt 2 von 4 · Projekt“
------------------------------------------- */
.ryno-anfrage-kopf {
  margin-bottom: var(--ryno-space-40);
}
.ryno-anfrage-stufen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ryno-anfrage-stufe {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: var(--ryno-space-15) 0 0;
  border: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  background: none;
  color: rgba(0, 0, 0, 0.4);
  font: inherit;
  font-size: var(--ryno-font-label);
  font-weight: 500;
  line-height: var(--ryno-line-heading-sm);
  letter-spacing: var(--ryno-tracking-label);
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--ryno-dauer) var(--ryno-bewegung);
}
/* Oranger Balken, der sich beim Erreichen von links füllt */
.ryno-anfrage-stufe::before {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  height: 2px;
  background-color: var(--ryno-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ryno-dauer-lang) var(--ryno-bewegung);
}
.ryno-anfrage-stufe.ryno-erreicht::before {
  transform: scaleX(1);
}
.ryno-anfrage-stufe:disabled {
  cursor: default;
}
.ryno-anfrage-stufe.ryno-erreicht {
  color: var(--ryno-color-dark-soft);
}
.ryno-anfrage-stufe[aria-current="step"] {
  color: var(--ryno-color-dark);
}
@media (hover: hover) {
  .ryno-anfrage-stufe.ryno-erreicht:not([aria-current]):hover {
    color: var(--ryno-color-dark);
  }
}
.ryno-anfrage-zaehler {
  display: none;
  margin-top: var(--ryno-space-15);
  color: var(--ryno-color-dark-soft);
}
@media screen and (max-width: 767px) {
  .ryno-anfrage-stufe {
    padding-top: 0;
  }
  .ryno-anfrage-stufe span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ryno-anfrage-zaehler {
    display: block;
  }
}

/* -------------------------------------------
   Schritte
------------------------------------------- */
.ryno-anfrage-schritt {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  animation: ryno-anfrage-ein var(--ryno-dauer-lang) var(--ryno-bewegung) both;
}
/* Weiter gleitet von rechts herein, Zurück von links */
.ryno-anfrage-form[data-richtung="vor"] .ryno-anfrage-schritt {
  animation-name: ryno-anfrage-von-rechts;
}
.ryno-anfrage-form[data-richtung="zurueck"] .ryno-anfrage-schritt {
  animation-name: ryno-anfrage-von-links;
}
/* Beim Wechsel zwischen den Wegen blendet das Formular weich ein */
.ryno-anfrage-panel {
  animation: ryno-anfrage-blende var(--ryno-dauer) var(--ryno-bewegung) both;
}
.ryno-anfrage-titel {
  margin-bottom: var(--ryno-space-15);
}
.ryno-anfrage-titel:focus,
.ryno-anfrage-danke-titel:focus {
  outline: none;
}
.ryno-anfrage-hinweis {
  margin-bottom: var(--ryno-space-30);
  color: var(--ryno-color-dark-soft);
}

/* Auswahl: echte Checkboxen und Radioknöpfe, unsichtbar, aber bedienbar */
.ryno-anfrage .ryno-anfrage-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.ryno-anfrage-input:focus-visible + .ryno-anfrage-karte-inhalt,
.ryno-anfrage-input:focus-visible + .ryno-anfrage-chip-text {
  outline: 2px solid var(--ryno-color-accent);
  outline-offset: 3px;
}

/* Karten (Schritt 1) */
.ryno-anfrage-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ryno-space-10);
}
@media screen and (min-width: 768px) {
  .ryno-anfrage-karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ryno-space-15);
  }
}
@media screen and (min-width: 1200px) {
  .ryno-anfrage-karten {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ryno-anfrage-karte {
  position: relative;
  display: block;
  cursor: pointer;
}
.ryno-anfrage-karte-inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--ryno-space-20);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: var(--ryno-color-dark);
  transition: background-color var(--ryno-dauer-kurz) var(--ryno-bewegung), border-color var(--ryno-dauer-kurz) var(--ryno-bewegung), color var(--ryno-dauer-kurz) var(--ryno-bewegung), transform var(--ryno-dauer-kurz) var(--ryno-bewegung);
}
.ryno-anfrage-karte:active .ryno-anfrage-karte-inhalt {
  transform: scale(0.98);
}
.ryno-anfrage-input:checked + .ryno-anfrage-karte-inhalt {
  border-color: var(--ryno-color-dark);
  background-color: var(--ryno-color-dark);
  color: var(--ryno-color-light);
}
.ryno-anfrage-icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--ryno-space-20);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ryno-anfrage-karte-titel {
  font-size: var(--ryno-font-h6);
  font-weight: 500;
  line-height: var(--ryno-line-heading-sm);
}
.ryno-anfrage-karte-text {
  margin-top: var(--ryno-space-5);
  color: var(--ryno-color-dark-soft);
  font-size: var(--ryno-font-text-sm);
  line-height: var(--ryno-line-text);
}
.ryno-anfrage-input:checked + .ryno-anfrage-karte-inhalt .ryno-anfrage-karte-text {
  color: var(--ryno-color-light-soft);
}
/* Marke oben rechts: leerer Kreis, gewählt oranger Kreis mit Häkchen */
.ryno-anfrage-marke {
  position: absolute;
  top: var(--ryno-space-15);
  right: var(--ryno-space-15);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  transition: background-color var(--ryno-dauer-kurz) var(--ryno-bewegung), border-color var(--ryno-dauer-kurz) var(--ryno-bewegung);
}
.ryno-anfrage-marke svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--ryno-color-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--ryno-dauer-kurz) var(--ryno-bewegung), transform var(--ryno-dauer) var(--ryno-bewegung);
}
.ryno-anfrage-input:checked + .ryno-anfrage-karte-inhalt .ryno-anfrage-marke {
  border-color: var(--ryno-color-accent);
  background-color: var(--ryno-color-accent);
}
.ryno-anfrage-input:checked + .ryno-anfrage-karte-inhalt .ryno-anfrage-marke svg {
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  .ryno-anfrage-karte:hover .ryno-anfrage-karte-inhalt {
    border-color: var(--ryno-color-dark);
  }
}

/* Fragen und Auswahlknöpfe (Schritte 2 bis 4) */
.ryno-anfrage-frage {
  margin-bottom: var(--ryno-space-40);
}
.ryno-anfrage-frage:last-child {
  margin-bottom: 0;
}
.ryno-anfrage-frage-titel {
  margin-bottom: var(--ryno-space-15);
  color: var(--ryno-color-dark);
  font-size: var(--ryno-font-h5);
  font-weight: 500;
  line-height: var(--ryno-line-heading-sm);
}
.ryno-anfrage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ryno-space-10);
}
.ryno-anfrage-chip {
  position: relative;
  cursor: pointer;
}
.ryno-anfrage-chip-text {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 40px;
  color: var(--ryno-color-dark);
  font-size: var(--ryno-font-text);
  line-height: var(--ryno-line-heading-sm);
  transition: background-color var(--ryno-dauer-kurz) var(--ryno-bewegung), border-color var(--ryno-dauer-kurz) var(--ryno-bewegung), color var(--ryno-dauer-kurz) var(--ryno-bewegung), transform var(--ryno-dauer-kurz) var(--ryno-bewegung);
}
.ryno-anfrage-chip:active .ryno-anfrage-chip-text {
  transform: scale(0.97);
}
.ryno-anfrage-input:checked + .ryno-anfrage-chip-text {
  border-color: var(--ryno-color-dark);
  background-color: var(--ryno-color-dark);
  color: var(--ryno-color-light);
}
@media (hover: hover) {
  .ryno-anfrage-chip:hover .ryno-anfrage-chip-text {
    border-color: var(--ryno-color-dark);
  }
}
/* Budget pro Leistung: Blöcke untereinander, verborgene erzeugen keinen Abstand */
.ryno-anfrage-budgets {
  display: flex;
  flex-direction: column;
  gap: var(--ryno-space-30);
}
.ryno-anfrage-budget-name {
  margin-bottom: var(--ryno-space-10);
  color: var(--ryno-color-dark-soft);
}
.ryno-anfrage-budget-hinweis {
  margin-top: calc(var(--ryno-space-10) * -1);
  margin-bottom: var(--ryno-space-20);
}
/* Minimum – Maximum: zwei Felder mit CHF, dazwischen ein feiner Strich, der
   orange wird und wächst, sobald man in einem der Felder ist */
.ryno-anfrage-budget-felder {
  display: flex;
  align-items: center;
  gap: var(--ryno-space-30);
  max-width: 560px;
}
.ryno-anfrage-budget-feld {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.ryno-anfrage-form .ryno-anfrage-budget-feld input {
  margin-bottom: 0;
  padding: 0 48px 0 12px;
}
.ryno-anfrage-budget-waehrung {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--ryno-color-dark-soft);
  font-size: var(--ryno-font-label);
  font-weight: 500;
  letter-spacing: var(--ryno-tracking-label);
  transform: translateY(-50%);
  pointer-events: none;
}
.ryno-anfrage-budget-strich {
  flex: none;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.35);
  transition: transform var(--ryno-dauer) var(--ryno-bewegung), background-color var(--ryno-dauer) var(--ryno-bewegung);
}
.ryno-anfrage-budget-felder:focus-within .ryno-anfrage-budget-strich {
  background-color: var(--ryno-color-accent);
  transform: scaleX(1.3);
}
@media screen and (max-width: 575px) {
  /* Auf dem Handy etwas sparsamer, damit „Maximum“ neben CHF Platz hat */
  .ryno-anfrage-budget-felder {
    gap: var(--ryno-space-20);
  }
  .ryno-anfrage-budget-strich {
    width: 12px;
  }
  .ryno-anfrage-form .ryno-anfrage-budget-feld input {
    padding: 0 40px 0 8px;
  }
  .ryno-anfrage-budget-waehrung {
    right: 8px;
  }
}
@media screen and (max-width: 374px) {
  .ryno-anfrage-budget-felder {
    gap: var(--ryno-space-15);
  }
}
@media screen and (max-width: 359px) {
  /* Sehr schmale Handys: Felder untereinander */
  .ryno-anfrage-budget-felder {
    flex-direction: column;
    align-items: stretch;
  }
  .ryno-anfrage-budget-strich {
    display: none;
  }
}
.ryno-anfrage-form .ryno-anfrage-adresse {
  margin: var(--ryno-space-15) 0 0;
}
.ryno-anfrage-form textarea {
  height: 180px;
  margin-bottom: 0;
}
.ryno-anfrage-termin {
  max-width: 320px;
  margin-top: var(--ryno-space-20);
  animation: ryno-anfrage-hinweis var(--ryno-dauer) var(--ryno-bewegung) both;
}
.ryno-anfrage-feld-label {
  display: block;
  color: var(--ryno-color-dark-soft);
}
.ryno-anfrage-termin input {
  margin-bottom: 0;
}

/* Fehlermeldungen und Vorschläge: Text schwarz, nur das Symbol orange */
.ryno-anfrage-fehler,
.ryno-anfrage-vorschlag {
  margin-top: var(--ryno-space-10);
  color: var(--ryno-color-dark);
  font-size: var(--ryno-font-text-sm);
  line-height: var(--ryno-line-text);
  animation: ryno-anfrage-hinweis var(--ryno-dauer) var(--ryno-bewegung) both;
}
.ryno-anfrage-fehler {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ryno-anfrage-fehler svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: var(--ryno-color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ryno-anfrage input + .ryno-anfrage-fehler,
.ryno-anfrage input + .ryno-anfrage-vorschlag,
.ryno-anfrage-fehler + .ryno-anfrage-vorschlag,
.ryno-kontakt-form textarea + .ryno-anfrage-fehler {
  margin-top: -20px;
  margin-bottom: var(--ryno-space-20);
}
.ryno-anfrage-vorschlag-btn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ryno-color-dark);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ryno-anfrage [aria-invalid="true"] {
  border-bottom-color: var(--ryno-color-accent);
}
/* Fokus in Textfeldern: unten gleitet eine orange Linie von links ein,
   wie der Strich unter den Reitern (statt eines Rahmens) */
.ryno-anfrage input[type="text"],
.ryno-anfrage input[type="email"],
.ryno-anfrage input[type="tel"],
.ryno-anfrage input[type="date"],
.ryno-anfrage textarea {
  background-image: linear-gradient(var(--ryno-color-accent), var(--ryno-color-accent));
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: left bottom;
  background-size: 0 2px;
  transition: background-size var(--ryno-dauer) var(--ryno-bewegung);
}
.ryno-anfrage input[type="text"]:focus,
.ryno-anfrage input[type="email"]:focus,
.ryno-anfrage input[type="tel"]:focus,
.ryno-anfrage input[type="date"]:focus,
.ryno-anfrage textarea:focus {
  background-size: 100% 2px;
}

/* Zusammenfassung */
.ryno-anfrage-zusammenfassung {
  margin-top: var(--ryno-space-40);
  padding: var(--ryno-space-30);
}
.ryno-anfrage-zusammenfassung-titel {
  margin-bottom: var(--ryno-space-15);
  color: var(--ryno-color-dark);
}
.ryno-anfrage-zusammenfassung dl {
  margin: 0;
}
.ryno-anfrage-zeile {
  animation: ryno-anfrage-ein-kurz var(--ryno-dauer) var(--ryno-bewegung) both;
  animation-delay: calc(var(--ryno-reihe, 0) * 40ms);
  display: grid;
  grid-template-columns: minmax(120px, 28%) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--ryno-space-5) var(--ryno-space-20);
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.ryno-anfrage-zeile dt {
  color: var(--ryno-color-dark-soft);
  font-weight: 400;
}
.ryno-anfrage-zeile dd {
  margin: 0;
  color: var(--ryno-color-dark);
  font-weight: 500;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.ryno-anfrage-aendern,
.ryno-anfrage-zurueck,
.ryno-anfrage-textlink {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ryno-color-dark);
  font: inherit;
  font-size: var(--ryno-font-label);
  font-weight: 500;
  letter-spacing: var(--ryno-tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}
.ryno-anfrage-aendern,
.ryno-anfrage-textlink {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Grössere Tippfläche, ohne die Zeile höher zu machen */
.ryno-anfrage-aendern {
  padding: 12px 0;
  margin: -12px 0;
}
@media screen and (max-width: 575px) {
  .ryno-anfrage-zusammenfassung {
    padding: var(--ryno-space-20);
  }
  .ryno-anfrage-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ryno-anfrage-zeile dd {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
.ryno-anfrage-datenschutz {
  margin-top: var(--ryno-space-30);
}

/* Unsichtbares Feld gegen Spam */
.ryno-anfrage .ryno-anfrage-falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Zurück und Weiter */
.ryno-anfrage-navi {
  display: flex;
  align-items: center;
  gap: var(--ryno-space-20);
  margin-top: var(--ryno-space-40);
}
.ryno-anfrage-navi .ryno-button {
  margin-left: auto;
}
.ryno-anfrage-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
}
.ryno-anfrage-zurueck svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--ryno-dauer) var(--ryno-bewegung);
}
@media (hover: hover) {
  .ryno-anfrage-zurueck:hover svg {
    transform: translateX(-4px);
  }
}
.ryno-anfrage .ryno-button[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* -------------------------------------------
   Bestätigung nach dem Senden
------------------------------------------- */
/* Bestätigung: Kreis, Titel, Text, Ablauf und Knöpfe kommen nacheinander */
.ryno-anfrage-danke-titel,
.ryno-anfrage-danke-text,
.ryno-anfrage-ablauf-titel,
.ryno-anfrage-ablauf-liste li,
.ryno-anfrage-danke .ryno-anfrage-zusammenfassung,
.ryno-anfrage-danke-links {
  animation: ryno-anfrage-ein var(--ryno-dauer-lang) var(--ryno-bewegung) both;
}
.ryno-anfrage-danke-titel {
  animation-delay: 0.15s;
}
.ryno-anfrage-danke-text {
  animation-delay: 0.25s;
}
.ryno-anfrage-ablauf-titel {
  animation-delay: 0.4s;
}
.ryno-anfrage-ablauf-liste li:nth-child(1) {
  animation-delay: 0.5s;
}
.ryno-anfrage-ablauf-liste li:nth-child(2) {
  animation-delay: 0.6s;
}
.ryno-anfrage-ablauf-liste li:nth-child(3) {
  animation-delay: 0.7s;
}
.ryno-anfrage-danke .ryno-anfrage-zusammenfassung {
  animation-delay: 0.8s;
}
.ryno-anfrage-danke-links {
  animation-delay: 0.9s;
}
.ryno-anfrage-danke-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ryno-space-120);
  height: var(--ryno-space-120);
  margin-bottom: var(--ryno-space-40);
  border-radius: 50%;
  background-color: var(--ryno-color-accent);
  animation: ryno-anfrage-kreis var(--ryno-dauer-lang) var(--ryno-bewegung) both;
}
.ryno-anfrage-danke-icon svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: var(--ryno-color-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: ryno-anfrage-haken var(--ryno-dauer-lang) 0.3s var(--ryno-bewegung) forwards;
}
.ryno-anfrage-danke-titel {
  max-width: 900px;
  margin-bottom: var(--ryno-space-30);
}
.ryno-anfrage-danke-text {
  max-width: 900px;
  font-size: var(--ryno-font-text-xl);
  line-height: var(--ryno-line-text);
  overflow-wrap: anywhere;
}
.ryno-anfrage-danke .ryno-anfrage-zusammenfassung,
.ryno-anfrage-ablauf {
  max-width: 900px;
}
/* So geht es weiter: Linie, orange Nummer, Text wie bei „Das prüfen wir“ */
.ryno-anfrage-ablauf {
  margin-top: var(--ryno-space-60);
}
.ryno-anfrage-ablauf-titel {
  margin-bottom: var(--ryno-space-20);
  color: var(--ryno-color-dark);
}
.ryno-anfrage-ablauf-liste {
  display: grid;
  gap: var(--ryno-space-20);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 768px) {
  .ryno-anfrage-ablauf-liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ryno-space-30);
  }
}
.ryno-anfrage-ablauf-liste li {
  display: flex;
  flex-direction: column;
  gap: var(--ryno-space-10);
  padding-top: var(--ryno-space-15);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--ryno-color-dark);
}
.ryno-anfrage-ablauf-nr {
  color: var(--ryno-color-accent);
  font-size: var(--ryno-font-label);
  font-weight: 500;
  letter-spacing: var(--ryno-tracking-label);
}
.ryno-anfrage-danke-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ryno-space-20) var(--ryno-space-40);
  margin-top: var(--ryno-space-60);
}

@keyframes ryno-anfrage-ein {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ryno-anfrage-von-rechts {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ryno-anfrage-von-links {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ryno-anfrage-blende {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ryno-anfrage-hinweis {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ryno-anfrage-ein-kurz {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ryno-anfrage-kreis {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ryno-anfrage-haken {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung: alles erscheint sofort, der Haken ist gleich gezeichnet */
  .ryno-anfrage *,
  .ryno-anfrage *::before {
    animation: none !important;
    transition: none !important;
  }
  .ryno-anfrage-danke-icon svg {
    stroke-dashoffset: 0;
  }
}