/* PPD Design-System — Tokens, Basis, Komponenten. Sektionen: sections.css
   Farben gemessen am Schaufenster Bourscheidtstr. 43 (Foto 03/2026, durch Glas → leicht entsättigt,
   Mint um Glas-Grauschleier korrigiert). Mit Original-CI-Datei abgleichen, sobald vorhanden. */
/* Schriften selbst gehostet (@fontsource-variable 5.3.0, OFL) – keine Requests an Google */
@font-face { font-family: 'Bricolage'; font-display: swap; font-weight: 200 800; src: url(/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'DM Sans'; font-display: swap; font-weight: 100 1000; src: url(/fonts/dm-sans-latin-wght-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'Caveat'; font-display: swap; font-weight: 400 700; src: url(/fonts/caveat-latin-wght-normal.woff2) format('woff2-variations'); }

:root {
  /* Markenfarben */
  /* CI-Farben – ausschließlich aus den Originaldateien (assets/brand/original), Herkunft in HERKUNFT.md */
  --ppd-black: #000000;        /* ppd Logo neu.pdf: Buchstaben p·p·d (Vektorfüllung 0/0/0) */
  --ppd-green: #586f58;        /* Logo Ideen2 (1).pdf + Marc Entwurf PPD Final (1).pdf: rgb(34,51% 43,53% 34,51%) = 88/111/88; identisch in Logo Grün.jpg */
  --ppd-grey-light: #e6e6e6;   /* Marc Entwurf PPD Final (1).pdf: Schaufensterfläche rgb(90,2%) */
  --ppd-white: #ffffff;
  --ppd-logo-gradient: linear-gradient(180deg, #000 0%, #fefefe 100%); /* ppd Logo neu.pdf: Verbinder-Verlauf, 4 Vektorflächen */
  /* Abgeleitete Töne (nur Aufhellung/Abdunklung des CI-Grüns bzw. Schwarz, kein neuer Farbton) */
  --ppd-green-dark: #455745;   /* Grün 78 % + Schwarz 22 % – Text auf Hell (7,9:1), Hover */
  --ppd-green-light: #b4beb4;  /* Grün 45 % + Weiß 55 % – Akzenttext auf Schwarz (11:1) */
  --ppd-green-soft: #e8ebe8;   /* Grün 14 % + Weiß 86 % – zarte Flächen */
  --ppd-grey-dark: #1f1f1f;    /* Schwarz 88 % + Weiß 12 % – zweite dunkle Fläche */
  --ppd-ink: var(--ppd-black);
  --ppd-paper: #f4f4f4;        /* Schaufenstergrau 45 % + Weiß */
  /* Typo-Rhythmus: Headline, Marker und Copy sind drei getrennte Ebenen. em bezieht sich auf die Schriftgröße der Headline,
     damit der Abstand mit ihr wächst. Keine Einzelpixel pro Sektion – Abweichungen nur nach oben (z. B. vor Kartenrastern). */
  --space-eyebrow-headline: clamp(16px, 1.4vw, 22px);
  --space-headline-copy: max(20px, .38em);   /* Unterkante Headline → erste Copy-Zeile */
  --space-marker-copy: .2em;                 /* Zuschlag, wenn ein Marker unter der Headline hängt */
  --space-copy-cta: clamp(28px, 2.6vw, 38px);
  --text: var(--ppd-black); --text-muted: #595959; --line: var(--ppd-grey-light);
  --font-head: 'Bricolage', 'DM Sans', system-ui, sans-serif;   /* gewählt nach Vergleich A/B/C im Layout */
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;              /* nur für kleine Notizen */
  --font: var(--font-body);
  --r-s: 12px; --r-m: 20px; --r-l: 26px;
  --slant: -14deg;            /* Neigung des Logos */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1); /* PPD: leicht federnd, bewusst anders als quip */
  --gutter: clamp(16px, 4.5vw, 56px);
  --header-h: max(72px, 4.5rem); /* wächst mit der Schriftgröße (125 % → 90 px, 150 % → 108 px): Logo, Menü-Button und Navigation bleiben im Header */
  --mobile-actions-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden schlägt jedes display:flex/grid – sonst blendet z. B. der Jobfilter keine Karte aus */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--text); background: var(--ppd-paper); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, .display, .h2, .h3, .hero__title, .footer-motto, .motto__text, .menu__nav a, .hero__facts strong, .stats strong,
.service__no, .steps-big__no, .why__big span, .journey__steps b, .timeline b, .contact-card__name, .pointer__bubble strong, .tile b, .job-card__title, .quote { font-family: var(--font-head); }
h1, h2, h3 { margin: 0; overflow-wrap: break-word; line-height: 1.05; font-weight: 800; letter-spacing: -0.012em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ppd-green); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ppd-green); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.i { width: 1.15em; height: 1.15em; flex: none; }

/* Typo */
.eyebrow { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 var(--space-eyebrow-headline); font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ppd-green-dark); }
.eyebrow::before { content: ''; width: 22px; height: 8px; background: var(--ppd-green); transform: skewX(var(--slant)); flex: none; }
.eyebrow--light, .page-hero .eyebrow, .benefits .eyebrow, .site-footer .eyebrow, .motto .eyebrow { color: var(--ppd-green-light); }
.display { font-size: clamp(2.5rem, 9vw, 6.4rem); font-weight: 850; line-height: .96; letter-spacing: -0.018em; }
.display--sm { font-size: clamp(2rem, 9vw, 4.6rem); overflow-wrap: break-word; }
.display--job { font-size: clamp(2.2rem, 7vw, 5.2rem); max-width: 16ch; }
.h2 { font-size: clamp(2rem, 5.4vw, 3.8rem); font-weight: 830; line-height: 1; }
.h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.display, .h2, .hero__title, .path h2 { margin-bottom: var(--space-headline-copy); }
:is(.display, .h2, .hero__title):has(.mark--line) { margin-bottom: calc(var(--space-headline-copy) + var(--space-marker-copy)); }
:is(.display, .h2, .hero__title):has(.mark--circle) { margin-bottom: calc(var(--space-headline-copy) + var(--space-marker-copy) * 1.6); } /* der Kreis reicht tiefer als die Linie */
.display:last-child, .h2:last-child { margin-bottom: 0; }
.lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; max-width: 40ch; }
em { font-style: italic; }

/* Buttons: pillig, Pfeil im Kreis wandert, leichte Drehung beim Hover */
.btn { --bg: var(--ppd-ink); --fg: #fff; --chip: rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent; background: var(--bg); color: var(--fg);
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .45s var(--spring), background .25s, color .25s, border-color .25s, box-shadow .3s; }
.btn:has(.i:last-child) { padding-right: 9px; }
.btn .i { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--chip); transition: transform .45s var(--spring); }
.btn:hover, .btn:focus-visible { transform: rotate(-1.5deg) translateY(-2px); }
.btn:hover .i:last-child { transform: translateX(4px) rotate(-8deg); }
.btn:active { transform: scale(.97); }
.btn--green { --bg: var(--ppd-green); --fg: #fff; --chip: var(--ppd-ink); box-shadow: 0 0 0 0 var(--ppd-ink); }
.btn--green:hover { --bg: var(--ppd-green-dark); }
.btn--green .i { color: #fff; }
.btn--green:hover { box-shadow: 4px 5px 0 0 var(--ppd-ink); }
.btn--line { --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.45); }
.btn--line:hover { border-color: var(--ppd-green); color: var(--ppd-green-light); }
.btn--ghost { --bg: transparent; --fg: var(--ppd-ink); --chip: var(--ppd-green-soft); border-color: var(--ppd-ink); }
.btn--ghost:hover { --bg: var(--ppd-ink); --fg: #fff; }
.btn--dark { --bg: var(--ppd-ink); --fg: #fff; --chip: var(--ppd-green); }
.btn--dark .i { color: #fff; }
.btn--dark:hover { box-shadow: 4px 5px 0 0 rgba(0,0,0,.25); }
.btn--line-dark { --bg: transparent; --fg: #fff; --chip: rgba(255,255,255,.14); border-color: #fff; } /* steht auf Grün (#586f58): Weiß 5,5:1 statt Schwarz 3,8:1 */
.btn--line-dark:hover { --bg: var(--ppd-ink); --fg: #fff; --chip: rgba(255,255,255,.14); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .92rem; }
.btn--lg { min-height: 60px; padding: 0 30px; font-size: 1.08rem; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-head); font-weight: 700; text-decoration: none; color: var(--ppd-ink);
  background: linear-gradient(var(--ppd-green), var(--ppd-green)) 0 100% / 100% 3px no-repeat; padding-bottom: 4px; transition: background-size .35s var(--spring); }
.link-arrow:hover { background-size: 100% 42%; }
.link-arrow .i { transition: transform .35s var(--spring); }
.link-arrow:hover .i { transform: translateX(4px); }

/* Markenstreifen (Schaufenster-Bänder) */
.stripes { display: grid; gap: 10px; }
.stripes span { display: block; height: 10px; background: var(--ppd-green); transform-origin: left; }
.stripes span + span { height: 4px; opacity: .7; }


/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); color: var(--ppd-black); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.site-header__inner { height: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; user-select: none; -webkit-tap-highlight-color: transparent; }
.brand__logo { display: block; width: 92px; height: auto; padding: 6px 10px; background: var(--ppd-grey-light); border-radius: 4px; box-sizing: content-box; }
.brand__claim { display: grid; gap: 2px; min-width: 0; font-family: var(--font-head); font-size: .66rem; line-height: 1.2; font-weight: 650; padding-left: 12px; border-left: 1px solid rgba(0,0,0,.35); }
.brand__kind { letter-spacing: .12em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
/* Region: mobil und auf großen Desktops vollständig. Nur 1200–1339 px nutzen die Kurzform, damit sechs Navigationspunkte und CTA einzeilig bleiben. */
.region { font-size: .72rem; font-weight: 700; letter-spacing: .01em; color: var(--ppd-green-dark); }
.region__short { display: none; }
@media (max-width: 1199px) {
  .site-header__inner { gap: clamp(6px, 2vw, 16px); }
  .brand { flex: 1 1 auto; gap: clamp(6px, 2vw, 12px); }
  .brand__logo { flex: none; width: clamp(72px, 22vw, 92px); padding: 5px 7px; }
  .brand__claim { gap: 1px; padding-left: 0; border-left: 0; font-size: clamp(.64rem, 2.45vw, .72rem); line-height: 1.08; }
  .brand__kind { letter-spacing: .035em; text-transform: none; opacity: .82; }
  .region { font-size: 1em; line-height: 1.08; }
  .region__long { display: grid; gap: 1px; }
  .region__short { display: none; }
  .menu-btn { flex: none; margin-left: 0; gap: 7px; height: 44px; padding: 0 6px 0 12px; }
  .menu-btn__bars { width: 30px; height: 30px; }
}
@media (max-width: 359px) {
  .brand { gap: 6px; }
  .brand__logo { width: 70px; padding: 4px 6px; }
  .brand__claim { font-size: .61rem; }
}
.nav { display: none; margin-left: auto; gap: 4px; }
.nav a { position: relative; white-space: nowrap; padding: 10px 14px; text-decoration: none; font-weight: 620; font-size: .98rem; border-radius: 999px; transition: background .25s; }
.nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; background: var(--ppd-green); transform: scaleX(0) skewX(var(--slant)); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1) skewX(var(--slant)); }
.header-cta { display: none; }
.menu-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 8px 0 18px; border-radius: 999px;
  border: 1.5px solid currentColor; background: transparent; cursor: pointer; font-weight: 700; font-size: .9rem; position: relative; z-index: 61; }
.menu-btn__bars { display: grid; gap: 5px; width: 30px; height: 30px; place-content: center; border-radius: 50%; background: var(--ppd-green); }
.menu-btn__bars i { display: block; width: 14px; height: 2px; background: #fff; transition: transform .4s var(--ease); }
.menu-open .menu-btn__bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-btn__bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-open .site-header { transform: none; }
@media (max-width: 479px) {
  .menu-btn { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 13px; color: #fff; background: var(--ppd-ink); box-shadow: 0 5px 16px rgba(0,0,0,.16); transition: transform .2s var(--ease), background .25s ease, box-shadow .25s ease; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn__bars { width: 100%; height: 100%; gap: 6px; border-radius: inherit; background: transparent; }
  .menu-btn__bars i { width: 19px; height: 2px; border-radius: 99px; }
  .menu-btn:active { transform: scale(.96); }
  .menu-btn:focus-visible { outline: 3px solid var(--ppd-green-light); outline-offset: 3px; }
  .menu-open .menu-btn { background: var(--ppd-green-dark); box-shadow: 0 5px 18px rgba(0,0,0,.24); }
  .menu-open .menu-btn__bars i:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-open .menu-btn__bars i:last-child { transform: translateY(-4px) rotate(-45deg); }
}
@media (min-width: 1200px) and (max-width: 1339px) { .region__long { display: none; } .region__short { display: inline; } } /* 6 Menüpunkte: im engen Desktop-Fenster die kurze Gebietszeile, sonst bricht sie zweizeilig */
@media (min-width: 1200px) { /* darunter reicht die Breite für Logo + Region + 6 Menüpunkte + CTA nicht einzeilig → Menü-Button */
  .nav, .header-cta { display: flex; }
  .header-cta { margin-left: 8px; }
  .menu-btn { display: none; }
  .brand__logo { width: 104px; }
}

/* Mobile-Menü: lückenlose Vollfläche zwischen festem Header und festen Schnellaktionen. */
.menu { position: fixed; inset: var(--header-h) 0 calc(var(--mobile-actions-h) + env(safe-area-inset-bottom)); z-index: 49; color: #fff; background: var(--ppd-ink); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 22px max(var(--gutter), env(safe-area-inset-right)) 24px max(var(--gutter), env(safe-area-inset-left)); }
.menu[hidden] { display: none; }
.menu__bg { position: absolute; inset: 0; z-index: -1; background: var(--ppd-ink); }
.menu__nav { display: grid; gap: 2px; }
.menu__nav a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; font-size: clamp(1.8rem, 7.6vw, 3rem); font-weight: 820; line-height: 1.1; /* eng: 6 Punkte + Fuß müssen bei 320–430×700 ohne Scrollen passen */
  text-decoration: none; letter-spacing: -.02em; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), color .2s; transition-delay: calc(.12s + var(--i) * .05s); }
.menu__nav a small { font-size: .8rem; font-weight: 600; color: var(--ppd-green-light); letter-spacing: .1em; }
.menu__nav a:hover, .menu__nav a[aria-current] { color: var(--ppd-green-light); }
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.mobile-actions { position: fixed; inset: auto 0 0; z-index: 52; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; min-height: calc(var(--mobile-actions-h) + env(safe-area-inset-bottom)); padding: 9px max(12px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(255,255,255,.96); border-top: 1px solid rgba(0,0,0,.1); box-shadow: 0 -10px 28px rgba(0,0,0,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.mobile-actions a { min-width: 0; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; font-family: var(--font-head); font-size: clamp(.86rem, 3.8vw, 1rem); font-weight: 760; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), background .2s ease, color .2s ease; }
.mobile-actions a:active { transform: scale(.975); }
.mobile-actions a:focus-visible { outline-offset: -3px; }
.mobile-actions__apply { color: #fff; background: var(--ppd-green); }
.mobile-actions__apply:hover, .mobile-actions__apply:focus-visible { background: var(--ppd-green-dark); }
.mobile-actions__apply .i { width: 20px; height: 20px; }
.mobile-actions__call { color: #fff; background: var(--ppd-ink); }
.mobile-actions__call:hover, .mobile-actions__call:focus-visible { color: var(--ppd-green-light); }
.mobile-actions__call .i { width: 20px; height: 20px; }
@media (max-width: 1199px) { body { padding-bottom: calc(var(--mobile-actions-h) + env(safe-area-inset-bottom)); } }
@media (min-width: 1200px) { .mobile-actions { display: none; } }
@media (prefers-reduced-motion: reduce) { .menu__nav a, .menu-btn__bars i, .mobile-actions a { transition: none; } }

/* Badges, Chips, Ticks */
.badge { display: inline-block; font-family: var(--font-hand); font-size: 1.05rem; font-weight: 700; line-height: 1; padding: 5px 10px 4px; border-radius: 6px; }
.badge--demo { background: #ffe9a8; color: #5a4300; }
.ticks { display: grid; gap: .65em; }
.ticks li { position: relative; padding-left: 1.9em; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 1.1em; height: .5em; background: var(--ppd-green); transform: skewX(var(--slant)); }

/* Jobkarte: großer Titel, versetzte Tags, Mint-Versatzschatten beim Hover */
.job-grid { display: grid; gap: 18px; }
@media (min-width: 700px) {
  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
  .job-grid > .job-card:nth-child(even) { margin-top: 40px; }
}
.job-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 20px; background: #fff; border-radius: var(--r-l);
  border: 2px solid #e6e6e6; transition: transform .5s var(--spring), box-shadow .4s var(--spring), border-color .25s; }
.job-card:hover, .job-card:focus-within { transform: translate(-3px, -4px) rotate(-.8deg); border-color: var(--ppd-ink); box-shadow: 7px 8px 0 var(--ppd-green); }
.job-card .badge--demo { position: absolute; top: -11px; right: 18px; rotate: 4deg; }
.job-card__title { font-size: clamp(1.55rem, 2.9vw, 2.05rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; hyphens: manual; overflow-wrap: break-word; }
.job-card__title a { text-decoration: none; }
.job-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.job-card__mwd { font-size: .52em; font-weight: 600; letter-spacing: 0; color: var(--text-muted); white-space: nowrap; }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.job-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ppd-paper); font-weight: 700; font-size: .92rem; rotate: 1.5deg; translate: 0 3px; }
.job-tag--loc { background: var(--ppd-green); color: #fff; rotate: -2deg; translate: 0 0; }
.job-tag--green { background: var(--ppd-green-soft); color: var(--ppd-green-dark); }
.job-tag .i { width: 1em; height: 1em; }
.job-card__text { color: var(--text-muted); font-size: .98rem; margin: 0; }
.job-card__foot { margin-top: auto; padding-top: 14px; border-top: 2px dashed #e6e6e6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.job-card__meta { font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.job-card__go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; }
.job-card__go .i { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--ppd-ink); color: var(--ppd-green-light); transition: transform .45s var(--spring); }
.job-card:hover .job-card__go .i { transform: translateX(5px) rotate(-10deg); }
.job-card--initiative { background: var(--ppd-ink); color: #fff; border-color: var(--ppd-ink); }
.job-card--initiative:hover { box-shadow: 7px 8px 0 var(--ppd-green); }
.job-card--initiative .job-card__text, .job-card--initiative .job-card__meta { color: #cccccc; }
.job-card--initiative .job-card__foot { border-top-color: rgba(255,255,255,.15); }
.job-card--initiative .eyebrow { color: var(--ppd-green-light); }
.job-card--initiative .job-card__go .i { background: var(--ppd-green); color: #fff; }
@media (max-width: 699px) { .job-tag, .job-tag--loc { rotate: 0deg; translate: 0 0; } .job-card:hover { transform: none; box-shadow: 5px 6px 0 var(--ppd-green); } }

/* Zeiger-Grundstil (Layout in character.css) */
.pointer__bubble { position: relative; z-index: 2; padding: 14px 18px; background: var(--ppd-green); color: #fff; border-radius: 18px 18px 18px 4px;
  box-shadow: 0 16px 36px -18px rgba(0,0,0,.5); transform-origin: 80% 100%; }
.pointer__bubble strong { display: block; font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 850; line-height: 1.05; }
.pointer__bubble span { display: block; font-size: .8rem; font-weight: 600; margin-top: 4px; opacity: .85; }
.pointer__bubble::after { content: ''; position: absolute; background: inherit; }
.pointer__arrow { overflow: visible; fill: none; stroke: var(--ppd-green-dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 8; }
.pointer__arrow [data-arrow-head] { stroke-dasharray: none; }

/* Formulare */
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--full, .form-grid > .check, .more, .hp { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .more summary { font-weight: 700; font-size: .92rem; }
.opt { font-weight: 500; color: var(--text-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: #fff; border: 1.5px solid #8c8c8c; border-radius: 12px;
  transition: border-color .2s, box-shadow .2s; font-size: 1rem; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ppd-green-dark); box-shadow: 0 0 0 4px rgba(88,111,88,.3); }
.field input[type=file] { padding: 12px; background: var(--ppd-green-soft); border-style: dashed; cursor: pointer; }
.field .err, .check .err { color: #a3261b; font-size: .85rem; font-weight: 600; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: #c0392b; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; line-height: 1.45; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ppd-green-dark); flex: none; }
.more { border: 1.5px solid var(--line); border-radius: 12px; padding: 0 16px; background: rgba(255,255,255,.6); }
.more summary { cursor: pointer; padding: 14px 0; list-style: none; display: flex; gap: .4em; align-items: baseline; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '+'; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--ppd-green-dark); transition: transform .3s; }
.more[open] summary::after { transform: rotate(45deg); }
.more[open] { padding-bottom: 16px; }
.hp { position: absolute; left: -9999px; }
.form-foot { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; margin-top: 22px; }
.form-foot .btn { width: 100%; min-width: 0; }
.form-call { position: relative; min-width: 0; min-height: 68px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 14px 8px 8px; border: 1px solid var(--ppd-ink); border-radius: 999px; background: var(--ppd-ink); color: #fff; text-decoration: none; box-shadow: 0 16px 30px -24px rgba(0,0,0,.65); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.form-call > .i { width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: var(--ppd-green); color: #fff; }
.form-call__copy { min-width: 0; display: grid; line-height: 1.08; }
.form-call__copy small { color: #c7cfc7; font-size: .67rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.form-call__copy strong { margin-top: 2px; font-size: 1.04rem; font-weight: 850; }
.form-call__copy > span { margin-top: 4px; color: #fff; font-size: clamp(.86rem, 3.8vw, 1rem); font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }
.form-call__arrow { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; font-size: 1rem; transition: transform .25s var(--ease), background .25s; }
.form-call:hover { color: #fff; transform: translateY(-2px); background: #171717; box-shadow: 0 20px 34px -24px rgba(0,0,0,.8); }
.form-call:hover .form-call__arrow { transform: translate(2px,-2px); background: var(--ppd-green); border-color: var(--ppd-green); }
.form-call:focus-visible { outline: 3px solid var(--ppd-green); outline-offset: 3px; }
@media (min-width: 760px) { .form-foot { grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr); } }
.form-status { margin: 14px 0 0; font-weight: 700; }
.form-status.is-error { color: #a3261b; }
.form.is-sending button[type=submit] { opacity: .6; pointer-events: none; }

/* Footer */
.site-footer { background: var(--ppd-ink); color: #cccccc; padding: 0 0 28px; }
.stripes--footer { padding-top: 0; }
.footer-grid { display: grid; gap: 32px; padding-top: 64px; padding-bottom: 48px; }
@media (min-width: 760px) and (max-width: 999px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-claim { grid-column: 1 / -1; }
  .footer-grid > * { min-width: 0; }
}
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-motto { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 830; line-height: 1.02; color: #fff; max-width: 14ch; margin: 0; }
.footer-h { color: var(--ppd-green-light); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.site-footer address { font-style: normal; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ppd-green-light); }
.footer-links { display: grid; gap: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .88rem; }
.site-credit { display: inline-flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px 8px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #fff; text-decoration: none; background: rgba(255,255,255,.045); transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.site-credit__copy { min-width: 0; display: grid; line-height: 1.02; }
.site-credit__copy > span { color: rgba(255,255,255,.58); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.site-credit__copy strong { margin-top: 3px; color: #fff; font-size: .82rem; font-weight: 830; white-space: nowrap; }
.site-credit__arrow { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ppd-green); color: #fff; font-size: 1rem; transition: transform .25s var(--ease), background .25s; }
.site-credit:hover { color: #fff; transform: translateY(-2px); border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.085); }
.site-credit:hover .site-credit__arrow { transform: translate(2px,-2px); background: #718c71; }
.site-credit:focus-visible { outline: 3px solid var(--ppd-green-light); outline-offset: 3px; }
@media (max-width: 639px) { .site-credit { flex-basis: 100%; justify-content: space-between; margin-top: 4px; } }

/* PIN-Dialog */
.pin-dialog { border: 0; padding: 0; border-radius: var(--r-l); width: min(92vw, 380px); background: var(--ppd-ink); color: #fff; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7); }
.pin-dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.pin-form { padding: 30px 26px 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pin-form h2 { font-size: 1.8rem; }
.pin-form .eyebrow { color: var(--ppd-green-light); margin: 0; }
.pin-form input { width: 100%; min-width: 0; height: 64px; text-align: center; font-size: 2rem; letter-spacing: .5em; border-radius: 14px; border: 1.5px solid #4d4d4d; background: #1a1a1a; color: #fff; padding-left: .5em; }
.pin-form input:focus { outline: none; border-color: var(--ppd-green); box-shadow: 0 0 0 4px rgba(88,111,88,.3); }
.pin-msg { min-height: 1.4em; margin: 0; color: #ffb3a7; font-weight: 600; font-size: .92rem; }
.pin-actions { display: flex; gap: 10px; }
.pin-actions .btn { flex: 1; }
.pin-actions .btn--ghost { --fg: #fff; border-color: #595959; --fill: #333; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }