/* Provence Vaucluse, statische Fassung, V1.0 */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-top:94px;
  background:#eeeeee;
  color:#616161;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:16px;
  line-height:1.65;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
#content-wrap{flex:1 0 auto}
#footer-bottom{flex-shrink:0}
img{border:0;max-width:100%;height:auto;display:block}
a{color:#570be5;text-decoration:none}
a:hover{text-decoration:underline}

.container{width:980px;max-width:90%;margin:0 auto}

/* Kopfbereich */
#site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:#c7c7f9;padding:30px 0}
#site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
#site-logo{flex:0 0 auto}
#site-logo img{width:210px;height:auto}
#site-navigation ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:29px}
#site-navigation a{display:block;padding:0 4px;font-size:16px;color:#616161;font-weight:400;white-space:nowrap}
#site-navigation a:hover{color:#570be5;text-decoration:none}
#site-navigation .current-menu-item a{color:#570be5;font-weight:700}
@media (max-width:1100px){
  #site-navigation ul{gap:16px}
  #site-logo img{width:170px}
}
@media (max-width:960px){
  #site-navigation ul{gap:11px}
  #site-navigation a{font-size:15px}
  #site-logo img{width:140px}
}
@media (max-width:880px){
  #site-navigation ul{gap:8px}
  #site-navigation a{font-size:14px}
  #site-logo img{width:120px}
}

/* Inhalt */
#content-wrap{margin-top:40px}
#content-wrap .container{padding:30px 0}
.single-page-content h1{font-size:28px;font-weight:400;color:#4a4a4a;line-height:1.3;margin:0 0 18px}
.single-page-content h2{font-size:24px;font-weight:400;color:#4a4a4a;line-height:1.3;margin:32px 0 16px}
.single-page-content h2:first-child{margin-top:0}
.single-page-content h3{font-size:20px;font-weight:400;color:#4a4a4a;line-height:1.35;margin:26px 0 10px}
.single-page-content h4{font-size:17px;font-weight:700;color:#4a4a4a;line-height:1.4;margin:20px 0 8px}
.single-page-content p{margin:0 0 20px}
.single-page-content ul{margin:0 0 24px;padding-left:46px}
.single-page-content ul li{margin:0 0 2px}
.single-page-content ul.kreis{list-style:circle}

/* Bildfolge */
.bildfolge{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#e4e4e4;margin:0 0 20px}
.bildfolge.quer{aspect-ratio:4/3}
.bildfolge figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.bildfolge figure.aktiv{opacity:1;pointer-events:auto}
.bildfolge img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}

.bildfolge .pfeil{
  position:absolute;top:0;bottom:0;width:16%;min-width:54px;max-width:90px;
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  color:#fff;font-family:inherit;font-size:52px;line-height:1;
  text-shadow:0 0 7px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.7);
  opacity:.8;transition:opacity .2s ease;
  display:flex;align-items:center;z-index:2;
}
.bildfolge .pfeil.zurueck{left:0;justify-content:flex-start;padding-left:12px;
  background:linear-gradient(to right,rgba(0,0,0,.38),rgba(0,0,0,0))}
.bildfolge .pfeil.vor{right:0;justify-content:flex-end;padding-right:12px;
  background:linear-gradient(to left,rgba(0,0,0,.38),rgba(0,0,0,0))}
.bildfolge .pfeil:hover,.bildfolge .pfeil:focus-visible{opacity:1}
.bildfolge .pfeil:focus-visible{outline:2px solid #fff;outline-offset:-4px}

.bildfolge .punkte{
  position:absolute;left:0;right:0;bottom:14px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.bildfolge .punkt{
  width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.95);
  background:rgba(0,0,0,.25);padding:0;cursor:pointer;appearance:none;
  box-shadow:0 0 3px rgba(0,0,0,.5);
}
.bildfolge .punkt[aria-current="true"]{background:#fff}

/* In den grossen Bildfolgen sind die Pfeile doppelt so gross */
.bildfolge:not(.quer) .pfeil{font-size:104px;min-width:80px;max-width:130px}
@media (max-width:520px){
  .bildfolge .pfeil{font-size:40px;min-width:44px}
  .bildfolge:not(.quer) .pfeil{font-size:64px;min-width:52px}
}

/* Einzelbild, das sich vergroessern laesst */
img.lupe{cursor:zoom-in}

/* Leuchtkasten */
#leuchtkasten{
  position:fixed;inset:0;z-index:1000;background:rgba(18,18,20,.96);
  display:flex;align-items:center;justify-content:center;
}
#leuchtkasten[hidden]{display:none}
#leuchtkasten img{max-width:92vw;max-height:84vh;width:auto;height:auto;
  object-fit:contain;box-shadow:0 6px 40px rgba(0,0,0,.6)}
#leuchtkasten .lk-knopf{
  position:absolute;appearance:none;background:none;border:0;padding:0;cursor:pointer;
  color:#fff;font-family:inherit;line-height:1;opacity:.75;
  text-shadow:0 1px 6px rgba(0,0,0,.8);transition:opacity .2s ease;
}
#leuchtkasten .lk-knopf:hover,#leuchtkasten .lk-knopf:focus-visible{opacity:1}
#leuchtkasten .lk-knopf:focus-visible{outline:2px solid #fff;outline-offset:4px}
#leuchtkasten .lk-schliessen{top:18px;right:26px;font-size:46px}
#leuchtkasten .lk-zurueck{left:0;top:0;bottom:0;width:15%;min-width:70px;font-size:80px;
  display:flex;align-items:center;justify-content:flex-start;padding-left:18px}
#leuchtkasten .lk-vor{right:0;top:0;bottom:0;width:15%;min-width:70px;font-size:80px;
  display:flex;align-items:center;justify-content:flex-end;padding-right:18px}
#leuchtkasten .lk-text{
  position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;
  color:#e6e6e6;font-size:15px;padding:0 90px;
}
#leuchtkasten .lk-zaehler{color:#9a9a9a;margin-right:10px}
@media (max-width:520px){
  #leuchtkasten .lk-zurueck,#leuchtkasten .lk-vor{font-size:52px;min-width:52px}
  #leuchtkasten .lk-text{padding:0 60px;font-size:14px}
  #leuchtkasten img{max-height:76vh}
}

/* Zwei Spalten, Räume und Ausstattung */
.raeume{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:0}
.raeume .raum{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.raeume .raumtitel{margin:0 0 20px;align-self:end}
.raeume .bildfolge{margin:0 0 34px}
@media (max-width:820px){
  .raeume{grid-template-columns:1fr}
  .raeume .raum{display:block;grid-row:auto}
}

/* Karte */
figure.karte-block{margin:0 0 20px}
svg.karte{width:100%;height:auto;display:block}
figure.karte-block figcaption{font-size:14px;color:#8a8a8a;padding-top:8px}

/* Fußbereich */
#footer-bottom{background:#e6e6fa;color:#9e9e9e;text-align:center;padding:20px 0;font-size:14.77px;margin-top:30px}
#footer-bottom a{color:#777777}
#footer-bottom a:hover{color:#570be5}

#site-scroll-top{position:fixed;right:20px;bottom:20px;width:35px;height:35px;border-radius:9999px;background:#f7f7f7;color:#9e9e9e;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
#site-scroll-top:hover{text-decoration:none}

@media (max-width:820px){
  body{padding-top:0}
  #site-header{position:static;padding:18px 0}
  #site-header-inner{flex-direction:column;gap:14px}
  #site-navigation ul{flex-wrap:wrap;justify-content:center;gap:8px 20px}
}