/* Familienhotel Litzi — „Der Möwenmoment" (Beispiel-Website von moinki; Hotel erfunden)
   Palette: Himmelblau #4FA8DE · Wolkenpapier #FBF7EC · Rügensand #EED9A4
            Boddenblau #21657F · Schiefer #46525C · Erdbeereis #E4607A */

@font-face{font-family:"DM Serif Display";src:url("assets/fonts/dm-serif-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"DM Serif Display";src:url("assets/fonts/dm-serif-display-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Supreme";src:url("assets/fonts/supreme-vf.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Supreme";src:url("assets/fonts/supreme-vf-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap;}
@font-face{font-family:"DM Mono";src:url("assets/fonts/dm-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"DM Mono";src:url("assets/fonts/dm-mono-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"DM Mono";src:url("assets/fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}

:root{
  --himmel:#4FA8DE;
  --papier:#FBF7EC;
  --sand:#EED9A4;
  --bodden:#21657F;
  --schiefer:#46525C;
  --eis:#E4607A;
  --gold:#F7A810;   /* Logo-Gold (FAMILIENHOTEL-Zeile) — Farbe aller Buttons */
  --tiefgold:#C88405;
  --tinte:#2C3A44;
  --display:"DM Serif Display", Georgia, serif;
  --body:"Supreme", system-ui, sans-serif;
  --mono:"DM Mono", "Courier New", monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  font-family:var(--body);
  color:var(--tinte);
  background:var(--himmel);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
:focus-visible{outline:3px solid var(--tiefgold);outline-offset:3px;border-radius:4px;}

/* ---------------------------------------------------------------- Bühne */
#meerblick{position:fixed;inset:0;overflow:hidden;background:var(--himmel);}
#stage{position:absolute;}
#stage img,#stage video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:fill; /* Stage-Container IST bereits der Cover-Ausschnitt */
  display:block;
}
#plate{z-index:3;}
#kino-video{z-index:2;}
#bild{z-index:1;}

/* ---------------------------------------------------------------- Kopf */
#kopf{
  position:fixed;top:calc(var(--mk-oben,0px) + max(1.4rem, env(safe-area-inset-top)));left:1.8rem;z-index:20;
  pointer-events:none;
  display:grid;justify-items:start;
}
#logo-schild{
  display:inline-block;
  background:var(--papier);
  border:2px solid var(--tinte);border-radius:10px;
  padding:.6rem .95rem .7rem;
  transform:rotate(-1.4deg);
  box-shadow:0 3px 0 rgba(44,58,68,.9), 0 10px 24px rgba(33,101,127,.35);
}
#logo{display:block;height:clamp(52px, 5.4vw, 74px);width:auto;}
#untermarke{
  font-family:var(--mono);font-size:clamp(.72rem, 1.1vw, .9rem);
  color:var(--bodden);margin-top:.6rem;margin-left:.95rem;letter-spacing:.14em;
  background:rgba(251,247,236,.75);
  display:inline-block;padding:.14em .55em;border-radius:999px;
  transform:rotate(-1.4deg);
}

/* ---------------------------------------------------------------- Buchen-Schild */
#buchen-schild{
  position:fixed;top:calc(var(--mk-oben,0px) + max(1.3rem, env(safe-area-inset-top)));right:1.6rem;z-index:22;
  background:var(--gold);
  border:2px solid var(--tinte);border-radius:10px;
  padding:.55rem 1.05rem .6rem;
  transform:rotate(2deg);
  box-shadow:0 3px 0 rgba(44,58,68,.9), 0 10px 24px rgba(33,101,127,.35);
  text-align:center;
  transition:transform .18s ease;
}
#buchen-schild:hover{transform:rotate(0deg) scale(1.04);}
.bs-zimmerfrei{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinte);
}
.bs-buchen{
  display:block;font-family:var(--display);font-size:1.25rem;line-height:1.1;
  color:var(--tinte);margin-top:.1rem;white-space:nowrap;
}

/* ---------------------------------------------------------------- Hotspots + Etiketten */
#hotspots{position:fixed;z-index:10;}
.zone{
  position:absolute;left:0;top:0;transform-origin:0 0;
  border-radius:6px;
  /* unsichtbare Klickfläche im Bild */
}
.zone:focus-visible{outline:3px dashed var(--papier);outline-offset:-3px;}

#etiketten{position:fixed;inset:0;z-index:12;pointer-events:none;}
.etikett{
  position:absolute;pointer-events:auto;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  background:var(--papier);
  border:1.6px solid var(--tinte);
  border-radius:8px;
  padding:.32rem .7rem .36rem;
  font-family:var(--display);
  font-size:clamp(.82rem, 1.15vw, 1.02rem);
  color:var(--tinte);
  box-shadow:0 2px 0 rgba(44,58,68,.85), 0 6px 16px rgba(33,101,127,.3);
  white-space:nowrap;
  transition:transform .16s ease, background .16s ease;
}
.etikett::after{ /* kleiner Faden-Punkt wie eine Stecknadel */
  content:"";position:absolute;left:50%;top:-5px;width:7px;height:7px;
  transform:translateX(-50%);
  background:var(--gold);border:1.4px solid var(--tinte);border-radius:50%;
}
.etikett:hover,.zone:hover ~ #etiketten .etikett{background:#fff;}
.etikett:hover{transform:translate(-50%,-50%) rotate(0deg) scale(1.09);}

/* ---------------------------------------------------------------- Intro */
#intro-skip{
  position:fixed;right:1.4rem;bottom:calc(var(--mk-unten,0px) + max(1.3rem, env(safe-area-inset-bottom)));z-index:30;
  font-family:var(--mono);font-size:.85rem;letter-spacing:.08em;
  color:var(--tinte);background:var(--gold);
  padding:.5rem .95rem;border-radius:999px;
  border:1.4px solid var(--tinte);
  box-shadow:0 2px 0 rgba(44,58,68,.85);
}
#intro-skip:hover{transform:translateY(-1px);}
/* ---------------------------------------------------------------- Content-Ebene (echte Website-Inhalte) */
#inhalt-ebene{
  position:fixed;inset:var(--mk-oben,0px) 0 var(--mk-unten,0px);z-index:34;
  background:rgba(33,101,127,.42);
  backdrop-filter:blur(4px);
  display:grid;place-items:center;
  padding:clamp(.6rem, 2vw, 2rem);
}
#inhalt-panel{
  position:relative;
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  width:min(1120px, 96vw);
  height:min(88dvh, 760px);
  background:var(--papier);
  border:2px solid var(--tinte);
  border-radius:18px;
  box-shadow:0 5px 0 rgba(44,58,68,.9), 0 28px 70px rgba(20,50,66,.5);
  overflow:hidden;
}
#inhalt-zu{
  position:absolute;top:.8rem;right:.8rem;z-index:5;
  width:42px;height:42px;border-radius:50%;
  background:var(--gold);border:2px solid var(--tinte);
  font-size:1.4rem;line-height:1;color:var(--tinte);
  box-shadow:0 2px 0 rgba(44,58,68,.9);
}
#inhalt-zu:hover{background:#fff;}
.ip-medien{
  position:relative;min-height:0;
  display:flex;flex-direction:column;
  border-right:2px solid var(--tinte);
  background:var(--sand);
}
.ip-hero{
  flex:1;min-height:0;width:100%;
  object-fit:cover;display:block;
}
.ip-thumbs{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:2px solid var(--tinte);
}
.ip-thumb{
  width:100%;height:clamp(84px, 12vh, 118px);
  object-fit:cover;display:block;
}
.ip-thumb1{border-right:2px solid var(--tinte);}
.ip-inhalt{
  min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
  padding:clamp(1.4rem, 3vw, 2.3rem) clamp(1.4rem, 3vw, 2.4rem) 5.5rem;
  display:flex;flex-direction:column;align-items:flex-start;
}
.ip-eyebrow{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bodden);
}
#ip-titel{
  font-family:var(--display);font-weight:400;line-height:1.05;
  font-size:clamp(1.9rem, 3.3vw, 2.75rem);
  margin-top:.3rem;padding-right:5.2rem;
}
.ip-lead{margin-top:.85rem;font-size:1.08rem;line-height:1.55;font-weight:500;}
.ip-fakten{
  list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;
  margin-top:1rem;
}
.ip-fakten li{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  color:var(--tinte);background:#fff;
  border:1.4px solid var(--tinte);border-radius:999px;
  padding:.28em .75em .32em;
}
.ip-liste{list-style:none;margin-top:1.05rem;}
.ip-liste li{
  font-size:1rem;line-height:1.5;margin-top:.65em;padding-left:1.45em;position:relative;
}
.ip-liste li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--tiefgold);font-weight:700;
}
.ip-beweis{
  margin-top:auto;padding-top:1.2rem;line-height:1.45;
  font-family:var(--mono);font-style:italic;font-size:.88rem;color:var(--bodden);
}
.ip-stempel{
  position:absolute;top:4.6rem;right:1.1rem;z-index:5;
  border:1.6px solid var(--eis);border-radius:6px;
  padding:.3em .55em;text-align:center;
  transform:rotate(6deg);color:var(--eis);
  pointer-events:none;
}
.ip-stempel span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;}
.ip-stempel em{display:block;font-family:var(--mono);font-style:italic;font-size:.5rem;margin-top:.15em;color:var(--bodden);}
.ip-ctas{
  position:absolute;right:0;bottom:0;width:54%;z-index:4;
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  padding:.9rem clamp(1.4rem, 3vw, 2.4rem) 1rem;
  background:linear-gradient(to top, var(--papier) 72%, transparent);
}
.ip-cta{
  display:inline-block;
  font-family:var(--display);font-size:1.15rem;
  color:var(--tinte);background:var(--gold);
  border:2px solid var(--tinte);border-radius:999px;
  padding:.48em 1.25em .55em;
  text-decoration:none;
  box-shadow:0 3px 0 rgba(44,58,68,.9);
  transition:transform .15s ease;
}
.ip-cta:hover{transform:translateY(-2px) rotate(-1deg);}
.ip-tel{
  font-family:var(--mono);font-size:.85rem;color:var(--tinte);
  text-decoration:underline;text-underline-offset:3px;
}
.ip-tel:hover{color:var(--tiefgold);}

/* ---------------------------------------------------------------- Buchen-Panel */
#buchen-ebene{
  position:fixed;inset:var(--mk-oben,0px) 0 var(--mk-unten,0px);z-index:40;
  background:rgba(33,101,127,.45);
  backdrop-filter:blur(4px);
  display:grid;place-items:center;
  padding:1rem;
}
#buchen-panel{
  position:relative;
  width:min(430px, 100%);
  max-height:min(92dvh, 46rem);
  overflow:auto;
  background:var(--papier);
  border:2px solid var(--tinte);
  border-radius:16px;
  box-shadow:0 4px 0 rgba(44,58,68,.9), 0 22px 60px rgba(20,50,66,.45);
  padding:1.5rem 1.6rem 1.4rem;
}
#buchen-zu,#legal-zu{
  position:absolute;top:.7rem;right:.7rem;
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--tinte);background:var(--gold);
  font-size:1.3rem;line-height:1;
}
.bu-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bodden);}
#bu-titel{font-family:var(--display);font-weight:400;font-size:2rem;margin-top:.2rem;}
#buchen-form{margin-top:1rem;}
.bu-zeile{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.7rem;}
#buchen-form label{
  display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bodden);
}
#buchen-form input,#buchen-form select{
  display:block;width:100%;margin-top:.3rem;
  font-family:var(--body);font-size:1rem;color:var(--tinte);
  background:#fff;border:1.6px solid var(--schiefer);border-radius:9px;
  padding:.55rem .6rem;
}
#buchen-form input:focus-visible,#buchen-form select:focus-visible{outline:3px solid var(--tiefgold);outline-offset:1px;}
.bu-los{
  width:100%;margin-top:1.1rem;
  font-family:var(--display);font-size:1.25rem;
  color:var(--tinte);background:var(--gold);
  border:2px solid var(--tinte);border-radius:999px;
  padding:.65rem 1rem .7rem;
  box-shadow:0 3px 0 rgba(44,58,68,.9);
  transition:transform .15s ease;
}
.bu-los:hover{transform:translateY(-2px);}
.bu-hinweis{margin-top:.55rem;font-size:.8rem;color:var(--schiefer);line-height:1.4;}
.bu-alt{
  margin-top:1.1rem;padding-top:.9rem;border-top:1.6px dashed var(--schiefer);
  font-size:.92rem;
}
.bu-alt p{font-family:var(--mono);font-style:italic;color:var(--bodden);}
.bu-alt a{display:block;margin-top:.3rem;color:var(--tinte);font-weight:700;text-decoration:none;}
.bu-alt a:hover{color:var(--tiefgold);}

/* ---------------------------------------------------------------- Legal */
#legal-ebene{
  position:fixed;inset:var(--mk-oben,0px) 0 var(--mk-unten,0px);z-index:44;
  background:rgba(33,101,127,.45);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:1rem;
}
#legal-panel{
  position:relative;width:min(560px,100%);
  max-height:min(88dvh,44rem);overflow:auto;
  background:var(--papier);border:2px solid var(--tinte);border-radius:16px;
  box-shadow:0 4px 0 rgba(44,58,68,.9), 0 22px 60px rgba(20,50,66,.45);
  padding:1.6rem 1.7rem 1.5rem;
}
.lg-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bodden);}
#lg-titel{font-family:var(--display);font-weight:400;font-size:1.9rem;margin-top:.2rem;}
.lg-scroll{margin-top:.9rem;font-size:.92rem;line-height:1.55;}
.lg-scroll h3{font-family:var(--body);font-weight:700;font-size:1rem;margin-top:1rem;}
.lg-scroll p{margin-top:.35rem;}
.lg-scroll a{color:var(--bodden);}

/* ---------------------------------------------------------------- Ton + Fuß */
#ton{
  position:fixed;left:1.3rem;bottom:calc(var(--mk-unten,0px) + max(1.2rem, env(safe-area-inset-bottom)));z-index:26;
  width:46px;height:46px;border-radius:50%;
  background:var(--gold);
  border:2px solid var(--tinte);
  color:var(--tinte);
  display:grid;place-items:center;
  box-shadow:0 2px 0 rgba(44,58,68,.85), 0 8px 18px rgba(33,101,127,.3);
}
#ton svg{width:24px;height:24px;}
#ton .ton-aus{opacity:1;transition:opacity .2s;}
#ton[aria-pressed="true"] .ton-aus{opacity:0;}
#ton[aria-pressed="true"]{color:var(--tinte);}

#fuss{
  position:fixed;left:50%;bottom:calc(var(--mk-unten,0px) + max(.55rem, env(safe-area-inset-bottom)));transform:translateX(-50%);
  z-index:18;display:flex;gap:1rem;align-items:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
  color:#fff;background:rgba(33,101,127,.55);
  padding:.32rem .9rem;border-radius:999px;
  backdrop-filter:blur(3px);
  white-space:nowrap;
}
#fuss a{color:#fff;}
#fuss button{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-decoration:underline;color:#fff;}
#fuss button:hover,#fuss a:hover{color:var(--sand);}

/* ---------------------------------------------------------------- Mobil */
@media (max-width:720px){
  #kopf{left:1.1rem;}
  #logo-schild{padding:.45rem .7rem .55rem;border-radius:8px;}
  #logo{height:48px;}
  #buchen-schild{
    top:auto;right:auto;
    left:50%;bottom:calc(var(--mk-unten,0px) + max(3.2rem, calc(env(safe-area-inset-bottom) + 2.6rem)));
    transform:translateX(-50%) rotate(0deg);
    display:flex;gap:.7rem;align-items:baseline;
    padding:.5rem 1.2rem .55rem;
  }
  #buchen-schild:hover{transform:translateX(-50%) scale(1.03);}
  .bs-zimmerfrei{font-size:.6rem;}
  .bs-buchen{font-size:1.15rem;}
  #intro-skip{right:50%;transform:translateX(50%);}
  #inhalt-ebene{padding:.55rem;}
  #inhalt-panel{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,40%) minmax(0,60%);
    width:100%;height:calc(100dvh - 1.1rem);
    border-radius:14px;
  }
  .ip-medien{border-right:none;border-bottom:2px solid var(--tinte);}
  .ip-thumb{height:72px;}
  .ip-inhalt{padding:1.15rem 1.2rem 6.4rem;}
  #ip-titel{font-size:1.72rem;padding-right:2.6rem;}
  .ip-lead{font-size:.98rem;}
  .ip-fakten li{font-size:.64rem;}
  .ip-ctas{width:100%;padding:.85rem 1.2rem 1rem;gap:.85rem;}
  .ip-cta{font-size:1.02rem;}
  #inhalt-zu{top:.65rem;right:.65rem;width:40px;height:40px;}
  .ip-stempel{display:none;}
  #ton{left:auto;right:1rem;bottom:calc(var(--mk-unten,0px) + max(1rem, env(safe-area-inset-bottom)));width:42px;height:42px;}
  #fuss{gap:.3rem .7rem;font-size:.6rem;padding:.3rem .8rem;bottom:calc(var(--mk-unten,0px) + max(.4rem, env(safe-area-inset-bottom)));
        left:.5rem;transform:none;max-width:calc(100vw - 4.2rem);
        white-space:normal;flex-wrap:wrap;border-radius:12px;}
  .bu-zeile{grid-template-columns:1fr;}
  #buchen-panel{padding:1.2rem 1.2rem 1.1rem;}
}

/* ---------------------------------------------------------------- Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}