/* ═══════════════════════════════════════════════════════════════
   THEME 1 — DATENBLATT
   Ziel: assets/theme.css   ·   wird NACH style.css geladen

   Ruhig, technisch, ingenieursnah. Haarlinien statt Kästen,
   keine Rundungen, keine Schatten. Skaliert am besten bei vielen
   Stellen. Für erfahrene Fachkräfte.

   Setzt NICHT die vier Markenfarben — die kommen aus MARKE in
   inc/config.php und werden von marke_stil() nach dieser Datei
   in den Head geschrieben. Hier stehen nur Formensprache,
   Typografie und Abstände.

   Schriften: Barlow Condensed (Überschriften) + Barlow (Text),
   als WOFF2 in assets/fonts/ ablegen. Fallback ist gesetzt.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Barlow Condensed';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/barlow-700.woff2') format('woff2')}

:root{
  --font-display:'Barlow Condensed','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  --font-text:'Barlow','Segoe UI',Roboto,system-ui,sans-serif;
  --rund:0;
  --schatten:none;
  --schatten-gross:none;
  --linie:#dfe4e8;
  --grau-bg:#f6f7f9;
}

body{line-height:1.6}
h1,h2,h3{letter-spacing:.01em}

/* ── Kopf ────────────────────────────────────────────────────── */
.kopf{border-bottom:1px solid var(--linie)}
.kopf-nav a{border-bottom-width:1px}

/* ── Hero: hell statt dunkel, Kennzahlen als Typenschild ─────── */
.hero{background:#fff;color:var(--tinte);padding:60px 0 0;border-bottom:0}
.hero::after{display:none}
.hero .claim{color:var(--grau);letter-spacing:.2em}
.hero h1{font-weight:600;letter-spacing:.01em}
.hero p{color:var(--grau);max-width:56ch}
.hero .wrap{padding-bottom:34px;border-bottom:8px solid var(--dunkel)}

.kennzahlen{gap:0;margin-top:32px;border:2px solid var(--dunkel);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kennzahlen div{padding:14px 18px;border-left:1px solid var(--linie)}
.kennzahlen div:first-child{border-left:0}
.kennzahlen strong{color:var(--dunkel);font-size:1.8rem;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1}
.kennzahlen span{color:var(--grau);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;font-family:var(--font-display);font-weight:600}

/* ── Stellen als Tabellenzeilen ──────────────────────────────── */
.abschnitt-kopf h2{font-weight:600}
.stellen{gap:0;border-top:2px solid var(--dunkel)}
.karte{background:transparent;border:0;border-bottom:1px solid var(--linie);
  border-left:0;border-radius:0;padding:20px 14px 20px 0;transition:background .12s}
.karte:hover{background:var(--grau-bg);transform:none;box-shadow:none}
.karte h3{color:var(--tinte);font-family:var(--font-display);font-weight:600;
  font-size:1.3rem;letter-spacing:.01em;margin-bottom:5px}
.karte:hover h3{color:var(--akzent)}
.pfeil{font-family:var(--font-display);font-weight:600;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase}

.tag{border-radius:0;background:transparent;border:1px solid var(--linie);
  color:var(--grau);font-weight:500;padding:3px 10px}
.tag-akzent{border-color:var(--akzent);color:var(--akzent);background:transparent}
.tag-hell{border-color:rgba(255,255,255,.4);background:transparent;color:#fff}

.leer{border-radius:0;border:1px dashed var(--linie);background:transparent}

/* ── Buttons: eckig, gesperrte Versalien ─────────────────────── */
.btn{border-radius:0;font-family:var(--font-display);font-weight:600;
  letter-spacing:.1em;font-size:.88rem}
.btn-rand{border-width:1px;color:var(--tinte);border-color:var(--tinte)}
.btn-rand:hover{background:var(--tinte);color:#fff}

/* ── Stellendetail ───────────────────────────────────────────── */
.detail-kopf{background:var(--dunkel)}
.detail-kopf::after{height:8px;background:var(--gold)}
.detail-kopf h1{font-weight:600}
.inhalt h2{font-weight:600;font-family:var(--font-display);font-size:1.3rem;
  letter-spacing:.04em;padding-bottom:6px;border-bottom:1px solid var(--linie)}
.ul li{padding-left:24px;border-bottom:1px solid #f1f3f5}
.ul li::before{border-radius:0;width:11px;height:2px;top:16px;background:var(--gold)}

/* ── Formular: gerahmt statt schwebend ───────────────────────── */
.box{border:2px solid var(--dunkel);border-top-width:2px;border-radius:0;box-shadow:none}
.box h2{font-weight:600;font-family:var(--font-display);letter-spacing:.04em}
.feld input,.feld textarea,.feld select{border-radius:0;border-width:1px;border-color:#cdd5da}
.feld label{font-family:var(--font-display);font-weight:600;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.fehler,.erfolg,.hinweis-box{border-radius:0}

/* ── Benefits: Datenblattzeilen ohne Kästchen ────────────────── */
.benefits{background:transparent;border-left:0;border-top:2px solid var(--dunkel);
  border-radius:0;padding:22px 0 0}
.benefit-liste{gap:0 32px}
.benefit-liste li{padding:13px 0;border-bottom:1px solid var(--linie)}
.benefit-liste .bi{border-radius:0;width:30px;height:30px;background:transparent;
  color:var(--akzent);border:1px solid var(--linie)}

/* ── Kulturseite ─────────────────────────────────────────────── */
.leitsaetze{gap:0;border-top:2px solid var(--dunkel)}
.leit{background:transparent;border-left:0;border-bottom:1px solid var(--linie);
  border-radius:0;padding:22px 0}
.leit-nr{border-radius:0;background:transparent;color:var(--gold);
  font-family:var(--font-display);font-size:1.4rem;width:44px;height:auto;
  align-items:flex-start;font-variant-numeric:tabular-nums}
.leit h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem}
.kultur .claim{font-family:var(--font-display);font-weight:600;font-size:1.9rem;
  text-transform:uppercase;letter-spacing:.02em;padding:26px 0;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}

/* ── Fußzeile ────────────────────────────────────────────────── */
.fuss{border-top-width:8px}
.fuss strong{font-weight:600}

/* ── Admin: gleiche Formensprache ────────────────────────────── */
.zahl{border-radius:0;box-shadow:none;border:1px solid var(--linie);border-left:3px solid var(--akzent)}
.zahl b{font-weight:600}
.tafel{border-radius:0;box-shadow:none;border:1px solid var(--linie)}
.formular{border-radius:0;box-shadow:none;border:1px solid var(--linie)}
.anmelden-karte{border-radius:0;box-shadow:none;border-top-width:3px}
.admin-nav a{border-radius:0}
.stat{border-radius:0;font-weight:600}


/* ── Listen in der Stellenbeschreibung ────────────────────────
   Der globale Reset nimmt ul/ol das Padding, dadurch standen die
   Punkte buendig am linken Rand. Die zweite Regelgruppe faengt
   Listen ohne Klasse ab, wie sie aeltere Inhalte enthalten. */
.inhalt .ul, .inhalt ul:not(.benefit-liste), .inhalt ol { padding-left: 6px; margin: 0 0 16px }
.inhalt ul:not(.benefit-liste):not(.ul) { list-style: none }
.inhalt ul:not(.benefit-liste):not(.ul) li { padding: 5px 0 5px 26px; position: relative }
.inhalt ul:not(.benefit-liste):not(.ul) li::before { content: ""; position: absolute;
  left: 4px; top: 13px; width: 9px; height: 9px; background: var(--akzent); border-radius: 2px }


.fotoband{margin:0 0 56px}
.fotoband img{display:block;width:100%;height:420px;object-fit:cover}
@media(max-width:760px){.fotoband img{height:260px}}