/* Seitenspezifisches CSS für webdesign.html, am 07.10.2026 aus dem Inline-<style>-Block ausgelagert (unverändert). */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --peach:    #AACD2B;
            --peach-lt: #F1F8D9;
            --mint:     #A8D5C2;
            --mint-lt:  #E8F5F0;
            --sky:      #A3C9E2;
            --sky-lt:   #E6F2FA;
            --lavender: #C4B5D8;
            --lav-lt:   #F0EBF8;
            --terracotta: #5c7314;
            --cream:    #FDFBF8;
            --sand:     #F5F0EA;
            --text:     #2C2C2C;
            --mid:      #7A7269;
            --border:   #E8E1D8;
            --serif:    'Playfair Display', Georgia, serif;
            --sans:     'Nunito', system-ui, sans-serif;
            --section-space: clamp(4.5rem, 6.5vw, 6.2rem);

            /* Background Theme A: Soft Warm Editorial (default) */
            --bg-services: linear-gradient(180deg, #fdfbf8 0%, #faf6f1 100%);
            --bg-about: linear-gradient(180deg, #f7f1ea 0%, #f4ede6 100%);
            --bg-detailed: linear-gradient(180deg, #fcfaf7 0%, #f8f4ee 100%);
            --bg-adv: linear-gradient(180deg, #eef7f2 0%, #e9f3ee 100%);
            --bg-process: linear-gradient(180deg, #f8f5f1 0%, #f4f0ea 100%);
            --bg-cta: linear-gradient(180deg, #eef5fb 0%, #f3efe8 100%);
        }

        /* Theme B: Pastel Airy */
        body.theme-pastel-airy {
            --bg-services: linear-gradient(180deg, #f8fcff 0%, #f6f9ff 100%);
            --bg-about: linear-gradient(180deg, #f4fbf7 0%, #eef7f2 100%);
            --bg-detailed: linear-gradient(180deg, #fbf9ff 0%, #f7f3ff 100%);
            --bg-adv: linear-gradient(180deg, #ecf8f5 0%, #e8f4f1 100%);
            --bg-process: linear-gradient(180deg, #f8fbff 0%, #f1f6fc 100%);
            --bg-cta: linear-gradient(180deg, #e9f4ff 0%, #f4edff 100%);
        }

        /* Theme C: Muted Contrast */
        body.theme-muted-contrast {
            --bg-services: linear-gradient(180deg, #fcf8f3 0%, #f6efe6 100%);
            --bg-about: linear-gradient(180deg, #f2ece5 0%, #ebe3da 100%);
            --bg-detailed: linear-gradient(180deg, #f9f4ee 0%, #f4ede4 100%);
            --bg-adv: linear-gradient(180deg, #edf4ee 0%, #e4ece5 100%);
            --bg-process: linear-gradient(180deg, #f4f0ea 0%, #ede7df 100%);
            --bg-cta: linear-gradient(180deg, #e8f0f7 0%, #efe7dc 100%);
        }

        html { scroll-behavior: smooth; }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
        }

        body {
            font-family: var(--sans);
            background: var(--cream);
            color: var(--text);
            font-size: 16px;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }

        /* NAV: kommt vollständig aus css/style.css — hier bewusst KEINE
           eigenen Nav-Regeln, damit die Abstände auf allen Seiten gleich sind. */

        /* HERO */
        .hero-minimal {
            margin-top: 0;
            /* Hero reicht ~15vh über die Bildschirmhöhe hinaus, damit das Bild
               mehr Präsenz bekommt und man sanft hineinscrollt. Das untere
               padding hält den Inhalt im ersten Screen zentriert (wie zuvor) –
               nur das Bild läuft weiter nach unten. */
            min-height: calc(115vh - 80px);
            padding: 0 clamp(1.2rem, 4vw, 3.6rem) 15vh;
            border-bottom: none;
            background-color: var(--cream);
            position: relative;
            overflow: hidden;
            display: grid;
            align-items: center;
        }

        .hero-minimal-inner {
            max-width: none;
            margin: 0;
            /* bewusst NICHT position:relative – so füllt .hero-visual den
               gesamten Hero-Bereich (inkl. Innenabstand) bis ganz nach unten,
               genau wie das Hero-Bild auf der Startseite. */
            min-height: calc(100vh - 80px);
            width: 100%;
            display: grid;
            align-items: center;
        }

        .hero-copy {
            max-width: 640px;
            position: relative;
            z-index: 3;
            margin-top: -2.75rem;
        }

        .hero-visual {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 100vw;
            transform: translateX(-50%);
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
            border-radius: 0;
            background: var(--cream);
            box-shadow: none;
        }

        .hero-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, var(--cream) 0%, rgba(253, 251, 248, 0.99) 30%, rgba(253, 251, 248, 0.84) 47%, rgba(253, 251, 248, 0.26) 66%, rgba(253, 251, 248, 0) 86%),
                linear-gradient(180deg, rgba(253, 251, 248, 0.9) 0%, rgba(253, 251, 248, 0) 24%, rgba(253, 251, 248, 0) 70%, var(--cream) 100%);
        }

        .hero-visual > img:first-child {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 74% center;
            opacity: 0.86;
            filter: saturate(0.9) contrast(0.98);
        }

        .hero-sky-motion {
            position: absolute;
            right: 0.5%;
            top: 0;
            width: 35%;
            height: 38%;
            z-index: 2;
            overflow: visible;
            background:
                radial-gradient(circle at 54% 56%, rgba(253, 251, 248, 0.98) 0 46%, rgba(253, 251, 248, 0.9) 62%, rgba(253, 251, 248, 0) 80%),
                linear-gradient(90deg, rgba(253, 251, 248, 0) 0%, rgba(253, 251, 248, 0.9) 14%, rgba(253, 251, 248, 0.99) 36%, rgba(253, 251, 248, 0.99) 100%);
            mix-blend-mode: normal;
        }

        .hero-sky-motion::before {
            content: "";
            position: absolute;
            inset: -4% -2% -8% 18%;
            z-index: 0;
            background: rgba(253, 251, 248, 0.98);
        }

        .hero-sun {
            position: absolute;
            right: 10%;
            bottom: 12%;
            width: clamp(62px, 8vw, 104px);
            height: clamp(62px, 8vw, 104px);
            color: rgba(150, 146, 140, 0.74);
            animation: heroSunArc 180s linear infinite;
            animation-delay: -64s;
            will-change: transform, opacity;
            z-index: 1;
        }

        .hero-cloud {
            position: absolute;
            width: clamp(72px, 9vw, 126px);
            height: auto;
            color: rgba(150, 146, 140, 0.62);
            opacity: 0.72;
            will-change: transform;
            z-index: 1;
        }

        .hero-cloud-left {
            left: 5%;
            top: 42%;
            animation: heroCloudDriftLeft 120s ease-in-out infinite alternate;
        }

        .hero-cloud-right {
            right: 0;
            top: 49%;
            width: clamp(82px, 10vw, 142px);
            animation: heroCloudDriftRight 150s ease-in-out infinite alternate;
        }

        @keyframes heroSunArc {
            0% {
                transform: translate(64%, 44%) scale(0.8);
                opacity: 0;
            }
            13% {
                opacity: 0.62;
            }
            43% {
                transform: translate(-24%, -26%) scale(1);
                opacity: 0.78;
            }
            74% {
                transform: translate(-134%, 2%) scale(0.94);
                opacity: 0.72;
            }
            86% {
                transform: translate(-162%, 52%) scale(0.9);
                opacity: 0.72;
            }
            94% {
                transform: translate(-186%, 92%) scale(0.86);
                opacity: 0.58;
            }
            98% {
                transform: translate(-202%, 116%) scale(0.84);
                opacity: 0.16;
            }
            100% {
                transform: translate(-212%, 128%) scale(0.82);
                opacity: 0;
            }
        }

        @keyframes heroCloudDriftLeft {
            from { transform: translateX(-6px); }
            to { transform: translateX(24px); }
        }

        @keyframes heroCloudDriftRight {
            from { transform: translateX(10px); }
            to { transform: translateX(-28px); }
        }

        .bird,
        .bird-img {
            position: absolute;
            display: block;
            width: auto;
            height: auto;
            opacity: 0;
            z-index: 2;
            will-change: transform, opacity;
        }

        .bird-1 {
            left: 12%;
            bottom: 16%;
            width: 52px;
            animation: birdFly1 18s linear 0.5s infinite;
        }

        .bird-2 {
            left: 15%;
            bottom: 22%;
            width: 44px;
            animation: birdFly2 18s linear 1.2s infinite;
        }

        .bird-3 {
            left: 9%;
            bottom: 13%;
            width: 38px;
            animation: birdFly3 18s linear 1.9s infinite;
        }

        .bird-4 {
            left: 17%;
            bottom: 24%;
            width: 46px;
            animation: birdFly4 18s linear 11s infinite;
        }

        /* bird-1: STEEP climb — flies highest in the flock */
        @keyframes birdFly1 {
            0%   { transform: translate(0, 0) scale(1); opacity: 0; }
            2%   { opacity: 1; }
            13%  { transform: translate(215px, -62px) scale(0.98); opacity: 1; }
            25%  { transform: translate(445px, -128px) scale(0.94); opacity: 1; }
            37%  { transform: translate(680px, -192px) scale(0.88); opacity: 0.95; }
            45%  { transform: translate(820px, -226px) scale(0.83); opacity: 0.55; }
            50%  { transform: translate(910px, -245px) scale(0.8); opacity: 0; }
            51%  { transform: translate(0, 0) scale(1); opacity: 0; }
            100% { transform: translate(0, 0) scale(1); opacity: 0; }
        }

        /* bird-2: MEDIUM climb — flies in the middle */
        @keyframes birdFly2 {
            0%   { transform: translate(0, 0) scale(1); opacity: 0; }
            2%   { opacity: 1; }
            13%  { transform: translate(235px, -35px) scale(0.98); opacity: 1; }
            25%  { transform: translate(470px, -72px) scale(0.94); opacity: 1; }
            37%  { transform: translate(705px, -108px) scale(0.89); opacity: 0.9; }
            45%  { transform: translate(845px, -130px) scale(0.84); opacity: 0.5; }
            50%  { transform: translate(935px, -142px) scale(0.81); opacity: 0; }
            51%  { transform: translate(0, 0) scale(1); opacity: 0; }
            100% { transform: translate(0, 0) scale(1); opacity: 0; }
        }

        /* bird-3: LOW-MID climb — flies lower than bird-1, higher than flat */
        @keyframes birdFly3 {
            0%   { transform: translate(0, 0) scale(1); opacity: 0; }
            2%   { opacity: 0.95; }
            13%  { transform: translate(220px, -40px) scale(0.97); opacity: 0.95; }
            25%  { transform: translate(445px, -82px) scale(0.93); opacity: 0.92; }
            37%  { transform: translate(670px, -128px) scale(0.88); opacity: 0.85; }
            45%  { transform: translate(805px, -158px) scale(0.83); opacity: 0.45; }
            50%  { transform: translate(890px, -175px) scale(0.79); opacity: 0; }
            51%  { transform: translate(0, 0) scale(1); opacity: 0; }
            100% { transform: translate(0, 0) scale(1); opacity: 0; }
        }

        /* bird-4: Solo, STEEPEST climb */
        @keyframes birdFly4 {
            0%   { transform: translate(0, 0) scale(1); opacity: 0; }
            2%   { opacity: 1; }
            13%  { transform: translate(205px, -68px) scale(0.98); opacity: 1; }
            25%  { transform: translate(420px, -138px) scale(0.94); opacity: 1; }
            37%  { transform: translate(640px, -210px) scale(0.88); opacity: 0.9; }
            45%  { transform: translate(775px, -252px) scale(0.83); opacity: 0.5; }
            50%  { transform: translate(860px, -272px) scale(0.8); opacity: 0; }
            51%  { transform: translate(0, 0) scale(1); opacity: 0; }
            100% { transform: translate(0, 0) scale(1); opacity: 0; }
        }

        .hero-kicker {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #8aa51f;
            margin-bottom: 1.25rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .hero-kicker::before {
            content: '';
            width: 24px;
            height: 2px;
            background: var(--peach);
            display: inline-block;
        }

        .hero-copy h1 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: clamp(2.15rem, 4.2vw, 3.35rem);
            line-height: 1.1;
            max-width: 22ch;
            color: #2c2c2c;
            margin-bottom: 1.1rem;
            text-wrap: balance;
        }

        .hero-copy h1 .hero-line-main,
        .hero-copy h1 .hero-line-region {
            display: block;
        }

        .hero-headline-accent {
            color: var(--terracotta);
            display: inline-block;
            font-style: italic;
            font-weight: 700;
            position: relative;
        }

        .hero-headline-accent::after {
            content: "";
            position: absolute;
            left: -0.05em;
            right: -0.08em;
            bottom: -0.09em;
            height: 0.17em;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none' stroke='%23AACD2B' stroke-width='2.8' stroke-linecap='round'><path d='M3 7 Q 18 2 32 7 T 62 7 T 92 7 T 117 7'/></svg>");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            pointer-events: none;
        }

        .hero-subtext {
            font-size: 1.06rem;
            line-height: 1.78;
            color: var(--mid);
            max-width: 47ch;
            margin-bottom: 2.15rem;
        }

        .hero-offer {
            max-width: 52ch;
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--text);
        }
        .hero-offer a { color: var(--accent-ink); text-underline-offset: 0.18em; }
        .web-offer-summary {
            padding: 1.15rem 0;
            border-bottom: 1px solid rgba(43, 41, 37, 0.12);
            background: #f8f4ee;
        }
        .web-offer-summary-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: .45rem 2rem;
        }
        .web-offer-summary .ed-eyebrow { margin: 0; }
        .web-offer-summary .hero-offer { max-width: 70ch; margin: 0; }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.9rem;
        }

        .hero-trust {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem 1.15rem;
            margin: 1.35rem 0 0;
            padding: 0;
            list-style: none;
            color: #686159;
            font-size: 0.78rem;
            font-weight: 700;
            line-height: 1.5;
        }

        .hero-trust li {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
        }

        .hero-trust li::before {
            content: "";
            width: 0.38rem;
            height: 0.38rem;
            flex: 0 0 auto;
            border-radius: 999px;
            background: var(--peach);
            box-shadow: 0 0 0 3px rgba(170, 205, 43, 0.12);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.85rem 2rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            font-family: var(--sans);
            transition: all 0.2s;
        }

        .btn-primary {
            background: var(--peach);
            color: #2b2925;
            box-shadow: 0 2px 8px rgba(170,205,43,0.3);
        }

        .btn-primary:hover { background: #97ba23; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(170,205,43,0.35); }

        .btn-outline {
            background: var(--cream);
            color: var(--text);
            border: 1.5px solid var(--border);
        }

        .btn-outline:hover { border-color: var(--peach); color: #8aa51f; }

        /* SECTIONS */
        section { padding: var(--section-space) clamp(1.5rem, 5vw, 5rem); }

        .container { max-width: 1160px; margin: 0 auto; }

        .label {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #8aa51f;
            margin-bottom: 0.75rem;
            display: block;
        }

        .section-title {
            font-family: var(--serif);
            font-size: clamp(1.9rem, 3.5vw, 2.8rem);
            line-height: 1.12;
            margin-bottom: 0.85rem;
        }

        .section-intro {
            font-size: 1.02rem;
            color: var(--mid);
            max-width: 44ch;
            line-height: 1.75;
        }

        .section {
            background: #ffffff;
            border-top: 1px solid var(--border);
        }

        .eyebrow {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #8aa51f;
            margin-bottom: 0.85rem;
        }

        .section .section-intro {
            max-width: 80ch;
            margin-bottom: 2rem;
        }

        /* Verfeinerte Zwei-Karten-Variante: Zielgruppen */
        .audience-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.4rem;
            margin-top: 2.4rem;
        }

        .audience-card {
            position: relative;
            background: #fff;
            border: 1px solid rgba(232, 225, 216, 0.95);
            border-radius: 18px;
            padding: 2.3rem 2rem 2.1rem;
            box-shadow: 0 12px 30px rgba(51, 43, 31, 0.05);
            overflow: hidden;
            transition: transform 0.28s ease, box-shadow 0.28s ease;
        }

        .audience-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--terracotta), var(--peach));
        }

        .audience-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(51, 43, 31, 0.09);
        }

        .audience-eyebrow {
            font-family: var(--sans);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--terracotta);
            margin-bottom: 0.7rem;
        }

        .audience-card h3 {
            font-family: var(--serif);
            font-size: 1.42rem;
            line-height: 1.25;
            margin-bottom: 0.75rem;
            color: var(--text);
        }

        .audience-card p {
            color: var(--mid);
            line-height: 1.8;
            font-size: 0.97rem;
        }

        .section-cta {
            margin-top: 2.6rem;
            padding: 1.7rem 0 0;
            border: 0;
            border-top: 1px solid var(--border);
            border-radius: 0;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem 1.5rem;
            flex-wrap: wrap;
        }

        .section-cta p {
            margin: 0;
            color: #5a534c;
        }

        /* SERVICES */
        .services-section {
            background: var(--bg-services);
            border-top: 1px solid var(--border);
        }

        .services-top {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            align-items: start;
            margin-bottom: 2.55rem;
        }

        .services-top > div {
            max-width: 860px;
        }

        .services-top .section-title { margin-bottom: 0; }

        .services-top .section-intro {
            max-width: 54ch;
            margin-top: 0.85rem;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
        }

        .service-card {
            background: var(--sky-lt);
            border: 1px solid rgba(163,201,226,0.4);
            border-radius: 16px;
            padding: 2rem 1.75rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .service-card:nth-child(2) {
            background: var(--mint-lt);
            border-color: rgba(168,213,194,0.4);
        }

        .service-card:nth-child(3) {
            background: var(--lav-lt);
            border-color: rgba(196,181,216,0.4);
        }

        .service-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.07); }

        .service-num {
            font-family: var(--serif);
            font-size: 2.5rem;
            color: var(--sky);
            opacity: 0.35;
            line-height: 1;
            margin-bottom: 0.75rem;
        }

        .service-card:nth-child(2) .service-num { color: var(--mint); }
        .service-card:nth-child(3) .service-num { color: var(--lavender); }

        .service-card h3 {
            font-family: var(--serif);
            font-size: 1.2rem;
            margin-bottom: 0.6rem;
        }

        .service-card p { font-size: 0.9rem; color: var(--mid); line-height: 1.7; }

        /* ABOUT */
        .about-section {
            background: var(--bg-about);
            border-top: 1px solid var(--border);
        }

        .price-orientation-band {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(760px 340px at 20% 10%, rgba(255, 255, 255, 0.62), transparent 62%),
                radial-gradient(620px 300px at 82% 88%, rgba(170, 205, 43, 0.22), transparent 68%),
                linear-gradient(180deg, #f7fbdf 0%, #eef7c8 100%);
            border-top: 1px solid rgba(170, 205, 43, 0.34);
            border-bottom: 1px solid rgba(170, 205, 43, 0.28);
        }

        .price-orientation-band::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, rgba(43, 41, 37, 0.04), transparent 20%, transparent 80%, rgba(43, 41, 37, 0.035));
            pointer-events: none;
        }

        .price-orientation-band .container {
            position: relative;
            z-index: 1;
        }

        .price-orientation-band .ed-eyebrow {
            color: #6f8a18;
        }

        .price-orientation-band .ed-facts h2 {
            color: #253015;
        }

        .price-orientation-band .ed-facts-line {
            color: #465337;
        }

        .price-orientation-band .btn-outline {
            background: #fffef8 !important;
            border: 1px solid rgba(47,42,37,.22) !important;
            box-shadow: none !important;
        }

        .about-grid-custom {
            display: grid;
            grid-template-columns: 360px 1fr;
            gap: 4rem;
            align-items: center;
        }

        .about-art img {
            width: 100%;
            display: block;
            border-radius: 20px;
            background: #fff;
        }

        .about-text h2 { margin-bottom: 1.5rem; }
        .about-text h2 em { font-style: italic; color: var(--peach); }

        .about-text p {
            font-size: 0.975rem;
            color: #555;
            line-height: 1.8;
            margin-bottom: 1.25rem;
            max-width: 64ch;
        }

        .about-list {
            list-style: none;
            margin: 1.5rem 0 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .about-list li {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .about-list li::before {
            content: '';
            display: block;
            flex-shrink: 0;
            width: 8px;
            height: 8px;
            background: var(--peach);
            border-radius: 50%;
            margin-top: 0.5em;
        }

        /* DETAILED */
        .detailed-section {
            border-top: 0;
            background: linear-gradient(
                180deg,
                var(--cream) 0%,
                #fcfaf7 18%,
                #f8f4ee 100%
            );
            padding-top: clamp(3rem, 4.5vw, 4.25rem);
        }

        .detailed-header {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            margin-bottom: 2.55rem;
            align-items: end;
        }

        .detailed-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1.25rem;
        }

        .detail-card {
            background: var(--sand);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.75rem;
            transition: border-color 0.2s, transform 0.2s;
        }

        .detail-card:hover { border-color: var(--peach); transform: translateY(-2px); }

        .detail-icon {
            width: 44px;
            height: 44px;
            background: var(--peach-lt);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--peach);
            margin-bottom: 1rem;
        }

        .detail-card h3 {
            font-family: var(--serif);
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }

        .detail-card p { font-size: 0.875rem; color: var(--mid); line-height: 1.7; }

        .detailed-section .container {
            max-width: 1160px;
        }

        .refined-topics-header {
            grid-template-columns: 1fr;
            gap: 0;
            align-items: start;
            margin-bottom: 2.45rem;
        }

        .refined-topics-header > div {
            max-width: 860px;
        }

        .refined-topics-header .section-title {
            margin-bottom: 0.75rem;
        }

        .refined-topics-header .section-intro {
            margin: 0;
            max-width: 52ch;
            line-height: 1.8;
        }

        .refined-topics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.35rem;
            margin-bottom: 1.7rem;
        }

        .refined-topic {
            border-radius: 16px;
            padding: 2rem 1.75rem;
            border: 1px solid rgba(232, 225, 216, 0.92);
            box-shadow: 0 12px 28px rgba(51, 43, 31, 0.045);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .refined-topic:nth-child(1) {
            background: var(--sky-lt);
            border-color: rgba(163, 201, 226, 0.4);
        }

        .refined-topic:nth-child(2) {
            background: var(--mint-lt);
            border-color: rgba(168, 213, 194, 0.4);
        }

        .refined-topic:nth-child(3) {
            background: var(--lav-lt);
            border-color: rgba(196, 181, 216, 0.4);
        }

        .refined-topic:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 34px rgba(51, 43, 31, 0.07);
        }

        .refined-topic h3 {
            font-family: var(--serif);
            font-size: 1.35rem;
            line-height: 1.3;
            margin-bottom: 0.7rem;
            color: var(--text);
        }

        .refined-topic p {
            font-size: 0.96rem;
            line-height: 1.85;
            color: var(--mid);
            max-width: none;
        }

        /* ============================================================
           EDITORIAL-LAYER — rahmenlos statt Baukasten-Karten.
           Vorbild: webdesign.html (.wd-*). Eine warme Akzentfarbe
           (Limettengrün), zarte Haarlinien-Trenner, viel Weißraum.
           ============================================================ */
        .ed-eyebrow {
            text-transform: uppercase;
            letter-spacing: 0.2em;
            font-size: 0.74rem;
            font-weight: 700;
            color: var(--accent-ink);
            margin-bottom: 0.7rem;
        }
        /* Signatur wie auf der Startseite: kurzer grüner Strich vor der Eyebrow */
        .ed-eyebrow::before {
            content: "";
            display: inline-block;
            width: 1.7rem;
            height: 1px;
            margin-right: 0.7rem;
            vertical-align: middle;
            background: #aacd2b;
        }
        .ed-title {
            font-family: var(--serif);
            font-weight: 400;
            font-size: clamp(1.8rem, 3.4vw, 2.7rem);
            line-height: 1.12;
            color: var(--text);
            margin: 0 0 0.9rem;
        }
        .ed-intro {
            color: var(--mid);
            line-height: 1.8;
            font-size: 1.02rem;
        }
        .ed-head--center {
            text-align: center;
            max-width: 760px;
            margin: 0 auto clamp(2.4rem, 4.5vw, 3.4rem);
        }
        .ed-head--center .ed-title { max-width: 24ch; margin-left: auto; margin-right: auto; }
        .ed-head--center .ed-intro { max-width: 60ch; margin: 0 auto; }
        .ed-head--left { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 2.8rem); }
        .ed-head--left .ed-intro { max-width: 62ch; }

        /* rahmenlose Spalten mit zarter vertikaler Haarlinie */
        .ed-cols { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
        .ed-cols.cols-3 { grid-template-columns: repeat(3, 1fr); }
        .ed-cols.cols-2 { grid-template-columns: repeat(2, 1fr); }
        .ed-col { position: relative; padding: 0 clamp(0.4rem, 1.4vw, 1.4rem); }
        .ed-cols.center .ed-col { text-align: center; }
        .ed-col + .ed-col::before {
            content: "";
            position: absolute;
            left: calc(-1 * clamp(0.75rem, 1.5vw, 1.5rem));
            top: 6%;
            bottom: 6%;
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(43, 41, 37, 0.13), transparent);
        }
        .ed-num {
            display: block;
            font-family: var(--serif);
            font-style: italic;
            font-size: 2rem;
            line-height: 1;
            color: var(--terracotta);
            margin-bottom: 0.55rem;
        }
        .ed-tag {
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--terracotta);
            margin-bottom: 0.5rem;
        }
        .ed-col h3 {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 1.28rem;
            line-height: 1.28;
            color: var(--text);
            margin-bottom: 0.55rem;
        }
        .ed-col p {
            color: var(--mid);
            line-height: 1.75;
            font-size: 0.97rem;
            margin: 0;
        }
        .ed-cols.center .ed-col p { max-width: 32ch; margin: 0 auto; }

        /* rahmenloser Zweispalter (Visual + Text) */
        .ed-split {
            display: grid;
            grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
            gap: clamp(2rem, 5vw, 4.5rem);
            align-items: center;
        }
        .ed-split h3 {
            font-family: var(--serif);
            font-weight: 400;
            font-size: clamp(1.5rem, 2.6vw, 2rem);
            line-height: 1.18;
            color: var(--text);
            margin-bottom: 0.9rem;
            max-width: none;
        }
        .ed-split p { color: var(--mid); line-height: 1.85; margin: 0 0 0.8rem; max-width: none; }
        #ablauf {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            background:
                radial-gradient(780px 420px at 78% 18%, rgba(170, 205, 43, 0.16), transparent 64%),
                radial-gradient(620px 360px at 10% 86%, rgba(163, 201, 226, 0.18), transparent 68%),
                linear-gradient(180deg, #ffffff 0%, #fdfbf8 50%, #f7f2eb 100%);
            border-top: 1px solid rgba(232, 225, 216, 0.72);
        }
        #ablauf::before {
            content: "";
            position: absolute;
            inset: 9% clamp(1.5rem, 6vw, 5rem) auto;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(43, 41, 37, 0.14), transparent);
            pointer-events: none;
            z-index: -1;
        }
        #ablauf::after {
            content: "";
            position: absolute;
            right: -10vw;
            bottom: -16rem;
            width: min(58vw, 720px);
            aspect-ratio: 1;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(170, 205, 43, 0.12), transparent 62%);
            filter: blur(10px);
            pointer-events: none;
            z-index: -1;
        }
        #ablauf .container {
            position: relative;
            z-index: 1;
        }
        .web-project-split {
            grid-template-columns: minmax(0, 0.7fr) minmax(460px, 1.05fr);
            gap: clamp(2.4rem, 6vw, 5.8rem);
            align-items: start;
        }
        /* Die rechte Spalte fordert mindestens 460px. Unterhalb von rund 980px
           Fensterbreite bliebe für die Textspalte sonst nur noch eine Handvoll
           Zeichen pro Zeile übrig – deshalb hier schon einspaltig. */
        @media (max-width: 980px) {
            .web-project-split { grid-template-columns: minmax(0, 1fr); gap: 2.1rem; }
            .web-project-copy { max-width: none; }
            .web-project-copy h2 { max-width: 18ch; }
        }
        .web-project-copy {
            max-width: 560px;
        }
        .web-project-copy h2 {
            font-size: clamp(2.25rem, 4.7vw, 4.05rem);
            line-height: 0.98;
            letter-spacing: -0.018em;
            max-width: 10.5ch;
            margin-bottom: 1.15rem;
        }
        .web-project-copy > p {
            max-width: 38rem;
            font-size: 1.03rem;
            line-height: 1.82;
        }
        .web-project-outcome {
            margin-top: clamp(1.45rem, 3vw, 2.25rem);
            padding-top: 1.05rem;
            border-top: 1px solid rgba(43, 41, 37, 0.16);
            max-width: 33rem;
        }
        .web-project-outcome-label {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            margin-bottom: 0.62rem;
            color: #6f8a18;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }
        .web-project-outcome-label::before {
            content: "";
            width: 1.7rem;
            height: 1px;
            background: currentColor;
        }
        .web-project-outcome p {
            margin: 0;
            color: #514b45;
            line-height: 1.75;
        }
        .web-project-map {
            position: relative;
            overflow: hidden;
            padding: clamp(1.15rem, 2.6vw, 1.75rem);
            border: 1px solid rgba(232, 225, 216, 0.86);
            border-radius: clamp(24px, 3vw, 34px);
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(253, 251, 248, 0.7)),
                radial-gradient(circle at 88% 12%, rgba(170, 205, 43, 0.18), transparent 36%);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.92) inset,
                0 32px 80px rgba(51, 43, 31, 0.1);
        }
        .web-project-map::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(110deg, rgba(255,255,255,0) 0 28%, rgba(255,255,255,0.62) 44%, rgba(255,255,255,0) 61%),
                repeating-linear-gradient(90deg, rgba(43, 41, 37, 0.035) 0 1px, transparent 1px 84px);
            opacity: 0.42;
            pointer-events: none;
        }
        .web-project-map > * {
            position: relative;
            z-index: 1;
        }
        .web-project-map-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1.5rem;
            padding: clamp(0.5rem, 1.2vw, 0.9rem) clamp(0.25rem, 1vw, 0.65rem) clamp(1rem, 2vw, 1.35rem);
        }
        .web-project-map-kicker {
            margin: 0 0 0.3rem;
            color: #6f8a18;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }
        .web-project-map-head p:last-child {
            margin: 0;
            max-width: 30ch;
            color: #4f4942;
            font-family: var(--serif);
            font-size: clamp(1.25rem, 2.2vw, 1.72rem);
            line-height: 1.18;
        }
        .web-project-map-badge {
            flex: 0 0 auto;
            padding: 0.58rem 0.72rem;
            border: 1px solid rgba(43, 41, 37, 0.11);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.62);
            color: #6a6258;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }
        .project-flow {
            position: relative;
            display: grid;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .project-flow::before {
            content: "";
            position: absolute;
            left: calc(clamp(1.15rem, 2.4vw, 1.85rem) + 1.55rem);
            top: 2rem;
            bottom: 2rem;
            width: 1px;
            background: linear-gradient(180deg, rgba(170, 205, 43, 0.1), rgba(138, 165, 31, 0.45), rgba(43, 41, 37, 0.2));
        }
        .project-flow li {
            position: relative;
            display: grid;
            grid-template-columns: 3.1rem minmax(0, 1fr);
            gap: clamp(0.95rem, 2vw, 1.35rem);
            align-items: start;
            padding: clamp(1.1rem, 2.4vw, 1.55rem) clamp(1.15rem, 2.4vw, 1.85rem);
            border-top: 1px solid rgba(43, 41, 37, 0.08);
        }
        .project-flow li:first-child {
            border-top: 0;
        }
        .project-flow li:last-child {
            margin-top: 0.45rem;
            border: 0;
            border-radius: 24px;
            background:
                radial-gradient(circle at 92% 10%, rgba(170, 205, 43, 0.28), transparent 42%),
                linear-gradient(135deg, #2f2a25 0%, #4a433a 100%);
            box-shadow: 0 18px 42px rgba(47, 42, 37, 0.18);
        }
        .project-flow span {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3.1rem;
            height: 3.1rem;
            border-radius: 999px;
            background: #fffef9;
            border: 1px solid rgba(170, 205, 43, 0.42);
            color: #6f8a18;
            font-family: var(--serif);
            font-style: italic;
            font-size: 1.18rem;
            line-height: 1;
            box-shadow: 0 8px 22px rgba(51, 43, 31, 0.08);
        }
        .project-flow li:last-child span {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.24);
            color: #d8ef7d;
            box-shadow: none;
        }
        .project-flow h3 {
            margin: 0 0 0.42rem;
            font-family: var(--serif);
            font-weight: 400;
            font-size: clamp(1.2rem, 2vw, 1.46rem);
            line-height: 1.18;
            color: var(--text);
        }
        .project-flow p {
            margin: 0;
            color: var(--mid);
            font-size: 0.96rem;
            line-height: 1.68;
        }
        .project-flow li:last-child h3 {
            color: #fffaf1;
        }
        .project-flow li:last-child p {
            color: rgba(255, 250, 241, 0.78);
        }
        .web-project-signoff {
            display: flex;
            gap: 0.72rem;
            align-items: flex-start;
            margin: clamp(1.05rem, 2vw, 1.35rem) clamp(0.25rem, 1vw, 0.65rem) 0;
            color: #625b52;
            font-size: 0.92rem;
            line-height: 1.65;
        }
        .web-project-signoff::before {
            content: "";
            flex: 0 0 0.5rem;
            width: 0.5rem;
            height: 0.5rem;
            margin-top: 0.58em;
            border-radius: 999px;
            background: var(--peach);
            box-shadow: 0 0 0 5px rgba(170, 205, 43, 0.12);
        }
        .ed-split--showcase {
            grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.9fr);
            gap: clamp(2.1rem, 4.4vw, 4.2rem);
            align-items: center;
        }
        .ed-split--showcase .ed-split-copy {
            max-width: 580px;
            align-self: center;
        }
        .ed-split--showcase .ed-col-list,
        .ed-concept-head .ed-col-list {
            list-style: none;
            display: grid;
            gap: 0.58rem;
            margin: 1.35rem 0 0;
            padding: 0;
        }
        .ed-split--showcase .ed-col-list li,
        .ed-concept-head .ed-col-list li {
            position: relative;
            padding-left: 1.05rem;
            color: var(--mid);
            font-size: 0.96rem;
            line-height: 1.55;
        }
        .ed-split--showcase .ed-col-list li::before,
        .ed-concept-head .ed-col-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.72em;
            width: 0.35rem;
            height: 0.35rem;
            border-radius: 999px;
            background: var(--lime);
            box-shadow: 0 0 0 4px rgba(168, 206, 59, 0.13);
        }
        .ed-concept-head {
            max-width: 780px;
            margin: 0 auto clamp(2.25rem, 4.5vw, 3.25rem);
            text-align: center;
        }
        .ed-concept-head > p {
            max-width: 66ch;
            margin-left: auto;
            margin-right: auto;
        }
        .ed-concept-head .ed-col-list {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.8rem 0;
            max-width: 780px;
            margin: clamp(1.8rem, 3.5vw, 2.4rem) auto 0;
            padding: 1.05rem 0;
            border-top: 1px solid rgba(43, 41, 37, 0.12);
            border-bottom: 1px solid rgba(43, 41, 37, 0.12);
            text-align: center;
        }
        .ed-concept-head .ed-col-list li {
            padding: 0.18rem clamp(0.8rem, 2vw, 1.35rem);
            color: #514b45;
            line-height: 1.45;
        }
        .ed-concept-head .ed-col-list li:not(:nth-child(3n + 1)) {
            border-left: 1px solid rgba(43, 41, 37, 0.1);
        }
        .ed-concept-head .ed-col-list li::before {
            display: none;
        }
        .ed-concept-head--guided {
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.82fr);
            gap: clamp(2.4rem, 5vw, 5rem);
            align-items: start;
            max-width: 1040px;
            margin-bottom: clamp(2.3rem, 4vw, 3.2rem);
            text-align: left;
        }
        .ed-concept-head--guided .ed-concept-copy {
            max-width: 610px;
        }
        .ed-concept-head--guided .ed-concept-copy > p {
            max-width: 58ch;
            margin: 0;
            color: var(--mid);
            line-height: 1.82;
        }
        .ed-concept-head--guided .ed-concept-copy > p + p {
            margin-top: 0.9rem;
        }
        .ed-concept-benefits {
            padding-left: clamp(1.5rem, 3vw, 2.25rem);
            border-left: 1px solid rgba(43, 41, 37, 0.13);
        }
        .ed-concept-benefits .ed-eyebrow {
            margin-bottom: 0.95rem;
        }
        .ed-concept-head--guided .ed-concept-benefits .ed-col-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            margin: 0;
            padding: 0;
            border: 0;
            text-align: left;
        }
        .ed-concept-head--guided .ed-concept-benefits .ed-col-list li {
            position: relative;
            padding: 0.78rem 0 0.78rem 1.15rem;
            border: 0;
            color: #514b45;
            line-height: 1.52;
        }
        .ed-concept-head--guided .ed-concept-benefits .ed-col-list li + li {
            border-top: 1px solid rgba(43, 41, 37, 0.08);
        }
        .ed-concept-head--guided .ed-concept-benefits .ed-col-list li::before {
            display: block;
            top: 1.42em;
            width: 0.38rem;
            height: 0.38rem;
        }
        .ed-split--audience {
            grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.78fr);
            gap: clamp(2.6rem, 6vw, 5.5rem);
            align-items: start;
            max-width: 1040px;
            margin: 0 auto;
        }
        .ed-split--audience .ed-split-copy {
            max-width: 610px;
        }
        .ed-split--audience .ed-split-copy h2 {
            max-width: 22ch;
            margin-bottom: 1.15rem;
            font-family: var(--serif);
            font-size: clamp(2rem, 3.35vw, 3rem);
            font-weight: 400;
            line-height: 1.08;
            letter-spacing: -0.015em;
        }
        .ed-split--audience .ed-split-copy p {
            max-width: 57ch;
            margin-bottom: 0;
        }
        .ed-split--audience .ed-split-copy p + p {
            margin-top: 1rem;
        }
        .ed-audience-examples {
            padding: 0.15rem 0 0.15rem clamp(1.5rem, 3vw, 2.25rem);
            border-left: 1px solid rgba(43, 41, 37, 0.13);
        }
        .ed-audience-examples .ed-eyebrow {
            margin-bottom: 0.85rem;
        }
        .ed-audience-examples .ed-col-list {
            margin-top: 0;
        }
        .ed-concept-gallery {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(1.35rem, 3vw, 2.25rem);
            align-items: start;
        }
        .ed-concept-figure { margin: 0; }
        .ed-concept-frame {
            display: grid;
            grid-template-rows: 30px minmax(0, 1fr);
            overflow: hidden;
            aspect-ratio: 1.38;
            border: 1px solid rgba(43, 41, 37, 0.12);
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 16px 34px rgba(51, 43, 31, 0.08);
        }
        .design-browserbar {
            display: flex;
            align-items: center;
            gap: 6px;
            height: 30px;
            padding: 0 0.9rem;
            border-bottom: 1px solid rgba(43, 41, 37, 0.08);
            background: #f6f1ea;
        }
        .design-browserbar span {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: rgba(43, 41, 37, 0.18);
        }
        .ed-concept-frame img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: top center;
        }
        .ed-concept-caption {
            margin: 0.85rem 0 0;
            color: var(--mid);
            font-size: 0.88rem;
            line-height: 1.62;
        }
        .ed-concept-caption strong {
            display: block;
            margin-bottom: 0.18rem;
            color: var(--text);
            font-size: 0.94rem;
        }
        /* Gestalterische Bandbreite: zwei bewusst unterschiedliche
           Designrichtungen in einer gemeinsamen Editorial-Strecke. */
        .design-range-section {
            position: relative;
            overflow: hidden;
            padding: clamp(3.4rem, 5.5vw, 5rem) 0;
            border-top: 1px solid rgba(232, 225, 216, 0.82);
            border-bottom: 1px solid rgba(232, 225, 216, 0.82);
            background:
                radial-gradient(circle at 88% 16%, rgba(196, 181, 216, 0.16), transparent 34%),
                linear-gradient(180deg, #f8f4ef 0%, #fdfbf8 100%);
        }
        .design-range-head {
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
            gap: clamp(2rem, 6vw, 5.5rem);
            align-items: end;
            margin-bottom: clamp(1.8rem, 3.2vw, 2.7rem);
        }
        .design-range-head .ed-title {
            max-width: 13ch;
            margin-bottom: 0;
            font-size: clamp(2.5rem, 5vw, 4.6rem);
            line-height: 0.98;
            letter-spacing: -0.018em;
            hyphens: none;
            overflow-wrap: normal;
        }
        .design-range-copy {
            max-width: 46ch;
            margin: 0 0 0.15rem;
            color: var(--mid);
            font-size: 1.02rem;
            line-height: 1.82;
        }
        .design-example + .design-example {
            margin-top: clamp(2.4rem, 4vw, 3.4rem);
            padding-top: clamp(2.4rem, 4vw, 3.4rem);
            border-top: 1px solid rgba(43, 41, 37, 0.12);
        }
        .design-range-section,
        .design-example,
        #neue-website,
        #warum,
        #ablauf,
        #angebote,
        #faq,
        #contact {
            scroll-margin-top: 10rem;
        }
        .design-example-head {
            display: block;
            max-width: 780px;
            margin: 0 auto clamp(1.25rem, 2.8vw, 2rem);
        }
        .design-example-head .ed-eyebrow {
            margin-bottom: 0.35rem;
        }
        .design-example-head h3 {
            max-width: 22ch;
            margin: 0;
            font-family: var(--serif);
            font-size: clamp(1.8rem, 3.4vw, 3rem);
            font-weight: 400;
            line-height: 1.05;
            letter-spacing: -0.012em;
        }
        .design-example-head-spacer { display: none; }
        .design-example-copy {
            max-width: 58ch;
            margin: 1rem 0 0;
            color: var(--mid);
            font-size: 0.98rem;
            line-height: 1.78;
        }
        .design-gallery-hint {
            margin: 0.9rem 0 0;
            color: #64751f;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.015em;
        }
        .design-example-disclosure {
            max-width: 58ch;
            margin: 0.7rem 0 0;
            color: #756f68;
            font-size: 0.76rem;
            line-height: 1.55;
        }
        .design-example--editorial .design-example-head h3 {
            margin-left: 0;
            text-align: left;
        }
        .design-example--editorial .design-example-copy,
        .design-example--editorial .design-gallery-hint,
        .design-example--editorial .design-example-disclosure {
            margin-left: 0;
            text-align: left;
        }
        .design-image-button {
            position: relative;
            display: block;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            border: 0;
            border-radius: 12px;
            background: transparent;
            color: inherit;
            font: inherit;
            cursor: zoom-in;
            text-align: inherit;
        }
        .ed-concept-frame .design-image-button {
            height: 100%;
        }
        .design-image-button img {
            transition: transform 0.35s ease, filter 0.35s ease;
        }
        .design-image-button:hover img {
            transform: scale(1.018);
            filter: brightness(0.94);
        }
        .design-image-button:focus-visible {
            outline: 3px solid #5c7314;
            outline-offset: 4px;
        }
        .design-image-zoom {
            position: absolute;
            right: 0.8rem;
            bottom: 0.8rem;
            padding: 0.48rem 0.72rem;
            border: 1px solid rgba(255, 255, 255, 0.46);
            border-radius: 999px;
            background: rgba(32, 31, 28, 0.82);
            color: #fff;
            font-size: 0.74rem;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.015em;
            box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
            transition: background 0.2s ease, transform 0.2s ease;
        }
        .design-image-button:hover .design-image-zoom,
        .design-image-button:focus-visible .design-image-zoom {
            background: #2c2c2c;
            transform: translateY(-2px);
        }
        .lumiere-toggle {
            position: relative;
            max-width: 920px;
            margin: 0 auto;
            /* Feste Leistenbreite plus einheitlicher Abstand zum Bildrahmen,
               siehe style.css. */
            padding-right: 8rem;
            /* Die Beispielansichten und ihre Erläuterungen sind unterschiedlich
               hoch. Die feste Fläche hält die seitlichen Tabs mittig und ruhig. */
            min-height: 0;
            overflow-anchor: none;
        }
        .lumiere-toggle-panel[hidden] { display: none; }
        .lumiere-toggle-frame {
            overflow: hidden;
            border: 1px solid rgba(43, 41, 37, 0.12);
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 24px 58px rgba(51, 43, 31, 0.12);
        }
        .lumiere-toggle-browserbar {
            display: flex;
            align-items: center;
            gap: 6px;
            height: 30px;
            padding: 0 0.9rem;
            border-bottom: 1px solid rgba(43, 41, 37, 0.08);
            background: #f6f1ea;
        }
        .lumiere-toggle-browserbar span {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: rgba(43, 41, 37, 0.18);
        }
        .lumiere-toggle-frame img {
            display: block;
            width: 100%;
            height: auto;
        }
        .lumiere-toggle-frame .design-image-button {
            border-radius: 0;
        }
        .lumiere-toggle-panel--mobile .lumiere-toggle-frame {
            max-width: 14rem;
            margin-inline: auto;
        }
        .lumiere-toggle-panel--mobile .lumiere-toggle-frame {
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }
        .lumiere-toggle-panel--mobile .design-image-button {
            overflow: visible;
            border-radius: 0;
        }
        .lumiere-toggle-panel--mobile .design-image-button img {
            display: block;
            width: 100%;
            height: auto;
        }
        .lumiere-toggle-caption {
            display: grid;
            margin: 1rem 0 0;
            color: var(--mid);
            font-size: 0.88rem;
            line-height: 1.62;
            text-align: left;
        }
        .lumiere-toggle-caption strong {
            display: block;
            margin-bottom: 0.18rem;
            color: var(--text);
            font-size: 0.94rem;
        }
        .lumiere-toggle-competence {
            display: block;
            margin-top: 0.45rem;
            color: #5c7314;
            font-size: 0.8rem;
            font-weight: 700;
            line-height: 1.55;
        }
        .lumiere-toggle-tabs {
            position: absolute;
            top: 50%;
            right: 0;
            display: grid;
            width: 6.5rem;
            gap: 0.45rem;
            transform: translateY(-50%);
        }
        .lumiere-toggle-tab {
            min-width: 3.55rem;
            min-height: 44px;
            padding: 0.62rem 0.5rem;
            border: 1px solid rgba(43, 41, 37, 0.14);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.72);
            color: #756f68;
            font: inherit;
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(51, 43, 31, 0.06);
            transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }
        .lumiere-toggle-tab:hover {
            color: #5c7314;
            border-color: rgba(111, 138, 24, 0.34);
            transform: translateX(-2px);
        }
        .lumiere-toggle-tab[aria-selected="true"] {
            border-color: #6f8a18;
            background: transparent;
            color: #5c7314;
        }
        @media (max-width: 900px) {
            .design-example-head-spacer { display: none; }
            .design-range-head,
            .design-example-head {
                grid-template-columns: 1fr;
            }
            .lumiere-toggle {
                max-width: none;
                padding-right: 0;
                min-height: 0;
            }
            .lumiere-toggle-tabs {
                position: static;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                width: 100%;
                margin: 0 0 0.85rem;
                transform: none;
            }
            .lumiere-toggle-tab:hover { transform: translateY(-1px); }
            .design-range-head {
                gap: 1.35rem;
            }
            .design-range-head .ed-title {
                max-width: 15ch;
            }
            .design-example--editorial .design-example-head h3 {
                margin-left: 0;
                text-align: left;
            }
            .design-example--editorial .design-example-copy,
            .design-example--editorial .design-example-disclosure {
                margin-left: 0;
                text-align: left;
            }
        }

        /* horizontaler Haarlinien-Trenner zwischen Block-Gruppen */
        .ed-rule {
            border: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(43, 41, 37, 0.12), transparent);
            margin: clamp(2.6rem, 5vw, 4rem) 0;
        }

        /* Spot-Illustrationen (Buntstift-Bilder) — fügen sich rahmenlos
           in den Creme-Hintergrund ein, Limettengrün als Akzent. */
        .ed-visual {
            max-width: 320px;
            margin: 0 auto 1.4rem;
        }
        .ed-visual img {
            display: block;
            width: 100%;
            height: auto;
        }
        .ed-visual--lg { max-width: 380px; }
        .ed-visual--wide {
            max-width: 640px;
            margin: -0.4rem auto clamp(2rem, 4vw, 2.8rem);
        }
        .ed-showcase-image {
            margin: clamp(2.1rem, 4.5vw, 3.25rem) 0 0;
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid rgba(232, 225, 216, 0.9);
            box-shadow: 0 24px 54px rgba(44, 44, 44, 0.1);
            background: var(--cream);
        }
        .ed-showcase-image img {
            display: block;
            width: 100%;
            height: auto;
        }
        .ed-showcase-caption {
            margin: 0;
            padding: 0.82rem 1rem 0.95rem;
            color: var(--mid);
            font-size: 0.84rem;
            line-height: 1.55;
            background: rgba(253, 251, 248, 0.92);
            border-top: 1px solid rgba(232, 225, 216, 0.72);
        }
        .ed-showcase-image--inline {
            margin: 0;
            border-radius: 22px;
            box-shadow: 0 20px 46px rgba(44, 44, 44, 0.09);
        }
        .ed-showcase-image--inline img {
            height: auto;
            object-fit: contain;
        }
        .ed-showcase-image--bleed {
            width: min(980px, 72vw);
            margin-left: calc((100vw - min(1160px, calc(100vw - 3rem))) / -2);
            -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 70%, rgba(0,0,0,0.72) 84%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0%, #000 70%, rgba(0,0,0,0.72) 84%, transparent 100%);
        }
        @media (max-width: 760px) {
            .ed-visual { max-width: 250px; }
            .ed-visual--lg { max-width: 290px; }
            .ed-visual--wide { max-width: 88%; }
            .ed-split--showcase {
                grid-template-columns: 1fr;
                align-items: center;
            }
            .ed-concept-head {
                text-align: left;
            }
            .ed-concept-head--guided {
                grid-template-columns: 1fr;
                gap: 1.8rem;
            }
            .ed-concept-benefits,
            .ed-audience-examples {
                padding: 1.35rem 0 0;
                border-top: 1px solid rgba(43, 41, 37, 0.13);
                border-left: 0;
            }
            .ed-split--audience {
                grid-template-columns: 1fr;
                gap: 1.8rem;
            }
            .ed-split--audience .ed-split-copy h2 {
                max-width: 100%;
                font-size: clamp(2rem, 9vw, 2.35rem);
            }
            .ed-concept-head .ed-col-list,
            .ed-concept-gallery {
                grid-template-columns: 1fr;
            }
            .ed-concept-head .ed-col-list {
                gap: 0;
                padding: 0.3rem 0;
                text-align: left;
            }
            .ed-concept-head .ed-col-list li {
                padding: 0.72rem 0;
                border-left: 0;
            }
            .ed-concept-head .ed-col-list li:not(:nth-child(3n + 1)) {
                border-left: 0;
            }
            .ed-concept-head .ed-col-list li + li {
                border-top: 1px solid rgba(43, 41, 37, 0.08);
            }
            .ed-concept-frame img {
                height: auto;
            }
            .ed-concept-frame {
                aspect-ratio: auto;
            }
            .design-range-head .ed-title {
                font-size: clamp(2.25rem, 11vw, 3.25rem);
                line-height: 1.02;
            }
            .ed-showcase-image { border-radius: 16px; }
            .ed-showcase-image--inline {
                margin-top: 0.6rem;
            }
            .ed-showcase-image--bleed {
                width: auto;
                margin-left: -1.5rem;
                margin-right: -1.5rem;
                -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
            }
        }

        /* gespiegelter Split — Copy rechts, Liste links (Layout-Rhythmus) */
        @media (min-width: 761px) {
            .ed-split--flip .ed-split-copy { order: 2; }
        }

        /* zentriertes Zwischen-Statement — kurze Designhaltung statt Textblock */
        .ed-statement {
            text-align: center;
            padding-top: clamp(3.2rem, 5vw, 4.6rem);
            padding-bottom: clamp(3.2rem, 5vw, 4.6rem);
        }
        .ed-statement blockquote {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            font-size: clamp(1.45rem, 2.8vw, 2.15rem);
            line-height: 1.4;
            color: var(--text);
            max-width: 30ch;
            margin: 0 auto;
            text-wrap: balance;
        }
        .ed-statement blockquote span { color: var(--terracotta); }
        .ed-statement figcaption {
            margin-top: 1rem;
            font-size: 0.88rem;
            color: var(--mid);
        }

        .offer-section {
            background: #f8f4ee;
            border-top: 1px solid rgba(232, 225, 216, 0.78);
            border-bottom: 1px solid rgba(232, 225, 216, 0.62);
        }
        .offer-lead {
            max-width: 780px;
            margin: 0 auto clamp(2.5rem, 5vw, 3.8rem);
            text-align: center;
        }
        .offer-lead .ed-title {
            max-width: 26ch;
            margin-left: auto;
            margin-right: auto;
        }
        .offer-lead p {
            color: var(--mid);
            line-height: 1.82;
            font-size: 1.02rem;
            margin: 0 auto;
        }
        .offer-lead p + p {
            margin-top: 1rem;
        }
        .offer-lead .offer-lead-action {
            margin-top: clamp(1.6rem, 3vw, 2.2rem);
        }
	        .seo-basis-panel {
	            display: grid;
	            grid-template-columns: minmax(0, 0.78fr) minmax(360px, 0.92fr);
	            gap: clamp(2.2rem, 5vw, 5rem);
	            align-items: center;
	            margin: clamp(2.8rem, 5.4vw, 4.2rem) auto 0;
	            padding-top: clamp(2.8rem, 5vw, 4rem);
	            border-top: 1px solid rgba(232, 225, 216, 0.82);
	            max-width: 1120px;
	            scroll-margin-top: 6rem;
	        }
	        .project-reference-section {
	            padding: var(--section-space) clamp(1.5rem, 5vw, 5rem);
	            background: #fdfbf8;
	            border-top: 1px solid rgba(232, 225, 216, 0.72);
	            scroll-margin-top: 10rem;
	        }
	        .project-reference {
	            max-width: 1120px;
	            margin: 0 auto;
	        }
	        .project-reference-head {
	            display: grid;
	            grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
	            gap: clamp(2rem, 5vw, 4.5rem);
	            align-items: end;
	            margin-bottom: clamp(2rem, 4vw, 3rem);
	        }
	        .project-reference-head .ed-title {
	            max-width: 26ch;
	            margin-bottom: 0;
	            font-size: clamp(1.45rem, 2.4vw, 2rem);
	            text-align: left;
	        }
	        .project-reference-head > p {
	            margin: 0;
	            color: var(--mid);
	            line-height: 1.78;
	        }
	        .project-reference-row {
	            display: grid;
	            grid-template-columns: minmax(420px, 1.08fr) minmax(0, 0.92fr);
	            gap: clamp(2rem, 5vw, 4.5rem);
	            align-items: center;
	        }
	        .project-reference-preview {
	            display: block;
	            overflow: hidden;
	            border: 1px solid rgba(43, 41, 37, 0.14);
	            border-radius: 12px;
	            background: #fff;
	            box-shadow: 0 18px 40px rgba(51, 43, 31, 0.09);
	            text-decoration: none;
	            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	        }
	        .project-reference-preview:hover {
	            transform: translateY(-2px);
	            border-color: rgba(170, 205, 43, 0.62);
	            box-shadow: 0 22px 48px rgba(51, 43, 31, 0.13);
	        }
	        .project-reference-browserbar {
	            display: flex;
	            align-items: center;
	            gap: 6px;
	            height: 28px;
	            padding: 0 0.85rem;
	            border-bottom: 1px solid rgba(43, 41, 37, 0.08);
	            background: #f6f1ea;
	        }
	        .project-reference-browserbar span {
	            width: 7px;
	            height: 7px;
	            border-radius: 999px;
	            background: rgba(43, 41, 37, 0.2);
	        }
	        .project-reference-preview img {
	            display: block;
	            width: 100%;
	            height: auto;
	        }
	        .project-reference-copy h3 {
	            margin: 0 0 0.75rem;
	            font-family: var(--serif);
	            font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	            font-weight: 400;
	            line-height: 1.12;
	        }
	        .project-reference-role {
	            margin: 0 0 0.95rem;
	            color: #6f8a18;
	            font-size: 0.88rem;
	            font-weight: 700;
	            line-height: 1.55;
	        }
	        .project-reference-result {
	            margin: 0;
	            color: var(--mid);
	            line-height: 1.78;
	        }
	        .project-reference-actions {
	            display: flex;
	            flex-wrap: wrap;
	            align-items: center;
	            gap: 0.9rem 1.2rem;
	            margin-top: 1.5rem;
	        }
	        .project-reference-link {
	            color: #6f8a18;
	            font-weight: 700;
	            text-decoration: underline;
	            text-underline-offset: 4px;
	        }
	        .project-reference-media {
	            position: relative;
	        }
	        .project-reference-mobile {
	            position: absolute;
	            right: -0.9rem;
	            bottom: -2rem;
	            width: clamp(104px, 24%, 148px);
	            margin: 0;
	            border: 4px solid #2b2925;
	            border-radius: 24px;
	            overflow: hidden;
	            background: #fff;
	            box-shadow: 0 20px 44px rgba(51, 43, 31, 0.24);
	        }
	        .project-reference-mobile img {
	            display: block;
	            width: 100%;
	            height: auto;
	        }
	        .project-case {
	            list-style: none;
	            display: grid;
	            gap: 0.75rem;
	            margin: 0;
	            padding: 0;
	        }
	        .project-case li {
	            display: grid;
	            grid-template-columns: 0.55rem minmax(0, 1fr);
	            gap: 0.72rem;
	            align-items: start;
	            color: var(--mid);
	            line-height: 1.62;
	            font-size: 0.95rem;
	        }
	        .project-case li::before {
	            content: "";
	            width: 0.42rem;
	            height: 0.42rem;
	            border-radius: 999px;
	            background: var(--peach);
	            box-shadow: 0 0 0 4px rgba(170, 205, 43, 0.12);
	            margin-top: 0.58em;
	        }
	        .project-case strong {
	            color: var(--text);
	            font-weight: 700;
	        }
	        .project-reference-outcome {
	            margin-top: 1.35rem;
	            padding-top: 1.25rem;
	            border-top: 1px solid rgba(43, 41, 37, 0.12);
	        }
	        .project-reference-outcome-label {
	            margin: 0 0 0.55rem;
	            color: #6f8a18;
	            font-size: 0.78rem;
	            font-weight: 800;
	            letter-spacing: 0.08em;
	            text-transform: uppercase;
	        }
	        .project-reference-outcome p:not(.project-reference-outcome-label):not(.project-reference-source) {
	            margin: 0;
	            color: var(--text);
	            font-size: 0.96rem;
	            line-height: 1.7;
	        }
	        .project-reference-source {
	            margin: 0.6rem 0 0;
	            color: var(--mid);
	            font-size: 0.76rem;
	            line-height: 1.55;
	        }
	        .project-reference-quote {
	            margin: 1.4rem 0 0;
	            padding-left: 1.1rem;
	            border-left: 3px solid rgba(170, 205, 43, 0.8);
	        }
	        .project-reference-quote p {
	            margin: 0 0 0.45rem;
	            font-family: var(--serif);
	            font-size: 1.08rem;
	            font-style: italic;
	            line-height: 1.6;
	            color: var(--text);
	        }
	        .project-reference-quote cite {
	            font-style: normal;
	            font-size: 0.88rem;
	            color: var(--mid);
	        }
	        .aftercare-section {
	            padding: var(--section-space) clamp(1.5rem, 5vw, 5rem);
	            background: #fdfbf8;
	            border-top: 1px solid rgba(232, 225, 216, 0.72);
	            scroll-margin-top: 10rem;
	        }
	        .aftercare-grid {
	            display: grid;
	            grid-template-columns: repeat(2, minmax(0, 1fr));
	            gap: clamp(1.8rem, 3.5vw, 2.8rem) clamp(2.2rem, 4.5vw, 3.6rem);
	            max-width: 1020px;
	            margin: 2.6rem auto 0;
	        }
	        .aftercare-item h3 {
	            margin: 0.6rem 0 0.5rem;
	            font-size: 1.12rem;
	            line-height: 1.4;
	        }
	        .aftercare-item p {
	            margin: 0;
	            color: var(--mid);
	            line-height: 1.72;
	            font-size: 0.97rem;
	        }
	        .aftercare-note {
	            max-width: 1020px;
	            margin: 2.4rem auto 0;
	            color: var(--mid);
	            font-size: 0.95rem;
	        }
	        .aftercare-note a {
	            color: #6f8a18;
	            font-weight: 700;
	            text-underline-offset: 4px;
	        }
	        .seo-foundation-section {
	            padding: var(--section-space) clamp(1.5rem, 5vw, 5rem);
	            border-top: 1px solid rgba(232, 225, 216, 0.82);
	            border-bottom: 1px solid rgba(232, 225, 216, 0.82);
	            background: linear-gradient(180deg, #f8f4ef 0%, #fdfbf8 100%);
	            scroll-margin-top: 10rem;
	        }
	        .seo-foundation-section .seo-basis-panel {
	            margin-top: 0;
	            padding-top: 0;
	            border-top: 0;
	        }
	        .seo-basis-copy {
	            max-width: 560px;
	        }
	        .seo-basis-panel .ed-title {
	            max-width: 20ch;
	        }
	        .seo-basis-panel p {
	            color: var(--mid);
	            line-height: 1.82;
	            margin: 0;
	        }
	        .seo-basis-panel p + p {
	            margin-top: 1rem;
	        }
	        .seo-basis-points {
	            list-style: none;
	            display: grid;
	            gap: 0.7rem;
	            margin: 1.55rem 0 0;
	            padding: 0;
	            max-width: 540px;
	        }
	        .seo-basis-points li {
	            display: grid;
	            grid-template-columns: 0.55rem minmax(0, 1fr);
	            gap: 0.72rem;
	            align-items: start;
	            color: var(--mid);
	            line-height: 1.62;
	            font-size: 0.95rem;
	        }
	        .seo-basis-points li::before {
	            content: "";
	            width: 0.42rem;
	            height: 0.42rem;
	            border-radius: 999px;
	            background: var(--peach);
	            box-shadow: 0 0 0 4px rgba(170, 205, 43, 0.12);
	            margin-top: 0.58em;
	        }
	        .seo-basis-points strong {
	            color: var(--text);
	            font-weight: 700;
	        }
	        .seo-basis-ai-note {
	            margin-top: 1.55rem !important;
	            padding-top: 1.25rem;
	            border-top: 1px solid rgba(43, 41, 37, 0.12);
	            font-size: 0.94rem;
	        }
	        .seo-basis-ai-note strong {
	            color: var(--text);
	        }
	        .seo-basis-visual {
	            margin: 0;
	            position: relative;
	        }
	        .seo-basis-visual::before {
	            content: "";
	            position: absolute;
	            inset: auto 8% -1.2rem 8%;
	            height: 18%;
	            border-radius: 999px;
	            background: rgba(51, 43, 31, 0.12);
	            filter: blur(28px);
	            pointer-events: none;
	        }
	        .seo-basis-visual img {
	            position: relative;
	            display: block;
	            width: 100%;
	            height: auto;
	            border-radius: 28px;
	            overflow: hidden;
	            box-shadow: 0 24px 58px rgba(51, 43, 31, 0.13);
	        }

        @media (max-width: 760px) {
            .ed-cols.cols-3,
            .ed-cols.cols-2 { grid-template-columns: 1fr; gap: 0; }
            .ed-col { padding: 1.6rem 0; }
            .ed-col + .ed-col::before { display: none; }
            .ed-col + .ed-col { border-top: 1px solid rgba(232, 225, 216, 0.9); }
            .ed-cols.center .ed-col p { max-width: none; }
		            .ed-split { grid-template-columns: 1fr; gap: 1.6rem; }
            .web-project-split { grid-template-columns: 1fr; gap: 2.1rem; }
            .web-project-copy h2 { max-width: 12ch; }
            .web-project-map { border-radius: 22px; padding: 1rem; margin-inline: -0.4rem; }
            .web-project-map-head { display: block; padding-bottom: 1rem; }
            .web-project-map-badge { display: inline-flex; margin-top: 0.85rem; }
            .project-flow::before { left: 2.55rem; }
            .project-flow li {
                grid-template-columns: 2.55rem minmax(0, 1fr);
                gap: 0.72rem;
                padding: 1rem 0.85rem;
            }
            .project-flow span {
                width: 2.55rem;
                height: 2.55rem;
                font-size: 1.06rem;
            }
            .project-flow li:last-child { border-radius: 18px; }
            .seo-basis-panel {
                grid-template-columns: 1fr;
                gap: 1.8rem;
            }
	        .project-reference-head,
	        .project-reference-row {
	            grid-template-columns: 1fr;
	        }
	        .project-reference-head {
	            gap: 1rem;
	        }
	        .project-reference-media {
	            margin-bottom: 1.2rem;
	        }
	        .project-reference-mobile {
	            width: 30%;
	            right: 0.2rem;
	            bottom: -1.4rem;
	            border-width: 3px;
	            border-radius: 18px;
	        }
	        .aftercare-grid {
	            grid-template-columns: 1fr;
	        }
            .seo-basis-copy {
                max-width: none;
            }
            .seo-basis-visual {
                order: -1;
            }
            .seo-basis-visual img {
                height: auto;
                border-radius: 18px;
            }
        }

        @media (max-width: 520px) {
        }

        /* ADVANTAGES */
        .adv-section {
            background: #ffffff;
            border-top: 1px solid var(--border);
        }

        .adv-section .label { color: #5aab8c; }

        .adv-grid {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 2rem;
            margin-top: 3rem;
        }

        .adv-icon {
            width: 52px;
            height: 52px;
            background: rgba(168,213,194,0.35);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #5aab8c;
            margin-bottom: 1.25rem;
        }

        .adv-item h3 {
            font-family: var(--serif);
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

        .adv-item p { font-size: 0.9rem; color: var(--mid); line-height: 1.7; }

        /* PROCESS */
        .process-section {
            background: linear-gradient(180deg, #eaf2f8 0%, #e5edf4 100%);
            border-top: 1px solid rgba(163, 201, 226, 0.35);
        }

        .process-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-top: 3rem;
        }

        .process-step {
            background: var(--sand);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 2.5rem;
            position: relative;
            overflow: hidden;
        }

        .step-bg-num {
            position: absolute;
            top: -0.5rem;
            right: 1.5rem;
            font-family: var(--serif);
            font-size: 7rem;
            color: var(--peach);
            opacity: 0.08;
            line-height: 1;
            user-select: none;
        }

        .step-tag {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--mid);
            margin-bottom: 1rem;
            display: block;
        }

        .process-step h3 {
            font-family: var(--serif);
            font-size: 1.4rem;
            margin-bottom: 0.75rem;
            font-weight: 700;
        }

        .process-step p { font-size: 0.9rem; color: var(--mid); line-height: 1.7; }

        /* CTA */
        .cta-section {
            /* Gleicher leicht getönter Verlauf wie im Abschluss-CTA auf der
               Startseite (.wd-closing) und der FAQ-Seite – einheitlicher Ton
               statt drei leicht unterschiedlicher Cremetöne. */
            background: linear-gradient(180deg, #F7F9EC 0%, #FDFBF8 100%);
            border-top: 1px solid rgba(170,205,43,0.32);
            border-bottom: 1px solid rgba(232,225,216,0.7);
            text-align: center;
            padding: 5.3rem 2rem;
        }

        .cta-section h2 {
            font-family: var(--serif);
            font-size: clamp(2rem, 4vw, 3rem);
            color: var(--text);
            margin-bottom: 1rem;
            line-height: 1.15;
        }

        .cta-section p {
            font-size: 1rem;
            color: var(--mid);
            margin-bottom: 2.5rem;
            max-width: 46ch;
            margin-left: auto;
            margin-right: auto;
        }

        .btn-white {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: #fff;
            color: var(--peach);
            text-decoration: none;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 700;
            font-family: var(--sans);
            border: 1px solid rgba(163,201,226,0.5);
            box-shadow: 0 4px 20px rgba(44,44,44,0.06);
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
        }

        .btn-white:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(163,201,226,0.35);
            border-color: rgba(170,205,43,0.45);
        }

        /* FOOTER */
        .footer {
            background: linear-gradient(180deg, #f7f2ec 0%, #f3ece4 100%);
            color: #5e554d;
            padding: 4rem clamp(1.5rem, 5vw, 5rem) 2rem;
            border-top: 1px solid var(--border);
        }

        .footer-grid {
            max-width: 1120px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 3.25rem;
            padding-bottom: 2.75rem;
            border-bottom: 1px solid #ddd4ca;
        }

        .footer-brand h3 {
            color: #2c2c2c;
            margin-bottom: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }

        .footer-brand-logo {
            display: block;
            width: auto;
            height: 38px;
        }

        .footer-brand p {
            font-size: 0.95rem;
            line-height: 1.75;
            max-width: 30ch;
            color: var(--mid);
        }

        .footer-col h4 {
            font-size: 1.08rem;
            font-weight: 700;
            color: #2f2a25;
            margin-bottom: 1rem;
        }

        .footer-col a, .footer-col p {
            display: block;
            font-size: 0.96rem;
            color: #6f665e;
            text-decoration: none;
            margin-bottom: 0.7rem;
            line-height: 1.5;
            transition: color 0.2s, transform 0.2s;
        }

        .footer-col a:hover {
            color: #3c342e;
            transform: translateX(2px);
        }

        .footer-warning {
            color: #b87450;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .footer-bottom {
            max-width: 1120px;
            margin: 0 auto;
            padding-top: 1.35rem;
            text-align: center;
        }

        .footer-bottom p {
            font-size: 0.86rem;
            color: #857a72;
            margin: 0;
        }

        .footer-bottom .footer-legal {
            font-size: 0.72rem;
            line-height: 1.45;
            color: #8a8a8a;
            margin: 0 auto;
            margin-top: 1.25rem;
            max-width: none;
            text-align: center;
            width: 100%;
        }

        .footer-bottom a {
            display: inline-block;
            margin-top: 0.45rem;
            font-size: 0.9rem;
            color: #6f665e;
            text-decoration: none;
            transition: color 0.2s, transform 0.2s;
        }

        .footer-bottom a:hover {
            color: #3c342e;
            transform: translateY(-1px);
        }

        /* MOBILE */
        @media (max-width: 960px) {
            .services-top { grid-template-columns: 1fr; gap: 1.5rem; }
            .services-grid { grid-template-columns: 1fr 1fr; }
            .audience-grid { grid-template-columns: 1fr; gap: 1.1rem; }
            .audience-card { padding: 1.9rem 1.6rem; }
            .detailed-header { grid-template-columns: 1fr; gap: 1rem; }
            .adv-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
                padding-bottom: 2rem;
            }
            .refined-topics-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .refined-topic {
                padding-right: 0;
            }

            .refined-topic p {
                max-width: none;
            }

        }

        @media (max-width: 640px) {
            .services-grid { grid-template-columns: 1fr; }
            .process-grid { grid-template-columns: 1fr; }
            .adv-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer {
                padding-top: 3.1rem;
                padding-bottom: 1.75rem;
            }
            .footer-grid {
                gap: 1.45rem;
                padding-bottom: 2rem;
            }
            .footer-col h4 {
                margin-bottom: 0.65rem;
            }

        }

        @media (max-width: 900px) {
            .hero-minimal {
                min-height: auto;
                padding: 6.25rem 1.25rem 4.5rem;
            }

            .hero-minimal-inner {
                min-height: auto;
            }

            .hero-visual {
                opacity: 0.92;
            }

            .hero-visual::after {
                background:
                    linear-gradient(90deg, var(--cream) 0%, rgba(253, 251, 248, 0.98) 34%, rgba(253, 251, 248, 0.76) 58%, rgba(253, 251, 248, 0.18) 86%, rgba(253, 251, 248, 0) 100%),
                    linear-gradient(180deg, rgba(253, 251, 248, 0.94) 0%, rgba(253, 251, 248, 0.42) 28%, rgba(253, 251, 248, 0.42) 66%, var(--cream) 100%);
            }

            .hero-sky-motion {
                right: 1%;
                top: 3%;
                width: 36%;
                height: 35%;
            }

            .bird-1 {
                left: 13%;
                bottom: 17%;
                width: 42px;
                animation: birdFly1 18s linear 0.5s infinite;
            }

            .bird-2 {
                left: 16%;
                bottom: 23%;
                width: 36px;
                animation: birdFly2 18s linear 1.2s infinite;
            }

            .bird-3 {
                left: 10%;
                bottom: 14%;
                width: 30px;
                animation: birdFly3 18s linear 1.9s infinite;
            }

            .bird-4 {
                left: 18%;
                bottom: 25%;
                width: 38px;
                animation: birdFly4 18s linear 11s infinite;
            }

            .about-grid-custom {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .about-art {
                max-width: 340px;
            }
        }

        @media (max-width: 640px) {
            .hero-minimal {
                padding: 5.25rem 1.2rem 4rem;
            }

            .hero-minimal-inner {
                min-height: auto;
            }

            .hero-copy {
                max-width: 100%;
                margin-top: 0;
            }

            .hero-visual {
                opacity: 0.7;
            }

            .hero-visual::after {
                background:
                    linear-gradient(90deg, rgba(253, 251, 248, 0.98) 0%, rgba(253, 251, 248, 0.96) 48%, rgba(253, 251, 248, 0.7) 100%),
                    linear-gradient(180deg, rgba(253, 251, 248, 0.92) 0%, rgba(253, 251, 248, 0.4) 48%, var(--cream) 100%);
            }

            .hero-sky-motion {
                display: none;
            }

            .bird-2,
            .bird-3,
            .bird-4 {
                display: none;
            }

            .bird-1 {
                left: 14%;
                bottom: 16%;
                width: 32px;
                animation: birdFly1 18s linear 0.5s infinite;
            }

            .hero-copy h1 {
                font-size: clamp(2.2rem, 9vw, 3.4rem);
            }

            .hero-subtext {
                font-size: 1rem;
                line-height: 1.7;
            }

        }

        @media (prefers-reduced-motion: reduce) {
            .bird,
            .bird-img,
            .hero-sun,
            .hero-cloud {
                animation: none !important;
            }

            .bird,
            .bird-img {
                opacity: 0.22;
            }

            .hero-sun {
                transform: translate(-24%, -26%) scale(1);
                opacity: 0.58;
            }

            .design-image-button img,
            .design-image-zoom {
                transition: none;
            }
        }

        .image-lightbox {
            width: min(1180px, calc(100vw - 2rem));
            max-width: none;
            max-height: calc(100vh - 2rem);
            margin: auto;
            padding: 0;
            overflow: visible;
            border: 0;
            border-radius: 18px;
            background: transparent;
            color: #fff;
        }
        .image-lightbox::backdrop {
            background: rgba(22, 21, 19, 0.88);
            backdrop-filter: blur(5px);
        }
        .image-lightbox-inner {
            position: relative;
            display: grid;
            gap: 0.8rem;
            justify-items: center;
        }
        .image-lightbox-image {
            display: block;
            width: auto;
            max-width: 100%;
            max-height: calc(100vh - 7rem);
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
        }
        .image-lightbox-caption {
            max-width: 72ch;
            margin: 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9rem;
            line-height: 1.5;
            text-align: center;
        }
        .image-lightbox-close {
            justify-self: end;
            padding: 0.62rem 0.88rem;
            border: 1px solid rgba(255, 255, 255, 0.42);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            font: inherit;
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
        }
        .image-lightbox-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .image-lightbox-close:focus-visible {
            outline: 3px solid #c9e45b;
            outline-offset: 3px;
        }
        @media (max-width: 640px) {
            .lumiere-toggle-tabs {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.5rem;
            }
            .lumiere-toggle-tab {
                width: 100%;
                min-width: 0;
                white-space: normal;
                line-height: 1.2;
            }
            .lumiere-toggle-tab[aria-selected="true"] {
                background: var(--peach-lt);
            }
            .design-image-zoom {
                right: 0.55rem;
                bottom: 0.55rem;
                font-size: 0.69rem;
            }
            .image-lightbox {
                width: calc(100vw - 1rem);
                max-height: calc(100vh - 1rem);
            }
            .image-lightbox-image {
                max-height: calc(100vh - 6.5rem);
                border-radius: 10px;
            }
        }
        @media (max-width: 380px) {
            .lumiere-toggle-tabs {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        /* ============================================================
           DESIGN REFRESH v2
           Aufwertungen: Papier-Grain, Button-Tiefe, Verlauf-Karten,
           Karten-Wasserzeichen, Espresso-Footer
           ============================================================ */

        /* --- #1 Papier-Grain (performant: gekacheltes body-Background, ohne fixed/blend-mode) --- */
        body {
            background-color: var(--cream);
            background-image:
                radial-gradient(1200px 600px at 10% 0%, rgba(170,205,43,.06) 0, transparent 60%),
                radial-gradient(1100px 600px at 90% 100%, rgba(196,181,216,.05) 0, transparent 60%),
                url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.13 0 0 0 0 0.1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
            background-repeat: no-repeat, no-repeat, repeat;
            background-size: auto, auto, 180px 180px;
        }

        /* --- #2 Ruhige Business-Buttons --- */
        .btn-primary {
            background: #aacd2b;
            color: #2b2925;
            position: relative;
            overflow: visible;
            box-shadow:
                0 1px 0 rgba(255,255,255,.4) inset,
                0 6px 16px rgba(100,120,24,.18);
            transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
        }
        .btn-primary::before {
            display: none;
        }
        .btn-primary:hover {
            background: #9fbe26;
            transform: translateY(-1px);
            box-shadow:
                0 1px 0 rgba(255,255,255,.35) inset,
                0 8px 18px rgba(100,120,24,.22);
        }
        .btn-primary:hover::before { display: none; }

        .btn-outline {
            background: rgba(255,255,255,.62);
            color: var(--text);
            border: 1px solid rgba(47,42,37,.22);
            box-shadow: none;
            transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
        }
        .btn-outline:hover {
            background: #fff;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(44,44,44,.08);
            color: var(--text);
            border-color: rgba(170,205,43,.75);
        }

        .btn-white {
            background: linear-gradient(180deg, #ffffff 0%, #fbf5ee 100%);
            box-shadow:
                0 1px 0 rgba(255,255,255,.9) inset,
                0 6px 22px rgba(44,44,44,.08),
                0 0 0 1px rgba(163,201,226,.5);
        }
        .btn-white:hover {
            transform: translateY(-2px);
            box-shadow:
                0 1px 0 rgba(255,255,255,.9) inset,
                0 12px 32px rgba(163,201,226,.32),
                0 0 0 1px rgba(170,205,43,.5);
        }

        /* --- #3 Karten-Verläufe (auch refined-topics) --- */
        .service-card {
            background: linear-gradient(150deg, #EDF5FB 0%, #C9DFEC 100%);
            border-color: rgba(163,201,226,.45);
        }
        .service-card:nth-child(2) {
            background: linear-gradient(150deg, #EFF8F3 0%, #C7E4D5 100%);
            border-color: rgba(168,213,194,.45);
        }
        .service-card:nth-child(3) {
            background: linear-gradient(150deg, #F4EFFA 0%, #DDD0EC 100%);
            border-color: rgba(196,181,216,.45);
        }
        .refined-topic:nth-child(1) {
            background: linear-gradient(150deg, #EDF5FB 0%, #C9DFEC 100%);
        }
        .refined-topic:nth-child(2) {
            background: linear-gradient(150deg, #EFF8F3 0%, #C7E4D5 100%);
        }
        .refined-topic:nth-child(3) {
            background: linear-gradient(150deg, #F4EFFA 0%, #DDD0EC 100%);
        }

        /* --- #6 Karten mit Wasserzeichen-Zahl & Tilt --- */
        .service-card {
            position: relative;
            overflow: hidden;
            transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
        }
        .service-card::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: 16px;
            padding: 1.5px;
            background: linear-gradient(135deg, rgba(163,201,226,.7), rgba(196,181,216,.55), rgba(170,205,43,.55));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            opacity: 0;
            transition: opacity .35s ease;
            pointer-events: none;
            z-index: 2;
        }
        .service-card:hover {
            transform: translateY(-6px) rotate(-.4deg);
            box-shadow: 0 22px 46px rgba(20,24,35,.13);
        }
        .service-card:hover::before { opacity: 1; }
        .service-card > * { position: relative; z-index: 1; }

        .service-num {
            position: absolute;
            top: .35rem;
            right: 1rem;
            font-style: italic;
            font-size: 5.5rem !important;
            opacity: .5 !important;
            color: #fff !important;
            text-shadow: 0 2px 0 rgba(163,201,226,.55);
            pointer-events: none;
            margin: 0 !important;
            z-index: 0;
        }
        .service-card:nth-child(2) .service-num { text-shadow: 0 2px 0 rgba(168,213,194,.6); color:#fff !important; }
        .service-card:nth-child(3) .service-num { text-shadow: 0 2px 0 rgba(196,181,216,.6); color:#fff !important; }

        /* refined-topics auch leicht tilten */
        .refined-topic { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .2s; }
        .refined-topic:hover { transform: translateY(-5px) rotate(-.3deg); }

        /* --- Card Surface Style: shadcn-inspired windows --- */
        .audience-card,
        .service-card,
        .detail-card,
        .refined-topic,
        .process-step {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 251, 248, 0.94) 100%) !important;
            border: 1px solid rgba(232, 225, 216, 0.95) !important;
            border-radius: 22px !important;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.82) inset,
                0 14px 34px rgba(51, 43, 31, 0.075) !important;
        }

        .audience-card,
        .service-card,
        .detail-card,
        .refined-topic,
        .process-step {
            padding: clamp(1.45rem, 2.2vw, 2rem) !important;
        }

        .audience-card,
        .service-card,
        .detail-card,
        .refined-topic,
        .process-step {
            position: relative;
            overflow: hidden;
            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease !important;
        }

        .service-card::before {
            display: none !important;
        }

        .audience-card:hover,
        .service-card:hover,
        .detail-card:hover,
        .refined-topic:hover,
        .process-step:hover {
            transform: translateY(-4px) !important;
            border-color: rgba(170, 205, 43, 0.38) !important;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.88) inset,
                0 18px 42px rgba(51, 43, 31, 0.1) !important;
        }

        .service-num {
            position: static !important;
            display: inline-block;
            font-size: 2.25rem !important;
            line-height: 1 !important;
            margin: 0 0 0.85rem !important;
            color: #8aa51f !important;
            opacity: 0.38 !important;
            text-shadow: none !important;
        }

        .service-card:nth-child(1),
        .refined-topic:nth-child(1) {
            background: linear-gradient(150deg, #EDF5FB 0%, #C9DFEC 100%) !important;
            border-color: rgba(163, 201, 226, 0.48) !important;
        }

        .service-card:nth-child(2),
        .refined-topic:nth-child(2) {
            background: linear-gradient(150deg, #EFF8F3 0%, #C7E4D5 100%) !important;
            border-color: rgba(168, 213, 194, 0.5) !important;
        }

        .service-card:nth-child(3),
        .refined-topic:nth-child(3) {
            background: linear-gradient(150deg, #F4EFFA 0%, #DDD0EC 100%) !important;
            border-color: rgba(196, 181, 216, 0.52) !important;
        }

        .service-card:nth-child(1) .service-num { color: #6a9fbe !important; opacity: 0.58 !important; }
        .service-card:nth-child(2) .service-num { color: #5aab8c !important; opacity: 0.58 !important; }
        .service-card:nth-child(3) .service-num { color: #9a84b5 !important; opacity: 0.58 !important; }

        /* --- #8 Espresso-Footer --- */
        .footer {
            background:
                radial-gradient(700px 320px at 85% 10%, rgba(170,205,43,.16), transparent 60%),
                radial-gradient(500px 260px at 10% 100%, rgba(196,181,216,.12), transparent 60%),
                linear-gradient(160deg, #3B2E26 0%, #4a3a30 100%);
            color: #d8c9b8;
            border-top: none;
            position: relative;
        }
        .footer::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--peach) 0%, var(--lavender) 50%, var(--mint) 100%);
        }
        .footer-grid { border-bottom-color: rgba(255,255,255,.1); }
        .footer-brand h3 { color: #f6efe5; }
        .footer-brand p { color: #b9a995; }
        .footer-col h4 { color: #f6efe5; }
        .footer-col a,
        .footer-col p { color: #b9a995; }
        .footer-col a:hover { color: #fff; }
        .footer-bottom p { color: #8d7e6d; }
        .footer-legal {
            font-size: 0.72rem;
            line-height: 1.45;
            color: #8a8a8a;
            margin: 0 auto;
            margin-top: 1.25rem;
            max-width: none;
            text-align: center;
            width: 100%;
        }
        .footer-bottom a { color: #b9a995; }
        .footer-bottom a:hover { color: #fff; }
        .footer-brand h3.footer-logo-text { display: block; gap: 0; margin-bottom: 0.95rem; line-height: 1; }
        .footer-logo-top { display: block; font-family: var(--serif); font-weight: 700; font-size: 2.4rem; line-height: 0.92; letter-spacing: -0.01em; }
        .footer-logo-b  { color: #C4B5D8; }
        .footer-logo-yte { color: rgba(255,255,255,0.92); }
        .footer-logo-werkstatt { display: block; font-family: var(--sans); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.34em; color: rgba(255,255,255,0.78); margin-top: 0.4rem; text-transform: uppercase; }

        /* Finale Farb- und Effektkontrolle: Grün als Fläche hell, als Text dunkel. */
        .hero-kicker,
        .label,
        .eyebrow,
        .btn-outline:hover {
            color: #5c7314;
        }
        .ed-eyebrow { color: #6b6349; }
        .btn-primary {
            box-shadow:
                0 1px 0 rgba(255,255,255,.4) inset,
                0 4px 10px rgba(75,88,25,.15);
        }
        .btn-primary:hover {
            box-shadow:
                0 1px 0 rgba(255,255,255,.35) inset,
                0 6px 13px rgba(75,88,25,.18);
        }
        .web-benefits {
            padding: clamp(4.5rem, 8vw, 7.5rem) 0;
            background: #fdfbf8;
            border-bottom: 1px solid rgba(43, 41, 37, 0.12);
        }
        .web-benefits-grid {
            display: grid;
            grid-template-columns: minmax(0, .88fr) minmax(360px, 1.12fr);
            gap: clamp(3rem, 9vw, 8rem);
            align-items: start;
        }
        .web-benefits h2 {
            max-width: 11ch;
            margin: .65rem 0 0;
            font-family: var(--serif);
            font-size: clamp(2.6rem, 5vw, 5.2rem);
            font-weight: 400;
            line-height: 1.01;
        }
        .web-benefits-list { list-style: none; border-top: 1px solid rgba(43,41,37,.16); }
        .web-benefits-list li {
            display: grid;
            grid-template-columns: 3.2rem minmax(0, 1fr);
            gap: 1.1rem;
            padding: 1.35rem 0;
            border-bottom: 1px solid rgba(43,41,37,.16);
        }
        .web-benefits-list span { color: var(--accent-ink); font-weight: 800; }
        .web-benefits-list h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
        .web-benefits-list p { margin: 0; color: var(--mid); line-height: 1.62; }
        .webdesign-context {
            padding: clamp(3.4rem, 5.5vw, 5rem) 0;
            border-bottom: 1px solid rgba(232, 225, 216, 0.82);
            background: #fcf9f4;
        }
        .webdesign-context-facts {
            padding-left: clamp(1.4rem, 3vw, 2.4rem);
            border-left: 1px solid rgba(43, 41, 37, 0.14);
        }
        .webdesign-context-facts .ed-col-list {
            max-width: 36ch;
            margin: 0.9rem 0 0;
        }
        .webdesign-context-facts a { color: var(--accent-ink); }
        .ed-statement { padding-top: clamp(1.8rem, 3vw, 2.6rem); }
        @media (max-width: 800px) {
            .web-benefits-grid { grid-template-columns: 1fr; gap: 2rem; }
            .webdesign-context-facts {
                padding: 1.5rem 0 0;
                border-top: 1px solid rgba(43, 41, 37, 0.14);
                border-left: 0;
            }
        }

/* Zielgruppen-Block (#fuer-wen): eine gemeinsame linke Satzkante statt zentriertem
   Flattersatz. Die globale .ed-col-list aus style.css ist mit max-width 32ch und
   display:inline-grid fuer kurze Stichworte gebaut und setzt hier ganze Saetze als
   schmalen, mittigen Turm. Alle Korrekturen greifen nur hier: .ed-notes kommt
   ausschliesslich in dieser Datei vor, css/style.css bleibt unveraendert. */
.ed-notes {
  max-width: 38rem;
  text-align: left;
}
.ed-notes .ed-eyebrow,
.ed-notes .ed-title { text-align: left; }
.ed-notes .ed-title { text-wrap: balance; }
.ed-notes .ed-intro {
  max-width: none;
  margin: 0;
  text-wrap: pretty;
}
.ed-notes .ed-col-list {
  display: grid;
  max-width: none;
  margin: 1.5rem 0 1.9rem;
  padding: 0;
  gap: 0.95rem;
  text-align: left;
}
.ed-notes .ed-col-list li {
  padding-left: 1.15rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.ed-notes .ed-col-list li::before { top: 0.52em; }
.ed-notes .ed-audience-name {
  display: block;
  font-weight: 600;
  color: var(--text);
}
/* Haengender Aufzaehlungspunkt: nur wenn der Block nicht am Containerrand
   klebt (ab 46rem Viewport bleibt links genug Luft). */
@media (min-width: 46rem) {
  .ed-notes .ed-col-list { margin-inline: -1.15rem 1.15rem; }
}