/* holunderbande.de · Grundstil „alles gezeichnet“ · keine externen Ressourcen */
@font-face{font-family:"Kalam";src:url(../fonts/kalam-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kalam";src:url(../fonts/kalam-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Andika";src:url(../fonts/andika-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url(../fonts/andika-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Caveat";src:url(../fonts/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --papier:#f6eedd; --papier2:#efe3c8; --tinte:#2b2118; --tinte2:#5a4a3a; --holunder:#5c346e; --beere:#3b2a5a;
  --gruen:#55743a; --moos:#7c8a5a; --rot:#a3322a; --gold:#c99a3b; --himmel:#7fa3c0; --schatten:rgba(43,33,24,.22);
  --akzent:var(--gruen); --hand:"Caveat","Kalam",cursive; --titel:"Kalam",cursive; --text:"Andika",system-ui,sans-serif;
  --r:14px; --max:1120px; color-scheme:light;
}
html[data-zeit="nacht"]{--akzent:#3d5a8a}
html[data-zeit="herbst"]{--akzent:#a35a24}
html[data-zeit="winter"]{--akzent:#3e6a8f}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.15rem/1.6 var(--text);color:var(--tinte);background:var(--papier) url(../../img/papier.webp) repeat;min-height:100vh;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(120,90,50,.18) 100%)}
html[data-zeit="nacht"] body{background-image:url(../../img/papier-nacht.webp);color:#f2ead8;--tinte:#f2ead8;--tinte2:#d2c6ad}
html[data-zeit="nacht"] .zettel,html[data-zeit="nacht"] .blatt{color:#2b2118;--tinte:#2b2118;--tinte2:#5a4a3a}
main{position:relative}
[hidden]{display:none!important}
img{max-width:100%;height:auto}
a{color:var(--holunder);text-decoration-thickness:2px;text-underline-offset:3px}
html[data-zeit="nacht"] a{color:#d9c2f0}
html[data-zeit="nacht"] :is(.zettel,.blatt,.karte,.steckbrief) a{color:var(--holunder)}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none!important}
:focus-visible{outline:3px dashed var(--holunder);outline-offset:4px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.springmarke{position:absolute;left:-999px;top:0;z-index:100;background:var(--papier);padding:.5rem 1rem}
.springmarke:focus{left:1rem}
h1,h2,h3{font-family:var(--titel);font-weight:700;line-height:1.15;margin:.2em 0 .4em;letter-spacing:.01em}
h1{font-size:clamp(2rem,5vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem)}
h3{font-size:1.35rem}
.pinsel{display:inline-block;position:relative;padding:0 .2em}
.pinsel::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:.05em;height:.45em;z-index:-1;border-radius:40% 60% 45% 55%/60% 40% 60% 40%;background:color-mix(in srgb,var(--akzent) 35%,transparent);transform:rotate(-1deg)}
.hand{font-family:var(--hand);font-size:1.35em;line-height:1.25}
.leise{color:var(--tinte2)}
.huelle{max-width:var(--max);margin:0 auto;padding:0 1.2rem}
section{padding:2.2rem 0}

/* ---------- Kopf und Navigation (Holzleiste) ---------- */
.kopf{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.8rem;padding:.35rem 1rem;background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.18)),url(../../img/holz.webp) center/768px 120px;box-shadow:0 3px 0 rgba(60,35,15,.35),0 6px 18px var(--schatten);color:#fbf1dc}
.kopf .marke{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;view-transition-name:marke}
.kopf .marke img{height:44px;width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.kopf nav{margin-left:auto}
.kopf nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.35rem;flex-wrap:wrap}
.kopf nav a{display:block;padding:.3rem .7rem;font:700 1.02rem var(--titel);color:#fbf1dc;text-decoration:none;border-radius:8px;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.kopf nav a:hover,.kopf nav a[aria-current="page"]{background:rgba(255,240,210,.18)}
.kopf .menue{display:none;margin-left:auto;background:none;border:2px solid #fbf1dc;color:#fbf1dc;border-radius:10px;font:700 1rem var(--titel);padding:.25rem .7rem}
@media (max-width:860px){
  .kopf .menue{display:block}
  .kopf nav{position:absolute;right:.6rem;top:100%;display:none}
  .kopf nav.offen{display:block}
  .kopf nav ul{flex-direction:column;gap:.4rem;padding:.6rem;background:url(../../img/holz.webp);border-radius:12px;box-shadow:0 10px 30px var(--schatten)}
}

/* ---------- Holzschild-Knöpfe, Stempel, Zettel, Siegel ---------- */
.schild{--dreh:-1deg;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:48px;padding:.55rem 1.4rem .6rem;border:0;cursor:pointer;
  font:700 1.18rem/1.1 var(--titel);color:#fff6e4;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 6px rgba(0,0,0,.25);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.18)),url(../../img/holz.webp) 30% 40%/600px 200px;
  border-radius:12px 16px 11px 18px/16px 12px 18px 11px;box-shadow:inset 0 2px 0 rgba(255,235,200,.35),inset 0 -3px 0 rgba(60,30,10,.45),0 4px 0 rgba(60,35,15,.5),0 8px 14px var(--schatten);
  transform:rotate(var(--dreh));transition:transform .18s ease,box-shadow .18s ease}
.schild::before,.schild::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8d0c4,#5d5146 60%,#2b241e)}
.schild::before{left:.5rem}.schild::after{right:.5rem}
.schild:hover{transform:rotate(calc(var(--dreh)*-1)) translateY(-2px)}
.schild:active{transform:rotate(0) translateY(2px);box-shadow:inset 0 2px 0 rgba(255,235,200,.3),0 1px 0 rgba(60,35,15,.5),0 3px 6px var(--schatten)}
/* gemaltes Holzschild (gpt-image-2) statt Holzstruktur */
.schild{background:url(../../img/holzschild-480.webp) center/100% 100% no-repeat;border-radius:0;box-shadow:none;filter:drop-shadow(0 4px 2px rgba(60,35,15,.45)) drop-shadow(0 8px 10px var(--schatten));padding-inline:1.7rem}
.schild::before,.schild::after{display:none}
.schild:active{box-shadow:none;filter:drop-shadow(0 1px 1px rgba(60,35,15,.5))}
.schild[disabled]{filter:grayscale(.7) brightness(.9);cursor:not-allowed}
.schild.klein{font-size:1rem;min-height:40px;padding:.35rem 1.1rem .4rem}
.schild.gruen{filter:hue-rotate(38deg) saturate(.75) brightness(.92) drop-shadow(0 4px 2px rgba(40,50,15,.45)) drop-shadow(0 8px 10px var(--schatten))}
.schild.pfeil{background-image:url(../../img/holzpfeil-480.webp);padding-right:2.6rem}
.schild.pfeil::after{display:none}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center}

.stempel{display:inline-block;padding:.25rem .8rem;border:3px solid currentColor;border-radius:8px;color:var(--rot);font:700 1.05rem var(--titel);text-transform:uppercase;letter-spacing:.06em;transform:rotate(-6deg);
  -webkit-mask:url(../../img/korn.png) 0 0/180px;mask:url(../../img/korn.png) 0 0/180px;opacity:.88}
.stempel.rund{border-radius:50%;width:6.2rem;height:6.2rem;display:inline-grid;place-items:center;text-align:center;font-size:.85rem;line-height:1.05;padding:.4rem;border-style:double;border-width:5px}

.zettel{position:relative;background:#fffaf0 url(../../img/papier.webp);padding:1.4rem 1.4rem 1.2rem;border-radius:3px 6px 4px 5px;box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 22px var(--schatten);
  transform:rotate(var(--dreh,-.6deg));background-image:repeating-linear-gradient(transparent 0 31px,rgba(80,120,170,.18) 31px 32px),url(../../img/papier.webp)}
.zettel::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;margin-left:-55px;background:rgba(160,190,130,.72);transform:rotate(-3deg);
  -webkit-mask:url(../../img/korn.png) 0 0/90px;mask:url(../../img/korn.png) 0 0/90px;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.zettel.ohneband::before{display:none}
.blatt{background:#fffaf0 url(../../img/papier.webp);border-radius:6px;padding:1.4rem;box-shadow:0 2px 0 rgba(0,0,0,.05),0 14px 30px var(--schatten);position:relative}
.blatt.fallbuch{background-image:linear-gradient(90deg,transparent 2.6rem,rgba(190,60,60,.35) 2.6rem 2.7rem,transparent 2.7rem),repeating-linear-gradient(transparent 0 33px,rgba(80,120,170,.2) 33px 34px),url(../../img/papier.webp);padding-left:3.4rem;font-family:var(--hand);font-size:1.45rem;line-height:34px}

.siegel{display:inline-grid;place-items:center;width:4.4rem;height:4.4rem;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;background:radial-gradient(circle at 35% 30%,#d4544a,#9b2a22 55%,#6c1a14);color:#fbe3d4;font:700 .8rem var(--titel);text-align:center;box-shadow:inset 0 0 0 5px rgba(0,0,0,.12),0 3px 6px var(--schatten)}

/* ---------- Kacheln / Karten im Buchlook ---------- */
.raster{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.karte{position:relative;background:#fffaf0 url(../../img/papier.webp);border-radius:10px;padding:1rem;box-shadow:0 10px 24px var(--schatten);transition:transform .2s}
.karte:nth-child(3n+1){transform:rotate(-.6deg)}.karte:nth-child(3n+2){transform:rotate(.5deg)}
.karte:hover{transform:rotate(0) translateY(-3px)}
html[data-zeit="nacht"] .karte{color:#2b2118}
.tinte-rahmen{border:2px solid var(--tinte);border-radius:255px 15px 225px 15px/15px 225px 15px 255px}

/* ---------- Ylvi, die Begleiterin ---------- */
.ylvi{position:fixed;right:max(.6rem,env(safe-area-inset-right));bottom:max(.4rem,env(safe-area-inset-bottom));z-index:60;width:116px;view-transition-name:ylvi;cursor:pointer;border:0;background:none;padding:0}
.ylvi img{width:100%;display:block;filter:drop-shadow(0 4px 4px rgba(40,25,10,.35));transform-origin:50% 100%}
.ylvi.wedelt img{animation:wedeln .35s ease-in-out 6 alternate}
.ylvi.huepft img{animation:huepfen .5s ease-in-out 3}
.ylvi.legt img{animation:atmen 3s ease-in-out infinite}
@keyframes wedeln{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes huepfen{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px) rotate(-3deg)}}
@keyframes atmen{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.96)}}
.sprechblase{position:fixed;right:132px;bottom:58px;z-index:61;max-width:min(320px,70vw);padding:.8rem 1rem;font:400 1.35rem/1.2 var(--hand);color:#2b2118;background:#fffaf0 url(../../img/papier.webp);border-radius:18px 18px 4px 18px;box-shadow:0 8px 20px var(--schatten);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .25s,transform .25s;pointer-events:none}
.sprechblase.zeigen{opacity:1;transform:none;pointer-events:auto}
@media (max-width:600px){.ylvi{width:84px}.sprechblase{right:92px;bottom:40px;font-size:1.2rem}}

/* ---------- Formulare ---------- */
label{font-weight:700;display:block;margin:.6rem 0 .25rem}
input[type=text],input[type=email],input[type=search],select,textarea{width:100%;font:1.15rem var(--text);padding:.65rem .8rem;border:2px solid var(--tinte2);border-radius:10px 14px 9px 13px;background:rgba(255,252,244,.9);color:#2b2118}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--akzent) 60%,transparent);outline-offset:1px}
.wahl{display:flex;flex-wrap:wrap;gap:.6rem}
.wahl label{font-weight:400;margin:0;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border:2px dashed var(--tinte2);border-radius:999px;cursor:pointer;background:rgba(255,252,244,.6);color:#2b2118}
.wahl input{accent-color:var(--holunder);width:1.15rem;height:1.15rem}
.wahl label:has(input:checked){border-style:solid;border-color:var(--holunder);background:color-mix(in srgb,var(--holunder) 14%,#fffaf0)}
.einwilligung{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;margin:.8rem 0}
.einwilligung input{margin-top:.35rem;width:1.3rem;height:1.3rem;flex:0 0 auto;accent-color:var(--holunder)}
.meldung{margin:.8rem 0;padding:.7rem 1rem;border-radius:10px;background:rgba(255,250,235,.9);border-left:6px solid var(--akzent);color:#2b2118}
.meldung.fehler{border-left-color:var(--rot)}

/* ---------- Fuß ---------- */
.fuss{position:relative;z-index:1;margin-top:3rem;padding:2rem 1rem 7rem;text-align:center;font-size:1rem;color:var(--tinte2)}
.fuss nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:center;margin:.6rem 0}
.fuss .gruss{font:400 1.6rem var(--hand);color:var(--holunder)}
html[data-zeit="nacht"] .fuss .gruss{color:#d9c2f0}

/* ---------- Jahreszeiten-Wahl ---------- */
.zeiten{display:flex;gap:.5rem;flex-wrap:wrap}
.zeiten button{font:700 1rem var(--titel);padding:.35rem .9rem;border-radius:999px;border:2px solid var(--tinte2);background:rgba(255,250,235,.85);color:#2b2118;cursor:pointer}
.zeiten button[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:#fff}

/* ---------- Seitenübergänge (View Transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.42s ease-in both blatt-weg}
::view-transition-new(root){animation:.55s ease-out both blatt-her}
@keyframes blatt-weg{to{opacity:0;transform:translateX(-3%) rotate(-.6deg);filter:blur(2px)}}
@keyframes blatt-her{from{opacity:0;clip-path:circle(0% at 85% 92%)}to{opacity:1;clip-path:circle(150% at 85% 92%)}}

/* ---------- Druck ---------- */
@media print{
  .kopf,.fuss,.ylvi,.sprechblase,.nicht-drucken{display:none!important}
  body{background:#fff}
  body::before{display:none}
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
html.ruhig *,html.ruhig *::before,html.ruhig *::after{animation:none!important;transition:none!important}

/* ---------- Rückfrage im Buchlook (HB.frage) ---------- */
.buchfrage{border:0;padding:0;background:transparent;max-width:min(92vw,470px);overflow:visible;color:#2b2118}
.buchfrage::backdrop{background:rgba(40,28,16,.55);backdrop-filter:blur(2px)}
.buchfrage-blatt{position:relative;margin-top:70px;padding:4.4rem 1.6rem 1.5rem;text-align:center;background:#fffaf0 url(../../img/papier.webp);
  border-radius:4px 7px 5px 6px;box-shadow:0 2px 0 rgba(0,0,0,.06),0 24px 50px rgba(20,12,4,.45);transform:rotate(-.8deg)}
.buchfrage-blatt::before{content:"";position:absolute;top:-12px;left:18%;width:96px;height:26px;background:rgba(160,190,130,.75);transform:rotate(-6deg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.buchfrage-blatt::after{content:"";position:absolute;top:-10px;right:16%;width:84px;height:24px;background:rgba(214,170,120,.7);transform:rotate(5deg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.buchfrage-ylvi{position:absolute;left:50%;top:-78px;width:136px;height:auto;margin-left:-68px;filter:drop-shadow(0 6px 6px rgba(40,25,10,.3))}
.buchfrage-titel{margin:0 0 .4rem;font:700 1.9rem/1.1 var(--titel);color:var(--holunder)}
.buchfrage p{margin:0 0 1.2rem;font:400 1.5rem/1.25 var(--hand)}
.buchfrage .knopfreihe{justify-content:center}
@media (prefers-reduced-motion:no-preference){html:not(.ruhig) .buchfrage[open] .buchfrage-blatt{animation:blatt-rein .35s cubic-bezier(.2,1.3,.4,1)}}
@keyframes blatt-rein{from{opacity:0;transform:translateY(24px) rotate(-4deg) scale(.94)}}
.buchfrage.geht .buchfrage-blatt{opacity:0;transform:translateY(12px) rotate(-2deg);transition:opacity .18s,transform .18s}