/* =========================================================================
   Rückruf-Formular «Noch Fragen? Wir rufen dich zurück» (Noel, 04.11.2026)
   Weisse Felder mit klarem Fokus-Ring, keine Einblend-Bewegung am Formular
   (sonst schliesst der Browser seinen Autofill-Vorschlag). Farben und Radien
   aus d4u.css, die Meditationsseite übernimmt ihre Akzentfarbe über --rr-akzent.
   ========================================================================= */
.rr{--rr-akzent:var(--navy)}
.rr-form[hidden],.rr-danke[hidden]{display:none}  /* sonst hebelt display:grid das hidden aus */
.thema-medi .rr{--rr-akzent:var(--violett,var(--navy))}

.rr-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:clamp(28px,4vw,40px);
  padding:clamp(22px,4vw,36px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.rr-breit{grid-column:1/-1}
.rr-feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.rr-feld label{font-weight:600;font-size:.95rem;color:var(--navy-900)}
.rr-optional{font-weight:400;color:var(--text-mute)}

.rr-form input[type="text"],.rr-form input[type="tel"],.rr-form input[type="email"],.rr-form select,.rr-form textarea{
  width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:1rem;color:var(--navy-900);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-s);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.rr-form textarea{min-height:96px;resize:vertical}
.rr-form select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232C4A6E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.rr-form input:focus,.rr-form select:focus,.rr-form textarea:focus{outline:none;border-color:var(--rr-akzent);box-shadow:0 0 0 3px rgba(44,74,110,.18)}
.thema-medi .rr-form input:focus,.thema-medi .rr-form select:focus,.thema-medi .rr-form textarea:focus{box-shadow:0 0 0 3px rgba(110,90,138,.2)}
.rr-form [aria-invalid="true"]{border-color:#C0392B}

.rr-tel{display:grid;grid-template-columns:minmax(118px,32%) minmax(0,1fr);gap:10px}

.rr-check{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.5;color:var(--text);cursor:pointer}
.rr-check input{flex:0 0 auto;width:22px;height:22px;margin-top:1px;accent-color:var(--rr-akzent);cursor:pointer}
.rr-check a{color:var(--rr-akzent);text-decoration:underline;text-underline-offset:2px}

.rr-hinweis{margin:0;font-size:.88rem;color:#B03A2E}
.rr-hp{display:none}

.rr-senden{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px}
.rr-senden .btn{flex-direction:column;gap:3px;line-height:1.2;min-width:min(100%,320px)}
.rr-senden .btn small{font-size:.78em;font-weight:500;opacity:.82}
.rr-senden .btn[aria-busy="true"]{opacity:.7;cursor:progress}
.rr-fehler{margin:0;text-align:center;font-size:.95rem;color:#B03A2E}
.nw{white-space:nowrap}

.rr-danke{margin-top:clamp(28px,4vw,40px);padding:clamp(26px,4vw,40px);text-align:center;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);outline:none}
.rr-danke h3{margin:0 0 10px}
.rr-danke p{margin:0 auto;max-width:46ch;color:var(--text)}

@media (max-width:640px){
  .rr-form{grid-template-columns:minmax(0,1fr);gap:16px}
  .rr-tel{grid-template-columns:minmax(104px,38%) minmax(0,1fr)}
}