@font-face{font-family:"Poppins";src:url("fonts/Poppins-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/Lora-Italic-Variable.woff") format("woff");font-weight:400 700;font-style:italic;font-display:swap}
:root{
  --nacht:#141d36; --nacht-2:#1d2a4b; --nacht-3:#0d1428;
  --mond:#f6efe0; --schnee:#b9c4da;
  --gold:#f0b54a; --gold-hell:#ffd27d;
  --ziegel:#b24a33;
  --papier:#f7f2e8; --papier-2:#efe6d4; --tinte:#1c2033; --tinte-2:#5a5e72;
  --rand:clamp(18px,5vw,64px); --breite:1200px; --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Poppins",system-ui,sans-serif;font-size:1.0625rem;line-height:1.7;color:var(--tinte);background:var(--papier);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0 0 .45em;text-wrap:balance}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h3{font-size:1.15rem;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 1em;max-width:60ch}
.buchschrift{font-family:"Lora",Georgia,serif;font-style:italic;font-weight:500}
.leise{color:var(--tinte-2)}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:20;background:rgba(20,29,54,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--mond);border-bottom:1px solid rgba(255,255,255,.06)}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.marke{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.marke svg{width:26px;height:26px}
.navi{display:flex;align-items:center;gap:1.6rem;font-size:.95rem}
.navi a{text-decoration:none;color:var(--schnee)}
.navi a:hover{color:var(--mond)}
@media (max-width:760px){.navi .neben{display:none}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;background:var(--gold);color:var(--nacht-3);font:inherit;font-weight:500;text-decoration:none;padding:.85em 1.6em;border-radius:999px;border:0;cursor:pointer;box-shadow:0 8px 24px rgba(240,181,74,.25);transition:transform .15s,background .2s}
.knopf:hover{background:var(--gold-hell);transform:translateY(-1px)}
.knopf.klein{padding:.5em 1.15em;font-size:.92rem;box-shadow:none}
.navi .knopf{color:var(--nacht-3)}

/* Startbereich */
.start{position:relative;overflow:hidden;color:var(--mond);
  background:
    radial-gradient(2px 2px at 12% 18%,#f7d98c 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 62%,#e9d6a6 50%,transparent 51%),
    radial-gradient(2px 2px at 46% 12%,#f7d98c 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 40%,#e9d6a6 50%,transparent 51%),
    radial-gradient(2px 2px at 82% 22%,#f7d98c 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 70%,#e9d6a6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 7% 82%,#e9d6a6 50%,transparent 51%),
    radial-gradient(ellipse 80% 70% at 75% 15%,#2b3b6b 0%,transparent 60%),
    var(--nacht)}
.start .innen{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center;padding-top:clamp(2.5rem,7vw,6rem);padding-bottom:clamp(3rem,8vw,7rem)}
@media (min-width:940px){.start .innen{grid-template-columns:1.05fr .95fr}}
.start h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
.start .unter{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--schnee);max-width:34rem}
.karte{margin-top:2rem;padding:1.4rem;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);max-width:32rem}
.karte label{display:block;font-size:.9rem;color:var(--schnee);margin-bottom:.4rem}
.karte input[type=text]{width:100%;font:inherit;font-size:1.15rem;padding:.7em .95em;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(10,16,34,.55);color:var(--mond)}
.karte input[type=text]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(240,181,74,.2)}
.waehler{display:flex;gap:.7rem;margin:.4rem 0 1.4rem;padding:0;border:0}
.waehler legend{font-size:.9rem;color:var(--schnee);margin-bottom:.5rem;padding:0}
.waehler input{position:absolute;opacity:0;width:1px;height:1px}
.waehler label{margin:0;cursor:pointer}
.waehler img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.12);transition:box-shadow .2s,transform .2s}
.waehler input:checked+img{box-shadow:0 0 0 3px var(--gold),0 0 18px rgba(240,181,74,.45);transform:scale(1.06)}
.waehler input:focus-visible+img{outline:3px solid var(--gold);outline-offset:4px}
.zeile{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.2rem}
.zeile .preis{font-size:.95rem;color:var(--schnee);line-height:1.4}
.zeile .preis strong{display:block;color:var(--mond);font-size:1.1rem;font-weight:500}

/* Buch im Startbereich: 3D-Hardcover */
.buch{position:relative;isolation:isolate;perspective:1700px;display:flex;justify-content:center;padding:1rem 0 3.5rem}
.buch::after{content:"";position:absolute;bottom:.6rem;left:50%;width:min(64vw,440px);height:46px;transform:translateX(-54%);background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);filter:blur(5px);z-index:-1}
.buchkoerper{--w:min(74vw,500px);--d:26px;position:relative;width:var(--w);height:var(--w);transform-style:preserve-3d;transform:rotateX(-7deg) rotateY(-24deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.buch:hover .buchkoerper{transform:rotateX(-4deg) rotateY(-12deg)}
.flaeche{position:absolute;backface-visibility:hidden}
.vorne{inset:0;transform:translateZ(calc(var(--d) / 2));border-radius:2px 7px 7px 2px;overflow:hidden;background:#0e1630;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.vorne img{width:100%;height:100%;object-fit:cover}
/* Falz neben dem Rücken und matte Lamination */
.vorne::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.15) 2.2%,rgba(255,255,255,.18) 3.4%,rgba(0,0,0,.28) 4.6%,rgba(255,255,255,.07) 5.6%,transparent 8%),
  linear-gradient(115deg,rgba(255,255,255,.14) 0%,transparent 35%,transparent 70%,rgba(0,0,0,.18) 100%)}
.vorne .titel{position:absolute;z-index:2;inset:0 0 auto 0;padding:1.5rem 1.4rem 3.6rem 2.4rem;font-size:clamp(1.4rem,2.7vw,2rem);line-height:1.15;color:var(--mond);text-shadow:0 2px 12px rgba(0,0,0,.4);background:linear-gradient(rgba(10,16,34,.8),transparent)}
.hinten{inset:0;transform:rotateY(180deg) translateZ(calc(var(--d) / 2));background:#101934;border-radius:7px 2px 2px 7px}
.ruecken{top:0;left:calc(50% - var(--d) / 2);width:var(--d);height:100%;transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));background:linear-gradient(90deg,#0b1229 0%,#24325c 45%,#18234a 70%,#0b1229 100%);border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ruecken>span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Lora",Georgia,serif;font-style:italic;font-size:.72rem;color:var(--gold);white-space:nowrap;letter-spacing:.02em}
/* Seitenblock: oben, unten und an der offenen Seite sieht man das Papier zwischen den Buchdeckeln */
.oben,.unten{left:0;width:100%;height:var(--d);top:calc(50% - var(--d) / 2);
  background:linear-gradient(180deg,#0e1630 0 3px,transparent 3px calc(100% - 3px),#0e1630 calc(100% - 3px)),
  linear-gradient(90deg,#0e1630 0 4px,transparent 4px calc(100% - 5px),#0e1630 calc(100% - 5px)),
  repeating-linear-gradient(180deg,#f4ecda 0 1.6px,#ddd0b4 1.6px 2.4px)}
.oben{transform:rotateX(90deg) translateZ(calc(var(--w) / 2))}
.unten{transform:rotateX(-90deg) translateZ(calc(var(--w) / 2))}
.seiten{top:0;left:calc(50% - var(--d) / 2);width:var(--d);height:100%;transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
  background:linear-gradient(90deg,#0e1630 0 3px,transparent 3px calc(100% - 3px),#0e1630 calc(100% - 3px)),repeating-linear-gradient(90deg,#f4ecda 0 1.6px,#ddd0b4 1.6px 2.4px)}

/* breites Bild */
.panorama{background:var(--nacht);padding:0 0 clamp(3rem,7vw,6rem)}
.panorama figure{margin:0 auto;max-width:1320px;padding:0 var(--rand)}
.panorama img{border-radius:28px;width:100%}
.panorama figcaption{color:var(--schnee);text-align:center;margin-top:1rem;font-size:1.05rem}

/* Geschichte als Bildreihe */
.nacht{background:var(--nacht);color:var(--mond)}
.nacht p{color:var(--schnee)}
.geschichte{padding:clamp(3rem,7vw,6rem) 0 clamp(1rem,2.5vw,2rem)}
.reihe{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem var(--rand) 1.5rem;margin-top:1.5rem;scrollbar-width:thin;scrollbar-color:#3a4a78 transparent}
.reihe figure{flex:0 0 min(82vw,760px);margin:0;scroll-snap-align:center}
.reihe img{border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.reihe figcaption{margin-top:1rem;color:var(--schnee);max-width:52ch;font-size:1rem}
.reihe figcaption b{color:var(--mond);font-weight:500;display:block}
.wisch{font-size:.9rem;color:var(--schnee);margin-top:.2rem}

/* Morgen */
.daemmerung{height:clamp(70px,9vw,120px);background:linear-gradient(var(--nacht),#3a4271 40%,#c08f7d 78%,var(--papier))}
.abschnitt{padding:clamp(3.5rem,8vw,6.5rem) 0}
.abschnitt.nach-daemmerung{padding-top:clamp(1.5rem,4vw,3rem)}
.abschnitt.zart{background:var(--papier-2)}
.persoenlich{display:grid;gap:3rem;align-items:center}
@media (min-width:900px){.persoenlich{grid-template-columns:1fr 1fr}}
.haken{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.7rem}
.haken li{display:flex;gap:.8rem;align-items:flex-start}
.haken li::before{content:"";flex:0 0 22px;height:22px;margin-top:.2rem;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23141d36' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.kreise{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 1.2rem;text-align:center;font-size:.9rem;color:var(--tinte-2)}
.kreise.drei{grid-template-columns:repeat(3,1fr);margin-top:2rem}
.kreise img{width:100%;max-width:150px;margin:0 auto .5rem;border-radius:50%;box-shadow:0 10px 30px rgba(60,40,10,.12)}
.schritte{counter-reset:s;list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.2rem}
@media (min-width:820px){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritte li{counter-increment:s;background:#fffaf0;border-radius:var(--radius);padding:1.5rem;color:var(--tinte-2);font-size:.98rem}
.schritte li::before{content:counter(s);display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--nacht);color:var(--gold);font-weight:700;margin-bottom:1rem}
.schritte h3{color:var(--tinte)}
.zwei{display:grid;gap:1.4rem}
@media (min-width:820px){.zwei{grid-template-columns:1fr 1fr}}
.kachel{border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem);background:#fffaf0}
.kachel.dunkel{background:var(--nacht);color:var(--mond)}
.kachel.dunkel p{color:var(--schnee)}
.kachel .gross{font-size:clamp(2.2rem,4vw,3rem);font-weight:700;letter-spacing:-.03em;color:var(--gold);line-height:1.1;margin:.2rem 0 .6rem}
.liste{padding-left:1.2rem;margin:0}
.liste li{margin-bottom:.4rem}
.fragen{max-width:820px}
details{border-bottom:1px solid #ddd0b6;padding:1.1rem 0}
summary{cursor:pointer;font-weight:500;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--ziegel);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:.7rem 0 0;color:var(--tinte-2)}

/* Bestellen */
.bestellen{position:relative;text-align:center;padding:clamp(4rem,9vw,7.5rem) 0;overflow:hidden;background:radial-gradient(ellipse 60% 70% at 50% 0%,#3a3f6a 0%,transparent 70%),var(--nacht)}
.bestellen p{margin-left:auto;margin-right:auto}
.bestellen .knopfreihe{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.landeplatz{width:120px;height:120px;margin:0 auto 1.5rem;border-radius:50%;background:radial-gradient(circle,rgba(255,210,125,.55) 0%,rgba(240,181,74,.18) 45%,transparent 70%)}

/* Fuß */
.fuss{background:var(--nacht-3);color:var(--schnee);font-size:.92rem;padding:2rem 0}
.fuss .innen{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.fuss nav{display:flex;gap:1.5rem;flex-wrap:wrap}

/* Unterseiten */
.recht{padding:3rem 0 5rem}
.recht h1{font-size:2.4rem}
.recht h2{font-size:1.35rem;margin-top:2rem}
.platzhalter{background:#ffe9a8;padding:0 .3em;border-radius:4px}

/* Der Leitstern begleitet beim Scrollen */
.leitstern{position:fixed;top:0;right:clamp(10px,3vw,48px);width:46px;height:46px;z-index:15;pointer-events:none;--glanz:1;will-change:transform}
.leitstern::before{content:"";position:absolute;inset:-130%;border-radius:50%;background:radial-gradient(circle,rgba(255,214,130,.55) 0%,rgba(240,181,74,.18) 35%,transparent 65%);opacity:calc(var(--glanz) * .9);transform:scale(calc(.55 + var(--glanz) * .55));transition:opacity .6s,transform .6s}
.leitstern svg{position:relative;width:100%;height:100%;filter:drop-shadow(0 0 calc(var(--glanz) * 14px) rgba(255,210,125,.9)) saturate(calc(.5 + var(--glanz) * .5)) brightness(calc(.7 + var(--glanz) * .35));transition:filter .6s}
@media (max-width:700px){.leitstern{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}