/* ==========================================================================
   Elvare Habits — Design-System (1:1 aus der Homepage übernommen)
   Eigenständiges Stylesheet für Blog, Socials, Privacy, Terms, Impressum.
   styles.css wird auf diesen Seiten NICHT mehr geladen.
   ========================================================================== */

:root{
  --bg:#06060A;
  --ink:#EDEDF2;
  --ink-2:rgba(237,237,242,0.62);
  --ink-3:rgba(237,237,242,0.42);
  --line:rgba(255,255,255,0.09);
  --accent:#9B4DFF;
  --accent-2:#8C88FF;
  --card:linear-gradient(158deg,rgba(198,192,224,0.10),rgba(150,146,180,0.045) 42%,rgba(120,118,150,0.02));
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --grotesk:'Bricolage Grotesque','Instrument Sans',sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 62% at 50% -8%, rgba(155,77,255,0.16), rgba(6,6,10,0) 58%),
    radial-gradient(80% 50% at 100% 2%, rgba(140,136,255,0.10), rgba(6,6,10,0) 55%),
    #06060A;
  background-attachment:fixed;
  min-height:100vh; overflow-x:hidden;
}
a{color:var(--ink); text-decoration:none; transition:color .25s ease;}
a:hover{color:#fff;}
::selection{background:rgba(155,77,255,0.4); color:#fff;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; line-height:1.08; margin:0 0 .4em;}
p{margin:0 0 1em;}

/* diagonaler Beam wie auf der Homepage */
.beam{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.beam::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(104deg,rgba(6,6,10,0) 73.79%,rgba(255,226,244,0.22) 73.8%,rgba(216,166,255,0.14) 74.6%,rgba(158,140,235,0.12) 76.4%,rgba(140,142,168,0.09) 80%,rgba(70,72,92,0.04) 84.58%,rgba(6,6,10,0) 84.59%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 2%,#000 20%,#000 80%,transparent 98%);
  mask-image:linear-gradient(to bottom,transparent 2%,#000 20%,#000 80%,transparent 98%);
}

.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,40px); position:relative; z-index:1;}

/* ---------------- Navbar ---------------- */
.nav{position:sticky; top:0; z-index:50; padding:16px clamp(16px,3vw,26px);}
.nav-inner{max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.nav-brand{display:flex; align-items:center; gap:10px;}
.nav-brand img{width:30px; height:30px; border-radius:9px;}
.nav-brand span{font-family:var(--grotesk); font-weight:700; font-size:16.5px; letter-spacing:-0.02em; color:#fff;}
.nav-links{display:none; align-items:center; gap:2px; padding:4px; border-radius:999px; background:rgba(255,255,255,0.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);}
.nav-links a{padding:9px 15px; border-radius:999px; font-size:14px; font-weight:500; color:var(--ink-2); font-family:var(--sans);}
.nav-links a:hover{color:#fff;}
.nav-links a.active{color:#fff; background:rgba(255,255,255,0.08);}
.nav-cta{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:rgba(255,255,255,0.07); backdrop-filter:blur(20px) saturate(125%); -webkit-backdrop-filter:blur(20px) saturate(125%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.13), 0 10px 30px -16px rgba(0,0,0,0.8); color:#fff; font-family:var(--grotesk); font-weight:600; font-size:14px; transition:background .35s ease, transform .35s cubic-bezier(.16,1,.3,1);}
.nav-cta:hover{background:rgba(255,255,255,0.15); color:#fff; transform:translateY(-1px);}
.nav-burger{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:none; border-radius:50%; background:rgba(255,255,255,0.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15); backdrop-filter:blur(14px); color:rgba(255,255,255,0.9); cursor:pointer; transition:background .3s ease;}
.nav-burger svg{transition:transform .4s cubic-bezier(.16,1,.3,1);}
.nav-burger[aria-expanded="true"]{background:rgba(255,255,255,0.18);}
.nav-burger[aria-expanded="true"] svg{transform:rotate(90deg);}
.nav-menu{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .42s cubic-bezier(.16,1,.3,1), opacity .28s ease; max-width:1240px; margin:0 auto;}
.nav-menu.open{grid-template-rows:1fr; opacity:1;}
.nav-menu > div{overflow:hidden; min-height:0;}
.nav-menu-inner{display:flex; flex-direction:column; gap:2px; margin-top:12px; padding:10px; border-radius:22px; background:rgba(10,10,14,0.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1); backdrop-filter:blur(18px);}
.nav-menu-inner a{padding:12px 14px; border-radius:14px; font-size:15px; color:rgba(255,255,255,0.85);}
.nav-menu-inner a.cta{margin-top:6px; text-align:center; background:rgba(255,255,255,0.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2); color:#fff; font-weight:600;}
@media (min-width:768px){ .nav-links{display:flex;} .nav-burger,.nav-menu{display:none;} }

/* ---------------- Page header ---------------- */
.page-head{text-align:center; padding:clamp(48px,10vw,90px) 0 clamp(28px,5vw,44px);}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(155,77,255,0.10); border:1px solid rgba(155,77,255,0.28); color:#C6ABFF; font-family:var(--grotesk); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;}
.badge .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(155,77,255,0.8);}
.page-head h1{font-size:clamp(38px,8vw,66px); color:#fff; margin:18px 0 12px;}
.page-head p{font-size:clamp(16px,2.4vw,19px); color:var(--ink-2); max-width:560px; margin:0 auto;}

/* ---------------- Card ---------------- */
.card{background:var(--card), rgba(12,12,20,0.5); border:1px solid var(--line); backdrop-filter:blur(18px) saturate(115%); -webkit-backdrop-filter:blur(18px) saturate(115%); border-radius:24px; padding:clamp(22px,4vw,34px);}
.card-h{transition:border-color 1s cubic-bezier(.33,1,.68,1), box-shadow 1s cubic-bezier(.33,1,.68,1), transform .5s cubic-bezier(.33,1,.68,1);}
.card-h:hover{border-color:rgba(178,150,255,0.35); box-shadow:0 30px 70px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.12); transform:translateY(-3px);}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px; border-radius:999px; font-family:var(--grotesk); font-weight:600; font-size:15px; cursor:pointer; border:none; transition:background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16,1,.3,1);}
.btn-primary{background:linear-gradient(135deg,#9B4DFF,#7C4DFF); color:#fff; box-shadow:0 14px 34px -16px rgba(155,77,255,0.7);}
.btn-primary:hover{color:#fff; transform:translateY(-1px); filter:brightness(1.08);}
.btn-glass{background:rgba(255,255,255,0.07); backdrop-filter:blur(20px) saturate(125%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.13), 0 10px 30px -16px rgba(0,0,0,0.8); color:#fff;}
.btn-glass:hover{background:rgba(255,255,255,0.15); color:#fff; transform:translateY(-1px);}
.field{width:100%; padding:14px 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:var(--ink); font-family:var(--sans); font-size:16px; outline:none; transition:border-color .3s ease, background .3s ease;}
.field:focus{border-color:rgba(178,150,255,0.5); background:rgba(255,255,255,0.08);}

/* ---------------- Footer ---------------- */
.footer{border-top:1px solid var(--line); margin-top:clamp(60px,10vw,110px); padding:34px clamp(20px,4vw,40px); position:relative; z-index:1;}
.footer-inner{max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; font-size:13.5px; color:var(--ink-3);}
.footer-inner a{color:var(--ink-3);}
.footer-inner a:hover{color:#C6ABFF;}
.footer-links{display:flex; flex-wrap:wrap; gap:20px;}

/* ---------------- Long-form prose (Legal, Blog-Post) ---------------- */
.prose{color:var(--ink-2); font-size:16px; line-height:1.75;}
.prose h1,.prose h2,.prose h3,.prose h4{color:#fff; margin:1.6em 0 .5em;}
.prose h1{font-size:clamp(28px,5vw,40px);}
.prose h2{font-size:clamp(23px,4vw,30px);}
.prose h3{font-size:clamp(19px,3vw,23px);}
.prose h4{font-size:18px; font-family:var(--grotesk); font-weight:600;}
.prose p,.prose li{color:var(--ink-2);}
.prose strong{color:var(--ink);}
.prose a{color:#C6ABFF; text-decoration:underline; text-underline-offset:3px;}
.prose ul,.prose ol{padding-left:1.3em; margin:0 0 1em;}
.prose li{margin:.3em 0;}
.prose blockquote{border-left:3px solid var(--accent); margin:1.2em 0; padding:.2em 0 .2em 1.1em; color:var(--ink-2);}
.prose code{background:rgba(155,77,255,0.12); color:#CBB6FF; padding:.15em .4em; border-radius:6px; font-size:.9em;}
.prose pre{background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:14px; padding:16px; overflow-x:auto;}
.prose pre code{background:none; color:var(--ink); padding:0;}
.prose img{border-radius:16px; margin:1.2em 0;}
.prose hr{border:none; border-top:1px solid var(--line); margin:2em 0;}
.prose table{width:100%; border-collapse:collapse; margin:1em 0;}
.prose th,.prose td{border:1px solid var(--line); padding:10px 12px; text-align:left;}

/* ---------------- Cookie-Banner (bestehendes JS) an Design ---------------- */
.cookie-banner{background:rgba(10,10,16,0.92) !important; backdrop-filter:blur(24px) saturate(120%) !important; border-top:1px solid var(--line) !important;}
.cookie-text,.cookie-blocked-text{color:var(--ink-2) !important;}
.cookie-text a,.cookie-blocked-title{color:#C6ABFF !important;}
.cookie-btn-accept{background:linear-gradient(135deg,#9B4DFF,#7C4DFF) !important; color:#fff !important; border:none !important; border-radius:999px !important; box-shadow:0 10px 26px -12px rgba(155,77,255,0.6) !important;}
.cookie-btn-decline{background:rgba(255,255,255,0.06) !important; color:var(--ink-2) !important; border:1px solid rgba(255,255,255,0.14) !important; border-radius:999px !important;}