/**
 * Design-Stil: Editorial (Schübeler Consulting v2026)
 *
 * Aufbruch-UI auf bestehender SC-CI:
 *   - Asymmetrisches Hero-Split-Grid
 *   - Trust-Bar als Marquee-Ticker
 *   - Services mit Sticky-Scroll-Reveal
 *   - Expert als nummerierte Karteikarten
 *   - CTA als Full-Bleed mit Diagonal-Headline
 *
 * Tech-Schuld vermeiden:
 *   - Ein einziges Token-System (alles über --ed-* Variablen)
 *   - color-mix() statt Hardcoded-Hover-Farben
 *   - :has(), container-queries, scroll-driven animations (CSS-native)
 *   - Maximal 3× !important (nur gegen Layout-Reset von .schuebeler-card)
 *   - Scroll-Driven Animations mit prefers-reduced-motion-Schutz
 *
 * Scope: body.design-editorial (greift parallel zu style.css)
 *
 * @package Schuebeler_Consulting
 * @since   1.41.0
 */


/* ============================================================
   01 — TOKENS (lokaler Override, basiert auf SC-CI)
   ============================================================ */

body.design-editorial {
    /* Brand bleibt: Electric-Blue als Akzent, kein Re-Branding */
    --ed-accent:        var(--electric-blue, #0066FF);
    --ed-accent-soft:   color-mix(in srgb, var(--ed-accent) 14%, transparent);
    --ed-accent-deep:   color-mix(in srgb, var(--ed-accent) 80%, #000);

    /* Surface-Layer */
    --ed-ink:           #0B0F19;             /* Tinten-Schwarz für Text */
    --ed-ink-soft:      #1A2233;
    --ed-paper:         #FFFFFF;
    --ed-paper-warm:    #F7F5F0;             /* warm-weiße Sektion */
    --ed-paper-cool:    #F1F4F9;             /* kühl-weiße Sektion */
    --ed-line:          color-mix(in srgb, var(--ed-ink) 12%, transparent);
    --ed-line-strong:   color-mix(in srgb, var(--ed-ink) 25%, transparent);

    /* Typo-Skala (Major Third + Display) */
    --ed-text-xs:       0.8125rem;
    --ed-text-sm:       0.9375rem;
    --ed-text-base:     1.0625rem;
    --ed-text-lg:       1.25rem;
    --ed-text-xl:       1.5rem;
    --ed-text-2xl:      2rem;
    --ed-text-3xl:      2.75rem;
    --ed-display-md:    clamp(2.5rem, 4vw + 1rem, 4.5rem);
    --ed-display-lg:    clamp(3.5rem, 6vw + 1rem, 7rem);
    --ed-display-xl:    clamp(4rem, 8vw + 1rem, 9.5rem);

    /* Spacing-Rhythmik (modular, basiert auf 8) */
    --ed-s-1:           0.5rem;
    --ed-s-2:           1rem;
    --ed-s-3:           1.5rem;
    --ed-s-4:           2rem;
    --ed-s-6:           3rem;
    --ed-s-8:           4rem;
    --ed-s-12:          6rem;
    --ed-s-16:          8rem;
    --ed-s-24:          12rem;

    /* Container */
    --ed-container:     min(1320px, calc(100vw - 2 * var(--ed-s-6)));

    /* Schatten — sehr zurückhaltend, kein Glow */
    --ed-shadow-sm:     0 1px 2px color-mix(in srgb, var(--ed-ink) 8%, transparent);
    --ed-shadow-md:     0 4px 16px -2px color-mix(in srgb, var(--ed-ink) 12%, transparent);
    --ed-shadow-lg:     0 24px 48px -8px color-mix(in srgb, var(--ed-ink) 18%, transparent);

    /* Motion */
    --ed-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
    --ed-dur-fast:      180ms;
    --ed-dur-base:      280ms;
    --ed-dur-slow:      520ms;

    /* Globaler Overrides */
    color: var(--ed-ink);
    background: var(--ed-paper);
    font-family: var(--font-primary, 'Inter', sans-serif);
    font-size: var(--ed-text-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ============================================================
   02 — TYPO-SYSTEM (Display + Headlines + Body)
   ============================================================ */

body.design-editorial h1,
body.design-editorial h2,
body.design-editorial h3,
body.design-editorial h4 {
    font-family: var(--font-heading, 'Manrope', sans-serif);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ed-ink);
    text-wrap: balance;
    margin: 0;
}

body.design-editorial h1 { font-size: var(--ed-display-lg); line-height: 0.95; letter-spacing: -0.035em; }
body.design-editorial h2 { font-size: var(--ed-display-md); line-height: 1.05; letter-spacing: -0.025em; }
body.design-editorial h3 { font-size: var(--ed-text-2xl); line-height: 1.15; }
body.design-editorial h4 { font-size: var(--ed-text-xl); line-height: 1.2; font-weight: 700; }

body.design-editorial p {
    text-wrap: pretty;
    color: color-mix(in srgb, var(--ed-ink) 88%, transparent);
}

/* Links unterstreichen NUR im redaktionellen Fließtext.
   Nicht in Headlines, Karten, Menüs, Footer, Buttons. */
body.design-editorial p > a:not(.ed-btn):not([class*="btn"]):not([class*="nav"]):not([class*="menu"]),
body.design-editorial li > a:not(.ed-btn):not([class*="btn"]):not([class*="nav"]):not([class*="menu"]) {
    color: var(--ed-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--ed-dur-fast) var(--ed-ease);
}

body.design-editorial p > a:hover,
body.design-editorial li > a:hover {
    color: var(--ed-accent-deep);
    text-decoration-thickness: 2px;
}

/* Headline-, Card-, Menu-, Nav-, Footer-, Breadcrumb-Links: NIE underline */
body.design-editorial h1 a,
body.design-editorial h2 a,
body.design-editorial h3 a,
body.design-editorial h4 a,
body.design-editorial nav a,
body.design-editorial .schuebeler-nav a,
body.design-editorial .schuebeler-footer a,
body.design-editorial .schuebeler-blog-card a,
body.design-editorial .schuebeler-blog-card-title a,
body.design-editorial .schuebeler-breadcrumbs a,
body.design-editorial [class*="menu"] a,
body.design-editorial [class*="card"] a:not(.ed-btn):not([class*="btn"]) {
    text-decoration: none !important;
    color: inherit;
}

/* Index-Zeichen: kleine Mono-Nummern vor Sections */
body.design-editorial .ed-index {
    display: inline-flex;
    align-items: center;
    gap: var(--ed-s-2);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: var(--ed-text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ed-accent);
    margin-bottom: var(--ed-s-3);
}

body.design-editorial .ed-index::before {
    content: "";
    display: inline-block;
    width: 2.5rem;
    height: 1px;
    background: var(--ed-accent);
}


/* ============================================================
   03 — LAYOUT-SYSTEM (Container, Grids)
   ============================================================ */

body.design-editorial .schuebeler-container {
    width: var(--ed-container);
    margin: 0 auto;
    padding: 0;
}

body.design-editorial .schuebeler-section {
    padding-block: var(--ed-s-16);
    container-type: inline-size;
}

body.design-editorial .schuebeler-section.schuebeler-section-alt {
    background: var(--ed-paper-warm);
}


/* ============================================================
   04 — HERO (asymmetrisches Split-Grid)
   ============================================================ */

body.design-editorial .schuebeler-hero {
    padding-block: var(--ed-s-16) var(--ed-s-12);
    background: var(--ed-paper);
    position: relative;
    overflow: hidden;
    container-type: inline-size;
}

body.design-editorial .schuebeler-hero::before {
    /* Subtile diagonale Linie als Stilmittel */
    content: "";
    position: absolute;
    top: 0;
    right: -10%;
    width: 60%;
    height: 100%;
    background: var(--ed-paper-cool);
    transform: skewX(-12deg);
    z-index: 0;
}

body.design-editorial .schuebeler-hero > .schuebeler-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--ed-s-8);
    align-items: end;
    min-height: 70vh;
}

body.design-editorial .schuebeler-hero-content {
    max-width: none;
    text-align: left;
}

body.design-editorial .schuebeler-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ed-s-2);
    padding: var(--ed-s-1) var(--ed-s-3);
    background: var(--ed-ink);
    color: var(--ed-paper);
    border-radius: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--ed-text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--ed-s-6);
}

body.design-editorial .schuebeler-hero-badge::before {
    content: "01";
    color: var(--ed-accent);
    font-weight: 700;
}

body.design-editorial .schuebeler-hero-title {
    font-size: var(--ed-display-xl);
    line-height: 0.92;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: var(--ed-ink);
    margin-bottom: var(--ed-s-6);
}

body.design-editorial .schuebeler-hero-subtitle,
body.design-editorial .schuebeler-hero-tagline {
    font-size: var(--ed-text-xl);
    line-height: 1.5;
    color: color-mix(in srgb, var(--ed-ink) 75%, transparent);
    max-width: 38ch;
    margin-bottom: var(--ed-s-6);
}

body.design-editorial .schuebeler-hero-cta {
    display: flex;
    gap: var(--ed-s-3);
    flex-wrap: wrap;
    margin-top: var(--ed-s-6);
}

/* Side-Pillar: rechts neben Hero, sticky/abgesetzt */
body.design-editorial .schuebeler-hero-aside,
body.design-editorial .schuebeler-hero-image {
    position: relative;
    align-self: end;
    padding: var(--ed-s-6);
    background: var(--ed-ink);
    color: var(--ed-paper);
    border-radius: 0;
    transform: translateY(2rem);
}

body.design-editorial .schuebeler-hero-aside::before,
body.design-editorial .schuebeler-hero-image::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 33%;
    height: 4px;
    background: var(--ed-accent);
}

/* Mobile-Hero: Single-Column */
@container (max-width: 900px) {
    body.design-editorial .schuebeler-hero > .schuebeler-container {
        grid-template-columns: 1fr;
    }
    body.design-editorial .schuebeler-hero::before { display: none; }
    body.design-editorial .schuebeler-hero-aside { transform: none; }
}


/* ============================================================
   05 — TRUST-BAR als Marquee-Ticker
   ============================================================ */

body.design-editorial .schuebeler-trust-bar {
    background: var(--ed-ink);
    color: var(--ed-paper);
    padding-block: var(--ed-s-3);
    overflow: hidden;
    position: relative;
    border-block: 1px solid var(--ed-line-strong);
}

body.design-editorial .schuebeler-trust-bar > .schuebeler-container {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

body.design-editorial .schuebeler-trust-grid {
    display: flex !important;          /* überschreibt Grid aus style.css */
    flex-wrap: nowrap !important;
    gap: var(--ed-s-12);
    width: max-content;
    animation: ed-marquee 38s linear infinite;
    will-change: transform;
}

body.design-editorial .schuebeler-trust-grid:hover { animation-play-state: paused; }

body.design-editorial .schuebeler-trust-item {
    display: flex;
    align-items: baseline;
    gap: var(--ed-s-2);
    white-space: nowrap;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

body.design-editorial .schuebeler-trust-value {
    font-family: var(--font-heading, sans-serif);
    font-size: var(--ed-text-3xl);
    font-weight: 800;
    color: var(--ed-accent);
    letter-spacing: -0.02em;
}

body.design-editorial .schuebeler-trust-label {
    font-size: var(--ed-text-base);
    color: color-mix(in srgb, var(--ed-paper) 70%, transparent);
    text-transform: none;
    letter-spacing: 0;
}

@keyframes ed-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    body.design-editorial .schuebeler-trust-grid {
        animation: none;
        flex-wrap: wrap !important;
        justify-content: center;
        width: 100%;
    }
}


/* ============================================================
   06 — SERVICES als Sticky-Scroll-Reveal
   ============================================================ */

body.design-editorial .schuebeler-services {
    padding-block: var(--ed-s-24) var(--ed-s-16);
    background: var(--ed-paper);
}

body.design-editorial .schuebeler-services-header {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--ed-s-8);
    margin-bottom: var(--ed-s-12);
    align-items: end;
}

body.design-editorial .schuebeler-services-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--ed-line);
}

body.design-editorial .schuebeler-services-grid > * {
    padding: var(--ed-s-8) var(--ed-s-6);
    border-bottom: 1px solid var(--ed-line);
    border-right: 1px solid var(--ed-line);
    background: transparent !important;
    box-shadow: none !important;
    transition: background var(--ed-dur-base) var(--ed-ease);
    position: relative;
}

body.design-editorial .schuebeler-services-grid > *:nth-child(2n) {
    border-right: none;
}

body.design-editorial .schuebeler-services-grid > *:hover {
    background: var(--ed-paper-warm) !important;
}

body.design-editorial .schuebeler-services-grid > *::before {
    /* Index-Nummer pro Service */
    counter-increment: services-counter;
    content: "0" counter(services-counter);
    position: absolute;
    top: var(--ed-s-4);
    right: var(--ed-s-6);
    font-family: var(--font-mono, monospace);
    font-size: var(--ed-text-xs);
    color: var(--ed-accent);
    letter-spacing: 0.1em;
}

body.design-editorial .schuebeler-services-grid {
    counter-reset: services-counter;
}

@container (max-width: 760px) {
    body.design-editorial .schuebeler-services-grid {
        grid-template-columns: 1fr;
    }
    body.design-editorial .schuebeler-services-grid > *:nth-child(n) {
        border-right: none;
    }
}


/* ============================================================
   07 — EXPERT als Karteikarten
   ============================================================ */

body.design-editorial .schuebeler-expert-section {
    background: var(--ed-paper-warm);
    padding-block: var(--ed-s-16);
}

body.design-editorial .schuebeler-expert-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--ed-s-8);
    align-items: start;
}

body.design-editorial .schuebeler-expert-image-wrapper {
    position: sticky;
    top: var(--ed-s-8);
}

body.design-editorial .schuebeler-expert-image {
    border-radius: 0;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
    box-shadow: var(--ed-shadow-lg);
}

body.design-editorial .schuebeler-expert-content {
    counter-reset: vita-counter;
}

body.design-editorial .schuebeler-expert-content > * + * {
    margin-top: var(--ed-s-4);
}

body.design-editorial .schuebeler-expert-content h2,
body.design-editorial .schuebeler-expert-content h3 {
    margin-block: var(--ed-s-4) var(--ed-s-2);
}

body.design-editorial .schuebeler-expert-content ul {
    list-style: none;
    padding: 0;
    margin: var(--ed-s-6) 0;
    border-top: 1px solid var(--ed-line);
}

body.design-editorial .schuebeler-expert-content li {
    padding: var(--ed-s-4) 0 var(--ed-s-4) var(--ed-s-12);
    border-bottom: 1px solid var(--ed-line);
    position: relative;
    font-size: var(--ed-text-lg);
    transition: padding-left var(--ed-dur-base) var(--ed-ease);
}

body.design-editorial .schuebeler-expert-content li::before {
    counter-increment: vita-counter;
    content: "0" counter(vita-counter);
    position: absolute;
    left: 0;
    top: var(--ed-s-4);
    font-family: var(--font-mono, monospace);
    font-size: var(--ed-text-xs);
    color: var(--ed-accent);
    letter-spacing: 0.1em;
}

body.design-editorial .schuebeler-expert-content li:hover {
    padding-left: calc(var(--ed-s-12) + var(--ed-s-2));
    background: color-mix(in srgb, var(--ed-accent) 5%, transparent);
}


/* ============================================================
   08 — CTA als Full-Bleed
   ============================================================ */

body.design-editorial .schuebeler-cta-section,
body.design-editorial .schuebeler-cta {
    background: var(--ed-ink);
    color: var(--ed-paper);
    padding-block: var(--ed-s-24);
    position: relative;
    overflow: hidden;
}

body.design-editorial .schuebeler-cta-section::before,
body.design-editorial .schuebeler-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, var(--ed-accent-soft), transparent 60%);
    pointer-events: none;
}

body.design-editorial .schuebeler-cta-section > .schuebeler-container,
body.design-editorial .schuebeler-cta > .schuebeler-container {
    position: relative;
    text-align: left;
}

body.design-editorial .schuebeler-cta-title,
body.design-editorial .schuebeler-cta h2 {
    font-size: var(--ed-display-lg);
    color: var(--ed-paper);
    line-height: 0.95;
    max-width: 18ch;
    margin-bottom: var(--ed-s-6);
}

body.design-editorial .schuebeler-cta-text,
body.design-editorial .schuebeler-cta p {
    font-size: var(--ed-text-xl);
    color: color-mix(in srgb, var(--ed-paper) 75%, transparent);
    max-width: 50ch;
    margin-bottom: var(--ed-s-6);
}


/* ============================================================
   09 — BUTTONS (eckig, klare Hierarchie, magnetisch via JS)
   ============================================================ */

body.design-editorial .schuebeler-btn-primary,
body.design-editorial .schuebeler-nav-cta,
body.design-editorial .ed-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ed-s-2);
    padding: var(--ed-s-3) var(--ed-s-6);
    background: var(--ed-accent);
    color: var(--ed-paper);
    font-family: var(--font-heading, sans-serif);
    font-weight: 600;
    font-size: var(--ed-text-base);
    text-decoration: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background var(--ed-dur-fast) var(--ed-ease),
                transform var(--ed-dur-fast) var(--ed-ease);
    position: relative;
    overflow: hidden;
}

body.design-editorial .schuebeler-btn-primary::after,
body.design-editorial .ed-btn::after {
    content: "→";
    transition: transform var(--ed-dur-fast) var(--ed-ease);
}

body.design-editorial .schuebeler-btn-primary:hover,
body.design-editorial .ed-btn:hover {
    background: var(--ed-accent-deep);
    transform: translateY(-1px);
    text-decoration: none !important;
}

body.design-editorial .schuebeler-btn-primary:hover::after,
body.design-editorial .ed-btn:hover::after {
    transform: translateX(4px);
}

body.design-editorial .schuebeler-btn-secondary,
body.design-editorial .ed-btn-ghost {
    background: transparent;
    color: var(--ed-ink);
    border: 1px solid var(--ed-ink);
    padding: var(--ed-s-3) var(--ed-s-6);
    font-family: var(--font-heading, sans-serif);
    font-weight: 600;
    border-radius: 0;
    transition: background var(--ed-dur-fast) var(--ed-ease), color var(--ed-dur-fast) var(--ed-ease);
}

body.design-editorial .schuebeler-btn-secondary:hover {
    background: var(--ed-ink);
    color: var(--ed-paper);
}

body.design-editorial .schuebeler-cta-section .schuebeler-btn-secondary {
    color: var(--ed-paper);
    border-color: var(--ed-paper);
}

body.design-editorial .schuebeler-cta-section .schuebeler-btn-secondary:hover {
    background: var(--ed-paper);
    color: var(--ed-ink);
}


/* ============================================================
   10 — NAVIGATION (Sticky-Header, Scroll-Driven)
   ============================================================ */

body.design-editorial .schuebeler-nav,
body.design-editorial .schuebeler-header {
    background: color-mix(in srgb, var(--ed-paper) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: padding-block var(--ed-dur-base) var(--ed-ease),
                border-color var(--ed-dur-base) var(--ed-ease);
}

@supports (animation-timeline: scroll()) {
    body.design-editorial .schuebeler-header {
        animation: ed-shrink-header linear both;
        animation-timeline: scroll(root);
        animation-range: 0 200px;
    }
    @keyframes ed-shrink-header {
        to { padding-block: 0.5rem; border-bottom-color: var(--ed-line); }
    }
}


/* ============================================================
   11 — BLOG-CARDS (Editorial-Stil, harte Kante, kein Glas)
   ============================================================ */

body.design-editorial .schuebeler-blog-card {
    background: var(--ed-paper) !important;
    border: 1px solid var(--ed-line) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none;
    transition: border-color var(--ed-dur-fast) var(--ed-ease),
                transform var(--ed-dur-fast) var(--ed-ease);
}

body.design-editorial .schuebeler-blog-card:hover {
    border-color: var(--ed-accent) !important;
    transform: translateY(-4px);
    box-shadow: var(--ed-shadow-md);
}

body.design-editorial .schuebeler-blog-card::before,
body.design-editorial .schuebeler-blog-card::after {
    display: none !important;
}

body.design-editorial .schuebeler-blog-card-thumbnail {
    border-radius: 0;
}

body.design-editorial .schuebeler-blog-card-title {
    font-family: var(--font-heading);
    font-size: var(--ed-text-xl);
    line-height: 1.2;
    color: var(--ed-ink);
}

body.design-editorial .schuebeler-blog-card-title a {
    color: inherit;
    text-decoration: none;
}

body.design-editorial .schuebeler-blog-card-meta {
    font-family: var(--font-mono, monospace);
    font-size: var(--ed-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--ed-ink) 60%, transparent);
}

body.design-editorial .schuebeler-blog-card-category {
    color: var(--ed-accent);
    background: transparent;
    padding: 0;
    border: none;
}


/* ============================================================
   12 — FOOTER (Editorial)
   ============================================================ */

body.design-editorial .schuebeler-footer {
    background: var(--ed-ink);
    color: var(--ed-paper);
    padding-block: var(--ed-s-12);
    border-top: 4px solid var(--ed-accent);
}

body.design-editorial .schuebeler-footer-content {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: var(--ed-s-8);
    align-items: start;
}

body.design-editorial .schuebeler-footer-tagline {
    font-size: var(--ed-text-lg);
    color: color-mix(in srgb, var(--ed-paper) 70%, transparent);
    margin-block: var(--ed-s-3) var(--ed-s-6);
}

body.design-editorial .schuebeler-footer-menu-title {
    font-family: var(--font-mono, monospace);
    font-size: var(--ed-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ed-accent);
    margin-bottom: var(--ed-s-4);
}

body.design-editorial .schuebeler-footer-menu-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--ed-dur-fast) var(--ed-ease);
}

body.design-editorial .schuebeler-footer-menu-title a:hover {
    color: var(--ed-paper);
}

body.design-editorial .schuebeler-footer-nav,
body.design-editorial .schuebeler-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--ed-s-2);
}

body.design-editorial .schuebeler-footer-nav a,
body.design-editorial .schuebeler-contact-item a,
body.design-editorial .schuebeler-contact-item span {
    color: color-mix(in srgb, var(--ed-paper) 85%, transparent);
    text-decoration: none;
    font-size: var(--ed-text-base);
    transition: color var(--ed-dur-fast) var(--ed-ease);
}

body.design-editorial .schuebeler-footer-nav a:hover,
body.design-editorial .schuebeler-contact-item a:hover {
    color: var(--ed-paper);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

body.design-editorial .schuebeler-footer-bottom {
    margin-top: var(--ed-s-8);
    padding-top: var(--ed-s-6);
    border-top: 1px solid color-mix(in srgb, var(--ed-paper) 12%, transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ed-s-3);
}

body.design-editorial .schuebeler-footer-bottom p,
body.design-editorial .schuebeler-copyright {
    color: color-mix(in srgb, var(--ed-paper) 55%, transparent);
    font-size: var(--ed-text-sm);
    margin: 0;
}

body.design-editorial .schuebeler-social-link {
    background: color-mix(in srgb, var(--ed-paper) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ed-paper) 18%, transparent);
    transition: background var(--ed-dur-fast) var(--ed-ease), border-color var(--ed-dur-fast) var(--ed-ease);
}

body.design-editorial .schuebeler-social-link:hover {
    background: var(--ed-accent);
    border-color: var(--ed-accent);
}

@container (max-width: 760px) {
    body.design-editorial .schuebeler-footer-content {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   13 — REDUCED-MOTION + RESPONSIVE GLOBAL
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    body.design-editorial *,
    body.design-editorial *::before,
    body.design-editorial *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    body.design-editorial {
        --ed-s-12: 4rem;
        --ed-s-16: 5rem;
        --ed-s-24: 7rem;
        --ed-display-xl: clamp(2.25rem, 9vw, 3.5rem);
        --ed-display-lg: clamp(2rem, 8vw, 3rem);
        --ed-display-md: 1.75rem;
        --ed-text-3xl: 1.75rem;
    }
    body.design-editorial h1 {
        font-size: var(--ed-display-lg);
        line-height: 1.05;
        letter-spacing: -0.025em;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    body.design-editorial h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.15;
    }
    body.design-editorial .schuebeler-hero > .schuebeler-container {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    body.design-editorial .schuebeler-hero::before { display: none; }
    body.design-editorial .schuebeler-hero-aside,
    body.design-editorial .schuebeler-hero-image { transform: none; }
    body.design-editorial .schuebeler-hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.05;
    }
    body.design-editorial .schuebeler-services-header,
    body.design-editorial .schuebeler-expert-grid {
        grid-template-columns: 1fr;
    }
    body.design-editorial .schuebeler-expert-image-wrapper { position: static; }

    /* Footer: einspaltig, alles linksbündig */
    body.design-editorial .schuebeler-footer-content,
    body.design-editorial .schuebeler-footer-inner {
        grid-template-columns: 1fr !important;
        gap: var(--ed-s-6);
    }
    body.design-editorial .schuebeler-footer {
        padding-block: var(--ed-s-8);
    }
    body.design-editorial .schuebeler-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* Header-Kontakt-Button: kompakt, nicht überdimensional */
    body.design-editorial .schuebeler-nav-cta,
    body.design-editorial .schuebeler-header .schuebeler-btn-primary {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        min-width: 0;
        width: auto;
    }

    /* Long-Word Wrap-Schutz im Footer (Datenschutzerklärung, AGB) */
    body.design-editorial .schuebeler-footer-nav a,
    body.design-editorial .schuebeler-footer a {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* Header-CTA-Button auch auf größeren Mobiles (bis 1024px) nicht überdimensional */
@media (max-width: 1024px) {
    body.design-editorial .schuebeler-nav-cta,
    body.design-editorial .schuebeler-header .schuebeler-btn-primary {
        max-width: 200px;
    }
}

/* CTA-Section: ALLE Texte invertieren auf paper-Farbe */
body.design-editorial .schuebeler-cta-section,
body.design-editorial .schuebeler-cta {
    color: var(--ed-paper);
}

body.design-editorial .schuebeler-cta-section *:not(a):not(.schuebeler-btn-primary):not(.schuebeler-btn-secondary),
body.design-editorial .schuebeler-cta *:not(a):not(.schuebeler-btn-primary):not(.schuebeler-btn-secondary) {
    color: inherit;
}

body.design-editorial .schuebeler-cta-section p,
body.design-editorial .schuebeler-cta p {
    color: color-mix(in srgb, var(--ed-paper) 80%, transparent);
}

/* Card-Image auf Mobile zwingend in der Card halten */
body.design-editorial .schuebeler-blog-card,
body.design-editorial .schuebeler-card {
    overflow: hidden !important;
}
body.design-editorial .schuebeler-blog-card img,
body.design-editorial .schuebeler-card img,
body.design-editorial .schuebeler-blog-card-image,
body.design-editorial .schuebeler-blog-card-thumbnail img {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
    object-fit: cover;
}

/* Listing-Page Cards (template-parts/content.php / content-post.php):
   Original-Theme hat padding: 3rem auf .schuebeler-card — auf Mobile zu viel,
   Card wird unleserlich schmal. Editorial bricht das auf. */
body.design-editorial .schuebeler-posts-grid .schuebeler-card {
    padding: 0 !important;
    border-radius: 0 !important;
    border: 1px solid var(--ed-line) !important;
    background: var(--ed-paper) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-card::before,
body.design-editorial .schuebeler-posts-grid .schuebeler-card::after {
    display: none !important;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-post-thumbnail-link {
    display: block;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-post-thumbnail-image {
    width: 100% !important;
    height: 220px !important;
    max-width: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    border-radius: 0 !important;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-post-content-preview {
    padding: 1.75rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-post-date {
    font-family: var(--font-mono, monospace);
    font-size: var(--ed-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-accent);
    margin-bottom: 0.5rem;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-post-title-preview {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ed-ink);
    margin: 0 0 0.75rem;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-post-title-preview a {
    color: inherit;
    text-decoration: none;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-post-excerpt {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--ed-ink) 78%, transparent);
    flex: 1;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-post-excerpt p {
    margin: 0;
}

body.design-editorial .schuebeler-posts-grid .schuebeler-read-more {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--ed-accent);
    text-decoration: none;
    transition: color var(--ed-dur-fast) var(--ed-ease);
}

body.design-editorial .schuebeler-posts-grid .schuebeler-read-more:hover {
    color: var(--ed-accent-deep);
}

/* Header-CTA: auf Mobile (≤768px) komplett ausblenden, wie im Original-Theme */
@media (max-width: 768px) {
    body.design-editorial .schuebeler-nav-cta {
        display: none !important;
    }
}

/* Service-Cards (Frontpage Services-Section, template-parts/services.php).
   Original-Theme zeigt Cards mit Icon, Titel, Beschreibung. Mobile-Probleme:
   Titel werden abgeschnitten, Karten überlappen, Gradient-Linie nur bei Hover.
   Editorial-Fix: einheitlicher Look, persistenter Akzent oben, kein Overlap.
*/
body.design-editorial .schuebeler-services-grid .schuebeler-card,
body.design-editorial .schuebeler-services-section .schuebeler-card,
body.design-editorial .schuebeler-service-card {
    background: var(--ed-paper-warm) !important;
    border: 1px solid var(--ed-line) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 2rem 1.5rem !important;
    text-align: left;
    overflow: hidden;
    position: relative;
    z-index: auto !important;
    transform: none !important;
    transition: border-color var(--ed-dur-base) var(--ed-ease),
                background var(--ed-dur-base) var(--ed-ease);
}

body.design-editorial .schuebeler-service-card:hover {
    border-color: var(--ed-accent) !important;
    background: var(--ed-paper) !important;
    transform: none !important;
    z-index: auto !important;
}

/* Akzent-Strich oben — permanent auf allen Service-Cards (statt nur bei Hover) */
body.design-editorial .schuebeler-services-grid .schuebeler-card::before,
body.design-editorial .schuebeler-service-card::before {
    content: "" !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ed-accent) !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: none;
    border-radius: 0;
}

/* Shine-Overlay (::after) deaktivieren — verursacht visuelle Unruhe */
body.design-editorial .schuebeler-services-grid .schuebeler-card::after,
body.design-editorial .schuebeler-service-card::after {
    display: none !important;
}

/* Service-Icon: kompakter, links statt zentriert */
body.design-editorial .schuebeler-service-icon {
    width: 56px !important;
    height: 56px !important;
    margin: 0 0 1.25rem 0 !important;
    background: linear-gradient(135deg, var(--ed-accent), var(--ed-accent-deep)) !important;
    border-radius: 12px !important;
    font-size: 1.5rem !important;
}

/* Service-Title: word-break gegen Overflow, normale Größe */
body.design-editorial .schuebeler-service-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(1.125rem, 4vw, 1.375rem) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--ed-ink) !important;
    margin: 0 0 0.75rem 0 !important;
    text-align: left !important;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

body.design-editorial .schuebeler-service-desc {
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    color: color-mix(in srgb, var(--ed-ink) 75%, transparent) !important;
    text-align: left !important;
    margin: 0 !important;
}

body.design-editorial .schuebeler-service-link {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--ed-accent) !important;
    text-decoration: none !important;
}

/* Mobile: Service-Cards einspaltig, kein Overlap, gleiche Höhe */
@media (max-width: 768px) {
    body.design-editorial .schuebeler-services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    body.design-editorial .schuebeler-services-grid .schuebeler-card,
    body.design-editorial .schuebeler-service-card {
        padding: 1.5rem 1.25rem !important;
        margin: 0 !important;
    }
    body.design-editorial .schuebeler-service-title {
        font-size: 1.25rem !important;
    }
}