/* ============================================================
   WPWW Cases — Production-CSS
   Mockup: /Users/dhuettner/Downloads/Waterproof (2)/Referenzen.html
   Tokens: nutzt site_package-Tokens, fällt sonst auf Mockup-Werte zurück
   ============================================================ */

.wpww-cases {
    /* Lokale Token-Definitionen — überschreibbar via site_package */
    --case-primary:       var(--color-brand,         #05E06E);
    --case-primary-text:  var(--color-brand-text,    #05866E);
    --case-primary-ink:   var(--prim-green-ink,      #0A1F14);
    --case-bg:            var(--color-bg,            #FAFAF7);
    --case-bg-alt:        var(--prim-mint,           #F1F3EE);
    --case-surface:       var(--prim-card,           #FFFFFF);
    --case-ink:           var(--prim-black,          #0E1116);
    --case-ink-2:         var(--prim-text-body,      #1C1F26);
    --case-ink-soft:      #3A4050;
    --case-muted:         var(--prim-text-sec,       #5A6270);
    --case-danger:        var(--prim-red,            #E5484D);
    --case-line:          rgba(10, 10, 10, .12);
    --case-line-soft:     rgba(10, 10, 10, .08);
    --case-line-dashed:   rgba(10, 10, 10, .15);

    --case-font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --case-font-sans:     Inter, system-ui, -apple-system, sans-serif;
    --case-font-display:  'Space Grotesk', sans-serif;

    color: var(--case-ink-2);
    font-family: var(--case-font-mono);
    line-height: 1.6;
}

/* ============================================================
   SECTION-LABEL (// Präfix-Eyebrow)
   ============================================================ */
.wpww-cases-section-lbl {
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-muted);
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wpww-cases-section-lbl::before {
    content: "//";
    color: var(--case-primary-text);
}

/* ============================================================
   HERO-SECTION
   ============================================================ */
.wpww-cases-hero {
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--case-line);
    background: var(--case-bg);
}

.wpww-cases-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--case-font-mono);
    font-size: 11px;
    padding: 6px 12px;
    border: 1px solid var(--case-line);
    color: var(--case-ink-2);
    background: rgba(10, 10, 10, .02);
    margin-bottom: 32px;
    letter-spacing: .05em;
}

.wpww-cases-hero__tag-dot {
    width: 6px;
    height: 6px;
    background: var(--case-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(5, 224, 110, .25);
    display: inline-block;
}

.wpww-cases-hero__h1 {
    font-family: var(--case-font-display);
    font-size: clamp(48px, 7vw, 96px);
    line-height: .96;
    letter-spacing: -.04em;
    font-weight: 500;
    color: var(--case-ink);
    margin-bottom: 32px;
    max-width: 1100px;
}

.wpww-cases-hero__hl {
    color: var(--case-primary-text);
}

.wpww-cases-hero__small {
    display: block;
    font-size: .32em;
    color: var(--case-muted);
    font-family: var(--case-font-mono);
    letter-spacing: .05em;
    font-weight: 500;
    margin-bottom: 18px;
    line-height: 1.3;
}

.wpww-cases-hero__lead {
    font-size: 18px;
    color: var(--case-ink-soft);
    max-width: 780px;
    line-height: 1.65;
    font-family: var(--case-font-sans);
    margin-bottom: 24px;
}

.wpww-cases-hero__lead strong {
    color: var(--case-ink);
    font-weight: 600;
}

.wpww-cases-hero__meta {
    display: flex;
    gap: 32px;
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-muted);
    letter-spacing: .18em;
    text-transform: uppercase;
    padding-top: 24px;
    border-top: 1px dashed var(--case-line-dashed);
    flex-wrap: wrap;
}

.wpww-cases-hero__meta span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wpww-cases-hero__meta b {
    color: var(--case-ink);
    font-weight: 700;
    letter-spacing: .05em;
    font-size: 14px;
}

/* ============================================================
   DISCRETION-SECTION
   ============================================================ */
.wpww-cases-discretion {
    padding: 80px 0;
    border-bottom: 1px solid var(--case-line);
    background: rgba(10, 10, 10, .02);
}

.wpww-cases-discretion .wpww-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
    max-width: 1200px;
}

.wpww-cases-discretion h2 {
    font-family: var(--case-font-display);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--case-ink);
    margin-top: 12px;
}

.wpww-cases-discretion h2 em {
    font-style: normal;
    color: var(--case-primary-text);
    font-weight: 600;
}

.wpww-cases-discretion__body p {
    color: var(--case-ink-soft);
    font-size: 15.5px;
    font-family: var(--case-font-sans);
    line-height: 1.7;
    margin-bottom: 18px;
}

.wpww-cases-discretion__body p strong {
    color: var(--case-ink);
    font-weight: 600;
}

.wpww-cases-discretion__body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .wpww-cases-discretion .wpww-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ============================================================
   LIST-HEAD (Cases-Section-Headline)
   ============================================================ */
.wpww-cases-list {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
}

.wpww-cases-list__head {
    max-width: 820px;
    margin-bottom: 48px;
}

.wpww-cases-list__head h2 {
    font-family: var(--case-font-display);
    font-size: clamp(36px, 4.6vw, 56px);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--case-ink);
    margin-top: 12px;
}

.wpww-cases-list__head p {
    color: var(--case-ink-soft);
    font-size: 15.5px;
    font-family: var(--case-font-sans);
    line-height: 1.7;
    margin-top: 16px;
}

/* ============================================================
   PRINCIPLES-SECTION
   ============================================================ */
.wpww-cases-principles {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
    background: rgba(10, 10, 10, .02);
}

.wpww-cases-principles__head {
    max-width: 820px;
    margin-bottom: 48px;
}

.wpww-cases-principles__head h2 {
    font-family: var(--case-font-display);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--case-ink);
    margin-top: 12px;
}

.wpww-cases-principles__head p {
    color: var(--case-ink-soft);
    font-size: 15.5px;
    font-family: var(--case-font-sans);
    line-height: 1.7;
    margin-top: 14px;
}

.wpww-cases-principles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--case-line);
    border: 1px solid var(--case-line);
}

.wpww-cases-principle {
    background: var(--case-surface);
    padding: 32px;
}

.wpww-cases-principle__num {
    font-family: var(--case-font-display);
    font-size: 48px;
    font-weight: 600;
    color: var(--case-primary-text);
    letter-spacing: -.025em;
    line-height: 1;
    margin-bottom: 18px;
}

.wpww-cases-principle h3 {
    font-family: var(--case-font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--case-ink);
    letter-spacing: -.02em;
    line-height: 1.25;
    margin-bottom: 14px;
}

.wpww-cases-principle p {
    font-family: var(--case-font-sans);
    font-size: 14px;
    color: var(--case-ink-soft);
    line-height: 1.65;
}

.wpww-cases-principle p strong {
    color: var(--case-ink);
    font-weight: 600;
}

@media (max-width: 900px) {
    .wpww-cases-principles__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   AUTHOR-BOX
   ============================================================ */
.wpww-cases-author {
    padding: 80px 0;
    border-bottom: 1px solid var(--case-line);
    background: var(--case-surface);
}

.wpww-cases-author .wpww-wrap {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 40px;
    align-items: start;
    max-width: 1100px;
}

.wpww-cases-author__photo {
    width: 160px;
    height: 160px;
    border: 1px solid var(--case-line);
    background: var(--case-bg);
    display: grid;
    place-items: center;
}

.wpww-cases-author__initials {
    font-family: var(--case-font-display);
    font-size: 56px;
    font-weight: 600;
    color: var(--case-primary-text);
    letter-spacing: -.04em;
}

.wpww-cases-author__body h3 {
    font-family: var(--case-font-display);
    font-size: 28px;
    font-weight: 500;
    color: var(--case-ink);
    letter-spacing: -.025em;
    margin-bottom: 6px;
}

.wpww-cases-author__role {
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-primary-text);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 16px;
}

.wpww-cases-author__body p {
    font-family: var(--case-font-sans);
    font-size: 14.5px;
    color: var(--case-ink-soft);
    line-height: 1.65;
    margin-bottom: 14px;
    max-width: 680px;
}

.wpww-cases-author__meta {
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-muted);
    letter-spacing: .05em;
}

.wpww-cases-author__links {
    display: flex;
    gap: 16px;
    margin-top: 18px;
    font-family: var(--case-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    flex-wrap: wrap;
}

.wpww-cases-author__links a {
    color: var(--case-primary-text);
    font-weight: 700;
    border-bottom: 1px solid var(--case-primary);
    text-decoration: none;
    padding-bottom: 1px;
}

@media (max-width: 900px) {
    .wpww-cases-author .wpww-wrap {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .wpww-cases-author__photo { margin: 0 auto; }
    .wpww-cases-author__links { justify-content: center; }
}

/* ============================================================
   PAGE-CTA (vor Footer-CTA der Site)
   ============================================================ */
.wpww-cases-page-cta {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
    text-align: center;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 224, 110, .09) 100%);
}

.wpww-cases-page-cta .wpww-cases-section-lbl {
    justify-content: center;
}

.wpww-cases-page-cta h2 {
    font-family: var(--case-font-display);
    font-size: clamp(38px, 5.5vw, 72px);
    line-height: .98;
    letter-spacing: -.035em;
    font-weight: 500;
    color: var(--case-ink);
    margin-bottom: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.wpww-cases-page-cta__hl {
    color: var(--case-primary-text);
}

.wpww-cases-page-cta p {
    color: var(--case-ink-soft);
    max-width: 620px;
    margin: 0 auto 32px;
    font-family: var(--case-font-sans);
    font-size: 16px;
    line-height: 1.65;
}

.wpww-cases-page-cta__row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.wpww-cases-page-cta__meta {
    margin-top: 32px;
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-muted);
    letter-spacing: .2em;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.wpww-btn--ghost {
    color: var(--case-ink);
    border: 1px solid rgba(10, 10, 10, .25);
    background: transparent;
}

.wpww-btn--ghost::before { content: ""; }

/* ============================================================
   FILTER v2 — Persona-Tabs + Console + Gauge (Mockup-Sync)
   ============================================================ */

.wpww-filter-block {
    margin-bottom: 40px;
}

/* Persona-Tabs als Hauptauswahl */
.wpww-persona-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--case-ink);
    overflow-x: auto;
    scrollbar-width: none;
}
.wpww-persona-tabs::-webkit-scrollbar { display: none; }

.wpww-persona-tab {
    position: relative;
    padding: 18px 22px;
    font-family: var(--case-font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--case-muted);
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    white-space: nowrap;
    transition: color .15s;
}

.wpww-persona-tab:hover { color: var(--case-ink); }

.wpww-persona-tab .wpww-pt-icon {
    font-family: var(--case-font-display);
    font-size: 11px;
    color: var(--case-muted);
    font-weight: 700;
    letter-spacing: .04em;
}

.wpww-persona-tab .wpww-pt-label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: .04em;
    font-size: 12px;
}

.wpww-persona-tab .wpww-pt-count {
    font-family: var(--case-font-display);
    font-size: 10px;
    color: var(--case-muted);
    font-weight: 600;
    background: var(--case-bg-alt);
    padding: 2px 6px;
    letter-spacing: .04em;
    line-height: 1;
}

.wpww-persona-tab.is-active,
.wpww-persona-tab[aria-selected="true"] {
    color: var(--case-ink);
    font-weight: 700;
}

.wpww-persona-tab.is-active::after,
.wpww-persona-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 4px;
    background: var(--case-primary);
}

.wpww-persona-tab.is-active .wpww-pt-count,
.wpww-persona-tab[aria-selected="true"] .wpww-pt-count {
    background: var(--case-primary);
    color: var(--case-primary-ink);
}

/* CONSOLE */
.wpww-console {
    display: grid;
    grid-template-columns: 1fr 280px;
    background: var(--case-surface);
    border: 1px solid var(--case-ink);
    box-shadow: 8px 8px 0 var(--case-bg-alt);
    margin-bottom: 24px;
}

.wpww-console-main {
    display: grid;
    grid-template-rows: auto auto auto;
}

.wpww-console-row {
    padding: 18px 22px;
    border-bottom: 1px dashed var(--case-line-dashed);
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    align-items: center;
}

.wpww-console-row:last-child { border-bottom: 0; }

.wpww-console-row-label-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wpww-console-row-label {
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-ink);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wpww-console-row-label::before {
    content: "▸";
    color: var(--case-primary-text);
    font-size: 9px;
}

.wpww-console-row-label-wrap small {
    font-family: var(--case-font-mono);
    font-weight: 400;
    color: var(--case-muted);
    letter-spacing: .05em;
    text-transform: none;
    font-size: 9.5px;
    margin-top: 2px;
    margin-left: 14px;
}

/* CHIPS (multi/checkbox) */
.wpww-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wpww-chip {
    position: relative;
    cursor: pointer;
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-ink);
    padding: 7px 11px 7px 22px;
    border: 1px solid var(--case-line);
    background: var(--case-bg);
    letter-spacing: .04em;
    line-height: 1;
    user-select: none;
    transition: all .12s;
    font-weight: 500;
}

.wpww-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wpww-chip::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border: 1px solid var(--case-line);
    background: var(--case-surface);
    transition: all .12s;
}

.wpww-chip:hover { border-color: var(--case-ink-soft); }
.wpww-chip:hover::before { border-color: var(--case-ink-soft); }

.wpww-chip:has(input:checked) {
    background: var(--case-primary);
    border-color: var(--case-ink);
    color: var(--case-primary-ink);
    font-weight: 700;
}

.wpww-chip:has(input:checked)::before {
    background: var(--case-ink);
    border-color: var(--case-ink);
}

.wpww-chip:has(input:checked)::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 3px;
    height: 6px;
    border-right: 1.5px solid var(--case-primary);
    border-bottom: 1.5px solid var(--case-primary);
    transform: translateY(-70%) rotate(45deg);
}

/* PILLS (single/radio segmented) */
.wpww-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--case-line);
    background: var(--case-bg);
    padding: 3px;
}

.wpww-pill {
    cursor: pointer;
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-muted);
    padding: 7px 12px;
    letter-spacing: .04em;
    line-height: 1;
    font-weight: 500;
    position: relative;
    transition: all .12s;
}

.wpww-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wpww-pill:hover { color: var(--case-ink); }

.wpww-pill:has(input:checked) {
    background: var(--case-ink);
    color: var(--case-bg);
    font-weight: 700;
}

/* GAUGE — dunkle Result-Card rechts */
.wpww-gauge {
    background: var(--case-ink);
    color: var(--case-bg);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid var(--case-ink);
    position: relative;
    overflow: hidden;
}

.wpww-gauge::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
}

.wpww-gauge-head {
    font-family: var(--case-font-mono);
    font-size: 9.5px;
    color: rgba(255, 255, 255, .55);
    letter-spacing: .22em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.wpww-gauge-head-dot {
    width: 7px;
    height: 7px;
    background: var(--case-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(5, 224, 110, .25);
    animation: wpww-pulse 2s infinite;
}

@keyframes wpww-pulse {
    0%, 100% { opacity: .8; }
    50%      { opacity: 1; }
}

.wpww-gauge-num-wrap {
    position: relative;
    z-index: 1;
    margin: 18px 0 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--case-font-display);
    line-height: 1;
}

.wpww-gauge-num {
    font-size: 80px;
    font-weight: 600;
    color: var(--case-primary);
    letter-spacing: -.04em;
    line-height: .85;
    font-variant-numeric: tabular-nums;
    transition: color .2s;
}

.wpww-gauge-num.is-zero { color: var(--case-danger); }

.wpww-gauge-of {
    font-size: 18px;
    color: rgba(255, 255, 255, .45);
    font-weight: 500;
    letter-spacing: -.01em;
}

.wpww-gauge-of em {
    font-style: normal;
    color: rgba(255, 255, 255, .7);
}

.wpww-gauge-bar {
    position: relative;
    z-index: 1;
    height: 6px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
    margin-bottom: 14px;
}

.wpww-gauge-bar-fill {
    height: 100%;
    background: var(--case-primary);
    width: 100%;
    transition: width .3s cubic-bezier(.2, .8, .2, 1);
}

.wpww-gauge-foot {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, .15);
}

.wpww-gauge-status {
    font-family: var(--case-font-mono);
    font-size: 9px;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.wpww-gauge-status b {
    color: var(--case-primary);
    font-weight: 700;
    letter-spacing: .05em;
    margin-right: 4px;
}

@media (max-width: 900px) {
    .wpww-console { grid-template-columns: 1fr; }
    .wpww-console-row { grid-template-columns: 1fr; }
    .wpww-gauge { border-left: 0; border-top: 1px solid var(--case-ink); }
}

/* ============================================================
   FILTER-BAR (alt — bleibt für htmx-Reload-Path falls aktiv)
   ============================================================ */
.wpww-cases-filter {
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    box-shadow: 0 8px 24px rgba(10, 10, 10, .04);
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    align-items: stretch;
}

.wpww-cases-filter__fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--case-line);
}

.wpww-cases-filter__group {
    background: var(--case-surface);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 0;
}

.wpww-cases-filter__group legend,
.wpww-cases-filter__group .wpww-cases-filter__label {
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-muted);
    letter-spacing: .2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    padding: 0;
}

.wpww-cases-filter__group legend::before,
.wpww-cases-filter__group .wpww-cases-filter__label::before {
    content: "//";
    color: var(--case-primary-text);
}

.wpww-cases-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wpww-cases-filter__chip {
    position: relative;
    cursor: pointer;
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-ink-2);
    padding: 6px 11px;
    border: 1px solid var(--case-line);
    background: var(--case-bg);
    letter-spacing: .04em;
    transition: all .12s;
    user-select: none;
    line-height: 1;
}

.wpww-cases-filter__chip:hover {
    border-color: var(--case-ink-soft);
    color: var(--case-ink);
}

.wpww-cases-filter__chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wpww-cases-filter__chip:has(input:checked) {
    background: var(--case-primary);
    border-color: var(--case-primary-text);
    color: var(--case-primary-ink);
    font-weight: 700;
}

.wpww-cases-filter__chip:has(input:checked)::before {
    content: "✓ ";
    color: var(--case-primary-ink);
    margin-right: 2px;
}

.wpww-cases-filter__select {
    font-family: var(--case-font-mono);
    font-size: 11.5px;
    color: var(--case-ink);
    padding: 8px 12px;
    border: 1px solid var(--case-line);
    background-color: var(--case-bg);
    width: 100%;
    letter-spacing: .04em;
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--case-ink-soft) 50%),
        linear-gradient(135deg, var(--case-ink-soft) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.wpww-cases-filter__select:focus {
    outline: none;
    border-color: var(--case-primary-text);
}

.wpww-cases-filter__status {
    background: var(--case-bg);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    border-left: 1px solid var(--case-line);
    min-width: 200px;
}

.wpww-cases-filter__count {
    font-family: var(--case-font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--case-primary-text);
    letter-spacing: -.02em;
    line-height: 1;
}

.wpww-cases-filter__count--zero {
    color: var(--case-danger);
}

.wpww-cases-filter__count-label {
    font-family: var(--case-font-mono);
    font-size: 9.5px;
    color: var(--case-muted);
    letter-spacing: .2em;
    text-transform: uppercase;
}

.wpww-cases-filter__reset {
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-ink-soft);
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 6px 0 0;
    text-align: left;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    display: none;
}

.wpww-cases-filter__reset.is-active {
    display: inline-block;
}

.wpww-cases-filter__reset:hover {
    color: var(--case-primary-text);
}

.wpww-cases-loading {
    display: none;
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-primary-text);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.wpww-cases-loading.htmx-request {
    display: inline-block;
    animation: wpww-cases-pulse 1s ease-in-out infinite;
}

@keyframes wpww-cases-pulse {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

/* ============================================================
   GRID + COUNT-MESSAGE
   ============================================================ */
.wpww-cases-list {
    padding: 80px 0;
}

.wpww-cases-count {
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-muted);
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.wpww-cases-grid {
    /* Wird von Cards genutzt */
}

.wpww-cases-grid__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wpww-cases-grid__list > li {
    list-style: none !important;
    padding: 0 !important;
}

.wpww-cases-grid__list > li::before {
    content: none !important;
    display: none !important;
}

/* ============================================================
   CASE-CARDS (= .case-card im Mockup)
   ============================================================ */
.wpww-cases-card {
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    box-shadow: 0 12px 32px rgba(10, 10, 10, .04);
    transition: transform .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    list-style: none;
}

.wpww-cases-card:hover {
    transform: translate(-1px, -3px);
    box-shadow: 0 24px 56px rgba(10, 10, 10, .12);
}

.wpww-cases-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.wpww-cases-card__num-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--case-line);
    border-bottom: 1px solid var(--case-line);
}

.wpww-cases-card__num {
    background: var(--case-bg);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wpww-cases-card__num em {
    font-family: var(--case-font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--case-primary-text);
    font-style: normal;
    letter-spacing: -.02em;
    line-height: 1;
}

.wpww-cases-card__num em.is-warn {
    color: var(--case-danger);
}

.wpww-cases-card__num small {
    font-family: var(--case-font-mono);
    font-size: 9px;
    color: var(--case-muted);
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-top: 2px;
}

.wpww-cases-card__body {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wpww-cases-card__persona {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--case-font-mono);
    font-size: 9.5px;
    color: var(--case-ink-soft);
    background: var(--case-bg);
    border: 1px solid var(--case-line);
    padding: 3px 8px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
}

.wpww-cases-card__persona::before {
    content: "▸ ";
    color: var(--case-primary-text);
}

/* Tech-Stack-Label auf der Card (ersetzt die frühere Persona-Eyebrow). */
.wpww-cases-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-self: flex-start;
}

.wpww-cases-card__tech-item {
    font-family: var(--case-font-mono);
    font-size: 9.5px;
    color: var(--case-ink-soft);
    background: var(--case-bg);
    border: 1px solid var(--case-line);
    padding: 3px 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
}

.wpww-cases-card__tag {
    font-family: var(--case-font-mono);
    font-size: 10.5px;
    color: var(--case-primary-text);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
}

.wpww-cases-card__title {
    font-family: var(--case-font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--case-ink);
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
}

.wpww-cases-card__lead {
    font-family: var(--case-font-sans);
    font-size: 14.5px;
    color: var(--case-ink-soft);
    line-height: 1.65;
    flex: 1;
    margin: 0;
}

.wpww-cases-card__lead strong {
    color: var(--case-ink);
    font-weight: 600;
}

.wpww-cases-card__meta {
    padding: 18px 32px;
    border-top: 1px dashed var(--case-line-dashed);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--case-font-mono);
    font-size: 10.5px;
    color: var(--case-muted);
    letter-spacing: .15em;
    text-transform: uppercase;
    background: rgba(5, 224, 110, .03);
}

.wpww-cases-card__arrow {
    color: var(--case-primary-text);
    font-weight: 700;
}

/* Empty-State */
.wpww-cases-empty {
    grid-column: 1 / -1;
    background: var(--case-surface);
    border: 1px dashed var(--case-line-dashed);
    padding: 64px 32px;
    text-align: center;
    font-family: var(--case-font-mono);
    font-size: 13px;
    color: var(--case-muted);
    letter-spacing: .05em;
}

.wpww-cases-empty b {
    display: block;
    font-family: var(--case-font-display);
    font-size: 24px;
    color: var(--case-ink);
    font-weight: 500;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .wpww-cases-filter         { grid-template-columns: 1fr; }
    .wpww-cases-filter__fields { grid-template-columns: 1fr 1fr; }
    .wpww-cases-filter__status {
        border-left: 0;
        border-top: 1px solid var(--case-line);
    }
    .wpww-cases-grid__list     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .wpww-cases-filter__fields { grid-template-columns: 1fr; }
    .wpww-cases-card__num-bar  { grid-template-columns: 1fr; }
    .wpww-cases-grid__list     { grid-template-columns: 1fr; }
}

/* ============================================================
   GLOBAL CONTAINER — Cases-Liste UND Detail-Page
   ============================================================ */
.wpww-cases .wpww-wrap,
.wpww-case .wpww-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
    width: 100%;
}

/* ============================================================
   DETAIL-PAGE — komplett aus Source-Mockup-CSS portiert
   (Case 01-09 HTML-Files, /<style>-Block 1:1 mit BEM-Prefix)
   ============================================================ */

/* HERO */
.wpww-case__hero {
    padding: 80px 0 100px;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--case-line);
}

.wpww-case__hero-image {
    margin-top: 40px;
}

/* KPI-Card mit Eyebrow */
.wpww-case__kpi-card {
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    padding: 28px;
    position: relative;
    box-shadow: 0 1px 0 rgba(10, 10, 10, .02), 0 12px 32px rgba(10, 10, 10, .04);
}

.wpww-case__kpi-card::before {
    content: "// diagnose_metrics";
    position: absolute;
    top: -8px;
    left: 18px;
    background: var(--case-bg);
    padding: 0 10px;
    font-size: 10px;
    color: var(--case-primary-text);
    letter-spacing: .2em;
    font-family: var(--case-font-mono);
    font-weight: 700;
}

.wpww-case__kpi-card-title {
    font-family: var(--case-font-mono);
    font-size: 10.5px;
    color: var(--case-muted);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 18px;
}

.wpww-case__kpi-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wpww-case__kpi-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--case-line-soft);
}

.wpww-case__kpi-list li:last-child {
    border-bottom: 0;
}

.wpww-case__kpi-lbl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--case-font-sans);
    font-size: 13.5px;
    color: var(--case-ink-soft);
    line-height: 1.4;
}

.wpww-case__kpi-lbl-txt {
    flex: 1;
}

.wpww-case__kpi-lbl-txt small {
    display: block;
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 2px;
}

.wpww-case__kpi-v {
    font-family: var(--case-font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--case-ink);
    letter-spacing: -.025em;
    line-height: 1;
}

.wpww-case__kpi-v em {
    color: var(--case-primary-text);
    font-style: normal;
}

.wpww-case__kpi-src {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--case-line-dashed);
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* PROOF STRIP */
.wpww-case__proof {
    padding: 32px 0;
    border-bottom: 1px solid var(--case-line);
    background: rgba(10, 10, 10, .02);
}

.wpww-case__proof-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--case-line);
}

.wpww-case__proof-item {
    background: var(--case-bg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wpww-case__proof-num {
    font-family: var(--case-font-display);
    font-size: 36px;
    font-weight: 600;
    color: var(--case-ink);
    letter-spacing: -.03em;
    line-height: 1;
}

.wpww-case__proof-num em {
    color: var(--case-primary-text);
    font-style: normal;
}

.wpww-case__proof-num span {
    font-size: 16px;
    color: var(--case-muted);
    font-weight: 500;
    margin-left: 2px;
}

.wpww-case__proof-lbl {
    font-size: 10px;
    color: var(--case-muted);
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* SITUATION */
.wpww-case__situation {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
    background: transparent;
}

.wpww-case__situation-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: end;
    margin-bottom: 48px;
}

.wpww-case__situation-head h2 {
    font-family: var(--case-font-display);
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--case-ink);
}

.wpww-case__situation-head h2 em {
    font-style: normal;
    color: var(--case-primary-text);
    font-weight: 600;
}

.wpww-case__situation-lead,
.wpww-case__situation-head p {
    color: var(--case-ink-soft);
    font-size: 15.5px;
    font-family: var(--case-font-sans);
    line-height: 1.7;
}

.wpww-case__sit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--case-line);
    border: 1px solid var(--case-line);
    margin-top: 0;
}

.wpww-case__sit-col {
    background: var(--case-surface);
    padding: 32px;
}

.wpww-case__sit-col h3 {
    font-family: var(--case-font-mono);
    font-size: 10.5px;
    color: var(--case-muted);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wpww-case__sit-bad {
    color: var(--case-danger) !important;
}

.wpww-case__sit-good {
    color: var(--case-primary-text) !important;
}

.wpww-case__sit-col p {
    font-family: var(--case-font-sans);
    font-size: 14.5px;
    color: var(--case-ink-soft);
    line-height: 1.7;
    margin-bottom: 14px;
}

.wpww-case__sit-col p:last-child { margin-bottom: 0; }
.wpww-case__sit-col p strong { color: var(--case-ink); font-weight: 600; }

/* DECISION */
.wpww-case__decision {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
    background: rgba(10, 10, 10, .02);
}

.wpww-case__decision-head {
    max-width: 820px;
    margin-bottom: 48px;
}

.wpww-case__decision-head h2 {
    font-family: var(--case-font-display);
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--case-ink);
    margin-top: 12px;
}

.wpww-case__decision-head h2 em {
    font-style: normal;
    color: var(--case-primary-text);
    font-weight: 600;
}

.wpww-case__decision-head p {
    color: var(--case-ink-soft);
    font-size: 15.5px;
    font-family: var(--case-font-sans);
    line-height: 1.7;
    margin-top: 20px;
}

.wpww-case__decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--case-line);
    border: 1px solid var(--case-line);
}

.wpww-case__opt {
    background: var(--case-surface);
    padding: 36px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.wpww-case__opt--chosen {
    background: rgba(5, 224, 110, .05);
    border-left: 1px solid var(--case-primary);
    border-right: 1px solid var(--case-primary);
    box-shadow: none;
}

.wpww-case__opt--chosen::before {
    content: "▸ unsere wahl";
    position: absolute;
    top: -9px;
    left: 20px;
    background: var(--case-primary);
    color: #000;
    padding: 2px 10px;
    font-family: var(--case-font-mono);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
}

.wpww-case__opt-icon {
    width: 44px;
    height: 44px;
    border: 1px solid var(--case-line);
    display: grid;
    place-items: center;
    color: var(--case-ink-soft);
    margin-bottom: 18px;
    background: var(--case-bg);
    font-family: var(--case-font-display);
    font-size: 20px;
    font-weight: 600;
}

.wpww-case__opt--chosen .wpww-case__opt-icon {
    color: var(--case-primary-text);
    border-color: var(--case-primary);
    background: rgba(5, 224, 110, .08);
}

.wpww-case__opt-lbl {
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-muted);
    letter-spacing: .22em;
    margin-bottom: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.wpww-case__opt h3 {
    font-family: var(--case-font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--case-ink);
    letter-spacing: -.02em;
    margin-bottom: 12px;
    line-height: 1.2;
}

.wpww-case__opt > div > p,
.wpww-case__opt > p {
    font-family: var(--case-font-sans);
    font-size: 13.5px;
    color: var(--case-ink-soft);
    line-height: 1.65;
    margin-bottom: 18px;
}

.wpww-case__opt-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px dashed var(--case-line-dashed);
}

.wpww-case__opt-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    font-family: var(--case-font-mono);
    font-size: 11px;
    align-items: start;
}

.wpww-case__opt-k {
    color: var(--case-muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

.wpww-case__opt-v--neutral { color: var(--case-ink-2); font-family: var(--case-font-sans); line-height: 1.5; }
.wpww-case__opt-v--no  { color: var(--case-danger); font-family: var(--case-font-sans); line-height: 1.5; }
.wpww-case__opt-v--yes { color: var(--case-primary-text); font-weight: 600; font-family: var(--case-font-sans); line-height: 1.5; }

/* TIMELINE */
.wpww-case__timeline {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
}

.wpww-case__tl-head {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 72px;
    align-items: start;
    margin-bottom: 40px;
}

.wpww-case__tl-head h2 {
    font-family: var(--case-font-display);
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--case-ink);
    margin-top: 12px;
}

.wpww-case__tl-head h2 em {
    font-style: normal;
    color: var(--case-primary-text);
    font-weight: 600;
}

.wpww-case__tl-sub {
    color: var(--case-ink-soft);
    font-family: var(--case-font-sans);
    font-size: 15.5px;
    line-height: 1.7;
}

.wpww-case__tl-sub strong { color: var(--case-ink); }

.wpww-case__tl-list {
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    box-shadow: 0 12px 32px rgba(10, 10, 10, .04);
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wpww-case__tl-list > li,
.wpww-case__tl-row {
    display: grid !important;
    grid-template-columns: 80px 220px 1fr auto !important;
    gap: 24px !important;
    padding: 24px 28px !important;
    border-bottom: 1px solid var(--case-line-soft) !important;
    align-items: start !important;
    background: var(--case-surface) !important;
    list-style: none !important;
    margin: 0 !important;
}

.wpww-case__tl-list > li:last-child,
.wpww-case__tl-row:last-child { border-bottom: 0 !important; }

.wpww-case__tl-n {
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-primary-text);
    letter-spacing: .15em;
    font-weight: 700;
    padding-top: 3px;
}

.wpww-case__tl-t {
    font-family: var(--case-font-display);
    font-size: 18px;
    color: var(--case-ink);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0;
}

.wpww-case__tl-d {
    font-family: var(--case-font-sans);
    font-size: 13.5px;
    color: var(--case-ink-soft);
    line-height: 1.6;
}

.wpww-case__tl-d strong { color: var(--case-ink); font-weight: 600; }

.wpww-case__tl-day {
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-muted);
    letter-spacing: .15em;
    text-transform: uppercase;
    padding-top: 5px;
    white-space: nowrap;
}

/* HYPOTHESEN-TABELLE */
.wpww-case__hypotheses {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
}

.wpww-case__hyp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    box-shadow: 0 12px 32px rgba(10, 10, 10, .04);
    font-family: var(--case-font-sans);
    font-size: 13.5px;
    margin-top: 32px;
}

.wpww-case__hyp-table th {
    background: rgba(10, 10, 10, .04);
    padding: 14px 18px;
    text-align: left;
    font-family: var(--case-font-mono);
    font-size: 10.5px;
    color: var(--case-muted);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid var(--case-line);
}

.wpww-case__hyp-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--case-line-soft);
    color: var(--case-ink-soft);
    vertical-align: top;
}

.wpww-case__hyp-table tr:last-child td { border-bottom: 0; }
.wpww-case__hyp-table td strong { color: var(--case-ink); }

.wpww-case__hyp-row--confirmed td:nth-child(2) {
    color: var(--case-primary-text);
    font-weight: 700;
    font-family: var(--case-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.wpww-case__hyp-row--refuted td:nth-child(2) {
    color: var(--case-muted);
    font-family: var(--case-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* STACK / METHOD */
.wpww-case__method {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
}

.wpww-case__stack-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--case-line);
    border: 1px solid var(--case-line);
    list-style: none !important;
    padding: 0 !important;
    margin: 32px 0 0 !important;
}

.wpww-case__stack-list > li,
.wpww-case__stack-item {
    background: var(--case-surface) !important;
    padding: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    list-style: none !important;
    margin: 0 !important;
}

.wpww-case__stack-name {
    font-family: var(--case-font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--case-ink);
    letter-spacing: -.015em;
    line-height: 1.25;
}

.wpww-case__stack-purpose {
    font-family: var(--case-font-sans);
    font-size: 13.5px;
    color: var(--case-ink-soft);
    line-height: 1.55;
}

/* QUOTE */
.wpww-case__quote {
    padding: 100px 0;
    border-bottom: 1px solid var(--case-line);
}

.wpww-case__quote blockquote {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    padding: 56px 64px;
    position: relative;
    box-shadow: 0 24px 48px rgba(10, 10, 10, .06);
}

.wpww-case__quote blockquote::before {
    content: "// kunden_stimme";
    position: absolute;
    top: -9px;
    left: 32px;
    background: var(--case-bg);
    padding: 0 12px;
    font-size: 10px;
    color: var(--case-primary-text);
    letter-spacing: .2em;
    font-family: var(--case-font-mono);
    font-weight: 700;
}

.wpww-case__quote blockquote::after {
    content: "\201E";
    font-family: var(--case-font-display);
    font-size: 120px;
    line-height: .5;
    color: var(--case-primary);
    font-weight: 600;
    display: block;
    position: absolute;
    top: 24px;
    left: 24px;
}

.wpww-case__quote p {
    font-family: var(--case-font-display);
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.3;
    color: var(--case-ink);
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0 0 32px;
}

.wpww-case__quote footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px dashed var(--case-line-dashed);
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--case-font-sans);
    font-size: 13.5px;
    color: var(--case-ink-soft);
}

.wpww-case__quote cite {
    display: block;
    color: var(--case-ink);
    font-style: normal;
    font-weight: 600;
    font-size: 14.5px;
    margin-bottom: 2px;
}

/* LESSONS */
.wpww-case__lessons {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
}

.wpww-case__lesson-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--case-line);
    border: 1px solid var(--case-line);
    margin-top: 48px;
    list-style: none !important;
    padding: 0 !important;
}

.wpww-case__lesson-list > li {
    background: var(--case-surface) !important;
    padding: 32px !important;
    list-style: none !important;
    margin: 0 !important;
}

.wpww-case__lesson-num {
    font-family: var(--case-font-display);
    font-size: 48px;
    font-weight: 600;
    color: var(--case-primary-text);
    letter-spacing: -.025em;
    line-height: 1;
    margin-bottom: 18px;
    display: block;
}

/* FAQ */
.wpww-case__faq {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
    background: rgba(10, 10, 10, .02);
}

.wpww-case__faq-list {
    max-width: 1000px;
    margin: 32px auto 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--case-line);
    border: 1px solid var(--case-line);
    box-shadow: 0 12px 32px rgba(10, 10, 10, .04);
}

.wpww-case__faq-item {
    background: var(--case-surface);
    padding: 0;
}

.wpww-case__faq-item summary {
    cursor: pointer;
    padding: 22px 28px;
    font-family: var(--case-font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--case-ink);
    letter-spacing: -.015em;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    list-style: none;
}

.wpww-case__faq-item summary::-webkit-details-marker { display: none; }

.wpww-case__faq-item summary::after {
    content: "+";
    font-family: var(--case-font-mono);
    font-size: 24px;
    color: var(--case-primary-text);
    font-weight: 400;
    transition: transform .2s;
}

.wpww-case__faq-item[open] summary::after { content: "−"; }

.wpww-case__faq-answer {
    padding: 0 28px 24px;
    font-family: var(--case-font-sans);
    font-size: 14.5px;
    color: var(--case-ink-soft);
    line-height: 1.7;
}

.wpww-case__faq-answer p {
    margin-bottom: 12px;
}

.wpww-case__faq-answer p:last-child { margin-bottom: 0; }

/* RELATED */
.wpww-case__related {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
    background: rgba(10, 10, 10, .02);
}

.wpww-case__related h2 {
    font-family: var(--case-font-display);
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.05;
    letter-spacing: -.025em;
    font-weight: 500;
    color: var(--case-ink);
    margin-bottom: 32px;
}

.wpww-case__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    list-style: none !important;
    padding: 0 !important;
}

.wpww-case__related-grid > li,
.wpww-case__related-card {
    background: var(--case-surface) !important;
    border: 1px solid var(--case-line) !important;
    box-shadow: 0 12px 32px rgba(10, 10, 10, .04) !important;
    transition: transform .15s, box-shadow .15s !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wpww-case__related-card a {
    padding: 32px !important;
    display: block !important;
    color: inherit;
    text-decoration: none;
}

.wpww-case__related-card:hover {
    transform: translate(-1px, -2px) !important;
    box-shadow: 0 20px 48px rgba(10, 10, 10, .1) !important;
}

.wpww-case__related-card h3 {
    font-family: var(--case-font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--case-ink);
    letter-spacing: -.02em;
    line-height: 1.25;
    margin-bottom: 14px;
}

.wpww-case__related-card p {
    font-family: var(--case-font-sans);
    font-size: 13.5px;
    color: var(--case-ink-soft);
    line-height: 1.6;
}

/* CTA-BLOCK in Detail */
.wpww-case__cta-block {
    padding: 120px 0;
    border-bottom: 1px solid var(--case-line);
    text-align: center;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 224, 110, .09) 100%);
}

.wpww-case__cta-block h2 {
    font-family: var(--case-font-display);
    font-size: clamp(38px, 5.5vw, 72px);
    line-height: .98;
    letter-spacing: -.035em;
    font-weight: 500;
    color: var(--case-ink);
    margin-bottom: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.wpww-case__cta-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 32px;
}

/* ============================================================
   DETAIL-PAGE Hero (übernommen aus Mockup-Sprache)
   ============================================================ */

.wpww-case__hero {
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--case-line);
}

.wpww-case__hero-meta {
    display: flex;
    gap: 24px;
    font-family: var(--case-font-mono);
    font-size: 10.5px;
    color: var(--case-muted);
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 20px;
    flex-wrap: wrap;
    border-bottom: 1px dashed var(--case-line-dashed);
    padding-bottom: 18px;
}

.wpww-case__hero-meta span {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

.wpww-case__hero-meta .wpww-case__meta-label {
    color: var(--case-muted);
}

.wpww-case__hero-meta b {
    color: var(--case-ink);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: none;
    font-size: 12px;
}

.wpww-case__hero-meta b small {
    display: block;
    color: var(--case-muted);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .1em;
    margin-top: 2px;
    text-transform: none;
}

.wpww-case__hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    padding: 6px 12px;
    border: 1px solid var(--case-line);
    color: var(--case-ink-2);
    background: rgba(10, 10, 10, .02);
    margin-bottom: 32px;
    letter-spacing: .05em;
}

.wpww-case__hero-tag-dot {
    width: 6px;
    height: 6px;
    background: var(--case-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(5, 224, 110, .25);
}

.wpww-case__hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: start;
}

@media (max-width: 1100px) {
    .wpww-case__hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.wpww-case__h1 {
    font-family: var(--case-font-display);
    font-size: clamp(44px, 6vw, 82px);
    line-height: .98;
    letter-spacing: -.035em;
    font-weight: 500;
    color: var(--case-ink);
    margin-bottom: 32px;
}

.wpww-case__h1 .wpww-case__h1-small {
    display: block;
    font-size: .42em;
    color: var(--case-muted);
    font-family: var(--case-font-mono);
    letter-spacing: .05em;
    font-weight: 500;
    margin-bottom: 18px;
    line-height: 1.3;
}

.wpww-case__h1 em {
    color: var(--case-primary-text);
    font-style: normal;
    font-weight: 600;
}

.wpww-case__hero-subtitle {
    display: none; /* alte Klasse — nicht im Mockup */
}

.wpww-case__hero-image {
    margin: 32px 0 0;
}

.wpww-case__hero-lead {
    font-size: 18px;
    color: var(--case-ink-soft);
    max-width: 780px;
    line-height: 1.65;
    font-family: var(--case-font-sans);
    margin-bottom: 24px;
}

.wpww-case__hero-lead strong {
    color: var(--case-ink);
    font-weight: 600;
}

/* KPI-Card */
.wpww-case__kpi-card {
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    padding: 28px;
    box-shadow: 0 12px 32px rgba(10, 10, 10, .04);
}

.wpww-case__kpi-card-title {
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-muted);
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 500;
}

.wpww-case__kpi-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wpww-case__kpi-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: end;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--case-line-dashed);
}

.wpww-case__kpi-list li:last-child {
    border-bottom: 0;
}

.wpww-case__kpi-lbl-txt {
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-ink-2);
    letter-spacing: .04em;
    line-height: 1.4;
}

.wpww-case__kpi-lbl-txt small {
    display: block;
    font-size: 9px;
    color: var(--case-muted);
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-top: 4px;
}

.wpww-case__kpi-v {
    font-family: var(--case-font-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--case-ink);
    letter-spacing: -.02em;
    line-height: 1;
}

.wpww-case__kpi-v em {
    color: var(--case-primary-text);
    font-style: normal;
}

.wpww-case__kpi-src {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--case-line-dashed);
    display: flex;
    justify-content: space-between;
    font-family: var(--case-font-mono);
    font-size: 9px;
    color: var(--case-muted);
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* Section-Label */
.wpww-case__section-lbl {
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-muted);
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wpww-case__section-lbl::before {
    content: "//";
    color: var(--case-primary-text);
}

/* Sections */
.wpww-case__proof,
.wpww-case__situation,
.wpww-case__decision,
.wpww-case__timeline,
.wpww-case__hypotheses,
.wpww-case__method,
.wpww-case__result,
.wpww-case__lessons,
.wpww-case__faq,
.wpww-case__quote,
.wpww-case__related,
.wpww-case__cta-block {
    padding: 80px 0;
    border-bottom: 1px solid var(--case-line);
}

.wpww-case__proof {
    background: rgba(10, 10, 10, .02);
    padding: 32px 0;
}

.wpww-case__proof-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    align-items: end;
}

@media (max-width: 900px) {
    .wpww-case__proof-inner { grid-template-columns: 1fr 1fr; }
}

.wpww-case__proof-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wpww-case__proof-num {
    font-family: var(--case-font-display);
    font-size: 36px;
    font-weight: 600;
    color: var(--case-ink);
    letter-spacing: -.02em;
    line-height: 1;
}

.wpww-case__proof-num em {
    color: var(--case-primary-text);
    font-style: normal;
}

.wpww-case__proof-num span {
    font-family: var(--case-font-mono);
    font-size: 12px;
    color: var(--case-muted);
    letter-spacing: .1em;
    margin-left: 4px;
}

.wpww-case__proof-lbl {
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-muted);
    letter-spacing: .12em;
    line-height: 1.4;
}

/* Headlines + Body in Sections */
.wpww-case h2 {
    font-family: var(--case-font-display);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -.03em;
    font-weight: 500;
    color: var(--case-ink);
    margin-top: 12px;
}

.wpww-case h2 em {
    font-style: normal;
    color: var(--case-primary-text);
    font-weight: 600;
}

.wpww-case h3 {
    font-family: var(--case-font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--case-ink);
    letter-spacing: -.02em;
    line-height: 1.25;
    margin-bottom: 14px;
}

.wpww-case p {
    color: var(--case-ink-soft);
    font-size: 15.5px;
    font-family: var(--case-font-sans);
    line-height: 1.7;
    margin-bottom: 18px;
}

.wpww-case p strong {
    color: var(--case-ink);
    font-weight: 600;
}

/* Situation Grid */
.wpww-case__sit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .wpww-case__sit-grid { grid-template-columns: 1fr; }
}

.wpww-case__sit-bad {
    color: var(--case-danger);
}

.wpww-case__sit-good {
    color: var(--case-primary-text);
}

/* Decision */
.wpww-case__decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .wpww-case__decision-grid { grid-template-columns: 1fr; }
}

.wpww-case__opt {
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    padding: 28px;
}

.wpww-case__opt--chosen {
    border-color: var(--case-primary-text);
    box-shadow: 0 0 0 3px rgba(5, 224, 110, .15);
}

.wpww-case__opt-icon {
    width: 32px;
    height: 32px;
    background: var(--case-bg);
    border: 1px solid var(--case-line);
    display: grid;
    place-items: center;
    font-family: var(--case-font-display);
    font-weight: 600;
    margin-bottom: 12px;
}

.wpww-case__opt-lbl {
    font-family: var(--case-font-mono);
    font-size: 9.5px;
    color: var(--case-muted);
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.wpww-case__opt-rows {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--case-line-dashed);
}

.wpww-case__opt-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-family: var(--case-font-mono);
    font-size: 11px;
}

.wpww-case__opt-k {
    color: var(--case-muted);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.wpww-case__opt-v--yes  { color: var(--case-primary-text); font-weight: 700; }
.wpww-case__opt-v--no   { color: var(--case-danger); }
.wpww-case__opt-v--neutral { color: var(--case-ink); }

/* Timeline */
.wpww-case__tl-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wpww-case__tl-row {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    gap: 24px;
    padding: 24px;
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    align-items: start;
}

@media (max-width: 900px) {
    .wpww-case__tl-row { grid-template-columns: 1fr; gap: 8px; }
}

.wpww-case__tl-n {
    font-family: var(--case-font-mono);
    font-size: 10px;
    color: var(--case-primary-text);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
}

.wpww-case__tl-day {
    font-family: var(--case-font-mono);
    font-size: 9.5px;
    color: var(--case-muted);
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: right;
}

@media (max-width: 900px) {
    .wpww-case__tl-day { text-align: left; }
}

/* Hypothesen-Tabelle */
.wpww-case__hyp-table {
    width: 100%;
    margin-top: 32px;
    border-collapse: collapse;
    font-family: var(--case-font-mono);
    font-size: 12.5px;
}

.wpww-case__hyp-table th,
.wpww-case__hyp-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--case-line);
    vertical-align: top;
}

.wpww-case__hyp-table th {
    font-size: 10px;
    color: var(--case-muted);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    border-bottom: 1px solid var(--case-ink);
}

.wpww-case__hyp-row--confirmed td:nth-child(2) { color: var(--case-primary-text); font-weight: 700; }
.wpww-case__hyp-row--refuted td:nth-child(2)   { color: var(--case-muted); }

/* FAQ */
.wpww-case__faq-list {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpww-case__faq-item {
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    padding: 0;
}

.wpww-case__faq-item[open] {
    box-shadow: 0 12px 32px rgba(10, 10, 10, .04);
}

.wpww-case__faq-item summary {
    padding: 18px 24px;
    cursor: pointer;
    font-family: var(--case-font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--case-ink);
    list-style: none;
}

.wpww-case__faq-item summary::-webkit-details-marker { display: none; }

.wpww-case__faq-item summary::after {
    content: "+";
    float: right;
    font-family: var(--case-font-mono);
    color: var(--case-primary-text);
    font-weight: 700;
}

.wpww-case__faq-item[open] summary::after { content: "−"; }

.wpww-case__faq-answer {
    padding: 0 24px 18px;
    font-family: var(--case-font-sans);
    color: var(--case-ink-soft);
    font-size: 14.5px;
    line-height: 1.65;
}

/* Lessons */
.wpww-case__lesson-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--case-line);
    border: 1px solid var(--case-line);
}

@media (max-width: 900px) {
    .wpww-case__lesson-list { grid-template-columns: 1fr; }
}

.wpww-case__lesson-list li {
    background: var(--case-surface);
    padding: 28px;
}

.wpww-case__lesson-num {
    font-family: var(--case-font-display);
    font-size: 36px;
    font-weight: 600;
    color: var(--case-primary-text);
    letter-spacing: -.02em;
    line-height: 1;
    display: block;
    margin-bottom: 12px;
}

/* Quote */
.wpww-case__quote blockquote {
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    padding: 48px;
    margin: 0;
}

.wpww-case__quote p {
    font-family: var(--case-font-display);
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.3;
    color: var(--case-ink);
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0 0 24px;
}

.wpww-case__quote footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 20px;
    border-top: 1px dashed var(--case-line-dashed);
    font-family: var(--case-font-mono);
    font-size: 11px;
    color: var(--case-muted);
    letter-spacing: .1em;
}

.wpww-case__quote cite {
    color: var(--case-ink);
    font-style: normal;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Related */
.wpww-case__related-grid {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .wpww-case__related-grid { grid-template-columns: 1fr; }
}

.wpww-case__related-card a {
    display: block;
    background: var(--case-surface);
    border: 1px solid var(--case-line);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}

.wpww-case__related-card a:hover {
    transform: translate(-1px, -2px);
    box-shadow: 0 16px 40px rgba(10, 10, 10, .08);
}

/* CTA-Block */
.wpww-case__cta-block {
    background: linear-gradient(180deg, transparent 0%, rgba(5, 224, 110, .09) 100%);
    text-align: center;
    padding: 120px 0;
}

.wpww-case__cta-block h2 {
    font-size: clamp(38px, 5.5vw, 72px);
    line-height: .98;
    letter-spacing: -.035em;
    margin-bottom: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.wpww-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-family: var(--case-font-mono);
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform .15s;
    text-decoration: none;
    cursor: pointer;
}

.wpww-btn:hover { transform: translate(-1px, -1px); }

.wpww-btn--primary {
    background: var(--case-primary);
    color: var(--case-primary-ink);
    border: 0;
}

.wpww-btn--primary::before { content: ">"; margin-right: 2px; }

.wpww-btn--lg {
    padding: 18px 24px;
    font-size: 13px;
}