/* Türhänger auf den Startseiten: „Bitte stören“, führt zur Hotel-Landingpage.
   Hängt rechts oben unter der Navigation, pendelt einmal beim Laden und beim Hover. */

.dh{position:absolute;z-index:5;top:92px;
  right:calc(max(40px, (100% - var(--maxw)) / 2 + 40px) + 40px);
  width:clamp(120px,10.5vw,156px);display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:3.5rem .85rem .9rem;text-align:center;color:var(--ink);background:var(--yellow);
  border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  transform-origin:50% 1.95rem;transform:rotate(4deg);animation:dhSwing 2.2s var(--ease) .9s both}
/* das Loch für die Türklinke, mit Klinke drin */
.dh::before{content:"";position:absolute;top:.85rem;left:50%;width:2.2rem;height:2.2rem;margin-left:-1.1rem;border-radius:50%;
  border:2px solid var(--ink);background:radial-gradient(circle,var(--ink) 0 34%,var(--paper) 36%)}
/* der Schlitz, mit dem man es über die Klinke schiebt */
.dh::after{content:"";position:absolute;top:0;left:50%;width:2px;height:.9rem;margin-left:-1px;background:var(--ink)}
.dh-kicker{font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.dh-title{font-family:var(--display);font-weight:900;font-size:clamp(1.35rem,2.05vw,1.9rem);line-height:.9;text-transform:uppercase}
.dh-sub{font-family:var(--mono);font-size:.6rem;line-height:1.35;color:var(--ink-soft)}
.dh-go{width:100%;margin-top:.25rem;padding-top:.45rem;border-top:2px solid var(--ink);font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase}
.dh:hover{animation:dhWiggle .9s var(--ease)}
.dh:hover .dh-go{background:var(--ink);color:var(--yellow)}
.dh:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@keyframes dhSwing{0%{transform:rotate(-16deg)}30%{transform:rotate(10deg)}55%{transform:rotate(-3deg)}78%{transform:rotate(6deg)}100%{transform:rotate(4deg)}}
@keyframes dhWiggle{0%{transform:rotate(4deg)}30%{transform:rotate(-5deg)}60%{transform:rotate(7deg)}100%{transform:rotate(4deg)}}

/* die zweite Headline-Zeile läuft fast über die volle Breite: das Schild muss darüber enden */
@media(max-width:1600px){.dh-sub{display:none}}
@media(min-width:921px) and (max-width:1400px){
  .dh{width:118px;padding:2.6rem .8rem .6rem;gap:.25rem;transform-origin:50% 1.5rem}
  .dh::before{top:.6rem;width:1.8rem;height:1.8rem;margin-left:-.9rem}
  .dh::after{height:.6rem}
  .dh-title{font-size:1.2rem}
  .dh-go{font-size:.56rem;letter-spacing:.02em;padding-top:.35rem}
}
@media(max-width:920px){
  .dh{top:84px;right:20px;width:88px;padding:2.85rem .5rem .6rem;gap:.25rem;box-shadow:4px 4px 0 var(--ink);transform-origin:50% 1.55rem}
  .dh::before{top:.65rem;width:1.8rem;height:1.8rem;margin-left:-.9rem}
  .dh::after{height:.7rem}
  .dh-kicker{font-size:.52rem;letter-spacing:.04em}
  .dh-title{font-size:1.05rem}
  .dh-sub{display:none}
  .dh-go{font-size:.56rem;padding-top:.3rem}
  /* Startseite DE: die Headline beginnt sonst neben dem Schild */
  .hero.has-dh{padding-top:238px}
}
@media(prefers-reduced-motion:reduce){
  .dh,.dh:hover{animation:none}
}