/* ==========================================================
   KGV Burgloch – Gartenjahr-Design
   ========================================================== */
:root{
  --laube:#1D3A2A;      /* Lauben-/Zaungrün, dunkel */
  --laube-2:#264C37;
  --salbei:#EDF0E3;     /* Seitengrund */
  --salbei-2:#DFE6CF;
  --moos:#557A35;
  --beere:#B8322A;      /* Johannisbeerrot */
  --kapuziner:#EE9620;  /* Kapuzinerkresse */
  --holz:#9C6436;
  --holz-d:#6B4022;
  --papier:#FFFEF7;
  --ink:#1A2A1F;
  --ink-soft:#4A5A4E;
  --emaille:#1F4E8C;

  --f-display:"Caprasimo", "Cooper Black", Georgia, serif;
  --f-body:"Hanken Grotesk", system-ui, sans-serif;
  --f-typed:"Special Elite", "Courier New", monospace;
  --f-hand:"Kalam", "Comic Sans MS", cursive;

  --wrap:1200px;
  --gutter:clamp(16px, 4vw, 40px);
  --radius:14px;
  --shadow:0 1px 0 rgba(0,0,0,.04), 0 10px 30px -12px rgba(29,58,42,.35);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--salbei);color:var(--ink);
  font:400 clamp(16px,1.05vw + 10px,18px)/1.6 var(--f-body);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.08}
p{margin:0 0 .8em}
:focus-visible{outline:3px solid var(--kapuziner);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--laube);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.hand{font-family:var(--f-hand);font-weight:700}

.eyebrow{
  font:600 .78rem/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--moos);margin:0 0 .9rem;display:inline-flex;gap:.8em;align-items:center;
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.eyebrow--light{color:#B9D38E}

.section{padding:clamp(72px,10vw,140px) 0}
.section__head{max-width:720px;margin-bottom:clamp(36px,5vw,64px)}
.section__head h2{font:400 clamp(2.2rem,4.6vw,4rem)/1.02 var(--f-display);color:var(--laube);letter-spacing:-.01em;margin-bottom:.4em}
.section__lead{font-size:1.1em;color:var(--ink-soft);max-width:60ch}

.btn{
  display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.4em;border-radius:999px;
  font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease-spring), background .2s, box-shadow .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--laube);color:#fff;box-shadow:0 6px 0 -1px #0e2117}
.btn--primary:hover{background:var(--laube-2)}
.btn--ghost{border-color:var(--laube);color:var(--laube);background:rgba(255,255,255,.45);backdrop-filter:blur(4px)}
.btn--ghost:hover{background:rgba(255,255,255,.8)}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ==========================================================
   NAV
   ========================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px var(--gutter);transition:background .35s, box-shadow .35s, padding .35s, transform .4s var(--ease-out);
}
.nav.is-solid{background:rgba(237,240,227,.86);backdrop-filter:blur(12px) saturate(1.3);box-shadow:0 1px 0 rgba(29,58,42,.12);padding-block:8px}
.nav.is-hidden{transform:translateY(-110%)}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--laube)}
.nav__brand b{font:400 1.35rem/1 var(--f-display);display:block}
.nav__brand small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:.75}
.castle{width:38px;height:42px;flex:none;transition:transform .5s var(--ease-spring)}
.nav__brand:hover .castle{transform:rotate(-8deg) scale(1.08)}
.nav__links{display:flex;gap:4px;align-items:center}
.nav__links a{
  text-decoration:none;font-weight:600;font-size:.93rem;color:var(--laube);padding:.5em .8em;border-radius:999px;position:relative;
  transition:background .2s;
}
.nav__links a:hover{background:rgba(29,58,42,.08)}
.nav__links a.is-active::after{
  content:"";position:absolute;left:50%;bottom:0;width:14px;height:8px;transform:translateX(-50%);
  background:var(--moos);border-radius:14px 0;rotate:-20deg;
}
.nav__links .nav__cta{background:var(--laube);color:#fff;margin-left:6px}
.nav__links .nav__cta:hover{background:var(--laube-2)}
.nav__burger{display:none;width:46px;height:46px;border:0;background:var(--laube);border-radius:50%;cursor:pointer;position:relative;z-index:2}
.nav__burger span{position:absolute;left:13px;right:13px;height:2px;background:#fff;border-radius:2px;transition:transform .3s, opacity .3s}
.nav__burger span:nth-child(1){top:16px}.nav__burger span:nth-child(2){top:22px}.nav__burger span:nth-child(3){top:28px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:980px){
  .nav__burger{display:block}
  .nav__links{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:6px;background:var(--laube);
    clip-path:circle(0 at calc(100% - 46px) 36px);transition:clip-path .6s var(--ease-out);visibility:hidden;
  }
  .nav__links.is-open{clip-path:circle(150% at calc(100% - 46px) 36px);visibility:visible}
  .nav__links a{color:#fff;font:400 clamp(1.6rem,7vw,2.4rem)/1.2 var(--f-display)}
  .nav__links a:hover{background:rgba(255,255,255,.08)}
  .nav__links .nav__cta{background:var(--kapuziner);color:var(--laube);margin:12px 0 0}
  .nav__links a.is-active::after{display:none}
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative;min-height:max(100svh,680px);overflow:hidden;isolation:isolate;
  --sky-1:#BFD6DA;--sky-2:#F3D3A0;--sun:#F7C65A;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 70%);
  transition:--sky-1 1.2s, --sky-2 1.2s;
}
@property --sky-1{syntax:"<color>";inherits:true;initial-value:#BFD6DA}
@property --sky-2{syntax:"<color>";inherits:true;initial-value:#F3D3A0}
@property --sun{syntax:"<color>";inherits:true;initial-value:#F7C65A}

.hero[data-season="fruehling"]{--sky-1:#C4E2EE;--sky-2:#F6E6EC;--sun:#FCE38A;
  --hill:#B5CE8C;--trees:#7FA858;--trees2:#9CC070;--dot:#F7BED0;--meadow:#A3C468;--hedge:#4E7A3A;--lawn:#8DBA58;--lawn2:#79A84B;--snowcap:transparent}
.hero[data-season="sommer"]{--sky-1:#86C0E6;--sky-2:#DFF0F1;--sun:#FFE07A;
  --hill:#93BB72;--trees:#477A38;--trees2:#5E9142;--dot:#F2D04B;--meadow:#87B255;--hedge:#2E5A2D;--lawn:#6EA145;--lawn2:#5E9139;--snowcap:transparent}
.hero[data-season="herbst"]{--sky-1:#BCD3D6;--sky-2:#F4CF97;--sun:#F6B85A;
  --hill:#C6A766;--trees:#B5652E;--trees2:#D3912F;--dot:#9C3B22;--meadow:#A8A158;--hedge:#53702F;--lawn:#82913F;--lawn2:#6F7F35;--snowcap:transparent}
.hero[data-season="winter"]{--sky-1:#B9C6D2;--sky-2:#EEF1F4;--sun:#FFF6DC;
  --hill:#DCE4EA;--trees:#6A7C76;--trees2:#86968F;--dot:#FFFFFF;--meadow:#E4EBEF;--hedge:#53665A;--lawn:#8E9E86;--lawn2:#B4C1AC;--snowcap:#fff}

.hero__scene{position:absolute;left:0;right:0;bottom:0;top:12%;width:100%;height:88%;z-index:0}
.hero__scene *{transition:fill 1.2s ease}
.hero__scene .layer{will-change:transform}
.hero__leaves{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

.hero__content{
  position:relative;z-index:4;max-width:var(--wrap);margin:0 auto;
  padding:clamp(96px,13vh,150px) var(--gutter) 0;
}
.hero__eyebrow{color:var(--laube);flex-wrap:wrap}
.hero__eyebrow span+span{opacity:.7}
.hero__eyebrow span+span::before{content:"·";margin-right:.8em}
.hero__title{
  font:400 clamp(4rem,13vw,11rem)/.86 var(--f-display);color:var(--laube);letter-spacing:-.02em;
  margin:.05em 0 .12em;text-shadow:0 2px 0 rgba(255,255,255,.35);
}
.sprout{display:inline-block}
.sprout .ch{display:inline-block;transform-origin:50% 100%;animation:sprout 1.1s var(--ease-spring) both;animation-delay:calc(var(--i) * 70ms + .25s)}
.sprout .ch:nth-child(odd){--rot:-4deg}.sprout .ch:nth-child(even){--rot:3deg}
@keyframes sprout{from{transform:translateY(60%) scaleY(.2) rotate(var(--rot,0));opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
.sprout .ch:hover{animation:wiggle .6s ease}
@keyframes wiggle{25%{transform:rotate(-6deg) translateY(-6px)}60%{transform:rotate(4deg)}100%{transform:none}}

.hero__claim{font:400 clamp(1.3rem,2.6vw,2.1rem)/1.15 var(--f-display);color:var(--laube);margin-bottom:.6em}
.hero__claim em{font-style:normal;color:var(--beere)}
.hero__lead{max-width:44ch;font-size:1.08em;color:#1f3326;font-weight:600;
  text-shadow:0 0 2px var(--sky-2),0 0 8px var(--sky-2),0 0 16px var(--sky-2),0 0 26px var(--sky-2)}
.hero__claim,.hero__eyebrow{text-shadow:0 0 10px var(--sky-2),0 0 22px var(--sky-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em}
.hero__content>*{animation:fadeUp 1s var(--ease-out) both}
.hero__eyebrow{animation-delay:.1s}
.hero__claim{animation-delay:.8s}.hero__lead{animation-delay:.95s}.hero__actions{animation-delay:1.1s}
.hero__title{animation:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero__tools{
  position:absolute;z-index:6;left:0;right:0;bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:0 var(--gutter);max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;flex-wrap:wrap;
  pointer-events:none;
}
.hero__tools>*{pointer-events:auto}
.seasons{display:flex;background:rgba(255,254,247,.78);backdrop-filter:blur(8px);border-radius:999px;padding:4px;box-shadow:var(--shadow)}
.seasons button{border:0;background:none;padding:.5em .95em;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer;color:var(--laube);transition:background .25s,color .25s}
.seasons button[aria-checked="true"]{background:var(--laube);color:#fff}
.seasons button:not([aria-checked="true"]):hover{background:rgba(29,58,42,.08)}
.rake-btn{
  display:inline-flex;align-items:center;gap:.5em;border:0;cursor:pointer;
  background:var(--kapuziner);color:var(--laube);font-weight:700;padding:.7em 1.2em .7em .9em;border-radius:999px;
  box-shadow:0 5px 0 -1px #a5620c, var(--shadow);transition:transform .25s var(--ease-spring), opacity .3s;
}
.rake-btn svg{width:26px;height:26px}
.rake-btn:hover{transform:translateY(-2px) rotate(-2deg)}
.rake-btn:active{transform:translateY(2px)}
.rake-btn[hidden]{display:none}
.rake-btn:disabled{opacity:.6;cursor:progress}

.hero__hint{
  position:absolute;z-index:6;right:var(--gutter);bottom:84px;margin:0;font:700 1.05rem/1.2 var(--f-hand);color:var(--laube);
  transform:rotate(-4deg);opacity:0;transition:opacity .6s;pointer-events:none;
}
.hero__hint.is-on{opacity:.85}
.hero__hint::after{content:"↘";margin-left:.3em}

.rake{position:absolute;z-index:5;bottom:2px;left:0;width:clamp(150px,18vw,230px);pointer-events:none;opacity:0;transform:translateX(-120%)}
.rake svg{width:100%;height:auto;display:block}

.toast{
  position:absolute;z-index:7;left:50%;bottom:86px;transform:translate(-50%,20px);opacity:0;
  background:var(--papier);color:var(--laube);padding:.7em 1.2em;border-radius:12px;font-weight:600;box-shadow:var(--shadow);
  transition:opacity .4s, transform .5s var(--ease-spring);pointer-events:none;max-width:min(92vw,520px);text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  .hero{min-height:0;padding-bottom:300px}
  .hero__scene{top:auto;height:340px}
  .hero__content{padding-top:96px}
  .hero__eyebrow span+span{display:none}
  .hero__lead{font-size:1rem}
  .hero__actions .btn{padding:.75em 1.15em}
  .hero__tools{bottom:12px}
  .seasons button{padding:.45em .6em;font-size:.78rem}
  .hero__hint{display:none}
  .rake-btn span{font-size:.9rem}
}

/* flags in scene */
.flag{transform-box:fill-box;transform-origin:0 50%;animation:flag 2.6s ease-in-out infinite}
@keyframes flag{0%,100%{transform:skewY(0) scaleX(1)}25%{transform:skewY(5deg) scaleX(.93)}50%{transform:skewY(-3deg) scaleX(1)}75%{transform:skewY(4deg) scaleX(.95)}}
.cloud{animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-300px)}to{transform:translateX(1900px)}}

/* ==========================================================
   SCHAUKASTEN
   ========================================================== */
.board-section{background:
  radial-gradient(1200px 400px at 80% 0%, rgba(85,122,53,.10), transparent 70%), var(--salbei)}
.board{
  position:relative;border-radius:18px;padding:clamp(18px,3vw,34px);
  background:
    radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.4px) 0 0/7px 7px,
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px) 3px 4px/9px 9px,
    linear-gradient(160deg,#C9A06A,#B4864F);
  box-shadow:inset 0 0 0 clamp(10px,1.6vw,16px) var(--holz-d), inset 0 0 0 calc(clamp(10px,1.6vw,16px) + 3px) #4a2b15, inset 0 10px 30px rgba(0,0,0,.35), 0 30px 60px -30px rgba(29,58,42,.6);
}
.board::before{ /* Holzmaserung am Rahmen */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding:clamp(10px,1.6vw,16px);
}
.board__glass{
  position:absolute;inset:clamp(10px,1.6vw,16px);border-radius:6px;pointer-events:none;z-index:3;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 42%, transparent 46%, transparent 60%, rgba(255,255,255,.12) 66%, transparent 70%);
  background-size:250% 100%;background-position:var(--glare,80%) 0;transition:background-position .2s linear;
}
.board__grid{
  position:relative;display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:clamp(18px,3vw,40px);
  padding:clamp(16px,2.6vw,34px);align-items:start;
}
.board__col{display:grid;gap:clamp(18px,3vw,34px)}
@media (max-width:980px){.board__grid{grid-template-columns:1fr 1fr}.board__col--side{grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:start}}
@media (max-width:640px){.board__grid,.board__col{grid-template-columns:1fr}}

.note{
  position:relative;display:block;background:var(--papier);color:var(--ink);padding:26px 22px 20px;
  transform:rotate(var(--r,0deg));box-shadow:0 2px 2px rgba(0,0,0,.12), 0 14px 24px -12px rgba(0,0,0,.45);
  transition:transform .45s var(--ease-spring), box-shadow .45s;text-decoration:none;
}
.note:hover,.note:focus-within{transform:rotate(0deg) translateY(-6px) scale(1.02);box-shadow:0 2px 2px rgba(0,0,0,.1), 0 26px 40px -16px rgba(0,0,0,.55);z-index:2}
.note h3{font-size:1.05rem;margin-bottom:.6em}
.note p{font-size:.98rem}
.note--typed{font-family:var(--f-typed);background:
  repeating-linear-gradient(180deg, transparent 0 27px, rgba(31,78,140,.13) 27px 28px), var(--papier);line-height:28px;padding-top:30px}
.note--typed h3{font:400 1.05rem/28px var(--f-typed)}
.note--typed p{font-size:.95rem;line-height:28px;margin-bottom:14px}
.note__sign{font-family:var(--f-hand);font-size:1.15rem !important;font-weight:700;color:var(--emaille)}
.note__stamp{
  display:inline-block;font:400 .9rem/1 var(--f-typed);color:var(--emaille);border:2px solid currentColor;padding:.35em .6em;
  border-radius:4px;transform:rotate(-4deg);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;opacity:.85;
}
.note__stamp--red{color:var(--beere)}
.note--yellow{background:#FBE68B;font-family:var(--f-body)}
.note--yellow .hand{font-size:1.15rem;color:var(--laube)}
.note--polaroid{padding:12px 12px 18px;background:#fff}
.polaroid__img{display:block;padding:0;border:0;background:#222;cursor:zoom-in;width:100%;aspect-ratio:4/4.2;overflow:hidden}
.polaroid__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.polaroid__img:hover img{transform:scale(1.06)}
.note--polaroid h3{font:700 1.5rem/1.1 var(--f-hand);color:var(--beere);margin:.5em 4px .3em}
.note--polaroid p{margin:0 4px;font-size:.95rem}
.note--poster{padding:10px;background:#fff}
.note--poster img{width:100%;height:auto}
.note--map{padding:10px 10px 14px;background:#fff;max-width:300px;justify-self:center}
.note__map-img{display:block;aspect-ratio:16/10;overflow:hidden}
.note__map-img img{width:100%;height:100%;object-fit:cover;object-position:40% 45%}
.note--map .hand{display:block;text-align:center;color:var(--beere);font-size:1.15rem;padding-top:8px}
.note__poster-label{display:block;font:700 1.15rem var(--f-hand);color:var(--laube);text-align:center;padding-top:8px}

.pin{
  position:absolute;top:-9px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%, #ff8a7f, var(--beere) 55%, #6d1712);
  box-shadow:2px 5px 5px -1px rgba(0,0,0,.45);
}
.pin::after{content:"";position:absolute;left:9px;top:16px;width:3px;height:6px;background:#9aa;border-radius:2px;opacity:.6}
.pin--blue{background:radial-gradient(circle at 35% 30%, #9cc6ff, var(--emaille) 55%, #0c2850)}
.pin--green{background:radial-gradient(circle at 35% 30%, #c6ef93, var(--moos) 55%, #24400f)}

/* ==========================================================
   GARTENFEST
   ========================================================== */
.fest{
  position:relative;overflow:hidden;color:#EAF1DE;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(238,150,32,.18), transparent 70%),
    radial-gradient(700px 400px at 90% 30%, rgba(247,198,90,.12), transparent 70%),
    linear-gradient(180deg,#142B20,#1D3A2A 60%,#22432F);
  padding:clamp(190px,22vw,260px) 0 clamp(120px,12vw,170px);
}
.lampions{position:absolute;top:0;left:0;width:100%;height:clamp(170px,18vw,260px)}
.lampion{transform-box:view-box;animation:swing var(--d,3.4s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
@keyframes swing{from{transform:rotate(calc(var(--a,4deg) * -1))}to{transform:rotate(var(--a,4deg))}}
.lampion .glow{animation:flicker 2.2s ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
@keyframes flicker{from{opacity:.55}to{opacity:.95}}

.fest__wrap{display:grid;grid-template-columns:1.2fr 1fr .62fr;gap:clamp(24px,4vw,56px);align-items:start;position:relative;z-index:2}
@media (max-width:1060px){.fest__wrap{grid-template-columns:1fr 1fr}.fest__intro{grid-column:1/-1}}
@media (max-width:640px){.fest__wrap{grid-template-columns:1fr}}
.fest h2{font:400 clamp(2.4rem,5vw,4.4rem)/1 var(--f-display);color:#fff;margin-bottom:.25em}
.fest__date{font:400 clamp(1.6rem,3vw,2.4rem)/1 var(--f-display);color:var(--kapuziner);margin-bottom:.5em}
.fest__date span{color:#FBE68B}
.fest__status{
  display:inline-flex;align-items:center;gap:.6em;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:.5em 1em;border-radius:999px;margin-bottom:1.2em;
}
.fest__status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--kapuziner);box-shadow:0 0 0 0 rgba(238,150,32,.6);animation:pulse 2s infinite}
@keyframes pulse{to{box-shadow:0 0 0 12px rgba(238,150,32,0)}}
.fest__lead{font-size:1.1em;max-width:48ch}
.fest__fact{font-family:var(--f-hand);font-size:1.15rem;color:#FBE68B;max-width:44ch;transform:rotate(-1deg);margin-top:1.2em}
.fest__fact::before{content:"✶ "}

.programm{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.day{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:18px 20px;transition:background .3s, transform .3s var(--ease-out)}
.day:hover{background:rgba(255,255,255,.1);transform:translateX(6px)}
.day h3{font:400 1.45rem/1 var(--f-display);color:#fff;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6em}
.day h3 small{font:600 .8rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:#B9D38E}
.day ul{list-style:none;margin:0;padding:0;display:grid;gap:.35em}
.day li{display:grid;grid-template-columns:5.6em 1fr;gap:.6em}
.day time{color:var(--kapuziner);font-weight:700;font-variant-numeric:tabular-nums}
.day em{font-style:normal;background:var(--beere);color:#fff;font-size:.72em;padding:.15em .5em;border-radius:4px;text-transform:uppercase;letter-spacing:.08em;vertical-align:2px}

.fest__poster{position:relative;border:0;padding:8px;background:#fff;cursor:zoom-in;transform:rotate(2.5deg);box-shadow:0 30px 50px -20px #000;transition:transform .5s var(--ease-spring)}
.fest__poster:hover{transform:rotate(0) scale(1.03)}
.fest__poster span{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%) rotate(-3deg);background:var(--kapuziner);color:var(--laube);font:700 1rem var(--f-hand);padding:.2em .8em;border-radius:6px;white-space:nowrap}
@media (max-width:640px){.fest__poster{max-width:320px;margin:0 auto}}

.train{position:absolute;left:0;bottom:22px;width:clamp(240px,28vw,380px);height:auto;opacity:.95;animation:choo 26s linear infinite}
@keyframes choo{from{transform:translateX(-110%)}to{transform:translateX(calc(100vw + 10%))}}
.fest::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:4px;background:repeating-linear-gradient(90deg,#9C6436 0 14px,transparent 14px 26px);opacity:.6}

/* ==========================================================
   IHR GARTEN – Plan
   ========================================================== */
.plot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.plot{grid-template-columns:1fr}}
.plot__map{position:relative;margin:0;background:var(--papier);border-radius:20px;padding:clamp(14px,2vw,26px);box-shadow:var(--shadow);
  background-image:linear-gradient(rgba(31,78,140,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,78,140,.07) 1px,transparent 1px);background-size:20px 20px}
.plot__map svg{width:100%;height:auto;display:block;overflow:visible}
.zone{transition:opacity .35s, filter .35s;cursor:pointer}
.plot.has-focus .zone{opacity:.28;filter:grayscale(.6)}
.plot.has-focus .zone.is-on{opacity:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.plot__area{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);background:var(--papier);padding:0 .6em;font:400 1.2rem var(--f-display);color:var(--laube)}
.plot__area span{font:600 .75rem var(--f-body);text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.plot__tip{
  position:absolute;pointer-events:none;background:var(--laube);color:#fff;padding:.5em .8em;border-radius:10px;font-size:.88rem;font-weight:600;
  opacity:0;transform:translate(-50%,-120%);transition:opacity .2s;white-space:nowrap;
}
.plot__tip.is-on{opacity:1}

.legend{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:6px}
.legend li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background .2s, transform .3s var(--ease-out)}
.legend li:hover,.legend li.is-on,.legend li:focus-visible{background:var(--papier);transform:translateX(6px);box-shadow:var(--shadow)}
.legend i{width:22px;height:22px;border-radius:6px;background:var(--c)}
.legend b{font-weight:700}
.legend span{color:var(--ink-soft);font-size:.92rem;text-align:right}
@media (max-width:480px){.legend li{grid-template-columns:22px 1fr}.legend span{grid-column:2;text-align:left}}

.ledger{background:var(--papier);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);position:relative;
  background-image:linear-gradient(90deg,transparent 52px,rgba(184,50,42,.35) 52px 54px,transparent 54px)}
.ledger h3{font:400 1.45rem var(--f-display);color:var(--laube);margin-bottom:.6em;padding-left:44px}
.ledger dl{margin:0;display:grid;gap:0}
.ledger dl>div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0 10px 44px;border-top:1px dashed rgba(29,58,42,.2)}
.ledger dt{font-family:var(--f-typed);color:var(--emaille);font-size:.92rem}
.ledger dd{margin:0}
.ledger dd b{background:linear-gradient(transparent 55%, rgba(238,150,32,.45) 55%)}
@media (max-width:480px){.ledger dl>div{grid-template-columns:1fr;gap:2px}}

.steps-wrap{margin-top:clamp(56px,8vw,100px)}
.steps__title{font:400 clamp(1.6rem,3vw,2.3rem) var(--f-display);color:var(--laube);margin-bottom:1.4em}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px);position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:46px;height:14px;border-radius:8px;
  background:repeating-linear-gradient(90deg,#8B5E3C 0 10px,#7a5233 10px 20px);opacity:.35}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{position:relative;padding-top:4px}
.stake{
  position:relative;display:grid;place-items:center;width:64px;height:76px;margin-bottom:14px;
  font:400 1.8rem var(--f-display);color:var(--laube);background:#E7C9A0;
  clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);transition:transform .45s var(--ease-spring);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.08);
}
.steps li:hover .stake{transform:rotate(-8deg) translateY(-6px)}
.steps b{display:block;font-size:1.15rem;margin-bottom:.3em}
.steps p{color:var(--ink-soft);font-size:.97rem}
.steps__note{margin-top:28px;padding:16px 20px;border-left:4px solid var(--moos);background:rgba(85,122,53,.08);border-radius:0 12px 12px 0}

/* ==========================================================
   CHRONIK – Ranke
   ========================================================== */
.plot-section{padding-bottom:clamp(40px,5vw,70px)}
.chronik{background:linear-gradient(180deg,var(--salbei),var(--salbei-2))}
.vine{position:relative}
.vine__svg{position:absolute;left:50%;top:0;width:120px;height:100%;transform:translateX(-50%);overflow:visible;pointer-events:none}
.vine__svg path{fill:none;stroke:var(--moos);stroke-width:5;stroke-linecap:round}
.vine__svg .vleaf{fill:var(--moos);transform-box:view-box;transform:scale(0);transition:transform .8s var(--ease-spring)}
.vine__svg .vleaf.is-in{transform:scale(1)}
.vine__svg .vleaf.alt{fill:#7FA858}
.vine__svg .vbloom{transform-box:fill-box;transform-origin:center;transform:scale(0) rotate(-90deg);transition:transform 1s var(--ease-spring) .2s}
.vine__svg .vbloom.is-in{transform:scale(1) rotate(0)}
.vine__list{list-style:none;margin:0;padding:0;position:relative}
.ev{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;min-height:120px;padding:10px 0}
.ev__year{font:400 clamp(2rem,4vw,3.4rem)/1 var(--f-display);color:var(--laube);text-align:right;grid-column:1;padding-right:10px;
  opacity:.25;transition:opacity .8s, transform .8s var(--ease-out), color .8s;transform:translateX(-14px)}
.ev__body{grid-column:3;background:var(--papier);padding:16px 20px;border-radius:14px;box-shadow:var(--shadow);max-width:440px;
  opacity:0;transform:translateX(24px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.ev__body p{margin:0}
.ev:nth-child(even) .ev__year{grid-column:3;grid-row:1;text-align:left;padding:0 0 0 10px;transform:translateX(14px)}
.ev:nth-child(even) .ev__body{grid-column:1;grid-row:1;justify-self:end;transform:translateX(-24px)}
.ev.is-in .ev__year{opacity:1;transform:none}
.ev.is-in .ev__body{opacity:1;transform:none}
.ev--big .ev__year{color:var(--beere);font-size:clamp(2.6rem,5.5vw,4.6rem)}
.ev--big .ev__body{background:var(--laube);color:#EAF1DE}
.ev--now .ev__body{background:#FBE68B}
@media (max-width:760px){
  .vine__svg{left:28px}
  .ev,.ev:nth-child(even){grid-template-columns:62px 1fr;gap:0 4px}
  .ev .ev__year,.ev:nth-child(even) .ev__year{grid-column:2;grid-row:1;text-align:left;padding:0 0 6px;font-size:2rem;transform:translateY(10px)}
  .ev .ev__body,.ev:nth-child(even) .ev__body{grid-column:2;grid-row:2;justify-self:stretch;transform:translateY(16px)}
  .ev--big .ev__year{font-size:2.4rem}
}

/* ==========================================================
   GALERIE + GIESSKANNE
   ========================================================== */
.gallery-section{position:relative;padding-bottom:0}
.beds{columns:4 240px;column-gap:18px}
.plant{break-inside:avoid;margin:0 0 14px;padding-bottom:14px;position:relative;display:inline-block;width:100%}
.plant button{display:block;width:100%;padding:0;border:0;background:#2a3a2f;border-radius:14px;overflow:hidden;cursor:zoom-in}
.plant img{width:100%;height:auto;filter:saturate(.12) sepia(.25) brightness(.95) contrast(.95);transform:scale(1.02);
  transition:filter 1.4s var(--ease-out), transform 1.4s var(--ease-out)}
.plant.is-watered img{filter:none;transform:scale(1)}
.plant button:hover img{transform:scale(1.05)}
.label{
  position:absolute;left:14px;bottom:0;z-index:2;background:#E7C9A0;color:var(--laube);font:700 1.05rem/1 var(--f-hand);
  padding:.45em .8em .35em;border-radius:3px;box-shadow:0 6px 12px -6px rgba(0,0,0,.4);transform:rotate(-3deg);
  transition:transform .5s var(--ease-spring);
}
.plant:nth-child(3n) .label{transform:rotate(2deg)}
.plant.is-watered .label{animation:pop .6s var(--ease-spring)}
@keyframes pop{40%{transform:rotate(-6deg) scale(1.15)}}
.label::after{content:"";position:absolute;left:50%;top:100%;width:6px;height:12px;margin-left:-3px;background:#C9A97E}

.can{position:fixed;left:0;top:0;z-index:60;width:96px;pointer-events:none;opacity:0;transition:opacity .25s;margin:-38px 0 0 -110px}
.can svg{width:100%;height:auto;display:block;transform-origin:85% 30%;transform:rotate(var(--tilt,0deg));transition:transform .3s var(--ease-out)}
.can.is-on{opacity:1}
.drop{position:fixed;z-index:59;width:5px;height:9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#5B9BD5;pointer-events:none;animation:drop .7s cubic-bezier(.5,0,1,1) forwards}
@keyframes drop{to{transform:translate(var(--dx,0),70px);opacity:0}}
@media (hover:hover) and (pointer:fine){.beds.can-active,.beds.can-active button{cursor:none}}
.only-pointer{display:none}
@media (hover:hover) and (pointer:fine){.only-pointer{display:inline}}

/* Flaggen */
.flags{margin-top:clamp(70px,9vw,120px);padding:clamp(40px,5vw,60px) 0;background:var(--laube);color:#EAF1DE;overflow:hidden}
.flags__title{max-width:var(--wrap);margin:0 auto 26px;padding:0 var(--gutter);font:400 clamp(1.4rem,2.6vw,2rem) var(--f-display);display:flex;gap:1em;align-items:center;flex-wrap:wrap}
.flags__title .eyebrow{color:#B9D38E;margin:0;font-family:var(--f-body)}
.flags__track{display:flex;gap:16px;width:max-content;animation:marquee 60s linear infinite}
.flags:hover .flags__track{animation-play-state:paused}
.flags__track img{height:clamp(150px,18vw,220px);width:auto;border-radius:12px;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ==========================================================
   MENSCHEN
   ========================================================== */
.people__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,32px)}
@media (max-width:980px){.people__grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.people__grid{grid-template-columns:1fr}}
.person{position:relative;background:var(--papier);border-radius:18px;padding:14px 14px 22px;box-shadow:var(--shadow);transition:transform .5s var(--ease-spring)}
.person:hover{transform:translateY(-8px) rotate(-1deg)}
.person:nth-child(2){transition-delay:.06s}.person:nth-child(3){transition-delay:.12s}.person:nth-child(4){transition-delay:.18s}
.person__photo{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--salbei-2);margin-bottom:16px}
.person__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .8s var(--ease-out)}
.person:hover .person__photo img{transform:scale(1.05)}
.person h3{font:400 1.35rem var(--f-display);color:var(--laube);padding:0 6px}
.person p{color:var(--ink-soft);margin:.3em 6px 0;font-size:.95rem}
.plate{
  position:absolute;right:16px;top:-12px;z-index:2;
  display:grid;place-items:center;min-width:64px;height:48px;padding:0 10px;transform:rotate(4deg);
  transition:transform .5s var(--ease-spring);
  font:700 1.6rem/1 var(--f-body);color:#fff;background:var(--emaille);border-radius:8px;
  box-shadow:inset 0 0 0 3px var(--emaille), inset 0 0 0 5px #fff, 0 6px 14px -6px rgba(0,0,0,.6);
}
.person:hover .plate{transform:rotate(-6deg) scale(1.08)}
.plate--word{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;background:var(--beere);box-shadow:inset 0 0 0 3px var(--beere), inset 0 0 0 5px #fff, 0 6px 14px -6px rgba(0,0,0,.6);min-width:auto;padding:0 14px}

/* ==========================================================
   VEREINSHAUS
   ========================================================== */
.haus{background:linear-gradient(180deg,#2B5236,var(--laube));color:#EAF1DE;padding:clamp(72px,9vw,120px) 0;overflow:hidden}
.haus__wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:860px){.haus__wrap{grid-template-columns:1fr}}
.haus h2{font:400 clamp(2.4rem,5vw,4.2rem)/1 var(--f-display);color:#fff;margin-bottom:.4em}
.haus__card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:18px 22px;margin:1.2em 0}
.haus__card p{margin:.15em 0}
.haus__card a{color:var(--kapuziner);font-weight:700;font-size:1.25em;text-decoration:none}
.haus__card a:hover{text-decoration:underline}
.haus__note{font-size:.92rem;opacity:.8}
.haus__art{width:100%;height:auto}
.haus__art .lamp-glow{animation:flicker 3s ease-in-out infinite alternate}

/* ==========================================================
   PARTNER
   ========================================================== */
.partner__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.partner__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.partner__grid{grid-template-columns:1fr}}
.pcard{background:var(--papier);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .4s var(--ease-spring)}
.pcard:hover{transform:translateY(-6px)}
.pcard img{height:64px;width:auto;max-width:100%;object-fit:contain;margin-bottom:16px;mix-blend-mode:multiply}
.pcard h3{font-size:1.05rem;margin-bottom:.5em}
.pcard p{font-size:.92rem;color:var(--ink-soft);margin-bottom:.4em}
.pcard a{color:var(--laube);font-weight:700;text-decoration:none}
.pcard a:hover{text-decoration:underline}

/* ==========================================================
   KONTAKT
   ========================================================== */
.kontakt{background:var(--salbei-2);padding-bottom:clamp(140px,16vw,220px)}
.kontakt__wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media (max-width:860px){.kontakt__wrap{grid-template-columns:1fr}}
.kontakt h2{font:400 clamp(2.2rem,4.4vw,3.6rem)/1.02 var(--f-display);color:var(--laube);margin-bottom:.4em}
.gate{
  font-style:normal;margin-top:28px;background:var(--laube);color:#EAF1DE;border-radius:18px 18px 6px 6px;padding:26px 26px 22px;position:relative;
  box-shadow:0 20px 40px -20px rgba(29,58,42,.7);font-size:1.1rem;line-height:1.5;
}
.gate::before{ /* Jägerzaun-Kante */
  content:"";position:absolute;left:12px;right:12px;top:-18px;height:20px;
  background:linear-gradient(135deg,transparent 7px,var(--holz) 7px 11px,transparent 11px) 0 0/18px 20px repeat-x,
             linear-gradient(225deg,transparent 7px,var(--holz) 7px 11px,transparent 11px) 0 0/18px 20px repeat-x;
}
.gate__title{display:block;font:400 1.5rem var(--f-display);color:#fff;margin-bottom:.3em}
.gate__links{display:grid;gap:8px;margin-top:18px}
.gate__links a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.07);transition:background .2s, transform .3s var(--ease-out);word-break:break-word}
.gate__links a:hover{background:rgba(255,255,255,.15);transform:translateX(4px)}
.gate__links svg{width:20px;height:20px;fill:var(--kapuziner);flex:none}
.map{display:grid;gap:14px;justify-items:start}
.map__img{padding:8px;border:0;background:#fff;border-radius:16px;box-shadow:var(--shadow);cursor:zoom-in;transform:rotate(-1.5deg);transition:transform .5s var(--ease-spring);width:100%}
.map__img:hover{transform:rotate(0) scale(1.01)}
.map__img img{border-radius:10px;width:100%;height:auto}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{position:relative;background:var(--laube);color:#C9D8BD;padding:40px 0 34px}
.sunflowers{position:absolute;left:0;right:0;bottom:100%;width:100%;height:clamp(140px,14vw,220px);pointer-events:none}
.sunflower .stem{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1.4s var(--ease-out)}
.sunflower .head{transform-box:fill-box;transform-origin:center;transform:scale(0) rotate(-120deg);transition:transform 1.1s var(--ease-spring)}
.sunflowers.is-in .stem{transform:scaleY(1)}
.sunflowers.is-in .head{transform:scale(1) rotate(0)}
.sunflower .sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2.5deg)}}
.footer__wrap{display:grid;grid-template-columns:1fr 1.4fr auto;gap:30px;align-items:end;font-size:.92rem}
@media (max-width:860px){.footer__wrap{grid-template-columns:1fr}}
.footer__brand{display:flex;gap:14px;align-items:center}
.footer__brand b{color:#fff}
.castle--lg{width:64px;height:70px}
.footer__imp h2{font:600 .78rem var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#B9D38E;margin-bottom:.6em}
.footer__imp a{color:#fff}
.footer__bye{font-size:1.5rem;color:var(--kapuziner);transform:rotate(-3deg);margin:0}

/* ==========================================================
   LIGHTBOX
   ========================================================== */
.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,1100px);max-height:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(14,27,20,.86);backdrop-filter:blur(6px)}
.lightbox[open]{animation:lbIn .45s var(--ease-spring)}
@keyframes lbIn{from{opacity:0;transform:scale(.92) rotate(-1.5deg)}}
.lightbox figure{margin:0;background:#fff;padding:10px 10px 14px;border-radius:6px}
.lightbox img{max-height:80vh;width:auto;max-width:100%;margin:0 auto;border-radius:3px}
.lightbox figcaption{font:700 1.2rem var(--f-hand);color:var(--laube);text-align:center;padding-top:8px}
.lightbox__close{position:absolute;top:-18px;right:-14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--kapuziner);color:var(--laube);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:var(--shadow)}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .flags__track{animation:none;overflow-x:auto;width:auto}
  .train{display:none}
  .reveal{opacity:1;transform:none}
}