/* Aurora Energy — gemeinsames Stylesheet (Multi-Page, Sidebar-Layout) */
:root{
  --mint:#3FD9D2; --mint-hover:#52EFE8; --teal:#052E36; --midnight:#081A24;
  --purple:#8E4FD8; --pink:#FF58B3; --gold:#D6B15C; --ivory:#F7F4ED;
  --text:#FFFFFF; --text-2:#DCE7EA; --muted:#8FA4AE;
  --card-bg:rgba(255,255,255,.05); --card-border:rgba(214,177,92,.35);
  --line:rgba(214,177,92,.22); --line-strong:rgba(214,177,92,.45);
  --panel:rgba(8,26,36,.72); --panel-solid:#0a2530; --shadow:0 15px 45px rgba(0,0,0,.45);
  --radius:18px; --radius-sm:12px; --topbar:66px; --sidebar:264px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:rgba(63,217,210,.18)}
html{scroll-behavior:smooth} html,body{margin:0}
body{font-family:var(--sans); color:var(--text-2); background:var(--midnight); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,.serif{font-family:var(--serif); font-weight:500; letter-spacing:.01em}
a{color:inherit; text-decoration:none} img,svg{max-width:100%}

/* Kosmischer Hintergrund (aus dem Logo) */
.sky{position:fixed; inset:0; z-index:0; pointer-events:none; background-color:#082a31;
  background-image:linear-gradient(rgba(6,28,34,.5), rgba(6,30,36,.6)), url('/bg-cosmos.jpg');
  background-image:linear-gradient(rgba(6,28,34,.5), rgba(6,30,36,.6)), image-set(url('/bg-cosmos.webp') type('image/webp'), url('/bg-cosmos.jpg') type('image/jpeg'));
  background-size:cover; background-position:center; background-repeat:no-repeat}
@media(max-width:640px){ .sky{background-image:linear-gradient(rgba(6,28,34,.5), rgba(6,30,36,.6)), image-set(url('/bg-cosmos-sm.webp') type('image/webp'), url('/bg-cosmos-sm.jpg') type('image/jpeg'))} }

/* Topbar */
.topbar{position:fixed; top:0; left:0; right:0; height:var(--topbar); z-index:30; display:flex; align-items:center; gap:1rem;
  padding:0 clamp(1rem,3vw,1.6rem); backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(5,46,54,.9), rgba(5,46,54,.55)); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:.6rem}
.brand img{width:40px; height:40px; border-radius:9px; box-shadow:0 2px 10px rgba(0,0,0,.4)}
.brand b{font-family:var(--serif); font-size:1.1rem; letter-spacing:.16em; color:var(--mint); font-weight:500; line-height:1}
.brand span{color:var(--muted); letter-spacing:.24em; font-size:.58rem; text-transform:uppercase; display:block; margin-top:3px}
.top-spacer{margin-left:auto}
.hamburger{display:none; width:42px; height:42px; border:1px solid var(--line-strong); border-radius:10px; background:transparent; cursor:pointer; color:var(--mint); align-items:center; justify-content:center}
.hamburger svg{width:20px; height:20px}

/* Layout: Sidebar + Content */
.layout{position:relative; z-index:2; display:flex; align-items:flex-start; padding-top:var(--topbar)}
.sidebar{position:sticky; top:var(--topbar); align-self:flex-start; width:var(--sidebar); flex:0 0 var(--sidebar);
  height:calc(100vh - var(--topbar)); overflow-y:auto; padding:1.6rem 1rem; border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,26,36,.45), rgba(8,26,36,.15))}
.side-nav{display:flex; flex-direction:column; gap:.2rem}
.side-nav a{display:block; padding:.7rem .9rem; border-radius:10px; color:var(--text-2); font-size:.96rem; border-left:2px solid transparent; transition:.18s}
.side-nav a:hover{color:var(--mint); background:rgba(63,217,210,.07)}
.side-nav a.active{color:var(--mint); border-left-color:var(--gold); background:rgba(63,217,210,.09)}
.side-nav .sep{height:1px; margin:.7rem .3rem; background:var(--line)}
.side-cta{margin:1.2rem .3rem 0}

.content{flex:1 1 auto; min-width:0; padding:clamp(1.4rem,4vw,2.6rem) clamp(1.1rem,4vw,2.6rem) 3rem; max-width:1000px; margin:0 auto}

/* Off-canvas Overlay (Mobile) */
.scrim{position:fixed; inset:0; z-index:25; background:rgba(3,12,16,.82); opacity:0; pointer-events:none; transition:opacity .2s}
@media(max-width:880px){
  .layout{z-index:auto}
  .hamburger{display:inline-flex}
  .sidebar{position:fixed; top:var(--topbar); left:0; bottom:0; z-index:28; transform:translateX(-100%); transition:transform .22s ease;
    width:min(84vw,300px); height:calc(100vh - var(--topbar)); background:var(--midnight); backdrop-filter:none; border-right:1px solid var(--line-strong); box-shadow:2px 0 26px rgba(0,0,0,.55)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .scrim{opacity:1; pointer-events:auto}
  .content{max-width:100%}
  .side-nav a{color:var(--text); font-size:1.02rem; padding:.85rem .95rem}
}
@media(max-width:640px){
  .topbar{gap:.5rem; padding:0 .8rem}
  .brand img{width:34px; height:34px}
  .brand b{font-size:.95rem; letter-spacing:.06em; white-space:nowrap}
  .brand span{display:none}
  .topbar .btn-primary{padding:.5rem .8rem; font-size:.8rem; letter-spacing:.02em; white-space:nowrap}
}

/* Buttons */
.btn{font-family:var(--sans); cursor:pointer; border-radius:999px; padding:.8rem 1.5rem; font-size:.98rem; border:1px solid transparent; letter-spacing:.02em; transition:transform .15s, box-shadow .2s, background .2s, color .2s; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:46px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--mint); color:var(--teal); font-weight:700; box-shadow:0 12px 30px -12px rgba(63,217,210,.55)}
.btn-primary:hover{background:var(--mint-hover)}
.btn-ghost{background:transparent; color:var(--gold); border-color:var(--gold)}
.btn-ghost:hover{background:rgba(214,177,92,.12)}
.btn-sm{padding:.55rem 1.1rem; font-size:.88rem; min-height:auto}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none}

/* Home Hero (Titelbild) */
.hero-img{display:block; width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--card-border); box-shadow:var(--shadow)}
.home-intro{text-align:center; max-width:60ch; margin:1.8rem auto 0}
.home-intro h1{font-size:clamp(1.8rem,4.4vw,2.7rem); color:var(--mint); margin:.2rem 0 .5rem; padding-bottom:.06em}
.home-intro p{color:var(--text-2); margin:0}

/* Kategorie-Kacheln */
.cat-grid{display:grid; grid-template-columns:1fr; gap:1.2rem; margin-top:2.2rem}
@media(min-width:680px){ .cat-grid{grid-template-columns:1fr 1fr} }
.cat-card{position:relative; display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--card-border); box-shadow:var(--shadow); transition:transform .2s, border-color .2s}
.cat-card:hover{transform:translateY(-4px); border-color:var(--mint)}
.cat-card img{display:block; width:100%; height:auto}
.cat-card .cap{padding:1rem 1.2rem 1.1rem; background:rgba(8,26,36,.55)}
.cat-card .cap b{font-family:var(--serif); font-size:1.35rem; color:#fff; display:block}
.cat-card .cap span{color:var(--mint); font-size:.85rem}

/* Section-Kopf */
.sec-head{text-align:center; max-width:46ch; margin:2.6rem auto 1.4rem}
.sec-head .eyebrow{color:var(--gold); letter-spacing:.24em; text-transform:uppercase; font-size:.7rem}
.sec-head h2{font-size:clamp(1.6rem,4vw,2.3rem); margin:.5rem 0 .4rem; color:var(--mint)}
.sec-head p{color:var(--text-2); margin:0}

/* Seiten-Hero (Kategorie) + Prosa */
.page-hero{width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--card-border); box-shadow:var(--shadow); display:block}
.page-title{font-size:clamp(1.9rem,5vw,3rem); color:var(--mint); margin:1.6rem 0 .3rem; padding-bottom:.08em}
.page-kicker{color:var(--gold); letter-spacing:.22em; text-transform:uppercase; font-size:.72rem}
.prose{max-width:66ch; color:var(--text-2); font-size:1.06rem}
.prose p{margin:0 0 1rem} .prose h3{color:var(--mint); margin:1.6rem 0 .4rem}
.prose ul{list-style:none; padding:0; margin:1.1rem 0}
.prose ul li{padding:.4rem 0 .4rem 1.9rem; position:relative}
.prose ul li::before{content:"✦"; position:absolute; left:0; color:var(--gold)}
.prose .whisper{color:var(--mint); font-style:italic; font-family:var(--serif)}
.prose .lead{font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--ivory)}
.placeholder{border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:1.2rem; color:var(--muted); background:rgba(8,26,36,.4)}

.card-panel{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:clamp(1.4rem,4vw,2.2rem); backdrop-filter:blur(18px); box-shadow:var(--shadow)}
.price-tag{display:inline-flex; align-items:baseline; gap:.5rem; font-family:var(--serif); color:#fff; font-size:2rem}
.price-tag small{font-size:.9rem; color:var(--muted); font-family:var(--sans)}

/* Buchen-Bereich */
.cta-band{margin-top:2rem; text-align:center}

/* Formular */
.field{margin-bottom:1.15rem}
.row2{display:grid; grid-template-columns:1fr; gap:1.15rem}
@media(min-width:560px){ .row2{grid-template-columns:1fr 1fr} }
label.lbl{display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem}
label.lbl .opt{text-transform:none; letter-spacing:0; color:var(--muted)}
input,textarea,select{width:100%; font-family:var(--sans); font-size:16px; color:var(--text); background:rgba(8,26,36,.55); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:.75rem .9rem; transition:border-color .2s, box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--mint); box-shadow:0 0 0 3px rgba(63,217,210,.18)}
textarea{resize:vertical; min-height:96px}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D6B15C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.2rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.drop{border:1.5px dashed var(--line-strong); border-radius:var(--radius-sm); padding:1.4rem; text-align:center; color:var(--muted); cursor:pointer; transition:.2s; font-size:.92rem}
.drop:hover,.drop.over{border-color:var(--mint); background:rgba(63,217,210,.06)} .drop b{color:var(--mint)}
.preview{margin-top:.8rem; display:none} .preview.show{display:block}
.preview img{max-height:220px; border-radius:10px; border:1px solid var(--card-border)}
.hint{color:var(--muted); font-size:.85rem; margin-top:.5rem}
.agb-check{display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; color:var(--text-2); margin:.4rem 0 1rem; line-height:1.5}
.agb-check input{width:auto; margin-top:.25rem; flex:0 0 auto; accent-color:var(--mint); transform:scale(1.15)}
.agb-check a{color:var(--mint); text-decoration:underline}

.loader{display:inline-flex; align-items:center; gap:.7rem; color:var(--muted)}
.spin{width:18px; height:18px; border:2px solid var(--line-strong); border-top-color:var(--mint); border-radius:50%; animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.note{border-radius:var(--radius-sm); padding:.9rem 1.1rem; font-size:.92rem; margin-top:1rem}
.note.warn{background:rgba(214,177,92,.1); border:1px solid var(--line-strong); color:#f0e2bf}
.note.info{background:rgba(142,79,216,.12); border:1px solid rgba(142,79,216,.4); color:#dcccf6}
.note.ok{background:rgba(63,217,210,.1); border:1px solid rgba(63,217,210,.35); color:#bff2ef} .note b{color:var(--text)}

/* Modal + Toast */
.modal{position:fixed; inset:0; z-index:50; display:none; place-items:center; padding:1.2rem; background:rgba(5,20,26,.74); backdrop-filter:blur(4px)}
.modal.open{display:grid}
.modal .box{background:var(--panel-solid); border:1px solid var(--card-border); border-radius:var(--radius); max-width:640px; width:100%; max-height:86vh; overflow:auto; padding:1.8rem clamp(1.3rem,4vw,2.2rem); box-shadow:var(--shadow)}
.modal h2{color:var(--mint); margin-top:0} .modal h3{color:var(--gold); font-size:1.05rem; margin:1.4rem 0 .3rem}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem} .modal-head h2{margin:0; font-size:1.3rem}
.modal .x{background:none; border:1px solid var(--line); color:var(--muted); border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:1.1rem; flex:0 0 auto}
.modal .x:hover{color:var(--mint); border-color:var(--mint)}
#stripe-embed{min-height:280px}
#toast{position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%) translateY(2rem); z-index:60; opacity:0; transition:.3s; background:var(--panel-solid); border:1px solid var(--card-border); color:var(--text); padding:.8rem 1.3rem; border-radius:999px; box-shadow:var(--shadow); font-size:.92rem; pointer-events:none; max-width:90vw}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* Footer */
/* Globaler Footer (volle Breite, unter Sidebar + Content) */
.site-footer{position:relative; z-index:2; margin-top:auto; border-top:1px solid var(--line); color:var(--muted);
  background:linear-gradient(180deg, rgba(6,28,34,.35), rgba(5,30,36,.8))}
.footer-inner{max-width:1120px; margin:0 auto; padding:2.6rem clamp(1.1rem,4vw,2rem) 1.6rem; display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:1.6rem}
@media(max-width:820px){ .footer-inner{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .footer-inner{grid-template-columns:1fr} }
.fcol h4{color:var(--gold); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 .8rem}
.fcol a{display:block; color:var(--text-2); font-size:.92rem; padding:.22rem 0; cursor:pointer; text-decoration:none} .fcol a:hover{color:var(--mint)}
.fcol p{margin:.3rem 0; font-size:.9rem}
.fbrand{display:flex; align-items:center; gap:.55rem; margin-bottom:.3rem}
.fbrand img{width:34px; height:34px; border-radius:8px} .fbrand b{font-family:var(--serif); color:var(--mint); letter-spacing:.14em; font-size:1rem}
.site-footer .fine{font-size:.78rem; line-height:1.6; margin-top:.7rem; max-width:44ch; color:var(--muted)}
.footer-bottom{text-align:center; padding:.9rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); font-size:.8rem; color:var(--muted)}
/* Body als Flex-Spalte, damit der Footer sauber unten sitzt */
html,body{min-height:100%} body{display:flex; flex-direction:column; min-height:100vh}
.layout{flex:1 0 auto}

/* Kundenkonto (Mein Konto) */
.konto-list{display:grid; gap:1rem; margin-top:1.4rem}
.konto-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:1.2rem 1.3rem; backdrop-filter:blur(14px)}
.konto-top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.konto-card h3{margin:0 0 .2rem; font-size:1.12rem; color:var(--text)}
.konto-ref{font-size:.78rem; letter-spacing:.08em; color:var(--muted)}
.konto-meta{margin:.7rem 0 0; font-size:.86rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.4rem 1.1rem}
.konto-meta b{color:var(--text-2); font-weight:600}
.konto-actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.konto-erg{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line)}
.konto-erg p{white-space:pre-wrap; margin:.2rem 0 0; font-size:.94rem; color:var(--text-2)}
/* Status-Pille */
.kpill{display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .8rem; border-radius:999px; font-size:.74rem; font-weight:600; letter-spacing:.03em; border:1px solid var(--line-strong); white-space:nowrap}
.kpill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.kpill.neu{color:#f0e2bf; background:rgba(214,177,92,.1)}
.kpill.bezahlt{color:#bff2ef; background:rgba(63,217,210,.12); border-color:rgba(63,217,210,.4)}
.kpill.in_arbeit{color:#dcccf6; background:rgba(142,79,216,.14); border-color:rgba(142,79,216,.45)}
.kpill.geliefert{color:#9ff0c6; background:rgba(60,200,140,.14); border-color:rgba(60,200,140,.5)}
.kpill.storniert{color:#f0b4b4; background:rgba(220,90,90,.12); border-color:rgba(220,90,90,.4)}

/* Über-mich Porträt */
.zori-intro{display:grid; gap:1.6rem; align-items:start; margin-top:1rem}
@media(min-width:680px){ .zori-intro{grid-template-columns:1fr 300px} .zori-intro .zori-portrait{order:2} }
.zori-portrait{display:block; width:100%; max-width:340px; height:auto; border-radius:var(--radius);
  box-shadow:0 22px 55px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(214,177,92,.35); margin:0 auto}

/* Kundenstimmen */
.kstimmen{display:grid; gap:1rem; margin:1.4rem 0 0}
@media(min-width:680px){ .kstimmen{grid-template-columns:1fr 1fr} .kstimmen.eine{grid-template-columns:1fr} }
.kstimme{background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-sm);
  padding:1.1rem 1.2rem; backdrop-filter:blur(10px)}
.kstars{color:var(--gold); font-size:.95rem; letter-spacing:.15em; margin-bottom:.45rem}
.kstars .off{color:rgba(214,177,92,.28)}
.kstimme p{margin:0; font-size:.95rem; line-height:1.65; color:var(--text-2)}
.kname{margin-top:.65rem !important; font-size:.8rem !important; color:var(--muted) !important}
.kstimmen-titel{font-family:var(--serif); font-weight:500; font-size:1.35rem; margin:2.6rem 0 0; color:var(--text)}

/* Blog-Artikelbild */
.post-hero{display:block; width:100%; height:auto; border-radius:var(--radius); margin:1.2rem 0 .4rem;
  box-shadow:0 18px 45px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(214,177,92,.25)}

@media (prefers-reduced-motion: reduce){ .spin{animation:none} html{scroll-behavior:auto} }