/* enhance.css — Stile für alles, was enhance.js ergänzt.
   Quelle dieser Datei: templates/enhance.css (nicht in output/ editieren).

   Alle Werte übernehmen die Design-Tokens der Plattform, damit Ergänzungen nicht
   wie Fremdkörper wirken: Schriften Montserrat 600 (Überschriften) / Lato 400
   (Text), Textfarbe #3C3E3D, Grün #1D9355 und #007848, Hellgrau #F3F3F3,
   Inhaltsbreite 1250px innerhalb eines 1392px-Rahmens. */

/* ============ 1. Rechtsseiten (Impressum, Datenschutz) ============ */

.u-legal {
  padding: 72px 24px 88px;
  font-family: 'Lato', system-ui, sans-serif;
  color: #3C3E3D;
  line-height: 1.6;
}
.u-legal__inner { max-width: 860px; margin: 0 auto; }

.u-legal h1,
.u-legal h2,
.u-legal h3 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: #3C3E3D;
}
.u-legal h1 { font-size: clamp(30px, 5vw, 48px); margin: 0 0 8px; }
/* Grüner Strich unter der Hauptüberschrift — dasselbe Motiv wie auf den übrigen
   Seiten, dort als Hervorhebung am Text (siehe export-fixes.css). */
.u-legal h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 0.08em;
  margin-top: 0.24em;
  background: #1D9355;
}
.u-legal h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 44px 0 12px; }
.u-legal h3 { font-size: clamp(17px, 2vw, 19px); margin: 28px 0 8px; }
.u-legal p { margin: 0 0 14px; font-size: 16px; }
.u-legal ul { margin: 0 0 16px; padding-left: 22px; }
.u-legal li { margin-bottom: 6px; font-size: 16px; }
.u-legal a { color: #007848; text-decoration: underline; text-underline-offset: 2px; }
.u-legal a:hover { color: #1D9355; }
.u-legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: #F3F3F3;
  padding: 1px 5px;
  border-radius: 3px;
}
.u-legal__updated { margin-top: 40px; font-size: 14px; color: #6b6d6c; }

/* Angaben als Beschriftung/Wert-Paare: zweispaltig, wenn Platz ist */
.u-legal-dl {
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr;
  gap: 8px 24px;
  margin: 0 0 18px;
  font-size: 16px;
}
.u-legal-dl dt { font-weight: 700; }
.u-legal-dl dd { margin: 0; }
@media (max-width: 560px) {
  .u-legal-dl { grid-template-columns: 1fr; gap: 2px; }
  .u-legal-dl dd { margin-bottom: 12px; }
}
.u-legal-address { margin: 0 0 14px; }

/* Hinweiskasten „Entwurf" — bewusst auffällig, damit er nicht versehentlich
   veröffentlicht wird. */
.u-legal-draft {
  margin: 0 0 32px;
  padding: 16px 18px;
  border-left: 4px solid #b3261e;
  background: #fdf3f2;
  border-radius: 4px;
  font-size: 15px;
}
.u-legal-draft strong { color: #b3261e; }

/* ============ 2. Mobiles Menü ============ */
/* Die Quelle rendert mobil nur Logo + Burger; das Menü selbst baute ein Script,
   das im Export fehlt. enhance.js erzeugt das Panel aus der Desktop-Navigation,
   interactions.js schaltet es. Ohne JavaScript bleibt es geschlossen — die
   Navigation ist dann über den Footer erreichbar, genau wie im Original. */

.u-mobile-nav {
  position: fixed;
  inset: 0 0 auto;
  top: 118px;                 /* Höhe des mobilen Headers */
  max-height: calc(100vh - 118px);
  overflow-y: auto;
  z-index: 9000;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  font-family: 'Lato', system-ui, sans-serif;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.u-mobile-nav[data-open="1"] { transform: none; opacity: 1; visibility: visible; }
@media (min-width: 993px) { .u-mobile-nav { display: none !important; } }

.u-mobile-nav ul { list-style: none; margin: 0; padding: 8px 0 16px; }
.u-mobile-nav li { border-bottom: 1px solid #eceded; }
.u-mobile-nav li:last-child { border-bottom: 0; }
.u-mobile-nav a {
  display: block;
  padding: 15px 24px;
  color: #3C3E3D;
  text-decoration: none;
  font-size: 17px;
}
.u-mobile-nav a:hover,
.u-mobile-nav a:focus-visible { background: #F3F3F3; color: #007848; }
.u-mobile-nav [aria-current="page"] { color: #007848; font-weight: 700; }
/* Unterpunkte (z. B. die Stellen unter „Offene Stellen") eingerückt */
.u-mobile-nav .u-mobile-nav__sub a { padding-left: 42px; font-size: 16px; }
.u-mobile-nav__group { padding: 15px 24px 4px; font-size: 17px; color: #3C3E3D; }
.u-mobile-nav__cta { padding: 18px 24px 6px; }
.u-mobile-nav__cta a {
  display: block;
  padding: 14px 18px;
  border-radius: 8px;
  background: #007848;
  color: #fff;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
}
.u-mobile-nav__cta a:hover { background: #1D9355; color: #fff; }

/* ============ 3. Formulare ============ */

/* Nur das <form>, das enhance.js selbst um die Kontaktfelder legt, darf keinen
   Platz im Layout einnehmen. NICHT auf `form[data-u-form]` verallgemeinern: das
   Bewerbungsformular ist ein Original-Element mit eigener Layout-Box — nimmt man
   die weg, verliert die Seite 98px Höhe. */
form[data-u-wrapper] { display: contents; }

/* Ersatz für das react-select-Feld „Gewünschte Position": ein echtes <select>.
   Ein natives Feld bringt Tastaturbedienung, Mobil-Auswahlrad und Validierung
   mit — das nachzubauen wäre unnötig fehleranfällig.
   Alle Maße sind am Original-Eingabefeld der Plattform gemessen (Höhe 56px,
   Innenabstand 15/16px, Abstand nach unten 17px, Rahmen rgba(60,62,61,0.1),
   Radius 4px), damit die Zeile genauso hoch ist wie die übrigen. */
.u-select {
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  margin: 0 0 17px;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 16px;
  color: #3C3E3D;
  background-color: #fff;
  border: 1px solid rgba(60, 62, 61, 0.1);
  border-radius: 4px;
  padding: 15px 40px 15px 16px;
  line-height: 1.4;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233C3E3D' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}
.u-select:focus-visible { outline: 2px solid #1D9355; outline-offset: 1px; }
.u-select[data-empty="1"] { color: #8b8d8c; }

/* Meldungen unter dem Absendeknopf */
.u-form-status {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 4px;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  display: none;
}
.u-form-status[data-state="success"] { display: block; background: #e8f5ee; border-left: 4px solid #1D9355; color: #17553a; }
.u-form-status[data-state="error"]   { display: block; background: #fdf3f2; border-left: 4px solid #b3261e; color: #8c1d18; }

/* Feldfehler: rote Umrandung + Hinweis darunter */
.u-invalid input:not([type="radio"]):not([type="checkbox"]),
.u-invalid textarea,
.u-invalid select,
input.u-invalid, textarea.u-invalid, select.u-invalid {
  border-color: #b3261e !important;
  box-shadow: 0 0 0 1px #b3261e;
}
.u-field-error {
  display: block;
  margin-top: 6px;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 13px;
  color: #b3261e;
}

/* ============ 4. Rechtslinks im Footer ============ */
/* Impressum und Datenschutz waren in der Quelle auf keiner Seite im Footer
   verlinkt. Ergänzt, weil ein Impressum von jeder Seite erreichbar sein muss.
   Farben und Größe folgen der Copyright-Zeile daneben. */
.u-legal-links {
  margin: 10px 0 0;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 14px;
  color: #3C3E3D;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.u-legal-links a { color: #3C3E3D; text-decoration: underline; text-underline-offset: 2px; }
.u-legal-links a:hover { color: #007848; }
.u-legal-links span { opacity: 0.5; }