/* Birthday Quest · Yang · „Licht & Wald" — helle Marken-Palette (Johns Wort 15.10.: Yin&Yang Jim&John).
   BA (Jim) = Nacht + Gold (Yin). Quest (John) = Licht + Wald (Yang). Gold bleibt nur Emotions-Akzent „Funke".
   Wird NACH style.css geladen (nur index.html + Landeseiten); konsole/welt haben eigene Looks und laden diese Datei NIE.
   Design-Upgrade 15.10.2026: Premium-Erlebnisprodukt, hell. Die dunklen Gemälde werden als gerahmte „Fenster in die Welt"
   auf den hellen Grund gesetzt. Schrift: System-Serife (Iowan/Palatino), nie Fraunces, keine externen Fonts (Kinder-Riegel). */

:root{
  color-scheme:light;
  --bg:#f7f4ec;            /* Perlweiß */
  --bg2:#eaf0ea;           /* Moos-Tint */
  --bg3:#e9eff3;           /* Himmel-Tint */
  --card:#ffffff;
  --ink:#1b2340;           /* Tinte */
  --dim:#4a5470;
  --stern:#1f6f8b;         /* Sternblau: Eyebrows, Links */
  --teal:#1f6f8b;
  --moos:#2f6f4f;          /* Moosgrün: Knöpfe */
  --moos2:#275c42;
  --bronze:#8f5736;        /* Bronze: Zahlen, Rahmenlinien */
  --gold:#8f5736;
  --rose:#c98a7a;          /* Rosé-Gold: warme Akzente */
  --funke:#e6b85c;         /* Gold nur als Funke */
  --fels:#8fb27a;--nebel:#9fb3c8;--glut:#d9775a;--welle:#4fa3b8;
  --linie:#1b234018;
  --r:20px;--rl:28px;
  --font:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --schatten:0 1px 2px #1b23400a,0 12px 32px -12px #1b234033;
  --schatten-hoch:0 2px 4px #1b23400a,0 32px 64px -24px #1b23404d;
  --welle-oben:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23f7f4ec' d='M0 0h1440v22c-180 30-360 30-540 12S540 0 360 18 120 50 0 36z'/%3E%3C/svg%3E");
  --welle-unten:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23f7f4ec' d='M0 56h1440V34c-180-30-360-30-540-12S540 56 360 38 120 6 0 20z'/%3E%3C/svg%3E");
}

/* ---------- Grundton ---------- */
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:17px/1.65 var(--ui);overflow-x:clip}
h1,h2,h3{font-family:var(--font);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.04;margin:0 0 .5em}
h2{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.1;color:var(--ink);margin:0 0 .35em;max-width:22ch}
h3{font-size:1.25rem;line-height:1.25;margin:0 0 .35em}
p{margin:0 0 1em}
a{color:var(--stern);text-decoration-thickness:1px;text-underline-offset:3px}
.wrap{max-width:1160px;padding:0 16px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .78rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--stern);margin:0 0 14px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--stern);border-radius:2px;opacity:.7}
.lead{font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.6;color:var(--dim);max-width:34rem}
.dim{color:var(--dim)}
.note{font-size:.85rem;color:var(--dim)}
.intro{max-width:40rem;color:var(--dim);font-size:1.08rem;margin-bottom:34px}
[id]{scroll-margin-top:84px}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem/1.2 var(--ui);background:var(--moos);color:#fff;border:0;border-radius:999px;padding:14px 26px;min-height:48px;cursor:pointer;text-decoration:none;box-shadow:0 10px 24px -10px #2f6f4f80;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{background:var(--moos2);transform:translateY(-2px);box-shadow:0 16px 30px -12px #2f6f4f99}
.btn:active{transform:translateY(0)}
.btn.alt{background:#ffffffb3;color:var(--ink);border:1.5px solid #1b234033;box-shadow:none;backdrop-filter:blur(6px)}
.btn.alt:hover{background:#fff;border-color:var(--moos);color:var(--moos2);box-shadow:0 10px 24px -14px #1b234066}
.btn.klein{padding:10px 18px;min-height:44px;font-size:.92rem}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--stern);outline-offset:3px}

/* ---------- Navigation: Glas ---------- */
nav{position:sticky;top:0;z-index:20;background:#f7f4ecd9;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--linie);box-shadow:0 1px 0 #ffffff80 inset}
nav .wrap{display:grid;grid-template-columns:1fr auto;grid-template-areas:"marke cta" "links links";align-items:center;gap:4px 12px;padding-block:10px 0;flex-wrap:nowrap}
nav .marke{grid-area:marke;display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--font);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;padding:4px 0;min-height:44px;margin:0}
nav .marke .sigil{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffffff,#eaf0ea);box-shadow:0 0 0 1px #1b234014,0 4px 10px -4px #1b234040;font-size:1.05rem}
nav .marke small{display:none;font:500 .74rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
nav .links{grid-area:links;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0 8px;margin:0 -16px;padding-inline:16px;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)}
nav .links::-webkit-scrollbar{display:none}
nav .links a{flex:0 0 auto;color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:999px;font:500 .9rem/1.2 var(--ui);min-height:40px;display:inline-flex;align-items:center;white-space:nowrap;transition:background .15s,color .15s}
nav .links a:hover{background:#1b23400d;color:var(--moos2)}
nav .cta{grid-area:cta;justify-self:end}
@media (min-width:900px){
  nav .wrap{grid-template-columns:auto 1fr auto;grid-template-areas:"marke links cta";gap:24px;padding-block:8px}
  nav .marke small{display:block}
  nav .marke span.name{display:flex;flex-direction:column;gap:3px;line-height:1}
  nav .links{justify-content:center;overflow:visible;margin:0;padding:0;mask-image:none}
}

/* ---------- Hero ---------- */
.q-hero{position:relative;overflow:hidden;padding:48px 0 56px;isolation:isolate;
  background:
    radial-gradient(60% 55% at 85% 10%,#d7e6ec 0,transparent 70%),
    radial-gradient(45% 45% at 5% 90%,#e3ede2 0,transparent 70%),
    linear-gradient(180deg,#fbf9f4 0,var(--bg) 100%)}
.q-hero::before{content:"";position:absolute;inset:-20% -10% auto;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 40% at 30% 40%,#ffffffcc,transparent 70%),radial-gradient(35% 35% at 70% 60%,#ffffff99,transparent 70%);
  filter:blur(40px);animation:hauch 18s ease-in-out infinite alternate}
@keyframes hauch{to{transform:translate3d(-6%,4%,0) scale(1.08)}}
.q-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#f7f4ec00,var(--bg))}
.hero-grid{display:grid;gap:36px;align-items:center}
.hero-text{position:relative;z-index:2}
.hero-text .tag{display:inline-flex;align-items:center;gap:8px;background:#ffffffb3;border:1px solid #1b234014;color:var(--stern);font:600 .78rem/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:999px;margin:0 0 22px;box-shadow:0 4px 14px -8px #1b234040}
.hero-text .tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--funke);box-shadow:0 0 0 3px #e6b85c33}
.hero-text h1 em{font-style:italic;color:var(--moos2)}
.hero-text h1.lang{font-size:clamp(2.1rem,4.4vw,3.3rem);letter-spacing:-.015em}
.hero-text h1.lang em{display:block;font-size:.82em;margin-top:.12em}
.hero-text .lead{margin-bottom:28px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.vertrauen{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:.9rem;color:var(--dim)}
.vertrauen li{display:inline-flex;align-items:center;gap:7px}
.vertrauen li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--moos);opacity:.7}

/* Fenster in die Welt (Bildrahmen) */
.fenster{position:relative;display:block;border-radius:var(--rl);overflow:hidden;background:#1b2340;box-shadow:var(--schatten-hoch),0 0 0 1px #1b234022;transform:translateZ(0);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.fenster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fenster::after{content:"";position:absolute;inset:10px;border:1px solid #f7f4ec59;border-radius:calc(var(--rl) - 10px);pointer-events:none;mix-blend-mode:screen}
.fenster::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#f7f4ec00 60%,#1b234055 100%)}
.fenster:hover{transform:perspective(1400px) rotateX(1.2deg) rotateY(-1.6deg) translateY(-3px);box-shadow:0 2px 4px #1b23400a,0 44px 80px -28px #1b234066}
.fenster:hover img{transform:scale(1.045)}
.fenster.bogen{border-radius:220px 220px var(--rl) var(--rl)}
.fenster.bogen::after{border-radius:210px 210px calc(var(--rl) - 10px) calc(var(--rl) - 10px)}

.hero-art{position:relative;margin:0 auto;max-width:640px;width:100%}
.hero-art .fenster{aspect-ratio:4/3}
.hero-art .fenster img{aspect-ratio:4/3}
.chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:10px;background:#ffffffe6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff;border-radius:16px;padding:10px 14px;font:600 .82rem/1.25 var(--ui);color:var(--ink);box-shadow:0 14px 32px -14px #1b234066,0 0 0 1px #1b234010;animation:schweben 7s ease-in-out infinite}
.chip small{display:block;font-weight:500;color:var(--dim);font-size:.74rem}
.chip.oben{top:-14px;left:-10px}
.chip.unten{bottom:-16px;right:-8px;animation-delay:-3.5s}
.chip .punkte{display:flex;gap:4px}
.chip .punkte i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px #1b234022}
.chip .punkte i:nth-child(1){background:var(--funke)}.chip .punkte i:nth-child(2){background:var(--fels)}.chip .punkte i:nth-child(3){background:var(--nebel)}.chip .punkte i:nth-child(4){background:var(--glut)}.chip .punkte i:nth-child(5){background:var(--welle)}
.chip .zahl{font-family:var(--font);font-size:1.5rem;line-height:1;color:var(--bronze)}
@keyframes schweben{50%{transform:translateY(-7px)}}
.funken{position:absolute;inset:0;pointer-events:none;z-index:1}
.funken i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--funke);box-shadow:0 0 10px 2px #e6b85c80;opacity:0;animation:funke 6s ease-in-out infinite}
.funken i:nth-child(1){left:8%;top:70%;animation-delay:0s}
.funken i:nth-child(2){left:22%;top:30%;animation-delay:1.1s;width:4px;height:4px}
.funken i:nth-child(3){left:46%;top:82%;animation-delay:2.3s}
.funken i:nth-child(4){left:68%;top:18%;animation-delay:3.1s;width:5px;height:5px}
.funken i:nth-child(5){left:86%;top:60%;animation-delay:4.2s}
.funken i:nth-child(6){left:58%;top:50%;animation-delay:5s;width:4px;height:4px}
.funken i:nth-child(7){left:32%;top:12%;animation-delay:2.8s;width:3px;height:3px}
@keyframes funke{0%{opacity:0;transform:translateY(12px) scale(.6)}30%{opacity:.95}60%{opacity:.6}100%{opacity:0;transform:translateY(-40px) scale(1.1)}}
@media (min-width:900px){
  .q-hero{padding:64px 0 80px}
  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:48px}
  .hero-art{max-width:none}
  .hero-art .fenster{aspect-ratio:5/4}
  .hero-art .fenster img{aspect-ratio:5/4}
  .chip.oben{top:28px;left:-36px}
  .chip.unten{bottom:34px;right:-28px}
}
@media (min-width:1200px){.hero-grid{gap:64px}}

/* ---------- Sektionen & Rhythmus ---------- */
section{padding:72px 0}
section.tint{position:relative;background:var(--bg2);padding:96px 0}
section.tint.himmel{background:var(--bg3)}
section.tint::before,section.tint::after{content:"";position:absolute;left:0;right:0;height:56px;background:var(--welle-oben) center/100% 100% no-repeat;pointer-events:none}
section.tint::before{top:-1px}
section.tint::after{bottom:-1px;background-image:var(--welle-unten)}
.kopf{margin-bottom:40px}
.kopf.mitte{text-align:center}
.kopf.mitte h2,.kopf.mitte .intro{margin-inline:auto}
.kopf.mitte h2{max-width:26ch;text-wrap:balance}
.kopf h2{text-wrap:balance}
.kopf.mitte .eyebrow{justify-content:center}
.kopf.mitte .eyebrow::before{display:none}
@media (min-width:900px){section{padding:96px 0}section.tint{padding:120px 0}}

/* ---------- Karten ---------- */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card{position:relative;background:linear-gradient(180deg,#ffffff 0,#fdfcf9 100%);border-radius:var(--r);padding:26px 24px 22px;border:1px solid #1b234012;box-shadow:var(--schatten);transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 2px 4px #1b23400a,0 28px 48px -22px #1b234059;border-color:#2f6f4f33}
.card .ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.55rem;line-height:1;margin-bottom:16px;background:radial-gradient(circle at 35% 30%,#ffffff,#eaf0ea 70%);box-shadow:0 0 0 1px #2f6f4f26,0 8px 16px -8px #2f6f4f66,inset 0 -2px 0 #2f6f4f14}
.card h3{color:var(--ink)}
.card p:last-child{margin-bottom:0}
.card .tag{display:inline-block;font:600 .74rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:#eaf0ea;color:var(--moos2)}

/* ---------- Welten: Bildkarten ---------- */
.welten{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.welt{display:flex;flex-direction:column;background:var(--card);border-radius:var(--rl);overflow:hidden;border:1px solid #1b234012;box-shadow:var(--schatten);text-decoration:none;color:var(--ink);transition:transform .35s ease,box-shadow .35s ease}
.welt:hover{transform:translateY(-6px);box-shadow:0 2px 4px #1b23400a,0 36px 60px -26px #1b234066}
.welt .bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:#1b2340}
.welt .bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.welt:hover .bild img{transform:scale(1.06)}
.welt .bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#1b234099 100%)}
.welt .bild .label{position:absolute;left:16px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:8px;color:#fff;font:600 .78rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;background:#1b234080;backdrop-filter:blur(6px);padding:8px 12px;border-radius:999px;border:1px solid #ffffff33}
.welt .text{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.welt .text p{color:var(--dim);margin:0 0 10px}
.welt .mehr{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--moos2);min-height:44px}
.welt .mehr::after{content:"→";transition:transform .25s}
.welt:hover .mehr::after{transform:translateX(4px)}
.welt.bald .mehr{color:var(--dim)}

/* ---------- Die Handvoll ---------- */
.hand-grid{display:grid;gap:40px;align-items:center}
.handvoll{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end;max-width:560px;margin:0 auto;padding:0;list-style:none}
.handvoll li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;border-radius:999px 999px 18px 18px;padding:14px 4px 12px;text-align:center;color:var(--ink);box-shadow:0 1px 0 #ffffff80 inset,0 16px 28px -16px #1b234059;transition:transform .3s ease}
.handvoll li:hover{transform:translateY(-6px)}
.handvoll li .ic{width:40px;height:40px;border-radius:50%;background:#ffffffcc;display:grid;place-items:center;font-size:1.25rem;box-shadow:0 4px 10px -4px #1b234040}
.handvoll li b{display:block;font:600 .9rem/1.1 var(--ui)}
.handvoll li small{display:block;font:600 .66rem/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.handvoll li:nth-child(1){height:168px;background:linear-gradient(180deg,#f2d28c,var(--funke))}
.handvoll li:nth-child(2){height:208px;background:linear-gradient(180deg,#b3cf9f,var(--fels))}
.handvoll li:nth-child(3){height:236px;background:linear-gradient(180deg,#c6d4e2,var(--nebel))}
.handvoll li:nth-child(4){height:212px;background:linear-gradient(180deg,#eaa48c,var(--glut))}
.handvoll li:nth-child(5){height:180px;background:linear-gradient(180deg,#8fc8d8,var(--welle))}
.handvoll li:nth-child(1)::after{content:"★";position:absolute;top:-10px;right:-2px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--funke);font-size:.8rem;display:grid;place-items:center;box-shadow:0 4px 10px -4px #1b234080}
.hand-basis{max-width:560px;margin:10px auto 0;height:22px;border-radius:0 0 40px 40px;background:linear-gradient(180deg,#d9d2c3,#cfc6b4);box-shadow:0 10px 20px -12px #1b234066}
.hand-legende{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin:22px 0 0;padding:0;list-style:none;font-size:.88rem;color:var(--dim)}
.hand-legende li{display:inline-flex;align-items:center;gap:7px}
.hand-legende i{width:10px;height:10px;border-radius:50%}
.hand-art .fenster{aspect-ratio:16/9}
.hand-art .fenster img{aspect-ratio:16/9}
.hand-art figcaption{margin-top:12px;font-size:.85rem;color:var(--dim);text-align:center}
@media (max-width:479px){.handvoll li small{display:none}.handvoll li{padding-top:12px}.handvoll li:nth-child(1){height:140px}.handvoll li:nth-child(2){height:172px}.handvoll li:nth-child(3){height:196px}.handvoll li:nth-child(4){height:176px}.handvoll li:nth-child(5){height:150px}}
@media (min-width:1000px){.hand-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}

/* ---------- Die Reise: Timeline ---------- */
.akte{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.akt{background:var(--card);border-radius:var(--rl);padding:26px 22px 18px;border:1px solid #1b234012;box-shadow:var(--schatten)}
.akt header{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--linie)}
.akt header .num{font-family:var(--font);font-size:1.9rem;line-height:1;color:var(--bronze)}
.akt header h3{margin:0;font-size:1.15rem}
.akt header small{display:block;font:500 .78rem/1.3 var(--ui);color:var(--dim)}
.reise{list-style:none;margin:0;padding:0;position:relative;counter-reset:s}
.reise::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,#2f6f4f55,#1f6f8b33);border-radius:2px}
.reise li{counter-increment:s;position:relative;padding:8px 0 14px 56px;min-height:48px}
.reise li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:6px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 .82rem/1 var(--font);color:var(--bronze);background:radial-gradient(circle at 35% 30%,#fff,#f3eee2);box-shadow:0 0 0 1px #8f573640,0 6px 12px -6px #8f573666,0 0 0 5px var(--card)}
.reise li b{display:block;font:600 1rem/1.3 var(--ui);color:var(--ink)}
.reise li span{display:block;font-size:.9rem;color:var(--dim)}
.reise li.free::before{background:radial-gradient(circle at 35% 30%,#fff,#dff0e4);color:var(--moos2);box-shadow:0 0 0 1px #2f6f4f66,0 6px 12px -6px #2f6f4f66,0 0 0 5px var(--card)}
.reise li .frei{display:inline-block;margin-left:6px;font:600 .66rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--moos);padding:4px 8px;border-radius:999px;vertical-align:middle}
.reise li.gipfel::before{background:radial-gradient(circle at 35% 30%,#fff7e0,var(--funke));color:var(--ink);box-shadow:0 0 0 1px #c9963c,0 6px 14px -6px #e6b85c,0 0 0 5px var(--card)}

/* ---------- Preise ---------- */
.preise{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));align-items:stretch}
.preise .card{display:flex;flex-direction:column;gap:8px}
.preise .card .tag{align-self:flex-start}
.price{font-family:var(--font);font-size:2.4rem;line-height:1.1;color:var(--bronze);margin:6px 0 4px}
.price small{font:500 .85rem/1 var(--ui);color:var(--dim);margin-left:4px}
.preise .card p{color:var(--dim)}
.preise .card.star{background:linear-gradient(180deg,#ffffff,#eef4ef);border-color:#2f6f4f66;box-shadow:0 2px 4px #1b23400a,0 28px 56px -24px #2f6f4f66}
.preise .card.star .tag{background:var(--moos);color:#fff}
.preise .card.star::before{content:"✦ Großes Finale";position:absolute;top:-12px;right:16px;font:600 .68rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--funke);padding:7px 10px;border-radius:999px;box-shadow:0 6px 14px -6px #e6b85c}
.preis-hinweis{display:flex;gap:12px;align-items:flex-start;margin:26px auto 0;max-width:46rem;background:#ffffff99;border:1px solid var(--linie);border-radius:var(--r);padding:14px 18px;font-size:.9rem;color:var(--dim)}
.preis-hinweis .ic{flex:0 0 auto;font-size:1.1rem}

/* ---------- Hütte & Anfrage ---------- */
.haus-grid{display:grid;gap:36px;align-items:start}
.haus-grid .fenster{aspect-ratio:4/5;max-width:520px;margin:0 auto}
.haus-grid .fenster img{aspect-ratio:4/5}
.haus-text .lead{margin-bottom:18px}
.merkmale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:0 0 30px}
.merkmale li{display:flex;align-items:center;gap:10px;background:#ffffffb3;border:1px solid var(--linie);border-radius:14px;padding:10px 12px;font-size:.92rem;min-height:48px}
.merkmale li .ic{width:30px;height:30px;border-radius:50%;background:#eaf0ea;display:grid;place-items:center;font-size:.95rem;flex:0 0 auto}
.anfrage-karte{background:var(--card);border:1px solid #1b234012;border-radius:var(--rl);padding:26px 22px;box-shadow:var(--schatten)}
.anfrage-karte h3{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.anfrage-karte > p{color:var(--dim);font-size:.92rem;margin-bottom:18px}
form{display:grid;gap:14px;max-width:none}
form .zeile{display:grid;gap:14px}
@media (min-width:560px){form .zeile{grid-template-columns:1fr 1fr}}
label{display:block;font:600 .84rem/1.3 var(--ui);color:var(--ink);margin-bottom:6px}
input,select,textarea{font:inherit;background:#fbfaf7;color:var(--ink);border:1.5px solid #1b234033;border-radius:14px;padding:12px 14px;min-height:50px;width:100%;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover{border-color:#1b234066}
input:focus,select:focus{border-color:var(--moos);box-shadow:0 0 0 4px #2f6f4f1f;outline:0}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231b2340' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
form .btn{justify-self:start}
form output{display:block}
form output:empty{display:none}
@media (min-width:960px){.haus-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}.haus-grid .fenster{margin:0}}

/* ---------- Fragen: Akkordeon ---------- */
.faq{max-width:46rem;margin:0 auto}
details{background:var(--card);border:1px solid #1b234012;border-radius:var(--r);padding:0;margin-bottom:12px;box-shadow:var(--schatten);transition:box-shadow .2s}
details[open]{box-shadow:0 2px 4px #1b23400a,0 24px 40px -20px #1b234040}
summary{cursor:pointer;font:600 1.02rem/1.4 var(--ui);padding:18px 60px 18px 22px;position:relative;list-style:none;min-height:56px;display:flex;align-items:center;color:var(--ink);border-radius:var(--r)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:16px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;display:grid;place-items:center;font:400 1.3rem/1 var(--ui);color:var(--moos2);background:#eaf0ea;transition:transform .25s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0;padding:0 22px 20px;color:var(--dim)}

/* ---------- Footer ---------- */
footer{padding:48px 0 40px;color:var(--dim);font-size:.9rem;border-top:1px solid var(--linie);background:linear-gradient(180deg,var(--bg),#f1ede3)}
footer .wrap{display:grid;gap:16px}
footer .marke{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--font);font-weight:600;font-size:1.1rem}
footer .marke small{font:500 .74rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
footer nav{position:static;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
footer nav .wrap{display:flex;flex-wrap:wrap;gap:4px 18px;padding:0}
footer nav a{color:var(--dim);text-decoration:none;padding:8px 0;min-height:44px;display:inline-flex;align-items:center;font-size:.9rem}
footer nav a:hover{color:var(--moos2);text-decoration:underline}
footer .note{margin:0}
@media (min-width:760px){footer .wrap{grid-template-columns:auto 1fr;align-items:center}footer .wrap .note{grid-column:1/-1}}

/* ---------- Landeseite: Geschenk ---------- */
.warum-grid{display:grid;gap:28px;align-items:center}
.warum-grid .text p{font-size:1.05rem;color:var(--dim)}
.warum-grid .text p:first-of-type{font-size:1.15rem;color:var(--ink)}
.zitat{position:relative;background:var(--card);border-radius:var(--rl);padding:34px 28px 26px 30px;border:1px solid #1b234012;box-shadow:var(--schatten);font-family:var(--font);font-size:1.3rem;line-height:1.4;color:var(--ink);max-width:28rem;margin:0 auto}
.zitat::before{content:"„";position:absolute;left:16px;top:-34px;font-family:var(--font);font-size:4.5rem;line-height:1;color:var(--rose);opacity:.55}
.zitat small{display:block;margin-top:14px;font:500 .82rem/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
@media (min-width:900px){.warum-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px}}
.schritte{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.schritte li{counter-increment:s;background:var(--card);border-radius:var(--r);padding:52px 20px 20px;border:1px solid #1b234012;box-shadow:var(--schatten);position:relative;font-size:.95rem;color:var(--dim)}
.schritte li::before{content:counter(s);position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--moos);color:#fff;display:grid;place-items:center;font:600 .9rem/1 var(--font)}
.schritte li b{display:block;color:var(--ink);font:600 1.02rem/1.3 var(--ui);margin-bottom:4px}
.tipps{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tipps li{background:#ffffffb3;border:1px solid var(--linie);border-radius:var(--r);padding:20px 22px;color:var(--dim);font-size:.95rem}
.tipps li b{display:block;color:var(--ink);margin-bottom:4px}
.tipps li .ic{font-size:1.4rem;display:block;margin-bottom:10px}
.band{display:grid;gap:24px;align-items:center;background:linear-gradient(135deg,#ffffff,#eef3ee);border:1px solid #2f6f4f26;border-radius:var(--rl);padding:28px 24px;box-shadow:var(--schatten)}
.band h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.3em}
.band p{color:var(--dim);margin:0}
.band .btn{justify-self:start}
@media (min-width:800px){.band{grid-template-columns:1fr auto;padding:36px 40px}}

/* ---------- Bewegung aus, wenn gewünscht ---------- */
@media (prefers-reduced-motion:reduce){.funken,.q-hero::before{display:none}.chip{animation:none}}

/* ---------- Wissensportal (wissen*.html) ---------- */
.w-hero{padding:72px 0 40px}
.w-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin:8px 0 24px}
.w-card{position:relative;display:block;background:var(--card);border:1px solid var(--linie);border-radius:var(--r);padding:22px 22px 54px;box-shadow:var(--schatten);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.w-card h3{font-size:1.15rem;margin:.2em 0 .4em}
.w-card p{color:var(--dim);font-size:.95rem;margin:0}
.w-nr{font:600 1.5rem/1 var(--font);color:var(--bronze)}
.w-stat{position:absolute;left:22px;bottom:18px;font:600 .82rem/1 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.w-card.fertig .w-stat{color:var(--moos)}
.w-card.fertig:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}
.w-card.bald{background:#ffffffb3;box-shadow:none}
.w-card.bald .w-stat{color:var(--dim)}
.artikel{padding:56px 0 72px}
.artikel .wrap{max-width:760px}
.artikel h1{font-size:clamp(2rem,5vw,3rem);max-width:none}
.artikel p,.artikel li{font-size:1.1rem;line-height:1.75}
.artikel .lead{font-size:1.25rem;color:var(--dim)}
.artikel ul{padding-left:1.2em;margin:0 0 1.2em}
.artikel sup a{text-decoration:none;font-weight:600;padding:0 2px}
.mitmach{background:var(--bg2);border-radius:var(--rl);padding:26px 28px;margin:32px 0;border:1px solid var(--linie)}
.quellen{margin-top:48px;border-top:1px solid var(--linie);padding-top:24px}
.quellen h2{font-size:1.4rem}
.qliste{padding-left:1.4em;font-size:.92rem;color:var(--dim)}
.qliste li{font-size:.92rem;line-height:1.55;margin-bottom:.6em;overflow-wrap:anywhere}
.qliste li:target{background:#e6b85c33;border-radius:6px}

/* ---------- Wissen: Bilder, Diagramme, Infotafeln ---------- */
.bild{margin:28px 0 36px}
.bild img{display:block;width:100%;height:auto;border-radius:var(--rl);box-shadow:var(--schatten-hoch);background:#e9e2d2}
.bild.hoch img{max-width:440px;margin:0 auto}
.bild figcaption{font-size:.84rem;line-height:1.5;color:var(--dim);margin-top:10px}
.fig{margin:34px 0;padding:22px 22px 14px;background:#fff;border:1px solid var(--linie);border-radius:var(--rl);box-shadow:var(--schatten)}
.fig-t{font:600 1.05rem/1.3 var(--font);color:var(--ink);margin:0 0 14px}
.fig-h{font-size:.82rem;line-height:1.5;color:var(--dim);margin:14px 0 4px}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "b b";gap:4px 12px;align-items:baseline}
.bl{grid-area:l;font-size:.98rem}
.bv{grid-area:v;font:600 1rem/1 var(--font);color:var(--bronze)}
.bt{grid-area:b;display:flex;height:14px;background:#1b23400d;border-radius:99px;overflow:hidden}
.bt i{background:var(--moos);border-radius:99px 0 0 99px;min-width:3px}
.bt u{background:repeating-linear-gradient(45deg,#2f6f4f66 0 4px,#2f6f4f33 4px 8px);text-decoration:none}
.kzs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kz{background:var(--bg);border-radius:var(--r);padding:16px 16px 14px;border:1px solid var(--linie)}
.kz b{display:block;font:600 1.9rem/1.1 var(--font);color:var(--moos);margin-bottom:4px}
.kz strong{display:block;font:600 1rem/1.3 var(--font);margin-bottom:4px}
.kz span{font-size:.92rem;line-height:1.45;color:var(--dim)}
.stack{display:flex;height:34px;border-radius:99px;overflow:hidden;border:1px solid var(--linie)}
.stack i{display:block;height:100%}
.s0{background:var(--moos)}.s1{background:var(--rose)}.s2{background:#fff;border:2px solid var(--moos)}
.stack .s2{background:#f1d9d1}
.leg{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem}
.pkt{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;border:2px solid var(--moos)}
.pkt.s0{background:var(--moos)}.pkt.s1{background:var(--rose);border-color:var(--rose)}.pkt.s2{background:#fff}
.tw{overflow-x:auto}
.tafel{width:100%;border-collapse:collapse;font-size:.98rem}
.tafel th{text-align:left;font:600 .82rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--stern);padding:8px 10px;border-bottom:2px solid var(--linie)}
.tafel td{padding:10px;border-bottom:1px solid var(--linie)}
.tafel tr:last-child td{border-bottom:0;background:#e6b85c1f}
.personen{display:block;width:100%;max-width:330px;height:auto;margin:4px 0}
.personen .p circle,.personen .p path{stroke:var(--moos);stroke-width:2.5}
.personen .p.an circle,.personen .p.an path{fill:var(--moos)}
.personen .p.aus circle,.personen .p.aus path{fill:#fff}
.pendel{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.pendel .balken{fill:var(--bronze)}
.pendel .pe line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.pendel .pe.a circle{fill:var(--funke);stroke:var(--bronze);stroke-width:2.5}
.pendel .pe.b circle{fill:var(--moos);stroke:var(--moos2);stroke-width:2.5}
.pendel .pv{fill:var(--ink)}
.pendel .pe{transform-box:view-box;animation:pend 1.6s ease-in-out infinite alternate}
.pendel .pe.a{transform-origin:140px 30px}
.pendel .pe.b{transform-origin:280px 30px;animation-delay:-1.6s}
@keyframes pend{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}
@media (prefers-reduced-motion:reduce){.pendel .pe{animation:none}.pendel .pe.a{transform:rotate(-12deg)}.pendel .pe.b{transform:rotate(12deg)}}
.zeit{list-style:none;margin:0;padding:0 0 0 6px;border-left:3px solid var(--linie);display:grid;gap:16px;margin-left:8px}
.zeit li{position:relative;padding-left:22px;display:grid;gap:2px}
.zeit li::before{content:"";position:absolute;left:-12px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--funke);border:3px solid var(--bronze)}
.zeit time{font:600 .95rem/1.2 var(--font);color:var(--bronze)}
.zeit span{font-size:.97rem;line-height:1.5}

/* ---------- Vorschaubilder, Weiterlesen, Karten mit Bild ---------- */
.w-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.w-card{padding:0 22px 54px;overflow:hidden}
.w-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e9e2d2;margin:0 -22px 16px;border-bottom:1px solid var(--linie)}
.w-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.w-card.fertig:hover .w-thumb img,.w-mini-card:hover .w-thumb img,.w-pn-card:hover .w-thumb img{transform:scale(1.05)}
.w-thumb.art svg{display:block;width:100%;height:100%}
.w-card .w-nr{display:inline-block;margin-bottom:2px}
.w-chips{display:block;margin-top:10px;font-size:.78rem;color:var(--dim)}
.w-card.bald .w-thumb{opacity:.75}
.weiter{padding:48px 0 72px;background:var(--bg2)}
.weiter .wrap{max-width:1000px}
.weiter h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:18px;max-width:none}
.w-pn{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.w-pn-card,.w-mini-card{display:block;background:#fff;border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .2s,box-shadow .2s}
.w-pn-card:hover,.w-mini-card:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.w-pn-card .w-thumb,.w-mini-card .w-thumb{margin:0 0 12px}
.w-pn-card .w-dir{display:block;margin:0 18px 4px;font:600 .78rem/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--moos)}
.w-pn-card b{display:block;margin:0 18px;font:600 1.12rem/1.3 var(--font)}
.w-pn-card .w-sub{display:block;margin:6px 18px 18px;font-size:.85rem;color:var(--dim)}
.w-pn-card:not(:has(.w-thumb)){padding-top:22px}
.w-mehr{margin:34px 0 14px;font-size:1.2rem}
.w-mini{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.w-mini-card b{display:block;margin:0 14px 14px;font:600 .98rem/1.3 var(--font)}
.card.mit-bild{padding:0;overflow:hidden}
.card.mit-bild .a-thumb{aspect-ratio:16/10;overflow:hidden;margin-bottom:14px}
.card.mit-bild .a-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card.mit-bild:hover .a-thumb img{transform:scale(1.05)}
.card.mit-bild .ic,.card.mit-bild h3,.card.mit-bild p{margin-left:20px;margin-right:20px}
.card.mit-bild p{margin-bottom:20px}
.card.mit-bild .ic{margin-top:-30px;position:relative;width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--schatten);margin-bottom:10px;font-size:1.5rem}
.start-wissen .w-grid{margin-top:8px}