/* ============================================================
   Baukasten-Blöcke — Modernes Design-System-Styling
   Wird sowohl im PageDesigner-Canvas als auch auf veröffentlichten
   Seiten (_Layout_Web) geladen. Bootstrap-kompatibel, aber hebt das
   Erscheinungsbild auf das neue Design (großzügige Abstände, weiche
   Schatten, große Radien, dezente Verläufe, Dark-Mode).

   Farben kommen — wenn ein WebDesignTheme gesetzt ist — über
   --wb-primary / --bs-primary (siehe WebBuilderThemeService).
   Sonst greift der Fallback (#2563eb).
   ============================================================ */

:root {
    --wb-primary: #2563eb;
    --wb-primary-rgb: 37, 99, 235;
    --wb-accent: #06b6d4;
    --wb-ink: #0f172a;
    --wb-muted: #64748b;
    --wb-surface: #ffffff;
    --wb-surface-2: #f8fafc;
    --wb-border: #e2e8f0;
    --wb-radius: 1rem;
    --wb-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --wb-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18), 0 4px 12px -6px rgba(15, 23, 42, .10);
    --wb-shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, .28);
}

/* Wenn ein Bootstrap-Theme-Primary gesetzt ist, dieses bevorzugen */
.wb-block, .wb-block * { }
.wb-block a { text-decoration: none; }

/* ---------- Grundgerüst aller Blöcke ---------- */
.wb-block {
    --_primary: var(--wb-primary);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}
section.wb-block, .wb-block > section { position: relative; }

.wb-block .wb-eyebrow {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wb-primary);
    margin-bottom: .75rem;
}
.wb-block .wb-lead { font-size: 1.15rem; line-height: 1.7; color: var(--wb-muted); }
.wb-block h1, .wb-block h2, .wb-block h3, .wb-block h4 { letter-spacing: -.02em; }
.wb-block .wb-display {
    font-weight: 800;
    line-height: 1.08;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}
.wb-block .wb-h2 {
    font-weight: 800;
    line-height: 1.15;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    letter-spacing: -.02em;
}

/* Verlaufstext für Headlines */
.wb-gradient-text {
    background: linear-gradient(110deg, var(--wb-primary), var(--wb-accent) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Buttons ---------- */
.wb-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem 1.5rem;
    border-radius: .65rem;
    font-weight: 600; font-size: 1rem;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
    cursor: pointer;
}
.wb-btn-primary {
    background: var(--wb-primary); color: #fff;
    box-shadow: 0 8px 24px -8px rgba(var(--wb-primary-rgb), .6);
}
.wb-btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(var(--wb-primary-rgb), .7); filter: brightness(1.05); }
.wb-btn-ghost {
    background: transparent; color: var(--wb-primary);
    border-color: color-mix(in srgb, var(--wb-primary) 35%, transparent);
}
.wb-btn-ghost:hover { background: color-mix(in srgb, var(--wb-primary) 8%, transparent); color: var(--wb-primary); }
.wb-btn-light { background: #fff; color: var(--wb-ink); box-shadow: var(--wb-shadow-sm); }
.wb-btn-light:hover { transform: translateY(-1px); box-shadow: var(--wb-shadow); }
.wb-btn-lg { padding: 1rem 1.9rem; font-size: 1.0625rem; }

/* ---------- Section-Wrapper / Spacing ---------- */
.wb-section-pad { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.wb-section-soft { background: var(--wb-surface-2); }
.wb-section-ink { background: #0b1220; color: #e5edff; }
.wb-section-ink .wb-lead, .wb-section-ink .text-muted { color: #9fb3d6 !important; }
.wb-section-ink h1, .wb-section-ink h2, .wb-section-ink h3 { color: #fff; }

/* Verlaufs-Hero */
.wb-hero-gradient {
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(var(--wb-primary-rgb), .18), transparent 60%),
        radial-gradient(900px 600px at 0% 110%, rgba(6, 182, 212, .14), transparent 55%),
        var(--wb-surface);
}
.wb-hero-ink {
    background:
        radial-gradient(900px 500px at 85% -20%, rgba(var(--wb-primary-rgb), .35), transparent 60%),
        radial-gradient(700px 500px at 10% 120%, rgba(99, 102, 241, .25), transparent 55%),
        #0b1220;
    color: #e6edff;
}
.wb-hero-ink h1, .wb-hero-ink h2 { color: #fff; }
.wb-hero-ink .wb-lead { color: #aebfdc; }

/* ---------- Cards ---------- */
.wb-card {
    background: var(--wb-surface);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius);
    box-shadow: var(--wb-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
    height: 100%;
}
.wb-card-hover:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow); border-color: color-mix(in srgb, var(--wb-primary) 30%, var(--wb-border)); }
.wb-card-body { padding: 1.75rem; }

.wb-icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: .9rem;
    background: color-mix(in srgb, var(--wb-primary) 12%, transparent);
    color: var(--wb-primary);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.wb-feature-check { color: var(--wb-primary); flex-shrink: 0; }

/* ---------- Screenshot-/Browser-Rahmen ---------- */
.wb-screenshot-frame {
    border-radius: 1rem;
    background: var(--wb-surface);
    border: 1px solid var(--wb-border);
    box-shadow: var(--wb-shadow-lg);
    overflow: hidden;
}
.wb-screenshot-frame .wb-browser-bar {
    display: flex; align-items: center; gap: .4rem;
    padding: .65rem .9rem;
    background: var(--wb-surface-2);
    border-bottom: 1px solid var(--wb-border);
}
.wb-screenshot-frame .wb-browser-bar i { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }
.wb-browser-bar .wb-dot-r { background: #ff5f57; }
.wb-browser-bar .wb-dot-y { background: #febc2e; }
.wb-browser-bar .wb-dot-g { background: #28c840; }
.wb-screenshot-frame img { display: block; width: 100%; height: auto; }
.wb-screenshot-frame .wb-shot-placeholder {
    aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--wb-primary) 8%, var(--wb-surface)), var(--wb-surface-2));
    color: var(--wb-muted); flex-direction: column; gap: .5rem; cursor: pointer; text-align: center; padding: 2rem;
}

/* ---------- Logo-Streifen ("bekannt aus") ---------- */
.wb-logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem 3rem; }
.wb-logo-strip .wb-logo-item {
    font-weight: 700; font-size: 1.1rem; letter-spacing: .02em;
    color: var(--wb-muted); opacity: .8; filter: grayscale(1);
    display: inline-flex; align-items: center; gap: .5rem;
    transition: opacity .2s, filter .2s;
}
.wb-logo-strip .wb-logo-item img { max-height: 2.25rem; width: auto; }
.wb-logo-strip .wb-logo-item:hover { opacity: 1; filter: grayscale(0); }

/* ---------- Pricing ---------- */
.wb-pricing-card { position: relative; }
.wb-pricing-card--featured {
    border-color: var(--wb-primary);
    box-shadow: 0 24px 50px -18px rgba(var(--wb-primary-rgb), .35);
}
.wb-pricing-card--featured::before {
    content: attr(data-badge); position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
    background: var(--wb-primary); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
    padding: .3rem .8rem; border-radius: 999px; text-transform: uppercase;
}
.wb-price { font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; }
.wb-price small { font-size: 1rem; font-weight: 500; color: var(--wb-muted); }
.wb-plan-list { list-style: none; padding: 0; margin: 1.25rem 0; text-align: left; }
.wb-plan-list li { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; color: var(--wb-ink); }
.wb-plan-list li::before { content: "✓"; color: var(--wb-primary); font-weight: 800; }

/* ---------- Vergleichstabelle ---------- */
.wb-compare { width: 100%; border-collapse: separate; border-spacing: 0; }
.wb-compare th, .wb-compare td { padding: .85rem 1.1rem; text-align: center; border-bottom: 1px solid var(--wb-border); }
.wb-compare thead th { font-size: 1rem; }
.wb-compare tbody th { text-align: left; font-weight: 600; color: var(--wb-ink); }
.wb-compare .wb-col-us { background: color-mix(in srgb, var(--wb-primary) 7%, transparent); }
.wb-compare thead .wb-col-us { border-top-left-radius: .75rem; border-top-right-radius: .75rem; color: var(--wb-primary); font-weight: 800; }
.wb-compare .wb-yes { color: #16a34a; font-weight: 800; }
.wb-compare .wb-no { color: #cbd5e1; }

/* ---------- FAQ-Accordion ---------- */
.wb-faq-item { border: 1px solid var(--wb-border); border-radius: .8rem; margin-bottom: .75rem; background: var(--wb-surface); overflow: hidden; }
.wb-faq-q { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; font-weight: 600; cursor: pointer; color: var(--wb-ink); }
.wb-faq-q::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--wb-primary); transition: transform .2s; }
.wb-faq-item.open .wb-faq-q::after { transform: rotate(45deg); }
.wb-faq-a { padding: 0 1.3rem; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; color: var(--wb-muted); line-height: 1.7; }
.wb-faq-item.open .wb-faq-a { padding: 0 1.3rem 1.2rem; max-height: 400px; }

/* ---------- Stats ---------- */
.wb-stat-num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.wb-stat-label { color: var(--wb-muted); margin-top: .35rem; font-size: .95rem; }
.wb-section-ink .wb-stat-label { color: #9fb3d6; }

/* ---------- Split-Feature (Text + Bild) ---------- */
.wb-split-img-wrap { border-radius: var(--wb-radius); overflow: hidden; box-shadow: var(--wb-shadow); }

/* ---------- Editor-Hilfen (nur im Designer sichtbar) ---------- */
.icon-editable { cursor: pointer; }
.section-overlay [data-image-slot], .section-overlay .gallery-slot, .section-overlay [data-video-embed],
.section-overlay [data-form-embed], .section-overlay [data-blog-embed], .section-overlay [data-map-embed],
.section-overlay [data-html-editable] { outline: 1px dashed color-mix(in srgb, var(--wb-primary) 40%, transparent); outline-offset: 2px; }

/* ---------- Responsiv ---------- */
@media (max-width: 767.98px) {
    .wb-section-pad { padding-top: 2.75rem; padding-bottom: 2.75rem; }
    .wb-display { font-size: 2rem; }
}

/* ---------- Dark Mode ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --wb-ink: #e6edf7;
        --wb-muted: #94a3b8;
        --wb-surface: #0f1729;
        --wb-surface-2: #0b1322;
        --wb-border: #1e2b44;
        --wb-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --wb-shadow: 0 12px 32px -12px rgba(0,0,0,.6);
        --wb-shadow-lg: 0 30px 60px -18px rgba(0,0,0,.7);
    }
    .wb-hero-gradient { background:
        radial-gradient(1200px 500px at 80% -10%, rgba(var(--wb-primary-rgb), .25), transparent 60%),
        radial-gradient(900px 600px at 0% 110%, rgba(6,182,212,.16), transparent 55%),
        #0b1322; color: var(--wb-ink); }
    .wb-hero-gradient h1, .wb-hero-gradient h2 { color: #fff; }
    .wb-btn-light { background: #1e293b; color: #e6edf7; }
    .wb-section-soft { background: #0b1322; }
    .wb-card { background: var(--wb-surface); border-color: var(--wb-border); }
    .wb-faq-item, .wb-screenshot-frame { background: var(--wb-surface); border-color: var(--wb-border); }
    .wb-screenshot-frame .wb-browser-bar { background: #0b1322; border-color: var(--wb-border); }
    .wb-plan-list li { color: var(--wb-ink); }
    .wb-compare tbody th { color: var(--wb-ink); }
}
.dark :root, .dark {
    --wb-ink: #e6edf7; --wb-muted: #94a3b8; --wb-surface: #0f1729; --wb-surface-2: #0b1322; --wb-border: #1e2b44;
}