/*
Theme Name: Timestaff
Theme URI: https://timestaff.de/
Description: Maßgeschneidertes Theme für die Timestaff GmbH – Personaldienstleister für Zeitarbeit & Personalvermittlung. Auf Basis von ACF Pro (Flexible Content) und einem Custom Post Type für Stellenangebote. Kein Gutenberg.
Author: Timestaff
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: timestaff
*/

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
   --rot-dark: #AE2A2E;
   /* Header-Bordeaux */
   --rot: #E10915;
   /* Akzent-Rot */
   --rot-hover: #C10812;
   --rot-active: #A60710;
   --rose-bg: #FCEBEA;
   /* helles Rot (Badges) */

   --ink: #16110F;
   /* Haupttext / Headlines */
   --ink-2: #3A3330;
   --muted: #6B6360;
   --muted-2: #9A8E8A;
   --muted-3: #A89E9A;

   --bg: #FCFBFA;
   /* Seitenhintergrund */
   --bg-2: #F6F2EF;
   /* alternierende Sektion */
   --border: #ECE6E2;
   --border-2: #E4D8D4;

   --green: #1A8A4A;
   --green-bg: #E9F7EE;
   --wa: #25D366;
   /* WhatsApp */

   --font-body: Archivo, system-ui, -apple-system, Segoe UI, sans-serif;
   --font-head: 'Schibsted Grotesk', Archivo, system-ui, sans-serif;

   --radius-sm: 9px;
   --radius: 14px;
   --radius-lg: 22px;
   --radius-xl: 28px;
   --pill: 100px;

   --shadow-card: 0 18px 40px -24px rgba(40, 12, 14, .22);
   --shadow-pop: 0 24px 54px -22px rgba(40, 12, 14, .42);
   --wrap: 1180px;
}

/* =========================================================================
   2. BASE
   ========================================================================= */
* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   background: var(--bg);
   font-family: var(--font-body);
   color: var(--ink);
   -webkit-font-smoothing: antialiased;
}

::selection {
   background: var(--rot);
   color: #fff
}

a {
   text-decoration: none;
   color: inherit
}

img {
   display: block;
   max-width: 100%
}

button {
   font-family: inherit
}

h1,
h2,
h3,
h4,
p {
   margin: 0
}

ul {
   margin: 0;
   padding: 0;
   list-style: none
}

@keyframes om-rise {
   from {
      opacity: 0;
      transform: translateY(14px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

.wrap {
   max-width: var(--wrap);
   margin: 0 auto;
   padding: 0 20px
}

@media(min-width:760px) {
   .wrap {
      padding: 0 28px
   }
}

.wrap--narrow {
   max-width: 1080px
}

.wrap--tight {
   max-width: 760px
}

.section {
   padding: clamp(48px, 8vw, 84px) 0
}

.section--sm {
   padding: clamp(40px, 6vw, 68px) 0
}

.section--alt {
   background: var(--bg-2)
}

.section--white {
   background: #fff;
   border-bottom: 1px solid var(--border)
}

.is-hidden {
   display: none !important
}

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap
}

/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */
.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 13px
}

.eyebrow__dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--rot);
   flex: none
}

.eyebrow__text {
   font: 600 13px/1 var(--font-body);
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--rot)
}

.h1 {
   font: 700 clamp(31px, 6vw, 52px)/1.03 var(--font-head);
   letter-spacing: -.03em;
   color: var(--ink)
}

.h2 {
   font: 700 clamp(26px, 4.5vw, 46px)/1.04 var(--font-head);
   letter-spacing: -.03em;
   color: var(--ink)
}

.h3 {
   font: 600 18px/1.25 var(--font-head);
   letter-spacing: -.02em;
   color: var(--ink)
}

.lead {
   font: 400 clamp(16px, 2.2vw, 19px)/1.6 var(--font-body);
   color: var(--muted)
}

.text {
   font: 400 16px/1.6 var(--font-body);
   color: var(--muted)
}

.text strong {
   color: var(--ink)
}

.section__head {
   max-width: 660px;
   margin-bottom: 32px
}

.section__head .lead {
   margin-top: 12px
}

/* =========================================================================
   4. BUTTONS
   ========================================================================= */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 14px 24px;
   border-radius: var(--pill);
   border: 1px solid transparent;
   font: 600 14.5px/1 var(--font-body);
   white-space: nowrap;
   cursor: pointer;
   transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
}

.btn--primary {
   background: var(--rot);
   color: #fff;
   box-shadow: 0 12px 28px -12px rgba(225, 9, 21, .5)
}

.btn--primary:hover {
   background: var(--ink);
   color: #fff
}

.btn--dark {
   background: var(--ink);
   color: #fff;
   box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .4)
}

.btn--dark:hover {
   background: var(--rot);
   box-shadow: 0 14px 30px -12px rgba(225, 9, 21, .55)
}

.btn--ghost {
   background: #fff;
   color: var(--ink);
   border-color: var(--border)
}

.btn--ghost:hover {
   border-color: var(--rot);
   color: var(--rot)
}

.btn--light {
   background: #fff;
   color: var(--rot);
   box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .4)
}

.btn--light:hover {
   background: var(--ink);
   color: #fff
}

.btn--on-red {
   background: rgba(255, 255, 255, .16);
   border-color: rgba(255, 255, 255, .45);
   color: #fff
}

.btn--on-red:hover {
   background: rgba(255, 255, 255, .26);
   border-color: #fff
}

.btn--block {
   width: 100%
}

.btn--lg {
   padding: 15px 26px;
   font-size: 15px
}

.link-arrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font: 600 14.5px/1 var(--font-body);
   color: var(--rot)
}

.link-arrow:hover {
   color: var(--rot-hover)
}

/* =========================================================================
   5. HEADER
   ========================================================================= */
.site-header {
   position: sticky;
   top: 0;
   z-index: 70;
   background: var(--rot-dark);
   border-bottom: 1px solid rgba(0, 0, 0, .1);
   box-shadow: 0 6px 22px -18px rgba(90, 18, 20, .55)
}

.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 11px 0
}

.brand {
   display: flex;
   align-items: center
}

.brand img {
   height: 30px;
   width: auto
}

.nav {
   display: none
}

.nav__link {
   font: 500 14.5px/1 var(--font-body);
   color: rgba(255, 255, 255, .82);
   transition: color .15s
}

.nav__link:hover {
   color: #fff;
   font-weight: 600
}

.nav__link.is-active {
   color: #fff;
   font-weight: 700
}

/* Safety: falls je eine Listenstruktur im Menü landet – keine Bullets */
.nav ul,
.mobile-menu ul,
.footer-col__links ul,
.footer-bottom__links ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: contents
}

.nav li,
.mobile-menu li,
.footer-col__links li,
.footer-bottom__links li {
   list-style: none
}

.header-actions {
   display: flex;
   align-items: center;
   gap: 10px
}

.apply {
   position: relative;
   display: inline-flex
}

.apply__trigger {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   height: 42px;
   padding: 0 18px;
   border-radius: var(--pill);
   background: #fff;
   color: var(--rot);
   font: 600 13.5px/1 var(--font-body);
   white-space: nowrap;
   cursor: pointer;
   border: none;
   box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35)
}

.apply__trigger:hover {
   background: var(--ink);
   color: #fff
}

.apply__caret {
   font-size: 10px;
   opacity: .85
}

.apply__backdrop {
   position: fixed;
   inset: 0;
   z-index: 80
}

.apply__menu {
   position: absolute;
   top: calc(100% + 12px);
   right: 0;
   width: 252px;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 8px;
   box-shadow: var(--shadow-pop);
   z-index: 90;
   animation: om-rise .16s ease both
}

.apply__item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px;
   border-radius: 13px
}

.apply__item:hover {
   background: var(--bg-2)
}

.apply__ico {
   flex: none;
   width: 40px;
   height: 40px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center
}

.apply__ico--mail {
   background: #F0EAE6;
   color: var(--ink)
}

.apply__ico--form {
   background: var(--rose-bg);
   color: var(--rot)
}

.apply__ico--wa {
   background: var(--green-bg);
   color: var(--wa)
}

.apply__t {
   display: block;
   font: 600 14px/1.2 var(--font-body);
   color: var(--ink)
}

.apply__s {
   display: block;
   font: 500 12px/1.2 var(--font-body);
   color: var(--muted-2);
   margin-top: 3px
}

.burger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   border-radius: var(--pill);
   border: 1px solid rgba(255, 255, 255, .35);
   background: rgba(255, 255, 255, .14);
   cursor: pointer;
   font-size: 18px;
   color: #fff
}

.mobile-menu {
   display: flex;
   flex-direction: column;
   gap: 2px;
   margin-top: 8px;
   margin-bottom: 10px;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 10px;
   box-shadow: 0 18px 44px -22px rgba(40, 12, 14, .34)
}

.mobile-menu[hidden],
.apply__menu[hidden] {
   display: none
}

.mobile-menu a {
   padding: 14px 16px;
   border-radius: var(--radius);
   font: 600 15.5px/1 var(--font-body);
   color: var(--ink)
}

.mobile-menu a.is-active {
   color: var(--rot)
}

.mobile-menu a:active {
   background: var(--bg-2)
}

@media(max-width:520px) {
   .header-inner {
      gap: 8px;
      padding: 9px 0
   }

   .apply__trigger {
      height: 38px;
      padding: 0 14px;
      font-size: 12.5px
   }

   .burger {
      width: 38px;
      height: 38px
   }

   .brand img {
      height: 27px
   }

   .apply__menu {
      width: 230px
   }
}

@media(min-width:1040px) {
   .nav {
      display: flex;
      align-items: center;
      gap: 22px
   }

   .burger {
      display: none
   }

   .mobile-menu {
      display: none !important
   }

   .brand img {
      height: 34px
   }
}

/* =========================================================================
   6. HERO (Startseite – Slider)
   ========================================================================= */
.hero {
   padding: 14px 16px 0
}

.hero-card {
   position: relative;
   overflow: hidden;
   background: #fff;
   border-radius: 26px;
   box-shadow: 0 24px 60px -36px rgba(40, 12, 14, .4);
   max-width: var(--wrap);
   margin: 0 auto
}

.hero-photo {
   position: relative;
   width: 100%;
   height: 62vw;
   min-height: 300px;
   max-height: 420px;
   overflow: hidden
}

.hero-slide {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 78% 22%;
   opacity: 0;
   transition: opacity .9s ease
}

.hero-slide.is-active {
   opacity: 1
}

.hero-scrim {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(120, 8, 14, .04), rgba(120, 8, 14, .16))
}

.hero-dots {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 14px;
   display: flex;
   justify-content: center;
   gap: 8px;
   z-index: 4
}

.hero-dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   border: none;
   cursor: pointer;
   padding: 0;
   background: rgba(255, 255, 255, .5);
   transition: all .2s
}

.hero-dot.is-active {
   background: #fff;
   width: 24px;
   border-radius: var(--pill)
}

.hero-stage {
   position: relative;
   z-index: 3;
   padding: 26px 0 30px
}

.hero-col {
   display: flex;
   flex-direction: column;
   gap: 18px;
   max-width: 560px;
   animation: om-rise .5s ease both
}

.hero-kicker {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: #fff;
   border: 1px solid var(--border);
   padding: 8px 15px;
   border-radius: var(--pill);
   width: fit-content;
   box-shadow: 0 4px 14px -8px rgba(40, 12, 14, .2)
}

.hero-kicker__dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--rot);
   display: inline-block
}

.hero-kicker__text {
   font: 600 12.5px/1 var(--font-body);
   color: var(--muted)
}

.hero-h1 {
   margin: 0;
   font: 700 clamp(31px, 7.6vw, 42px)/1.02 var(--font-head);
   letter-spacing: -.03em;
   color: var(--ink)
}

.hero-h1 .hl {
   color: var(--rot)
}

.hero-sub {
   margin: 0;
   font: 400 16px/1.5 var(--font-body);
   color: var(--muted)
}

.hero-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.hero-chip {
   display: flex;
   align-items: center;
   gap: 8px;
   background: #fff;
   border: 1px solid var(--border);
   padding: 8px 14px;
   border-radius: var(--pill);
   font: 500 13px/1 var(--font-body);
   color: var(--ink-2)
}

.hero-chip .chk {
   color: var(--rot);
   font-weight: 700
}

.hero-cta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   margin-top: 2px
}

.hero-link {
   font: 600 14.5px/1 var(--font-body);
   color: var(--ink)
}

@media(min-width:1000px) {
   .hero {
      padding: 18px 16px 0
   }

   .hero-card {
      border-radius: 28px;
      min-height: 560px;
      display: flex;
      align-items: center;
      box-shadow: 0 30px 70px -40px rgba(40, 12, 14, .45)
   }

   .hero-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none
   }

   .hero-slide {
      object-position: 84% 28%
   }

   .hero-scrim {
      background: linear-gradient(90deg, rgba(110, 7, 13, .84) 0%, rgba(110, 7, 13, .46) 38%, rgba(110, 7, 13, 0) 58%)
   }

   .hero-dots {
      left: auto;
      right: 32px;
      bottom: 26px;
      width: auto;
      justify-content: flex-end
   }

   .hero-stage {
      width: 100%;
      padding: 48px 0
   }

   .hero-col {
      max-width: 500px;
      gap: 20px
   }

   .hero-kicker {
      background: rgba(255, 255, 255, .16);
      border-color: rgba(255, 255, 255, .3);
      box-shadow: none
   }

   .hero-kicker__text {
      color: #fff
   }

   .hero-h1 {
      font-size: clamp(40px, 4.4vw, 60px);
      color: #fff
   }

   .hero-h1 .hl {
      color: #FFD0CD
   }

   .hero-sub {
      font-size: 18.5px;
      color: rgba(255, 255, 255, .92);
      max-width: 480px
   }

   .hero-chip {
      background: rgba(255, 255, 255, .14);
      border-color: rgba(255, 255, 255, .26);
      color: #fff
   }

   .hero-chip .chk {
      color: #fff
   }

   .hero-link {
      color: #fff
   }
}

/* =========================================================================
   7. PAGE HERO (Standard – Jobs, Kontakt, Region, Unternehmen, Über uns)
   ========================================================================= */
.page-hero {
   background: #fff;
   border-bottom: 1px solid var(--border)
}

/* Nur vertikales Padding – der seitliche Gutter kommt IMMER von .wrap,
   damit Header, alle Sektionen und Footer exakt auf einer Linie sitzen. */
.page-hero__inner {
   padding-top: clamp(44px, 7vw, 72px);
   padding-bottom: clamp(36px, 5vw, 52px)
}

.page-hero .h1 {
   margin-bottom: 14px
}

.page-hero p+p {
   margin-top: 14px
}

.page-hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 26px
}

.media-split {
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px;
   align-items: center
}

@media(min-width:920px) {
   .media-split {
      grid-template-columns: 1.05fr .95fr;
      gap: 48px
   }
}

.media-split__img {
   border-radius: 24px;
   overflow: hidden;
   border: 1px solid var(--border);
   box-shadow: 0 24px 60px -38px rgba(40, 12, 14, .4)
}

.media-split__img img {
   width: 100%;
   height: 100%;
   min-height: 280px;
   object-fit: cover;
   object-position: 60% 30%
}

/* breadcrumb */
.breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   font: 500 13px/1 var(--font-body);
   color: var(--muted-2)
}

.breadcrumb a:hover {
   color: var(--rot)
}

.breadcrumb .cur {
   color: var(--ink);
   font-weight: 600
}

/* =========================================================================
   8. STATS
   ========================================================================= */
.stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 12px
}

.stat {
   padding: 24px;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 20px
}

.stat:nth-child(2n) {
   background: var(--rot);
   color: #fff;
}

.stat:nth-child(2n) * {
   color: #fff;
}

.stat--alt {
   background: var(--bg-2);
   border-color: transparent
}

.stat__num {
   font: 700 clamp(28px, 5vw, 34px)/1 var(--font-head);
   color: var(--ink);
   letter-spacing: -.03em
}

.stat__label {
   margin-top: 6px;
   font: 500 13.5px/1.3 var(--font-body);
   color: var(--muted)
}

/* =========================================================================
   9. CARD GRIDS (Vorteile, Services, Pillars, Advantages)
   ========================================================================= */
.grid {
   display: grid;
   gap: 14px
}

.grid--3 {
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

.grid--auto {
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
}

.grid--wide {
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
}

.grid--narrow {
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 12px
}

.card {
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 26px;
   background: #fff;
   transition: transform .2s, box-shadow .2s, border-color .2s
}

.card:nth-child(2n) {
   background: var(--rot);
   color: #fff;
}

.card:nth-child(2n) * {
   color: #fff;
}

.card--hover:hover {
   border-color: var(--border-2);
   transform: translateY(-4px);
   box-shadow: 0 22px 44px -26px rgba(40, 12, 14, .24)
}

.card--sm {
   padding: 22px;
   border-radius: 18px
}

.card__num {
   font: 700 22px/1 var(--font-head);
   color: var(--rot);
   margin-bottom: 14px;
   letter-spacing: -.02em
}

.card__num-box {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   border-radius: 13px;
   background: var(--rose-bg);
   color: var(--rot);
   font: 700 17px/1 var(--font-head);
   margin-bottom: 16px
}

.card__title {
   margin: 0 0 8px;
   font: 600 17.5px/1.25 var(--font-head);
   color: var(--ink);
   letter-spacing: -.01em
}

.card__text {
   margin: 0;
   font: 400 14.5px/1.55 var(--font-body);
   color: var(--muted)
}

.card__check-row {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 8px
}

.card__check {
   color: var(--rot);
   font: 700 16px/1 var(--font-head)
}

.card__check-row .card__title {
   margin: 0;
   font-size: 16px
}

/* text columns (Über uns Story) */
.text-cols {
   display: grid;
   grid-template-columns: 1fr;
   gap: 26px
}

@media(min-width:760px) {
   .text-cols {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px
   }
}

.text-cols h2 {
   margin: 0 0 10px;
   font: 700 21px/1.2 var(--font-head);
   letter-spacing: -.02em;
   color: var(--ink)
}

.text-cols p {
   margin: 0;
   font: 400 15.5px/1.6 var(--font-body);
   color: var(--muted)
}

/* =========================================================================
   10. JOB LIST / FILTER
   ========================================================================= */
.filter {
   display: flex;
   flex-direction: column;
   gap: 11px;
   margin-bottom: 22px
}

.filter__chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.chip {
   padding: 10px 17px;
   border-radius: var(--pill);
   font: 600 13.5px/1 var(--font-body);
   cursor: pointer;
   white-space: nowrap;
   border: 1px solid var(--border);
   background: #fff;
   color: var(--muted);
   transition: all .15s
}

.chip:hover {
   border-color: var(--border-2)
}

.chip.is-active {
   border-color: var(--rot);
   background: var(--rot);
   color: #fff
}

.filter__row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px
}

.select {
   padding: 12px 16px;
   border: 1px solid var(--border);
   border-radius: var(--pill);
   background: #fff;
   font: 600 13.5px/1 var(--font-body);
   color: var(--ink-2);
   cursor: pointer;
   outline: none
}

.search {
   flex: 1;
   min-width: 200px;
   padding: 12px 18px;
   border: 1px solid var(--border);
   border-radius: var(--pill);
   background: #fff;
   font: 500 14px/1 var(--font-body);
   color: var(--ink);
   outline: none
}

.search:focus {
   border-color: var(--rot)
}

.result-count {
   font: 500 13.5px/1 var(--font-body);
   color: var(--muted-2);
   margin-bottom: 14px
}

.result-count b {
   color: var(--rot);
   font-weight: 700
}

.job-list {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.jobs-more {
   text-align: center;
   margin-top: 28px
}

.job-card {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px 18px;
   padding: 20px 22px;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   transition: box-shadow .2s, transform .2s, border-color .2s
}

.job-card:hover {
   border-color: var(--border-2);
   box-shadow: var(--shadow-card);
   transform: translateY(-2px)
}

.job-card__main {
   flex: 1 1 220px;
   min-width: 0
}

.job-card__titlerow {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 9px
}

.job-card__title {
   margin: 0;
   font: 600 18px/1.2 var(--font-head);
   color: var(--ink);
   letter-spacing: -.02em
}

.job-card__meta {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap
}

.job-card__meta .sep {
   color: #D8CFCB
}

.job-card__metatext {
   font: 500 13.5px/1 var(--font-body);
   color: var(--muted)
}

.job-card__aside {
   display: flex;
   align-items: center;
   gap: 16px;
   flex: 1 0 auto;
   justify-content: flex-end;
}

.job-card__pay {
   font: 600 15.5px/1 var(--font-head);
   color: var(--ink);
   white-space: nowrap
}

.job-card__cta {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 11px 18px;
   border-radius: var(--pill);
   background: var(--rot);
   color: #fff;
   font: 600 12.5px/1 var(--font-body);
   white-space: nowrap
}

.badge {
   font: 600 11.5px/1 var(--font-body);
   padding: 5px 11px;
   border-radius: var(--pill)
}

.badge--bereich {
   color: var(--rot);
   background: var(--rose-bg)
}

.badge--new {
   font-size: 10.5px;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--green);
   background: var(--green-bg);
   padding: 4px 9px
}

.empty-state {
   text-align: center;
   padding: 54px 24px;
   background: #fff;
   border: 1px dashed var(--border-2);
   border-radius: var(--radius-lg)
}

.empty-state__title {
   font: 600 19px/1.3 var(--font-head);
   color: var(--ink);
   margin-bottom: 8px
}

.empty-state p {
   margin: 0 0 18px;
   font: 400 15px/1.5 var(--font-body);
   color: var(--muted)
}

.job-cta-box {
   margin-top: 30px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px;
   padding: 24px 26px;
   background: var(--bg-2);
   border-radius: 20px
}

.job-cta-box>div {
   flex: 1 1 280px
}

.job-cta-box h3 {
   margin: 0 0 5px;
   font: 600 17px/1.25 var(--font-head);
   color: var(--ink)
}

.job-cta-box p {
   margin: 0;
   font: 400 14.5px/1.5 var(--font-body);
   color: var(--muted)
}

/* =========================================================================
   11. STELLE (Detail)
   ========================================================================= */
.title-card {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 26px;
   padding: clamp(26px, 4vw, 40px);
   box-shadow: 0 20px 50px -34px rgba(40, 12, 14, .3);
   animation: om-rise .45s ease both
}

.title-card__badges {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 16px
}

.title-card .h1 {
   margin-bottom: 16px
}

.title-card__facts {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 18px 26px
}

.title-card__metas {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 18px
}

.fact {
   display: flex;
   align-items: center;
   gap: 7px;
   font: 500 14.5px/1 var(--font-body);
   color: var(--ink-2)
}

.fact i {
   color: var(--rot);
   font-style: normal
}

.detail-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px;
   align-items: start
}

@media(min-width:920px) {
   .detail-grid {
      grid-template-columns: 1fr 330px;
      gap: 44px
   }
}

.detail-body p {
   margin: 0 0 14px;
   font: 400 16.5px/1.65 var(--font-body);
   color: var(--ink-2)
}

.detail-body p strong {
   color: var(--ink)
}

.sec-h {
   margin: 34px 0 14px;
   font: 700 clamp(20px, 3vw, 26px)/1.1 var(--font-head);
   letter-spacing: -.02em;
   color: var(--ink)
}

.bullets {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 0 0 4px
}

.bullet {
   display: flex;
   gap: 11px;
   font: 400 15.5px/1.55 var(--font-body);
   color: var(--ink-2)
}

.bullet__mark {
   flex: none;
   font-weight: 700
}

.bullet__mark--check {
   color: var(--green)
}

.bullet__mark--arrow {
   color: var(--rot)
}

.note-box {
   display: flex;
   align-items: center;
   gap: 13px;
   padding: 16px 20px;
   background: var(--rose-bg);
   border-radius: 16px;
   margin-top: 24px
}

.note-box span {
   font: 600 14.5px/1.5 var(--font-body);
   color: var(--ink)
}

.facts {
   position: static
}

@media(min-width:920px) {
   .facts {
      position: sticky;
      top: 98px
   }
}

.facts__box {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 24px;
   box-shadow: 0 16px 40px -28px rgba(40, 12, 14, .28)
}

.facts__title {
   margin: 0 0 16px;
   font: 600 13px/1 var(--font-body);
   letter-spacing: .05em;
   text-transform: uppercase;
   color: var(--muted-2)
}

.facts__row {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   padding: 11px 0;
   border-bottom: 1px solid #F0EAE6
}

.facts__row:last-of-type {
   border-bottom: none
}

.facts__row .k {
   font: 500 14px/1.3 var(--font-body);
   color: var(--muted)
}

.facts__row .v {
   font: 600 14px/1.3 var(--font-body);
   color: var(--ink);
   text-align: right
}

.facts__row .v--pay {
   font-family: var(--font-head);
   color: var(--rot)
}

.facts__wa {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: 10px;
   padding: 13px;
   border-radius: var(--radius);
   border: 1px solid var(--border);
   color: var(--ink);
   font: 600 14px/1 var(--font-body)
}

.facts__wa:hover {
   border-color: var(--green);
   color: var(--green)
}

.facts__phone {
   margin-top: 16px;
   text-align: center;
   font: 500 13px/1.5 var(--font-body);
   color: var(--muted-2)
}

.facts__phone a {
   color: var(--rot);
   font-weight: 700
}

/* =========================================================================
   12. CTA BAND
   ========================================================================= */
.cta {
   position: relative;
   border-radius: 28px;
   overflow: hidden;
   background: var(--rot);
   color: #fff;
   padding: clamp(32px, 5vw, 64px)
}

.cta__glow {
   position: absolute;
   top: -120px;
   right: -80px;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
   pointer-events: none
}

.cta__inner {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 28px
}

.cta__text {
   max-width: 580px
}

.cta__text h2 {
   margin: 0 0 12px;
   font: 700 clamp(26px, 4.5vw, 40px)/1.05 var(--font-head);
   letter-spacing: -.03em;
   color: #fff
}

.cta__text p {
   margin: 0;
   font: 400 16.5px/1.5 var(--font-body);
   color: rgba(255, 255, 255, .92)
}

.cta__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px
}

/* =========================================================================
   13. APPLY BAND + FORM
   ========================================================================= */
.apply-band__inner {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   align-items: flex-start
}

.apply-band__form {
   flex: 1 1 360px;
   max-width: 470px;
   width: 100%
}

.apply-band__aside {
   flex: 1 1 300px
}

.steps {
   display: flex;
   flex-direction: column;
   gap: 18px
}

.step {
   display: flex;
   gap: 16px;
   align-items: flex-start
}

.step__n {
   flex: none;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--rose-bg);
   color: var(--rot);
   display: flex;
   align-items: center;
   justify-content: center;
   font: 700 16px/1 var(--font-head)
}

.step h3 {
   margin: 0 0 4px;
   font: 600 16.5px/1.2 var(--font-head);
   color: var(--ink);
   letter-spacing: -.01em
}

.step p {
   margin: 0;
   font: 400 14.5px/1.5 var(--font-body);
   color: var(--muted)
}

.callout {
   margin-top: 24px;
   padding: 16px 20px;
   background: var(--bg-2);
   border-radius: 16px;
   font: 500 14.5px/1.5 var(--font-body);
   color: var(--ink-2)
}

.callout a {
   color: var(--rot);
   font-weight: 700;
   white-space: nowrap
}

.apply-form {
   background: rgba(255, 255, 255, .92);
   backdrop-filter: blur(14px);
   border-radius: 24px;
   box-shadow: 0 24px 64px -24px rgba(40, 12, 14, .32), 0 2px 8px -2px rgba(40, 12, 14, .08);
   border: 1px solid rgba(255, 255, 255, .9);
   padding: 26px 26px 24px;
   width: 100%
}

.apply-form__title {
   margin: 0 0 2px;
   font: 600 23px/1.1 var(--font-head);
   color: var(--ink);
   letter-spacing: -.02em
}

.apply-form__title--job {
   font-size: 21px;
   line-height: 1.12
}

.apply-form__sub {
   margin: 0 0 18px;
   font: 500 13.5px/1.5 var(--font-body);
   color: #7A6E6A
}

.apply-form__fields {
   display: flex;
   flex-direction: column;
   gap: 13px
}

.apply-form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 11px
}

.field-label {
   font: 600 11.5px/1 var(--font-body);
   letter-spacing: .05em;
   text-transform: uppercase;
   color: #6B5F5B;
   margin-bottom: 6px;
   display: block
}

.field-label .opt {
   font-weight: 500;
   text-transform: none;
   letter-spacing: 0;
   color: var(--muted-3)
}

.field-label .req {
   color: var(--rot)
}

.field-input,
.field-textarea {
   width: 100%;
   padding: 12px 14px;
   border: 1.5px solid #E3DCD9;
   border-radius: var(--radius-sm);
   font: 500 15px/1.2 var(--font-body);
   color: #1A1514;
   background: #FBF9F8;
   outline: none;
   transition: border-color .15s, background .15s
}

.field-textarea {
   font-size: 14px;
   line-height: 1.45;
   resize: vertical;
   min-height: 54px
}

.field-input:focus,
.field-textarea:focus {
   border-color: var(--rot);
   background: #fff
}

.file-drop {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 14px;
   border: 1.5px dashed #D8CFCB;
   border-radius: var(--radius-sm);
   background: #FBF9F8;
   cursor: pointer;
   position: relative
}

.file-drop:hover {
   border-color: var(--rot);
   background: #FFF6F5
}

.file-drop__ico {
   flex: none;
   width: 34px;
   height: 34px;
   border-radius: 8px;
   background: #F1E2DF;
   color: var(--rot);
   display: flex;
   align-items: center;
   justify-content: center;
   font: 800 17px/1 var(--font-body)
}

.file-drop__main {
   flex: 1;
   min-width: 0
}

.file-drop__t {
   display: block;
   font: 700 13px/1.2 var(--font-body);
   color: #1A1514
}

.file-drop__s {
   display: block;
   font: 500 11.5px/1.2 var(--font-body);
   color: var(--muted-3);
   margin-top: 2px
}

.file-drop input[type=file] {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   overflow: hidden
}

.consent {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   cursor: pointer;
   margin-top: 1px
}

.consent input {
   width: 18px;
   height: 18px;
   margin: 1px 0 0;
   accent-color: var(--rot);
   flex: none;
   cursor: pointer
}

.consent span {
   font: 500 12px/1.45 var(--font-body);
   color: #7A6E6A
}

.consent a {
   color: var(--rot);
   text-decoration: underline
}

.form-error {
   font: 600 12.5px/1.4 var(--font-body);
   color: var(--rot-hover);
   background: var(--rose-bg);
   border-radius: 8px;
   padding: 9px 12px
}

.apply-form__submit {
   width: 100%;
   padding: 15px;
   border: none;
   border-radius: var(--radius);
   background: var(--rot);
   color: #fff;
   font: 700 15px/1 var(--font-body);
   letter-spacing: .01em;
   cursor: pointer;
   box-shadow: 0 12px 26px -10px rgba(225, 9, 21, .6);
   transition: background .15s, transform .05s
}

.apply-form__submit:hover {
   background: var(--rot-hover);
   transform: translateY(-1px)
}

.apply-form__submit:active {
   background: var(--rot-active);
   transform: translateY(1px)
}

.apply-form__fine {
   margin: 2px 0 0;
   text-align: center;
   font: 500 11.5px/1.4 var(--font-body);
   color: var(--muted-3)
}

.form-success {
   text-align: center;
   padding: 18px 6px 12px
}

.form-success__ico {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--green-bg);
   color: var(--green);
   display: flex;
   align-items: center;
   justify-content: center;
   font: 800 30px/1 var(--font-body);
   margin: 0 auto 16px
}

.form-success h3 {
   margin: 0 0 8px;
   font: 600 24px/1.12 var(--font-head);
   color: var(--ink);
   letter-spacing: -.02em
}

.form-success p {
   margin: 0 auto 20px;
   max-width: 320px;
   font: 500 14px/1.55 var(--font-body);
   color: #7A6E6A
}

/* generische Felder (Kontakt/Anfrage) */
.fld {
   width: 100%;
   padding: 14px 16px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: #fff;
   font: 500 15px/1.3 var(--font-body);
   color: var(--ink);
   outline: none
}

.fld:focus {
   border-color: var(--rot)
}

.fld::placeholder {
   color: #A89E99
}

textarea.fld {
   line-height: 1.45;
   resize: vertical
}

.form-card {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: clamp(24px, 4vw, 38px);
   box-shadow: 0 20px 50px -34px rgba(40, 12, 14, .3)
}

.form-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 14px;
   margin-bottom: 14px
}

.form-field {
   margin-bottom: 14px
}

.form-field label,
.form-grid label {
   display: block;
   font: 600 12.5px/1 var(--font-body);
   color: var(--muted);
   margin-bottom: 7px
}

.form-fine {
   margin: 14px 0 0;
   text-align: center;
   font: 500 13px/1.5 var(--font-body);
   color: var(--muted-2)
}

.form-fine a {
   color: var(--rot);
   font-weight: 700
}

/* =========================================================================
   14. CONTACT (Kontakt)
   ========================================================================= */
.contact-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 24px;
   align-items: start
}

@media(min-width:900px) {
   .contact-grid {
      grid-template-columns: 1fr 1.1fr;
      gap: 34px
   }
}

.contact-cards {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.contact-card {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px 22px;
   background: #fff;
   border: 1px solid var(--border);
   border-radius: 20px;
   transition: border-color .2s, transform .2s
}

.contact-card:hover {
   border-color: var(--rot);
   transform: translateY(-2px)
}

.contact-card--wa:hover {
   border-color: var(--wa)
}

.contact-card--plain {
   align-items: flex-start
}

.contact-card__ico {
   flex: none;
   width: 46px;
   height: 46px;
   border-radius: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px
}

.contact-card__ico--red {
   background: var(--rose-bg);
   color: var(--rot)
}

.contact-card__ico--wa {
   background: var(--green-bg);
   color: var(--wa)
}

.contact-card__ico--ink {
   background: #F0EAE6;
   color: var(--ink)
}

.contact-card__k {
   display: block;
   font: 600 12.5px/1 var(--font-body);
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--muted-2);
   margin-bottom: 5px
}

.contact-card__v {
   display: block;
   font: 700 18px/1.1 var(--font-head);
   color: var(--ink)
}

.contact-card__addr {
   display: block;
   font: 500 15.5px/1.55 var(--font-body);
   color: var(--ink)
}

.contact-card__map {
   display: inline-block;
   margin-top: 8px;
   font: 600 13.5px/1 var(--font-body);
   color: var(--rot)
}

.contact-card__map:hover {
   color: var(--rot-hover)
}

.region-links {
   display: flex;
   flex-wrap: wrap;
   gap: 10px
}

.region-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 20px;
   border: 1px solid var(--border);
   border-radius: var(--pill);
   background: #fff;
   font: 600 14px/1 var(--font-body);
   color: var(--ink)
}

.region-link:hover {
   border-color: var(--rot);
   color: var(--rot)
}

/* =========================================================================
   15. FOOTER
   ========================================================================= */
.site-footer {
   background: var(--bg);
   border-top: 1px solid var(--border);
   padding: clamp(44px, 7vw, 56px) 0 28px
}

.footer-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 32px
}

.footer-brand {
   min-width: 200px
}

.footer-brand img {
   height: 36px;
   width: auto;
   margin-bottom: 18px
}

.footer-brand p {
   margin: 0 0 6px;
   font: 400 14px/1.7 var(--font-body);
   color: var(--muted)
}

.footer-brand .contact {
   margin: 14px 0 0;
   font: 600 14px/1.7 var(--font-body);
   color: var(--ink)
}

.footer-brand .contact a:hover {
   color: var(--rot)
}

.footer-col h4 {
   margin: 0 0 16px;
   font: 600 12.5px/1 var(--font-body);
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--muted-2)
}

.footer-col__links {
   display: flex;
   flex-direction: column;
   gap: 11px;
   font: 500 14px/1 var(--font-body);
   color: var(--ink-2)
}

.footer-col__links a:hover {
   color: var(--rot)
}

.footer-bottom {
   margin-top: 34px;
   padding-top: 22px;
   border-top: 1px solid var(--border);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 14px;
   font: 500 13px/1 var(--font-body);
   color: var(--muted-2)
}

.footer-bottom__links {
   display: flex;
   gap: 22px
}

.footer-bottom__links a:hover {
   color: var(--ink)
}

/* =========================================================================
   16. ADMIN / EDITOR
   ========================================================================= */
.ts-richtext h2 {
   font: 700 clamp(24px, 4vw, 34px)/1.1 var(--font-head);
   letter-spacing: -.02em;
   color: var(--ink);
   margin: 0 0 14px
}

.ts-richtext h3 {
   font: 600 20px/1.25 var(--font-head);
   color: var(--ink);
   margin: 24px 0 10px
}

.ts-richtext p {
   font: 400 16.5px/1.65 var(--font-body);
   color: var(--ink-2);
   margin: 0 0 16px
}

.ts-richtext ul {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin: 0 0 16px;
   padding-left: 20px;
   list-style: disc
}

.ts-richtext a {
   color: var(--rot);
   text-decoration: underline
}