/*
 * Sorgende Hand – Online-Aufnahme: Aussehen.
 * Alles hängt an .sh-aufnahme, damit das Theme (Hello Biz / Elementor) nicht hineinfunkt.
 * Große Schrift, große Flächen, klare Kontraste – gedacht auch für ältere Menschen am Handy.
 * Farben von der Website: Überschriften #423629, Akzent Türkis (für Knöpfe etwas dunkler, damit Weiß darauf gut lesbar bleibt).
 */
.sh-aufnahme {
  --sh-text: #423629;
  --sh-text2: #5b5348;
  --sh-akzent: #3b7473;
  --sh-akzent-dunkel: #2b5857;
  --sh-fokus: #1f5f5e;
  --sh-sand: #efece6;
  --sh-sand2: #f7f5f3;
  --sh-rand: #bfab90;
  --sh-rand-dunkel: #8f7c5c;
  --sh-fehler: #b3261e;
  --sh-fehler-bg: #fdecea;
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 40px;
  color: var(--sh-text);
  font-family: inherit;
  font-size: 18px;
  line-height: 1.55;
  text-align: left;
}
.sh-aufnahme *, .sh-aufnahme *::before, .sh-aufnahme *::after { box-sizing: border-box; }
.sh-aufnahme [hidden] { display: none !important; }

.sh-aufnahme .sh-nurlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sh-aufnahme .sh-honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Kopf: Fortschritt ---------- */
.sh-aufnahme .sh-kopf { margin: 0 0 1.2em; }
.sh-aufnahme .sh-schritt { margin: 0 0 .4em; font-weight: 600; color: var(--sh-text2); }
.sh-aufnahme .sh-balken { height: 10px; background: var(--sh-sand); border-radius: 10px; overflow: hidden; }
.sh-aufnahme .sh-balken span { display: block; height: 100%; width: 0; background: var(--sh-akzent); border-radius: 10px; transition: width .3s ease; }

/* ---------- Karte ---------- */
.sh-aufnahme .sh-form {
  background: #fff; border: 1px solid var(--sh-sand); border-radius: 18px;
  padding: 28px 28px 22px; box-shadow: 0 2px 14px rgba(66, 54, 41, .06);
}
.sh-aufnahme .sh-step:focus { outline: none; }

/* ---------- Texte ---------- */
.sh-aufnahme .sh-form h2, .sh-aufnahme .sh-fertig h2 { margin: 0 0 .5em; font-size: 1.6em; line-height: 1.25; font-weight: 600; color: var(--sh-text); }
.sh-aufnahme .sh-form h3, .sh-aufnahme .sh-fertig h3 { margin: 1.5em 0 .5em; font-size: 1.15em; line-height: 1.3; font-weight: 600; color: var(--sh-text); }
.sh-aufnahme p { margin: 0 0 1em; }
.sh-aufnahme .sh-klein { font-size: .9em; color: var(--sh-text2); }
.sh-aufnahme .sh-hilfe { margin: 0 0 .45em; font-size: .88em; line-height: 1.4; color: var(--sh-text2); }
.sh-aufnahme .sh-form a, .sh-aufnahme .sh-fertig a { color: var(--sh-akzent-dunkel); text-decoration: underline; }
.sh-aufnahme .sh-liste { margin: 0 0 .8em; padding-left: 1.3em; }
.sh-aufnahme .sh-liste li { margin: .3em 0; }
.sh-aufnahme .sh-block { margin: 0 0 1.2em; }
.sh-aufnahme .sh-block > h3:first-child { margin-top: 1.2em; }
.sh-aufnahme .sh-fragen { margin: 1.2em 0 0; text-align: center; }

.sh-aufnahme .sh-tipp, .sh-aufnahme .sh-hinweis {
  margin: 0 0 1.2em; padding: .9em 1.1em; border-radius: 8px; border-left: 6px solid var(--sh-rand); background: var(--sh-sand2);
}
.sh-aufnahme .sh-tipp { background: #eaf1ee; border-left-color: #003028; }

/* ---------- Felder ---------- */
.sh-aufnahme .sh-zeile { display: flex; flex-wrap: wrap; gap: 0 16px; }
.sh-aufnahme .sh-feld { margin: 0 0 1.2em; flex: 1 1 100%; min-width: 0; }
.sh-aufnahme .sh-feld--halb { flex: 1 1 240px; }
.sh-aufnahme .sh-feld--drittel { flex: 0 1 220px; }
.sh-aufnahme .sh-feld--zweidrittel { flex: 2 1 280px; }
.sh-aufnahme .sh-feld > label, .sh-aufnahme .sh-gruppe > legend {
  display: block; margin: 0 0 .25em; padding: 0; font-weight: 600; font-size: 1em; line-height: 1.35; color: var(--sh-text);
}
.sh-aufnahme .sh-pflicht { color: var(--sh-fehler); font-weight: 700; }

.sh-aufnahme .sh-feld input[type="text"],
.sh-aufnahme .sh-feld input[type="tel"],
.sh-aufnahme .sh-feld input[type="email"],
.sh-aufnahme .sh-feld textarea {
  display: block; width: 100%; min-height: 54px; margin: 0; padding: .6em .85em;
  font: inherit; line-height: 1.4; color: #1d1d1d; background: #fff;
  border: 2px solid var(--sh-rand-dunkel); border-radius: 10px; box-shadow: none; appearance: none; -webkit-appearance: none;
}
.sh-aufnahme .sh-feld textarea { min-height: 7.5em; resize: vertical; }
.sh-aufnahme .sh-feld input:focus, .sh-aufnahme .sh-feld textarea:focus {
  outline: 3px solid var(--sh-fokus); outline-offset: 2px; border-color: var(--sh-fokus);
}
.sh-aufnahme .sh-hatfehler > input, .sh-aufnahme .sh-hatfehler > textarea { border-color: var(--sh-fehler); background: var(--sh-fehler-bg); }
.sh-aufnahme .sh-fehler { margin: .4em 0 0; font-size: .92em; font-weight: 600; color: var(--sh-fehler); }
.sh-aufnahme .sh-fehler::before { content: "\26A0\FE0E  "; }
.sh-aufnahme .sh-gedimmt { opacity: .55; }

/* ---------- Auswahl (Radio / Häkchen) ---------- */
.sh-aufnahme .sh-gruppe { margin: 0 0 1.4em; padding: 0; border: 0; min-width: 0; }
.sh-aufnahme .sh-gruppe--kompakt { margin-bottom: 1em; }
.sh-aufnahme .sh-optionen { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-aufnahme .sh-optionen--stapel { flex-direction: column; }
.sh-aufnahme .sh-option {
  position: relative; display: flex; align-items: center; margin: 0; min-height: 54px;
  padding: .65em 1em; border: 2px solid var(--sh-rand); border-radius: 12px; background: #fff;
  font-weight: 400; color: var(--sh-text); cursor: pointer; line-height: 1.4;
}
.sh-aufnahme .sh-gruppe--kompakt .sh-option { min-height: 48px; padding: .45em .9em; }
.sh-aufnahme .sh-option:hover { border-color: var(--sh-rand-dunkel); }
.sh-aufnahme .sh-option.sh-gewaehlt { border-color: var(--sh-akzent); background: #eef5f4; }
.sh-aufnahme .sh-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sh-aufnahme .sh-option__text { display: block; position: relative; flex: 1; padding-left: 2.15em; }
.sh-aufnahme .sh-option__text strong { display: block; font-weight: 600; }
.sh-aufnahme .sh-option__text small { display: block; margin-top: .1em; font-size: .85em; color: var(--sh-text2); }
.sh-aufnahme .sh-option__text::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 1.4em; height: 1.4em;
  border: 2px solid var(--sh-rand-dunkel); border-radius: 50%; background: #fff;
}
.sh-aufnahme .sh-option--haken .sh-option__text::before { border-radius: 6px; }
.sh-aufnahme .sh-option input:checked + .sh-option__text::before {
  background: var(--sh-akzent); border-color: var(--sh-akzent); box-shadow: inset 0 0 0 4px #fff;
}
.sh-aufnahme .sh-option--haken input:checked + .sh-option__text::before { box-shadow: none; }
.sh-aufnahme .sh-option--haken input:checked + .sh-option__text::after {
  content: ""; position: absolute; left: .5em; top: .22em; width: .38em; height: .74em;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.sh-aufnahme .sh-option input:focus-visible + .sh-option__text::before { outline: 3px solid var(--sh-fokus); outline-offset: 3px; }
.sh-aufnahme .sh-optionen--karten .sh-option { padding: .9em 1.1em; }
.sh-aufnahme .sh-haken { margin: 0 0 .9em; }
.sh-aufnahme .sh-hatfehler > .sh-optionen .sh-option, .sh-aufnahme .sh-hatfehler > .sh-option { border-color: var(--sh-fehler); }

/* ---------- Knöpfe ---------- */
.sh-aufnahme .sh-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 56px;
  margin: 0; padding: .6em 1.9em; font: inherit; font-size: 1.05em; font-weight: 700; line-height: 1.2;
  letter-spacing: 0; text-transform: none; text-decoration: none; color: #fff;
  background: var(--sh-akzent); border: 2px solid var(--sh-akzent); border-radius: 100px; box-shadow: none; cursor: pointer;
}
.sh-aufnahme .sh-knopf:hover, .sh-aufnahme .sh-knopf:active { background: var(--sh-akzent-dunkel); border-color: var(--sh-akzent-dunkel); color: #fff; }
.sh-aufnahme .sh-knopf:focus-visible, .sh-aufnahme .sh-datei__waehlen:focus-within { outline: 3px solid var(--sh-fokus); outline-offset: 3px; }
.sh-aufnahme .sh-knopf[disabled] { opacity: .6; cursor: wait; }
.sh-aufnahme .sh-knopf--zweit { color: var(--sh-akzent-dunkel); background: #fff; }
.sh-aufnahme .sh-knopf--zweit:hover { color: #fff; }
.sh-aufnahme .sh-nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin: 1.8em 0 0; }
.sh-aufnahme .sh-weiter, .sh-aufnahme .sh-senden { margin-left: auto; }
.sh-aufnahme .sh-link {
  display: inline; min-height: 44px; margin: 0; padding: .4em .2em; font: inherit; font-weight: 600; color: var(--sh-akzent-dunkel);
  background: none; border: 0; text-decoration: underline; cursor: pointer; box-shadow: none; text-transform: none;
}
.sh-aufnahme .sh-link:hover { color: var(--sh-text); background: none; }

.sh-aufnahme .sh-fehlerbox {
  margin: 1.2em 0 0; padding: .8em 1em; font-weight: 600; color: #7a1a14;
  background: var(--sh-fehler-bg); border: 2px solid var(--sh-fehler); border-radius: 10px;
}
.sh-aufnahme .sh-fehlerbox:focus { outline: 3px solid var(--sh-fehler); outline-offset: 2px; }
.sh-aufnahme .sh-fortschritt { margin: 1em 0 0; font-weight: 600; text-align: center; }

/* ---------- Unterlagen ---------- */
.sh-aufnahme .sh-datei { margin: 0 0 1em; padding: 1em 1.1em; background: var(--sh-sand2); border: 2px dashed var(--sh-rand); border-radius: 12px; }
.sh-aufnahme .sh-datei.sh-hatfehler { border-color: var(--sh-fehler); }
.sh-aufnahme .sh-datei__titel { margin: 0 0 .15em; font-weight: 600; }
.sh-aufnahme .sh-datei__waehlen { margin: .3em 0 .2em; min-height: 52px; }
.sh-aufnahme .sh-datei__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sh-aufnahme .sh-dateiliste { list-style: none; margin: .4em 0 0; padding: 0; }
.sh-aufnahme .sh-dateiliste li { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .25em 0; border-bottom: 1px solid var(--sh-sand); word-break: break-word; }
.sh-aufnahme .sh-dateiliste:empty { display: none; }

/* ---------- Zusammenfassung ---------- */
.sh-aufnahme .sh-zus { margin: 0 0 1em; padding: .4em 1.1em .8em; background: #fff; border: 2px solid var(--sh-sand); border-radius: 12px; }
.sh-aufnahme .sh-zus__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.sh-aufnahme .sh-zus__kopf h3 { margin: .5em 0; }
.sh-aufnahme .sh-zus dl { display: grid; grid-template-columns: minmax(130px, 36%) 1fr; gap: .4em 1em; margin: 0; }
.sh-aufnahme .sh-zus dt { font-weight: 600; font-size: .92em; color: var(--sh-text2); }
.sh-aufnahme .sh-zus dd { margin: 0; white-space: pre-line; word-break: break-word; }
.sh-aufnahme .sh-datenschutz { max-height: none; margin: 0 0 1.2em; padding: .9em 1.1em .1em; background: var(--sh-sand2); border-radius: 10px; font-size: .92em; }

/* ---------- Danke ---------- */
.sh-aufnahme .sh-fertig { padding: 28px; background: #eaf1ee; border: 1px solid #c9ddd5; border-radius: 18px; }
.sh-aufnahme .sh-fertig:focus { outline: none; }
.sh-aufnahme .sh-referenz strong { font-size: 1.15em; letter-spacing: .03em; }

/* ---------- Handy ---------- */
@media (max-width: 600px) {
  .sh-aufnahme { font-size: 17px; }
  .sh-aufnahme .sh-form, .sh-aufnahme .sh-fertig { padding: 18px 16px 16px; border-radius: 14px; }
  .sh-aufnahme .sh-form h2, .sh-aufnahme .sh-fertig h2 { font-size: 1.4em; }
  .sh-aufnahme .sh-nav { flex-direction: column-reverse; }
  .sh-aufnahme .sh-knopf { width: 100%; }
  .sh-aufnahme .sh-weiter, .sh-aufnahme .sh-senden { margin-left: 0; }
  .sh-aufnahme .sh-zus dl { grid-template-columns: 1fr; gap: 0; }
  .sh-aufnahme .sh-zus dd { margin-bottom: .6em; }
  .sh-aufnahme .sh-feld--drittel { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-aufnahme .sh-balken span { transition: none; }
}