*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030303;color:#eee7dc;font-family:Georgia,serif}
#entrance{position:fixed;inset:0;z-index:20;background:#000;overflow:hidden;transition:opacity 1.45s ease,visibility 1.45s ease}
#entrance img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;z-index:1}
#enter{position:absolute;left:50%;top:50%;transform:translate(-50%,-15%);width:min(34vw,330px);height:min(40vw,400px);border:0;background:transparent;cursor:pointer;z-index:6}
#enter::before{content:none!important;display:none!important}

.mist,.mist::before,.mist::after{position:absolute;content:"";pointer-events:none;border-radius:50%;filter:blur(36px);mix-blend-mode:screen}
.mist{z-index:3;left:7%;top:20%;width:86%;height:64%;opacity:.08;background:
radial-gradient(ellipse at 20% 45%,rgba(120,120,120,.22),transparent 42%),
radial-gradient(ellipse at 78% 55%,rgba(173,127,69,.18),transparent 38%),
radial-gradient(ellipse at 50% 72%,rgba(95,95,95,.16),transparent 40%);
transition:opacity .7s ease}
.mist::before{left:-8%;top:10%;width:62%;height:58%;background:radial-gradient(ellipse,rgba(145,145,145,.34),rgba(119,93,63,.14) 48%,transparent 72%);opacity:.48}
.mist::after{right:-5%;bottom:2%;width:64%;height:56%;background:radial-gradient(ellipse,rgba(130,130,130,.30),rgba(170,121,63,.14) 48%,transparent 74%);opacity:.44}
#entrance:has(#enter:hover) .mist{opacity:1;animation:mistMain 5.8s ease-in-out infinite alternate}
#entrance:has(#enter:hover) .mist::before{animation:mistLeft 4.7s ease-in-out infinite alternate}
#entrance:has(#enter:hover) .mist::after{animation:mistRight 6.2s ease-in-out infinite alternate}
@keyframes mistMain{0%{transform:translate(-3%,2%) scale(.94)}50%{transform:translate(4%,-2%) scale(1.04)}100%{transform:translate(8%,-5%) scale(1.12)}}
@keyframes mistLeft{0%{transform:translate(-8%,2%) scale(.9)}100%{transform:translate(20%,-7%) scale(1.18)}}
@keyframes mistRight{0%{transform:translate(10%,4%) scale(.96)}100%{transform:translate(-18%,-10%) scale(1.22)}}
#entrance.open .mist{opacity:1;animation:openMist 1.75s ease-out forwards}
#entrance.open .mist::before{animation:openMistLeft 1.7s ease-out forwards}
#entrance.open .mist::after{animation:openMistRight 1.8s ease-out forwards}

#entrance.open::after{content:"";position:absolute;inset:-20%;z-index:5;pointer-events:none;opacity:0;background:
radial-gradient(circle at 50% 53%,rgba(255,248,226,.94) 0 2%,rgba(245,213,153,.72) 5%,rgba(191,137,70,.34) 12%,rgba(60,43,28,.16) 24%,transparent 43%),
radial-gradient(circle at 50% 53%,rgba(196,153,88,.16),transparent 58%);
animation:mysticFlash 1.75s ease-out forwards}
@keyframes openMist{0%{transform:scale(1);opacity:.9}45%{transform:scale(1.18);opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes openMistLeft{0%{transform:translateX(0) scale(1)}100%{transform:translate(34%,-12%) scale(1.55);opacity:0}}
@keyframes openMistRight{0%{transform:translateX(0) scale(1)}100%{transform:translate(-34%,-18%) scale(1.6);opacity:0}}
@keyframes mysticFlash{0%{opacity:0;transform:scale(.7,1)}32%{opacity:.28}60%{opacity:.62;transform:scale(1.05,1.18)}100%{opacity:0;transform:scale(1.55,1.35)}}
#entrance.gone{opacity:0;visibility:hidden;pointer-events:none}
#site{opacity:0;transition:opacity 1.35s ease}#site.show{opacity:1}
header{position:sticky;top:0;z-index:5;padding:22px 6vw;display:flex;justify-content:space-between;align-items:center;background:#050505e8;border-bottom:1px solid #211b14}.brand{display:block;width:clamp(180px,20vw,280px);text-decoration:none}.brand img{display:block;width:100%;height:auto}nav{display:flex;gap:30px}nav a{color:#ddd3c7;text-decoration:none;text-transform:uppercase;letter-spacing:.15em;font-size:.75rem}.hero,main section{width:min(920px,calc(100% - 44px));margin:auto}.hero{min-height:78vh;display:flex;flex-direction:column;justify-content:center}.hero h1,section h2{font-weight:400;margin:.15em 0}.hero h1{font-size:clamp(3.5rem,8vw,7rem)}section h2{font-size:clamp(2.8rem,6vw,5rem)}main section:not(.hero){min-height:65vh;padding:110px 0;border-top:1px solid #181410}section p{max-width:780px;color:#b8b0a5;font-size:1.08rem;line-height:1.9}.gold{color:#bd8d4d!important;text-transform:none}.sig{color:#c89b59;font-style:italic;font-size:1.65em}.contact a,.modal a{color:#d4aa70;text-decoration:none}.contact{font-size:1.4rem}footer{text-align:center;padding:45px;border-top:1px solid #181410}footer button{border:0;background:none;color:#888;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}.modal{display:none;position:fixed;inset:0;z-index:30;background:#000e;place-items:center;padding:22px}.modal.show{display:grid}.modal article{position:relative;width:min(760px,100%);max-height:88vh;overflow:auto;padding:50px;background:#0b0908;border:1px solid #49341f}.modal h2{font-size:2.5rem}.x{position:absolute;right:15px;top:10px;border:0;background:none;color:#c89b59;font-size:2rem;cursor:pointer}
@media(max-width:700px){header{flex-direction:column;gap:14px}nav{gap:13px}nav a{font-size:.62rem}#entrance img{object-fit:cover}#enter{width:58vw;height:65vw}.mist{left:-10%;top:22%;width:120%;height:60%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* Finale Willkommensseite */
.welcome-title{
  color:#bd8d4d!important;
  font-size:clamp(1.1rem,2vw,1.45rem)!important;
  text-transform:uppercase;
  letter-spacing:.28em;
  margin:0 0 28px;
}
.hero h1{
  color:#f4f0ea;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.5rem,8vw,7rem);
}
.wordmark img{display:block;width:100%;height:auto}
.welcome-name{margin:0!important}
.welcome-text,.welcome-there{
  color:#f1ede7!important;
  max-width:760px;
}
.welcome-text{
  font-size:clamp(1.15rem,2vw,1.5rem)!important;
  margin-bottom:0;
}
.welcome-there{
  margin-top:0;
  font-size:clamp(1.25rem,2.2vw,1.7rem)!important;
}
.welcome-signature{
  margin-top:24px;
  width:min(430px,75%);
}
.welcome-signature img{display:block;width:100%;height:auto}
/* Beim Darüberfahren: mehr mystische Nebelschwaden, aber kein Kreis/Lichtpunkt */
#entrance:has(#enter:hover) .mist{
  opacity:1!important;
  filter:blur(32px);
  transform-origin:center;
}
#entrance:has(#enter:hover) .mist::before,
#entrance:has(#enter:hover) .mist::after{opacity:.72!important}
/* Klick-Licht: nur weicher, diffuser Lichtschein – kein runder Mittelpunkt */
#entrance.open::after{
  border-radius:0!important;
  background:
    radial-gradient(ellipse at 50% 55%,
      rgba(255,241,205,.42) 0%,
      rgba(224,177,105,.26) 9%,
      rgba(156,105,55,.12) 23%,
      transparent 48%)!important;
  filter:blur(24px)!important;
}


/* === MOBILE STARTSEITE FIX 20260817 ===
   Nur die Schlüsselloch-Eingangsseite auf kleinen Displays.
   Desktop und restliche Website bleiben unverändert. */
@media (max-width: 700px) {
  #entrance {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  #entrance > img,
  #entrance img.startbild {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  #enter {
    left: 50% !important;
    top: 54% !important;
    width: 52vw !important;
    height: 58vw !important;
    max-width: 280px !important;
    max-height: 310px !important;
    transform: translate(-50%, -50%) !important;
  }

  .mist {
    left: -5% !important;
    top: 20% !important;
    width: 110% !important;
    height: 65% !important;
  }
}

@media (max-width: 390px) {
  #enter {
    top: 55% !important;
    width: 58vw !important;
    height: 62vw !important;
  }
}


/* === INDEX-TEXT FIX 20260817-2 === */
/* Deckt den abgeschnittenen, im Bild eingebrannten Text am unteren Rand ab. */
#entrance::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:10vh;
  min-height:58px;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.92) 38%, #000 72%);
}

/* Neuer echter Text – bleibt auf Desktop und Handy vollständig sichtbar. */
.entrance-prompt{
  position:absolute;
  left:50%;
  bottom:3.2vh;
  z-index:7;
  transform:translateX(-50%);
  margin:0;
  padding:0 18px;
  width:max-content;
  max-width:90vw;
  color:#c89b59;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(.95rem,1.7vw,1.35rem);
  line-height:1.2;
  letter-spacing:.04em;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 0 14px rgba(200,155,89,.12);
  pointer-events:none;
}

@media (max-width:700px){
  #entrance::before{
    height:12vh;
    min-height:72px;
  }

  .entrance-prompt{
    bottom:2.2vh;
    font-size:clamp(.9rem,4.4vw,1.15rem);
    max-width:86vw;
    white-space:normal;
  }
}


/* === MOBILE ONLY FIX 20260817-3 ===
   Desktop bleibt unverändert.
   Auf Mobilgeräten wird der alte, im Bild eingebettete abgeschnittene Text
   abgedeckt und "Entdecke das Geheimnis" näher unter das Schlüsselloch gesetzt. */
@media (max-width:700px){

  /* nur den unteren Bildbereich auf Mobilgeräten sauber abdunkeln */
  #entrance::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:145px;
    z-index:4;
    pointer-events:none;
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.90) 34%,
      #000 48%,
      #000 100%
    );
  }

  .entrance-caption{
    bottom:78px !important;
    z-index:8 !important;
    font-size:.92rem !important;
    letter-spacing:.07em !important;
    white-space:nowrap !important;
  }
}

@media (max-width:390px){
  #entrance::before{
    height:138px;
  }

  .entrance-caption{
    bottom:72px !important;
    font-size:.86rem !important;
  }
}