/* Eingabefelder mit Rahmen und schwebender Beschriftung – ein Maß für alle Seiten (Höhe wie die schwebenden Felder in Bootstrap: 3,5rem + 2px). */
:root, .fl, .fl-solo { --fl-h: calc(3.5rem + 2px); --fl-bg: var(--sheet, #fff); --fl-border: var(--line-strong, #b9c4be); --fl-ink: var(--ink, #1b2a2f); --fl-muted: var(--slate, #52625f); --fl-focus: var(--green, #0f5c4d); }
.fl { position: relative; display: block; min-width: 0; }
div.fl { margin: 12px 0 4px; }
.fl > input, .fl > select, .fl > textarea, .fl > output, .fl-solo {
  display: block; width: 100%; height: var(--fl-h); min-height: var(--fl-h); margin: 0; padding: 1.55rem .8rem .5rem; font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.3;
  color: var(--fl-ink); background-color: var(--fl-bg); border: 1px solid var(--fl-border); border-radius: var(--radius, 8px); box-shadow: none; }
.fl-solo { padding: .9rem .8rem; }
.fl > select { padding-right: 2.2rem; }
.fl > textarea { height: auto; min-height: calc(var(--fl-h) + 2.4rem); padding-top: 1.75rem; resize: vertical; }
.fl > input[type="file"] { padding-top: 1.45rem; font-size: .92rem; }
.fl > output { overflow: hidden; }
.fl > input:focus, .fl > select:focus, .fl > textarea:focus, .fl-solo:focus { border-color: var(--fl-focus); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-focus) 22%, transparent); }
.fl > [readonly] { background-color: var(--paper, #f3f5f2); }
.fl > .fl-l {
  position: absolute; top: 1px; left: 1px; right: 1px; margin: 0; padding: 1.02rem .8rem 0; font-size: 1rem; font-weight: 400; line-height: 1.3; color: var(--fl-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: font-size .12s ease, padding .12s ease; border-radius: var(--radius, 8px) var(--radius, 8px) 0 0; }
/* Beschriftung oben: beim Schreiben, bei ausgefülltem Feld und bei Feldern, die nie leer aussehen (Auswahl, Datum, Datei). */
.fl:focus-within > .fl-l, .fl > :not(:placeholder-shown) ~ .fl-l, .fl > :-webkit-autofill ~ .fl-l { font-size: .78rem; padding-top: .42rem; font-weight: 500; letter-spacing: .01em; }
.fl:focus-within > .fl-l { color: var(--fl-focus); }
.fl > textarea ~ .fl-l { right: 14px; padding-bottom: .15rem; background: var(--fl-bg); }
.fl > textarea[readonly] ~ .fl-l { background: var(--paper, #f3f5f2); }
.fl > select ~ .fl-l { right: 2rem; }
/* Beispieltext erst zeigen, wenn die Beschriftung Platz gemacht hat. */
.fl > .fl-ph::placeholder { color: transparent; }
.fl > .fl-ph:focus::placeholder { color: color-mix(in srgb, var(--fl-muted) 75%, transparent); }
.fl > .fl-h { display: block; margin: 4px 2px 0; font-size: .8rem; font-weight: 400; line-height: 1.35; color: var(--fl-muted); }
/* Textbausteine: Symbol am rechten Rand des Feldes; das Feld lässt dafür Platz, bei mehrzeiligen Feldern auch für die Bildlaufleiste. */
.fl > .snip-btn { position: absolute; top: 12px; right: 10px; z-index: 2; float: none; margin: 0; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--fl-border); border-radius: var(--radius, 8px); background: var(--fl-bg); color: var(--fl-focus); text-decoration: none; cursor: pointer; }
.fl > .snip-btn:hover, .fl > .snip-btn:focus-visible { background: var(--fl-focus); border-color: var(--fl-focus); color: #fff; outline: 0; }
.fl > input.has-snip { padding-right: 54px; }
.fl > textarea.has-snip { padding-right: 70px; }
.fl > .snip-btn:has(+ textarea) { right: 24px; top: 10px; }
.fl > textarea.has-snip ~ .fl-l { right: 66px; }
.fl > input.has-snip ~ .fl-l { right: 50px; }
@media (prefers-reduced-motion: reduce) { .fl > .fl-l { transition: none; } }
.fl > input:focus, .fl > textarea:focus, .fl > select:focus { background-color: var(--fl-bg); }