/* =====================================================================
   MHS — gemeinsames Stylesheet (Multi-Page)
   Doodle-/Sticker-Look · Türkis + Pink + Schwarz · Brush/Script-Fonts
   Header/Nav/Footer werden per site.js injiziert (Mounts #site-header/#site-footer)
   Fonts: lokal gehostet (woff2 in fonts/) — keine externen CDN-Requests (§25 TTDSG)
   ===================================================================== */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/baloo2-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo2-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo2-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/caveat-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Luckiest Guy';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/luckiestguy-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/nunito-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/nunito-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/nunito-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --tuerkis:#25BECB; --tuerkis-d:#159CA8; --tuerkis-tief:#0E7580;
  --pink:#EC1E79; --pink-d:#C4155F;
  --tinte:#141821; --tinte2:#2A2F3A;
  --himmel1:#CFEFF6; --himmel2:#EAF9FB;
  --text:#20262E; --grau:#5E6B72;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{font-family:'Nunito',system-ui,sans-serif; color:var(--text); background:#fff; overflow-x:hidden;}
a{text-decoration:none; color:inherit;}
img{max-width:100%;}
.wrap{max-width:1240px; margin:0 auto; padding:0 22px;}
.script{font-family:'Caveat',cursive;}
.brush{font-family:'Luckiest Guy','Baloo 2',cursive; letter-spacing:.01em; font-weight:800;}
.round{font-family:'Baloo 2',cursive;}
.wordmark{font-family:'Baloo 2',cursive; font-weight:800; font-style:italic; -webkit-text-stroke:2.2px #fff; paint-order:stroke fill;}

/* Foto-Platzhalter */
.ph{position:relative; background:repeating-linear-gradient(45deg,#E4EEF0 0 16px,#DAE7E9 16px 32px); border:2px dashed #A9C5C9; display:grid; place-items:center; text-align:center;}
.ph>span:not([class]){font-family:monospace; font-size:12px; color:#5E6B72; background:#fff; padding:6px 11px; border-radius:9px; box-shadow:0 2px 8px rgba(0,0,0,.05);}

/* Buttons (Hochglanz) */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:'Baloo 2',cursive; font-weight:800; border-radius:14px; cursor:pointer; border:none; transition:translate 150ms cubic-bezier(.23,1,.32,1), scale 150ms cubic-bezier(.23,1,.32,1);}
/* translate/scale (eigenstaendig) statt transform → inline rotate() der Hero-Buttons bleibt erhalten */
@media(hover:hover) and (pointer:fine){ .btn:hover{translate:0 -2px;} }
.btn:active{scale:.97;}
.btn-pink{background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,0) 44%),linear-gradient(180deg,#F63A8E 0%,var(--pink) 52%,var(--pink-d) 100%); color:#fff; padding:13px 22px; font-size:16px; box-shadow:0 5px 0 var(--pink-d),0 8px 16px rgba(236,30,121,.28);}
.btn-tuerkis{background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 44%),linear-gradient(180deg,#40D3DF 0%,var(--tuerkis) 52%,var(--tuerkis-d) 100%); color:#fff; padding:12px 18px; font-size:15px; box-shadow:0 4px 0 var(--tuerkis-tief),0 7px 14px rgba(37,190,203,.26);}
/* Sekundaerer CTA (Ghost) — bewusst leiser als der pinke Primaer-CTA, klare Hierarchie */
.btn-ghost{background:rgba(255,255,255,.92); color:var(--tuerkis-tief); padding:12px 18px; font-size:15px; border:2.5px solid var(--tuerkis); box-shadow:0 4px 12px rgba(20,24,33,.08);}
@media(hover:hover) and (pointer:fine){ .btn-ghost:hover{background:#fff;} }

/* Doodle-Helfer */
.doodle{position:absolute; pointer-events:none;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-12px) rotate(var(--r,0deg));}}

/* ===== Kachel-Raster: nie verwaiste/asymmetrische Reihen =====
   Spaltenzahl teilt die Kachelzahl bei JEDER Breite glatt →
   letzte Reihe immer voll. 3→{3,1} · 4→{4,2,1} · 5→{5,1} (Primzahl). */
.tiles{display:grid; gap:18px;}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:980px){ .g-5{grid-template-columns:1fr;} }
@media(max-width:900px){ .g-4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:680px){ .g-3{grid-template-columns:1fr;} }
@media(max-width:520px){ .g-4{grid-template-columns:1fr;} }

/* Feature-Leiste (4 Kacheln) */
.feature-bar{display:grid; grid-template-columns:repeat(4,1fr); gap:18px 0;}
.feature-bar>div{padding:2px clamp(10px,1.5vw,20px);}
@media(min-width:821px){ .feature-bar>div+div{border-left:2px dotted rgba(255,255,255,.26);} }
@media(max-width:820px){ .feature-bar{grid-template-columns:repeat(2,1fr); gap:22px 24px;} }
@media(max-width:520px){ .feature-bar{grid-template-columns:1fr;} }

/* Hero-Kategorie-Icons: immer 4 oder 2 pro Reihe */
.hero-icons{display:grid; grid-template-columns:repeat(4,auto); gap:16px 18px; justify-content:start; margin-top:24px;}
@media(max-width:820px){ .hero-icons{justify-content:center;} }
@media(max-width:430px){ .hero-icons{grid-template-columns:repeat(2,auto); gap:12px 18px; justify-content:center;} }

/* Hero- & Kontakt-Layout: 2-spaltig, mobil sauber gestapelt */
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,3vw,44px); align-items:center;}
.kontakt-grid{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,40px); align-items:center;}
.kontakt-links{display:grid; grid-template-columns:repeat(3,1fr); gap:14px 26px; align-items:center;}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;}
  .kontakt-grid{grid-template-columns:1fr; text-align:center;}
  .kontakt-links{grid-template-columns:1fr; gap:20px; justify-items:center;}
  .kontakt-links a{flex-direction:column; text-align:center; gap:7px;}
}

/* ============ Header / Nav (injiziert) ============ */
header.site{background:linear-gradient(180deg,#20262E 0%,var(--tinte) 58%,#0E1218 100%); position:sticky; top:0; z-index:80; box-shadow:0 3px 16px rgba(20,24,33,.30);}
.head-row{display:flex; align-items:center; gap:18px; padding-top:12px; padding-bottom:12px;}
.logo{display:inline-flex; align-items:center; gap:12px;}
.logo-castle{display:block; height:clamp(46px,7vw,72px); width:auto;}
.logo-word{display:block; height:clamp(42px,6.4vw,66px); width:auto;}
.nav{margin-left:auto; display:flex; align-items:center; gap:17px; font-family:'Baloo 2',cursive; font-weight:700; font-size:15px; color:#fff;}
.nav a{color:#fff; padding-bottom:2px; border-bottom:3px solid transparent; transition:color .15s,border-color .15s; white-space:nowrap;}
.nav a:hover{color:var(--tuerkis);}
.nav a.active{color:var(--tuerkis); border-bottom-color:var(--tuerkis);}
.cta-btn{margin-left:6px; white-space:nowrap;}
.burger{position:relative; display:none; background:none; border:none; cursor:pointer; padding:6px; margin-left:auto;}
.burger-box{position:relative; display:block; width:26px; height:19px;}
.burger-bar{position:absolute; left:0; width:100%; height:2.4px; background:#fff; border-radius:2px; transition:transform 220ms cubic-bezier(.23,1,.32,1), opacity 160ms ease, top 220ms cubic-bezier(.23,1,.32,1);}
.burger-bar:nth-child(1){top:0;}
.burger-bar:nth-child(2){top:8.3px;}
.burger-bar:nth-child(3){top:16.6px;}
.burger[aria-expanded="true"] .burger-bar:nth-child(1){top:8.3px; transform:rotate(45deg);}
.burger[aria-expanded="true"] .burger-bar:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] .burger-bar:nth-child(3){top:8.3px; transform:rotate(-45deg);}

/* Mobile-Menü: Aufklappen statt Hart-Umschalten (grid-rows-Trick, kein JS-Height-Messen) */
.mobile-menu{display:grid; grid-template-rows:0fr; background:var(--tinte); transition:grid-template-rows 240ms cubic-bezier(.23,1,.32,1);}
.mobile-menu.open{grid-template-rows:1fr;}
.mm-inner{overflow:hidden; display:flex; flex-direction:column; opacity:0; transition:opacity 160ms ease;}
.mobile-menu.open .mm-inner{opacity:1; transition:opacity 220ms ease 70ms;}
.mm-inner a{color:#fff; font-family:'Baloo 2',cursive; font-weight:700; font-size:16px; padding:14px 22px; border-top:1px solid rgba(255,255,255,.08);}
.mm-inner a.active{color:var(--tuerkis);}
@media(max-width:1024px){
  .nav{display:none;}
  .cta-btn{display:none;}
  .burger{display:block;}
}
@media(max-width:860px){
  .hide-mob{display:none!important;}
}

/* ============ Footer (injiziert) ============ */
footer.site-foot{background:var(--tinte); color:#8B95A0; padding:22px 0; text-align:center; font-weight:600; font-size:13px;}
footer.site-foot a{color:#B7C0CA; text-decoration:underline;}

/* ============ Seiten-Kopf (Unterseiten) ============ */
.pagehead{text-align:center; padding:clamp(26px,4vw,46px) 0 clamp(10px,2vw,20px);}
.pagehead .kicker{color:var(--pink); font-size:clamp(20px,2.6vw,28px); font-weight:700; transform:rotate(-2deg); display:inline-block;}
.pagehead h1{font-family:'Luckiest Guy','Baloo 2',cursive; font-weight:800; margin:2px 0 0; color:var(--tinte); font-size:clamp(32px,5vw,56px); line-height:.95;}
.pagehead p.sub{font-family:'Baloo 2',cursive; font-weight:700; color:var(--grau); font-size:clamp(14px,1.7vw,17px); margin:10px auto 0; max-width:60ch; padding:0 16px;}

/* ============ Konfigurator (bestellen.html) ============ */
.sect{background:#fff; border:2.5px solid var(--tinte); border-radius:18px; padding:16px 16px 10px; margin:14px 0; box-shadow:5px 6px 0 rgba(20,24,33,.10);}
.sect-h{font-family:'Baloo 2',cursive; font-weight:800; font-size:19px; color:var(--tinte); margin:0 0 12px;}
.hint{font-family:'Baloo 2',cursive; font-size:12px; font-weight:700; color:#fff; background:var(--pink); padding:2px 9px; border-radius:999px; margin-left:6px; vertical-align:middle; white-space:nowrap;}
.opts{display:flex; flex-direction:column; gap:9px; margin-bottom:8px;}
.opt{display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; background:#fff; border:2.5px solid #E1E9EB; border-radius:14px; padding:12px 15px; font:inherit; color:inherit; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;}
.opt:hover{border-color:var(--tuerkis);}
.opt.sel{border-color:var(--pink); background:rgba(37,190,203,.08); box-shadow:inset 0 0 0 1px var(--pink);}
.opt-main{display:flex; flex-direction:column; gap:2px; font-family:'Baloo 2',cursive; font-weight:700; font-size:15.5px; color:var(--tinte);}
.opt-sub{font-family:'Nunito',sans-serif; font-size:12.5px; color:var(--grau); font-weight:600;}
.opt-price{font-family:'Baloo 2',cursive; font-weight:800; font-size:15px; color:var(--tuerkis-d); white-space:nowrap;}
/* Ausgegraute Option (z.B. Einzelstueck-Zubehoer an belegtem Tag): nicht waehlbar. */
.opt:disabled,.opt.busy{opacity:.55; cursor:not-allowed; background:#F5F7F8; border-color:#E1E9EB; box-shadow:none;}
.opt:disabled:hover,.opt.busy:hover{border-color:#E1E9EB;}
.opt.busy .opt-sub{color:var(--pink); font-weight:700;}
.daterow{margin-bottom:6px;}
.datelabel{font-family:'Baloo 2',cursive; font-weight:700; font-size:14px; color:var(--grau); display:flex; flex-direction:column; gap:5px;}
.dateinput,.fldinput{font-family:'Nunito',sans-serif; font-weight:700; font-size:15px; color:var(--text); padding:10px 13px; border:2.5px solid var(--tinte); border-radius:12px; background:#fff;}
.fld{display:flex; flex-direction:column; gap:5px; font-family:'Baloo 2',cursive; font-weight:700; font-size:14px; color:var(--grau); margin-bottom:9px;}

/* Kalender-Widget (Wunschtermin) */
.vh-date{position:absolute; left:-10000px; top:0; width:20px; height:20px; padding:0; border:0;}
.cal{border:2.5px solid #E1E9EB; border-radius:16px; padding:12px 12px 8px; background:#fff; margin-bottom:12px;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-title{font-family:'Baloo 2',cursive; font-weight:800; font-size:17px; color:var(--tinte);}
.cal-nav{width:36px; height:36px; border-radius:10px; border:2.5px solid var(--tuerkis); background:#fff; color:var(--tuerkis-d); font-family:'Baloo 2',cursive; font-weight:800; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background-color .14s ease, transform .14s ease;}
.cal-nav:hover:not(:disabled){background:rgba(37,190,203,.12);}
.cal-nav:active:not(:disabled){transform:scale(.94);}
.cal-nav:disabled{opacity:.35; cursor:not-allowed; border-color:#E1E9EB; color:var(--grau);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-dow{margin-bottom:4px;}
.cal-wd{text-align:center; font-family:'Baloo 2',cursive; font-weight:700; font-size:12px; color:var(--grau); padding:2px 0;}
.cal-wd.we{color:var(--pink);}
.cal-pad{aspect-ratio:1/1;}
.cal-day{aspect-ratio:1/1; border:2px solid transparent; border-radius:10px; background:#F4F8F9; font-family:'Baloo 2',cursive; font-weight:700; font-size:14px; color:var(--tinte); cursor:pointer; display:grid; place-items:center; padding:0; transition:background-color .12s ease, border-color .12s ease, transform .12s ease;}
.cal-day.we{background:rgba(37,190,203,.07);}
.cal-day:hover:not(:disabled):not(.sel){border-color:var(--tuerkis); background:rgba(37,190,203,.12);}
.cal-day:active:not(:disabled){transform:scale(.92);}
.cal-day.today{border-color:var(--tuerkis); color:var(--tuerkis-tief);}
.cal-day.sel{background:var(--pink); color:#fff; border-color:var(--pink-d); box-shadow:0 3px 0 var(--pink-d);}
.cal-day:disabled{opacity:.32; cursor:not-allowed; background:#fff; text-decoration:line-through;}
.cal-day.busy{opacity:1; background:rgba(236,30,121,.10); color:var(--pink-d); border-color:rgba(236,30,121,.30); text-decoration:line-through; cursor:not-allowed;}
/* Wochenend-Special: Sa+So der gewaehlten Fr–So-Spanne (Anker-Freitag = .sel). Trotz disabled sichtbar markiert. */
.cal-day.wspan{opacity:1; background:rgba(236,30,121,.16); color:var(--pink-d); border-color:rgba(236,30,121,.32); text-decoration:none; cursor:default;}
.cal-legend{display:flex; justify-content:center; gap:16px; margin-top:12px; flex-wrap:wrap;}
.cal-legend .lg{display:flex; align-items:center; gap:6px; font-family:'Baloo 2',cursive; font-weight:700; font-size:12px; color:var(--grau);}
.cal-legend i{width:14px; height:14px; border-radius:5px; display:inline-block; border:2px solid transparent;}
.cal-legend .lg-frei{background:#F4F8F9; border-color:#E1E9EB;}
.cal-legend .lg-belegt{background:rgba(236,30,121,.12); border-color:rgba(236,30,121,.35);}
.cal-legend .lg-heute{background:#fff; border-color:var(--tuerkis);}
.cal-picked{font-family:'Baloo 2',cursive; font-weight:700; font-size:13px; color:var(--tuerkis-tief); text-align:center; margin:10px 0 2px;}
.cal-hint{font-family:'Nunito',sans-serif; font-weight:600; font-size:11.5px; color:var(--grau); text-align:center; margin:4px 0 2px; line-height:1.4;}

/* Sticky Preis-Leiste */
.kbar{position:sticky; bottom:0; left:0; right:0; background:#fff; border-top:2px solid var(--tinte); box-shadow:0 -5px 16px rgba(20,24,33,.10); padding:7px 0; z-index:30;}
.kbar-in{max-width:900px; margin:0 auto; padding:0 16px; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"price btns" "note note"; align-items:center; gap:4px 14px;}
.prow{grid-area:price; display:flex; align-items:baseline; gap:8px; margin:0;}
.prow .lbl{font-family:'Baloo 2',cursive; font-weight:700; color:var(--grau); font-size:12px; white-space:nowrap;}
#price{font-family:'Luckiest Guy','Baloo 2',cursive; font-weight:800; font-size:21px; color:var(--pink);}
.kbtns{grid-area:btns; display:flex; gap:8px; justify-content:flex-end;}
.kbtn{border:none; border-radius:10px; padding:8px 14px; font-family:'Baloo 2',cursive; font-weight:800; font-size:13px; color:#fff; cursor:pointer; transition:transform 140ms cubic-bezier(.23,1,.32,1);}
.kbtn:active{transform:scale(.97);}
.kbtn-wa{background:linear-gradient(180deg,#33DE74,#25D366);}
.kbtn-mail{background:linear-gradient(180deg,#40D3DF,var(--tuerkis-d));}
.kbtn-copy{background:linear-gradient(180deg,#4A5462,var(--tinte));}
.kbtn:disabled{opacity:.42; cursor:not-allowed;}
#sendnote{grid-area:note; font-family:'Baloo 2',cursive; font-weight:700; font-size:11px; color:var(--grau); margin:0; text-align:center;}
@media(max-width:600px){
  .kbar-in{grid-template-columns:1fr; grid-template-areas:"price" "btns" "note"; gap:5px; text-align:center;}
  .prow{justify-content:center;}
  .kbtn{flex:1; padding:9px 6px; font-size:12.5px;}
  #price{font-size:20px;}
}
#toast{position:fixed; left:50%; bottom:130px; transform:translateX(-50%) translateY(10px); background:var(--tinte); color:#fff; padding:11px 18px; border-radius:12px; font-family:'Baloo 2',cursive; font-weight:800; font-size:14px; opacity:0; pointer-events:none; transition:.2s; z-index:60;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* Mobile: etwas mehr Luft zwischen "Unvergessliche" und "Momente." */
@media(max-width:820px){
  .hero-momente{margin-top:7px;}
}

/* Mobile: Hero geraderücken — im schmalen 1-Spalten-Layout wirken die vielen
   Kippungen kaputt statt verspielt. Desktop behält den Doodle-Look. */
@media(max-width:640px){
  .hero-copy h1 span,
  .hero-copy .hero-kicker,
  .hero-copy > p.round,
  .hero-copy > a.btn-pink,
  .hero-copy > a.btn-tuerkis{ transform:none !important; }
}

/* ===================== Burg-Detailseite ===================== */
.burgdetail{display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(20px,3vw,40px); align-items:start;}
.burgdetail .bd-hero{position:relative; border-radius:24px; overflow:hidden; box-shadow:0 16px 38px rgba(20,24,33,.16); background:#dfeef0;}
.burgdetail .bd-hero img{display:block; width:100%; height:auto;}
.bd-badge{position:absolute; top:16px; left:16px; background:var(--tinte); color:#fff; font-family:'Baloo 2',cursive; font-weight:800; font-size:12px; padding:6px 13px; border-radius:9px; letter-spacing:.05em;}
.bd-card{background:#fff; border-radius:24px; box-shadow:0 14px 32px rgba(20,24,33,.10); padding:clamp(22px,2.8vw,32px);}
@media(max-width:820px){ .burgdetail{grid-template-columns:1fr;} }

/* Galerie — 3 Spalten Desktop, 2 mobil. Für Symmetrie: immer 6 Bilder (teilt 3 und 2 glatt). */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px;}
@media(max-width:560px){ .gallery{grid-template-columns:repeat(2,1fr);} }
.gallery button{padding:0; border:none; background:#dfeef0; border-radius:16px; overflow:hidden; cursor:pointer; aspect-ratio:1/1; box-shadow:0 7px 18px rgba(20,24,33,.10); transition:transform .16s, box-shadow .16s;}
.gallery button:hover{transform:translateY(-3px) rotate(-1deg); box-shadow:0 12px 24px rgba(20,24,33,.18);}
.gallery img{width:100%; height:100%; object-fit:cover; display:block;}

/* Lightbox */
.lbox{position:fixed; inset:0; background:rgba(20,24,33,.93); display:none; align-items:center; justify-content:center; z-index:200;}
.lbox.open{display:flex;}
.lbox .lb-img{max-width:92vw; max-height:86vh; border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.55);}
.lbox button{position:absolute; background:#fff; color:var(--tinte); border:none; cursor:pointer; font-family:'Baloo 2',cursive; font-weight:800; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.35); line-height:1; display:grid; place-items:center;}
.lbox .lb-close{top:18px; right:18px; width:48px; height:48px; font-size:24px;}
.lbox .lb-nav{top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:28px;}
.lbox .lb-prev{left:16px;} .lbox .lb-next{right:16px;}
@media(max-width:560px){ .lbox .lb-nav{width:44px; height:44px; font-size:23px;} .lbox .lb-prev{left:8px;} .lbox .lb-next{right:8px;} }
.spec{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1.5px dashed #E1E9EB; font-family:'Nunito',sans-serif;}
.spec b{font-family:'Baloo 2',cursive; color:var(--tinte); min-width:118px; display:inline-block;}
.spec:last-of-type{border-bottom:none;}

/* Klickbare Burg-Karten: sanfter Zoom als Klick-Hinweis */
.pic,.ph{overflow:hidden;}
.pic img,.ph img{transition:transform .26s ease;}
.pic:hover img,.ph:hover img{transform:scale(1.05);}

/* ============ Scroll-Reveal (site.js hängt die Klasse automatisch an) ============ */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ============ Hero-Entrance: gestaffeltes Einblenden beim Laden ============
   Führt den Blick von der Überschrift zum Anfrage-CTA. Nutzt die eigenständigen
   Properties translate/scale, damit die inline transform:rotate() der Doodle-
   Elemente erhalten bleiben. Gated per .js (Head-Script) → ohne JS Hero sofort da. */
@keyframes heroIn{ from{opacity:0; translate:0 16px;} to{opacity:1; translate:0 0;} }
@keyframes heroInCta{ from{opacity:0; translate:0 16px; scale:.96;} 60%{opacity:1;} to{opacity:1; translate:0 0; scale:1;} }
.js .hero-copy>*, .js .hero-media{ opacity:0; animation:heroIn .55s cubic-bezier(.16,1,.3,1) both; }
.js .hero-media           { animation-delay:.10s; }
.js .hero-copy>h1         { animation-delay:.04s; }
.js .hero-copy>.hero-kicker{ animation-delay:.14s; }
.js .hero-copy>p.round    { animation-delay:.22s; }
.js .hero-copy>.btn-pink  { animation:heroInCta .6s cubic-bezier(.16,1,.3,1) both; animation-delay:.30s; }
.js .hero-copy>.btn-ghost { animation-delay:.38s; }
.js .hero-copy>.hero-trust{ animation-delay:.44s; }
.js .hero-copy>.hero-icons{ animation-delay:.50s; }
/* Nach dem Einblenden Animation entfernen → hover/active (translate/scale) frei */
.js .hero-done .hero-copy>*, .js .hero-done .hero-media{ animation:none; opacity:1; }

/* Dezente Deko-Bewegung: der runde Badge schwebt sanft (1 Akzent, GPU-only translate) */
@keyframes heroBadgeFloat{ 0%,100%{translate:0 0;} 50%{translate:0 -7px;} }
.hero-badge{ animation:heroBadgeFloat 4.6s ease-in-out infinite; animation-delay:.9s; }

@media(prefers-reduced-motion:reduce){
  .js .hero-copy>*, .js .hero-media{ animation:none; opacity:1; translate:0 0; scale:1; }
  .hero-badge{ animation:none; }
}

/* ============ Mobile-Hero: Produktfoto above-the-fold (Council 2026-07-04) ============
   Auf dem Handy stand das emotionale Hüpfburg-Foto ganz unten. Jetzt: Foto nach oben
   (order:-1), als breiter Ausschnitt statt Vollquadrat, damit Bild + Headline + CTA
   zusammen in den ersten Screen passen. Abstände gestrafft. Marken-Look bleibt. */
@media(max-width:820px){
  .hero-grid{ gap:16px; align-items:start; }
  .hero-media{ order:-1; }
}
@media(max-width:640px){
  .hero-copy .hero-kicker{ margin-top:8px !important; }
  .hero-copy > p.round{ margin-top:10px !important; }
  .hero-copy > a.btn-pink{ margin-top:16px !important; }
  .hero-icons{ margin-top:18px !important; }
}

/* =====================================================================
   VS-Quiz — interne Review-/Entscheidungsseite fuer Maik
   ===================================================================== */
.vsq-head{background:var(--tinte); padding:12px 0;}
.vsq-head-in{display:flex; align-items:center; gap:12px;}
.vsq-head-logo{height:40px; width:auto;}
.vsq-head-word{height:26px; width:auto;}
.vsq-badge{margin-left:auto; color:var(--tuerkis); font-size:22px; transform:rotate(-3deg);}
.vsq-intro{text-align:center; padding:26px 16px 6px;}
.vsq-intro .kicker{color:var(--pink); font-size:clamp(18px,2.4vw,26px); font-weight:700; display:inline-block; transform:rotate(-2deg);}
.vsq-intro h1{font-family:'Luckiest Guy','Baloo 2',cursive; color:var(--tinte); font-size:clamp(28px,4.6vw,48px); line-height:1; margin:4px 0 0;}
.vsq-intro p.sub{font-family:'Baloo 2',cursive; font-weight:700; color:var(--grau); font-size:clamp(14px,1.7vw,17px); max-width:56ch; margin:10px auto 0;}
.vsq-wrap{max-width:900px; padding-bottom:150px;}

.vsq-q{background:#fff; border:2.5px solid var(--tinte); border-radius:18px; padding:18px 18px 20px; margin:18px 0; box-shadow:5px 6px 0 rgba(20,24,33,.10);}
.vsq-qh{font-family:'Baloo 2',cursive; font-weight:800; font-size:clamp(18px,2.4vw,22px); color:var(--tinte); margin:0; display:flex; align-items:center; gap:10px;}
.vsq-qh b{color:var(--pink);}
.vsq-num{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--tuerkis); color:#fff; font-size:16px; flex:0 0 auto;}
.vsq-qtext{flex:1; min-width:0;}
.vsq-qhint{font-family:'Nunito',sans-serif; font-weight:600; font-size:13px; color:var(--grau); margin:8px 0 0;}

.vsq-opts{display:grid; gap:14px; margin-top:16px;}
.vsq-opts-3{grid-template-columns:repeat(3,1fr);}
.vsq-opts-2{grid-template-columns:repeat(2,1fr);}
.vsq-opt{display:flex; flex-direction:column; gap:10px; text-align:center; background:#fff; border:2.5px solid #E1E9EB; border-radius:16px; padding:12px; font:inherit; color:inherit; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease;}
.vsq-opt:hover{border-color:var(--tuerkis);}
.vsq-opt:active{transform:scale(.98);}
.vsq-opt.sel{border-color:var(--pink); box-shadow:inset 0 0 0 2px var(--pink), 0 6px 16px rgba(236,30,121,.18);}
.vsq-label{font-family:'Baloo 2',cursive; font-weight:800; font-size:14.5px; color:var(--tinte);}
.vsq-label em{font-style:normal; font-weight:700; color:var(--grau); font-size:12.5px;}
.vsq-rec{background:var(--tuerkis); color:#fff !important; padding:1px 8px; border-radius:999px; font-size:11px !important; margin-left:2px;}

.vsq-vis{display:grid; place-items:center; border-radius:12px; overflow:hidden; background:#F4F8F9;}
/* Logo auf DUNKEL zeigen (wie im echten Header — das Schloss ist hell) */
.vsq-vis-logo{aspect-ratio:4/3; padding:16px; gap:10px; background:var(--tinte);}
.vsq-logo-castle{max-height:70px; width:auto; max-width:100%;}
.vsq-logo-word{max-width:80%; height:auto;}
.vsq-logo-castle.solo{max-height:98px;}
.vsq-logo-word.solo{max-width:88%;}
/* "beides": Schloss + Wortmarke nebeneinander (wie im echten Header) */
.vsq-vis-logo.both{display:flex; flex-direction:row; align-items:center; justify-content:center; gap:12px;}
.vsq-vis-logo.both .vsq-logo-castle{max-height:54px;}
.vsq-vis-logo.both .vsq-logo-word{max-width:none; max-height:48px; width:auto;}

/* Hero-Option = echte Seiten-Vorschau (gerendertes JPG aus index.html) */
.vsq-shot{display:block; width:100%; border:2px solid #E1E9EB; border-radius:12px; overflow:hidden; background:#fff;}
.vsq-shot img{display:block; width:100%; height:auto;}

/* Extras-Block: Kontext-Screenshot + zwei Daumen-Reihen (Fotobox, Popcorn) */
.vsq-fbrow{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; flex-wrap:wrap;}
.vsq-fblabel{font-family:'Baloo 2',cursive; font-weight:800; font-size:15px; color:var(--tinte);}
.vsq-fblabel em{font-style:normal; font-weight:700; color:var(--grau); font-size:12.5px;}
.vsq-fbrow .vsq-thumbs{display:flex; gap:10px; margin:0; grid-template-columns:none;}
.vsq-thumb{flex-direction:row; align-items:center; justify-content:center; gap:8px; font-family:'Baloo 2',cursive; font-weight:800; font-size:20px; color:var(--tinte); padding:10px 16px;}
.vsq-thumb span{font-size:13.5px;}

/* Bonus-Bereich (optional, ausdruecklich ueberspringbar) */
.vsq-bonus-head{margin:32px 4px 2px; text-align:center;}
.vsq-bonus-tag{display:inline-block; background:var(--tuerkis); color:#fff; font-family:'Baloo 2',cursive; font-weight:800; font-size:13px; padding:4px 14px; border-radius:999px; transform:rotate(-1.5deg);}
.vsq-q-bonus{border-style:dashed; border-color:#C9DBDE; box-shadow:none;}
.vsq-num-b{background:#C9DBDE; color:var(--tinte);}

/* Produktfoto-Option (beliebteste Huepfburg zuerst) */
.vsq-vis-photo{aspect-ratio:4/3;}
.vsq-vis-photo img{width:100%; height:100%; object-fit:cover; object-position:center 62%;}

/* Farb-Swatch (Hauptknopf-Farbe, beide markenkonform) */
.vsq-swatch{width:40px; height:40px; border-radius:50%; margin:2px auto 0; box-shadow:inset 0 0 0 3px #fff, 0 0 0 2px rgba(20,24,33,.10);}
.vsq-swatch-pink{background:var(--pink);}
.vsq-swatch-tuerkis{background:var(--tuerkis);}

/* Freitext (haeufigste Kundenfrage -> FAQ) */
.vsq-faq{width:100%; box-sizing:border-box; margin-top:12px; border:2.5px solid #E1E9EB; border-radius:12px; padding:12px 14px; font-family:'Nunito',sans-serif; font-weight:600; font-size:14px; color:var(--tinte); resize:vertical; line-height:1.45;}
.vsq-faq:focus{border-color:var(--tuerkis); outline:none;}
.vsq-faq::placeholder{color:#9aa7ab;}


.vsq-ps{margin:22px 4px 0; font-family:'Baloo 2',cursive; font-weight:700; font-size:13.5px; color:var(--tuerkis-tief); background:rgba(37,190,203,.08); border:2px dashed rgba(37,190,203,.35); border-radius:14px; padding:12px 16px; line-height:1.5;}

/* Sende-Leiste: fest am unteren Rand (nie ueber dem Inhalt) */
.vsq-bar{position:fixed; left:0; right:0; bottom:0;}
.vsq-bar-in{grid-template-columns:1fr auto; grid-template-areas:"sum btns" "note note";}
.vsq-sum{grid-area:sum; display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.vsq-sumlbl{font-family:'Baloo 2',cursive; font-weight:700; font-size:11px; color:var(--grau);}
.vsq-pill{font-family:'Baloo 2',cursive; font-weight:800; font-size:12px; color:var(--grau); background:#EEF3F4; border-radius:999px; padding:3px 10px;}
.vsq-pill.on{background:rgba(236,30,121,.12); color:var(--pink-d);}
.vsq-btns{grid-area:btns;}
#vsq-note{grid-area:note; font-family:'Baloo 2',cursive; font-weight:700; font-size:11px; color:var(--grau); margin:0; text-align:center;}
#vsq-toast{position:fixed; left:50%; bottom:130px; transform:translateX(-50%) translateY(10px); background:var(--tinte); color:#fff; padding:11px 18px; border-radius:12px; font-family:'Baloo 2',cursive; font-weight:800; font-size:14px; opacity:0; pointer-events:none; transition:.2s; z-index:60;}
#vsq-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.vsq-foot{padding:22px 0 120px; text-align:center; font-family:'Baloo 2',cursive; font-weight:700; font-size:13px; color:var(--grau);}
.vsq-foot a{color:var(--tuerkis-d);}

@media(max-width:640px){
  .vsq-opts-3{grid-template-columns:1fr;}
  .vsq-opt-hero{flex-direction:row; text-align:left; align-items:center;}
  .vsq-opt-hero .vsq-shot{width:58%; flex:0 0 auto;}
  .vsq-fbrow{justify-content:flex-start;}
  .vsq-fbrow .vsq-thumbs{width:100%;}
  .vsq-fbrow .vsq-thumb{flex:1;}
  .vsq-head-word{height:22px;}
}

/* =========================================================
   Streudeko — verspielte Deko-Assets (global, alle Seiten).
   Layer wird von site.js in <body> injiziert. Fixed, hinter dem
   interaktiven UI (Header z-index:80, Modals 200), pointer-events:none
   -> nie im Weg. Sitzt in den Seitenraendern; auf schmalen Screens
   ausgeblendet (kein Rand -> kein Platz).
   ========================================================= */
body{position:relative;}   /* Referenz: Deko scrollt mit dem Dokument (nicht fixed) */
.mhs-deko{pointer-events:none;}
.mhs-deko img{position:absolute; width:var(--s,40px); height:auto; opacity:var(--o,.85); z-index:0;
  animation:mhs-float var(--d,6s) ease-in-out infinite; will-change:transform;}
@keyframes mhs-float{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg));}
  50%    {transform:translateY(-11px) rotate(var(--r,0deg));}
}
@media(max-width:1180px){ .mhs-deko img.d-edge{display:none;} }
@media(max-width:640px){ .mhs-deko{display:none;} }   /* Mobil: keine Streudeko */
@media(prefers-reduced-motion:reduce){ .mhs-deko img{animation:none;} }

/* Pagehead-Deko: dichte Sterne/Herzchen/Konfetti rund um den Titel jeder Unterseite */
.pagehead{position:relative;}
.pagehead > *:not(.mhs-phdeko){position:relative; z-index:1;}   /* Titel ueber der Deko */
.mhs-phdeko{position:absolute; inset:-14px 0 -6px; pointer-events:none; z-index:0; overflow:hidden;}
.mhs-phdeko img{position:absolute; width:var(--s,26px); height:auto; opacity:.85;
  animation:mhs-float var(--d,5s) ease-in-out infinite; will-change:transform;}
@media(max-width:520px){ .mhs-phdeko{opacity:.55;} }   /* Mobil: dezenter, nicht ganz weg */
@media(prefers-reduced-motion:reduce){ .mhs-phdeko img{animation:none;} }