/* Zusätze fürs Kontaktformular: Auswahlliste und Terminwunsch */
form select {
  width: 100%; padding: 13px 40px 13px 14px; background: var(--bg-3); color: var(--text);
  border: 1px solid var(--linie); border-radius: 2px; font: inherit; font-size: 17px;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
form select:focus, form input[type=date]:focus, form input[type=time]:focus { border-color: var(--akzent); outline: none; }
form input[type=date], form input[type=time] {
  width: 100%; padding: 12px 14px; background: var(--bg-3); color: var(--text); border: 1px solid var(--linie);
  border-radius: 2px; font: inherit; font-size: 17px; min-height: 50px;
}
body:not(.thema-hell) form input, body:not(.thema-hell) form select { color-scheme: dark; }

.termin { border: 1px solid var(--linie); padding: 18px 18px 6px; margin: 4px 0 20px; }
.termin legend { padding: 0 8px; font-family: var(--head); text-transform: uppercase; letter-spacing: .1em; font-size: 16px; color: var(--akzent); }
.drei { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 12px; }
@media (max-width: 560px) { .drei { grid-template-columns: 1fr 1fr; } .drei .feld:first-child { grid-column: 1 / -1; } }
.termin2 { margin: 2px 0 12px; }
.termin2 summary { cursor: pointer; color: var(--akzent); font-size: 16px; list-style: none; display: inline-block; padding: 4px 0; }
.termin2 summary::-webkit-details-marker { display: none; }
.termin2[open] summary { margin-bottom: 10px; }
.termin2[open] summary::before { content: "Zweiter Terminvorschlag"; }
.termin2[open] summary { font-size: 0; }
.termin2[open] summary::before { font-size: 15px; color: var(--text-2); }
.termin .klein { font-size: 14px; color: var(--text-2); margin: 0 0 10px; }
.zwei .feld.breit { grid-column: 1 / -1; }
form input[type=number] { width: 100%; padding: 13px 14px; background: var(--bg-3); color: var(--text); border: 1px solid var(--linie); border-radius: 2px; font: inherit; font-size: 17px; }
form input[type=number]:focus { border-color: var(--akzent); outline: none; }