/* ============================================================
   LANARIA – Design-System
   ============================================================ */
@font-face{font-family:"GFS Baskerville";src:local("GFS Baskerville"),local("GFSBaskerville");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("../assets/fonts/libre-baskerville-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("../assets/fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url("../assets/fonts/poppins-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url("../assets/fonts/poppins-latin-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url("../assets/fonts/poppins-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("../assets/fonts/poppins-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
/* Kyrillisch (nur für RU/UA nötig; der Browser nimmt sie automatisch, wenn Poppins/Baskerville die Zeichen nicht haben) */
@font-face{font-family:"Montserrat";src:url("../assets/fonts/montserrat-cyrillic-var.woff2") format("woff2");font-weight:300 500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";src:url("../assets/fonts/lora-cyrillic-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";src:url("../assets/fonts/lora-cyrillic-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Caveat";src:url("../assets/fonts/caveat-cyrillic-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Caveat";src:url("../assets/fonts/caveat-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --cream:#F7F1E5;
  --cream-2:#F1E8D6;
  --gold:#C9A24B;
  --gold-deep:#A9822F;
  --espresso:#3B2A20;
  --espresso-soft:#6B5748;
  --font-head:"GFS Baskerville","Libre Baskerville","Lora",Georgia,serif;
  --font-body:"Poppins","Montserrat",system-ui,-apple-system,sans-serif;
  --font-hand:"Caveat","Bradley Hand",cursive;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  position:relative;margin:0;color:var(--espresso);
  font-family:var(--font-body);font-weight:300;font-size:clamp(16px,1.05vw + 10px,18px);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-head);font-weight:400;line-height:1.2;margin:0}
::selection{background:var(--gold);color:#fff}


/* Seitenhintergrund (scrollt mit): Papierkorn-Kachel über großen Aquarell-Flecken, die sich alle 1400 px wiederholen; Inhalt liegt darüber, nichts wird überdeckt */
html{background-color:#F7F0E4;
  background-image:
    url("../assets/img/papier-textur.png"),
    radial-gradient(ellipse 54% 19% at 12% 21%,rgba(241,220,200,.95) 0,rgba(241,220,200,0) 100%),
    radial-gradient(ellipse 48% 17% at 90% 38%,rgba(231,235,221,.95) 0,rgba(231,235,221,0) 100%),
    radial-gradient(ellipse 56% 20% at 76% 70%,rgba(243,226,210,1) 0,rgba(243,226,210,0) 100%),
    radial-gradient(ellipse 46% 10% at 10% 90%,rgba(231,235,221,.85) 0,rgba(231,235,221,0) 100%),
    radial-gradient(ellipse 42% 15% at 50% 54%,rgba(241,220,200,.7) 0,rgba(241,220,200,0) 100%);
  background-size:600px 600px,100% 1400px,100% 1400px,100% 1400px,100% 1400px,100% 1400px;
  background-repeat:repeat,repeat-y,repeat-y,repeat-y,repeat-y,repeat-y}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(14px + env(safe-area-inset-top)) var(--gutter) 14px;
  transition:background .5s var(--ease),transform .6s var(--ease);
}
.site-header.solid{background:rgba(247,241,229,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(201,162,75,.25)}
.brand img{height:34px;width:auto}
.header-cta{
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--espresso);
  padding:.7em 1.4em;border:1px solid var(--gold);border-radius:99px;background:rgba(247,241,229,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .4s,color .4s;
}

.main-nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.main-nav ul{display:flex;gap:clamp(16px,2.2vw,34px);margin:0;padding:0;list-style:none}
.main-nav ul a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--espresso);padding:.5em 0;position:relative}
.main-nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.main-nav ul a:hover::after{transform:scaleX(1)}
.burger{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;position:relative;z-index:70}
.burger span{position:absolute;left:10px;right:10px;height:1px;background:var(--espresso);transition:transform .5s var(--ease),top .5s var(--ease)}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
.site-header.open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.site-header.open .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}
@media (max-width:1080px){
  .burger{display:block}
  .main-nav{position:fixed;inset:0;z-index:60;background:var(--cream);flex-direction:column;justify-content:center;gap:40px;
    opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
  .site-header.open .main-nav{opacity:1;visibility:visible}
  .main-nav ul{flex-direction:column;align-items:center;gap:6px}
  .main-nav ul a{font-family:var(--font-head);font-size:1.7rem;letter-spacing:.02em;text-transform:none;padding:.35em 0}
  .lang{font-size:.9rem}
  .site-header .brand{position:relative;z-index:70}
}
.lang{display:flex;align-items:center;gap:.55em;font-size:.76rem;letter-spacing:.16em;font-weight:400;color:var(--espresso-soft)}
.lang a{padding:.55em .15em;position:relative;transition:color .3s}
.lang a::after{content:"";position:absolute;left:.15em;right:.15em;bottom:.2em;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .4s var(--ease)}
.lang a:hover{color:var(--gold-deep)}
.lang a:hover::after,.lang a[aria-current]::after{transform:scaleX(1)}
.lang a[aria-current]{color:var(--gold-deep);font-weight:500}
.lang span{color:var(--gold);opacity:.7}
@media (max-width:480px){.site-header{padding-left:16px;padding-right:8px}.brand img{height:28px}}

/* ===== HERO: Foto → Ausmalbild ===== */
.hero{padding:clamp(92px,13vh,130px) var(--gutter) clamp(40px,7vh,80px)}
.hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,6vw,96px)}
.hero-title{font-size:clamp(2rem,4.4vw,3.9rem);letter-spacing:-.01em;color:var(--espresso);line-height:1.15}
.hero-title .line{display:block}
.hero-title em{font-style:italic;color:var(--gold-deep)}
.hero-lead{margin:1.4em 0 0;max-width:30ch;font-size:clamp(1.02rem,1.5vw,1.25rem);color:var(--espresso-soft);line-height:1.65}
.hero-actions{margin-top:clamp(24px,4vh,40px);display:flex;flex-wrap:wrap;gap:12px}
.hero-btn{
  display:inline-flex;align-items:center;gap:.8em;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--espresso);
  padding:1em 2em;border:1px solid var(--gold);border-radius:99px;transition:background .4s,color .4s,border-color .4s;
}
.hero-btn:hover{background:var(--gold);color:#fff}
.hero-btn--solid{background:var(--gold);color:#fff}
.hero-btn--solid:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.ba-wrap{margin:0;justify-self:end}
.ba-wrap figcaption{margin-top:14px;text-align:center;font-family:var(--font-head);font-style:italic;color:var(--gold-deep);font-size:1rem}
.morph{
  --lx:50%;--ly:30%;--lr:95px;position:relative;height:min(76svh,680px);aspect-ratio:1095/1493;overflow:hidden;border-radius:18px;background:#fff;
  box-shadow:0 30px 60px -30px rgba(59,42,32,.45);touch-action:none;cursor:none;-webkit-user-select:none;user-select:none;
}
.morph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;max-width:none}
/* Zauberlupe: Ausmalbild nur im Kreis, Rand 2 px weich */
.morph-after{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 calc(var(--lr) - 2px),transparent var(--lr));
          mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),#000 calc(var(--lr) - 2px),transparent var(--lr))}
.lens-ring{position:absolute;left:0;top:0;width:calc(var(--lr)*2);height:calc(var(--lr)*2);margin:calc(var(--lr)*-1) 0 0 calc(var(--lr)*-1);
  transform:translate(var(--lx),var(--ly));border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 1.5px #C9A24B,0 10px 26px -6px rgba(59,42,32,.4),inset 0 0 14px rgba(255,255,255,.28);
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.34),rgba(255,255,255,0) 38%)}
.cap-touch{display:none}
@media (hover:none),(pointer:coarse){.cap-mouse{display:none}.cap-touch{display:inline}.morph{--lr:75px}}
@media (max-width:860px){
  .hero{padding-top:calc(84px + env(safe-area-inset-top))}
  .hero-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .hero-lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .ba-wrap{justify-self:center;width:min(100%,460px)}
  .morph{height:auto;width:100%}
  .hero-text{display:contents}
  .hero-title{order:1}.hero-lead{order:2}.ba-wrap{order:3}.hero-actions{order:4}
  .hero-grid{display:flex;flex-direction:column;align-items:center}
}

/* Abschnitte allgemein */
.sec-title{font-size:clamp(1.8rem,3.4vw,2.6rem);text-align:center;margin-bottom:clamp(28px,5vh,52px)}

/* So entsteht dein Geschenk */
.steps{padding:clamp(32px,5vh,64px) var(--gutter)}
.steps-grid{max-width:1100px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.95fr);gap:clamp(20px,3vw,44px)}
@media (max-width:860px){.steps-grid{grid-template-columns:1fr 1fr}.step-pack{grid-column:1/-1}}
@media (max-width:520px){.steps-grid{grid-template-columns:1fr}.steps-grid .step-pack{grid-template-columns:minmax(0,1fr) 112px}}
.steps-grid li{border-top:1px solid var(--gold);padding-top:18px}
.step-n{display:block;font-family:var(--font-head);font-size:2.4rem;color:var(--gold);line-height:1;margin-bottom:.5em}
.steps-grid h3{font-size:1.2rem;margin-bottom:.4em}
.step-pack{display:grid;grid-template-columns:minmax(0,1fr) clamp(112px,11vw,148px);gap:clamp(14px,2vw,26px);align-items:start}
.pack-video{aspect-ratio:9/16;border-radius:18px;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);
  border:1px solid rgba(201,162,75,.7);background:var(--cream-2);box-shadow:0 22px 34px -22px rgba(59,42,32,.45),0 6px 14px -8px rgba(59,42,32,.2)}
.pack-video video{display:block;width:100%;height:100%;object-fit:cover}
.steps-grid p{margin:0;color:var(--espresso-soft);font-size:.95rem;line-height:1.6}

/* ===== BLÄTTER MAL REIN ===== */
.peek{padding:clamp(40px,6vh,72px) var(--gutter)}
.peek-grid{
  max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:clamp(40px,8vw,120px);
}
.peek-text{max-width:30ch;justify-self:end}
.peek-title{font-size:clamp(2rem,4.2vw,3.2rem);color:var(--espresso)}
.peek-caption{margin:1.1em 0 1.8em;color:var(--espresso-soft);font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.7}
.sound-btn{
  display:inline-flex;align-items:center;gap:.9em;font:inherit;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  color:var(--espresso);background:rgba(247,241,229,.6);border:1px solid var(--gold);border-radius:99px;
  padding:.85em 1.6em .85em 1.3em;cursor:pointer;transition:background .4s,color .4s;
}
.sound-btn:hover,.sound-btn[aria-pressed="true"]{background:var(--gold);color:#fff}
.wave{display:inline-flex;align-items:center;gap:3px;height:18px}
.wave i{display:block;width:2px;height:100%;background:currentColor;color:var(--gold);border-radius:2px;transform:scaleY(.25);animation:wave 1.6s ease-in-out infinite}
.sound-btn:hover .wave i,.sound-btn[aria-pressed="true"] .wave i{background:#fff}
.wave i:nth-child(1){animation-delay:-.2s}.wave i:nth-child(2){animation-delay:-.7s}.wave i:nth-child(3){animation-delay:-.4s}
.wave i:nth-child(4){animation-delay:-1s}.wave i:nth-child(5){animation-delay:-.1s}
.sound-btn[aria-pressed="true"] .wave i{animation-duration:.8s}
.wave i{background:var(--gold)}
@keyframes wave{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(.85)}}
.sound-btn[aria-pressed="true"] .wave i{animation-name:wave-on}
@keyframes wave-on{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* Rahmen: 9:16, nie beschnitten */
.peek-frame{
  position:relative;padding:10px;border-radius:30px;background:rgba(251,247,238,.7);
  box-shadow:0 30px 60px -28px rgba(59,42,32,.35),0 8px 24px -12px rgba(59,42,32,.18);
  height:min(80svh,780px);aspect-ratio:9/16;
}
.frame-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.frame-line rect{width:calc(100% - 2px);height:calc(100% - 2px)}
/* Safari-sicher: Rundung direkt am Video, kein overflow:hidden um ein Video mit Transform/Opacity */
.peek-video{width:100%;height:100%;background:var(--cream-2);border-radius:6px}
.peek-video video{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px;background:var(--cream-2)}
html.js:not(.calm) .peek-frame{box-shadow:none}
html.js:not(.calm) .peek-video{opacity:0}
@media (max-width:860px){
  .peek-grid{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center}
  .peek-text{max-width:34ch;justify-self:center}
  .peek-frame{height:auto;width:min(100%,430px)}
  .peek{padding-left:12px;padding-right:12px}
  .peek-text{padding:0 8px}
}

/* Fotomagnet: Video links, Text rechts */
.peek--rev .peek-grid{grid-template-columns:auto 1fr}
.peek--rev .peek-frame{order:-1}
.peek--rev .peek-text{justify-self:start;max-width:36ch}
.peek-turn{font-family:var(--font-head);font-style:italic;font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--gold-deep);margin:1.2em 0 .6em;line-height:1.35}
.peek-note{font-style:italic;font-size:.95rem}
.peek + .peek, .notiz + .peek{background:none}
@media (max-width:860px){.peek--rev .peek-frame{order:0}.peek--rev .peek-text{justify-self:center}}

/* Icons */
.ico{color:var(--gold);flex:none}
.icon-list{list-style:none;margin:1.2em 0 1.4em;padding:0;display:grid;gap:14px;text-align:left}
.icon-list li{display:flex;align-items:center;gap:14px;color:var(--espresso)}
.icon-list--row{grid-auto-flow:column;gap:clamp(18px,4vw,56px);justify-content:center;margin:2em auto}
@media (max-width:860px){.icon-list--row{grid-auto-flow:row;justify-content:start;width:fit-content;max-width:100%}}

.sec-head{max-width:720px;margin:0 auto clamp(32px,6vh,64px);text-align:center}
.sec-head .peek-caption{margin-bottom:0}

/* Notizbücher */
.notiz{padding:clamp(40px,6vh,72px) var(--gutter)}
.notiz-head{max-width:760px;margin:0 auto;text-align:center}
.notiz-head .peek-caption{margin:1em 0}
.gallery{max-width:1100px;margin:clamp(28px,5vh,56px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px)}
.shot{margin:0;border-radius:6px 22px 8px 20px;overflow:hidden;border:1px solid rgba(201,162,75,.55);background:#fff;padding:7px;
  box-shadow:0 18px 34px -22px rgba(59,42,32,.4)}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px 16px 6px 14px}
.shot.s1{transform:rotate(-1deg)}.shot.s2{transform:rotate(.8deg) translateY(14px)}.shot.s3{transform:rotate(-.6deg)}
.shot.s4{transform:rotate(.9deg)}.shot.s5{transform:rotate(-.8deg) translateY(10px)}.shot.s6{transform:rotate(.6deg)}
@media (max-width:620px){.gallery{grid-template-columns:repeat(2,1fr)}}
.notiz-video{display:flex;justify-content:center;margin-top:clamp(36px,7vh,80px)}

/* Preise */
.prices{padding:clamp(56px,10vh,120px) var(--gutter)}
.price-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,32px)}
@media (max-width:760px){.price-grid{grid-template-columns:1fr}}
.price-card{
  position:relative;padding:clamp(26px,3.4vw,40px);border:1px solid var(--gold);border-radius:22px;background:rgba(251,247,238,.75);
  box-shadow:0 22px 40px -30px rgba(59,42,32,.35);
}
.price-card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,75,.28);border-radius:17px;pointer-events:none}
.price-card h3{font-size:clamp(1.3rem,2.2vw,1.65rem);margin-bottom:1em;color:var(--espresso)}
.pc-group h4{margin:1.2em 0 .5em;font-family:var(--font-body);font-weight:500;font-size:.78rem;letter-spacing:.22em;color:var(--gold-deep)}
.price-card ul{list-style:none;margin:0;padding:0}
.price-card li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:.55em 0;border-bottom:1px dotted rgba(201,162,75,.6)}
.price-card li:last-child{border-bottom:0}
.price-card li b{font-weight:500;color:var(--espresso);white-space:nowrap;text-align:right}
.price-card li em{font-style:normal;color:var(--espresso-soft);font-size:.88rem;margin-left:.4em}
.price-card li small{display:block;white-space:normal;font-weight:300;color:var(--espresso-soft);font-size:.74rem;max-width:20ch;margin-left:auto;line-height:1.35}
.pc-sub{margin:-.4em 0 .6em;color:var(--espresso-soft);font-size:.9rem;font-style:italic}
.pc-note{margin:1em 0 0;font-size:.85rem;color:var(--espresso-soft)}
.price-card.is-soon{border-style:dashed;background:rgba(251,247,238,.45)}
.price-card.is-soon::before{display:none}
.soon{margin:0;font-family:var(--font-hand);font-size:1.5rem;color:var(--gold-deep);opacity:.85}
.ustg{max-width:720px;margin:clamp(28px,5vh,48px) auto 0;text-align:center;font-size:.82rem;color:var(--espresso-soft)}

/* Vertrauen */
.trust{padding:clamp(28px,5vh,52px) var(--gutter) clamp(34px,5vh,60px)}
.trust-orn{display:flex;justify-content:center;margin:0 auto clamp(22px,4vh,38px)}
.trust-plate{max-width:1240px;margin:0 auto;padding:clamp(34px,5vw,60px) clamp(20px,3vw,44px);border-radius:28px;border:1px solid rgba(201,162,75,.28);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),rgba(251,246,236,.62)}
.trust-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(22px,2.4vw,38px)}
.trust-grid li{display:flex;flex-direction:column;align-items:center;text-align:center}
.t-ico{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:#FBF6EC;border:1px solid #C9A24B;box-shadow:0 14px 30px -18px rgba(59,42,32,.35);margin-bottom:22px;transition:transform .5s var(--ease,ease)}
.t-svg{width:56px;height:56px;overflow:visible}
.t-svg .cr{fill:#FBF6EC}
.t-svg path:not(.cr):not(.ds){stroke-dasharray:1;stroke-dashoffset:0}
html.js:not(.calm) .trust:not(.is-in) .t-svg path:not(.cr):not(.ds){stroke-dashoffset:1}
html.js:not(.calm) .trust.is-in .t-svg path:not(.cr):not(.ds){animation:t-draw 1.6s ease-in-out both;animation-delay:calc(var(--i) * .15s)}
@keyframes t-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (hover:hover) and (min-width:861px){.trust-grid li:hover .t-ico{transform:translateY(-4px)}}
.trust-grid h3{font-family:var(--font-head);font-weight:400;font-style:normal;font-size:1.15rem;line-height:1.35;color:var(--espresso);margin:0 0 .5em;max-width:18ch}
.trust-grid p{margin:0;font-family:var(--font-body);font-size:.88rem;line-height:1.6;color:var(--espresso-soft);max-width:24ch}
@media (max-width:860px){.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-grid li:last-child{grid-column:1/-1}.t-ico{width:76px;height:76px;margin-bottom:16px}.t-svg{width:46px;height:46px}}

/* Kontakt */
.contact{padding:clamp(40px,7vh,80px) var(--gutter);text-align:center;background:linear-gradient(to bottom,var(--cream),var(--cream-2))}
.contact .peek-caption em{color:var(--gold-deep)}
.contact-ask{font-family:var(--font-head);font-size:clamp(1.2rem,2vw,1.5rem);margin:1.6em 0 0;color:var(--espresso)}
.contact-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;max-width:460px}}
.contact-card{padding:28px 24px 32px;border:1px solid var(--gold);border-radius:22px;background:rgba(251,247,238,.75);display:flex;flex-direction:column;align-items:center;gap:16px}
.contact-card .ico{width:40px;height:40px}
.contact-card p{margin:0;font-size:.95rem;line-height:1.65;color:var(--espresso-soft);flex:1}
.contact-card .hero-btn{margin-top:6px;background:var(--gold);color:#fff}
.contact-card .hero-btn:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.contact-out{margin-top:clamp(28px,5vh,48px)}

/* Footer */
.site-footer{padding:clamp(48px,8vh,90px) var(--gutter) calc(40px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid rgba(201,162,75,.35)}
.footer-brand{font-family:var(--font-head);letter-spacing:.3em;font-size:1.1rem;margin:0;color:var(--gold-deep)}
.footer-tag{margin:.8em 0 1.4em;color:var(--espresso-soft);font-size:.95rem}
.footer-links{margin:0;font-size:.8rem;letter-spacing:.1em;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4em 1em}
.footer-links a{border-bottom:1px solid transparent;transition:border-color .3s}
.footer-links a:hover{border-color:var(--gold)}
.footer-links i{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.legal-note{color:var(--espresso-soft);font-size:.72rem;letter-spacing:.04em;margin-left:-.5em}
.legal-note:empty{display:none}

/* Sanfter Sprach-Hinweis */
.lang-hint{
  position:fixed;z-index:60;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  width:min(440px,calc(100% - 32px));padding:16px 44px 16px 20px;border:1px solid var(--gold);border-radius:18px;
  background:rgba(251,247,238,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 18px 40px -22px rgba(59,42,32,.4);font-size:.9rem;line-height:1.5;opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.lang-hint[hidden]{display:none}
.lang-hint.show{opacity:1;transform:translate(-50%,0)}
.lang-hint p{margin:0}
.lh-sub{color:var(--espresso-soft);font-size:.82rem}
.lh-link{display:inline-block;margin-top:.5em;color:var(--gold-deep);font-weight:400;border-bottom:1px solid var(--gold)}
.lh-close{position:absolute;top:8px;right:10px;width:30px;height:30px;border:0;background:none;font-size:1.3rem;line-height:1;color:var(--espresso-soft);cursor:pointer}

/* Trennlinie */
.divider{padding:clamp(40px,8vh,80px) var(--gutter)}
.divider svg{width:min(560px,86%);height:auto;margin:0 auto;overflow:visible}

/* Platzhalter (verschwinden mit den echten Sektionen) */
.stub{min-height:80vh;display:grid;place-items:center;border-top:1px dashed rgba(201,162,75,.45)}
.stub-tag{font-family:var(--font-hand);font-size:1.6rem;color:var(--gold-deep);opacity:.8}

/* Cursor: goldener Bleistift (nur Desktop mit Maus) */
#pencil{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:34px;height:34px;display:none;will-change:transform}
#pencilTrail{position:fixed;inset:0;z-index:199;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){
  body.has-pencil,body.has-pencil a,body.has-pencil button{cursor:none}
  body.has-pencil #pencil,body.has-pencil #pencilTrail{display:block}
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.site-header.open{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
html.js:not(.calm) .frame-rect{stroke-opacity:0}
@media (max-width:860px){.hero-lead{margin-top:0}.hero-grid{gap:18px}}

/* ===== VITRINE: jedes Produkt eine eigene Bühne ===== */
.scene{position:relative;min-height:100svh;display:grid;align-items:center;padding:84px var(--gutter) 40px;overflow:hidden}
.scene-inner{position:relative;z-index:1;max-width:1180px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,4vw,64px)}
.scene--rev .scene-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.scene--rev .scene-media{order:-1}
.scene-text{max-width:30rem}
.scene--rev .scene-text{justify-self:start}
.s-eyebrow{margin:0 0 1em;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.scene h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.2;margin-bottom:.8em}
.scene-text p{margin:0 0 .9em;color:var(--espresso-soft);line-height:1.65}
.scene-text .s-small{font-size:.88rem;letter-spacing:.02em}
.s-more{display:inline-block;margin-top:.8em;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);border-bottom:1px solid var(--gold);padding-bottom:3px;transition:letter-spacing .5s var(--ease)}
.s-more:hover{letter-spacing:.26em}
.scene-media{position:relative;display:flex;justify-content:center;align-items:center;height:min(76svh,820px);perspective:1400px}
.prod{position:relative;height:100%;display:flex;justify-content:center;align-items:center;will-change:transform}
.tilt{height:100%;display:flex;justify-content:center;align-items:center;transform-style:preserve-3d}
.prod img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 34px 28px rgba(59,42,32,.26)) drop-shadow(0 8px 10px rgba(59,42,32,.16))}
.prod .tilt>div,.flip{height:100%;display:flex;justify-content:center;align-items:center}
main{position:relative;z-index:1}

/* a) Daria: Umschlag öffnet sich um die Spirale, dann wird umgeblättert. Spirale = eigene, feststehende Ebene */
.dbook-shadow{height:100%;display:flex;align-items:center;justify-content:center}   /* kein filter auf Vorfahren der 3D-Ebenen (Safari) */
.d-shadow{position:absolute;left:10%;right:3%;top:3%;bottom:2%;z-index:0;border-radius:3px;box-shadow:0 36px 34px -16px rgba(59,42,32,.4),0 10px 14px -8px rgba(59,42,32,.22)}
.dbook{position:relative;height:100%;max-width:100%;perspective:1800px}
.dbook img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;filter:none;object-fit:contain}
.dbook .d-body{transform-origin:var(--ax) 50%;will-change:transform,opacity;-webkit-transform:translateZ(0)}
.d-p2{z-index:1}.d-p1{z-index:2}.d-p0{z-index:3}.d-spiral{z-index:4}
html.calm .d-p0{transform:none}

/* b) Noten + Welle */
.notes{position:absolute;inset:0;pointer-events:none;color:var(--gold)}
.note{position:absolute;width:34px;height:34px;opacity:0}
.note:nth-child(1){left:48%;top:30%}.note:nth-child(2){left:34%;top:34%;width:28px}.note:nth-child(3){left:60%;top:36%}
.note:nth-child(4){left:42%;top:26%;width:26px}.note:nth-child(5){left:68%;top:30%;width:30px}.note:nth-child(6){left:28%;top:40%;width:24px}.note:nth-child(7){left:54%;top:24%;width:38px}
.eq{position:absolute;left:50%;top:6%;transform:translateX(-50%);display:flex;gap:5px;align-items:center;height:60px;opacity:0}
.eq i{display:block;width:2px;height:100%;background:var(--gold);border-radius:2px;transform:scaleY(.2);animation:wave 1.3s ease-in-out infinite}
.eq i:nth-child(3n){animation-delay:-.4s}.eq i:nth-child(3n+1){animation-delay:-.9s}.eq i:nth-child(2n){animation-duration:1.7s}
.scene--b .scene-media{align-items:flex-end}
html.calm .note,html.calm .eq{opacity:0}

/* c) Magnet dreht sich, Handy fliegt heran, Berührung → goldene Kreise, Video im Handy */
.scene--c .scene-media{justify-content:flex-start}
.flip{position:relative;transform-style:preserve-3d;aspect-ratio:921/1200}
.flip .face{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip .fb{transform:rotateY(180deg)}
.phonewrap{--pw:clamp(150px,16.5vw,212px);position:absolute;right:0;bottom:1%;z-index:3;width:var(--pw);display:flex;flex-direction:column;align-items:center;gap:16px}
html.js:not(.calm) .phonewrap{opacity:0}
.phone{position:relative;width:var(--pw);aspect-ratio:9/19;padding:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.15);transform:rotate(-3deg);
  background:linear-gradient(145deg,#2c2723 0,#100e0d 42%,#1e1a17 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 0 0 1px rgba(18,14,12,.92),0 36px 40px -14px rgba(59,42,32,.5),0 12px 20px -8px rgba(59,42,32,.34)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#1c1816}
.phone::before{right:-2.5px;top:23%;height:11%}
.phone::after{left:-2.5px;top:17%;height:6.5%;box-shadow:0 calc(var(--pw)*.17) 0 #1c1816}
.ph-screen{width:100%;height:100%;border-radius:calc(var(--pw)*.118);overflow:hidden;background:#0b0908}
.ph-screen video{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--pw)*.118);background:#0b0908}
.ph-pill{position:absolute;top:calc(var(--pw)*.07);left:50%;width:24%;height:calc(var(--pw)*.047);transform:translateX(-50%);background:#050404;border-radius:99px}
.ph-glare{position:absolute;inset:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.118);pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.07) 20%,rgba(255,255,255,0) 36%),linear-gradient(to bottom,rgba(255,255,255,.07),rgba(255,255,255,0) 16%)}
.phonewrap .sound-btn{white-space:nowrap;padding:.7em 1.3em .7em 1.1em;font-size:.72rem}
/* goldene Kreise an der Berührungsstelle (linke Kante des Handys, Mitte) */
.touch{position:absolute;left:0;top:calc(var(--pw)*1.055);width:0;height:0;pointer-events:none}
.touch span{position:absolute;left:calc(var(--pw)*-.8);top:calc(var(--pw)*-.8);width:calc(var(--pw)*1.6);aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(214,170,70,.95);box-shadow:0 0 26px rgba(214,170,70,.45),inset 0 0 22px rgba(214,170,70,.25);opacity:0;transform:scale(.12)}
.scene--c.is-touch .touch span{animation:touch-ring 3.4s cubic-bezier(.2,.6,.3,1) both}
.touch span:nth-child(2){animation-delay:.6s!important}.touch span:nth-child(3){animation-delay:1.2s!important}
@keyframes touch-ring{0%{opacity:0;transform:scale(.12)}12%{opacity:.9}100%{opacity:0;transform:scale(2.1)}}
html.calm .phonewrap{opacity:1}

/* e) zwei Notizbücher als Fächer: hinten −8°, vorn +5°, beide Cover zu >70 % sichtbar */
.scene--e .scene-media{container-type:size}
.fan{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.nb{flex:none;height:min(74cqh,53cqw*1.35);display:flex;align-items:center;transform-origin:50% 90%}
.nb .holo{height:100%;display:block;position:relative}
.nb img{height:100%;width:auto;max-width:none;max-height:none;display:block}
.nb--back{margin-right:-10cqw;transform:rotate(-8deg);z-index:1}
.nb--front{transform:rotate(5deg);z-index:2}
.sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.7;
  -webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(105deg,transparent 28%,rgba(255,236,190,.55) 40%,rgba(170,220,255,.6) 50%,rgba(255,175,230,.55) 60%,transparent 72%);
  background-size:300% 100%;background-position:calc(var(--sx,0) * 100%) 0}

/* Handy: keine Bühne, Produkt oben, Text darunter */
@media (max-width:860px){
  .scene{min-height:0;padding:36px 20px 24px}
  .scene-inner,.scene--rev .scene-inner{grid-template-columns:minmax(0,1fr);gap:22px}
  .scene-media,.scene--rev .scene-media{order:-1;height:min(54svh,440px)}
  .scene-text{max-width:none;text-align:center;justify-self:center}
  .scene--c .scene-media{height:min(58svh,470px);justify-content:center}
  .scene--c .prod{height:62%;margin-right:calc(var(--pw-m,0px) - 12px);align-self:center}
  .scene--c .scene-media{--pw-m:clamp(96px,30vw,128px)}
  .phonewrap{--pw:clamp(96px,30vw,128px);bottom:0}
  .phonewrap .sound-btn{font-size:.66rem;letter-spacing:.1em;padding:.65em 1em .65em .9em}
  .scene--e .scene-media{height:min(50svh,380px)}
  .nb{height:min(74cqh,47cqw*1.35)}
  .nb--back{margin-right:-7cqw}
}

/* ===== Seite Malbücher: Block „Für eure Fellnasen“ ===== */
.fell{padding:clamp(104px,15vh,150px) var(--gutter) clamp(56px,10vh,110px)}
.fell-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.fell-text{max-width:32rem}
.fell-text h1,.fell-text h2,.tam-text h1{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:.7em}
.fell-text p{margin:0 0 .9em;color:var(--espresso-soft);line-height:1.65}
.fell-book{display:flex;justify-content:center}
.fell-book img{width:auto;height:auto;max-width:100%;max-height:min(78svh,720px);filter:drop-shadow(0 30px 26px rgba(59,42,32,.24)) drop-shadow(0 8px 10px rgba(59,42,32,.14))}
.fell-cards{list-style:none;margin:clamp(22px,4vh,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px)}
.fell-cards li{background:#fff;padding:5px;border-radius:2px;box-shadow:0 10px 18px -10px rgba(59,42,32,.45),0 2px 5px rgba(59,42,32,.12)}
.fell-cards li:nth-child(1){rotate:-1.6deg}.fell-cards li:nth-child(2){rotate:1deg}.fell-cards li:nth-child(3){rotate:-.8deg}
.fell-cards img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
@media (max-width:860px){
  .fell{padding-top:calc(84px + env(safe-area-inset-top))}
  .fell-grid{grid-template-columns:1fr;gap:26px}
  .fell-book{order:-1}
  .fell-book img{max-height:min(56svh,460px)}
  .fell-text{max-width:none;text-align:center;margin:0 auto}
}
body.page-malbuch .main-nav ul a[href$="malbuch/"]::after,body.page-home .main-nav ul li:first-child a::after{transform:scaleX(1)}


/* ===== „Echte Geschenke“-Zeile ===== */
.real-note{position:relative;max-width:46rem;margin:0 auto;padding:clamp(34px,5.5vh,56px) var(--gutter) 0;text-align:center;font-family:var(--font-head);font-style:italic;
  font-size:clamp(1.12rem,1.8vw,1.45rem);line-height:1.6;color:var(--gold-deep)}
.real-note::before{content:"";display:block;width:56px;height:1px;margin:0 auto clamp(20px,3vh,30px);background:var(--gold)}

/* ===== Tamila-Malbuch (3D): Szene „Malbuch + Lied“ und Seite /malbuch/ ===== */
.tbook{position:relative;height:100%;max-width:100%;perspective:1800px;margin-right:clamp(70px,8.5vw,118px)}
.tbook img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;filter:none;object-fit:contain}
.t-body{transform-origin:var(--ax) 50%;will-change:transform,opacity}
.t-p0{z-index:6}.t-p1{z-index:5}.t-p2{z-index:4}.t-p3{z-index:3}.t-p4{z-index:2}
/* geschlossen: nur das Cover ist sichtbar; die Seiten darunter (exakt gleiche Kontur wie das Cover) bleiben unsichtbar, bis es sich oeffnet.
   Beim Schliessen verschwinden sie erst, wenn das Cover wieder zu ist (Verzoegerung = Blaetterdauer) */
.tbook .t-body:not(.t-p0){visibility:hidden;transition:visibility 0s linear 1s}
.tbook.is-open .t-body:not(.t-p0){visibility:visible;transition-delay:0s}
.t-spiral{z-index:8}
.t-shadow{position:absolute;left:11%;right:5%;top:3%;bottom:2%;z-index:0;border-radius:3px;box-shadow:0 36px 34px -16px rgba(59,42,32,.4),0 10px 14px -8px rgba(59,42,32,.22)}
/* Stern mit Lied: weiche goldene Pulsation + Sprechblase mit dünner Linie */
.t-star{position:absolute;z-index:9;left:var(--sx);top:var(--sy);width:calc(var(--sr) * 1.7);aspect-ratio:1;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:opacity .5s}
.t-glow{position:absolute;inset:-32%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(240,194,72,.62) 0,rgba(240,194,72,.28) 40%,rgba(240,194,72,0) 70%);animation:t-glow 2.6s ease-in-out infinite}
@keyframes t-glow{0%,100%{opacity:.4;transform:scale(.86)}50%{opacity:1;transform:scale(1.14)}}
.tbook.is-song .t-glow{animation-duration:1.2s}
.t-star:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.t-callout{position:absolute;z-index:9;left:calc(var(--sx) + var(--sr) * .85);top:var(--sy);transform:translateY(-50%);display:flex;align-items:center;gap:9px;pointer-events:none;transition:opacity .5s}
.t-callout i{display:block;flex:none;width:clamp(22px,3.6vw,46px);height:1px;background:var(--gold)}
.t-callout span{font-family:var(--font-head);font-style:italic;font-size:.95rem;line-height:1.3;color:var(--espresso-soft);white-space:nowrap}
.tbook.is-open .t-star,.tbook.is-open .t-callout{opacity:0;pointer-events:none}
html.js:not(.calm) .t-callout{animation:t-in 1s .5s both}
@keyframes t-in{from{opacity:0}to{opacity:1}}
html.js:not(.calm) .tbook.is-open .t-callout{animation:none;opacity:0}
.scene--b .scene-media{align-items:center}

/* Seite /malbuch/: Tamila zum Durchblättern */
.tam{padding:clamp(104px,15vh,150px) var(--gutter) clamp(40px,8vh,80px)}
.tam-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.tam-text{max-width:30rem}
.tam-text p{margin:0 0 .9em;color:var(--espresso-soft);line-height:1.65}
.tam-text .tam-hint{margin-top:1.4em;font-family:var(--font-head);font-style:italic;color:var(--gold-deep);font-size:.98rem}
.tam-viewer{display:flex;flex-direction:column;align-items:center;gap:20px;outline:none}
.tam-stage{height:min(66svh,700px);display:flex;justify-content:center;perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tam-stage .tbook{height:100%}
.tam-ctrl{display:flex;align-items:center;gap:20px}
.tam-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:rgba(247,241,229,.75);color:var(--gold-deep);cursor:pointer;display:grid;place-items:center;transition:background .4s,color .4s,opacity .4s}
.tam-btn:hover:not([disabled]){background:var(--gold);color:#fff}
.tam-btn[disabled]{opacity:.3;cursor:default}
.tam-btn:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.tam-dots{display:flex;gap:9px}
.tam-dots i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid var(--gold);transition:background .4s}
.tam-dots i.on{background:var(--gold)}
.paare{padding:clamp(24px,5vh,56px) var(--gutter) clamp(24px,5vh,56px)}
.paare .fell-book img{max-height:min(66svh,600px)}
.paare .soon{margin-top:.4em}
.fell--sub{padding-top:clamp(40px,8vh,80px)}

/* Desktop: Buch mit expliziter Größe (kein height:100% / keine Prozent-Breite → Safari kollabiert sonst die Breite). Handy-Regeln unten bleiben unberührt */
@media (min-width:861px){
  .scene--b .scene-media{height:auto;align-items:center;justify-content:center}
  .scene--b .prod,.scene--b .tilt,.scene--b .tilt>div{height:auto;align-items:center}
  .tbook,.tam-stage .tbook{height:min(72vh,640px);width:calc(min(72vh,640px) * 1144 / 1500);flex:none;max-width:none;margin-right:clamp(70px,8.5vw,118px)}
  .tam-stage{height:auto}
  .t-callout{left:calc(var(--sx) + var(--sr) * .85 + 12px);gap:8px}
}
@media (max-width:860px){
  .scene--b .scene-media{height:auto}
  .scene--b .prod,.scene--b .tilt,.scene--b .tilt>div{height:auto}
  .tbook{height:auto;width:min(calc(100vw - 40px),440px);margin-right:0;margin-bottom:46px}    /* Handy: fast die ganze Breite */
  .t-callout{left:var(--sx);top:calc(100% + 14px);transform:translateX(-50%);flex-direction:column;gap:5px}   /* Hinweis unter dem Buch, in Höhe des Sterns, statt daneben */
  .t-callout i{width:1px;height:12px}
  .t-callout span{font-size:.8rem;line-height:1.2}
  .tam{padding-top:calc(84px + env(safe-area-inset-top))}
  .tam-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .tam-viewer{order:-1}
  .tam-stage{height:auto}
  .tam-stage .tbook{height:auto}
  .tam-text{max-width:none;text-align:center;margin:0 auto}
  .paare .fell-book img{max-height:min(50svh,420px)}
  .paare .fell-text{text-align:center;margin:0 auto}
}

/* ===== Dunkler Abschluss: Kontakt + Footer in Espresso mit Gold ===== */
:root{--espresso-dark:#3B2A22}
.contact{background:var(--espresso-dark);color:#F3EADB;position:relative;z-index:2}
.contact .peek-title,.contact .contact-ask{color:#F7F1E5}
.contact .peek-caption,.contact-out{color:rgba(247,241,229,.78)}
.contact .peek-caption em{color:var(--gold)}
.contact-card{background:rgba(247,241,229,.05);border-color:rgba(201,162,75,.7)}
.contact-card p{color:rgba(247,241,229,.8)}
.contact-card .ico{color:var(--gold)}
.contact-card .hero-btn{background:var(--gold);color:var(--espresso-dark);border-color:var(--gold)}
.contact-card .hero-btn:hover{background:#E2BE64;border-color:#E2BE64;color:var(--espresso-dark)}
.site-footer{background:var(--espresso-dark);color:#F3EADB;border-top:1px solid rgba(201,162,75,.35);position:relative;z-index:2}
.footer-brand{color:var(--gold)}
.footer-tag,.legal-note{color:rgba(247,241,229,.65)}
.site-footer a:hover{border-color:var(--gold)}


/* ===================== Seite /malbuch/ (neu) ===================== */
.mb-hero{padding:clamp(120px,19vh,190px) var(--gutter) clamp(36px,7vh,76px);text-align:center}
.mb-hero-in{max-width:46rem;margin:0 auto}
.mb-hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.15;margin-bottom:.7em}
.mb-hero p{color:var(--espresso-soft);line-height:1.7}
.mb-hero .mb-hero-line{font-family:var(--font-head);font-style:italic;color:var(--gold-deep);font-size:clamp(1.05rem,1.7vw,1.3rem);margin-top:1.4em}
.mb-hero .mb-hero-line::before{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:0 auto 1.4em}

/* Wiederkehrender Block: 50/50, Text und Medium wechseln die Seite */
.mbs{padding:clamp(40px,7vh,80px) var(--gutter);overflow:hidden}
.mbs-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.mbs--rev .mbs-media{order:-1}
.mbs-text{max-width:33rem}
.mbs--rev .mbs-text{justify-self:start}
.mbs-text h2,.mb-head h2{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.2;margin-bottom:.75em}
.mbs-text p{margin:0 0 .95em;color:var(--espresso-soft);line-height:1.7}
.mbs-text .s-small{font-size:.86rem;letter-spacing:.02em}
.mbs-media{display:flex;justify-content:center;align-items:center;min-width:0}
html.js:not(.calm) .mbs-text,html.js:not(.calm) .mbs-media,html.js:not(.calm) .mb-head,html.js:not(.calm) .cv,html.js:not(.calm) .quote-in{opacity:0}

/* 1 Kinder: zwei Bücher als lockerer Fächer */
.kids-fan{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;padding:18px 0 28px}
.kb{margin:0;flex:none;transition:transform .8s var(--ease);will-change:transform}
.kb img{display:block;width:auto;height:min(52vh,470px);filter:drop-shadow(0 28px 22px rgba(59,42,32,.26)) drop-shadow(0 6px 8px rgba(59,42,32,.16))}
.kb--1{transform:rotate(-5deg);z-index:1;margin-right:-6%}
.kb--2{transform:rotate(4deg) translateY(10px);z-index:2}
@media (hover:hover){.kb--1:hover{transform:rotate(-5deg) translateY(-12px)}.kb--2:hover{transform:rotate(4deg) translateY(-2px)}}
.wonder{position:relative;margin:1.6em 0 1.2em;padding:1.2em 1.4em 1.1em 4.2em;border-left:1px solid var(--gold);background:linear-gradient(90deg,rgba(201,162,75,.1),rgba(201,162,75,0) 80%);border-radius:0 14px 14px 0}
.wonder-star{position:absolute;left:1.3em;top:1.35em}
.wonder h3{font-size:1.2rem;font-style:italic;color:var(--gold-deep);margin:0 0 .45em}
.wonder p{margin:0}

/* 2 Erwachsene: Daria blättert, Lena steht dahinter */
.flip-link{background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;font-family:var(--font-body);font-weight:300}
.adult-stage{width:100%;display:flex;justify-content:center;padding-right:40px}
.dviewer .tam-stage{position:relative;width:fit-content;height:auto;margin:0 auto;display:flex;justify-content:center;perspective:1400px}
.dviewer .tbook{z-index:1}
.dviewer .t-shadow{left:10%;right:3%}

/* 3 Paare */
.mbs-text .lbl{font-family:var(--font-head);color:var(--gold-deep)}
.duo{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,2.4vw,34px);width:100%}
.duo figure{margin:0;text-align:center}
.duo img{display:block;width:auto;height:min(44vh,400px);margin:0 auto;filter:drop-shadow(0 24px 20px rgba(59,42,32,.24)) drop-shadow(0 5px 7px rgba(59,42,32,.14))}
.duo figcaption{margin-top:16px;font-family:var(--font-head);font-style:italic;color:var(--gold-deep);font-size:1.05rem}

/* 4 Oma und Opa: nur Text, als ruhige Karte */
.mbs--grand .mbs-in{grid-template-columns:minmax(0,1fr)}
.mbs--grand .mbs-text{max-width:44rem;margin:0 auto;text-align:center}
.mbs--grand .grand-card{position:relative;padding:clamp(34px,5vw,60px) clamp(22px,5vw,64px);border:1px solid rgba(201,162,75,.45);border-radius:26px;background:rgba(251,246,236,.6)}
.mbs--grand .grand-card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,162,75,.2);border-radius:20px;pointer-events:none}
.mbs--grand .grand-slot:empty{display:none}
.mbs--grand.has-cover .mbs-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}   /* Cover später: Klasse has-cover setzen */
.mbs--grand.has-cover .mbs-text{text-align:left;margin:0}

/* Kopf für mittige Blöcke */
.mb-head{max-width:46rem;margin:0 auto clamp(20px,3.4vh,34px);text-align:center;padding:0 var(--gutter)}
.mb-head p{color:var(--espresso-soft);line-height:1.7;margin:0 0 .9em}
.mb-head .mb-em{font-family:var(--font-head);font-style:italic;color:var(--gold-deep)}

/* 6 Matt oder glitzernd */
.mb-cover{padding:clamp(40px,7vh,80px) var(--gutter)}
.cv-row{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px)}
.cv{margin:0;text-align:center}
.cv-frame{border-radius:20px;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);border:1px solid rgba(201,162,75,.75);background:var(--cream-2);box-shadow:0 26px 40px -26px rgba(59,42,32,.45),0 6px 14px -8px rgba(59,42,32,.2)}
.cv-frame video{display:block;width:100%;height:auto}
.cv figcaption{margin-top:16px;font-family:var(--font-head);font-style:italic;color:var(--gold-deep);font-size:1.1rem}

/* 7 Was ein Malbuch schenkt */

/* 8 Anlässe */
.mb-occ{padding:clamp(40px,7vh,80px) var(--gutter)}
.chips{max-width:980px;margin:0 auto;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.chip{padding:.55em 1.15em;border:1px solid var(--gold);border-radius:99px;color:var(--espresso);font-size:.9rem;background:rgba(201,162,75,.1);cursor:default;transition:background .35s,border-color .35s,box-shadow .35s,transform .35s var(--ease)}
.chip:hover,.chip:active{background:rgba(201,162,75,.22);border-color:#B8902E;box-shadow:0 6px 18px -8px rgba(201,162,75,.6);transform:translateY(-2px)!important}
html.js:not(.calm) .chip{opacity:0;transform:translateY(14px)}
.occ-quote{max-width:40rem;margin:clamp(30px,5vh,52px) auto 0;padding:0 var(--gutter);text-align:center;font-family:var(--font-head);font-style:italic;font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.6;color:var(--gold-deep)}
.occ-quote::before{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:0 auto 1.4em}

/* 9 Formate + Preistabelle */
.ptab{width:100%;border-collapse:collapse;margin:1.4em 0 1em;font-size:.95rem}
.ptab caption{text-align:left;font-family:var(--font-head);font-style:italic;color:var(--gold-deep);padding-bottom:.6em}
.ptab thead td,.ptab thead th{font-size:.78rem;letter-spacing:.12em;color:var(--espresso-soft);font-weight:400;padding:.3em .4em;text-align:right}
.ptab .grp th{text-align:left;font-family:var(--font-head);font-weight:400;color:var(--espresso);font-size:1.05rem;padding:1.1em 0 .35em;border-bottom:1px solid var(--gold)}
.ptab tbody th[scope=row]{text-align:left;font-weight:400;color:var(--espresso-soft);padding:.5em 0;letter-spacing:.08em}
.ptab td{text-align:right;padding:.5em .4em;color:var(--espresso);white-space:nowrap}
.ptab tbody tr:not(.grp){border-bottom:1px dotted rgba(201,162,75,.6)}
.fmt-extras{font-size:.92rem}
.fmt-ustg{font-size:.78rem;opacity:.8}

/* 10 Ausmalen */
.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0}
.sw{width:38px;height:38px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(59,42,32,.28);background:var(--c);cursor:pointer;padding:0;transition:transform .3s var(--ease),box-shadow .3s}
.sw[aria-checked=true]{transform:scale(1.16);box-shadow:0 0 0 2px var(--gold)}
.sw:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.color-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* 11 FAQ */
.mb-faq{padding:clamp(40px,7vh,80px) var(--gutter)}
.faq-list{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(201,162,75,.55)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:1.25em 0;cursor:pointer;font-family:var(--font-head);font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--espresso)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{flex:none;position:relative;width:18px;height:18px}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--gold);transition:transform .45s var(--ease)}
.faq-item summary i::after{transform:rotate(90deg)}
.faq-item[open] summary i::after{transform:rotate(0)}
.faq-a{overflow:hidden}
.faq-a p{margin:0;padding:0 2.2em 1.4em 0;color:var(--espresso-soft);line-height:1.7}
.faq-item summary:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* 12 CTA */
.mb-cta{padding:clamp(44px,7vh,80px) var(--gutter) clamp(44px,7vh,80px);text-align:center}
.mb-cta .sec-head{max-width:40rem;margin:0 auto 2em}
.mb-cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.mb-cta .hero-btn{background:var(--gold);color:var(--espresso-dark);border-color:var(--gold)}
.mb-cta .hero-btn:hover{background:#E2BE64;border-color:#E2BE64;color:var(--espresso-dark)}

@media (min-width:861px){
  .dviewer .tbook{height:min(70vh,620px);width:calc(min(70vh,620px) * 1140 / 1500);margin-right:0}
  .dviewer .tam-stage{height:auto}
  .dviewer .tam-stage .tbook{height:min(70vh,620px)}
}
@media (max-width:860px){
  .mbs-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .mbs--rev .mbs-media,.mbs-media{order:-1}
  .mbs-text{max-width:none;margin:0 auto}
  .mbs-text,.mb-head{text-align:center}
  .mbs--grand .mbs-text{text-align:center}
  .kb img{height:min(31vh,262px)}
  .wonder{text-align:left}
  .dviewer .tbook{height:auto;width:min(calc(100vw - 96px),400px);margin-right:0}
  .dviewer .tam-stage{padding-right:0}
  .adult-stage{padding-right:22px}
  .duo img{height:min(34vh,280px)}
  .cv-row{grid-template-columns:1fr;max-width:480px}
  .ptab caption{text-align:center}
}


/* ===================== /malbuch/ – Runde 3 ===================== */
/* gemeinsamer Medien-Stil: 18px Rundung + weicher Schatten (wie das Hochzeitsfoto im Hero der Startseite) */
.m-card{border-radius:18px;overflow:hidden;box-shadow:0 26px 44px -26px rgba(59,42,32,.5),0 8px 18px -10px rgba(59,42,32,.22)}

/* 0 Hero: Seiten fächern sich um die Überschrift */
.mb-hero{position:relative;min-height:clamp(620px,92vh,840px);display:flex;align-items:center;justify-content:center;padding:clamp(120px,19vh,180px) var(--gutter) clamp(28px,4.5vh,48px);overflow:hidden}
.hero-sheets{position:absolute;inset:0;pointer-events:none;z-index:0}
.hs{--w:clamp(104px,13.4vw,226px);position:absolute;margin:0;width:var(--w);rotate:var(--rot);will-change:transform}
.hs-in{background:#fff;border-radius:3px;box-shadow:0 18px 30px -16px rgba(59,42,32,.4),0 2px 6px rgba(59,42,32,.14)}
.hs img{display:block;width:100%;height:auto;border-radius:3px}
/* alle Blätter vollständig sichtbar: Abstand zum Rand = Anteil der Blattbreite (Platz für die Drehung) */
.hs--1{left:calc(var(--w) * .26 + 1vw);top:7%}
.hs--2{left:calc(var(--w) * .26 + 1vw);top:54%}
.hs--3{right:calc(var(--w) * .26 + 1vw);top:7%}
.hs--4{right:calc(var(--w) * .26 + 1vw);top:54%}
.mb-hero-in{position:relative;z-index:1;max-width:44rem;margin:0 auto;text-align:center}
.mb-hero-in::before{content:"";position:absolute;z-index:-1;inset:-46px -90px;background:radial-gradient(ellipse at center,rgba(245,239,227,.97) 38%,rgba(245,239,227,.78) 58%,rgba(245,239,227,0) 76%)}
.mb-hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.15;margin-bottom:.7em}
.mb-hero p{color:var(--espresso-soft);line-height:1.7}
.mb-hero .mb-hero-line{font-family:var(--font-head);font-style:italic;color:var(--gold-deep);font-size:clamp(1.05rem,1.7vw,1.3rem);margin-top:1.4em}
.mb-hero .mb-hero-line::before{content:"";display:block;width:56px;height:1px;background:var(--gold);margin:0 auto 1.4em}


/* 3 Paare: Bücher auf dem Tisch */
.table-scene{position:relative;width:100%;max-width:560px;aspect-ratio:1/1.02;margin:50px auto 62px}
.tb-surface{position:absolute;left:-8%;right:-8%;bottom:-5%;height:48%;border-radius:50%;z-index:0;background:radial-gradient(ellipse at 50% 42%,rgba(201,162,75,.22),rgba(201,162,75,.09) 55%,transparent 74%)}
.tbk{position:absolute;will-change:transform}
.tbk figure{position:relative;margin:0;transform:rotate(var(--rot,0deg));transition:transform .9s var(--ease)}
.tbk img{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 22px rgba(59,42,32,.3)) drop-shadow(0 6px 8px rgba(59,42,32,.2))}
.tbk--l{left:-3%;top:4%;width:50%;z-index:1;--rot:-8deg}
.tbk--r{right:-3%;top:9%;width:47%;z-index:1;--rot:7deg}
.tbk--c{left:22%;bottom:0;width:58%;z-index:3;--rot:-1deg}
.tbk:hover{z-index:6}
@media (hover:hover){.tbk:hover figure{transform:rotate(var(--rot,0deg)) translateY(-14px) scale(1.05)}}
.tbk figcaption{position:absolute;left:50%;white-space:nowrap;pointer-events:none}
.tbk figcaption span{display:block;font-family:var(--font-hand);font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.1;color:var(--gold-deep)}
.tbk figcaption::after{content:"";position:absolute;left:50%;width:1px;height:30px;background:var(--gold)}
.tbk--l figcaption,.tbk--r figcaption{top:-14px;transform:translate(-50%,-100%)}
.tbk--l figcaption::after,.tbk--r figcaption::after{top:100%;margin-top:2px}
.tbk--c figcaption{bottom:-14px;transform:translate(-50%,100%)}
.tbk--c figcaption::after{bottom:100%;margin-bottom:2px}

.vid-open{text-align:center;margin-top:clamp(10px,3vh,34px)}
.vid-btn{display:inline-flex;align-items:center;gap:18px;padding:8px 26px 8px 8px;border-radius:99px;border:1px solid rgba(201,162,75,.5);background:rgba(251,246,236,.7);cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.vid-btn:hover{transform:translateY(-3px);box-shadow:0 18px 30px -20px rgba(59,42,32,.5);border-color:var(--gold)}
.vid-btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.vid-dot{display:block;width:64px;height:64px;border-radius:50%;overflow:hidden;isolation:isolate;border:2px solid var(--gold);box-shadow:0 0 0 3px rgba(251,246,236,.9),0 8px 16px -8px rgba(59,42,32,.5);background:var(--cream-2)}
.vid-dot video{display:block;width:100%;height:100%;object-fit:cover}
.vid-txt{font-family:var(--font-hand);font-size:clamp(1.6rem,2.4vw,2rem);line-height:1;color:var(--gold-deep)}

/* Lightbox */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;opacity:0;transition:opacity .5s ease}
.lb[hidden]{display:none}
.lb.is-in{opacity:1}
.lb-bg{position:absolute;inset:0;background:rgba(245,239,227,.58);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lb-card{position:relative;max-height:86vh;max-width:92vw;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(59,42,32,.6),0 10px 24px -10px rgba(59,42,32,.3);background:#000;transform:translateY(24px) scale(.96);transition:transform .6s var(--ease)}
.lb.is-in .lb-card{transform:none}
.lb-card video{display:block;height:86vh;max-height:86vh;width:auto;max-width:92vw;object-fit:contain;background:#000}
.lb-snd{position:absolute;left:14px;bottom:14px;padding:.5em 1em;border-radius:99px;border:1px solid rgba(255,255,255,.55);background:rgba(30,22,18,.55);color:#fff;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb-x{position:absolute;top:clamp(14px,3vh,28px);right:clamp(14px,3vw,34px);width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:rgba(251,246,236,.92);color:var(--gold-deep);display:grid;place-items:center;cursor:pointer;z-index:2}
.lb-x:focus-visible,.lb-snd:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* 4 Oma & Opa: Hardcover */
.mbs--grand .mbs-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hviewer .tam-stage{height:auto;margin:0 auto;display:flex;justify-content:center;perspective:1600px}
.hviewer .hbook,.dviewer .tbook{max-width:100%}
.hbook{position:relative;z-index:1;perspective:1800px}
.hbook .hleaf{position:absolute;inset:0;border-radius:3px 9px 9px 3px;transform-origin:0% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hbook .hleaf img{position:absolute;inset:0;width:100%;height:100%;border-radius:3px 9px 9px 3px;filter:none;object-fit:contain}
.hbook .t-p0{z-index:6}.hbook .t-p1{z-index:5}.hbook .t-p2{z-index:4}.hbook .t-p3{z-index:3}
.h-box{position:absolute;inset:0;z-index:0;border-radius:3px 9px 9px 3px;box-shadow:3px 3px 0 #efe8d8,6px 6px 0 #e4dccb,0 34px 40px -16px rgba(59,42,32,.5),0 10px 14px -8px rgba(59,42,32,.28)}
.h-spine{position:absolute;inset:0;border-radius:3px 9px 9px 3px;pointer-events:none;background:linear-gradient(90deg,rgba(40,28,20,.32) 0,rgba(255,255,255,.2) 1.6%,rgba(40,28,20,.1) 3.4%,rgba(0,0,0,0) 9%)}
.h-shade{position:absolute;inset:0;border-radius:3px 9px 9px 3px;pointer-events:none;background:linear-gradient(90deg,rgba(30,20,12,.5),rgba(30,20,12,0) 46%);opacity:0}
.hbook .t-p0 .h-shade{opacity:0}
.hbook.is-open .t-p1 .h-shade{opacity:0}

/* 5 Fellnasen */
.fell2{position:relative;padding:clamp(40px,7vh,80px) var(--gutter);overflow:hidden}
.fell2-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.blot{position:absolute;left:50%;top:clamp(20px,4vh,48px);width:min(920px,98vw);height:min(270px,32%);transform:translateX(-50%)}
.deco{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:.16;rotate:var(--r);animation:drift var(--d) ease-in-out infinite alternate}
@keyframes drift{from{translate:0 0}to{translate:12px -18px}}
html.calm .deco{animation:none}
.fell2-head{position:relative;z-index:1;text-align:center;max-width:44rem;margin:0 auto clamp(24px,4vh,40px)}
.fell2-head h2{font-size:clamp(1.8rem,3.3vw,2.7rem);line-height:1.2}
.fell2-pill{display:inline-block;margin:1em 0 0;padding:.1em 1.2em .2em;border-radius:99px;background:#F5D8C0;border:1px solid var(--gold);font-family:var(--font-hand);font-size:clamp(1.7rem,2.8vw,2.2rem);color:var(--espresso);box-shadow:0 10px 20px -14px rgba(59,42,32,.4)}
.fell2-grid{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:clamp(28px,5vw,72px);align-items:start}
.fell2-text{align-self:start}
.fell2-p{margin:0;font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.8;color:var(--espresso-soft)}
.fell2-p strong{font-weight:500;color:var(--espresso)}

/* Rubbelfläche */
.sc2{max-width:520px;margin:0 auto}
.sc2-stage{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 34px 50px -30px rgba(59,42,32,.55),0 8px 18px -8px rgba(59,42,32,.22);user-select:none;-webkit-user-select:none}
.sc2-line,.sc2-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.sc2-line{object-fit:cover;pointer-events:none}
.sc2-stage canvas{touch-action:none;cursor:grab}
.sc2-stage canvas.sc2-fx{pointer-events:none}
.sc2-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:.55em 1.3em;border-radius:99px;background:rgba(251,246,236,.9);border:1px solid var(--gold);font-family:var(--font-hand);font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--espresso);pointer-events:none;white-space:nowrap;animation:hint-pulse 2.6s ease-in-out infinite;box-shadow:0 10px 24px -12px rgba(59,42,32,.4)}
@keyframes hint-pulse{0%,100%{opacity:.82}50%{opacity:1}}
.sc2-hint.gone{animation:none;opacity:0;transition:opacity .5s}
.sc2-again{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:.55em 1.4em;border-radius:99px;border:1px solid var(--gold);background:rgba(251,246,236,.95);color:var(--gold-deep);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;z-index:3}
.sc2-thumbs{display:flex;justify-content:center;gap:12px;margin-top:22px}
.sc2-thumbs button{width:60px;height:60px;padding:0;border-radius:50%;overflow:hidden;border:2px solid transparent;background:none;cursor:pointer;opacity:.72;transition:opacity .4s,transform .4s var(--ease),border-color .4s}
.sc2-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.sc2-thumbs button.on{border-color:var(--gold);opacity:1;transform:scale(1.1)}
.sc2-thumbs button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Lusi: Seiten liegen hinter dem Buch und fahren 60–70 % ihrer Breite nach rechts heraus (Fächer, leicht nach unten versetzt; alles innerhalb der Spalte) */
.lusi-stage{--H:min(34vw,410px,calc((50vw - 60px) / 1.42));position:relative;height:var(--H);width:calc(var(--H) * 1.4);max-width:100%;margin:clamp(24px,4vh,40px) 0 0}
.lusi-book{position:absolute;left:0;top:0;height:100%;width:auto;z-index:5;filter:drop-shadow(0 22px 18px rgba(59,42,32,.28)) drop-shadow(0 5px 7px rgba(59,42,32,.16))}
.lp{position:absolute;left:0;top:calc(var(--H) * .1);height:calc(var(--H) * .7);width:auto;aspect-ratio:4/3;z-index:2;border:3px solid #fff;border-radius:3px;box-shadow:0 14px 22px -8px rgba(59,42,32,.55),0 4px 8px rgba(59,42,32,.25);
  opacity:0;transform-origin:0 60%;transform:translateX(calc(var(--H) * -.2)) rotate(0deg);transition:transform 1.2s cubic-bezier(.22,.61,.36,1) var(--dl,0s),opacity .6s ease var(--dl,0s)}
.lp--1{--dl:0s;--tx:.356;--ty:0;--tr:5deg;z-index:2}
.lp--2{--dl:.12s;--tx:.4025;--ty:.045;--tr:11deg;z-index:3}
.lp--3{--dl:.24s;--tx:.449;--ty:.09;--tr:17deg;z-index:4}
.lusi-stage.is-out .lp{opacity:1;transform:translateX(calc(var(--H) * var(--tx))) translateY(calc(var(--H) * var(--ty))) rotate(var(--tr))}
@media (hover:hover){.lusi-stage:hover .lp{opacity:1;transform:translateX(calc(var(--H) * var(--tx))) translateY(calc(var(--H) * var(--ty))) rotate(var(--tr))}}

/* 7 Was ein Malbuch schenkt: Sterne über dem Video */
.gv{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#EDE3D2}
.gv-bg{position:absolute;inset:0;z-index:0}
.gv-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gv-haze{position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,239,227,.96) 0,rgba(245,239,227,.88) 26%,rgba(245,239,227,.42) 50%,rgba(245,239,227,0) 72%),linear-gradient(180deg,rgba(245,239,227,.5) 0,rgba(245,239,227,0) 18%,rgba(245,239,227,0) 82%,rgba(245,239,227,.55) 100%)}
.gv-stars{position:absolute;inset:0}
.gv-star{position:absolute;left:var(--x);top:var(--y);width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;border:0;background:none;cursor:pointer;z-index:3;transition:transform .5s var(--ease),opacity .5s}
.gv-star svg{width:100%;height:100%;fill:#F0C248;stroke:#C9A24B;stroke-width:1;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(240,194,72,.8));animation:gv-pulse 2.6s ease-in-out var(--t) infinite}
.gv-star i{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(240,194,72,.5) 0,rgba(240,194,72,0) 62%);animation:t-glow 2.6s ease-in-out var(--t) infinite;pointer-events:none}
@keyframes gv-pulse{0%,100%{transform:scale(.82);opacity:.78}50%{transform:scale(1.08);opacity:1}}
.gv-star:hover{transform:scale(1.18)}
.gv-star:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:50%}
.gv-star.done{transform:scale(0);opacity:0;pointer-events:none}
.gv-text{position:relative;z-index:2;width:min(1180px,100%);margin:0 auto;padding:clamp(48px,7vh,80px) var(--gutter);pointer-events:none}
.gv-text>*{pointer-events:auto;max-width:26rem}
.gv-text h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:.4em;max-width:14ch}
.gv-hint{font-family:var(--font-head);font-style:italic;color:var(--gold-deep);margin:0 0 1.4em;transition:opacity .6s}
.gv-list{list-style:none;margin:0;padding:0;max-width:26rem}
.gv-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:.85em 0;border-bottom:1px solid rgba(201,162,75,.6)}
.gv-n{font-family:var(--font-head);font-style:italic;font-size:1.7rem;line-height:1;color:var(--gold);min-width:2ch}
.gv-list h3{font-size:1.2rem;margin:0 0 .15em}
.gv-list p{margin:0;font-size:.9rem;line-height:1.5;color:var(--espresso-soft)}
.gv-end{margin-top:1.6em;max-width:26rem}
.gv-end p{font-family:var(--font-head);font-style:italic;font-size:1.2rem;color:var(--gold-deep);margin:0 0 1em}
.gv-pop{position:absolute;z-index:6;left:0;top:0;width:min(21rem,60vw);padding:.8em 1.1em 1em;border-radius:14px;background:rgba(251,246,236,.9);border:1px solid rgba(201,162,75,.6);box-shadow:0 22px 38px -22px rgba(59,42,32,.5);pointer-events:none;transform-origin:0 0}
.gv-pop h3{font-family:var(--font-head);font-style:italic;font-weight:400;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.1;color:var(--espresso);margin:0 0 .3em}
.gv-pop h3 span{display:inline-block;opacity:0}
.gv-pop p{margin:0;font-size:.92rem;line-height:1.5;color:var(--espresso-soft);opacity:0}
.gv-dust{position:absolute;z-index:7;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#F0C248;box-shadow:0 0 8px rgba(240,194,72,.9);pointer-events:none}


/* 9b Konstrukteur: Format + Preise */
.mb-conf{padding:clamp(40px,7vh,80px) var(--gutter)}
.mb-conf .mb-head p{margin-bottom:.8em}
.conf{--S:clamp(300px,46vh,420px);max-width:1180px;margin:32px auto 0;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,64px);align-items:center;justify-content:center}
.conf-left{display:flex;justify-content:center;align-items:flex-start}
.conf-box{position:relative;width:calc(var(--S) * var(--r5));height:var(--S);transition:width .9s var(--ease),height .9s var(--ease);margin-bottom:56px}
.conf-box.is-a4{width:calc(var(--S) * 1.414 * var(--r4));height:calc(var(--S) * 1.414)}
.cb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s ease;filter:drop-shadow(0 24px 20px rgba(59,42,32,.28)) drop-shadow(0 5px 7px rgba(59,42,32,.16))}
.cb.on{opacity:1}
.ruler{position:absolute;left:0;right:0;top:calc(100% + 22px);height:0}
.ruler i{position:absolute;left:0;right:0;top:0;height:9px;border:1px solid var(--gold);border-top:0;opacity:.9}
.ruler span{position:absolute;left:50%;top:16px;transform:translateX(-50%);white-space:nowrap;font-family:var(--font-hand);font-size:1.5rem;color:var(--gold-deep);transition:opacity .35s}
.ruler span.fade{opacity:0}
.pills{display:flex;flex-wrap:wrap;gap:14px 20px;margin-bottom:clamp(20px,4vh,34px)}
.pill{position:relative;display:inline-flex;padding:4px;border-radius:99px;border:1px solid var(--gold);background:rgba(251,246,236,.8)}
.pill button{position:relative;z-index:1;min-width:92px;padding:.6em 1.3em;border:0;background:none;border-radius:99px;font:inherit;font-size:.86rem;letter-spacing:.08em;color:var(--espresso);cursor:pointer;transition:color .4s}
.pill button[aria-checked=true]{color:#fff}
.pill button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pill-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:linear-gradient(180deg,#D4AE57,#BE9440);box-shadow:0 6px 14px -6px rgba(150,110,30,.7);transition:transform .5s var(--ease)}
.pill.is-2 .pill-thumb{transform:translateX(100%)}
.cards{list-style:none;margin:0 0 1.4em;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.cc{min-width:200px;padding:clamp(22px,2.6vw,34px) 14px;text-align:center;border:1px solid rgba(201,162,75,.5);border-radius:18px;background:rgba(251,246,236,.7);box-shadow:0 18px 30px -24px rgba(59,42,32,.45)}
.cc-n{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--espresso-soft);margin-bottom:.7em}
.cc-p{position:relative;display:block;height:1.25em;font-family:var(--font-head);font-weight:400;font-size:2.6rem;line-height:1.2;color:var(--gold-deep);perspective:300px}
.cc-p span{position:absolute;left:0;right:0;top:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mb-conf .fmt-extras{font-size:.84rem;margin:.3em 0;color:var(--espresso-soft)}
.mb-conf .fmt-ustg{font-size:.74rem;margin:.2em 0;opacity:.8}

/* 10 Malen */
.mb-color{padding:clamp(28px,5vh,56px) var(--gutter) clamp(40px,7vh,80px)}
.mb-color .mb-head{margin-bottom:clamp(20px,3vh,34px)}
.paint-app{max-width:900px;margin:0 auto}
.paint-board{position:relative;aspect-ratio:1448/1086;background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(201,162,75,.7);box-shadow:0 30px 46px -30px rgba(59,42,32,.5),0 6px 14px -8px rgba(59,42,32,.18);line-height:0}
.paint-board canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.paint-board canvas.paint-fill{pointer-events:none;touch-action:auto}
.paint-board.is-fill canvas.paint-ink{cursor:cell}
.paint-mode{display:flex;justify-content:center;margin:22px 0 4px}
.paint-mode .pill button{min-width:130px}
.brushes[hidden]{display:none}
.paint-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-select:none}
.paint-tools{display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:center;align-items:center;margin:22px 0 6px}
.palette{margin:0}
.brushes{display:flex;gap:10px;align-items:center}
.bs{width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:#FBF6EC;color:var(--gold-deep);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s,color .3s}
.bs i{display:block;width:var(--d);height:var(--d);border-radius:50%;background:var(--espresso)}
.bs[aria-pressed=true]{background:var(--gold);color:#fff}
.bs[aria-pressed=true] i{background:#fff}
.bs:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.paint-wa{text-align:center;margin:30px 0 0}


@media (max-width:860px){
  .mb-hero{min-height:0;padding:calc(106px + 36vw) var(--gutter) 52px}
  .hs{--w:20vw}
  .hs--1{left:7vw;top:84px}.hs--2{left:29vw;top:96px;right:auto}.hs--3{left:51vw;top:84px;right:auto}.hs--4{left:73vw;top:96px;right:auto}
  .mb-hero-in::before{inset:-40px -30px}
  .table-scene{max-width:min(380px,calc(100% - 24px));margin:46px auto 60px}
  .tbk--l{left:1%}.tbk--r{right:1%}
  .dviewer .tbook{height:auto;width:min(calc(100vw - 96px),400px);margin-right:0}
  .mbs--grand .mbs-in{grid-template-columns:minmax(0,1fr)}
  .hbook{height:auto;width:min(calc(100vw - 80px),380px)}
  .fell2-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .fell2-text{text-align:center}
  .fell2-p{text-align:left}
  .sc2{max-width:none;width:100%}
  .lusi-stage{--H:min(60vw,250px)}
  .gv{display:block;min-height:0}
  .gv-bg{position:relative;inset:auto;height:64svh;min-height:380px}
  .gv-haze{background:linear-gradient(180deg,rgba(245,239,227,0) 70%,rgba(245,239,227,.9) 100%)}
  .gv-star{width:58px;height:58px;margin:-29px 0 0 -29px}
  .gv-text{padding:26px var(--gutter) 60px}
  .gv-text h2{max-width:none}
  .gv-pop{width:min(19rem,76vw)}
  .conf{grid-template-columns:minmax(0,1fr);--S:75.6vw;margin-top:32px}
  .cards{gap:8px;margin-right:0}
  .cc{min-width:0;padding:16px 4px}
  .cc-n{font-size:.62rem;letter-spacing:.06em}
  .cc-p{font-size:1.6rem}
  .pills{justify-content:center}
  .paint-app{max-width:none}
}
@media (min-width:861px){
  .dviewer .tbook{margin-right:0}
  .dviewer .tam-stage{height:auto}
}
@media (min-width:861px){
  /* feste Pixelbreite aus der Höhe (keine Prozentbreite → Safari kollabiert die Breite nicht), Seitenverhältnis exakt wie die Bilder */
  .tam-stage .hbook{--bh:min(70vh,620px,calc((50vw - 90px) * 1.4133));width:calc(var(--bh) * 1055 / 1491);height:auto;max-width:none}
  .tam-stage .tbook--d{--bh:min(70vh,620px,calc((50vw - 90px) * 1.3158));width:calc(var(--bh) * 1140 / 1500);height:auto;max-width:none}
}
@media (prefers-reduced-motion:reduce){.gv-star svg,.gv-star i,.sc2-hint{animation:none}}

/* Tamila (Startseite): Wischen / Ziehen statt Scroll-Bindung */
.tviewer .tam-stage{position:relative;touch-action:pan-y;cursor:grab}
.tviewer .tam-stage.is-drag{cursor:grabbing}
.tviewer .tbook{touch-action:pan-y}
.t-swipe{position:absolute;left:50%;bottom:-30px;z-index:10;margin:0;transform:translateX(-50%);font-family:var(--font-hand,"Caveat",cursive);font-size:1.45rem;line-height:1;color:var(--gold-deep);white-space:nowrap;pointer-events:none;transition:opacity .6s}
html.js:not(.calm) .t-swipe{animation:swipe-nudge 2.6s ease-in-out 1.2s infinite}
.tviewer.flipped .t-swipe{opacity:0;animation:none}
@keyframes swipe-nudge{0%,100%{transform:translateX(-50%)}30%{transform:translateX(calc(-50% - 8px))}60%{transform:translateX(calc(-50% + 8px))}}
.tviewer .tam-ctrl{margin-top:48px}
@media (max-width:860px){.tviewer .tbook{margin-bottom:46px}.t-swipe{bottom:-30px}}

/* ---- Home: Zeit-Block ---- */
.zeit{position:relative;padding:clamp(40px,7vh,80px) var(--gutter);overflow:hidden}
.zeit-wash{position:absolute;z-index:0;left:50%;top:50%;width:min(1100px,130%);height:130%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(ellipse 50% 46% at 50% 50%,rgba(240,196,150,.34) 0%,rgba(226,190,120,.2) 38%,rgba(246,239,228,0) 72%)}
.zeit-letter{position:relative;z-index:1;max-width:46rem;margin:0 auto;text-align:center}
.zeit-letter h2{font-size:clamp(1.8rem,5.6vw,2.6rem);line-height:1.2;margin:0 0 .9em}
.zeit-letter p{margin:0 0 1.2em;color:var(--espresso-soft);line-height:1.95}
.zeit-letter .zeit-anf{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,20px);font-family:var(--font-head);font-style:italic;font-size:clamp(1.2rem,4.2vw,1.5rem);line-height:1.4;color:var(--gold-deep);margin:1.5em 0}
.zeit-sw{flex:0 0 auto;width:clamp(30px,8vw,76px);max-width:none;height:22px;overflow:visible}
.zeit-sw--r{transform:scaleX(-1)}
.zeit-sw path{stroke-dasharray:1;stroke-dashoffset:0}
.zeit-letter .zeit-sign{display:block;margin:2em 0 0;color:var(--espresso);text-decoration:none}
.zeit-cta{display:block;font-family:var(--font-head);font-style:italic;font-size:clamp(1.1rem,3.6vw,1.3rem);line-height:1.6}
.zeit-name{display:inline-flex;align-items:center;gap:.35em;margin-top:.3em;font-family:var(--font-hand);font-size:2rem;color:var(--espresso);transition:color .5s}
.zeit-sign:hover .zeit-name{color:var(--gold-deep)}
.zeit-heart{margin-top:-.5em}
html.js:not(.calm) .zeit-rv{opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--i,0) * .12s)}
html.js:not(.calm) .zeit.is-in .zeit-rv{opacity:1;transform:none}
html.js:not(.calm) .zeit:not(.is-in) .zeit-sw path{stroke-dashoffset:1}
html.js:not(.calm) .zeit.is-in .zeit-sw path{animation:t-draw 2s ease-in-out .5s both}

/* ---- /malbuch/ Hero: Preislink + "Für wen?" ---- */
.hero-price{display:inline-block;margin-top:1.3em;font-size:.82rem;letter-spacing:.04em;color:var(--gold-deep);border-bottom:1px solid rgba(201,162,75,.5);transition:border-color .3s,color .3s}
.hero-price:hover{color:var(--espresso);border-color:var(--gold)}
.fw{margin-top:clamp(18px,3vh,30px)}
.fw-h{margin:0 0 .9em!important;font-family:var(--font-head);font-style:italic;font-size:1.05rem;color:var(--gold-deep)!important}
.fw ul{list-style:none;margin:0;padding:6px 4px 4px;display:flex;justify-content:center;gap:clamp(14px,2.4vw,28px)}
.fw a{display:flex;flex-direction:column;align-items:center;gap:9px;width:96px;text-align:center}
.fw-c{display:block;width:76px;height:76px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(201,162,75,.6),0 8px 18px -10px rgba(59,42,32,.45);transition:transform .4s var(--ease),box-shadow .4s}
.fw-c img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.fw a:hover .fw-c,.fw a:focus-visible .fw-c{transform:translateY(-4px);box-shadow:0 0 0 2px #C9A24B,0 14px 22px -10px rgba(59,42,32,.5)}
.fw-l{font-size:.74rem;line-height:1.25;letter-spacing:.03em;color:var(--espresso)}
@media (max-width:860px){
  .fw ul{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:14px;margin:0 calc(var(--gutter) * -1);padding:6px var(--gutter) 4px}
  .fw ul::-webkit-scrollbar{display:none}
  .fw a{width:78px;flex:none}
  .fw-c{width:58px;height:58px}
}

/* ---- Lieder-Player (wiederverwendbar) ---- */
.songs{padding:clamp(40px,7vh,80px) var(--gutter)}
.songs-in{max-width:1080px;margin:0 auto}
.songs-head{max-width:40rem;margin:0 auto clamp(24px,4vh,40px);text-align:center}
.songs-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 .6em}
.songs-head p{color:var(--espresso-soft);line-height:1.7}
.songs-sub{margin:1.6em 0 .5em;font-family:var(--font-head);font-style:italic;font-weight:400;font-size:1.25rem;color:var(--gold-deep)}
.songs-head .songs-quote{max-width:38rem;margin:0 auto;font-family:var(--font-head);font-style:italic;color:var(--espresso-soft)}
.sp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.sp{display:flex;gap:14px;align-items:flex-start;padding:18px;background:rgba(251,246,236,.86);border:1px solid var(--gold);border-radius:18px;box-shadow:0 18px 38px -30px rgba(59,42,32,.4)}
.sp-play{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:linear-gradient(180deg,#D4AE57,#BE9440);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 16px -8px rgba(150,110,30,.8);transition:transform .3s}
.sp-play:hover{transform:scale(1.06)}
.sp-play:focus-visible{outline:2px solid var(--espresso);outline-offset:3px}
.sp-play .i-pause,.sp.is-playing .sp-play .i-play{display:none}
.sp.is-playing .sp-play .i-pause{display:block}
.sp-main{flex:1;min-width:0}
.sp-main h3{margin:2px 0 0;font-family:var(--font-head);font-weight:400;font-size:1.2rem;line-height:1.2}
.sp-sub{margin:.15em 0 .6em;font-size:.74rem;letter-spacing:.04em;color:var(--espresso-soft)}
.sp-wave{display:block;width:100%;height:34px}
.sp-bar{position:relative;height:14px;margin-top:4px;cursor:pointer;touch-action:none}
.sp-bar::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:rgba(201,162,75,.28)}
.sp-bar i{position:absolute;left:0;top:6px;height:2px;width:0;border-radius:2px;background:var(--gold)}
.sp-bar i::after{content:"";position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.sp-bar:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.sp-time{margin:.3em 0 0;font-size:.72rem;letter-spacing:.06em;color:var(--espresso-soft);font-variant-numeric:tabular-nums}
@media (max-width:860px){.sp-list{grid-template-columns:1fr}}

/* ---- Konstrukteur-Hinweis ---- */
.conf-note{max-width:44rem;margin:clamp(14px,2.4vh,24px) auto 0;text-align:center;font-family:var(--font-head);font-style:italic;font-size:.9rem;line-height:1.55;color:var(--espresso-soft)}
@media (min-width:861px){.mb-hero{padding-top:clamp(92px,12vh,130px);padding-bottom:clamp(20px,3vh,36px)}.mb-hero h1{margin-bottom:.5em}}
.mb-hero-in{min-width:0;width:100%;max-width:44rem}
.fw{min-width:0;max-width:100%}
.hero-price{border-bottom:0;text-decoration:underline;text-decoration-color:rgba(201,162,75,.55);text-underline-offset:5px;text-decoration-thickness:1px}
.hero-price:hover{text-decoration-color:var(--gold)}

/* ============================================================
   /fotomagnet/
   ============================================================ */
body.page-fotomagnet .main-nav ul a[href$="fotomagnet/"]::after{transform:scaleX(1)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.js:not(.calm) .fm-rv{opacity:0}
.fm-small,.fm-privacy{font-size:.8rem;letter-spacing:.02em;color:var(--espresso-soft)}

/* --- 1 Hero --- */
.fm-hero{padding:clamp(104px,15vh,140px) var(--gutter) clamp(32px,5vh,56px)}
.fm-hero-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,7vw,110px);align-items:center}
.fm-hero h1{font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.15;margin-bottom:.7em}
.fm-lead{max-width:30rem;margin:0 0 1.6em;color:var(--espresso-soft);line-height:1.7}
.fm-vid,.fm-joy-vid{margin:0;position:relative;height:min(76vh,660px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--cream-2);
  box-shadow:0 30px 60px -28px rgba(59,42,32,.4),0 8px 24px -12px rgba(59,42,32,.2)}
.fm-vid video,.fm-joy-vid video,.fm-teach-play img{display:block;width:100%;height:100%;object-fit:cover;border-radius:18px}
@media (max-width:860px){
  .fm-hero{padding-top:104px}
  .fm-hero-in{grid-template-columns:minmax(0,1fr);text-align:center;gap:30px}
  .fm-lead{margin-left:auto;margin-right:auto}
  .fm-vid{height:auto;width:min(72vw,320px);margin:0 auto}
}

/* --- Magnet-Mockup (Anprobe + Größen) --- */
.mag{position:relative;width:var(--mw,100%);aspect-ratio:var(--ar,3/4);container-type:inline-size;perspective:1400px;-webkit-user-select:none;user-select:none}
.mag-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .6s var(--ease)}
.mag-body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--flip,0deg));transition:transform 1.1s var(--ease)}
.mag-face{position:absolute;inset:0;border-radius:min(10px,max(4px,3.4cqw));overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#EDE3D0;
  box-shadow:0 1px 2px rgba(59,42,32,.3),0 10px 18px -6px rgba(59,42,32,.34),0 26px 44px -16px rgba(59,42,32,.42);transition:box-shadow .6s var(--ease)}
.mag-back{transform:rotateY(180deg)}
.mag-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* Acrylkante: helle, halbtransparente Rahmenlinie über dem Foto */
.mag-face::after{content:"";position:absolute;inset:0;border-radius:inherit;border:min(6px,max(2px,2cqw)) solid rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 10px rgba(255,255,255,.25);pointer-events:none}
.mag-glare{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.3) 38%,rgba(255,255,255,.07) 46%,rgba(255,255,255,0) 50%,rgba(255,255,255,.16) 64%,rgba(255,255,255,0) 74%)}
.mag-btn{position:absolute;z-index:2;width:max(5px,4.4cqw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0,#eceef0 20%,#b3b8be 54%,#70757b 100%);
  box-shadow:0 1px 1.5px rgba(0,0,0,.4),inset 0 0 0 .5px rgba(255,255,255,.7)}
.mag-btn:nth-last-child(4){left:5.2cqw;top:5.2cqw}
.mag-btn:nth-last-child(3){right:5.2cqw;top:5.2cqw}
.mag-btn:nth-last-child(2){left:5.2cqw;bottom:5.2cqw}
.mag-btn:nth-last-child(1){right:5.2cqw;bottom:5.2cqw}

/* Beispielfotos zeigen echte Magnete (Knöpfe sind im Foto): keine CSS-Knöpfe, kein Acrylrand, kein Glanz */
.mag-real::after,.mag-real .mag-glare,.mag-real .mag-btn{display:none}

/* --- 2 Anprobe --- */
.fm-try{padding:clamp(40px,7vh,84px) var(--gutter)}
.fm-try-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.fm-try-text{max-width:30rem;text-align:left;order:2}
.fm-try-stage{order:1}
.fm-try-text h2{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.2;margin-bottom:.75em}
.fm-try-text p{margin:0 0 .95em;color:var(--espresso-soft);line-height:1.7}
.fm-up{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 1em}
.fm-up .hero-btn{cursor:pointer;background:transparent;font-family:inherit}
.fm-up .hero-btn.is-set{background:var(--gold);color:#fff}
.fm-up .hero-btn.is-set::after{content:"✓";letter-spacing:0}
.fm-up .hero-btn:focus-visible,.fm-flip:focus-visible,.env-open:focus-visible,.fm-teach-play:focus-visible,.fm-joy-snd:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.fm-try-stage{display:flex;flex-direction:column;align-items:center;gap:20px}
.mag-stage{--mw:min(310px,66vw);padding:22px 30px;cursor:grab;touch-action:pan-y}
.mag-stage:active{cursor:grabbing}
.fm-flip{background:none;border:0;padding:.4em .8em;cursor:pointer;font-family:var(--font-hand);font-size:clamp(1.6rem,2.4vw,2rem);line-height:1;color:var(--gold-deep)}
.fm-flip:hover{color:var(--espresso)}
.fm-try-wa{text-align:center}
@media (max-width:860px){
  .fm-try-in{grid-template-columns:minmax(0,1fr);gap:20px;text-align:center}
  .fm-try-text{max-width:none;margin:0 auto;order:0;text-align:center}
  .fm-try-stage{order:0}
  .fm-up{justify-content:center}
}

/* --- 3 Umschläge --- */
.fm-env{padding:clamp(40px,7vh,80px) var(--gutter) clamp(50px,8vh,90px)}
.env-row{list-style:none;margin:clamp(16px,3vh,36px) auto 0;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:end}
.env{display:flex;flex-direction:column;align-items:center;container-type:inline-size}
.env-stage{position:relative;width:min(100cqw,330px);aspect-ratio:10/8;margin-top:0;transition:transform .6s var(--ease),margin-top .4s var(--ease) 1.2s;
  filter:drop-shadow(0 10px 14px rgba(59,42,32,.22)) drop-shadow(0 22px 30px rgba(59,42,32,.14))}
.env-back,.env-front{position:absolute;inset:0;display:block;border-radius:6px}
.env-back{z-index:1;background:linear-gradient(180deg,#D6C49B,#E4D4B2)}
.env-front{z-index:3;background:linear-gradient(165deg,#FAF3E3,#EDE0C6);clip-path:polygon(0 0,50% 57.5%,100% 0,100% 100%,0 100%)}
.env-lines{position:absolute;inset:0;width:100%;height:100%}
.env-slot{position:absolute;z-index:2;inset:0;clip-path:inset(-150% -8% 0 -8%);pointer-events:none}
.env-card{position:absolute;pointer-events:auto;left:6%;right:6%;top:6%;height:112%;padding:clamp(14px,6cqw,24px) clamp(14px,6cqw,24px) 0;border-radius:8px;background:#FFFCF5;border:1px solid rgba(201,162,75,.5);
  box-shadow:0 8px 20px -10px rgba(59,42,32,.45);display:flex;flex-direction:column;justify-content:flex-start;
  transition:transform .5s ease-in-out,box-shadow .5s}
.env-flap{position:absolute;z-index:4;left:0;right:0;top:0;height:57.5%;transform-origin:50% 0;transform-style:preserve-3d;transform:perspective(900px) rotateX(0deg);
  transition:transform .5s ease-in-out .5s,z-index 0s .75s}
.ef{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ef::before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.ef-out::before{background:linear-gradient(180deg,#FBF5E7,#F0E4CC)}
.ef-in{transform:rotateX(180deg)}
.ef-in::before{clip-path:polygon(0 100%,100% 100%,50% 0);background:linear-gradient(180deg,#CDB98C,#DCC9A2)}
.env-seal{position:absolute;left:50%;top:100%;width:16cqw;max-width:56px;aspect-ratio:1;transform:translate(-50%,-50%);transition:opacity .2s ease 1s,scale .2s ease 1s;border-radius:52% 48% 50% 50%/50% 52% 48% 50%;
  background:radial-gradient(circle at 34% 28%,#EBD08A 0,#C9A24B 46%,#9E7829 100%);
  box-shadow:0 3px 6px rgba(59,42,32,.4),inset 0 0 0 2px rgba(255,255,255,.22),inset 0 -3px 6px rgba(100,70,10,.45)}
.env-seal-flower{transition:opacity .2s ease 1s;position:absolute;z-index:2;left:50%;top:100%;width:min(9.6cqw,34px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.85}
.env-open{position:absolute;z-index:6;inset:0;background:none;border:0;padding:0;cursor:pointer;border-radius:6px}
.env-name{margin:18px 0 0;font-size:clamp(1.15rem,1.9vw,1.4rem);text-align:center}
@media (hover:hover){.env:not(.is-open) .env-stage:hover{transform:translateY(-6px)}}
/* offen: Siegel weg (0,2 s) -> Klappe dreht sich am Falz (0,5 s) -> Karte fährt aus der Tasche (0,5 s); zu = umgekehrt */
.env.is-open .env-seal,.env.is-open .env-seal-flower{opacity:0;scale:.6;transition:opacity .2s ease,scale .2s ease}
.env.is-open .env-flap{transform:perspective(900px) rotateX(180deg);z-index:1;transition:transform .5s ease-in-out .2s,z-index 0s .45s}
.env.is-open .env-card{transform:translateY(-46%);transition:transform .5s ease-in-out .7s,box-shadow .5s .7s}
.env.is-open .env-open{top:62%}
.env.is-open .env-stage{margin-top:46cqw;transition-delay:0s}
.ec-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ec-play{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(180deg,#D4AE57,#BE9440);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 16px -8px rgba(150,110,30,.8);transition:transform .3s}
.ec-play:hover{transform:scale(1.06)}
.ec-play:focus-visible{outline:2px solid var(--espresso);outline-offset:3px}
.ec-play .i-pause,.ec-play.is-playing .i-play{display:none}
.ec-play.is-playing .i-pause{display:block}
.ec-mic{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-deep);display:grid;place-items:center}
.ec-wave{flex:1;min-width:0;width:100%;height:40px}
.ec-d{margin:0;font-family:var(--font-head);font-style:italic;font-size:.92rem;line-height:1.5;color:var(--espresso-soft)}
.ec-letter{margin:0;font-family:var(--font-hand);font-weight:500;font-size:clamp(1.45rem,2.1vw,1.75rem);line-height:1.3;color:var(--espresso);
  background-image:repeating-linear-gradient(transparent 0 calc(1.3em - 1px),rgba(201,162,75,.28) calc(1.3em - 1px) 1.3em)}
.ec-typed.is-typing::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;background:var(--gold-deep);vertical-align:-.12em;animation:ec-blink 1s steps(1) infinite}
@keyframes ec-blink{50%{opacity:0}}
@media (max-width:860px){
  .env-row{grid-template-columns:minmax(0,1fr);gap:26px;justify-items:center}
  .env{width:100%;max-width:340px}
  .env-row{padding-top:0}
}
.calm .env-flap,.calm .env-card,.calm .env-stage,.calm .env-seal,.calm .env-seal-flower,.calm .mag-body,.calm .mag-tilt{transition:none!important}

/* --- 4 Freudentränen --- */
.fm-joy{position:relative;overflow:hidden;background:var(--espresso-dark);color:#F3EADB;padding:clamp(48px,8vh,96px) var(--gutter)}
.fm-joy-flower{position:absolute;left:max(-6%,-90px);top:50%;width:min(46vw,540px);height:auto;transform:translateY(-50%);opacity:.1;pointer-events:none}
.fm-joy-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(28px,5vw,84px);align-items:center}
.fm-joy-vid{grid-column:2;grid-row:1;height:min(80vh,720px);box-shadow:0 34px 70px -28px rgba(0,0,0,.7)}
.fm-joy-text{grid-column:3;grid-row:1;max-width:24rem}
.fm-joy .s-eyebrow{color:var(--gold)}
.fm-joy blockquote{margin:0;font-family:var(--font-head);font-style:italic;font-size:clamp(1.35rem,2.4vw,2.05rem);line-height:1.42;color:#F7F1E5}
@media (max-width:860px){
  .fm-joy-in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:28px}
  .fm-joy-vid{grid-column:1;height:auto;width:min(76vw,340px)}
  .fm-joy-text{grid-column:1;grid-row:2}
}

/* --- 5 Lieder: fünf Karten, 3 + 2 --- */
.fm-songs .sp-list{grid-template-columns:repeat(6,minmax(0,1fr))}
.fm-songs .sp{grid-column:span 2}
.fm-songs .sp:nth-child(4){grid-column:2/4}
.fm-songs .sp:nth-child(5){grid-column:4/6}
.sp-sub:empty{display:none}
@media (max-width:860px){
  .fm-songs .sp-list{grid-template-columns:minmax(0,1fr)}
  .fm-songs .sp,.fm-songs .sp:nth-child(4),.fm-songs .sp:nth-child(5){grid-column:auto}
}

/* --- 6 Größen --- */
.fm-sizes{padding:clamp(40px,7vh,84px) var(--gutter) clamp(48px,8vh,90px)}
.fm-scale{container-type:inline-size;max-width:1000px;margin:clamp(14px,3vh,34px) auto 0}
.fm-sz-row{--k:min(22px,calc((100cqw - 64px) / 35));list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,3.4cqw,52px)}
.fm-sz,.fm-phone{display:flex;flex-direction:column;align-items:center;min-width:calc(7 * var(--k));text-align:center}
.fm-sz{cursor:pointer;outline:none}
.fm-sz-mag .mag{width:calc(var(--w) * var(--k));transition:transform .7s var(--ease)}
.fm-sz .mag-face{transition:box-shadow .7s var(--ease)}
.fm-sz:hover .mag,.fm-sz:focus-visible .mag,.fm-sz.is-lift .mag{transform:translateY(-12px)}
.fm-sz:hover .mag-face,.fm-sz:focus-visible .mag-face,.fm-sz.is-lift .mag-face{box-shadow:0 0 0 1px rgba(201,162,75,.9),0 0 26px 3px rgba(201,162,75,.5),0 26px 40px -14px rgba(59,42,32,.4)}
.fm-cap{height:5.8rem;display:flex;flex-direction:column;align-items:center}
.fm-sz-dim{margin:18px 0 0;font-size:.78rem;letter-spacing:.06em;color:var(--espresso-soft);white-space:nowrap}
.fm-sz-price{margin:.1em 0 0;font-family:var(--font-head);font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.2;color:var(--espresso)}
.fm-sz-sub{margin:.1em 0 0;font-size:.74rem;line-height:1.35;color:var(--espresso-soft);max-width:11em}
.fm-phone-svg{display:block;width:calc(7 * var(--k));height:calc(15 * var(--k));overflow:visible}
.fm-phone .fm-sz-dim{color:var(--gold-deep)}
.fm-ustg{max-width:44rem;margin:.4em auto 0;text-align:center;color:var(--espresso-soft)}
@media (max-width:600px){
  .fm-cap{height:5.2rem}
  .fm-sz-row{gap:8px}
  .fm-sz-dim{letter-spacing:0;font-size:.64rem;margin-top:12px}
  .fm-sz-sub{font-size:.66rem}
}

/* --- 7 Lehrer & Erzieher --- */
.fm-teach{padding:clamp(40px,7vh,84px) var(--gutter)}
.fm-teach-in{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,7vw,110px);align-items:center}
.fm-teach-text{max-width:32rem}
.fm-teach-text h2{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.2;margin-bottom:.75em}
.fm-teach-text p{margin:0 0 1.4em;color:var(--espresso-soft);line-height:1.7}
.fm-teach-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.fm-teach-actions .hero-btn{cursor:pointer;font-family:inherit}
.fm-more{font-family:var(--font-head);font-style:italic;color:var(--gold-deep);border-bottom:1px solid rgba(201,162,75,.55);padding-bottom:2px;transition:color .4s,border-color .4s}
.fm-more:hover{color:var(--espresso);border-color:var(--gold)}
.fm-teach-vid{margin:0}
.fm-teach-play{display:block;position:relative;padding:0;border:0;background:var(--cream-2);cursor:pointer;border-radius:18px;overflow:hidden;height:min(60vh,520px);aspect-ratio:9/16;
  box-shadow:0 30px 60px -28px rgba(59,42,32,.4),0 8px 24px -12px rgba(59,42,32,.2);transition:transform .7s var(--ease),box-shadow .7s}
.fm-teach-play:hover{transform:translateY(-4px)}
.fm-teach-dot{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;display:grid;place-items:center;padding-left:3px;color:#fff;
  background:rgba(201,162,75,.92);box-shadow:0 0 0 6px rgba(251,246,236,.55),0 10px 22px -8px rgba(59,42,32,.6)}
@media (max-width:860px){
  .fm-teach-in{grid-template-columns:minmax(0,1fr);text-align:center;gap:28px}
  .fm-teach-text{max-width:none;margin:0 auto}
  .fm-teach-actions{justify-content:center}
  .fm-teach-vid{order:-1;justify-self:center}
  .fm-teach-play{height:auto;width:min(66vw,300px)}
}

/* ============================================================
   Runde 2: Medien-Knöpfe, Lightbox-Kreuz, Hero-Quadrat, größere Größen, engere Abstände
   ============================================================ */
@media (min-width:861px){.env-row{padding-top:min(13vw,156px)}.env.is-open .env-stage{margin-top:0}}

/* Knöpfe unten am Video */
.mc{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:12px;pointer-events:none}
.mc-btn{pointer-events:auto;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(201,162,75,.55);background:rgba(247,241,229,.78);color:var(--espresso);
  display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,transform .3s}
.mc-btn:hover{background:rgba(247,241,229,.95);transform:scale(1.05)}
.mc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.mc-pp .i-play{display:none;margin-left:2px}
.mc-pp.is-paused .i-play{display:block}
.mc-pp.is-paused .i-pause{display:none}
.mc-snd .s-on{display:none}
.mc-snd.is-on .s-on{display:inline}
.mc-snd.is-on .s-off{display:none}
.fm-joy-vid video,.lb-card video{cursor:pointer}

/* Lightbox: Schließen-Kreuz immer sichtbar, auch auf dem Handy (Safe-Area) */
.lb-x{top:max(14px,calc(env(safe-area-inset-top) + 10px));right:max(14px,calc(env(safe-area-inset-right) + 10px));width:48px;height:48px;z-index:10;
  background:#F7F1E5;color:var(--espresso);border:1px solid var(--gold);box-shadow:0 6px 18px -6px rgba(59,42,32,.55)}
.lb-card video{max-height:86vh;max-height:86svh}

/* Hero: quadratisches Video, rechteckig weich auslaufend */
.fm-vid--sq{height:auto;aspect-ratio:1/1;width:min(560px,100%);border-radius:0;box-shadow:none;background:none;overflow:visible}
.fm-vid--sq video{border-radius:0;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect}
@media (max-width:860px){.fm-vid--sq{width:calc(100% + 2 * var(--gutter));margin:0 calc(-1 * var(--gutter))}}

/* Größen: 1,5-fach, Handy-Reihe über die ganze Breite */
.fm-scale{max-width:1240px}
.fm-sz-row{--g:clamp(8px,2cqw,26px);--k:min(33px,calc((100cqw - 4 * var(--g)) / 35));gap:var(--g)}
.fm-sz-price{font-size:clamp(1.4rem,2.8vw,2.4rem)}
.fm-sz-vid{margin-top:clamp(12px,2.4vh,24px)}
.fm-sizes .vid-dot{width:56px;height:56px}
@media (max-width:600px){
  .fm-scale{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .fm-sz-row{--g:6px}
}

/* Abstände zwischen den Blöcken auf /fotomagnet/ halbiert */
.fm-hero{padding-bottom:clamp(16px,2.5vh,28px)}
.fm-try{padding-top:clamp(20px,3.5vh,42px);padding-bottom:clamp(20px,3.5vh,42px)}
.fm-env{padding:clamp(20px,3.5vh,40px) var(--gutter) clamp(24px,4vh,45px)}
.fm-joy{padding-top:clamp(24px,4vh,48px);padding-bottom:clamp(24px,4vh,48px)}
.fm-songs{padding-top:clamp(20px,3.5vh,40px);padding-bottom:clamp(20px,3.5vh,40px)}
.fm-sizes{padding:clamp(20px,3.5vh,42px) var(--gutter) clamp(24px,4vh,45px)}
.fm-teach{padding-top:clamp(20px,3.5vh,42px);padding-bottom:clamp(20px,3.5vh,42px)}
body.page-fotomagnet .mb-faq{padding-top:clamp(20px,3.5vh,40px);padding-bottom:clamp(20px,3.5vh,40px)}
body.page-fotomagnet .mb-cta{padding-top:clamp(22px,3.5vh,40px);padding-bottom:clamp(22px,3.5vh,40px)}

/* Abstände /malbuch/: zwischen Blöcken höchstens ~80 px (Desktop) / 48 px (Handy) */
body.page-malbuch :is(.mbs,.mb-cover,.mb-occ,.mb-conf,.mb-color,.songs,.fell2,.mb-faq,.mb-cta,.zeit){padding-top:clamp(16px,2.8vh,36px);padding-bottom:clamp(16px,2.8vh,36px)}

/* Abstände Startseite */
body.page-home :is(.steps,.zeit,.trust,.contact,.divider,.prices){padding-top:clamp(16px,2.8vh,36px);padding-bottom:clamp(16px,2.8vh,36px)}
body.page-home .scene{min-height:0;padding:clamp(28px,5vh,48px) var(--gutter) clamp(16px,3vh,32px)}
@media (max-width:860px){body.page-home .scene{padding-top:24px;padding-bottom:16px}}
.lb-card video{width:auto;height:auto;max-width:92vw;max-height:86vh;max-height:86svh}
.fm-sz,.fm-phone{width:calc(var(--w) * var(--k));min-width:0}
.fm-cap{width:max-content}
.fm-sz-sub{max-width:11em}
@media (max-width:600px){
  .fm-sz-row{--k:min(33px,calc((100cqw - 4 * var(--g) - 16px) / 35))}
  .fm-sz-sub{max-width:80px}
}
@media (max-width:860px){
  :is(.fm-try,.fm-env,.fm-joy,.fm-songs,.fm-sizes,.fm-teach),body.page-fotomagnet :is(.mb-faq,.mb-cta){padding-top:22px;padding-bottom:22px}
}

/* =====================================================================
   /notizbuch/
   ===================================================================== */
body.page-notizbuch .main-nav ul a[href$="notizbuch/"]{color:var(--gold-deep)}
body.page-notizbuch .main-nav ul a[href$="notizbuch/"]::after{transform:scaleX(1)}

.nb-hero{padding-bottom:clamp(16px,2.5vh,28px)}
.nb-ph{margin:0;position:relative;height:min(76vh,660px);aspect-ratio:875/1400;border-radius:18px;overflow:hidden;background:var(--cream-2);
  box-shadow:0 30px 60px -28px rgba(59,42,32,.4),0 8px 24px -12px rgba(59,42,32,.2)}
.nb-ph img{display:block;width:100%;height:100%;object-fit:contain;border-radius:18px}
@media (max-width:860px){.nb-ph{height:auto;width:min(72vw,320px);margin:0 auto}}

body.page-notizbuch :is(.nb-car,.nb-cv,.nb-holo,.nb-who,.nb-prices){padding-top:clamp(20px,3.5vh,42px);padding-bottom:clamp(24px,4vh,45px)}
body.page-notizbuch .mb-faq{padding-top:clamp(20px,3.5vh,40px);padding-bottom:clamp(20px,3.5vh,40px)}
body.page-notizbuch .mb-cta{padding-top:clamp(22px,3.5vh,40px);padding-bottom:clamp(22px,3.5vh,40px)}
body.page-notizbuch .nb-car,body.page-notizbuch .nb-cv{padding-left:0;padding-right:0}
@media (max-width:860px){body.page-notizbuch :is(.nb-car,.nb-cv,.nb-holo,.nb-who,.nb-prices,.mb-faq,.mb-cta){padding-top:22px;padding-bottom:22px}}

/* --- 2 Karussell: Foto wird Cover --- */
.nb-carousel{position:relative;max-width:1500px;margin:0 auto}
.nbc-stage{overflow:hidden;padding:20px 0 30px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.nbc-track{display:flex;align-items:center;gap:clamp(16px,3.4vw,52px);list-style:none;margin:0;padding:0;transition:transform 1.1s var(--ease);will-change:transform}
.nbc-slide{flex:none;height:min(72vh,720px);height:min(72vh,720px,calc(68vw / var(--arn)));aspect-ratio:var(--ar);transform:scale(.82);opacity:.45;transition:transform 1s var(--ease),opacity 1s var(--ease)}
.nbc-slide.is-on{transform:none;opacity:1}
.nbc-card{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;background:var(--cream-2);box-shadow:0 30px 60px -28px rgba(59,42,32,.45),0 8px 24px -12px rgba(59,42,32,.22)}
.nbc-card img,.nbc-card canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:18px;pointer-events:none}
.nbc-cov{opacity:0}
.nbc-slide.is-cover .nbc-cov{opacity:1}
.nbc-slide.is-cover .nbc-cv{display:none}
html.calm .nbc-cov{transition:opacity .6s}
.nbc-arrow{position:absolute;top:calc(50% - 48px);z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:rgba(251,246,236,.92);color:var(--gold-deep);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px -10px rgba(59,42,32,.5);transition:background .35s,color .35s}
.nbc-arrow:hover{background:var(--gold);color:#fff}
.nbc-arrow:focus-visible,.nbc-go:focus-visible,.nbc-dot:focus-visible,.nbv-chip:focus-visible,.nbv-dot:focus-visible,.nb-zoom:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nbc-prev{left:clamp(8px,3vw,48px)}.nbc-next{right:clamp(8px,3vw,48px)}
.nbc-foot{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:2px}
.nbc-cap{margin:0;display:flex;gap:.8em;align-items:baseline;font-family:var(--font-hand);font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1;color:var(--espresso-soft)}
.nbc-cap i{font-style:normal;color:var(--gold)}
.nbc-cap span{transition:color .6s}
.nbc-cap span.on{color:var(--gold-deep)}
.nbc-go{cursor:pointer;background:transparent;font-family:inherit}
.nbc-dots{display:flex;gap:10px}
.nbc-dot{width:10px;height:10px;padding:0;border-radius:50%;border:1px solid var(--gold);background:transparent;cursor:pointer;transition:background .4s,transform .4s;position:relative}
.nbc-dot::after{content:"";position:absolute;inset:-12px}
.nbc-dot.on{background:var(--gold);transform:scale(1.25)}
@media (max-width:700px){
  .nbc-slide{height:min(64svh,560px,calc(66vw / var(--arn)))}
  .nbc-arrow{width:40px;height:40px;top:calc(50% - 44px)}
  .nbc-prev{left:4px}.nbc-next{right:4px}
}

/* --- 3 Konstruktor --- */
.nbv{max-width:1080px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.nbv-form{display:flex;flex-direction:column;max-width:30rem}
.nbv-l{display:block;text-align:left;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 .5em}
.nbv-l:not(:first-child){margin-top:1.1em}
.nbv-in{width:100%;font:inherit;font-size:1rem;color:var(--espresso);padding:.75em 1em;border:1px solid rgba(201,162,75,.65);border-radius:14px;background:rgba(251,246,236,.85);transition:border-color .3s,box-shadow .3s}
.nbv-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.22)}
.nbv-chips{list-style:none;margin:.9em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.nbv-chip{font:inherit;font-size:.82rem;line-height:1.35;text-align:left;color:var(--espresso);padding:.4em .95em;border:1px solid var(--gold);border-radius:99px;background:rgba(201,162,75,.1);cursor:pointer;transition:background .35s,border-color .35s,color .35s,transform .35s var(--ease)}
.nbv-chip:hover{background:rgba(201,162,75,.22);transform:translateY(-1px)}
.nbv-chip.on{background:var(--gold);border-color:var(--gold);color:#fff}
.nbv-note{margin:.9em 0 0;color:var(--espresso-soft);font-size:.78rem}
.nbv-pal{display:flex;gap:14px;margin:1.3em 0 1.5em}
.nbv-dot{width:34px;height:34px;padding:0;border-radius:50%;border:2px solid #fff;cursor:pointer;box-shadow:0 0 0 1px rgba(201,162,75,.6),0 6px 12px -6px rgba(59,42,32,.5);transition:box-shadow .35s,transform .35s var(--ease)}
.nbv-dot:hover{transform:scale(1.08)}
.nbv-dot[aria-checked="true"]{box-shadow:0 0 0 2px var(--gold),0 6px 12px -6px rgba(59,42,32,.5)}
.nbv-dot[data-pal="0"]{background:linear-gradient(135deg,#C9B1EA,#E6CDF3)}
.nbv-dot[data-pal="1"]{background:linear-gradient(135deg,#F6BFD2,#FBDCCF)}
.nbv-dot[data-pal="2"]{background:linear-gradient(135deg,#BCE0CC,#E1EFD3)}
.nbv-dot[data-pal="3"]{background:linear-gradient(135deg,#B5D6F2,#DDEBF8)}
.nbv-dot[data-pal="4"]{background:linear-gradient(135deg,#F6E6BE,#E3C27A)}
.nbv-photo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 1.2em}
.nbv-photo-btn{font:inherit;font-size:.85rem;color:var(--espresso);padding:.55em 1.2em;border:1px solid var(--gold);border-radius:99px;background:rgba(201,162,75,.1);cursor:pointer;transition:background .35s}
.nbv-photo-btn:hover{background:rgba(201,162,75,.22)}
.nbv-photo-rm{font:inherit;font-size:.78rem;color:var(--espresso-soft);padding:.3em .2em;border:0;background:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.nbv-photo-note{flex-basis:100%;margin:0;font-size:.72rem;color:var(--espresso-soft)}
.nbv-photo-btn:focus-visible,.nbv-photo-rm:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nbv-wa{align-self:flex-start;text-align:center}
.nbv-stage{display:flex;justify-content:center;padding-left:22px}

.nbk{--c1:#C9B1EA;--c2:#DCC6F0;--c3:#F1DDF6;--ink:#5B3F8A;position:relative;height:min(60vh,540px);aspect-ratio:5/7;container-type:size;transition:filter .6s}
.nbk[data-pal="1"]{--c1:#F6BFD2;--c2:#F9D3DE;--c3:#FCE6D9;--ink:#9C3F5E}
.nbk[data-pal="2"]{--c1:#BCE0CC;--c2:#D4EBD6;--c3:#EEF3D8;--ink:#3A6E5A}
.nbk[data-pal="3"]{--c1:#B5D6F2;--c2:#CFE5F7;--c3:#E6F1FA;--ink:#35608C}
.nbk[data-pal="4"]{--c1:#F6E6BE;--c2:#EBD090;--c3:#FBF3E2;--ink:#7A5A14}
.nbk-cover{position:absolute;inset:0;border-radius:6px 16px 16px 6px;overflow:hidden;container-type:inline-size;text-align:center;
  background:radial-gradient(120% 70% at 85% 8%,var(--c1),transparent 60%),radial-gradient(110% 80% at 8% 95%,var(--c3),transparent 62%),linear-gradient(165deg,var(--c1),var(--c2) 52%,var(--c3));
  box-shadow:0 30px 60px -28px rgba(59,42,32,.45),0 8px 24px -12px rgba(59,42,32,.25),inset 0 0 0 1px rgba(255,255,255,.35);color:var(--ink);transition:background .8s,color .8s}
.nbk-name{margin:0;padding:15% 6% 0 calc(6% + 9cqw);font-family:var(--font-head);font-size:min(14cqw,calc(74cqw / (var(--nl,5) * 1.12)));line-height:1.1;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;white-space:nowrap;min-height:1.2em}
.nbk-line{display:flex;align-items:center;gap:3cqw;width:56%;margin:5cqw 0 3cqw auto;margin-left:calc(22% + 4.5cqw);font-style:normal}
.nbk-line::before,.nbk-line::after{content:"";flex:1;height:1px;background:currentColor;opacity:.55}
.nbk-line b{font-weight:400;font-size:4.4cqw;line-height:1}
.nbk-phrase{margin:0;padding:0 8% 0 calc(8% + 9cqw);font-family:var(--font-hand);font-weight:500;font-size:clamp(5.6cqw,calc(250cqw / var(--pl,20)),10cqw);line-height:1.12;text-wrap:balance;min-height:2.4em}
.nbk-name span,.nbk-phrase span{display:inline-block;transition:opacity .28s ease,transform .28s ease,filter .28s ease}
.nbk-name span.is-swap,.nbk-phrase span.is-swap{opacity:0;transform:translateY(6px);filter:blur(2px)}
.nbk-brand{position:absolute;left:calc(9cqw);right:0;bottom:5.5%;margin:0;font-size:2.8cqw;letter-spacing:.5em;text-indent:.5em;opacity:.65;font-weight:400}
.nbk-photo{position:absolute;inset:0;display:none}
.nbk-photo img{display:block;width:100%;height:100%;object-fit:cover}
.nbk-veil{position:absolute;left:10%;right:2%;top:4%;height:42%;display:none;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.6),rgba(255,255,255,0));
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%)}
.nbk-cover::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s,box-shadow .8s;
  box-shadow:inset 0 0 11cqw 1cqw color-mix(in srgb,var(--c1) 55%,transparent)}
.nbk.has-photo .nbk-photo,.nbk.has-photo .nbk-veil{display:block}
.nbk.has-photo .nbk-cover::after{opacity:1}
.nbk.has-photo .nbk-name,.nbk.has-photo .nbk-phrase,.nbk.has-photo .nbk-line{text-shadow:0 0 18px var(--c1),0 0 18px #fff,0 0 8px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.8)}
.nbk.has-photo .nbk-brand{display:none}
.nbk-name,.nbk-line,.nbk-phrase{position:relative;z-index:1}
.nbk-rings{position:absolute;z-index:2;left:-14px;top:5%;bottom:5%;width:42px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.nbk-rings i{display:block;height:11px;border-radius:99px;border:2px solid #A9822F;background:linear-gradient(#F0D68B,#C9A24B 55%,#8E6B22);box-shadow:0 2px 3px rgba(59,42,32,.35)}
@media (max-width:860px){
  /* Handy: erst die Felder, direkt darunter das Cover (man sieht beim Tippen die Wirkung), dann Sätze, Farben, Knopf */
  .nbv{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .nbv-form{display:contents}
  .nbv-form>*{order:2;max-width:none}
  .nbv-form>.nbv-l,.nbv-form>.nbv-in{order:0}
  .nbv-form>.nbv-chips,.nbv-form>.nbv-note{text-align:left}
  .nbv-stage{order:1;padding-left:18px;margin:22px 0 6px}
  .nbv-wa{align-self:stretch}
  .nbk{height:auto;width:min(64vw,270px)}
}

/* --- 4/5 Video + Text --- */
.nb-split{max-width:1040px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,7vw,100px);align-items:center}
.nb-split--rev{grid-template-columns:minmax(0,1fr) auto}
.nb-vid{margin:0;position:relative;height:min(70vh,620px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--cream-2);
  box-shadow:0 30px 60px -28px rgba(59,42,32,.4),0 8px 24px -12px rgba(59,42,32,.2)}
.nb-vid video{display:block;width:100%;height:100%;object-fit:cover;border-radius:18px}
.nb-zoom{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in;color:#fff;border-radius:18px}
.nb-zoom svg{position:absolute;right:12px;bottom:12px;padding:8px;width:34px;height:34px;box-sizing:content-box;border-radius:50%;background:rgba(30,22,18,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nb-text{max-width:30rem}
.nb-text h2{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.2;margin-bottom:.8em}
.nb-dash{list-style:none;margin:0 0 1.3em;padding:0}
.nb-dash li{position:relative;padding-left:2em;margin:0 0 1em;color:var(--espresso-soft);line-height:1.7}
.nb-dash li::before{content:"";position:absolute;left:0;top:.95em;width:1.2em;height:1px;background:var(--gold)}
.nb-dash strong{font-weight:500;color:var(--espresso)}
.nb-extra{margin:0;font-family:var(--font-head);font-style:italic;color:var(--gold-deep);line-height:1.6}
.nb-prices-sub{margin:.7em auto 0;max-width:36rem;text-align:center;font-family:var(--font-head);font-style:italic;font-size:clamp(.98rem,1.6vw,1.15rem);line-height:1.5;color:var(--espresso-soft)}
@media (max-width:860px){
  .nb-split,.nb-split--rev{grid-template-columns:minmax(0,1fr);gap:24px}
  .nb-vid{height:auto;width:min(72vw,300px);margin:0 auto}
  .nb-split--rev .nb-vid{order:2}
  .nb-text{max-width:none}
  .nb-text h2{text-align:center}
}
.nb-vid .nb-zoom{z-index:2}
.nb-split--holo{max-width:1240px;gap:clamp(24px,3.5vw,56px);grid-template-columns:minmax(0,520px) minmax(0,1fr)}
.nb-split--holo .nb-text{max-width:35rem}
.nb-vid--soft{height:auto;aspect-ratio:4/5;width:100%;border-radius:0;box-shadow:none;background:none;overflow:visible}
.nb-vid--soft video{border-radius:0;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect}
@media (max-width:860px){.nb-split--holo{grid-template-columns:minmax(0,1fr)}.nb-vid--soft{width:calc(100% + 2 * var(--gutter));max-width:none;margin:0 calc(-1 * var(--gutter))}}

/* --- 6 Für wen --- */
.nb-who-ph{margin:clamp(18px,3vh,30px) auto 0;width:min(78vw,340px);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(59,42,32,.4),0 8px 24px -12px rgba(59,42,32,.2)}
.nb-who-ph img{display:block;width:100%;height:auto;border-radius:18px}

/* --- 7 Preise --- */
.nb-cards{max-width:900px;margin:clamp(14px,3vh,30px) auto 0;padding:0 var(--gutter)}
.nb-cc{display:flex;flex-direction:column;align-items:center;gap:.35em;min-width:0}
.nb-cc .cc-n{margin-bottom:.2em;font-size:.9rem;letter-spacing:.2em}
.nb-p{display:block;font-family:var(--font-head);font-weight:400;font-size:2.6rem;line-height:1.2;color:var(--gold-deep)}
.nb-pg{font-size:.84rem;color:var(--espresso-soft)}
.nb-combo-note{margin:.9em auto 0;text-align:center;font-size:.76rem;line-height:1.45;color:var(--gold-deep)}
@media (max-width:620px){
  .nb-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 var(--gutter)}
  .nb-cc{padding:16px 4px;min-width:0}
  .nb-cc .cc-n{font-size:.62rem;letter-spacing:.06em}
  .nb-p{font-size:1.6rem}
  .nb-pg{font-size:.7rem}
}

/* Lightbox: Videos ohne Ton, Ton-Knopf entfällt */
.lb--mute .mc-snd{display:none}

/* ===== Komponente: Holografische Folien ===== */
.fol{margin:1.4em 0 1.6em;text-align:center}
.fol-h{margin:0 0 1em;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.fol-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 6px}
.fol-i{display:flex;flex-direction:column;align-items:center;gap:8px;width:76px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.fol-s{position:relative;display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;isolation:isolate;border:1px solid var(--gold);box-shadow:0 0 0 2px rgba(251,246,236,.9),0 8px 16px -6px rgba(59,42,32,.45);transition:transform .6s var(--ease)}
.fol-s img{display:block;width:100%;height:100%;object-fit:cover}
.fol-s::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:soft-light;transition:opacity .5s;
  background:linear-gradient(125deg,transparent 28%,rgba(255,110,200,.9) 40%,rgba(110,230,255,.9) 50%,rgba(255,240,120,.9) 60%,transparent 72%);background-size:260% 260%;background-position:130% 130%}
.fol-n{font-size:.7rem;line-height:1.25;color:var(--espresso-soft)}
.fol-note{margin:1.1em 0 0;font-size:.74rem;color:var(--espresso-soft)}
.fol-i:is(:hover,:focus-visible,.is-on) .fol-s{transform:scale(1.15)}
.fol-i:is(:hover,:focus-visible,.is-on) .fol-s::after{opacity:1;animation:fol-shine 2.8s ease-in-out infinite}
.fol-i:focus-visible .fol-s{outline:2px solid var(--gold);outline-offset:3px}
@keyframes fol-shine{from{background-position:130% 130%}to{background-position:-30% -30%}}
html.calm .fol-s{transition:none}
html.calm .fol-i:is(:hover,:focus-visible,.is-on) .fol-s::after{animation:none;background-position:50% 50%}
@media (max-width:860px){
  .fol-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;max-width:300px;margin:0 auto}
  .fol-i{width:auto}
  .fol-s{width:56px;height:56px}
}
.mb-cover .fol{margin-top:clamp(24px,4vh,44px)}

/* ===== /notizbuch/: A6, Video-Knöpfe ===== */
.nb-a6{padding:clamp(20px,3.5vh,42px) var(--gutter)}
.nb-a6-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:center}
.nb-a6 .nb-text{max-width:none}
.nb-a6 .nb-text>p{max-width:34rem}
.nb-a6-ph{margin:0}
.nb-a6-ph img{display:block;width:100%;height:auto;background:none;filter:drop-shadow(0 22px 22px rgba(59,42,32,.3)) drop-shadow(0 6px 8px rgba(59,42,32,.18))}
.nb-a6 .nb-text h2{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:.6em}
.nb-a6 .nb-text p{color:var(--espresso-soft);line-height:1.7;margin:0 0 1em}
.nb-a6 .nb-text .nb-a6-price{font-family:var(--font-head);font-style:italic;color:var(--gold-deep)}
.nb-a6 .vid-open{text-align:left;margin-top:1.1em}
.nb-a6-btn{display:flex;flex-wrap:wrap;gap:12px 14px}
.nb-a6 .vid-dot{width:56px;height:56px}
.nb-a6 .vid-btn{width:auto;max-width:100%}
.nb-a6 .vid-txt{white-space:nowrap;font-size:clamp(1.3rem,5.2vw,1.6rem)}
.nb-a6 .vid-btn{gap:12px;padding-right:20px}
@media (max-width:860px){
  .nb-a6-in{grid-template-columns:minmax(0,1fr);gap:20px}
  .nb-a6-ph{width:min(72vw,320px);margin:0 auto}
  .nb-a6 .nb-text{text-align:center}
  .nb-a6 .vid-open{text-align:center}
  .nb-a6-btn{flex-direction:column;align-items:center}
}

/* ============================================================
   /kita-schule/  (Runde 5: ein Container, 12-Spalten-Raster)
   ============================================================ */
body.page-kita-schule .main-nav ul a[href$="kita-schule/"]{color:var(--gold-deep)}
body.page-kita-schule .main-nav ul a[href$="kita-schule/"]::after{transform:scaleX(1)}

/* Container + Raster: alle Sektionen auf einer Linie */
.ks-wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.ks-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:64px;align-items:center}
.ks-sec{padding:60px 0}
.ks-sec .ks-wrap+.ks-wrap{margin-top:56px}

/* Fotos */
.ks-ph{margin:0;border-radius:18px;overflow:hidden;background:var(--cream-2);box-shadow:0 30px 60px -28px rgba(59,42,32,.4),0 8px 24px -12px rgba(59,42,32,.2)}
.ks-ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:18px}
.ks-ph--hero{grid-column:7/span 6;height:560px}
.ks-ph--a{grid-column:1/span 5;height:620px}
.ks-ph--b{grid-column:8/span 5;height:520px}
.ks-ph--b img{object-position:center 45%}

.ks-letter{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);background:rgba(201,162,75,.14);color:var(--gold-deep);font-family:var(--font-head);font-size:1rem;letter-spacing:0;line-height:1}
.ks-letter--s{width:26px;height:26px;font-size:.78rem;margin-right:.8em;vertical-align:middle;position:relative;top:-1px}

/* Hero */
.ks-hero{padding:132px 0 60px}
.ks-hero-text{grid-column:1/span 6}
.ks-hero h1{font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1.15;margin-bottom:.6em}
.ks-lead{max-width:640px;margin:0 0 1.6em;color:var(--espresso-soft);line-height:1.7}
.ks-pick{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ks-pick-card{display:flex;align-items:center;gap:16px;width:100%;padding:16px 20px;border:1px solid rgba(201,162,75,.55);border-radius:18px;background:rgba(251,246,236,.75);box-shadow:0 14px 26px -22px rgba(59,42,32,.5);text-align:left;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s,background .4s}
.ks-pick-card:hover{transform:translateY(-3px);border-color:var(--gold);background:rgba(251,246,236,.95);box-shadow:0 20px 30px -22px rgba(59,42,32,.55)}
.ks-pick-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ks-pick-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ks-pick-txt b{font-family:var(--font-head);font-weight:400;font-size:1.12rem;line-height:1.3;color:var(--espresso)}
.ks-pick-txt small{font-size:.85rem;line-height:1.45;color:var(--espresso-soft)}
.ks-arrow{flex:none;width:10px;height:10px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);margin:0 6px 0 4px;transition:transform .4s var(--ease)}
.ks-pick-card:hover .ks-arrow{transform:translateY(3px) rotate(45deg)}

/* Text-Spalten (7 Spalten, Absaetze max. ~68 Zeichen) */
.ks-text{grid-column:6/span 7;min-width:0}
.ks-b .ks-text{grid-column:1/span 7}
.ks-text h2,.ks-c-head h2{font-size:clamp(2rem,3vw,2.6rem);line-height:1.18;letter-spacing:-.005em;margin-bottom:.7em}
.ks-text p{max-width:640px;margin:0 0 1.2em;color:var(--espresso-soft);line-height:1.7}
.ks-text .s-eyebrow{display:flex;align-items:center}
.ks-vbtn{cursor:pointer;font-family:inherit}

/* Block A: unter Foto+Text, zwei Teile ohne Rahmen */
.ks-a-in{align-items:start}
.ks-a-left{grid-column:1/span 5}
.ks-inside{grid-column:6/span 7;min-width:0}
.ks-inside h3{font-size:clamp(1.3rem,2vw,1.6rem);margin-bottom:.9em}
.ks-scheme{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin:0 0 1.5em}
.ks-side{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.ks-mag{display:block;width:92px;border-radius:10px;overflow:hidden;box-shadow:0 14px 22px -12px rgba(59,42,32,.5)}
.ks-mag img{display:block;width:100%;height:auto}
.ks-side figcaption,.ks-cap{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.35}
.ks-side b,.ks-cap b{font-weight:400;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.ks-side small,.ks-cap small{font-size:.84rem;color:var(--espresso-soft)}
.ks-side--back{align-items:stretch;gap:12px}
.ks-opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ks-opts li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid rgba(201,162,75,.5);border-radius:14px;background:rgba(251,246,236,.8);text-align:center;font-size:.78rem;line-height:1.3;color:var(--espresso)}
.ks-opts .ico{width:26px;height:26px}
.ks-list{list-style:none;margin:0 0 1.4em;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px}
.ks-list li{display:flex;gap:14px;align-items:flex-start}
.ks-list .ico{margin-top:2px}
.ks-list h4{margin:0 0 3px;font-family:var(--font-body);font-weight:500;font-size:1rem;line-height:1.4;color:var(--espresso)}
.ks-list p{margin:0;font-size:.9rem;line-height:1.6;color:var(--espresso-soft)}
.ks-color{margin:0;font-family:var(--font-head);font-style:italic;font-size:1rem;color:var(--espresso-soft);line-height:1.65}
.ks-disc{border-top:1px solid rgba(201,162,75,.6);padding-top:22px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:64px}
.ks-disc p{grid-column:6/span 7;display:flex;gap:14px;align-items:flex-start;margin:0;font-size:.95rem;line-height:1.6;color:var(--espresso)}
.ks-disc .ico{margin-top:2px}

/* Block B */
.ks-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ks-tag{padding:.5em 1.1em;border:1px solid var(--gold);border-radius:99px;background:rgba(201,162,75,.12);font-size:.88rem;color:var(--espresso)}
.ks-pcards{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ks-pc{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 16px 20px;border:1px solid rgba(201,162,75,.5);border-radius:18px;background:rgba(251,246,236,.78);box-shadow:0 18px 30px -24px rgba(59,42,32,.45);transition:transform .5s var(--ease),box-shadow .5s}
.ks-pc:hover{transform:translateY(-4px);box-shadow:0 26px 34px -24px rgba(59,42,32,.5)}
.ks-pc-ph{position:relative;width:100%;height:150px;margin-bottom:8px;border-radius:14px;overflow:hidden;background:var(--cream-2);box-shadow:0 10px 18px -10px rgba(59,42,32,.45)}
.ks-pc-ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px}
.ks-pc-ph--mag img{object-position:center 60%}
.ks-pc-note{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font-size:1rem;line-height:1;box-shadow:0 4px 10px -3px rgba(59,42,32,.5)}
.ks-pc h3{font-size:1.15rem;line-height:1.3}
.ks-pc p{margin:0 0 auto;font-size:.9rem;line-height:1.6;color:var(--espresso-soft)}
.ks-pc .fm-more{margin-top:12px;font-size:.92rem}

/* Block C: links Video (sticky), rechts Text */
.ks-c-grid{align-items:start}
.ks-c-left{grid-column:1/span 5;position:sticky;top:120px;display:flex;flex-direction:column;gap:18px}
.ks-c-right{grid-column:6/span 7}
.ks-vid{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.ks-play{display:block;position:relative;width:100%;aspect-ratio:4/5;padding:0;border:0;background:var(--cream-2);cursor:pointer;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(59,42,32,.4),0 8px 24px -12px rgba(59,42,32,.2);transition:transform .7s var(--ease)}
.ks-play:hover{transform:translateY(-4px)}
.ks-play img{display:block;width:100%;height:100%;object-fit:cover;border-radius:18px}
.ks-vcap{text-align:center;font-family:var(--font-hand);font-size:1.45rem;line-height:1.2;color:var(--gold-deep)}
.ks-c-extra{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.ks-c-extra .ks-vbtn{align-self:center}
.ks-song{margin:0}
.ks-song .sp-list{grid-template-columns:1fr}
.ks-song .sp{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid rgba(201,162,75,.5);border-radius:18px;background:rgba(251,246,236,.78)}
.ks-text p.ks-end,.ks-c-body p.ks-end{margin:-.2em 0 1.2em;font-family:var(--font-hand);font-size:clamp(1.8rem,2.6vw,2.2rem);line-height:1.2;color:#C9A24B}
.ks-contact{display:flex;gap:14px;align-items:flex-start;margin:0;font-size:.95rem;line-height:1.65}
.ks-contact .ico{margin-top:3px;width:24px;height:24px}

/* Fruehzeitig planen: Band ueber die ganze Breite */
.ks-when{position:relative;padding:84px 0;margin:36px 0}
.ks-when::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(251,246,238,0),#FBF6EE 22%,#FBF6EE 78%,rgba(251,246,238,0));
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent);pointer-events:none}
.ks-when .ks-wrap{position:relative}
.ks-when-card{max-width:720px;margin:0 auto;text-align:center}
.ks-when-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;border:1px solid var(--gold);background:rgba(201,162,75,.14)}
.ks-when-ico .ico{width:32px;height:32px}
.ks-when-card h2{font-size:clamp(1.8rem,2.8vw,2.4rem);margin-bottom:.6em}
.ks-when-card p{margin:0;color:var(--espresso-soft);line-height:1.75}

/* Fotos sicher + FAQ */
.ks-safe-card{max-width:820px;margin:0 auto;display:flex;gap:clamp(16px,3vw,28px);align-items:flex-start;padding:clamp(24px,4vw,40px);border:1.5px solid var(--gold);border-radius:18px;background:rgba(253,250,243,.92);box-shadow:0 26px 46px -28px rgba(59,42,32,.5)}
.ks-safe-ico{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:1px solid var(--gold);background:rgba(201,162,75,.14)}
.ks-safe-ico .ico{width:32px;height:32px}
.ks-safe-card h3{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:.7em}
.ks-safe-list{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:10px}
.ks-safe-list li{position:relative;padding-left:22px;line-height:1.6;color:var(--espresso)}
.ks-safe-list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.ks-safe-note{margin:0;font-size:.88rem;line-height:1.6;color:var(--espresso-soft)}
.ks-faq{padding:60px 0}
.ks-faq .mb-head,.ks-faq .faq-list{max-width:820px;margin-left:auto;margin-right:auto}
.ks-faq .mb-head{padding:0}

/* CTA */
.ks-cta-btns{flex-direction:column;align-items:center}
.ks-cta-btns .hero-btn{width:min(100%,460px);justify-content:center;text-align:center;gap:.9em;line-height:1.5}
.ks-cta-btns .hero-btn .ico{width:22px;height:22px;color:currentColor}
@media (min-width:1000px){.ks-cta-btns{flex-direction:row;justify-content:center;align-items:stretch}.ks-cta-btns .hero-btn{width:auto;flex:1 1 0;max-width:340px}}

/* Tablet / Handy */
@media (max-width:980px){
  .ks-wrap{padding:0 20px}
  .ks-grid{display:flex;flex-direction:column;align-items:stretch;gap:28px}
  .ks-sec{padding:36px 0}
  .ks-hero{padding:104px 0 36px}
  .ks-hero-text{order:2}
  .ks-ph--hero{order:1;height:auto;aspect-ratio:4/3}
  .ks-ph--a,.ks-ph--b{height:auto;aspect-ratio:4/3}
  .ks-b .ks-text{order:-1}
  .ks-text h2,.ks-c-head h2{font-size:clamp(1.8rem,7vw,2.2rem)}
  .ks-hero h1{font-size:clamp(2rem,8vw,2.5rem)}
  .ks-list{grid-template-columns:1fr;gap:20px}
  .ks-disc{display:block}
  .ks-disc p{display:flex}
  .ks-vbtn{align-self:center}
  .ks-tags{justify-content:flex-start}
  .ks-pcards{display:flex;overflow-x:auto;gap:16px;margin:0 -20px;padding:4px 20px 14px;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ks-pcards::-webkit-scrollbar{display:none}
  .ks-pc{flex:0 0 74%;scroll-snap-align:start}
  .ks-c-grid{display:flex;flex-direction:column}
  .ks-c-left,.ks-c-right{display:contents}
  .ks-c-head{order:1}
  .ks-c-media{order:2}
  .ks-c-body{order:3}
  .ks-c-extra{order:4}
  .ks-c-media .ks-play{width:min(72vw,300px);aspect-ratio:9/14}
  .ks-when{padding:56px 0;margin:20px 0}
  .ks-safe-card{flex-direction:column;align-items:flex-start}
  .ks-faq{padding:36px 0}
}
@media (max-width:520px){
  .ks-scheme{grid-template-columns:minmax(0,1fr);justify-items:center}
  .ks-opts li{font-size:.72rem}
}

/* Rabatt- und Stimmen-Block: siehe unten */

/* ============================================================
   Stimmen (Startseite): Zettel + Lightbox
   ============================================================ */
.st{padding:clamp(36px,6vh,70px) var(--gutter)}
.st-eyebrow{margin:0 0 clamp(22px,4vh,38px);text-align:center;font-family:var(--font-hand);font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.2;color:#C9A24B}
.st-row{list-style:none;margin:0 auto;padding:12px 0;max-width:900px;display:flex;justify-content:center;gap:clamp(22px,4vw,52px)}
.st-item{width:150px;display:flex;flex-direction:column;align-items:center;gap:14px}
.st-note{position:relative;display:block;width:150px;height:190px;padding:0;border:0;border-radius:14px;overflow:hidden;cursor:pointer;background:#fff;transform:rotate(var(--rot));
  box-shadow:0 16px 28px -14px rgba(59,42,32,.5),0 4px 10px -4px rgba(59,42,32,.25);transition:transform .6s var(--ease),box-shadow .6s}
.st-note img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.st-fade{position:absolute;inset:0;border-radius:14px;background:linear-gradient(to bottom,rgba(247,241,229,0) 52%,rgba(247,241,229,.92) 100%);pointer-events:none}
.st-zoom{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(247,241,229,.9);color:var(--espresso);box-shadow:0 2px 6px rgba(59,42,32,.3)}
.st-note:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media (hover:hover){.st-note:hover{transform:rotate(0) translateY(-6px);box-shadow:0 24px 34px -16px rgba(59,42,32,.55),0 6px 12px -4px rgba(59,42,32,.25)}}
.st-cap{margin:0;max-width:160px;text-align:center;font-family:var(--font-body);font-size:12px;line-height:1.45;color:rgba(59,42,32,.7)}
@media (max-width:760px){
  .st-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;max-width:420px;justify-items:center}
  .st-item{width:100%}
  .st-note{width:min(44vw,180px);height:auto;aspect-ratio:150/190;transform:rotate(calc(var(--rot) / 2))}
  .st-cap{max-width:none}
}
html.calm .st-note{transition:none}

.stlb{position:fixed;inset:0;z-index:210;display:grid;opacity:0;transition:opacity .45s ease}
.stlb[hidden]{display:none}
.stlb.is-in{opacity:1}
.stlb-bg{position:absolute;inset:0;background:rgba(245,239,227,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.stlb-scroll{position:relative;overflow-y:auto;overscroll-behavior:contain;padding:clamp(64px,9vh,84px) 0 40px;display:flex;justify-content:center;align-items:flex-start;-webkit-overflow-scrolling:touch}
.stlb-card{margin:0;width:min(520px,calc(100% - 28px));display:flex;flex-direction:column;gap:14px}
.stlb-img{display:block;width:100%;height:auto;border-radius:18px;background:#fff;box-shadow:0 30px 60px -28px rgba(59,42,32,.55),0 8px 24px -12px rgba(59,42,32,.3)}
.stlb-cap{padding:0 4px}
.stlb-tr p{margin:0;font-size:.82rem;line-height:1.65;color:var(--espresso-soft)}
.stlb-src{margin:.4em 0 0;font-size:.74rem;letter-spacing:.04em;color:#8A7E74;text-align:center}
.stlb-x,.stlb-nav{position:absolute;z-index:3;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid var(--gold);background:#F7F1E5;color:var(--espresso);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px -6px rgba(59,42,32,.55);transition:background .3s}
.stlb-x{top:max(14px,calc(env(safe-area-inset-top) + 10px));right:max(14px,calc(env(safe-area-inset-right) + 10px))}
.stlb-nav{top:50%;margin-top:-24px}
.stlb-prev{left:max(10px,calc(50% - 340px))}
.stlb-next{right:max(10px,calc(50% - 340px))}
.stlb-x:hover,.stlb-nav:hover{background:#fff}
.stlb-x:focus-visible,.stlb-nav:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:620px){.stlb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:84px;background:linear-gradient(to top,rgba(247,241,229,.96) 40%,rgba(247,241,229,0));pointer-events:none;z-index:2}.stlb-nav{top:auto;bottom:max(14px,env(safe-area-inset-bottom));margin:0;width:44px;height:44px;background:rgba(247,241,229,.95)}.stlb-prev{left:14px}.stlb-next{right:14px}.stlb-scroll{padding-bottom:84px}}
html.calm .stlb{transition:none}

/* Vorschau-Hinweis unter dem Cover (nicht daneben) */
.nbv-stage{flex-direction:column;align-items:center}
.nbv-preview-note{max-width:min(100%,380px);margin:18px auto 0;text-align:center;font-family:"Caveat",cursive;font-size:1.2rem;line-height:1.35;color:var(--espresso-soft)}
.nbv-preview-note span{color:var(--gold)}

/* Preisblock Notizbuch: ausgewogene Zeilenumbrüche */
.nb-prices p{text-wrap:balance}
.nb-prices-sub{max-width:44rem}