/* ============================================================
   marketingmarco.com — Design «Fusion» (immersiv + kraftvoll)
   Dunkler Navy-Look, Violett-CTAs, Teal-Akzente.
   Bewusst einheitlicher (dunkler) Auftritt; alle Farben explizit.
   ============================================================ */
:root{
  --navy:#143349;
  --navy-deep:#0e2637;
  --navy-soft:#1c4661;
  --violet:#a12fc9;
  --violet-2:#8a26b0;
  --teal:#18b89a;
  --teal-2:#7ff0d8;
  --teal-band:#1fc9a3;
  --gold:#f4b52e;
  --fg:#e8eef2;
  --fg-muted:#a9bfcc;
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.05);
  --grad:linear-gradient(125deg,#a12fc9,#7b2fb8 45%,#18b89a);
  --maxw:1140px;
  --measure:68ch;
  --shadow:0 22px 46px -22px rgba(0,0,0,.6);
  --sans:Figtree,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:Montserrat,var(--sans);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--navy-deep);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
a{color:var(--teal-2)}
:focus-visible{outline:2px solid var(--teal-2);outline-offset:2px;border-radius:4px}

.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;font-weight:700;color:var(--teal-2)}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-family:var(--display);
  border-radius:8px;padding:.8rem 1.6rem;cursor:pointer;border:0;transition:.18s}
.btn-violet{background:var(--violet);color:#fff;box-shadow:0 12px 26px -14px var(--violet)}
.btn-violet:hover{background:var(--violet-2)}
.btn-ghost{border:1.6px solid var(--line);color:#fff;background:transparent}
.btn-ghost:hover{border-color:var(--teal-2)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:.9rem clamp(1.1rem,5vw,3.2rem);
  background:rgba(14,38,55,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.01em}
.hexmark{width:34px;height:34px;flex:none}
.site-header nav{margin-left:auto;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.site-header nav a{text-decoration:none;color:var(--fg-muted);font-weight:600;font-size:.92rem}
.site-header nav a:hover{color:#fff}
.site-header nav .pill{background:var(--grad);color:#fff;padding:.5rem 1.05rem;border-radius:999px;font-size:.85rem}
.site-header nav .pill:hover{color:#fff;opacity:.92}

/* ---------- Content wrapper ---------- */
.content{max-width:var(--maxw);margin:0 auto;padding:clamp(1.6rem,4vw,3rem) clamp(1.1rem,5vw,3.2rem) 3.5rem}

/* Article typography (Blogposts & Seiten) */
.content article{max-width:var(--measure)}
.content article.wide{max-width:none}
.content h1{font-size:clamp(2rem,5vw,3rem);font-weight:900;margin:.2rem 0 .6rem;color:#fff}
.content h2{font-size:clamp(1.4rem,3.5vw,1.9rem);font-weight:800;margin:2.2rem 0 .8rem;color:#fff}
.content h3{font-size:1.2rem;font-weight:700;margin:1.6rem 0 .5rem;color:#fff}
.content p,.content li{color:#cddae3}
.content p{margin:0 0 1.1rem}
.content ul,.content ol{margin:0 0 1.1rem;padding-left:1.3rem}
.content li{margin:.35rem 0}
.content li::marker{color:var(--teal-2)}
.content a{color:var(--teal-2);text-underline-offset:2px}
.content img{border-radius:12px;margin:1.2rem 0;border:1px solid var(--line)}
.content blockquote{margin:1.4rem 0;padding:.6rem 0 .6rem 1.2rem;border-left:3px solid var(--violet);
  color:#dbe6ee;font-style:italic}
.content strong{color:#fff}
.content hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.content code{background:rgba(255,255,255,.08);padding:.1rem .4rem;border-radius:5px;font-size:.9em}
.content pre{background:#0a1a26;border:1px solid var(--line);border-radius:10px;padding:1rem;overflow-x:auto}
.post-meta{color:var(--fg-muted);font-size:.9rem;font-family:var(--display);font-weight:600}

/* generische Sections */
.section{padding-block:clamp(2.4rem,6vw,3.8rem)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(1.1rem,5vw,3.2rem)}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(900px 500px at 78% 0%,rgba(161,47,201,.28),transparent 60%),
    radial-gradient(700px 500px at 0% 100%,rgba(24,184,154,.22),transparent 55%),
    var(--navy-deep);
}
.hero .hero-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:2.4rem;
  align-items:center;padding:clamp(2.6rem,6vw,4.4rem) clamp(1.1rem,5vw,3.2rem)}
.hero .tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.35rem 1rem;
  font-size:.78rem;color:var(--fg-muted);margin-bottom:1.2rem}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:900;margin:0;
  background:linear-gradient(100deg,#fff 35%,#e9b6ff 62%,var(--teal-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:var(--fg-muted);font-size:1.12rem;margin:1rem 0 1.6rem;max-width:46ch}
.hero .lead b{color:var(--teal-2);font-weight:700}
.hero .cta{display:flex;gap:.7rem;flex-wrap:wrap}

/* Screenshot-Stapel (Platzhalter, bis echte Bilder da sind) */
.stack{position:relative;height:clamp(230px,30vw,320px)}
.stack .card{position:absolute;border-radius:10px;box-shadow:0 22px 46px -20px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.12);overflow:hidden}
.stack .doc{background:#fff;width:46%;padding:13px}
.stack .doc .ln{height:6px;border-radius:4px;background:#e9edf1;margin:7px 0}
.stack .doc .ln.s{width:70%}.stack .doc .ln.t{width:40%;background:var(--violet);opacity:.5}
.stack .yt{width:52%;aspect-ratio:16/10;background:linear-gradient(135deg,#22303b,#0e1a22);display:grid;place-items:center}
.stack .yt::after{content:"";border-left:18px solid #ff5a5f;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.stack .c1{left:0;top:8%;transform:rotate(-7deg)}
.stack .c2{left:20%;top:26%;z-index:3}
.stack .c3{right:2%;top:0;transform:rotate(6deg);z-index:2}
.stack .c4{right:8%;bottom:0;transform:rotate(-3deg);width:40%}

/* ---------- Kundenlogos ---------- */
.clients{background:var(--navy)}
.clients .row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;min-height:112px;
  display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:1.35rem;text-align:center;padding:1rem}

/* ---------- Über Marco ---------- */
.about-in{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.about-in h2{color:#fff;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;margin:.3rem 0 1rem}
.about-in p{color:var(--fg-muted);max-width:52ch}
.about-in ul{padding-left:1.1rem;color:var(--fg-muted)}
.about-in li{margin:.4rem 0}.about-in li::marker{color:var(--violet)}
.portrait{position:relative;aspect-ratio:1;max-width:340px;width:100%;margin-inline:auto}
.portrait .disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c04ae0,var(--violet) 70%)}
.portrait .ph{position:absolute;inset:8% 8% 0;border-radius:50% 50% 46% 46%;
  background:linear-gradient(180deg,#2a3f4d,#16232c);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.portrait .ph img{width:100%;height:100%;object-fit:cover;border:0;margin:0;border-radius:0}
.portrait .ph span{font-family:var(--display);font-weight:800;color:rgba(255,255,255,.22);font-size:3.4rem;margin-bottom:1rem}

/* ---------- Cards (Blog & Listen) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.18s}
.pcard:hover{transform:translateY(-3px);border-color:rgba(127,240,216,.4)}
.pcard .thumb{aspect-ratio:16/9;background:var(--grad)}
.pcard .body{padding:1.1rem 1.2rem 1.4rem}
.pcard .date{color:var(--teal-2);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-family:var(--display)}
.pcard h3{color:#fff;font-size:1.02rem;margin:.4rem 0 .3rem;line-height:1.3}
.pcard p{color:var(--fg-muted);font-size:.88rem;margin:0}

/* einfache Link-Liste (Blog-Index, Referenzen) */
.card-list{list-style:none;padding:0;margin:0;display:grid;gap:.2rem}
.card-list li{border-bottom:1px solid var(--line);padding:1rem 0}
.card-list a{color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.1rem}
.card-list a:hover{color:var(--teal-2)}

/* ---------- Testimonials ---------- */
.testi{background:var(--navy)}
.testi h2{color:#fff;text-align:center;font-size:clamp(1.5rem,4vw,2rem);margin:0 0 1.8rem}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.4rem;position:relative}
.tcard .qm{position:absolute;top:-13px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--violet);
  color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800}
.tcard .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#c04ae0,#18b89a);margin-bottom:.6rem}
.tcard blockquote{margin:0 0 .7rem;font-style:italic;font-size:.9rem;color:#dbe6ee}
.tcard .stars{color:var(--gold);letter-spacing:2px}
.tcard .nm{font-family:var(--display);font-weight:700;color:#fff;font-size:.9rem;margin-top:.6rem}
.tcard .rl{color:var(--fg-muted);font-size:.78rem}

/* ---------- Section-Überschrift zentriert ---------- */
.sec-head{text-align:center;margin-bottom:1.8rem}
.sec-head h2{color:#fff;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;margin:.3rem 0 0}

/* ---------- E-Mail-Band ---------- */
.optin{background:var(--teal-band)}
.optin-in{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vw,3rem) clamp(1.1rem,5vw,3.2rem);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.optin-in p{color:#08312a;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,2.4vw,1.35rem);max-width:60ch;margin:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);border-top:1px solid var(--line);text-align:center;
  padding:2.6rem clamp(1.1rem,5vw,3.2rem);display:flex;flex-direction:column;align-items:center;gap:1rem}
.site-footer .brand.foot{color:#fff}
.foot-nav{display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:center}
.foot-nav a{color:var(--fg-muted);text-decoration:none;font-size:.9rem;font-weight:600}
.foot-nav a:hover{color:#fff}
.foot-contact{color:var(--fg-muted);font-size:.85rem;margin:0;max-width:60ch;line-height:1.6}
.foot-contact a{color:var(--teal-2)}
.foot-social{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:.2rem 0 0}
.foot-social a{color:var(--fg-muted);text-decoration:none;font-weight:600;font-size:.85rem;font-family:var(--display)}
.foot-social a:hover{color:#fff}
.foot-legal{color:var(--fg-muted);font-size:.82rem;margin:0}
.foot-legal a{color:var(--fg-muted)}

/* ---------- Badge (Hinweise) ---------- */
.badge{display:inline-block;font-size:.72rem;background:rgba(161,47,201,.2);color:#e9b6ff;
  padding:.15rem .55rem;border-radius:6px;font-family:var(--display);font-weight:700}

@media (max-width:820px){
  .hero .hero-in,.about-in{grid-template-columns:1fr}
  .clients .row,.cards,.tgrid{grid-template-columns:1fr}
  .site-header nav{width:100%;justify-content:flex-start;gap:1rem}
  .portrait{order:-1;max-width:260px}
  .stack{max-width:360px;margin-inline:auto}
}
/* ============================================================
   Blogpost-Layout: Hero + Sticky-TOC + Autorenbox
   Dunkler Hero, heller Lesebereich (beste Lesbarkeit).
   ============================================================ */
.post-hero{
  background:
    radial-gradient(800px 400px at 85% -20%,rgba(161,47,201,.22),transparent 60%),
    var(--navy);
}
.post-hero-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr .9fr;gap:2.5rem;
  align-items:start;padding:clamp(2.4rem,6vw,4rem) clamp(1.1rem,5vw,3.2rem)}
.post-hero h1{color:#fff;font-size:clamp(1.9rem,4.6vw,3rem);font-weight:900;margin:0}
.post-hero-side{padding-top:.4rem}
.post-hero-side .bluf{color:#e2ecf2;font-size:1.08rem;line-height:1.55;margin:0}
.post-hero-side hr{border:0;border-top:1px solid rgba(255,255,255,.25);margin:1.2rem 0}
.post-hero-side .dates{color:var(--fg-muted);font-family:var(--display);font-weight:600;font-size:.85rem;margin:0}

.post-body{background:#f4f7f9;color:#1e2c37}
.post-body-in{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:230px minmax(0,1fr) 250px;gap:2.4rem;
  padding:clamp(1.8rem,4vw,3rem) clamp(1.1rem,5vw,3.2rem) clamp(2.4rem,5vw,3.5rem)}

/* Sticky Inhaltsverzeichnis */
.toc-col{}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);
  background:#e9edf0;border:1px solid #dde3e7;border-radius:12px;padding:1.1rem 1.2rem}
.toc-title{font-family:var(--display);font-weight:800;color:var(--navy);margin:0 0 .6rem;font-size:.95rem}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.toc a{color:#3a4a56;text-decoration:none;font-size:.86rem;line-height:1.35;display:block}
.toc a:hover{color:var(--violet)}

/* Artikel-Text (hell) */
.post-article{min-width:0;max-width:72ch}
.post-article h2,.post-article h3{color:var(--navy);scroll-margin-top:96px}
.post-article h2{font-size:clamp(1.35rem,3vw,1.7rem);font-weight:800;margin:2rem 0 .7rem}
.post-article h3{font-size:1.15rem;font-weight:700;margin:1.5rem 0 .5rem}
.post-article p,.post-article li{color:#33424d}
.post-article p{margin:0 0 1.1rem}
.post-article ul,.post-article ol{margin:0 0 1.1rem;padding-left:1.3rem}
.post-article li{margin:.35rem 0}.post-article li::marker{color:var(--violet)}
.post-article a{color:var(--violet);text-underline-offset:2px}
.post-article strong{color:var(--navy)}
.post-article img{border-radius:12px;margin:1.2rem 0;border:1px solid #e0e6ea}
.post-article blockquote{margin:1.4rem 0;padding:.5rem 0 .5rem 1.1rem;border-left:3px solid var(--violet);color:#40505b;font-style:italic}
.post-article hr{border:0;border-top:1px solid #e0e6ea;margin:2rem 0}
.post-article figure{margin:1.2rem 0}
.post-article figcaption{color:#6a7883;font-size:.82rem;margin-top:.4rem}

/* Autorenbox */
.author-col{}
.author{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px)}
.author-ph{width:96px;height:96px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#c04ae0,var(--violet) 70%);
  display:flex;align-items:flex-end;justify-content:center;margin-bottom:.9rem}
.author-ph img{width:100%;height:100%;object-fit:cover}
.author-ph span{font-family:var(--display);font-weight:800;color:rgba(255,255,255,.6);font-size:1.8rem;margin-bottom:.6rem}
.author-name{font-family:var(--display);font-weight:800;color:var(--navy);margin:0 0 .5rem;font-size:1rem}
.author-bio{color:#4a5b67;font-size:.86rem;line-height:1.55;margin:0 0 .8rem}
.author-link{color:var(--violet);font-weight:700;font-size:.86rem;text-decoration:none;font-family:var(--display)}

@media (max-width:960px){
  .post-hero-in{grid-template-columns:1fr;gap:1.2rem}
  .post-body-in{grid-template-columns:1fr;gap:1.6rem}
  .toc,.author{position:static}
  .toc-col{order:1}.post-article{order:2;max-width:none}.author-col{order:3}
  .author{border-top:1px solid #dde3e7;padding-top:1.4rem}
}

/* ---------- Echte Bilder: Logo, Kundenlogos, Porträt, Thumbnails ---------- */
.brand-head{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;flex:none}
.site-footer .brand-head{width:44px;height:44px}

/* Kundenkacheln: weisser Grund, damit farbige Logos sichtbar sind */
.clients .tile{background:#fff;border-color:#e6e9ec}
.clients .tile img{max-height:56px;max-width:78%;width:auto;object-fit:contain}

/* Porträt (Bild bringt magenta Kreis + Transparenz selbst mit) */
.portrait img{width:100%;height:auto;display:block}

/* Beitragsbilder in Cards */
.pcard img.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* Autorenbox-Foto (jetzt echtes Bild) */
img.author-ph{object-fit:cover}
img.author-ph span{display:none}

/* ---------- Über mich / Services: Stat-Kacheln, Timeline, Preise, Services ---------- */
.lead-lg{font-size:1.15rem;color:var(--fg-muted);max-width:60ch}
.scarcity{display:inline-block;background:rgba(161,47,201,.18);border:1px solid rgba(161,47,201,.4);
  color:#e9b6ff;padding:.45rem 1.1rem;border-radius:999px;font-family:var(--display);font-weight:700;font-size:.85rem}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.3rem}
.stat b{display:block;font-family:var(--display);font-weight:900;font-size:1.9rem;
  background:linear-gradient(120deg,var(--teal-2),#e9b6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat small{color:var(--fg-muted);font-size:.85rem}

.timeline{border-left:2px solid var(--line);margin-left:.4rem;padding-left:1.5rem;display:grid;gap:1.3rem;max-width:640px}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:-1.87rem;top:.4rem;width:12px;height:12px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 4px rgba(24,184,154,.2)}
.tl-year{font-family:var(--display);font-weight:800;color:var(--teal-2)}
.tl-item p{margin:.2rem 0 0;color:var(--fg-muted)}

.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;max-width:720px}
.price{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.6rem}
.price .amount{font-family:var(--display);font-weight:900;font-size:2rem;color:#fff}
.price .amount span{font-size:1rem;color:var(--fg-muted);font-weight:600}
.price .plabel{color:var(--fg-muted);margin:.3rem 0 0}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.svc-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.5rem}
.svc-card .ic{font-size:1.7rem;line-height:1}
.svc-card h3{color:#fff;margin:.6rem 0 .4rem;font-size:1.1rem}
.svc-card p{color:var(--fg-muted);font-size:.9rem;margin:0 0 .7rem}
.svc-card ul{margin:0;padding-left:1.1rem;color:var(--fg-muted);font-size:.85rem}
.svc-card li{margin:.25rem 0}.svc-card li::marker{color:var(--teal-2)}

.faq{display:grid;gap:.7rem;max-width:820px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.2rem 1.2rem}
.faq-item summary{cursor:pointer;font-family:var(--display);font-weight:700;color:#fff;padding:1rem 0;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--teal-2);font-weight:700}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--fg-muted);margin:0 0 1rem}

@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pcard:hover{transform:none}
}