/* Was die Unterseiten von honeypod.io teilen, über seite.css hinaus:
   Abstand unter dem schwebenden Kopf, der Kopf einer Unterseite, Karten und
   Formularfelder. Farben und Leiter kommen aus seite.css, hier entsteht
   kein eigener Farbwert. */

/* Der Kopf schwebt 16 Pixel unter dem Rand und ist 60 hoch. Darunter
   beginnt der Inhalt mit Luft, am Telefon mit weniger. */
.unterseite {
  padding-top: clamp(112px, 98.63px + 3.429vw, 148px);
  padding-bottom: var(--abstand);
  min-height: 70vh;
}

.seiten-kopf { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.seiten-kopf .h1, .seiten-kopf .h2 { margin: 0; }
.seiten-kopf .leit { max-width: 620px; }
.seiten-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.karte-flaeche {
  border-radius: 24px;
  background: var(--flaeche);
  box-shadow: 0 0 0 1px var(--linie);
  padding: clamp(22px, 17.54px + 1.143vw, 34px);
}

/* ── Formular ─────────────────────────────────────────────── */
.feld { display: flex; flex-direction: column; gap: 7px; }
.feld-name { font-size: 13px; font-weight: 600; color: var(--text); }
.feld-name small { font-size: 13px; font-weight: 400; color: var(--text-2); }
.eingabe {
  width: 100%;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--spur);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--linie);
  font: inherit;
  font-size: 16px;
  transition: box-shadow 200ms var(--kurve);
}
.eingabe::placeholder { color: var(--text-3); opacity: 1; }
.eingabe:hover { box-shadow: inset 0 0 0 1px var(--glas-kante); }
.eingabe:focus { outline: none; box-shadow: inset 0 0 0 1px var(--text), 0 0 0 3px color-mix(in srgb, var(--fokus) 35%, transparent); }
textarea.eingabe {
  height: auto; min-height: 112px; padding: 13px 18px; border-radius: 22px;
  line-height: 1.5; resize: vertical;
}
select.eingabe {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a4ab' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
/* Solange „Bitte wählen" steht, sieht die Auswahl aus wie ein Platzhalter. */
select.eingabe:has(option[value=""]:checked) { color: var(--text-3); }
/* Der Pfeil ist ein Bild und kennt keine Variablen. Im hellen Thema steht
   er deshalb in --text-2 des hellen Themas. */
:root[data-thema="hell"] select.eingabe {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234e5157' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select.eingabe option { color: var(--text); background: var(--flaeche); }

@media (prefers-reduced-motion: reduce) {
  .eingabe { transition: none; }
}