/* ============================================================
   Website-Werbung-Kaufen.de — Shop-Design v2
   Helle Fläche · fette Typografie · Signalorange als Punchfarbe
   Anthrazit als Kontrast (Mockup, Footer, Abschluss-CTA)
   Signatur: gemalter oranger Unterstrich + Punktraster-Deko
   ============================================================ */

:root {
    --ww-bg:            #FFFFFF;
    --ww-bg-soft:       #F7F7FA;
    --ww-ink:           #17171C;
    --ww-ink-soft:      #41414C;
    --ww-muted:         #6E6E7A;
    --ww-border:        #EAEAF1;
    --ww-border-strong: #DDDDE7;
    --ww-accent:        #7C3AED;
    --ww-accent-deep:   #6D28D9;
    --ww-accent-2:      #FFB020;
    --ww-tint:          #F5F0FF;
    --ww-tint-border:   #E2D5FF;
    --ww-dark:          #17171C;
    --ww-dark-2:        #22222B;
    --ww-dark-border:   #33333E;
    --ww-green:         #16A464;
    --ww-red:           #E5484D;
    --ww-blue:          #2F7DEB;
    --ww-radius:        18px;
    --ww-radius-sm:     12px;
    --ww-shadow:        0 16px 40px rgba(23, 23, 28, 0.08);
    --ww-shadow-soft:   0 6px 18px rgba(23, 23, 28, 0.05);
    --ww-shadow-accent: 0 10px 26px rgba(124, 58, 237, 0.32);
    --ww-grad:          linear-gradient(135deg, #8B5CF6, #D946EF);
    --ww-swoosh:        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 30 3, 75 2, 117 6' fill='none' stroke='%237C3AED' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
    --ww-dots:          radial-gradient(rgba(124, 58, 237, 0.40) 1.6px, transparent 1.6px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--ww-bg);
    color: var(--ww-ink-soft);
    line-height: 1.62;
    font-size: 0.875rem;   /* 14 px */
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ww-accent-deep); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--ww-accent); }

h1, h2, h3, h4 { color: var(--ww-ink); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; }

h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); font-weight: 900; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 850; letter-spacing: -0.03em; }
h3 { font-size: 1.18rem; }

p { color: var(--ww-ink-soft); }

.ww-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* Hervorgehobenes Wort in Ueberschriften: Orange + gemalter Unterstrich */
.ww-mark,
.ww-hero h1 em {
    font-style: normal;
    color: var(--ww-accent);
    position: relative;
    display: inline;
    background: var(--ww-swoosh) no-repeat left 100% / 100% 0.18em;
    padding-bottom: 0.20em;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.ww-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ww-grad);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9062rem;
    padding: 15px 30px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: var(--ww-shadow-accent);
}

.ww-button:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(124, 58, 237, 0.42);
}

.ww-button-secondary {
    background: #FFFFFF;
    color: var(--ww-ink);
    box-shadow: var(--ww-shadow-soft);
    border: 1.5px solid var(--ww-border-strong);
}

.ww-button-secondary:hover {
    color: var(--ww-ink);
    border-color: var(--ww-accent);
    filter: none;
    box-shadow: var(--ww-shadow-soft);
}

.ww-button-nav { padding: 11px 22px; font-size: 0.8438rem; }

/* ------------------------------------------------------------
   Header & Navigation
   ------------------------------------------------------------ */

.ww-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ww-border);
}

.ww-nav-wrapper {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 72px;
}

.ww-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ww-ink);
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.ww-logo:hover { color: var(--ww-ink); }

.ww-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ww-grad);
    color: #FFFFFF;
    font-size: 1.05rem;
    flex: 0 0 auto;
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.30);
}

.ww-logo-text small { font-size: 0.72em; color: var(--ww-muted); font-weight: 700; }
.ww-logo-accent { color: var(--ww-accent); }

.ww-main-nav { flex: 0 0 auto; margin-left: auto; }   /* Menue sitzt rechts, direkt vor den Aktionen */

.ww-nav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
}

.ww-nav-menu > li { position: relative; }

.ww-nav-menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ww-ink-soft);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
}

.ww-nav-menu > li > a:hover { color: var(--ww-ink); background: var(--ww-bg-soft); }

.ww-nav-menu > li > a .fa-chevron-down { font-size: 0.62rem; opacity: 0.6; }

.ww-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 270px;
    background: #FFFFFF;
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    box-shadow: var(--ww-shadow);
    padding: 10px;
    list-style: none;
    display: none;
    max-height: min(70vh, 640px);
    overflow-y: auto;
}

.ww-has-dropdown:hover .ww-dropdown,
.ww-has-dropdown.ww-open .ww-dropdown { display: block; }

.ww-dropdown li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--ww-ink-soft);
    font-size: 0.8438rem;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 9px;
}

.ww-dropdown li a small { color: var(--ww-muted); font-size: 0.7812rem; }

.ww-dropdown li a:hover { background: var(--ww-tint); color: var(--ww-ink); }

.ww-dropdown-group {
    padding: 11px 12px 4px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ww-accent-deep);
}

.ww-nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 0;
}

.ww-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    color: var(--ww-ink-soft);
    font-size: 0.9375rem;
}

.ww-cart-icon:hover { color: var(--ww-ink); border-color: var(--ww-accent); }

.ww-cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ww-grad);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ww-menu-toggle {
    display: none;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    border-radius: 11px;
    color: var(--ww-ink);
    width: 44px;
    height: 44px;
    font-size: 0.9375rem;
    cursor: pointer;
    margin-left: auto;
}

/* ------------------------------------------------------------
   Sektionen (allgemein)
   ------------------------------------------------------------ */

.ww-section { padding: 84px 0; }

.ww-section-alt { background: var(--ww-bg-soft); border: 1px solid var(--ww-border); }

/* Kicker als Pill-Badge */
.ww-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7812rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ww-accent-deep);
    margin-bottom: 16px;
}

.ww-section-head { max-width: 780px; margin-bottom: 48px; }
.ww-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ww-section-head p { margin-top: 16px; font-size: 0.9375rem; }

/* Intro-Text direkt unter der H1 — bewusst vom Fliesstext abgesetzt */
.ww-intro-text,
.ww-section-head p.ww-intro-text {
    font-size: 0.9375rem;  /* 15 px */
    line-height: 1.72;
    color: var(--ww-ink);
    background: var(--ww-tint);
    border-left: 4px solid var(--ww-accent);
    border-radius: 0 var(--ww-radius-sm) var(--ww-radius-sm) 0;
    padding: 18px 22px;
    margin-top: 10px;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.ww-hero {
    position: relative;
    padding: 96px 0 72px;
}

/* Punktraster-Deko rechts oben */
.ww-hero::before {
    content: "";
    position: absolute;
    top: 40px;
    right: -30px;
    width: 260px;
    height: 220px;
    background-image: var(--ww-dots);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
}

.ww-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 60px;
    align-items: center;
    position: relative;
}

.ww-hero h1 { margin-bottom: 24px; }

.ww-hero .ww-lead {
    font-size: 0.9375rem;  /* 15 px */
    max-width: 560px;
    margin-bottom: 32px;
}

.ww-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }

.ww-hero-note {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--ww-muted);
}

.ww-hero-note i { color: var(--ww-accent); }

/* Dashboard-Mockup: bewusst ANTHRAZIT als Kontrastpanel */

.ww-mockup {
    background: var(--ww-dark);
    border: 1px solid var(--ww-dark-border);
    border-radius: var(--ww-radius);
    box-shadow: 0 30px 70px rgba(23, 23, 28, 0.28);
    overflow: hidden;
    position: relative;
    transform: rotate(0.6deg);
}

.ww-mockup-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    background: var(--ww-dark-2);
    border-bottom: 1px solid var(--ww-dark-border);
}

.ww-mockup-bar span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ww-mockup-bar span:nth-child(1) { background: #FF5F57; }
.ww-mockup-bar span:nth-child(2) { background: #FEBC2E; }
.ww-mockup-bar span:nth-child(3) { background: #28C840; }

.ww-mockup-url {
    flex: 1;
    margin-left: 10px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    font-size: 0.75rem;
    color: #9A9AA6;
    padding: 5px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ww-mockup-body { padding: 22px; }

.ww-mockup-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.ww-mockup-title strong { font-size: 0.875rem; color: #F2F2F4; }

.ww-mockup-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #C4B5FD;
    background: rgba(139, 92, 246, 0.20);
    padding: 4px 10px;
    border-radius: 999px;
}

.ww-mockup-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.ww-mockup-stat {
    background: var(--ww-dark-2);
    border: 1px solid var(--ww-dark-border);
    border-radius: var(--ww-radius-sm);
    padding: 14px;
}

.ww-mockup-stat strong { display: block; font-size: 1.3rem; letter-spacing: -0.02em; color: #FFFFFF; }
.ww-mockup-stat span { font-size: 0.75rem; color: #9A9AA6; }
.ww-mockup-stat em { font-style: normal; font-size: 0.75rem; color: #C4B5FD; }

.ww-mockup-chart {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 110px;
    padding: 14px;
    background: var(--ww-dark-2);
    border: 1px solid var(--ww-dark-border);
    border-radius: var(--ww-radius-sm);
}

.ww-mockup-chart i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #A78BFA, rgba(124, 58, 237, 0.30));
    min-height: 8%;
}

.ww-mockup-chart i:nth-child(1)  { height: 22%; }
.ww-mockup-chart i:nth-child(2)  { height: 34%; }
.ww-mockup-chart i:nth-child(3)  { height: 28%; }
.ww-mockup-chart i:nth-child(4)  { height: 46%; }
.ww-mockup-chart i:nth-child(5)  { height: 40%; }
.ww-mockup-chart i:nth-child(6)  { height: 58%; }
.ww-mockup-chart i:nth-child(7)  { height: 52%; }
.ww-mockup-chart i:nth-child(8)  { height: 70%; }
.ww-mockup-chart i:nth-child(9)  { height: 64%; }
.ww-mockup-chart i:nth-child(10) { height: 84%; }
.ww-mockup-chart i:nth-child(11) { height: 78%; }
.ww-mockup-chart i:nth-child(12) { height: 96%; }

.ww-mockup-caption {
    text-align: center;
    font-size: 0.6875rem;
    color: #9A9AA6;
    padding: 12px 16px;
    border-top: 1px solid var(--ww-dark-border);
}

/* ------------------------------------------------------------
   Stat-Strip
   ------------------------------------------------------------ */

.ww-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 40px 0 0;
}

.ww-stat-strip > div {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    padding: 20px;
    text-align: center;
    box-shadow: var(--ww-shadow-soft);
}

.ww-stat-strip strong {
    display: block;
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--ww-accent);
}

.ww-stat-strip span { font-size: 0.8125rem; color: var(--ww-muted); font-weight: 600; }

/* ------------------------------------------------------------
   Problem / Loesung
   ------------------------------------------------------------ */

.ww-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ww-compare-card {
    border-radius: var(--ww-radius);
    padding: 34px;
    border: 1.5px solid var(--ww-border);
    background: #FFFFFF;
    box-shadow: var(--ww-shadow-soft);
}

.ww-compare-card--bad { border-color: rgba(229, 72, 77, 0.35); background: #FEF7F7; }
.ww-compare-card--good { border-color: var(--ww-accent); background: linear-gradient(180deg, var(--ww-tint), #FFFFFF 70%); box-shadow: var(--ww-shadow); }

.ww-compare-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 1.25rem; }
.ww-compare-card--bad h3 i { color: var(--ww-red); }
.ww-compare-card--good h3 i { color: var(--ww-accent); }

.ww-compare-card ul { list-style: none; display: grid; gap: 13px; }

.ww-compare-card li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--ww-ink-soft);
    font-size: 0.875rem;
}

.ww-compare-card li i { margin-top: 4px; flex: 0 0 auto; }
.ww-compare-card--bad li i { color: var(--ww-red); }
.ww-compare-card--good li i { color: var(--ww-accent); }

/* ------------------------------------------------------------
   Feature-Grid (6 Vorteile)
   ------------------------------------------------------------ */

.ww-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ww-feature-card {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 30px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--ww-shadow-soft);
}

.ww-feature-card:hover { transform: translateY(-4px); border-color: var(--ww-accent); box-shadow: var(--ww-shadow); }

.ww-feature-card i.ww-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--ww-grad);
    color: #FFFFFF;
    font-size: 1rem;
    margin-bottom: 18px;
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.28);
}

.ww-feature-card strong { display: block; font-size: 0.9375rem; margin-bottom: 8px; color: var(--ww-ink); }
.ww-feature-card span { font-size: 0.875rem; color: var(--ww-muted); }

/* ------------------------------------------------------------
   Ablauf (3 Schritte)
   ------------------------------------------------------------ */

.ww-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ww-step {
    position: relative;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 32px 28px 28px;
    box-shadow: var(--ww-shadow-soft);
}

.ww-step span.ww-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ww-grad);
    color: #FFFFFF;
    font-weight: 900;
    font-size: 1rem;
    margin-bottom: 18px;
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.28);
}

.ww-step strong { display: block; font-size: 1rem; margin-bottom: 8px; color: var(--ww-ink); }
.ww-step p { font-size: 0.875rem; color: var(--ww-muted); }

/* ------------------------------------------------------------
   Preis-Pakete
   ------------------------------------------------------------ */

.ww-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 22px;
    align-items: stretch;
}

.ww-price-package {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    border-radius: var(--ww-radius);
    padding: 32px 26px 26px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--ww-shadow-soft);
}

.ww-price-package:hover { transform: translateY(-5px); border-color: var(--ww-accent); box-shadow: var(--ww-shadow); }

.ww-price-package--featured {
    border: 2px solid var(--ww-accent);
    background: linear-gradient(180deg, var(--ww-tint), #FFFFFF 55%);
    box-shadow: var(--ww-shadow);
}

.ww-price-flag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ww-grad);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.30);
}

.ww-price-eyebrow {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ww-accent-deep);
    margin-bottom: 8px;
}

.ww-price-package h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
.ww-price-package .ww-price-sub { font-size: 0.75rem; color: var(--ww-muted); margin-bottom: 16px; }

.ww-price-amount { margin: 6px 0 2px; }
.ww-price-amount strong { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.04em; color: var(--ww-ink); }
.ww-price-amount span { font-size: 0.8125rem; color: var(--ww-muted); }

.ww-price-tkp { font-size: 0.75rem; color: var(--ww-muted); margin-bottom: 16px; }

.ww-price-package label {
    display: block;
    font-size: 0.7812rem;
    font-weight: 700;
    color: var(--ww-muted);
    margin: 4px 0 6px;
}

.ww-price-package select,
.ww-package-select {
    width: 100%;
    background: var(--ww-bg-soft);
    border: 1.5px solid var(--ww-border-strong);
    color: var(--ww-ink);
    border-radius: var(--ww-radius-sm);
    padding: 12px;
    font-size: 0.8438rem;
    font-weight: 600;
    margin-bottom: 16px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E6E7A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.ww-price-package select:focus { outline: none; border-color: var(--ww-accent); }

.ww-package-list { list-style: none; display: grid; gap: 10px; margin: 4px 0 22px; }

.ww-package-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.8438rem;
    color: var(--ww-ink-soft);
}

.ww-package-list li i { color: var(--ww-accent); margin-top: 4px; font-size: 0.7812rem; flex: 0 0 auto; }
.ww-package-list li a { color: var(--ww-ink-soft); text-decoration: underline; text-decoration-color: var(--ww-border-strong); }
.ww-package-list li a:hover { color: var(--ww-accent-deep); }

.ww-price-package form { margin-top: auto; display: flex; flex-direction: column; }

.ww-price-package .ww-button { width: 100%; padding: 14px 20px; }

.ww-pricing-note {
    text-align: center;
    color: var(--ww-muted);
    font-size: 0.75rem;
    margin-top: 28px;
}

.ww-pricing-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 36px;
    margin-top: 30px;
    padding: 20px 22px;
    background: var(--ww-bg-soft);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    font-size: 0.8438rem;
    font-weight: 600;
    color: var(--ww-ink-soft);
}

.ww-pricing-trust span { display: inline-flex; align-items: center; gap: 9px; }
.ww-pricing-trust i { color: var(--ww-accent); }

/* ------------------------------------------------------------
   Werbeformen-Uebersicht
   ------------------------------------------------------------ */

.ww-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 20px;
}

.ww-format-card {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--ww-shadow-soft);
}

.ww-format-card:hover { transform: translateY(-4px); border-color: var(--ww-accent); box-shadow: var(--ww-shadow); }

.ww-format-card i.ww-format-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--ww-tint);
    border: 1px solid var(--ww-tint-border);
    color: var(--ww-accent-deep);
    font-size: 1rem;
    margin-bottom: 16px;
}

.ww-format-card h3 { margin-bottom: 8px; }
.ww-format-card p { font-size: 0.875rem; color: var(--ww-muted); margin-bottom: 16px; }

.ww-format-links { margin-top: auto; display: grid; gap: 7px; }
.ww-format-links a { font-size: 0.875rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.ww-format-links a i { font-size: 0.75rem; }

/* ------------------------------------------------------------
   FAQ (Akkordeon)
   ------------------------------------------------------------ */

.ww-faq-list { max-width: 840px; margin: 0 auto; display: grid; gap: 12px; }

.ww-faq-item {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    overflow: hidden;
    box-shadow: var(--ww-shadow-soft);
}

.ww-faq-item[open] { border-color: var(--ww-accent); }

.ww-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 22px;
    font-weight: 700;
    font-size: 0.9062rem;
    color: var(--ww-ink);
}

.ww-faq-item summary::-webkit-details-marker { display: none; }

.ww-faq-item summary i { color: var(--ww-accent); transition: transform 0.25s ease; flex: 0 0 auto; }

.ww-faq-item[open] summary i { transform: rotate(180deg); }

.ww-faq-item .ww-faq-answer { padding: 0 22px 20px; font-size: 0.875rem; color: var(--ww-ink-soft); }

/* FAQ-Raster (Produktseiten) */

.ww-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ww-faq-grid > div {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    padding: 26px;
    box-shadow: var(--ww-shadow-soft);
}

.ww-faq-grid h3 { font-size: 1.04rem; margin-bottom: 10px; }
.ww-faq-grid p { font-size: 0.875rem; color: var(--ww-muted); }

/* ------------------------------------------------------------
   Abschluss-CTA: Anthrazit-Panel mit orangem Glow
   ------------------------------------------------------------ */

.ww-final-cta {
    text-align: center;
    background:
        radial-gradient(ellipse at 50% -20%, rgba(124, 58, 237, 0.35), transparent 60%),
        var(--ww-dark);
    border-radius: calc(var(--ww-radius) + 6px);
    padding: 72px 32px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
}

.ww-final-cta::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: -20px;
    width: 220px;
    height: 180px;
    background-image: var(--ww-dots);
    background-size: 18px 18px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
}

.ww-final-cta h2 { color: #FFFFFF; margin-bottom: 14px; }
.ww-final-cta p { color: #C9C9D2; max-width: 580px; margin: 0 auto 30px; }
.ww-final-cta .ww-hero-actions { justify-content: center; margin-bottom: 0; position: relative; z-index: 1; }
.ww-final-cta .ww-button-secondary { background: transparent; color: #FFFFFF; border-color: #4A4A56; }
.ww-final-cta .ww-button-secondary:hover { color: #FFFFFF; border-color: var(--ww-accent); }

/* ------------------------------------------------------------
   Produktseiten
   ------------------------------------------------------------ */

.ww-product-hero { padding: 76px 0 30px; position: relative; }

.ww-product-hero::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -30px;
    width: 240px;
    height: 200px;
    background-image: var(--ww-dots);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
}

.ww-product-hero .ww-section-head { margin-bottom: 26px; }

.ww-product-pills { display: flex; flex-wrap: wrap; gap: 10px; }

.ww-product-pills span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    border-radius: 999px;
    padding: 9px 17px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ww-ink-soft);
    box-shadow: var(--ww-shadow-soft);
}

.ww-product-pills i { color: var(--ww-accent); }

.ww-product-details {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 44px;
    padding: 40px 0;
    border-top: 1px solid var(--ww-border);
}

.ww-product-details h2 { font-size: 1.55rem; margin-bottom: 14px; }
.ww-product-details h3 { font-size: 1.12rem; }
.ww-product-details p { font-size: 0.9062rem; }

.ww-product-aside {
    background: var(--ww-bg-soft);
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 28px;
    align-self: start;
}

.ww-product-aside ul { list-style: none; display: grid; gap: 13px; }

.ww-product-aside li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.875rem;
    color: var(--ww-ink-soft);
}

.ww-product-aside li i { color: var(--ww-accent); margin-top: 4px; flex: 0 0 auto; }

.ww-tkp-note { color: var(--ww-muted); font-size: 0.75rem; margin-top: 18px; }

/* ------------------------------------------------------------
   Info-/Statusseiten, Karten
   ------------------------------------------------------------ */

.ww-card {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 32px;
    margin-top: 24px;
    box-shadow: var(--ww-shadow-soft);
}

.ww-card h3 { margin-bottom: 14px; }
.ww-card p { margin-bottom: 8px; }

.ww-page-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
/* Abschluss-Block unter dem Seiteninhalt: steht allein, deshalb mittig */
.ww-page-actions.ww-actions-mitte { justify-content: center; }
.ww-action-center { text-align: center; margin: 22px 0 8px; }

.ww-page-hero { padding: 64px 0 10px; }
.ww-page-hero .ww-section-head { margin-bottom: 18px; }

.ww-page-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.ww-page-pills span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ww-ink-soft);
}

.ww-page-pills i { color: var(--ww-accent); }

/* Hinweise / Meldungen */

.ww-notice {
    border-radius: var(--ww-radius-sm);
    padding: 15px 20px;
    margin: 18px 0;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1.5px solid var(--ww-border);
    background: #FFFFFF;
}

.ww-notice--success { border-color: rgba(22, 164, 100, 0.4); background: #F2FBF7; color: var(--ww-green); }
.ww-notice--error { border-color: rgba(229, 72, 77, 0.4); background: #FEF6F6; color: var(--ww-red); }

/* ------------------------------------------------------------
   Tabellen (Warenkorb, Bestellungen)
   ------------------------------------------------------------ */

.ww-table-wrap { overflow-x: auto; margin: 20px 0; }

.ww-order-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    overflow: hidden;
    font-size: 0.875rem;
    min-width: 640px;
    box-shadow: var(--ww-shadow-soft);
}

.ww-order-table th {
    background: var(--ww-bg-soft);
    color: var(--ww-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 13px 16px;
}

.ww-order-table td { padding: 14px 16px; border-top: 1px solid var(--ww-border); color: var(--ww-ink-soft); }

.ww-text-left { text-align: left; }
.ww-text-center { text-align: center; }
.ww-text-right { text-align: right; }

.ww-table-details-cell { background: var(--ww-bg-soft); }
.ww-table-muted { color: var(--ww-border-strong); }

.ww-remove-item {
    background: none;
    border: none;
    color: var(--ww-red);
    cursor: pointer;
    font-size: 0.8438rem;
    padding: 4px;
}

.ww-hidden-submit { display: none; }

/* Kampagnendaten-Formular im Warenkorb */

.ww-campaign-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    padding: 6px 0;
}

.ww-campaign-form-field label {
    display: block;
    font-size: 0.7812rem;
    font-weight: 700;
    color: var(--ww-muted);
    margin-bottom: 5px;
}

/* ------------------------------------------------------------
   Formulare
   ------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea {
    width: 100%;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    color: var(--ww-ink);
    border-radius: var(--ww-radius-sm);
    padding: 12px 14px;
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ww-accent); }

.ww-form label { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--ww-ink-soft); margin: 16px 0 6px; }

.ww-form button[type="submit"],
.ww-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ww-grad);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9062rem;
    padding: 15px 32px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    margin-top: 22px;
    transition: filter 0.18s ease, transform 0.18s ease;
    box-shadow: var(--ww-shadow-accent);
}

.ww-form button[type="submit"]:hover, .ww-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }

button:disabled, .ww-submit:disabled {
    background: var(--ww-border);
    color: var(--ww-muted);
    cursor: not-allowed;
    filter: none;
    transform: none;
    box-shadow: none;
}

/* Warenkorb-Fussbereich */

.ww-cart-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin: 24px 0;
}

.ww-cart-coupon { max-width: 340px; }
.ww-cart-coupon label { font-size: 0.8125rem; font-weight: 700; color: var(--ww-ink-soft); }
.ww-cart-coupon input { margin: 8px 0 10px; }

.ww-cart-coupon button {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    color: var(--ww-ink);
    border-radius: 999px;
    padding: 10px 24px;
    font-size: 0.8438rem;
    font-weight: 700;
    cursor: pointer;
}

.ww-cart-coupon button:hover { border-color: var(--ww-accent); }

.ww-cart-totals { text-align: right; }
.ww-cart-totals p { font-size: 0.9062rem; }
.ww-cart-discount { color: var(--ww-accent-deep); font-size: 1rem; }

.ww-cart-checkout { text-align: right; margin: 10px 0 30px; }

.ww-cart-checkout button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ww-grad);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.9375rem;
    padding: 17px 42px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: var(--ww-shadow-accent);
}

.ww-cart-checkout button:hover { filter: brightness(1.05); }

/* ------------------------------------------------------------
   Checkout
   ------------------------------------------------------------ */

.ww-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.ww-price-card {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    padding: 18px 20px;
    box-shadow: var(--ww-shadow-soft);
}

.ww-price-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ww-muted); margin-bottom: 6px; }
.ww-price-value { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ww-ink); }
.ww-price-note { font-size: 0.6875rem; color: var(--ww-muted); margin-top: 4px; }

.ww-price-card--total { border-color: var(--ww-accent); background: linear-gradient(180deg, var(--ww-tint), #FFFFFF); }
.ww-price-card--total .ww-price-value { color: var(--ww-accent-deep); }
.ww-price-card--discount .ww-price-value { color: var(--ww-green); }

.ww-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 18px 0;
}

.ww-payment-option input { position: absolute; opacity: 0; }

.ww-payment-card {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    border-radius: var(--ww-radius-sm);
    padding: 20px 22px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ww-payment-card.is-selected {
    border: 2px solid var(--ww-accent);
    background: linear-gradient(180deg, var(--ww-tint), #FFFFFF);
}

.ww-payment-title { font-weight: 800; margin-bottom: 4px; color: var(--ww-ink); }
.ww-payment-description { font-size: 0.8438rem; color: var(--ww-muted); }

.ww-legal-card { margin-top: 26px; }

.ww-legal-option { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; cursor: pointer; }
.ww-legal-option input { width: auto; margin-top: 4px; accent-color: var(--ww-accent); }
.ww-legal-option-text { font-size: 0.875rem; color: var(--ww-ink-soft); }

.ww-checkout-section-title { margin-top: 44px; }

#bestellbutton { margin-top: 26px; }

/* ------------------------------------------------------------
   Kundenbereich
   ------------------------------------------------------------ */

.ww-login-card {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 34px;
    max-width: 460px;
    box-shadow: var(--ww-shadow);
}

.ww-login-card h3 { margin-bottom: 8px; }
.ww-login-card p { font-size: 0.875rem; color: var(--ww-muted); margin-bottom: 12px; }
.ww-login-card label { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--ww-ink-soft); margin: 14px 0 6px; }

.ww-login-card button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ww-grad);
    color: #FFF;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    padding: 13px 28px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: var(--ww-shadow-accent);
}

.ww-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.ww-summary-tile {
    background: var(--ww-bg-soft);
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    padding: 16px;
    text-align: center;
}

.ww-summary-value { font-size: 1.7rem; font-weight: 900; letter-spacing: -0.02em; color: var(--ww-ink); }
.ww-summary-label { font-size: 0.7812rem; font-weight: 600; color: var(--ww-muted); }

.ww-summary-tile--open .ww-summary-value { color: var(--ww-accent-2); }
.ww-summary-tile--review .ww-summary-value { color: var(--ww-blue); }
.ww-summary-tile--active .ww-summary-value { color: var(--ww-green); }

.ww-status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.7812rem;
    font-weight: 800;
}

.ww-status-pill--open { background: rgba(255, 176, 32, 0.16); color: #B87400; }
.ww-status-pill--review { background: rgba(47, 125, 235, 0.13); color: var(--ww-blue); }
.ww-status-pill--active { background: rgba(22, 164, 100, 0.13); color: var(--ww-green); }

.ww-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.ww-data-item { background: var(--ww-bg-soft); border: 1px solid var(--ww-border); border-radius: var(--ww-radius-sm); padding: 12px 14px; }
.ww-data-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ww-muted); margin-bottom: 3px; }
.ww-data-value { font-size: 0.8438rem; word-break: break-all; color: var(--ww-ink); }
.ww-data-empty { font-size: 0.75rem; color: var(--ww-border-strong); }

/* ------------------------------------------------------------
   Footer: Anthrazit als Kontrast
   ------------------------------------------------------------ */

.ww-footer {
    margin-top: 90px;
    background: var(--ww-dark);
    padding: 64px 0 30px;
}

.ww-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 44px;
}

.ww-footer .ww-logo,
.ww-footer .ww-logo:hover { color: #FFFFFF; }
.ww-footer .ww-logo-text small { color: #8A8A96; }

.ww-footer-brand p { font-size: 0.8438rem; color: #9A9AA6; margin-top: 16px; max-width: 320px; }

.ww-footer h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: #FFFFFF; margin-bottom: 16px; }

.ww-footer ul { list-style: none; display: grid; gap: 9px; }

.ww-footer ul a { color: #9A9AA6; font-size: 0.8438rem; }
.ww-footer ul a:hover { color: var(--ww-accent); }

.ww-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--ww-dark-border);
    padding-top: 24px;
    font-size: 0.75rem;
    color: #8A8A96;
}

.ww-footer-bottom p { color: #8A8A96; }
.ww-footer-note i { color: var(--ww-accent); margin: 0 3px; }

/* ------------------------------------------------------------
   Barrierefreiheit & Bewegung
   ------------------------------------------------------------ */

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid rgba(124, 58, 237, 0.5);
    outline-offset: 2px;
}

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

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
    .ww-hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .ww-mockup { transform: none; }
    .ww-feature-grid, .ww-steps { grid-template-columns: 1fr 1fr; }
    .ww-stat-strip { grid-template-columns: 1fr 1fr; }
    .ww-footer-grid { grid-template-columns: 1fr 1fr; }
    .ww-product-details { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 860px) {
    .ww-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }

    .ww-main-nav {
        position: fixed;
        inset: 72px 0 auto 0;
        background: #FFFFFF;
        border-bottom: 1px solid var(--ww-border);
        box-shadow: var(--ww-shadow);
        padding: 14px 20px 22px;
        display: none;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        z-index: 890;
    }

    .ww-main-nav.ww-open { display: block; }

    .ww-nav-menu { flex-direction: column; align-items: stretch; gap: 2px; }
    .ww-nav-menu > li > a { width: 100%; justify-content: space-between; padding: 13px 12px; }

    .ww-dropdown {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        background: var(--ww-bg-soft);
        min-width: 0;
        max-height: none;
    }

    .ww-has-dropdown.ww-open .ww-dropdown { display: block; }
    .ww-has-dropdown:hover .ww-dropdown { display: none; }
    .ww-has-dropdown.ww-open:hover .ww-dropdown { display: block; }

    .ww-main-nav { margin-left: 0; flex: 1 1 auto; }
    .ww-nav-actions { margin-left: 0; }
    .ww-button-nav { display: none; }

    .ww-compare-grid, .ww-faq-grid, .ww-payment-grid { grid-template-columns: 1fr; }
    .ww-section { padding: 60px 0; }
    .ww-hero { padding: 64px 0 52px; }
    .ww-hero::before, .ww-product-hero::before { display: none; }

    .ww-cart-footer { flex-direction: column; align-items: stretch; }
    .ww-cart-totals, .ww-cart-checkout { text-align: left; }
}

@media (max-width: 560px) {
    .ww-feature-grid, .ww-steps, .ww-stat-strip, .ww-footer-grid { grid-template-columns: 1fr; }
    .ww-mockup-stats { grid-template-columns: 1fr 1fr; }
    .ww-hero-actions .ww-button { width: 100%; }
    .ww-intro-text, .ww-section-head p.ww-intro-text { font-size: 0.9375rem; }
}

/* ============================================================
   Startseiten-Komponenten v3 (Aufbau nach traffic-creator.com)
   ============================================================ */

/* Zentrierter Hero mit gestapelter H1 */

.ww-hero--center { text-align: center; padding: 84px 0 40px; }

.ww-hero--center .ww-kicker { margin-left: auto; margin-right: auto; }

.ww-hero--center h1 { margin: 0 auto 26px; max-width: 900px; }

.ww-h1-line { display: block; }

.ww-hero--center .ww-lead { margin: 0 auto 32px; max-width: 640px; font-size: 0.9375rem; }

.ww-hero--center .ww-hero-actions { justify-content: center; }

.ww-hero-checks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin: 4px 0 34px;
    font-size: 0.7812rem;
    font-weight: 700;
    color: var(--ww-ink-soft);
}

.ww-hero-checks span { display: inline-flex; align-items: center; gap: 8px; }
.ww-hero-checks i { color: var(--ww-accent); }

/* Mini-Feature-Chips (2x2 unter dem Hero) */

.ww-minigrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 980px;
    margin: 0 auto 44px;
    text-align: left;
}

.ww-mini {
    display: flex;
    align-items: center;
    gap: 13px;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    padding: 14px 16px;
    box-shadow: var(--ww-shadow-soft);
}

.ww-mini i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ww-tint);
    border: 1px solid var(--ww-tint-border);
    color: var(--ww-accent-deep);
    font-size: 0.9062rem;
    flex: 0 0 auto;
}

.ww-mini strong { display: block; font-size: 0.875rem; color: var(--ww-ink); line-height: 1.3; }
.ww-mini span { font-size: 0.7812rem; color: var(--ww-muted); }

/* Breites Dashboard-Mockup unter dem zentrierten Hero */

.ww-mockup--wide { max-width: 860px; margin: 0 auto; transform: none; }

/* Zielgruppen-Band */

.ww-chip-band { text-align: center; padding: 30px 0 10px; }

.ww-chip-band p {
    font-size: 0.7812rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ww-muted);
    margin-bottom: 18px;
}

.ww-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.ww-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ww-bg-soft);
    border: 1.5px solid var(--ww-border);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.8438rem;
    font-weight: 700;
    color: var(--ww-ink-soft);
}

.ww-chip i { color: var(--ww-accent); font-size: 0.7812rem; }

/* Vergleichstabelle */

.ww-compare-table-wrap { overflow-x: auto; }

.ww-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    overflow: hidden;
    font-size: 0.875rem;
    box-shadow: var(--ww-shadow-soft);
}

.ww-compare-table th {
    background: var(--ww-bg-soft);
    padding: 15px 18px;
    text-align: left;
    font-size: 0.7812rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ww-muted);
}

.ww-compare-table th.ww-col-us {
    background: var(--ww-grad);
    color: #FFFFFF;
}

.ww-compare-table td {
    padding: 14px 18px;
    border-top: 1px solid var(--ww-border);
    color: var(--ww-ink-soft);
    vertical-align: top;
}

.ww-compare-table td:first-child { font-weight: 700; color: var(--ww-ink); }

.ww-compare-table td.ww-col-us {
    background: var(--ww-tint);
    font-weight: 700;
    color: var(--ww-ink);
}

.ww-compare-table td.ww-col-us i.fa-check { color: var(--ww-accent-deep); margin-right: 7px; }
.ww-compare-table td i.fa-xmark { color: var(--ww-red); margin-right: 7px; }
.ww-compare-table td i.fa-minus { color: var(--ww-muted); margin-right: 7px; }

.ww-table-note { text-align: center; font-size: 0.75rem; color: var(--ww-muted); margin-top: 14px; }

/* Feature-Karten mit Tag-Chips */

.ww-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.ww-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ww-tint);
    border: 1px solid var(--ww-tint-border);
    color: var(--ww-accent-deep);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Preiskarten: Icon-Kachel + Mengen-Box */

.ww-price-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }

.ww-price-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--ww-tint);
    border: 1px solid var(--ww-tint-border);
    color: var(--ww-accent-deep);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.ww-price-head .ww-price-eyebrow { margin-bottom: 2px; }
.ww-price-head h3 { margin-bottom: 1px; }
.ww-price-head .ww-price-sub { margin-bottom: 0; }

.ww-volume-box {
    background: var(--ww-tint);
    border: 1px solid var(--ww-tint-border);
    border-radius: var(--ww-radius-sm);
    padding: 12px 16px;
    margin: 12px 0 14px;
}

.ww-volume-box strong { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; color: var(--ww-accent-deep); }
.ww-volume-box span { font-size: 0.7812rem; color: var(--ww-muted); font-weight: 700; margin-left: 5px; }

/* Beispiel-Kampagne */

.ww-example {
    background: var(--ww-bg-soft);
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 36px;
}

.ww-example-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.ww-example-stat {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    padding: 18px 20px;
}

.ww-example-stat .ww-price-label { margin-bottom: 4px; }
.ww-example-stat strong { display: block; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; color: var(--ww-ink); }
.ww-example-stat span { font-size: 0.7812rem; color: var(--ww-muted); }

.ww-example-plan {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    padding: 20px;
}

.ww-example-plan p { font-size: 0.7812rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ww-muted); margin-bottom: 12px; }

.ww-example-bars { display: flex; align-items: flex-end; gap: 5px; height: 74px; }

.ww-example-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--ww-grad); opacity: 0.85; min-height: 20%; }
.ww-example-bars i:nth-child(odd) { height: 62%; }
.ww-example-bars i:nth-child(even) { height: 78%; }
.ww-example-bars i:nth-child(3n) { height: 54%; }
.ww-example-bars i:nth-child(5n) { height: 88%; }

.ww-example-days { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ww-muted); margin-top: 8px; }

.ww-example-note { font-size: 0.75rem; color: var(--ww-muted); margin-top: 18px; }
.ww-example-note i { color: var(--ww-accent); margin-right: 6px; }

/* Responsive fuer v3-Komponenten */

@media (max-width: 1024px) {
    .ww-minigrid { grid-template-columns: 1fr 1fr; }
    .ww-example-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .ww-minigrid { grid-template-columns: 1fr; }
    .ww-hero--center { padding: 60px 0 30px; }
}

/* ============================================================
   Hero v3.1: Desktop zweispaltig (Text links, Mockup rechts),
   Mobil weiterhin zentriert gestapelt — wie traffic-creator.com
   ============================================================ */

.ww-hero--split { position: relative; }

/* Weicher Farbschleier hinter dem Hero */
.ww-hero--split::after {
    content: "";
    position: absolute;
    top: -140px;
    right: -180px;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.13), rgba(217, 70, 239, 0.07) 45%, transparent 68%);
    pointer-events: none;
    z-index: -1;
}

.ww-hero--split .ww-minigrid { max-width: none; margin: 46px 0 0; }

@media (min-width: 1025px) {
    .ww-hero--split { text-align: left; padding: 80px 0 44px; }

    .ww-hero--split .ww-kicker { margin-left: 0; margin-right: 0; }

    .ww-hero--split h1 {
        margin: 0 0 24px;
        max-width: none;
        font-size: clamp(2.4rem, 3.4vw, 3.3rem);
    }

    .ww-hero--split .ww-lead { margin: 0 0 30px; max-width: 520px; }

    .ww-hero--split .ww-hero-actions { justify-content: flex-start; }

    .ww-hero--split .ww-hero-checks { justify-content: flex-start; margin-bottom: 0; }

    .ww-hero--split .ww-mockup--wide { margin: 0; max-width: none; transform: rotate(0.8deg); }
}

@media (max-width: 1024px) {
    .ww-hero--split::after { display: none; }
    .ww-hero--split .ww-minigrid { margin: 40px auto 0; }
    .ww-hero--split .ww-mockup--wide { margin: 0 auto; }
}

/* ============================================================
   v3.2: Dropdown-Fix, Varianten-Umschalter, 3er-Preisraster,
   Produktseiten im Landingpage-Stil
   ============================================================ */

/* Fix: unsichtbare Bruecke zwischen Menuepunkt und Dropdown,
   damit das Menue beim Herunterfahren mit der Maus offen bleibt */
.ww-has-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 16px;
}

/* Preisraster: fest 3 nebeneinander (2 Reihen bei 6 Paketen) */
.ww-pricing-grid--3 { grid-template-columns: repeat(3, 1fr); }

.ww-pricing-grid[hidden] { display: none; }

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

@media (max-width: 640px) {
    .ww-pricing-grid--3 { grid-template-columns: 1fr; }
}

/* Varianten-Umschalter (wie Professional/Expert bei traffic-creator) */

.ww-seg-wrap { text-align: center; margin-bottom: 34px; }

.ww-seg {
    display: inline-flex;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    border-radius: 17px;
    padding: 6px;
    gap: 6px;
    box-shadow: var(--ww-shadow-soft);
}

.ww-seg-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border: none;
    background: transparent;
    padding: 10px 28px;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9062rem;
    font-weight: 800;
    color: var(--ww-ink-soft);
    transition: background 0.2s ease, color 0.2s ease;
}

.ww-seg-btn small { font-size: 0.75rem; font-weight: 600; color: var(--ww-muted); }

.ww-seg-btn.is-active {
    background: var(--ww-grad);
    color: #FFFFFF;
    box-shadow: var(--ww-shadow-accent);
}

.ww-seg-btn.is-active small { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 560px) {
    .ww-seg { width: 100%; }
    .ww-seg-btn { flex: 1; padding: 10px 12px; }
}

/* ============================================================
   v3.3: nxtlvl24-Branding, Scroll-Reveal, wechselnde Seiten,
   Hinweiskarte unter dem Preisraster
   ============================================================ */

sup { font-size: 0.6em; line-height: 0; vertical-align: super; }

/* Detail-Abschnitte abwechselnd: Aside mal rechts, mal links */
.ww-details--flip .ww-product-aside { order: -1; }

@media (max-width: 1024px) {
    .ww-details--flip .ww-product-aside { order: 0; }
}

/* Scroll-Reveal: Elemente gleiten von links/rechts herein */
@media (prefers-reduced-motion: no-preference) {
    [data-ww-reveal] {
        opacity: 0;
        transition: opacity 0.7s ease, transform 0.7s ease;
        will-change: opacity, transform;
    }
    [data-ww-reveal="left"] { transform: translateX(-46px); }
    [data-ww-reveal="right"] { transform: translateX(46px); }
    [data-ww-reveal="up"] { transform: translateY(36px); }
    [data-ww-reveal].is-visible { opacity: 1; transform: translate(0, 0); }
}

/* Hinweiskarte unter dem Preisraster */
.ww-paket-hinweis {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--ww-tint);
    border: 1.5px solid var(--ww-tint-border);
    border-radius: var(--ww-radius-sm);
    padding: 20px 22px;
    margin-top: 26px;
}

.ww-paket-hinweis i {
    color: var(--ww-accent-deep);
    font-size: 1rem;
    margin-top: 3px;
    flex: 0 0 auto;
}

.ww-paket-hinweis strong { display: block; color: var(--ww-ink); margin-bottom: 3px; }
.ww-paket-hinweis p { font-size: 0.8125rem; color: var(--ww-ink-soft); margin: 0; }

/* ============================================================
   v3.4: Werbeformen-Raster 3er, schlichte Kicker
   ============================================================ */

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

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

@media (max-width: 640px) {
    .ww-format-grid--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   v3.5: Erklaer-Slider auf Produktseiten (webKing24-Vorbild)
   Zwei Karten je Folie, Pfeile + Punkte, wischbar
   ============================================================ */

.ww-slider { position: relative; margin: 6px 0 20px; }

.ww-slider-track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ww-slider-track::-webkit-scrollbar { display: none; }

.ww-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 22px;
    align-items: stretch;
}

.ww-slide--single { grid-template-columns: 1fr; }

.ww-slide-card {
    background: linear-gradient(180deg, #FFFFFF, var(--ww-bg-soft));
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 34px;
    box-shadow: var(--ww-shadow-soft);
}

.ww-slide-card .ww-kicker { margin-bottom: 10px; }
.ww-slide-card h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 14px; }
.ww-slide-card h3 { font-size: 1.05rem; margin: 16px 0 6px; }
.ww-slide-card p { font-size: 0.875rem; }

.ww-slide-card ul { list-style: none; display: grid; gap: 15px; }

.ww-slide-card li { display: flex; gap: 13px; align-items: flex-start; font-size: 0.875rem; color: var(--ww-ink-soft); }

.ww-check-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--ww-tint);
    color: var(--ww-accent-deep);
    font-size: 0.75rem;
    flex: 0 0 auto;
    margin-top: 1px;
}

.ww-check-circle--bad { background: rgba(229, 72, 77, 0.10); color: var(--ww-red); }
.ww-check-circle--accent { background: var(--ww-tint); color: var(--ww-accent-deep); }

/* Steuerung: Pfeile + Punkte */

.ww-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.ww-slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border-strong);
    color: var(--ww-accent-deep);
    font-size: 0.8438rem;
    cursor: pointer;
    box-shadow: var(--ww-shadow-soft);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.ww-slider-btn:hover { border-color: var(--ww-accent); transform: translateY(-1px); }

.ww-slider-dots { display: flex; gap: 8px; }

.ww-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ww-border-strong);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.ww-slider-dot.is-active { width: 28px; background: var(--ww-grad); }

@media (max-width: 860px) {
    .ww-slide { grid-template-columns: 1fr; }
    .ww-slide-card { padding: 26px; }
}

/* v3.6: Karussell breiter als der Inhaltsbereich */
.ww-slider {
    width: min(1340px, calc(100vw - 40px));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* v3.7: kompakte 3-Schritte-Leiste ohne Ueberschrift */
.ww-steps--klein .ww-step { padding: 20px 18px 18px; }
.ww-steps--klein .ww-step span.ww-step-num { width: 34px; height: 34px; font-size: 0.8438rem; margin-bottom: 12px; }
.ww-steps--klein .ww-step strong { font-size: 0.875rem; margin-bottom: 5px; }
.ww-steps--klein .ww-step p { font-size: 0.8125rem; }

/* v3.8: Tag-Chips noch kompakter, damit sie in eine Zeile passen */
.ww-tags { gap: 6px; margin-top: 12px; }

.ww-tag {
    padding: 3px 8px;
    font-size: 0.62rem;
    letter-spacing: 0.01em;
    gap: 4px;
}

.ww-tag i { font-size: 0.58rem; }

/* ============================================================
   v3.9: Hero-Bildkarte auf Produktseiten (wie webKing24)
   ============================================================ */

.ww-product-hero .ww-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 48px;
    align-items: center;
    margin-bottom: 28px;
}

.ww-hero-bild {
    position: relative;
    border-radius: var(--ww-radius);
    overflow: hidden;
    border: 1.5px solid var(--ww-border);
    box-shadow: var(--ww-shadow);
    background: var(--ww-bg-soft);
}

.ww-hero-bild img {
    width: 100%;
    height: auto;
    display: block;
}

/* Zarter Farbschleier, damit die Grafik zur Marke passt */
.ww-hero-bild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(139, 92, 246, 0.10), rgba(217, 70, 239, 0.05) 55%, transparent);
    pointer-events: none;
}

@media (max-width: 1024px) {
    .ww-product-hero .ww-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .ww-hero-bild { max-width: 560px; margin: 0 auto; }
}

/* ============================================================
   v4.0: Produkt-Hero mit grosser Grafik, Punktraster dahinter,
   Beschriftung auf dem Bild und Einleitung ueber volle Breite
   ============================================================ */

.ww-product-hero { padding: 70px 0 34px; }

.ww-product-hero .ww-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: 54px;
    align-items: center;
    margin-bottom: 34px;
}

.ww-product-hero .ww-hero-copy h1 { margin-bottom: 0; }

/* --- Bildkarte: groesser, mit Punktraster dahinter --- */

.ww-hero-bild {
    position: relative;
    margin: 0;
    border-radius: calc(var(--ww-radius) + 4px);
    isolation: isolate;
}

/* Punktraster als Deko hinter der Grafik (oben rechts) */
.ww-hero-bild::before {
    content: "";
    position: absolute;
    top: -34px;
    right: -34px;
    width: 210px;
    height: 190px;
    background-image: var(--ww-dots);
    background-size: 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
    z-index: -1;
    pointer-events: none;
}

/* Weicher Farbschein hinter der Grafik (unten links) */
.ww-hero-bild::after {
    content: "";
    position: absolute;
    left: -50px;
    bottom: -46px;
    width: 300px;
    height: 260px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.20), rgba(217, 70, 239, 0.09) 48%, transparent 70%);
    filter: blur(6px);
    z-index: -1;
    pointer-events: none;
}

.ww-hero-bild img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: calc(var(--ww-radius) + 4px);
    border: 1.5px solid var(--ww-border);
    box-shadow: 0 26px 60px rgba(23, 23, 28, 0.16);
}

/* Beschriftung auf der Grafik */
.ww-hero-bild figcaption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--ww-radius-sm);
    padding: 14px 18px;
    box-shadow: 0 10px 26px rgba(23, 23, 28, 0.14);
}

.ww-hero-bild figcaption span {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--ww-accent-deep);
    margin-bottom: 3px;
}

.ww-hero-bild figcaption strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ww-ink);
    line-height: 1.35;
}

/* --- Einleitung ueber die gesamte Breite --- */

.ww-product-hero .ww-intro-text {
    display: block;
    max-width: none;
    margin: 0 0 22px;
    font-size: 0.9062rem;
    line-height: 1.75;
    color: var(--ww-ink-soft);
    background: none;
    border: none;
    border-left: 3px solid var(--ww-accent);
    border-radius: 0;
    padding: 4px 0 4px 22px;
}

/* --- Sanfte Bewegung der Grafik beim Scrollen --- */

@media (prefers-reduced-motion: no-preference) {
    [data-ww-parallax] {
        will-change: transform;
        transition: transform 0.12s linear;
    }
}

@media (max-width: 1024px) {
    .ww-product-hero .ww-hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .ww-hero-bild { max-width: 620px; margin: 0 auto; }
    .ww-hero-bild::before { top: -22px; right: -18px; width: 150px; height: 130px; }
    [data-ww-parallax] { transform: none !important; }
}

@media (max-width: 560px) {
    .ww-hero-bild figcaption { left: 12px; right: 12px; bottom: 12px; padding: 11px 14px; }
    .ww-hero-bild figcaption strong { font-size: 0.8125rem; }
    .ww-product-hero .ww-intro-text { font-size: 0.875rem; padding-left: 16px; }
}

/* v4.1: Pills sitzen unter der H1 in der linken Spalte */
.ww-product-hero .ww-hero-copy h1 { margin-bottom: 22px; }
.ww-product-hero .ww-hero-copy .ww-product-pills { margin-bottom: 0; }
.ww-product-hero .ww-intro-text { margin-top: 4px; }

/* ============================================================
   v4.2: Echter Parallax im Bildrahmen + Beschriftung links
   Bild und Beschriftung bewegen sich gegenlaeufig beim Scrollen
   ============================================================ */

.ww-hero-bild {
    overflow: hidden;
    border: 1.5px solid var(--ww-border);
    box-shadow: 0 26px 60px rgba(23, 23, 28, 0.16);
    background: var(--ww-bg-soft);
}

/* Bild leicht groesser als der Rahmen, damit beim Verschieben keine Kante entsteht */
.ww-hero-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: translate3d(var(--ww-px, 0px), var(--ww-py, 0px), 0) scale(1.07);
    transition: transform 0.18s linear;
    will-change: transform;
}

/* Beschriftung sitzt LINKS im freien Bereich der Grafik */
.ww-hero-bild figcaption {
    left: 22px;
    right: auto;
    bottom: 22px;
    max-width: min(360px, calc(100% - 44px));
    transform: translate3d(var(--ww-cx, 0px), var(--ww-cy, 0px), 0);
    transition: transform 0.18s linear;
    will-change: transform;
}

/* Der Rahmen selbst bewegt sich nicht mehr — nur sein Inhalt */
.ww-hero-bild[data-ww-parallax] { transform: none; }

/* Reveal: Elemente kommen beim Scrollen von unten herein */
@media (prefers-reduced-motion: no-preference) {
    [data-ww-reveal="up"] { transform: translateY(42px); }
}

@media (max-width: 1024px) {
    .ww-hero-bild img { transform: scale(1.02); }
    .ww-hero-bild figcaption { transform: none; }
}

/* ============================================================
   v4.3: Slider-Zentrierung ohne transform (sonst kollidiert sie
   mit dem Reveal-Effekt und der Slider rutscht nach rechts)
   ============================================================ */

.ww-slider {
    width: min(1340px, calc(100vw - 40px));
    left: auto;
    transform: none;
    margin-left: calc((100% - min(1340px, 100vw - 40px)) / 2);
    margin-right: calc((100% - min(1340px, 100vw - 40px)) / 2);
}

/* Reveal fuer den Slider nur vertikal — die Breite bleibt unangetastet */
@media (prefers-reduced-motion: no-preference) {
    .ww-slider[data-ww-reveal] { transform: translateY(42px); }
    .ww-slider[data-ww-reveal].is-visible { transform: translateY(0); }
}

/* ============================================================
   v4.4: Beschriftung je Grafik dorthin, wo Platz ist
   (automatisch aus der Bildanalyse ermittelt)
   ============================================================ */

.ww-hero-bild figcaption {
    left: auto; right: auto; top: auto; bottom: auto;
    max-width: min(360px, calc(100% - 44px));
}

.ww-hero-bild.ww-cap-ol figcaption { top: 22px;    left: 22px; }
.ww-hero-bild.ww-cap-ul figcaption { bottom: 22px; left: 22px; }
.ww-hero-bild.ww-cap-or figcaption { top: 22px;    right: 22px; }
.ww-hero-bild.ww-cap-ur figcaption { bottom: 22px; right: 22px; }

/* Bewegung deutlich spuerbarer */
.ww-hero-bild img { transform: translate3d(var(--ww-px, 0px), var(--ww-py, 0px), 0) scale(1.14); }

/* ============================================================
   v4.5: H1 auf Produktseiten kleiner (passend zur Bildgroesse),
   Beschriftung mit mehr Kontrast auf hellen Grafiken
   ============================================================ */

.ww-product-hero h1 {
    font-size: clamp(1.9rem, 2.7vw, 2.75rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
}

.ww-product-hero .ww-hero-copy h1 { margin-bottom: 20px; }

/* Beschriftung hebt sich auch auf sehr hellen Motiven klar ab */
.ww-hero-bild figcaption {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(124, 58, 237, 0.16);
    box-shadow: 0 12px 30px rgba(23, 23, 28, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

/* ============================================================
   v4.6: Grafik in voller Breite sichtbar — Parallax-Spielraum
   entsteht nur vertikal (kein seitlicher Beschnitt mehr)
   ============================================================ */

.ww-hero-bild { position: relative; }

.ww-hero-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 122%;
    top: -11%;
    object-fit: cover;
    object-position: center;
    transform: translate3d(0, var(--ww-py, 0px), 0) scale(1);
}

@media (max-width: 1024px) {
    .ww-hero-bild img { height: 100%; top: 0; transform: none; }
}

/* v4.7: Beschriftung bleibt im freien Bereich der Grafik */
.ww-hero-bild figcaption {
    max-width: min(330px, 47%);
    padding: 12px 15px;
}

.ww-hero-bild figcaption strong { font-size: 0.8438rem; }
.ww-hero-bild figcaption span { font-size: 0.66rem; }

/* ============================================================
   v4.8: einheitliche Bildhoehe, transparentere Beschriftung,
   Position "mittig links" fuer Grafiken mit hohem Freiraum
   ============================================================ */

/* Beschriftung wieder leichter — Glaseffekt statt Deckweiss */
.ww-hero-bild figcaption {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(124, 58, 237, 0.18);
    box-shadow: 0 12px 30px rgba(23, 23, 28, 0.16);
}

.ww-hero-bild figcaption strong { text-shadow: 0 1px 14px rgba(255, 255, 255, 0.75); }

/* Position: senkrecht mittig am linken Rand */
.ww-hero-bild.ww-cap-ml figcaption {
    top: 50%;
    bottom: auto;
    left: 22px;
    right: auto;
    transform: translate3d(var(--ww-cx, 0px), calc(-50% + var(--ww-cy, 0px)), 0);
}

/* ============================================================
   v4.9: Standardposition der Beschriftung — greift auch dann,
   wenn an einer Figur die Positionsklasse fehlt
   ============================================================ */

.ww-hero-bild figcaption {
    top: auto;
    bottom: 22px;
    left: 22px;
    right: auto;
}

.ww-hero-bild.ww-cap-ol figcaption { top: 22px; bottom: auto; left: 22px;  right: auto; }
.ww-hero-bild.ww-cap-ul figcaption { top: auto; bottom: 22px; left: 22px;  right: auto; }
.ww-hero-bild.ww-cap-or figcaption { top: 22px; bottom: auto; left: auto;  right: 22px; }
.ww-hero-bild.ww-cap-ur figcaption { top: auto; bottom: 22px; left: auto;  right: 22px; }

.ww-hero-bild.ww-cap-ml figcaption {
    top: 50%;
    bottom: auto;
    left: 22px;
    right: auto;
    transform: translate3d(var(--ww-cx, 0px), calc(-50% + var(--ww-cy, 0px)), 0);
}

/* ============================================================
   Dekoratives Grün wurde oben direkt auf die Markenfarbe umgestellt.
   Grün bleibt nur mit Bedeutung: Erfolg, bezahlt/eingebucht, Rabatt.
   ============================================================ */

.ww-package-list li i { color: var(--ww-accent); }
.ww-compare-table td i.fa-check { color: var(--ww-accent-deep); }

.ww-check-circle--bad {
    background: rgba(229, 72, 77, 0.10);
    color: var(--ww-red);
    border-color: rgba(229, 72, 77, 0.22);
}

/* Häkchen in Paketlisten, Hero-Zeilen und Vergleichskarten */
.ww-package-list li i,
.ww-hero-note i,
.ww-hero-checks i,
.ww-compare-card--good li i { color: var(--ww-accent); }

/* Runde Häkchen-Kreise im Slider */
.ww-check-circle {
    background: var(--ww-tint);
    color: var(--ww-accent-deep);
    border: 1px solid var(--ww-tint-border);
}

.ww-check-circle--bad {
    background: rgba(229, 72, 77, 0.10);
    color: var(--ww-red);
    border-color: rgba(229, 72, 77, 0.22);
}

.ww-check-circle--accent {
    background: var(--ww-tint);
    color: var(--ww-accent-deep);
    border-color: var(--ww-tint-border);
}

/* Dashboard-Mockup: Statuspunkt und Kennzahlen in Markenfarbe */
.ww-mockup-badge {
    color: #C4B5FD;
    background: rgba(139, 92, 246, 0.20);
}

.ww-mockup-stat em { color: #C4B5FD; }

/* Vergleichstabelle: Häkchen durchgehend violett */
.ww-compare-table td i.fa-check { color: var(--ww-accent-deep); }

/* Die drei Hero-Hinweise bleiben auf einer Zeile */
.ww-hero-checks span { white-space: nowrap; }
.ww-hero-checks i { font-size: 0.7812rem; }

@media (max-width: 1180px) {
    .ww-hero-checks { font-size: 0.75rem; gap: 6px 14px; }
}

/* Check-Zeile im Hero steht über die volle Breite und bleibt einzeilig */
.ww-hero--split .ww-hero-checks {
    justify-content: flex-start;
    gap: 10px 32px;
    font-size: 0.8438rem;
    margin: 26px 0 0;
}

@media (max-width: 720px) {
    .ww-hero--split .ww-hero-checks { justify-content: center; font-size: 0.7812rem; gap: 8px 18px; }
}

/* ============================================================
   v5.1: Check-Zeile folgt der Hero-Ausrichtung,
   Nav-Button bricht nie um
   ============================================================ */

/* Solange der Hero zweispaltig ist: linksbündig unter dem Text.
   Sobald er einspaltig wird (unter 1025px): mittig wie alles andere. */
@media (max-width: 1024px) {
    .ww-hero--split .ww-hero-checks { justify-content: center; }
}

/* Button oben rechts: immer einzeilig */
.ww-button-nav {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Wird es eng, heißt der Button nur noch „starten" */
@media (max-width: 1150px) {
    .ww-nav-lang { display: none; }
    .ww-button-nav { padding: 11px 18px; }
}

/* ============================================================
   v5.2: Tag-Chips sitzen unten in der Karte auf gleicher Höhe
   ============================================================ */

.ww-feature-card {
    display: flex;
    flex-direction: column;
}

/* Der Beschreibungstext dehnt sich, die Chips werden nach unten gedrückt */
.ww-feature-card > span { flex: 1 1 auto; }

.ww-feature-card .ww-tags {
    margin-top: auto;      /* schiebt die Chips ans untere Kartenende */
    padding-top: 18px;
}

/* ============================================================
   v5.3: Logo-Zusatz „kaufen" — tiefer, versetzt, im Hintergrund
   ============================================================ */

.ww-logo-text {
    position: relative;
    display: inline-block;
    line-height: 1.05;
    /* kein Innenabstand: der Schriftzug bleibt senkrecht mittig,
       „kaufen" haengt frei darunter */
}

.ww-logo-sub {
    position: absolute;
    left: 50%;                        /* mittig unter „Werbung" */
    transform: translateX(-50%);
    right: auto;
    top: 100%;                        /* haengt unter dem Schriftzug */
    bottom: auto;
    margin-top: 0;                    /* Abstand zum „g" */
    font-size: 0.44em;
    font-weight: 800;
    letter-spacing: 0.56em;
    text-indent: 0.56em;   /* gleicht die Sperrung nach rechts aus */
    text-transform: uppercase;
    color: var(--ww-muted);
    opacity: 0.55;
    line-height: 1;
    pointer-events: none;
}

/* Im dunklen Footer heller absetzen */
.ww-footer .ww-logo-sub {
    color: #C4B5FD;
    opacity: 1;
    text-shadow: 0 0 14px rgba(167, 139, 250, 0.55), 0 0 30px rgba(139, 92, 246, 0.35);
}

/* Auf sehr schmalen Displays entfällt der Zusatz */
@media (max-width: 420px) {
    .ww-logo-sub { display: none; }
}

/* Bezugspunkt fuer „kaufen": das Wort „Werbung" */
.ww-logo-accent { position: relative; }

/* ============================================================
   v5.5: Kopf der Preiskarte mittig (Werbeform, Menge, Preis)
   ============================================================ */

.ww-price-package .ww-price-eyebrow,
.ww-price-package > h3,
.ww-price-package .ww-price-amount,
.ww-price-package .ww-price-tkp {
    text-align: center;
}

.ww-price-package .ww-price-amount { margin-top: 10px; }
.ww-price-package > h3 { margin-bottom: 2px; }
.ww-price-package .ww-price-sub { text-align: center; }

/* Karten mit Icon-Kachel (Startseite): Kopf ebenfalls zentriert */
.ww-price-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}


/* ============================================================
   v5.6: Balken atmen — Wellenbewegung in Beispiel-Kampagne
   und im Dashboard-Mockup
   ============================================================ */

@keyframes ww-balken-welle {
    0%, 100% {
        transform: scaleY(0.94);
        opacity: 0.86;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

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

    .ww-example-bars i,
    .ww-mockup-chart i {
        transform-origin: center bottom;
        animation: ww-balken-welle 3.8s ease-in-out infinite;
        will-change: transform, opacity;
    }

    /* versetzte Startzeiten erzeugen die Welle von links nach rechts */
    .ww-example-bars i:nth-child(1), .ww-mockup-chart i:nth-child(1) { animation-delay: -0.16s; }
    .ww-example-bars i:nth-child(2), .ww-mockup-chart i:nth-child(2) { animation-delay: -0.32s; }
    .ww-example-bars i:nth-child(3), .ww-mockup-chart i:nth-child(3) { animation-delay: -0.48s; }
    .ww-example-bars i:nth-child(4), .ww-mockup-chart i:nth-child(4) { animation-delay: -0.64s; }
    .ww-example-bars i:nth-child(5), .ww-mockup-chart i:nth-child(5) { animation-delay: -0.8s; }
    .ww-example-bars i:nth-child(6), .ww-mockup-chart i:nth-child(6) { animation-delay: -0.96s; }
    .ww-example-bars i:nth-child(7), .ww-mockup-chart i:nth-child(7) { animation-delay: -1.12s; }
    .ww-example-bars i:nth-child(8), .ww-mockup-chart i:nth-child(8) { animation-delay: -1.28s; }
    .ww-example-bars i:nth-child(9), .ww-mockup-chart i:nth-child(9) { animation-delay: -1.44s; }
    .ww-example-bars i:nth-child(10), .ww-mockup-chart i:nth-child(10) { animation-delay: -1.6s; }
    .ww-example-bars i:nth-child(11), .ww-mockup-chart i:nth-child(11) { animation-delay: -1.76s; }
    .ww-example-bars i:nth-child(12), .ww-mockup-chart i:nth-child(12) { animation-delay: -1.92s; }
    .ww-example-bars i:nth-child(13), .ww-mockup-chart i:nth-child(13) { animation-delay: -2.08s; }
    .ww-example-bars i:nth-child(14), .ww-mockup-chart i:nth-child(14) { animation-delay: -2.24s; }
    .ww-example-bars i:nth-child(15), .ww-mockup-chart i:nth-child(15) { animation-delay: -2.4s; }
    .ww-example-bars i:nth-child(16), .ww-mockup-chart i:nth-child(16) { animation-delay: -2.56s; }
    .ww-example-bars i:nth-child(17), .ww-mockup-chart i:nth-child(17) { animation-delay: -2.72s; }
    .ww-example-bars i:nth-child(18), .ww-mockup-chart i:nth-child(18) { animation-delay: -2.88s; }
    .ww-example-bars i:nth-child(19), .ww-mockup-chart i:nth-child(19) { animation-delay: -3.04s; }
    .ww-example-bars i:nth-child(20), .ww-mockup-chart i:nth-child(20) { animation-delay: -3.2s; }
}

/* ============================================================
   v5.7: Rechtsseiten (Impressum, AGB, Widerruf)
   Zweispaltig mit mitlaufendem Sprungmenue links
   ============================================================ */

.ww-legal-layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    margin-top: 30px;
}

/* Sprungmenue: bleibt beim Scrollen stehen, Header-Hoehe (72px) beruecksichtigt */
.ww-legal-nav {
    position: sticky;
    top: 92px;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    box-shadow: var(--ww-shadow-soft);
    padding: 22px 18px;
}

.ww-legal-nav > p {
    margin: 0 0 12px 2px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ww-muted);
}

.ww-legal-nav ol {
    list-style: none;
    counter-reset: ww-legal;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ww-legal-nav a {
    counter-increment: ww-legal;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ww-ink-soft);
    transition: background 0.18s ease, color 0.18s ease;
}

/* Nummernplakette vor jedem Eintrag */
.ww-legal-nav a::before {
    content: counter(ww-legal);
    flex: 0 0 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--ww-bg-soft);
    border: 1px solid var(--ww-border);
    font-size: 0.625rem;
    font-weight: 800;
    color: var(--ww-muted);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ww-legal-nav a:hover {
    background: var(--ww-bg-soft);
    color: var(--ww-ink);
}

/* Abschnitt, in dem gerade gelesen wird */
.ww-legal-nav a.ww-aktiv {
    background: var(--ww-tint);
    color: var(--ww-accent-deep);
}

.ww-legal-nav a.ww-aktiv::before {
    background: var(--ww-grad);
    border-color: transparent;
    color: #FFFFFF;
}

.ww-legal-body { display: flex; flex-direction: column; gap: 18px; }

.ww-legal-block {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 26px 30px 28px;
    box-shadow: var(--ww-shadow-soft);
    scroll-margin-top: 96px;   /* damit der klebende Header die Ueberschrift nicht verdeckt */
}

.ww-legal-block > h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 1.125rem;
    line-height: 1.3;
}

.ww-legal-block > h2 span {
    flex: 0 0 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--ww-grad);
    box-shadow: var(--ww-shadow-accent);
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 800;
}

.ww-legal-block p {
    margin-bottom: 9px;
    font-size: 0.875rem;
    line-height: 1.72;
    color: var(--ww-ink-soft);
}

.ww-legal-block p:last-child { margin-bottom: 0; }

/* Zwischenueberschrift innerhalb eines Abschnitts */
.ww-legal-block h3 {
    margin: 18px 0 7px;
    font-size: 0.9375rem;
    color: var(--ww-ink);
}

.ww-legal-block h3:first-of-type { margin-top: 4px; }

/* Absatznummer (1.1, 1.2 …) als ruhige Marke am Zeilenanfang */
.ww-legal-block p > b {
    display: inline-block;
    min-width: 30px;
    color: var(--ww-accent-deep);
    font-weight: 800;
}

/* Hinweiszeile mit Info-Zeichen */
.ww-legal-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--ww-tint);
    border: 1.5px solid var(--ww-tint-border);
    border-radius: var(--ww-radius-sm);
    padding: 16px 18px;
    margin-bottom: 20px;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--ww-ink-soft);
}

.ww-legal-note i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--ww-accent);
    font-size: 1rem;
}

/* Hervorgehobene Zustimmungserklaerung (Widerruf) */
.ww-legal-quote {
    position: relative;
    background: var(--ww-bg-soft);
    border: 1.5px solid var(--ww-border);
    border-left: 4px solid var(--ww-accent);
    border-radius: var(--ww-radius-sm);
    padding: 20px 24px;
    margin: 20px 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    font-style: italic;
    color: var(--ww-ink);
}

/* Firmendaten-Grafik im Impressum */
.ww-legal-anbieter {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 30px;
    align-items: center;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    box-shadow: var(--ww-shadow-soft);
    padding: 26px 30px;
    margin-top: 28px;
}

.ww-legal-anbieter img {
    width: 100%;
    height: auto;
    border-radius: var(--ww-radius-sm);
    border: 1px solid var(--ww-border);
}

.ww-legal-anbieter h2 { font-size: 1.0625rem; margin-bottom: 10px; }
.ww-legal-anbieter p { font-size: 0.875rem; line-height: 1.7; margin-bottom: 8px; color: var(--ww-ink-soft); }

@media (max-width: 980px) {
    .ww-legal-layout { grid-template-columns: 1fr; gap: 20px; }
    .ww-legal-nav { position: static; }
    .ww-legal-nav ol {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 2px;
    }
    .ww-legal-anbieter { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
}

@media (max-width: 560px) {
    .ww-legal-block { padding: 22px 20px 24px; }
    .ww-legal-nav ol { grid-template-columns: 1fr; }
}

/* ============================================================
   v5.8: FAQ-Bereich - Themenkarten und Querverweise
   ============================================================ */

.ww-faq-themen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 26px;
}

.ww-faq-thema {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    box-shadow: var(--ww-shadow-soft);
    padding: 26px 26px 22px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ww-faq-thema:hover {
    border-color: var(--ww-tint-border);
    transform: translateY(-3px);
    box-shadow: var(--ww-shadow);
}

.ww-faq-thema-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--ww-tint);
    color: var(--ww-accent);
    font-size: 1.0625rem;
    margin-bottom: 14px;
}

.ww-faq-thema h3 { font-size: 1.0625rem; margin-bottom: 8px; }

.ww-faq-thema > p {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--ww-muted);
    margin-bottom: 16px;
}

/* Fragenliste sitzt fest am unteren Rand, damit die Karten gleich wirken */
.ww-faq-thema ul {
    list-style: none;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ww-border);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ww-faq-thema li a {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ww-ink-soft);
}

.ww-faq-thema li a i { color: var(--ww-accent); font-size: 0.75rem; }
.ww-faq-thema li a:hover { color: var(--ww-accent-deep); }

/* Querverweise am Fuss einer FAQ-Einzelseite */
.ww-faq-weiter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.ww-faq-weiter a {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    padding: 16px 18px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ww-faq-weiter a:hover { border-color: var(--ww-tint-border); background: var(--ww-tint); }

.ww-faq-weiter i {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--ww-tint);
    color: var(--ww-accent);
    font-size: 0.875rem;
}

.ww-faq-weiter span {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ww-ink);
}

/* Textabschnitte auf den FAQ-Einzelseiten */
.ww-faq-text h2 { font-size: 1.375rem; margin: 30px 0 12px; }
.ww-faq-text h3 { font-size: 1.0625rem; margin: 22px 0 8px; }
.ww-faq-text p  { font-size: 0.9375rem; line-height: 1.75; margin-bottom: 12px; color: var(--ww-ink-soft); }

.ww-faq-text ul {
    list-style: none;
    margin: 4px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ww-faq-text ul li {
    position: relative;
    padding-left: 26px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ww-ink-soft);
}

.ww-faq-text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4 7.6-8' fill='none' stroke='%237C3AED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* Zwischenstufen so gewaehlt, dass nie eine einzelne Karte allein steht */
@media (max-width: 1180px) {
    .ww-faq-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .ww-faq-themen { grid-template-columns: 1fr; }
}

/* ============================================================
   v5.9: Code-Bausteine zum Mitnehmen (FAQ-Technikseiten)
   ============================================================ */

.ww-code-block {
    margin: 14px 0 20px;
    border: 1.5px solid var(--ww-dark-border);
    border-radius: var(--ww-radius-sm);
    background: var(--ww-dark);
    overflow: hidden;
}

.ww-code-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: var(--ww-dark-2);
    border-bottom: 1px solid var(--ww-dark-border);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #A9A9B8;
}

.ww-code-kopf i { color: var(--ww-accent); font-size: 0.8125rem; }

.ww-code-block pre {
    margin: 0;
    padding: 18px 16px;
    overflow-x: auto;          /* lange Zeilen scrollen im Block, nicht die Seite */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #E4E4EC;
    tab-size: 2;
}

/* die entscheidende Zeile hervorheben */
.ww-code-block pre b {
    display: inline-block;
    background: rgba(139, 92, 246, 0.22);
    border-radius: 4px;
    padding: 1px 5px;
    margin: 0 -3px;
    color: #DDD0FF;
    font-weight: 700;
}

/* Textbaustein zum Kopieren, hell statt dunkel */
.ww-textbaustein {
    margin: 14px 0 20px;
    padding: 18px 20px;
    background: var(--ww-bg-soft);
    border: 1.5px solid var(--ww-border);
    border-left: 4px solid var(--ww-accent);
    border-radius: var(--ww-radius-sm);
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--ww-ink-soft);
}

.ww-textbaustein strong { color: var(--ww-ink); }

@media (max-width: 560px) {
    .ww-code-block pre { font-size: 0.75rem; padding: 14px 12px; }
}

/* ============================================================
   v6.0: Kontaktseite - Formular mit Hilfespalte
   ============================================================ */

.ww-kontakt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    margin-top: 28px;
}

.ww-kontakt-hilfe { display: flex; flex-direction: column; gap: 14px; }

.ww-kontakt-tipp {
    display: flex;
    gap: 14px;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    padding: 18px 20px;
    box-shadow: var(--ww-shadow-soft);
}

.ww-kontakt-tipp-icon {
    flex: 0 0 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--ww-tint);
    color: var(--ww-accent);
    font-size: 0.9375rem;
}

.ww-kontakt-tipp h3 { font-size: 0.9375rem; margin-bottom: 4px; }
.ww-kontakt-tipp p  { font-size: 0.8125rem; line-height: 1.6; color: var(--ww-muted); margin: 0; }

/* Hinweis auf die Selbstauskunft - abgesetzt, damit er auffaellt */
.ww-kontakt-selbst {
    background: var(--ww-tint);
    border: 1.5px solid var(--ww-tint-border);
    border-radius: var(--ww-radius-sm);
    padding: 18px 20px;
}

.ww-kontakt-selbst p { font-size: 0.8125rem; line-height: 1.6; color: var(--ww-ink-soft); margin-bottom: 6px; }
.ww-kontakt-selbst p:first-child { font-size: 0.875rem; color: var(--ww-ink); }
.ww-kontakt-selbst p:first-child i { color: var(--ww-accent); margin-right: 4px; }
.ww-kontakt-selbst .ww-button { margin-top: 12px; width: 100%; justify-content: center; }

/* "optional" hinter dem Feldnamen */
.ww-optional {
    margin-left: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ww-muted);
}

@media (max-width: 900px) {
    .ww-kontakt-layout { grid-template-columns: 1fr; }
}


/* ============================================================
   v6.1: Erfolgsanzeige nach einer Anfrage
   Muster fuer Bestaetigungsseiten - auch fuer weitere Projekte
   ============================================================ */

.ww-erfolg-karte {
    max-width: 760px;
    margin: 30px auto 0;
    padding: 44px 40px 36px;
    text-align: center;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    box-shadow: var(--ww-shadow);
}

.ww-erfolg-kicker {
    margin-bottom: 12px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ww-green);
}

.ww-erfolg-karte h2 {
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: 14px;
}

.ww-erfolg-text {
    max-width: 560px;
    margin: 0 auto 26px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ww-muted);
}

.ww-erfolg-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* Die vollstaendige Adresse zum Kopieren oder als Lesezeichen */
.ww-erfolg-adresse {
    margin-top: 20px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ww-muted);
    word-break: break-all;        /* lange Adressen brechen um, statt die Karte zu sprengen */
}

.ww-erfolg-adresse a { color: var(--ww-accent-deep); }

.ww-erfolg-hinweis {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    margin-top: 26px;
    padding: 16px 18px;
    background: var(--ww-tint);
    border: 1.5px solid var(--ww-tint-border);
    border-radius: var(--ww-radius-sm);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--ww-ink-soft);
}

.ww-erfolg-hinweis i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--ww-accent);
    font-size: 1rem;
}

@media (max-width: 560px) {
    .ww-erfolg-karte { padding: 32px 22px 26px; }
    .ww-erfolg-karte h2 { font-size: 1.5rem; }
    .ww-erfolg-aktionen .ww-button { width: 100%; justify-content: center; }
}

/* ============================================================
   v6.2: Honeypot gegen Formular-Bots
   Absichtlich unauffaellig: Wer im Quelltext "display:none" oder
   "left:-9999px" liest, erkennt die Falle sofort. Diese Variante
   steht in der CSS-Datei und faellt im HTML nicht auf.
   ============================================================ */

.ww-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

/* ============================================================
   v6.3: Fehlerseite
   ============================================================ */

.ww-fehler {
    text-align: center;
    padding: 70px 0 20px;
}

.ww-fehler-zahl {
    font-size: 6.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 10px;
    background: var(--ww-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ww-fehler h1 { font-size: 2.25rem; margin-bottom: 14px; }

.ww-fehler-text {
    max-width: 540px;
    margin: 0 auto 8px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ww-muted);
}

@media (max-width: 560px) {
    .ww-fehler { padding: 48px 0 10px; }
    .ww-fehler-zahl { font-size: 4.5rem; }
    .ww-fehler h1 { font-size: 1.625rem; }
}

/* Claim der nxtlvl24 Werbenetzwerke im Footer.
   Bewusst zurueckhaltend gesetzt: Der Satz steht so ruhig da wie der
   Text darueber, nur die 120 bekommt einen Akzent. Ein Motto wirkt
   staerker, wenn es nicht um Aufmerksamkeit bittet.
   Mit .ww-footer-brand davor, sonst gewinnt die allgemeine
   Absatzregel des Footers. */
.ww-footer-brand p.ww-footer-claim {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ww-dark-border);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.8;
    color: #8A8A99;
}

.ww-footer-brand p.ww-footer-claim strong {
    color: #FFFFFF;
    font-weight: 800;
}

/* ============================================================
   v6.4: Einstieg mit Formular
   Links Erklaerung und Grafik, rechts die Eingabekarte.
   Aufbau nach dem Vorbild von traffic-creator.com/signup.
   ============================================================ */

.ww-einstieg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 60px;
    align-items: center;
    min-height: 560px;
    padding: 40px 0 60px;
}

.ww-einstieg-text .ww-kicker { margin-bottom: 18px; }

.ww-einstieg-text h1 {
    font-size: 3rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}

/* Nicht als Kindselektor: Der Absatz sitzt in .ww-bildgrund-inhalt,
   ein "> p" wuerde ihn verfehlen. */
.ww-einstieg-text p:not(.ww-kicker) {
    max-width: 460px;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--ww-muted);
    margin-bottom: 34px;
}

/* Die vier Punkte unter dem Text */
.ww-einstieg-punkte {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ww-einstieg-punkte li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ww-ink-soft);
}

.ww-einstieg-punkte i {
    flex: 0 0 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ww-tint);
    color: var(--ww-accent);
    font-size: 0.5625rem;
}

/* Bildgrund: Die Grafik liegt als Flaeche hinter dem Inhalt, ein heller
   Schleier darueber nimmt ihr so viel Kraft, dass Text muehelos lesbar
   bleibt. Das Bild traegt die Stimmung, ohne sich vorzudraengen.
   Wird an mehreren Stellen genutzt - Bestellstatus, Dashboard,
   Warenkorb -, deshalb neutral benannt. */
.ww-bildgrund {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ww-bildgrund img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ww-bildgrund::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.96) 40%, rgba(255, 255, 255, 0.72) 100%);
}

.ww-bildgrund-inhalt { position: relative; z-index: 1; }

/* Die Textspalte im zweigeteilten Einstieg traegt den Bildgrund */
.ww-einstieg-text {
    position: relative;
    padding: 36px 38px 42px;
    border-radius: var(--ww-radius);
    overflow: hidden;
}

/* Einspaltiger Kopf mit Bildgrund - fuer Seiten ohne Formular daneben,
   etwa den Warenkorb. */
.ww-kopf {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    padding: 46px 44px;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: calc(var(--ww-radius) + 6px);
    box-shadow: var(--ww-shadow);
}

.ww-kopf h1 {
    font-size: 2.75rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

.ww-kopf p:not(.ww-kicker) {
    max-width: 520px;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--ww-muted);
    margin-bottom: 26px;
}

@media (max-width: 760px) {
    .ww-kopf { padding: 32px 24px; margin-top: 20px; }
    .ww-kopf h1 { font-size: 1.875rem; }
}

/* Die Karte rechts - etwas angehoben, damit sie als Handlungsflaeche liest */
.ww-einstieg .ww-login-card {
    max-width: none;
    width: 100%;
    padding: 38px;
}

@media (max-width: 1100px) {
    .ww-einstieg { gap: 40px; }
    .ww-einstieg-text h1 { font-size: 2.5rem; }
}

/* Auf dem Handy zaehlt nur das Formular. Die Erklaerung daneben wuerde
   dort nur Scrollweg kosten, bevor man das tun kann, wofuer man
   gekommen ist. Genauso macht es traffic-creator. */
@media (max-width: 860px) {
    .ww-einstieg {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 26px 0 40px;
    }
    .ww-einstieg-text { display: none; }
    .ww-einstieg .ww-login-card { padding: 30px 24px; }
}

/* Dasselbe gilt fuer das Dashboard-Mockup im Einstieg der Startseite:
   Es traegt keine Information (aria-hidden), seine Zahlen sind auf dem
   Handy ohnehin nicht mehr zu lesen, und seine zwoelf dauerlaufenden
   Balken kosten dort nur Akku. Damit verhaelt sich die Startseite wie
   jede andere Seite - Bildkasten oben erst ab 860px. */
@media (max-width: 860px) {
    .ww-mockup { display: none; }
}

/* ============================================================
   v6.5: Warenkorb als Positionskarten
   Statt einer Tabelle bekommt jede Position einen eigenen Kasten.
   Damit ist auf einen Blick klar, welche Kampagnendaten zu welchem
   Paket gehoeren - und auf dem Handy muss niemand quer scrollen.
   ============================================================ */

.ww-korb-liste {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 26px 0;
}

.ww-korb-position {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    box-shadow: var(--ww-shadow-soft);
    overflow: hidden;
}

/* Kopfzeile der Position: Bezeichnung links, Preis rechts */
.ww-korb-kopf {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 24px;
}

.ww-korb-titel { flex: 1 1 auto; min-width: 0; }

.ww-korb-titel h3 {
    font-size: 1.0625rem;
    line-height: 1.3;
    margin-bottom: 8px;
}

.ww-korb-titel h3 small {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ww-accent);
    vertical-align: middle;
}

/* Eckdaten als ruhige Merkmalsliste */
.ww-korb-daten {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 0.8125rem;
    color: var(--ww-muted);
}

.ww-korb-daten span { display: inline-flex; align-items: center; gap: 6px; }
.ww-korb-daten i { color: var(--ww-accent); font-size: 0.6875rem; }
.ww-korb-daten b { color: var(--ww-ink-soft); font-weight: 700; }

.ww-korb-preis {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ww-korb-brutto {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ww-ink);
    white-space: nowrap;
}

.ww-korb-netto {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ww-muted);
    white-space: nowrap;
}

/* Entfernen: unauffaellig, bis man mit der Maus darauf geht */
.ww-korb-weg {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--ww-border);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--ww-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ww-korb-weg:hover {
    color: var(--ww-red);
    border-color: var(--ww-red);
    background: #FEF2F2;
}

/* Kampagnendaten - abgesetzt, damit die Zugehoerigkeit klar bleibt */
.ww-korb-felder {
    padding: 20px 24px 24px;
    background: var(--ww-bg-soft);
    border-top: 1.5px solid var(--ww-border);
}

.ww-korb-felder-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ww-muted);
}

.ww-korb-felder-titel i { color: var(--ww-accent); font-size: 0.6875rem; }

@media (max-width: 620px) {
    .ww-korb-kopf { flex-direction: column; gap: 14px; padding: 18px 18px; }
    .ww-korb-preis { width: 100%; justify-content: space-between; }
    .ww-korb-felder { padding: 18px; }
}

/* ---------- Warenkorb: Gutschein und Zusammenfassung ---------- */

.ww-korb-abschluss {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 22px;
    align-items: start;
    margin-bottom: 40px;
}

.ww-korb-gutschein,
.ww-korb-summe {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    padding: 24px;
    box-shadow: var(--ww-shadow-soft);
}

/* Die Zusammenfassung traegt die Kaufentscheidung - etwas mehr Gewicht */
.ww-korb-summe {
    border-color: var(--ww-tint-border);
    box-shadow: var(--ww-shadow);
}

.ww-korb-block-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ww-muted);
}

.ww-korb-block-titel i { color: var(--ww-accent); font-size: 0.8125rem; }

.ww-korb-gutschein label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: var(--ww-ink-soft);
}

.ww-korb-gutschein-zeile { display: flex; gap: 10px; }
.ww-korb-gutschein-zeile input { flex: 1 1 auto; min-width: 0; margin: 0; }

.ww-korb-gutschein-zeile button {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1.5px solid var(--ww-border-strong);
    border-radius: var(--ww-radius-sm);
    background: #FFFFFF;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ww-ink-soft);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.ww-korb-gutschein-zeile button:hover { border-color: var(--ww-accent); color: var(--ww-accent-deep); }

.ww-korb-gutschein-aktiv {
    margin-top: 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ww-green);
}

.ww-korb-summe-zeile {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    font-size: 0.875rem;
    color: var(--ww-ink-soft);
}

.ww-korb-rabatt { color: var(--ww-green); font-weight: 700; }

.ww-korb-summe-gesamt {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1.5px solid var(--ww-border);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--ww-ink);
}

.ww-korb-summe-gesamt span:last-child {
    font-size: 1.625rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.ww-korb-summe-hinweis {
    margin-top: 6px;
    font-size: 0.75rem;
    text-align: right;      /* buendig mit dem Betrag darueber */
    color: var(--ww-muted);
}

.ww-korb-kasse {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    border: none;
    font-size: 0.9375rem;
    cursor: pointer;
}

@media (max-width: 860px) {
    .ww-korb-abschluss { grid-template-columns: 1fr; }
    /* Zusammenfassung zuerst - sie traegt die Entscheidung */
    .ww-korb-summe { order: -1; }
}

/* ---------- Warenkorb: der leere Zustand ---------- */

/* Volle Breite wie der Kopf darueber - ein schmalerer Kasten
   waere sonst gegenueber dem Kopf abgesetzt. */
.ww-korb-leer {
    margin: 30px 0 50px;
    padding: 50px 40px 40px;
    text-align: center;
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    box-shadow: var(--ww-shadow-soft);
}

.ww-korb-leer-symbol {
    width: 66px;
    height: 66px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: var(--ww-tint);
    color: var(--ww-accent);
    font-size: 1.5rem;
}

.ww-korb-leer h2 { font-size: 1.5rem; margin-bottom: 10px; }

.ww-korb-leer > p {
    max-width: 480px;
    margin: 0 auto 30px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ww-muted);
}

/* Drei Vorschlaege statt einer Sackgasse */
.ww-korb-leer-tipps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
    text-align: left;
}

.ww-korb-leer-tipps a {
    display: block;
    padding: 18px;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ww-korb-leer-tipps a:hover {
    border-color: var(--ww-tint-border);
    transform: translateY(-3px);
    box-shadow: var(--ww-shadow-soft);
}

.ww-korb-leer-tipps i {
    display: block;
    margin-bottom: 10px;
    color: var(--ww-accent);
    font-size: 1rem;
}

.ww-korb-leer-tipps span {
    display: block;
    margin-bottom: 3px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--ww-ink);
}

.ww-korb-leer-tipps small {
    display: block;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ww-muted);
}

@media (max-width: 620px) {
    .ww-korb-leer { padding: 36px 22px 30px; }
    .ww-korb-leer-tipps { grid-template-columns: 1fr; }
}

/* ============================================================
   v6.6: Fortschritt im Bestellprozess
   Bewusst schlank gehalten. Der Nutzen liegt darin zu zeigen, dass
   es nur wenige Schritte sind - eine breite Leiste mit dicken Kreisen
   liesse den Vorgang umstaendlicher wirken, als er ist.

   Beim Scrollen dockt die Leiste unter der Kopfzeile an und der
   aktuelle Balken fuellt sich mit dem Lesefortschritt der Seite.
   ============================================================ */

.ww-fortschritt {
    position: sticky;
    top: 72px;                 /* genau unter der klebenden Kopfzeile */
    z-index: 500;              /* unter der Kopfzeile (900), ueber dem Inhalt */
    margin: 26px 0 4px;
    padding: 14px 0 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Der weiche Rand nach unten trennt die Leiste vom durchlaufenden
   Inhalt, ohne einen harten Strich zu ziehen. */
.ww-fortschritt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.ww-fortschritt-schritte {
    display: flex;
    gap: 10px;
}

.ww-fortschritt-schritt {
    flex: 1 1 0;
    min-width: 0;
}

/* Die Rinne, in der sich die Fuellung bewegt */
.ww-fortschritt-balken {
    position: relative;
    height: 3px;
    border-radius: 2px;
    background: var(--ww-border);
    overflow: hidden;
}

.ww-fortschritt-fuellung {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 2px;
    background: var(--ww-grad);
}

/* Bereits abgeschlossene Schritte stehen voll */
.ww-fortschritt-schritt.ist-erledigt .ww-fortschritt-fuellung {
    width: 100%;
    background: var(--ww-accent);
}

.ww-fortschritt-name {
    display: block;
    margin-top: 9px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ww-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ww-fortschritt-schritt.ist-aktuell .ww-fortschritt-name { color: var(--ww-accent-deep); }
.ww-fortschritt-schritt.ist-erledigt .ww-fortschritt-name { color: var(--ww-ink-soft); }

/* Auf dem Handy nur der aktuelle Schritt - drei Beschriftungen
   nebeneinander waeren dort nicht mehr lesbar. */
@media (max-width: 560px) {
    .ww-fortschritt { top: 64px; }
    .ww-fortschritt-schritt .ww-fortschritt-name { display: none; }
    .ww-fortschritt-schritt.ist-aktuell .ww-fortschritt-name { display: block; }
}

/* ============================================================
   v6.7: Checkout
   Links die Eingaben, rechts die Bestellung als mitlaufende
   Uebersicht. Wer seine Daten eintippt, sieht dabei durchgehend,
   was er kauft und was es kostet.
   ============================================================ */

.ww-kasse-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 26px;
    align-items: start;
    margin: 26px 0 44px;
}

.ww-kasse-block {
    background: #FFFFFF;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius);
    box-shadow: var(--ww-shadow-soft);
    padding: 26px 28px;
    margin-bottom: 20px;
}

.ww-kasse-block:last-child { margin-bottom: 0; }

.ww-kasse-block-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

/* Nummer des Abschnitts - macht die Reihenfolge sichtbar */
.ww-kasse-nummer {
    flex: 0 0 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--ww-grad);
    box-shadow: var(--ww-shadow-accent);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 800;
}

.ww-kasse-block-kopf h2 { font-size: 1.0625rem; margin: 0; }

/* Adressfelder nebeneinander, wo es passt */
.ww-kasse-felder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ww-kasse-feld { display: flex; flex-direction: column; }
.ww-kasse-feld--breit { grid-column: 1 / -1; }

.ww-kasse-feld label {
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ww-ink-soft);
}

.ww-kasse-feld input { margin: 0; }

/* ---------- Zahlungsart ---------- */

.ww-kasse-zahlung { display: flex; flex-direction: column; gap: 12px; }

.ww-kasse-zahlung label { cursor: pointer; }

.ww-kasse-zahlung input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ww-kasse-zahlart {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1.5px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.ww-kasse-zahlart:hover { border-color: var(--ww-border-strong); }

.ww-kasse-zahlart.is-selected {
    border-color: var(--ww-accent);
    background: var(--ww-tint);
}

/* Eigener Auswahlpunkt statt des Systemknopfs */
.ww-kasse-punkt {
    flex: 0 0 20px;
    height: 20px;
    border: 2px solid var(--ww-border-strong);
    border-radius: 50%;
    position: relative;
    transition: border-color 0.18s ease;
}

.ww-kasse-zahlart.is-selected .ww-kasse-punkt { border-color: var(--ww-accent); }

.ww-kasse-zahlart.is-selected .ww-kasse-punkt::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--ww-grad);
}

.ww-kasse-zahlart-text { flex: 1 1 auto; }
.ww-kasse-zahlart-text b { display: block; font-size: 0.9375rem; color: var(--ww-ink); }
.ww-kasse-zahlart-text span { font-size: 0.8125rem; color: var(--ww-muted); }
.ww-kasse-zahlart > i { font-size: 1.25rem; color: var(--ww-muted); }
.ww-kasse-zahlart.is-selected > i { color: var(--ww-accent); }

/* ---------- Rechtliches ---------- */

.ww-kasse-haken {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ww-ink-soft);
}

.ww-kasse-haken + .ww-kasse-haken { border-top: 1px solid var(--ww-border); }
.ww-kasse-haken input { flex: 0 0 auto; margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ww-accent); }

/* ---------- Bestelluebersicht rechts ---------- */

.ww-kasse-uebersicht {
    position: sticky;
    top: 96px;              /* unter Kopfzeile und Fortschrittsleiste */
    background: #FFFFFF;
    border: 1.5px solid var(--ww-tint-border);
    border-radius: var(--ww-radius);
    box-shadow: var(--ww-shadow);
    padding: 24px;
}

.ww-kasse-posten {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ww-border);
}

.ww-kasse-posten:last-of-type { border-bottom: none; }

.ww-kasse-posten-name { font-size: 0.875rem; font-weight: 700; color: var(--ww-ink); }
.ww-kasse-posten-info { display: block; margin-top: 3px; font-size: 0.75rem; font-weight: 500; color: var(--ww-muted); }
.ww-kasse-posten-preis { font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }

.ww-kasse-abschluss {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    border: none;
    font-size: 0.9375rem;
    cursor: pointer;
}

/* Solange die Haken fehlen, ist der Knopf sichtbar gesperrt */
.ww-kasse-abschluss:disabled {
    background: var(--ww-border);
    box-shadow: none;
    color: var(--ww-muted);
    cursor: not-allowed;
}

.ww-kasse-sperrhinweis {
    margin-top: 10px;
    font-size: 0.75rem;
    text-align: center;
    color: var(--ww-muted);
}

@media (max-width: 900px) {
    .ww-kasse-layout { grid-template-columns: 1fr; }
    .ww-kasse-uebersicht { position: static; }
}

@media (max-width: 560px) {
    .ww-kasse-felder { grid-template-columns: 1fr; }
    .ww-kasse-block { padding: 22px 18px; }
}

/* ============================================================
   v6.8  Kampagnendaten in der Kasse
   Die Angaben stehen offen im Bestellprozess, nicht hinter
   einem Klick - geprueft wird nur, was man auch sieht. Die
   Lupe rechts springt zur passenden Position und hebt sie an.
   ============================================================ */

.ww-kasse-block-hinweis {
    margin: -4px 0 18px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ww-muted);
}

.ww-kasse-daten {
    border: 1px solid var(--ww-border);
    border-radius: 12px;
    padding: 14px 16px 6px;
    margin-bottom: 12px;
    background: #FCFCFD;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.ww-kasse-daten:last-of-type { margin-bottom: 0; }

.ww-kasse-daten-kopf {
    display: flex;
    /* mittig, nicht an der Grundlinie: der Titel ist zweizeilig,
       Link und Klapp-Pfeil sollen trotzdem auf einer Hoehe sitzen */
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    cursor: pointer;
    list-style: none;          /* Standardpfeil des Browsers weg */
    user-select: none;
}

.ww-kasse-daten-kopf::-webkit-details-marker { display: none; }

/* Die Trennlinie gehoert nur unter den aufgeklappten Kopf */
.ww-kasse-daten[open] > .ww-kasse-daten-kopf {
    border-bottom: 1px solid var(--ww-border);
}

.ww-kasse-daten:not([open]) { padding-bottom: 14px; }

.ww-kasse-daten:not([open]) > .ww-kasse-daten-kopf { padding-bottom: 0; }

.ww-kasse-daten-kopf strong { margin-right: auto; }

/* Pfeil rechts, dreht sich beim Aufklappen */
.ww-kasse-daten-pfeil {
    flex: none;
    align-self: center;
    font-size: 0.6875rem;
    color: var(--ww-muted);
    transition: transform .25s ease;
}

.ww-kasse-daten[open] .ww-kasse-daten-pfeil { transform: rotate(180deg); }

.ww-kasse-daten-kopf:hover .ww-kasse-daten-pfeil { color: var(--ww-accent); }

/* Hinweis im Kopf, wenn eine Pflichtangabe fehlt */
.ww-kasse-daten-luecke {
    flex: none;
    align-self: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(192, 57, 43, .09);
    font-size: 0.6875rem;
    font-weight: 600;
    color: #C0392B;
    white-space: nowrap;
}

.ww-kasse-daten-luecke i { margin-right: 5px; }

.ww-kasse-daten-kopf strong {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ww-ink);
}

.ww-kasse-daten-kopf strong span {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ww-muted);
}

.ww-kasse-aendern {
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ww-accent);
    text-decoration: none;
    white-space: nowrap;
}

.ww-kasse-aendern:hover { text-decoration: underline; }
.ww-kasse-aendern i { margin-right: 5px; font-size: 0.6875rem; }

.ww-kasse-daten-liste { margin: 0; }

.ww-kasse-daten-liste > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .045);
}

.ww-kasse-daten-liste > div:last-child { border-bottom: none; }

.ww-kasse-daten-liste dt {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ww-muted);
}

.ww-kasse-daten-liste dd {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ww-ink);
    /* Lange Ziel-URLs duerfen umbrechen, statt die Spalte zu sprengen */
    overflow-wrap: anywhere;
}

.ww-kasse-daten-liste dd.ist-leer {
    font-style: italic;
    font-weight: 500;
    color: #C0392B;
}

.ww-kasse-daten-leer {
    margin: 10px 0;
    font-size: 0.8125rem;
    color: var(--ww-muted);
}

.ww-kasse-daten-leer i { margin-right: 7px; color: var(--ww-accent); }

/* Lupe in der Bestelluebersicht */
.ww-kasse-lupe {
    flex: none;
    align-self: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(124, 58, 237, .08);
    color: var(--ww-accent);
    font-size: 0.75rem;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.ww-kasse-lupe:hover {
    background: rgba(124, 58, 237, .16);
    transform: scale(1.08);
}

/* Der angesprungene Block hebt sich kurz hervor */
@keyframes ww-daten-hervor {
    0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, .38); }
    100% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); }
}

.ww-kasse-daten.wird-gezeigt {
    border-color: var(--ww-accent);
    animation: ww-daten-hervor 1.1s ease-out;
}

@media (max-width: 560px) {
    .ww-kasse-daten-liste > div { grid-template-columns: 1fr; gap: 3px; }
}

/* Hinweis auf Rechtsseiten, wenn sie aus der Kasse in einem
   neuen Tab geoeffnet wurden - der Kunde soll wissen, dass
   seine Eingaben nebenan unangetastet stehen. */
.ww-neuer-tab {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 720px;
    margin: 26px auto 0;
    padding: 14px 18px;
    border: 1px solid rgba(124, 58, 237, .22);
    border-radius: 12px;
    background: rgba(124, 58, 237, .05);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ww-muted);
}

.ww-neuer-tab i { margin-top: 2px; color: var(--ww-accent); }

/* Symbol der Werbeform - dieselben Icons wie in der Uebersicht
   auf der Startseite, damit eine Position wiedererkannt wird. */
.ww-kasse-daten-symbol {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(124, 58, 237, .08);
    color: var(--ww-accent);
    font-size: 0.8125rem;
}

.ww-kasse-posten-symbol {
    margin-right: 8px;
    color: var(--ww-accent);
    font-size: 0.75rem;
}

/* Kampagnendaten: Felder, die eine ganze Zeile beanspruchen.
   Betreffzeile und Mailing-Text stehen dadurch untereinander
   in voller Breite, Ziel-URL und E-Mail teilen sich die Zeile. */
.ww-campaign-form-field--breit { grid-column: 1 / -1; }

.ww-campaign-form-field textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.55;
}

.ww-campaign-form-grid--zwei { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 560px) {
    .ww-campaign-form-grid--zwei { grid-template-columns: 1fr; }
}

/* Der Mailing-Text ist mehrzeilig eingegeben - in der Prüfansicht
   der Kasse sollen die Absätze erhalten bleiben. */
.ww-kasse-daten-liste dd { white-space: pre-wrap; }

/* Kampagnendaten: Feld mit unzulässiger Eingabe */
.ww-campaign-form-field.hat-fehler input,
.ww-campaign-form-field.hat-fehler textarea {
    border-color: #C0392B;
    background: #FEF7F6;
}

.ww-feld-fehler {
    margin: 6px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 600;
    color: #C0392B;
}

.ww-feld-fehler i { margin-right: 5px; }

/* ============================================================
   v6.9  Kundenbereich
   Bestellübersicht, Dashboard und Kampagnendetails teilen sich
   diese Bausteine: Kennzahlenband, Maßnahmen-Karte, Datenpaare.
   Tabellen weichen Karten - dieselbe Sprache wie im Warenkorb.
   ============================================================ */

/* ---------- Kennzahlenband unter dem Kopf ---------- */
.ww-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 26px 0;
}

.ww-kennzahl {
    padding: 18px 20px;
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    background: #FFFFFF;
    box-shadow: var(--ww-shadow-soft);
}

.ww-kennzahl-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ww-muted);
}

.ww-kennzahl-name i { color: var(--ww-accent); font-size: 0.75rem; }

.ww-kennzahl-wert {
    margin-top: 8px;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ww-ink);
}

.ww-kennzahl-zusatz {
    margin-top: 3px;
    font-size: 0.75rem;
    color: var(--ww-muted);
}

.ww-kennzahl--betont {
    border-color: var(--ww-tint-border);
    background: var(--ww-tint);
}

.ww-kennzahl--betont .ww-kennzahl-wert { color: var(--ww-accent-deep); }

/* ---------- Eine Werbemaßnahme als Karte ---------- */
.ww-massnahme {
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-sm);
    background: #FFFFFF;
    padding: 20px 22px;
    margin-bottom: 14px;
    box-shadow: var(--ww-shadow-soft);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ww-massnahme:hover {
    border-color: var(--ww-tint-border);
    box-shadow: var(--ww-shadow);
}

.ww-massnahme-kopf {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ww-border);
}

.ww-massnahme-symbol {
    flex: none;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(124, 58, 237, .08);
    color: var(--ww-accent);
    font-size: 0.9375rem;
}

.ww-massnahme-titel { flex: 1; min-width: 0; }

.ww-massnahme-titel h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ww-ink);
}

.ww-massnahme-titel span {
    display: block;
    margin-top: 3px;
    font-size: 0.8125rem;
    color: var(--ww-muted);
}

/* ---------- Eckdaten in Spalten ---------- */
.ww-massnahme-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
    padding: 16px 0;
}

.ww-faktum-name {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ww-muted);
}

.ww-faktum-wert {
    margin-top: 4px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ww-ink);
}

/* ---------- Aktionen am Fuß der Karte ---------- */
.ww-massnahme-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--ww-border);
}

.ww-massnahme-aktion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--ww-border-strong);
    background: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ww-ink);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.ww-massnahme-aktion:hover {
    border-color: var(--ww-accent);
    color: var(--ww-accent-deep);
    background: var(--ww-tint);
}

.ww-massnahme-aktion i { font-size: 0.75rem; color: var(--ww-accent); }

.ww-massnahme-aktion--aus {
    opacity: .45;
    pointer-events: none;
}

/* ---------- Datenpaare (Kunde, Rechnung, Werbedaten) ---------- */
.ww-datenpaare { margin: 0; }

.ww-datenpaare > div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ww-border);
}

.ww-datenpaare > div:last-child { border-bottom: none; }

.ww-datenpaare dt {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ww-muted);
}

.ww-datenpaare dd {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ww-ink);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.ww-datenpaare dd a { color: var(--ww-accent-deep); }

/* ---------- Abschnittsüberschrift im Kundenbereich ---------- */
.ww-kunde-titel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 34px 0 16px;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--ww-ink);
}

.ww-kunde-titel i { color: var(--ww-accent); font-size: 0.9375rem; }

.ww-kunde-titel span {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ww-muted);
}

@media (max-width: 620px) {
    .ww-datenpaare > div { grid-template-columns: 1fr; gap: 3px; }
    .ww-massnahme { padding: 16px; }
}

/* Im Kundenbereich darf die Erfolgskarte die volle Breite nutzen -
   neben dem Kennzahlenband wirkte die 760px-Fassung eingerückt. */
.ww-erfolg-karte--breit { max-width: none; }

/* Preisreihe ohne umgebende Karte: die einzelnen Felder stehen
   für sich, ein zweiter Rahmen drumherum wirkt doppelt gemoppelt. */
.ww-preisreihe {
    margin-bottom: 26px;
}

.ww-preisreihe .ww-price-grid { margin: 0; }

/* Auf schmalen Bildschirmen läuft der Kopftext über die volle Breite -
   der seitliche Verlauf deckt dann rechts zu wenig ab und das Bild
   scheint durch die Schrift. Dort deshalb von oben nach unten
   aufhellen: oben steht der Text, unten darf das Bild durchkommen. */
@media (max-width: 700px) {
    .ww-bildgrund::after {
        background: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.95) 0%,
                    rgba(255, 255, 255, 0.92) 60%,
                    rgba(255, 255, 255, 0.74) 100%);
    }
}

/* Das seitliche Hereingleiten braucht 46 px Platz neben dem Inhalt.
   Auf schmalen Bildschirmen gibt es die nicht - die noch nicht
   eingeblendeten Elemente ragten über den Rand und die ganze Seite
   liess sich seitlich schieben. Dort deshalb von unten einblenden. */
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
    [data-ww-reveal="left"],
    [data-ww-reveal="right"] { transform: translateY(28px); }
}

/* Safari auf dem iPhone zoomt beim Antippen automatisch hinein,
   wenn ein Eingabefeld kleiner als 16 px schreibt - beim Ausfüllen
   der Rechnungsdaten springt dann die ganze Seite. Auf schmalen
   Bildschirmen deshalb 16 px, die Feldhöhe bleibt gleich. */
@media (max-width: 700px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* ============================================================
   PROTOTYP  Dunkles Erscheinungsbild
   ============================================================
   Umgeschaltet über data-theme="dark" am <html>-Element. Der
   Schalter sitzt im Kopf neben "Jetzt starten", die Wahl merkt
   sich der Browser (localStorage).

   Aufbau in drei Teilen:
     1. Die 26 Farbvariablen bekommen dunkle Werte - damit sind
        rund 600 Stellen im Stylesheet abgedeckt.
     2. Die Stellen mit fest eingetragenem Weiß werden gezielt
        überschrieben. Bei einer endgültigen Fassung würde man
        stattdessen überall eine Variable einsetzen.
     3. Bilder werden leicht abgedunkelt, damit sie auf dunklem
        Grund nicht wie Leuchtkästen wirken.
   ============================================================ */

:root[data-theme="dark"] {
    --ww-bg:            #14141A;
    --ww-bg-soft:       #1B1B23;
    --ww-ink:           #ECECF2;
    --ww-ink-soft:      #C2C2CE;
    --ww-muted:         #9292A0;
    --ww-border:        #2B2B36;
    --ww-border-strong: #3A3A48;

    /* Violett etwas heller - sonst verliert es auf Dunkel an Kraft */
    --ww-accent:        #9061F9;
    --ww-accent-deep:   #A78BFA;
    --ww-accent-2:      #FFC155;

    --ww-tint:          #221C33;
    --ww-tint-border:   #3B2F5C;

    --ww-dark:          #0F0F14;
    --ww-dark-2:        #1B1B23;
    --ww-dark-border:   #33333E;

    --ww-green:         #35C88A;
    --ww-red:           #FF6B6E;
    --ww-blue:          #5B9CF8;

    --ww-shadow:        0 16px 40px rgba(0, 0, 0, 0.45);
    --ww-shadow-soft:   0 6px 18px rgba(0, 0, 0, 0.30);
}

/* ---------- 2. Flächen, die fest auf Weiß stehen ---------- */
:root[data-theme="dark"] body { background: var(--ww-bg); color: var(--ww-ink); }

:root[data-theme="dark"] .ww-header,
:root[data-theme="dark"] .ww-card,
:root[data-theme="dark"] .ww-korb-position,
:root[data-theme="dark"] .ww-korb-gutschein,
:root[data-theme="dark"] .ww-korb-summe,
:root[data-theme="dark"] .ww-korb-leer,
:root[data-theme="dark"] .ww-kennzahl,
:root[data-theme="dark"] .ww-massnahme,
:root[data-theme="dark"] .ww-format-card,
:root[data-theme="dark"] .ww-price-card,
:root[data-theme="dark"] .ww-notice,
:root[data-theme="dark"] .ww-erfolg-karte,
:root[data-theme="dark"] .ww-login-card,
:root[data-theme="dark"] .ww-slide-card,
:root[data-theme="dark"] .ww-kasse-block,
:root[data-theme="dark"] .ww-kasse-uebersicht,
:root[data-theme="dark"] .ww-dropdown {
    background: var(--ww-bg-soft);
    border-color: var(--ww-border);
}

:root[data-theme="dark"] .ww-kasse-daten,
:root[data-theme="dark"] .ww-korb-felder {
    background: var(--ww-dark-2);
    border-color: var(--ww-border);
}

/* Eingabefelder */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: #101016;
    border-color: var(--ww-border-strong);
    color: var(--ww-ink);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #6B6B78; }

/* Zweitrangige Schaltflächen */
:root[data-theme="dark"] .ww-button-secondary,
:root[data-theme="dark"] .ww-massnahme-aktion {
    background: var(--ww-bg-soft);
    border-color: var(--ww-border-strong);
    color: var(--ww-ink);
}

/* Fortschrittsbalken.
   Deckend statt 92 % und ohne Weichzeichner: Die Kombination aus
   Teildurchsicht und backdrop-filter zeichnet an der Unterkante einen
   hellen Saum - in der hellen Fassung unsichtbar, auf Dunkel ein
   deutlicher grauer Streifen quer über die Seite. */
:root[data-theme="dark"] .ww-fortschritt {
    background: var(--ww-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--ww-border);
}
:root[data-theme="dark"] .ww-fortschritt-balken { background: var(--ww-border); }

/* Die Aufhellung über den Kopfbildern wird zur Abdunklung */
:root[data-theme="dark"] .ww-bildgrund::after {
    background: linear-gradient(100deg,
                rgba(20, 20, 26, 0.94) 40%,
                rgba(20, 20, 26, 0.70) 100%);
}

@media (max-width: 700px) {
    :root[data-theme="dark"] .ww-bildgrund::after {
        background: linear-gradient(180deg,
                    rgba(20, 20, 26, 0.94) 0%,
                    rgba(20, 20, 26, 0.90) 60%,
                    rgba(20, 20, 26, 0.72) 100%);
    }
}

/* Nachtrag aus dem ersten Durchgang: Diese Flächen standen noch auf
   Weiß - mit hellem Text darauf waren sie unlesbar. Beim Umstellen
   auf Dunkel ist genau das die Fleißarbeit. */
:root[data-theme="dark"] .ww-kopf,
:root[data-theme="dark"] .ww-product-pills span,
:root[data-theme="dark"] .ww-page-pills span,
:root[data-theme="dark"] .ww-cart-icon,
:root[data-theme="dark"] .ww-korb-daten span,
:root[data-theme="dark"] .ww-faq-item,
:root[data-theme="dark"] .ww-pricing-trust span,
:root[data-theme="dark"] .ww-price-package,
:root[data-theme="dark"] .ww-step,
:root[data-theme="dark"] .ww-summary-tile,
:root[data-theme="dark"] .ww-table-wrap,
:root[data-theme="dark"] .ww-paket-hinweis,
:root[data-theme="dark"] .ww-legal-block,
:root[data-theme="dark"] .ww-legal-nav {
    background: var(--ww-bg-soft);
    border-color: var(--ww-border);
    color: var(--ww-ink);
}

/* ---------- Restliche helle Flächen ----------
   Systematisch ermittelt: alle Regeln des Stylesheets, die eine helle
   Fläche fest eintragen. Nach Art gruppiert, damit die Tönungen ihren
   Charakter behalten - eine Fehlermeldung soll auch auf Dunkel rot
   wirken, nicht bloß grau. */

/* Neutrale Karten und Flächen */
:root[data-theme="dark"] .ww-cart-coupon,
:root[data-theme="dark"] .ww-compare-table,
:root[data-theme="dark"] .ww-example-plan,
:root[data-theme="dark"] .ww-example-stat,
:root[data-theme="dark"] .ww-faq-grid,
:root[data-theme="dark"] .ww-faq-thema,
:root[data-theme="dark"] .ww-feature-card,
:root[data-theme="dark"] .ww-kontakt-tipp,
:root[data-theme="dark"] .ww-korb-gutschein-zeile,
:root[data-theme="dark"] .ww-order-table,
:root[data-theme="dark"] .ww-payment-card,
:root[data-theme="dark"] .ww-stat-strip,
:root[data-theme="dark"] .ww-mini,
:root[data-theme="dark"] .ww-seg {
    background: var(--ww-bg-soft);
    border-color: var(--ww-border);
    color: var(--ww-ink);
}

/* Bedienelemente im Kopf und am Slider */
:root[data-theme="dark"] .ww-main-nav,
:root[data-theme="dark"] .ww-menu-toggle,
:root[data-theme="dark"] .ww-slider-btn,
:root[data-theme="dark"] .ww-korb-weg,
:root[data-theme="dark"] .ww-mockup-bar {
    background: var(--ww-bg-soft);
    border-color: var(--ww-border-strong);
    color: var(--ww-ink);
}

/* Tabellenzeilen und -köpfe */
:root[data-theme="dark"] .ww-order-table th,
:root[data-theme="dark"] .ww-order-table td {
    border-color: var(--ww-border);
    color: var(--ww-ink);
}
:root[data-theme="dark"] .ww-order-table thead th { background: var(--ww-dark-2); }

/* Meldungen: Tönung dunkel, Schrift hell genug zum Lesen */
:root[data-theme="dark"] .ww-notice--error,
:root[data-theme="dark"] .ww-compare-card--bad,
:root[data-theme="dark"] .ww-campaign-form-field.hat-fehler input,
:root[data-theme="dark"] .ww-campaign-form-field.hat-fehler textarea {
    background: #2A1618;
    border-color: rgba(255, 107, 110, 0.45);
    color: var(--ww-red);
}

:root[data-theme="dark"] .ww-notice--success {
    background: #12261D;
    border-color: rgba(53, 200, 138, 0.45);
    color: var(--ww-green);
}

/* Hervorgehobene Karten: violetter Verlauf statt Verlauf nach Weiß */
:root[data-theme="dark"] .ww-compare-card--good,
:root[data-theme="dark"] .ww-price-package--featured,
:root[data-theme="dark"] .ww-payment-card.is-selected,
:root[data-theme="dark"] .ww-price-card--total,
:root[data-theme="dark"] .ww-kasse-zahlart.is-selected {
    background: linear-gradient(180deg, var(--ww-tint), var(--ww-bg-soft) 70%);
    border-color: var(--ww-accent);
    color: var(--ww-ink);
}

/* Der dunkle Abschlussblock ist schon dunkel - er braucht auf dunklem
   Grund nur etwas Abgrenzung, sonst verschwimmt er mit der Seite. */
:root[data-theme="dark"] .ww-final-cta {
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius);
}

/* Bildunterschriften liegen auf dem Bild und waren weiß hinterlegt */
:root[data-theme="dark"] .ww-hero-bild figcaption,
:root[data-theme="dark"] figure figcaption {
    background: rgba(20, 20, 26, 0.88);
    border-color: var(--ww-border);
    color: var(--ww-ink);
}

/* Raster-Container tragen keine eigene Fläche - sonst heben sich die
   Kacheln darin nicht mehr ab. Auf der Fehlerseite sah der ganze
   Bereich dadurch aus wie ein einziger Block. */
:root[data-theme="dark"] .ww-faq-weiter,
:root[data-theme="dark"] .ww-faq-grid,
:root[data-theme="dark"] .ww-kennzahlen,
:root[data-theme="dark"] .ww-preisreihe {
    background: transparent;
}

/* Pseudo-Elemente. Die sind beim Umstellen der leichteste blinde
   Fleck: Sie tauchen im Seitenaufbau nicht als eigenes Element auf
   und lassen sich nur im Stylesheet finden.

   Der weiche Übergang unter der Fortschrittsleiste war weiß und
   zeichnete auf Dunkel einen grauen Streifen quer über die Seite. */
:root[data-theme="dark"] .ww-fortschritt::after {
    background: linear-gradient(180deg, rgba(20, 20, 26, 0.9), rgba(20, 20, 26, 0));
}

:root[data-theme="dark"] .ww-legal-nav a.ww-aktiv::before {
    background: var(--ww-accent);
}

/* Schaltflächen in Eingabezeilen (Gutschein anwenden) */
:root[data-theme="dark"] .ww-cart-coupon button,
:root[data-theme="dark"] .ww-korb-gutschein-zeile button,
:root[data-theme="dark"] .ww-korb-gutschein button {
    background: var(--ww-bg-soft);
    border-color: var(--ww-border-strong);
    color: var(--ww-ink);
}

/* Beim Überfahren dasselbe Verhalten wie in der hellen Fassung:
   violetter Rand, violette Schrift, leicht getönte Fläche. */
:root[data-theme="dark"] .ww-cart-coupon button:hover,
:root[data-theme="dark"] .ww-korb-gutschein-zeile button:hover,
:root[data-theme="dark"] .ww-korb-gutschein button:hover {
    border-color: var(--ww-accent);
    color: var(--ww-accent-deep);
    background: var(--ww-tint);
}

/* Beim Durchgehen aller Seiten gefunden */
:root[data-theme="dark"] .ww-faq-weiter a,
:root[data-theme="dark"] .ww-legal-anbieter,
:root[data-theme="dark"] .ww-legal-quote,
:root[data-theme="dark"] .ww-legal-note {
    background: var(--ww-bg-soft);
    border-color: var(--ww-border);
    color: var(--ww-ink);
}

/* ---------- 3. Bilder dämpfen ---------- */
:root[data-theme="dark"] .ww-hero-bild img,
:root[data-theme="dark"] .ww-bildgrund img,
:root[data-theme="dark"] .ww-format-card img {
    filter: brightness(0.78) contrast(1.04);
}

/* Die Firmendaten-Grafik im Impressum ist eine helle Fläche mit
   dunkler Schrift - sie darf nicht so stark gedämpft werden wie die
   Motive, sonst leidet die Lesbarkeit. Nur leicht zurücknehmen. */
:root[data-theme="dark"] .ww-legal-anbieter img,
:root[data-theme="dark"] img[src*="firmendaten"] {
    filter: brightness(0.90);
    border-radius: var(--ww-radius-sm);
}

/* ---------- Der Schalter im Kopf ---------- */
.ww-theme-schalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    border: 1.5px solid var(--ww-border-strong);
    border-radius: 12px;
    background: transparent;
    color: var(--ww-ink);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.ww-theme-schalter:hover {
    border-color: var(--ww-accent);
    color: var(--ww-accent);
    background: var(--ww-tint);
}

/* Sonne bei Dunkel, Mond bei Hell - gezeigt wird, wohin es geht */
.ww-theme-schalter .fa-sun { display: none; }
:root[data-theme="dark"] .ww-theme-schalter .fa-sun { display: inline; }
:root[data-theme="dark"] .ww-theme-schalter .fa-moon { display: none; }

/* ============================================================
   Nachtrag: Startseite auf schmalen Bildschirmen
   ------------------------------------------------------------
   Nicht Teil des dunklen Erscheinungsbildes - beim Durchgehen
   gefunden und betrifft beide Fassungen gleichermaßen.

   Das Kampagnen-Mockby im Kopf war 405 px breit, obwohl seine
   Spalte nur 335 px hergibt: Rasterfelder dürfen von Haus aus
   nicht schmaler werden als ihr Inhalt (min-width: auto). Die
   Seite ließ sich dadurch seitlich schieben.
   ============================================================ */
@media (max-width: 700px) {
    .ww-hero-grid > *,
    .ww-mockup,
    .ww-mockup-body,
    .ww-mockup-bar {
        min-width: 0;
        max-width: 100%;
    }

    /* Die beiden Kennzahlen im Mockup untereinander statt nebeneinander */
    .ww-mockup-stats { grid-template-columns: 1fr; }

    /* Die Adresszeile darf kürzen statt zu drängeln */
    .ww-mockup-url {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================================
   Menü „Werbung buchen" in zwei Spalten
   ------------------------------------------------------------
   Mit dreizehn Einträgen wurde die Liste auf kleineren Bildschirmen
   länger als das Fenster und musste gescrollt werden. Die
   BannerViews-Formate stehen jetzt in einer zweiten Spalte daneben;
   der Umbruch wird an ihrer Überschrift erzwungen.
   ============================================================ */
.ww-dropdown--zwei {
    columns: 2;
    column-gap: 26px;
    width: 520px;
    max-width: calc(100vw - 40px);
}

.ww-dropdown--zwei li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Hier beginnt die zweite Spalte */
.ww-dropdown--zwei .ww-dropdown-spalte {
    break-before: column;
    -webkit-column-break-before: always;
    margin-top: 0;
}

/* Die Überschrift der zweiten Spalte ist zugleich ein Link auf die
   Übersicht aller Bannerformate - sie soll aber aussehen wie die
   anderen Überschriften, nicht wie ein Menüeintrag. Deshalb erbt sie
   Größe, Stärke, Laufweite und Farbe vom Gruppentitel und bringt
   keinen eigenen Innenabstand mit. */
.ww-dropdown li.ww-dropdown-group a {
    display: inline;
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    text-decoration: none;
}

.ww-dropdown li.ww-dropdown-group a:hover {
    color: var(--ww-accent);
    background: none;
    text-decoration: underline;
}

/* Auf schmalen Bildschirmen bleibt es einspaltig - dort klappt das
   Menü ohnehin als Liste auf. */
@media (max-width: 900px) {
    .ww-dropdown--zwei { columns: 1; width: auto; }
    .ww-dropdown--zwei .ww-dropdown-spalte {
        break-before: auto;
        -webkit-column-break-before: auto;
    }
}

/* Kleiner Hinweis unter dem Anmeldeformular ("Nur eine Bestellung?") */
.ww-login-hinweis {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ww-muted);
}

.ww-login-hinweis a {
    color: var(--ww-accent-deep);
    font-weight: 600;
}