/* Pino & Freunde – Stylesheet */
@font-face{font-family:"Fredoka";src:url("fonts/fredoka-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url("fonts/fredoka-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --navy:#1E2A78;
  --navy-soft:#3A4478;
  --red:#D7261E;
  --red-dark:#9E1A14;
  --red-text:#B01E17;
  --sun:#FFC93C;
  --sand:#FFE9B8;
  --paper:#FFF7E8;
  --white:#ffffff;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--body);font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--white);padding:.5rem 1rem;z-index:100}

/* Buttons */
.btn{display:inline-block;font-weight:800;text-decoration:none;border-radius:999px;padding:.95rem 1.8rem;font-size:1.05rem;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:var(--white);box-shadow:0 5px 0 var(--red-dark)}
.btn-outline{background:var(--white);color:var(--navy);border:2px solid var(--navy)}
.btn-navy{background:var(--navy);color:var(--white);padding:.7rem 1.3rem;font-size:.95rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,247,232,.94);backdrop-filter:blur(8px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.7rem}
.logo .p{color:var(--red)}
.logo .aa-logo{height:46px;width:auto;display:block}
.logo:has(.aa-logo)>svg{display:none}
.footer-brand .logo .aa-logo{height:40px}
.nav{display:flex;align-items:center;gap:2rem;font-weight:700}
.nav a{text-decoration:none}
.nav a:not(.btn):hover{color:var(--red)}
.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--navy)}

/* Hero */
.hero{padding:1rem 0 4rem}
.hero-img{border-radius:32px;width:100%;aspect-ratio:5/2;object-fit:cover;box-shadow:0 18px 40px rgba(30,42,120,.18)}
.hero-body{display:grid;grid-template-columns:1fr 400px;gap:4rem;align-items:center;margin-top:3rem}
.hero h1{font-size:clamp(2.3rem,5vw,3.75rem)}
.hero-text{display:flex;flex-direction:column;gap:1.25rem;max-width:44rem}
.lead{font-size:1.2rem;color:var(--navy-soft)}
.actions{display:flex;flex-wrap:wrap;gap:1rem;padding-top:.5rem}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.facts li{display:flex;align-items:center;gap:1.2rem;background:var(--white);border-radius:22px;padding:1rem 1.4rem}
.facts .dot{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.35rem;background:var(--sun);color:var(--navy);line-height:1;text-align:center;padding:0 .3rem}
.facts li:nth-child(3n+2) .dot{background:var(--navy);color:var(--white)}
.facts li:nth-child(3n) .dot{background:var(--red);color:var(--white);font-size:1.6rem}
.facts strong{display:block;font-size:1.1rem}
.facts span{font-size:.95rem;color:var(--navy-soft)}

/* Values */
.values{background:var(--navy);padding:1.5rem 0}
.values ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.values li{padding:.65rem 1.4rem;border-radius:999px;font-weight:800;background:var(--paper)}
.values li:nth-child(even){background:var(--sun)}

/* Sections */
.section{padding:6rem 0 0}
.section-head{display:flex;flex-direction:column;gap:.75rem;margin-bottom:3rem}
.section-head.center{align-items:center;text-align:center}
.section-head h2{font-size:clamp(2rem,4vw,3.25rem)}
.section-head p{font-size:1.15rem;color:var(--navy-soft);max-width:42rem}

/* Books */
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2rem}
.book{background:var(--white);border-radius:28px;padding:1rem 1rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.book-cover{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:18px;transition:transform .2s ease}
.book-cover:hover{transform:translateY(-4px)}
.book-cover img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:18px}
.badge{position:absolute;top:.8rem;left:.8rem;background:var(--red);color:var(--white);font-weight:800;font-size:.85rem;padding:.3rem .9rem;border-radius:999px}
.book-info{display:flex;flex-direction:column;gap:.3rem;padding:0 .4rem;flex-grow:1}
.book-info .vol{font-weight:800;font-size:.9rem;color:var(--red-text)}
.book-info h3{font-size:1.4rem;font-weight:600}
.book-info .meta{font-size:.95rem;color:var(--navy-soft)}
.book-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:0 .4rem}
.mehr{font:inherit;font-weight:800;font-size:.95rem;color:var(--red-text);background:none;border:0;padding:.3rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mehr:hover{color:var(--red)}

/* Friends */
.friends-box{background:var(--sand);border-radius:40px;padding:4.5rem 3rem}
.friends{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2.2rem 1.5rem}
.friends li{flex:0 1 150px}
.friends li{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}
.friends img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:6px solid var(--red);background:var(--white)}
.friends li:nth-child(3n+2) img{border-color:var(--navy)}
.friends li:nth-child(3n) img{border-color:var(--sun)}
.friends b{display:block;font-family:var(--display);font-size:1.5rem}
.friends span{font-size:.95rem;color:var(--navy-soft)}

/* Features */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.75rem}
.feature{background:var(--white);border-radius:28px;padding:2.25rem 1.9rem;display:flex;flex-direction:column;gap:1rem}
.feature .ico{width:60px;height:60px;border-radius:18px;background:var(--sand) center/28px 28px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.feature:nth-child(4n+2) .ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E")}
.feature:nth-child(4n+3) .ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")}
.feature:nth-child(4n) .ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9L12 3z'/%3E%3C/svg%3E")}
.feature h3{font-size:1.45rem;font-weight:600}
.feature p{font-size:1rem;color:var(--navy-soft)}

/* CTA */
.cta{margin-top:6rem;background:var(--red);border-radius:40px;padding:3.5rem 4rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:3rem;color:var(--white)}
.cta h2{font-size:clamp(2rem,3.5vw,2.9rem)}
.cta p{font-size:1.15rem;color:#FFF1EE;margin-top:.8rem;max-width:36rem}


/* Neuester Band – kompakt */
.neu-section{padding:3.5rem 0 0}
.neu-band{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:2.5rem;align-items:center;max-width:960px;margin-inline:auto;background:var(--white);border-radius:32px;padding:2rem 2.5rem;box-shadow:0 14px 34px rgba(30,42,120,.1);border:3px solid var(--sun)}
.neu-cover{display:block;padding:0;border:0;background:none;cursor:pointer;transform:rotate(-3deg);transition:transform .25s ease}
.neu-cover:hover{transform:rotate(0) translateY(-4px)}
.neu-cover img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:14px;box-shadow:0 14px 26px rgba(30,42,120,.25)}
.neu-text{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.neu-label{display:inline-block;background:var(--red);color:var(--white);font-weight:800;font-size:.85rem;padding:.3rem .9rem;border-radius:999px;margin-bottom:.3rem}
.neu-text .vol{font-weight:800;font-size:.95rem;color:var(--red-text)}
.neu-text h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700}
.neu-text .meta{color:var(--navy-soft);font-weight:700}
.neu-beschreibung{color:var(--navy-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:36rem}
.neu-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;padding-top:.6rem}
.neu-knoepfe .btn{padding:.75rem 1.4rem;font-size:1rem}
button.btn{font:inherit;font-weight:800;cursor:pointer}

/* Große Ansicht (Dialog) */
.buch-dialog{width:min(860px,calc(100% - 2rem));max-height:calc(100% - 2rem);padding:0;border:0;border-radius:32px;background:var(--paper);color:var(--navy);box-shadow:0 30px 80px rgba(30,42,120,.35)}
.buch-dialog::backdrop{background:rgba(30,42,120,.55);backdrop-filter:blur(3px)}
.buch-dialog[open]{animation:bd-auf .3s ease}
@keyframes bd-auf{from{opacity:0;transform:translateY(16px) scale(.98)}}
html.dialog-offen{overflow:hidden}
.bd-zu{position:absolute;top:1rem;right:1rem;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--white);color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(30,42,120,.15)}
.bd-zu:hover{background:var(--sun)}
.bd-inhalt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2.2rem;padding:2.4rem}
.bd-cover{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:18px;box-shadow:0 14px 28px rgba(30,42,120,.2)}
.bd-text{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start;padding-top:.4rem}
.bd-text .vol{font-weight:800;color:var(--red-text)}
.bd-text h2{font-size:clamp(1.7rem,3.5vw,2.3rem);padding-right:2.5rem}
.bd-text .meta{font-weight:700;color:var(--navy-soft)}
.bd-beschreibung p{color:var(--navy-soft);margin:0 0 .8rem}
.bd-links{display:flex;flex-wrap:wrap;gap:.7rem;padding-top:.4rem}
.bd-links a{display:inline-block;font-weight:800;text-decoration:none;border-radius:999px;padding:.75rem 1.4rem;background:var(--navy);color:var(--white)}
.bd-links a:first-child{background:var(--red);box-shadow:0 4px 0 var(--red-dark)}
.bd-links a:hover{transform:translateY(-2px)}
.bd-links:empty{display:none}

/* Kontaktformular der Plattform im roten Kasten */
.cta .formular{background:var(--white);color:var(--navy);border-radius:28px;padding:1.8rem}
.cta .aa-kontakt{max-width:none;gap:.9rem}
.cta .aa-kontakt label{font-weight:800;font-size:.95rem}
.cta .aa-kontakt input,.cta .aa-kontakt textarea{border:2px solid #E7DCC4;border-radius:14px;background:var(--paper);font:inherit;color:var(--navy)}
.cta .aa-kontakt input:focus,.cta .aa-kontakt textarea:focus{border-color:var(--navy);outline:none}
.cta .aa-kontakt button{background:var(--sun);color:var(--navy);font-weight:800;box-shadow:0 5px 0 #C99A1E;padding:.9rem 1.8rem}
.cta .aa-hinweis{color:var(--navy);font-weight:700;margin:0}

/* Social-Media-Symbole (erscheinen nur mit eingetragenem Link) */
.social{display:flex;gap:.7rem;flex-wrap:wrap}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:var(--white);transition:background .2s,transform .2s}
.social a:hover{background:var(--sun);color:var(--navy);transform:translateY(-2px)}
.social-hell{margin-top:1.4rem}
.social-hell a{background:rgba(255,255,255,.18)}

/* Footer */
.site-footer{margin-top:6rem;background:var(--navy);color:var(--white);padding:4.5rem 0 2.5rem}
.footer-grid{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.footer-brand{max-width:24rem;display:flex;flex-direction:column;gap:.9rem}
.footer-brand .logo{color:var(--white)}
.footer-brand .logo .p{color:var(--sun)}
.footer-brand p{color:#D5D9F2}
.footer-col{display:flex;flex-direction:column;gap:.75rem}
.footer-col h3{font-family:var(--body);font-size:1rem;font-weight:800;color:var(--sun)}
.footer-col a{text-decoration:none}
.footer-col a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid #3A4690;margin-top:3rem;padding-top:1.5rem;font-size:.9rem;color:#C4C9EA}

/* Legal pages */
.legal{padding:3rem 0 0}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(2.2rem,5vw,3rem);margin-bottom:2rem}
.legal h2{font-size:1.5rem;margin:2.2rem 0 .7rem}
.legal p,.legal li{color:var(--navy-soft);margin-bottom:.8rem}
.legal .note{background:var(--sand);border-radius:16px;padding:1rem 1.25rem;color:var(--navy)}

/* Responsive */
@media (max-width:1100px){
  .hero-body{grid-template-columns:1fr;gap:2.5rem}
  .facts{flex-direction:row;flex-wrap:wrap}
  .facts li{flex:1 1 260px}
  .books,.features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .friends{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.5rem}
  .cta{grid-template-columns:1fr;padding:3rem}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:80px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:flex-start;gap:1.2rem;padding:1.5rem 1.25rem 2rem;box-shadow:0 12px 20px rgba(30,42,120,.12)}
  .nav.open{display:flex}
  .logo{font-size:1.4rem}
  .logo .aa-logo{height:38px}
  .hero-img{border-radius:20px}
  .section{padding-top:4.5rem}
  .books,.features{grid-template-columns:1fr}
  .book{max-width:420px;margin-inline:auto;width:100%}
  .friends-box{padding:3rem 1.25rem;border-radius:28px}
  .friends{grid-template-columns:repeat(2,minmax(0,1fr))}
  .friends img{width:116px;height:116px}
  .cta{padding:2.5rem 1.25rem;border-radius:28px}
  .cta .formular{padding:1.3rem}
  .neu-band{grid-template-columns:1fr;justify-items:center;text-align:center;padding:1.8rem 1.4rem;gap:1.6rem}
  .neu-cover{width:170px}
  .neu-text{align-items:center}
  .neu-knoepfe{justify-content:center}
  .bd-inhalt{grid-template-columns:1fr;padding:1.6rem;gap:1.4rem}
  .bd-cover{max-width:240px;margin-inline:auto}
  .buch-dialog{width:100%;max-width:none;max-height:none;height:100%;margin:0;border-radius:0}
  .values li{font-size:.95rem;padding:.55rem 1.1rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .btn:hover{transform:none}
  .neu-cover,.book-cover,.buch-dialog[open]{transition:none;animation:none}
}

/* Figuren: Schatten, sanftes Schweben und ein lebendiger Hover */
.friends li{position:relative;--ring:var(--red);--glow:rgba(215,38,30,.28)}
.friends li:nth-child(3n+2){--ring:var(--navy);--glow:rgba(30,42,120,.28)}
.friends li:nth-child(3n){--ring:var(--sun);--glow:rgba(255,201,60,.45)}
.friends img{position:relative;z-index:1;border-color:var(--ring);
  box-shadow:0 6px 0 rgba(30,42,120,.12),0 16px 28px rgba(30,42,120,.22);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;
  animation:figur-schweben 4.8s ease-in-out infinite}
.friends li:nth-child(2n) img{animation-delay:-1.6s}
.friends li:nth-child(3n) img{animation-delay:-3.1s}
@keyframes figur-schweben{0%,100%{translate:0 0}50%{translate:0 -6px}}
/* Bodenschatten unter jeder Figur */
.friends li::before{content:"";position:absolute;top:128px;left:50%;width:104px;height:18px;margin-left:-52px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(30,42,120,.28),transparent);transition:transform .45s ease,opacity .45s ease}
/* Funkeln beim Darüberfahren */
.friends li::after{content:"✦";position:absolute;top:-4px;left:calc(50% + 46px);z-index:2;font-size:1.5rem;line-height:1;color:var(--ring);
  opacity:0;transform:scale(.3) rotate(-40deg);transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1);text-shadow:-58px 92px 0 var(--ring)}
.friends b{transition:color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover){
  .friends li:hover img{transform:translateY(-12px) rotate(-5deg) scale(1.08);
    box-shadow:0 0 0 10px var(--glow),0 10px 0 rgba(30,42,120,.1),0 26px 38px rgba(30,42,120,.3);animation-play-state:paused}
  .friends li:hover::before{transform:scale(.72);opacity:.55}
  .friends li:hover::after{opacity:1;transform:scale(1) rotate(0)}
  .friends li:hover b{color:var(--red);transform:scale(1.08)}
  .friends li:nth-child(3n+2):hover b{color:var(--navy)}
  .friends li:nth-child(3n):hover b{color:#C98A00}
}
@media (max-width:760px){
  .friends li::before{top:106px;width:88px;margin-left:-44px}
  .friends li::after{left:calc(50% + 38px)}
}
@media (prefers-reduced-motion:reduce){
  .friends img{animation:none;transition:none}
  .friends li::after,.friends li::before,.friends b{transition:none}
}

/* Neuester Band – wertige Bühne: dunkelblauer Grund, Lichtkranz, Buch in 3D */
.neu-section{padding:4rem 0 0}
.neu-band{position:relative;overflow:hidden;isolation:isolate;max-width:1040px;display:grid;grid-template-columns:270px minmax(0,1fr);gap:3.2rem;align-items:center;
  padding:3rem 3.4rem;border:0;border-radius:36px;color:var(--white);
  background:
    radial-gradient(circle at 18% 50%,rgba(255,201,60,.38),transparent 34%),
    radial-gradient(circle at 100% 0%,rgba(215,38,30,.35),transparent 40%),
    linear-gradient(135deg,#25318C 0%,#1E2A78 55%,#161F5C 100%);
  box-shadow:0 30px 60px -18px rgba(30,42,120,.55),inset 0 1px 0 rgba(255,255,255,.12)}
/* Lichtstrahlen hinter dem Buch */
.neu-band::before{content:"";position:absolute;z-index:-1;left:-120px;top:50%;width:560px;height:560px;margin-top:-280px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.07) 0 8deg,transparent 8deg 20deg);
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent 100%);mask:radial-gradient(closest-side,#000 30%,transparent 100%);
  animation:neu-strahlen 60s linear infinite}
@keyframes neu-strahlen{to{transform:rotate(360deg)}}
/* kleine Konfetti-Punkte am Rand (nicht über dem Text) */
.neu-band::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 96% 8%,var(--sun) 0 4px,transparent 5px),
    radial-gradient(circle at 98.5% 16%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 97% 90%,var(--red) 0 5px,transparent 6px),
    radial-gradient(circle at 92% 95%,var(--sun) 0 2px,transparent 3px),
    radial-gradient(circle at 46% 5%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 3% 94%,var(--sun) 0 3px,transparent 4px)}
@media (max-width:760px){.neu-band::after{display:none}}

/* Buch mit Rücken und Seitenschnitt */
.neu-cover{position:relative;justify-self:center;width:230px;transform:none;perspective:1200px}
.neu-cover:hover{transform:none}
.neu-cover img{position:relative;z-index:2;border-radius:4px 14px 14px 4px;transform:rotateY(-20deg) rotateZ(-2deg);transform-origin:left center;
  box-shadow:-6px 0 0 rgba(0,0,0,.25) inset,24px 30px 40px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.neu-cover::before{content:"";position:absolute;z-index:3;left:0;top:0;bottom:0;width:14px;border-radius:4px 0 0 4px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.18) 45%,rgba(0,0,0,.1));transform:rotateY(-20deg) rotateZ(-2deg);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.neu-cover::after{content:"";position:absolute;z-index:1;top:6px;bottom:8px;right:8px;width:22px;border-radius:0 6px 6px 0;
  background:repeating-linear-gradient(90deg,#fff 0 2px,#E8E2D3 2px 3px);box-shadow:6px 8px 18px rgba(0,0,0,.35);
  transform:rotateY(-20deg) translateX(10px) rotateZ(-2deg);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .neu-cover:hover img,.neu-cover:hover::before{transform:rotateY(-6deg) rotateZ(0) translateY(-6px)}
  .neu-cover:hover::after{transform:rotateY(-6deg) translateX(4px) translateY(-6px)}
}
/* Stern-Siegel am Buch */
.neu-band .neu-label{position:absolute;z-index:4;top:2.2rem;left:2.4rem;margin:0;width:92px;height:92px;padding:0 .4rem;border-radius:50%;display:grid;place-items:center;text-align:center;
  font-family:var(--display);font-size:.98rem;font-weight:700;line-height:1.05;color:var(--navy);background:var(--sun);
  clip-path:polygon(50% 0,61% 9%,75% 4%,80% 18%,95% 21%,92% 36%,100% 50%,92% 64%,95% 79%,80% 82%,75% 96%,61% 91%,50% 100%,39% 91%,25% 96%,20% 82%,5% 79%,8% 64%,0 50%,8% 36%,5% 21%,20% 18%,25% 4%,39% 9%);
  transform:rotate(-12deg);animation:neu-siegel 3.5s ease-in-out infinite}
@keyframes neu-siegel{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-6deg) scale(1.06)}}

.neu-text{gap:.55rem}
.neu-text::before{content:"Neu erschienen";display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.neu-text .vol{color:#FFD46B;font-size:1rem}
.neu-text h2{color:var(--white);font-size:clamp(1.9rem,3.6vw,2.8rem);text-shadow:0 3px 0 rgba(0,0,0,.18)}
.neu-text .meta{display:inline-block;background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:.25rem .85rem;font-size:.92rem}
.neu-beschreibung{color:#DCE0F7;font-size:1.05rem;line-height:1.65;max-width:34rem}
.neu-knoepfe{gap:.9rem;padding-top:.9rem}
.neu-knoepfe .btn-red{background:var(--sun);color:var(--navy);box-shadow:0 5px 0 #C99A1E}
.neu-knoepfe .btn-outline{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.55)}
.neu-knoepfe .btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.08)}

@media (max-width:760px){
  .neu-band{grid-template-columns:1fr;padding:2.4rem 1.4rem 2rem;border-radius:28px;gap:1.8rem}
  .neu-band::before{left:50%;top:150px;margin-left:-280px;margin-top:-280px}
  .neu-cover{width:180px}
  .neu-band .neu-label{top:1.4rem;left:1.2rem;width:78px;height:78px;font-size:.85rem}
  .neu-text::before{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.neu-band::before,.neu-band .neu-label{animation:none}.neu-cover img,.neu-cover::before,.neu-cover::after{transition:none}}

/* Titelbild: gestapeltes Papier dahinter, Tiefe, langsamer Zoom und ein Lichtschimmer */
.hero-buehne{position:relative;isolation:isolate;margin:.6rem .4rem 0}
.hero-buehne::before,.hero-buehne::after{content:"";position:absolute;inset:0;border-radius:32px}
.hero-buehne::before{z-index:-1;background:var(--sun);transform:rotate(1.6deg) translate(10px,10px)}
.hero-buehne::after{z-index:-2;background:var(--red);transform:rotate(-1.2deg) translate(-8px,12px)}
.hero-rahmen{position:relative;overflow:hidden;border-radius:32px;
  box-shadow:0 28px 50px -12px rgba(30,42,120,.45),0 10px 20px rgba(30,42,120,.15);transition:transform .5s ease}
.hero-rahmen .hero-img{border-radius:0;box-shadow:none;animation:hero-zoom 22s ease-in-out infinite alternate;transform-origin:62% 40%}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.04)}}
.hero-glanz{position:absolute;z-index:2;inset:0;pointer-events:none}
.hero-glanz::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32) 45%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.32) 55%,transparent);
  transform:skewX(-18deg);animation:hero-glanz 7.5s ease-in-out 1.2s infinite}
@keyframes hero-glanz{0%{left:-40%}28%,100%{left:130%}}
@media (hover:hover){.hero-buehne:hover .hero-rahmen{transform:translateY(-4px)}}
@media (max-width:760px){
  .hero-buehne::before,.hero-buehne::after,.hero-rahmen{border-radius:20px}
  .hero-buehne::before{transform:rotate(1.4deg) translate(6px,7px)}
  .hero-buehne::after{transform:rotate(-1deg) translate(-5px,8px)}
}
@media (prefers-reduced-motion:reduce){.hero-rahmen .hero-img,.hero-glanz::before{animation:none}}

/* Alle Knöpfe mit Schatten: farbige Kante unten + weicher Schatten, beim Klicken „gedrückt“ */
.btn,.bd-links a,.cta .aa-kontakt button{transition:transform .15s ease,box-shadow .15s ease,background .2s ease,border-color .2s ease}
.btn-red,.bd-links a:first-child{box-shadow:0 5px 0 var(--red-dark),0 12px 22px -6px rgba(215,38,30,.45)}
.btn-navy,.bd-links a{box-shadow:0 4px 0 #111A55,0 10px 20px -6px rgba(30,42,120,.45)}
.btn-outline{box-shadow:0 4px 0 var(--navy),0 10px 20px -8px rgba(30,42,120,.35)}
.cta .aa-kontakt button,.neu-knoepfe .btn-red{box-shadow:0 5px 0 #C99A1E,0 12px 22px -6px rgba(201,154,30,.55)}
.neu-knoepfe .btn-outline{box-shadow:0 4px 0 rgba(255,255,255,.35),0 12px 22px -8px rgba(0,0,0,.45)}
@media (hover:hover){
  .btn:hover,.bd-links a:hover,.cta .aa-kontakt button:hover{transform:translateY(-3px)}
  .btn-red:hover,.bd-links a:first-child:hover{box-shadow:0 8px 0 var(--red-dark),0 18px 28px -6px rgba(215,38,30,.5)}
  .btn-navy:hover,.bd-links a:not(:first-child):hover{box-shadow:0 7px 0 #111A55,0 16px 26px -6px rgba(30,42,120,.5)}
  .btn-outline:hover{box-shadow:0 7px 0 var(--navy),0 16px 26px -8px rgba(30,42,120,.4)}
  .cta .aa-kontakt button:hover,.neu-knoepfe .btn-red:hover{box-shadow:0 8px 0 #C99A1E,0 18px 28px -6px rgba(201,154,30,.6)}
  .neu-knoepfe .btn-outline:hover{box-shadow:0 7px 0 rgba(255,255,255,.4),0 16px 26px -8px rgba(0,0,0,.5)}
}
.btn:active,.bd-links a:active,.cta .aa-kontakt button:active{transform:translateY(3px)}
.btn-red:active,.bd-links a:first-child:active{box-shadow:0 2px 0 var(--red-dark),0 4px 10px -4px rgba(215,38,30,.4)}
.btn-navy:active,.bd-links a:not(:first-child):active{box-shadow:0 1px 0 #111A55,0 4px 10px -4px rgba(30,42,120,.4)}
.btn-outline:active{box-shadow:0 1px 0 var(--navy),0 4px 10px -4px rgba(30,42,120,.3)}
.cta .aa-kontakt button:active,.neu-knoepfe .btn-red:active{box-shadow:0 2px 0 #C99A1E,0 4px 10px -4px rgba(201,154,30,.5)}
@media (prefers-reduced-motion:reduce){.btn,.bd-links a,.cta .aa-kontakt button{transition:none}}

/* Abenteuerpfad durch die Malbücher (Weg und Pfoten zeichnet pino.js) */
.pfad{position:relative;padding:1rem 0 1.5rem}
.pfad-weg{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.pfad-weg .weg-rand{fill:none;stroke:#EDC26B;stroke-width:58;stroke-linecap:round;stroke-linejoin:round}
.pfad-weg .weg{fill:none;stroke:#FFE19C;stroke-width:46;stroke-linecap:round;stroke-linejoin:round}
.pfad-weg .weg-mitte{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:2 16;stroke-linecap:round;opacity:.9}
.pfad-weg .pfote{fill:rgba(158,26,20,.38)}
.pfad-liste{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5rem 3rem}
.pfad-stopp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem}
.pfad-cover{position:relative;width:min(230px,82%)}
.pfad-cover .book-cover{transform:rotate(-3deg);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.pfad-stopp:nth-child(even) .pfad-cover .book-cover{transform:rotate(3deg)}
.pfad-cover .book-cover img{border-radius:6px 16px 16px 6px;box-shadow:inset 6px 0 0 rgba(0,0,0,.12),0 18px 30px -8px rgba(30,42,120,.45),0 4px 10px rgba(30,42,120,.15)}
@media (hover:hover){.pfad-stopp .pfad-cover .book-cover:hover{transform:rotate(0) translateY(-10px) scale(1.04)}}
.pfad-nr{position:absolute;z-index:2;top:-18px;left:-18px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--white);background:var(--red);border:4px solid var(--white);box-shadow:0 6px 14px rgba(30,42,120,.3)}
.pfad-stopp:nth-child(3n+2) .pfad-nr{background:var(--navy)}
.pfad-stopp:nth-child(3n) .pfad-nr{background:var(--sun);color:var(--navy)}
.pfad-cover .badge{top:-10px;left:auto;right:-14px;z-index:2;transform:rotate(8deg);box-shadow:0 4px 10px rgba(215,38,30,.35)}
.pfad-info{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:min(300px,100%);background:var(--white);border-radius:22px;padding:1rem 1.2rem 1.1rem;box-shadow:0 10px 24px -8px rgba(30,42,120,.25)}
.pfad-info .vol{font-weight:800;font-size:.88rem;color:var(--red-text)}
.pfad-info h3{font-size:1.35rem;font-weight:600}
.pfad-info .meta{font-size:.92rem;color:var(--navy-soft)}
.pfad-info .book-knoepfe{justify-content:center;padding-top:.5rem}
/* Holzschild am Ende des Wegs */
.pfad-ende{align-self:center;justify-self:center;position:relative;z-index:1;margin:0 0 3rem;padding:.9rem 1.6rem;border-radius:14px;
  font-family:var(--display);font-weight:700;font-size:1.35rem;color:#fff;background:linear-gradient(#C98A4B,#A86A33);
  box-shadow:0 5px 0 #7E4D22,0 14px 24px -8px rgba(30,42,120,.35);transform:rotate(-4deg)}
.pfad-ende::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:52px;margin-left:-6px;background:#8D5A2B;border-radius:0 0 4px 4px;z-index:-1}
.pfad-liste>.pfad-ende:not(.pfad-stopp-ende){display:none}
@media (max-width:1100px){.pfad-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:4.5rem 2rem}}
@media (max-width:760px){
  .pfad-liste{grid-template-columns:1fr;gap:3.2rem}
  .pfad-stopp{width:86%;justify-self:start}
  .pfad-stopp.pfad-rechts{justify-self:end}
  .pfad-cover{width:62%}
  .pfad-weg .weg-rand{stroke-width:44}.pfad-weg .weg{stroke-width:34}
  .pfad-ende{justify-self:center}
}
@media (prefers-reduced-motion:reduce){.pfad-cover .book-cover{transition:none}}

/* Logo größer, damit es gut erkennbar ist */
html{scroll-padding-top:116px}
.site-header .wrap{height:100px}
.logo .aa-logo{height:78px;max-width:min(320px,60vw);object-fit:contain}
.footer-brand .logo .aa-logo{height:64px;max-width:280px}
@media (max-width:760px){
  html{scroll-padding-top:90px}
  .site-header .wrap{height:80px}
  .logo .aa-logo{height:58px;max-width:62vw}
  .nav{top:80px}
}

/* Logo noch größer (gut lesbar) */
html{scroll-padding-top:140px}
.site-header .wrap{height:124px}
.logo .aa-logo{height:108px;max-width:min(440px,62vw)}
.footer-brand .logo .aa-logo{height:80px;max-width:340px}
@media (max-width:1100px){.nav{gap:1.4rem}}
@media (max-width:760px){
  html{scroll-padding-top:100px}
  .site-header .wrap{height:92px}
  .logo .aa-logo{height:72px;max-width:68vw}
  .nav{top:92px}
}

/* Große Ansicht passt sich dem Text an: kurz = schmaler Kasten, lang = breiter Kasten mit zwei Textspalten (pino.js) */
@media (min-width:761px){
  .buch-dialog{width:min(860px,calc(100% - 2.5rem));max-height:calc(100vh - 2.5rem);overflow:hidden}
  .buch-dialog.bd-lang{width:min(1120px,calc(100% - 2.5rem))}
  .bd-inhalt{grid-template-columns:240px minmax(0,1fr);gap:2.2rem;padding:2.2rem 2.4rem;align-items:start;max-height:calc(100vh - 2.5rem)}
  .bd-text{gap:.45rem;min-height:0}
  .bd-text h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
  .bd-beschreibung{font-size:.97rem;line-height:1.55;max-height:calc(100vh - 19rem);overflow:auto;scrollbar-width:thin}
  .bd-lang .bd-beschreibung{columns:2;column-gap:2.2rem}
  .bd-beschreibung p{margin:0 0 .7rem}
  .bd-links{padding-top:.8rem}
}

/* Holzschild wackelt beim Darüberfahren (schwingt um den Pfosten) */
.pfad-ende{transform-origin:50% 120%;cursor:default}
@keyframes schild-wackeln{
  0%{transform:rotate(-4deg)}15%{transform:rotate(7deg)}30%{transform:rotate(-9deg)}45%{transform:rotate(6deg)}
  60%{transform:rotate(-6deg)}75%{transform:rotate(2deg)}90%{transform:rotate(-5deg)}100%{transform:rotate(-4deg)}}
@media (hover:hover){.pfad-ende:hover{animation:schild-wackeln .9s ease-in-out}}
/* auf dem Handy beim Antippen */
.pfad-ende:active{animation:schild-wackeln .9s ease-in-out}
@media (prefers-reduced-motion:reduce){.pfad-ende:hover,.pfad-ende:active{animation:none}}

/* Kontakt: Pino & Bella mit Buntstiften, dahinter gemalte Kringel und Sterne */
.cta{position:relative;overflow:hidden;isolation:isolate;padding-bottom:0;align-items:end}
.cta>.formular{margin-bottom:3.5rem;align-self:center}
.cta-text{position:relative;display:flex;flex-direction:column;align-self:stretch;padding-top:.5rem}
.cta::before{content:"";position:absolute;z-index:-1;left:0;bottom:0;width:58%;height:100%;pointer-events:none;opacity:.9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M5 40c15-30 25 20 40-5s25 20 40-5 25 15 30 0' fill='none' stroke='%23FFC93C' stroke-width='5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") 6% 88%/190px auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M5 30c20-25 30 25 50 0s30 25 60 0' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' opacity='.35'/%3E%3C/svg%3E") 88% 70%/150px auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.6L21 9.3l-5 4.4 1.5 6.8L12 17l-5.5 3.5L8 13.7 3 9.3l6.4-.7z' fill='%23FFC93C'/%3E%3C/svg%3E") 84% 40%/30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.6L21 9.3l-5 4.4 1.5 6.8L12 17l-5.5 3.5L8 13.7 3 9.3l6.4-.7z' fill='%23ffffff'/%3E%3C/svg%3E") 4% 58%/18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.6L21 9.3l-5 4.4 1.5 6.8L12 17l-5.5 3.5L8 13.7 3 9.3l6.4-.7z' fill='%23FFC93C'/%3E%3C/svg%3E") 70% 92%/22px no-repeat}
.cta-figur{display:block;width:min(360px,100%);height:auto;margin:1.4rem 0 0 auto;align-self:center;
  filter:drop-shadow(0 18px 22px rgba(80,10,6,.45));transform-origin:50% 100%;
  animation:figur-wippen 5s ease-in-out infinite;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes figur-wippen{0%,100%{rotate:0deg}50%{rotate:-1.6deg}}
@media (hover:hover){.cta-figur:hover{transform:translateY(-8px) scale(1.04);animation-play-state:paused}}
@media (max-width:1100px){
  .cta{padding-bottom:3rem}
  .cta>.formular{margin-bottom:0}
  .cta-figur{width:min(260px,70%);margin:1rem auto -3rem}
  .cta::before{width:100%;height:55%;top:0}
}
@media (max-width:760px){.cta-figur{margin-bottom:-2.5rem}}
@media (prefers-reduced-motion:reduce){.cta-figur{animation:none;transition:none}}

/* Hinweis auf Autorenauftritt im Footer */
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;flex-wrap:wrap}
.footer-bottom .credit{color:#AEB5E3;text-decoration:none;font-size:.85rem}
.footer-bottom .credit:hover{color:var(--sun);text-decoration:underline}

/* Große Ansicht: Cover immer senkrecht mittig neben dem Text */
@media (min-width:761px){.bd-inhalt{align-items:center}.bd-cover{align-self:center;position:static}}

/* Große Ansicht: Cover mittig links mit Lichtkranz, leichter Neigung und Glanz beim Öffnen */
.bd-cover-huelle{position:relative;display:block;align-self:center;justify-self:center;width:100%;max-width:260px;isolation:isolate}
.bd-cover-huelle::before{content:"";position:absolute;z-index:-1;inset:-18% -22%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,201,60,.55),rgba(255,201,60,.18) 60%,transparent 75%);
  animation:bd-puls 3.6s ease-in-out infinite}
.bd-cover-huelle::after{content:"";position:absolute;z-index:-1;inset:-34% -40%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,201,60,.22) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 35%,transparent 100%);mask:radial-gradient(closest-side,#000 35%,transparent 100%);
  animation:neu-strahlen 50s linear infinite}
@keyframes bd-puls{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.bd-cover-huelle .bd-cover{position:relative;max-width:none;width:100%;border-radius:6px 16px 16px 6px;transform:rotate(-2.5deg);
  box-shadow:inset 6px 0 0 rgba(0,0,0,.12),0 22px 36px -10px rgba(30,42,120,.5),0 4px 10px rgba(30,42,120,.15);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.bd-cover-huelle:hover .bd-cover{transform:rotate(0) scale(1.03)}
/* Glanzstreifen, der beim Öffnen einmal über das Cover läuft */
.bd-glanz{position:absolute;inset:0;overflow:hidden;border-radius:6px 16px 16px 6px;transform:rotate(-2.5deg);pointer-events:none}
.bd-glanz::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:40%;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 50%,transparent)}
.buch-dialog[open] .bd-glanz::before{animation:bd-glanz 1.4s ease-out .35s 1 both}
@keyframes bd-glanz{from{left:-60%}to{left:130%}}
@media (min-width:761px){
  .bd-inhalt{align-items:center}
  .bd-inhalt>.bd-cover-huelle{position:sticky;top:0}
}
@media (max-width:760px){.bd-cover-huelle{max-width:220px;margin:1rem auto .4rem}}
@media (prefers-reduced-motion:reduce){.bd-cover-huelle::before,.bd-cover-huelle::after,.buch-dialog[open] .bd-glanz::before{animation:none}}

/* Figuren-Box: Sonne, kleiner Hügel und wehende Blätter */
.friends-box{position:relative;overflow:hidden;isolation:isolate}
.friends-box > .section-head,.friends-box > .friends{position:relative;z-index:2}
.friends-box::before{content:"";position:absolute;z-index:0;top:-140px;right:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,90,.75) 0%,rgba(255,214,90,.35) 38%,rgba(255,214,90,0) 70%);animation:sonne 7s ease-in-out infinite alternate}
.friends-box::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:72px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 72' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C150 10 300 12 450 34 S750 62 900 36 S1100 14 1200 30 V72 H0z' fill='%23FBDA95'/%3E%3Cpath d='M0 54 C200 34 380 40 560 54 S900 70 1200 48 V72 H0z' fill='%23F7CE7A'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
@keyframes sonne{from{transform:scale(1);opacity:.85}to{transform:scale(1.08);opacity:1}}

.blaetter{position:absolute;inset:0;z-index:1;pointer-events:none;container-type:inline-size}
.blaetter i{position:absolute;left:-40px;top:var(--y);width:calc(var(--g,20px) * 1.3);height:calc(var(--g,20px) * 1.3);opacity:var(--o,.75);
  animation:blatt-flug calc(var(--d,18s) * 1.9) linear calc(var(--v,0s) * 1.9) infinite}
.blaetter i::before{content:"";position:absolute;inset:0;background:var(--bild) center/contain no-repeat;
  animation:blatt-schaukeln calc(var(--s,3.2s) * 1.6) ease-in-out infinite alternate}
.blaetter i:nth-child(3n+1){--bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22C2 10 10 2 22 2c0 12-8 20-20 20z' fill='%236BAF3C'/%3E%3Cpath d='M3 21L17 7' stroke='%234E8A28' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.blaetter i:nth-child(3n+2){--bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22C2 10 10 2 22 2c0 12-8 20-20 20z' fill='%23A6D05E'/%3E%3Cpath d='M3 21L17 7' stroke='%237CA93A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.blaetter i:nth-child(3n){--bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 22C2 10 10 2 22 2c0 12-8 20-20 20z' fill='%23F29A2E'/%3E%3Cpath d='M3 21L17 7' stroke='%23C9731A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.blaetter i:nth-child(1){--y:8%;--g:22px;--d:19s;--v:-2s;--s:2.8s}
.blaetter i:nth-child(2){--y:30%;--g:16px;--d:23s;--v:-9s;--s:3.6s;--o:.6}
.blaetter i:nth-child(3){--y:14%;--g:18px;--d:21s;--v:-15s;--s:3.1s}
.blaetter i:nth-child(4){--y:52%;--g:24px;--d:26s;--v:-5s;--s:4s;--o:.55}
.blaetter i:nth-child(5){--y:4%;--g:15px;--d:17s;--v:-12s;--s:2.6s;--o:.65}
.blaetter i:nth-child(6){--y:40%;--g:20px;--d:24s;--v:-19s;--s:3.4s}
.blaetter i:nth-child(7){--y:22%;--g:14px;--d:20s;--v:-7s;--s:2.9s;--o:.5}
.blaetter i:nth-child(8){--y:62%;--g:18px;--d:28s;--v:-22s;--s:3.8s;--o:.6}
.blaetter i:nth-child(9){--y:10%;--g:19px;--d:22s;--v:-17s;--s:3.3s}
@keyframes blatt-flug{
  0%{transform:translate(0,0)}
  25%{transform:translate(calc(25cqw + 20px),40px)}
  50%{transform:translate(calc(50cqw + 40px),20px)}
  75%{transform:translate(calc(75cqw + 60px),70px)}
  100%{transform:translate(calc(100cqw + 80px),110px)}
}
@keyframes blatt-schaukeln{
  from{transform:rotate(-30deg) translateY(-8px)}
  to{transform:rotate(40deg) translateY(10px)}
}
@media (max-width:700px){
  .blaetter i:nth-child(n+7){display:none}
  .friends-box::before{width:260px;height:260px;top:-90px;right:-90px}
  .friends-box::after{height:44px}
}
@media (prefers-reduced-motion:reduce){
  .blaetter{display:none}
  .friends-box::before{animation:none}
}

/* Nur auf dem Handy: Titelbild über die ganze Breite, unten wie mit dem Pinsel ausgemalt.
   Am Rechner bleibt der Rahmen mit den farbigen Karten. */
@media (max-width:760px){
  .hero{padding-top:0}
  .hero-buehne{margin:0 calc(50% - 50vw);isolation:auto}
  .hero-buehne::before,.hero-buehne::after{display:none}
  .hero-rahmen{border-radius:0;box-shadow:none;transform:none;
    -webkit-mask:url("img/hero-maske.svg") center/100% 100% no-repeat;mask:url("img/hero-maske.svg") center/100% 100% no-repeat}
  .hero-rahmen .hero-img{aspect-ratio:23/10;object-fit:cover;object-position:100% 40%;animation:none}
  .hero-body{margin-top:.5rem}
}

/* =====================================================================
   Das Pino-Lied: Schallplatte, Player, Mitsing-Text
   ===================================================================== */
.lied{position:relative;background:linear-gradient(160deg,#FFF3D6 0%,#FFE3A3 100%);border-radius:40px;padding:2.6rem;overflow:hidden;isolation:isolate;box-shadow:0 18px 40px rgba(30,42,120,.10)}
.lied::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.7),transparent 40%),radial-gradient(circle at 90% 90%,rgba(215,38,30,.08),transparent 45%);pointer-events:none}
.lied-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:3rem;align-items:center}

.platte-box{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.platte{position:relative;width:88%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#1E2A78 0 31%,transparent 31.5%),repeating-radial-gradient(circle,#26307f 0 2px,#1b2466 2px 5px);
  box-shadow:0 22px 40px rgba(30,42,120,.35),inset 0 0 0 6px #151c55;animation:platte-dreh 3.6s linear infinite;animation-play-state:paused}
.platte::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 12%,rgba(255,255,255,.18) 16%,transparent 22% 62%,rgba(255,255,255,.12) 66%,transparent 72%)}
.platte-label{width:58%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid var(--sun);box-shadow:0 0 0 4px var(--red)}
.platte-label img{width:100%;height:100%;object-fit:cover}
@keyframes platte-dreh{to{transform:rotate(360deg)}}
.lied.spielt .platte{animation-play-state:running}
.platte-arm{position:absolute;right:-2%;top:2%;width:42%;height:52%;pointer-events:none;transform-origin:80% 12%;transform:rotate(-14deg);transition:transform .6s ease}
.lied.spielt .platte-arm{transform:rotate(0)}

.lied-play{position:absolute;right:2%;bottom:4%;width:84px;height:84px;border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 7px 0 var(--red-dark),0 14px 28px rgba(215,38,30,.35);transition:transform .12s ease,box-shadow .12s ease}
.lied-play:hover{transform:translateY(-2px)}
.lied-play:active{transform:translateY(5px);box-shadow:0 2px 0 var(--red-dark),0 8px 18px rgba(215,38,30,.3)}
.lied-play svg{width:36px;height:36px}
.lied-play .i-pause,.lied.spielt .lied-play .i-play{display:none}
.lied.spielt .lied-play .i-pause{display:block}
.lied.laedt .lied-play{opacity:.8}

.lied-noten{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;container-type:size}
.lied-noten span{position:absolute;bottom:-3rem;left:var(--x);font-size:var(--g,2rem);line-height:1;color:var(--red);opacity:0;will-change:transform,opacity}
.lied-noten span:nth-child(even){color:var(--navy)}
.lied-noten span:nth-child(1){--x:4%;--g:2.2rem;--d:7.5s;--v:0s}
.lied-noten span:nth-child(2){--x:14%;--g:1.6rem;--d:8.8s;--v:-3.1s}
.lied-noten span:nth-child(3){--x:25%;--g:2.6rem;--d:6.6s;--v:-5.2s}
.lied-noten span:nth-child(4){--x:36%;--g:1.8rem;--d:9s;--v:-1.4s}
.lied-noten span:nth-child(5){--x:47%;--g:2.3rem;--d:7.2s;--v:-6.3s}
.lied-noten span:nth-child(6){--x:57%;--g:1.5rem;--d:8.2s;--v:-2.5s}
.lied-noten span:nth-child(7){--x:67%;--g:2.5rem;--d:6.9s;--v:-4.4s}
.lied-noten span:nth-child(8){--x:77%;--g:1.7rem;--d:8.6s;--v:-7.1s}
.lied-noten span:nth-child(9){--x:87%;--g:2.1rem;--d:7.8s;--v:-0.8s}
.lied-noten span:nth-child(10){--x:94%;--g:1.6rem;--d:9.2s;--v:-5.8s}
.lied.spielt .lied-noten span{animation:note-flug var(--d) linear var(--v) infinite}
@keyframes note-flug{
  0%{opacity:0;transform:translate(0,0) rotate(-10deg)}
  10%{opacity:.5}
  25%{transform:translate(14px,-30cqh) rotate(8deg)}
  50%{transform:translate(-12px,-60cqh) rotate(-8deg)}
  75%{transform:translate(12px,-90cqh) rotate(10deg)}
  85%{opacity:.45}
  100%{opacity:0;transform:translate(-6px,calc(-100cqh - 4rem)) rotate(-6deg)}
}

.lied-kicker{display:inline-flex;align-items:center;gap:.5rem;background:var(--white);color:var(--red-text);font-weight:800;border-radius:999px;padding:.35rem .9rem;font-size:.9rem;box-shadow:0 3px 0 rgba(30,42,120,.08)}
.lied-info h2{font-size:clamp(2rem,3vw,2.6rem);margin:.9rem 0 0}
.lied-intro{font-size:1.05rem;color:var(--navy-soft);margin:.9rem 0 0}
.lied-spur{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.lied-leiste{flex:1;height:14px;border-radius:99px;background:rgba(30,42,120,.12);cursor:pointer;position:relative;touch-action:none}
.lied-leiste i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--red),var(--sun))}
.lied-hinweis{margin:.6rem 0 0;font-size:.9rem;color:var(--navy-soft)}

.lied-text-box{margin-top:1.2rem;background:var(--white);border-radius:24px;padding:1.1rem 1.1rem 1rem 1.4rem;box-shadow:0 6px 0 rgba(30,42,120,.06)}
.lied-text-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding-right:.3rem;margin-bottom:.5rem}
.lied-text-kopf b{font-family:var(--display);font-weight:600;font-size:1.2rem}
.lied-text-kopf a{font-weight:800;color:var(--red-text);font-size:.92rem}
.lied-text{max-height:220px;overflow-y:auto;padding-right:.6rem;scroll-behavior:smooth;
  -webkit-mask:linear-gradient(transparent,#000 14px,#000 calc(100% - 22px),transparent);mask:linear-gradient(transparent,#000 14px,#000 calc(100% - 22px),transparent)}
.lied-teil{padding:.7rem 0}
.lied-teil p{margin:.35rem 0 .7rem}
.lied-teil .z{display:block;line-height:1.7;padding:.05rem .45rem;margin-left:-.45rem;border-radius:8px;transition:background .25s,color .25s}
.lied-etikett{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--white);background:var(--navy);border-radius:999px;padding:.15rem .6rem}
.lied-teil.refrain{background:#FFF4CC;border-radius:16px;padding:.7rem .9rem;margin:.4rem -.5rem}
.lied-teil.refrain .lied-etikett{background:var(--red)}
.lied-teil.refrain .z{font-weight:800}
.lied-text.mit-zeiten .z{cursor:pointer}
.lied-text.mit-zeiten .z:hover{background:rgba(30,42,120,.06)}
.lied-teil .z.an{background:var(--sun);color:var(--navy);font-weight:800}
.lied-teil .z.vorbei{color:var(--navy-soft)}

/* Mitklopf-Werkzeug (nur mit #lied-zeiten in der Adresse) */
.lied-klopf{margin-top:1.4rem;background:var(--navy);color:#fff;border-radius:20px;padding:1rem 1.2rem}
.lied-klopf b{font-family:var(--display)}
.lied-klopf p{margin:.4rem 0}
.lied-klopf button{font:inherit;font-weight:800;border:0;border-radius:999px;padding:.5rem 1rem;margin:.3rem .4rem 0 0;cursor:pointer}
.lied-klopf .tippen{background:var(--sun);color:var(--navy);font-size:1.1rem}
.lied-klopf textarea{width:100%;min-height:90px;margin-top:.6rem;border-radius:10px;border:0;padding:.6rem;font:12px/1.4 monospace}

@media (max-width:900px){
  .lied{padding:2.6rem 1.25rem 2rem;border-radius:28px}
  .lied-grid{grid-template-columns:1fr;gap:1.8rem}
  .platte-box{max-width:320px;margin:0 auto}
  .lied-play{width:86px;height:86px}
  .lied-play svg{width:38px;height:38px}
  .lied-info{text-align:center}
  .lied-intro,.lied-spur,.lied-text-box,.lied-klopf{margin-left:auto;margin-right:auto}
  .lied-text-box,.lied-klopf{text-align:left}
  .lied-text{max-height:300px}
  .lied-info h2{font-size:2.2rem}
  .lied-intro{font-size:1.15rem}
  .lied-noten span:nth-child(n+7){display:none}
}
@media (prefers-reduced-motion:reduce){
  .platte,.lied.spielt .lied-noten span{animation:none}
  .lied-text{scroll-behavior:auto}
}


/* Liedtext mittig und größer (Liedblatt), ab Tablet-Breite */
@media (min-width:901px){
  .lied-text{max-height:240px;padding-right:0;text-align:center}
  .lied-teil .z{width:fit-content;max-width:100%;margin:0 auto;font-size:1.25rem;line-height:1.6;padding:.05rem .7rem}
  .lied-teil.refrain{margin:.4rem 0}
}

/* ---------- Buch-Einzelseite (buch.html, Adresse /buch/…) ---------- */
.buch-wrap{max-width:1040px}
.buchseite .krumen{font-weight:700;font-size:.9rem;color:var(--navy-soft);padding:.6rem 0 0}
.buchseite .krumen a{text-decoration:none;color:var(--red-text)}
.band-kopf{display:grid;grid-template-columns:280px 1fr;gap:3rem;align-items:start;padding:1.4rem 0 .5rem}
.band-cover{position:relative;padding:0 12px 12px 0}
.band-cover::before{content:"";position:absolute;inset:14px 0 0 14px;background:var(--sun);border-radius:22px;z-index:0}
.band-cover img{position:relative;z-index:1;border-radius:16px;box-shadow:0 16px 32px rgba(30,42,120,.22);transform:rotate(-2deg)}
.band-nr{display:inline-flex;align-items:center;background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:.85rem;padding:.3rem .85rem;border-radius:999px;letter-spacing:.02em}
.band-info h1{font-size:clamp(1.7rem,3vw,2.35rem);margin:.7rem 0 .4rem}
.fakten{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 1.2rem}
.fakten span{background:#fff;border:2px solid var(--sand);border-radius:12px;padding:.35rem .7rem;font-weight:800;font-size:.85rem;display:flex;align-items:center;gap:.4rem}
.fakten svg{color:var(--red)}
.kauf-box{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:.4rem}
.kauf-box .btn-red{font-size:1rem;padding:.8rem 1.5rem;display:inline-flex;align-items:center;gap:.55rem}
.kauf-hinweis{font-size:.82rem;color:var(--navy-soft)}
.weitere-shops{margin-top:.6rem;font-weight:700;font-size:.95rem}
.weitere-shops a{color:var(--red-text);margin-right:.6rem}
.band-text{margin-top:1.4rem;padding-top:1.2rem;border-top:2px dashed var(--sand);font-size:.98rem;line-height:1.65}
.band-text p+p{margin-top:.6rem}

/* Aufklappen: lange Texte gekürzt mit sanftem Auslaufen */
[data-aufklappen]{position:relative}
[data-aufklappen]:not(.offen){overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.band-text:not(.offen){max-height:11.5rem}
.geschichte-text:not(.offen){max-height:17rem}
.aufklapp-knopf{font:inherit;font-weight:800;font-size:.95rem;color:var(--red-text);background:#fff;border:2px solid var(--sand);border-radius:999px;padding:.45rem 1.1rem;margin-top:.6rem;cursor:pointer}
.aufklapp-knopf:hover{border-color:var(--red);color:var(--red)}
.aufklapp-knopf::after{content:" ▾"}
.aufklapp-knopf[aria-expanded="true"]::after{content:" ▴"}

.buchseite .eyebrow{display:block;font-weight:800;color:var(--red-text);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;text-align:center}
.buchseite .abschnitt-kopf{text-align:center;margin-bottom:1.4rem}
.buchseite .abschnitt-kopf h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:.35rem}
.geschichte{margin-top:3.5rem}
.geschichte-karte{position:relative;max-width:760px;margin:0 auto;background:#fff;border-radius:26px;padding:2.2rem 2.8rem 1.8rem;box-shadow:0 14px 32px rgba(30,42,120,.1);border:3px solid var(--sand);text-align:center}
.geschichte-karte h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:.4rem 0 1.2rem}
.geschichte-text{text-align:left}
.geschichte-text p{font-size:1.02rem;line-height:1.7;margin-bottom:.7rem}
.geschichte-text p:first-child::first-letter{font-family:var(--display);font-weight:700;font-size:2.9rem;float:left;line-height:.9;margin:.3rem .5rem 0 0;color:var(--red)}
.geschichte-karte .aufklapp-knopf{margin-top:.9rem}
.geschichte-karte .sonne{position:absolute;top:-26px;right:-20px;width:64px;height:64px}

.download{margin-top:3.5rem}
.download-karte{display:grid;grid-template-columns:210px 1fr;gap:4rem;align-items:center;background:var(--navy);color:#fff;border-radius:26px;padding:2rem 2.6rem;position:relative;overflow:hidden;max-width:880px;margin:0 auto}
.download-karte>*{position:relative;z-index:1}
.download-karte::after{content:"";position:absolute;z-index:0;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,201,60,.16);pointer-events:none}
.download .vorschau{background:#fff;border-radius:12px;padding:10px;transform:rotate(-2.5deg);box-shadow:0 14px 26px rgba(0,0,0,.28);position:relative}
.download .vorschau img{border-radius:4px;width:100%;aspect-ratio:707/1000;object-fit:cover;object-position:top}
.download .vorschau img.grau{filter:grayscale(1) contrast(1.35) brightness(1.15)}
.download .vorschau small{position:absolute;top:-10px;left:-10px;background:var(--red);color:#fff;font-weight:800;font-size:.78rem;padding:.25rem .6rem;border-radius:8px;transform:rotate(-6deg)}
.download-text{padding-left:1rem}
.download h2{font-size:clamp(1.4rem,2.4vw,1.85rem);color:var(--sun)}
.download p{color:#E6E8F6;margin:.6rem 0 1rem;font-size:.98rem;max-width:30rem}
.download-punkte{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.download-punkte li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.3rem .8rem;font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:.4rem}
.download-punkte li::before{content:"✓";color:var(--sun);font-weight:800}
.btn-sun{background:var(--sun);color:var(--navy);box-shadow:0 5px 0 #C99A1E;display:inline-flex;align-items:center;gap:.55rem;font-size:1rem;padding:.8rem 1.5rem}

.weitere{margin-top:3.5rem}
.weitere-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,170px));justify-content:center;gap:1.6rem}
.weitere-reihe a{text-decoration:none;text-align:center;font-weight:800;font-size:.92rem;line-height:1.3;display:flex;flex-direction:column;gap:.6rem;transition:transform .2s}
.weitere-reihe a:hover{transform:translateY(-4px)}
.weitere-reihe img{border-radius:12px;box-shadow:0 10px 22px rgba(30,42,120,.18);aspect-ratio:3/4;object-fit:cover;object-position:top;width:100%}

@media (max-width:860px){
  .band-kopf{grid-template-columns:1fr;gap:1.6rem;padding-top:1rem}
  .band-cover{max-width:230px;margin:0 auto;width:100%}
  .band-info{text-align:left}
  .geschichte-karte{padding:1.8rem 1.2rem 1.4rem}
  .geschichte-karte .sonne{right:-4px;width:52px;height:52px}
  .download-karte{grid-template-columns:1fr;padding:1.8rem 1.3rem;gap:1.6rem}
  .download-text{padding-left:0}
  .download .vorschau{max-width:180px;margin:0 auto}
  .weitere-reihe{grid-template-columns:repeat(2,1fr);gap:1rem}
}