/* Stellenanzeigen - Einzelansicht und Listing.
   Farben kommen aus der Kadence-Palette (global-palette3 = Gold, 4 = Hellblau, 7 = heller Grund). */

/* ---------- Hero ---------- */
.att-job-hero {
    background: var(--global-palette7, #eef0e4);
    padding: 4rem 1.5rem 3rem;
}

.att-job-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.att-job-hero__kicker {
    margin: 0 0 .5rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
    color: var(--global-palette3, #b5976e);
}

.att-job-hero__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.15;
    color: var(--global-palette1, #454247);
}

.att-job-hero__meta {
    margin: .75rem 0 0;
    color: var(--global-palette2, #555262);
}

/* ---------- Inhalt (vom Plugin gerendert) ---------- */
.att-job-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

/* Der Bewerben-Button des Plugins auf die Site-Optik ziehen. */
.att-job-content .jp-apply-button {
    background: var(--global-palette3, #b5976e);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: .9rem 1.75rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s ease;
}

.att-job-content .jp-apply-button:hover,
.att-job-content .jp-apply-button:focus-visible {
    background: var(--global-palette1, #454247);
}

/* ---------- Kontaktabschnitt ---------- */
.att-job-kontakt {
    background: var(--global-palette1, #454247);
    color: #fff;
    padding: 3rem 1.5rem;
}

.att-job-kontakt__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.att-job-kontakt h2 {
    margin: 0 0 .5rem;
    color: #fff;
}

.att-job-kontakt__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.5rem 0 0;
}

.att-job-kontakt__links a {
    color: var(--global-palette4, #7bb5dd);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.att-job-kontakt__links a:hover {
    color: #fff;
}

/* ---------- Gleich hohe Kacheln ----------
   Betrifft drei Stellen: die Stellen-Karten im Listing, die Benefit-Kacheln und die
   Bewerbungsschritte. Ueberall dasselbe Problem:

   Kadence streckt seine Spalten im Grid korrekt auf gleiche Hoehe. Die *sichtbare*
   Kachel ist aber nicht die Spalte, sondern .kt-inside-inner-col darin (dort liegen
   Hintergrund, Radius und Schatten) - und die bleibt auf Inhaltshoehe. Kadences
   eigenes height-Attribut hilft nicht: es erzeugt min-height mit festem Pixelwert
   und waere bei wechselnden Inhalten wieder brüchig. Also die Hoehenkette schliessen. */

/* Kacheln auf der Seite: mit .att-tile markierte Spalten (Benefits, Bewerbungsschritte) */
.att-tile > .kt-inside-inner-col {
    height: 100%;
}

/* Infobox fuellt ihre Spalte (Benefit-Kacheln: Hintergrund liegt auf der Infobox) */
.att-tile .wp-block-kadence-infobox,
.att-tile .kt-blocks-info-box-link-wrap {
    height: 100%;
}

/* Listing: das Grid-Item ist ein <li>, die Spalte darin muss es ausfuellen */
.kb-query-grid-wrap .kb-query-item > .wp-block-kadence-column {
    height: 100%;
}

.kb-query-grid-wrap .kb-query-item .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Button unten buendig, statt mitten in der Karte zu haengen. */
.kb-query-grid-wrap .kb-query-item .kt-inside-inner-col > .wp-block-kadence-advancedbtn {
    margin-top: auto;
}

/* ---------- Benefit-Icons auf den farbigen Kacheln ----------
   Die Icon-SVGs sind zweifarbig: #454247 (dunkel) + #7ab4dc (blau). Die dunkle
   Kachel (palette1) ist exakt #454247, die blaue (palette4) fast #7ab4dc - dadurch
   kollidiert je eine Icon-Farbe mit dem Hintergrund und verschwindet. Bei "Sie sind
   nicht allein" blieb so nur eine von zwei Personen sichtbar. Deshalb die Icons auf
   den Kacheln einheitlich weiss einfaerben - voll sichtbar auf allen drei Farben und
   im selben Stil wie die farbigen Kacheln der Startseite. Trifft nur die Benefit-
   Infoboxen; die Schritt-Kacheln (.att-tile ohne Infobox) haben kein Icon. */
.att-tile .kt-info-box-image {
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
    .att-job-hero {
        padding: 2.5rem 1.25rem 2rem;
    }
    .att-job-content {
        padding: 2rem 1.25rem;
    }
}