/* Bereich „Verstärkung gesucht“ (nur eingebunden, wenn der Admin-Schalter an ist; die Middleware setzt den Link).
   Sprache der Seite: Die Stellenanzeige hängt aus wie ihr Preis-Aushang, weiße Tafel mit feiner Magenta-Innenlinie
   wie das Ladenschild. Titel Noto Serif Display, Text Noto Serif, Etiketten und Felder-Namen Carrois Gothic. */

.verstaerkung { background: var(--rose); padding: 0 var(--rand) clamp(48px, 7vw, 96px); }
main > section.verstaerkung[id] { scroll-margin-top: 0; }   /* Ankersprung landet am oberen Rand der Tafel */
.verstaerkung__schild {
  position: relative; max-width: var(--breite); margin: 0 auto; background: var(--weiss); border-radius: 4px;
  padding: clamp(30px, 5vw, 60px) clamp(22px, 4.5vw, 64px); display: grid; gap: 26px;
}
.verstaerkung__schild::before { content: ""; position: absolute; inset: clamp(8px, 1.2vw, 14px); border: 1.5px solid var(--magenta); border-radius: 2px; pointer-events: none; }
.verstaerkung__schild > * { position: relative; min-width: 0; }
.verstaerkung__titel { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem); margin-bottom: 14px; }
.verstaerkung__text { max-width: 34em; color: var(--tinte-2); margin: 0 0 .7em; }
.verstaerkung__text:last-child { margin-bottom: 0; }

/* Die Stellen wie Zeilen im Aushang: Bezeichnung in der Textschrift, Art als Notiz darunter */
.verstaerkung__stellen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.verstaerkung__stelle { padding: 13px 0 14px; border-bottom: 1px dotted rgba(29, 23, 25, .28); }
.verstaerkung__stellentitel { display: block; font-weight: 600; font-size: 1.12rem; line-height: 1.35; }
.verstaerkung__art { display: block; margin-top: 3px; font-family: var(--schrift-notiz); font-size: 1rem; letter-spacing: .02em; color: var(--magenta-tief); }
.verstaerkung__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 22px 0 0; }
.verstaerkung__wege .knopf { border: 0; cursor: pointer; }
.no-js [data-bewerbung-auf] { display: none; }

/* Formular: mit Skript erst nach „Jetzt bewerben“, ohne Skript gleich sichtbar */
.js .bewerbung:not(.ist-offen) { display: none; }
.bewerbung { border-top: 1px dotted rgba(29, 23, 25, .32); padding-top: 24px; }
.bewerbung__pflicht { font-family: var(--schrift-notiz); font-size: 1rem; letter-spacing: .02em; color: var(--tinte-2); margin: 0 0 18px; }
.bewerbung__felder { display: grid; gap: 16px; }
.feld { display: grid; gap: 6px; align-content: start; min-width: 0; }
.feld__name { font-family: var(--schrift-notiz); font-size: 1.04rem; letter-spacing: .02em; color: var(--tinte); }
.feld__name small { font-size: .9rem; color: var(--tinte-2); }
.feld input, .feld textarea, .feld select {
  width: 100%; min-height: 48px; font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.4; color: var(--tinte);
  background: var(--weiss); padding: .62em .75em; border: 1px solid var(--mauve-text); border-radius: 6px;
}
.feld textarea { resize: vertical; min-height: 7.5em; }
.feld select { appearance: none; padding-right: 2.4em; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline: 3px solid var(--magenta-tief); outline-offset: 1px; border-radius: 6px; }
.feld--datei input[type="file"] { min-height: 0; padding: 10px; border-style: dashed; font-family: var(--schrift-notiz); font-size: 1rem; color: var(--tinte-2); cursor: pointer; }
.feld--datei input[type="file"]::file-selector-button {
  margin-right: 12px; padding: .5em 1.05em; border: 1px solid var(--tinte); border-radius: 999px; background: var(--weiss);
  font-family: var(--schrift-notiz); font-size: 1rem; letter-spacing: .02em; color: var(--tinte); cursor: pointer;
}
/* Handy: Knopf über dem Dateinamen, sonst kürzt der Browser „Keine Datei ausgewählt“ mitten im Wort */
@media (max-width: 39.99em) {
  .feld--datei input[type="file"] { padding: 10px 8px; font-size: .9rem; }
  .feld--datei input[type="file"]::file-selector-button { display: block; margin: 0 0 8px; padding: .45em .9em; font-size: .95rem; }
}
.feld.ist-fehler input, .feld.ist-fehler textarea { border-color: var(--magenta-tief); box-shadow: 0 0 0 2px rgba(207, 67, 146, .22); }

.bewerbung__haken { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 22px 0 0; font-size: .98rem; line-height: 1.5; color: var(--tinte-2); cursor: pointer; }
.bewerbung__haken input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--magenta-tief); cursor: pointer; }
.bewerbung__haken.ist-fehler span { color: var(--magenta-tief); }
.bewerbung__falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bewerbung__meldung { margin: 14px 0 0; min-height: 1.5em; font-family: var(--schrift-notiz); font-size: 1.04rem; letter-spacing: .02em; color: var(--magenta-tief); }
.bewerbung__meldung:empty { min-height: 0; margin: 0; }
.feld .bewerbung__meldung { margin: 0; min-height: 0; }   /* Feldfehler: die Meldung steht direkt unter dem Feld (js/bewerbung.js) */
.bewerbung__senden { margin: 18px 0 0; }
.bewerbung__senden .knopf { border: 0; cursor: pointer; }
.bewerbung__senden .knopf:disabled { opacity: .6; cursor: progress; }

.bewerbung__danke { padding: 22px 22px 20px; background: var(--puder); border-radius: 6px; }
.bewerbung__danke p { margin: 0; color: var(--tinte-2); }
.bewerbung__danke .bewerbung__danke-titel { margin-bottom: 6px; font-family: var(--schrift-titel); font-weight: 600; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); line-height: 1.15; color: var(--tinte); }
.bewerbung__danke:focus { outline: none; }

@media (min-width: 40em) {
  .bewerbung__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .feld--breit { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  /* Tafel zweispaltig: links Überschrift und Text, rechts die Stellen und die Wege; das Formular darunter über die ganze Breite */
  .verstaerkung__schild { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); row-gap: 32px; align-items: start; }
  .verstaerkung__rechts { padding-top: 6px; }
  .bewerbung, .bewerbung__danke { grid-column: 1 / -1; }
  .bewerbung__felder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bewerbung__felder .feld--breit:first-child { grid-column: auto; }   /* Name, Telefon, E-Mail in einer Reihe */
  .bewerbung__haken { max-width: 52em; }
}