/* Derigo Jobseite mit Kurzformular — D-144 (25.10.2026)
   Marken-Schicht über tokens.css: Werte gemessen auf derigo.at (Brand/brand.md).
   Nur hier Farben/Schriften setzen; formular.css bleibt unverändert. */

@font-face{font-family:'Oswald';font-weight:700;font-style:normal;font-display:swap;src:url('oswald-700-latin.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-weight:400;font-style:normal;font-display:swap;src:url('roboto-400-latin.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-weight:500;font-style:normal;font-display:swap;src:url('roboto-500-latin.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-weight:700;font-style:normal;font-display:swap;src:url('roboto-700-latin.woff2') format('woff2')}

:root{
  --marke:#FCCC12;          /* Derigo-Gelb, Fläche/Akzent: immer mit schwarzer Schrift */
  --marke-dunkel:#7A6300;   /* Gelb als Textfarbe (4.5:1 auf Weiß) */
  --marke-hell:#FDE27A;
  --marke-bg:#FFF7D6;
  --rot:#CC0000; --rot-hover:#B30000;
  --tinte:#000; --text:#333;
  --knopf-primaer:#CC0000;  /* Haupt-Knopf wie derigo.at: Rot mit weißer Schrift */
  --knopf-primaer-hover:#B30000;
  --knopf-primaer-text:#fff;
  --font:'Roboto',Arial,sans-serif;
  --font-marke:'Roboto',Arial,sans-serif;
  --font-titel:'Oswald',Tahoma,sans-serif;
}

html,body{margin:0;background:#fff;color:var(--text);font-family:var(--font)}
*{box-sizing:border-box}

/* Kopf wie derigo.at: hellgrau, Logo links */
.dj-kopf{background:#E3E3E3;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.dj-kopf img{height:46px;width:auto;display:block}
.dj-kopf a.dj-tel{font:500 14px/1 var(--font);color:#000;text-decoration:none}

/* Titelblock: Schwarz, Oswald versal, gelbe Eckdaten */
.dj-held{background:#000;color:#fff;padding:22px 16px 18px;text-align:left}
.dj-held h1{font:700 30px/1.08 var(--font-titel);text-transform:uppercase;margin:0 0 12px;letter-spacing:.2px}
.dj-held h1 span{color:var(--marke)}
.dj-fakten{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.dj-fakten li{font:500 14px/1 var(--font);padding:7px 10px;border-radius:999px;background:#1d1d1d;color:#fff}
.dj-fakten li.dj-gehalt{background:var(--marke);color:#000;font-weight:700}

/* Formularbereich: gelber Grund, weiße Karte wie der Bewerbungsblock auf derigo.at */
.dj-bereich{background:var(--marke);padding:14px 12px 18px}
.dj-karte{background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden;max-width:640px;margin:0 auto}
.dj-karte-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px 0}
.dj-karte-kopf strong{font:700 18px/1.1 var(--font-titel);text-transform:uppercase;color:#000}
.dj-karte-kopf small{font:500 13px/1.3 var(--font);color:#555}

/* Formular in die Karte einpassen statt Vollbild */
.dj-karte .mf{min-height:0;background:#fff}
.dj-karte .mf-buehne{padding:16px 16px 20px;align-items:flex-start;min-height:300px}
.dj-karte .mf-frage{font:700 22px/1.2 var(--font-titel);text-transform:uppercase;letter-spacing:.2px}
.dj-karte .mf-nummer{color:var(--marke-dunkel)}
.dj-karte .mf-option[aria-checked="true"] .mf-taste{color:#000}
.dj-karte .mf-fuss{position:static;background:#fff;border-top:1px solid #eee}
.dj-karte .mf-hinweis-taste{display:none}
.dj-karte .mf-weiter,.dj-karte .mf-zurueck{max-width:none;white-space:nowrap}

/* Info darunter */
.dj-info{max-width:640px;margin:0 auto;padding:22px 16px 8px}
.dj-info h2{font:700 22px/1.15 var(--font-titel);text-transform:uppercase;color:#000;margin:0 0 10px}
.dj-info ul{margin:0 0 18px;padding-left:20px;line-height:1.55}
.dj-info p{line-height:1.55;margin:0 0 12px}
.dj-fuss{background:#000;color:#bbb;font-size:13px;padding:16px;text-align:center;line-height:1.6}
.dj-fuss a{color:#fff}

@media (min-width:900px){
  .dj-held{padding:36px 24px 28px;text-align:center}
  .dj-held h1{font-size:46px}
  .dj-fakten{justify-content:center}
  .dj-bereich{padding:28px 24px 36px}
}