/* Karriereseite Marianne's Flammkuchen
 *
 * Die Gestaltung folgt der Catering-Angebotsseite (link.refocusly.com): dunkler
 * Grund, Orange als einzige Akzentfarbe, Amatic SC fuer grosse Ueberschriften,
 * Caveat fuer handschriftliche Zwischentoene, Systemschrift fuer Fliesstext.
 * Die Werte sind dort ausgelesen, nicht geschaetzt.
 */

:root {
    --grund:          #0a0a0a;
    --grund-karte:    rgba(23, 23, 23, .5);
    --orange:         #fb923c;
    --orange-kraeftig:#f97316;
    --orange-schleier:rgba(249, 115, 22, .10);
    --orange-rand:    rgba(249, 115, 22, .28);
    --linie:          rgba(255, 255, 255, .10);
    --text:           #ffffff;
    --text-leise:     #a3a3a3;
    --text-still:     #737373;
    --karte-verlauf:  linear-gradient(225deg,
                          rgba(255,255,255,.02) 0%,
                          rgba(255,255,255,.06) 50%,
                          rgba(255,255,255,.02) 100%);
    --schrift:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                      Helvetica, Arial, sans-serif;
    --schrift-titel:  "Amatic SC", var(--schrift);
    --schrift-hand:   "Caveat", "Segoe Print", cursive;
    --breite:         1120px;
    --radius:         24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Der warme Schimmer hinter dem Kopfbereich. Zwei sehr weiche Orangetoene,
 * damit die Seite oben nicht wie ein schwarzes Loch wirkt. */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 90vh;
    background:
        radial-gradient(60% 50% at 15% 0%, rgba(249,115,22,.13), transparent 70%),
        radial-gradient(50% 45% at 85% 5%, rgba(251,146,60,.07), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.huelle { position: relative; z-index: 1; }

.mitte {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 24px;
}

a { color: inherit; }

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(10, 10, 10, .78);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--linie);
}

.kopf-innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.kopf-logo img { height: 34px; width: auto; display: block; }

.kopf-links {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    color: var(--text-leise);
}

.kopf-links a { text-decoration: none; transition: color .15s; }
.kopf-links a:hover { color: var(--orange); }

@media (max-width: 720px) {
    .kopf-links .nur-breit { display: none; }
}

/* --- Bausteine ---------------------------------------------------------- */

.pille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: var(--orange-schleier);
    color: var(--orange);
    font-size: 14px;
    font-weight: 500;
}

.augenbraue {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--orange);
    margin: 0 0 10px;
}

.augenbraue.leise { color: var(--text-leise); font-weight: 500; }

h1, h2 {
    font-family: var(--schrift-titel);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: .02em;
    margin: 0;
}

h1 { font-size: clamp(46px, 8vw, 76px); }
h2 { font-size: clamp(36px, 5.5vw, 60px); }

h3 {
    font-family: var(--schrift-hand);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0;
}

.hand {
    font-family: var(--schrift-hand);
    font-weight: 700;
    font-size: 24px;
    color: var(--orange);
    line-height: 1.2;
}

.fliess { color: var(--text-leise); }
.fliess p { margin: 0 0 16px; }
.fliess p:last-child { margin-bottom: 0; }

/* Karte mit dem charakteristischen 1px-Verlaufsrand der Vorlage.
 * Der Rand ist ein zweiter Verlauf im Hintergrund, kein border - so laesst er
 * sich auf allen vier Seiten unterschiedlich hell zeichnen. */
.karte {
    position: relative;
    border-radius: var(--radius);
    background: var(--karte-verlauf);
    padding: 28px;
}

.karte::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(225deg,
        rgba(255,255,255,.14), rgba(255,255,255,.04) 45%, rgba(255,255,255,.12));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 9999px;
    border: 0;
    background: var(--orange-kraeftig);
    color: #fff;
    font-family: var(--schrift);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
    box-shadow: 0 12px 34px rgba(249, 115, 22, .28);
}

.knopf:hover { background: var(--orange); transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }
.knopf[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.knopf.stiller {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--linie);
    color: var(--text-leise);
}
.knopf.stiller:hover { color: var(--text); border-color: var(--orange-rand); }

/* --- Kopfbereich der Uebersicht ----------------------------------------- */

.buehne { padding: 74px 0 48px; text-align: center; }
.buehne .pille { margin-bottom: 22px; }
.buehne h1 { margin-bottom: 18px; }
.buehne .unterzeile {
    max-width: 660px;
    margin: 0 auto 28px;
    font-size: 18px;
    color: var(--text-leise);
}

.buehne-zahlen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

.zahl {
    border-radius: 16px;
    background: var(--karte-verlauf);
    box-shadow: inset 0 0 0 1px var(--linie);
    padding: 14px 22px;
    min-width: 128px;
}
.zahl b {
    display: block;
    font-family: var(--schrift-hand);
    font-size: 30px;
    line-height: 1.1;
    color: var(--orange);
}
.zahl span { font-size: 13px; color: var(--text-leise); }

/* --- Stellenliste ------------------------------------------------------- */

.rubrik { padding: 34px 0 10px; }
.rubrik h2 { margin-bottom: 6px; }

.stellen-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.stelle-karte {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform .18s, box-shadow .18s;
}

.stelle-karte:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 60px rgba(249, 115, 22, .12);
}

.stelle-karte:hover .weiter { color: var(--orange); gap: 12px; }

.stelle-icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 9999px;
    background: rgba(249, 115, 22, .18);
    font-size: 25px;
    margin-bottom: 16px;
}

.stelle-karte h3 { margin-bottom: 2px; }
.stelle-karte .untertitel {
    font-size: 14px;
    color: var(--text-leise);
    margin: 0 0 14px;
}
.stelle-karte .kurztext {
    font-size: 15px;
    color: var(--text-leise);
    margin: 0 0 18px;
    flex: 1;
}

.marken { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }

.marke {
    font-size: 12px;
    padding: 4px 11px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px var(--linie);
    color: var(--text-leise);
    white-space: nowrap;
}
.marke.betont {
    background: var(--orange-schleier);
    box-shadow: inset 0 0 0 1px var(--orange-rand);
    color: var(--orange);
}

.weiter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    transition: gap .18s, color .18s;
}

/* --- Detailseite -------------------------------------------------------- */

.zurueck {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 30px 0 0;
    font-size: 14px;
    color: var(--text-leise);
    text-decoration: none;
}
.zurueck:hover { color: var(--orange); }

.stelle-kopf { padding: 26px 0 8px; }
.stelle-kopf h1 { margin-bottom: 10px; }
.stelle-kopf .untertitel { font-size: 19px; color: var(--text-leise); margin: 0; }

/* Die Datenleiste: Standort, Anstellung, Stunden, Verguetung, Start.
 * Bewusst ganz oben - das sind die Angaben, wegen derer Bewerber eine
 * Anzeige ueberhaupt weiterlesen oder wegklicken. */
.fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin: 32px 0 44px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--linie);
}

.fakt { background: #101010; padding: 20px 22px; }
.fakt dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-still);
    margin-bottom: 6px;
}
.fakt dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.fakt dd .orange { color: var(--orange); }

.abschnitt { padding: 34px 0; }
.abschnitt > h2 { margin-bottom: 20px; }

.punkte { display: grid; gap: 14px; margin-top: 22px; }

.punkt {
    display: flex;
    gap: 16px;
    border-radius: 18px;
    background: var(--karte-verlauf);
    box-shadow: inset 0 0 0 1px var(--linie);
    padding: 20px 22px;
}

.punkt .haken {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    margin-top: 2px;
    display: grid; place-items: center;
    border-radius: 9999px;
    background: var(--orange-schleier);
    color: var(--orange);
    font-size: 13px;
    font-weight: 700;
}

.punkt b { display: block; font-size: 16px; margin-bottom: 3px; }
.punkt span { color: var(--text-leise); font-size: 15px; }

.liste-einfach { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.liste-einfach li {
    display: flex; gap: 12px; align-items: flex-start;
    color: var(--text-leise);
}
.liste-einfach li::before {
    content: "•";
    color: var(--orange);
    font-weight: 700;
    line-height: 1.55;
}

/* --- Formular ----------------------------------------------------------- */

.formular-block { padding: 20px 0 70px; scroll-margin-top: 80px; }

.formular-karte { padding: 32px; }
@media (max-width: 640px) { .formular-karte { padding: 22px; } }

.formular-kopf { text-align: center; margin-bottom: 30px; }
.formular-kopf h2 { margin-bottom: 10px; }
.formular-kopf p { color: var(--text-leise); margin: 0; }

fieldset { border: 0; margin: 0 0 28px; padding: 0; }
fieldset:last-of-type { margin-bottom: 20px; }

legend {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--orange);
    padding: 0 0 14px;
}

.reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.reihe:last-child { margin-bottom: 0; }
.reihe.eins { grid-template-columns: 1fr; }

.feld { display: flex; flex-direction: column; gap: 7px; }

.feld > label, .gruppe > .beschriftung {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-leise);
}
.feld > label .pflicht, .gruppe > .beschriftung .pflicht { color: var(--orange); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--linie);
    background: rgba(255, 255, 255, .035);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 15px;
    transition: border-color .15s, background .15s;
}

input::placeholder, textarea::placeholder { color: var(--text-still); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--orange-rand);
    background: rgba(249, 115, 22, .06);
}

input:invalid:not(:placeholder-shown) { border-color: rgba(233, 61, 61, .55); }

textarea { min-height: 118px; resize: vertical; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
select option { background: #171717; color: #fff; }

/* Auswahlfelder als anklickbare Kacheln - auf dem Handy deutlich leichter zu
 * treffen als ein 16px-Kaestchen, und die ganze Zeile ist das Ziel. */
.kacheln { display: flex; flex-wrap: wrap; gap: 9px; }

.kachel {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9999px;
    border: 1px solid var(--linie);
    background: rgba(255, 255, 255, .035);
    color: var(--text-leise);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}
.kachel input { position: absolute; opacity: 0; pointer-events: none; }
.kachel:hover { border-color: rgba(249, 115, 22, .4); color: var(--text); }
.kachel:has(input:checked) {
    background: var(--orange-schleier);
    border-color: var(--orange-rand);
    color: var(--orange);
    font-weight: 600;
}

.einwilligung {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--text-leise);
    cursor: pointer;
}
.einwilligung input {
    flex: 0 0 auto;
    width: 19px; height: 19px;
    margin-top: 2px;
    accent-color: var(--orange-kraeftig);
    cursor: pointer;
}
.einwilligung a { color: var(--orange); }

.datei-feld {
    border: 1px dashed var(--linie);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    color: var(--text-leise);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.datei-feld:hover { border-color: var(--orange-rand); background: rgba(249,115,22,.04); }
.datei-feld input { display: none; }
.datei-feld .gewaehlt { color: var(--orange); font-weight: 600; }

.absenden { text-align: center; margin-top: 26px; }
.absenden .knopf { min-width: 250px; }
.absenden .hinweis { margin: 14px 0 0; font-size: 13px; color: var(--text-still); }

.meldung {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    display: none;
}
.meldung.zeigen { display: block; }
.meldung.fehler {
    background: rgba(233, 61, 61, .1);
    box-shadow: inset 0 0 0 1px rgba(233, 61, 61, .3);
    color: #ffb4b4;
}

/* Der Honigtopf. Muss fuer Menschen unsichtbar und fuer Skripte ausfuellbar
 * bleiben - deshalb versetzt statt display:none, das manche Skripte erkennen. */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* --- Danke -------------------------------------------------------------- */

.danke { text-align: center; padding: 90px 0 100px; }
.danke .gross { font-size: 62px; margin-bottom: 20px; }
.danke h1 { margin-bottom: 16px; }
.danke p { color: var(--text-leise); max-width: 560px; margin: 0 auto 12px; }
.danke .knopf { margin-top: 28px; }

/* --- Kein Angebot ------------------------------------------------------- */

.leer { text-align: center; padding: 70px 0; }
.leer .gross { font-size: 52px; margin-bottom: 18px; }
.leer p { color: var(--text-leise); max-width: 520px; margin: 0 auto 12px; }

/* --- Fuss --------------------------------------------------------------- */

.fuss {
    border-top: 1px solid var(--linie);
    margin-top: 40px;
    padding: 34px 0 44px;
    font-size: 14px;
    color: var(--text-still);
}
.fuss-innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    align-items: center;
    justify-content: space-between;
}
.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--orange); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 20px; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* --- Hilfsklassen --------------------------------------------------------
 *
 * Diese Seite laeuft unter einer strengen Content-Security-Policy mit
 * style-src 'self'. Der Browser wirft dabei JEDES style="..."-Attribut weg -
 * lautlos, die Meldung steht nur in der Entwicklerkonsole. Deshalb steht hier
 * auch das, wofuer man sonst schnell ein Inline-Attribut schreiben wuerde.
 */

.still     { color: var(--text-still); }
.leiser    { color: var(--text-leise); }
.orange    { color: var(--orange); }
.hell      { color: var(--text); }
.klein     { font-size: 13px; }
.mittel    { font-size: 14px; }
.schmal-760 { max-width: 760px; }
.schmal-560 { max-width: 560px; margin-left: auto; margin-right: auto; }
.luft-oben  { margin-top: 18px; }
.luft-oben-gross { margin-top: 26px; }

/* Das "(m/w/d)" neben der Ueberschrift - kleiner und zurueckgenommen, damit
   es den Stellentitel nicht zerreisst. */
.geschlecht { font-size: .55em; color: var(--text-leise); }

.stelle-kopf.knapp { padding-bottom: 24px; }

.danke h1.eng { margin-top: 22px; }

/* Der Kasten fuer die Initiativbewerbung am Fuss der Uebersicht */
.initiativ-karte { text-align: center; padding: 44px 28px; }
.initiativ-karte h2 { margin: 8px 0 14px; }
.initiativ-karte .fliess { max-width: 560px; margin: 0 auto 26px; }
.initiativ-karte .nachsatz { margin: 20px 0 0; font-size: 14px; color: var(--text-still); }

.feld textarea.kurz { min-height: 90px; }

/* --- Bilder --------------------------------------------------------------
 *
 * Alle drei Formen tragen `width`/`height` im HTML und ein `aspect-ratio`
 * hier. Ohne das springt der Text beim Nachladen der Bilder nach unten weg -
 * genau in dem Moment, in dem jemand anfaengt zu lesen.
 */

.kopfbild {
    margin: 22px 0 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--linie);
    background: rgba(255, 255, 255, .03);
}

.kopfbild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

@media (max-width: 640px) {
    /* Hochkant ist auf dem Handy mehr wert als ein Panoramastreifen */
    .kopfbild img { aspect-ratio: 3 / 2; }
}

.galerie-block { padding-top: 20px; }

/* Gemischte Formate: Das Bildmaterial ist ueberwiegend hochkant. Ein festes
 * Seitenverhaeltnis fuer alle haette bei zwei Dritteln der Bilder die Koepfe
 * abgeschnitten. Stattdessen belegt ein Hochformat eine Spalte und drei
 * Reihen, ein Querformat zwei Spalten und zwei Reihen - beide bleiben nah an
 * ihrem eigenen Verhaeltnis, und die Wand wirkt lebendiger als ein Raster
 * aus lauter gleichen Kacheln. */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    /* 97 px mal drei Reihen plus zwei Luecken ergibt bei rund 213 px Spalten-
       breite fast genau 2:3 - das Format der Fotos. Damit ist der Zuschnitt
       nur noch ein Rand, kein Beschnitt. */
    grid-auto-rows: 97px;
    gap: 14px;
    margin-top: 24px;
}

.galerie-bild {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--linie);
    background: rgba(255, 255, 255, .03);
    grid-row: span 3;
}

/* Querformate sind doppelt so breit, aber gleich hoch wie die Hochformate -
   so bleiben die Reihen buendig, statt zu treppen. */
.galerie-bild.quer { grid-column: span 2; }

.galerie-bild img {
    display: block;
    width: 100%;
    height: 100%;
    /* Etwas ueber der Mitte: auf Personenfotos sitzen die Gesichter im
       oberen Drittel, und die ueberlebt der Zuschnitt so am ehesten. */
    object-position: center 35%;
    object-fit: cover;
    transition: transform .35s ease;
}

.galerie-bild:hover img { transform: scale(1.04); }

@media (max-width: 560px) {
    /* Auf dem Handy zwei schmale Spalten - ein Querformat ueber beide */
    .galerie { grid-template-columns: 1fr 1fr; grid-auto-rows: 82px; }
}

/* Die Team-Bilder stehen mitten in der Vorteilsliste und benutzen deshalb
   dieselbe Kastenbreite wie ein Punkt - sonst reisst der Streifen die Liste
   optisch auseinander. */
/* Wie in der Galerie: jedes Bild behaelt sein eigenes Format. Ein 180 px
   hohes Band, in das ein 2:3-Hochformat gequetscht wird, zeigt einen Streifen
   aus der Bildmitte - Kopf und Beine sind weg. Hochformate belegen deshalb
   vier Rasterreihen, Querformate zwei.
   Die Breite ist begrenzt: der Streifen steht mitten in der Vorteilsliste und
   soll sie auflockern, nicht die halbe Seite fuellen. */
.teamstreifen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    grid-auto-rows: 72px;
    gap: 12px;
    max-width: 680px;
    margin: 6px 0;
}

.teambild {
    grid-row: span 4;            /* hochkant: rund 2:3 */
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--linie);
    background: rgba(255, 255, 255, .03);
}

.teambild.quer { grid-row: span 2; }

.teambild img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center 30%;
    object-fit: cover;
}

@media (max-width: 640px) {
    .teamstreifen { grid-auto-rows: 60px; }
}