:root { --orange: #E0702A; --orange-dark: #C65F1F; }

/* Hintergrund kommt aus fon2go.css (dunkles Farbbild). Marketing nutzt Glas darüber. */
.mkt-shell { min-height: 100vh; display: flex; flex-direction: column; color: #f2f2f4; }

/* ---- Navbar ---- */
.mkt-nav {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 24px;
    padding: 12px clamp(16px, 4vw, 48px);
    background: rgba(255,255,255,0.60);
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(255,255,255,0.35);
}
.mkt-brand img { height: 40px; display: block; }
.mkt-links { display: flex; gap: 22px; margin-left: 12px; }
.mkt-links a { color: #2a2a2a; text-decoration: none; font-weight: 500; }
.mkt-links a:hover { color: var(--orange-dark); }
.mkt-cta { margin-left: auto; display: flex; gap: 10px; }

/* ---- Buttons ---- */
.btn { display: inline-block; padding: 10px 20px; border-radius: 10px; font-weight: 600;
       text-decoration: none; cursor: pointer; font-size: .95rem; transition: all .15s; border: 1px solid transparent; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-ghost { background: rgba(255,255,255,.85); color: #2a2a2a; border-color: rgba(0,0,0,.08); }
.btn-ghost:hover { background: #fff; }

/* ---- Sections ---- */
.mkt-main { flex: 1; }
.hero { padding: clamp(48px, 9vw, 120px) clamp(16px, 4vw, 48px) 60px; text-align: center; }
.hero-inner { max-width: 860px; margin: 0 auto; }
.badge { display:inline-block; padding:6px 14px; border-radius:999px; font-size:.8rem;
         background: rgba(224,112,42,.18); color:#ffd9c2; border:1px solid rgba(224,112,42,.4); }
.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; margin: 22px 0 16px; color:#fff;
           text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.85); margin: 0 auto 28px; max-width: 680px; }
.hero-cta { display:flex; gap: 14px; justify-content:center; flex-wrap: wrap; }
.hero-stats { display:flex; gap: 40px; justify-content:center; flex-wrap: wrap; margin-top: 48px; }
.hero-stats div { display:flex; flex-direction:column; }
.hero-stats b { font-size: 2rem; color:#fff; }
.hero-stats span { color: rgba(255,255,255,.7); font-size:.9rem; }

.band { max-width: 1120px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 48px) 70px; }
.band h2 { text-align:center; color:#fff; font-size: clamp(1.6rem,3vw,2.4rem); margin: 10px 0 36px; text-shadow: 0 2px 16px rgba(0,0,0,.4); }

.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; }
.card { background: rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.6); border-radius: 18px;
        padding: 26px; box-shadow: 0 16px 40px rgba(0,0,0,.25); color:#222; }
.card .ico { font-size: 1.9rem; }
.card h3 { margin: 12px 0 8px; font-size: 1.15rem; }
.card p { margin: 0; color:#555; line-height:1.55; font-size:.96rem; }

.page-head { text-align:center; padding: clamp(40px,7vw,90px) 16px 10px; }
.page-head h1 { color:#fff; font-size: clamp(2rem,5vw,3rem); margin:0 0 10px; text-shadow:0 2px 16px rgba(0,0,0,.4); }

/* ---- Pricing ---- */
.pricing { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; align-items: stretch; }
.price { position:relative; background: rgba(255,255,255,.92); border-radius: 20px; padding: 30px;
         box-shadow: 0 16px 40px rgba(0,0,0,.25); color:#222; display:flex; flex-direction:column; }
.price.featured { border: 2px solid var(--orange); transform: translateY(-6px); }
.price .tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%);
              background: var(--orange); color:#fff; padding:4px 14px; border-radius:999px; font-size:.8rem; font-weight:600; }
.price h3 { margin:0 0 8px; font-size:1.3rem; }
.price .amount { font-size:1.9rem; font-weight:700; color: var(--orange-dark); margin-bottom: 16px; }
.price .amount span { display:block; font-size:.85rem; color:#777; font-weight:400; }
.price ul { list-style:none; padding:0; margin:0 0 22px; }
.price li { padding:7px 0 7px 26px; position:relative; color:#444; border-bottom:1px solid #f0eae6; }
.price li::before { content:"✓"; position:absolute; left:0; color: var(--orange); font-weight:700; }
.price .btn { margin-top:auto; text-align:center; }
.fineprint { text-align:center; color: rgba(255,255,255,.6); margin-top: 26px; font-size:.85rem; }

/* ---- Contact ---- */
.contact { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 22px; }
.contact-card { background: rgba(255,255,255,.92); border-radius: 20px; padding: 30px; color:#222;
                box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.contact-card h3 { margin:0 0 12px; }
.contact-card .btn { margin: 8px 8px 0 0; }
.contact-card a { color: var(--orange-dark); }

/* ---- CTA-Band ---- */
.ctaband { text-align:center; padding: 60px 16px 80px; }
.ctaband h2 { color:#fff; font-size: clamp(1.6rem,3vw,2.2rem); margin:0 0 10px; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.ctaband p { color: rgba(255,255,255,.8); margin:0 0 24px; }

/* ---- Footer ---- */
.mkt-foot { background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255,255,255,.1); }
.mkt-foot-inner { max-width: 1120px; margin:0 auto; padding: 30px clamp(16px,4vw,48px);
                  display:flex; justify-content:space-between; gap: 24px; flex-wrap: wrap; color: rgba(255,255,255,.75); font-size:.9rem; }
.mkt-foot-links { display:flex; gap: 18px; flex-wrap: wrap; align-items:center; }
.mkt-foot-links a { color: rgba(255,255,255,.8); text-decoration:none; }
.mkt-foot-links a:hover { color:#fff; }

/* Fokus-Ring auf Überschriften (durch FocusOnNavigate) nicht sichtbar machen */
h1:focus, h1:focus-visible, .hero h1:focus { outline: none; }