/* 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 { text-align: center; }

/* --- Bildsaeulen im Kopf ------------------------------------------------
 *
 * Zwei schmale Hochformat-Rahmen links und rechts vom Text. Sie blenden
 * langsam durch, damit oben Leben ist, ohne dass die Ueberschrift vor einem
 * Foto steht: ein Bild hinter dem Text braucht eine dunkle Abdeckung, und
 * danach ist vom Bild nichts mehr uebrig.
 *
 * Der Wechsel laeuft ohne JavaScript. Das ist hier nicht nur sparsam,
 * sondern noetig: die Inhaltsrichtlinie der Seite erlaubt kein Skript aus
 * dem Dokument, und ein Bildwechsel ist die Ausnahme im Regelwerk nicht
 * wert.
 */
.buehne .mitte.mit-bildern { max-width: 1240px; }

.buehne-raster.mit-bildern {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 240px;
    align-items: center;
    gap: 48px;
}

.buehne-saeule {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    /* Wie lange ein Bild steht. Der Zyklus einer Saeule ist Takt mal Anzahl. */
    --takt: 6s;
    /* Die rechte Saeule laeuft einen halben Takt versetzt, sonst wechseln
       beide Seiten im selben Augenblick - das zuckt. */
    --versatz: 0s;
}
/* Negativ, nicht positiv: eine positive Verzoegerung liesse den rechten
   Rahmen die ersten Sekunden leer. So startet er mitten im Lauf und zeigt
   sofort ein Bild. */
.buehne-raster > .buehne-saeule:last-child { --versatz: -3s; }

.buehne-saeule img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Grundzustand unsichtbar: ein Bild mit noch nicht abgelaufener
       Verzoegerung zeigt sonst bis dahin volle Deckkraft - alle Bilder
       laegen uebereinander sichtbar. */
    opacity: 0;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Eine einzelne Aufnahme je Seite wechselt nichts, sie steht einfach. */
.buehne-saeule.wechsel-1 img { opacity: 1; }

.buehne-saeule.wechsel-2 img { animation-name: blende2; animation-duration: calc(2 * var(--takt)); }
.buehne-saeule.wechsel-3 img { animation-name: blende3; animation-duration: calc(3 * var(--takt)); }
.buehne-saeule.wechsel-4 img { animation-name: blende4; animation-duration: calc(4 * var(--takt)); }

.buehne-saeule img:nth-child(1) { animation-delay: var(--versatz); }
.buehne-saeule img:nth-child(2) { animation-delay: calc(var(--versatz) + 1 * var(--takt)); }
.buehne-saeule img:nth-child(3) { animation-delay: calc(var(--versatz) + 2 * var(--takt)); }
.buehne-saeule img:nth-child(4) { animation-delay: calc(var(--versatz) + 3 * var(--takt)); }

/* Sichtbar ist jeweils der eigene Abschnitt des Zyklus, die Uebergaenge
   liegen in den wenigen Prozent davor und danach. */
@keyframes blende2 {
    0% { opacity: 0 } 4% { opacity: 1 } 46% { opacity: 1 } 50%, 100% { opacity: 0 }
}
@keyframes blende3 {
    0% { opacity: 0 } 3% { opacity: 1 } 30% { opacity: 1 } 33.33%, 100% { opacity: 0 }
}
@keyframes blende4 {
    0% { opacity: 0 } 2% { opacity: 1 } 23% { opacity: 1 } 25%, 100% { opacity: 0 }
}

/* Ein leiser Rand nach innen, damit das Foto nicht auf dem dunklen Band
   klebt, sondern in einem Rahmen sitzt. */
.buehne-saeule::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
    pointer-events: none;
}

/* Unter dieser Breite bleiben von 240 px Saeule und 616 px Text nur noch
   Reste. Dann faellt der Kopf auf die reine Textfassung zurueck - das ist
   besser als drei gequetschte Spalten. */
@media (max-width: 1000px) {
    .buehne-raster.mit-bildern { display: block; }
    .buehne .mitte.mit-bildern { max-width: var(--breite); }
    .buehne-saeule { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .buehne-saeule img { animation: none; opacity: 0; }
    .buehne-saeule img:first-child { opacity: 1; }
}

.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(300px, 1fr));
    gap: 20px;
    margin-top: 26px;
}

/* Die Karten stehen jetzt auf hellem Grund und tragen das Kopfbild ihrer
   Stelle. Vorher waren es acht graue Rechtecke mit einem Emoji - die Bilder
   lagen die ganze Zeit in der Datenbank und wurden nur nicht gezeigt. */
.stelle-karte {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 1px 0 var(--linie-hell), 0 10px 28px rgba(42, 37, 32, .07);
    text-decoration: none;
    color: var(--text-warm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.stelle-karte:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 0 var(--linie-hell), 0 20px 44px rgba(42, 37, 32, .14);
}
.stelle-karte:hover .weiter { gap: 12px; color: var(--terracotta); }
.stelle-karte:hover .karte-bild img { transform: scale(1.05); }
.stelle-karte:focus-visible { outline: 3px solid var(--orange-kraeftig); outline-offset: 3px; }

.karte-bild {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sand, #efe8dc);
}
.karte-bild img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 40%;
    display: block;
    transition: transform .45s ease;
}

/* Das Symbol sitzt auf der Bildkante und verbindet Bild und Text */
.karte-icon {
    position: absolute;
    left: 18px; bottom: -21px;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--warm-dunkel, #26211c);
    box-shadow: 0 0 0 3px #fff;
    font-size: 20px;
}

.karte-text { padding: 32px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.karte-text .rubrik {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--terracotta); margin: 0 0 5px;
}
.stelle-karte h3 { color: var(--text-warm); margin-bottom: 2px; }
.stelle-karte .untertitel { font-size: 14px; color: var(--leise-hell); margin: 0 0 12px; }
.stelle-karte .kurztext { font-size: 15px; color: var(--leise-hell); margin: 0 0 16px; flex: 1; }

.marken { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.marke {
    font-size: 12px; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
    background: rgba(42, 37, 32, .05);
    box-shadow: inset 0 0 0 1px var(--linie-hell);
    color: var(--leise-hell);
}
.marke.betont {
    background: rgba(249, 115, 22, .12);
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .3);
    color: var(--terracotta);
    font-weight: 600;
}

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

/* --- Filterzeile ------------------------------------------------------- */

.filterzeile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.filterknopf {
    display: inline-flex; align-items: center; gap: 8px;
    font: inherit; font-size: 14px; font-weight: 600;
    padding: 9px 17px; border-radius: 999px;
    border: 1px solid var(--linie-hell);
    background: transparent; color: var(--leise-hell);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.filterknopf:hover { border-color: var(--terracotta); color: var(--terracotta); }
.filterknopf.aktiv {
    background: var(--warm-dunkel, #26211c); border-color: var(--warm-dunkel, #26211c);
    color: #fff;
}
.filterknopf .anzahl {
    font-size: 12px; font-variant-numeric: tabular-nums;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(42, 37, 32, .08);
}
.filterknopf.aktiv .anzahl { background: rgba(255, 255, 255, .18); }
.filterknopf:focus-visible { outline: 3px solid var(--orange-kraeftig); outline-offset: 2px; }

.stelle-karte[hidden] { display: none; }
.nichts-gefunden { margin-top: 26px; color: var(--leise-hell); font-size: 15px; }

/* --- Auftritt ---------------------------------------------------------
 * Genau eine Bewegungssprache: Elemente kommen von unten herein, leicht
 * versetzt. Kein Hochzaehlen von Zahlen - "seit 2009" von null hochlaufen
 * zu lassen ergibt keinen Sinn, und nur eine von vier zu bewegen ist
 * schlechter als keine.
 */
.auftritt { opacity: 0; transform: translateY(14px); }
.auftritt.da {
    opacity: 1; transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .auftritt { opacity: 1; transform: none; }
    .stelle-karte:hover { transform: none; }
    .stelle-karte:hover .karte-bild img { transform: none; }
}

/* Ohne JavaScript bleibt nichts unsichtbar liegen */
.kein-js .auftritt { opacity: 1; transform: none; }

/* --- 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-color statt background - sonst faellt beim Hineinklicken
       das Pfeil-Bild des Auswahlfeldes weg. */
    background-color: 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 {
    position: relative;
    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);
}

/* Querformat fuellt die Breite - dafuer ist es gemacht. */
.kopfbild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

/* Hochformat NICHT auf 21:9 beschneiden: davon blieben 34 Prozent uebrig,
 * und bei Personenfotos sind das die Schultern ohne Koepfe. Stattdessen wird
 * das Bild vollstaendig in einen Streifen fester Hoehe gestellt und der Rest
 * mit einer unscharfen, abgedunkelten Fassung desselben Bildes gefuellt.
 * Der Hintergrund ist ein zweites <img> und kein Inline-Stil: die
 * Sicherheitsrichtlinie der Seite verwirft style-Attribute. */
.kopfbild.hoch { height: 440px; }

.kopfbild.hoch .grund {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    filter: blur(30px) brightness(.45) saturate(1.1);
    transform: scale(1.2);
}

.kopfbild.hoch .motiv {
    position: relative;
    width: auto;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: auto;
    object-fit: contain;
}

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

.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;
    /* Fuenf Hochformate in einer Reihe. Bei 1072 px Inhaltsbreite ist eine
       Spalte 203 px breit; drei Reihen a 92 px plus zwei Luecken ergeben
       304 px - also genau 2:3, das Format der Fotos.
       auto-fit statt fester Spaltenzahl: kaeme spaeter ein Querformat dazu,
       belegt es zwei Spalten, und das Raster faengt das ab. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    grid-auto-rows: 92px;
    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: 900px) {
    /* Schmaler Bildschirm: drei Spalten, dafuer hoehere Reihen - das
       Seitenverhaeltnis bleibt dabei nah an 2:3. */
    .galerie { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 118px; }
}

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

/* 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; }
}

/* ==========================================================================
   Stellenseiten: zwei Baender statt einer durchgehenden dunklen Flaeche
   ==========================================================================
   Die Uebersicht bleibt dunkel - sie ist der Einstieg. Die Detailseiten
   wechseln zwischen einem warmen Dunkel und einem warmen Hell. Genau zwei
   Toene: jeder weitere erzeugt einen Wechsel, der Luft braucht, und daraus
   entsteht die Wucht, die eine Stellenseite unlesbar lang macht.
   -------------------------------------------------------------------------- */

:root {
    --warm-dunkel: #26211c;
    --warm-hell:   #faf7f1;
    --terracotta:  #b4491f;
    --gruen:       #6fcf97;
    --text-warm:   #2a2520;
    --leise-hell:  #6e655a;
    --linie-hell:  rgba(42, 37, 32, .13);
}

body.stelle { background: var(--warm-dunkel); }

.band { padding: 56px 0; }
.band.dunkel { background: var(--warm-dunkel); color: var(--text); }
.band.hell   { background: var(--warm-hell);   color: var(--text-warm); }

/* Zwei gleichfarbige Baender hintereinander - das passiert, sobald ein
   Block leer bleibt (etwa die Team-Stimmen). Ohne diese Regel stossen zwei
   Polster aneinander: 112 px Leere ohne erkennbaren Grund. Sie verhalten
   sich dann wie zwei Abschnitte innerhalb eines Bandes. */
.band.dunkel + .band.dunkel,
.band.hell   + .band.hell { padding-top: 0; }
.band.dunkel + .band.dunkel > .mitte,
.band.hell   + .band.hell > .mitte {
    padding-top: 34px;
    border-top: 1px solid var(--linie);
}
.band.hell + .band.hell > .mitte { border-top-color: var(--linie-hell); }

/* Innerhalb eines Bandes trennt eine Linie, kein weiteres Polster. Das spart
   je Uebergang rund 70 px, ohne dass etwas zusammenklebt. */
.teil + .teil {
    margin-top: 38px;
    padding-top: 34px;
    border-top: 1px solid var(--linie);
}
.band.hell .teil + .teil { border-top-color: var(--linie-hell); }

.band.hell .augenbraue,
.band.hell .hand          { color: var(--terracotta); }
.band.hell .fliess,
.band.hell .liste-einfach li,
.band.hell .punkt span    { color: var(--leise-hell); }
.band.hell .liste-einfach li::before { color: var(--terracotta); }
.band.hell h2             { color: var(--text-warm); }
.band.hell .punkt {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--linie-hell), 0 6px 18px rgba(42,37,32,.05);
}
.band.hell .punkt .haken { background: rgba(180,73,31,.11); color: var(--terracotta); }

/* Auf den Stellenseiten sitzt alles enger als auf der Uebersicht */
.band .abschnitt { padding: 0; }
.band h2 { font-size: clamp(26px, 3.4vw, 38px); }

/* --- Antwortzusage im Kopfbereich --------------------------------------- */
.zusage {
    display: flex; align-items: center; gap: 9px;
    margin: 18px 0 0; font-size: 15px; color: var(--text-leise);
}
.zusage .leuchte {
    width: 9px; height: 9px; border-radius: 50%; background: var(--gruen);
    flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(111, 207, 151, .18);
}
.zusage b { color: var(--text); }

/* --- Belege: schmale Zeile, keine Kacheln -------------------------------- */
.belegstreifen {
    display: flex; flex-wrap: wrap; gap: 12px 32px;
    margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linie);
}
.belegzahl { display: flex; align-items: baseline; gap: 9px; }
.belegzahl b {
    font-family: var(--schrift-titel); font-size: 34px; line-height: 1;
    color: var(--orange); font-variant-numeric: tabular-nums;
}
.belegzahl span { font-size: 13px; color: var(--text-leise); max-width: 200px; line-height: 1.35; }
.sterne { color: var(--orange); letter-spacing: 1px; font-size: 13px; }

/* --- Abendablauf: waagerecht ------------------------------------------- */
.ablauf {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 24px; position: relative;
}
.ablauf::before {
    content: ""; position: absolute; left: 7px; right: 7px; top: 31px; height: 2px;
    background: linear-gradient(90deg, var(--orange-kraeftig), rgba(180, 73, 31, .25));
}
.schritt { position: relative; padding-right: 16px; }
.schritt .uhr {
    font-family: var(--schrift-titel); font-size: 26px; line-height: 1;
    color: var(--terracotta); display: block; margin-bottom: 9px;
    font-variant-numeric: tabular-nums;
}
.schritt .marke {
    display: block; width: 14px; height: 14px; border-radius: 50%;
    background: var(--warm-hell); border: 3px solid var(--orange-kraeftig);
    margin-bottom: 13px; position: relative; z-index: 1;
}
.schritt b { display: block; font-size: 14px; margin-bottom: 2px; color: var(--text-warm); }
.schritt p { margin: 0; font-size: 13px; color: var(--leise-hell); line-height: 1.45; }

@media (max-width: 780px) {
    .ablauf { grid-template-columns: 1fr; }
    .ablauf::before { left: 6px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto;
        background: linear-gradient(180deg, var(--orange-kraeftig), rgba(180,73,31,.25)); }
    .schritt { display: grid; grid-template-columns: 14px 62px 1fr; gap: 0 14px;
        align-items: start; padding: 9px 0; }
    .schritt .marke { margin: 4px 0 0; }
    .schritt .uhr { margin: 0; font-size: 23px; }
}

/* --- Gaestestimmen ------------------------------------------------------- */
.stimmen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px; margin-top: 22px;
}
.stimme {
    background: #fff; border-radius: 14px; padding: 18px 20px;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 0 var(--linie-hell), 0 8px 22px rgba(42, 37, 32, .05);
}
.stimme .oben { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stimme blockquote { margin: 0 0 12px; font-size: 14px; line-height: 1.55; flex: 1; color: var(--text-warm); }
.stimme .wer { font-size: 13px; color: var(--leise-hell); }
.stimme .wer b { color: var(--text-warm); }
.quelle-marke {
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #3f6b54; background: rgba(63, 107, 84, .1); padding: 3px 8px; border-radius: 5px;
}

/* Stimmen aus dem Team: dieselbe Karte, nur mit Kreis statt Sternen */
.stimme .kopfzeile { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.stimme .kreis {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(180, 73, 31, .13);
    display: grid; place-items: center; font-size: 17px; flex: 0 0 auto;
}
.stimme .name { font-weight: 700; font-size: 14px; color: var(--text-warm); }
.stimme .rolle { font-size: 12px; color: var(--leise-hell); }

/* --- Kompaktere Aufgaben/Anforderungen ---------------------------------- */
.band .punkte { gap: 11px; margin-top: 20px; }
.band .punkt { padding: 16px 18px; }
.band .punkt b { font-size: 15px; }
.band .punkt span { font-size: 14px; }

/* Erfolgsmeldung im zweiten Schritt - dieselbe Kachel wie die Fehlermeldung,
   nur in Gruen. */
.meldung.gut {
    background: rgba(111, 207, 151, .12);
    box-shadow: inset 0 0 0 1px rgba(111, 207, 151, .32);
    color: #9fe3ba;
}
.band.hell .meldung.gut { color: #2f6f4f; }

/* --- Formulare auf hellem Grund -----------------------------------------
 *
 * Die Formularteile sind fuer das dunkle Band gebaut: weisse Schrift, ein
 * weisser Schleier als Flaeche, Haarlinien aus Weiss. Auf dem hellen Band
 * bleibt davon nichts uebrig - weisse Schrift auf Creme, Felder ohne
 * erkennbaren Rand, und die Karte darunter verschwindet ganz.
 *
 * Betroffen ist heute nur der Nachtrag auf der Dankeseite. Die Regeln
 * haengen trotzdem am Band und nicht am Nachtrag: Wandert einmal ein
 * anderes Formular auf hellen Grund, ist es damit gleich richtig.
 */
.band.hell .karte {
    background: #fff;
    box-shadow: 0 1px 2px rgba(42, 37, 32, .05), 0 8px 28px rgba(42, 37, 32, .06);
}
/* Der Lichtrand der Karte ist auf Weiss unsichtbar und macht nur Kanten. */
.band.hell .karte::before { display: none; }

.band.hell .formular-kopf p,
.band.hell .feld > label,
.band.hell .gruppe > .beschriftung,
.band.hell .datei-feld,
.band.hell .einwilligung { color: var(--leise-hell); }

.band.hell legend { color: var(--terracotta); }
.band.hell .einwilligung a,
.band.hell .datei-feld .gewaehlt { color: var(--terracotta); }
.band.hell .absenden .hinweis,
.band.hell .still { color: #7d7367; }

.band.hell input[type="text"],
.band.hell input[type="email"],
.band.hell input[type="tel"],
.band.hell input[type="date"],
.band.hell input[type="number"],
.band.hell select,
.band.hell textarea {
    /* background-color, nicht background: Die Kurzschreibweise setzt auch
       background-repeat und -position zurueck. Der Pfeil im Auswahlfeld
       kachelt sich dann als Schraffur ueber das ganze Feld. */
    background-color: #fff;
    border-color: var(--linie-hell);
    color: var(--text-warm);
}
.band.hell input::placeholder,
.band.hell textarea::placeholder { color: #7d7367; }

.band.hell input:focus,
.band.hell select:focus,
.band.hell textarea:focus {
    border-color: var(--terracotta);
    background-color: rgba(180, 73, 31, .04);
}

/* Der Pfeil im Auswahlfeld ist ein Bild und erbt keine Farbe - er muss
   eigens dunkel gesetzt werden, sonst bleibt er hellgrau auf Weiss. */
.band.hell select {
    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='%236e655a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.band.hell select option { background: #fff; color: var(--text-warm); }

.band.hell .kachel {
    background: #fff;
    border-color: var(--linie-hell);
    color: var(--leise-hell);
}
.band.hell .kachel:hover { border-color: var(--terracotta); color: var(--text-warm); }
.band.hell .kachel:has(input:checked) {
    background: rgba(180, 73, 31, .10);
    border-color: var(--terracotta);
    color: var(--terracotta);
}

.band.hell .datei-feld { border-color: var(--linie-hell); }
.band.hell .datei-feld:hover {
    border-color: var(--terracotta);
    background: rgba(180, 73, 31, .04);
}

.band.hell .meldung.fehler {
    background: rgba(176, 42, 42, .08);
    box-shadow: inset 0 0 0 1px rgba(176, 42, 42, .28);
    color: #8f2020;
}