/* ───────────────────────────────────────────────────────────
   EIL·Webschmid — Inner-Page Stile (ergänzt site.css)
   Navigation-Dropdown · Mobile-Menü · Page-Hero · Prose ·
   Pakete-Detail · Blog · Rechtliches
   ─────────────────────────────────────────────────────────── */

/* ── Nav: Dropdown (Über uns) ───────────────────────────── */
.nav-group{position:relative; display:flex; align-items:center}
.nav-group-trigger{
  appearance:none; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:500; color:var(--navy);
  padding:9px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav-group-trigger svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.nav-group:hover .nav-group-trigger,
.nav-group.open .nav-group-trigger{background:color-mix(in oklab,var(--navy) 7%, transparent)}
.nav-group.open .nav-group-trigger svg{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; min-width:220px;
  background:color-mix(in oklab,var(--paper) 94%, transparent);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--line-soft); border-radius:16px; padding:8px;
  box-shadow:0 24px 50px -24px rgba(21,32,44,.4);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:120;
}
.nav-group:hover .nav-dropdown,
.nav-group.open .nav-dropdown{opacity:1; visibility:visible; transform:none}
.nav-dropdown a{
  text-decoration:none; font-size:.92rem; font-weight:500; color:var(--navy);
  padding:10px 14px; border-radius:10px; transition:background .18s var(--ease), color .18s var(--ease);
}
.nav-dropdown a:hover{background:color-mix(in oklab,var(--accent) 12%, transparent); color:var(--accent)}
.nav-dropdown a.current{color:var(--accent)}
.nav-links a.current{color:var(--accent)}

/* ── Mobile nav ─────────────────────────────────────────── */
.nav-burger{
  display:none; appearance:none; border:0; background:none; cursor:pointer;
  width:44px; height:44px; border-radius:12px; color:var(--navy);
  align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.nav-burger svg{width:24px;height:24px}
.mobile-menu{
  position:fixed; inset:0; z-index:200; display:none;
  background:color-mix(in oklab,var(--paper) 97%, transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  flex-direction:column; padding:90px var(--gutter) 40px;
  opacity:0; transition:opacity .3s var(--ease);
}
.mobile-menu.open{display:flex; opacity:1}
.mobile-menu a{
  text-decoration:none; color:var(--navy); font-size:1.5rem; font-weight:700;
  letter-spacing:-.02em; padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.mobile-menu a.sub{font-size:1.05rem; font-weight:500; color:var(--muted); padding:10px 0 10px 18px; border-bottom:0}
.mobile-menu a:hover{color:var(--accent)}
.mobile-menu .mm-close{
  position:absolute; top:22px; right:var(--gutter); width:44px;height:44px;
  border:0; background:none; cursor:pointer; color:var(--navy);
  border-radius:12px; box-shadow:inset 0 0 0 1.5px var(--line);
  display:grid; place-items:center;
}
.mobile-menu .mm-close svg{width:24px;height:24px}
.mobile-menu .btn{margin-top:24px; font-size:1.05rem; justify-content:center}
@media (max-width:1080px){
  .nav-burger{display:inline-flex}
}

/* ── Page hero (kompakt) ────────────────────────────────── */
.page-hero{
  position:relative; overflow:hidden;
  padding:clamp(130px,17vh,190px) 0 clamp(40px,5vw,64px);
}
.page-hero .hero-mesh{position:absolute; inset:-30% -10% auto; height:130%; z-index:-1; pointer-events:none}
.page-hero-inner{max-width:820px}
.page-hero h1{
  font-size:clamp(2.4rem, 5vw, 4rem); letter-spacing:-.035em; line-height:1.04;
  margin:22px 0 0; text-wrap:balance;
}
.page-hero .lead{font-size:1.24rem; color:var(--muted); margin-top:24px; max-width:60ch; text-wrap:pretty}
.page-hero .hero-cta{margin-top:34px}

/* breadcrumb */
.crumbs{display:flex; align-items:center; gap:8px; font-family:'DM Mono',monospace; font-size:.76rem; color:var(--muted-2); letter-spacing:.04em; margin-bottom:4px}
.crumbs a{color:var(--muted-2); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.5}

/* ── Prose / Fliesstext ─────────────────────────────────── */
.prose{max-width:760px}
.prose > * + *{margin-top:1.2em}
.prose h2{font-size:var(--h2); margin-top:1.6em; letter-spacing:-.02em}
.prose h3{font-size:var(--h3); margin-top:1.4em}
.prose p{color:var(--muted); font-size:1.1rem; line-height:1.75}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
.prose a:hover{color:var(--accent-bright)}
.prose strong{color:var(--navy); font-weight:700}
.prose ul,.prose ol{color:var(--muted); font-size:1.08rem; line-height:1.7; padding-left:1.3em; display:flex; flex-direction:column; gap:.5em}
.prose blockquote{
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin-left:0;
  font-size:1.2rem; font-weight:500; color:var(--navy); font-style:italic;
}
.prose .lead{font-size:1.24rem; color:var(--muted); line-height:1.6}

/* highlight callout */
.callout{
  background:color-mix(in oklab,var(--accent) 9%, var(--paper));
  border:1px solid color-mix(in oklab,var(--accent) 24%, transparent);
  border-radius:var(--radius); padding:24px 28px; margin-top:1.4em;
}
.callout p{color:var(--navy); margin:0}
.callout .badge{margin-bottom:10px}

/* ── Paket-Detail-Pillen (sticky) ──────────────────────── */
.pkg-pills{
  position:sticky; top:74px; z-index:50; margin:0 auto clamp(40px,5vw,60px);
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  padding:10px; border-radius:999px; width:fit-content;
  background:color-mix(in oklab,var(--paper) 84%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-soft);
}
.pkg-pills a{
  text-decoration:none; font-size:.9rem; font-weight:600; color:var(--navy);
  padding:9px 18px; border-radius:999px; transition:background .2s var(--ease), color .2s var(--ease);
}
.pkg-pills a:hover{background:color-mix(in oklab,var(--navy) 7%, transparent)}
.pkg-pills a.featured{background:var(--accent); color:#fff}

/* ── Paket-Detail-Karten ────────────────────────────────── */
.pkg{
  scroll-margin-top:120px;
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,48px); margin-bottom:22px; position:relative; overflow:hidden;
}
.pkg.featured{border-color:color-mix(in oklab,var(--accent) 40%, transparent); box-shadow:0 30px 70px -40px color-mix(in oklab,var(--accent) 60%, transparent)}
.pkg-head{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:8px}
.pkg-head h2{font-size:clamp(1.8rem,3vw,2.4rem); letter-spacing:-.03em}
.pkg-forwhom{color:var(--muted); font-size:1.04rem; max-width:54ch; margin-top:12px; line-height:1.6}
.pkg-forwhom b{color:var(--navy)}
.pkg-price{display:flex; align-items:baseline; gap:12px; flex-shrink:0}
.pkg-price .amt{font-size:2.4rem; font-weight:700; letter-spacing:-.03em; color:var(--navy); font-variant-numeric:tabular-nums}
.pkg-price .old{text-decoration:line-through; color:var(--muted-2); font-size:1.05rem}
.pkg-price .pre{font-size:.95rem; color:var(--muted-2)}
.pkg-cols{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:30px}
@media (max-width:680px){ .pkg-cols{grid-template-columns:1fr; gap:22px} }
.pkg-col h4{
  font-family:'DM Mono',monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.pkg-col.incl h4{color:var(--accent)}
.pkg-col.excl h4{color:var(--muted-2)}
.pkg-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
.pkg-col li{display:flex; align-items:flex-start; gap:11px; font-size:1rem; color:var(--muted); line-height:1.5}
.pkg-col li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.pkg-col.incl li svg{color:var(--accent)}
.pkg-col.excl li{color:var(--muted-2)}
.pkg-col.excl li svg{color:color-mix(in oklab,var(--navy) 28%, var(--paper))}
.pkg-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line-soft)}
@media (max-width:680px){ .pkg-meta{grid-template-columns:1fr; gap:14px} }
.pkg-meta div b{display:block; font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px}
.pkg-meta div p{font-size:.96rem; color:var(--muted); margin:0; line-height:1.5}
.pkg .btn{margin-top:28px}

/* ── Blog ───────────────────────────────────────────────── */
.post-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media (max-width:760px){ .post-grid{grid-template-columns:1fr} }
.post-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:30px 32px; text-decoration:none;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.post-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(21,32,44,.34); border-color:var(--line)}
.post-card .cat{font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
.post-card h3{font-size:1.32rem; letter-spacing:-.02em; line-height:1.25; color:var(--navy)}
.post-card p{color:var(--muted); font-size:1rem; line-height:1.6; margin-top:14px; flex:1}
.post-card .more{margin-top:20px; font-weight:600; color:var(--accent); font-size:.95rem; display:inline-flex; align-items:center; gap:7px}
.post-card .more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.post-card:hover .more svg{transform:translateX(4px)}

.cat-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px}
.cat-filter a{
  text-decoration:none; font-size:.9rem; font-weight:600; color:var(--navy);
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff;
  transition:all .25s var(--ease);
}
.cat-filter a:hover{border-color:var(--navy); transform:translateY(-2px)}
.cat-filter a.current{background:var(--accent); border-color:var(--accent); color:#fff}

.pager{display:flex; gap:10px; align-items:center; justify-content:center; margin-top:48px}
.pager a,.pager span{
  min-width:44px; height:44px; padding:0 14px; border-radius:12px; display:grid; place-items:center;
  text-decoration:none; font-weight:600; font-size:.95rem; color:var(--navy);
  border:1.5px solid var(--line); background:#fff; transition:all .2s var(--ease);
}
.pager a:hover{border-color:var(--navy)}
.pager .current{background:var(--navy); color:var(--paper); border-color:var(--navy)}

/* article body */
.article-hero{max-width:780px; margin:0 auto}
.article-body{max-width:720px; margin:0 auto}
.article-meta{display:flex; gap:16px; align-items:center; font-family:'DM Mono',monospace; font-size:.78rem; color:var(--muted-2); margin-top:18px}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted-2)}

/* ── Rechtliches / Legal ────────────────────────────────── */
.legal{max-width:760px}
.legal h2{font-size:1.5rem; margin-top:1.8em; color:var(--navy)}
.legal h3{font-size:1.15rem; margin-top:1.4em; color:var(--navy)}
.legal p,.legal li{color:var(--muted); font-size:1.02rem; line-height:1.75}
.legal a{color:var(--accent)}
.legal address{font-style:normal; color:var(--muted); line-height:1.7}

/* ── CTA-Band (Wiederverwendung) ────────────────────────── */
.cta-band{
  background:var(--navy); color:var(--paper); border-radius:var(--radius-lg);
  padding:clamp(40px,5vw,64px); position:relative; overflow:hidden; text-align:center;
}
.cta-band .grain{position:absolute; inset:0; background:radial-gradient(600px circle at 50% 120%, color-mix(in oklab,var(--accent) 28%, transparent), transparent 55%); opacity:.6}
.cta-band-inner{position:relative; z-index:1; max-width:620px; margin:0 auto}
.cta-band h2{font-size:var(--h2)}
.cta-band p{color:color-mix(in oklab,var(--paper) 76%, var(--navy)); margin-top:16px; font-size:1.1rem}
.cta-band .btn{margin-top:30px}

/* two-col content + aside */
.split{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(36px,5vw,64px); align-items:start}
@media (max-width:860px){ .split{grid-template-columns:1fr} }
.aside-card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:28px; position:sticky; top:100px;
}
.aside-card h4{font-size:1.05rem; margin-bottom:14px; color:var(--navy)}
.aside-card ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.aside-card li a{color:var(--muted); text-decoration:none; font-size:.96rem; display:flex; align-items:center; gap:8px}
.aside-card li a:hover{color:var(--accent)}