/* ============================================================
   SKYLINE MARKETING — gemeinsames Stylesheet für alle Seiten
   ============================================================ */
:root{
  --ink:#15171B;
  --ink-2:#1C1F25;
  --paper:#F2F1ED;
  --card:#FFFFFF;
  --petrol:#26647F;        /* Akzent auf hellem Grund */
  --petrol-bright:#5CB4D6; /* Akzent auf dunklem Grund */
  --t-light:#F3F4F2;
  --t-mut-d:#585D64;
  --t-mut-l:#9AA2AB;
  --line-d:rgba(21,23,27,.14);
  --line-l:rgba(243,244,242,.14);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
:focus-visible{outline:3px solid var(--petrol-bright);outline-offset:3px}

h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-0.02em}
.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:15px 28px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;transition:transform .18s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-light{background:var(--t-light);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-dark{background:var(--ink);color:var(--t-light)}
.btn-dark:hover{background:#000}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(21,23,27,.72);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-l)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--t-light);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.logo em{font-style:normal;color:var(--petrol-bright)}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:22px}
.nav-links a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t-mut-l);text-decoration:none;transition:color .15s ease}
.nav-links a:hover{color:var(--t-light)}
.nav-links a.active{color:var(--petrol-bright)}
.nav .btn{padding:10px 20px;font-size:.86rem}

/* ---------- HERO (Homepage) ---------- */
.hero{position:relative;min-height:100svh;background:var(--ink);color:var(--t-light);display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:140px 0 0}
.glow{position:absolute;width:760px;height:760px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(92,180,214,.16) 0%,rgba(92,180,214,.05) 40%,transparent 68%);transform:translate(-50%,-50%);left:70%;top:35%;will-change:transform;z-index:0}
.hero-inner{position:relative;z-index:2;padding-bottom:200px}
.hero .eyebrow{color:var(--petrol-bright);margin-bottom:26px}
.hero h1{font-size:clamp(2.7rem,8.4vw,5.6rem);font-weight:700;max-width:14ch}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.6em);animation:riseIn .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes riseIn{to{opacity:1;transform:translateY(0)}}
.hero h1 .accent{color:var(--petrol-bright)}
.hero .sub{margin-top:30px;font-size:1.12rem;color:var(--t-mut-l);max-width:52ch;opacity:0;animation:fadeUp .8s ease .9s forwards}
.hero .cta-row{margin-top:38px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;opacity:0;animation:fadeUp .8s ease 1.1s forwards}
.hero .micro{font-family:var(--font-mono);font-size:.8rem;color:var(--t-mut-l)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.skyline-wrap{position:absolute;bottom:-2px;left:0;right:0;height:170px;z-index:1;pointer-events:none}
.skyline-wrap svg{position:absolute;bottom:0;left:-4%;width:108%;height:auto;will-change:transform}
.sky-back path{fill:#242932}
.sky-front path{fill:var(--paper)}
.sky-back{bottom:26px;opacity:.9}

/* ---------- PAGE-HERO (Unterseiten) ---------- */
.page-hero{background:var(--ink);color:var(--t-light);padding:172px 0 84px}
.page-hero .eyebrow{color:var(--petrol-bright);margin-bottom:18px}
.page-hero h1{font-size:clamp(2.3rem,6vw,4rem);font-weight:700;max-width:16ch}
.page-hero .sub{margin-top:22px;font-size:1.08rem;color:var(--t-mut-l);max-width:56ch}

/* ---------- STATS ---------- */
.stats{background:var(--paper);padding:64px 0 58px;border-bottom:1px solid var(--line-d)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.stat{border-left:1px solid var(--line-d);padding-left:22px}
.stat b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.02em;line-height:1.05}
.stat span{display:block;margin-top:6px;font-family:var(--font-mono);font-size:.78rem;color:var(--t-mut-d);letter-spacing:.02em}

/* ---------- SECTION BASICS ---------- */
section.block{padding:104px 0}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:56px}
.sec-head .eyebrow{color:var(--petrol)}
h2.title{font-size:clamp(1.9rem,4.4vw,3rem);max-width:22ch}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- PAINPOINTS ---------- */
.pains{background:var(--card)}
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.pain{padding:30px 0;border-top:1px solid var(--line-d)}
.pain p{color:var(--t-mut-d);font-size:1.02rem}
.pain strong{color:var(--ink);font-weight:600}

/* ---------- SERVICES (Zeilen, Homepage) ---------- */
.services{background:var(--paper)}
.srow{display:grid;grid-template-columns:1.3fr 1fr auto;align-items:center;gap:28px;padding:34px 0;border-top:1px solid var(--line-d);text-decoration:none;transition:padding-left .25s ease}
.srow:last-of-type{border-bottom:1px solid var(--line-d)}
.srow h3{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:600;transition:color .2s ease}
.srow p{color:var(--t-mut-d);font-size:.96rem}
.srow .arr{font-family:var(--font-mono);font-size:1.1rem;color:var(--t-mut-d);transition:transform .25s ease,color .2s ease}
.srow:hover{padding-left:14px}
.srow:hover h3{color:var(--petrol)}
.srow:hover .arr{transform:translateX(6px);color:var(--petrol)}
.bundle{margin-top:56px;background:var(--ink);color:var(--t-light);border-radius:14px;padding:42px 44px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.bundle h3{font-size:1.4rem;margin-bottom:8px}
.bundle p{color:var(--t-mut-l);max-width:46ch}

/* ---------- FEATURES (Leistungen-Detailseite) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:72px 0;border-top:1px solid var(--line-d)}
.feature:first-of-type{border-top:none}
.feature.rev .feature-media{order:2}
.feature h3{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:16px}
.feature .lead{color:var(--t-mut-d);font-size:1.05rem;margin-bottom:22px;max-width:52ch}
.incl{list-style:none}
.incl li{font-family:var(--font-mono);font-size:.84rem;color:var(--t-mut-d);padding:9px 0;border-top:1px dashed var(--line-d)}
.incl li::before{content:"— ";color:var(--petrol)}
.feature-media{aspect-ratio:4/3;border-radius:14px;background:linear-gradient(135deg,var(--ink) 0%,var(--petrol) 170%);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-family:var(--font-mono);font-size:.8rem;color:var(--t-mut-l)}

/* ---------- PROOF / CASE ---------- */
.proof{background:var(--ink);color:var(--t-light)}
.proof .sec-head .eyebrow{color:var(--petrol-bright)}
.proof-card{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;border:1px solid var(--line-l);border-radius:14px;padding:44px}
.proof-card h3{font-size:1.3rem;margin-bottom:14px}
.proof-card p{color:var(--t-mut-l)}
.proof-note{margin-top:18px;font-family:var(--font-mono);font-size:.8rem;color:var(--t-mut-l)}
.shot{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,#20242B 0%,#26647F 160%);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font-family:var(--font-mono);font-size:.8rem;color:var(--t-mut-l)}

/* ---------- PROZESS (Referenzen-Seite) ---------- */
.process{background:var(--card)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.step{border-top:2px solid var(--petrol);padding-top:20px}
.step .num{font-family:var(--font-mono);font-size:.78rem;color:var(--petrol);letter-spacing:.1em}
.step h3{font-size:1.12rem;margin:10px 0 8px}
.step p{color:var(--t-mut-d);font-size:.93rem}

/* ---------- IN-ARBEIT-Hinweis ---------- */
.wip{border:1px dashed var(--line-d);border-radius:14px;padding:32px 36px}
.wip h3{font-size:1.1rem;margin-bottom:8px}
.wip p{color:var(--t-mut-d);font-size:.96rem;max-width:70ch}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start}
.portrait{aspect-ratio:3/4;border-radius:14px;background:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font-family:var(--font-mono);font-size:.78rem;color:var(--t-mut-l)}
.about-text p{color:var(--t-mut-d);margin-bottom:16px;max-width:58ch;font-size:1.04rem}
.about-text .sec-head{margin-bottom:26px}

/* ---------- OFFER ---------- */
.offer{background:var(--card)}
.offer-card{background:var(--ink);color:var(--t-light);border-radius:16px;padding:52px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.offer-card h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px}
.offer-card .desc{color:var(--t-mut-l);max-width:48ch}
.offer-feats{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 22px}
.offer-feats span{font-family:var(--font-mono);font-size:.78rem;color:var(--t-mut-l)}
.offer-feats span::before{content:"— ";color:var(--petrol-bright)}
.price-box{text-align:right}
.price{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:-.02em}
.price small{font-family:var(--font-mono);font-size:.85rem;font-weight:400;color:var(--t-mut-l);letter-spacing:0}
.price-box .btn{margin-top:22px}

/* ---------- CLOSING ---------- */
.closing{background:var(--ink);color:var(--t-light);text-align:center;padding:130px 0}
.closing h2{font-size:clamp(2.2rem,6vw,4rem);max-width:18ch;margin:0 auto 22px}
.closing p{color:var(--t-mut-l);max-width:44ch;margin:0 auto 40px}
.closing .alt{margin-top:28px;font-family:var(--font-mono);font-size:.82rem;color:var(--t-mut-l)}
.closing .alt a{color:var(--petrol-bright);text-decoration:none}

/* ---------- RECHTSTEXTE ---------- */
.legal{background:var(--paper);padding:60px 0 104px}
.legal .wrap{max-width:760px}
.legal h2{font-size:1.4rem;margin:44px 0 14px}
.legal h3{font-size:1.05rem;margin:26px 0 10px}
.legal p,.legal li{color:var(--t-mut-d);font-size:.98rem;margin-bottom:12px}
.legal ul{padding-left:22px}
.legal .todo{background:#FFF6DE;border:1px solid #E8D9A8;border-radius:8px;padding:14px 18px;font-family:var(--font-mono);font-size:.82rem;color:#6B5B1E}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);border-top:1px solid var(--line-l);color:var(--t-mut-l);font-family:var(--font-mono);font-size:.75rem;padding:26px 0}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:inherit}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .nav-links{gap:14px}
  .nav-links a{font-size:.7rem}
  .nav .btn{padding:9px 14px;font-size:.78rem}
  .logo{font-size:1rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .pain-grid{grid-template-columns:1fr}
  .srow{grid-template-columns:1fr auto;gap:8px 18px}
  .srow p{grid-column:1/-1}
  .feature{grid-template-columns:1fr;gap:30px;padding:56px 0}
  .feature.rev .feature-media{order:0}
  .proof-card{grid-template-columns:1fr;padding:30px}
  .shot{order:-1}
  .steps{grid-template-columns:1fr 1fr;gap:26px}
  .about-grid{grid-template-columns:1fr;gap:34px}
  .portrait{width:200px}
  .offer-card{grid-template-columns:1fr;padding:36px}
  .price-box{text-align:left}
  section.block{padding:76px 0}
  .page-hero{padding:140px 0 64px}
}
@media (max-width:480px){
  .steps{grid-template-columns:1fr}
  .nav-links{display:none} /* Auf sehr kleinen Screens: Links über Footer erreichbar */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1 .w,.hero .sub,.hero .cta-row{animation:none;opacity:1;transform:none}
  .reveal{opacity:1;transform:none;transition:none}
  .glow{display:none}
  *{transition:none!important}
}