/* GeldProfi Formulare (A1654) — Hausstil Web „dunkel“ (Homepage/_Design/Hausstil Web.md)
   Werte aus geldprofi-web.css; hier nur die gebrauchten Variablen. Handy zuerst. */
@font-face {
  font-family: Satoshi;
  src: url("schrift/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --gp-buehne: #0B0907;
  --gp-buehne-tief: #050505;
  --gp-flaeche: #191613;
  --gp-feld: #221F1B;
  --gp-rand: #322614;
  --gp-linie: #2F2A25;
  --gp-text: #F3E3CA;
  --gp-leise: #9F9586;
  --gp-gold-schrift: #C98A2A;
  --gp-gold: #B4781C;
  --gp-gold-dunkel: #8A5A14;
  --gp-gold-ton: rgba(180,120,28,.14);
  --gp-knopf: #F3E3CA;
  --gp-knopf-schrift: #2B2621;
  --gp-knopf-hover: #FFFFFF;
  --gp-knopf2-rand: #8A5A14;
  --gp-knopf2-hover: rgba(180,120,28,.14);
  --gp-feld-rand: #6E6456;
  --gp-fokus: #C98A2A;
  --gp-gruen: #8FAF6F;
  --gp-gruen-ton: rgba(143,175,111,.14);
  --gp-rot: #C96A5A;
  --gp-rot-schrift: #D47B6A;
  --gp-rot-ton: rgba(201,106,90,.12);
  --gp-schriftart: Satoshi, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--gp-buehne); color: var(--gp-text);
  font-family: var(--gp-schriftart); font-size: 16px; line-height: 1.5;
  hyphens: auto; -webkit-hyphens: auto;
}
a { color: var(--gp-gold-schrift); text-decoration-color: var(--gp-gold-dunkel); text-underline-offset: 3px; }
a:hover { color: var(--gp-text); }
:focus-visible { outline: 3px solid var(--gp-fokus); outline-offset: 3px; }

.kopf { padding: 20px; }
.kopf img { display: block; height: 48px; width: auto; }
.blatt { max-width: 760px; margin: 0 auto; padding: 8px 20px 56px; }
.fuss { background: var(--gp-buehne-tief); color: var(--gp-leise); font-size: 14px; padding: 20px; text-align: center; }
.fuss a { color: var(--gp-leise); }

.ueberzeile { margin: 0 0 6px; color: var(--gp-gold-schrift); font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
h1 { margin: 0 0 10px; font-size: 24px; font-weight: 800; line-height: 1.15; }
.einleitung { margin: 0 0 24px; color: var(--gp-leise); font-size: 18px; }
.leise { color: var(--gp-leise); font-weight: 400; }
.klein { font-size: 14px; }

.kasten { background: var(--gp-flaeche); border: 1px solid var(--gp-rand); border-radius: 16px; padding: 18px 14px; }

.feld { margin: 0 0 18px; }
label, legend { display: block; font-weight: 700; margin: 0 0 6px; }
input[type=text], input[type=email], input[type=tel], textarea {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px;
  background: var(--gp-feld); color: var(--gp-text); border: 2px solid var(--gp-feld-rand); border-radius: 12px;
  font: 500 17px/1.4 var(--gp-schriftart);
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--gp-leise); opacity: 1; }
input:focus, textarea:focus { border-color: var(--gp-fokus); outline: none; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--gp-fokus); outline-offset: 3px; }
[aria-invalid=true] { border-color: var(--gp-rot) !important; }

fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
fieldset[aria-invalid=true] { border-left: 3px solid var(--gp-rot); padding-left: 10px; }
.option, .haken { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.option { background: var(--gp-feld); border: 2px solid var(--gp-feld-rand); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; }
.option:has(input:checked) { border-color: var(--gp-gold); background: var(--gp-gold-ton); }
.haken { padding: 7px 0; }
input[type=radio], input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 2px 0 0;
  width: 22px; height: 22px; border: 2px solid var(--gp-feld-rand); background: var(--gp-feld); display: grid; place-content: center;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox] { border-radius: 6px; }
input[type=radio]:checked { border-color: var(--gp-gold-schrift); }
input[type=radio]:checked::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gp-gold-schrift); }
input[type=checkbox]:checked { border-color: var(--gp-gold-schrift); background: var(--gp-gold-schrift); }
input[type=checkbox]:checked::before { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid var(--gp-buehne); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* Widerruf: je nach Wahl nur den passenden Teil zeigen (ohne JavaScript) */
.teil { border-top: 1px solid var(--gp-linie); padding-top: 16px; margin-top: 4px; }
form:not(:has(#art-einwilligung:checked)) .nur-einwilligung,
form:not(:has(#art-vertrag:checked)) .nur-vertrag,
form:has(#art-vertrag:checked) .nur-einwilligung-inline { display: none; }
.muster { margin: 0 0 12px; font-style: italic; color: var(--gp-leise); }

.knopf, .knopf2 {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px;
  border-radius: 12px; font: 700 16px/1.2 var(--gp-schriftart); text-decoration: none; cursor: pointer;
}
.knopf { width: 100%; border: 0; background: var(--gp-knopf); color: var(--gp-knopf-schrift); }
.knopf:hover { background: var(--gp-knopf-hover); }
.knopf2 { border: 2px solid var(--gp-knopf2-rand); background: transparent; color: var(--gp-text); margin-top: 8px; }
.knopf2:hover { background: var(--gp-knopf2-hover); color: var(--gp-text); }
.unter-knopf { margin: 12px 0 0; font-size: 14px; color: var(--gp-leise); text-align: center; }

.warnung { background: var(--gp-rot-ton); border: 1px solid var(--gp-rot); border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; }
.warnung ul { margin: 6px 0 0; padding-left: 20px; }
.erfolg-kasten { border-left: 5px solid var(--gp-gruen); }
.nebenbei { margin: 24px 0 0; color: var(--gp-leise); font-size: 15px; }

/* Verstecktes Feld gegen Roboter: fuer Menschen unsichtbar, fuer Vorleseprogramme ausgeblendet */
.weg { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 760px) {
  .kopf { padding: 24px 32px; }
  .blatt { padding: 16px 32px 96px; }
  h1 { font-size: 28px; }
  .einleitung { font-size: 20px; }
  .kasten { padding: 24px; }
  .knopf { width: auto; min-width: 240px; }
  .unter-knopf { text-align: left; }
}