/* Seestraße 61 — Bausteine
   Tür-Loader, Schlüsselanhänger-Menü, Menü-Overlay, Hero
   Typo: Instrument Sans + Cormorant kursiv für Hervorhebungen */
:root{--ease:cubic-bezier(.76,0,.24,1);--soft:cubic-bezier(.22,1,.36,1)}

/* Typo */
.hl{font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
.hl em,.em{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.005em;color:var(--em)}
.kicker{font-family:'Cinzel',Georgia,serif;font-size:12px;letter-spacing:.35em;color:var(--em)}

/* Loader: Tür öffnet sich */
.loader{background:transparent;opacity:1!important;transition:visibility 0s linear 1.7s}
.door{position:absolute;top:0;bottom:0;width:50.5%;background:var(--door);transition:transform 1.4s var(--ease) .15s}
.door::before{content:"";position:absolute;inset:clamp(20px,5vw,64px);border:1px solid var(--door-line)}
.door::after{content:"";position:absolute;top:18%;bottom:18%;width:1px;background:var(--door-line)}
.door--l{left:0;box-shadow:inset -1px 0 0 rgba(0,0,0,.35)}.door--l::after{right:30%}
.door--r{right:0}.door--r::after{left:30%}
.knob{position:absolute;top:50%;width:14px;height:56px;border-radius:7px;background:linear-gradient(180deg,#D9B874,#7F6232)}
.door--l .knob{right:22px}.door--r .knob{left:22px}
html.is-loaded .door--l{transform:translateX(-101%)}
html.is-loaded .door--r{transform:translateX(101%)}
.plate{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;width:clamp(150px,20vw,220px);aspect-ratio:3/4;border-radius:50%;background:linear-gradient(145deg,#D9B874,#9C7A42);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#1A1917;box-shadow:0 20px 40px rgba(0,0,0,.35),inset 0 0 0 6px rgba(26,25,23,.12);overflow:hidden;transition:opacity .5s,transform .8s var(--soft)}
.plate::after{content:"";position:absolute;inset:-50%;background:linear-gradient(100deg,transparent 45%,rgba(255,255,255,.45) 50%,transparent 55%);transform:translateX(-60%);animation:z-shine 1.8s ease-in-out .3s infinite}
@keyframes z-shine{to{transform:translateX(60%)}}
.plate small{font-family:'Cinzel',Georgia,serif;font-size:11px;letter-spacing:.3em}
.plate b{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:clamp(56px,8vw,84px);line-height:1}
html.is-loaded .plate{opacity:0;transform:scale(.9)}

/* Oben rechts: Schlüsselanhänger (Menü) + Sprachwahl als Gruppe */
.topbar{position:fixed;top:0;right:var(--g);z-index:900;display:flex;align-items:flex-start;gap:clamp(10px,1.6vw,20px)}

/* Schlüsselanhänger = Menü */
.keytag{position:relative;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;transform-origin:top center;animation:z-swing 3.6s ease-in-out infinite alternate}
.keytag:hover{animation-play-state:paused}
@keyframes z-swing{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.keytag__cord{width:1px;height:clamp(24px,5vh,52px);background:var(--kt-cord)}
.keytag__ring{width:16px;height:16px;border:2px solid var(--kt-cord);border-radius:50%;margin-top:-2px}
.keytag__body{margin-top:-4px;width:72px;height:120px;background:var(--kt);border-radius:36px 36px 10px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--kt-fg);box-shadow:0 10px 24px rgba(26,25,23,.22)}
.keytag__body small{font-size:10px;letter-spacing:.2em;font-weight:600;font-family:'Instrument Sans',system-ui,sans-serif}
.keytag__body b{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:32px;line-height:1}
.keytag .close{display:none}
html.menu-open .keytag .close{display:inline}html.menu-open .keytag .open{display:none}

/* Sprachumschalter „| DE | EN |“ (in .topbar) */
.lang{margin-top:calc(var(--g) + 8px);display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:24px;font-family:'Instrument Sans',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;color:rgba(251,248,242,.45);transition:background .5s var(--soft),color .5s var(--soft),box-shadow .5s var(--soft)}
.lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:#FBF8F2;text-decoration:none;transition:color .3s}
.lang a[aria-current]{color:var(--kt)}
.lang a:hover{color:var(--kt)}
html.is-scrolled .lang{background:rgba(251,248,242,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(26,25,23,.08);color:rgba(26,25,23,.3)}
html.is-scrolled .lang a{color:#1A1917}
html.is-scrolled .lang a[aria-current],html.is-scrolled .lang a:hover{color:#7F6232}
html.menu-open .lang{background:transparent;box-shadow:none;color:rgba(251,248,242,.45)}
html.menu-open .lang a{color:#FBF8F2}
html.menu-open .lang a[aria-current],html.menu-open .lang a:hover{color:var(--kt)}

/* Menü-Overlay */
.zmenu{position:fixed;inset:0;z-index:850;background:var(--door);color:#FBF8F2;display:grid;grid-template-columns:1fr 1fr;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s linear .6s}
html.menu-open .zmenu{opacity:1;visibility:visible;transition:opacity .6s}
html.menu-open body{overflow:hidden}
.zmenu__l{padding:calc(var(--g) + 120px) var(--g) var(--g);display:flex;flex-direction:column;justify-content:center;gap:4px}
.zmenu__l a{font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;letter-spacing:-.035em;font-size:clamp(34px,5vw,64px);line-height:1.2;text-decoration:none;color:inherit}
.zmenu__l a:hover em{color:var(--kt)}
.zmenu__l a em{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-style:italic;letter-spacing:0;color:#B5AC9E}
.zmenu__l a b{font-family:'Cinzel',Georgia,serif;font-weight:400;font-size:14px;letter-spacing:0;color:var(--kt);margin-right:18px;vertical-align:middle}
.zmenu__l a.is-active b{text-decoration:underline;text-underline-offset:6px}
.zmenu__r{border-left:1px solid var(--door-line);display:grid;place-items:center;font-family:'Cinzel',Georgia,serif;font-size:clamp(120px,20vw,300px);color:var(--door-line)}

/* Hero */
.zhero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;color:#FBF8F2}
.zhero .media{position:absolute;inset:0}
.zhero .media-fallback::after{left:auto;top:auto;right:var(--g);bottom:calc(var(--g) + 48px);text-align:right}
.zhero__shade{position:absolute;inset:0;background:rgba(26,25,23,.35)}
.zhero__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:var(--g)}
.zhero__plate{width:clamp(140px,16vw,200px);aspect-ratio:3/4;border-radius:50%;border:1px solid var(--kt);display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(26,25,23,.25);backdrop-filter:blur(2px)}
.zhero__plate small{font-family:'Cinzel',Georgia,serif;font-size:11px;letter-spacing:.3em;color:var(--kt)}
.zhero__plate b{font-family:'Cinzel',Georgia,serif;font-weight:400;font-size:clamp(56px,7vw,84px);line-height:1}
.zhero h1{font-size:clamp(46px,7.4vw,124px);max-width:14ch}
.zhero h1 em{color:var(--kt)}
.zhero__row{position:absolute;left:var(--g);right:var(--g);bottom:var(--g);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--cg);font-size:12px;font-weight:500;color:#E6DCCB}
.zhero__row span{border-top:1px solid rgba(251,248,242,.4);padding-top:10px}
.zhero__row a{color:var(--kt);text-decoration:none}

@media (max-width:900px){.zmenu{grid-template-columns:1fr}.zmenu__r{display:none}}
@media (max-width:640px){
  .zhero__row{grid-template-columns:1fr 1fr;row-gap:10px}
  .keytag__cord{height:16px}.keytag__ring{width:12px;height:12px;border-width:1.5px}
  .keytag__body{width:50px;height:84px;border-radius:25px 25px 8px 8px;box-shadow:0 6px 16px rgba(26,25,23,.2)}
  .keytag__body small{font-size:7.5px;letter-spacing:.16em}.keytag__body b{font-size:22px}
}