/* ============================================================
   PARTNER — nur was diese Seite allein braucht

   Herausgelöst aus dem <style>-Block der Seite. Was hier steht und auch
   anderswo gebraucht wird, gehört nach bausteine.css; was Farbe, Abstand
   oder Dauer festlegt, gehört an ein Token in stil.css.
   ============================================================ */


main{max-width:720px;margin:0 auto;padding:64px 28px 96px}
main h1{font-size:clamp(30px,5vw,46px);letter-spacing:-.025em;margin:8px 0 14px}
.lead{color:var(--text-mute);font-size:17.5px;margin:0 0 40px;max-width:60ch}

.wofuer{border:1px solid var(--linie);border-radius:var(--r-mittel);padding:26px 28px;margin-bottom:40px}
.wofuer h2{font-size:17px;margin-bottom:16px}
.wofuer ul{margin:0;padding-left:20px}
.wofuer li{color:var(--text-mute);font-size:15px;margin-bottom:9px}
.wofuer li:last-child{margin-bottom:0}

.feld textarea{
  width:100%;background:var(--flaeche);color:var(--text);
  border:1px solid var(--linie);border-radius:var(--r-klein);padding:12px 14px;
  font-family:var(--ff-body);font-size:16px;line-height:1.55;
  min-height:170px;resize:vertical;transition:border-color var(--d-kurz);
}
.feld textarea:focus{outline:none;border-color:var(--schild)}
.feld select{
  width:100%;background:var(--flaeche);color:var(--text);
  border:1px solid var(--linie);border-radius:var(--r-klein);padding:12px 14px;
  font-family:var(--ff-body);font-size:16px;
}
.feld select:focus{outline:none;border-color:var(--schild)}

/* Der Honigtopf. Nicht `display:none` — manche Automaten überspringen
   verborgene Felder gezielt. So steht er im Baum, ist bedienbar, aber für
   Menschen unsichtbar und für Vorleseprogramme ausdrücklich ausgenommen. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.hinweis-datenschutz{
  font-size:13.5px;color:var(--text-leise);margin:18px 0 0;line-height:1.6;
}
@media (max-width:640px){
  main{padding:40px 20px 72px}
  .wofuer{padding:20px 20px}
}