/* FONTS */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Open+Sans:wght@300;400;600&display=swap');


/* GENERELT */

body{
font-family:'Open Sans', sans-serif;
margin:0;
background:#060817;
color:#e6ebff;
line-height:1.7;
}

img{
max-width:100%;
height:auto;
display:block;
margin:auto;
}


/* HEADER */

header{
background:#11164a;
padding:50px 20px;
text-align:center;
}

header h1{
font-family:'Cormorant Garamond', serif;
margin:0;
font-size:54px;
color:#ffd86b;
letter-spacing:1px;
}

header p{
margin-top:12px;
color:#8fa6ff;
font-size:18px;
}


/* MENU */

nav{
background:#1a1f66;
padding:16px;
text-align:center;
box-shadow:0 3px 12px rgba(0,0,0,0.15);
position:sticky;
top:0;
z-index:1000;
}

nav a{
color:white;
margin:0 22px;
text-decoration:none;
font-weight:600;
font-size:16px;
letter-spacing:1px;
padding-bottom:6px;
border-bottom:1px solid transparent;
}

nav a:hover{
color:#ffd86b;
border-bottom:1px solid #ffd86b;
}


/* HERO FORSIDE (beholdes som før) */

.hero{
height:600px;
background:url('Forsidebillede.png') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
}

/* GENEREL HERO (kun forsiden) */
.hero .hero-text{
background: linear-gradient(
to bottom,
rgba(0,0,0,0.2),
rgba(0,0,0,0.5)
);
padding:40px;
border-radius:10px;
color:white;
max-width:700px;
margin:auto;
text-align:center;
}

.hero p{
font-size:20px;
color:white;
}


.hero-artikler{
max-width:1100px;
margin:20px auto 10px auto;
position:relative;
overflow:hidden;
border-radius:10px;
}

/* billede */

.hero-artikler img{
width:100%;
height:auto;
display:block;
}

/* 🔮 HERO TEXT – FIXET OG STABIL */

.hero-artikler .hero-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);

width:90%;
max-width:600px;

background:rgba(0,0,0,0.35); /* lidt mørkere = bedre læsbarhed */
padding:30px;

border-radius:10px;
border:1px solid rgba(255,255,255,0.15);

text-align:center;
z-index:2;
}

/* ✨ TEKST */

.hero-artikler .hero-text h1{
color:#fff;
text-shadow:0 4px 14px rgba(0,0,0,0.9);
margin-bottom:10px;
}

.hero-artikler .hero-text p{
color:#eee;
text-shadow:0 3px 10px rgba(0,0,0,0.9);
line-height:1.5;
}

/* CTA */

.cta{
display:inline-block;
margin-top:25px;
background:#ffd86b;
color:#0b0f2a;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;
box-shadow:0 0 12px rgba(255,216,107,0.4);
transition:all 0.3s ease;
}

.cta:hover{
background:#ffe79a;
}


/* INDHOLD */

.container{
max-width:1100px;
margin:-80px auto 0 auto;  /* vigtigt */
padding:30px;
position:relative;
z-index:3;
}

.content{
max-width:900px;
margin:auto;
padding:30px 25px;
}

section{
max-width:1200px;
margin:20px auto;
}

p, li{
max-width:750px;
margin:0 auto 16px auto;
}


/* OVERSKRIFTER */

.container h2,
.content h2{
font-family:'Cormorant Garamond', serif;
font-size:40px;
color:#ffd86b;
text-align:center;
margin-top:30px;
margin-bottom:15px;
letter-spacing:1px;
}

.container h3{
font-family:'Cormorant Garamond', serif;
font-size:26px;
color:#ffd86b;
margin-top:25px;
}


/* BOXES */

.features{
max-width:1100px;
margin:40px auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
padding:0 20px;
}

.box{
background:#1a1f66;
padding:22px;
border-radius:8px;
text-align:center;
box-shadow:0 8px 18px rgba(0,0,0,0.4);
transition:transform 0.3s ease;
}

.box:hover{
transform:translateY(-4px);
}


/* PROFIL */

.profilbillede{
width:320px;              /* større billede */
height:auto;
border-radius:50%;
display:block;
margin:20px auto 30px auto;  /* centrer + luft under */
border:4px solid #ffd86b;
}


/* HOROSKOP */

.horoskop-billede{
width:450px;
display:block;
margin:40px auto;
border:3px solid #ffd86b;
border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

.horoskop-info{
max-width:420px;
margin:20px auto 40px auto;
padding:15px 20px;
background:#11164a;
border:1px solid #ffd86b;
border-radius:6px;
text-align:center;
font-size:14px;
}


.cta-box{
max-width:700px;
margin:60px auto;
padding:30px;

background:linear-gradient(135deg, #11164a, #1a1f6b);

border:1px solid #ffd86b;
border-radius:10px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,0.4);
transition:0.3s ease;
}

.cta-box:hover{
transform:translateY(-3px);
box-shadow:0 15px 40px rgba(0,0,0,0.5);
}

/* LINKS */

.naeste-artikel{
text-align:center;
margin:40px auto;
font-size:18px;
}

.naeste-artikel a{
color:#9bbcff;
text-decoration:none;
font-weight:600;
}

.naeste-artikel a:hover{
color:#ffd86b;
}


/* FOOTER */

footer{
text-align:center;
padding:30px;
background:#11164a;
margin-top:30px;
}

.hero-coaching,
.hero-metode,
.hero-horoskop,
.hero-solen,
.hero-maanen,
.hero-merkur,
.hero-ascendant{
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}


/* ---------- BAGGRUNDE ---------- */

.hero-coaching{
  background:url('coaching.jpg') center/cover no-repeat;
}

.hero-metode{
  background:url('metode.jpg') center/cover no-repeat;
}

.hero-horoskop{
  background:url('zodiac.jpg') center/cover no-repeat;
}


/* ---------- PLANETER ---------- */

.hero-solen{
  background:url('solen-banner.jpg') center/cover no-repeat;
}

.hero-solen::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
}

.hero-maanen{
  background:url('maanen-banner.jpg') center/cover no-repeat;
}

.hero-maanen::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(10,15,40,0.45);
}

.hero-merkur{
  background:url('merkur-banner.jpg') center/cover no-repeat;
}

.hero-merkur::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(30,20,10,0.35);
}

.hero-ascendant{
  background:url('ascendanten-banner.jpg') center/cover no-repeat;
}

.hero-ascendant::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
}

.contact-info a{
  color:#8fa6ff;
  text-decoration:none;
  font-weight:600;
}

.contact-info a:hover{
  color:#ffd86b;
  text-decoration:underline;
}

/* ASPEKTER DESIGN */

.aspekt-title{
margin-top:80px;
}

.container h3{
text-align:center;
margin-top:40px;
color:#9bbcff;
letter-spacing:1px;
}

.astro-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px;
margin:25px auto 50px auto;
max-width:800px;
}

.astro-grid a{
display:inline-block;
padding:10px 18px;
background:linear-gradient(135deg, #4aa3ff, #2d6cdf);
color:white;
border-radius:20px;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:0.3s;
}

.astro-grid a:hover{
background:linear-gradient(135deg, #7cc4ff, #4aa3ff);
transform:translateY(-3px);
box-shadow:0 6px 20px rgba(0,0,0,0.4);
}

.om-mig-intro{
text-align:center;
margin-bottom:40px;
}

.intro-tekst{
max-width:700px;
margin:0 auto;
}

.intro-stor{
font-size:1.3em;
margin-bottom:20px;
}

/* 🔥 FORCE HERO FIX */

.hero-artikler .hero-text{
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%, -50%) !important;

width:90% !important;
max-width:600px !important;

background:rgba(0,0,0,0.5) !important;
padding:30px !important;

border-radius:10px !important;
text-align:center !important;
z-index:999 !important;
}

/* MOBIL */```css
/* ANBEFALINGER */

.anbefalinger-grid{
max-width:1100px;
margin:50px auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
padding:0 20px;
}

.anbefaling-box{
background:linear-gradient(135deg, #11164a, #0b0f2a);
border:1px solid rgba(255,216,107,0.45);
border-radius:10px;
padding:25px;
box-shadow:0 10px 25px rgba(0,0,0,0.45);
height:300px;
overflow-y:auto;
}

.anbefaling-box h3{
color:#ffd86b;
text-align:left;
margin-top:0;
}

.anbefaling-box p{
text-align:left;
max-width:none;
}

.anbefaling-navn{
color:#ffd86b;
font-weight:600;
margin-top:20px;
}

.anbefaling-box::-webkit-scrollbar{
width:6px;
}

.anbefaling-box::-webkit-scrollbar-thumb{
background:#ffd86b;
border-radius:10px;
}

.anbefaling-box::-webkit-scrollbar-track{
background:#11164a;
}
```


@media (max-width:768px){

.hero{
height:420px;
}

.hero-artikler .hero-text{
padding:20px;
max-width:90%;
}

.features{
grid-template-columns:repeat(2,1fr);
}

nav a{
margin:0 10px;
}

header h1{
font-size:40px;
}
}