/* =========================================================
   LeBuild · style.css
   Minimaler Template-Stylesheet ohne Framework.
   Tokens oben, Komponenten unten, mobile-first.
   Stil: hell und klar, Navy-Überschriften, kräftiges Blau, weiße Karten.
   ========================================================= */

/* ---------- Design Tokens ---------- */
/* Farben, helle Fassung. Die Vorführungen bleiben auch im dunklen Design hell,
   sie zeigen eine fremde Website. */
/* Hausschrift LEWEB Sans aus dem Brand Brain */
@font-face { font-family: "LEWEB Sans"; src: url("../fonts/LEWEBSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "LEWEB Sans"; src: url("../fonts/LEWEBSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "LEWEB Sans"; src: url("../fonts/LEWEBSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "LEWEB Sans"; src: url("../fonts/LEWEBSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root,
[data-theme="dark"] :is(.demo, .demo2, .demo3) {
    --color-bg:           #ffffff;
    --color-bg-soft:      #fafafa;
    --color-bg-hero:      #f5f5f5;
    --color-bg-dark:      #242529; /* Dark aus dem LEWEB Brand Brain */
    --color-surface:      #ffffff;
    --color-header-bg:    rgba(255, 255, 255, 0.92);

    --color-heading:      #242529;
    --color-text:         #36373f;
    --color-text-muted:   #4e4f56;
    --color-text-inverse: #ffffff;

    /* LEWEB-Grün aus dem Brand Brain. Text auf Grün ist dunkel, nie Weiß. */
    --color-primary:        #00aaa0; /* Flächen, Linien, Fokus */
    --color-primary-700:    #1fc4b9; /* Knopf beim Darüberfahren */
    --color-primary-text:   #007a73; /* Text in Primärfarbe auf Hell */
    --color-primary-bright: #8ef0e8;
    --color-primary-soft:   #e6f7f6;
    --color-on-primary:     #242529;
    /* Verlauf für Flächen in der Primärfarbe: dezent ins Hellere. */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, #ffffff) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-700) 0%, color-mix(in srgb, var(--color-primary-700) 80%, #ffffff) 100%);
    --color-success:      #20a15f;
    --color-success-soft: #e4f4ec;

    --color-border:        #f0f0f0;
    --color-border-strong: #dcdcdd;

    --shadow-sm: 0 1px 2px rgba(36, 37, 41, 0.05);
    --shadow-md: 0 12px 32px -14px rgba(36, 37, 41, 0.18);
    --shadow-lg: 0 30px 60px -24px rgba(36, 37, 41, 0.28);
    --shadow-primary: 0 10px 24px -10px rgba(0, 170, 160, 0.65);
}

/* Dunkle Fassung: Flächen und Grautöne aus dem LEWEB Brand Brain, grüner Text heller. */
[data-theme="dark"] {
    --color-bg:           #242529;
    --color-bg-soft:      #2c2d32;
    --color-bg-hero:      #242529;
    --color-bg-dark:      #36373f;
    --color-surface:      #36373f;
    --color-header-bg:    rgba(36, 37, 41, 0.88);

    --color-heading:      #ffffff;
    --color-text:         #fafafa;
    --color-text-muted:   #dcdcdd;

    --color-primary:        #00aaa0;
    --color-primary-700:    #1fc4b9;
    --color-primary-text:   #7fe6de;
    --color-primary-soft:   rgba(0, 170, 160, 0.18);
    --color-success:      #4ade80;
    --color-success-soft: rgba(74, 222, 128, 0.15);

    --color-border:        #3e3f47;
    --color-border-strong: #46474e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 32px -14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 10px 24px -10px rgba(0, 170, 160, 0.45);
    color-scheme: dark;
}

:root {

    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   24px;
    --radius-xl:   28px;
    --radius-pill: 999px;

    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 5rem;
    --space-9: 7rem;

    --font-sans: "LEWEB Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --container-max: 1400px;
    --gutter: clamp(1.5rem, 3vw, 3rem);
    --header-height: 72px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

::selection { background: var(--color-primary); color: var(--color-on-primary); }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

a {
    color: var(--color-primary-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s var(--ease);
}
a:hover { color: var(--color-primary-text); }

h1, h2, h3, h4 {
    color: var(--color-heading);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
    font-weight: 700;
    text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 2.4vw + 1.2rem, 3.2rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: pretty; }
h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.6rem); letter-spacing: -0.025em; }
h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.1em 0.4em;
}

blockquote {
    margin: var(--space-6) 0 0;
    padding: var(--space-5) var(--space-6);
    background: var(--color-primary-soft);
    border-radius: var(--radius-md);
    color: var(--color-heading);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.55;
}
blockquote p:last-child { margin-bottom: 0; }

/* ---------- Utilities ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    top: -100px; left: var(--space-3);
    background: var(--gradient-primary);
    color: var(--color-on-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    z-index: 1000;
}
.skip-link:focus { top: var(--space-3); color: var(--color-text-inverse); }

/* ---------- Header / Navigation ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-header-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow 0.2s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header__inner {
    display: flex;
    align-items: center;
    min-height: var(--header-height);
    gap: var(--space-4);
}

.brand {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
}
/* Logo steht übereinander (Zeichen über Schriftzug); dark im hellen, light im dunklen Modus. */
.brand__logo { display: block; height: 44px; width: auto; }
.brand__logo--light { display: none; }
[data-theme="dark"] .brand__logo--dark { display: none; }
[data-theme="dark"] .brand__logo--light { display: block; }
.site-footer .brand__logo { height: 52px; }

.site-header__actions {
    order: 3;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-heading);
    cursor: pointer;
}
.theme-toggle:hover { border-color: var(--color-border-strong); }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

.nav-toggle {
    order: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 16px; height: 2px;
    background: var(--color-heading);
    border-radius: 2px;
    position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top:  5px; }

.primary-nav { display: none; }
.primary-nav.is-open { display: block; }

.primary-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.primary-nav__link {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.primary-nav__link:hover { color: var(--color-primary-text); }
.primary-nav__link.is-active { color: var(--color-primary-text); }

@media (min-width: 960px) {
    .nav-toggle { display: none; }
    /* Menü steht rechts, direkt vor Design-Umschalter und Loslegen. */
    .primary-nav { display: block; margin-right: var(--space-4); }
    .primary-nav__list {
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
        padding: 0;
    }
    .primary-nav__link { padding: var(--space-2) 0; position: relative; }
    .primary-nav__link.is-active::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--color-primary);
    }
}

/* Mobile: dropdown panel */
@media (max-width: 959px) {
    .primary-nav {
        position: absolute;
        top: calc(100% + 8px); left: var(--space-4); right: var(--space-4);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        padding: 0 var(--space-3);
    }
}

/* ---------- Sections ---------- */
.section {
    padding: var(--space-8) 0;
}
/* Heller Abschnitt, oben und unten weich ins Weiß verlaufend (keine harten Kanten). */
.section--soft { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 18%, var(--color-bg-soft) 82%, var(--color-bg) 100%); }
.section--narrow > .container { max-width: 760px; }

.section__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-7);
}
.section__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    color: var(--color-primary-text);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.section__lead {
    color: var(--color-text-muted);
    font-size: 1.12rem;
    margin: 0;
}

.page-header { text-align: center; margin-bottom: var(--space-7); }

.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: var(--space-7); }
.prose h2:first-child { margin-top: 0; }
.prose > p { font-size: 1.06rem; }
.section--narrow .prose h2 { font-size: clamp(1.35rem, 1vw + 1rem, 1.7rem); }

@media (min-width: 960px) {
    .section { padding: var(--space-9) 0; }
}

/* ---------- Hero ---------- */
/* Text mittig oben, die Vorführung groß darunter; die Fläche verläuft hinter ihr ins Weiß. */
.hero {
    --hero-fade: clamp(9rem, 22vw, 20rem);
    position: relative;
    padding: var(--space-8) 0 var(--space-7);
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(0, 170, 160, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, var(--color-bg-hero) 0, var(--color-bg-hero) 40%, var(--color-bg) calc(100% - var(--hero-fade) + 4rem));
    overflow: hidden;
}
.hero__grid {
    display: grid;
    gap: var(--space-7);
    justify-items: center;
}
.hero__content {
    max-width: 1040px;
    text-align: center;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding: 5px 14px;
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 600;
}
.hero h1 { margin-bottom: var(--space-5); font-size: clamp(2.2rem, 2.8vw + 1.1rem, 3.5rem); }
.hero__lead {
    margin-left: auto;
    margin-right: auto;
    font-size: 1.15rem;
    color: var(--color-text);
    max-width: 56ch;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* ---------- Platz für die Vorführungen im Hero (demos.css, demos.js) ---------- */
.hero__visual { position: relative; width: 100%; max-width: 1080px; min-width: 0; }
/* Blauer Schein hinter dem Fenster. */
.hero__visual::before {
    content: '';
    position: absolute;
    inset: 8% 6% 20%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 170, 160, 0.28), transparent);
    filter: blur(40px);
    pointer-events: none;
}

/* Vorteile neben dem Beispielfenster: schwebende Kärtchen links und rechts (breit), sonst als Raster darunter. */
.slides { position: relative; }
.perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}
.perk {
    position: relative;
    display: block;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    /* Ohne backdrop-filter: der Weichzeichner müsste bei jeder Bewegung neu rechnen und ruckelt.
       Im Stil der Karten: ohne Linie, große Rundung, weicher Schatten. */
    background: var(--color-surface);
    box-shadow: 0 18px 40px -18px rgba(36, 37, 41, 0.28), 0 2px 6px rgba(36, 37, 41, 0.04);
    text-align: left;
    animation: perk-in 0.6s var(--ease) both;
}
/* Symbol klein vor der Überschrift, ohne Fläche in Grün; der Text darunter hat die ganze Breite. */
.perk__icon {
    position: absolute;
    top: 17px;
    left: 18px;
    display: grid;
    place-items: center;
    color: var(--color-primary-text);
}
.perk__icon svg { width: 16px; height: 16px; stroke-width: 2.2; }
.perk__text { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; line-height: 1.45; color: var(--color-text-muted); }
.perk__text b { text-indent: 22px; font-size: 0.92rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-heading); }
/* Aufforderung zum Ausprobieren: weiß wie die anderen, aber mit umlaufendem Schimmer am Rand und grünem Leuchten;
   im Raster zuerst. Der Rand ist ein Verlauf, den die Maske auf 2px beschneidet. */
@property --perk-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.perk--primary { order: -1; }
.perk--primary::before,
.perk--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
.perk--primary::before {
    padding: 2px;
    background: conic-gradient(from var(--perk-angle), var(--color-primary), transparent 25%, var(--color-primary-bright) 50%, transparent 75%, var(--color-primary));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: perk-shimmer 4s linear infinite;
}
.perk--primary::after {
    box-shadow: 0 0 32px 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
    animation: perk-glow 2.4s ease-in-out infinite alternate;
}
@keyframes perk-shimmer { to { --perk-angle: 360deg; } }
@keyframes perk-glow { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .perk--primary::before, .perk--primary::after { animation: none; } }
.perk--2 { animation-delay: 0.1s; }
.perk--3 { animation-delay: 0.2s; }
.perk--4 { animation-delay: 0.3s; }
.perk--5 { animation-delay: 0.4s; }
@keyframes perk-in { from { opacity: 0; transform: translateY(12px); } }

@media (min-width: 1280px) {
    .perks { display: block; margin: 0; }
    .perk {
        position: absolute;
        z-index: 3;
        width: 256px;
        will-change: translate, opacity;
    }
    /* Ragen ein Stück übers Fenster, links und rechts versetzt; „Probier es selbst“ oben links neben der
       Überschrift der Vorschau, die man anklicken kann. */
    .perk--5 { top: 12%; right: calc(100% - 24px); }
    .perk--1 { top: 44%; right: calc(100% - 24px); }
    .perk--2 { top: 28%; left: calc(100% - 24px); }
    .perk--3 { top: 72%; right: calc(100% - 24px); }
    .perk--4 { top: 62%; left: calc(100% - 24px); }
    /* Platz für die Kärtchen links und rechts: sie ragen 24px ins Fenster und sonst nie aus dem Bild. */
    .slides { max-width: calc(100vw - 2 * (256px - 24px) - 2 * var(--space-4)); }
}
@media (prefers-reduced-motion: reduce) { .perk { animation: none !important; } }

@media (min-width: 960px) {
    .hero { padding: var(--space-9) 0 var(--space-8); }
    .hero__grid { gap: var(--space-8); }
}

/* ---------- Buttons ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button--small { padding: 0.55rem 1.15rem; font-size: 0.92rem; }
.button--accent,
.button--primary {
    background: var(--gradient-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-primary);
}
.button--accent:hover,
.button--primary:hover { background: var(--gradient-primary-hover); color: var(--color-on-primary); }
.button--ghost {
    background: transparent;
    color: var(--color-primary-text);
    border-color: var(--color-primary);
}
.button--ghost:hover { background: var(--color-primary-soft); color: var(--color-primary-text); }
/* Pfeil als CSS, damit der Linktext ein einfaches Textfeld bleibt. */
.button--arrow::after {
    content: '';
    width: 16px; height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s var(--ease);
}
.button--arrow:hover::after { transform: translateX(3px); }

/* ---------- Card grids ---------- */
.card-grid {
    display: grid;
    gap: var(--space-5);
}
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (min-width: 960px) {
    .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
    .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* Karten: weiß, ohne Linie, große Rundung, weicher Schatten (wie die Karten der Startseite). */
.content-list__item {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.content-list__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Karten im Raster (Typ „Karten“): weiße Kacheln ohne Linie auf grauem Abschnitt,
   großes Symbol ohne Fläche, kräftige Überschrift. card-grid--steps nummeriert sie. */
.section:has(.card-grid > .feature-card, .targets) {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-hero) 12%, var(--color-bg-hero) 88%, var(--color-bg) 100%);
}
.feature-card {
    position: relative;
    padding: var(--space-6) var(--space-6) var(--space-7);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature-card:hover {
    transform: scale(1.015);
    box-shadow: var(--shadow-md);
}
.card-grid--steps { counter-reset: schritt; }
.card-grid--steps > .feature-card { counter-increment: schritt; }
.card-grid--steps > .feature-card::after {
    content: counter(schritt);
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    display: inline-grid;
    place-items: center;
    min-width: 30px; height: 30px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}
.feature-card__icon {
    display: inline-flex;
    width: 48px; height: 48px;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}
.feature-card .feature-card__icon,
.targets__item .feature-card__icon {
    width: auto; height: auto;
    background: none;
    color: var(--color-heading);
    border-radius: 0;
    margin-bottom: var(--space-5);
}
.feature-card .feature-card__icon svg,
.targets__item .feature-card__icon svg { width: 36px; height: 36px; stroke-width: 1.6; }
.feature-card h3 {
    margin-bottom: var(--space-3);
    font-size: clamp(1.15rem, 0.3vw + 1.05rem, 1.3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.feature-card p  { color: var(--color-text); margin: 0; }

/* ---------- Kundenstimmen ---------- */
/* Kundenstimmen in einer Zeile zum Wischen, wie die Karten von „So funktioniert LeBuild“: erste Karte bündig
   mit dem Inhalt, die nächsten schauen rechts heraus; Punkte darunter (main.js, initDots). */
.quotes { overflow-x: clip; }
.quotes__track {
    display: flex;
    gap: var(--space-5);
    /* Oben und unten Platz für Anheben und Schatten beim Hover (sonst schneidet overflow sie ab), per margin ausgeglichen. */
    padding: var(--space-5) max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter))) 72px;
    margin: calc(var(--space-5) * -1) 0 -48px;
    scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track > .quote { flex: 0 0 min(400px, 84vw); scroll-snap-align: start; }
.quotes__track + .rev__dots { display: flex; position: relative; }
/* Im Stil der Schritt-Karten, aber weiß und ohne Rand: große Rundung, weicher Schatten, großes Anführungszeichen in Grün. */
.quote { --accent: var(--color-primary); }
.quote {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.quote::before {
    content: "“";
    display: block;
    height: 0.5em;
    margin-bottom: var(--space-3);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--accent);
}
.quote blockquote {
    flex: 1;
    margin: 0 0 var(--space-6);
    padding: 0;
    background: none;
    color: var(--color-heading);
    font-size: clamp(1.1rem, 0.4vw + 1rem, 1.25rem);
    font-weight: 500;
    line-height: 1.5;
}
/* Bewertung klein oben rechts, auf Höhe des Anführungszeichens: Zahl mit gefülltem Stern, gedämpft. */
.quote__rating {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}
.quote__rating svg { width: 11px; height: 11px; fill: currentColor; }
.quote figcaption { display: flex; align-items: center; gap: var(--space-3); line-height: 1.3; }
.quote figcaption b { display: block; color: var(--color-heading); }
.quote figcaption small { color: var(--color-text-muted); font-size: 0.88rem; }
.quote figcaption img {
    flex: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg-soft);
    box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* So ziemlich alles: Punkte als Pillen auf schwarzer Fläche. Der offene Punkt zeigt seinen Text,
   sein Bild steht rechts und läuft weich ins Schwarz aus (Bilder geschlossener Punkte sind mit dem Inhalt ausgeblendet). */
#mehr .section__header { margin-bottom: var(--space-6); }
.showcase {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 600px;
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #0b0b0c;
}
.showcase__image {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    z-index: -1;
    width: 85%;
    height: 100%;
    object-fit: cover;
    /* Weicher Verlauf nach links (mehrere Stufen statt linear, damit keine Kante sichtbar wird). */
    --fade-x: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.04) 10%, rgba(0, 0, 0, 0.14) 20%, rgba(0, 0, 0, 0.32) 31%, rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 0.8) 53%, #000 66%);
    --fade-y: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-image: var(--fade-x), var(--fade-y);
    -webkit-mask-composite: source-in;
    mask-image: var(--fade-x), var(--fade-y);
    mask-composite: intersect;
    animation: showcase-in 0.7s var(--ease);
}
@keyframes showcase-in { from { opacity: 0; transform: scale(1.04); } }
.showcase__item {
    max-width: 400px;
    border-radius: var(--radius-xl);
    /* Kein backdrop-filter: er würde das Bild im Punkt statt in der ganzen Fläche einpassen. */
    background: rgba(40, 40, 44, 0.85);
    color: #ffffff;
}
.showcase__item summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 22px 12px 14px;
    list-style: none;
    font-weight: 700;
    cursor: pointer;
}
.showcase__item summary::-webkit-details-marker { display: none; }
/* Plus aus zwei Balken statt Schriftzeichen: sitzt genau in der Mitte des Kreises. */
.showcase__item summary::before {
    content: "";
    flex: none;
    width: 24px; height: 24px;
    box-sizing: border-box;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background:
        linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
}
.showcase__item:not([open]) summary:hover { color: var(--color-primary-bright); }
.showcase__item[open] { padding: var(--space-5) var(--space-5) var(--space-5); }
.showcase__item[open] summary { padding: 0; cursor: default; }
.showcase__item[open] summary::before { display: none; }
.showcase__item p { margin: var(--space-2) 0 0; color: rgba(255, 255, 255, 0.85); }
.showcase__item summary:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; border-radius: var(--radius-xl); }
.showcase__more { margin: var(--space-5) 0 0; text-align: center; color: var(--color-primary-text); font-weight: 600; }

/* Schmal: Bild oben, Punkte darunter auf dunkler Fläche. */
@media (max-width: 767px) {
    .showcase { min-height: 0; padding: calc(62vw + var(--space-4)) var(--space-4) var(--space-5); }
    .showcase__image {
        bottom: auto;
        width: 100%;
        height: 62vw;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
    .showcase__item { max-width: none; }
}

/* ---------- So funktioniert LeBuild: Karten zum Wischen, das Plus zeigt den ganzen Text ---------- */
.revolution { overflow-x: clip; }
/* Farben der Website: Grau, LEWEB-Grün hell und kräftiger; Akzent immer das Grün. */
.rev-card { --accent: var(--color-primary-text); }
.rev-card--step1 { --tint: var(--color-bg-hero); }
.rev-card--step2 { --tint: var(--color-primary-soft); }
.rev-card--step3 { --tint: color-mix(in srgb, var(--color-primary) 22%, #ffffff); }
[data-theme="dark"] .rev-card { --tint: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-soft)); }
[data-theme="dark"] .rev-card--step3 { --tint: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg-soft)); }
.rev__track {
    display: flex;
    gap: var(--space-5);
    /* Erste Karte bündig mit dem Inhalt, die nächste schaut rechts heraus. */
    padding: 0 max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
    scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.rev__track::-webkit-scrollbar { display: none; }
.rev-card {
    position: relative;
    flex: 0 0 min(560px, 84vw);
    display: flex;
    flex-direction: column;
    min-height: 540px;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--tint);
    scroll-snap-align: start;
    overflow: hidden;
}
.rev-card__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.rev-card__label { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-heading); }
.rev-card__title { margin: var(--space-3) 0 0; font-size: clamp(1.3rem, 0.8vw + 1.05rem, 1.6rem); font-weight: 700; line-height: 1.25; color: var(--color-heading); }
.rev-card__toggle {
    flex: none;
    width: 36px; height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background:
        linear-gradient(#ffffff, #ffffff) center / 14px 2px no-repeat,
        linear-gradient(#ffffff, #ffffff) center / 2px 14px no-repeat,
        #6e6e73;
    cursor: pointer;
    transition: transform 0.3s var(--ease), background-color 0.2s var(--ease);
}
.rev-card__toggle:hover { background-color: var(--color-heading); }
.rev-card__toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.rev-card.is-open .rev-card__toggle { transform: rotate(45deg); }
.rev-card__visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding-top: var(--space-5);
}
/* Plus: Bildchen weg, Text erscheint unter dem Titel, Absatz für Absatz, jeder mit Farbstrich. */
.rev-card__detail { display: none; margin-top: var(--space-6); }
.rev-card.is-open .rev-card__visual { display: none; }
.rev-card.is-open .rev-card__detail { display: block; }
.rev-card.is-open .rev-card__detail > * { animation: rev-in 0.45s var(--ease) both; }
.rev-card.is-open .rev-card__detail > :nth-child(2) { animation-delay: 0.08s; }
.rev-card.is-open .rev-card__detail > :nth-child(3) { animation-delay: 0.16s; }
.rev-card__detail p {
    position: relative;
    margin: 0 0 var(--space-5);
    padding-left: var(--space-5);
    font-size: clamp(1.05rem, 0.3vw + 1rem, 1.2rem);
    line-height: 1.55;
    font-weight: 400;
    color: var(--color-heading);
}
.rev-card__detail p::before {
    content: "";
    position: absolute;
    top: 0.3em; bottom: 0.3em; left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--accent);
}
.rev-card__detail > :last-child, .rev-quote > :last-child { margin-bottom: 0; }
.rev-quote { margin: 0; padding: 0; border-radius: 0; background: none; }
.rev-quote::before { content: "“"; display: block; height: 0.5em; margin-bottom: var(--space-2); font-family: Georgia, "Times New Roman", serif; font-size: 3.5rem; line-height: 1; color: var(--accent); }
.rev-quote p { padding-left: 0; font-size: clamp(1rem, 0.2vw + 0.95rem, 1.1rem); font-weight: 400; }
.rev-quote p::before { content: none; }
.rev-quote cite { display: block; font-style: normal; font-weight: 600; font-size: 0.95rem; color: var(--color-text-muted); }

/* Bildchen in den Karten */
.rev-stat { display: flex; align-items: center; gap: var(--space-3); color: var(--color-heading); }
.rev-stat b { font-size: clamp(4.5rem, 5vw + 2rem, 6rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; }
.rev-stat span { display: flex; flex-direction: column; }
.rev-stat i { font-style: normal; font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.rev-stat em { font-style: normal; color: var(--color-text-muted); }
.rev-stat--good em::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.rev-bar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 12px 10px 16px;
    border-radius: 999px;
    background: #242529;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}
.rev-bar svg { width: 20px; height: auto; fill: #a4f5a6; }
.rev-bar em { font-style: normal; padding: 6px 14px; border-radius: 999px; background: #a4f5a6; color: #242529; }
.rev-house {
    display: grid;
    place-items: center;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, color-mix(in srgb, var(--accent) 22%, #ffffff) 100%);
    color: var(--accent);
}
[data-theme="dark"] .rev-house { background: radial-gradient(circle at 35% 30%, var(--color-surface) 0%, var(--color-bg) 100%); }
.rev-house svg { width: 110px; height: 110px; }

/* Schritt 1: ein Chat mit dem Kunden in drei Abschnitten (main.js schaltet data-phase weiter, solange die
   Karte zu sehen ist). Oben die drei Abschnitte als Pillen, nur die aktuelle zeigt ihren Namen.
   Wir links mit Logo, der Kunde rechts in Grün. */
.rev-chat { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: min(400px, 100%); }
.rev-plan { display: flex; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rev-plan li {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-heading);
    font-size: 0.85rem;
    font-weight: 600;
    transition: box-shadow 0.4s var(--ease);
}
.rev-plan i {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
    color: var(--color-text-muted);
    transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.rev-plan i svg { width: 16px; height: 16px; }
.rev-plan span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.5s var(--ease), padding 0.5s var(--ease); }
.rev-chat[data-phase="1"] .rev-plan li:nth-child(1),
.rev-chat[data-phase="2"] .rev-plan li:nth-child(2),
.rev-chat[data-phase="3"] .rev-plan li:nth-child(3) { box-shadow: var(--shadow-md); }
.rev-chat[data-phase="1"] .rev-plan li:nth-child(1) i,
.rev-chat[data-phase="2"] .rev-plan li:nth-child(2) i,
.rev-chat[data-phase="3"] .rev-plan li:nth-child(3) i { background: var(--gradient-primary); color: var(--color-on-primary); }
.rev-chat[data-phase="1"] .rev-plan li:nth-child(1) span,
.rev-chat[data-phase="2"] .rev-plan li:nth-child(2) span,
.rev-chat[data-phase="3"] .rev-plan li:nth-child(3) span { max-width: 220px; padding: 0 12px 0 10px; }

.rev-chat__window { width: 100%; min-height: 230px; }
.rev-chat__phase { display: none; flex-direction: column; gap: var(--space-2); }
.rev-chat[data-phase="1"] [data-chat-phase="1"],
.rev-chat[data-phase="2"] [data-chat-phase="2"],
.rev-chat[data-phase="3"] [data-chat-phase="3"] { display: flex; }
.rev-msg {
    position: relative;
    max-width: 82%;
    margin: 0;
    padding: 9px 14px;
    border-radius: 18px;
    font-size: 1rem;
    line-height: 1.4;
}
.rev-msg--us {
    align-self: flex-start;
    margin-left: 34px;
    border-bottom-left-radius: 6px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-heading);
}
/* Favicon neben jeder Nachricht von uns. */
.rev-msg--us::before {
    content: "";
    position: absolute;
    left: -34px; bottom: 0;
    width: 26px; height: 26px;
    background: url("../img/favicon.svg") center / contain no-repeat;
}
.rev-msg--you {
    align-self: flex-end;
    border-bottom-right-radius: 6px;
    background: var(--gradient-primary);
    color: var(--color-on-primary);
    font-weight: 500;
}
/* Vorschau der Website als Bildchen in der Nachricht. */
.rev-msg--preview { display: grid; gap: 8px; }
.rev-msg__shot {
    display: grid;
    gap: 5px;
    align-content: center;
    width: 180px; height: 74px;
    padding: 0 18px;
    border-radius: 10px;
    background:
        radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--color-primary) 30%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, #f3fbfa 0%, #ffffff 100%);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.rev-msg__shot i { display: block; height: 7px; border-radius: 4px; background: #d6e4e2; }
.rev-msg__shot i:first-child { width: 70%; height: 12px; background: #242529; opacity: 0.85; }
.rev-msg__shot i:last-child { width: 50%; }

/* Nachrichten erscheinen nacheinander, bei jedem Abschnitt von vorn. */
.rev.is-ready .rev-card:not(.is-playing) .rev-msg { opacity: 0; }
.rev-card.is-playing .rev-msg { animation: rev-msg-in 0.45s var(--ease) both; }
.rev-card.is-playing .rev-msg:nth-child(1) { animation-delay: 0.5s; }
.rev-card.is-playing .rev-msg:nth-child(2) { animation-delay: 2.7s; }
.rev-card.is-playing .rev-msg:nth-child(3) { animation-delay: 4.9s; }
@keyframes rev-msg-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: none; }
}
.rev-plan__price { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 0.9rem; font-weight: 700; }

/* Schritt 2: Listen als Chips unter der Leiste. */
.rev-lists { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rev-lists span, .rev-lists b { padding: 5px 12px; border-radius: 999px; background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-heading); font-size: 0.85rem; font-weight: 600; }
.rev-lists b { background: none; box-shadow: none; border: 1.5px dashed var(--accent); color: var(--accent); }

/* Schritt 3: Haus mit drei Schildchen drumherum. */
.rev-build { position: relative; display: grid; place-items: center; padding: var(--space-5) var(--space-7); }
.rev-build__chip {
    position: absolute;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    color: var(--color-heading);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.rev-build__chip--1 { top: 6%; left: 0; }
.rev-build__chip--2 { top: 46%; right: 0; }
.rev-build__chip--3 { bottom: 4%; left: 6%; }

.rev__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-5); }
.rev__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--color-border-strong); cursor: pointer; transition: width 0.3s var(--ease), background-color 0.3s var(--ease); }
.rev__dot.is-active { width: 28px; background: var(--color-heading); }

/* Breit genug für alle drei Karten: nebeneinander statt zum Wischen. */
@media (min-width: 1200px) {
    /* Feste Breite statt flex-grow, damit das Aufziehen nur flex-basis animiert und nicht zwischendurch einknickt. */
    .rev-card { flex: 0 0 var(--rev-closed-w); }
    .rev__dots { display: none; }
}
@media (max-width: 767px) {
    .rev-card { min-height: 480px; padding: var(--space-5); }
}
/* Plus auf breiten Bildschirmen: die Karte wird so breit wie der Inhalt, das Bildchen behält Breite und Platz,
   der Text kommt rechts dazu; die anderen Karten behalten ihre Breite, rücken nach rechts und lassen sich wieder
   hereinwischen (main.js hält die offene links).
   Die Karte ist immer ein Raster, damit Breite und Textspalte gleichmäßig wachsen statt umzuspringen; der Text
   hat schon seine endgültige Breite und wird nur aufgedeckt, bricht also beim Aufziehen nicht ständig um. */
@media (min-width: 900px) {
    .rev {
        --rev-open-w: calc(min(100vw, var(--container-max)) - 2 * var(--gutter));
        --rev-closed-w: min(560px, 84vw);
    }
    .rev__track.is-moving { scroll-snap-type: none; }
    .rev-card {
        display: grid;
        grid-template-columns: calc(var(--rev-closed-w) - 2 * var(--space-6)) 0fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 0;
        transition: flex-basis 0.6s var(--ease), flex-grow 0.6s var(--ease), grid-template-columns 0.6s var(--ease), column-gap 0.6s var(--ease);
    }
    .rev-card__top, .rev-card__title { grid-column: 1 / -1; }
    .rev-card__visual { grid-column: 1; grid-row: 3; }
    /* Text bleibt im Raster und blendet nur ein und aus, auch beim Schließen. */
    .rev-card__detail {
        display: block;
        grid-column: 2;
        grid-row: 3;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s var(--ease), visibility 0s 0.25s;
    }
    .rev-card.is-open .rev-card__detail { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease) 0.2s, visibility 0s; }
    .rev-card.is-open .rev-card__detail > * { animation: none; }
    /* Endgültige Breite und Lage fest: Textspalte der offenen Karte, Text darin waagrecht mittig. */
    .rev-card .rev-card__detail > * {
        --col: calc(var(--rev-open-w) - var(--rev-closed-w) - var(--space-7));
        width: min(560px, var(--col));
        margin-left: calc((var(--col) - min(560px, var(--col))) / 2);
    }
    .rev.has-open .rev__dots { display: flex; }
    .rev.has-open .rev-card.is-open {
        flex-basis: var(--rev-open-w);
        grid-template-columns: calc(var(--rev-closed-w) - 2 * var(--space-6)) 1fr;
        column-gap: var(--space-7);
    }
    .rev-card.is-open .rev-card__visual { display: flex; }
}
@media (min-width: 1200px) {
    .rev { --rev-closed-w: calc((var(--rev-open-w) - 2 * var(--space-5)) / 3); }
}

/* ---------- Warum nicht mit KI? Drei Stationen einer KI-Website (.feature-card), Rechnung, Antwort ---------- */
.ki__steps { margin: 0; padding: 0; list-style: none; }
/* Zeitpunkt rechts oben, wie die Nummer der Schritt-Karten (.card-grid--steps). */
.ki-step__time {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Beispielrechnung: links grau und zurückhaltend, rechts weiß mit Schatten und grünem Schein (wie .versus). */
.ki-calc { margin-top: var(--space-8); }
.ki-calc__header { margin-bottom: var(--space-6); text-align: center; }
.ki-calc__header h3 { margin: 0; font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem); }
.ki-calc__cols { display: grid; gap: var(--space-5); }
@media (min-width: 860px) {
    .ki-calc__cols { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.ki-calc__col {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    /* Zurückhaltend grau, eine Spur dunkler als der graue Abschnitt. */
    background: color-mix(in srgb, var(--color-heading) 5%, var(--color-bg-hero));
    color: var(--color-text-muted);
}
.ki-calc__col--pro {
    background:
        radial-gradient(70% 45% at 85% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 70%),
        var(--color-surface);
    box-shadow: var(--shadow-lg);
    color: var(--color-heading);
}
.ki-calc__col h4 { margin: 0 0 var(--space-4); font-size: 1.25rem; }
.ki-calc__col:not(.ki-calc__col--pro) h4 { color: var(--color-text-muted); }
.ki-calc__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.ki-calc__rows li,
.ki-calc__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-strong);
}
.ki-calc__rows b { flex: none; font-variant-numeric: tabular-nums; }
.ki-calc__col--pro .ki-calc__rows b { color: var(--color-primary-text); }
.ki-calc__total { margin: 0; border-bottom: 0; font-size: 1.2rem; font-weight: 700; color: var(--color-heading); }
.ki-calc__total b { font-size: clamp(1.5rem, 1vw + 1.2rem, 1.9rem); }
.ki-calc__col--pro .ki-calc__total b { color: var(--color-primary-text); }
.ki-calc__note { margin: auto 0 0; padding-top: var(--space-3); }

.ki__answer {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
    margin-top: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(70% 90% at 90% 0%, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 70%),
        var(--color-primary-soft);
}
.ki__answer-text { margin: 0; max-width: 60ch; font-size: 1.15rem; color: var(--color-heading); }
.ki__answer-text b { display: block; margin-bottom: var(--space-2); font-size: clamp(1.4rem, 1vw + 1.1rem, 1.8rem); line-height: 1.25; }
@media (min-width: 860px) {
    .ki__answer { grid-template-columns: 1fr auto; align-items: center; padding: var(--space-7); }
}

/* ---------- U name it, we make it ---------- */
.pro {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-7) var(--space-6);
    background: var(--color-bg-dark);
    border-radius: var(--radius-xl);
    color: rgba(255, 255, 255, 0.82);
}
@media (min-width: 960px) {
    .pro { grid-template-columns: 1.2fr 1fr; padding: var(--space-8) var(--space-7); }
}
.pro h2 { color: var(--color-text-inverse); }
.pro p { margin: 0; font-size: 1.15rem; max-width: 48ch; }
.pro__list { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.pro__list li {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-inverse);
    font-weight: 600;
}
.pro__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: var(--color-on-primary);
}

/* ---------- Blitzschnell: klassisches CMS gegen LeBuild ---------- */
/* Im Stil der Karten oben: große Rundung, keine Ränder. Links grau und zurückhaltend, rechts weiß mit
   Schatten und grünem Schein; in der Mitte ein „vs“. */
.versus {
    position: relative;
    display: grid;
    gap: var(--space-5);
    max-width: 1040px;
    margin: 0 auto;
}
@media (min-width: 860px) {
    .versus { grid-template-columns: 1fr 1fr; align-items: stretch; gap: var(--space-6); }
    .versus::after {
        content: "vs";
        position: absolute;
        top: 50%; left: 50%;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 52px; height: 52px;
        margin: -26px 0 0 -26px;
        border-radius: 50%;
        background: var(--color-heading);
        color: var(--color-bg);
        font-weight: 700;
        box-shadow: 0 0 0 8px var(--color-bg-soft);
    }
}
.versus__col {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
}
.versus__col h3 { margin: var(--space-6) 0 var(--space-4); font-size: 1.35rem; }
.versus__col:not(.versus__col--live) { background: var(--color-bg-hero); }
.versus__col:not(.versus__col--live) h3,
.versus__col:not(.versus__col--live) .versus__list { color: var(--color-text-muted); }
.versus__col--live {
    background:
        radial-gradient(70% 45% at 85% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 70%),
        var(--color-surface);
    box-shadow: var(--shadow-lg);
}
.versus__list { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.versus__list li { display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.45; }
.versus__col--live .versus__list li { color: var(--color-heading); font-weight: 600; }
.versus__list li::before {
    content: '✕';
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}
.versus__list li.is-pro::before { content: '✓'; background: var(--gradient-primary); color: var(--color-on-primary); }

/* Kleine Bildschirme der beiden Welten oben in jeder Spalte. */
.compare__shot {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 7;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.versus__col:not(.versus__col--live) .compare__shot { opacity: 0.75; filter: saturate(0.6); }
.compare__shot i { display: block; border-radius: 4px; background: #e2e6ee; }
.compare__top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #2b2f36;
}
.compare__top i { width: 14px; height: 10px; background: #4a505b; }
.compare__top b {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: #e5484d;
    color: #ffffff;
    font-size: 10px;
}
.compare__body { flex: 1; display: flex; min-height: 0; }
.compare__side {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 30%;
    padding: 8px;
    background: #3a3f48;
    overflow: hidden;
}
.compare__side i { height: 6px; background: #5a616d; }
.compare__side i:nth-child(3n) { width: 70%; }
.compare__main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
    background: #f1f2f5;
}
.compare__main i { background: #dde1e8; }
.compare__shot--live {
    justify-content: center;
    align-items: center;
    background:
        radial-gradient(60% 70% at 85% 10%, rgba(178, 240, 206, 0.75) 0%, transparent 70%),
        linear-gradient(180deg, #f3fbf6 0%, #ffffff 100%);
}
.compare__page { display: grid; gap: 7px; width: 60%; margin-bottom: 26px; }
.compare__page i { height: 9px; background: #d6e4da; }
.compare__page i:first-child { height: 16px; width: 80%; background: #121512; opacity: 0.85; }
.compare__page i:last-child { width: 60%; }
.compare__bar {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: #242529;
    font-size: 11px;
    white-space: nowrap;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
}
.compare__bar b { padding: 3px 10px; border-radius: var(--radius-pill); background: #ffffff; color: #242529; }
.compare__bar em { padding: 3px 10px; border-radius: var(--radius-pill); background: #a4f5a6; color: #242529; font-style: normal; font-weight: 600; }

/* ---------- Über ---------- */
.about {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}
.about .prose { max-width: none; margin: 0; }
.about__media { margin: 0; }
.about__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
@media (min-width: 960px) {
    .about { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

/* ---------- Plugin-Liste (content-types) ---------- */
.content-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.content-list--empty {
    display: block;
    text-align: center;
    color: var(--color-text-muted);
}
.content-list__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-6);
}
.content-list__image {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: var(--space-4);
}
.content-list__field--name {
    order: -1;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-heading);
}
.content-list__field--kategorie {
    order: -2;
    align-self: flex-start;
    margin-bottom: var(--space-4);
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-size: 0.76rem;
    font-weight: 600;
}
.content-list__field--position {
    order: -1;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.content-list__richtext {
    margin-top: var(--space-4);
    font-size: 0.95rem;
}
.content-list__richtext p { margin: 0; }
.content-list__field--email,
.content-list__field--telefon {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.content-list__field--email {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    margin-block-start: var(--space-4);
}

/* ---------- CTA Band ---------- */
.cta-band {
    padding: var(--space-8) var(--space-4);
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
}
.cta-band__inner {
    position: relative;
    display: grid;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-7) var(--space-6);
    background: var(--gradient-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.cta-band__title {
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-3);
}
.cta-band__lead {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.08rem;
    margin: 0;
    max-width: 60ch;
}
.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.cta-band .button--accent {
    background: var(--color-bg);
    color: var(--color-primary-text);
    box-shadow: none;
}
.cta-band .button--accent:hover { background: var(--color-primary-soft); color: var(--color-primary-text); }
.cta-band .button--ghost {
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.55);
}
.cta-band .button--ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-text-inverse); }
@media (min-width: 960px) {
    .cta-band__inner {
        grid-template-columns: 1.4fr 1fr;
        padding: var(--space-8);
    }
    .cta-band__actions { justify-content: flex-end; }
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    padding: var(--space-7) 0 var(--space-6);
}
.site-footer a { color: var(--color-text-muted); text-decoration: none; transition: color 0.15s ease; }
.site-footer a:hover { color: var(--color-primary-text); }

.site-footer__grid {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: var(--space-6) var(--space-8);
    padding-bottom: var(--space-7);
}
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 720px) {
    .site-footer__grid { grid-template-columns: minmax(0, 1fr) auto auto; justify-content: stretch; }
    .site-footer__brand { grid-column: auto; }
}

.site-footer__tagline {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    max-width: 36ch;
}

.site-footer__heading {
    color: var(--color-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--space-4);
}
.site-footer__col ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    font-size: 0.85rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; gap: var(--space-5); }

/* ---------- Funktionen: Unternavigation, Übersicht, Vorschau ---------- */
.subnav { padding-top: var(--space-6); }
.subnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}
.subnav__link {
    display: inline-block;
    padding: 0.45rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}
.subnav__link:hover { color: var(--color-heading); border-color: var(--color-primary); }
.subnav__link.is-active { background: var(--gradient-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.subnav__link--back::before { content: "← "; }

/* Echte Ausgabe eines Plugins als Karte, z. B. die Öffnungszeiten. */
.live-demo {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.live-demo--wide { max-width: 880px; }

/* Öffnungszeiten mit Bereichen als Tabs: Tab = Bereich mit Stand, darunter seine Woche, unten alle Ausnahmen. */
.area-tabs__list {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: var(--space-5);
}
.area-tabs__tab {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--space-4) var(--space-4);
    background: var(--color-bg-hero);
    border: 0;
    border-radius: var(--radius-lg);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s;
}
.area-tabs__tab:hover { background: var(--color-surface); box-shadow: var(--shadow-sm); }
.area-tabs__tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.area-tabs__tab[aria-selected="true"] {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 2px var(--color-primary), var(--shadow-md);
}
.area-tabs__name { color: var(--color-heading); font-size: 1.05rem; font-weight: 700; }
.area-tabs .oh-status { display: block; font-size: 0.9rem; line-height: 1.45; }
.area-tabs .oh-status__label { font-weight: 600; }
.area-tabs .oh-status__detail { color: var(--color-text-muted); }
.area-tabs .oh-status--open .oh-status__label::before { background: var(--color-success); }

/* Wochentabelle */
.area-tabs .oh-table { max-width: none; }
.area-tabs .oh-table th,
.area-tabs .oh-table td { padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border); }
.area-tabs .oh-table tr:last-child th,
.area-tabs .oh-table tr:last-child td { border-bottom: 0; }
.area-tabs .oh-table th { width: 9em; color: var(--color-text-muted); }
.area-tabs .oh-slot { color: var(--color-heading); }
.area-tabs .oh-closed { display: inline; color: var(--color-text-muted); }
.area-tabs .oh-day--today th,
.area-tabs .oh-day--today td { background: var(--color-primary-soft); }
.area-tabs .oh-day--today th { color: var(--color-primary-text); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.area-tabs .oh-day--today td { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.area-tabs .oh-special {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0.1rem 0.6rem;
    background: var(--color-primary-soft);
    border-radius: var(--radius-pill);
    color: var(--color-primary-text);
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 1;
}
.area-tabs .oh-day--today .oh-special { background: var(--color-surface); }
.area-tabs .oh-area__note { margin: var(--space-3) var(--space-3) 0; }

/* Ausnahmen */
.area-tabs__notices { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.area-tabs__notices h3 { margin: 0 0 var(--space-3); font-size: 1rem; }
.area-tabs .oh-notices { margin: 0; }
.area-tabs .oh-notice {
    display: grid;
    grid-template-columns: 8.5em 1fr auto;
    gap: 0.1rem var(--space-4);
    align-items: baseline;
    margin: 0;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.area-tabs .oh-notice:last-child { border-bottom: 0; }
.area-tabs .oh-notice__date { grid-column: 1; grid-row: 1; color: var(--color-text-muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.area-tabs .oh-notice__title { grid-column: 2; color: var(--color-heading); }
.area-tabs .oh-notice__hours { grid-column: 3; grid-row: 1; white-space: nowrap; }
.area-tabs .oh-notice__note { grid-column: 2 / -1; }
@media (min-width: 601px) {
    .area-tabs .oh-slot { display: inline; }
    .area-tabs .oh-slot + .oh-slot::before { content: ", "; color: var(--color-text-muted); }
}
/* Schmal: Tabs nebeneinander zum Wischen statt gestapelt. */
@media (max-width: 600px) {
    .live-demo.area-tabs { padding: var(--space-4); }
    .area-tabs__list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(78%, 1fr);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 3px;
        margin: -3px -3px var(--space-4);
    }
    .area-tabs__tab { scroll-snap-align: start; padding: var(--space-3) var(--space-4); }
    .area-tabs .oh-table th { width: 6.5em; }
    .area-tabs .oh-table th,
    .area-tabs .oh-table td { padding: var(--space-3) var(--space-2); }
    .area-tabs .oh-notice { grid-template-columns: 1fr auto; }
    .area-tabs .oh-notice__date { grid-column: 1 / -1; }
    .area-tabs .oh-notice__title { grid-column: 1; }
    .area-tabs .oh-notice__hours { grid-column: 2; grid-row: 2; }
    .area-tabs .oh-notice__note { grid-column: 1 / -1; }
}

/* ---------- Seite „Listen“: Einträge (content-types) ---------- */
.targets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.targets__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.targets__item:hover { transform: scale(1.015); box-shadow: var(--shadow-md); color: var(--color-text-muted); }
.targets__title { color: var(--color-heading); font-size: clamp(1.15rem, 0.3vw + 1.05rem, 1.3rem); font-weight: 700; letter-spacing: -0.02em; }
.targets__item .feature-card__icon { align-self: flex-start; margin-bottom: var(--space-4); }
/* Übersicht „Funktionen“: drei Karten je Zeile, „Ansehen →“ unten bündig. */
.targets--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 960px) {
    .targets--3 { grid-template-columns: repeat(3, 1fr); }
}
.targets__go { margin-top: auto; padding-top: var(--space-2); color: var(--color-primary-text); font-weight: 600; }

.faq { display: grid; gap: var(--space-3); }
.faq__item {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--color-border) 60%, transparent);
}
.faq__question {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    color: var(--color-heading);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
    content: '+';
    flex: none;
    color: var(--color-primary-text);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__question::after { transform: rotate(45deg); }
.faq__answer { margin: 0; padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); }

.bausteine { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 1080px) {
    .bausteine { grid-template-columns: repeat(3, 1fr); }
}
.baustein { cursor: pointer; }
.baustein__more {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--color-primary-text);
    font-weight: 600;
    font-size: 0.95rem;
}
.baustein__more::after { content: ' →'; }

.ct-modal {
    background: rgba(36, 37, 41, 0.45);
    padding: var(--space-4);
}
.ct-modal__dialog {
    width: min(620px, 100%);
    padding: var(--space-7) var(--space-6) var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.ct-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-heading);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.ct-modal__close:hover { background: var(--color-bg-soft); }
.baustein-detail h2 { font-size: clamp(1.5rem, 1.2vw + 1rem, 1.9rem); margin-bottom: var(--space-4); }
.baustein-detail h3 { margin: var(--space-5) 0 var(--space-3); font-size: 1rem; }
.baustein-detail__text p:last-child { margin-bottom: 0; }
.baustein-detail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.baustein-detail__list li {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.beispiele {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.beispiel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.beispiel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--color-text-muted); }
/* overflow: Als Flex-Kind wüchse die Fläche sonst mit einem hohen Bild über 16:10 hinaus. */
.beispiel__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-soft); }
.beispiel__media img { width: 100%; height: 100%; object-fit: cover; }
.beispiel--link .beispiel__media img { object-fit: contain; padding: var(--space-5); }
.beispiel__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5) var(--space-6) var(--space-6); }
.beispiel__branche {
    align-self: flex-start;
    margin-bottom: var(--space-3);
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-size: 0.76rem;
    font-weight: 600;
}
.beispiel__branche:empty { display: none; }
.beispiel h3 { margin-bottom: var(--space-2); }
.beispiel p { margin: 0 0 var(--space-4); }
.beispiel__go { margin-top: auto; color: var(--color-primary-text); font-weight: 600; font-size: 0.95rem; }
.beispiel:not(.beispiel--link) .beispiel__go::after { content: ' →'; }

.beispiel-page__intro { display: grid; gap: var(--space-6); align-items: center; }
.beispiel-page__back { display: block; width: fit-content; margin-bottom: var(--space-5); font-weight: 600; text-decoration: none; }
.beispiel-page__intro .section__eyebrow:empty { display: none; }
.beispiel-page__media { margin: 0; }
.beispiel-page__media img { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.beispiel-page__content { display: grid; gap: var(--space-7); }
.beispiel-page__content .prose { margin: 0; }
@media (min-width: 960px) {
    .beispiel-page__intro { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}