/* ==========================================================================
   Bewerbungsformular  /karriere/bewerbung/
   Anforderungen aus der Word-Datei "Bewerberportal" vom 02.09.2026 und der
   Mail der Personalabteilung vom 04.09.2026.

   EIN FORMULAR, NICHT VIERZEHN. Die Anzeigen verweisen mit der Stelle im
   Adressparameter hierher (?stelle=<slug>), das Formular nennt sie im Kopf.
   Vierzehn Kopien eines Formulars mit 21 Feldern waeren vierzehn Stellen, an
   denen eine Aenderung vergessen wird. Im Theme ist es eine Vorlage, die
   entweder als Seite steht oder als Template-Part in single-jobs.php
   eingebunden wird - beides aus derselben Datei.

   LESEBREITE, NICHT SEITENBREITE: ein Formularfeld, das 1320 px breit ist,
   sieht aus wie ein Suchschlitz. 44rem sind rund 700 px, das ist die Breite,
   in der zwei Felder nebeneinander noch bedienbar sind.
   ========================================================================== */
.bwkopf { --hero-hoehe: 0; --schwung-grund: var(--bg-soft); }
/* DIE SCHWUNGZEILE IN EINER ZEILE, Wunsch vom 29.09.2026: „auf Ihre
   Bewerbung" brach bei 34rem Textbreite um. Die 34rem gelten Koepfen mit
   Motiv daneben - dieser hat keins, die Flaeche rechts ist frei. Am Telefon
   bricht die Zeile weiter um, wenn die Bahn zu schmal ist. */
.bwkopf .bogenhero__body { max-width: none; }
/* AUCH AM TELEFON EINE ZEILE, Zuruf vom 29.09.2026. Bei 390 px fehlten der
   Zeile 8 px (gebraucht rund 358, Bahn 350). Die Schreibschrift schrumpft
   deshalb nur so weit, wie die Bahn es verlangt: 7,6 Schriftgrade breit ist
   „auf Ihre Bewerbung" (gemessen 573 px bei 76,8 px, plus Luft). Wo sie
   schon passt, bleibt es beim Grad aller anderen Koepfe (1.6em). */
/* In einer Zeile auch mit Motiv (29.09.2026): Dann ist der Textblock 34rem
   breit, die Zeile braucht rund 36rem und reicht ein Stueck in den
   Weissverlauf - dort ist sie lesbar. */
.bwkopf .bogenhero__title em { white-space: nowrap; }
@media (max-width: 40rem) {
  .bwkopf .bogenhero__title em {
    font-size: min(1.6em, calc((100vw - 2 * var(--wrap-pad)) / 7.6));
  }
}
.bwkopf__zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--toem-blau);
  transition: color var(--dur-hover) var(--ease-hover);
}
.bwkopf__zurueck:hover,
.bwkopf__zurueck:focus-visible { color: var(--toem-gold); }
.bwkopf__zurueck svg { width: var(--zeichen-inline); height: var(--zeichen-inline); flex: none; }
/* HIER STAND .bwkopf__stelle - die Stelle als goldene Badge im Kopf.
   Ersetzt am 04.09.2026 durch ein vorbelegtes Auswahlfeld im Formular: eine
   Badge zeigt an, ein Feld gibt an. Und wer ohne Adressparameter kommt, kann
   die Stelle jetzt ueberhaupt waehlen. */

.bwform { background: var(--bg-soft); padding-block: var(--sp-sektion); }
/* 56rem statt 44rem, Wunsch vom 04.09.2026: "Das Formular sollte auf
   Desktop ruhig breiter sein!" Das sind 896 statt 704 px, also zwei Spalten
   von je rund 400 px statt 300 - genug, damit "Straße und Hausnummer" und
   die langen Beschriftungen der Anlagen nicht mehr umbrechen.
   Nicht die volle Bahn: 1320 px breite Eingabefelder sehen aus wie
   Suchschlitze, und die Augen muessen zwischen Label und Feldende zu weit
   wandern.
   52rem SEIT DEM 16.09.2026, vorher 56rem: die Karte um jede Gruppe ist
   entfallen, und mit ihr deren 32 px Innenabstand auf beiden Seiten. 56rem
   minus zweimal 32 px sind genau 832 px - also 52rem. Die Zeilenlaenge
   bleibt damit auf den Pixel dieselbe wie auf der abgenommenen Fassung, nur
   der Kasten drumherum ist weg. */
.bwform__form { max-width: 52rem; }

/* HIER STANDEN ZWEI HINWEISBLOECKE - der Vorschauhinweis ("noch nicht
   aktiv") und der offene Punkt zum Datenschutz ("Text folgt vom Kunden").
   Beide am 04.09.2026 entfernt: sie erklaerten dem Kunden unseren
   Arbeitsstand, und das gehoert in die Mail und nicht auf die Seite.
   DIE SACHVERHALTE BLEIBEN: das Formular sendet weiter nichts, und der
   Datenschutztext fehlt weiter - das Kaestchen verweist jetzt auf
   /datenschutz/. Beides steht in der Abschluss-Mail. */

/* --- Feldgruppen ---------------------------------------------------------
   fieldset traegt von Haus aus Rahmen und Innenabstand - beides zurueck.

   OHNE KARTE SEIT DEM 16.09.2026, angeglichen an /gold/. Vorher sass jede
   Gruppe auf einer weissen Karte mit Schatten. Der Grund fuer die Aenderung
   ist gemessen und kein Geschmack: der Kartengrund war #ffffff und der
   Feldgrund auch - die Eingabefelder standen weiss auf weiss und wurden
   allein von einer 1 px duennen grauen Linie getragen. Auf der grauen Bahn
   haben sie jetzt einen eigenen Grund.
   Dazu zwei Nebenwirkungen, beide erwuenscht: eine weisse Karte mit Schatten
   ist im Haus fuer INHALTE reserviert (Produkte, Rezepte, Stellen), nicht
   fuer Gliederung - und fuenf Kaesten untereinander sind viel Geruest fuer
   ein Formular mit 21 Feldern.
   Die Trennung traegt jetzt die goldene Linie unter der Ueberschrift, wie
   auf /gold/. Siehe .bwgruppe__titel weiter unten. */
.bwgruppe {
  margin: 0 0 var(--sp-7);
  padding: 0;
  border: 0;
  /* min-inline-size: 0 IST HIER PFLICHT, nicht Vorsicht. Ein <fieldset> hat
     eine eingebaute Mindestbreite (min-content seines Inhalts), und die
     ignoriert min-width - der einzige Weg heraus ist min-inline-size.
     Gemessen bei 320 px Fensterbreite ohne diese Zeile: 165 px Ueberlauf,
     gefunden von werkzeug/querscroll.js. min-width bleibt als Rueckfall
     fuer aeltere Browser daneben stehen. */
  min-width: 0;
  min-inline-size: 0;
}
.bwgruppe:last-of-type { margin-bottom: var(--sp-6); }
/* legend sitzt im Standard IN der Rahmenlinie und laesst sich schlecht
   positionieren. float: left nimmt sie aus diesem Sonderverhalten heraus,
   ohne sie aus dem Zugaenglichkeitsbaum zu nehmen - anders als
   position: absolute, das die Zuordnung zur Gruppe erhaelt, aber den Umbruch
   der Folgezeilen zerstoert. */
/* GLEICHE WERTE WIE .form__gruppe-titel in components/formular.css - dort
   steht die Begruendung. Die Regel steht hier trotzdem, weil dieses
   Formular seine eigenen Klassen hat und nicht auf .form__* laeuft; die
   Datei laedt es seit dem 16.09.2026 nur wegen des Dateifelds.
   float: left BLEIBT: eine legend sitzt im Standard IN der Rahmenlinie und
   laesst sich schlecht setzen. float nimmt sie aus diesem Sonderverhalten
   heraus, ohne sie aus dem Zugaenglichkeitsbaum zu nehmen - anders als
   position: absolute, das den Umbruch der Folgezeilen zerstoert. */
.bwgruppe__titel {
  float: left;
  width: 100%;
  margin: 0 0 var(--sp-6);
  padding: 0 0 var(--sp-2);
  border-bottom: 1px solid var(--toem-gold);
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--toem-blau);
}
.bwgruppe__hilfe {
  clear: both;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-200);
  color: var(--text-muted);
}
.bwgruppe__raster {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-5);
  align-items: start;
}
@media (max-width: 40rem) {
  .bwgruppe__raster { grid-template-columns: minmax(0, 1fr); }
}

/* --- Einzelfeld ----------------------------------------------------------
   Jedes Feld ist ein <p> mit Label, Eingabe und optionaler Hilfe. Grid statt
   Bloecken, damit die Hilfe unter der Eingabe klebt und nicht an ihr. */
/* align-content: start - DERSELBE FEHLER, sechster Fall. Ein Feld mit
   Hilfezeile hat drei Zeilen, eines ohne nur zwei. Ohne diese Zeile strecken
   sich die zwei Zeilen in die Hoehe der drei, und die Eingabe daneben sitzt
   tiefer als ihre Nachbarin - genau das "Springen", das der Kunde am
   04.09.2026 gemeldet hat.
   Und dazu align-items: start am Raster, damit eine Zelle nicht die Hoehe
   ihrer Reihe annimmt. Beides zusammen, sonst bleibt der Rest. */
.bwfeld {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  align-content: start;
}
/* [hidden] MUSS HIER STEHEN, sonst wirkt es nicht. Die Regel darueber setzt
   display: grid, und eine Klassenregel schlaegt das [hidden] { display: none }
   des Browsers - das kommt aus dem UA-Stylesheet und hat die niedrigste
   Gewichtung. Das Feld ist dann als versteckt AUSGEZEICHNET, aber weiter
   SICHTBAR.
   Genau das hat der Kunde am 04.09.2026 gesehen: bei einer Ausbildung stand
   die Gehaltsvorstellung noch da. Vier Felder waren betroffen; die beiden
   anderen fielen nur deshalb weg, weil ihre ganze Gruppe verschwand - und
   .bwgruppe setzt kein display, dort greift [hidden] von allein.
   MEINE PRUEFUNG HAT ES NICHT GEFUNDEN, weil sie die Eigenschaft f.hidden
   gemessen hat und nicht die Darstellung. Seitdem messe ich offsetParent.
   SIEBTER FALL DERSELBEN FALLE im Projekt - die sechs Vorgaenger stehen in
   components/filterleiste.css, components/tabs.css, pages/blog.css (zweimal),
   pages/rezepte.css und pages/produkt.css (zweimal). */
.bwfeld[hidden] { display: none; }
.bwfeld--halb { grid-column: auto; }
.bwfeld--schmal { grid-column: auto; max-width: min(9rem, 100%); }
.bwfeld--breit { grid-column: auto; }
@media (max-width: 40rem) {
  .bwfeld--halb, .bwfeld--breit { grid-column: 1 / -1; }
}
.bwfeld label {
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--toem-blau);
}
/* Das Sternchen. abbr bringt eine gepunktete Unterlinie mit, die hier nur
   stoert - der title bleibt und wird vorgelesen. */
.bwfeld abbr,
.bwgruppe__titel abbr {
  text-decoration: none;
  color: var(--toem-gold);
}
.bwfeld__hilfe {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* Eingaben. 2,75rem Hoehe, also 44 px - dieselbe Schwelle wie bei den
   Filterpillen, hier aber noch wichtiger: ein Formular wird auch auf dem
   Telefon ausgefuellt.
   font: inherit, sonst nehmen Browser ihre eigene Systemschrift und das
   Formular sieht aus wie aus einem anderen Projekt. */
.bwfeld input[type="text"],
.bwfeld input[type="tel"],
.bwfeld input[type="email"],
.bwfeld input[type="date"],
.bwfeld input[type="file"],
.bwfeld select {
  /* min-width: 0 IST PFLICHT, wie beim fieldset darueber. Ein <input> hat
     eine eingebaute Mindestbreite aus seinem size-Attribut (Vorgabe 20
     Zeichen) und schrumpft ohne diese Zeile nicht unter sie.
     Gemessen bei 320 px ohne sie: 109 px Ueberlauf, gefunden von
     werkzeug/querscroll.js. Zusammen mit dem fieldset war es der zweite
     eingebaute Mindestwert in derselben Kette - der erste versteckte den
     zweiten. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-grau-300);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-300);
  color: var(--text-body);
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.bwfeld input:focus-visible,
.bwfeld select:focus-visible { border-color: var(--toem-gold); }
/* --- Auswahl- und Datumsfelder auf dem iPhone -------------------------
   GEMELDET AM 25.09.2026 VOM GERAET (Thorsten): die Auswahlfelder niedriger
   als die Textfelder, und das Geburtsdatum breiter als seine Spalte - die
   Seite liess sich zur Seite schieben. Dieselben zwei Fehler wie am
   16.09.2026 auf /gold/; die Loesung von dort (components/formular.css,
   mit Begruendung) hatte dieses Formular nicht, weil es eigene Klassen
   traegt. Hier stand sie seit dem 16.09. als offener Punkt.

   Mobile Safari baut Auswahl und Datum als eigene Steuerelemente mit eigener
   Hoehe und Mindestbreite und uebergeht min-height und width. Erst
   appearance: none macht wieder ein Feld daraus, das sich an unsere Masse
   haelt. Das Auswahlrad und der Kalender bleiben, sie haengen am Typ.
   HEIGHT STATT MIN-HEIGHT: ein Feld ohne eigene Hoehe nimmt die des
   Steuerelements. 2,75rem sind die 44 px der Textfelder.
   DIE EMULATION ZEIGT DAS NICHT - weder Chromium noch WebKit am Rechner;
   den nativen Typ gibt es nur auf dem Geraet. */
.bwfeld input[type="date"],
.bwfeld select { height: 2.75rem; }
.bwfeld input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
.bwfeld input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-width: 0;
}
.bwfeld input[type="date"]::-webkit-datetime-edit { padding: 0; }
/* Der eigene Winkel wie auf /kontakt/ und /gold/ (.form__auswahl): mit
   appearance: none faellt der des Systems weg. Polster und Lage dieselben -
   Winkel 24 px vom Rand, der Text endet 24 px davor. */
.bwfeld select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230c243e' stroke-width='1.75'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-5) center;
  background-size: 1rem 1rem;
  cursor: pointer;
}

/* FEHLERZUSTAND als Kante UND Text. Nur rote Kante waere fuer Menschen mit
   Rot-Gruen-Schwaeche keine Information; nur Text ohne Kante findet man im
   langen Formular nicht wieder. */
.bwfeld input[aria-invalid="true"],
.bwfeld select[aria-invalid="true"] { border-color: var(--c-fehler, #a3242f); }
.bwfeld__fehler {
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--c-fehler, #a3242f);
}

/* --- Dateifelder ---------------------------------------------------------
   HIER STANDEN REGELN FUER DEN ROHEN DATEIKNOPF DES BROWSERS. Sie sind am
   16.09.2026 entfallen: die sechs Felder tragen jetzt den Baustein
   .dateifeld aus components/formular.css, uebernommen von /gold/.
   Die Ueberlegung von damals gilt weiter - ein nachgebauter Knopf aus
   <span> und Skript koennte ohne Javascript keine Datei mehr auswaehlen,
   und das waere bei einem Bewerbungsformular kein hinnehmbarer Ausfall.
   Der Baustein loest das anders: das echte input liegt durchsichtig ueber
   der gestalteten Flaeche, alles Native bleibt erhalten. */

/* Die bevorzugte Variante hebt sich ab - sie ist der Weg, den die
   Personalabteilung will. */
.bwfeld--vorzug {
  padding: var(--sp-5);
  border-radius: var(--r-sm);
  background: rgba(215, 179, 95, 0.1);
}
/* KLEINER, Wunsch vom 04.09.2026. Gemessen war die Marke 108 x 25 px und
   damit genau so hoch wie die Zeile der Beschriftung daneben - eine
   Nebenangabe, die so gross ist wie die Hauptsache, liest sich als zweite
   Hauptsache.
   Drei Stellschrauben, keine davon die Schriftgroesse: die bleibt bei
   --fs-100, weil es darunter im Projekt keine Stufe gibt und ein neuer Token
   fuer eine Marke zu viel waere.
     1. line-height: 1 statt der geerbten 21,45 px - das allein nimmt 8 px.
     2. Sperrung von --ls-wide (1,56 px) auf --ls-caps. Bei neun Versalien
        kostet die weite Sperrung 14 px Breite.
     3. Polster senkrecht auf 0, waagerecht auf --sp-2. Erst stand hier
        --sp-3, und dann war die Marke zwar 7 px flacher, aber genauso breit
        wie vorher - das Polster war um genau so viel gewachsen, wie die
        Sperrung geschrumpft war. Gemessen, nicht geschaetzt.
   Ergebnis: 18 px hoch statt 25, rund 90 px breit statt 108. */
.bwfeld__marke {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--toem-blau);
  font-size: var(--fs-100);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.bwanlagen { clear: both; }
/* "oder einzeln" als Trenner zwischen den beiden Wegen, mit Linien links und
   rechts - ohne die liest es sich wie eine Ueberschrift. */
.bwanlagen__oder {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
  font-size: var(--fs-200);
  color: var(--text-muted);
}
.bwanlagen__oder::before,
.bwanlagen__oder::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --- Kästchen ----------------------------------------------------------- */
.bwfeld--haken {
  clear: both;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
}
.bwfeld--haken input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  accent-color: var(--toem-blau);
}
.bwfeld--haken label {
  font-weight: 400;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* --- Mehrfachwahl -------------------------------------------------------
   Die Bereiche bei Praktikum oder Aushilfe, seit dem 25.09.2026. EIN
   FIELDSET, weil zehn Kaestchen eine gemeinsame Frage haben: die legend wird
   bei jedem Kaestchen mitgelesen, ein Label kann das nicht.
   KEIN GRID AM FIELDSET: eine legend ist kein Rasterelement, sie saesse
   neben dem Raster statt darin. Block reicht, das Raster traegt .bwwahl.
   Rahmen, Innenabstand und Mindestbreite zurueck, wie bei .bwgruppe.
   Die Frage sieht aus wie jede andere Beschriftung, die Kaestchen wie die
   der Einwilligung - neu ist nur die Anordnung. */
.bwfeld--wahl {
  display: block;
  grid-column: 1 / -1;
  padding: 0;
  border: 0;
  min-width: 0;
  min-inline-size: 0;
}
.bwfeld--wahl legend {
  padding: 0;
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--toem-blau);
}
.bwfeld--wahl .bwfeld__hilfe {
  display: block;
  margin-top: var(--sp-1);
}
.bwwahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: 0 var(--sp-5);
  margin-top: var(--sp-3);
}
/* 44 PX HOCH, dieselbe Schwelle wie bei den Eingaben: das ganze Label ist
   Trefferflaeche, nicht nur das 20-px-Kaestchen. */
.bwfeld--wahl .bwwahl label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.75rem;
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--text-body);
  cursor: pointer;
}
.bwwahl input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--toem-blau);
}


/* --- Sammelmeldung und Absenden ----------------------------------------- */
.bwmeldung {
  max-width: 56rem;
  /* MEHR LUFT ZUM FORMULAR, Wunsch vom 17.09.2026. Vorher --sp-5, also
     24 px - genau so viel, wie der Kasten selbst an Innenabstand trägt.
     Dadurch las sich die Meldung wie die erste Zeile des Formulars statt
     wie eine Antwort darauf. 48 px setzen sie deutlich ab, ohne dass sie
     den Bezug verliert. */
  margin: 0 0 var(--sp-7);
  padding: var(--sp-5);
  /* SECHS STATT DREI PIXEL, Wunsch vom 17.09.2026: „nicht dass diese
     untergehen". Auf dem grauen Grund der Seite ist ein weisser Kasten mit
     einer Haarlinie kein Signal. Der Balken ist das einzige farbige Element
     der Meldung und traegt damit die ganze Unterscheidung zwischen
     Bestaetigung und Fehler - er darf sichtbar sein.
     Das Scrollen und der Fokus tun den Rest, siehe inc/bewerbung.php und
     js/bewerbung.js. */
  border-left: 6px solid var(--c-fehler, #a3242f);
  /* ABSTAND FUER DIE FIXIERTE KOPFZEILE. Ohne ihn springt der Browser
     genau so weit, dass die erste Zeile der Meldung unter der Kopfzeile
     verschwindet - gemessen am 17.09.2026: Oberkante bei 32 px, Kopfzeile
     68 px hoch. Dieselbe Regel traegt .goform auf der Gewinnspielseite.
     Plus --sp-5, damit die Meldung nicht an der Kopfzeile klebt. */
  scroll-margin-top: calc(var(--h-nav-compact) + var(--sp-5));
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.bwmeldung--ok { border-left-color: var(--toem-gold); }
.bwmeldung ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

.bwform__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
}
.bwform__pflicht { font-size: var(--fs-100); color: var(--text-muted); }
.bwform__pflicht abbr { text-decoration: none; color: var(--toem-gold); }


/* --- Köderfeld gegen Maschinen -------------------------------------------
   Ein Feld, das Menschen nicht sehen und Maschinen ausfuellen. Wer es
   ausfuellt, war keiner.

   NICHT display: none UND NICHT visibility: hidden. Beides ist der erste
   Test, den ein halbwegs gebauter Bot macht - Felder mit diesen Angaben
   laesst er in Ruhe. Ein Feld, das nur AUS DEM BILD geschoben ist, sieht
   fuer ihn aus wie ein normales Feld.

   FUER SCREENREADER IST ES TROTZDEM WEG: aria-hidden am Absatz und
   tabindex -1 am Feld stehen im Markup. Ohne das waere der Koeder eine
   Falle fuer blinde Nutzer - sie wuerden das Feld hoeren, ausfuellen und
   abgewiesen werden.

   left: -9999px und nicht clip-path: fuer den Bot soll es ein sichtbares
   Feld sein. Die Hoehe bleibt, damit die Seite nicht springt - sie steht
   ausserhalb der Bahn und macht keinen Ueberlauf, weil der Absatz selbst
   position: absolute ist. */
.bwkoeder {
  /* KEIN left: -9999px mehr, geaendert am 16.09.2026 - derselbe Fall wie bei
     .form__honigtopf in components/formular.css, dort steht die Begruendung.
     Kurz: ein Element ausserhalb des Sichtfelds kann auf mobilen Browsern
     einen dauerhaften Scrollbalken erzeugen. Der Koeder bleibt ein
     sichtbares, absolut gesetztes Element - kein display: none -, er hat nur
     keine Flaeche mehr. */
  position: absolute;
  clip-path: inset(50%);
  white-space: nowrap;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Auch der Inhalt bleibt im Punkt - sonst ragt das Eingabefeld mit seinen
   153 px bei schmalen Fenstern rechnerisch ueber den Rand. Sichtbar nichts,
   messbar schon, und genau solche Kaesten erzeugen den Balken. */
.bwkoeder label,
.bwkoeder input { width: 1px; }

/* Dateifelder auf 16 px, siehe die Begruendung in components/formular.css:
   unter 16 px zoomt iOS Safari beim Antippen in die Seite hinein. Die
   Textfelder dieses Formulars standen schon auf 16 px, die sechs Dateifelder
   auf 15 - gemessen am 10.09.2026. */
@media (max-width: 64rem) {
  .bwfeld input[type="file"] { font-size: 1rem; }
}

/* TREFFERFLAECHE 44 px auf Touchbreiten, nachgezogen am 10.09.2026 beim
   responsiven Durchgang. Gemessen war dieser Zuruecklink 25 px hoch; die
   Projektregel verlangt 44. Dasselbe Muster gibt es viermal im Projekt
   (rzkopf, stdkopf, hakopf, bwkopf) - im Theme wird daraus ein Bauteil, hier
   steht der Wert vorerst viermal. Nur auf Touchbreiten, wie bei der Fusszeile
   und den Eingabefeldern; dieselbe Grenze von 64rem. */
@media (max-width: 64rem) {
  .bwkopf__zurueck { min-height: 2.75rem; }
}