/* Unterseiten: absolute Bühne wie bei Wix. Desktop-Lage aus --x/--y/--w/--h
   (Bühne 1265 px, mittig), Handy-Lage aus --mx/--my/--mw/--mh in 320stel
   der Bildschirmbreite (--u). Klassen d/m: nur Desktop bzw. nur Handy. */
.pg{ position:relative; overflow:hidden; }
.pg > *{ position:absolute; box-sizing:border-box; margin:0; }
.tb{ padding:0; }
.li-ul{ display:list-item; list-style:disc outside; }
.li-ol{ display:list-item; list-style:decimal outside; }
.im{ overflow:hidden; }
.im img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv svg{ width:100%; height:100%; display:block; fill:currentColor; }
.bt{ display:flex; align-items:center; justify-content:center; text-decoration:none; padding:0 6px; white-space:nowrap; }
.bt:hover{ filter:brightness(.94); }
.fd{ padding:0 12px; font-family:inherit; outline:none; }
.fd:focus{ box-shadow:0 0 0 2px var(--gelb); }
textarea.fd{ padding:10px 12px; resize:vertical; }


@media (min-width:750px){
  .pg{ height:var(--hd); background-attachment:fixed; background-size:cover; background-position:center top; }
  .pg > *{ left:calc(50% - 632.5px + var(--x) * 1px); top:calc(var(--y) * 1px); width:calc(var(--w) * 1px); }
  .pg > .bx, .pg > .im, .pg > .sv, .pg > .bt, .pg > .fd, .pg > .sl{ height:calc(var(--h) * 1px); }
  .pg > .voll{ left:0; width:100%; }
}
@media (max-width:749.98px){
  /* Handy: Karte als feste Ebene hinter der Seite (wie am Desktop), statt sie
     dreimal untereinander zu wiederholen (Hermann, 20.09.2026). */
  .pg{ height:calc(var(--hm) * var(--u)); background:none; }
  .pg.karte::before{ content:""; position:fixed; inset:0; z-index:-1;
    background:url(../img/karte-norddeutschland.jpg) center/cover no-repeat; }
  .pg > *{ left:calc(var(--mx) * var(--u)); top:calc(var(--my) * var(--u)); width:calc(var(--mw) * var(--u)); }
  .pg > .bx, .pg > .im, .pg > .sv, .pg > .bt, .pg > .fd, .pg > .sl{ height:calc(var(--mh) * var(--u)); }
  .bt{ padding:0 calc(6 * var(--u)); }
  .fd{ padding:0 calc(12 * var(--u)); }
}

/* Kontaktformular: Beschriftungen (Wix-Labels), Erfolgsmeldung, Honigtopf */
.lb{ font:300 14px/20px 'Lato',sans-serif; color:#fff; }
.formular-ok{ display:none; }
.ok .formular-ok{ display:block; }
.honig{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
button.bt{ cursor:pointer; font-family:inherit; }
.tb a{ text-decoration:none; }
.tb u a, .tb a u{ text-decoration:underline; }
@media (max-width:749.98px){ .lb{ font-size:calc(14 * var(--u)); line-height:calc(20 * var(--u)); } }

/* Diashow (Wix-Streifen mit 6 Folien): wischen, Pfeile, Punkte; ohne Skript
   scrollt der Streifen einfach seitlich. */
.sl{ overflow:hidden; }
.sl__track{ display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.sl__track::-webkit-scrollbar{ display:none; }
.sl__s{ position:relative; flex:0 0 100%; height:100%; scroll-snap-align:start; overflow:hidden; }
.sl__s > *{ position:absolute; box-sizing:border-box; margin:0; }
.sl__pfeil{ position:absolute; z-index:2; padding:0; border:0; background:none; color:#28292B; cursor:pointer; }
.sl__pfeil svg{ width:100%; height:100%; display:block; }
.sl__dots{ position:absolute; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.sl__dot{ width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#807239; cursor:pointer; }
.sl__dot.aktiv{ width:9px; height:9px; background:transparent; border:2px solid #807239; }
@media (min-width:750px){
  .sl__s > *{ left:calc(50% - 632.5px + var(--x) * 1px); top:calc(var(--y) * 1px); width:calc(var(--w) * 1px); }
  .sl__s > .bx, .sl__s > .bt{ height:calc(var(--h) * 1px); }
  .sl__s > .voll{ left:0; width:100%; }
  .sl__pfeil, .sl__dots{ left:calc(50% - 632.5px + var(--x) * 1px); top:calc(var(--y) * 1px); width:calc(var(--w) * 1px); height:calc(var(--h) * 1px); }
}
@media (max-width:749.98px){
  .sl__s > *{ left:calc(var(--mx) * var(--u)); top:calc(var(--my) * var(--u)); width:calc(var(--mw) * var(--u)); }
  .sl__s > .bx, .sl__s > .bt{ height:calc(var(--mh) * var(--u)); }
  .sl__s > .voll{ left:0; width:100%; }
  .sl__pfeil, .sl__dots{ left:calc(var(--mx) * var(--u)); top:calc(var(--my) * var(--u)); width:calc(var(--mw) * var(--u)); height:calc(var(--mh) * var(--u)); }
  .sl__pfeil{ width:calc(var(--mw) * var(--u) + 16px); margin-left:-8px; }
}
@media (prefers-reduced-motion:reduce){ .sl__track{ scroll-behavior:auto; } }