/* Öffentliche Bewerbungsseiten. Hausfarben von farmbauer-reisen.de:
   #0489ef als Markenfarbe, #3a75ae als ruhigere Variante, #484848 als
   Textfarbe. Das Logo ist einfarbig dunkelblau auf transparentem Grund und
   braucht deshalb eine helle Fläche. */

:root {
  color-scheme: light;
  --marke: #0489ef;
  --marke-dunkel: #2060a0;
  --marke-gedaempft: #3a75ae;
  --text: #484848;
  --text-hell: #6b7681;
  --flaeche: #ffffff;
  --grund: #f4f6f9;
  --rand: #dde4ea;
  --breite: 92rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--grund);
  color: var(--text);
  line-height: 1.6;
}

.wrap { max-width: var(--breite); margin: 0 auto; }

/* Kopfbereich: weiße Logoleiste, darunter das Markenband. */
.logoleiste { background: var(--flaeche); border-bottom: 1px solid var(--rand); }
.logoleiste .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.5rem; flex-wrap: wrap;
}
.logoleiste img { display: block; height: 3.25rem; width: auto; }
.logoleiste a.zurueck {
  color: var(--marke); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.logoleiste a.zurueck:hover { text-decoration: underline; }

.band { background: var(--marke); color: #fff; }
.band .wrap { padding: 3.25rem 1.5rem; }
.band p.eyebrow {
  margin: 0 0 .4rem; opacity: .85; letter-spacing: .08em;
  text-transform: uppercase; font-size: .78rem; font-weight: 600;
}
.band h1 { margin: 0; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.2; }
.band p.intro { margin: 1rem 0 0; opacity: .95; max-width: 52rem; font-size: 1.15rem; }

main { padding: 3rem 1.5rem 4.5rem; }

section {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: .75rem;
  padding: 2rem 2.25rem; margin-bottom: 1.5rem; font-size: 1.02rem;
}
section h2 { margin-top: 0; font-size: 1.35rem; color: var(--marke-dunkel); }
ul { padding-left: 1.2rem; margin: 0; }
li { margin-bottom: .4rem; }
a { color: var(--marke); }

dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0; }
dt { font-weight: 600; color: var(--marke-dunkel); }
dd { margin: 0; }

/* Übersicht der Stellen */
.liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(27rem, 1fr));
  gap: 1.5rem; align-items: start;
}
.stelle {
  display: block; background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 5px solid var(--marke); border-radius: .85rem; padding: 2.25rem 2.25rem 2rem;
  text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s, border-left-color .12s;
}
.stelle:hover {
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(4, 137, 239, .15);
  border-left-color: var(--marke-dunkel);
}
.stelle h2 { margin: 0 0 .5rem; font-size: 1.55rem; line-height: 1.25; color: var(--marke-dunkel); }
.stelle p { margin: 0; color: var(--text); font-size: 1.05rem; }
.meta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .9rem; }
.meta span { background: #eaf4fe; color: var(--marke-dunkel); border-radius: 999px; padding: .3rem .9rem; }
.mehr { margin-top: 1.25rem; font-weight: 700; color: var(--marke); font-size: 1rem; }

.leer {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: .75rem;
  padding: 3.5rem 2rem; text-align: center;
}
.leer h2 { margin: 0 0 .75rem; font-size: 1.6rem; color: var(--marke-dunkel); }
.leer p { margin: 0 0 .5rem; color: var(--text-hell); }

/* Detailseite: Inhalt und Formular nebeneinander */
.spalten {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(26rem, 1fr);
  gap: 1.75rem; align-items: start;
}
.bewerben { position: sticky; top: 1.5rem; }

label { display: block; margin-bottom: 1rem; font-weight: 600; color: var(--marke-dunkel); }
input, textarea {
  width: 100%; padding: .65rem .75rem; margin-top: .35rem;
  border: 1px solid #c3ccd8; border-radius: .5rem; font: inherit;
  background: #fff; color: var(--text);
}
input:focus, textarea:focus { outline: 2px solid var(--marke); outline-offset: 1px; }
button {
  background: var(--marke); color: #fff; border: 0; border-radius: .5rem;
  padding: .8rem 1.6rem; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover { background: var(--marke-dunkel); }
.hinweis { font-weight: 400; font-size: .85rem; color: var(--text-hell); }
.fehler {
  background: #fdecea; border-left: 4px solid #c0392b;
  padding: .9rem 1rem; border-radius: .35rem; margin-bottom: 1.25rem; color: #8c2c20;
}
.ok { background: #eaf7ef; border-left: 4px solid #2e7d4f; padding: 1.25rem; border-radius: .35rem; }
.falle { position: absolute; left: -9999px; }

/* Fehlerseite */
.mitte { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; padding: 3rem 1.5rem; }
.mitte .box {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: .75rem;
  padding: 2.5rem 2rem; max-width: 34rem; text-align: center;
}
.mitte h1 { margin: 0 0 1rem; font-size: 1.4rem; color: var(--marke-dunkel); }
.kontakt { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rand);
  color: var(--text-hell); font-size: .92rem; }


@media (max-width: 62rem) {
  .spalten { grid-template-columns: 1fr; }
  .bewerben { position: static; }
}
@media (max-width: 30rem) {
  dl { grid-template-columns: 1fr; gap: .1rem 0; }
  dd { margin-bottom: .6rem; }
  .logoleiste img { height: 2.5rem; }
}