/* ContForm — öffentliches Formular (das Gesicht des Produkts).
   Markup-Kontrakt: siehe render_field() in lib/bootstrap.php.
   Die Akzentfarbe kommt pro Formular als --accent auf .bform-card.

   Responsive-Grundsatz: fließende Größen über clamp() statt harter Sprünge,
   ein einziger Umbruchpunkt (560px) für „zweispaltig → einspaltig". Nirgends
   wird waagerecht gescrollt — lange Inhalte brechen um.

   Gestaltungs-Grundsatz: eine einzige Strichstärke (1.5px) trägt Felder,
   Kästchen und Rahmen — dieselbe Hand über das ganze Formular. Alle Farben
   stammen aus den Tokens oder werden per color-mix() daraus abgeleitet,
   damit die zehn Farbwelten und die freie Akzentfarbe von selbst mitziehen.

   Diese Datei lädt NACH themes.css. Deshalb übernimmt sie die dort gesetzten
   Stellschrauben ausdrücklich (--feld-bg, --feld-radius, --knopf-radius,
   --titel-scale) — sonst überschriebe sie die gewählte Vorlage. */

body.bform-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 4vw, 48px) clamp(12px, 4vw, 28px) clamp(28px, 5vw, 48px);
}

.bform-card {
  --accent: var(--green);
  /* fließende Abstandsleiter: gilt für Felder, Absätze und den Absendebereich */
  --bf-gap-y: clamp(1.05rem, .85rem + .9vw, 1.45rem);
  --bf-gap-x: clamp(.85rem, .7rem + .7vw, 1.15rem);
  /* Tiefe des Bogens am Kartenkopf */
  --bf-arc: clamp(9px, 2vw, 14px);
  width: 100%;
  max-width: 660px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card), var(--kante);
  padding: clamp(24px, 5.5vw, 44px) clamp(20px, 5vw, 40px) clamp(26px, 5vw, 40px);
  position: relative;
  overflow: hidden;
  /* ein einziges Erbstück statt Dutzender Einzelregeln: nichts läuft aus der Karte */
  overflow-wrap: break-word;
}

/* Das Zeichen am Kartenkopf: die Sehne (gerade, kräftig) und der Bogen
   (dünn, gespannt), die sich in den beiden oberen Ecken treffen. Der Bogen ist
   eine halbe Ellipse — nur die untere Kante eines Kastens wird gezeichnet, mit
   waagerechtem Radius von halber Breite und senkrechtem Radius voller Höhe.
   Dadurch läuft die Linie von Ecke zu Ecke und hängt in der Mitte am tiefsten
   durch. Zwei Striche, kein Farbfeld: das trägt jede der zehn Farbwelten und
   jede freie Akzentfarbe. (.bcd-flach blendet beides aus — dort gibt es keine
   Karte, an der die Sehne spannen könnte; siehe themes.css.) */
.bform-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  pointer-events: none;
}
.bform-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--bf-arc);
  border-bottom: 1.5px solid var(--accent);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  opacity: .5;
  pointer-events: none;
}

.bform__title {
  /* Größe und Schnitt folgen dem gewählten Schriftpaar (themes.css):
     Serifen tragen bei gleicher Größe kleiner auf, Monospace breiter. */
  font-size: calc(clamp(1.5rem, 1.18rem + 1.5vw, 1.95rem) * var(--titel-scale, 1));
  font-weight: var(--titel-weight, 650);
  letter-spacing: -.018em;
  margin-bottom: .3em;
}
.bform__desc {
  color: var(--ink-soft);
  max-width: 52ch;               /* angenehme Zeilenlänge (~65 Zeichen) auf breiten Schirmen */
  margin-bottom: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  white-space: pre-line;
}

.bform__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bf-gap-y) var(--bf-gap-x);
  margin: 0 0 clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
}
.bfield { grid-column: 1 / -1; min-width: 0; }
.bfield--half { grid-column: span 1; }
/* Bedingte Felder: Verstecken muss die Rasterregeln schlagen. Ohne diese Zeile
   bliebe ein ausgeblendetes Feld sichtbar, sobald hier je display gesetzt wird. */
.bfield[hidden],
.bform__heading[hidden],
.bform__text[hidden] { display: none !important; }
@media (max-width: 560px) {
  .bfield--half { grid-column: 1 / -1; }
}
/* Zwei halbe Felder nebeneinander: die Eingabefelder stehen auf einer Linie,
   auch wenn ein Beschriftungstext umbricht oder nur eines einen Hinweis hat.
   Der freie Platz sammelt sich unter der Beschriftung, nie zwischen Hinweis
   und Feld — Zusammengehöriges bleibt beieinander.
   Nur wenn alle halben Felder einzeilige Bedienelemente haben: neben einer
   halbhohen Auswahlliste würde ein Eingabefeld sonst nach unten wegrutschen. */
@media (min-width: 561px) {
  .bform__fields:not(:has(.bfield--half:is(.bfield--checkboxes, .bfield--radio,
    .bfield--checkbox, .bfield--rating, .bfield--textarea, .bfield--file))) .bfield--half {
    display: flex;
    flex-direction: column;
  }
  .bform__fields:not(:has(.bfield--half:is(.bfield--checkboxes, .bfield--radio,
    .bfield--checkbox, .bfield--rating, .bfield--textarea, .bfield--file))) .bfield--half > .bfield__label + * {
    margin-top: auto;
  }
}

/* Zwischenüberschrift: trennt Abschnitte, ohne oben ins Leere zu greifen.
   Die Trennlinie ist ein Haarstrich in --line, dessen erste 28 Pixel die
   Akzentfarbe tragen — ein gesetzter Reiter statt einer zweiten Linie.
   Beides steckt in einem einzigen Verlauf auf einem 1px hohen Element, damit
   keine halben Pixel entstehen. */
.bform__heading {
  grid-column: 1 / -1;
  position: relative;
  font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem);
  font-weight: var(--titel-weight, 650);
  letter-spacing: -.012em;
  margin: clamp(.5rem, 1vw, .9rem) 0 0;
  padding-top: clamp(.9rem, .65rem + 1.1vw, 1.35rem);
}
.bform__heading::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background-image: linear-gradient(90deg, var(--accent) 0 28px, var(--line) 28px);
}
.bform__heading:first-child {
  margin-top: 0;
  padding-top: 0;
}
.bform__heading:first-child::before { display: none; }

/* Hinweistext: als Randnotiz gesetzt. Der Haarstrich links trennt ihn von den
   Beschriftungen darüber und darunter — ohne eine weitere Schriftgröße oder
   Farbe einzuführen. */
.bform__text {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 56ch;
  margin: 0;
  padding-left: clamp(.7rem, 2vw, .95rem);
  border-left: 1.5px solid var(--line);
}

.bfield__label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
  letter-spacing: -.006em;
  color: var(--ink);
  margin-bottom: .4rem;
}
/* Das Sternchen ist eine Fußnote, kein Ausruf: eine Spur kleiner und höher
   gesetzt, damit es die Beschriftung nicht anschiebt. */
.bfield__req {
  color: var(--accent);
  font-weight: 700;
  font-size: .9em;
  vertical-align: .12em;
  margin-left: .06em;
}
.bfield__help {
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: -.15rem 0 .45rem;
}
.bfield__error {
  font-size: .85rem;
  line-height: 1.4;
  color: var(--red);
  font-weight: 600;
  margin: .4rem 0 0;
}

/* Eingabefeld: ruhige Ruhelage, klarer Fokus, kein Springen. Beim Fokus
   wechselt der Untergrund auf die Kartenfarbe — das Feld hebt sich vom Papier
   ab, ohne seine Maße zu ändern; der Ring liegt im Schatten, nicht im Rahmen. */
.bfield__input {
  width: 100%;
  max-width: 100%;
  font: 400 1rem/1.45 var(--font-body);   /* 16px: iOS zoomt sonst beim Antippen */
  color: var(--ink);
  background: var(--feld-bg, #FBFAF7);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--feld-radius, 10px);
  padding: .75em .875em;                  /* 12px / 14px bei 16px Schrift */
  transition:
    border-color .18s var(--ease),
    background-color .18s var(--ease),
    box-shadow .18s var(--ease);
}
/* Der Platzhalter darf leichter stehen als eine Eingabe, muss aber lesbar
   bleiben: 88 % der weichen Tinte halten den Kontrast über 4.5:1. */
.bfield__input::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 88%, transparent);
}
textarea.bfield__input {
  resize: vertical;
  min-height: clamp(96px, 76px + 6vw, 132px);
}
@media (hover: hover) {
  .bfield__input:hover:not(:focus) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line-strong));
  }
}
.bfield__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.bfield--error .bfield__input { border-color: var(--red); }
.bfield--error .bfield__input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

/* Auswahlliste: das Systemdreieck fällt aus jeder Vorlage heraus. Der eigene
   Winkel besteht aus zwei Verlaufsstreifen — zwei 7px-Kästchen, die sich
   genau an der Spitze treffen, mit derselben 1.5px-Strichstärke wie alle
   Rahmen. Die Farbe steckt in --pfeil und springt beim Fokus auf den Akzent,
   ganz wie das Symbol im Kurztextfeld. */
select.bfield__input {
  --pfeil: var(--ink-soft);
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2em;
  background-image:
    linear-gradient(45deg,  transparent calc(50% - .75px), var(--pfeil) calc(50% - .75px),
                            var(--pfeil) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(-45deg, transparent calc(50% - .75px), var(--pfeil) calc(50% - .75px),
                            var(--pfeil) calc(50% + .75px), transparent calc(50% + .75px));
  background-size: 7px 7px;
  background-position: right 15px center, right 8px center;
  background-repeat: no-repeat;
}
select.bfield__input:focus { --pfeil: var(--accent); }
.bfield--error select.bfield__input { --pfeil: var(--red); }

/* Dunkle Vorlagen: Datumswähler, Auswahlliste und Bildlaufleisten kommen vom
   Betriebssystem. Eine Zeile stellt sie auf dunkel um — sonst blitzt ein
   weißes Fenster aus der ruhigen Nacht heraus. */
.bth-nacht, .bth-kupfer { color-scheme: dark; }

/* Kurztext mit gewählter Art: Symbol links im Feld. Der Innenabstand wächst
   entsprechend, damit der Text nicht unter dem Symbol beginnt. */
.binput { position: relative; display: flex; align-items: center; }
.binput .bfield__input { padding-left: 2.75em; }
.binput__icon {
  position: absolute;
  left: 14px;                      /* auf einer Senkrechten mit dem Textbeginn */
  width: 17px;
  height: 17px;
  color: color-mix(in srgb, var(--ink-soft) 82%, transparent);
  pointer-events: none;
  transition: color .18s var(--ease);
}
.binput:focus-within .binput__icon { color: var(--accent); }
.bfield--error .binput__icon { color: var(--red); }

/* Auswahl-Optionen: ganze Zeile ist Tippfläche (≥ 40px hoch). Die gewählte
   Zeile bekommt einen Hauch Akzent — man sieht die eigene Antwort, ohne dass
   die Schrift ihr Gewicht ändert und die Zeile umbricht. */
.bfield__choices { display: flex; flex-direction: column; gap: .1rem; }
.bchoice {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
  padding: .55rem .5rem;
  margin-inline: -.5rem;         /* Kästchen bleibt bündig mit den Eingabefeldern */
  border-radius: var(--feld-radius, 10px);
  transition: background-color .18s var(--ease);
}
@media (hover: hover) {
  .bchoice:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
}
/* Am Finger darf keine Zeile unter 44px liegen */
@media (pointer: coarse) {
  .bchoice { padding-block: .7rem; }
}
.bchoice:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.bchoice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
/* 20px Kästchen, 1.5px Strich — dieselbe Hand wie bei den Eingabefeldern.
   Der Innenabstand ist ganzzahlig: (1.5em − 20px) / 2 = 2px. */
.bchoice__box {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: calc((1.5em - 20px) / 2);   /* sitzt auf der ersten Zeile, auch mehrzeilig */
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--feld-bg, #FBFAF7);
  position: relative;
  transition:
    border-color .18s var(--ease),
    background-color .18s var(--ease),
    box-shadow .18s var(--ease);
}
.bchoice__text { min-width: 0; }
.bchoice input[type="radio"] + .bchoice__box { border-radius: 50%; }
@media (hover: hover) {
  .bchoice:hover .bchoice__box { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
}
.bchoice input:checked + .bchoice__box {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 1px 3px -1px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Häkchen: 45° statt 42° — der Winkel liegt auf dem Raster, die Arme sind
   gleich stark wie die Rahmen (2px auf 20px Kästchen). */
.bchoice input[type="checkbox"]:checked + .bchoice__box::after {
  content: '';
  position: absolute;
  left: 6px; top: 3px;
  width: 5px; height: 9px;
  /* Weiß, nicht --card: die Akzentfarbe wird frei gewählt, und Weiß auf
     Akzent ist im ganzen Formular der verlässliche Kontrast (Knopf, Blase). */
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bchoice input[type="radio"]:checked + .bchoice__box::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
}
.bchoice input:focus-visible + .bchoice__box {
  outline: 3px solid var(--marker);
  outline-offset: 2px;
}
.bchoice--single { font-weight: 500; }
.bfield--error .bchoice__box { border-color: var(--red); }

/* Datei-Upload: Ablagefeld mit Knopf. Schmal = Knopf oben, Dateiname darunter,
   damit ein langer Name die volle Breite bekommt und der Knopf erreichbar bleibt. */
.bfield__file {
  display: block;
  width: 100%;
  font: 400 1rem/1.45 var(--font-body);   /* 16px: kein iOS-Zoom beim Antippen */
  color: var(--ink-soft);
  background: var(--feld-bg, #FBFAF7);
  border: 1.5px dashed color-mix(in srgb, var(--line-strong) 85%, transparent);
  border-radius: var(--feld-radius, 10px);
  padding: .6em .75em;
  cursor: pointer;
  overflow: hidden;                        /* langer Dateiname bleibt im Feld */
  text-overflow: ellipsis;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.bfield__file::file-selector-button {
  font: 600 .95rem/1.2 var(--font-body);
  letter-spacing: -.004em;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--knopf-radius, 999px);
  padding: .58em 1.2em;
  min-height: 40px;
  margin: 0 .7em 0 0;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.bfield__file::-webkit-file-upload-button {
  font: 600 .95rem/1.2 var(--font-body);
  letter-spacing: -.004em;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--knopf-radius, 999px);
  padding: .58em 1.2em;
  min-height: 40px;
  margin: 0 .7em 0 0;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.bfield__file:hover::file-selector-button {
  background: color-mix(in srgb, var(--accent) 88%, var(--ink));
}
.bfield__file:hover::-webkit-file-upload-button {
  background: color-mix(in srgb, var(--accent) 88%, var(--ink));
}
@media (max-width: 560px) {
  .bfield__file { padding: .65em .7em .7em; }
  .bfield__file::file-selector-button {
    display: block;
    width: 100%;
    margin: 0 0 .5em;
  }
  .bfield__file::-webkit-file-upload-button {
    display: block;
    width: 100%;
    margin: 0 0 .5em;
  }
}
.bfield__file:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--feld-bg, #FBFAF7));
}
.bfield__file:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.bfield--error .bfield__file { border-color: var(--red); }

/* Bereits übertragene Datei: Symbol links, Name und Größe rechts untereinander —
   ein langer Name bricht sauber um, statt die Größe wegzudrücken. */
.bfile__have {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: .55em;
  row-gap: .1em;
  font-size: .92rem;
  line-height: 1.4;
  /* aus dem Akzent abgeleitet statt fest grün: die Datei gehört sichtbar zu
     diesem Formular, egal welche Farbe es trägt */
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: var(--feld-radius, 10px);
  padding: .6em .75em;
  margin: 0 0 .55rem;
}
.bfile__have svg {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  margin-top: .12em;
  color: var(--accent);
}
.bfile__name {
  grid-column: 2;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bfile__size {
  grid-column: 2;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: .8rem;
}
.bfile__hint { margin: .5rem 0 0; }

/* Gesammelte Dateien: bereits übertragene und frisch gewählte in einer Liste.
   Aufbau je Zeile: Symbol | Name / Größe | Entfernen. */
.bfiles {
  list-style: none;
  margin: 0 0 .55rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.bfiles[hidden] { display: none; }
.bfiles__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .55em;
  row-gap: .1em;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: var(--feld-radius, 10px);
  padding: .45em .5em .45em .75em;
  font-size: .92rem;
  line-height: 1.4;
}
.bfiles__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.bfiles__name {
  grid-column: 2;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bfiles__size {
  grid-column: 2;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: max(.75rem, 12px);
}
.bfiles__del {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.bfiles__del svg { width: 15px; height: 15px; }
.bfiles__del:hover { background: var(--red-tint); color: var(--red); }
@media (pointer: coarse) {
  .bfiles__del { width: 44px; height: 44px; }
}

/* Bewertung: fünf Sterne teilen sich eine feste Breite — je Stern bleibt ein
   Tippziel von mindestens 44px, auch auf 320px. */
.bstars {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(2px, 1vw, 8px);
  max-width: min(100%, 17rem);
}
.bstars__star {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.bstars__star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Ungewählt ist der Stern eine gezogene Kontur, keine graue Fläche: feiner —
   und er trägt auf hellen wie auf dunklen Vorlagen, weil die Linie aus einem
   Token kommt statt aus einem festen Grau. */
.bstars__star svg {
  width: clamp(28px, 8.5vw, 34px);
  height: auto;
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill .18s var(--ease), stroke .18s var(--ease), transform .18s var(--ease);
}
.bstars__star:hover svg { transform: scale(1.06); }
.bstars__star:active svg { transform: scale(.98); }
.bstars__star:hover svg,
.bstars__star:has(~ .bstars__star:hover) svg,
.bstars__star:has(input:checked) svg,
.bstars__star:has(~ .bstars__star input:checked) svg {
  fill: var(--marker);
  /* dunklerer Rand auf hellem Papier, hellerer auf dunklem — eine Formel
     statt zweier fester Farben */
  stroke: color-mix(in srgb, var(--marker) 74%, var(--ink));
}
@media (prefers-reduced-motion: reduce) {
  .bstars__star:hover svg,
  .bstars__star:active svg { transform: none; }
}
.bstars__star input:focus-visible ~ svg {
  outline: 3px solid var(--marker);
  outline-offset: 2px;
  border-radius: 4px;
}
.bstars__star:has(input:focus-visible) {
  outline: 3px solid var(--marker);
  outline-offset: -1px;
}
.bstars__star:has(input:focus-visible) svg { outline: none; }

/* Absenden. Der Knopf trägt einen aus dem Akzent gemischten Schatten — er
   liegt auf dem Papier, statt darauf gedruckt zu sein. Beim Zeigen dunkelt er
   nicht per filter nach (das trübt auch die Schrift), sondern mischt sich
   Richtung Tinte: auf dunklen Vorlagen wird er dadurch heller, wie es sich
   dort gehört. */
.bform__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font: 600 clamp(1rem, .97rem + .2vw, 1.08rem)/1.2 var(--font-body);
  letter-spacing: -.006em;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--knopf-radius, 999px);
  min-height: 50px;
  padding: .8em 1.9em;
  cursor: pointer;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent),
    0 10px 22px -14px color-mix(in srgb, var(--accent) 80%, transparent);
  transition:
    background-color .18s var(--ease),
    box-shadow .18s var(--ease),
    transform .1s var(--ease);
}
.bform__submit:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--ink));
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--accent) 34%, transparent),
    0 14px 26px -14px color-mix(in srgb, var(--accent) 90%, transparent);
}
.bform__submit:active { transform: translateY(1px); }
.bform__submit[disabled] { opacity: .6; cursor: wait; box-shadow: none; }
@media (max-width: 560px) {
  .bform__submit { width: 100%; }
}

/* Fehlermeldung über dem Formular: der senkrechte Strich links macht sie zur
   Randbemerkung des Bogens, statt zum roten Kasten. */
.bform__toperror {
  background: var(--red-tint);
  color: var(--red);
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.45;
  border-radius: var(--feld-radius, 10px);
  border-left: 3px solid var(--red);
  padding: .75em 1em;
  margin-bottom: clamp(1rem, .85rem + .6vw, 1.35rem);
}

/* Erfolg — der Augenblick, in dem der Bogen abgegeben ist.
   Bild dafür: das Siegel. Eine runde Fläche in der Akzentfarbe wird auf das
   Papier gesetzt (sie kommt kurz aus der Tiefe, mit einem weichen Schatten
   darunter), und erst danach zieht die Feder Ring und Haken hinein. Die
   Scheibe ist kein zweites Element im Markup, sondern Polster und Hintergrund
   des vorhandenen SVG — deshalb bleibt sie in jeder Vorlage mittig. */
.bform__success {
  --erfolg: clamp(54px, 42px + 4vw, 70px);
  text-align: center;
  padding: clamp(1.5rem, .9rem + 3vw, 2.6rem) 0 clamp(.75rem, .5rem + 1.4vw, 1.5rem);
}
.bform__success svg {
  box-sizing: content-box;
  width: var(--erfolg);
  height: var(--erfolg);
  padding: calc(var(--erfolg) * .26);
  margin: 0 auto clamp(.9rem, .7rem + 1vw, 1.3rem);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--accent) 85%, transparent);
  animation: cf-siegel .5s var(--ease) both;
}
@keyframes cf-siegel {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}
.bform__success circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  animation: cf-draw .8s var(--ease) forwards;
}
.bform__success path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  animation: cf-draw .45s var(--ease) .5s forwards;
}
@keyframes cf-draw { to { stroke-dashoffset: 0; } }
.bform__success h2 {
  font-size: calc(clamp(1.3rem, 1.2rem + .5vw, 1.6rem) * var(--titel-scale, 1));
  font-weight: var(--titel-weight, 650);
  letter-spacing: -.02em;
  margin-bottom: .4em;
}
.bform__success p {
  color: var(--ink-soft);
  max-width: 46ch;
  margin-inline: auto;
  white-space: pre-line;
}
.bform__success .btn {
  min-height: 44px;
  padding-inline: 1.4em;
  margin-top: .7rem;
}

/* Geschlossen */
.bform__closed {
  text-align: center;
  padding: clamp(1.25rem, .8rem + 2.2vw, 2.1rem) 0 clamp(.5rem, 1.5vw, 1.1rem);
  color: var(--ink-soft);
}
.bform__closed h2 {
  color: var(--ink);
  font-size: calc(clamp(1.2rem, 1.1rem + .5vw, 1.45rem) * var(--titel-scale, 1));
  font-weight: var(--titel-weight, 650);
  letter-spacing: -.018em;
}
.bform__closed p {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 0;
}

/* Honigtopf */
.bform__hp { position: absolute; left: -9999px; top: -9999px; }

/* Fußzeile: die Herkunftszeile. Sie steht unter der Karte und soll dort
   ruhen — gesperrt gesetzt, in weicher Tinte, beim Zeigen voll da. */
.bform-foot {
  margin-top: clamp(1.1rem, .9rem + .6vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: max(.78rem, 12px);
  letter-spacing: .07em;
  color: var(--ink-soft);
  text-align: center;
}
.bform-foot a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 40px;
  padding: 0 .4em;
  transition: color .18s var(--ease);
}
.bform-foot a:hover { color: var(--ink); }
@media (pointer: coarse) {
  .bform-foot a { min-height: 44px; }
}
.bform-foot svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Embed-Modus: keine Karte, kein Seitenrand — nur so viel Luft, dass die
   Fokusringe und die ausgerückten Auswahlzeilen im schmalen iframe nicht am
   Rand abgeschnitten werden (10px ≥ Ausrückung der .bchoice). */
body.bform-embed {
  background: transparent;
  min-height: 0;
  /* Luft rundum: eingebettet steht das Formular sonst hart an der Kante
     der einbettenden Seite. */
  padding: clamp(16px, 3vw, 30px) clamp(14px, 3vw, 26px);
}
body.bform-embed .bform-card {
  max-width: 660px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 4px 6px 10px;
}
body.bform-embed .bform-card::before,
body.bform-embed .bform-card::after { display: none; }
body.bform-embed .bform-foot { margin: .8rem 0 0; }