/* HEPP GmbH – Karriereseite Gerüstbauer, Version 2 (High-End).
   Fast schwarz, warmes Off-White, HEPP-Rot als einzige Farbe. Geist + Geist Mono.
   Bewegung nur als Schmuck: nichts erscheint erst beim Scrollen, alles ist ohne JS da. */

@font-face { font-family: "Geist"; src: url("schriften/geist-latin.woff2") format("woff2");
             font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("schriften/geist-mono-latin.woff2") format("woff2");
             font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --schwarz: #0f0e10;
  --nacht: #17151a;
  --nacht-2: #201e23;
  --hauch: rgba(255, 255, 255, .1);
  --hauch-2: rgba(255, 255, 255, .18);
  --hell: #f4f1ee;
  --hell-linie: #e3ddd8;
  --weiss: #ffffff;
  --rot: #af072b;
  --rot-tief: #8c0522;
  --rot-leuchten: #e0213f;
  --rot-auf-dunkel: #ff7c90;
  --text: #121114;
  --text-2: #57515a;
  --text-hell: #d9d4d6;
  --text-hell-2: #a9a3a6;
  --alu: #a9a7a8;

  --schrift: "Geist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 20px;
  --r-mittel: 14px;
  --r-klein: 12px;
  --breite: 1240px;
  --kopf-h: 72px;
  --weich: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px);
       -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.65;
       color: var(--text); background: var(--schwarz); -webkit-font-smoothing: antialiased;
       font-feature-settings: "ss01", "cv11"; }
img, svg { max-width: 100%; }
a { color: var(--rot); }
a:hover { color: var(--rot-tief); }
h1, h2, h3 { margin: 0 0 1rem; font-weight: 600; line-height: 1.08; letter-spacing: -0.03em;
             text-wrap: balance; }
/* Große Überschriften brauchen mehr Luft zum Absatz darunter als 1rem (Vanessa, 15.10.2026). */
h2 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.04;
     margin-bottom: clamp(1.25rem, .9rem + 1.2vw, 2rem); }
h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.015em; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 2px solid var(--rot-leuchten); outline-offset: 3px; }

.container { width: 100%; max-width: var(--breite); margin: 0 auto;
             padding: 0 clamp(1rem, 4vw, 2.5rem); }
.springen { position: absolute; left: -9999px; top: 0; z-index: 100; min-height: 44px;
            display: flex; align-items: center; background: var(--weiss); padding: .5rem 1rem; }
.springen:focus { left: 1rem; top: .5rem; }

/* ------------------------------------------------------------- Knöpfe --- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .6em;
         min-height: 48px; padding: .75em 1.25em; border-radius: var(--r-klein);
         font: inherit; font-weight: 550; line-height: 1.2; letter-spacing: -0.01em;
         text-decoration: none; border: 1px solid transparent; cursor: pointer;
         transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--weich),
                     box-shadow .2s; }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; transition: transform .2s var(--weich); }
.knopf:hover svg:last-child { transform: translateX(3px); }
.knopf--gross { min-height: 56px; padding: 1em 1.6em; font-size: 1.0625rem; }
.knopf--rot { background: var(--rot); color: var(--weiss); }
.knopf--rot:hover { background: var(--rot-tief); color: var(--weiss);
                    box-shadow: 0 10px 30px -10px rgba(224, 33, 63, .6); }
/* Rot auf Fast-Schwarz hat nur 2,4:1 - der helle Rand macht den Knopf als Fläche erkennbar. */
.hero .knopf--rot, .dunkel .knopf--rot, .mobilleiste .knopf--rot { border-color: rgba(255, 255, 255, .5); }
.knopf--glas, .knopf--hell { color: var(--weiss); background: rgba(255, 255, 255, .06);
                             border-color: var(--hauch-2); }
.knopf--glas:hover, .knopf--hell:hover { color: var(--weiss); background: rgba(255, 255, 255, .12);
                                         border-color: rgba(255, 255, 255, .34); }

/* -------------------------------------------------------------- Kopf --- */
.kopf { position: sticky; top: 0; z-index: 40; color: var(--weiss);
        background: rgba(15, 14, 16, .78); border-bottom: 1px solid var(--hauch);
        -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
.kopf__innen { display: flex; align-items: center; gap: 2rem; height: var(--kopf-h); }
.kopf__logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.kopf__logo img { display: block; height: 30px; width: auto; }
.kopf__nav { display: flex; gap: 1.75rem; margin-left: auto; }
.kopf__nav a { color: var(--text-hell); text-decoration: none; font-size: .9375rem;
               font-weight: 500; padding: .7em 0; transition: color .2s; }
.kopf__nav a:hover { color: var(--weiss); }
.kopf__tel { display: inline-flex; align-items: center; gap: .5em; color: var(--weiss);
             font-family: var(--mono); font-size: .9375rem; font-weight: 500;
             text-decoration: none; white-space: nowrap; min-height: 44px; }
.kopf__tel:hover { color: var(--rot-auf-dunkel); }
.kopf__tel svg { width: 1.05em; height: 1.05em; color: var(--rot-auf-dunkel); }
.kopf__knopf { min-height: 44px; padding: .55em 1.1em; font-size: .9375rem; border-color: rgba(255,255,255,.4); }
.kopf__fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
                     background: var(--rot-leuchten); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .kopf__fortschritt { animation: fortschritt linear both; animation-timeline: scroll(root); }
  @keyframes fortschritt { to { transform: scaleX(1); } }
}
@media (max-width: 1060px) { .kopf__nav { display: none; } .kopf__tel { margin-left: auto; } }
@media (max-width: 640px) {
  .kopf__knopf { display: none; }
  .kopf__tel span { display: none; }
  .kopf__tel { width: 44px; justify-content: center; border: 1px solid var(--hauch-2);
               border-radius: var(--r-klein); }
}

/* -------------------------------------------------------------- Hero --- */
.hero { position: relative; color: var(--weiss); padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
        background:
          radial-gradient(900px 520px at 88% 8%, rgba(175, 7, 43, .30), transparent 62%),
          radial-gradient(700px 500px at 0% 100%, rgba(255, 255, 255, .05), transparent 60%),
          var(--schwarz); }
.hero__raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
                gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { margin-bottom: 1.5rem; }
.hero__meta { margin: 0 0 1.25rem; font-family: var(--mono); font-size: .8125rem; letter-spacing: .1em;
              text-transform: uppercase; color: var(--text-hell-2); }
.h1__pos { display: block; font-size: clamp(3rem, 1.4rem + 6.4vw, 7.25rem); font-weight: 650;
           line-height: .92; letter-spacing: -0.055em; }
/* 4-Augen-Check 19.10.2026, K1: „(m/w/d)“ klein hinter der Berufsbezeichnung */
.h1__mwd { font-size: .4em; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
/* zweispaltiger Kopf: Platz reicht nicht für eine Zeile – klein und dicht darunter statt großer Lücke */
@media (min-width: 961px) { .h1__mwd { display: block; line-height: 1.1; margin-top: .25em; } }
.h1__ort { display: block; margin-top: .55em; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
           font-weight: 450; line-height: 1.3; letter-spacing: -0.02em; color: var(--text-hell); }
.ort-name { white-space: nowrap; color: var(--weiss); font-weight: 550; }
.hero__lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5;
              max-width: 30em; color: var(--text-hell); margin-bottom: 2rem; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__klein { margin: 1rem 0 0; font-size: .9375rem; color: var(--text-hell-2); max-width: 36em; }
.hero__bild { margin: 0; }
.hero__bild img { display: block; width: 100%; height: auto; border-radius: var(--r);
                  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px var(--hauch); }
.spec { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hauch-2); }
.spec li { display: flex; flex-direction: column; gap: .2rem; padding: 1.4rem 1.5rem 0 0; }
.spec li + li { padding-left: 1.5rem; border-left: 1px solid var(--hauch); }
.spec__label { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
               text-transform: uppercase; color: var(--text-hell-2); }
.spec strong { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); font-weight: 600;
               letter-spacing: -0.035em; line-height: 1.1; }
.spec li:first-child strong { white-space: nowrap; }
.spec__zusatz { font-size: .9375rem; color: var(--text-hell); }
@media (max-width: 960px) {
  .hero__raster { grid-template-columns: minmax(0, 1fr); }
  .hero__bild { max-width: 520px; }
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec li:nth-child(3) { padding-left: 0; border-left: 0; }
  .spec li:nth-child(n+3) { border-top: 1px solid var(--hauch); margin-top: 1.4rem; }
}
@media (max-width: 480px) {
  .spec li:first-child { grid-column: 1 / -1; padding-bottom: 1.4rem; }
  .spec li:nth-child(2) { padding-left: 0; border-left: 0; }
  .spec li:nth-child(3) { padding-left: 1rem; border-left: 1px solid var(--hauch); }
  .spec li:nth-child(n+2) { border-top: 1px solid var(--hauch); margin-top: 0; }
  .spec li:nth-child(4) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .spec li:not(:first-child) strong { white-space: normal; font-size: 1.375rem; }
}

/* ---------------------------------------------------------- Abschnitte --- */
.abschnitt { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.hell { background: var(--hell); }
.weiss { background: var(--weiss); }
.dunkel { background: var(--schwarz); color: var(--weiss); }
.abschnitt__kopf { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.abschnitt__kopf h2 { margin-bottom: 0; }
.knopfzeile { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; gap: 1rem; }

/* Benefits: Bento */
/* Oben Lohn (breit) + Urlaub, darunter neun gleich große Karten, drei je Reihe und alle
   gleich hoch (Vanessa, 15.10.2026): erste Reihe nach Inhalt, alle weiteren 1fr. */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto;
         grid-auto-rows: 1fr; gap: 14px; }
.bento__karte { grid-column: span 2; position: relative; background: var(--weiss);
                border: 1px solid var(--hell-linie); border-radius: var(--r);
                padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column;
                transition: transform .25s var(--weich), box-shadow .25s var(--weich); }
.bento__karte:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(18, 17, 20, .35); }
.bento__karte h3 { margin-bottom: .5rem; }
.bento__karte p { margin: 0; color: var(--text-2); font-size: 1rem; line-height: 1.6; max-width: 40em; }
.bento__zeichen { width: 30px; height: 30px; color: var(--rot); margin-bottom: 1.5rem; }
.bento--lohn { grid-column: span 4; color: var(--weiss); border-color: transparent; overflow: hidden;
               background:
                 radial-gradient(520px 300px at 100% 0%, rgba(175, 7, 43, .55), transparent 65%),
                 var(--nacht); }
.bento--lohn h3 { font-family: var(--mono); font-size: .8125rem; font-weight: 500;
                  letter-spacing: .1em; text-transform: uppercase; color: var(--text-hell); }
.bento--lohn p { color: var(--text-hell); }
.bento--lohn .bento__zahl { margin: auto 0 1rem; padding-top: 2.5rem; color: var(--weiss);
                            font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem); font-weight: 600;
                            line-height: 1; letter-spacing: -0.05em; }
.bento__zahl span { display: block; margin-top: .6rem; font-size: 1.0625rem; font-weight: 450;
                    letter-spacing: -0.01em; color: var(--text-hell); }
.bento--urlaub h3 { margin-bottom: .5rem; }
.bento__riesig { display: block; margin-bottom: 1.25rem; font-size: clamp(5rem, 3rem + 5vw, 8rem);
                 font-weight: 650; line-height: .82; letter-spacing: -0.07em; color: var(--rot); }
.bento__karte .bento__uhr { font-family: var(--mono); font-size: 2.25rem; font-weight: 500;
              letter-spacing: -0.04em; color: var(--text); margin-bottom: 1.25rem; line-height: 1; }
.woche { display: flex; gap: 5px; margin-bottom: 1.5rem; }
.woche__tag { flex: 1 1 0; max-width: 40px; height: 38px; display: grid; place-items: center;
              border-radius: 9px; border: 1px solid var(--hell-linie); font-family: var(--mono);
              font-size: .75rem; color: var(--text-2); }
.woche__tag--plan { background: var(--rot); border-color: var(--rot); color: var(--weiss); }
.woche__tag--frei { border-style: dashed; color: #6f686c; }
@media (max-width: 1060px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__karte { grid-column: span 1; }
  .bento--lohn { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .bento--lohn { grid-column: span 1; }
}


/* Benefits: offene Themenzeilen */
.themen__titel { margin: clamp(2.5rem, 5vw, 4rem) 0 .75rem; font-family: var(--mono); font-size: .8125rem;
                 font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.themen { border-bottom: 1px solid var(--hell-linie); }
.thema > p { margin: 0; color: var(--text-2); font-size: .96875rem; max-width: 46em; }
.thema { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.5rem;
         padding: 1.25rem 0; border-top: 1px solid var(--hell-linie); }
.thema h3 { font-size: 1.0625rem; margin: 0; }
.thema ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2.5rem; }
.thema li { break-inside: avoid; position: relative; padding-left: 1.1rem; margin-bottom: .35rem;
            font-size: .96875rem; line-height: 1.5; color: var(--text-2); }
.thema li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px;
                    border-radius: 2px; background: var(--rot); }
@media (max-width: 900px) { .thema { grid-template-columns: 11rem minmax(0, 1fr); } .thema ul { columns: 1; } }
@media (max-width: 560px) { .thema { grid-template-columns: minmax(0, 1fr); gap: .5rem; } }

/* Aufgaben: drei Spalten, jede mit eigenem Foto (Fotos von hepp-gmbh.de, 16.10.2026) */
.aufgaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.aufgaben__bild { margin: 0 0 1.25rem; }
.aufgaben__bild img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.aufgabe h3 { margin-bottom: .35rem; }
.aufgabe p { margin: 0; color: var(--text-2); }
@media (max-width: 1060px) { .aufgaben { gap: 1.5rem; } }
@media (max-width: 760px) { .aufgaben { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }
/* Sicher arbeiten: keine Aufgabe, sondern Leiste unter den Fotokarten */
.sicher { margin-top: 2rem; display: flex; gap: 1.25rem; align-items: center; background: var(--hell);
          border: 1px solid var(--hell-linie); border-radius: var(--r); padding: 1.4rem 1.75rem; }
.sicher__zeichen { flex: none; width: 48px; height: 48px; color: var(--rot); }
.sicher h3 { margin: 0 0 .2rem; }
.sicher p { margin: 0; }
@media (max-width: 560px) { .sicher { padding: 1.25rem; gap: 1rem; } .sicher__zeichen { width: 40px; height: 40px; } }

/* Anforderungen: grosse Liste links, Hinweise als Kaertchen rechts (Vanessa, 16.10.2026, Entwurf C) */
.anforderung { margin-top: clamp(3.5rem, 7vw, 6rem); background: var(--hell); border-radius: var(--r);
               padding: clamp(1.5rem, 4vw, 3rem); }
.anforderung h2 { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.anforderung__raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
                       gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.anforderung__liste { list-style: none; margin: 0; padding: 0; }
.anforderung__liste li { display: flex; gap: 1.25rem; align-items: baseline; padding: 1.1rem 0;
                         border-top: 1px solid var(--hell-linie); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
                         font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.anforderung__liste li:last-child { border-bottom: 1px solid var(--hell-linie); }
.anforderung__liste span { flex: none; font-family: var(--mono); font-size: .875rem; font-weight: 500; color: var(--rot); }
.anforderung__hinweise { display: grid; gap: .75rem; }
.anforderung__hinweise > div { display: flex; gap: .85rem; align-items: flex-start; background: var(--weiss);
                               border-radius: var(--r-mittel); padding: 1.1rem 1.25rem; }
.anforderung__hinweise svg { flex: none; width: 26px; height: 26px; color: var(--rot); }
.anforderung__hinweise p { margin: 0; color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.anforderung__hinweise strong { display: block; margin-bottom: .15rem; color: var(--text); font-size: 1rem; font-weight: 600; }
@media (max-width: 860px) { .anforderung__raster { grid-template-columns: minmax(0, 1fr); } }

/* Team und Standorte */
.team { background:
          radial-gradient(800px 420px at 100% 0%, rgba(175, 7, 43, .22), transparent 60%),
          var(--schwarz); }
/* Firmensitz als Hintergrund hinter den Kennzahlen (Vanessa, 16.10.2026, Entwurf C) */
.team { position: relative; overflow: hidden; }
.team__bild { position: absolute; inset: 0 0 0 45%; margin: 0; opacity: .6; }
.team__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; display: block; }
.team::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               background: linear-gradient(90deg, var(--schwarz) 47%, rgba(15, 14, 16, .6) 72%, rgba(15, 14, 16, .7)); }
.team > .container { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .team__bild { inset: auto 0 0 0; height: 55%; }
  .team::after { background: linear-gradient(180deg, var(--schwarz) 45%, rgba(15, 14, 16, .6) 75%, rgba(15, 14, 16, .85)); }
}
.team__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
                gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.team__text p { color: var(--text-hell); max-width: 34em; }
.nachweise { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nachweise li { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; color: var(--text-hell);
                padding: .45rem .75rem; border: 1px solid var(--hauch-2); border-radius: 8px; }
.zahlen { display: grid; }
.zahl { padding: 1.25rem 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.zahl strong { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.25rem); font-weight: 600; line-height: 1;
               letter-spacing: -0.05em; }
.zahl span { margin-top: .4rem; color: var(--text-hell-2); font-size: .96875rem; }
.orte__titel { margin: clamp(3.5rem, 7vw, 5.5rem) 0 1.25rem; font-family: var(--mono); font-size: .8125rem;
               font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-hell); }
.orte-abschnitt h2 { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.ort__extra { margin: -.75rem 0 1.5rem; padding: 0; list-style: none; font-size: .9375rem; color: var(--text-hell-2); }
.ort__extra li { position: relative; padding-left: 1.1rem; }
.ort__extra li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px;
                         border-radius: 2px; background: var(--rot-auf-dunkel); }
.orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ort { background: var(--nacht); border: 1px solid var(--hauch); border-radius: var(--r);
       padding: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column;
       transition: border-color .3s; }
body[data-standort="mg"] .ort[data-ort="mg"],
body[data-standort="bss"] .ort[data-ort="bss"] { border-color: var(--rot-auf-dunkel); }
.ort__label { display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem;
              font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
              text-transform: uppercase; color: var(--text-hell-2); }
.ort__label svg { width: 1rem; height: 1rem; color: var(--rot-auf-dunkel); }
.ort h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.035em; margin-bottom: .35rem; }
.ort__adresse { color: var(--text-hell-2); font-size: .9375rem; }
.ort__einsatz { color: var(--text-hell); margin-bottom: 1.5rem; }
.ort__person { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--hauch);
               display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline; }
.ort__person strong { font-weight: 600; }
.ort__person span { color: var(--text-hell-2); font-size: .9375rem; }
.ort__wege { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: .5rem; }
.ort__wege a { color: var(--weiss); text-decoration: none; display: inline-flex; align-items: center;
               gap: .5em; min-height: 44px; font-family: var(--mono); font-size: .9375rem; }
.ort__wege a:hover { color: var(--rot-auf-dunkel); }
.ort__wege svg { width: 1.05em; height: 1.05em; color: var(--rot-auf-dunkel); }
@media (max-width: 900px) { .team__raster, .orte { grid-template-columns: minmax(0, 1fr); } }

/* Ablauf: drei Karten mit Kontur-Ziffer und Pfeil, Erreichbarkeit als dunkle Leiste (Variante B) */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ablauf li { position: relative; background: var(--weiss); border: 1px solid var(--hell-linie);
             border-radius: var(--r); padding: 1.9rem 1.75rem; }
.ablauf__nr { position: absolute; right: 1.25rem; top: .4rem; font-size: 6.5rem; font-weight: 700;
              line-height: 1; letter-spacing: -.06em; color: transparent;
              -webkit-text-stroke: 1.5px rgba(175, 7, 43, .28); pointer-events: none; }
.ablauf h3 { position: relative; margin: 2.5rem 0 .5rem; padding-right: 3.5rem; }
.ablauf p { position: relative; margin: 0; color: var(--text-2); }
.ablauf__pfeil { position: absolute; z-index: 2; right: -22px; top: 50%; transform: translateY(-50%);
                 width: 30px; height: 30px; border-radius: 50%; background: var(--rot); color: var(--weiss);
                 display: grid; place-items: center; }
.ablauf__pfeil svg { width: 16px; height: 16px; }
/* Fragen zur Stelle: helle Karte mit Anrufen + E-Mail (Vanessa, 16.10.2026, Entwurf C) */
.fragen { margin: 14px 0 0; background: var(--weiss); border: 1px solid var(--hell-linie); border-radius: var(--r);
          padding: 1.6rem 1.75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto;
          gap: 1.25rem 2rem; align-items: center; }
.fragen h3 { margin: 0 0 .3rem; font-size: 1.375rem; }
.fragen p { margin: 0; color: var(--text-2); }
.fragen__knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
.fragen__mail { background: transparent; border: 1.5px solid var(--hell-linie); color: var(--text); }
.fragen__mail:hover { border-color: var(--text); color: var(--text); }
.fragen .knopf svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .fragen { grid-template-columns: minmax(0, 1fr); } .fragen .knopf { flex: 1 1 100%; } }
.ohne-umbruch { white-space: nowrap; }
/* mehr Luft zwischen Telefon-Leiste und Formular (Vanessa, 16.10.2026) */
#bewerben { padding-top: clamp(1rem, 3vw, 2.5rem); }
@media (max-width: 860px) {
  .ablauf { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ablauf__pfeil { right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%) rotate(90deg); }
  .ablauf h3 { margin-top: 1.75rem; }
}

/* Formular */
.formular { max-width: 760px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; background: var(--weiss);
            border-radius: 24px; padding: clamp(1.5rem, 4.5vw, 3rem);
            box-shadow: 0 1px 0 rgba(18, 17, 20, .04), 0 30px 60px -30px rgba(18, 17, 20, .28); }
.formular h2 { margin-bottom: .5rem; font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); }
.formular__unter { color: var(--text-2); margin-bottom: 2rem; }
.feldreihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 560px) { .feldreihe { grid-template-columns: minmax(0, 1fr); } }
.feld { margin-bottom: 1.15rem; }
.feld label, .feld legend { display: block; font-weight: 550; margin-bottom: .4rem; font-size: .9375rem; }
.feld .frei { font-weight: 400; color: var(--text-2); }
.feld input[type=text], .feld input[type=tel], .feld input[type=email], .feld textarea {
  width: 100%; font: inherit; color: var(--text); background: #fbfaf9;
  border: 1px solid #d3ccc6; border-radius: var(--r-klein); padding: .85rem 1rem; min-height: 56px;
  transition: border-color .2s, box-shadow .2s, background-color .2s; }
.feld textarea { min-height: 112px; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--text); background: var(--weiss);
  box-shadow: 0 0 0 4px rgba(175, 7, 43, .14); }
.feld[data-fehler] input, .feld[data-fehler] textarea { border-color: var(--rot); }
.feld__fehler { display: none; color: var(--rot); font-size: .875rem; margin: .35rem 0 0; }
.feld[data-fehler] .feld__fehler { display: block; }
.hinweis-eine { margin: -.45rem 0 1.25rem; font-size: .875rem; color: var(--text-2); }
.feld select { width: 100%; font: inherit; color: var(--text); min-height: 56px;
  padding: .85rem 3rem .85rem 1rem; border: 1px solid #d3ccc6; border-radius: var(--r-klein);
  background: #fbfaf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121114' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.2rem;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s; }
.feld select:focus { outline: none; border-color: var(--text); background-color: var(--weiss);
  box-shadow: 0 0 0 4px rgba(175, 7, 43, .14); }
.datei input { font: inherit; font-size: .9375rem; max-width: 100%; min-height: 48px; color: var(--text-2); }
.datei input::file-selector-button { font: inherit; font-weight: 550; margin-right: .9rem;
  padding: .7rem 1.1rem; border-radius: var(--r-klein); border: 1px solid var(--text);
  background: var(--weiss); color: var(--text); cursor: pointer; }
.einwilligung { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
                font-size: .9375rem; color: var(--text-2); margin: .5rem 0 1.5rem; }
.einwilligung input { width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--rot); }
.einwilligung[data-fehler] { color: var(--rot); }
.formular .knopf { width: 100%; }
.formular__fragen { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--hell-linie);
                    font-size: .9375rem; color: var(--text-2); }
.formular__fragen-titel { margin: 0 0 .5rem; font-weight: 600; color: var(--text); }
.formular__kontakte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; }
.formular__kontakte p { margin: 0; }
.formular__ort { display: block; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em;
                 text-transform: uppercase; color: var(--text-2); }
.formular__kontakte a { font-family: var(--mono); display: inline-flex; align-items: center; min-height: 44px; }
.feld__hinweis { margin: .35rem 0 0; font-size: .875rem; color: var(--text-2); }
@media (max-width: 560px) { .formular__kontakte { grid-template-columns: minmax(0, 1fr); } }
.formular__status { margin-top: 1rem; border-radius: var(--r-klein); padding: 1rem 1.1rem; }
.formular__status:empty { display: none; }
.formular__status.ok { background: #eef6ef; color: #1d4d27; }
.formular__status.fehler { background: #fbeff1; color: #7a0420; }
.formular.gesendet form { display: none; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.honig input { height: 44px; }

/* -------------------------------------------------------------- Fuss --- */
.fuss { background: var(--schwarz); color: var(--weiss); padding: clamp(3rem, 6vw, 4.5rem) 0 0;
        font-size: .9375rem; border-top: 1px solid var(--hauch); }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
                gap: 2rem; padding-bottom: 2.5rem; }
.fuss__logo img { display: block; width: 200px; height: auto; }
.fuss h2 { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em;
           text-transform: uppercase; color: var(--text-hell-2); margin-bottom: .8rem; }
.fuss p, .fuss li { color: var(--text-hell); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss a { color: var(--weiss); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.fuss a:hover { color: var(--rot-auf-dunkel); }
.fuss__leiste { border-top: 1px solid var(--hauch); padding: 1rem 0; color: var(--text-hell-2); font-size: .875rem; }
@media (max-width: 860px) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .fuss__raster > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .fuss__raster { grid-template-columns: minmax(0, 1fr); } }

/* Rechtsseiten */
.seitenkopf { padding: clamp(3rem, 7vw, 5rem) 0; background:
                radial-gradient(700px 380px at 100% 0%, rgba(175, 7, 43, .25), transparent 62%), var(--schwarz); }
.seitenkopf h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); letter-spacing: -0.045em;
                 margin-bottom: .6rem; hyphens: auto; -webkit-hyphens: auto; }
.seitenkopf p { color: var(--text-hell); margin: 0; }
.brotkrume { font-family: var(--mono); font-size: .8125rem; margin-bottom: 1rem; color: var(--text-hell-2); }
.brotkrume a { color: var(--weiss); display: inline-flex; align-items: center; min-height: 44px; }
.seitenkopf + .abschnitt { background: var(--weiss); }
.schmal { max-width: 820px; }
.rechtstext h2 { font-size: 1.375rem; letter-spacing: -0.02em; margin-top: 2.25rem; overflow-wrap: anywhere; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { overflow-wrap: anywhere; color: var(--text-2); }

/* ------------------------------------------------ Schwebend: Bewerber --- */
.pille { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30;
         box-shadow: 0 14px 34px -10px rgba(15, 14, 16, .55), 0 0 0 3px rgba(255, 255, 255, .2);
         transition: opacity .25s, transform .25s var(--weich), background-color .2s; }
.pille.weg { opacity: 0; transform: translateY(12px); pointer-events: none; }
.mobilleiste { display: none; }
@media (max-width: 760px) {
  .pille { display: none; }
  .mobilleiste { display: grid; grid-template-columns: 1fr 1.4fr; gap: .5rem; position: fixed;
                 left: 0; right: 0; bottom: 0; z-index: 30;
                 padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
                 background: rgba(15, 14, 16, .86); border-top: 1px solid var(--hauch);
                 -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
                 transition: transform .25s var(--weich); }
  .mobilleiste.weg { transform: translateY(110%); }
  .mobilleiste .knopf { min-height: 50px; padding: .6em .8em; }
  body { padding-bottom: 78px; }
}

/* ===================================================== Urheberzeile ===== */
/* Karte im Fuss: "Webseite umgesetzt von candidate-flow.de", Wortmarke, Sterne.
   Die Farbe muss spezifischer sein als .fuss a, sonst erbt die Karte die
   Linkfarbe der Fusszeile. */
.umsetzung { display: flex; justify-content: center; box-sizing: border-box;
             max-width: 100%; padding: 0.5rem 1rem 1.3rem; }
a.umsetzung__karte, a.umsetzung__karte:link, a.umsetzung__karte:visited,
a.umsetzung__karte:hover, a.umsetzung__karte:focus-visible {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.45em;
  box-sizing: border-box; max-width: 100%; padding: 0.7rem 1.5rem;
  border-radius: 14px; text-align: center; text-decoration: none; color: inherit;
  border: 1px solid rgba(128, 128, 128, 0.32);
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  background: rgba(128, 128, 128, 0.08);
  background: color-mix(in srgb, currentColor 6%, transparent); }
a.umsetzung__karte:hover { border-color: color-mix(in srgb, currentColor 34%, transparent); }
.umsetzung__satz { font-size: 0.8125rem; opacity: 0.74; }
/* Die Domain darf nie mitten im Wort umbrechen. */
.umsetzung__satz strong { font-weight: 700; opacity: 1; white-space: nowrap; }
.umsetzung__marke { height: 1.5em; width: auto; display: block; }
.umsetzung__sterne { height: 0.9em; width: auto; display: block; }