@font-face{font-family:'Bonhomme Richard';src:url(./fonts/BonhommeRichard-Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Cormorant Infant';src:url(./fonts/CormorantInfant-Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Cormorant Infant';src:url(./fonts/CormorantInfant-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Infant';src:url(./fonts/CormorantInfant-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Infant';src:url(./fonts/CormorantInfant-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant Infant';src:url(./fonts/CormorantInfant-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Infant';src:url(./fonts/CormorantInfant-SemiBoldItalic.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Infant';src:url(./fonts/CormorantInfant-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cormorant Infant';src:url(./fonts/CormorantInfant-BoldItalic.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap}
body{margin:0;background:#E9E7E2;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#1C2620}a:hover{color:#000}
input,textarea{font:inherit}
input::placeholder,textarea::placeholder{color:rgba(28,38,32,.45)}

.if{display:contents}
.if[hidden]{display:none}
[data-h=b]:hover{border-bottom-color:#1C2620!important;color:#1C2620}
[data-h=u]:hover{color:#1C2620;text-decoration-color:#1C2620!important}
[data-f]:focus{border-color:#1C2620!important}

/* Intro: idle → play → zoom → reveal → done (data-intro on <main>) */
#intro{opacity:1}
main[data-intro=reveal] #intro{opacity:0}
#intro-video{transform:scale(1)}
main[data-intro=zoom] #intro-video,main[data-intro=reveal] #intro-video{transform:scale(3.2)}
#intro-glow{opacity:0}
main[data-intro=zoom] #intro-glow,main[data-intro=reveal] #intro-glow{opacity:1}
#intro-text,#intro-hint{opacity:0}
main[data-intro=idle] #intro-text{opacity:1}
main[data-intro=idle] #intro-hint{opacity:.75}
#guest{opacity:0;transition:opacity .6s ease}
#guest.ready{opacity:1}

/* Hero */
#hero-text{color:#1C2620;text-shadow:0 0 18px rgba(247,242,230,.9)}
main.night #hero-text{color:#FFFFFF;text-shadow:0 2px 14px rgba(0,0,0,.45)}
#hero-text>h1{color:#B98A2E;-webkit-text-stroke:.5px currentColor}
main.night #hero-text>h1{color:#E2C27A}
#hero-text>p,#hero-text>h1,#night-toggle{opacity:0}
main.revealed #hero-text>p,main.revealed #hero-text>h1,main.revealed #night-toggle{opacity:1}
#hero-text>div{clip-path:inset(-4px 100% -4px 0)}
main.revealed #hero-text>div{clip-path:inset(-4px 0% -4px 0)}
#night-layer{opacity:0}
main.night #night-layer{opacity:1}
#hero-scrim{background:rgba(0,0,0,0)}
main.night #hero-scrim{background:rgba(18,22,36,.15)}
#night-toggle{pointer-events:none;background:rgba(28,38,32,.35)}
main.revealed #night-toggle{pointer-events:auto}
main.night #night-toggle{background:rgba(28,38,32,.85)}
#night-toggle>div:last-child{background:#fff;color:#B98A2E;transform:translateX(0px)}
main.night #night-toggle>div:last-child{background:#1C2620;color:#fff;transform:translateX(40px)}

/* Vogel-Video: unten rechts (rechts vom Brunnen bis zum Rand) ausgespart, dort liegt ein Logo im Video.
   Sichtbar = alles links von ~71 % ODER alles oberhalb von ~95 %; im Rest scheint das statische Bild durch. */
.cut-logo{
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 69%,transparent 72%),linear-gradient(to bottom,#000 0%,#000 94.6%,transparent 95.6%);
  -webkit-mask-composite:source-over;
  mask-image:linear-gradient(to right,#000 0%,#000 69%,transparent 72%),linear-gradient(to bottom,#000 0%,#000 94.6%,transparent 95.6%);
  mask-composite:add;
}