/* =========================================================================
   SUBPAGE — Shared Patterns für alle Subpages
   (denkmalschutz, wintergarten, ueber-uns, jobs, referenzen, kontakt, legals)
   ========================================================================= */

/* Subpages forcieren scrolled-Nav permanent ─ vermeidet Flash bei Page-Load */
body[data-page="subpage"] .nav {
    background: color-mix(in oklch, var(--bg) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    padding-block: 0.7rem;
    box-shadow:
        0 1px 0 var(--border-soft),
        0 8px 24px color-mix(in oklch, var(--holz) 8%, transparent);
}
body[data-page="subpage"] .nav-logo {
    filter: none;
}
body[data-page="subpage"] .nav-links a {
    color: var(--text);
}
body[data-page="subpage"] .nav-links a:hover {
    color: var(--accent);
}
body[data-page="subpage"] .nav-burger span {
    background: var(--text);
}
body[data-page="subpage"] .nav-cta {
    border-color: var(--accent-40);
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 80%, white 20%),
        var(--accent));
    color: white !important;
}

/* =========================================================================
   SUBPAGE-HERO — kompakter als Index-Hero (etwa 60vh)
   ========================================================================= */

.subpage-hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.subpage-hero-bg {
    position: absolute;
    inset: -5%;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: brightness(0.65) contrast(1.06) saturate(0.95);
}

@supports (animation-timeline: scroll(root)) {
    @keyframes subpage-hero-parallax {
        from { transform: translateY(0) scale(1.02); }
        to   { transform: translateY(8vh) scale(1.05); }
    }
    .subpage-hero-bg {
        animation: subpage-hero-parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0vh 80vh;
    }
}

.subpage-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(135deg,
            rgba(28, 18, 10, 0.72) 0%,
            rgba(28, 18, 10, 0.48) 50%,
            rgba(28, 18, 10, 0.30) 100%),
        linear-gradient(to bottom,
            transparent 0%,
            rgba(28, 18, 10, 0.20) 60%,
            rgba(28, 18, 10, 0.75) 100%);
}

/* Bottom-Fade in den nächsten Section-BG */
.subpage-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 25vh;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in oklch, var(--bg) 40%, transparent) 50%,
        var(--bg) 100%);
}

/* Atmo-Beam Honig-Gold */
.subpage-hero-beam {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    filter: blur(50px);
    mix-blend-mode: screen;
    top: -10%;
    right: -8%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--honig) 0%, transparent 65%);
    opacity: 0.32;
}

.subpage-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.subpage-hero-content .label {
    /* Hero-Eyebrow weiß (Bock-Logik) — Gold-Akzent sitzt im h1 em. */
    color: color-mix(in oklch, white 82%, transparent);
    margin-bottom: 1.25rem;
    display: block;
}

.subpage-hero-content h1 {
    /* weight / letter-spacing / font-variation-settings erbt die
       h1-Base (Fraunces opsz 144, wght 380). */
    color: white;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
    margin-bottom: 1.5rem;
}
.subpage-hero-content h1 em {
    color: var(--accent);
    font-style: normal;
    font-weight: 400;
}

.subpage-hero-sub {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
    max-width: 56ch;
    margin: 0;
}

/* =========================================================================
   BACK-BUTTON (statisch + floating, CLAUDE.md Pattern)
   ========================================================================= */

/* Statischer Back-Button im Flow oben */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--accent);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 26%, transparent),
        0 3px 10px color-mix(in oklch, var(--holz) 14%, transparent);
    transition: background var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                color var(--dur-medium) var(--ease);
}
.back-button:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 18%, white),
        color-mix(in oklch, var(--honig) 8%, white));
    border-color: var(--accent-40);
}
.back-button::before {
    content: '←';
    transition: transform var(--dur-fast) var(--ease);
}
.back-button:hover::before {
    transform: translateX(-3px);
}

/* Floating Back-Button (Desktop only — Mobile nimmt den statischen) */
.back-floating {
    position: fixed;
    left: clamp(1rem, 2vw, 2.5rem);
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 60%, transparent),
        color-mix(in oklch, white 45%, transparent));
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 30%, transparent),
        0 4px 14px color-mix(in oklch, var(--holz) 16%, transparent);
    color: var(--accent);
    font-size: 1.2rem;
    transition: opacity var(--dur-medium) var(--ease),
                transform var(--dur-medium) var(--ease),
                background var(--dur-medium) var(--ease);
}
.back-floating.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}
.back-floating:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 22%, white),
        color-mix(in oklch, var(--honig) 10%, white));
}

@media (max-width: 767px) {
    .back-floating { display: none !important; }
}

/* =========================================================================
   EDITORIAL-SECTION — Image + Text 2-Col
   ========================================================================= */

.sp-editorial {
    padding-block: clamp(3rem, 6vw, 5rem);
    position: relative;
}

.sp-editorial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.sp-editorial-grid.is-reversed {
    direction: rtl;
}
.sp-editorial-grid.is-reversed > * {
    direction: ltr;
}

@media (max-width: 900px) {
    .sp-editorial-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .sp-editorial-grid.is-reversed { direction: ltr; }
}

.sp-editorial-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--depth-rest), 0 0 32px var(--honig-15);
    isolation: isolate;
    position: relative;
}
.sp-editorial-image img {
    width: 100%;
    height: auto;
    display: block;
}

.sp-editorial-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sp-editorial-text .label {
    display: block;
    margin-bottom: 0.25rem;
}
.sp-editorial-text h2 {
    color: var(--text);
    margin: 0;
    text-wrap: balance;
}
.sp-editorial-text h2 em {
    color: var(--accent);
}
.sp-editorial-text p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-body);
    margin: 0;
}
.sp-editorial-text p.lead {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
}

/* =========================================================================
   PROCESS-SECTION — Wie wir vorgehen (Steps)
   ========================================================================= */

.sp-process {
    padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 9vw, 8rem);
    position: relative;
    background: linear-gradient(180deg,
        var(--bg) 0%,
        var(--bg-tint) 50%,
        var(--bg) 100%);
}

.sp-process-header {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
}
.sp-process-header .label {
    display: block;
    margin-bottom: 1rem;
}
.sp-process-header h2 {
    color: var(--text);
    margin-bottom: 1rem;
}
.sp-process-header h2 em {
    color: var(--accent);
}
.sp-process-header p {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    margin: 0;
}

.sp-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    position: relative;
}
@media (max-width: 900px) {
    .sp-process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .sp-process-grid { grid-template-columns: 1fr; }
}

.sp-step {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 70%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 70%, transparent));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-soft);
}
.sp-step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.sp-step > * { position: relative; z-index: 1; }

.sp-step-num {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--accent);
    display: block;
    margin-bottom: 0.75rem;
}
.sp-step h3 {
    font-size: clamp(1.15rem, 1.5vw, 1.3rem);
    color: var(--text);
    margin: 0 0 0.65rem;
    line-height: 1.2;
}
.sp-step p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-body);
    margin: 0;
}

/* =========================================================================
   CTA-BANNER am Ende der Subpage — flächig & ruhig (kein Container)
   Page-BG (Cream) bleibt sichtbar damit Atmo-Bleed des sp-process oben
   smooth in den CTA-Bereich durchschimmern kann.
   ========================================================================= */

.sp-cta {
    padding-block: clamp(5.5rem, 10vw, 9rem);
    position: relative;
}

/* Section-Divider zwischen sp-process und sp-cta — identisches Pattern
   wie .footer::before (weicher Akzent-Fade in accent-25). */
.sp-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        var(--accent-25),
        transparent);
    z-index: 2;
    pointer-events: none;
}

.sp-cta-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
    position: relative;
}

.sp-cta-inner .label {
    display: block;
    margin-bottom: 1.25rem;
}
.sp-cta-inner h2 {
    color: var(--text);
    margin: 0 0 1.5rem;
}
.sp-cta-inner h2 em {
    color: var(--accent);
}
.sp-cta-inner p {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    margin: 0 0 2rem;
    max-width: 52ch;
    margin-inline: auto;
}

.sp-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.sp-cta-inner .sp-cta-meta {
    margin-top: 3rem;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* =========================================================================
   WG-SHOWCASE (Wintergartenbau-Seite)
   ========================================================================= */

.wg-showcase {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.wg-showcase-header {
    max-width: 720px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.wg-showcase-header .label {
    display: block;
    margin-bottom: 1rem;
}
.wg-showcase-header h2 {
    color: var(--text);
    margin: 0;
}

.wg-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
@media (max-width: 700px) {
    .wg-showcase-grid { grid-template-columns: 1fr; }
}

.wg-showcase-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-paper);
    border: 1px solid var(--border-soft);
    box-shadow: var(--depth-rest);
    isolation: isolate;
}
.wg-showcase-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
.wg-showcase-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wg-showcase-action {
    margin-top: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

/* =========================================================================
   JOBS-LIST (Akkordeon-Pattern für 3 Stellen)
   ========================================================================= */

.jobs-list {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.job-card {
    position: relative;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 70%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 70%, transparent));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
}
.job-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.job-card > * { position: relative; z-index: 1; }

.job-card-header {
    display: flex;
    align-items: baseline;
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.25rem);
    border-bottom: 1px solid var(--border-soft);
}
.job-card-num {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--accent);
    flex-shrink: 0;
}
.job-card-header h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    color: var(--text);
    margin: 0;
    line-height: 1.15;
}
.job-asterisk {
    color: var(--accent);
    font-weight: 400;
    margin-left: 0.15em;
}

.job-card-body {
    padding: 0 clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
}

/* ── Akkordeon-Item (native <details>) ────────────────────────────── */
.job-detail {
    border-bottom: 1px solid var(--border-soft);
}
.job-detail:last-child {
    border-bottom: 0;
}

.job-detail summary {
    cursor: pointer;
    list-style: none;
    padding: clamp(0.95rem, 1.5vw, 1.15rem) 0;
    font-family: var(--font-sans);
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    position: relative;
    padding-right: 2rem;
    transition: color var(--dur-fast) var(--ease);
}
.job-detail summary::-webkit-details-marker { display: none; }
.job-detail summary::marker { content: ''; }

.job-detail summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1;
    color: var(--accent);
    transition: transform var(--dur-medium) var(--ease),
                color var(--dur-medium) var(--ease);
}
.job-detail[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
    color: var(--accent-deep);
}
.job-detail summary:hover {
    color: var(--accent);
}

.job-detail-inner {
    padding-block: 0 clamp(1.25rem, 2vw, 1.5rem);
}
.job-detail-inner ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.job-detail-inner li {
    position: relative;
    padding-left: 1.5rem;
    padding-block: 0.4rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-body);
}
.job-detail-inner li::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 0.95rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--honig);
    box-shadow: 0 0 10px var(--honig-40);
}
.job-detail-inner p {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-body);
}
.job-detail-inner p strong {
    color: var(--text);
    font-weight: 600;
    margin-right: 0.5rem;
}
.job-detail-inner a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.job-detail-inner a:hover { color: var(--accent-deep); }

.jobs-footnote {
    margin-top: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* =========================================================================
   ÜBER UNS — Founder + Werkstatt damals/heute + Stats
   ========================================================================= */

.uu-founder {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.uu-founder-header,
.uu-werkstatt-header {
    max-width: 760px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.uu-founder-header .label,
.uu-werkstatt-header .label {
    display: block;
    margin-bottom: 1rem;
}
.uu-founder-header h2,
.uu-werkstatt-header h2 {
    color: var(--text);
    margin: 0 0 0.75rem;
}
.uu-founder-header h2 em,
.uu-werkstatt-header h2 em {
    color: var(--accent);
}
.uu-werkstatt-header p {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    margin: 0;
}

/* Triptych-Composite (Vogels Polaroid-Triptych mit Brown-BG) */
.uu-triptych {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--depth-rest), 0 0 38px var(--honig-15);
    border: 1px solid color-mix(in oklch, var(--accent) 18%, transparent);
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    max-width: 1100px;
}
.uu-triptych img {
    width: 100%;
    height: auto;
    display: block;
}

.uu-founder-text {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.uu-founder-text p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-body);
    margin: 0;
}
.uu-founder-text p:first-child {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    color: var(--text);
    line-height: 1.5;
}

/* ── Werkstatt-Section ────────────────────────────────────────────── */
.uu-werkstatt {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(180deg,
        var(--bg) 0%,
        var(--bg-tint) 50%,
        var(--bg) 100%);
}

.uu-filmstrip {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--depth-rest), 0 0 38px var(--honig-15);
    border: 1px solid color-mix(in oklch, var(--accent) 18%, transparent);
    max-width: 1100px;
    margin: 0 auto;
}
.uu-filmstrip img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Heute: Stats + Text ──────────────────────────────────────────── */
.uu-heute {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.uu-heute-grid {
    display: grid;
    grid-template-columns: 0.7fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .uu-heute-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* Stats — editoriale Typografie statt Cards.
   Große Serif-Zahlen, Hairline-Divider zwischen den Einträgen,
   kein Background / kein Border / kein Shadow. */
.uu-heute-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.uu-stat {
    padding: clamp(1.5rem, 2.8vw, 2.25rem) 0;
    border-top: 1px solid var(--border-soft);
    position: relative;
}
.uu-stat:last-child {
    border-bottom: 1px solid var(--border-soft);
}

.uu-stat-num {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 500;
    color: var(--accent);
    line-height: 0.95;
    margin-bottom: 0.65rem;
    letter-spacing: -0.01em;
}
.uu-stat-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.uu-heute-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.uu-heute-text .label {
    display: block;
    margin-bottom: 0.25rem;
}
.uu-heute-text h2 {
    color: var(--text);
    margin: 0;
}
.uu-heute-text h2 em {
    color: var(--accent);
}
.uu-heute-text p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-body);
    margin: 0;
}
.uu-heute-text p:first-of-type {
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.5vw, 1.3rem);
    color: var(--text);
    line-height: 1.5;
}

/* =========================================================================
   REFERENZEN — Filter + Galerie + Lightbox
   ========================================================================= */

.ref-section {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* ── Filter-Bar ───────────────────────────────────────────────────── */
.ref-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ref-chip {
    padding: 0.55rem 1.1rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 28%, transparent),
        0 3px 8px color-mix(in oklch, var(--holz) 14%, transparent);
    transition: background var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                color var(--dur-medium) var(--ease);
}
.ref-chip:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 18%, white),
        color-mix(in oklch, var(--honig) 8%, white));
    border-color: var(--accent-40);
    color: var(--accent-deep);
}
.ref-chip.active {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 80%, white 20%),
        var(--accent));
    color: white;
    border-color: var(--accent-40);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 26%, transparent),
        0 4px 12px var(--accent-25),
        0 0 24px var(--honig-25);
}

/* ── Grid ─────────────────────────────────────────────────────────── */
.ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
}
@media (max-width: 900px) {
    .ref-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .ref-grid { grid-template-columns: 1fr; }
}

.ref-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--bg-paper);
    border: 1px solid var(--border-soft);
    box-shadow: var(--depth-rest);
    isolation: isolate;
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                opacity var(--dur-medium) var(--ease);
}
.ref-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}
.ref-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
.ref-item.hidden {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

@media (hover: hover) and (min-width: 1025px) {
    .ref-item:hover {
        border-color: var(--accent-25);
        box-shadow: var(--depth-hover), var(--depth-glow);
    }
    .ref-item:hover img {
        transform: scale(1.04);
    }
}

.ref-item-tag {
    position: absolute;
    bottom: 0.85rem;
    left: 0.9rem;
    padding: 0.4rem 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-deep);
    background: linear-gradient(to bottom,
        rgba(255, 250, 240, 0.94),
        rgba(245, 235, 220, 0.88));
    border: 1px solid color-mix(in oklch, var(--honig) 28%, transparent);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
    z-index: 2;
}

.ref-empty {
    text-align: center;
    padding: 3rem 0;
    font-family: var(--font-serif);
    font-style: normal;
    color: var(--text-muted);
}

/* =========================================================================
   LIGHTBOX
   ========================================================================= */

.lb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 14, 8, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    will-change: opacity;
}
.lb-backdrop.open {
    display: flex;
    opacity: 1;
}

.lb-stage {
    position: relative;
    max-width: 96vw;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lb-img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-md);
}

.lb-caption {
    margin-top: 1.25rem;
    color: var(--honig);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    text-align: center;
    line-height: 1;
}

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    border-radius: 50%;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
    z-index: 2;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 24%, transparent),
        color-mix(in oklch, var(--honig) 10%, transparent));
    border-color: var(--honig-40);
}
.lb-close {
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    font-size: 1.8rem;
}
.lb-prev {
    left: clamp(0.5rem, 2vw, 1.5rem);
    top: 50%;
    transform: translateY(-50%);
}
.lb-next {
    right: clamp(0.5rem, 2vw, 1.5rem);
    top: 50%;
    transform: translateY(-50%);
}
.lb-counter {
    position: absolute;
    bottom: clamp(1rem, 3vw, 2rem);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .lb-prev, .lb-next { width: 40px; height: 40px; }
}

body.lb-open {
    overflow: hidden;
}

/* =========================================================================
   KONTAKT — Page + Multi-Step Form
   ========================================================================= */

.kontakt-page {
    padding-top: calc(var(--nav-h) + clamp(2rem, 4vw, 3.5rem));
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.kontakt-header {
    max-width: 720px;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.kontakt-header .label {
    display: block;
    margin-bottom: 1rem;
}
.kontakt-header h1 {
    color: var(--text);
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.1;
}
.kontakt-header h1 em {
    color: var(--accent);
}
.kontakt-header-sub {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    color: var(--text-muted);
    margin: 0;
}

.kontakt-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
@media (max-width: 900px) {
    .kontakt-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ── Direct-Cards (links) ─────────────────────────────────────────── */
.kontakt-direct {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kontakt-direct-card {
    position: relative;
    display: block;
    padding: clamp(1.25rem, 2vw, 1.5rem);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 70%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 65%, transparent));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-soft);
    color: var(--text);
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
}
.kontakt-direct-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.kontakt-direct-card > * { position: relative; z-index: 1; }

@media (hover: hover) and (min-width: 1025px) {
    .kontakt-direct-card:hover {
        transform: translateY(-2px);
        border-color: var(--accent-25);
        box-shadow: var(--depth-rest), var(--depth-glow);
    }
}

.kontakt-direct-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 88%, white),
        var(--accent));
    color: white;
    margin-bottom: 0.7rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 8px var(--accent-25);
}
.kontakt-direct-label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.kontakt-direct-value {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    font-weight: 500;
    color: var(--text);
    margin: 0.2rem 0;
}
.kontakt-direct-meta {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-body);
    margin: 0.2rem 0 0;
}

/* =========================================================================
   JOBS-UPGRADE — Karriere-Page (Kratzer-Pattern, angepasst auf 3 Stellen)
   ========================================================================= */

/* ── Karriere bei Vogel — persönlicher Brief von Ralf Vogel ─────────
   Pattern adaptiert von Bock-Manifesto (Papier-Card mit Climax, Quote,
   Signatur). Ersetzt die alten 4 USP-Cards mit emotionaler Erzählung. */
.jobs-letter {
    padding-block: clamp(4rem, 7vw, 6rem);
    position: relative;
}

.jobs-letter-header {
    max-width: 760px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.jobs-letter-header .label {
    display: block;
    margin-bottom: 1rem;
}
.jobs-letter-header h2 {
    color: var(--text);
    margin: 0;
    text-wrap: balance;
}

/* Stage: Wrapper der Ghost-Halo + Card umfasst.
   Ghost-Logo ragt links/rechts aus der Card raus, Card sitzt z-1 darüber. */
.jobs-letter-stage {
    position: relative;
    isolation: isolate;
}
.jobs-letter-stage-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(420px, 85vw, 1100px);
    transform: translate(-50%, -50%);
    opacity: 0.1;
    mix-blend-mode: multiply;
    filter: blur(0.5px);
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(
        ellipse 65% 70% at center,
        black 0%,
        black 55%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 65% 70% at center,
        black 0%,
        black 55%,
        transparent 100%
    );
}
.jobs-letter-stage-ghost img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}
.jobs-letter-stage .jobs-letter-card {
    position: relative;
    z-index: 1;
}

.jobs-letter-card {
    max-width: 720px;
    margin-inline: auto;
    position: relative;
    background: var(--bg-paper);
    border: 1px solid color-mix(in oklch, var(--accent) 12%, transparent);
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
    box-shadow:
        0 24px 60px 0 color-mix(in oklch, var(--holz) 16%, transparent),
        0 4px 12px 0 color-mix(in oklch, var(--holz) 10%, transparent);
    overflow: hidden;
    isolation: isolate;
}
.jobs-letter-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    opacity: 0.45;
}

.jobs-letter-body {
    position: relative;
    z-index: 2;
}
.jobs-letter-body > * + * {
    margin-top: 1.4rem;
}
.jobs-letter-body p {
    font-family: var(--font-sans);
    font-size: clamp(0.96rem, 1.1vw, 1.04rem);
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-body);
    text-wrap: pretty;
    margin: 0;
}

.jobs-letter-highlight {
    color: var(--text);
    font-weight: 500;
    background: linear-gradient(to top,
        var(--honig-25) 42%,
        transparent 42%);
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.jobs-letter-body p.jobs-letter-climax {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.55rem, 2.8vw, 2.25rem);
    font-weight: 400;
    line-height: 1.22;
    color: var(--text);
    margin-block: clamp(2rem, 3.5vw, 2.8rem);
    letter-spacing: -0.012em;
    text-wrap: balance;
    font-variation-settings: 'opsz' 80, 'wght' 460, 'SOFT' 60;
}
.jobs-letter-body p.jobs-letter-climax em {
    color: var(--accent);
    font-style: normal;
    font-variation-settings: 'opsz' 80, 'wght' 380, 'SOFT' 100;
}

.jobs-letter-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--text);
    border-left: 2px solid var(--accent);
    padding-left: clamp(1rem, 2vw, 1.5rem);
    margin: clamp(2rem, 3.5vw, 2.8rem) 0;
    font-variation-settings: 'opsz' 36, 'wght' 380, 'SOFT' 100;
    text-wrap: pretty;
}

.jobs-letter-signature {
    display: flex;
    flex-direction: column;
    margin-top: clamp(2rem, 3.5vw, 2.8rem);
}
.jobs-letter-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.15;
    letter-spacing: -0.005em;
    font-variation-settings: 'opsz' 80, 'wght' 380, 'SOFT' 100;
}
.jobs-letter-title {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.45rem;
}

/* ── Warum bei Vogel — 4 USP-Cards (LEGACY, durch jobs-letter ersetzt) */
.jobs-why {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.jobs-why-header {
    max-width: 760px;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
}
.jobs-why-header .label {
    display: block;
    margin-bottom: 1rem;
}
.jobs-why-header h2 {
    color: var(--text);
    margin: 0 0 1rem;
}
.jobs-why-header h2 em {
    color: var(--accent);
}
.jobs-why-header p {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Cinematic Rail (vg-rail) — schongebaut-Pattern angepasst auf Hellraum
   ═══════════════════════════════════════════════════════════════════ */

/* Default state (vor State-Machine-Trigger) */
.vg-reveal-el {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--vg-d, 0ms),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--vg-d, 0ms),
                filter 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--vg-d, 0ms);
}

/* Headlines fade in when section enters viewport */
#jobs-why.vg-active .vg-reveal-el:not(.vg-step) {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Step-Cards (jobs-why) — fade-in beim Section-Enter ohne Rail */
#jobs-why.vg-active .vg-step.vg-reveal-el {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Step-Cards (sp-process) — fade-in wenn Rail Viewport erreicht */
.sp-process.vg-rail-active .vg-step.vg-reveal-el {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Rail-Fog — Materialisierung aus dem Nebel */
.vg-fog {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
    filter: blur(10px);
}
.sp-process.vg-active .vg-fog {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 300ms,
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 300ms,
                filter 1.4s cubic-bezier(0.16, 1, 0.3, 1) 300ms;
}

/* ── Rail (2px horizontal line) — Desktop only ─────────────────────── */
.vg-rail {
    position: relative;
    height: 2px;
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    margin-bottom: clamp(3rem, 4vw, 4rem);
    display: block;
}
@media (max-width: 1024px) {
    .vg-rail { display: none; }
}

/* Brown → Honig Fill mit Glow */
.vg-rail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        color-mix(in oklch, var(--accent) 60%, transparent) 0%,
        var(--accent) 50%,
        var(--honig-deep) 100%);
    box-shadow: 0 0 8px var(--honig-25);
}
.sp-process.vg-rail-active .vg-rail::after {
    animation: vgRailFill 4s linear 0.6s 1 forwards;
}

/* Fill mit Mikro-Pausen pro Station */
@keyframes vgRailFill {
    0%   { width: 0%; }
    10%  { width: 12.5%; }
    16%  { width: 12.5%; }
    35%  { width: 37.5%; }
    41%  { width: 37.5%; }
    60%  { width: 62.5%; }
    66%  { width: 62.5%; }
    85%  { width: 87.5%; }
    91%  { width: 87.5%; }
    100% { width: 100%; }
}

/* ── Stations (Kreise auf Rail) ────────────────────────────────────── */
.vg-station {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent);
    box-shadow: 0 2px 6px color-mix(in oklch, var(--holz) 12%, transparent);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in oklch, var(--text-muted) 70%, transparent);
}
.sp-process.vg-rail-active .vg-station {
    animation: vgStationFlash 750ms ease-out var(--vg-sd, 0s) 1 forwards;
}
@keyframes vgStationFlash {
    0%   {
        border-color: color-mix(in oklch, var(--accent) 20%, transparent);
        color: color-mix(in oklch, var(--text-muted) 70%, transparent);
        box-shadow: 0 2px 6px color-mix(in oklch, var(--holz) 12%, transparent);
    }
    10%  {
        border-color: var(--accent);
        color: var(--accent);
        box-shadow:
            0 2px 8px color-mix(in oklch, var(--holz) 18%, transparent),
            0 0 14px var(--honig-25);
    }
    35%  {
        border-color: color-mix(in oklch, var(--accent) 60%, transparent);
        color: var(--accent-deep);
        box-shadow:
            0 2px 6px color-mix(in oklch, var(--holz) 14%, transparent),
            0 0 10px var(--honig-15);
    }
    100% {
        border-color: color-mix(in oklch, var(--accent) 45%, transparent);
        color: var(--accent-deep);
        box-shadow:
            0 2px 6px color-mix(in oklch, var(--holz) 12%, transparent),
            0 0 6px var(--honig-15);
    }
}

/* Key-Station — stronger glow */
.vg-station--key {
    border-color: color-mix(in oklch, var(--accent) 35%, transparent);
    border-width: 2px;
    width: 40px;
    height: 40px;
}
.sp-process.vg-rail-active .vg-station--key {
    animation: vgStationFlashKey 750ms ease-out var(--vg-sd, 0s) 1 forwards;
}
@keyframes vgStationFlashKey {
    0%   {
        border-color: color-mix(in oklch, var(--accent) 25%, transparent);
        color: color-mix(in oklch, var(--text-muted) 70%, transparent);
        box-shadow: 0 2px 6px color-mix(in oklch, var(--holz) 12%, transparent);
    }
    10%  {
        border-color: var(--accent);
        color: var(--accent);
        box-shadow:
            0 4px 14px color-mix(in oklch, var(--holz) 22%, transparent),
            0 0 22px var(--honig-40);
    }
    35%  {
        border-color: color-mix(in oklch, var(--accent) 70%, transparent);
        color: var(--accent-deep);
        box-shadow:
            0 3px 10px color-mix(in oklch, var(--holz) 16%, transparent),
            0 0 14px var(--honig-25);
    }
    100% {
        border-color: color-mix(in oklch, var(--accent) 55%, transparent);
        color: var(--accent-deep);
        box-shadow:
            0 3px 10px color-mix(in oklch, var(--holz) 14%, transparent),
            0 0 12px var(--honig-25);
    }
}

/* Step-Glow synchronisiert mit Rail-Fill */
.sp-process.vg-rail-active .vg-step:nth-child(1) {
    animation: vgStepGlow 1.4s ease-out 1.0s 1 both;
}
.sp-process.vg-rail-active .vg-step:nth-child(2) {
    animation: vgStepGlow 1.4s ease-out 2.0s 1 both;
}
.sp-process.vg-rail-active .vg-step:nth-child(3) {
    animation: vgStepGlowKey 2s ease-out 3.0s 1 both;
}
.sp-process.vg-rail-active .vg-step:nth-child(4) {
    animation: vgStepGlow 1.4s ease-out 4.0s 1 both;
}

@keyframes vgStepGlow {
    0%   {
        border-color: color-mix(in oklch, var(--accent) 30%, transparent);
        box-shadow:
            var(--depth-soft),
            0 0 18px var(--honig-15);
    }
    100% {
        border-color: var(--border-soft);
        box-shadow: var(--depth-soft);
    }
}
@keyframes vgStepGlowKey {
    0%   {
        border-color: var(--accent);
        box-shadow:
            var(--depth-soft),
            0 0 26px var(--honig-40);
    }
    100% {
        border-color: color-mix(in oklch, var(--accent) 35%, transparent);
        box-shadow:
            var(--depth-soft),
            0 0 16px var(--honig-25);
    }
}

/* ── Step-Card Grid ────────────────────────────────────────────────── */
.vg-step-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
@media (max-width: 1024px) {
    .vg-step-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 540px) {
    .vg-step-grid { grid-template-columns: 1fr; }
}

/* ── Step-Card (default state) ─────────────────────────────────────── */
.vg-step {
    position: relative;
    padding: clamp(1.5rem, 2.5vw, 1.85rem);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 70%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 70%, transparent));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-soft);
    /* Keine transition-shorthand — würde sonst die .vg-reveal-el-Stagger killen.
       border-color + box-shadow werden via @keyframes vgStepGlow animiert. */
}
.vg-step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.vg-step > * { position: relative; z-index: 1; }

.vg-step h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 1.7vw, 1.4rem);
    line-height: 1.2;
    color: var(--text);
    margin: 0 0 0.7rem;
    text-wrap: balance;
}
.vg-step p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-body);
    margin: 0;
}

/* Key-Step (Faire Vergütung) — statisch hervorgehoben mit Honig-Tint */
.vg-step--key {
    border-color: color-mix(in oklch, var(--accent) 28%, transparent) !important;
    border-width: 1.5px;
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 8%, var(--bg-surface)),
        color-mix(in oklch, var(--honig) 3%, var(--bg-paper)));
    box-shadow:
        var(--depth-soft),
        0 0 16px var(--honig-25);
}

/* ── Job-Editorial-Sections (alternating) ─────────────────────────── */
.job-editorial {
    padding-block: clamp(3rem, 6vw, 5rem);
    position: relative;
}
.job-editorial-alt {
    background: linear-gradient(180deg,
        var(--bg) 0%,
        var(--bg-tint) 50%,
        var(--bg) 100%);
}

.job-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.job-grid-reverse {
    direction: rtl;
}
.job-grid-reverse > * {
    direction: ltr;
}
@media (max-width: 900px) {
    .job-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .job-grid-reverse { direction: ltr; }
}

.job-image {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    border: 1px solid var(--border-soft);
}
.job-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
}
.job-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    position: relative;
}

.job-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.job-num {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
}
.job-text h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.1;
    color: var(--text);
    margin: 0;
    text-wrap: balance;
}
.job-text h2 em {
    color: var(--accent);
    font-style: normal;
    font-weight: 400;
}
.job-lead {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-style: normal;
    line-height: 1.5;
    color: var(--text);
    margin: 0;
    text-wrap: pretty;
}

.job-block h3 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.85rem;
}
.job-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.job-block li {
    position: relative;
    padding-left: 1.5rem;
    padding-block: 0.35rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-body);
}
.job-block li::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--honig);
    box-shadow: 0 0 10px var(--honig-40);
}

.job-block-highlight {
    padding: clamp(1.25rem, 2vw, 1.5rem);
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 10%, var(--bg-surface)),
        color-mix(in oklch, var(--honig) 4%, var(--bg-surface)));
    border: 1px solid color-mix(in oklch, var(--honig) 30%, transparent);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
}
.job-block-highlight p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-body);
}

.job-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* ── Bewerbung-CTA (Final) — flächig & ruhig, mit Section-Divider ──── */
.jobs-apply {
    padding-block: clamp(5.5rem, 10vw, 9rem);
    position: relative;
}
/* Section-Divider zwischen letzter Job-Editorial und jobs-apply —
   identisches Pattern wie .footer::before und .sp-cta::before. */
.jobs-apply::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        var(--accent-25),
        transparent);
    z-index: 2;
    pointer-events: none;
}

.jobs-apply-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
    position: relative;
}

.jobs-apply-inner .label {
    display: block;
    margin-bottom: 1rem;
}
.jobs-apply-inner h2 {
    color: var(--text);
    margin: 0 0 1rem;
}
.jobs-apply-inner h2 em {
    color: var(--accent);
}
.jobs-apply-text {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    margin: 0 0 2.25rem;
    max-width: 56ch;
    margin-inline: auto;
}

.jobs-apply-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 700px) {
    .jobs-apply-grid { grid-template-columns: 1fr; }
}

.jobs-apply-card {
    padding: clamp(1.25rem, 2vw, 1.5rem) clamp(1rem, 1.5vw, 1.25rem);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 80%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 70%, transparent));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    text-align: center;
}
.jobs-apply-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 88%, white),
        var(--accent));
    color: white;
    box-shadow: 0 3px 8px var(--accent-25);
}
.jobs-apply-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.4rem;
}
.jobs-apply-value {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
    text-decoration: none;
    display: block;
}
.jobs-apply-value:hover {
    color: var(--accent);
}

.jobs-apply-meta {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.95rem;
    color: var(--text-body);
    margin: 0 0 0.75rem;
}
.jobs-apply-meta strong {
    color: var(--accent);
    font-style: normal;
    font-weight: 600;
}
.jobs-apply-footnote {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* =========================================================================
   LEGAL-PAGES (Impressum + Datenschutz)
   ========================================================================= */

.sp-legal {
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 5rem;
    max-width: 820px;
    margin: 0 auto;
}
.sp-legal h1 {
    margin-bottom: 2rem;
    color: var(--text);
}
.sp-legal h2 {
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
    margin: 2.5rem 0 0.85rem;
    color: var(--accent);
    letter-spacing: 0;
}
.sp-legal h3 {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    margin: 1.75rem 0 0.5rem;
    color: var(--text);
}
.sp-legal p {
    margin-bottom: 1rem;
    line-height: 1.65;
    color: var(--text-body);
}
.sp-legal a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.sp-legal a:hover {
    color: var(--accent-deep);
}