/* =============================================================
   webum.css — Webum Design Layer (wu-* Komponenten)
   Ladepfad: webum-core.css → webum.css

   Dieses File ist das ZIEL-System. Alle neuen Komponenten und
   neuen Seiten werden ausschließlich mit wu-*-Klassen gebaut.
   Bestehende Seiten werden schrittweise migriert (webum-core.css
   enthält bis dahin die alten Klassen .hero, .section, .btn usw.)

   1. Webum Design Tokens
   2. Base Overrides
   3. Layout Primitives
   4. Components (wu-*)
   5. Forms
   6. Utilities
   7. Responsive Adjustments
   ============================================================= */


/* ============================================================
   1. WEBUM DESIGN TOKENS
   Ergänzungen zu den Tokens in webum-core.css.
   ============================================================ */

:root {
    --wu-green:           #1a7c68;
    --wu-green-light:     #e6f4f1;
    --wu-green-border:    rgba(26, 124, 104, 0.2);

    --wu-red:             #9b3f3f;

    --wu-surface-warm:    #f2ede8;

    --wu-radius-card:     6px;
    --wu-radius-pill:     100px;

    --wu-transition:      0.15s ease;
    --wu-transition-slow: 0.28s ease;

    --wu-prose-width:     65ch;
}


/* ============================================================
   1b. LABEL-SYSTEM — geteilte Basis für alle Label-Klassen
   Konkrete Farbe, Display und Abstände bleiben bei jeder Klasse.
   ============================================================ */

.wu-label,
.wu-card__topic,
.wu-before-after__label,
.wu-content-list__label,
.wu-next-step__label,
.wu-contact-panel__label,
.wu-related-links__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
}

.wu-label { color: var(--c-text-muted); }

.wu-evidence__source,
.wu-selector__option strong {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}


/* ============================================================
   2. BASE OVERRIDES
   ============================================================ */

body {
    margin: 0;
    padding: 0;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    hyphenate-limit-chars: 6 3 3;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--c-text);
    line-height: var(--lh-tight, 1.2);
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

blockquote {
    font-family: var(--font-serif);
    font-style: italic;
}

code, kbd {
    font-size: 0.875em;
    background: var(--c-surface);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm, 3px);
    font-family: var(--font-mono);
}

/* Sicherstellen, dass <article> keine impliziten Karten-Styles erhält */
article {
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    margin-bottom: 0;
}


/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */

.wu-container {
    max-width: var(--container, 1100px);
    margin-inline: auto;
    padding-inline: var(--sp-6, 1.5rem);
}

.wu-section {
    padding-block: var(--sp-20, 5rem);
}

.wu-section--muted {
    background-color: var(--c-surface);
}

/* Dot-Grid-Hintergrund mit interaktivem Cursor-Highlight */
.wu-section--dot-grid {
    background-image: var(--dot-grid-bg);
    background-size: var(--dot-grid-size);
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.wu-section--dot-grid > .wu-container {
    position: relative;
    z-index: 1;
}

.wu-section--dot-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--dot-grid-hover-bg);
    background-size: var(--dot-grid-size);
    background-attachment: fixed;
    -webkit-mask-image: radial-gradient(circle 180px at var(--mouse-x, -400px) var(--mouse-y, -400px), black 0%, transparent 100%);
    mask-image:         radial-gradient(circle 180px at var(--mouse-x, -400px) var(--mouse-y, -400px), black 0%, transparent 100%);
    pointer-events: none;
}

.wu-section--warm {
    background-color: var(--wu-surface-warm, #f2ede8);
}

.wu-section--accent {
    background-color: var(--c-accent-light);
}

.wu-grid {
    display: grid;
    gap: var(--sp-6, 1.5rem);
}

.wu-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.wu-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.wu-grid--sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--sp-16, 4rem);
    align-items: start;
    padding-block: var(--sp-16, 4rem);
}

.wu-grid--2-1 {
    grid-template-columns: 2fr 1fr;
}

.wu-grid--wide {
    gap: var(--sp-16, 4rem);
    align-items: start;
}


.wu-form-layout {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: var(--sp-8, 2rem);
    align-items: start;
    padding: var(--sp-16, 4rem) 0;
}

.wu-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6, 1.5rem);
}


/* ============================================================
   4. COMPONENTS (wu-*)
   ============================================================ */

/* ---- wu-kicker -------------------------------------------- */
.wu-kicker {
    font-family: var(--font-serif);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3, 0.75rem);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-medium, 500);
    color: var(--c-accent);
    margin-bottom: var(--sp-3, 0.75rem);
    letter-spacing: var(--ls-normal);
}

.wu-kicker::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}

/* ---- wu-section-header ------------------------------------ */
.wu-section-header {
    margin-bottom: var(--sp-12, 3rem);
    max-width: 680px;
}

.wu-section-header--centered {
    text-align: center;
    margin-inline: auto;
}

.wu-section-header--flush {
    margin-bottom: 0;
}

.wu-section-header h2,
.wu-section-header h3 {
    margin-bottom: var(--sp-4, 1rem);
}

.wu-lead {
    font-size: var(--fs-md, 1.125rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
    margin: 0;
    max-width: var(--wu-prose-width, 65ch);
}

/* ---- wu-hero ---------------------------------------------- */
.wu-hero {
    padding-block: var(--sp-24, 6rem);
    background-color: var(--c-bg);
    background-image: var(--dot-grid-bg);
    background-size: var(--dot-grid-size);
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.wu-hero > .wu-container {
    position: relative;
    z-index: 1;
}

.wu-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--dot-grid-hover-bg);
    background-size: var(--dot-grid-size);
    background-attachment: fixed;
    -webkit-mask-image: radial-gradient(circle 180px at var(--mouse-x, -400px) var(--mouse-y, -400px), black 0%, transparent 100%);
    mask-image:         radial-gradient(circle 180px at var(--mouse-x, -400px) var(--mouse-y, -400px), black 0%, transparent 100%);
    pointer-events: none;
}

/* Zwei-Spalten-Layout: Text links, Grafik rechts */
.wu-hero__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-16, 4rem);
    position: relative;
    z-index: 1;
}

.wu-hero__content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.wu-hero__visual {
    flex-shrink: 0;
    width: 420px;
    max-width: 45%;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.wu-hero__visual img {
    width: 115%;
    max-width: none;
    margin-left: -15%;
    height: auto;
    display: block;
}

.wu-eyebrow {
    display: inline-block;
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-medium, 500);
    color: var(--c-accent);
    margin-bottom: var(--sp-4, 1rem);
    letter-spacing: 0.01em;
}

.wu-hero__headline {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold, 700);
    letter-spacing: var(--ls-tight);
    line-height: 1.1;
    margin-bottom: var(--sp-6, 1.5rem);
}

.wu-hero__headline::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--wu-green, #1a7c68);
    margin-top: var(--sp-4, 1rem);
    border-radius: 2px;
}

.wu-hero__sub {
    font-size: var(--fs-md, 1.125rem);
    color: var(--c-text-muted);
    max-width: 600px;
    margin-bottom: var(--sp-10, 2.5rem);
    line-height: var(--lh-base, 1.65);
}

.wu-hero__actions {
    display: flex;
    gap: var(--sp-4, 1rem);
    flex-wrap: wrap;
    align-items: center;
}

/* Variante mit vollflächigem Hintergrundbild statt Zwei-Spalten-Visual —
   Höhe bleibt wie beim Standard-Hero (padding-block), Bild wird zugeschnitten
   (cover), muss nicht vollständig sichtbar sein. */
.wu-hero--image-bg {
    background-image:
        linear-gradient(rgba(10, 14, 20, 0.6), rgba(10, 14, 20, 0.6)),
        url('/assets/img/hero-bg-demoseite.webp');
    background-size: cover;
    background-position: center;
}

.wu-hero--image-bg::before {
    display: none;
}

.wu-hero--image-bg .wu-hero__content {
    max-width: 680px;
}

.wu-hero--image-bg .wu-hero__headline {
    color: var(--c-text-inverse, #ffffff);
}

.wu-hero--image-bg .wu-hero__sub {
    color: var(--c-text-inverse-muted, rgba(255, 255, 255, 0.75));
}

/* ---- wu-card ---------------------------------------------- */
.wu-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    padding: var(--sp-8, 2rem);
}

.wu-card--accent-top {
    border-top: 3px solid var(--c-accent);
}

.wu-card--surface {
    background: var(--c-surface);
}

.wu-card--featured {
    border-top: 3px solid var(--c-accent);
    box-shadow: var(--shadow);
    padding: var(--sp-10);
}

.wu-card--featured h3 {
    font-size: var(--fs-lg);
}

.wu-card--peer {
    border-top: 3px solid var(--c-warm, #1a7c68);
    box-shadow: var(--shadow);
    padding: var(--sp-10);
}

.wu-card--peer h3 {
    font-size: var(--fs-lg);
}

/* Link-Karte (anklickbare Karte als <a>) */
.wu-card--link {
    text-decoration: none;
    color: var(--c-text);
    display: flex;
    flex-direction: column;
    min-height: 220px;
    transition: box-shadow var(--wu-transition), border-top-color var(--wu-transition);
}

.wu-card--link:hover,
.wu-card--link:focus-within {
    box-shadow: var(--shadow-md);
    border-top-color: var(--c-accent);
    color: var(--c-text);
}

/* Leichter Hover für nicht-klickbare Karten (kein Link, kein Akzent-Rahmen —
   das würde Klickbarkeit vortäuschen). Nur ein dezentes Anheben. */
.wu-card--hover {
    transition: box-shadow var(--wu-transition), transform var(--wu-transition);
}

.wu-card--hover:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.wu-card__topic {
    display: block;
    color: var(--c-accent);
    margin-bottom: var(--sp-3, 0.75rem);
}

.wu-card h3 {
    font-size: var(--fs-md, 1.125rem);
    margin-bottom: var(--sp-3, 0.75rem);
}

.wu-card p {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    flex: 1;
    margin-bottom: var(--sp-4, 1rem);
}

.wu-card__link-label {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.3em;
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-semi, 600);
    color: var(--c-accent);
    margin-top: auto;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--wu-transition, 0.15s ease);
}

/* Zwei Verwendungsmuster: (1) eigenständiger <a>-Link — Hover greift direkt.
   (2) dekoratives <span aria-hidden> innerhalb der großen .wu-card--link-Karte
   (wissen.php) — dort soll die ganze Karte den Hover auslösen, nicht nur das
   Label selbst. */
.wu-card__link-label:hover,
.wu-card--link:hover .wu-card__link-label,
.wu-card--link:focus-within .wu-card__link-label {
    border-bottom-color: currentColor;
}

.wu-card__link-arrow {
    display: inline-block;
    transition: transform var(--wu-transition, 0.15s ease);
}

.wu-card__link-label:hover .wu-card__link-arrow,
.wu-card--link:hover .wu-card__link-arrow,
.wu-card--link:focus-within .wu-card__link-arrow {
    transform: translateX(3px);
}

.wu-card__link-label:hover .wu-card__link-arrow {
    transform: translateX(3px);
}

/* ---- wu-before-after -------------------------------------- */
.wu-before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    overflow: hidden;
    margin-block: var(--sp-8, 2rem);
}

.wu-before-after__col {
    padding: var(--sp-8, 2rem);
}

.wu-before-after__col--before {
    background: var(--c-bg, #fff);
    border-right: 1px solid var(--c-border);
}

.wu-before-after__col--after {
    background: var(--c-bg, #fff);
}

.wu-before-after__label {
    margin-bottom: var(--sp-4, 1rem);
    padding-bottom: var(--sp-3, 0.75rem);
    border-bottom: 2px solid currentColor;
    opacity: 0.9;
    display: block;
}

.wu-before-after__col--before .wu-before-after__label {
    color: var(--wu-red, #9b3f3f);
}

.wu-before-after__col--after .wu-before-after__label {
    color: var(--wu-green, #1a7c68);
}

.wu-before-after__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 0.75rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-before-after__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3, 0.75rem);
    font-size: var(--fs-sm, 0.875rem);
    line-height: var(--lh-base, 1.65);
}

.wu-before-after__col--before .wu-before-after__item {
    color: var(--c-text);
}

.wu-before-after__item::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: calc((var(--lh-base, 1.65) * var(--fs-sm, 0.875rem) - 1rem) / 2);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.wu-before-after__col--before .wu-before-after__item::before {
    background-color: var(--wu-red, #9b3f3f);
    mask-image: url('/assets/img/icons/x.svg');
    -webkit-mask-image: url('/assets/img/icons/x.svg');
}

.wu-before-after__col--after .wu-before-after__item::before {
    background-color: var(--wu-green, #1a7c68);
    mask-image: url('/assets/img/icons/check.svg');
    -webkit-mask-image: url('/assets/img/icons/check.svg');
}

/* ---- wu-content-list (vereint deliverables + boundaries) -- */
/* Basis: neutral/gedämpft (= bisherige .wu-boundaries-Variante).
   Modifier --positive: grünes Schema (= bisherige .wu-deliverables-Variante).

   HTML-Struktur:
   <div class="wu-content-list [wu-content-list--positive]">
     <span class="wu-content-list__label">Überschrift</span>
     <ul class="wu-content-list__list">
       <li>
         <svg class="wu-content-list__icon" ...>…</svg>
         Listenpunkt
       </li>
     </ul>
   </div>
*/
.wu-content-list {
    --_accent: var(--c-text-muted);
    --_border: var(--c-border);
    --_bg:     var(--c-surface);
    --_text:   var(--c-text-muted);

    padding: var(--sp-6, 1.5rem) var(--sp-8, 2rem);
    background: var(--_bg);
    border: 1px solid var(--_border);
    border-left: 3px solid var(--_accent);
    border-radius: 0 var(--wu-radius-card, 6px) var(--wu-radius-card, 6px) 0;
}

.wu-content-list--positive {
    --_accent: var(--wu-green, #1a7c68);
    --_border: var(--wu-green-border, rgba(26, 124, 104, 0.2));
    --_bg:     var(--wu-green-light, #e6f4f1);
    --_text:   var(--c-text);
}

.wu-content-list__label {
    color: var(--_accent);
    margin-bottom: var(--sp-4, 1rem);
    display: block;
}

.wu-content-list__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 0.5rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-content-list__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3, 0.75rem);
    font-size: var(--fs-sm, 0.875rem);
    line-height: var(--lh-base, 1.65);
    color: var(--_text);
}

.wu-content-list__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: calc((var(--lh-base, 1.65) - 1) / 2 * 1em);
    color: var(--_accent);
}

/* ---- wu-fairness ------------------------------------------ */
.wu-fairness {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4, 1rem);
    margin-top: var(--sp-4, 1rem);
    padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
}

/* ---- wu-person -------------------------------------------- */
.wu-person {
    display: flex;
    gap: var(--sp-6, 1.5rem);
    align-items: flex-start;
    padding: var(--sp-8, 2rem);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    /*max-width: 680px;*/
}

.wu-person__photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--c-border);
    background: var(--c-surface);
    display: block;
}

.wu-person__body {
    flex: 1;
    min-width: 0;
}

.wu-person__name {
    font-size: var(--fs-md, 1.125rem);
    font-weight: var(--fw-semi, 600);
    color: var(--c-text);
    margin-bottom: var(--sp-1, 0.25rem);
}

.wu-person__role {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-3, 0.75rem);
}

.wu-person__bio {
    font-family: var(--font-serif);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
    margin-bottom: var(--sp-4, 1rem);
    max-width: 100%;
}

.wu-person__contact {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-medium, 500);
    color: var(--c-accent);
    text-decoration: none;
}

.wu-person__contact:hover {
    color: var(--c-accent-dark);
    text-decoration: underline;
}

/* ---- wu-next-step ----------------------------------------- */
.wu-next-step {
    margin-top: var(--sp-10, 2.5rem);
    padding: var(--sp-8, 2rem) var(--sp-10, 2.5rem);
    background: var(--c-accent-light, #d6f2f5);
    border: 1px solid var(--c-accent);
    border-radius: var(--wu-radius-card, 6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-5, 1.25rem);
}

.wu-next-step__label {
    color: var(--c-accent-dark);
    margin-bottom: var(--sp-2, 0.5rem);
    display: block;
}

.wu-next-step__headline {
    font-size: var(--fs-lg, 1.25rem);
    font-weight: var(--fw-semi, 600);
    color: var(--c-text);
    margin-bottom: var(--sp-2, 0.5rem);
    line-height: var(--lh-tight, 1.2);
}

.wu-next-step__desc {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    max-width: 480px;
    margin: 0 auto;
}

.wu-next-step__action {
    flex-shrink: 0;
}

/* ---- wu-dsgvo-note ---------------------------------------- */
.wu-dsgvo-note {
    display: flex;
    gap: var(--sp-4, 1rem);
    align-items: flex-start;
    padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
}

.wu-dsgvo-note__icon {
    flex-shrink: 0;
    color: var(--c-text-muted);
    opacity: 0.5;
    margin-top: 0.1em;
}

.wu-dsgvo-note a {
    color: var(--c-text-muted);
}

.wu-dsgvo-note a:hover {
    color: var(--c-accent);
}

/* ---- wu-definition ---------------------------------------- */
.wu-definition {
    padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
    background: var(--c-surface);
    border-left: 3px solid var(--c-accent);
    border-radius: 0 var(--wu-radius-card, 6px) var(--wu-radius-card, 6px) 0;
    margin-block: var(--sp-6, 1.5rem);
}

.wu-definition__term {
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-semi, 600);
    color: var(--c-accent);
    margin-bottom: var(--sp-2, 0.5rem);
    display: block;
}

.wu-definition__desc {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
    margin: 0;
    max-width: 100%;
}

/* ---- wu-contact-panel ------------------------------------- */
.wu-contact-panel {
    padding: var(--sp-8, 2rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4, 1rem);
}

.wu-contact-panel__label {
    color: var(--c-text-muted);
    display: block;
}

.wu-contact-panel__name {
    font-size: var(--fs-md, 1.125rem);
    font-weight: var(--fw-semi, 600);
    color: var(--c-text);
    margin: 0;
}

.wu-contact-panel__role {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    margin: calc(-1 * var(--sp-2, 0.5rem)) 0 0;
}

.wu-contact-panel__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 0.5rem);
    margin-top: var(--sp-2, 0.5rem);
    list-style: none;
    padding: 0;
}

.wu-contact-panel__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 0.75rem);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-medium, 500);
    color: var(--c-text);
    text-decoration: none;
    padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius, 4px);
    transition: border-color var(--wu-transition), color var(--wu-transition);
}

.wu-contact-panel__link:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.wu-contact-panel__link-icon {
    flex-shrink: 0;
    color: var(--c-accent);
    width: 18px;
    height: 18px;
}

/* ---- wu-proof --------------------------------------------- */
.wu-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6, 1.5rem);
    padding-block: var(--sp-8, 2rem);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    margin-block: var(--sp-12, 3rem);
}

.wu-proof__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1, 0.25rem);
}

.wu-proof__value {
    font-size: var(--fs-2xl, 1.875rem);
    font-weight: var(--fw-bold, 700);
    color: var(--c-accent);
    line-height: 1;
}

.wu-proof__label {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
}

/* ---- wu-trust-list ---------------------------------------- */
.wu-trust-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 0.75rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-trust-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3, 0.75rem);
    font-size: var(--fs-md, 1.125rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
}

.wu-trust-list__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--c-success-text, #15803d);
    margin-top: 3px;
}

/* ---- wu-process ------------------------------------------- */
.wu-process {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 0.75rem);
    counter-reset: wu-step;
    position: relative;
}


.wu-process__item {
    display: flex;
    gap: var(--sp-6, 1.5rem);
    align-items: flex-start;
    padding: var(--sp-6, 1.5rem) var(--sp-8, 2rem);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    counter-increment: wu-step;
    transition: border-color var(--wu-transition), box-shadow var(--wu-transition);
    position: relative;
    z-index: 1;
}

.wu-process__item:hover {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-sm);
}

.wu-process__number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--c-accent);
    color: var(--c-accent);
    font-size: var(--fs-md, 1.125rem);
    font-weight: var(--fw-semi, 600);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.wu-process__number::before {
    content: counter(wu-step);
}

.wu-process__heading {
    display: flex;
    gap: var(--sp-4, 1rem);
}

.wu-process__content {
    flex: 1;
    min-width: 0;
}

.wu-process__content h3 {
    font-size: var(--fs-md, 1.125rem);
    margin-bottom: var(--sp-2, 0.5rem);
}

.wu-process__content p {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    margin: 0;
}

.wu-process__phase {
    margin-top: var(--sp-12, 3rem);
    margin-bottom: var(--sp-6, 1.5rem);
    padding-bottom: var(--sp-4, 1rem);
    border-bottom: 1px solid var(--c-border);
}

.wu-process__phase:first-child {
    margin-top: 0;
}

.wu-process__phase-title {
    font-size: var(--fs-lg, 1.25rem);
    font-weight: var(--fw-semi, 600);
    margin-top: var(--sp-1, 0.25rem);
    margin-bottom: 0;
}

/* ---- wu-process--horizontal (3 Spalten nebeneinander) ----- */
.wu-process--horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}

.wu-process--horizontal::before {
    display: none;
}

.wu-process--horizontal .wu-process__item {
    flex-direction: column;
}

.wu-process--horizontal .wu-process__content {
    flex: 1;
}

/* Zahl + Überschrift als eigene Gruppe: auf Desktop untereinander (wie
   bisher der freistehende Kreis über der Überschrift), auf Mobile in einer
   Zeile (siehe Media Query unten) -- Layout-Entscheidung sitzt an der
   Gruppe, nicht an .wu-process__number/h3 selbst, die auch die schlichte
   .wu-process-Variante (ohne --horizontal, z.B. ablauf.php) unverändert nutzt. */
.wu-process--horizontal .wu-process__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4, 1rem);
    margin-bottom: var(--sp-2, 0.5rem);
}

.wu-process--horizontal .wu-process__heading h3 {
    margin-bottom: 0;
    color: var(--c-accent);
}

@media (max-width: 768px) {
    .wu-process--horizontal {
        grid-template-columns: 1fr;
    }

    .wu-process--horizontal::before {
        display: block;
    }

    .wu-process--horizontal .wu-process__heading {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-3, 0.75rem);
    }

    /* Chip verlässt die absolute Ecken-Position (überdeckte bislang lange
       Überschriften) -- wird stattdessen normaler erster Flex-Zeile-Eintrag
       in .wu-process__item, rechtsbündig per align-self, kleinere Schrift. */
    .wu-process__item .wu-chip {
        position: static;
        align-self: flex-end;
        font-size: 0.6875rem;
    }
}

/* ---- wu-offer --------------------------------------------- */
.wu-offer {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-accent);
    border-radius: var(--wu-radius-card, 6px);
    padding: var(--sp-10, 2.5rem) var(--sp-12, 3rem);
    margin-bottom: var(--sp-8, 2rem);
    /* Positionierungskontext für den Beliebt-Chip (.wu-chip,
       position:absolute) — analog zu .wu-process__item .wu-chip. */
    position: relative;
    /* flex statt block: der letzte Kindknoten (CTA-Button) kann sich per
       margin-top:auto an den unteren Kartenrand andocken — wichtig im
       Grid-Einsatz (demo.php), wo Karten unterschiedlich viel Inhalt über
       dem Button haben, aber gleich hoch sind (Grid-Stretch). Ändert nichts
       am vertikal gestapelten Einsatz (pakete.php): dort ist die Karte exakt
       so hoch wie ihr Inhalt, margin-top:auto hat dann keinen Effekt. */
    display: flex;
    flex-direction: column;
}

/* Letztes Kind (CTA-Button/-Link) an den unteren Kartenrand andocken.
   Höhere Spezifität als einzelne Utility-Klassen wie .wu-mt-8 (zwei
   Selektor-Teile statt einer) — gewinnt unabhängig von der Regel-Reihenfolge. */
.wu-offer > :last-child {
    margin-top: auto;
}

/* Mindestabstand über dem CTA, unabhängig vom Grid-Stretch: margin-top:auto
   verteilt nur den ÜBERSCHÜSSIGEN Platz der Karte — auf schmalen Viewports
   (Grid fällt auf 1-2 Spalten zurück, Karten sind dann kaum höher als ihr
   eigener Inhalt) bleibt dadurch kaum bis kein Abstand übrig, der Button
   klebte direkt am letzten Listenpunkt. Fester margin-bottom auf der
   Checkliste ist der garantierte Sockel, margin-top:auto kommt nur bei
   echtem Platzüberschuss obendrauf. Auf .wu-offer als direktes Kind
   beschränkt (nicht das global genutzte .wu-checklist selbst), betrifft
   also nicht die tiefer verschachtelte Nutzung in pakete.php. */
.wu-offer > .wu-checklist {
    margin-bottom: var(--sp-8, 2rem);
}

/* Chip oben rechts statt im normalen Textfluss über dem Titel — analog zu
   .wu-process__item .wu-chip, damit der Titel bei allen Karten auf gleicher
   Höhe startet (die Karte mit Chip bekommt sonst zusätzliche Content-Höhe,
   die die anderen beiden nicht haben). */
.wu-offer .wu-chip {
    position: absolute;
    top: var(--sp-4, 1rem);
    right: var(--sp-4, 1rem);
}

.wu-offer:last-child {
    margin-bottom: 0;
}

/* .wu-offer wird zweifach eingesetzt: vertikal gestapelt (margin-bottom +
   :last-child-Reset sorgen dort für den Abstand) und nebeneinander im Grid
   (z.B. demo.php-Pakete). Im Grid trifft :last-child aber zufällig die
   LETZTE SPALTE, nicht "die Karte ohne Nachfolger" — die verliert dadurch
   als einzige ihre margin-bottom. Grid-Stretch bezieht die Marge jeder Karte
   in die Zeilenhöhen-Berechnung ein: die margin-lose Karte darf die komplette
   Zeilenhöhe als eigene Box nutzen, die anderen nur "Zeilenhöhe minus eigene
   Marge" — sichtbar unterschiedlich hohe Karten trotz identischem Inhalt.
   Muss NACH .wu-offer:last-child stehen (gleiche Spezifität, spätere Regel
   gewinnt) und pauschal statt :last-child, da im Grid ohnehin `gap` für den
   Abstand sorgt. */
.wu-grid > .wu-offer {
    margin-bottom: 0;
}

.wu-offer__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sp-4, 1rem);
    margin-bottom: var(--sp-6, 1.5rem);
    padding-bottom: var(--sp-6, 1.5rem);
    border-bottom: 1px solid var(--c-border);
}

.wu-offer__name {
    font-size: var(--fs-2xl, 1.875rem);
    font-weight: var(--fw-semi, 600);
    margin-bottom: var(--sp-2, 0.5rem);
}

.wu-offer__tagline {
    font-size: var(--fs-base, 1rem);
    color: var(--c-text-muted);
    max-width: 480px;
    margin: 0;
}

.wu-price-note {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    margin-top: var(--sp-1, 0.25rem);
}

.wu-scope-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-scope-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2, 0.5rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    padding: var(--sp-2, 0.5rem) 0;
    line-height: var(--lh-base, 1.65);
}

/* ---- wu-offer sub-components ------------------------------ */

/* Badge-Label (z.B. "Einstieg", "Analyse", "Kernprodukt") */
.wu-offer__badge {
    display: inline-block;
    font-size: var(--fs-xs, 0.75rem);
    font-weight: var(--fw-medium, 500);
    color: var(--c-text-muted);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    padding: 2px var(--sp-3, 0.75rem);
    border-radius: var(--radius-sm, 3px);
    margin-bottom: var(--sp-3, 0.75rem);
}

/* Rechte Preis-Spalte im Header */
.wu-offer__pricing {
    text-align: right;
    flex-shrink: 0;
}

/* Großer Preisbetrag */
.wu-offer__price {
    font-size: var(--fs-3xl, 2.25rem);
    font-weight: var(--fw-bold, 700);
    color: var(--c-warm, #1a7c68);
    white-space: nowrap;
}

/* Kleine Preisnotiz (netto zzgl. MwSt.) */
.wu-offer__price-note {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
}

/* Hervorgehobene Preisnotiz (z.B. "Bei Beauftragung anrechenbar") */
.wu-offer__price-highlight {
    display: inline-block;
    margin-top: var(--sp-2, 0.5rem);
    padding: 3px var(--sp-3, 0.75rem);
    background: var(--c-accent-light);
    color: var(--c-accent-dark);
    border-radius: var(--radius-sm, 3px);
    font-size: var(--fs-xs, 0.75rem);
    font-weight: var(--fw-semi, 600);
}

/* 2-spaltige Feature-Listen (Enthalten / Nicht enthalten) */
.wu-offer__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10, 2.5rem);
    margin-bottom: var(--sp-8, 2rem);
}

.wu-offer__body ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 0.5rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-offer__body li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2, 0.5rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
}

.wu-offer__body h3 {
    font-size: var(--fs-base, 1rem);
    margin-bottom: var(--sp-4, 1rem);
}

/* Hervorgehobenes Paket (stärker als Default) */
.wu-offer--featured {
    box-shadow: var(--shadow);
}

.wu-offer-add-on {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-accent);
    border-radius: var(--wu-radius-card, 6px);
    padding: var(--sp-10, 2.5rem) var(--sp-12, 3rem);
    margin-bottom: var(--sp-8, 2rem);
}

.wu-offer__price-unit {
    font-size: var(--fs-base, 1rem);
    font-weight: var(--fw-normal, 400);
    color: var(--c-text-muted);
    margin-left: 0.15em;
}

/* Kostenvergleich in Angebotskarte */
.wu-offer__comparison {
    border-top: 1px solid var(--c-border);
    margin-top: var(--sp-8, 2rem);
    padding-top: var(--sp-6, 1.5rem);
    margin-bottom: var(--sp-6, 1.5rem);
    font-size: var(--fs-sm, 0.875rem);
}

.wu-offer__comparison-title {
    font-weight: var(--fw-semi, 600);
    margin-bottom: var(--sp-4, 1rem);
    font-size: var(--fs-sm, 0.875rem);
}

.wu-offer__comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3, 0.75rem);
}

@media (max-width: 768px) {
    .wu-offer__comparison-grid {
        grid-template-columns: 1fr;
    }
}

.wu-offer__comparison-item {
    padding: var(--sp-4, 1rem);
    border-radius: var(--wu-radius-card, 6px);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
}

.wu-offer__comparison-item--winner {
    background: var(--c-accent-light);
    border-color: var(--c-accent);
}

.wu-offer__comparison-item__label {
    font-size: var(--fs-xs, 0.75rem);
    font-weight: var(--fw-medium, 500);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    margin-bottom: var(--sp-1, 0.25rem);
}

.wu-offer__comparison-item__price {
    font-size: var(--fs-xl, 1.5rem);
    font-weight: var(--fw-bold, 700);
    color: var(--c-text);
    margin-bottom: var(--sp-2, 0.5rem);
}

.wu-offer__comparison-item--winner .wu-offer__comparison-item__price {
    color: var(--c-accent-dark);
}

.wu-offer__comparison-item__note {
    font-size: var(--fs-xs, 0.75rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
    margin: 0;
}

/* ---- wu-selector (Orientierungsbox: Welches Paket passt?) --- */
.wu-selector {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: 0 var(--wu-radius-card, 6px) var(--wu-radius-card, 6px) 0;
    padding: var(--sp-6, 1.5rem) var(--sp-8, 2rem);
    margin-bottom: var(--sp-10, 2.5rem);
}

.wu-selector h3 {
    font-size: var(--fs-base, 1rem);
    font-weight: var(--fw-semi, 600);
    margin-bottom: var(--sp-4, 1rem);
}

.wu-selector__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4, 1rem);
}

.wu-selector__option {
    padding: var(--sp-4, 1rem);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius, 4px);
    font-size: var(--fs-sm, 0.875rem);
    line-height: var(--lh-base, 1.65);
}

.wu-selector__option strong {
    display: block;
    color: var(--c-accent);
    margin-bottom: var(--sp-1, 0.25rem);
}

/* ---- wu-cta ----------------------------------------------- */
.wu-cta {
    background: var(--c-accent-dark, #017f8e);
    color: var(--c-text-inverse);
    padding: var(--sp-20, 5rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.wu-cta h2 {
    color: var(--c-text-inverse);
    font-size: var(--fs-2xl, 1.875rem);
    font-weight: var(--fw-semi, 600);
    max-width: 560px;
    margin: 0 auto var(--sp-4, 1rem);
}

.wu-cta p {
    color: rgba(255,255,255,0.82);
    max-width: 520px;
    margin: 0 auto var(--sp-8, 2rem);
    font-size: var(--fs-md, 1.125rem);
}

.wu-cta .btn-primary {
    background: #fff;
    color: var(--c-accent);
    border-color: #fff;
}

.wu-cta .btn-primary:hover {
    background: #f0f0f0;
}

.wu-cta .btn-secondary {
    background: transparent;
    color: var(--c-text-inverse);
    border-color: rgba(255,255,255,0.5);
}

.wu-cta .btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}

.wu-cta .wu-selector__grid {
    margin-top: var(--sp-8, 2rem);
    margin-bottom: var(--sp-8, 2rem);
}

.wu-cta .wu-selector__option {
    color: var(--c-text);
    text-align: left;
}

.wu-cta .wu-selector__option a {
    color: var(--c-accent);
}

/* ---- wu-evidence ------------------------------------------ */
.wu-evidence {
    padding: var(--sp-6, 1.5rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
    font-style: italic;
}

.wu-evidence__source {
    display: block;
    margin-top: var(--sp-4, 1rem);
    font-style: normal;
    color: var(--c-text-muted);
}

/* ---- wu-status -------------------------------------------- */
.wu-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
    padding: 3px var(--sp-3, 0.75rem);
    border-radius: var(--wu-radius-pill, 100px);
    font-size: var(--fs-xs, 0.75rem);
    font-weight: var(--fw-medium, 500);
    vertical-align: middle;
}

.wu-status--active {
    background: var(--wu-green-light, #e6f4f1);
    color: var(--wu-green, #1a7c68);
    border: 1px solid var(--wu-green-border, rgba(26, 124, 104, 0.2));
}

.wu-status--planned {
    background: var(--c-surface);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

.wu-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ---- wu-chip ---------------------------------------------- */
.wu-process__item .wu-chip {
    position: absolute;
    top: var(--sp-4, 1rem);
    right: var(--sp-4, 1rem);
}

.wu-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-3, 0.75rem);
    border-radius: var(--wu-radius-pill, 100px);
    font-size: 0.75rem;
    font-weight: var(--fw-medium, 500);
    vertical-align: middle;
    background: var(--c-surface);
    color: var(--c-text-muted);
    border: 1px solid var(--c-accent-dark);
}

/* ---- wu-method-card --------------------------------------- */
.wu-method-card {
    display: flow-root;
    padding: var(--sp-10, 2rem);
    padding-top: var(--sp-5);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-accent);
    border-radius: var(--wu-radius-card, 6px);
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

@media (prefers-reduced-motion: no-preference) {
    .wu-method-card {
        transition: box-shadow var(--wu-transition), transform var(--wu-transition);
    }

    .wu-method-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}

.wu-method-card__icon {
    display: block;
    margin: 0 auto var(--sp-5);
    width: 72px;
    height: 72px;
    background-color: var(--c-accent);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transform: scale(1.25);
}

.wu-method-card__number {
    display: inline;
    font-size: calc(var(--fs-lg, 1.25rem) * 1.3);
    font-weight: var(--fw-semi, 600);
    color: var(--c-border);
    font-variant-numeric: tabular-nums;
}

.wu-method-card h3 {
    display: inline;
    font-size: var(--fs-lg, 1.25rem);
}

.wu-method-card p {
    color: var(--c-text-muted);
    margin: 0;
}

.wu-method-card p:not(.wu-method-card__number) {
    font-size: var(--fs-sm, 0.875rem);
    margin-top: var(--sp-3);
}


/* ---- wu-checklist ----------------------------------------- */
.wu-checklist {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3, 0.75rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
    padding: var(--sp-2, 0.5rem) 0;
}

.wu-checklist__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--c-success-text, #15803d);
    margin-top: 2px;
}

.wu-checklist__mark {
    display: block;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: var(--wu-green, #1a7c68);
    mask-image: url('/assets/img/icons/check.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('/assets/img/icons/check.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    margin-top: calc((var(--lh-base, 1.65) * var(--fs-sm, 0.875rem) - 1rem) / 2);
}

.wu-checklist__mark--negative {
    background-color: var(--c-text-muted);
    mask-image: url('/assets/img/icons/x.svg');
    -webkit-mask-image: url('/assets/img/icons/x.svg');
}

/* Mehrspalten-Satz statt Grid: entkoppelt die Zeilenhöhen beider Spalten,
   damit ein umbrechendes Item nicht die Abstände der Nachbarspalte verzerrt. */
.wu-checklist--2col {
    display: block;
    columns: 2;
    column-gap: var(--sp-8, 2rem);
}

.wu-checklist--2col li {
    break-inside: avoid;
}

@media (max-width: 600px) {
    .wu-checklist--2col {
        columns: 1;
    }
}

/* ---- wu-mini-audit ---------------------------------------- */
.wu-mini-audit {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block: var(--sp-6, 1.5rem);
}

.wu-mini-audit__item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--sp-4, 1rem);
    align-items: flex-start;
    padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-top: none;
}

.wu-mini-audit__item:first-child {
    border-top: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px) var(--wu-radius-card, 6px) 0 0;
}

.wu-mini-audit__item:last-child {
    border-radius: 0 0 var(--wu-radius-card, 6px) var(--wu-radius-card, 6px);
}

.wu-mini-audit__item:only-child {
    border-radius: var(--wu-radius-card, 6px);
}

.wu-mini-audit__item {
    transition: background var(--wu-transition), border-color var(--wu-transition);
}

.wu-mini-audit__item:hover {
    background: var(--c-bg);
    border-color: var(--wu-green-border, rgba(26, 124, 104, 0.2));
}

.wu-mini-audit__nr {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-accent-light);
    color: var(--c-accent);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-bold, 700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.wu-mini-audit__content p {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
    margin: var(--sp-2, 0.5rem) 0 0;
}

/* ---- wu-faq-item ------------------------------------------ */
.wu-faq-item {
    border: 1px solid var(--c-border);
    border-radius: var(--radius, 4px);
    overflow: hidden;
}

.wu-faq-item + .wu-faq-item {
    margin-top: var(--sp-2, 0.5rem);
}

.wu-faq-item__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
    background: var(--c-bg);
    font-size: var(--fs-base, 1rem);
    font-weight: var(--fw-semi, 600);
    text-align: left;
    cursor: pointer;
    border: none;
    gap: var(--sp-4, 1rem);
    transition: background var(--wu-transition, 0.15s ease);
    color: var(--c-text);
}

.wu-faq-item__question:hover {
    background: var(--c-surface);
}

.wu-faq-item__question[aria-expanded="true"] {
    background: var(--c-surface);
    color: var(--c-accent);
}

.wu-faq-item__question:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: -2px;
}

.wu-faq-item__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--c-accent);
    transition: transform var(--wu-transition-slow, 0.28s ease);
}

.wu-faq-item__question[aria-expanded="true"] .wu-faq-item__icon {
    transform: rotate(45deg);
}

.wu-faq-item__answer {
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}

.wu-faq-item__answer-inner {
    padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
    font-size: var(--fs-base, 1rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
}

.wu-faq-item__answer-inner p {
    margin-bottom: var(--sp-3, 0.75rem);
    max-width: 100%;
}

.wu-faq-item__answer-inner p:last-child {
    margin-bottom: 0;
}

/* Mit JS: geschlossen per max-height */
.js .wu-faq-item__answer {
    overflow: hidden;
    max-height: 0;
    border-top-width: 0;
}

.js .wu-faq-item__answer.is-open {
    max-height: 100dvh;
    border-top-width: 1px;
}

@media (prefers-reduced-motion: no-preference) {
    .js .wu-faq-item__answer {
        transition: max-height var(--wu-transition-slow, 0.28s ease),
                    border-top-width var(--wu-transition-slow, 0.28s ease);
    }
}

/* ---- wu-article-meta -------------------------------------- */
.wu-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4, 1rem);
    align-items: center;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    padding-bottom: var(--sp-4, 1rem);
    margin-bottom: var(--sp-6, 1.5rem);
    border-bottom: 1px solid var(--c-border);
}

/* ---- wu-breadcrumb ---------------------------------------- */
.wu-breadcrumb {
    display: flex;
    gap: var(--sp-2, 0.5rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-6, 1.5rem);
    flex-wrap: wrap;
}

.wu-breadcrumb a {
    color: var(--c-text-muted);
}

.wu-breadcrumb a:hover {
    color: var(--c-accent);
}

.wu-breadcrumb__sep {
    color: var(--c-border);
}

.wu-grid--sidebar > .wu-breadcrumb {
    grid-column: 1 / -1;
    margin-bottom: var(--sp-4, 1rem);
}

/* ---- wu-answer-box ---------------------------------------- */
.wu-answer-box {
    background: var(--c-accent-light);
    border-left: 4px solid var(--c-accent);
    padding: var(--sp-6, 1.5rem);
    border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
    margin-bottom: var(--sp-8, 2rem);
}

.wu-answer-box p {
    font-size: var(--fs-md, 1.125rem);
    color: var(--c-text);
    font-weight: var(--fw-medium, 500);
    margin-bottom: 0;
}

/* ---- wu-article-sidebar ----------------------------------- */
.wu-article-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + var(--sp-6, 1.5rem));
}

/* ---- wu-article-cta --------------------------------------- */
.wu-article-cta {
    padding: var(--sp-6, 1.5rem);
    background: var(--c-accent);
    border-radius: var(--wu-radius-card, 12px);
    color: var(--c-text-inverse, #ffffff);
}

.wu-article-cta h3 {
    font-size: var(--fs-md, 1.125rem);
    color: var(--c-text-inverse, #ffffff);
    margin-bottom: var(--sp-3, 0.75rem);
}

.wu-article-cta p {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-inverse-muted, rgba(255, 255, 255, 0.75));
    margin-bottom: var(--sp-4, 1rem);
}

.wu-article-cta .btn {
    background: var(--c-text-inverse, #ffffff);
    color: var(--c-accent);
    border-color: var(--c-text-inverse, #ffffff);
    width: 100%;
}

.wu-article-cta .btn:hover {
    background: #f0f0f0;
}

/* ---- wu-hinweis ------------------------------------------- */
.wu-hinweis {
    padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
    background: var(--c-surface-alt);
    border-left: 3px solid var(--c-border);
    border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
}

/* ---- wu-beispiel-block ------------------------------------ */
.wu-beispiel-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: var(--sp-8, 2rem) 0;
}

.wu-beispiel-punkt {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--sp-4, 1rem);
    align-items: flex-start;
    padding: var(--sp-6, 1.5rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-top: none;
}

.wu-beispiel-punkt:first-child {
    border-top: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}

.wu-beispiel-punkt:last-child {
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}

.wu-beispiel-punkt:only-child {
    border-radius: var(--radius-lg, 12px);
}

.wu-beispiel-nr {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-accent-light);
    color: var(--c-accent);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-bold, 700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.wu-beispiel-punkt p {
    margin-top: var(--sp-2, 0.5rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
}

/* ---- wu-prioritaeten-liste -------------------------------- */
.wu-prioritaeten-liste {
    list-style: decimal;
    padding-left: var(--sp-6, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4, 1rem);
    margin: var(--sp-4, 1rem) 0 var(--sp-8, 2rem) 0;
}

.wu-prioritaeten-liste li {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
}

.wu-prioritaeten-liste li strong {
    color: var(--c-text);
}

/* ---- wu-related-links ------------------------------------- */
.wu-related-links {
    padding: var(--sp-6, 1.5rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    margin-top: var(--sp-10, 2.5rem);
}

.wu-related-links__label {
    color: var(--c-text-muted);
    margin-bottom: var(--sp-4, 1rem);
    display: block;
}

.wu-related-links__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 0.5rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-related-links__list a {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-accent);
    font-weight: var(--fw-medium, 500);
}

/* ---- wu-link-list ----------------------------------------- */
.wu-link-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 0.5rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.wu-link-list a {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    text-decoration: none;
}

.wu-link-list a:hover {
    color: var(--c-accent);
}

/* ---- wu-meta ---------------------------------------------- */
.wu-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3, 0.75rem);
    align-items: center;
    font-size: var(--fs-xs, 0.75rem);
    color: var(--c-text-muted);
}

.wu-meta__sep {
    color: var(--c-border);
}

/* ---- wu-origin -------------------------------------------- */
.wu-origin {
    padding: var(--sp-5, 1.25rem) var(--sp-6, 1.5rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
    line-height: var(--lh-base, 1.65);
    max-width: 640px;
}

/* ---- wu-faq-category -------------------------------------- */
.wu-faq-category {
    font-size: var(--fs-xl, 1.5rem);
    font-weight: var(--fw-semi, 600);
    margin-top: var(--sp-12, 3rem);
    margin-bottom: var(--sp-6, 1.5rem);
}

.wu-faq-category:first-of-type {
    margin-top: 0;
}

/* ---- wu-step-note ----------------------------------------- */
.wu-step-note {
    margin-top: var(--sp-3, 0.75rem);
    color: var(--c-text-muted);
    font-size: var(--fs-sm, 0.875rem);
    line-height: var(--lh-base, 1.65);
}

/* ---- wu-form + wu-form-note ------------------------------- */
.wu-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5, 1.25rem);
}

.wu-form-note {
    font-size: var(--fs-xs, 0.75rem);
    color: var(--c-text-muted);
    padding-top: var(--sp-4, 1rem);
    border-top: 1px solid var(--c-border);
    margin: 0;
}

/* ---- wu-testimonial --------------------------------------- */
.wu-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6, 1.5rem);
}

.wu-testimonial {
    padding: var(--sp-8, 2rem);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 0.75rem);
}

/* Bleedet bis an Karten-Kante (negative Margin = eigenes Padding), oben
   abgerundet passend zur Karte, unten eckig wo das Zitat anschließt.
   Screenshot: Querformat, Seitenverhältnis 8:5 (z.B. 1200x750px WebP) --
   object-position:top schneidet bei zu hohen Bildern unten ab, daher sollte
   der wichtigste Bereich (Header/Hero der jeweiligen Website) oben sitzen. */
.wu-testimonial__screenshot {
    margin: calc(var(--sp-8, 2rem) * -1) calc(var(--sp-8, 2rem) * -1) 0;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    border-radius: var(--wu-radius-card, 6px) var(--wu-radius-card, 6px) 0 0;
    background: var(--c-surface);
}

.wu-testimonial__screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.wu-testimonial__screenshot--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    font-size: var(--fs-xs, 0.75rem);
    text-align: center;
}

.wu-testimonial__quote {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text);
    line-height: var(--lh-base, 1.65);
    font-style: italic;
    margin: 0;
    flex: 1;
}

/* Anführungszeichen als literale Zeichen statt open-quote/close-quote (aus
   client-delivery portiert, core/assets/css/webum.css .wu-testimonial-card p). */
.wu-testimonial__quote::before {
    content: "»";
    color: var(--c-accent);
    font-style: normal;
}

.wu-testimonial__quote::after {
    content: "«";
    color: var(--c-accent);
    font-style: normal;
}

.wu-testimonial__footer {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.wu-testimonial__author {
    font-weight: var(--fw-semi, 600);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text);
    font-style: normal;
}

.wu-testimonial__role {
    font-size: var(--fs-sm, 0.875rem);
    color: var(--c-text-muted);
}

.wu-testimonial__footer .wu-card__link-label {
    align-self: flex-end;
}

/* ============================================================
   5. FORMS
   ============================================================ */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
select,
textarea {
    font-size: var(--fs-base, 1rem);
    line-height: var(--lh-base, 1.65);
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius, 4px);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]):not([type="button"]):focus,
select:focus,
textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 2px rgba(2, 167, 187, 0.18);
    outline: none;
}


/* ============================================================
   6. UTILITIES
   ============================================================ */

.wu-text-muted  { color: var(--c-text-muted); }
.wu-text-accent {
    color: var(--c-accent);
/*     text-decoration: underline;
    text-decoration-color: var(--c-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px; */
}
.wu-text-center { text-align: center; }
.wu-text-base   { font-size: var(--fs-base); }
.wu-text-sm     { font-size: var(--fs-sm, 1rem); line-height: var(--lh-base); }
.wu-text-xs     { font-size: var(--fs-xs, 0.875rem); }
.wu-fw-normal   { font-weight: var(--fw-normal, 400); }

.wu-legend {
    font-size: var(--fs-sm, 1rem);
    font-weight: var(--fw-semi, 600);
    margin-bottom: var(--sp-2, 0.5rem);
    padding: 0;
}

strong {
    font-weight: var(--fw-semi, 600);
    color: var(--c-text);
}

mark {
    background: color-mix(in srgb, var(--c-surface-alt) 60%, transparent);
    color: inherit;
    padding: 0 0.15em;
    border-radius: 2px;
}

.wu-mt-4  { margin-top: var(--sp-4, 1rem); }
.wu-mt-6  { margin-top: var(--sp-6, 1.5rem); }
.wu-mt-8  { margin-top: var(--sp-8, 2rem); }
.wu-mt-10 { margin-top: var(--sp-10, 2.5rem); }
.wu-mt-12 { margin-top: var(--sp-12, 3rem); }

.wu-mb-2  { margin-bottom: var(--sp-2, 0.5rem); }
.wu-mb-4  { margin-bottom: var(--sp-4, 1rem); }
.wu-mb-6  { margin-bottom: var(--sp-6, 1.5rem); }
.wu-mb-8  { margin-bottom: var(--sp-8, 2rem); }
.wu-mb-12 { margin-bottom: var(--sp-12, 3rem); }

.wu-max-prose   { max-width: var(--wu-prose-width, 65ch); }
.wu-prose-wide  { max-width: 750px; }

.wu-prose p {
    max-width: var(--wu-prose-width, 65ch);
    margin-bottom: var(--sp-5);
}

.wu-prose h2 {
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-4);
}

.wu-prose h3 {
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
}

.wu-prose ul,
.wu-prose ol {
    list-style: disc;
    max-width: var(--wu-prose-width, 65ch);
    margin-left: var(--sp-6);
    margin-bottom: var(--sp-5);
}

.wu-prose ol {
    list-style: decimal;
}

.wu-prose li {
    margin-bottom: var(--sp-2);
}

.wu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4, 1rem);
    justify-content: center;
}


/* ============================================================
   6b. SCROLL-ANIMATIONEN — element-level IntersectionObserver
   Jedes Element animiert separat wenn es den Viewport betritt.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    /* --- Basis: alle beobachteten Elemente starten unsichtbar --- */
    .wu-card.anim-ready,
    .wu-method-card.anim-ready,
    .wu-process__item.anim-ready,
    .wu-offer.anim-ready,
    .wu-testimonial.anim-ready,
    .wu-mini-audit__item.anim-ready,
    .wu-before-after.anim-ready {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }

    /* --- Checklist als Einheit: Items animieren innerhalb der Liste --- */
    .wu-checklist.anim-ready li {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* --- Sichtbar-Zustand --- */
    .wu-card.is-visible,
    .wu-method-card.is-visible,
    .wu-process__item.is-visible,
    .wu-offer.is-visible,
    .wu-testimonial.is-visible,
    .wu-mini-audit__item.is-visible,
    .wu-before-after.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .wu-checklist.is-visible li {
        opacity: 1;
        transform: translateY(0);
    }

    /* --- Stagger: Cards und Method-Cards im Grid (pro Container) --- */
    .wu-card.is-visible:nth-child(1),
    .wu-method-card.is-visible:nth-child(1) { transition-delay:   0ms; }
    .wu-card.is-visible:nth-child(2),
    .wu-method-card.is-visible:nth-child(2) { transition-delay:  90ms; }
    .wu-card.is-visible:nth-child(3),
    .wu-method-card.is-visible:nth-child(3) { transition-delay: 180ms; }
    .wu-card.is-visible:nth-child(4),
    .wu-method-card.is-visible:nth-child(4) { transition-delay: 270ms; }
    .wu-card.is-visible:nth-child(5),
    .wu-method-card.is-visible:nth-child(5) { transition-delay: 360ms; }
    .wu-card.is-visible:nth-child(6),
    .wu-method-card.is-visible:nth-child(6) { transition-delay: 450ms; }

    /* --- Stagger: Checklist-Items — Delays werden per JS inline gesetzt (generisch) --- */

    /* --- Stagger: Process-Items --- */
    .wu-process__item.is-visible:nth-child(1)  { transition-delay:   0ms; }
    .wu-process__item.is-visible:nth-child(2)  { transition-delay: 110ms; }
    .wu-process__item.is-visible:nth-child(3)  { transition-delay: 220ms; }
    .wu-process__item.is-visible:nth-child(4)  { transition-delay: 330ms; }
    .wu-process__item.is-visible:nth-child(5)  { transition-delay: 440ms; }
    .wu-process__item.is-visible:nth-child(6)  { transition-delay: 550ms; }
    .wu-process__item.is-visible:nth-child(7)  { transition-delay: 650ms; }
    .wu-process__item.is-visible:nth-child(8)  { transition-delay: 750ms; }
    .wu-process__item.is-visible:nth-child(9)  { transition-delay: 840ms; }
    .wu-process__item.is-visible:nth-child(10) { transition-delay: 930ms; }

    /* --- Stagger: Horizontaler Process (index.php "So läuft es ab") --- */
    .wu-process--horizontal .wu-process__item.is-visible:nth-child(1) { transition-delay:   0ms; }
    .wu-process--horizontal .wu-process__item.is-visible:nth-child(2) { transition-delay: 230ms; }
    .wu-process--horizontal .wu-process__item.is-visible:nth-child(3) { transition-delay: 460ms; }

    /* --- Stagger: Testimonials --- */
    .wu-testimonial.is-visible:nth-child(1) { transition-delay:   0ms; }
    .wu-testimonial.is-visible:nth-child(2) { transition-delay: 100ms; }
    .wu-testimonial.is-visible:nth-child(3) { transition-delay: 200ms; }

    /* --- Stagger: Mini-Audit-Items --- */
    .wu-mini-audit__item.is-visible:nth-child(1) { transition-delay:   0ms; }
    .wu-mini-audit__item.is-visible:nth-child(2) { transition-delay:  90ms; }
    .wu-mini-audit__item.is-visible:nth-child(3) { transition-delay: 180ms; }
    .wu-mini-audit__item.is-visible:nth-child(4) { transition-delay: 270ms; }
}

/* ============================================================
   6b. wu-info — Inline-Erklärbox
   ============================================================ */

.wu-info {
    position: relative;
    display: inline-block;
}

.wu-info__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: 1.25px solid currentColor;
    background: none;
    cursor: pointer;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
    color: var(--c-text-muted);
    transition: color var(--wu-transition, 0.15s), border-color var(--wu-transition, 0.15s);
    margin-left: 0.3rem;
}

.wu-info__trigger:hover,
.wu-info__trigger[aria-expanded="true"] {
    color: var(--wu-green);
    border-color: var(--wu-green);
}

.wu-info__box {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 0.5rem);
    z-index: 100;
    width: 17rem;
    background: var(--c-bg, #fff);
    border: 1px solid var(--c-border);
    border-radius: var(--wu-radius-card, 6px);
    padding: var(--sp-4, 1rem);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    font-size: var(--fs-xs, 0.875rem);
    color: var(--c-text);
}

.wu-info__box p {
    margin: 0 0 var(--sp-3, 0.75rem);
}

.wu-info__cta {
    font-weight: 500;
    color: var(--wu-green);
    text-decoration: none;
}

.wu-info__cta:hover {
    text-decoration: underline;
}


/* ============================================================
    7. RESPONSIVE ADJUSTMENTS

    Breakpoint-Strategie:
    - max-width: 1024px  → Tablet: Grids reduzieren, Sidebar einspaltig
    - min-width: 1440px  → Large Desktop: großzügigere Abstände,
                           breitere Container, entspanntere Typografie
    - max-width: 768px   → Mobil: alle Grids einspaltig, kompakte Abstände

    Wichtig: Large-Desktop-Regeln greifen NUR bei >= 1440px und
    beeinflussen Tablet/Mobil nicht. Keine globalen Änderungen.
    ============================================================ */

@media (max-width: 1024px) {
    .wu-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .wu-grid--sidebar {
        grid-template-columns: 1fr;
        gap: var(--sp-10, 2.5rem);
    }

    .wu-hero__visual {
        width: 340px;
        max-width: 40%;
    }

    .wu-article-sidebar {
        position: static;
    }
}

@media (min-width: 1440px) {
    .wu-section {
        padding-block: var(--sp-24, 6rem);
    }

    .wu-hero {
        padding-block: calc(var(--sp-24, 6rem) + 1.5rem);
    }

    .wu-hero__inner {
        gap: var(--sp-20, 5rem);
    }

    .wu-hero__headline {
        margin-bottom: var(--sp-8, 2rem);
    }

    .wu-hero__sub {
        max-width: 680px;
        margin-bottom: var(--sp-12, 3rem);
    }

    .wu-hero__actions {
        gap: var(--sp-6, 1.5rem);
    }

    .wu-hero__visual {
        width: 480px;
        max-width: 50%;
    }

    .wu-section-header {
        max-width: 800px;
    }

    .wu-lead {
        max-width: 70ch;
    }

    .wu-max-prose {
        max-width: 70ch;
    }

    .wu-prose p,
    .wu-prose ul,
    .wu-prose ol {
        max-width: 70ch;
    }

    .wu-prose-wide {
        max-width: 820px;
    }

    .wu-eyebrow {
        margin-bottom: var(--sp-5, 1.25rem);
    }

    .wu-grid {
        gap: var(--sp-8, 2rem);
    }

    .wu-grid--2,
    .wu-grid--3 {
        gap: var(--sp-10, 2.5rem);
    }

    .wu-grid--2-1 {
        gap: var(--sp-10, 2.5rem);
    }

    .wu-grid--sidebar {
        gap: var(--sp-20, 5rem);
        grid-template-columns: 1fr 340px;
    }

    .wu-grid--wide {
        gap: var(--sp-20, 5rem);
    }

    .wu-card {
        padding: var(--sp-10, 2.5rem);
    }

    .wu-form-layout {
        gap: var(--sp-10, 2.5rem);
        padding: var(--sp-20, 5rem) 0;
    }

    .wu-cta {
        padding-block: var(--sp-24, 6rem);
    }

    .wu-cta h2 {
        max-width: 640px;
    }

    .wu-cta p {
        max-width: 600px;
    }

    .wu-next-step {
        gap: var(--sp-10, 2.5rem);
        padding: var(--sp-10, 2.5rem) var(--sp-12, 3rem);
    }

    .wu-contact-panel {
        padding: var(--sp-10, 2.5rem);
        gap: var(--sp-5, 1.25rem);
    }
}

@media (max-width: 768px) {
    .wu-section {
        padding-block: var(--sp-12, 3rem);
    }

    .wu-hero {
        padding-block: var(--sp-16, 4rem);
    }

    .wu-hero__inner {
        flex-direction: column;
        gap: var(--sp-10, 2.5rem);
    }

    .wu-hero__visual {
        width: 100%;
        max-width: 320px;
        margin-inline: auto;
        overflow: hidden;
    }

    .wu-hero__visual img {
        width: 100%;
        margin-left: 0;
    }

    /* Startseiten-Hero: einspaltig. Bild liegt als Layer im Hintergrund
       oben rechts (position:absolute, z-index:1, an .wu-hero__inner
       verankert), Content (Headline/Sub/CTA) fließt normal in einer
       Spalte darüber (z-index:2). Breite/max-width am Bild halten es
       sicher innerhalb des Viewports. */
    .wu-hero--visual {
        padding-top: var(--sp-8, 2rem);
    }

    .wu-hero--visual .wu-hero__inner {
        position: relative;
    }

    .wu-hero--visual .wu-hero__content {
        position: relative;
        z-index: 2;
    }

    /* Sub-Text startet erst unterhalb der Grafik statt sie zu überlappen
       (nur die Headline soll überlagern) — Wert grob an Bildhöhe bei
       gängigen Mobile-Breiten angepasst, ggf. live nachjustieren. */
    .wu-hero--visual .wu-hero__sub {
        margin-top: 13rem;
    }

    .wu-hero--visual .wu-hero__visual {
        position: absolute;
        top: 3.5rem;
        right: -4rem;
        width: 100%;
        max-width: 500px;
        margin-inline: 0;
        z-index: 0;
    }

    .wu-hero--visual .wu-hero__visual img {
        width: 100%;
        max-width: none;
        margin-left: 0;
        height: auto;
    }

    /* .btn erzwingt sonst white-space:nowrap; lange CTA-Texte wie
       "Kostenlosen Website-Check anfragen" (wiederkehrend in
       .wu-hero__actions und .wu-actions auf mehreren Seiten) sind
       dadurch bei schmalen Viewports breiter als der verfügbare Platz
       und werden vom jeweiligen overflow:hidden-Container (.wu-hero,
       .wu-cta) abgeschnitten statt zu umbrechen. */
    .wu-hero__actions .btn,
    .wu-actions .btn {
        white-space: normal;
        text-align: center;
    }

    .wu-container {
        padding-inline: var(--sp-4, 1rem);
    }

    .wu-grid--2,
    .wu-grid--2-1,
    .wu-grid--3,
    .wu-form-layout {
        grid-template-columns: 1fr;
    }

    .wu-proof {
        grid-template-columns: 1fr;
        gap: var(--sp-4, 1rem);
    }

    .wu-before-after {
        grid-template-columns: 1fr;
    }

    .wu-before-after__col--before {
        border-right: none;
        border-bottom: 1px solid var(--c-border);
    }

    .wu-before-after__col {
        padding: var(--sp-6, 1.5rem);
    }

    .wu-person {
        flex-direction: column;
    }

    .wu-next-step {
        padding: var(--sp-6, 1.5rem);
    }

    .wu-offer {
        padding: var(--sp-6, 1.5rem);
    }

    .wu-offer__header {
        flex-direction: column;
    }

    .wu-offer__pricing {
        text-align: left;
    }

    .wu-offer__body {
        grid-template-columns: 1fr;
        gap: var(--sp-6, 1.5rem);
    }

    .wu-selector__grid {
        grid-template-columns: 1fr;
    }

    .wu-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .wu-cta {
        padding: var(--sp-12, 3rem) 0;
    }
}

/* ============================================================
   Interaktive Demo-Seite (/demo) — Slice 1: Grundgerüst + 9 Sektionen
   ============================================================ */

.demo-logo {
    display: block;
    height: auto;
    margin-bottom: var(--sp-5, 1.25rem);
}

.demo-point {
    position: absolute;
    top: 1rem;
    left: 50%;
    margin-left: -1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 2.5rem;
    text-align: center;
    z-index: 5;
    cursor: pointer;
}

/* Kreisfläche + Puls-Animation liegen auf einem eigenen ::before-Layer statt
   direkt auf .demo-point — sonst skaliert transform:scale() die Zahl im
   Element gleich mit, was bei jedem Animationsframe sichtbar ruckelt
   (Subpixel-Neurendering des Texts). z-index:-1 hält den Kreis innerhalb des
   von .demo-point (position+z-index) aufgespannten Stacking-Contexts hinter
   der normal fließenden Zahl, ohne dass die Zahl selbst positioniert sein muss. */
.demo-point::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    /* --c-accent ist innerhalb .demo-brand auf die Farbe der fiktiven Firma
       überschrieben — die Tour-Punkte gehören aber zu Webums eigener
       Erklär-UI und sollen immer Webums echte Akzentfarbe zeigen. */
    background: var(--webum-tour-accent);
    animation: demo-pulse 2.5s ease-in-out infinite;
}

.demo-point:focus-visible {
    outline: 2px solid var(--webum-tour-accent);
    outline-offset: 3px;
}

@keyframes demo-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0.15); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(0,0,0,0); }
}

@media (max-width: 767px) {
    .demo-point {
        top: 0.5rem;
        margin-left: -1rem;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        font-size: 0.875rem;
    }
}

.wu-section--cta {
    position: relative;
}

/* Demo-Trust-Bar */
.wu-demo-trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4, 1rem) 0;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8, 2rem) 0;
}

.wu-demo-trust-bar__item {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--sp-2, 0.5rem);
    padding-inline: clamp(var(--sp-2, 0.5rem), 1.5vw, var(--sp-4, 1rem));
    font-size: clamp(var(--fs-sm, 1rem), 0.2rem + 1.1vw, var(--fs-lg, 1.25rem));
    font-weight: var(--fw-medium, 500);
    color: var(--c-text-muted);
}

.wu-demo-trust-bar__value {
    color: color-mix(in srgb, var(--c-warm) 72%, var(--c-text));
    font-weight: var(--fw-semi, 600);
}

.wu-demo-trust-bar__label {
    color: var(--c-text-muted);
}

/* Modal */
.demo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6, 1.5rem);
}

.demo-modal[hidden] {
    display: none;
}

.demo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.demo-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: var(--radius, 0.5rem);
    padding: var(--sp-8, 2rem);
    max-width: 32rem;
    width: 100%;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.demo-modal__close {
    position: absolute;
    top: var(--sp-4, 1rem);
    right: var(--sp-4, 1rem);
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--c-text, #333);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-modal__close:hover {
    background: var(--c-bg-muted, #f5f5f5);
}

.demo-modal__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--webum-tour-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: var(--sp-4, 1rem);
}

.demo-modal__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--sp-3, 0.75rem) 0;
    color: var(--c-text, #1a1a1a);
    padding-right: var(--sp-8, 2rem);
}

.demo-modal__text {
    margin: 0;
    line-height: 1.6;
    color: var(--c-text, #333);
}

@media (max-width: 767px) {
    .demo-modal {
        padding: var(--sp-4, 1rem);
    }
    .demo-modal__dialog {
        padding: var(--sp-6, 1.5rem);
    }
}


/* Floating Demo-Banner — im normalen Textfluss zentriert (kein position:fixed
   mehr), width:max-content + margin-inline:auto zentriert die Box selbst,
   max-width verhindert Overflow bei schmalen Viewports trotz des jetzt
   deutlich längeren Textes. */
.demo-floating-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin-inline: auto;
    background: var(--c-text, #1a1a1a);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: var(--fs-xxs, 0.75rem);
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-align: center;
}

@media (max-width: 767px) {
    .demo-floating-banner {
        font-size: 0.8rem;
    }
}

/* Slice 2: Firmen-Nav (Hamburger-Menü) + sticky Webum-Rückweg-Leiste
   (Issue 133/136) — vorher inline in demo.php, hierher konsolidiert
   (28.07.2026), damit alle .demo-*-Klassenregeln an einer Stelle leben,
   analog zu jeder anderen Seite im Projekt (keine eigenen <style>-Blöcke). */

/* Positionierungskontext für die nummerierten Tour-Punkte (.demo-point,
   position:absolute) — ohne das hier hätten Punkte 2-9 keinen positionierten
   Vorfahren und würden alle am selben Fleck oben im Dokument landen. Auf
   .demo-brand gescoped (nicht global .wu-section), da diese Regel nur für
   die Demo-Seite gilt — .wu-section wird sitewide auf jeder Seite verwendet. */
.demo-brand .wu-section {
    position: relative;
}

/* wu-grid--3 wechselt bei 1024px auf 2 Spalten (client-delivery-Standard) —
   bei genau 3 Karten hängt die dritte dann allein in Zeile 2. Hier: dritte
   Karte spannt im Tablet-Bereich volle Breite statt verwaist zu wirken. */
@media (max-width: 1024px) and (min-width: 769px) {
    .demo-cards-grid > :nth-child(3) {
        grid-column: 1 / -1;
        max-width: 480px;
        margin-inline: auto;
    }
}

/* Zwei gleichwertige CTAs im Hero nebeneinander (Anfrage vs. Bewerbung),
   beide bewusst nicht funktional. Eigener .demo-point-Anker, dessen
   top-Wert überschrieben wird, damit der Punkt oberhalb des zweiten
   Buttons schwebt statt ihn zu überlappen (Standard-.demo-point sitzt
   sonst mittig auf dem Element). */
.demo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4, 1rem);
    margin-top: var(--sp-6, 1.5rem);
}
.demo-hero-cta-wrap {
    position: relative;
    display: inline-block;
}
.demo-hero-cta-wrap .demo-point {
    top: -2.25rem;
}

/* Minimale Webum-Rückweg-Leiste — bewusst außerhalb von .demo-brand, bleibt
   echtes Webum-Türkis. Ersetzt die volle Haupt-Navigation, damit die Demo
   nicht wie die eigene Navigation der Beispielfirma wirkt. sticky statt fixed:
   die Bar bleibt oben sichtbar, bleibt aber Teil des normalen Dokumentflusses
   und reserviert automatisch genau ihre eigene (Umbruch-abhängige) Höhe —
   .demo-nav braucht dadurch keine per JS gemessene Kompensation mehr. */
.demo-webum-bar {
    background: var(--c-accent-dark);
    border-bottom: 1.5px solid var(--c-border-dark, rgba(255, 255, 255, 0.15));
    padding-block: var(--sp-3, 0.75rem);
    position: sticky;
    top: 0;
    z-index: 900;
}
.demo-webum-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-3, 0.75rem);
}
.demo-webum-bar__link {
    font-size: var(--fs-xxs, 0.75rem);
    color: var(--c-text-inverse-muted);
    text-decoration: underline;
}
.demo-webum-bar__link:hover {
    color: var(--c-accent-light);
}

/* Schematische Navigation der Beispielfirma — bewusst einfach (nur Logo +
   Anker-Links auf die Seitensektionen), zeigt das Prinzip "eigene Navigation
   gehört zur Kundenseite", ohne eine echte Mehrseiten-Site vorzutäuschen. */
.demo-nav {
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    padding-block: var(--sp-4, 1rem);
    /* Positionierungskontext für den mobilen Dropdown (.demo-nav__links,
       position:absolute) — analog zu .site-header/.nav-links im echten Header.
       z-index nötig, sonst rendert der geöffnete Dropdown (z-index:auto, tritt
       im DOM vor .wu-hero auf) hinter der direkt folgenden Hero-Sektion
       (ebenfalls position:relative) statt darüber — echter Header hat dasselbe
       Problem über .site-header { z-index: 200 } gelöst. */
    position: relative;
    z-index: 100;
}
.demo-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--sp-2, 0.5rem);
    color: var(--c-text);
}
.demo-nav-toggle svg {
    width: 24px;
    height: 24px;
}
.demo-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4, 1rem);
}
.demo-nav .demo-logo {
    margin-bottom: 0;
    height: 80px;
    width: auto;
}
.demo-nav__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5, 1.25rem);
    list-style: none;
}
.demo-nav__links a {
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-medium, 500);
    color: var(--c-text);
    text-decoration: none;
}
.demo-nav__links a:hover {
    color: var(--c-accent);
}
/* Mobiles Dropdown-Menü — 1:1 portiert aus includes/header.php (.nav-toggle/
   .nav-links). Muss NACH allen unbedingten .demo-nav__inner/.demo-nav__links/
   .demo-logo-Basisregeln oben stehen (gleiche Spezifität, spätere Regel
   gewinnt) — stand dieser Block vorher VOR den Basisregeln, gewann z.B. das
   unbedingte "display: flex" der Basisregel gegen das hier gesetzte
   "display: none", das Dropdown war dadurch nie wirklich zu (unabhängig vom
   Klick-Handler, der aria/is-open korrekt togglete — nur ohne sichtbare
   Wirkung, weil display effektiv immer flex blieb). */
@media (max-width: 900px) {
    .demo-nav-toggle {
        display: block;
        flex-shrink: 0;
    }
    .demo-nav__inner {
        flex-wrap: nowrap;
    }
    .demo-nav .demo-logo {
        height: 48px;
        flex-shrink: 0;
    }
    .demo-nav__links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--c-bg);
        border-bottom: 1px solid var(--c-border);
        padding: var(--sp-4, 1rem) var(--sp-6, 1.5rem);
        box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.1));
    }
    .demo-nav__links.is-open {
        display: flex;
    }
    .demo-nav__links a {
        display: block;
        padding: var(--sp-3, 0.75rem) var(--sp-6, 1.5rem);
        margin-inline: calc(-1 * var(--sp-6, 1.5rem));
        font-size: var(--fs-base, 1rem);
        border-bottom: 1px solid var(--c-border);
    }
    .demo-nav__links a:last-child {
        border-bottom: none;
    }
}